/*
 * SMACT authentication shell — Milestone 2/6 of the Fortify migration.
 *
 * Scoped entirely under .auth-shell so it can never leak into the application
 * chrome, and written against explicit values rather than Metronic's CSS
 * custom properties: an undefined var() silently drops the whole declaration,
 * which on a login screen means an invisible field rather than a visible bug.
 *
 * Local assets only. The typeface comes from /css/fonts.css, which serves
 * Poppins from /fonts/poppins — no font CDN, and nothing here requests an
 * external origin (the application's CSP is `default-src 'self'`).
 *
 * Deliberately NOT loading /css/login.css: it sets `body { overflow: hidden }`
 * globally, which clips the taller screens (reset, verification) out of reach
 * on short viewports, and `* { font-weight: 300 }`, which fights Metronic's
 * own type scale.
 */

/*
 * Metronic's style.bundle.css sets `html { font-size: 13px }` for its own
 * component scale, and `rem` resolves against the ROOT — so every size in this
 * file rendered 19% smaller than written: 10.6px labels, a 12.2px lead, 13px
 * inputs and 41px controls. Small text on the one screen a user cannot skip,
 * touch targets under the 44px guideline, and 13px inputs are also below the
 * threshold at which iOS Safari zooms the page on focus.
 *
 * Restored to 16px here rather than by rewriting every value in px, because
 * this stylesheet is loaded ONLY by layouts.auth-mt8 — no application chrome
 * and no Metronic component is on these pages to be affected by it.
 *
 * `!important` is required, not preferred: Metronic declares
 * `html, body { font-size: 13px !important }`, plus 12px !important below
 * 992px and again below 768px, so nothing without it can win — and the
 * narrow-viewport variants are exactly where shrinking the scale hurts most.
 */
html,
body {
    font-size: 16px !important;
}

.auth-shell {
    --auth-ink: #ffffff;
    --auth-ink-soft: rgba(255, 255, 255, 0.72);
    --auth-ink-faint: rgba(255, 255, 255, 0.52);
    --auth-surface: rgba(16, 20, 28, 0.88);
    --auth-field: rgba(255, 255, 255, 0.06);
    --auth-field-focus: rgba(255, 255, 255, 0.10);
    --auth-line: rgba(255, 255, 255, 0.16);
    --auth-line-strong: rgba(255, 255, 255, 0.28);
    /*
     * #0f6fdc, not Metronic's #1b84ff. White on #1b84ff measures 3.63:1 —
     * below the 4.5:1 of WCAG SC 1.4.3 at 16px/500, which is not "large text".
     * #0f6fdc measures 4.85:1 and still clears 3:1 against the card as a
     * non-text boundary (3.55:1), so field borders and link outlines stay
     * compliant too. The RESTING state was the failing one; the old hover
     * value already passed, which is what made it easy to miss.
     */
    --auth-accent: #0f6fdc;
    --auth-accent-hover: #0b5cb8;
    --auth-accent-ring: rgba(27, 132, 255, 0.45);

    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    /* Vertical scrolling must always remain possible: at 390x664 with an open
       on-screen keyboard the reset form is taller than the viewport. Only the
       horizontal axis is clamped, as a backstop against a stray wide child. */
    overflow-x: hidden;
    padding: 2.5rem 1.25rem 1.5rem;
    background-color: #0b0f16;
    background-image: url('/images/login/2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--auth-ink);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Fixed scrim. Everything above it is read against a known dark base, so the
   card's translucency can never turn white text into a contrast failure over
   a bright region of the photograph. */
.auth-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 15% 0%, rgba(27, 132, 255, 0.22) 0%, rgba(27, 132, 255, 0) 55%),
        linear-gradient(160deg, rgba(8, 11, 16, 0.86) 0%, rgba(8, 11, 16, 0.94) 100%);
}

.auth-shell__main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.auth-shell__column {
    width: 100%;
    max-width: 27.5rem;
}

.auth-shell__brand {
    display: block;
    margin: 0 auto 2rem;
    max-width: 15rem;
    width: 100%;
    height: auto;
}

