:root {
  --ground: #f2f1ec;
  --surface: #ffffff;
  --surface-2: #eae8e0;
  --ink: #1b2430;
  --ink-soft: #5b6470;
  --ink-faint: #8991a0;
  --line: #dee0da;
  --line-strong: #c9cbc3;
  --accent: #2c5f5e;
  --accent-ink: #ffffff;
  --accent-soft: #dbe9e7;
  --focus: #2c5f5e;
  --ok: #2f7d4f;
  --ok-soft: #e1efe6;
  --info: #3a6ea5;
  --info-soft: #e2ebf3;
  --warn: #d68a1f;
  --warn-soft: #f7ecdb;
  --crit: #a52a2a;
  --crit-soft: #f4e1e0;
  --partial: #7d5ba6;
  --partial-soft: #eae3f2;
  --neutral: #5b6470;
  --neutral-soft: #eceae3;
  --shadow: 0 1px 2px rgba(27,36,48,0.06), 0 8px 24px rgba(27,36,48,0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121820; --surface: #19212a; --surface-2: #212a34;
    --ink: #e7ebee; --ink-soft: #93a0ab; --ink-faint: #67727d;
    --line: #2a333d; --line-strong: #384250;
    --accent: #6cbcb4; --accent-ink: #0c1517; --accent-soft: #1e3634; --focus: #6cbcb4;
    --ok: #4bab7d; --ok-soft: #1c3227; --info: #6aa3dc; --info-soft: #1c2c3d;
    --warn: #cf9530; --warn-soft: #362a15; --crit: #cc655d; --crit-soft: #3a2220;
    --partial: #b39ddb; --partial-soft: #2a2438;
    --neutral: #93a0ab; --neutral-soft: #232c35;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"] {
  --ground: #121820; --surface: #19212a; --surface-2: #212a34;
  --ink: #e7ebee; --ink-soft: #93a0ab; --ink-faint: #67727d;
  --line: #2a333d; --line-strong: #384250;
  --accent: #6cbcb4; --accent-ink: #0c1517; --accent-soft: #1e3634; --focus: #6cbcb4;
  --ok: #4bab7d; --ok-soft: #1c3227; --info: #6aa3dc; --info-soft: #1c2c3d;
  --warn: #cf9530; --warn-soft: #362a15; --crit: #cc655d; --crit-soft: #3a2220;
  --partial: #b39ddb; --partial-soft: #2a2438;
  --neutral: #93a0ab; --neutral-soft: #232c35;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
h1, h2, h3, .heading { font-weight: 800; text-wrap: balance; }
a { color: var(--accent); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.shell { max-width: 1180px; margin: 0 auto; padding: 20px 24px 48px; }

.back-link {
  display: inline-block; margin-bottom: 12px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); text-decoration: none;
}
.back-link:hover { color: var(--accent); }

.demo-banner {
  margin: 0 0 16px; padding: 9px 14px; border-radius: 8px;
  background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn);
  font-size: 12.5px; font-weight: 600; text-align: center;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
  margin-bottom: 22px; flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.brand .eyebrow {
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent);
}
.brand h1 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.btn {
  font-weight: 600; font-size: 13px; text-decoration: none;
  border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); padding: 9px 15px; cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px; transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.06); }

.tab-bar { display: flex; gap: 8px; margin-bottom: 20px; }
.tab-btn {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer;
  border-bottom: 3px solid transparent; transition: border-color .15s, color .15s;
}
.tab-btn .tab-sub { font-weight: 500; font-size: 11.5px; color: var(--ink-faint); }
.tab-btn:hover { color: var(--ink); }
.tab-btn.tab-ar.active { color: var(--crit); border-bottom-color: var(--crit); }
.tab-btn.tab-ap.active { color: var(--ok); border-bottom-color: var(--ok); }

.ap-hint {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 8px;
  background: var(--ok-soft); color: var(--ok); font-size: 12.5px; border: 1px solid var(--ok);
}

.stat-grid {
  display: grid; grid-template-columns: repeat(3, minmax(150px,1fr)) minmax(360px, 2.1fr);
  gap: 12px; margin-bottom: 22px;
}
.stat-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.stat-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}
.stat-value { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.stat-sub { font-size: 12px; color: var(--ink-faint); }

.pie-tile { justify-content: center; }
.pie-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pie-chart {
  width: 150px; height: 150px; border-radius: 50%; flex: none;
  background: var(--surface-2); border: 1px solid var(--line);
}
.aging-legend { display: flex; flex-direction: column; gap: 5px; flex: 1 1 160px; min-width: 160px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.legend-item .legend-pct { margin-left: auto; color: var(--ink-faint); }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--c); }

/* Kategoriefarben als echte CSS-Klassen statt Inline-Styles (die CSP der Seite
   erlaubt kein style="..." per innerHTML, nur externe Stylesheet-Regeln). */
