/* ============================================================================
   sdb-tokens.css – semantische Design-Tokens der Schuelerdatenbank
   WP-01 (Befunde UX-07, UX-22). Eine Quelle fuer Flaechen, Text, Status,
   Akzent, Fokus, Radien, Abstaende, Hoehen, Typografie und Motion.

   GRUNDREGELN
   * Hell ist die Vorgabe auf :root, Dunkel ueberschreibt auf :root.dark.
     Die Dark-Mode-Mechanik des Projekts ist die Klasse `dark` auf <html>
     (tailwind.config: darkMode:'class'; Umschaltung im Setup-Block per
     document.documentElement.classList.toggle("dark", val), persistiert in
     localStorage("darkMode")). `prefers-color-scheme` wird bewusst NICHT
     ausgewertet, damit die gespeicherte Wahl der Nutzerin gilt.
   * Die Werte sind die HEUTE wirksamen Werte. WP-01 aendert das Aussehen
     nicht: die Tokens benennen den Bestand, sie verschieben ihn nicht.
   * Corporate Design Landkreis Esslingen ist bindend und steht unten in der
     Abschnitt "CD-Schicht": Hausfarbe Gelb, Quadrat-Motiv (2 px Radius),
     "gelber Fond ⇒ schwarze Schrift", Akzenttext schwarz auf hell / gelb auf
     dunkel. Diese Regeln duerfen Tokens ueberstimmen – sie stehen deshalb
     hier und nicht als Zufallsfund im Inline-<style>.
   * Dokumentation aller Properties: docs/redesign/bausteine.md
   ========================================================================= */

