/* Fahrnova — Ergänzungen zu tokens/fahrnova-tokens.css
   ====================================================
   `fahrnova-tokens.css` ist die Quelle der Wahrheit aus dem Handoff und bleibt UNVERÄNDERT
   (Vorgabe BLAZOR.md §1). Diese Datei ergänzt Werte, die die Design-Referenzen benutzen, die im
   Token-Satz aber nicht stehen — alle mit `--fn-`-Präfix, damit im Komponenten-CSS weiterhin kein
   einziger Hex-Wert steht (Vorgabe CLAUDE.md des Handoffs).

   Jeder Wert hier hat eine Herkunft aus den Referenzdateien; Erfundenes ist als solches markiert.

   Reihenfolge: NACH fahrnova-tokens.css, VOR tokens.css laden. */
:root {
    /* --- Zustände von Knöpfen (Herkunft: BLAZOR.md §2, Beispiel FnButton.razor.css) --- */
    --fn-accent-hover: #24405A;

    /* --- Fehler als SCHRIFT auf hellem Grund.
       `--fn-error` (#B3402B) ist eine Flächenfarbe; die Referenzen nutzen für Text die dunklere
       Stufe (Herkunft: „Fahrtenbuch App.dc.html", ampelFarbe/pilleFarbe: '#9C3423'). --- */
    --fn-error-text: #9C3423;

    /* --- Weitere Tints und Kanten aus den Referenzen --- */
    --fn-tint-ok-pille: #E1EFE6;   /* Pillen-Grund „Aktiv"/„frei"  (App.dc.html) */
    --fn-marke-warn-kante: #EBD9AE; /* Rand der getönten Warn-Marke (App.dc.html) */
    --fn-zeile-hover: #EFF3F8;      /* style-hover der Listenzeilen (App.dc.html) */
    --fn-tint-heute: rgba(46, 129, 136, 0.04); /* getönte Spalte des heutigen Tages (Kalender) */
    --fn-zeile-gewaehlt: #E4ECF7;   /* gewählte Listenzeile = --fn-tint-info (App.dc.html) */
    --fn-aus-text: #2C3E4F;         /* Schrift der „Inaktiv"-Pille (App.dc.html) */

    /* --- Anlege-Dialoge (Herkunft: „KontaktAnlegen.dc.html" u. a.) ---
       Die Dialogkarte selbst liegt auf --fn-surface (#FAFBFD); die Eingabefelder darin sind
       deshalb REIN WEISS, damit sie sich abheben. Auf den Seiten ist es umgekehrt. */
    --fn-dialog-input: #FFFFFF;
    --fn-dialog-scrim: rgba(23, 34, 46, 0.42);
    --fn-shadow-dialog: 0 2px 6px rgba(23, 34, 46, 0.14), 0 32px 80px rgba(23, 34, 46, 0.28);
    --fn-dialog-wahl-bg: #E3E9F0;   /* gewählte Auswahlkarte, z. B. Fahrzeugart (FahrzeugAnlegen) */
    --fn-dialog-wahl-schwach: #F2F6FA; /* gewähltes Recht (MitarbeiterAnlegen) */
    --fn-dialog-notiz-bg: #EFF3F7;  /* gestrichelter Hinweiskasten im Dialog (FahrzeugAnlegen) */
    --fn-vorschau-kopf: #F2F5F9;    /* Kopfzeile der Listen-Vorschau rechts (FahrzeugAnlegen) */
    --fn-shadow-abschnitt: 0 1px 2px rgba(23, 34, 46, 0.04); /* Abschnittskarte im Fahrt-Dialog */
    --fn-dialog-griff: #bcc6d0;     /* Greifleiste über dem Kopf (FahrtAnlegen) */

    /* --- Rollenmarken (Herkunft: „MitarbeiterAnlegen.dc.html", rollenDef) ---
       Fläche und Schrift je Recht wörtlich aus der Referenz. Eine Ausnahme: die Referenz setzt
       „Fahrer" in #2E8188 auf #E1EFF0 (3.9:1) — das reißt AA für 12-px-Text, deshalb hier die
       Textstufe --fn-copper-text (6.5:1). Gleiche Begründung wie bei --fn-error-text. */
    --fn-rolle-fahrer-bg: #E1EFF0;      --fn-rolle-fahrer-text: #1F5C61;
    --fn-rolle-disponent-bg: #E4ECF7;   --fn-rolle-disponent-text: #2F6FD0;
    --fn-rolle-verwaltung-bg: #EDE7F4;  --fn-rolle-verwaltung-text: #6B4E9B;
    --fn-rolle-schicht-bg: #F6EAD9;     --fn-rolle-schicht-text: #8A5A16;
    --fn-rolle-admin-bg: #F3E3E1;       --fn-rolle-admin-text: #B3402B;

    /* --- Schatten, die über den Token-Satz hinausgehen --- */
    --fn-shadow-modal: 0 24px 60px rgba(23, 34, 46, 0.28);              /* Dialoge (App.dc.html) */
    --fn-shadow-panel: 0 2px 6px rgba(23, 34, 46, 0.08), 0 18px 44px rgba(23, 34, 46, 0.14); /* Detailkarte */
    --fn-shadow-row: 0 1px 3px rgba(23, 34, 46, 0.16);                  /* „+n"-Marke im Kalender */

    /* --- Anmeldeseite (Herkunft: „Fahrnova Login.dc.html") ---
       Fließtext auf der dunklen Markenspalte: heller als --fn-nav-muted, dunkler als
       --fn-nav-text. Der Token-Satz kennt diese Zwischenstufe nicht, die Referenz benutzt sie. */
    --fn-nav-body: #A8B9C8;
    --fn-auth-verlauf: linear-gradient(165deg, #F8FAFC 0%, #EEF4F8 44%, #E2ECF2 100%);
    --fn-auth-linie: rgba(37, 106, 112, 0.10);
    --fn-auth-raster: rgba(37, 106, 112, 0.075);
    --fn-auth-marke: rgba(46, 129, 136, 0.30);
    --fn-auth-marke-kern: rgba(248, 251, 252, 0.85);

    /* --- Startseite (Herkunft: „Fahrnova Hero.dc.html" und „Funktionsschritte.dc.html") ---
       Der Hero liegt auf einem Foto; die Töne dort sind heller und leuchtender als in der App,
       damit Text und Stationspillen auf dem Bild lesbar bleiben. */
    --fn-hero-rand: #2C4256;                              /* Rand auf dunklem Grund */
    --fn-hero-tint: rgba(22, 40, 58, 0.55);               /* Pille und Ghost-Knopf auf dem Bild */
    --fn-hero-tint-schwach: rgba(22, 40, 58, 0.45);
    --fn-hero-linie: rgba(168, 185, 200, 0.22);           /* Trennlinie über den Kennzahlen */
    --fn-hero-leuchte: #54D6D6;                           /* Stationspunkt */
    --fn-hero-leuchte-text: #7FD3D3;                      /* Uhrzeit in der Stationspille */
    --fn-hero-leuchte-glanz: 0 0 8px rgba(84, 214, 214, 0.9);
    --fn-hero-pille-bg: rgba(10, 24, 36, 0.52);
    --fn-hero-pille-rand: rgba(84, 214, 214, 0.26);
    --fn-hero-pille-schatten: 0 6px 20px rgba(4, 10, 18, 0.45);
    --fn-hero-pille-trenner: rgba(127, 211, 211, 0.32);
    --fn-hero-pille-text: #E4EDF4;
    --fn-hero-strich: linear-gradient(to right, rgba(84, 214, 214, 0.15) 0%, rgba(84, 214, 214, 0.8) 100%);
    --fn-hero-glut: radial-gradient(circle, rgba(84, 214, 214, 0.55) 0%, rgba(46, 129, 136, 0.28) 45%, rgba(46, 129, 136, 0) 72%);

    /* Vorschautafeln der Funktionsschritte: eigene, hellere Kopfflächen */
    --fn-tafel-kopf: #F2F5F8;
    --fn-tafel-kopfzeile: #F7F9FB;
    --fn-tafel-linie: #E6EBF1;
    --fn-schritt-ring: rgba(37, 106, 112, 0.28);
    --fn-schritt-schatten: 0 2px 10px rgba(37, 106, 112, 0.35);
    --fn-karte-schatten-gross: 0 1px 2px rgba(23, 34, 46, 0.05), 0 16px 40px rgba(23, 34, 46, 0.08);
    --fn-preis-schatten: 0 2px 6px rgba(23, 34, 46, 0.07), 0 20px 46px rgba(23, 34, 46, 0.12);

    /* --- Maße, die die Referenzen mehrfach verwenden --- */
    --fn-gap-8: 32px;
    --fn-topbar-hoehe: 44px;   /* Krume + Suche (README §3.1) */
    --fn-nav-width-schmal: 64px; /* eingeklappte Schiene — Ergänzung: der Handoff kennt nur 244px,
                                    die App braucht den schmalen Zustand für kleine Bildschirme. */
    --fn-zeile-hoehe: 52px;    /* Listenzeile (README §3.3) */
    --fn-stunde: 74px;         /* Kalender: eine Stunde (README §3.4) */

    /* --- Abwesenheitsarten (Arbeitszeiten, PROJ-18) ---
       ERFUNDEN, aber nicht beliebig: der Handoff enthält keine Arbeitszeiten-Seiten und damit keine
       sechs Kategorienfarben. Sie sind hier aus der Nordlicht-Palette abgeleitet (dieselben Tints,
       nur um den Farbkreis versetzt), damit der Bereich nicht aus dem Bild fällt. Farbe ist nie die
       einzige Information — jede Kalenderzelle trägt zusätzlich ein Kürzel. */
    --fn-abw-feiertag-bg: #FBF0D8;
    --fn-abw-feiertag-text: #8A5D0A;
    --fn-abw-krank-bg: #F6E4E0;
    --fn-abw-krank-text: #9C3423;
    --fn-abw-urlaub-bg: #E1EFE6;
    --fn-abw-urlaub-text: #215C3A;
    --fn-abw-unbezahlt-bg: #F2E7DC;
    --fn-abw-unbezahlt-text: #7A4A22;
    --fn-abw-konto-bg: #E1EFF0;
    --fn-abw-konto-text: #1F5C61;
    --fn-abw-sonstiges-bg: #DEE4EB;
    --fn-abw-sonstiges-text: #41566B;
}

/* ================================================================
   Dunkle Darstellung
   ================================================================
   ERGÄNZUNG, nicht Handoff: Fahrnova beschreibt nur die helle Oberfläche (mit dunkler
   Navigationsschiene). Die App hat aber seit PROJ-10 eine Nutzer-Einstellung
   „Hell / Dunkel / System" — die darf ein Redesign nicht stillschweigend abschalten.
   Deshalb wird hier derselbe Token-Satz in einer dunklen Nordlicht-Fassung neu belegt.
   Weil ALLE Komponenten nur Token benutzen, genügt dieses Umbelegen.

   Zwei Abweichungen sind bewusst:
   1. `--fn-accent` (dunkles Marineblau) wäre auf dunklem Grund kein sichtbarer Knopf mehr —
      im dunklen Satz übernimmt das Türkis die Rolle des Primärknopfs.
   2. Die `-text`-Statusfarben werden aufgehellt, sonst reißen die AA-Kontraste. */
[data-theme="dark"] {
    /* Flächen */
    --fn-bg: #0F1A24;
    --fn-surface: #17242F;
    --fn-sunken: #1E2E3B;
    --fn-input: #17242F;
    --fn-header-bg: rgba(23, 36, 47, 0.9);
    --fn-hairline: #2A3B4A;

    /* Schrift */
    --fn-text: #E4EBF1;
    --fn-muted: #A3B5C3;
    --fn-muted-text: #AEBECC;

    /* Marke */
    --fn-accent: #2E8188;
    --fn-accent-text: #F1F8F8;
    --fn-accent-hover: #37979F;
    --fn-copper: #3E9AA1;
    --fn-copper-text: #74C6CB;
    --fn-mark-bg: #256A70;
    --fn-mark-text: #F1F8F8;

    /* Navigation: bleibt die dunkelste Fläche, damit die „zwei Welten" erhalten bleiben */
    --fn-nav-bg: #0A121A;
    --fn-nav-text: #DEE7EF;
    --fn-nav-muted: #7F93A4;
    --fn-nav-line: #1A2A38;
    --fn-nav-tint: #172634;
    --fn-nav-active-bg: #1E3549;
    --fn-nav-active-text: #F3F8FB;

    /* Status */
    --fn-ok: #3E9C65;
    --fn-ok-text: #8AD5A6;
    --fn-warn: #D6A02A;
    --fn-warn-text: #EBC66E;
    --fn-info: #4E86D8;
    --fn-info-text: #96BCF0;
    --fn-off: #6B7C8A;
    --fn-error: #C9553D;
    --fn-error-text: #F0A392;

    /* Status-Tints */
    --fn-tint-ok: #17352A;
    --fn-tint-warn: #3A2E10;
    --fn-tint-info: #1B2D45;
    --fn-tint-copper: #14343A;
    --fn-tint-error: #3B1E18;
    --fn-tint-ok-pille: #17352A;
    --fn-marke-warn-kante: #4A3A16;
    --fn-aus-text: #C3D0DB;

    /* Tabs */
    --fn-tab-active-bg: #22323F;
    --fn-tab-active-text: #E4EBF1;

    /* Zeilen */
    --fn-zeile-hover: #1C2B37;
    --fn-zeile-gewaehlt: #1B2D45;
    --fn-tint-heute: rgba(62, 154, 161, 0.07);

    /* Startseite: der Hero liegt auf einem Foto und bleibt deshalb in beiden Darstellungen gleich;
       nur die hellen Abschnitte darunter folgen dem dunklen Satz. */
    --fn-tafel-kopf: #1E2E3B;
    --fn-tafel-kopfzeile: #1A2833;
    --fn-tafel-linie: #22323F;
    --fn-karte-schatten-gross: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.36);
    --fn-preis-schatten: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 46px rgba(0, 0, 0, 0.44);

    /* Anlege-Dialoge */
    --fn-dialog-input: #101A24;
    --fn-dialog-scrim: rgba(4, 9, 14, 0.68);
    --fn-shadow-dialog: 0 2px 6px rgba(0, 0, 0, 0.5), 0 32px 80px rgba(0, 0, 0, 0.6);
    --fn-dialog-wahl-bg: #1B2D3D;
    --fn-dialog-wahl-schwach: #1A2A38;
    --fn-dialog-notiz-bg: #142130;
    --fn-vorschau-kopf: #1A2833;
    --fn-shadow-abschnitt: 0 1px 2px rgba(0, 0, 0, 0.3);
    --fn-dialog-griff: #3A4A5A;

    /* Rollenmarken: gedeckte Flächen, hell lesbare Schrift */
    --fn-rolle-fahrer-bg: #14343A;      --fn-rolle-fahrer-text: #74C6CB;
    --fn-rolle-disponent-bg: #1B2D45;   --fn-rolle-disponent-text: #96BCF0;
    --fn-rolle-verwaltung-bg: #291F3A;  --fn-rolle-verwaltung-text: #C0A8E4;
    --fn-rolle-schicht-bg: #38271A;     --fn-rolle-schicht-text: #DCB48A;
    --fn-rolle-admin-bg: #3B1E18;       --fn-rolle-admin-text: #F0A392;

    /* Anmeldeseite */
    --fn-nav-body: #A8B9C8;
    --fn-auth-verlauf: linear-gradient(165deg, #16222D 0%, #121D27 44%, #0D1720 100%);
    --fn-auth-linie: rgba(110, 195, 200, 0.12);
    --fn-auth-raster: rgba(110, 195, 200, 0.08);
    --fn-auth-marke: rgba(62, 154, 161, 0.42);
    --fn-auth-marke-kern: rgba(230, 244, 245, 0.85);

    /* Schatten und Abdeckung */
    --fn-shadow-tab: 0 1px 2px rgba(0, 0, 0, 0.45), 0 3px 10px rgba(0, 0, 0, 0.32);
    --fn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.34);
    --fn-shadow-sheet: 0 -1px 4px rgba(0, 0, 0, 0.4), 0 -22px 56px rgba(0, 0, 0, 0.55);
    --fn-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6);
    --fn-shadow-panel: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.5);
    --fn-shadow-row: 0 1px 3px rgba(0, 0, 0, 0.5);
    --fn-scrim: rgba(4, 9, 14, 0.62);

    /* Abwesenheitsarten: gedeckte Flächen, hell lesbare Schrift */
    --fn-abw-feiertag-bg: #3A2E10;
    --fn-abw-feiertag-text: #EBC66E;
    --fn-abw-krank-bg: #3B1E18;
    --fn-abw-krank-text: #F0A392;
    --fn-abw-urlaub-bg: #17352A;
    --fn-abw-urlaub-text: #8AD5A6;
    --fn-abw-unbezahlt-bg: #38271A;
    --fn-abw-unbezahlt-text: #DCB48A;
    --fn-abw-konto-bg: #14343A;
    --fn-abw-konto-text: #74C6CB;
    --fn-abw-sonstiges-bg: #24313D;
    --fn-abw-sonstiges-text: #B7C6D2;
}