/* css/theme.css — Farb-Tokens der klassischen Backoffice-Seiten (Menü, Vertragsübersicht,
   Vorgangsmaske, Login, Storage). Gegenstück zu bank/lib/viz.php, das dieselbe Rolle für die
   Auswertungsseiten übernimmt; die Dunkel-Werte sind bewusst dieselben Grautöne, damit beide
   Welten in einem Frameset nebeneinander nicht auseinanderfallen.

   Umschaltung wie dort: normalerweise folgt die Seite der Systemeinstellung
   (prefers-color-scheme). Setzt jemand data-theme="dark"/"light" auf <html>, gewinnt das —
   damit ein späterer manueller Umschalter ohne Änderung an dieser Datei funktioniert.

   Die Hellwerte sind exakt die, die die Seiten vorher fest verdrahtet hatten. Wer eine Farbe
   ändern will, ändert sie hier, nicht in den Seiten. */

:root {
  color-scheme: light;

  --bg:            #f8f9fb;  /* Seitenhintergrund */
  --card:          #ffffff;  /* Karten, Eingabefelder, alles "Papierweiße" */
  --surface-2:     #f3f5f8;  /* leicht abgesetzt: Tabellenkopf, Abschnittszeile */
  --surface-3:     #f7f8fa;  /* noch dezenter: Platzhalterflächen, Miniaturen */

  --fg:            #111111;
  --fg-soft:       #333333;
  --muted:         #666666;
  --faint:         #93a1af;  /* Datumsspalten, Randnotizen */

  --border:        #dadde1;
  --border-soft:   #eeeeee;

  --brand:         #0a66c2;
  --brand-fg:      #ffffff;  /* Schrift auf brand-farbener Fläche */
  --brand-strong:  #0a4ea8;
  --brand-soft-bg: #eef4fb;
  --brand-soft-bd: #cfe0f4;

  --ok:            #0a7a3b;
  --ok-fg:         #1a7f37;
  --ok-bg:         #e7f6ec;
  --ok-bd:         #bfe5cb;

  --warn:          #b06a00;
  --warn-fg:       #9a5b00;
  --warn-bg:       #fff4e5;
  --warn-bd:       #f0d9b5;

  --danger:        #dd3333;
  --danger-fg:     #b91c1c;
  --danger-bg:     #fdecec;
  --danger-bd:     #f0b4b4;

  --neutral-bg:    #f4f6f8;
  --neutral-bd:    #dfe5ea;
  --neutral-fg:    #5b6b7b;

  --info-bg:       #eaf2fd;
  --info-bd:       #c3dafc;
  --info-fg:       #0a4ea8;

  /* Besuchte Links: gedecktes Dunkelblau statt Lila — es soll sich vom Normalblau
     (--brand) unterscheiden lassen, ohne als eigene Farbe aufzufallen. */
  --link-visited:  #2c4c70;

  --header-bg:     #2c3e50;  /* dunkle Kopfleiste — bleibt in beiden Modi dunkel */
  --header-fg:     #ffffff;

  --shadow:        rgba(0, 0, 0, .14);
  --shadow-strong: rgba(0, 0, 0, .25);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --bg:            #0d0d0d;
    --card:          #1a1a19;
    --surface-2:     #232322;
    --surface-3:     #202020;

    --fg:            #ffffff;
    --fg-soft:       #c3c2b7;
    --muted:         #9c9a93;
    --faint:         #898781;

    --border:        #35352f;
    --border-soft:   #2a2a28;

    --brand:         #4a9bea;
    --brand-fg:      #08131f;
    --brand-strong:  #8ec1f5;
    --brand-soft-bg: #14243a;
    --brand-soft-bd: #27476f;

    --ok:            #3fbf72;
    --ok-fg:         #57c97f;
    --ok-bg:         #112b1b;
    --ok-bd:         #2c6b41;

    --warn:          #e0a63a;
    --warn-fg:       #e8b95c;
    --warn-bg:       #31260e;
    --warn-bd:       #6b5320;

    --danger:        #e66767;
    --danger-fg:     #f08c8c;
    --danger-bg:     #351616;
    --danger-bd:     #7a3030;

    --neutral-bg:    #212120;
    --neutral-bd:    #3a3a37;
    --neutral-fg:    #a8a8a2;

    --info-bg:       #14243a;
    --info-bd:       #27476f;
    --info-fg:       #8ec1f5;

    --link-visited:  #8aa9c9;   /* im Dunkelmodus: gedeckt statt leuchtend wie --brand */

    --header-bg:     #1c1c1b;
    --header-fg:     #ffffff;

    --shadow:        rgba(0, 0, 0, .5);
    --shadow-strong: rgba(0, 0, 0, .65);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0d0d0d;
  --card:          #1a1a19;
  --surface-2:     #232322;
  --surface-3:     #202020;

  --fg:            #ffffff;
  --fg-soft:       #c3c2b7;
  --muted:         #9c9a93;
  --faint:         #898781;

  --border:        #35352f;
  --border-soft:   #2a2a28;

  --brand:         #4a9bea;
  --brand-fg:      #08131f;
  --brand-strong:  #8ec1f5;
  --brand-soft-bg: #14243a;
  --brand-soft-bd: #27476f;

  --ok:            #3fbf72;
  --ok-fg:         #57c97f;
  --ok-bg:         #112b1b;
  --ok-bd:         #2c6b41;

  --warn:          #e0a63a;
  --warn-fg:       #e8b95c;
  --warn-bg:       #31260e;
  --warn-bd:       #6b5320;

  --danger:        #e66767;
  --danger-fg:     #f08c8c;
  --danger-bg:     #351616;
  --danger-bd:     #7a3030;

  --neutral-bg:    #212120;
  --neutral-bd:    #3a3a37;
  --neutral-fg:    #a8a8a2;

  --info-bg:       #14243a;
  --info-bd:       #27476f;
  --info-fg:       #8ec1f5;

  --link-visited:  #8aa9c9;   /* im Dunkelmodus: gedeckt statt leuchtend wie --brand */

  --header-bg:     #1c1c1b;
  --header-fg:     #ffffff;

  --shadow:        rgba(0, 0, 0, .5);
  --shadow-strong: rgba(0, 0, 0, .65);
}

