/**
 * auth.css - gemeinsames Stylesheet der Vor-Login-Seiten
 *
 * Die Anmelde-, Registrierungs- und Passwort-Strecken sind
 * Standalone-Dokumente ohne Anschluss an das Panel-Theme. Diese Datei ist
 * deshalb self-contained: sie bringt Token, Schrift, Fokusring und das
 * Auth-Karten-Muster selbst mit und funktioniert auch ohne Bootstrap.
 *
 * Werte identisch zu control-v2.css (Neutrale, Radius, Schatten, Fokus,
 * Status). Der Unterschied: vor dem Login ist kein Mandant aufgeloest --
 * es gibt nur EINE Markenfarbe, die die Seite als --corp-primary einspeist.
 * Die fuenf Markenrollen werden daraus per color-mix abgeleitet.
 *
 * Einbau je Seite:
 *   <link href="/control/assets/css/auth.css?t=1" rel="stylesheet">
 *   danach ein kleiner Rest-<style>-Block mit dem Seiten-Sonderfall und
 *   :root { --corp-primary: <Firmen-/Providerfarbe>; }
 */

@import url('/assets/vendor/fonts/inter/inter.css');

/* ==========================================================
   1. Token - Neutrale, Masse, Radius, Schatten, Fokus, Status
   ========================================================== */
