/*
 * ============================================================
 * LOGIN / REGISTER PAGE
 * A split auth card: a permanently-dark brand panel (same family
 * as the footer / placement banner) beside an adaptive form panel
 * that follows the light/dark theme. The whole page fits within
 * one viewport — see body.page-no-scroll in base.css.
 * ============================================================
 */

body.page-login .mouse-grid-bg { opacity: 0.55; }

/* .main-container (base.css) is a shared, sitewide wrapper: `position:
   relative; z-index: 1;` — a positioned element with an explicit z-index
   is itself a stacking context, so raising a DESCENDANT's z-index (like
   .auth-section's, below) only ever reorders things *inside* that
   context. It can never win against .site-header (position:fixed;
   z-index:1000, header.css) — a SIBLING of .main-container, not a
   descendant — because the comparison that actually decides who paints
   on top happens one level up, between .main-container's own z-index (1)
   and .site-header's (1000): 1 loses, so .main-container's entire
   subtree — .auth-section, .auth-card-character, all of it — paints
   below the header regardless of any z-index set inside it. Confirmed
   empirically (elementFromPoint at a coordinate inside the header's own
   box, where the mascot below visually overlaps it, returned the header
   itself before this fix).
   Scoped to this page only (never touching the shared base.css rule,
   which every other page also relies on) — just enough to clear the
   header's 1000, still well under the mobile bottom sheet's 1999/2000
   (header.css), so that still correctly covers this page when open.

   Winning that comparison means .main-container's own box — empty,
   invisible, but geometrically just as tall as .auth-section's 100vh, for
   the exact same "the fixed header is out of normal flow" reason — now
   also sits above the header. Same fix as .auth-section's own
   pointer-events:none below: let clicks in that empty area fall all the
   way through to the header, instead of this wrapper silently absorbing
   them. */
body.page-login .main-container { z-index: 1; pointer-events: none; }
/* UPDATE: the page content no longer stacks above the header. The header —
   and its levels dropdown / profile menu — must always be on top; the
   mascot is instead given real room below the header by
   js/pages/login.js initMascotFit(), so it never needs to overlap it. */

.auth-section {
    width: 100%;
    /* `100dvh` (dynamic viewport height) with a `100vh` fallback for
       browsers that don't support it — this page's whole "single
       viewport, no scroll" design (see README) depends on this box being
       exactly as tall as what's actually visible. Plain `100vh` on mobile
       Safari/Chrome is defined against the LARGEST possible viewport (URL
       bar collapsed), not the current one, so with the address bar
       showing — the normal state on page load — this box would render
       taller than the real visible area and the bottom of the card could
       end up needing a scroll the page is explicitly designed not to
       have. `dvh` tracks the actual visible viewport as browser chrome
       shows/hides. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 108px 24px 28px;
    position: relative;
    /* Harmless to leave at 1001 (unchanged) — .main-container above is now
       what actually decides this page wins against the header; this value
       only orders .auth-section among .main-container's own children
       (there are none else here), see that rule's comment for why it,
       alone, was never sufficient. */
    z-index: 1;
    box-sizing: border-box;
    /* This box's own footprint — invisible background, `height:100vh` —
       extends up under the fixed header (the header is out of normal
       flow, so .auth-section, right after it, starts at the very top of
       the page too; the padding above only pushes its CONTENT down below
       the header, not this element's own box). Once .main-container's fix
       above lets this section paint above the header for real, that empty
       area would otherwise silently swallow every click meant for the
       header's own links/buttons wherever the two overlap — not just
       where the mascot sits. pointer-events:none here, re-enabled on
       .auth-card-wrap below (the only part of this section with anything
       actually clickable in it — the card itself), passes clicks in that
       empty area straight through to the header underneath, exactly the
       way this section already behaved before it could paint above the
       header at all. */
    pointer-events: none;
}

/* Exists only to host .auth-card-character: mirrors .auth-card's own
   width/max-width so it shrink-wraps the card exactly, but — unlike
   .auth-card — has no overflow:hidden, so the mascot (a child positioned
   above this wrapper's top edge) isn't clipped the way it would be inside
   the card itself (.auth-card needs its own overflow:hidden to keep the
   brand/form panels' rounded corners; untouched, unrelated to this). */
