/* Shared visual patterns for Pages/Authentication/*.razor (login, password reset/change,
   MFA enrollment/challenge, lockout, unlock, email confirmation, access denied, ...).
   These 14 pages share the same centered-card layout and are the first thing an
   unauthenticated visitor sees, so they're kept visually identical rather than each
   growing its own bespoke styling. Follows the same var(--token) theme + BEM-ish naming
   convention as admin.css. */

.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
    min-height: calc(100dvh - 120px);
    padding: 1.5rem 1rem;
}

.auth-card {
    align-self: center;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}

/* Papers have no padding of their own: 40px on desktop, tighter on phones so 320-375px screens keep a usable field width. */
.auth-card--padded {
    padding: clamp(1.25rem, 6vw, 2.5rem);
}

.auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.auth-subtitle {
    /* --secondary-text is this design system's "text painted on a --primary/--secondary
       colored surface" token (hsl(209,74%,94%) — near-white) — not a general muted-text
       color. It only reads correctly on the dark admin surfaces; these auth cards render
       on a plain white --surface, where it's ~1.1:1 contrast (invisible). --secondary
       (a mid gray, ~46% lightness) is the actual muted-foreground token for light surfaces. */
    color: var(--secondary);
    text-align: center;
    margin: 0.5rem 0 1.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.auth-field {
    margin-bottom: 1rem;
}

.auth-alert {
    margin-bottom: 1rem;
}

.auth-footer-link {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.auth-helper-list {
    color: var(--secondary);
    font-size: 0.85rem;
    margin: 0 0 1.25rem;
    padding-left: 1.1rem;
    line-height: 1.6;
}

.auth-helper-list__title {
    display: block;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Recovery-code / one-time display block (MfaEnroll). Previously referenced as
   dws-recovery-codes with no matching rule anywhere in the project, so it rendered with
   plain <pre> browser defaults. */
.auth-recovery-codes {
    /* --background-adornment is not a defined custom property anywhere in this codebase
       (the actual token, set in DWSBlazorComponentLibrary.css, is --adornment-background —
       the words are transposed). It's referenced under the wrong name throughout admin.css
       too, where it silently no-ops and the surrounding dark background shows through by
       coincidence; on this light auth card that same no-op left the block with no visible
       fill at all. Using the real token here, which is a light gray appropriate for a
       light surface. */
    background: var(--adornment-background);
    border: 1px solid var(--secondary);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}

/* Multi-step progress indicator (ResetPasswordConfirm's verify-link -> set-password flow). */
.auth-stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1.25rem;
    font-size: 0.8rem;
}

.auth-stepper__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--adornment-background);
    color: var(--secondary);
    font-weight: 600;
}

.auth-stepper__badge--active {
    background: var(--primary);
    color: var(--primary-text);
}

.auth-stepper__badge--done {
    background: var(--success);
    color: var(--primary-text);
}

.auth-stepper__label {
    color: var(--secondary);
}

.auth-stepper__label--active {
    color: var(--text);
    font-weight: 600;
}

.auth-stepper__sep {
    color: var(--secondary);
}

/* Password field + show/hide toggle button, wired to native JS on the two static-SSR pages
   (Login, MfaChallenge context) and to component state everywhere else. */
.auth-password-group {
    display: flex;
    align-items: stretch;
}

.auth-password-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* A field with an action beside it (SMS code + "Send code"); stacks on narrow phones. */
.auth-inline-group {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.auth-inline-group > :first-child {
    flex: 1 1 12rem;
    min-width: 0;
}

/* The logo is black line art: on the dark theme it disappeared into the card. Same cadet-blue disc as the navbar logo. */
.auth-logo {
    background-color: cadetblue;
    border-radius: 50%;
    padding: 8px;
    box-sizing: border-box;
}