/* ============================================================================
   theme.css – Designsystem von Accountico.
   Einzige Quelle für Farben, Abstände, Radien und die Grundbausteine.
   Wird von jeder Oberfläche als ERSTES geladen; kanzlei.css und die
   <style>-Blöcke der Seiten enthalten nur noch Besonderheiten.

   Aufbau nach dem Vorbild von shadcn/ui: eine achromatische Graustufenleiter
   trägt die gesamte Oberfläche, Farbe erscheint nur dort, wo sie Bedeutung
   hat – Markenfarbe für das Aktive und das Primäre, Signalfarben für Status.
   Das ist der Grund, warum die Oberfläche ruhig wirkt, obwohl viel darauf ist.

   Karten werden durch eine Haarlinie abgegrenzt, nicht durch Schatten.
   Schatten gibt es nur für Dinge, die tatsächlich über der Seite schweben:
   Menüs, Dialoge, gezogene Karten.
   ========================================================================= */

/* ----------------------------------------------------------------- Tokens */
:root {
  color-scheme: light;

  /* Graustufenleiter – die Zahlen sind oklch-Helligkeiten, damit die
     Abstufungen optisch gleichmässig sind und nicht nur rechnerisch. */
  --g-0:   oklch(1 0 0);
  --g-25:  oklch(0.985 0 0);
  --g-50:  oklch(0.97 0 0);
  --g-100: oklch(0.945 0 0);
  --g-200: oklch(0.922 0 0);
  --g-300: oklch(0.87 0 0);
  --g-400: oklch(0.708 0 0);
  --g-500: oklch(0.556 0 0);
  --g-600: oklch(0.439 0 0);
  --g-700: oklch(0.371 0 0);
  --g-800: oklch(0.269 0 0);
  --g-900: oklch(0.205 0 0);
  --g-950: oklch(0.145 0 0);

  /* Flächen */
  --bg:            var(--g-25);
  --fg:            var(--g-950);
  --card:          var(--g-0);
  --card-fg:       var(--g-950);
  --muted:         var(--g-50);
  --muted-fg:      var(--g-500);
  --subtle:        var(--g-25);
  --border:        var(--g-200);
  --border-strong: var(--g-300);
  --input-bg:      var(--g-0);
  --overlay:       oklch(0.145 0 0 / 0.42);

  /* Seitenleiste und Kopfzeile */
  --side:        var(--g-0);
  --side-fg:     var(--g-950);
  --side-border: var(--g-200);
  --side-item:   var(--g-600);
  --side-hover:  var(--g-50);
  --topbar:      oklch(1 0 0 / 0.82);

  /* Primär – achromatisch wie die Vorlage. Der Primärknopf ist fast schwarz,
     nicht bunt; das lässt die Markenfarbe dort wirken, wo sie etwas bedeutet. */
  --primary:    var(--g-900);
  --primary-fg: var(--g-25);
  --primary-hover: var(--g-800);

  /* Markenfarbe – Accountico-Teal. Trägt aktive Navigation, Verweise,
     Fokusringe und Hervorhebungen. */
  --akzent:       oklch(0.60 0.093 180.4);            /* #0d9488 */
  --akzent-hover: oklch(0.545 0.088 180.4);
  --akzent-fg:    oklch(1 0 0);
  --akzent-soft:  color-mix(in oklab, var(--akzent) 10%, var(--card));
  --akzent-line:  color-mix(in oklab, var(--akzent) 28%, var(--border));
  --ring:         color-mix(in oklab, var(--akzent) 35%, transparent);

  /* Status */
  --ok:        oklch(0.55 0.13 152);
  --ok-soft:   color-mix(in oklab, var(--ok) 12%, var(--card));
  --warn:      oklch(0.62 0.13 71);
  --warn-soft: color-mix(in oklab, var(--warn) 14%, var(--card));
  --rot:       oklch(0.577 0.222 27.3);
  --rot-soft:  color-mix(in oklab, var(--rot) 11%, var(--card));
  --info:      oklch(0.58 0.14 250);
  --info-soft: color-mix(in oklab, var(--info) 11%, var(--card));

  /* Diagramme – bewusst achromatisch, damit Zahlen und nicht Farben wirken.
     Die Markenfarbe markiert die eine Reihe, auf die es gerade ankommt. */
  --chart-1: var(--akzent);
  --chart-2: var(--g-500);
  --chart-3: var(--g-300);
  --chart-4: var(--g-700);
  --chart-5: var(--g-400);

  /* Radien */
  --r-xs: 6px;
  --r-sm: 8px;
  --r:    10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 18px;

  /* Dichte – luftige Stufe: etwas grosszügiger als die Vorlage, damit sich
     auch nach acht Stunden noch sicher klicken lässt. */
  --h-btn:    36px;
  --h-btn-sm: 30px;
  --h-btn-xs: 26px;
  --h-input:  38px;
  --h-row:    42px;
  --pad-card: 20px;
  --pad-body: 26px;
  --gap:      16px;

  /* Schatten – nur für Schwebendes */
  --sh-pop: 0 4px 12px -2px oklch(0.145 0 0 / 0.08), 0 12px 28px -8px oklch(0.145 0 0 / 0.14);
  --sh-lift: 0 2px 6px -1px oklch(0.145 0 0 / 0.10), 0 8px 20px -6px oklch(0.145 0 0 / 0.16);

  /* Schrift aus der Systemkette. Es wird KEINE Schrift von aussen geladen –
     die Verweise auf Google Fonts sind aus allen Seiten entfernt. Damit geht
     bei keinem Aufruf mehr eine IP-Adresse an einen Dritten, auch nicht im
     Mandantenportal und auf den Unterschriftsseiten.
     Wer eine eigene Schrift will, legt sie unter public/assets ab und trägt
     sie hier vorn ein – "node schriften.mjs" erledigt genau das. */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------ Dunkelmodus */
/* Zwei Wege: ausdrückliche Wahl über data-theme, sonst die Systemvorgabe.
   Die Wahl gewinnt immer – deshalb steht sie in einer eigenen Regel und
   nicht in der Medienabfrage. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) { color-scheme: dark; }
}
:root[data-theme="dunkel"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --bg:            var(--g-950);
    --fg:            var(--g-25);
    --card:          var(--g-900);
    --card-fg:       var(--g-25);
    --muted:         var(--g-800);
    --muted-fg:      var(--g-400);
    --subtle:        oklch(0.175 0 0);
    --border:        oklch(1 0 0 / 0.11);
    --border-strong: oklch(1 0 0 / 0.20);
    --input-bg:      oklch(1 0 0 / 0.05);
    --overlay:       oklch(0 0 0 / 0.62);

    --side:        var(--g-900);
    --side-fg:     var(--g-25);
    --side-border: oklch(1 0 0 / 0.10);
    --side-item:   var(--g-400);
    --side-hover:  oklch(1 0 0 / 0.06);
    --topbar:      color-mix(in oklab, var(--g-950) 80%, transparent);

    --primary:       var(--g-200);
    --primary-fg:    var(--g-900);
    --primary-hover: var(--g-300);

    --akzent:       oklch(0.72 0.115 178);
    --akzent-hover: oklch(0.78 0.115 178);
    --akzent-fg:    oklch(0.16 0.02 180);
    --akzent-soft:  color-mix(in oklab, var(--akzent) 16%, var(--card));
    --akzent-line:  color-mix(in oklab, var(--akzent) 34%, var(--border));

    --ok:   oklch(0.72 0.15 152);
    --warn: oklch(0.78 0.14 75);
    --rot:  oklch(0.704 0.191 22.2);
    --info: oklch(0.70 0.13 250);
    --ok-soft:   color-mix(in oklab, var(--ok) 18%, var(--card));
    --warn-soft: color-mix(in oklab, var(--warn) 18%, var(--card));
    --rot-soft:  color-mix(in oklab, var(--rot) 18%, var(--card));
    --info-soft: color-mix(in oklab, var(--info) 18%, var(--card));

    --chart-2: var(--g-400);
    --chart-3: var(--g-600);
    --chart-4: var(--g-300);
    --chart-5: var(--g-500);

    --sh-pop: 0 4px 12px -2px oklch(0 0 0 / 0.5), 0 12px 28px -8px oklch(0 0 0 / 0.6);
    --sh-lift: 0 2px 6px -1px oklch(0 0 0 / 0.5), 0 8px 20px -6px oklch(0 0 0 / 0.55);
  }
}
:root[data-theme="dunkel"] {
  --bg:            var(--g-950);
  --fg:            var(--g-25);
  --card:          var(--g-900);
  --card-fg:       var(--g-25);
  --muted:         var(--g-800);
  --muted-fg:      var(--g-400);
  --subtle:        oklch(0.175 0 0);
  --border:        oklch(1 0 0 / 0.11);
  --border-strong: oklch(1 0 0 / 0.20);
  --input-bg:      oklch(1 0 0 / 0.05);
  --overlay:       oklch(0 0 0 / 0.62);

  --side:        var(--g-900);
  --side-fg:     var(--g-25);
  --side-border: oklch(1 0 0 / 0.10);
  --side-item:   var(--g-400);
  --side-hover:  oklch(1 0 0 / 0.06);
  --topbar:      color-mix(in oklab, var(--g-950) 80%, transparent);

  --primary:       var(--g-200);
  --primary-fg:    var(--g-900);
  --primary-hover: var(--g-300);

  --akzent:       oklch(0.72 0.115 178);
  --akzent-hover: oklch(0.78 0.115 178);
  --akzent-fg:    oklch(0.16 0.02 180);
  --akzent-soft:  color-mix(in oklab, var(--akzent) 16%, var(--card));
  --akzent-line:  color-mix(in oklab, var(--akzent) 34%, var(--border));

  --ok:   oklch(0.72 0.15 152);
  --warn: oklch(0.78 0.14 75);
  --rot:  oklch(0.704 0.191 22.2);
  --info: oklch(0.70 0.13 250);
  --ok-soft:   color-mix(in oklab, var(--ok) 18%, var(--card));
  --warn-soft: color-mix(in oklab, var(--warn) 18%, var(--card));
  --rot-soft:  color-mix(in oklab, var(--rot) 18%, var(--card));
  --info-soft: color-mix(in oklab, var(--info) 18%, var(--card));

  --chart-2: var(--g-400);
  --chart-3: var(--g-600);
  --chart-4: var(--g-300);
  --chart-5: var(--g-500);

  --sh-pop: 0 4px 12px -2px oklch(0 0 0 / 0.5), 0 12px 28px -8px oklch(0 0 0 / 0.6);
  --sh-lift: 0 2px 6px -1px oklch(0 0 0 / 0.5), 0 8px 20px -6px oklch(0 0 0 / 0.55);
}

/* --------------------------------------------------------------- Grundlage */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
}
::selection { background: color-mix(in oklab, var(--akzent) 26%, transparent); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Anwendungswurzel und Seitenrumpf. Der Selektor ist hier ausdrücklich
   genannt: beim Lösen dieser Schicht von #acc war er verlorengegangen, und
   eine Regel ohne Selektor verwirft der Browser stillschweigend komplett. */
#acc, .seite { color: var(--fg); font-family: var(--font); font-size: 14px; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
svg { flex-shrink: 0; }
.muted { color: var(--muted-fg); }
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.tabular { font-variant-numeric: tabular-nums; }
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ------------------------------------------------------------------ Karte */
/* Haarlinie statt Schatten. Das ist das prägende Merkmal dieser Oberfläche:
   Karten liegen IN der Seite, nicht darüber. */
.card {
  background: var(--card);
  color: var(--card-fg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.card.pad { padding: var(--pad-card); }
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: var(--pad-card) var(--pad-card) 0;
}
.card-head.line { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.card-title { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; margin: 0; line-height: 1.35; }
.card-desc { font-size: 13px; color: var(--muted-fg); margin: 2px 0 0; }
.card-body { padding: var(--pad-card); }
.card-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px var(--pad-card); border-top: 1px solid var(--border);
  background: var(--subtle); border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ------------------------------------------------------------------ Knopf */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--h-btn); padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid transparent;
  background: var(--primary); color: var(--primary-fg);
  font-size: 13.5px; font-weight: 500; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, transform .04s;
}
.btn:hover { background: var(--primary-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }

.btn.akzent { background: var(--akzent); color: var(--akzent-fg); }
.btn.akzent:hover { background: var(--akzent-hover); }
.btn.ghost {
  background: var(--card); color: var(--fg); border-color: var(--border);
}
.btn.ghost:hover { background: var(--muted); }
.btn.still { background: transparent; color: var(--muted-fg); border-color: transparent; }
.btn.still:hover { background: var(--muted); color: var(--fg); }
/* Löschen ist getönt, nicht knallrot: es soll auffindbar sein, aber die
   Oberfläche nicht dominieren. */
.btn.warnung {
  background: var(--rot-soft); color: var(--rot); border-color: transparent;
}
.btn.warnung:hover { background: color-mix(in oklab, var(--rot) 20%, var(--card)); }
.btn.sm { height: var(--h-btn-sm); padding: 0 11px; font-size: 12.5px; gap: 5px; }
.btn.sm svg { width: 14px; height: 14px; }
.btn.xs { height: var(--h-btn-xs); padding: 0 9px; font-size: 12px; border-radius: var(--r-xs); gap: 4px; }
.btn.xs svg { width: 13px; height: 13px; }
.btn.block { width: 100%; }

.iconbtn {
  width: var(--h-btn); height: var(--h-btn);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--card); color: var(--muted-fg); position: relative;
  transition: background .12s, color .12s;
}
.iconbtn:hover { background: var(--muted); color: var(--fg); }
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn.blank { border-color: transparent; background: transparent; }
.iconbtn.blank:hover { background: var(--muted); }
.iconbtn .dt {
  position: absolute; top: 7px; right: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 2px var(--card);
}
.wbtn {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--muted-fg);
  border-radius: var(--r-xs); transition: background .12s, color .12s;
}
.wbtn:hover { background: var(--muted); color: var(--fg); }

/* ----------------------------------------------------------------- Felder */
input, select, textarea {
  height: var(--h-input); width: 100%; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--input-bg); color: var(--fg);
  transition: border-color .12s, box-shadow .12s;
}
textarea { height: auto; padding: 10px 12px; line-height: 1.55; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted-fg); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--ring);
}
input:disabled, select:disabled { opacity: .55; }
input[type="checkbox"], input[type="radio"] { width: auto; height: auto; accent-color: var(--akzent); }
label { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted-fg); margin-bottom: 6px; }
.feld { margin-bottom: 14px; }
.hinweis { font-size: 12px; color: var(--muted-fg); margin-top: 5px; }

/* --------------------------------------------------------------- Tabellen */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--muted-fg);
  padding: 0 12px; height: 38px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 0 12px; height: var(--h-row); border-bottom: 1px solid var(--border); font-size: 13.5px; }
tbody tr:last-child td { border-bottom: none; }
tr.zebra:hover, tbody tr.klick:hover { background: var(--subtle); }
tbody tr.klick { cursor: pointer; }
.tabelle { overflow: auto; }

/* -------------------------------------------------------------- Abzeichen */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 500; padding: 2px 8px;
  border-radius: var(--r-xs); border: 1px solid transparent; white-space: nowrap;
}
.b-ok   { background: var(--ok-soft);   color: var(--ok);   border-color: color-mix(in oklab, var(--ok) 22%, transparent); }
.b-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in oklab, var(--warn) 24%, transparent); }
.b-rot  { background: var(--rot-soft);  color: var(--rot);  border-color: color-mix(in oklab, var(--rot) 22%, transparent); }
.b-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in oklab, var(--info) 22%, transparent); }
.b-acc  { background: var(--akzent-soft); color: var(--akzent); border-color: var(--akzent-line); }
.b-mut  { background: var(--muted); color: var(--muted-fg); border-color: var(--border); }
.pill { font-size: 12px; padding: 2px 9px; border-radius: 99px; background: var(--muted); color: var(--muted-fg); font-weight: 500; }