.auth-card-wrap {
    position: relative;
    width: 100%;
    max-width: 1020px;
    max-height: 100%;
    /* Re-enables real interaction for the card and its form fields —
       .auth-section's own pointer-events:none (above) would otherwise
       also disable this, its child. The mascot itself
       (.auth-card-character) stays pointer-events:none on its own rule
       regardless, same as before — it was never meant to be clickable. */
    pointer-events: auto;
}

.auth-card {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* ---- Peeking mascot ----
   Artwork: assets/images/log_in_kid.webp, 1353×1163px (~1.16 aspect
   ratio, wider than tall — verified with Pillow, not assumed) — a tight
   crop with his gripping hands right at the image's own bottom edge
   (~99.9% down, ~0.1% transparent margin — effectively none) and almost
   no side padding.

   `bottom: 100%` (not `top: 0` + a hand-tuned translateY(-97%), the
   earlier approach) is what actually pins this element's own bottom edge
   to .auth-card-wrap's top edge, exactly — a `bottom` percentage on an
   absolutely-positioned element is resolved against its containing
   block's (.auth-card-wrap's) own height, and 100% of that height,
   measured up from the wrap's bottom, lands precisely on the wrap's top.
   Because the artwork's own content already runs to within ~0.1% of the
   image's bottom edge, that's the same as saying: the character's hands
   land almost exactly on the card's own top edge — a real, computed
   relationship, not a percentage reverse-engineered against one
   viewport's pixel measurements (which the old -97% was, and which
   silently drifted at other sizes). The small `translateY(9%)` below is
   the ONLY tuning knob left — a deliberate downward dip past that line
   (the character gripping INTO the card's edge, not just touching it),
   expressed as a percentage of the character's own responsive height so
   it scales correctly at every breakpoint instead of a fixed px nudge.

   Anchored to .auth-card-wrap's own top-right corner (not the viewport),
   so it stays correctly attached to the card at any viewport height,
   including as .auth-section's flex-centering moves the card up/down.
   right/width are percentage- and viewport-relative for the same reason.
   See the max-height:760px rule further down for why a short viewport
   ALSO needs a smaller mascot, not just this same math at a smaller
   scale — this rule alone still isn't enough to guarantee it never rises
   above the viewport on a short window.
   Desktop/tablet only — see the max-width:768px rule below (this
   project's own documented "Mobile" breakpoint, responsive.css). */
.auth-card-character {
    position: absolute;
    right: 13%;
    bottom: 100%;
    transform: translateY(9%);
    width: clamp(140px, 33vw, 210px);
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 14px 20px rgba(10, 20, 40, 0.25));
}
.auth-card-character img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    /* This project's own "Mobile" breakpoint (see responsive.css) — hidden
       completely, no reserved space, no effect on mobile layout below. */
    .auth-card-character { display: none; }
}
@media (max-width: 991px) {
    /* .auth-card switches to a stacked column here (below) and its brand
       panel becomes a short horizontal strip — the mascot scales down
       further to stay clear of the "سامان" brand text in that strip,
       still anchored to .auth-card-wrap's own top edge the same way (see
       the base rule's own comment — bottom:100% + a small translateY, not
       a magic negative percentage). Stays visible down to 769px (tablet/
       iPad portrait). */
    .auth-card-character { width: clamp(96px, 16vw, 140px); right: 9%; }
}

/* ---- Brand panel (always dark — same visual family as the footer) ---- */
.auth-brand-panel {
    flex: 0 0 40%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 40px 44px;
    overflow: hidden;
    background: linear-gradient(160deg, #1A365D 0%, var(--primary-navy-dark) 100%);
}
.auth-brand-panel::before,
.auth-brand-panel::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}
.auth-brand-panel::before {
    width: 260px; height: 260px;
    top: -80px; left: -80px;
    background: rgba(217, 82, 110, 0.18);
}
.auth-brand-panel::after {
    width: 220px; height: 220px;
    bottom: -100px; right: -60px;
    background: rgba(255, 255, 255, 0.05);
}

.auth-brand-mark {
    position: relative;
    z-index: 1;
    font-family: var(--font-display-fa);
    font-size: 28px;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -1px;
}

.auth-brand-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-display-fa);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.6;
    color: #FFFFFF;
    margin: 0;
}

.auth-brand-stats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 24px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* .auth-stat / .auth-stat-num / .auth-stat-label are shared components —
   defined once in components.css and reused wherever a small stat chip
   is needed (login brand panel, reservation trust panel, ...). On this
   permanently-dark brand panel they need light, fixed-color text. */