:root {
    /* warme Papier-Neutrale statt kuehlem Grau */
    --content-bg:      #f7f5f1;
    --card-bg:         #fdfcfa;
    --text-primary:    #1d1c1a;
    --text-secondary:  #565349;
    --border-color:    #e6e3db;

    --popover:              #ffffff;
    --muted:                #efece6;
    --muted-foreground:     #565349;
    --disabled-foreground:  #8f8c84;  /* einzige Farbe unter 4,5:1 - nur fuer disabled */
    --input:                #84806f;  /* Formularrahmen, traegt 3:1 */
    --overlay:              rgba(29, 28, 26, 0.48);

    /* Radius-Familie, bewusst gestaffelt */
    --radius-sm:  0.25rem;
    --radius-md:  0.5rem;
    --radius-lg:  0.75rem;
    --radius-xl:  1rem;
    --radius-full: 9999px;

    /* Schatten als Hierarchie, nicht als Schmuck */
    --shadow-sm: 0 1px 2px rgba(29,28,26,0.06);
    --shadow-md: 0 2px 8px rgba(29,28,26,0.09);
    --shadow-lg: 0 8px 24px rgba(29,28,26,0.13);

    /* Masse */
    --control-height:    2.5rem;   /* 40 px Standard */
    --control-height-sm: 2rem;     /* 32 px kompakt  */
    --size-target-min:   1.5rem;   /* 24 px Untergrenze jedes Klickziels */

    /* Fokus: harter Doppelring (Halo in Grundfarbe + Ring in Tinte) */
    --focus-ring:  #1d1c1a;
    --focus-halo:  #f7f5f1;
    --focus-ring-width: 2px;
    --focus-halo-width: 2px;

    /* Marker - EIN Rot in beiden Themes */
    --marker-bg: #d92d20;
    --marker-fg: #ffffff;

    /* Status - fest, nicht mandantenfaehig */
    --status-success: #158846; --status-success-text: #087d3e; --status-success-surface: #e2f2e6; --status-success-on: #ffffff;
    --status-warning: #a16207; --status-warning-text: #995d05; --status-warning-surface: #f7ecd4; --status-warning-on: #ffffff;
    --status-danger:  #d92d20; --status-danger-text:  #d02216; --status-danger-surface:  #fbe8e4; --status-danger-on:  #ffffff;
    --status-info:    #2563c7; --status-info-text:    #2563c7; --status-info-surface:    #e4edfb; --status-info-on:    #ffffff;

    /* Schrift */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ==========================================================
   2. Markenrollen - abgeleitet aus der EINEN Pre-Auth-Farbe

   Vor dem Login ist der Mandant nicht aufgeloest; es gibt keine fertig
   gerechnete Palette wie im Panel, sondern nur die Brandfarbe, die die
   Seite selbst einspeist. Die Ableitung per color-mix ist eine Naeherung
   ohne Kontrastgatter - fuer die vier Vor-Login-Seiten vertretbar.

   Der Fallback unten greift nur, wenn eine Seite --corp-primary nicht
   setzt; jede der vier Seiten ueberschreibt ihn in ihrem eigenen
   <style>-Block mit der Provider-/Firmenfarbe.
   ========================================================== */
:root {
    --corp-primary: #006682;

    --brand-primary:           var(--corp-primary);
    --brand-interactive:       var(--corp-primary);
    --brand-interactive-hover: color-mix(in oklab, var(--corp-primary) 88%, #1d1c1a);
    --brand-on-interactive:    #ffffff;
    --brand-text:              color-mix(in oklab, var(--corp-primary) 82%, #1d1c1a);
    --brand-surface:           color-mix(in oklab, var(--corp-primary) 12%, var(--content-bg));
}

/* ==========================================================
   3. Dunkles Theme

   Die Vor-Login-Seiten stehen heute fest auf data-bs-theme="light"; die
   Token liegen trotzdem bereit, damit eine Seite, die spaeter umschaltet
   (oder ein Provider mit dunkler Loginseite), nichts nachziehen muss.
   Ein Umschalter wird hier ausdruecklich NICHT eingebaut.
   ========================================================== */
[data-bs-theme="dark"] {
    --content-bg:      #131311;
    --card-bg:         #1d1d1a;
    --text-primary:    #f1efe9;
    --text-secondary:  #b1aea4;
    --border-color:    #34332e;

    --popover:              #262622;  /* heller als card: Erhebung ueber Helligkeit */
    --muted:                #24231f;
    --muted-foreground:     #b1aea4;
    --disabled-foreground:  #6f6c64;
    --input:                #8b8778;
    --overlay:              rgba(0, 0, 0, 0.62);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 2px 8px rgba(0,0,0,.55);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.6);

    --focus-ring: #f1efe9;
    --focus-halo: #131311;

    /* --marker-bg bleibt #d92d20 - bewusst derselbe Ton in beiden Themes */

    --status-success: #3fbf74; --status-success-text: #3fbf74; --status-success-surface: #152a1c; --status-success-on: #1d1c1a;
    --status-warning: #d9a13e; --status-warning-text: #d9a13e; --status-warning-surface: #2c2312; --status-warning-on: #1d1c1a;
    --status-danger:  #f0655b; --status-danger-text:  #f0655b; --status-danger-surface:  #341713; --status-danger-on:  #1d1c1a;
    --status-info:    #6d9fe8; --status-info-text:    #6d9fe8; --status-info-surface:    #16223a; --status-info-on:    #1d1c1a;

    --brand-interactive-hover: color-mix(in oklab, var(--corp-primary) 82%, #f1efe9);
    --brand-text:              color-mix(in oklab, var(--corp-primary) 70%, #f1efe9);
    --brand-surface:           color-mix(in oklab, var(--corp-primary) 16%, var(--content-bg));
}

/* ==========================================================
   4. Bootstrap-Bruecke

   Bootstrap wird auf diesen Seiten teils geladen, teils nicht. Wo es
   geladen ist, uebernimmt es hierueber Schrift, Grundfarben und Radius;
   wo nicht, laufen die Regeln unten ohne Bootstrap durch.
   ========================================================== */
:root {
    --bs-body-font-family: var(--font-sans);
    --bs-body-bg:          var(--card-bg);
    --bs-body-color:       var(--text-primary);
    --bs-border-color:     var(--border-color);
    --bs-border-radius:    var(--radius-md);
    --bs-link-color:       var(--brand-text);
    --bs-link-hover-color: var(--brand-text);
    --bs-secondary-color:  var(--muted-foreground);
}
[data-bs-theme="dark"] {
    --bs-body-bg:          var(--card-bg);
    --bs-body-color:       var(--text-primary);
    --bs-border-color:     var(--border-color);
    --bs-link-color:       var(--brand-text);
    --bs-link-hover-color: var(--brand-text);
    --bs-secondary-color:  var(--muted-foreground);
}

/* ==========================================================
   5. Grundlage - laeuft auch ohne Bootstrap-Reboot
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--text-primary);
}

/* Der Doppelring - der sichtbarste einzelne Systemzug, deshalb
   ungeschichtet notiert, damit er Bootstraps eigene Ringe uebersteuert. */
:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 var(--focus-halo-width) var(--focus-halo),
        0 0 0 calc(var(--focus-halo-width) + var(--focus-ring-width)) var(--focus-ring);
}
@media (forced-colors: active) {
    :focus-visible { outline: 2px solid CanvasText; }
}
/* Bootstraps weichen Alpha-Ring abschalten, sonst liegen zwei Bilder uebereinander */
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: none; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
    box-shadow:
        0 0 0 var(--focus-halo-width) var(--focus-halo),
        0 0 0 calc(var(--focus-halo-width) + var(--focus-ring-width)) var(--focus-ring);
}

/* ==========================================================
   6. Auth-Seite und Auth-Karte
   ========================================================== */

/* Die 5 rem unten sind kein Zufall: campus_legal_footer_html() haengt
   Impressum/Datenschutz per position:fixed an den Viewport-Fuss und
   reserviert dafuer sonst body{padding-bottom:5rem}. Auf einer
   flex-zentrierten Auth-Seite reserviert das die Karte selbst. */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1rem 5rem;
    background: var(--content-bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 28rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2rem;
}

.auth-card__logo {
    display: block;
    max-height: 40px;
    max-width: 220px;
    margin-bottom: 1.5rem;
}
.auth-card__head { margin-bottom: 1.5rem; }
.auth-card__head .auth-card__logo { margin-inline: auto; }

.auth-card h1,
.auth-card h2,
.auth-card h3,
.auth-card .auth-card__title {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 .25rem;
}

.auth-card__lead {
    color: var(--muted-foreground);
    font-size: .9375rem;
    line-height: 1.5rem;
    margin: 0 0 1.5rem;
}
.auth-card__head .auth-card__lead { margin-bottom: 0; }

/* ==========================================================
   7. Formularfelder
   ========================================================== */
.auth-card label,
.auth-card .form-label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: .25rem;
}

.auth-card .form-control,
.auth-card .form-select,
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
    width: 100%;
    min-height: var(--control-height);
    padding: .5rem .75rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5rem;
}
.auth-card .form-control::placeholder { color: var(--muted-foreground); }
.auth-card .form-control:focus,
.auth-card .form-select:focus { border-color: var(--brand-interactive); outline: none; }
.auth-card .form-control[readonly] {
    background: var(--muted);
    color: var(--text-secondary);
}
/* Bootstraps .bg-light traegt selbst !important - nur deshalb hier auch */
.auth-card .form-control.bg-light { background-color: var(--muted) !important; }
.auth-card .form-text { color: var(--muted-foreground); font-size: .8125rem; margin-top: .25rem; }

