/* ==========================================================================
   Vedanta mGrant — Login "Living Seam" styles
   Path: vedanta/public/css/login.css
   Auth route: /login (vedanta/www/login.html)

   SANCTIONED HEX EXCEPTION (per login-design-brief.md §C.3):
   Only two literal kinds remain here: (1) rgba() composites (shadows, overlays,
   focus rings) and (2) bare #fff for white-knockout / text on the dark hero.
   Both are route-local — NOT brand tokens — so they are exempt from the
   zero-hex rule. Every brand solid AND every named neutral now uses
   var(--ved-*) from design_tokens.css (icon, placeholder, muted, line-strong,
   surface-hover, seam-mid were tokenised 2026-06-07 to match Akamai grade).
   scripts/validate_fixtures.py whitelists THIS FILE for hex; no other file may
   carry brand-solid hex literals.
   ========================================================================== */

/* Brand fonts — served from Google Fonts (preconnect in login.html head) */

/* ---------- Base reset (scoped to auth page) ---------- */
.login-container *, .login-container *::before, .login-container *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- Page wrapper (page split: hero | form-panel, flex ROW) ---------- */
.login-container {
  display: flex;
  /* Fixed viewport height — NOT min-height. min-height grows with content and
     was the source of the 296px whole-page overflow. Locking to 100vh keeps the
     split panel pinned to the viewport; any overflow is handled INSIDE
     .form-panel (overflow-y:auto) so the page itself never scrolls. */
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* ============================================================
   HERO PANEL (left, 60%)
   ============================================================ */
.hero {
  position: relative;
  flex: 0 0 60%;
  /* Hero children (.carousel/.slide) are position:absolute, so the hero has no
     intrinsic height. login.js's reset_sections()/login.login() use jQuery
     .toggle(), which can momentarily set .login-container to display:block;
     when that happens the flex context is lost and the hero collapses to 0
     height — the image, SDG badge, and copy all disappear. The PATCH (b)
     MutationObserver in login.html restores display:flex reactively, but only
     after paint. Pin a deterministic height so the hero renders even outside
     a flex parent. Reconciled to a FIXED 100vh (was min-height): the hero must
     never grow taller than the viewport, otherwise it drags .login-container
     past 100vh and reintroduces whole-page scroll. */
  height: 100vh;
  background: var(--ved-blue-lift);
  overflow: hidden;
}

/* Carousel base */
.carousel { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.slide.is-active { opacity: 1; }
.slide-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  /* NOTE: background-image set per slide in login.html via inline style */
}
.slide.is-active .slide-img {
  animation: ved-kenburns 12s ease-out forwards;
}
@keyframes ved-kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.10); }
}

/* Gradient overlay for text legibility */
.slide-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,82,152,.10) 0%, rgba(0,82,152,.30) 45%, rgba(4,28,52,.86) 100%),
    linear-gradient(95deg, rgba(10,58,102,.45) 0%, rgba(10,58,102,0) 55%);
}

/* Brand bar — top-left: white-knockout logo + separator + label */
.brand-bar {
  position: absolute;
  top: 34px;
  left: 42px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand-logo { display: block; height: 34px; width: auto; }
.brand-logo svg { height: 34px; width: auto; display: block; }
/* White knockout — overrides both fills (green leaf + blue wordmark) */
.brand-logo svg path { fill: #fff !important; }
.brand-sep {
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,.45);
}
.brand-label {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .92;
}

/* SDG badge — top-right, per slide */
.sdg-badge {
  position: absolute;
  top: 34px;
  right: 46px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .6s ease, transform .6s ease;
}
.sdg-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ved-green);
  box-shadow: 0 0 0 3px rgba(113,179,47,.25);
}
.slide.is-active .sdg-badge {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .3s;
}