.auth-brand-stats .auth-stat-num   { color: #FFFFFF; font-size: 18px; }
.auth-brand-stats .auth-stat-label { color: rgba(255, 255, 255, 0.55); }

/* ---- Form panel (theme-adaptive) ---- */
.auth-form-panel {
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 48px;
    background-color: var(--color-surface);
    overflow-y: auto;
    transition: background-color 0.4s ease;
}

.auth-heading { gap: 6px; }
.auth-heading h1 {
    font-size: 21px;
    margin-top: 2px;
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }

.auth-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.auth-submit { width: 100%; padding: 12px 24px; font-size: 14.5px; margin-top: 2px; }

.auth-terms-check { align-items: flex-start; }
.auth-terms-check input { margin-top: 2px; }

/* ---- Admin Login: a small, clearly-secondary entry point below the
   student forms — deliberately understated (not styled like the primary
   ورود/ثبت‌نام tabs) so it reads as "for administrators", not as a third
   option regular visitors are meant to consider. ---- */
.auth-admin-toggle {
    align-self: center;
    margin-top: 4px;
    color: var(--ink-muted);
}
.auth-admin-toggle svg { width: 15px; height: 15px; }
.auth-admin-toggle:hover { color: var(--accent-gold); }

/* Teacher + admin entry points side by side under the student forms. */
.auth-staff-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 4px;
}
.auth-staff-links[hidden] { display: none; }
.auth-staff-links .auth-admin-toggle { margin-top: 0; }
.auth-staff-sep { color: var(--ink-muted); opacity: 0.6; }

.auth-admin-back {
    align-self: flex-start;
    margin-bottom: 2px;
}
.auth-admin-back svg { width: 16px; height: 16px; transform: scaleX(-1); }

/* ---- Phone OTP send/code widgets themselves (.auth-otp-actions/-send-btn/
   -status/-code-input) moved to css/components.css — account-settings.js's
   password-change verification (item 5) reuses those exact same classes,
   so they're a shared component now, not login-page-only. Only the
   login/register-flow-specific mode toggles stay here. ---- */
.auth-otp-mode-toggle {
    align-self: center;
    margin-top: 2px;
    font-size: 13px;
    color: var(--ink-muted);
}
.auth-otp-mode-toggle:hover { color: var(--accent-gold); }

/* "ورود با کد یکبار مصرف پیامکی" specifically — the one OTP-login entry
   point on the whole form — gets its own clearly-a-button outline pill
   instead of the plain muted ghost link every other small toggle here
   uses (its "back to password login"/"back to login" siblings keep the
   quieter .auth-otp-mode-toggle treatment on purpose: they're exits from
   a flow the student is already in, not a path they need to discover). */