/* Bootstrap-Floating-Labels bleiben, wo sie heute stehen (register,
   control/login) - nur Rahmen, Radius und Farben ziehen mit. Die
   Feldhoehe muss dort groesser bleiben als --control-height, sonst
   kollidiert das schwebende Label mit dem Wert. */
.auth-card .form-floating { margin-bottom: 1rem; }
.auth-card .form-floating > .form-control,
.auth-card .form-floating > .form-select {
    min-height: calc(3.5rem + 2px);   /* Bootstraps eigenes Mass - das
                                         schwebende Label ist darauf gerechnet */
    height: calc(3.5rem + 2px);
    padding: 1rem .75rem;
}
.auth-card .form-floating > label {
    padding: 1rem .75rem;
    margin-bottom: 0;
    font-weight: 400;
    color: var(--muted-foreground);
}
/* Bootstraps Floating-Mechanik wiederherstellen, die die generischen
   auth-Regeln oben sonst ueberstimmen: Platzhalter bleibt unsichtbar,
   bis das Label nach oben gleitet; gefuellte Felder und Selects tragen
   Bootstraps gestaffelte Innenabstaende. */
.auth-card .form-floating > .form-control::placeholder { color: transparent; }
.auth-card .form-floating > .form-control:focus,
.auth-card .form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}
.auth-card .form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}

.auth-card .form-check { margin-bottom: 1.5rem; }
.auth-card .form-check .form-check-label {
    display: inline;
    font-weight: 400;
    font-size: .9375rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}