:root {
    /* ---------- Flaechen ---------------------------------------------- */
    --sdb-flaeche-grund:     #F9FAFB;  /* Seitengrund (heute body bg-gray-50) */
    --sdb-flaeche:           #FFFFFF;  /* Arbeitsflaeche / Panel / Karte */
    --sdb-flaeche-erhoben:   #FFFFFF;  /* Dialog, Popover, Dropdown */
    --sdb-flaeche-leise:     #F3F4F6;  /* Tabellenkopf, Chip, Hinterlegung */
    --sdb-flaeche-hover:     rgba(255, 237, 0, 0.12); /* Zeilen-Hover, CD-Gelb-Tint */
    --sdb-overlay:           rgba(15, 23, 42, 0.70);  /* Modal-Backdrop */

    /* ---------- Text ---------------------------------------------------
       Stufenleiter, in BEIDEN Modi streng fallend (Kontrast auf --sdb-flaeche):
         primaer 17,74 / 13,34  >  sekundaer-kontrast 10,31 / 9,89
                                >  sekundaer 7,56 / 9,89
                                >  tertiaer 5,70 / 7,09
       --sdb-text-tertiaer ist der EINZIGE Tokenwert, der nicht aus dem Bestand
       kommt: Der Bestandswert waere #6B7280 hell / #E5E7EB dunkel. Hell erreicht
       #6B7280 auf --sdb-flaeche-leise nur 4,39:1 (unter AA), dunkel ist #E5E7EB
       STAERKER als der Sekundaertext - der Name haette eine Rangfolge versprochen,
       die nicht gilt (Pruefbefunde B-03/B-04). Beide Bestandswerte sind von keiner
       Regel benutzt, die Aenderung ist also unsichtbar: die eine Bestandsstelle
       (.dark .text-gray-300) haengt an --sdb-bestand-gray-300-dunkel. */
    --sdb-text-primaer:              #111827; /* Hauptinformation */
    --sdb-text-sekundaer:            #4B5563; /* Hilfstext, Platzhalter, Metazeile */
    --sdb-text-sekundaer-kontrast:   #374151; /* Sekundaertext, der sicher lesbar sein muss */
    --sdb-text-tertiaer:             #5F6775; /* schwaechste zulaessige Textstufe - s. Hinweis oben */
    --sdb-text-invers:               #FFFFFF; /* Text auf gesaettigter dunkler Flaeche */

    /* ---------- Rahmen ------------------------------------------------- */
    --sdb-rahmen-leise:  #F1F3F5; /* fast unsichtbare Trennlinie */
    --sdb-rahmen:        #E9EBEE; /* Standardrahmen Panel/Tabelle */
    --sdb-rahmen-feld:   #D1D5DB; /* Eingabefeld – HEUTIGER Bestand (gray-300), 1,47:1 */
    --sdb-rahmen-stark:  #6B7280; /* Rahmen, der WCAG 1.4.11 (3:1) erreicht */

    /* ---------- Markenakzent (CD Landkreis Esslingen) ------------------ */
    --sdb-akzent-hell:   #FFED00; /* Hausfarbe, Pantone 109 (primary-500) */
    --sdb-akzent:        #E6D500; /* Akzentflaeche Hauptaktion (primary-600) */
    --sdb-akzent-hover:  #BFB200; /* Hover/aktiv (primary-700) */
    /* Begrenzung der Akzentflaeche. WP-02/B-01: CD-Gelb erreicht gegen Weiss nur
       1,51:1 - die Hauptaktion hat damit keinen sichtbaren Umriss, und an der
       Pilotstelle ist sie unterhalb 640 px nicht beschriftet. Dieser Ton erreicht
       3,96:1 gegen --sdb-flaeche / --sdb-flaeche-erhoben und 3,79:1 gegen
       --sdb-flaeche-grund, also WCAG 1.4.11 (3:1), und bleibt mit 2,62:1 gegen die
       gelbe Flaeche selbst dezent. Bewusste CD-Entscheidung, dem Menschen gemeldet. */
    --sdb-akzent-rahmen: #8C8200;
    --sdb-akzent-leise:  #FFFDE6; /* sehr blasse Akzentflaeche (primary-50) */
    --sdb-akzent-text:   #111111; /* Akzenttext/-icon: schwarz auf hell */
    --sdb-text-auf-akzent: #000000; /* CD: gelber Fond ⇒ schwarze Schrift */

    /* ---------- Status: Text + Flaeche + Rahmen ------------------------ */
    --sdb-erfolg-text:      #166534;
    --sdb-erfolg-flaeche:   #F0FDF4;
    --sdb-erfolg-rahmen:    #BBF7D0;
    --sdb-warnung-text:     #92400E;
    --sdb-warnung-flaeche:  #FFFBEB;
    --sdb-warnung-rahmen:   #FDE68A;
    --sdb-gefahr-text:      #991B1B;
    --sdb-gefahr-flaeche:   #FEF2F2;
    --sdb-gefahr-rahmen:    #FECACA;
    --sdb-info-text:        #1E40AF;
    --sdb-info-flaeche:     #EFF6FF;
    --sdb-info-rahmen:      #BFDBFE;

    /* Gesaettigte Gefahrenflaeche (heutiger Loeschen-Button, red-600/700) */
    --sdb-gefahr:            #DC2626;
    --sdb-gefahr-hover:      #B91C1C;
    --sdb-text-auf-gefahr:   #FFFFFF;

    /* ---------- Fokus -------------------------------------------------- */
    --sdb-fokus-ring:           #111827; /* dunkel auf hellem Grund */
    --sdb-fokus-ring-kontrast:  #FFFFFF; /* Gegenring im Abstand – haelt den Ring
                                            auch auf gelber Flaeche sichtbar */
    --sdb-fokus-breite:   3px;
    --sdb-fokus-abstand:  2px;

    /* ---------- Radien (CD: Quadrat-Motiv) ----------------------------- */
    --sdb-radius-s:     2px;
    --sdb-radius-m:     2px;
    --sdb-radius-l:     2px;
    --sdb-radius-rund:  9999px; /* nur Avatare, Statuspunkte, Toggles */

    /* ---------- Abstandsskala ----------------------------------------- */
    --sdb-abstand-1:  4px;
    --sdb-abstand-2:  8px;
    --sdb-abstand-3: 12px;
    --sdb-abstand-4: 16px;
    --sdb-abstand-6: 24px;
    --sdb-abstand-8: 32px;

    /* ---------- Hoehen ------------------------------------------------- */
    --sdb-hoehe-control-s:     36px; /* kompakt, Desktop-Toolbar */
    --sdb-hoehe-control-m:     40px; /* Standard */
    --sdb-hoehe-control-l:     44px; /* Touch-Zielgroesse (mobil Vorgabe) */
    --sdb-hoehe-tabellenzeile: 48px;
    --sdb-icon-s: 16px;
    --sdb-icon-m: 20px;
    --sdb-icon-l: 24px;

    /* ---------- Typografie -------------------------------------------- */
    --sdb-schrift-familie: 'Univers', 'Univers LT Std', 'UniversLTStd', Arial, sans-serif;
    --sdb-schrift-basis:  16px;
    --sdb-schrift-klein:  14px;
    --sdb-schrift-mini:   12px;
    --sdb-zeilenhoehe:      1.5;
    --sdb-zeilenhoehe-eng:  1.3;

    /* ---------- Motion ------------------------------------------------- */
    --sdb-motion-kurz:   0.15s;
    --sdb-motion-mittel: 0.2s;
    /* z-Index-Staffel (WP-23): sticky < Kopf < Dialoge (Stapel nach Oeffnungsreihenfolge) < Toasts. */
    --sdb-z-sticky: 20;
    --sdb-z-kopf: 40;
    --sdb-z-dialog: 50;
    --sdb-z-toast: 10000;
    --sdb-motion-kurve:  ease;

    /* ---------- Scrollbar --------------------------------------------- */
    --sdb-scrollbar:        #cbd5e1;
    --sdb-scrollbar-hover:  #94a3b8;

    /* ---------- Bestandsnamen (CD) ------------------------------------
       Aliasse fuer vorhandene Nutzungen. `--lke-yellow` steht als
       Inline-Style im Header (src/resources/views/app/header.blade.php,
       CD-Farbbalken) und muss weiter aufloesen. Nicht entfernen, ohne
       diese Stelle mitzuziehen. */
    /* Kontrastkorrektur der Altschicht: `.dark .text-gray-300` faerbt im
       Dunkelmodus Tailwinds gray-300 auf gray-200 um. Dieser Wert ist KEINE
       Stufe der Textleiter oben (er liegt zwischen primaer und sekundaer) und
       hat deshalb einen eigenen, ausdruecklich als Bestand gekennzeichneten
       Namen. Nicht fuer neue Komponenten verwenden. */
    --sdb-bestand-gray-300-dunkel: #E5E7EB;

    --lke-yellow:      var(--sdb-akzent-hell);
    --lke-gray:        #D9D9D9;  /* Panel-/Tabellen-Grau, CD */
    --lke-accent-text: var(--sdb-akzent-text);
}