.auth-otp-mode-toggle.is-prominent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 12px 24px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--accent-gold);
    background-color: var(--accent-soft-bg);
    border: 1.5px solid var(--accent-gold);
    border-radius: var(--radius-pill);
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.auth-otp-mode-toggle.is-prominent svg { width: 17px; height: 17px; }
.auth-otp-mode-toggle.is-prominent:hover {
    background-color: var(--accent-gold);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* ============================================================
   RESPONSIVE
   On small screens the brand panel shrinks to a compact strip (its
   stats row is dropped) so the actual form has as much room as
   possible before any scrolling is ever needed.
   ============================================================ */
@media (max-width: 991px) {
    .auth-section { padding: 92px 16px 18px; }
    .auth-card    { flex-direction: column; }
    .auth-brand-panel {
        flex: 0 0 auto;
        padding: 16px 24px;
        gap: 8px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .auth-brand-mark  { font-size: 20px; }
    .auth-brand-title { display: none; }
    .auth-brand-stats { display: none; }
    /* .auth-form's own gap (below) is trimmed here too, not just at
       max-height — stacking .form-row into single columns (≤480px, further
       down) makes the ثبت‌نام form noticeably taller regardless of the
       viewport's height, so a narrow phone with a perfectly tall screen
       (say 390×844) still needs this room back. */
    .auth-form-panel  { flex: 1 1 auto; padding: 10px 24px; gap: 6px; }
    .auth-form        { gap: 6px; }
    .auth-heading      { gap: 2px; }
    .auth-heading h1  { font-size: 18px; }
}

@media (max-width: 480px) {
    .form-row { grid-template-columns: 1fr; gap: 8px; }
    .auth-form-panel  { padding: 8px 18px; gap: 4px; }
    .auth-form        { gap: 4px; }
    .auth-heading     { gap: 2px; }
    .auth-brand-panel { padding: 14px 18px; }
}

/* ---- Short viewports (the actual source of the ثبت‌نام scrollbar) ----
   The width breakpoints above never touched vertical spacing, so on a
   perfectly ordinary WIDE-but-short viewport (a non-maximized laptop
   window, a laptop's real content height after browser chrome — commonly
   ~700-760px, nowhere near "extremely short") the ثبت‌نام form's own
   content (two more fields than ورود, plus the terms checkbox) already
   exceeded .auth-form-panel's available height, triggering the ≤991px
   comment's "last-resort" overflow-y:auto scrollbar as routine behaviour
   instead of a rare edge case. Trimming the chrome around the form (not
   the form's own fields) closes that gap so both forms actually fit
   before that safety net is ever needed. `.site-header` is fixed at
   top:24px/height:72px (bottom edge at 96px) — 100px keeps a 4px
   clearance under it. */
@media (max-height: 760px) {
    .auth-section     { padding-top: 100px; padding-bottom: 16px; }
    .auth-form-panel  { padding-top: 18px; padding-bottom: 18px; gap: 8px; }
    .auth-form        { gap: 8px; }
    .auth-heading     { gap: 4px; }
    /* The mascot sits `bottom:100%` of .auth-card-wrap — i.e. its own
       height entirely above the wrap's top edge, before the small
       translateY(6%) dip (see the base rule's comment). That wrap's own
       top edge keeps climbing higher up the viewport as this page's
       flex-centered card gets squeezed into less vertical room, down to
       being pinned at exactly this breakpoint's own padding-top (100px)
       once the card is tall enough to fill essentially all available
       centering room — confirmed by measuring the actual rendered layout
       down to a 600px-tall viewport, where it floors there and stays.
       Past that point, the mascot's full desktop size (clamp(150px,
       17vw,230px) wide, ~198px tall at its 230px cap) is taller than that
       100px floor, so its own top edge would rise above y=0 — off the
       top of a page that, per body.page-no-scroll, never scrolls,
       silently clipping the top of its head. A smaller mascot here (max
       ~103px tall even at its own 120px-wide cap) stays under that 100px
       floor with room to spare, at every width, all the way down to that
       worst case — not just "the current window happens to be tall
       enough." */
    /* (Mascot size on short viewports: js/pages/login.js initMascotFit().) */
}

/* ---- Give up the "never scroll" premise on mobile / short viewports ----
   Verified with a real 390×844 touch viewport (an ordinary phone, not an
   edge case): the ثبت‌نام form already renders ~37px taller than the
   available height there. That overflow was SUPPOSED to be absorbed by
   .auth-form-panel's own overflow-y:auto, but percentage max-height only
   resolves against a parent with its own definite height, and
   .auth-card-wrap's height is auto — so .auth-card's max-height:100%
   (way above) never actually constrains anything, .auth-card just grows
   past the viewport, and the excess is silently swallowed by
   body.page-no-scroll's overflow:hidden with no scrollbar anywhere to
   recover it. That's a page a phone user physically cannot get the
   bottom of the register form out of — not a rare short-viewport edge
   case, an everyday one. Chasing it with ever-smaller padding (the
   ≤991px/≤480px/≤760px rules above) is a losing game against any future
   form field; letting the page scroll like every other page on this site
   is the durable fix. The padding trims above still apply on top of
   this — less scrolling needed is still better than more — they're just
   no longer load-bearing for reachability. */
@media (max-width: 991px), (max-height: 700px) {
    html:has(body.page-login),
    body.page-login {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }
    body.page-login .auth-section {
        height: auto;
        min-height: 100dvh;
        min-height: 100vh;
        padding-bottom: 32px;
    }
}

/* ---- registration code (the first field of the sign-up form) ---- */
.auth-regcode-input { font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace); font-weight: 800; letter-spacing: 1.2px; text-align: center; text-transform: uppercase; }
.auth-regcode-input::placeholder { font-weight: 500; letter-spacing: 1px; text-transform: none; }
.auth-regcode-help { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.9; color: var(--ink-soft); }
.auth-regcode-help a { color: var(--accent-gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }