/* ============================================================
   ReqCompass – Auth-Seiten (Login, MFA, Passwort vergessen, Passwort setzen)

   Bewusst ein eigenes Stylesheet statt <style>-Blöcken in den .razor-Dateien:
   in Razor müsste dort jedes @media/@keyframes als @@ escaped werden, und die
   drei Auth-Seiten hatten bislang dieselbe Card-Hülle dreifach kopiert.

   Alle Farben, Radien und Schriften kommen aus den Tokens in app.css
   (--accent, --ink, --line, --radius ...). Dadurch wirkt die Anmeldung wie der
   Rest der Anwendung, und das White-Label über --clr-primary greift ebenfalls:
   --auth-accent fällt auf --clr-primary zurück, das per setCssVar aus den
   Firmeneinstellungen überschrieben wird.

   Kein Third-Party-CDN, keine externen Schriften (Security-Audit M-5).
   ============================================================ */

:root {
    --auth-accent: var(--clr-primary, #3574e6);

    /* Fokus-Ring identisch zur restlichen Anwendung. theme.css definiert
       --focus-ring global; der Wert hier greift nur, falls diese Datei einmal
       ohne theme.css geladen wird. Beide müssen gleich bleiben. */
    --auth-focus-ring: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--auth-accent) 25%, transparent));
}

/* ------------------------------------------------------------
   Grundgerüst: eine Spalte, Formular mittig

   Vorher stand links eine ganzseitige blaue Markenfläche und rechts das
   Formular. Das schob die Anmeldung aus der Mitte und dominierte die Seite mit
   Farbe, ohne dass die Fläche etwas beitrug, das der Nutzer beim Anmelden
   braucht. Jetzt: weiße Seite, Karte zentriert, Marke als schlichte Zeile
   darüber.

   html/body haben in app.css overflow:hidden – gescrollt wird deshalb
   ausschließlich innerhalb von .auth-main.
   ------------------------------------------------------------ */

