/* Unsere Werte – die einzige Stelle, an der Farben, Abstände und Schrift festgelegt werden.
 *
 * Darunter liegt Tabler (app/web/statisch/tabler/). Was von dort kommt, wird hier benannt,
 * nicht kopiert: Ein späterer Wechsel des Designs tauscht Tabler aus und schreibt diese
 * Datei neu – die Vorlagen bleiben, wie sie sind.
 *
 * Die drei Kennzeichnungsfarben sind **Bedeutung, nicht Dekoration**, und deshalb bewusst
 * nicht von Tablers Ampel übernommen:
 *   rot     = Pflichtangabe fehlt, blockiert den Abschluss
 *   orange  = Prüf-Hinweis, blockiert nie
 *   violett = Vorschlag der Belegerkennung, vom Menschen zu bestätigen
 * Tablers »warning« ist Gelb (#f59f00) und gegen das Rot zu schwach zu unterscheiden;
 * deshalb nehmen wir sein »orange« (#f76707). Tablers »purple« (#ae3ec9) ist pinkstichig;
 * unser Violett steht klar daneben. Geprüft wurde beides auch in Graustufen.
 */

:root {
  /* Bedeutungsfarben – Schrift, Fläche und Rand je Bedeutung */
  --kz-fehlt: #d63939; /* = Tabler red */
  --kz-fehlt-flaeche: #fdf2f2;
  --kz-pruefen: #f76707; /* = Tabler orange, nicht warning */
  --kz-pruefen-flaeche: #fff6ef;
  --kz-vorschlag: #7048e8; /* eigenes Violett, nicht Tablers purple */
  --kz-vorschlag-flaeche: #f5f2ff;

  /* Zustände, die in Listen als Abzeichen erscheinen */
  --zustand-offen: var(--tblr-secondary);
  --zustand-warnung: var(--kz-pruefen);
  --zustand-gut: var(--tblr-green);
  --zustand-schlecht: var(--kz-fehlt);
  --zustand-ruhend: var(--tblr-gray);

  /* Dichte der Listen: kompakt, damit viele Zeilen auf den Schirm passen (Tabler: 8 px) */
  --zeile-y: 0.375rem;
  --zeile-x: 0.5rem;
}

/* Dunkel: dieselben Bedeutungen, hellere Töne und dunkle Flächen */
[data-bs-theme="dark"] {
  --kz-fehlt: #ff8f8f;
  --kz-fehlt-flaeche: #2e1a1a;
  --kz-pruefen: #ffa94d;
  --kz-pruefen-flaeche: #2e2114;
  --kz-vorschlag: #b197fc;
  --kz-vorschlag-flaeche: #221b3a;
}

/* --- grape-Farben -------------------------------------------------------------------
 *
 * Zwei Hausfarben: das helle Blau #94CDEB und das dunkle Petrol #203E4B. Sie tauschen je
 * nach Ansicht die Rollen, statt in beiden Ansichten dasselbe zu tun:
 *
 *   hell:    Seitennavigation in #94CDEB, Schrift und Logo darin in #203E4B.
 *            Der Mittelbereich bleibt weiß – dort steht das Geld, und Zahlen lesen sich
 *            auf Weiß am besten. #203E4B ist hier die Akzentfarbe: Überschriften,
 *            Hauptknopf, aktiver Navigationspunkt.
 *   dunkel:  Der Mittelbereich ist #203E4B, die Karten darauf eine Spur heller, damit sie
 *            sich abheben. Die Seitennavigation wird **dunkler** als die Mitte, nicht
 *            heller – ein leuchtend hellblaues Band neben einer dunklen Fläche blendet.
 *            #94CDEB ist dort die Akzentfarbe: Logo, aktiver Punkt, Verweise.
 *
 * Die Hausfarbe ist damit in beiden Ansichten sofort zu sehen, einmal als Fläche und
 * einmal als Farbe der Schrift. Die drei Bedeutungsfarben bleiben davon unberührt.
 */

:root {
  --grape-hell: #94CDEB;
  --grape-dunkel: #203E4B;

  /* Helle Ansicht: blaue Navigation, weiße Mitte, Petrol als Akzent */
  --nav-flaeche: var(--grape-hell);
  --nav-schrift: var(--grape-dunkel);
  --nav-schrift-leise: #2d5c72;
  --nav-aktiv-flaeche: #ffffff;
  --nav-kante: #79b8da;
  --tblr-primary: var(--grape-dunkel);
  --tblr-primary-rgb: 32, 62, 75;
  /* Die Seite ist nicht reinweiß, die Karten schon: So heben sie sich ohne kräftige Ränder
     ab. Der Ton ist aus #94CDEB heruntergezogen, damit die helle Ansicht eine eigene
     Handschrift hat und nicht nur die dunkle mit vertauschten Farben ist. */
  --tblr-body-bg: #f1f6f9;
}

