/*
    Farbtoken der App. Hell steht auf :root, Dunkel haengt an [data-bs-theme="dark"] —
    demselben Schalter, den Bootstrap 5.3 fuer seine eigenen Komponenten benutzt, und den
    theme.js setzt. Neue Farben gehoeren hierher, nicht in app.css.

    Ein Token bekommt nur, was mehrfach gebraucht wird; Einzelfaelle bleiben lokal.
*/

:root {
    --evoi-surface: #ffffff;          /* Karten, Dialoge, Kopf- und Fusszeilen */
    --evoi-surface-sunken: #f5f6f8;   /* Seitenhintergrund, abgesetzte Bereiche */
    --evoi-surface-hover: #f1f3f5;    /* Zeilen unter dem Zeiger */
    --evoi-border: #dee2e6;
    --evoi-border-strong: #ced4da;
    --evoi-text: #212529;
    --evoi-text-muted: #6c757d;
    --evoi-accent: #0d6efd;
    --evoi-accent-contrast: #ffffff;
    --evoi-danger: #dc3545;
    --evoi-success: #198754;
    --evoi-warning: #ffc107;
    --evoi-shadow: rgba(0, 0, 0, .08);
    --evoi-shadow-strong: rgba(0, 0, 0, .2);
    --evoi-backdrop: rgba(0, 0, 0, .5);

    /* Seitenleiste: im hellen Bild bewusst dunkel (Markenfarbe), bleibt es auch dunkel. */
    --evoi-nav-bg: #1b1f3b;
    --evoi-nav-text: #d7d9e8;
    --evoi-nav-text-active: #ffffff;

    /* Hinweisflaechen (Warnung, Fehler, Erfolg). Im dunklen Bild duerfen sie nicht
       weiss leuchten — dort stehen gedaempfte Flaechen mit heller Schrift. */
    --evoi-warning-bg: #fff8e1;
    --evoi-warning-border: #ffe082;
    --evoi-warning-text: #7a5b00;
    --evoi-danger-bg: #fef2f2;
    --evoi-danger-border: #fecaca;
    --evoi-danger-text: #b91c1c;
    --evoi-success-bg: #f0fdf4;
    --evoi-success-border: #bbf7d0;
    --evoi-success-text: #15803d;
}

[data-bs-theme="dark"] {
    --evoi-surface: #1e2126;
    --evoi-surface-sunken: #16181c;
    --evoi-surface-hover: #262a31;
    --evoi-border: #3a3f47;
    --evoi-border-strong: #4a5058;
    --evoi-text: #e6e8ea;
    --evoi-text-muted: #9aa0a6;
    --evoi-accent: #6ea8fe;           /* heller als im Hellmodus, sonst zu wenig Kontrast */
    --evoi-accent-contrast: #10233f;
    --evoi-danger: #f27a7a;
    --evoi-success: #4cc38a;
    --evoi-warning: #ffd351;
    --evoi-shadow: rgba(0, 0, 0, .45);
    --evoi-shadow-strong: rgba(0, 0, 0, .6);
    --evoi-backdrop: rgba(0, 0, 0, .65);

    --evoi-nav-bg: #14161a;
    --evoi-nav-text: #c3c7cc;
    --evoi-nav-text-active: #ffffff;

    --evoi-warning-bg: #3a3016;
    --evoi-warning-border: #5c4a1d;
    --evoi-warning-text: #ffd351;
    --evoi-danger-bg: #3a1f1f;
    --evoi-danger-border: #5c2b2b;
    --evoi-danger-text: #f5a3a3;
    --evoi-success-bg: #16301f;
    --evoi-success-border: #235c38;
    --evoi-success-text: #7fdca6;
}

/* Grundflaeche: ohne das bleibt der Seitenhintergrund im dunklen Bild weiss. */
html[data-bs-theme] body {
    background-color: var(--evoi-surface-sunken);
    color: var(--evoi-text);
}

/*
    Papier bleibt Papier: Rechnungsvorschau (InvoicePreviewDialog) und die Vorschau im
    Rechnungsdesigner zeigen ein echtes PDF im SfPdfViewer2 — die Seitenfarbe steckt im
    Dokument und bleibt damit von selbst weiss. Nur die Bedienleiste des Viewers zieht
    mit dem Theme mit, was gewollt ist. Hier ist deshalb nichts zurueckzusetzen; sollte
    spaeter eine HTML-Nachbildung dazukommen, braucht die eine eigene helle Insel.
*/

/* Abgesetzte Bloecke innerhalb eines Formulars (Budget, Stunden-Uebertrag).
   Frueher stand hier Bootstraps `bg-light`. Das ist eine FESTE helle Farbe: Bootstrap tauscht
   unter [data-bs-theme="dark"] die semantischen Flaechen (body, tertiary), aber nicht die
   benannten Farben light/dark. Im dunklen Erscheinungsbild stand der Block deshalb weiss da,
   mit hellgrauer Schrift darauf — praktisch unlesbar. */
.budget-info-section {
    background-color: var(--evoi-surface-sunken);
    border-color: var(--evoi-border) !important;
}