/* OrbitBooks website/login theme v3 — 22 Aug 2026
 *
 * v3 brings the sign-in screen onto the approved design system (board #A156,
 * spec in 2) Theme/ORBIT-DESIGN-SYSTEM.md), so the first screen of the day looks
 * like the app it opens. Three things changed and nothing else:
 *   1. ORANGE IS GONE. The focus ring and the secondary links were orange —
 *      decoration on the one screen where the only job is "type two things and
 *      press the button". DESIGN.md §0 is neutral by default; navy is the
 *      identity and the focus ring is now navy, which also raises its contrast.
 *   2. The card's radius and shadow now come from the system's scale instead of
 *      being invented here (18px/64px-blur was a different product's card).
 *   3. Greys are the system's two text greys, both AA on white.
 * The navy gradient stays: this is the ONE screen whose job is to say whose
 * software this is.
 *
 * v2 (14 Aug) notes that still hold — do not undo them:
 *   v1 regressed on v16: the login body no longer carries .for-login (it moved to
 *   a wrapper section), and this file loads BEFORE frappe's login bundle, so the
 *   bundle was out-specifying us. Hence :has() on body, higher-specificity card
 *   rules, and !important only on properties the platform bundle actually
 *   contests. Sizing law: inputs >=16px font (iOS no-zoom), controls >=44px.
 */

body:has(.for-login),
body:has(.for-forgot),
body:has(.for-signup) {
  background: radial-gradient(1200px 640px at 18% -12%, #16346a 0%, #0a1f44 55%, #071531 100%) fixed !important;
}

/* ---- The card: was 371px wide with 28px inputs; now a proper centrepiece ---- */
.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card {
  width: min(480px, calc(100vw - 32px)) !important;
  max-width: none !important;
  background: #ffffff;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(7, 21, 49, 0.34) !important;
  padding: 44px 40px !important;
  margin-left: auto;
  margin-right: auto;
}

/* Logo: 32px -> 52px */
.for-login .page-card img,
.for-forgot .page-card img,
.for-signup .page-card img {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  margin-bottom: 8px;
}

/* Headings ("Sign In", "Verification"): 20px -> 26px */
.for-login .page-card h4,
.for-login .page-card .page-card-head h4,
.for-forgot .page-card h4,
.for-signup .page-card h4 {
  color: #0a1f44;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
.for-login .page-card p,
.for-login .page-card .text-muted,
.for-forgot .page-card p {
  font-size: 15px !important;
  color: #606670;
}

/* Labels above fields */
.for-login .page-card label,
.for-forgot .page-card label,
.for-signup .page-card label {
  font-size: 14px !important;
  font-weight: 600;
  color: #15171a;
}

/* Inputs (incl. the 2FA OTP field): 28px/14px -> 48px/16px */
.for-login .page-card input.form-control,
.for-login .page-card input,
.for-forgot .page-card input,
.for-signup .page-card input {
  height: 48px !important;
  font-size: 16px !important;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  border: 1px solid #cfd2d6;
}
/* 🔴 THE FIELDS HAVE ICONS INSIDE THEM, AND A FLAT 14px PADDING RUNS THE TEXT
   STRAIGHT THROUGH THEM (owner, 23 Aug — "the login email and password box has
   misaligned words"). Measured on the live page, relative to each input's own
   left edge: the `.field-icon` occupies 8px→24px, while the text began at 14px —
   a 10px overlap. The password field also carries a `.toggle-password` eye at
   9px→25px from the RIGHT, which the dots ran under by 11px.
   Padding has to clear the icon plus a gap, so: 34px on the icon side. Frappe's
   own stylesheet does this and our blanket `padding: 10px 14px !important`
   overrode it — v2 shipped the same value, so this has been wrong since 14 Aug. */
/* ⚠️ The selector has to out-rank the blanket rule ABOVE, whose widest branch is
   `.for-login .page-card input.form-control` = (0,3,1). A first attempt at
   (0,2,1) lost silently and measured identical to before — `!important` does not
   settle a fight between two important declarations, specificity still does. */
.for-login .page-card .email-field > input.form-control,
.for-login .page-card .password-field > input.form-control,
.for-forgot .page-card .email-field > input.form-control,
.for-signup .page-card .email-field > input.form-control,
.for-signup .page-card .password-field > input.form-control {
  padding-left: 34px !important;
}
.for-login .page-card .password-field > input.form-control,
.for-signup .page-card .password-field > input.form-control {
  padding-right: 34px !important;
}

.for-login input:focus,
.for-forgot input:focus,
.for-signup input:focus {
  border-color: #0a1f44 !important;
  box-shadow: 0 0 0 3px rgba(10, 31, 68, 0.18) !important;
  outline: none;
}

/* Primary button: full-width 48px */
.for-login .page-card .btn-primary,
.for-login .page-card .btn-login,
.for-forgot .page-card .btn-primary,
.for-signup .page-card .btn-primary {
  background: #0a1f44 !important;
  border-color: #0a1f44 !important;
  border-radius: 9px !important;
  min-height: 48px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  width: 100%;
}
.for-login .page-card .btn-primary:hover,
.for-login .page-card .btn-login:hover {
  background: #12305f !important;
  border-color: #12305f !important;
}

/* Secondary links (Forgot Password etc.). Navy, not orange: on this screen the
   button is the action and the link is the escape hatch — two colours competing
   is what made it read as a marketing page.
 *
 * 🔴 MEASURED ON THE LIVE PAGE, 22 Aug 2026: the v2 rule for this
 * (`.for-login a { color: #C2410C }`, specificity 0,1,1) NEVER APPLIED — the
 * login bundle out-specifies it and "Forgot password?" has been rendering at
 * #7c7c7c the whole time. So the orange everyone thought was here was not, and a
 * like-for-like navy swap would have been just as invisible. Two changes make it
 * real: `.page-card` in the chain, and `!important` on the contested property
 * only — the same rule this file already follows everywhere else.
 * `:not(.btn)` matters: "Login with Email Link" is an <a> styled as a button, and
 * recolouring it would give the screen two primaries. */
.for-login .page-card a:not(.btn),
.for-forgot .page-card a:not(.btn),
.for-signup .page-card a:not(.btn) {
  color: #0a1f44 !important;
  font-size: 14px;
  font-weight: 600;
}
.for-login .page-card a:not(.btn):hover,
.for-forgot .page-card a:not(.btn):hover,
.for-signup .page-card a:not(.btn):hover {
  text-decoration: underline;
}

/* ---- Phone (<=576px): frappe's mobile css makes the card min-height 100vh,
   so commit to the app pattern — full-bleed white sheet, form vertically centred ---- */
@media (max-width: 576px) {
  .for-login .page-card,
  .for-forgot .page-card,
  .for-signup .page-card {
    /* Escape the bootstrap container entirely: the card IS the screen.
       (Safe: no transformed ancestor on the login page — fixed stays viewport-pinned.) */
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 40px 24px !important;
    overflow-y: auto;
    flex-direction: column;
    justify-content: center;
  }
  .for-login .page-card h4 {
    font-size: 24px !important;
  }
}