/* Login page (/login + /logindemo).

   Mirrors signup.css's card framing, eyebrow strip, brand palette, and
   typography normalisation so the sign-in screen feels like the same
   product as the registration screen. Anything beyond the small set of
   login-specific concerns (MFA notice block, "forgot password" row, demo
   quick-pick popover) reuses the same indigo + soft-line + dense-control
   conventions from signup so users moving between the two flows never
   feel a visual handoff. */

.login-container {
    /* Local indigo aliases resolve to the global tokens in _tokens.css.
       The page-scoped layer of indirection is preserved so future per-
       page overrides (e.g. a seasonal palette swap on /login only) can
       still be done by replacing these vars in this file alone. */
    --login-indigo: var(--gpc-indigo);
    --login-indigo-soft: var(--gpc-indigo-soft);
    --login-indigo-line: var(--gpc-indigo-line);
    --login-text: var(--gpc-text);
    --login-text-muted: var(--gpc-text-muted);
    /* Centre the card in the visible viewport on both axes. The public
       MainLayout's MudMainContent contributes 64px of fixed AppBar above
       the content so we subtract that to land the visual centre on the
       perceived centre. `safe center` falls back to flex-start when the
       card is taller than the viewport — useful on short windows where
       the MFA branch + a long error message would otherwise clip. */
    display: flex;
    align-items: safe center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding-top: 16px;
    padding-bottom: 16px;
}

.login-card-wrap {
    width: 100%;
    max-width: 480px;
    position: relative;
}

.login-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(4px);
    border-radius: 14px;
    border-top: 4px solid var(--login-indigo);
    display: flex;
    flex-direction: column;
}

/* Eyebrow pill — full-width soft-indigo strip with centred uppercase
   text. Identical visual treatment to .signup-eyebrow so the two screens
   feel like the same product. Copy switches between the three states
   (sign in / demo / MFA) so the pill always reflects the current step.
   Bottom margin is intentionally generous (30px) to give the eyebrow
   visible breathing room from the first input field below — tighter
   spacing made the two read as one block. */
.login-eyebrow {
    display: block;
    width: 100%;
    background: var(--login-indigo-soft);
    color: var(--login-indigo);
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 12px 20px;
    margin: 22px 0 30px;
    border-radius: 999px;
    line-height: 1.3;
    border: 1px solid var(--login-indigo-line);
}

.login-title {
    font-weight: 700;
    color: var(--login-indigo);
    letter-spacing: 0.01em;
    text-align: center;
}

/* Single source of truth for typography inside the login card — see
   signup.css for the full rationale on the shotgun selectors. The same
   set of MudBlazor inner elements applies (text inputs, masked inputs,
   select trigger) so we mirror the list verbatim. */