/* Slide copy — bottom-left */
.slide-copy {
  position: absolute;
  left: 46px;
  right: 18%;
  bottom: 84px;
  z-index: 4;
}
.eyebrow {
  display: inline-block;
  color: var(--ved-gold);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.headline {
  font-family: var(--font-display);
  font-weight: 300;
  color: #fff;
  font-size: clamp(28px, 3.1vw, 46px);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-shadow: 0 2px 24px rgba(0,20,40,.35);
}
.headline b { font-weight: 800; }
.desc {
  margin-top: 16px;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  line-height: 1.55;
  max-width: 30ch;
  font-weight: 400;
}
/* Copy fade-up on active slide */
.slide-copy > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.slide.is-active .eyebrow  { opacity: 1; transform: none; transition-delay: .25s; }
.slide.is-active .headline { opacity: 1; transform: none; transition-delay: .38s; }
.slide.is-active .desc     { opacity: 1; transform: none; transition-delay: .52s; }

/* Segmented progress bar */
.progress {
  position: absolute;
  left: 46px;
  bottom: 46px;
  z-index: 5;
  display: flex;
  gap: 8px;
  /* Neutralize Bootstrap's bundled .progress component (same single-class
     selector, equal specificity — winner is bundle load order, which we
     can't guarantee). Bootstrap forces background:#ededed; height:16px;
     overflow:hidden; border-radius:8px, which paints a grey track behind
     our 5 .seg children so they read as one solid pill. !important pins
     the reset regardless of bundle order. */
  background: transparent !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
.seg {
  width: 34px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  background: rgba(255,255,255,.30);
  overflow: hidden;
  position: relative;
}
.seg.is-active { background: rgba(255,255,255,.30); }
.seg.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: left;
  animation: ved-fill 7s linear forwards;
}
@keyframes ved-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   THE LIVING SEAM — green→blue diagonal accent
   ============================================================ */
.seam {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: 60%;
  z-index: 8;
  width: 7px;
  transform: translateX(-50%) skewX(0deg);
  /* green → seam-mid → blue: the leaf-meets-earth duality as a structural edge */
  background: linear-gradient(178deg, var(--ved-green) 0%, var(--ved-seam-mid) 50%, var(--ved-blue) 100%);
  box-shadow:
    0 0 22px rgba(113,179,47,.30),
    0 0 40px rgba(0,82,152,.22);
  animation: ved-seam-tilt .8s cubic-bezier(.22,.61,.36,1) .2s forwards;
}
@keyframes ved-seam-tilt {
  from { transform: translateX(-50%) skewX(0deg);  }
  to   { transform: translateX(-50%) skewX(-4deg); }
}

/* ============================================================
   FORM PANEL (right, 40%)
   ============================================================ */
.form-panel {
  flex: 1;
  background: var(--white);
  position: relative;
  display: flex;
  flex-direction: column;
  /* Horizontal centring only (cross axis). NO main-axis centring here.
     A flex container with justify-content:center + overflow-y:auto CLIPS the
     overflowing start (top) of its content and makes it unreachable — you
     cannot scroll up past a centred flex item. When the form is taller than
     the viewport (short laptops ~650-850px), that clipped the .form-logo and
     the "Welcome to Vedanta mGrant" .form-title above the fold, with dead
     white space below. Vertical centring is moved to margin:auto on .form-wrap
     (below): it centres WHEN there is spare room and collapses to the top —
     keeping it scroll-reachable — WHEN the content overflows. */
  align-items: center;
  justify-content: flex-start;
  /* Pin to the viewport and let the PANEL scroll internally if the form is
     taller than the screen (e.g. 80% zoom on a short laptop, or a future SSO
     stack). The whole page never scrolls — only this column does, and only
     when it must. */
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 48px 56px;
}
.form-wrap {
  width: 100%;
  /* Fluid up to the design cap; never a fixed pixel width that breaks on zoom. */
  max-width: var(--form-max-width); /* 360px from design_tokens.css */
  /* Vertical breathing room so the card centres normally but, when the panel
     has to scroll, content isn't clipped against the top/bottom edges. */
  padding: 24px 0;
  /* Scroll-safe vertical centring. With the panel as a flex column anchored to
     flex-start, `margin:auto 0` expands the top/bottom auto-margins to centre
     the card WHEN the panel is taller than the card. WHEN the card overflows
     the panel, flex auto-margins collapse to zero and the card anchors to the
     top — so .form-logo + .form-title stay at the reachable top and the panel
     scrolls down to .powered. The top is NEVER clipped. */
  margin: auto 0;
  animation: ved-rise .6s ease both .15s;
}

/* ---- THE ROW-BUG FIX ----------------------------------------------------
   The form column lives inside a NESTED `.login-container` (login.js toggles
   it by that class — `$(".login-container").toggle(...)` in reset_sections /
   login / steptwo — so the class cannot be renamed without breaking auth).
   But `.login-container` is the PAGE-SPLIT style: `display:flex` with the
   default `flex-direction:row`. Applied to the nested wrapper, it laid the
   Email / Password / OR / SSO controls out side-by-side and stretched them to
   the 100vh row height (the 172px-wide form, the floating OR, the top-right
   SSO button, the 296px overflow).

   Fix: force the NESTED container (the one inside .form-wrap — the page-split
   container is NOT a child of .form-wrap, so it is untouched) to stack
   VERTICALLY, full width. `flex-direction:column` is inert when login.js sets
   `display:block` (block children already stack), and wins when CSS forces
   `display:flex` on a toggled-visible container — so it holds across every
   auth route transition without touching login.js. */
.form-wrap > .login-container {
  display: block;        /* normal vertical block flow */
  width: 100%;
}
/* When login.js toggles it visible jQuery may write inline `display:block`;
   the page-split override below (`[style*="display: block"] -> flex`) would
   otherwise flip THIS one back to a row. Re-assert column stacking with equal
   specificity + !important so the form column can never become a row again. */
.form-wrap > .login-container[style*="display: block"],
.form-wrap > .login-container[style*="display:block"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  width: 100%;
}
@keyframes ved-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Logo above title (native two-color SVG) */
.form-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}
.form-logo svg { height: 40px; width: auto; }

