/* ===========================================================================
   PaperCraft — premium auth surface (admin / school & teacher / student)

   Split-screen: a branded panel carrying the homepage's own signature
   visual (a mock exam paper with an OMR bubble strip) sits beside the
   actual form, so a login page reads as the same product as the
   marketing site, not a generic auth template with the logo swapped in.
   The branded panel is desktop/tablet only (see the md breakpoint) --
   on a phone, the form is the whole screen, exactly what the task needs.

   Shares the marketing site's palette (navy/orange/green, Fraunces +
   Inter), not the app shell's paper/gold tokens in app.css — login is
   still the "front door", before anyone is inside the working tool.

   Mobile-first throughout: every rule below is written for a phone
   viewport first, then widened at breakpoints.
   ========================================================================= */

:root{
  --navy:#12213F; --navy-mid:#1A2A52; --navy-deep:#0d1830;
  --orange:#F37021; --orange-deep:#d85f10; --green:#2F8A4E;
  --paper:#FAF6EE; --paper-line:#E4DCC6; --ink:#1F2937; --ink-soft:#5B6478; --muted:#8A836C;
  --card:#FFFFFF; --red:#AE3B26; --red-soft:#FBE9E5;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body.authbody{
  font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--ink);
  line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100vh; min-height:100dvh; background:var(--paper);
}
.authbody h1,.authbody h2,.authbody h3{ font-family:'Fraunces',Georgia,serif; color:var(--navy); line-height:1.15; letter-spacing:-.01em; margin:0; }
.authbody a{ color:inherit; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }

/* ---- split shell ----------------------------------------------------------- */
.auth-split{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }

.auth-brand-panel{ display:none; } /* shown from md up, see breakpoint below */

.auth-form-panel{
  flex:1; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
}
.auth-form-topbar{
  display:flex; align-items:center; justify-content:space-between; padding:16px 18px; flex-shrink:0;
}
.auth-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--navy); }
.auth-brand-logo{ height:26px; width:auto; max-width:110px; object-fit:contain; }
.auth-brand .dot{
  width:15px; height:15px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--orange) 0deg 120deg, #7C8CBB 120deg 240deg, var(--green) 240deg 360deg);
}
.auth-brand b{ font-family:'Fraunces',Georgia,serif; font-size:16.5px; font-weight:600; }
.auth-topbar-home{
  font-size:13px; font-weight:600; color:var(--ink-soft); text-decoration:none;
}
.auth-topbar-home:hover{ color:var(--navy); }

.auth-shell{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:8px 18px 32px; max-width:440px; width:100%; margin:0 auto;
}
.auth-card{ padding:4px 0; }
.auth-eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--orange-deep);
  background:#FFF1E6; border:1px solid #FBD7B8; padding:4px 10px; border-radius:99px;
  margin-bottom:16px;
}
.auth-eyebrow.role-admin{ color:#5B3FA0; background:#F1ECFB; border-color:#D9CCF2; }
.auth-eyebrow.role-student{ color:#1B6B3A; background:#E7F5EC; border-color:#C6E6D2; }
.auth-card h1{ font-size:26px; font-weight:600; margin-bottom:6px; }
.auth-card .sub{ color:var(--ink-soft); font-size:14px; margin-bottom:26px; }

/* ---- form fields ------------------------------------------------------------ */
.auth-fld{ display:block; margin-bottom:16px; }
.auth-fld > span{ display:block; font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:5px; }
.auth-input{
  width:100%; padding:13px 14px; border:1.5px solid var(--paper-line); border-radius:10px;
  font-size:16px; /* 16px+ so iOS Safari never zooms on focus */
  font-family:inherit; background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.auth-input:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(18,33,63,.08); }

/*
 * .pw-field is injected around any input[type=password] at runtime by
 * password-toggle.js -- this file doesn't need to know or care which
 * specific form a given password field belongs to, since sign-in,
 * both signup forms, and reset-password all share this same
 * .auth-input styling already.
 */
.pw-field{ position:relative; }
.pw-field .auth-input{ padding-right:44px; }
.pw-toggle{
  position:absolute; top:50%; right:4px; transform:translateY(-50%);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border:none; background:none; border-radius:8px; color:var(--ink-soft); cursor:pointer;
}
.pw-toggle:hover{ background:var(--paper); color:var(--navy); }
.pw-toggle:focus-visible{ outline:2px solid var(--navy); outline-offset:1px; }
.pw-toggle svg{ width:19px; height:19px; display:block; }

.auth-chk{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); margin-bottom:18px; }
.auth-chk input{ width:17px; height:17px; accent-color:var(--navy); flex-shrink:0; }
.auth-row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-6px 0 18px; flex-wrap:wrap; }
.auth-link{ font-size:12.5px; color:var(--ink-soft); text-decoration:none; font-weight:600; }
.auth-link:hover{ color:var(--navy); }