:root.dark {
    /* ---------- Flaechen ---------------------------------------------- */
    --sdb-flaeche-grund:     #111827; /* gray-900 */
    --sdb-flaeche:           #1F2937; /* gray-800 */
    --sdb-flaeche-erhoben:   #374151; /* gray-700 */
    --sdb-flaeche-leise:     #374151;
    --sdb-flaeche-hover:     rgba(255, 237, 0, 0.08);
    --sdb-overlay:           rgba(15, 23, 42, 0.70);

    /* ---------- Text --------------------------------------------------- */
    --sdb-text-primaer:              #F3F4F6; /* gray-100 */
    --sdb-text-sekundaer:            #CBD5E1; /* slate-300 */
    --sdb-text-sekundaer-kontrast:   #CBD5E1;
    --sdb-text-tertiaer:             #ADB5C0; /* schwaecher als --sdb-text-sekundaer */
    --sdb-text-invers:               #111827;

    /* ---------- Rahmen ------------------------------------------------- */
    --sdb-rahmen-leise:  #1F2937; /* = Panelton, kein Lichtring */
    --sdb-rahmen:        #1F2937;
    --sdb-rahmen-feld:   #4B5563; /* gray-600 – HEUTIGER Bestand, 1,94:1 */
    --sdb-rahmen-stark:  #9CA3AF; /* erreicht 3:1 auf --sdb-flaeche */

    /* ---------- Markenakzent ------------------------------------------ */
    --sdb-akzent-leise:  rgba(255, 237, 0, 0.14);
    /* Im Dunkelmodus traegt das Gelb selbst: --sdb-akzent erreicht 9,70:1 gegen
       --sdb-flaeche, 11,73:1 gegen --sdb-flaeche-grund und 6,81:1 gegen
       --sdb-flaeche-erhoben. Ein dunkler Umriss waere dort nicht noetig und wuerde
       die Hauptaktion unnoetig abdunkeln - deshalb faellt der Rahmen mit der
       Flaeche zusammen und ist unsichtbar. */
    --sdb-akzent-rahmen: var(--sdb-akzent);
    --sdb-akzent-text:   #FFED00; /* CD: Gelb als sparsamer Text-/Linienakzent */

    /* ---------- Status ------------------------------------------------- */
    --sdb-erfolg-text:      #86EFAC;
    --sdb-erfolg-flaeche:   #14532D;
    --sdb-erfolg-rahmen:    #166534;
    --sdb-warnung-text:     #FCD34D;
    --sdb-warnung-flaeche:  #78350F;
    --sdb-warnung-rahmen:   #92400E;
    --sdb-gefahr-text:      #FCA5A5;
    --sdb-gefahr-flaeche:   #7F1D1D;
    --sdb-gefahr-rahmen:    #991B1B;
    --sdb-info-text:        #93C5FD;
    --sdb-info-flaeche:     #1E3A8A;
    --sdb-info-rahmen:      #1E40AF;

    /* ---------- Fokus -------------------------------------------------- */
    --sdb-fokus-ring:          #FFED00; /* hell auf dunklem Grund, CD-konform */
    --sdb-fokus-ring-kontrast: #111827; /* Gegenring: dunkel */

    /* ---------- Scrollbar --------------------------------------------- */
    --sdb-scrollbar:       #475569;
    --sdb-scrollbar-hover: #64748b;
}

