/* Ebene 3: das Erscheinungsbild aus dem v0-Entwurf – für das ganze Tool.
 * =====================================================================
 *
 * Ramazan am 14.08.2026: „bitte vom ganzen Tool das Design ändern, wie hier
 * über v0 gemacht."
 *
 * WOHER DIE WERTE STAMMEN
 *     Aus dem v0-Projekt „RT-Beleg AI" (Chat bRCWt1JMG0b), Stand 14.08.2026
 *     09:12 Uhr, über den v0-Anschluss abgefragt: app/globals.css,
 *     app-sidebar.tsx, saldenliste.tsx, top-bar.tsx, analysis-tabs.tsx.
 *
 *     WICHTIG: Der Ordner „rt-beleg-ai Designe" auf der Ablage ist der Stand
 *     von gestern Abend – dunkle Seitenleiste, indigo-violett. Der Entwurf
 *     wurde seither umgestellt auf WEISSE Seitenleiste und kräftiges Blau.
 *     Deshalb sah die erste Fassung dieser Datei nicht aus wie die Vorlage.
 *     Wer hier etwas ändert, holt sich den Stand über den v0-Anschluss,
 *     nicht aus dem Ordner.
 *
 *     Die Tokens des Entwurfs stehen in oklch. Daneben ist jeweils der
 *     umgerechnete Hex-Wert notiert – ältere Browser und die
 *     PDF-Erzeugung kennen oklch nicht.
 *
 * DIE REGEL: NUR AUSSEHEN, KEIN LAYOUT
 *     Farbe, Rahmen, Rundung, Schrift, Schatten – aber kein display, kein
 *     position, keine Breiten. Ein Testfall (tests/test_design_v0.py) prüft
 *     das maschinell. Der Grund ist Erfahrung: Farbe kann nichts zerbrechen,
 *     verändertes Layout bricht Seiten, die beim Testen niemand aufruft.
 *
 * ZURÜCKNEHMEN
 *     Eine Zeile in base.html entfernen. Es wurde nichts gelöscht.
 */

/* =====================================================================
 * 1. Tokens
 * ===================================================================== */
:root {
  /* Markenblau: oklch(0.55 0.17 260) */
  --ds-primary: #2f5fd0;
  --ds-primary-d: #2850b4;
  --ds-primary-l: #eaeffb;      /* accent   oklch(0.955 0.02 260) */
  --ds-primary-b: #c3d2f4;

  --ds-ok: #0a7c55;   --ds-ok-l: #edf8f2;
  --ds-warn: #a8620f; --ds-warn-l: #fdf1e3;
  --ds-err: #d2453a;  --ds-err-l: #fdecea;   /* destructive oklch(0.58 0.17 25) */

  /* Feinschliff vom 14.08.2026 (v0-Auftrag „ruhiger, dichter, mehr
     Zustand"): Überschriften dunkler, Nebeninfos leiser, Linien heller –
     die Hierarchie trägt die Gliederung, nicht das Liniengitter. */
  --ds-ink: #2e3342;            /* foreground        oklch(0.22 0.02 260) */
  --ds-text: #3d4356;
  --ds-muted: #868ca0;          /* muted-foreground  oklch(0.6 0.02 260) */
  --ds-line: #eaebf1;           /* border            oklch(0.94 0.006 260) */
  --ds-line-s: #f0f1f5;
  --ds-surface: #ffffff;
  --ds-bg: #fafbfc;             /* background        oklch(0.985 0.003 255) */
  --ds-head: #f5f6f9;           /* muted             oklch(0.97 0.005 260) */

  --ds-r: 10px;                 /* radius 0.625rem */
  --ds-r-s: 8px;
  --ds-gap: 10px;
  /* EIN Schatten für alles – im Entwurf `--shadow-soft`. Knöpfe bleiben
     flach, nur Behälter werden abgehoben. */
  --ds-sh: 0 1px 2px 0 rgba(15, 23, 42, .06);
  --ds-sh-l: 0 4px 14px rgba(16, 24, 40, .07);

  /* DIE SEITENLEISTE IST JETZT WEISS. Das ist die auffälligste Änderung
     gegenüber dem bisherigen Bild – und der Grund, warum unten auch Marke
     und Logo umgefärbt werden: Auf Weiß wäre helle Schrift unsichtbar. */
  --sidebar: #ffffff;
  --side-2: #ffffff;
  --side-txt: #59607a;          /* sidebar-foreground, für hellen Grund */
  --side-accent: #2f5fd0;
}