.auth-card {
    background: var(--auth-surface);
    border: 1px solid var(--auth-line);
    border-radius: 1rem;
    padding: 2.25rem 1.75rem;
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

@media (min-width: 576px) {
    .auth-card {
        padding: 2.75rem 2.5rem;
    }
}

.auth-card__title {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
    color: var(--auth-ink);
}

.auth-card__lead {
    margin: 0 0 1.75rem;
    color: var(--auth-ink-soft);
    font-size: 0.9375rem;
    line-height: 1.55;
}

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

.auth-field__label {
    display: block;
    margin-bottom: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--auth-ink-soft);
}

.auth-field__control {
    display: block;
    width: 100%;
    padding: 0.8125rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--auth-ink);
    background-color: var(--auth-field);
    border: 1px solid var(--auth-line-strong);
    border-radius: 0.625rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.auth-field__control::placeholder {
    color: var(--auth-ink-faint);
}

.auth-field__control:hover {
    border-color: rgba(255, 255, 255, 0.38);
}

.auth-field__control:focus {
    outline: none;
    background-color: var(--auth-field-focus);
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 0.25rem var(--auth-accent-ring);
}

/* Keyboard users get the ring even where a UA would suppress :focus styling. */
.auth-field__control:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.auth-field__control[aria-invalid='true'] {
    border-color: #f1416c;
}

.auth-field__error {
    display: block;
    margin-top: 0.4375rem;
    font-size: 0.8125rem;
    color: #ff8fa9;
}

.auth-field__hint {
    display: block;
    margin-top: 0.4375rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--auth-ink-faint);
}

/* Chrome/Edge paint autofilled inputs opaque white; the inset shadow trick is
   the only way to keep a password manager's fills readable on a dark field. */
.auth-field__control:-webkit-autofill,
.auth-field__control:-webkit-autofill:hover,
.auth-field__control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--auth-ink);
    -webkit-box-shadow: 0 0 0 62.5rem #1a2130 inset;
    caret-color: var(--auth-ink);
}

/*
 * Actions stack, always. The card is a fixed 27.5rem regardless of viewport,
 * so a viewport media query is the wrong signal for whether two buttons fit
 * side by side — at 1440px the shell is wide, the card is not, and a pair of
 * German labels ("Link erneut senden", "Zurück zur Anmeldung") wrapped to two
 * lines inside 173px each. One full-width primary action with the secondary
 * demoted below it is also the clearer hierarchy: these screens have one thing
 * to do and one way back.
 */
.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8125rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0.625rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * A SOLID LIGHT outline, not a same-hue glow. The previous ring composited to
 * ≈rgb(23,73,135): 2.47:1 against the button it surrounds and 1.96:1 against
 * the card — both below the 3:1 of WCAG SC 1.4.11 / 2.4.11. A keyboard user
 * tabbing onto a blue button got a faint blue halo on a blue button and could
 * not tell where focus was. White clears 3:1 against every surface here.
 */
.auth-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.25rem var(--auth-accent-ring);
}

.auth-btn--primary {
    background-color: var(--auth-accent);
    color: #ffffff;
}

.auth-btn--primary:hover {
    background-color: var(--auth-accent-hover);
    color: #ffffff;
}

.auth-btn--quiet {
    background-color: transparent;
    border-color: var(--auth-line-strong);
    color: var(--auth-ink-soft);
}

.auth-btn--quiet:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--auth-ink);
}

.auth-link {
    color: #8ec2ff;
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
}

/*
 * A secondary action that has to be a POST (signing out) but should read as a
 * link, not compete with the primary button next to it. Given a generous hit
 * area rather than the bare text bounds.
 */
.auth-linkbutton {
    display: inline-block;
    padding: 0.375rem 0;
    background: none;
    border: 0;
    font: inherit;
    color: #8ec2ff;
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
    cursor: pointer;
}

.auth-linkbutton:hover {
    color: #b9d9ff;
}

.auth-linkbutton:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 3px;
    border-radius: 0.125rem;
}

.auth-link:hover {
    color: #b9d9ff;
}

.auth-link:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 3px;
    border-radius: 0.125rem;
}