/* ============================================================================
   Fokus-Utility
   3 px Ring mit 2 px Abstand, auf Hell und Dunkel sichtbar. Nur
   :focus-visible, damit Mausklicks keinen Ring hinterlassen.

   ZWEI RINGE, und zwar aus einem konkreten Grund: Die Hauptaktion ist CD-Gelb.
   Ein gelber Ring (Dunkelmodus) auf einem gelben Button waere unsichtbar
   (1,25:1). Deshalb fuellt ein `box-shadow` den Abstand mit der Gegenfarbe:
   aussen der Ring (--sdb-fokus-ring), innen der Gegenring
   (--sdb-fokus-ring-kontrast). Ring gegen Gegenring sind >= 14:1 in beiden
   Modi, also ist der Fokus auf JEDER Flaeche sichtbar – auch auf Gelb.

   WARUM `!important` (Pruefbefund B-05): Tailwinds `ring-*`, `focus:ring-*` und
   `shadow-*` schreiben ebenfalls `box-shadow`, und `focus:outline-none` setzt
   `outline: 2px solid transparent`. Alle erzeugen (0,2,0)-Selektoren, und das
   Play-CDN haengt sein <style> erst nach dem Parsen von <body> an den Kopf,
   also HINTER diese Datei. Bei Gleichstand gewinnt dann die Utility und loescht
   den Fokusring still. Im Bestand stehen 98x `focus:ring-primary-500` und 57x
   `focus:ring-2`; die Falle ist real. `!important` entscheidet das unabhaengig
   von Reihenfolge und Spezifitaet.

   WAS FOLGEPAKETE DESHALB NICHT MEHR SETZEN: auf einem Element mit `.sdb-fokus`
   keine `ring-*`/`ring-offset-*`/`focus:ring-*`/`focus:outline-none`-Utilities.
   Ein statischer `shadow-*` bleibt erlaubt, wird aber WAEHREND des Fokus vom
   Gegenring verdeckt. Siehe docs/redesign/bausteine.md.
   ========================================================================= */
.sdb-fokus:focus-visible {
    outline: var(--sdb-fokus-breite, 3px) solid var(--sdb-fokus-ring, #111827) !important;
    outline-offset: var(--sdb-fokus-abstand, 2px) !important;
    box-shadow: 0 0 0 var(--sdb-fokus-abstand, 2px) var(--sdb-fokus-ring-kontrast, #FFFFFF) !important;
}
.sdb-fokus:focus:not(:focus-visible) {
    outline: none;
}
/* Rueckfall fuer Browser ohne :focus-visible (sehr alt): sichtbarer Ring. */
@supports not selector(:focus-visible) {
    .sdb-fokus:focus {
        outline: var(--sdb-fokus-breite, 3px) solid var(--sdb-fokus-ring, #111827) !important;
        outline-offset: var(--sdb-fokus-abstand, 2px) !important;
        box-shadow: 0 0 0 var(--sdb-fokus-abstand, 2px) var(--sdb-fokus-ring-kontrast, #FFFFFF) !important;
    }
}

/* ============================================================================
   Bewegung reduzieren (prefers-reduced-motion)
   Die Vue-Uebergaenge `fade`/`slide` und die Fortschrittsanimation laufen
   heute fuer alle gleich (0,2 s). Mit `reduce` werden sie auf 0,01 ms
   gesetzt – NICHT auf `none`, weil <Transition> auf das transitionend-
   Ereignis wartet und bei `none` Elemente haengen bleiben koennten.
   `!important` ist noetig, weil die Transition-Klassen im spaeter folgenden
   Inline-<style> von app.blade.php stehen.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .fade-enter-active,
    .fade-leave-active,
    .slide-enter-active,
    .slide-leave-active {
        transition-duration: 0.01ms !important;
    }
    .slide-enter-from,
    .slide-leave-to {
        transform: none !important;
    }
    .animate-progress {
        animation-duration: 0.01ms !important;
    }
    /* WP-23 (UX-22): auch Tailwind-Uebergaenge (transition-*), Drehungen (animate-spin) und weiches Scrollen.
       Der Spinner steht still; aria-busy und Text tragen den Zustand. Dauer 0,01 ms statt none, damit transitionend feuert. */
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}