/* Forgot-password and reset-password pages — together cover the two
   public steps of the password reset flow that lives outside the
   logged-in app:

      /forgot-password  — request a reset link (single email field).
      /reset-password   — consume the token in the link and pick a new
                          password (new password + confirm).

   Both pages mirror login.css's card chrome (indigo top border, eyebrow
   strip, soft white card on the marketing background) so the auth
   surface — sign in, sign up, forgot, reset — reads as a single
   continuous flow. The two pages have nearly identical styling so they
   share one stylesheet; selector roots differ only in the page-name
   prefix to keep DOM scoping unambiguous. */

.forgot-password-page,
.reset-password-page {
    /* Local indigo aliases resolve to the global tokens in _tokens.css.
       Both /forgot-password and /reset-password share these vars so the
       two screens of the reset flow are visually identical. See login.css
       for the full rationale on the indirection layer. */
    --reset-indigo: var(--gpc-indigo);
    --reset-indigo-soft: var(--gpc-indigo-soft);
    --reset-indigo-line: var(--gpc-indigo-line);
    --reset-text: var(--gpc-text);
    --reset-text-muted: var(--gpc-text-muted);

    /* Centre the card vertically inside the visible viewport. Same
       viewport math login.css uses (subtract the 64px MainLayout
       AppBar so the perceived centre lines up with the geometric
       centre). `safe center` falls back to flex-start on short
       viewports (e.g. an inline-validation alert pushing the card
       taller than the screen) instead of clipping the top. */
    display: flex;
    align-items: safe center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding-top: 16px;
    padding-bottom: 16px;
}

.forgot-password-page__wrap,
.reset-password-page__wrap {
    width: 100%;
    max-width: 480px;
    position: relative;
}

.forgot-password-page__card,
.reset-password-page__card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(4px);
    border-radius: 14px;
    /* Indigo top accent — matches login + signup. The 4px height is the
       agreed brand "this is an auth surface" cue. */
    border-top: 4px solid var(--reset-indigo);
    display: flex;
    flex-direction: column;
}

.forgot-password-page__title,
.reset-password-page__title {
    font-weight: 700;
    color: var(--reset-indigo);
    letter-spacing: 0.01em;
    text-align: center;
}

/* Eyebrow strip — soft-indigo pill with centred uppercase microtext
   under the title. Identical visual treatment to login + signup so all
   four auth pages share one rhythm. The bottom margin (30px) gives the
   pill visible breathing room from whatever sits beneath it (form, alert,
   or post-submit confirmation block). */
.forgot-password-page__eyebrow,
.reset-password-page__eyebrow {
    display: block;
    width: 100%;
    background: var(--reset-indigo-soft);
    color: var(--reset-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(--reset-indigo-line);
}

/* Single source of truth for typography inside the cards — keeps every
   MudBlazor input slot pinned to the 0.875rem / 1.5 line-height pairing
   the rest of the auth surface uses. Mirrors the shotgun selector list
   in login.css verbatim so a future MudBlazor structural change only
   has to be patched in one place. */
.forgot-password-page__card .mud-input-control input,
.forgot-password-page__card .mud-input-control input::placeholder,
.forgot-password-page__card .mud-input-slot,
.forgot-password-page__card .mud-input-slot input,
.forgot-password-page__card .mud-input-input,
.forgot-password-page__card .mud-input-root,
.reset-password-page__card .mud-input-control input,
.reset-password-page__card .mud-input-control input::placeholder,
.reset-password-page__card .mud-input-slot,
.reset-password-page__card .mud-input-slot input,
.reset-password-page__card .mud-input-input,
.reset-password-page__card .mud-input-root {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

/* Email field on /forgot-password renders user-typed input in lowercase
   so the visible string matches what /api/auth/request-password-reset
   compares against (the lookup is normalised to lower-case server-side).
   Visual-only — the bound model value is untouched. */
.forgot-password-page__input-lowercase input {
    text-transform: lowercase;
}

/* ── /forgot-password — post-submit confirmation panel ──────────────── */

/* The confirmation view replaces the form (not stacks beneath it) so
   the user gets a clean "we sent it / now wait for the email" state
   rather than a crowded screen with a half-disabled form still visible.
   Generous vertical padding gives it the same visual weight as the
   form it replaces — without padding the panel collapses and the card
   visibly shrinks on submit, which reads as a glitch. */
.forgot-password-page__sent {
    text-align: center;
    padding: 8px 4px 4px;
}

.forgot-password-page__sent-icon {
    color: var(--reset-indigo);
    margin-bottom: 12px;
}

.forgot-password-page__sent-lead {
    color: var(--reset-text);
    font-weight: 500;
    margin-bottom: 12px;
}

.forgot-password-page__sent-sub {
    color: var(--reset-text-muted);
    margin-bottom: 24px;
    line-height: 1.55;
}

/* Stacked secondary actions under the confirmation copy — outlined
   "Try a different email" first (the more common follow-up if the
   email never arrives) then a quieter text "Back to sign in". Vertical
   stack rather than side-by-side because at the card's max-width either
   button would look cramped beside the other. */
.forgot-password-page__sent-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.forgot-password-page__sent-action {
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* ── /reset-password — missing-token state ──────────────────────────── */

/* When the page is opened without `?t=…` we replace the form with a
   single CTA pointing at /forgot-password (the only useful next step).
   Mirrors the post-submit panel above so the two off-happy-path views
   feel consistent. */
.reset-password-page__missing-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* ── Footer (under the card body, inside the same MudCard) ──────────── */

/* Compact footer line below the body — visually identical to
   .login-footer / .signup-footer so the four auth screens share the
   same "secondary action lives down here" rhythm. */
.forgot-password-page__footer,
.reset-password-page__footer {
    text-align: center;
    padding: 12px 16px 20px;
    color: var(--reset-text-muted);
}

.forgot-password-page__footer .mud-typography,
.reset-password-page__footer .mud-typography {
    color: var(--reset-text-muted);
}

/* ── Responsive — auth flow shares the same breakpoint ladder as
   login.css / signup.css so the four screens compress in lockstep. */
@media (max-width: 600px) {
    .forgot-password-page,
    .reset-password-page {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .forgot-password-page__card,
    .reset-password-page__card {
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .forgot-password-page__sent-actions {
        gap: 8px;
    }

    .forgot-password-page__sent-action {
        font-size: 0.85rem !important;
    }
}