.content td.r, .content th.r, .content .num, .content .mono,
.content .tnum, .content .an-tbl td.r, .content .op-tbl td.r {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* =====================================================================
 * 2. Seitenleiste – hell
 * ===================================================================== */
body { background: var(--ds-bg); color: var(--ds-text) }

.sidebar { border-right: 1px solid var(--ds-line) }
.brand { border-bottom: 1px solid var(--ds-line) }

/* DIE WORTMARKE WAR WEISS AUF WEISS.
   style.css:1194 setzt `.sidebar .brand-txt{color:#fff}` – zwei Klassen,
   also spezifischer als ein schlichtes `.brand-txt` hier. Auf der bisher
   dunklen Leiste war das richtig; auf der weißen verschwand der Schriftzug
   (Ramazan am 14.08.2026: im Bild stand nur noch „AI"). Deshalb hier
   dieselbe Spezifität. */
.sidebar .brand-txt { color: var(--ds-ink) }
.sidebar .brand-txt strong { color: var(--ds-primary) }
.sidebar .brand-logo line { stroke: var(--ds-ink) }
.sidebar .brand-logo text { fill: var(--ds-ink) }
.sidebar .brand-logo text:last-of-type { fill: var(--ds-primary) }

/* Die inaktiven Einträge waren für einen hellen Grund zu blass gewählt
   (design.css:271 rechnet mit dunklem Grund). Auf Weiß braucht es einen
   kräftigeren Ton, sonst wirkt die halbe Leiste ausgegraut. */
.nav, .sidebar .nav {
  border-radius: 6px;
  color: #59607a;
  font-weight: 400;
}
.nav:hover, .sidebar .nav:hover { background: var(--ds-head); color: var(--ds-ink) }
.sidebar .nav.disabled, .sidebar .nav.disabled span { color: #b0b5c4 }
/* Der aktive Eintrag: zarte blaue Fläche, blaue Schrift, blauer Balken. */
.nav.active, .sidebar .nav.active {
  background: var(--ds-primary-l);
  color: #24449b;
  font-weight: 500;
}
.nav.active::before {
  background: var(--ds-primary);
}
.nav.disabled { color: #b3b7c4 }
.nav-sep { color: #a2a7b8; letter-spacing: .08em }

/* =====================================================================
 * 3. Kopfleiste
 * ===================================================================== */
.topbar {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-line);
  box-shadow: none;
}
/* EINE Bedienung sticht heraus: die Klientenauswahl. Alles andere in der
   Kopfleiste tritt zurück – im Entwurf tragen Stammdaten und Sprache keinen
   Rahmen mehr, sondern nur noch eine Fläche beim Darüberfahren. Vorher
   standen fünf gleich laute Kästchen nebeneinander. */
.client-select, .client-wahl, .client-fixed {
  border-radius: 6px;
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
  color: var(--ds-ink);
  box-shadow: var(--ds-sh);
}
.client-select:hover, .client-wahl:hover { background: var(--ds-head) }
.client-select .ks-name { font-weight: 600; color: var(--ds-ink) }
.client-select .ks-nr { color: var(--ds-muted); font-variant-numeric: tabular-nums }
.client-select .caret { color: var(--ds-muted) }

.client-refresh, .lang {
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ds-muted);
  box-shadow: none;
}
.client-refresh:hover, .lang:hover { background: var(--ds-head); color: var(--ds-ink) }
.nav-link-plain { border-radius: 6px; color: #4d5468 }
.nav-link-plain:hover { background: var(--ds-head); color: var(--ds-ink) }
/* Der Admin-Hinweis ist im Entwurf voll gefüllt, nicht mehr zart. */
.admin-badge {
  background: var(--ds-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(37, 64, 155, .25);
}
.user { color: var(--ds-muted) }

/* =====================================================================
 * 4. Karten, Hinweise, Knöpfe, Eingaben
 * ===================================================================== */
.panel, .card, .box, .kachel, .ka-kachel, .dash-card, .op-panel, .bank-box {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r);
  box-shadow: var(--ds-sh);
}
.page-title, h1, h2, h3 { color: var(--ds-ink); letter-spacing: -.01em }
.muted, .small.muted { color: var(--ds-muted) }

.hinweis-warn, .hinweis-rot, .hinweis-leer, .content .an-info, .uva-status {
  border-radius: var(--ds-r);
  border: 1px solid var(--ds-line);
  background: var(--ds-head);
  color: var(--ds-muted);
}
.hinweis-warn, .uva-status.warn, .content .an-info.warn {
  background: var(--ds-warn-l); border-color: #f3ddb9; color: #7c5310;
}
.hinweis-rot, .content .an-info.err {
  background: var(--ds-err-l); border-color: #f6d2ce; color: #b3261e;
}
.content .an-info.ok { background: var(--ds-ok-l); border-color: #cfeadd; color: #0a6b45 }

.b, button.b, a.b {
  border-radius: var(--ds-r-s);
  font-weight: 500;
  box-shadow: var(--ds-sh);
  border: 1px solid transparent;
}
.b-blue, .b.b-blue {
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(37, 64, 155, .25);
}
.b-blue:hover:not(:disabled) { background: var(--ds-primary-d) }
.b-light, .b.b-light, .b-grey {
  background: var(--ds-surface);
  border-color: #dfe2ea;
  color: var(--ds-text);
}
.b-light:hover:not(:disabled), .b-grey:hover:not(:disabled) { background: var(--ds-head) }
.ghost { background: transparent; border-color: transparent; box-shadow: none }
.ghost:hover { background: var(--ds-head) }
.b:disabled { opacity: .45 }

input[type=text], input[type=search], input[type=email], input[type=password],
input[type=number], input[type=date], select, textarea {
  border-radius: var(--ds-r-s);
  border: 1px solid #dfe2ea;
  background: var(--ds-surface);
  color: var(--ds-text);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ds-primary) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-primary) 15%, transparent);
}
input[type=checkbox], input[type=radio] { accent-color: var(--ds-primary) }

/* =====================================================================
 * 5. Analyse: Reiter, Filterleiste, Schalter
 *
 * MIT `.content` DAVOR – 19 Templates führen eigene Kopien dieser Regeln in
 * ihrem <style>-Block und würden sonst gewinnen.
 * ===================================================================== */
.content .an-tabs { border-bottom: 1px solid var(--ds-line) }
.content .an-tab {
  color: var(--ds-muted);
  font-weight: 500;
  font-size: 13px;
  border-bottom: 2px solid transparent;
}
.content .an-tab:hover { color: var(--ds-ink) }
.content .an-tab.active { color: var(--ds-primary); border-bottom-color: var(--ds-primary) }
.content .an-tab.off { color: #b9bdc9 }
.content .an-bar { background: transparent; border: none; box-shadow: none }
.content .an-mandant { color: var(--ds-muted) }

/* Segmentschalter: graue Spur, aktive Wahl BLAU GEFÜLLT. Das ist der
   auffälligste Unterschied zum bisherigen Bild – vorher war die aktive
   Wahl weiß auf grauer Spur. */
.content .an-seg, .content .seg-track {
  background: var(--ds-head);
  border: none;
  border-radius: var(--ds-r-s);
}
.content .an-seg-btn {
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--ds-muted);
  font-weight: 500;
  font-size: 12.5px;
}
.content .an-seg-btn:hover { color: var(--ds-ink) }
.content .an-seg-btn.on {
  background: var(--ds-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 64, 155, .25);
}
/* Jahr und Periode sind KEINE gefüllten Schalter, sondern Chips: zarte
   blaue Fläche mit blauem Ring. So bleiben zwölf Perioden nebeneinander
   lesbar, ohne dass die Leiste zu einer Blaufläche wird. */
.content .an-seg .an-seg-btn.on:not(.seg-track .an-seg-btn) {
  background: var(--ds-primary-l);
  color: #2a4fb0;
  box-shadow: inset 0 0 0 1px var(--ds-primary);
}
.content .an-seg-lbl {
  color: var(--ds-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Filterfeld: graue Fläche ohne Rahmen, wie im Entwurf. */
.content .an-suche {
  background: var(--ds-head);
  border: 1px solid transparent;
  border-radius: var(--ds-r-s);
  color: var(--ds-text);
}
.content .an-suche:focus {
  background: var(--ds-surface);
  border-color: color-mix(in srgb, var(--ds-primary) 50%, transparent);
}

/* PDF rot, CSV grün – farbcodiert, aber nicht laut. */
.content .an-print, .content .an-pdf {
  background: #fdf2f3;
  border: 1px solid #f5cdd2;
  color: #a83a48;
  border-radius: var(--ds-r-s);
  font-weight: 500;
}
.content .an-print:hover, .content .an-pdf:hover { background: #fbe6e9 }
.content .an-csv {
  background: #edf9f3;
  border: 1px solid #c2e8d6;
  color: #16714f;
  border-radius: var(--ds-r-s);
  font-weight: 500;
}
.content .an-csv:hover { background: #ddf3e8 }

/* =====================================================================
 * 6. Tabellen
 * ===================================================================== */
.content .an-tbl, .content .op-tbl, .content .grid {
  background: var(--ds-surface);
  border-radius: var(--ds-r);
}
.content .an-tbl th, .content .op-tbl th, .content .grid th,
.content table.tbl th, .content .zt-tbl th {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.content .an-tbl td, .content .op-tbl td, .content .grid td,
.content table.tbl td {
  border-bottom: 1px solid var(--ds-line-s);
  color: var(--ds-text);
}
.content .an-row:hover td, .content .op-row:hover td,
.content .grid tbody tr:hover td { background: var(--ds-head) }
.content .an-row.sel td, .content .op-row.sel td, .content tr.sel td {
  background: var(--ds-primary-l);
}

/* Die Kontonummer ist ein Verweis aufs Kontenblatt – im Entwurf blau. */
.content .an-konto { color: var(--ds-primary); text-decoration: none }
.content .an-konto:hover { text-decoration: underline }

/* Klassenzeilen: zarte blaue Fläche, blaue fette Nummer, Farbkante links. */
.content .an-grp td {
  background: var(--ds-primary-l);
  border-bottom: 1px solid var(--ds-line);
  font-weight: 600;
  color: var(--ds-ink);
}
.content .an-grp td:first-child {
  color: var(--ds-primary);
  box-shadow: inset 3px 0 0 0 var(--ds-primary);
}

/* Summenzeile: das dunkle Band (panel oklch(0.28 0.045 262)). */
.content .an-sum td, .content .op-sum td, .content tr.summe td {
  background: #2f3654;
  color: #f2f3f7;
  font-weight: 500;
  border: none;
}
.content .an-sum td.muted, .content .op-sum td.muted { color: #c7cad8 }

.content .neg, .content td.bad, .content .bad { color: var(--ds-err) }
.content .pos, .content td.gut { color: var(--ds-ok) }
.content td.warn, .content .warn-txt { color: var(--ds-warn) }
.content td.muted { color: #a9adbd }

/* =====================================================================
 * 7. Abzeichen und Auswahllisten
 * ===================================================================== */
/* Zustandschips: vier Zustände, je mit eigener Fläche UND eigenem Rahmen.
   Der Rahmen ist neu – ohne ihn verschwimmen die zarten Flächen auf dem
   hellen Grund. */
.pill, .badge, .st, .chip, .tag {
  border-radius: 999px; font-weight: 600; font-size: 11px;
  border: 1px solid transparent;
}
.pill.on, .badge.ok, .st-1 {
  background: var(--ds-primary-l); color: #24449b; border-color: #cbd8f6;
}
.badge.warn, .st-2 {
  background: var(--ds-warn-l); color: var(--ds-warn); border-color: #f0d5a8;
}
.badge.err, .st-3, .st-x {
  background: var(--ds-err-l); color: #b3261e; border-color: #f3cdc8;
}
.badge.gut, .st-ok {
  background: var(--ds-ok-l); color: #146b4c; border-color: #c3e6d4;
}

.mdd-list, .ta-list, .modal-box {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r);
  box-shadow: var(--ds-sh-l);
}
.mdd-opt:hover, .ta-opt:hover, .mdd-opt.on { background: var(--ds-primary-l) }

/* =====================================================================
 * 8. Was hier NICHT eingefangen wird
 *
 * Dashboard-Kacheln, Zeiterfassung (eigenes Farbsystem mit !important),
 * Kostenrechnung, Offene Posten, Kontenblatt, Monatsauswertung,
 * Personalakt und Belegverarbeitung führen so viele feste Farbwerte im
 * eigenen <style>-Block, dass sie sich von hier aus nicht sauber einfangen
 * lassen. Sie werden einzeln nachgezogen – mit Blick auf die Seite.
 * ===================================================================== */

/* Ein Buch am Beleg, das es in BMD nicht gibt (14.08.2026).
   Bei Hu Handel KG trugen 25 Belege das Symbol „KA", die Bücher heißen
   aber KA-1 und KA-2. In einem Auswahlfeld ohne passende Option zeigt der
   Browser die erste – die Zeile sah aus wie KA-1, gespeichert war KA.
   Jetzt trägt sie einen orangen Rahmen: nichts ist kaputt, aber es muss
   jemand hinsehen.

   WARUM HIER UND NICHT IN seiten-v2.css: index.html lädt jenes Blatt
   gar nicht (die Seite bringt kein eigenes <style> mit). Dort hätten die
   Regeln lautlos nichts bewirkt – ein Testfall hat es gefangen. */
.content .art-sel.buch-unbekannt,
.art-sel.buch-unbekannt {
  border: 1px solid #e6cfa4;
  background: #fdf1e3;
  color: #a8620f;
  font-weight: 600;
}
.opt-unbekannt { color: #a8620f }