/* ------------------------------------------------------------------
   Dunkelmodus für den Multi-BOS-Assistenten

   Wird NACH style.css geladen und überschreibt nur Farben.
   An style.css selbst wird nichts geändert.

   Drei Zustände:
     1. Kein Eintrag gespeichert  -> folgt der Einstellung des Geräts
     2. data-thema="dunkel"       -> immer dunkel
     3. data-thema="hell"         -> immer hell

   Warum das wichtig ist: Wer sein Tablet nachts auf dunkel gestellt
   hat, bekommt hier automatisch dunkel — ohne etwas einzustellen.
   Wer es anders will, entscheidet selbst.
   ------------------------------------------------------------------ */

/* Fest verdrahtete Farben aus style.css auf Variablen umstellen.
   Diese Regeln gelten in BEIDEN Modi — nur die Werte wechseln. */
:root{
  --flaeche-weich:#EFF3F5;
  --feld:#FFFFFF;
  --flash-bg:#FDF1D9;
  --badge-ok-bg:#E4F3EA;
  --ueberschrift:var(--navy);
  --knopf:#0E6BA8;
  --link:#0E6BA8;
  --rot:#A13E3E;
}

.note-box,
.tree-folder,
.result-box,
.kachel-symbol{ background:var(--flaeche-weich); }

.flash{ background:var(--flash-bg); color:var(--ink); }
.badge.done{ background:var(--badge-ok-bg); }

.btn-load{ background:var(--feld); color:var(--link); border-color:var(--link); }
.btn-load:hover{ background:var(--link); color:#fff; }

.tool-card input,
.login-box input,
.pruef-tabelle input,
select,
input[type="text"],
input[type="password"]{ background:var(--feld); color:var(--ink); border-color:var(--line); }

.willkommen h1,
.login-box h1{ color:var(--ueberschrift); }

.primary-btn{ background:var(--knopf); }
.hinweise a,
.verwaltung-zeile a,
.hint a{ color:var(--link); }
.status-hinweis.status-fehler{ color:var(--rot); }

/* Der Umschalter in der Kopfzeile */
.thema-schalter{
  background:transparent; border:1px solid #3E5A72; color:#CFE0EC;
  border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif;
}
.thema-schalter:hover{ border-color:#CFE0EC; color:#fff; }

/* ---------- Die dunklen Werte ---------- */
html[data-thema="dunkel"]{
  --paper:#0E1621;
  --panel:#182430;
  --ink:#E6ECF2;
  --ink-soft:#9AAABA;
  --line:#2C3B4A;
  --navy:#0B1B29;
  --navy-2:#16293C;
  --green-ok:#5FBF8C;
  --flaeche-weich:#212F3C;
  --feld:#212F3C;
  --flash-bg:#3A2E14;
  --badge-ok-bg:#1E3A2A;
  --ueberschrift:#DDE8F2;
  --knopf:#0E6BA8;
  --link:#5FB0E5;
  --rot:#E58B8B;
}

@media (prefers-color-scheme: dark){
  html:not([data-thema="hell"]){
    --paper:#0E1621;
    --panel:#182430;
    --ink:#E6ECF2;
    --ink-soft:#9AAABA;
    --line:#2C3B4A;
    --navy:#0B1B29;
    --navy-2:#16293C;
    --green-ok:#5FBF8C;
    --flaeche-weich:#212F3C;
    --feld:#212F3C;
    --flash-bg:#3A2E14;
    --badge-ok-bg:#1E3A2A;
    --ueberschrift:#DDE8F2;
    --knopf:#0E6BA8;
    --link:#5FB0E5;
    --rot:#E58B8B;
  }
}