.c-bezahlt           { --c: #5FD34C; --c-soft: rgba(95,211,76,0.18); }
.c-teilweise_bezahlt { --c: #00C2A8; --c-soft: rgba(0,194,168,0.18); }
.c-nicht_faellig     { --c: #0099CC; --c-soft: rgba(0,153,204,0.18); }
.c-faellig            { --c: #FFE645; --c-soft: rgba(255,230,69,0.22); }
.c-erinnerung         { --c: #FFA351; --c-soft: rgba(255,163,81,0.18); }
.c-mahnung1           { --c: #FF5C61; --c-soft: rgba(255,92,97,0.18); }
.c-mahnung2           { --c: #FF2D95; --c-soft: rgba(255,45,149,0.18); }
.c-beanstandet        { --c: #A67C52; --c-soft: rgba(166,124,82,0.18); }
.c-unbekannt          { --c: #9B59FF; --c-soft: rgba(155,89,255,0.18); }
.c-sent               { --c: var(--ok); --c-soft: var(--ok-soft); }
.c-unsent             { --c: var(--neutral); --c-soft: var(--neutral-soft); }

/* Verbindlichkeiten-Buckets (kein Mahnwesen, daher kein Eskalations-Farbverlauf) */
.c-ap-bezahlt           { --c: #5FD34C; --c-soft: rgba(95,211,76,0.18); }
.c-ap-teilweise_bezahlt { --c: #00C2A8; --c-soft: rgba(0,194,168,0.18); }
.c-ap-nicht_faellig     { --c: #0099CC; --c-soft: rgba(0,153,204,0.18); }
.c-ap-faellig           { --c: #FFE645; --c-soft: rgba(255,230,69,0.22); }
.c-ap-ueberfaellig      { --c: #FF8A3D; --c-soft: rgba(255,138,61,0.18); }
.c-ap-unbekannt         { --c: #9B59FF; --c-soft: rgba(155,89,255,0.18); }

.pill { background: var(--c-soft); color: var(--c); }
.pill .dot { background: var(--c); }
.overdue-colored { color: var(--c); }

.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.search-field {
  display: flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px;
  flex: 1 1 220px; min-width: 200px;
}
.search-field svg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; }
.search-field input {
  border: none; outline: none; background: transparent; color: var(--ink);
  font-family: inherit; font-size: 13px; width: 100%;
}
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-weight: 600; font-size: 12px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.chip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
select.sort-select {
  font-weight: 600; font-size: 12px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: 8px; padding: 8px 10px;
}
.filter-hint { margin: 0 0 14px; font-size: 11.5px; color: var(--ink-faint); }

.table-wrap {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; box-shadow: var(--shadow);
}
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 880px; }
thead th {
  text-align: left; font-size: 11px;
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--surface-2); padding: 11px 14px;
  border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer;
  user-select: none;
}
thead th:hover { color: var(--ink); }
thead th .arrow { opacity: 0.4; margin-left: 3px; font-size: 10px; }
thead th.active .arrow { opacity: 1; color: var(--accent); }
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.row-clickable { cursor: pointer; }
tbody tr.row-clickable:hover { background: var(--surface-2); }
.num-cell { text-align: right; }
.cust-name { font-weight: 600; }
.cust-email { color: var(--ink-faint); font-size: 12px; }
.pay-note { font-size: 11px; color: var(--partial); margin-top: 2px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 11.5px;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; box-shadow: none; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.detail-row td { background: var(--surface-2); padding: 0; }
.detail-inner { padding: 14px 18px 18px 42px; }
.detail-inner h3 { font-size: 12px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.dispute-note {
  background: var(--c-soft); color: var(--c); border-radius: 8px;
  padding: 8px 12px; font-size: 12.5px; margin-bottom: 10px;
}
.dispute-note strong { color: var(--c); }
.log-item { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.log-item:last-child { border-bottom: none; }
.log-when { color: var(--ink-faint); white-space: nowrap; }
.log-channel { font-weight: 600; }
.log-empty { color: var(--ink-faint); font-size: 12.5px; padding: 4px 0; }

.table-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 8px;
}
.table-footer .count { font-size: 12px; color: var(--ink-soft); }
.pager { display: flex; align-items: center; gap: 8px; }
.pager button {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: 6px; padding: 5px 9px; font-size: 12px; cursor: pointer;
}
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager .page-num { font-size: 12px; color: var(--ink-soft); font-family: ui-monospace, monospace; }

.empty-state { padding: 48px 20px; text-align: center; color: var(--ink-soft); }

.footnote { margin-top: 22px; font-size: 11.5px; color: var(--ink-faint); text-align: center; }

[hidden] { display: none !important; }

@media (max-width: 640px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .pie-tile { grid-column: 1 / -1; }
}