.auth-meta {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--auth-line);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--auth-ink-faint);
}

.auth-meta > p {
    margin: 0 0 0.5rem;
}

/*
 * 13px/1.6 text gives a ~21px hit box, under the 24px of WCAG SC 2.5.8 — and
 * one of these links is the ONLY way out of the verification wall for somebody
 * who mistyped their address at sign-up.
 */
.auth-meta .auth-link {
    display: inline-block;
    padding: 0.25rem 0;
}

.auth-meta > p:last-child,
.auth-meta > form:last-child {
    margin-bottom: 0;
}

.auth-meta form {
    margin: 0;
}

/* --- Notices ---------------------------------------------------------- */

.auth-notice {
    display: flex;
    gap: 0.6875rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--auth-line);
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--auth-ink);
}

/* The state is carried by a small dot plus the surface tint rather than a
   coloured bar down one edge. Colour is never the only signal: every notice
   also has wording that says what happened, so the dot is decorative and is
   hidden from assistive technology. */
.auth-notice__dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.4375rem;
    border-radius: 50%;
    background-color: currentColor;
}

.auth-notice__body {
    min-width: 0;
}

.auth-notice__title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.125rem;
}

.auth-notice--danger {
    border-color: rgba(241, 65, 108, 0.45);
    background-color: rgba(241, 65, 108, 0.12);
}

.auth-notice--danger .auth-notice__dot {
    color: #ff8fa9;
}

.auth-notice--warning {
    border-color: rgba(255, 199, 0, 0.45);
    background-color: rgba(255, 199, 0, 0.12);
}

.auth-notice--warning .auth-notice__dot {
    color: #ffd54a;
}

.auth-notice--info {
    border-color: rgba(27, 132, 255, 0.45);
    background-color: rgba(27, 132, 255, 0.12);
}

.auth-notice--info .auth-notice__dot {
    color: #8ec2ff;
}

.auth-notice--success {
    border-color: rgba(23, 198, 83, 0.45);
    background-color: rgba(23, 198, 83, 0.12);
}

.auth-notice--success .auth-notice__dot {
    color: #55dd8b;
}

/* --- Footer ----------------------------------------------------------- */

/* In normal flow, never absolutely positioned: a fixed footer overlaps the
   card on short viewports (a 390x664 phone with the keyboard open) and hides
   the submit button behind it. */
.auth-footer {
    flex: 0 0 auto;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
}

.auth-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.auth-footer__links a {
    color: var(--auth-ink-soft);
    text-decoration: none;
}

.auth-footer__links a:hover {
    color: var(--auth-ink);
    text-decoration: underline;
}

.auth-footer__links a:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 3px;
    border-radius: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
    .auth-shell *,
    .auth-shell *::before,
    .auth-shell *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/*
 * ---------------------------------------------------------------------------
 * Milestone 4/6 — two-factor challenge and passkey login
 * ---------------------------------------------------------------------------
 */

/*
 * The alternative-method disclosure, used for "use a recovery code instead" on
 * the challenge screen.
 *
 * <details> rather than JavaScript tabs: it is keyboard-operable and
 * screen-reader-announced with no focus management of our own, and with
 * scripting disabled it degrades to an expanded second form rather than to a
 * dead control. On the one screen a locked-out user cannot skip, that matters
 * more than the animation a tab widget would buy.
 */
.auth-details {
    margin-top: 1.75rem;
    border-top: 1px solid var(--auth-line);
    padding-top: 1.25rem;
}

.auth-details__summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    /* SC 2.5.8 wants 24px; this is the stricter mobile guideline. */
    min-height: 2.75rem;
    font-size: 0.9375rem;
    color: #8ec2ff;
    text-underline-offset: 0.1875rem;
    text-decoration: underline;
}

.auth-details__summary:hover {
    color: #b9daff;
}

.auth-details__summary:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    border-radius: 0.125rem;
}

.auth-details[open] > .auth-details__summary {
    margin-bottom: 0.75rem;
}

/*
 * A closing note in the quiet ink, for statements that reassure rather than
 * instruct — "abandoning this step changes nothing".
 */
.auth-footnote {
    margin: 1.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--auth-ink-soft);
}