/* Dunkle Ansicht: Petrol als Mitte, Navigation dunkler, Hellblau als Akzent */
[data-bs-theme="dark"] {
  --tblr-body-bg: var(--grape-dunkel);
  --tblr-bg-surface: #27505f;
  --tblr-bg-surface-secondary: #1b3542;
  --tblr-bg-surface-tertiary: #1b3542;
  --tblr-border-color: #35606f;
  --tblr-border-color-translucent: #35606f;
  --tblr-primary: var(--grape-hell);
  --tblr-primary-rgb: 148, 205, 235;

  --nav-flaeche: #16303b;
  --nav-schrift: var(--grape-hell);
  --nav-schrift-leise: #7fb0c9;
  --nav-aktiv-flaeche: #203e4b;
  --nav-kante: #0f2731;
}

/* --- Die Seitennavigation --------------------------------------------------------------
 *
 * Sie trägt die Hausfarbe – aber eine Farbfläche allein ist noch keine Navigation. Struktur
 * bekommt sie durch: Luft um das Logo, eine Trennlinie darunter, **Gruppen** mit kleinen
 * Überschriften, und einen abgesetzten Fuß für Umgebung, Benutzer und Ansichtswahl.
 * Die Kante zur Mitte trennt Navigation und Inhalt sichtbar voneinander.
 */

.navbar-vertical {
  background: var(--nav-flaeche);
  border-right: 1px solid var(--nav-kante);
  padding: 0;
}
.navbar-vertical > .container-fluid {
  display: flex; flex-direction: column; align-items: stretch;
  height: 100%; padding: 0;
}
.navbar-vertical .navbar-brand {
  margin: 0; padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--nav-kante);
}
.navbar-vertical .navbar-collapse {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: .75rem .75rem 0; overflow-y: auto;
}
.navbar-vertical .nav-link,
.navbar-vertical .navbar-brand a { color: var(--nav-schrift); }

/* Gruppenüberschrift: klein, in Versalien, ruhig – sie ordnet, sie ruft nicht */
.navbar-vertical .nav-section-title {
  color: var(--nav-schrift-leise);
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .25rem .5rem; margin-top: 1rem;
}
.navbar-vertical .navbar-nav:first-of-type ~ .nav-section-title { margin-top: 1.25rem; }
.navbar-vertical .nav-link { border-radius: var(--tblr-border-radius); padding: .4rem .5rem; }
.navbar-vertical .nav-item.active > .nav-link {
  background: var(--nav-aktiv-flaeche);
  font-weight: 600;
}
.navbar-vertical .nav-link:hover { background: rgb(255 255 255 / .35); }
[data-bs-theme="dark"] .navbar-vertical .nav-link:hover { background: rgb(255 255 255 / .08); }

/* Der Fuß sitzt unten und ist von den Punkten abgesetzt */
.navbar-vertical .navbar-footer {
  margin-top: auto; padding: .75rem .5rem 1rem;
  border-top: 1px solid var(--nav-kante);
}
.navbar-vertical .benutzer { color: var(--nav-schrift-leise); }

/* Welche Datenbank läuft: wichtig, aber kein Grund, dem Inhalt eine Zeile wegzunehmen */
.probe-hinweis {
  font-size: .75rem; line-height: 1.35; margin: 0 0 .75rem;
  padding: .5rem .625rem; border-radius: var(--tblr-border-radius);
  border-left: 3px solid var(--kz-pruefen);
  background: var(--kz-pruefen-flaeche); color: var(--tblr-body-color);
}
.navbar-vertical [data-ansicht] {
  color: var(--nav-schrift); border-color: var(--nav-schrift-leise); background: transparent;
  font-size: .75rem;
}
:root[data-ansicht="system"] [data-ansicht="system"],
:root[data-ansicht="light"] [data-ansicht="light"],
:root[data-ansicht="dark"] [data-ansicht="dark"] {
  background: var(--nav-aktiv-flaeche); font-weight: 600;
}