.auth-card .form-check-input {
    border-color: var(--input);
    border-radius: var(--radius-sm);
}
.auth-card .form-check-input:checked {
    background-color: var(--brand-interactive);
    border-color: var(--brand-interactive);
}
.auth-card .form-check a { color: var(--brand-text); }

/* ==========================================================
   8. Aktionen - genau eine gefuellte Primaeraktion je Karte
   ========================================================== */
.auth-btn,
.auth-card .btn-primary {
    --bs-btn-bg: var(--brand-interactive);
    --bs-btn-border-color: var(--brand-interactive);
    --bs-btn-color: var(--brand-on-interactive);
    --bs-btn-hover-bg: var(--brand-interactive-hover);
    --bs-btn-hover-border-color: var(--brand-interactive-hover);
    --bs-btn-hover-color: var(--brand-on-interactive);
    --bs-btn-active-bg: var(--brand-interactive-hover);
    --bs-btn-active-border-color: var(--brand-interactive-hover);
    --bs-btn-active-color: var(--brand-on-interactive);
    --bs-btn-disabled-bg: var(--brand-interactive);
    --bs-btn-disabled-border-color: var(--brand-interactive);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: var(--control-height);
    padding: .5rem 1.25rem;
    border: 1px solid var(--brand-interactive);
    border-radius: var(--radius-md);
    background: var(--brand-interactive);
    color: var(--brand-on-interactive);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
/* Bootstraps .btn:hover traegt dieselbe Spezifitaet wie .auth-btn und
   wuerde ohne diese Zeilen auf --bs-btn-hover-bg zurueckfallen. */
.auth-btn:hover, .auth-btn:focus, .auth-btn:active,
.auth-card .btn-primary:hover, .auth-card .btn-primary:focus, .auth-card .btn-primary:active {
    background: var(--brand-interactive-hover);
    border-color: var(--brand-interactive-hover);
    color: var(--brand-on-interactive);
    filter: none;
    transform: none;
}

.auth-btn--secondary {
    --bs-btn-bg: var(--card-bg);
    --bs-btn-border-color: var(--input);
    --bs-btn-color: var(--brand-text);
    --bs-btn-hover-bg: var(--brand-surface);
    --bs-btn-hover-border-color: var(--brand-interactive);
    --bs-btn-hover-color: var(--brand-text);
    background: var(--card-bg);
    border-color: var(--input);
    color: var(--brand-text);
}
.auth-btn--secondary:hover,
.auth-btn--secondary:focus,
.auth-btn--secondary:active {
    background: var(--brand-surface);
    border-color: var(--brand-interactive);
    color: var(--brand-text);
}
.auth-btn--inline {
    width: auto;
    min-height: var(--control-height-sm);
    padding: .375rem 1rem;
    font-size: .875rem;
}

/* ==========================================================
   9. Meldungen
   ========================================================== */
.auth-error-summary,
.auth-card .alert,
.auth-page .alert {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--muted);
    color: var(--text-primary);
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: .875rem;
    line-height: 1.25rem;
}
.auth-error-summary,
.auth-card .alert-danger,
.auth-page .alert-danger {
    border-color: var(--status-danger);
    background: var(--status-danger-surface);
    color: var(--status-danger-text);
}
.auth-card .alert-success, .auth-page .alert-success {
    border-color: var(--status-success);
    background: var(--status-success-surface);
    color: var(--status-success-text);
}
.auth-card .alert-warning, .auth-page .alert-warning {
    border-color: var(--status-warning);
    background: var(--status-warning-surface);
    color: var(--status-warning-text);
}
.auth-card .alert-info, .auth-page .alert-info {
    border-color: var(--status-info);
    background: var(--status-info-surface);
    color: var(--status-info-text);
}
.auth-card .alert ul, .auth-card .alert li { margin: 0; padding-left: 1rem; }

/* ==========================================================
   10. Fuss der Karte
   ========================================================== */
.auth-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .875rem;
    line-height: 1.25rem;
    color: var(--muted-foreground);
}
.auth-footer--ruled {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}
.auth-footer a {
    color: var(--brand-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.auth-footer a:hover { color: var(--brand-text); }
.auth-footer a.auth-btn { text-decoration: none; }
.auth-footer p { margin: 0 0 .5rem; }