.auth-shell {
    height: 100vh;
    min-height: 100vh;
    background: var(--tint, #f2f5f8);
    font-family: var(--font-body);
    color: var(--ink, #14212f);
}

.auth-main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    height: 100%;
    padding: 40px 24px;
    overflow-y: auto;
    /* Leicht getönte Fläche statt reinem Weiß. Sie trägt selbst nichts bei, ist aber
       die Voraussetzung dafür, dass die weiße Karte als abgesetzte Fläche gelesen
       wird - auf weißem Grund bliebe von einer Karte nur ihr Rahmen übrig. */
    background: var(--tint, #f2f5f8);
}

/* Fußzeile unter der Karte — trug vorher die Markenfläche. */
.auth-foot {
    margin: 0;
    font-size: .8rem;
    color: var(--ink-soft, #45566a);
    opacity: .75;
}

/* ------------------------------------------------------------
   Sprachwahl (Deutsch / Englisch)

   Absolut oben rechts statt im Fluss über der Karte: Die Karte bleibt dadurch
   senkrecht mittig, unabhängig davon wie hoch die jeweilige Seite ist -
   Anmeldung, MFA-Schritt und Passwort-setzen unterscheiden sich deutlich.
   ------------------------------------------------------------ */

.auth-lang {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    /* Weiß wie die Karte, seit die Fläche getönt ist. Vorher stand hier --tint -
       das ist jetzt die Farbe des Untergrunds, die Schaltfläche wäre unsichtbar. */
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(20, 33, 47, .04);
}

.auth-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 4px 10px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink-soft);
    text-decoration: none;
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}

.auth-lang-btn:hover {
    color: var(--ink);
    background: var(--tint);
}

/* Aktive Sprache als gefüllte Pille statt als weiße Erhebung: Auf der weißen
   Pille wäre Weiß auf Weiß nicht mehr zu unterscheiden. Der Akzent kommt aus
   --auth-accent und trägt damit das White-Label mit. */
.auth-lang-btn.is-active {
    color: var(--auth-accent);
    background: color-mix(in srgb, var(--auth-accent) 12%, transparent);
}

.auth-lang-btn:focus-visible {
    outline: none;
    box-shadow: var(--auth-focus-ring);
}

/* Die Karte selbst: weiße Fläche auf getöntem Grund.
   Gilt für alle vier Auth-Seiten (Anmeldung, MFA-Schritt, Passwort vergessen,
   Passwort setzen) - die Hülle liegt im LoginLayout.

   Rahmen UND Schatten, nicht nur eines von beidem: Der Schatten allein trägt bei
   hellen Bildschirmen und im Ausdruck zu wenig, der Rahmen allein wirkt flach.
   Der Schatten ist zweistufig - eine enge Kante direkt an der Karte, eine weiche
   Tiefe darunter; ein einzelner großer Schatten wirkt schnell wie eine Wolke.

   Radius etwas größer als der globale --radius (10px): Bei einer Fläche dieser
   Größe wirkt der kleine Radius eher wie ein Ausrutscher als wie eine Absicht. */
.auth-card {
    width: 100%;
    max-width: 400px;
    padding: 34px 30px;
    background: var(--paper, #fff);
    border: 1px solid var(--line, #d9e0e7);
    border-radius: 16px;
    box-shadow:
        0 1px 2px rgba(20, 33, 47, .04),
        0 12px 28px -12px rgba(20, 33, 47, .16);
}

/* Auf schmalen Geräten schrumpft der Innenabstand: Sonst bleibt vom Formular
   zwischen den Rändern zu wenig übrig. Die Karte bleibt bewusst eine Karte und
   wird nicht randlos - sonst verliert die Seite genau die Fassung, um die es
   hier geht. */
@media (max-width: 480px) {
    .auth-card {
        padding: 26px 20px;
        border-radius: 14px;
    }
}

/* Marke oben links — Gegenstück zur Sprachwahl oben rechts. Absolut positioniert
   wie diese, damit die Karte senkrecht mittig bleibt.

   Hieß früher .auth-mobile-brand und erschien nur auf schmalen Viewports als
   Ersatz für die blaue Fläche. Seit die Fläche weg ist, ist sie der einzige
   Markenträger und damit immer sichtbar. */
.auth-brandline {
    position: absolute;
    top: 24px;
    left: 28px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink, #14212f);
}

.auth-brandline svg {
    width: 32px;
    height: 32px;
}

/* Auf sehr schmalen Viewports würden Marke und Sprachwahl kollidieren —
   dann nur das Zeichen ohne Wortmarke. */
@media (max-width: 420px) {
    .auth-brandline span {
        display: none;
    }
}

.auth-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink, #14212f);
}

.auth-sub {
    margin: 0 0 26px;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--ink-soft, #45566a);
}

/* ------------------------------------------------------------
   Felder
   Das Icon liegt im Feld statt in einer vorgelagerten input-group-Box –
   das war der auffälligste Bootstrap-Look der alten Seiten.
   ------------------------------------------------------------ */

.auth-field-group {
    margin-bottom: 18px;
}

.auth-label {
    display: block;
    margin-bottom: 7px;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ink, #14212f);
}

.auth-field {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-field > i {
    position: absolute;
    left: 14px;
    font-size: 1rem;
    line-height: 1;
    color: var(--ink-soft, #45566a);
    opacity: .65;
    pointer-events: none;
    transition: color .15s ease, opacity .15s ease;
}

.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink, #14212f);
    background: var(--paper, #fff);
    border: 1px solid var(--line, #d9e0e7);
    border-radius: var(--radius, 10px);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    appearance: none;
}

.auth-input::placeholder {
    color: color-mix(in srgb, var(--ink-soft, #45566a) 55%, transparent);
}

.auth-input:hover:not(:focus) {
    border-color: color-mix(in srgb, var(--auth-accent) 35%, var(--line, #d9e0e7));
}

.auth-input:focus {
    outline: none;
    border-color: var(--auth-accent);
    box-shadow: var(--auth-focus-ring);
}

.auth-field:focus-within > i {
    color: var(--auth-accent);
    opacity: 1;
}

/* Der globale Fokus-Ring aus app.css würde hier doppelt zeichnen. */
.auth-input:focus-visible {
    outline: none;
}

.auth-input.has-toggle {
    padding-right: 46px;
}

/* Passwort ein-/ausblenden. Bewusst ein natives <button type="button"> mit
   JS-Handler (auth.js) statt @onclick – der Login darf nicht vom Blazor-Circuit
   abhängen, siehe Kommentare in Login.razor. */
.auth-eye {
    position: absolute;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--ink-soft, #45566a);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.auth-eye:hover {
    color: var(--ink, #14212f);
    background: var(--tint, #f2f5f8);
}

.auth-eye .bi-eye-slash { display: none; }
.auth-eye.is-visible .bi-eye { display: none; }
.auth-eye.is-visible .bi-eye-slash { display: inline-block; }

/* Caps-Lock-Hinweis: per Klasse von auth.js eingeblendet. */
.auth-hint {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    font-size: .8rem;
    color: var(--amber, #b06f00);
}

.auth-hint.is-shown {
    display: flex;
}

.auth-row {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 22px;
}

.auth-link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--auth-accent);
    text-decoration: none;
}

.auth-link:hover {
    color: var(--accent-dark, #2258c4);
    text-decoration: underline;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 48px;
    padding: 0 18px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    border: 1px solid transparent;
    border-radius: var(--radius, 10px);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .1s ease, color .15s ease;
}

.auth-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.auth-btn-primary {
    color: #fff;
    background: var(--auth-accent);
    box-shadow: 0 1px 2px rgba(20, 33, 47, .12);
}

.auth-btn-primary:hover:not(:disabled) {
    color: #fff;
    background: var(--accent-dark, #2258c4);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--auth-accent) 32%, transparent);
}

.auth-btn-primary:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: none;
}

.auth-btn-ghost {
    color: var(--ink, #14212f);
    background: var(--paper, #fff);
    border-color: var(--line, #d9e0e7);
}

.auth-btn-ghost:hover {
    color: var(--ink, #14212f);
    background: var(--tint, #f2f5f8);
    border-color: color-mix(in srgb, var(--ink-soft, #45566a) 30%, var(--line, #d9e0e7));
}

.auth-btn-quiet {
    width: 100%;
    padding: 10px 4px;
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: 500;
    color: var(--ink-soft, #45566a);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}

.auth-btn-quiet:hover {
    color: var(--auth-accent);
    background: var(--tint, #f2f5f8);
}

.auth-btn + .auth-btn,
.auth-btn + .auth-btn-quiet {
    margin-top: 10px;
}

.auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: auth-spin .7s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   Trenner und SSO
   ------------------------------------------------------------ */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    font-size: .8rem;
    color: var(--ink-soft, #45566a);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line, #d9e0e7);
}

/* ------------------------------------------------------------
   Meldungen
   ------------------------------------------------------------ */

.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 14px;
    font-size: .9rem;
    line-height: 1.45;
    border: 1px solid transparent;
    border-radius: var(--radius, 10px);
}

.auth-alert i {
    margin-top: 1px;
    flex: 0 0 auto;
    font-size: 1rem;
}

.auth-alert-error {
    color: var(--red, #b3362b);
    background: var(--red-soft, #fbe9e7);
    border-color: color-mix(in srgb, var(--red, #b3362b) 22%, transparent);
}

.auth-alert-success {
    color: var(--green-ink, #10603e);
    background: var(--green-soft, #e6f5ed);
    border-color: color-mix(in srgb, var(--green, #14724a) 25%, transparent);
}

.auth-alert-info {
    color: var(--accent-dark, #2258c4);
    background: var(--accent-soft, #e9f0fd);
    border-color: color-mix(in srgb, var(--auth-accent) 22%, transparent);
}

/* ------------------------------------------------------------
   MFA: segmentierte Code-Eingabe
   Die Boxen sind reine Anzeige-Felder ohne name-Attribut; auth.js schreibt den
   zusammengesetzten Code in das versteckte Feld name="code", das der native
   POST an /api/auth/verify-mfa überträgt. Ohne JavaScript bleibt das versteckte
   Feld leer – deshalb steht darunter immer der Backup-Code-Umschalter mit einem
   gewöhnlichen Textfeld als Rückfallebene.
   ------------------------------------------------------------ */

.otp-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.otp-box {
    width: 100%;
    height: 58px;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: var(--ink, #14212f);
    background: var(--paper, #fff);
    border: 1px solid var(--line, #d9e0e7);
    border-radius: var(--radius, 10px);
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
}

.otp-box:focus,
.otp-box:focus-visible {
    outline: none;
    border-color: var(--auth-accent);
    box-shadow: var(--auth-focus-ring);
}

.otp-box.is-filled {
    border-color: color-mix(in srgb, var(--auth-accent) 55%, var(--line, #d9e0e7));
    background: color-mix(in srgb, var(--auth-accent) 5%, var(--paper, #fff));
}

.auth-input-code {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   Passwort-Stärke und Regelwerk (Reset-Password)
   ------------------------------------------------------------ */

.auth-meter {
    height: 5px;
    margin-top: 12px;
    overflow: hidden;
    background: var(--tint, #f2f5f8);
    border-radius: 999px;
}

.auth-meter-bar {
    height: 100%;
    border-radius: 999px;
    transition: width .25s ease, background-color .25s ease;
}

.auth-meter-bar.is-weak   { background: var(--red, #b3362b); }
.auth-meter-bar.is-mid    { background: var(--amber, #b06f00); }
.auth-meter-bar.is-strong { background: var(--green, #14724a); }

.auth-meter-label {
    display: block;
    margin-top: 6px;
    font-size: .8rem;
    color: var(--ink-soft, #45566a);
}

.auth-reqs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--ink-soft, #45566a);
}

.auth-reqs li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.auth-reqs li.is-met {
    color: var(--green, #14724a);
}

.auth-reqs i {
    font-size: .85rem;
}

/* ------------------------------------------------------------
   Responsiv
   ------------------------------------------------------------ */

/* Auf niedrigen bzw. schmalen Viewports oben andocken statt mittig — bei
   kleiner Höhe (MFA-Schritt, Passwort-setzen) würde die Karte sonst oben
   abgeschnitten, weil gescrollt wird, aber nicht über den Anfang hinaus. */
@media (max-width: 991.98px), (max-height: 720px) {
    .auth-main {
        justify-content: flex-start;
        /* Genug Abstand, damit die Karte nicht unter Marke und Sprachwahl rutscht,
           die beide oben absolut positioniert sind. */
        padding-top: 88px;
    }
}

@media (max-width: 400px) {
    .otp-grid {
        gap: 5px;
    }

    .otp-box {
        height: 50px;
        font-size: 1.2rem;
    }

    .auth-reqs {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-input,
    .auth-btn,
    .auth-eye,
    .auth-meter-bar,
    .otp-box {
        transition: none;
    }

    .auth-spinner {
        animation-duration: 2s;
    }
}