/* ----------------------------------------------------------------- Reiter */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab {
  height: 38px; padding: 0 13px; border: none; background: transparent;
  color: var(--muted-fg); font-size: 13.5px; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--fg); }
.tab.on { color: var(--fg); border-bottom-color: var(--akzent); font-weight: 600; }

/* Segmentierte Umschalter (Ansichtswechsel) */
.seg { display: inline-flex; background: var(--muted); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg button {
  height: 28px; padding: 0 11px; border: none; background: transparent;
  color: var(--muted-fg); font-size: 12.5px; font-weight: 500; border-radius: var(--r-xs);
  transition: background .12s, color .12s;
}
.seg button.on { background: var(--card); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px oklch(0 0 0 / .06); }

/* ------------------------------------------------------ Überschrift/Raster */
h1, h2, h3 { letter-spacing: -0.022em; margin: 0; font-weight: 600; }
h2.mt { font-size: 18px; margin-bottom: 3px; }
.sub { font-size: 13px; color: var(--muted-fg); margin: 0 0 18px; }
.sec {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-fg); margin: 26px 0 12px;
}
.grid { display: grid; gap: var(--gap); }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ------------------------------------------------------------- Kennzahlen */
/* Grosse Zahl, darunter die Veränderung als Abzeichen, darunter der Kontext. */
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 18px 16px; }
.kpi .k-lab { font-size: 13px; color: var(--muted-fg); font-weight: 500; }
.kpi .k-val { font-size: 27px; font-weight: 600; letter-spacing: -0.03em; margin: 6px 0 0; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .k-foot { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12.5px; color: var(--muted-fg); }

/* ------------------------------------------------------------------ Leere */
.empty {
  text-align: center; padding: 48px 24px; color: var(--muted-fg); font-size: 13.5px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--card);
}
.empty .e-t { font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }

/* ------------------------------------------------------------ Dialog/Menü */
.modal-bg {
  position: fixed; inset: 0; background: var(--overlay); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--card); color: var(--card-fg);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--sh-pop); width: 100%; max-width: 560px;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-head { padding: 20px var(--pad-card) 0; }
.modal-body { padding: 18px var(--pad-card); overflow: auto; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 14px var(--pad-card); border-top: 1px solid var(--border); background: var(--subtle);
}
.menu {
  position: absolute; z-index: 90; min-width: 200px; padding: 5px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--sh-pop);
}
.menu button {
  width: 100%; display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 9px; border: none; background: transparent;
  color: var(--fg); font-size: 13.5px; text-align: left; border-radius: var(--r-xs);
}
.menu button:hover { background: var(--muted); }
.menu button svg { width: 15px; height: 15px; color: var(--muted-fg); }
.menu .trenner { height: 1px; background: var(--border); margin: 5px 0; }

/* ---------------------------------------------------------------- Meldung */
.toast-halter { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--muted-fg);
  border-radius: var(--r-sm); box-shadow: var(--sh-pop);
  padding: 11px 15px; font-size: 13.5px; color: var(--fg); max-width: 400px;
}
.toast.ok  { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--rot); }

/* ---------------------------------------------------------------- Ladebalken */
.skel {
  background: linear-gradient(90deg, var(--muted) 25%, var(--subtle) 50%, var(--muted) 75%);
  background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; border-radius: var(--r-xs);
}
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}