.login-card .mud-input-control input,
.login-card .mud-input-control input::placeholder,
.login-card .mud-input-slot,
.login-card .mud-input-slot input,
.login-card .mud-input-slot input::placeholder,
.login-card .mud-input-input,
.login-card .mud-input-root,
.login-card .mud-input > input,
.login-card .mud-select .mud-input-slot,
.login-card .mud-select .mud-select-input,
.login-card .mud-select-input,
.login-card .login-submit {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

/* Submit button — breathing room above so it doesn't sit glued
   against whatever the form-body's last row is (password field in
   sign-in mode, MFA actions row in MFA mode). Scoped ONLY to the
   button — earlier this lived inside the shotgun typography rule
   above, which silently shoved a 16px gap onto every input/select/
   slot in the form and broke the whole layout. */
.login-card .login-submit {
    margin-top: 16px !important;
}

/* Popover items rendered for the demo quick-pick select — match the
   trigger's font size so the closed and open states look like one
   control. Class is applied via PopoverClass on the MudSelect. */
.login-select-popover .mud-list-item,
.login-select-popover .mud-list-item-text {
    font-size: 0.875rem !important;
}

/* Email field renders typed text in lowercase so what the user sees
   matches what /api/auth/login compares against (the lookup is
   lower-cased server-side). Visual-only — the bound model value is left
   alone so any prefill (demo mode) round-trips unchanged. */
.login-input-lowercase input {
    text-transform: lowercase;
}

/* Slight tightening for the password field's top margin so it sits
   a little closer to the email field above. Now that the shotgun-
   selector bug (which was pushing every input down 16px) is fixed,
   only a small nudge is needed. Tune the px to taste. */
/* Tightens the password field's top margin so it sits closer to the
   email field above. Applied to BOTH /login and /logindemo (they share
   the same Login.razor component and render the same password field
   with this class) so the email→password gap reads identically on
   both screens. The vertical position of the pair within the form
   body is still tuned per-mode via `.login-form-body` padding so the
   demo's extra quick-pick select doesn't crowd the email field. */
.login-card .login-form .mud-input-control.login-tight-top,
.login-card .login-form .login-tight-top {
    margin-top: -24px !important;
}

/* Form body wrapper — pinned to a fixed min-height so the sign-in
   branch (email + password fields) and the MFA branch (notice +
   6-digit input) collapse to the same vertical footprint. Without this
   the card visibly jumps when the page flips into MFA mode. The value
   covers the larger of the two branches plus a small cushion so a
   one-line error alert above the form doesn't push the submit button
   onto a new visual row. Picked empirically — adjust if either branch
   gains/loses a row. */
.login-form-body {
    min-height: 188px;
    display: flex;
    flex-direction: column;
    /* Pushes the whole field stack down a touch so the first input
       doesn't sit right on top of the eyebrow's bottom margin. */
    padding-top: 16px;
}

/* /login (proper sign-in, no demo prefill) wants more breathing room
   above the email/password pair so they don't sit hard up against the
   eyebrow pill. /logindemo keeps the tighter `padding-top: 16px` from
   the rule above because it has an extra quick-pick select to fit
   inside the same vertical envelope. Scoped via :not(.login-form--demo)
   so the two screens stay independently tunable. */
.login-card .login-form:not(.login-form--demo) .login-form-body {
    padding-top: 28px;
}

/* Demo mode adds a third control (the quick-pick select) above the
   email/password pair, so we relax the body up to fit it without
   forcing the production /login (which doesn't render the select)
   to look bottom-heavy. */
.login-form--demo .login-form-body {
    min-height: 248px;
}

/* "Forgot your password?" sits BELOW the submit button (between the
   primary CTA and the "Don't have an account?" footer). Centred to
   parallel the centred footer link rather than the previous right-
   aligned-in-the-field-gutter placement. Caption typography keeps it
   subordinate to the primary CTA above and the sign-up link below. */
.login-forgot-row {
    display: flex;
    justify-content: center;
}

/* MFA branch chrome — surfaced as a soft-indigo callout block that the
   user can't miss when the page flips into verification mode. The
   accompanying input renders the 6 digits in a monospaced face so the
   code reads as a discrete value, not body text. */
/* MFA branch wrapper — vertical-centres the (input + notice + actions)
   group inside the form-body's locked min-height so the card doesn't
   jump when flipping between sign-in and MFA modes. Children flow
   naturally from top to bottom with a consistent inter-element gap;
   no negative-margin hacks anywhere — every visible spacing is the
   sum of `gap` on this stack plus the per-element padding/margin
   below. If something looks off, change the gap, not a position-tweak.

   Layout inside the stack:
     ┌───────────────────────────┐
     │ Verification code  [🔒]   │   <- MudTextField
     ├──── 8px gap (this stack) ─┤
     │ ⓘ Enter code sent via …    │   <- soft-indigo notice
     ├──── 8px gap (this stack) ─┤
     │ Resend  ·  Use email      │   <- text-link actions row
     └───────────────────────────┘
*/
/* Plain block layout. Earlier this used `flex: 1` + `justify-content:
   center` to vertically centre the input + notice inside the 188px-tall
   form-body, but `justify-content: center` recalculates free space when
   children's margins change — so a negative margin-top on the notice
   shrank the group's total height, which inflated the free space, which
   shifted the start offset back down by half the change. Net visual
   movement: zero. Block layout has no such redistribution; the notice's
   margin maps 1:1 to a visible pixel shift. */
.login-mfa-stack {
    display: block;
}

/* Notice sits flush under the verification code input. The big
   negative margin-top eats:
     - MudBlazor's reserved helper-text strip on a dense outlined
       MudTextField (~22px of empty padding inside the input wrapper),
     - plus the extra free space `justify-content: center` on the
       parent `.login-mfa-stack` distributes around the group inside
       the 188px-tall `.login-form-body`.
   Pull adjusted empirically; if you want them closer/further, this is
   the single knob — bump the -56 up or down by 4-8 at a time. */
.login-mfa-notice {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 10px;
    padding: 12px 14px;
    margin: 12px 0 0;
    border-radius: 8px;
    background: var(--login-indigo-soft);
    border: 1px solid var(--login-indigo-line);
}

.login-mfa-notice-icon {
    color: var(--login-indigo) !important;
    font-size: 1.1rem !important;
    flex-shrink: 0;
}

.login-mfa-notice-text {
    color: var(--login-text-muted);
    line-height: 1.4;
    font-size: 0.82rem !important;
    max-width: 100%;
}

/* Resend / switch-channel actions — stacked vertically beneath the
   Verify code CTA. Low visual weight (text-link style) so they sit
   visually subordinate to the primary button above; each on its own
   row so the two distinct actions read as a list of options rather
   than one comma-separated phrase. Centred to match the button. */
.login-mfa-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
}

