/*
    The credential screens: sign-in, recovery, set-password, lockout, access-denied.

    Written against the as-designed screen `01-login` (`.claude/design/screens/01-login.md`), whose
    extrapolation note makes it the template for every auth/entry page: a 480px centered card with
    48px padding, a logo header, 8px-radius controls, ONE primary action, and muted footer links.

    ⚠️ This file replaced 514 lines of NECA-derived Bootstrap overrides that had been repainted
    teal. Repainting is what produced the failure this whole pass exists to correct -- the colors
    were right and every measurement was wrong: 50px buttons at radius 16 in Roboto 18/21, a logo
    stranded in a top bar rather than in the card, no footer, no signup line. The values below come
    from the design sheet, not from the file they replace.

    Primary is `#317D78`, NOT brand Deep Sea Teal `#3C9992`. The design sheet records that
    divergence explicitly and rules that Figma wins. The brand mark itself still uses `#3C9992`,
    which is why both appear here and why neither is a typo.
*/

:root {
    --oahc-primary: #317D78;
    --oahc-page: #EBF5F4;
    --oahc-card-border: #D8EBE9;
    --oahc-ink: #000000;
    --oahc-muted: #666666;
    --oahc-line: #999999;
    --oahc-danger: #C0392B;
    --oahc-font: 'Google Sans Flex', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--oahc-page);
    color: var(--oahc-ink);
    font-family: var(--oahc-font);
    font-size: 14px;
}

/* ── Page frame ─────────────────────────────────────────────────────────────────────────────
   The card is centered in the viewport rather than pinned below a header, because the design
   has no header on these screens: the logo lives INSIDE the card. */
/* ── The decorative layer ───────────────────────────────────────────────────────────────────
   `01-login`: "Decorative `Layer_1` SVG behind card at **0.4 opacity**" over the teal tint.

   ⚠️ **This was the Ohio region map for one release, and that was my error.** The design sheet's
   prose called `Layer_1` "a faint decorative map graphic"; it is not a map. Pulled from Figma
   (`ajb0PR9rejySb3KeXWSXuU` node `15:880`), `Layer_1` is two wave bands — the logo's wave motif
   blown up across the page. Substituting the Regions modal's county map put 88 county names and
   seven zone numerals behind a sign-in form, and then needed `grayscale(1)` and `opacity: .13`
   to beat the asset into not being itself. Needing two mitigations to make an asset stop looking
   like what it is was the signal to stop; the sheet has been corrected.

   ⚠️ **Do NOT add a CSS `opacity` here.** The sheet's `0.4` is not an instruction to this page —
   it is baked into the exported SVG's own `<g opacity="0.4">`. Applying it again would compound
   to .16 and erase the waves. The fill is `#D8EBE9` (the card-border token) at 40% over the
   `#EBF5F4` page, which resolves to about `#E3F1F0`: present, and barely.

   Geometry is the Figma frame's, expressed against the viewport so it stays full-bleed. In the
   1920×1080 frame `Layer_1` is 3503 wide at x=-845, so: 3503/1920 = 182.45vw, -845/1920 =
   -44.01vw, pinned to the top edge as it is in the design.

   ⚠️ It is BEHIND everything and inert: `pointer-events: none` and no role in any layout. The
   sign-in card must not shift by a pixel because of it. */
.login-container::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: url('/images/login-waves.svg') no-repeat;
    background-position: -44.01vw top;
    background-size: 182.45vw auto;
    pointer-events: none;
}

/* Everything the caller interacts with sits above the decoration. Stacking is set here rather than
   on each child, so a new element added to the page cannot land underneath it. */
.login-container > * {
    position: relative;
    z-index: 1;
}

