/* ---------------------------------------------------------------------------
   Sign-in screen — Planning & Development Single Window System
   Scoped to body[data-path="login"], which also covers the sign-up, forgot
   password and email-link panels frappe renders on the same route.

   Written against the Frappe v16 login markup (.email-field, .field-icon,
   .toggle-password). Palette is the existing CHPA brand from web.css.
--------------------------------------------------------------------------- */

body[data-path="login"] {
  --sw-blue: #3e4095;
  --sw-blue-hover: #34366f;
  --sw-blue-deep: #23244f;
  --sw-red: #ed3339;
  --sw-ink: #1c1d1d;
  --sw-body: #5a5c6b;
  --sw-line: #dcdee8;
  --sw-field-bg: #ffffff;
  --sw-panel-w: 46%;
}

/* ---------- page frame -------------------------------------------------- */

body[data-path="login"] {
  min-height: 100vh;
  margin: 0;
  padding-left: var(--sw-panel-w);
  background: #ffffff !important;
  background-image: none !important;
}

body[data-path="login"] #page-login {
  /* frappe's login bundle sets an explicit height here; left alone it clips
     the card and the page footer rides up over the sign-up line. */
  height: auto;
  min-height: calc(100vh - 96px);
  /* body is a flex column here, so this is a flex item — never let it shrink
     below its own content, or the card clips and the footer rides over it. */
  flex: 1 0 auto;
  display: flex;
  /* "safe" so that if the card is ever taller than the viewport it grows
     downward instead of overflowing off the top, where it would be
     unreachable behind the brand panel. */
  align-items: safe center;
  justify-content: center;
}

/* frappe's login bundle puts a viewport-height min-height on the content
   chain, which fights the centring above. Let the card be its own height. */
body[data-path="login"] .page-content-wrapper,
body[data-path="login"] .page_content,
body[data-path="login"] section[class^="for-"],
body[data-path="login"] .login-content.page-card {
  min-height: 0;
  height: auto;
}

body[data-path="login"] main.container {
  max-width: 460px;
  width: 100%;
  padding: 48px 32px;
}

/* frappe renders an empty header block above the card */
body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-footer { display: none; }

/* ---------- brand panel (injected by web.js) ---------------------------- */

.sw-login-brand {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sw-panel-w, 46%);
  padding: 56px 5% 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  color: #ffffff;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(158deg, #3e4095 0%, #2c2e6d 56%, #23244f 100%);
  overflow: hidden;
  z-index: 1;
}

/* faint architectural texture, kept well behind the type. Masked into the
   gradient so it reads as tone rather than a pasted rectangle. */
.sw-login-brand::after {
  content: "";
  position: absolute;
  right: -16%;
  bottom: -10%;
  width: 92%;
  height: 76%;
  background: url("/assets/single_window/images/scheme.png") no-repeat right bottom / contain;
  opacity: .07;
  filter: grayscale(1);
  -webkit-mask-image: linear-gradient(to top left, #000 4%, rgba(0, 0, 0, .35) 38%, transparent 74%);
  mask-image: linear-gradient(to top left, #000 4%, rgba(0, 0, 0, .35) 38%, transparent 74%);
  pointer-events: none;
}

.sw-login-brand > * { position: relative; z-index: 1; }

.sw-brand-logo {
  width: auto;
  height: 62px;
  max-width: 260px;
  object-fit: contain;
  object-position: left center;
}

.sw-brand-eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.sw-brand-title {
  /* Bootstrap, in frappe's website bundle, sets a dark colour on every
     h1-h6. A rule on the element beats the white this panel hands down to
     its children, so the headline came out near-black on the blue. Said
     here explicitly. */
  color: #ffffff;
  margin: 0 0 14px;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 15ch;
}

/* the one place the brand red appears — a short rule under the headline */
.sw-brand-rule {
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--sw-red, #ed3339);
  margin-bottom: 18px;
}

.sw-brand-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
  max-width: 42ch;
}

.sw-brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sw-brand-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}

.sw-brand-list svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: #ffffff;
  opacity: .95;
}

