/* =========================================================================
   login.css — page-scoped overlay for com_users LOGIN (view=login, item-425)
   Pixel-corrects the .pen LMQNZ(dark)/NDOCH(light)/v8Ig5(mobile) deviations the
   shared _nexora.scss auth block leaves behind. OVERLAY ONLY — no scss touched.
   Loaded via addCustomTag in html/com_users/login/default_login.php (render-last);
   scoped under body.view-login + !important to beat the P69 bundle-order trap.
   ========================================================================= */

/* ---- L1 [TEXT-DIM-LEAK / R1] — masthead eyebrow "WELCOME BACK" + trust-strip
   label "TRUSTED BY ENGINEERING TEAMS" use --color-muted (#4C5268 / #A2A8C0) in
   the scss; the .pen wants $text-dim (#888EA6 light / #6B7196 dark).
   m36Ymp(dark)=#6B7196, ZiIse(light)=#888EA6, M05FPk(light)=#888EA6. ---- */
body.view-login .masthead-eyebrow,
body.view-login .sec-feature-grid .eyebrow {
  color: var(--color-text-dim) !important;
}

/* ---- L10 [META-FLIP-TOKEN] — "New to Nexora?" foot text: the shared scss
   .auth-foot uses --color-muted (#4C5268 light / #A2A8C0 dark); the .pen Links
   "q" (FW8Dt dark #6B7196 / light #888EA6) is $text-dim. Mirror register.css
   REG2 so login's foot matches. The "Create an account" link (accent) is
   unaffected (its own .auth-link colour). ---- */
body.view-login .auth-foot {
  color: var(--color-text-dim) !important;
}

/* ---- L6 — dark AuthCard border: scss .card base forces --color-border (#262945);
   .pen VYL3P dark stroke = #1C1E38 (border-soft). Light is already #ECEEF5. ---- */
html[data-bs-theme="dark"] body.view-login .auth-card,
html[data-bs-theme="dark"] body.view-login .auth-card.card {
  border-color: var(--color-border-soft) !important;
}

/* ---- L3 — hide the required `.star` asterisk on the field labels (the .pen
   "Email"/"Password" labels carry NO asterisk). Keeps the field required. ---- */
body.view-login .auth-card .control-label .star,
body.view-login .auth-card label .star {
  display: none !important;
}

/* ---- L4 — placeholder colour matches the .pen field hint (#6B7196 dark /
   #888EA6 light = $text-dim), not the muted token. ---- */
body.view-login .auth-card input.form-control::placeholder {
  color: var(--color-text-dim) !important;
  opacity: 1 !important;
}

/* ---- L7 [P36.9] — Remember-me checkbox: the .pen Check (d7FuyR) is an 18×18
   rounded box (r5) with a 1px border, NOT the OS square. accent-color silently
   drops border/radius on a native control, so redraw it. ---- */
body.view-login .login-remember input[type="checkbox"],
body.view-login .auth-card input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 5px !important;
  background: var(--color-surface) !important;
  cursor: pointer;
  position: relative;
  transition: background-color .12s var(--ease, ease), border-color .12s var(--ease, ease);
}
body.view-login .login-remember input[type="checkbox"]:checked,
body.view-login .auth-card input[type="checkbox"]:checked {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
body.view-login .login-remember input[type="checkbox"]:checked::after,
body.view-login .auth-card input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body.view-login .login-remember input[type="checkbox"]:focus-visible,
body.view-login .auth-card input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / .25) !important;
}

/* ---- L9 — Reassurance band top hairline: .pen pNqRR has strokeWidth{top:1}
   (#1C1E38 dark / #ECEEF5 light = border-soft). The shared band scss sets no
   border-top → the 1px separator between the form section and the trust strip is
   missing. Add it token-driven. Scoped to the login band. ---- */
body.view-login .sec-feature-grid {
  border-top: 1px solid var(--color-border-soft) !important;
}

/* ---- L8 — Primary submit button: the shared _nexora.scss .btn-primary
   (~L1830) paints a GRADIENT (linear-gradient(180deg,--primary,--primary-hover))
   + a hover translateY(-1px). The .pen Button/Primary (Cfh6P) is a FLAT #3B82F6
   fill (Geist 15/600 label) with NO transform on hover. Scoped to the auth card
   only (the sitewide gradient stays for marketing CTAs). Flat fill + kill the
   hover box-shift (HOVER-JUMP). ---- */
body.view-login .auth-card .btn.btn-primary,
body.view-login .auth-card button[type="submit"].btn-primary {
  background: var(--color-primary) !important;
  background-image: none !important;
  border-color: var(--color-primary) !important;
  font-family: var(--font-heading) !important; /* Geist per .pen w4VbQ5 */
  box-shadow: none !important;
  transform: none !important;
}
body.view-login .auth-card .btn.btn-primary:hover,
body.view-login .auth-card button[type="submit"].btn-primary:hover {
  background: var(--color-primary-hover) !important;
  background-image: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================================
   MOBILE (≤767.98) — .pen v8Ig5 deltas the desktop scss mobile block misses.
   ========================================================================= */
@media (max-width: 767.98px) {
  /* L2 — mobile eyebrow is ACCENT (.pen l7tLX #3B82F6), 11.5px ls1.5 — not muted */
  body.view-login .masthead-eyebrow {
    color: var(--color-primary) !important;
    font-size: 11.5px !important;
    letter-spacing: 1.5px !important;
  }
  /* L11 — mobile H1: .pen v8Ig5.D0cEMt = 28px (base mobile block leaves it 32px).
     Mirrors register.css REG7. */
  body.view-login .t4-masthead-title {
    font-size: 28px !important;
    letter-spacing: -1px !important;
  }
  /* L5 — mobile AuthCard: .pen JX3R5 fill #13142A (bg-card) stroke #262945 (border);
     the scss `.auth-card.card{background:--color-card-2 !important}` (#181A33) wins
     over the un-!important mobile block → pin it back to bg-card.
     NB: the dark L6 border rule above is html[data-bs-theme] scoped (higher
     specificity), so match it here to flip the mobile border to #262945. */
  /* LIGHT mobile: keep the ELEVATED grey surface (--color-surface-2 #EEF1F8) so the
     card stays visible on the white page bg (var(--color-surface)=#FFF would vanish). */
  body.view-login .auth-card,
  body.view-login .auth-card.card {
    background: var(--color-surface-2) !important;
    border-color: var(--color-border) !important;
  }
  /* DARK mobile: .pen JX3R5 fill = #13142A (bg-card = --color-surface). */
  html[data-bs-theme="dark"] body.view-login .auth-card,
  html[data-bs-theme="dark"] body.view-login .auth-card.card {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
  }
  /* L12 — mobile inputs: .pen v8Ig5 JdVPh fill=#101023 ($bg-elev), pad[13,14] —
     elevated OFF the #13142A card for contrast (matches register.css REG8). The
     desktop input is #13142A/#FFF; mobile lifts it to bg-elev. */
  body.view-login .auth-card input.form-control,
  body.view-login .auth-card .auth-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
    background: var(--color-bg-alt) !important; /* #101023 dark / #F5F6FB light */
    padding: 13px 14px !important;
  }
}