/* Grundlage für alle Seiten, die diese Datei einbinden. Bewusst sehr wenige Regeln: die Seiten
   bringen ihr eigenes Layout mit, hier stehen nur die Flächen, die sonst im Dunkelmodus weiß
   blieben (Body, Formularfelder, Trennlinien). */
body            { background: var(--bg); color: var(--fg); }
a               { color: var(--brand); }
/* Knoepfe, die nur technisch ein <a> sind (der runde Plus-Knopf, „Mit Google anmelden"),
   bleiben aussen vor: sie bringen ihre eigene Schriftfarbe mit, und a:visited (0,1,1) haette
   sie geschlagen. Das Plus wurde dadurch lila, sobald das Ziel einmal besucht war — also erst
   nach einer Weile, weshalb es aussah, als haette es sich von selbst eingeschlichen. */
/* Reiter und Filterchips ebenso: sie sind Bedienelemente, keine Verweise nach draussen.
   „schon einmal angeklickt" sagt dort nichts — dafuer stand die lila Schrift schlecht
   lesbar auf dem blauen Reiter. Blau = nicht der aktuelle, weiss auf Blau = der aktuelle. */
a:visited:not(.fab):not(.google):not(.step):not(.fchip) { color: var(--link-visited); }
hr              { border: none; border-top: 1px solid var(--border); }
input, select, textarea, option {
  background: var(--card);
  color: var(--fg);
  border-color: var(--border);
}
::placeholder   { color: var(--muted); opacity: 1; }