/* Title + subtitle */
.form-title {
  font-family: var(--font-display);
  text-align: center;
  color: var(--ved-blue);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.01em;
}
.form-sub {
  text-align: center;
  color: var(--ved-grey);
  font-size: 14.5px;
  margin-top: 7px;
  margin-bottom: 30px;
}

/* ---- Frappe auth form fields (ids fixed: #login_email, #login_password) ---- */
/* Labels */
.form-panel .field,
.form-panel .form-group { margin-bottom: 16px; }
.form-panel .field label,
.form-panel .form-group label,
.ved-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ved-ink);
  margin-bottom: 7px;
}

/* Icon-inside input wrapper */
.ved-input { position: relative; display: flex; align-items: center; }
.ved-input svg {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--ved-icon);
  pointer-events: none;
}
/* Primary targets: Frappe's real auth input ids */
#login_email,
#login_password,
#forgot_email,
#login_with_email_link_email,
.ved-input input,
.form-panel input[type="text"],
.form-panel input[type="email"],
.form-panel input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 44px;
  background: var(--ved-form-tint);
  border: 1.5px solid var(--ved-line);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ved-ink);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  outline: none;
}
#login_email::placeholder,
#login_password::placeholder,
#forgot_email::placeholder,
#login_with_email_link_email::placeholder,
.ved-input input::placeholder { color: var(--ved-placeholder); }
#login_email:focus,
#login_password:focus,
#forgot_email:focus,
#login_with_email_link_email:focus,
.ved-input input:focus {
  background: var(--white);
  border-color: var(--ved-green);
  box-shadow: 0 0 0 4px rgba(113,179,47,.12);
}
/* Autofill override */
#login_email:-webkit-autofill,
#login_password:-webkit-autofill,
#forgot_email:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--ved-form-tint) inset;
  -webkit-text-fill-color: var(--ved-ink);
}

/* Eye / password toggle */
.eye-toggle, .input .toggle {
  position: absolute;
  right: 8px;
  left: auto;
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ved-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}
.eye-toggle:hover, .input .toggle:hover {
  color: var(--ved-grey);
  background: rgba(0,0,0,.04);
}
.eye-toggle svg, .input .toggle svg { position: static; width: 16px; height: 16px; }
.eye-toggle .icon-eye-off { display: none; }
.eye-toggle.active .icon-eye { display: none; }
.eye-toggle.active .icon-eye-off { display: block; }
.frappe-toggle-hidden { display: none !important; }