.sw-brand-foot {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .58);
}

/* ---------- the card ---------------------------------------------------- */

body[data-path="login"] .login-content.page-card,
body[data-path="login"] .page-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body[data-path="login"] .page-card-head {
  text-align: left;
  margin-bottom: 30px;
  padding: 0;
  border: none;
}

/* the small logo tile is redundant beside the brand panel */
body[data-path="login"] .page-card-head .app-logo { display: none; }

body[data-path="login"] .page-card-head-text,
body[data-path="login"] .page-card-head h4 {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sw-ink);
}

body[data-path="login"] .page-card-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sw-body);
}

/* ---------- fields ------------------------------------------------------ */

/* The fields, buttons and messages are scoped by #page-login as well: frappe
   16's login bundle styles them as `.for-login .page-card .page-card-body
   input` and the like, which outranks a body[data-path] rule, so without the
   id the inputs stayed frappe's 28px, the labels its pale grey, and the
   buttons showed no keyboard focus ring. */

body[data-path="login"] #page-login .form-group { margin-bottom: 20px; }

body[data-path="login"] #page-login .form-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #43455a;
}

body[data-path="login"] #page-login .email-field,
body[data-path="login"] #page-login .password-field { position: relative; }

body[data-path="login"] #page-login .form-control {
  width: 100%;
  height: 48px;
  padding: 12px 44px 12px 42px;
  font-size: 15px;
  color: var(--sw-ink);
  background: var(--sw-field-bg);
  border: 1px solid var(--sw-line);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

body[data-path="login"] #page-login .form-control::placeholder { color: #9a9db0; }

body[data-path="login"] #page-login .form-control:hover { border-color: #c3c6d6; }

body[data-path="login"] #page-login .form-control:focus {
  outline: none;
  border-color: var(--sw-blue);
  box-shadow: 0 0 0 4px rgba(62, 64, 149, .13);
}

/* leading icon */
body[data-path="login"] #page-login .field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: #9a9db0;
  pointer-events: none;
  transition: color .15s ease;
}

body[data-path="login"] #page-login .form-control:focus ~ .field-icon { color: var(--sw-blue); }

/* show/hide password */
body[data-path="login"] #page-login .toggle-password {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #8c8fa3;
  cursor: pointer;
  border-radius: 4px;
  transition: color .15s ease;
}

body[data-path="login"] #page-login .toggle-password:hover { color: var(--sw-blue); }

body[data-path="login"] #page-login .toggle-password:focus-visible {
  outline: 2px solid var(--sw-blue);
  outline-offset: 2px;
}

body[data-path="login"] #page-login .forgot-password-message {
  margin: 9px 0 0;
  text-align: right;
  font-size: 13.5px;
}

body[data-path="login"] #page-login .forgot-password-message a,
body[data-path="login"] #page-login .sign-up-message a,
body[data-path="login"] #page-login .resend-link {
  color: var(--sw-blue);
  font-weight: 600;
  text-decoration: none;
}

body[data-path="login"] #page-login .forgot-password-message a:hover,
body[data-path="login"] #page-login .sign-up-message a:hover,
body[data-path="login"] #page-login .resend-link:hover { text-decoration: underline; }

/* ---------- buttons ----------------------------------------------------- */

body[data-path="login"] #page-login .page-card-actions { margin-top: 26px; }

body[data-path="login"] #page-login .btn-login,
body[data-path="login"] #page-login .btn-signup,
body[data-path="login"] #page-login .btn-forgot {
  width: 100%;
  height: 48px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff !important;
  background: var(--sw-blue) !important;
  border: 1px solid var(--sw-blue) !important;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(35, 36, 79, .16);
  transition: background .15s ease, transform .06s ease;
}

body[data-path="login"] #page-login .btn-login:hover,
body[data-path="login"] #page-login .btn-signup:hover,
body[data-path="login"] #page-login .btn-forgot:hover {
  background: var(--sw-blue-hover) !important;
  border-color: var(--sw-blue-hover) !important;
}