.login-container {
    /* 🔴 BORDER-BOX, or the page scrolls by exactly its own padding.
     *
     * `min-height: 100vh` plus `padding: 48px 24px` under the default `content-box` makes this
     * element 100vh + 96px tall, so the sign-in page has always had 96px of vertical scroll on a
     * viewport of any size -- measured at 1046px against a 950px viewport. There is nothing below
     * the fold to scroll TO, which is what makes it read as a rendering fault rather than a page.
     *
     * This stylesheet sets box-sizing per element rather than with a universal reset, so the
     * container never got one. It is set here alone rather than globally on purpose: several
     * controls below pair an explicit `height` with padding, and a blanket reset would resize them.
     */
    box-sizing: border-box;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 24px;
}

/* The inherited layout put the mark in a top-left bar. The design puts it in the card header, so
   the bar is collapsed to nothing rather than deleted -- the layout still renders it, and a rule
   here is cheaper than threading a second layout through five page models. */
.login-menu {
    display: none;
}

.login-card-wrapper {
    width: 100%;
    max-width: 480px;
}

/* ── The card ───────────────────────────────────────────────────────────────────────────────
   480 wide · 48 padding · gap 48 · radius 12 · 1px #D8EBE9 · 0 16px 32px rgba(24,49,83,.08) */
.login-card {
    background: #FFFFFF;
    width: 100%;
    /* ⚠️ 480 is the CARD, not its content. Without this the 48px padding is added outside the
       480px wrapper and the card renders 576 wide -- a 20% error that reads as "about right" in
       a browser and is unmissable against the design frame. */
    box-sizing: border-box;
    padding: 48px;
    border: 1px solid var(--oahc-card-border);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(24, 49, 83, 0.08);
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.login-card > section {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* The card header: the full logo at 350x108, centered. */
.login-card-logo {
    display: flex;
    justify-content: center;
    /* No margin: the card's own 48px gap is the header-to-body space. A margin here is added to
       it rather than instead of it, which is how the logo ended up 80px clear of the form. */
}

.login-card-logo img {
    width: 350px;
    max-width: 100%;
    height: auto;
}

/*
    The design carries no page title on the sign-in screen -- the logo IS the header, and a
    duplicate "Log In" above a single-purpose form says nothing the button does not.

    The recovery and lockout screens DO need one, because their logo alone cannot say which of the
    five screens a caller has landed on. So the rule is not "no titles"; it is Light 300 / 24, the
    same treatment the authenticated pages use for `PageHeader`.
*/
.login-page-title {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.25;
    margin: 0;
    color: var(--oahc-ink);
}

/* ── Fields ─────────────────────────────────────────────────────────────────────────────────
   Label Medium 500/12 · input Regular 400/16, white, 1px #999, radius 8, 8x12, height 36. */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

/* Form Fields Area gap is 20; the card's own gap covers the rest. */
form#account,
form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--oahc-ink);
    margin: 0;
}

.form-control {
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    font-family: var(--oahc-font);
    font-size: 16px;
    font-weight: 400;
    color: var(--oahc-ink);
    background: #FFFFFF;
    border: 1px solid var(--oahc-line);
    border-radius: 8px;
    box-sizing: border-box;
}

.form-control::placeholder {
    color: var(--oahc-line);
}

.form-control:focus {
    outline: none;
    border-color: var(--oahc-primary);
    box-shadow: 0 0 0 3px rgba(49, 125, 120, 0.15);
}

/* The password field and its "Forgot Password?" link are one group, gap 8. */
.password-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-group .form-control {
    padding-right: 40px;
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--oahc-muted);
    cursor: pointer;
}

.password-toggle-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* SemiBold 600 / 12, primary, right-aligned. */
.remember-me-forgot-password-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 8px;
}

#forgot-password,
.remember-me-forgot-password-container a {
    font-size: 12px;
    font-weight: 600;
    color: var(--oahc-primary);
    text-decoration: none;
}

#forgot-password:hover {
    text-decoration: underline;
}

/* ── The single action ──────────────────────────────────────────────────────────────────────
   Primary md: #317D78, radius 8, padding 8x16, height 36, label Medium 500/14 white, trailing
   chevron. Full width here because the card is 384px of content and one action owns all of it. */