/* Forgot-password link row */
.row-between, .akm-forgot-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 22px;
}
.link, .ved-link {
  color: var(--ved-blue);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.link:hover, .ved-link:hover { text-decoration: underline; }

/* Primary CTA — "Sign In" */
.btn-signin,
.btn-login-submit,
.custom-btn-primary,
.form-panel button[type="submit"],
.login-btn {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: var(--ved-green);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: .01em;
  transition: background .18s ease, transform .06s ease, box-shadow .18s ease;
  box-shadow: 0 6px 18px rgba(113,179,47,.28);
}
.btn-signin:hover,
.btn-login-submit:hover,
.custom-btn-primary:hover,
.form-panel button[type="submit"]:hover,
.login-btn:hover {
  background: var(--ved-green-hover);
  box-shadow: 0 8px 22px rgba(113,179,47,.34);
}
.btn-signin:active,
.btn-login-submit:active,
.login-btn:active { transform: scale(.99); }

/* LDAP button */
.btn-ldap-login {
  width: 100%;
  height: 46px;
  background: var(--white);
  border: 1.5px solid var(--ved-line);
  border-radius: 8px;
  color: var(--ved-ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  margin-top: 8px;
}
.btn-ldap-login:hover { border-color: var(--ved-green); background: var(--ved-form-tint); }

/* OR divider */
.divider, .or-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  color: var(--ved-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}
.divider::before, .divider::after,
.or-divider .line {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ved-line);
}
.or-divider .line { content: none; } /* .line divs don't need pseudo-content */

/* Ensure Frappe's .hide class always hides — wins over any CSS reset */
.hide { display: none !important; }

/* SSO / social login buttons */
.social-login, .sso { display: flex; flex-direction: column; gap: 10px; }
.social-btn, .sso-btn {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--ved-line);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ved-ink);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.social-btn:hover, .sso-btn:hover {
  border-color: var(--ved-line-strong);
  background: var(--ved-surface-hover);
}
.social-btn .sso-icon svg,
.sso-btn svg { width: 20px; height: 20px; }
/* Frappe wraps provider name in <p> — strip margin so button layout stays clean */
.social-btn p { margin: 0; display: inline; }

/* "Powered by mGrant" */
.powered {
  margin-top: 30px;
  text-align: center;
  color: var(--ved-muted);
  font-size: 12px;
}
.powered b { color: var(--ved-grey); font-weight: 600; }

/* Frappe state panel: forgot-box, for-login-with-email-link — keep flex */
.forgot-box, .for-login-with-email-link { display: none; }
/* PATCH (b) co-rule: when login.js's jQuery .toggle() writes inline
   `display:block`, force the PAGE-SPLIT container back to flex-row so hero +
   form-panel stay side-by-side. Scoped to the page split only — the nested
   form-column container (inside .form-wrap) is handled above and must stay a
   vertical column, so it is explicitly excluded here. */
:not(.form-wrap) > .login-container[style*="display: block"],
:not(.form-wrap) > .login-container[style*="display:block"] { display: flex !important; }

/* Back-to-signin link in forgot / email-link panels */
.forgot, .ved-back {
  text-align: center;
  margin-top: 10px;
}
.forgot a, .ved-back a {
  font-size: 12px;
  color: var(--ved-blue);
  text-decoration: none;
  font-weight: 500;
}
.forgot a:hover, .ved-back a:hover { text-decoration: underline; }

/* ============================================================
   AUTH MESSAGE STATES — Vedanta-toned (color-only; safe if absent)
   Frappe surfaces login errors / "reset link sent" via these classes.
   Toning them keeps error/success on-brand instead of framework defaults.
   ============================================================ */
.form-panel .text-danger,
.login-container .alert-danger,
.login-container .indicator.red { color: var(--ved-danger); }
.login-container .alert-danger { background: var(--ved-danger-tint); border-color: var(--ved-danger); }
.form-panel .text-success,
.login-container .alert-success,
.login-container .indicator.green { color: var(--ved-success); }
.login-container .alert-success { background: var(--ved-success-tint); border-color: var(--ved-success); }
.form-panel .text-muted { color: var(--ved-muted); }

/* ============================================================
   RESPONSIVE FALLBACK
   ============================================================ */
@media (max-width: 880px) {
  .hero  { display: none; }
  .seam  { display: none; }
  /* Hero hidden -> form-panel is the only child of the 100vw container, so it
     takes the full width. Made explicit so it can't be width-constrained by a
     stale flex-basis. height:100vh + overflow-y:auto still apply (inherited),
     so a short phone in landscape scrolls the panel, never the page. */
  .form-panel { flex: 1 1 100%; width: 100%; }
}
@media (max-width: 600px) {
  .form-panel { padding: 32px 24px; }
}
@media (max-height: 700px) {
  .form-sub { margin-bottom: 16px; }
  #login_email, #login_password { height: 42px; }
  .btn-signin, .login-btn { height: 44px; }
}

/* Respect prefers-reduced-motion:
   Animations disabled; seam held at its final tilted resting state. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .seam { transform: translateX(-50%) skewX(-4deg); }
}