body[data-path="login"] #page-login .btn-login:active { transform: translateY(1px); }

body[data-path="login"] #page-login .btn-login:focus-visible,
body[data-path="login"] #page-login .btn-login-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(62, 64, 149, .28);
}

/* secondary options — email link, SSO providers */
body[data-path="login"] #page-login .btn-login-option {
  width: 100%;
  height: 46px;
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: #3a3c4e !important;
  background: #ffffff !important;
  border: 1px solid var(--sw-line) !important;
  border-radius: 10px;
  transition: border-color .15s ease, background .15s ease;
}

body[data-path="login"] #page-login .btn-login-option:hover {
  background: #f6f7fb !important;
  border-color: #c3c6d6 !important;
}

/* a labelled divider above the alternative sign-in options */
body[data-path="login"] #page-login .social-logins { margin-top: 24px; position: relative; }

body[data-path="login"] #page-login .social-logins::before {
  content: "or continue with";
  display: block;
  position: relative;
  margin-bottom: 16px;
  font-size: 12px;
  color: #8c8fa3;
  text-align: center;
  background: #ffffff;
  padding: 0 12px;
  width: fit-content;
  margin-inline: auto;
  z-index: 1;
}

body[data-path="login"] #page-login .social-logins::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--sw-line);
  z-index: 0;
}

body[data-path="login"] #page-login .social-login-buttons { position: relative; z-index: 1; }

/* ---------- messages ---------------------------------------------------- */

body[data-path="login"] #page-login .login-error-banner,
body[data-path="login"] #page-login .login-success-banner {
  display: none;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 18px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 9px;
}

body[data-path="login"] #page-login .login-error-banner {
  color: #a3161b;
  background: #fdecec;
  border: 1px solid #f7c9cb;
}

body[data-path="login"] #page-login .login-success-banner {
  color: #1c5d33;
  background: #e9f6ee;
  border: 1px solid #c2e3ce;
}

/* frappe toggles these with .show / inline styles */
body[data-path="login"] #page-login .login-error-banner.show,
body[data-path="login"] #page-login .login-success-banner.show { display: flex; }

body[data-path="login"] #page-login .field-error {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--sw-red);
}

body[data-path="login"] #page-login .form-control.invalid,
body[data-path="login"] #page-login .form-control:invalid:not(:placeholder-shown) {
  border-color: var(--sw-red);
}

body[data-path="login"] #page-login .sign-up-message {
  margin-top: 26px;
  text-align: center;
  font-size: 14px;
  color: var(--sw-body);
}

/* ---------- page footer (CHPA / NDMA credit) ---------------------------- */

body[data-path="login"] > hr { display: none; }

body[data-path="login"] > center {
  padding: 0 32px 34px;
}

body[data-path="login"] > center .footer p {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8c8fa3;
}

body[data-path="login"] > center .footer img {
  height: 30px;
  width: auto;
  opacity: .82;
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 991px) {
  body[data-path="login"] { padding-left: 0; }

  /* relative, not static: the texture in ::after is absolutely placed, and
     with no positioned box to hold it, it hung off the page and gave phones
     a sideways scroll. */
  .sw-login-brand {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: 30px 24px 32px;
    gap: 18px;
  }

  .sw-brand-logo { height: 46px; }
  .sw-brand-title { font-size: 25px; max-width: none; }
  .sw-brand-sub { font-size: 14.5px; max-width: none; }

  /* the value list and credit are noise on a phone-sized header */
  .sw-brand-list,
  .sw-brand-foot { display: none; }

  .sw-login-brand::after { opacity: .07; }

  /* plain flow under the header band — no centring to overflow out of */
  body[data-path="login"] #page-login {
    display: block;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
  }

  .sw-login-brand { flex: 0 0 auto; }
  body[data-path="login"] main.container { padding: 34px 22px 24px; }
}

@media (max-width: 420px) {
  body[data-path="login"] .page-card-head-text,
  body[data-path="login"] .page-card-head h4 { font-size: 23px; }
  .sw-brand-title { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-path="login"] * { transition: none !important; }
}