/*
 * The secondary authentication action, separated by a labelled divider.
 *
 * The "oder" label is DECORATIVE and the markup carries `aria-hidden`: the button
 * beneath it reads "Mit Passkey anmelden", which already says it is an
 * alternative, so announcing a bare "oder" first would only add noise. The rule
 * is visual grouping for sighted users.
 */
.auth-alt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.75rem 0 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--auth-ink-soft);
}

.auth-alt::before,
.auth-alt::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--auth-line);
}

/*
 * Deliberately `auth-btn--quiet`-shaped rather than a second primary button:
 * the password form stays the primary path, and two filled buttons of equal
 * weight would make the screen ask a question instead of offering an option.
 *
 * There is no provider logo here and there never will be — this is a passkey
 * action, not a social sign-in.
 */
.auth-btn--passkey {
    background-color: transparent;
    border-color: var(--auth-line-strong);
    color: var(--auth-ink);
}

.auth-btn--passkey:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.06);
}

.auth-btn--passkey[disabled] {
    opacity: 0.55;
    cursor: progress;
}

/* ==========================================================================
 * Milestone 5/6 — public self-service registration
 *
 * Additive only, and scoped to classes that exist on the registration and
 * provisioning screens alone, so no existing auth screen changes by a pixel.
 * `auth-field__error`, `auth-field__hint` and `auth-footnote` are deliberately
 * NOT redefined here — they already exist above and the registration screens
 * reuse them verbatim. Same tokens, same rhythm, same focus treatment: this is
 * one design system, not a second one bolted on.
 * ========================================================================== */

/*
 * The one screen that needs more than 27.5rem. 40rem fits a two-column name row
 * with room to breathe and still reads as a card rather than a page-wide form.
 * Opt-in via @section('columnModifier'), so nothing else widens.
 */
.auth-shell__column--wide {
    max-width: 40rem;
}

/*
 * Paired fields. One column below 48em — a 390px viewport cannot hold two
 * usable text inputs side by side, and forcing it produces the ~173px controls
 * that made the Milestone 2/6 action buttons wrap onto two lines.
 */
.auth-fieldrow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.25rem;
}

@media (min-width: 48em) {
    .auth-fieldrow {
        grid-template-columns: 1fr 1fr;
    }
}

/*
 * The trial promise. A quiet panel, not a banner: it is context for the form
 * below it, and anything louder would compete with the one primary action.
 */
.auth-trial {
    margin: 0 0 1.75rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--auth-line);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
}

.auth-trial__headline {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--auth-ink);
}

.auth-trial__list {
    margin: 0;
    padding-left: 1.125rem;
    color: var(--auth-ink-soft);
    font-size: 0.875rem;
    line-height: 1.6;
}

.auth-trial__list li + li {
    margin-top: 0.25rem;
}

/*
 * The error summary. A form this long can push a rejected field off-screen, so
 * the failures are also listed once at the top where focus lands after a
 * re-render. Border and fill are the same family as auth-field__error's ink so
 * the two read as one state.
 */
.auth-errorsummary {
    margin: 0 0 1.5rem;
    padding: 1rem 1.125rem;
    border: 1px solid rgba(255, 143, 169, 0.45);
    border-radius: 0.75rem;
    background: rgba(241, 65, 108, 0.12);
}

.auth-errorsummary__title {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: var(--auth-ink);
    font-size: 0.9375rem;
}

.auth-errorsummary__list {
    margin: 0;
    padding-left: 1.125rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--auth-ink-soft);
}

/*
 * Consent rows. The whole row is the label, so the sentence is part of the hit
 * target — a 1.125rem checkbox on its own is well under the 24px minimum, and
 * consent is the last control that should be fiddly to operate.
 */
.auth-consent {
    margin: 0.5rem 0 1.5rem;
}

.auth-consent__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

.auth-consent__box {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1875rem;
    accent-color: var(--auth-accent);
}

.auth-consent__box:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
}

.auth-consent__text {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--auth-ink-soft);
}

.auth-consent__text a {
    color: var(--auth-ink);
    text-decoration: underline;
}