.login-mfa-action {
    background: none;
    border: none;
    padding: 2px 4px;
    color: var(--login-indigo);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background 120ms ease, color 120ms ease;
}

.login-mfa-action:hover:not(:disabled) {
    background: var(--login-indigo-soft);
    text-decoration: underline;
}

.login-mfa-action:focus-visible {
    outline: 2px solid var(--login-indigo);
    outline-offset: 2px;
}

.login-mfa-action.is-disabled,
.login-mfa-action:disabled {
    color: var(--login-text-muted);
    cursor: not-allowed;
    opacity: 0.65;
}

/* Inline status line that appears beneath the actions row after a
   successful resend / channel switch (green) or after a failure /
   cooldown (red). Centred to mirror the actions above; small font so
   it reads as a transient confirmation rather than a banner. */
.login-mfa-status {
    margin: 0;
    text-align: center;
    font-size: 0.76rem;
    line-height: 1.4;
    padding: 4px 8px;
    border-radius: 6px;
}

.login-mfa-status.is-success {
    color: #1f6e63;
    background: rgba(47, 143, 131, 0.12);
}

.login-mfa-status.is-error {
    color: #8a3a3a;
    background: rgba(201, 90, 90, 0.10);
}

.login-mfa-input input {
    font-family: 'JetBrains Mono', 'Consolas', 'SFMono-Regular', monospace;
    letter-spacing: 0.36em;
    font-size: 1.05rem !important;
    text-align: center;
}


.login-footer {
    text-align: center;
    margin-top: auto;
    padding: 8px 0 4px;
    color: var(--login-text-muted);
}

@media (max-width: 600px) {
    .login-container {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .login-card {
        border-radius: 10px;
    }
}

/* Phone — small phones (≤480px) need tighter eyebrow padding and a
   shorter MFA input letter-spacing so the 6-digit code field fits inside
   the card without forcing horizontal scroll. The card itself is already
   `width: 100%; max-width: 480px;` on .login-card-wrap, so it expands
   to fill the column down to the viewport's gutter at this width. */
@media (max-width: 480px) {
    .login-eyebrow {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        padding: 8px 14px;
    }

    .login-mfa-input input {
        font-size: 0.95rem !important;
        letter-spacing: 0.28em;
    }

    .login-mfa-notice {
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }

    .login-mfa-notice-icon {
        margin: 0 auto;
    }
}