/* ---- buttons ------------------------------------------------------------------ */
.auth-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:14px; border:none; border-radius:10px; font-weight:700; font-size:15px;
  cursor:pointer; text-decoration:none; transition:transform .12s, box-shadow .12s, background .12s;
}
.auth-btn:active{ transform:scale(.99); }
.auth-btn.primary{ background:var(--orange); color:#fff; box-shadow:0 10px 26px rgba(243,112,33,.32); }
.auth-btn.primary:hover{ background:var(--orange-deep); }
.auth-btn.primary.admin{ background:#5B3FA0; box-shadow:0 10px 26px rgba(91,63,160,.3); }
.auth-btn.primary.admin:hover{ background:#4A3183; }
.auth-btn.primary.student{ background:var(--green); box-shadow:0 10px 26px rgba(47,138,78,.3); }
.auth-btn.primary.student:hover{ background:#256b3d; }
.auth-btn.ghost{ background:transparent; color:var(--navy); border:1.5px solid var(--paper-line); }

/* ---- alerts --------------------------------------------------------------------- */
.auth-alert{
  background:var(--red-soft); color:#8a2a1e; padding:12px 14px; border-radius:10px;
  font-size:13.5px; margin-bottom:18px; display:flex; gap:8px; align-items:flex-start;
  border:1px solid #F0CFC8;
}
.auth-alert .ico{ flex-shrink:0; line-height:1.4; }
.auth-alert.ok{ background:#E7F5EC; color:#1B6B3A; border-color:#C6E6D2; }

/* ---- foot links & role switch ------------------------------------------------------ */
.auth-foot{ text-align:center; font-size:13.5px; color:var(--ink-soft); margin-top:4px; }
.auth-foot a{ color:var(--navy); font-weight:700; text-decoration:none; }
.auth-foot a:hover{ text-decoration:underline; }

/*
 * A two-way pill switch between School & Teacher and Student sign-in --
 * Admin deliberately has no entry here at all, not just a hidden one:
 * admin sign-in is reached only by typing /admin/login directly, never
 * discoverable from this switcher, matching the same "no admin option
 * anywhere a student or teacher would see it" rule the homepage's own
 * nav already follows. This is real navigation (an <a> to the other
 * role's actual login route), not a JS-only visual toggle -- the two
 * roles are genuinely different pages with different forms behind them,
 * so a tap has to actually go there, not just repaint in place.
 *
 * The visual mechanism is a real sliding thumb (.auth-role-thumb), a
 * separate absolutely-positioned element BEHIND the two links, not a
 * background colour toggled on whichever link is active -- that's what
 * makes this read as one physical switch with a moving part, the same
 * language as a native iOS/Android toggle, rather than two buttons that
 * happen to take turns being coloured in. Its position is set purely in
 * CSS from the .is-school/.is-student class on the parent (server-
 * rendered from $authRole, see auth-premium.blade.php), so the correct
 * side is already filled on the very first paint -- no JS needed to
 * avoid an initial flash of the thumb sitting in the wrong place.
 */
.auth-role-switch{
  display:flex; gap:0; background:var(--paper); border-radius:999px;
  padding:5px; margin-top:22px; position:relative;
  box-shadow:inset 0 1.5px 4px rgba(18,33,63,.06);
}
.auth-role-thumb{
  position:absolute; top:5px; bottom:5px; left:5px;
  width:calc(50% - 5px); border-radius:999px;
  background:linear-gradient(155deg, #1a2c56, var(--navy) 65%);
  box-shadow:0 8px 20px rgba(18,33,63,.32), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .32s cubic-bezier(.65,0,.35,1);
}
.auth-role-switch.is-student .auth-role-thumb{
  transform:translateX(100%);
  background:linear-gradient(155deg, #256b3d, var(--green) 65%);
  box-shadow:0 8px 20px rgba(47,138,78,.32), inset 0 1px 0 rgba(255,255,255,.12);
}
.auth-role-switch a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:10px 12px; border-radius:999px;
  font-size:13px; font-weight:700; text-decoration:none; color:var(--ink-soft);
  transition:color .2s ease; position:relative; z-index:1;
}
.auth-role-switch a .ico{
  font-size:13px; opacity:.55; transition:opacity .2s ease, transform .32s cubic-bezier(.65,0,.35,1);
  transform:scale(.85);
}
.auth-role-switch a.is-active{ color:#fff; }
.auth-role-switch a.is-active .ico{ opacity:1; transform:scale(1); }
.auth-role-switch a:not(.is-active):hover{ color:var(--navy); }
.auth-role-switch a:not(.is-active):hover .ico{ opacity:.85; }
.auth-role-switch a:not(.is-active):active{ transform:scale(.98); }

.auth-security-note{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:11px; color:var(--muted); margin-top:16px;
}

/* ---- OTP input row (verification screens) --------------------------------------- */
.auth-otp-row{ display:flex; gap:8px; margin-bottom:18px; }
.auth-otp-row input{
  flex:1; min-width:0; text-align:center; font-size:20px; font-weight:700;
  padding:12px 4px; border:1.5px solid var(--paper-line); border-radius:9px; font-family:inherit;
}
.auth-otp-row input:focus{ outline:none; border-color:var(--navy); }

/* ---- school picker (student registration) --------------------------------------- */
.auth-school-picker{ position:relative; }
.auth-school-search{
  width:100%; padding:12px 13px; border:1.5px solid var(--paper-line); border-radius:9px;
  font-size:16px; font-family:inherit; margin-bottom:0;
}
.auth-school-search:focus{ outline:none; border-color:var(--navy); border-radius:9px 9px 0 0; margin-bottom:8px; }
.auth-school-list{
  display:none; max-height:220px; overflow:auto; border:1.5px solid var(--navy); border-top:none; border-radius:0 0 9px 9px;
  background:#fff; position:absolute; top:100%; left:0; right:0; z-index:15; box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.auth-school-picker.is-open .auth-school-list{ display:block; }
.auth-school-opt{
  display:flex; align-items:center; gap:9px; padding:11px 13px; font-size:13.5px;
  cursor:pointer; border-bottom:1px solid #F1ECDC;
}
.auth-school-opt:last-child{ border-bottom:none; }
.auth-school-opt:hover{ background:var(--paper); }
.auth-school-opt input{ width:17px; height:17px; accent-color:var(--navy); flex-shrink:0; }
.auth-school-opt.is-hidden{ display:none; }
.auth-school-empty{ padding:16px; text-align:center; font-size:12.5px; color:var(--muted); }
.auth-school-none{ font-size:12px; color:var(--muted); margin-top:6px; }

/* ---- checkbox grid (class levels on registration) --------------------------------- */
.auth-check-grid{
  display:grid; grid-template-columns:1fr; gap:2px; max-height:220px; overflow:auto;
}
.auth-check-grid label{
  display:flex; align-items:center; gap:8px; font-size:13px; padding:7px 9px; border-radius:6px;
}
.auth-check-grid label:hover{ background:var(--paper); }
.auth-check-grid input{ width:16px; height:16px; accent-color:var(--navy); flex-shrink:0; }

.auth-fld-optional{ color:var(--muted); font-weight:400; }

/* A class checkbox ticked automatically because a chosen exam covers
   it (see the registration page's own script) -- a small inline note
   next to the label, not a separate banner, so it reads in place
   exactly where the person is already looking. */
.auth-class-auto{
  font-size:10.5px; font-weight:700; color:var(--gold, #B8912F); margin-left:auto; letter-spacing:.02em;
}

/* ---- collapsible dropdown wrapper (see msel-collapse.js) --------------------------- */
.msel-collapse{ position:relative; }
.msel-collapse-toggle{
  display:flex; align-items:center; gap:8px; width:100%;
  background:#fff; border:1.5px solid var(--paper-line); border-radius:9px; padding:12px 13px;
  cursor:pointer; font-size:14px; font-family:inherit; text-align:left; transition:border-color .12s;
}
.msel-collapse-toggle:hover{ border-color:var(--navy); }
.msel-collapse-toggle.open{ border-color:var(--navy); border-radius:9px 9px 0 0; }
.msel-collapse-toggle-label{ font-weight:600; color:inherit; }
.msel-collapse-summary{ color:var(--muted); flex:1; text-align:right; }
.msel-collapse-toggle.has-selection .msel-collapse-summary{ color:var(--navy); font-weight:600; }
.msel-collapse-caret{ color:var(--muted); font-size:11px; transition:transform .12s; }
.msel-collapse-toggle.open .msel-collapse-caret{ transform:rotate(180deg); }
.msel-collapse-panel{
  position:absolute; top:100%; left:0; right:0; z-index:15;
  border:1.5px solid var(--navy); border-top:none; border-radius:0 0 9px 9px;
  background:#fff; padding:6px 4px; box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* ===========================================================================
   Branded panel — the homepage's own paper-mock motif, ported verbatim
   (see home.blade.php's own .paper-mock/.pm-* rules, which this mirrors
   exactly so the two pages are visibly the same design system).
   ========================================================================= */
.auth-brand-panel{
  background:radial-gradient(ellipse 900px 700px at 15% 0%, #1c3163 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color:#fff; padding:44px 40px; flex-direction:column; justify-content:flex-start;
  position:relative; overflow:hidden;
}
.auth-brand-panel .auth-brand{ color:#fff; }
.auth-brand-panel .auth-brand b{ color:#fff; }
.auth-brand-body{ display:flex; flex-direction:column; flex:1; justify-content:center; min-height:0; }
.auth-brand-copy{ margin:0 0 32px; max-width:380px; }
.auth-brand-copy h2{ color:#fff; font-size:28px; font-weight:600; white-space:pre-line; margin-bottom:12px; }
.auth-brand-copy p{ color:#C7CEE0; font-size:14.5px; line-height:1.55; }

.bubble-row{ display:flex; gap:5px; }
.bubble{ width:9px; height:9px; border-radius:50%; border:1.5px solid currentColor; }
.bubble.filled{ background:currentColor; }

.paper-mock{
  background:#fff; border-radius:12px; box-shadow:0 30px 70px rgba(0,0,0,.4);
  padding:24px 26px; transform:rotate(-1.5deg); color:var(--ink);
}
.pm-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--navy);
    padding-bottom:12px; margin-bottom:14px; }
.pm-school{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:15px; color:var(--navy); }
.pm-meta{ font-size:10.5px; color:var(--muted); margin-top:3px; }
.pm-rollbox{ display:flex; gap:3px; }
.pm-rollbox span{ width:16px; height:20px; border:1px solid var(--ink-soft); border-radius:2px; }
.pm-q{ font-size:12px; color:var(--ink); margin-bottom:8px; line-height:1.5; }
.pm-q b{ color:var(--navy); }
.pm-opts{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin-bottom:16px; }
.pm-opt{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--ink-soft); }
.pm-opt .bubble{ color:var(--ink-soft); }
.pm-opt.correct .bubble{ color:var(--green); }
.pm-omr{ display:flex; gap:10px; padding-top:14px; border-top:1px dashed var(--paper-line); }
.pm-omr-row{ display:flex; align-items:center; gap:5px; }
.pm-omr-row span.n{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--muted); width:12px; }

/* ---- md breakpoint (~860px): split-screen activates -------------------------------- */
@media (min-width:860px){
  .auth-split{ flex-direction:row; }
  .auth-brand-panel{ display:flex; width:44%; max-width:520px; flex-shrink:0; }
  .auth-form-panel{ flex:1; }
  .auth-form-topbar{ display:none; } /* the brand panel already carries the logo + a home link isn't needed mid-flow */
  .auth-shell{ padding:32px 48px; max-width:440px; }
  .auth-card{ padding:0; }
}
@media (min-width:1100px){
  .auth-brand-panel{ padding:52px 56px; }
  .auth-brand-copy h2{ font-size:32px; }
}