/* Das Logo erbt die Schriftfarbe der Navigation (die Flächen im SVG stehen auf
   currentColor) – damit ist es auf hellem Blau wie auf dunklem Petrol lesbar. */
.logo { display: block; width: 8.25rem; height: auto; color: var(--nav-schrift); }

/* --- Kennzeichnung am Feld ------------------------------------------------------------ */

.kz-fehlt { --kz: var(--kz-fehlt); --kz-flaeche: var(--kz-fehlt-flaeche); }
.kz-hinweis { --kz: var(--kz-pruefen); --kz-flaeche: var(--kz-pruefen-flaeche); }
.kz-vorschlag { --kz: var(--kz-vorschlag); --kz-flaeche: var(--kz-vorschlag-flaeche); }

/* Der Rahmen um das Feld trägt die Markierung, nicht das Eingabefeld selbst */
.feld.kz-fehlt, .feld.kz-hinweis, .feld.kz-vorschlag {
  border-left: 3px solid var(--kz);
  background: var(--kz-flaeche);
  padding: .5rem .75rem;
  border-radius: 0 var(--tblr-border-radius) var(--tblr-border-radius) 0;
}
.feld.kz-vorschlag { border-left-style: dashed; }
.kz-text { color: var(--kz); font-size: .8125rem; margin: .25rem 0 0; }

/* Das Sinnbild vor dem Text: so groß wie der Text, in dessen Farbe. Welches Sinnbild zu
   welchem Zustand gehört, steht in den Vorlagen (_kennzeichnung.html, _bausteine.html). */
.kz-symbol {
  width: 1em; height: 1em; vertical-align: -.15em; flex: none;
  stroke: currentColor; fill: none;
}
/* Meldung der Belegerkennung: unsere Vorschlagsfarbe, nicht Tablers Ampel */
.alert.kz-vorschlag-meldung {
  border-color: var(--kz-vorschlag); border-left-width: 3px; border-left-style: dashed;
  background: var(--kz-vorschlag-flaeche); color: var(--tblr-body-color);
}
.kz-marke {
  color: var(--kz-vorschlag); border: 1px solid currentColor; border-radius: 3px;
  font-size: .6875rem; padding: 0 .3rem; margin-left: .4rem; white-space: nowrap;
}

/* --- Breite des Inhalts ---------------------------------------------------------------
 *
 * Tabler lässt den Inhalt bis 1320 px laufen. Das ist für eine Tabelle in Ordnung und für
 * einen Fließtext zu breit – auf einem großen Schirm verliert das Auge die Zeile. Deshalb
 * zwei Grenzen: der Inhalt bleibt bei 1200 px stehen, und erklärender Text hört bei rund
 * 80 Zeichen auf. Zahlenspalten sind davon ausgenommen; Tabellen dürfen die volle Breite.
 */

.page-body .container-xl { max-width: 1200px; }

/* Tablers Zusatzzeile steht in Versalien – das passt für eine Rubrik (»ÜBERSICHT«), nicht
   für einen Wert. Bei uns steht dort ein Kundenname oder eine Rechnungsnummer; die werden
   geschrieben, wie sie geschrieben werden. */
.page-pretitle { text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.card-body > p, .card-subtitle, .datagrid-content, .page-header + p { max-width: 80ch; }

/* --- Tabellen: Zahlen rechts, Ziffern in gleicher Breite ----------------------------- */

/* Kompakt sind **Listen** – dort zählt jede Zeile, die zusätzlich auf den Schirm passt.
   Detail- und Formularansichten behalten die normale Höhe aus Tabler (8 px): dort stehen
   wenige Zeilen, und enge Zeilen machen ein Formular nur unruhig. Umschalten kann man das
   bewusst nicht; es hängt an der Art der Ansicht, nicht am Geschmack. */
.table.liste > :not(caption) > * > * { padding: var(--zeile-y) var(--zeile-x); }
.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nummer { font-variant-numeric: tabular-nums; white-space: nowrap; }
.negativ { color: var(--kz-fehlt); }
/* Die drei Zahlen über dem Kasten »Wirtschaftliches«: groß genug, um sie zu vergleichen */
.zahl-gross { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
tr.klickbar { cursor: pointer; }

/* Welche Instanz läuft: Der Server sagt es leise (er ist der Normalfall), alles andere
   auffällig – dafür gibt es .probe-hinweis. */
.instanz-leise {
  color: var(--tblr-secondary);
  font-size: 0.75rem;
  margin: 0 0 0.5rem;
}