.register-login-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 12px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* `buttons.md` size metrics: md is gap 12 / height 36 / padding 8 16 / radius 8. Gap and
       radius both scale with size and neither is a constant -- these are the md row, because
       every button on the credential screens is md. */
    gap: 12px;
    height: 36px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: var(--oahc-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary,
.btn-primary:focus {
    width: 100%;
    background: var(--oahc-primary);
    border-color: var(--oahc-primary);
    color: #FFFFFF;
}

.btn-primary:hover {
    background: #26625D;
    border-color: #26625D;
    color: #FFFFFF;
}

/* Tertiary: outlined, primary label -- the design's "back to sign-in" affordance. */
.btn-secondary,
.btn-secondary:focus {
    background: #FFFFFF;
    border-color: var(--oahc-line);
    color: var(--oahc-primary);
}

.btn-secondary:hover {
    background: var(--oahc-page);
    border-color: var(--oahc-primary);
    color: var(--oahc-primary);
}

/* `buttons.md`: "Icon size tracks button size (sm 12 - md 16 - lg 20)". These buttons are md. */
.btn .btn-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ── Supporting copy ────────────────────────────────────────────────────────────────────────
   "Don't have an account yet? Contact Admin", centered under the action.

   The design sets this one line in Inter and everything else in Google Sans Flex, and flags it as
   a likely inconsistency. It is set in the system font here, per that flag: loading a second font
   family for eleven words is a real cost paid for what the sheet already calls an accident. */
.login-signup-line {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: var(--oahc-muted);
    margin: 0;
}

.login-signup-line a {
    font-weight: 600;
    color: var(--oahc-primary);
    text-decoration: none;
}

.login-signup-line a:hover {
    text-decoration: underline;
}

/* Supporting copy above a field. It is a sibling of `.form-group` inside the form, so the form's
   own 20px gap spaces it -- it carries no margin of its own, which is what previously left it
   touching the label below it. */
.reset-email-info {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--oahc-muted);
    margin: 0;
}

/* ── Validation ─────────────────────────────────────────────────────────────────────────────
   AUTH-002 requires one indistinguishable message for a bad username and a bad password, so this
   is styled as a block that reads well with a full sentence in it, not as a per-field footnote. */
.text-danger {
    color: var(--oahc-danger);
    font-size: 12px;
    font-weight: 400;
}

div.text-danger:not(:empty) {
    padding: 8px 12px;
    border: 1px solid rgba(192, 57, 43, 0.35);
    border-radius: 8px;
    background: rgba(192, 57, 43, 0.06);
}

div.text-danger ul {
    margin: 0;
    padding-left: 16px;
}

.alert {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    border: 1px solid var(--oahc-card-border);
    background: var(--oahc-page);
    color: var(--oahc-ink);
}

@media (max-width: 540px) {
    .login-card {
        padding: 32px 24px;
    }
}

/* ── The handful of Bootstrap utilities these five pages actually use ───────────────────────
   The layout no longer loads Bootstrap from a CDN. It was pulling 200KB to supply the classes
   below and to fight every rule in this file for control of `.btn` and `.form-control`.

   These are transcribed rather than approximated -- an inventory of `class="..."` across
   `Areas/Identity/Pages/Account/*.cshtml` gives exactly this set, so the substitution is
   complete rather than close. Add to it if a page starts using another one; do not reach for
   the CDN again. */
.d-flex { display: flex; }
.form-inline { display: flex; align-items: center; }
.row { display: flex; flex-wrap: wrap; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }
.text-dark { color: var(--oahc-ink); }

.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--oahc-primary);
    padding: 0;
    height: auto;
}

.alert-dismissible { position: relative; padding-right: 32px; }

.alert-dismissible .close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: transparent;
    border: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--oahc-muted);
    cursor: pointer;
}