/* ====================================================================
   DESIGN-TOKENS – Delegate-Hausfarben.

   Türkis #4DBAC8 und Anthrazit #3C3C3B sind die Markenfarben der Delegate
   Group; die Abstufungen sind DIESELBEN wie in der Delegate Academy
   (apps/web/src/app/globals.css). Bewusst kopiert statt neu gemischt: Die
   beiden Werkzeuge stehen nebeneinander auf demselben Schreibtisch, und zwei
   leicht verschiedene Türkistöne sehen nach Versehen aus, nicht nach System.

   Die ALTEN Namen (--accent, --ink, --muted, --line, --bg, --card) bleiben
   bestehen und zeigen auf die neue Skala. Dadurch wirkt die Umstellung in allen
   ~650 Zeilen dieser Datei auf einmal, ohne jede einzelne Regel anzufassen.
   ==================================================================== */
:root {
  --brand-50:  #eef9fa;
  --brand-100: #d5f0f3;
  --brand-200: #ade1e7;
  --brand-300: #7fcfd8;
  --brand-400: #4dbac8;   /* Delegate-Türkis */
  --brand-500: #2fa5b4;
  --brand-600: #1f8796;
  --brand-700: #1a6d79;
  --brand-800: #17545d;
  --brand-900: #123f46;

  --ink-900: #1c1f22;
  --ink-800: #2b2f33;
  --ink-700: #3c3c3b;     /* Delegate-Anthrazit */
  --ink-600: #555a60;
  --ink-500: #6b7178;
  --ink-400: #8e949b;
  --ink-300: #c3c8cd;
  --ink-200: #dde1e5;
  --ink-100: #eceff2;
  --ink-50:  #f6f7f9;

  --bg: var(--ink-50);
  --card: #ffffff;
  --ink: var(--ink-800);
  --muted: var(--ink-500);
  --line: var(--ink-200);
  /* --accent ist BEIDES: Hintergrund mit weisser Schrift (aktiver Reiter,
     Hauptknopf) UND Schriftfarbe auf hellem Grund (aktive Sortierspalte,
     Chips). Deshalb brand-700 und nicht das hellere Marken-Türkis: 5,99:1
     gegen Weiss und 5,3:1 als Schrift auf Weiss – AA in beide Richtungen.
     Das Marken-Türkis selbst (brand-400) läge als Schrift bei 2,4:1. */
  --accent: var(--brand-700);
  --accent-hover: var(--brand-800);
  --accent-soft: var(--brand-50);     /* Flächen: Hinweise, aktive Chips */
  --accent-line: var(--brand-200);    /* Rahmen dazu */
  --ok: #1e8e5a;
  --warn: #9a6700;
  --err: #c4372f;
  /* Plan-Umsätze (Forecast): aufgehellter Akzent – gleiche Kennzahl, anderer
     Zustand. Gelb/Rot/Violett sind für Abgrenzung, Warnung und Intercompany belegt. */
  --c-forecast: #a3dde5;

  /* Radien und Schatten. EINE Quelle, damit nicht jede neue Karte ihren
     eigenen Rundungsgrad erfindet – genau so entstehen Oberflächen, die
     "irgendwie unruhig" wirken, ohne dass man sagen kann, woran es liegt. */
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --schatten-sm: 0 1px 2px rgba(16, 24, 32, .06);
  --schatten: 0 1px 3px rgba(16, 24, 32, .06), 0 6px 16px rgba(16, 24, 32, .06);
  --schatten-lg: 0 10px 40px rgba(16, 24, 32, .12);
  --ring: 0 0 0 3px rgba(77, 186, 200, .35);
  /* Hoehe der Kopfzeile, als Token, damit sie an einer Stelle steht.
     NACHGEMESSEN (2026-10-07): Ein Zusammenstoss mit `th { position: sticky;
     top: 0 }` gibt es NICHT. `.table-wrap` traegt `overflow-x: auto`, und der
     Browser macht daraus auch senkrecht einen Scrollbereich – `sticky` wirkt
     dort relativ zu diesem Rahmen, der selbst nie scrollt. Die Spaltenkoepfe
     der grossen Tabellen kleben also ohnehin nicht (gemessen: sie scrollen mit
     bis auf -274px). Wo der Rahmen WIRKLICH scrollt (`#preview-content`,
     `max-height: 260px`), ist `top: 0` richtig und muss es bleiben. */
  --kopf-h: 56px;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Das `hidden`-Attribut muss IMMER gewinnen. Die Browser-Regel dafür hat die
   niedrigste Stufe, jede eigene `display`-Angabe (flex/inline-block) überfährt
   sie – ein per JS auf `hidden = true` gesetztes Element bliebe dann sichtbar.
   Genau so waren der Detailfilter und die Zähler-Badges anfangs immer offen.
   Bisher stand dafür je Regel ein eigenes `[hidden]`-Gegenstück (.bk-hint,
   .bulk-bar, .overlay); diese eine Zeile erledigt es für alle, auch für künftige. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  /* Ohne Kantenglättung wirkt dieselbe Schrift auf einem Windows-Bildschirm
     klobiger als auf einem Mac – der mit Abstand sichtbarste Einzelposten,
     wenn eine Oberfläche "nicht wertig" aussieht. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Überschriften: enger gesetzt und dunkler als der Fliesstext. Die negative
   Laufweite ist das, was grosse Schnitte "gesetzt" statt "getippt" aussehen
   lässt; unterhalb von ~16px wird sie wieder zurückgenommen (kleine Grade
   brauchen Luft, sonst kleben die Buchstaben). */
h1, h2, h3, h4 { color: var(--ink-900); line-height: 1.25; letter-spacing: -0.018em; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* ====================================================================
   KOPFZEILE – eine Reihe: Marke · Navigation · Benutzer.
   Aufbau und Masse sind die der Delegate Academy (`.site-header`,
   `.main-nav`, `.user-menu` dort). Vorher waren es ZWEI Zeilen – Kopf plus
   eigene Reiterleiste darunter – und Sprache wie Abmelden standen offen in
   der Kopfzeile. Beides wird selten gebraucht und gehoert hinter den Avatar;
   die gewonnene Zeile kommt den Zahlen zugute.
   ==================================================================== */
.kopf {
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: var(--kopf-h);
  /* Leicht durchscheinend mit Weichzeichner: Beim Scrollen schimmert der
     Inhalt durch, statt unter einer harten Kante zu verschwinden. */
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ink-100);
  position: sticky; top: 0; z-index: 40;
}
.kopf-fueller { flex: 1; }

/* Wortmarke. Das „gate" traegt das Marken-Tuerkis – so schreibt die Delegate
   Group ihren Namen, und so steht er auch in der Academy. Bewusst KEIN
   Bilddatei-Logo: Text skaliert verlustfrei, faerbt sich mit dem Thema und
   braucht keinen zweiten Netzzugriff. */
.marke { display: flex; align-items: center; gap: 12px; min-width: 0; flex: none; }
.wortmarke {
  font-size: 21px; font-weight: 700; letter-spacing: -0.045em;
  color: var(--ink-700); line-height: 1; white-space: nowrap;
}
.wortmarke .gate { color: var(--brand-400); }
.marke-trenner { width: 1px; height: 22px; background: var(--ink-200); flex: none; }
/* Der Produktname ist die zweite Stimme, nicht die erste. */
.kopf h1 {
  font-size: 15px; font-weight: 550; margin: 0;
  color: var(--ink-600); letter-spacing: -0.01em; white-space: nowrap;
}

/* ---- Navigation: Pillen mit Symbol, wie in der Academy ---- */
/* KEIN `overflow-x: auto` hier – das war am 2026-10-07 kurzzeitig als Netz gegen
   zu enge Fenster drin und hat das EINSTELLUNGSMENUE unbrauchbar gemacht:
   `overflow` macht aus `.tabs` einen Scrollbereich, und der schneidet jedes
   absolut gesetzte Kind ab, das darueber hinausragt. Die Klappliste
   (`.tab-menu-list`, `position: absolute`, oeffnet UNTERHALB der Leiste) war
   damit unsichtbar – im DOM vorhanden, auf dem Schirm weg.
   Gegen enge Fenster schuetzen die Media-Abfragen weiter unten, nicht Scrollen. */
.tabs { display: flex; align-items: center; gap: 2px; min-width: 0; }
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: transparent;
  color: var(--ink-600);              /* 7,3:1 auf Weiss */
  padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 520;
  line-height: 1.2; white-space: nowrap;
  transition: color .15s, background .15s;
}
.tab:hover:not(.active) { color: var(--ink-900); background: var(--ink-50); }
/* Ruhige Markenflaeche statt Unterstrich: brand-700 auf brand-50 = 4,9:1. */
.tab.active { color: var(--accent); background: var(--brand-50); font-weight: 600; }
.tab-icon { width: 16px; height: 16px; flex: none; opacity: .8; }
.tab.active .tab-icon { opacity: 1; }

/* ---- Benutzermenue ---- */
.benutzer-menue { position: relative; flex: none; }
/* `list-style: none` UND die beiden Pseudo-Elemente: Safari zeichnet das
   Dreieck ueber `::-webkit-details-marker`, die uebrigen ueber `::marker`. */
.benutzer-menue > summary {
  list-style: none; display: flex; align-items: center;
  padding: 3px; border-radius: 999px; cursor: pointer;
}
.benutzer-menue > summary::-webkit-details-marker { display: none; }
.benutzer-menue > summary::marker { content: ""; }
.benutzer-menue > summary:hover { background: var(--ink-50); }
.benutzer-menue > summary:focus-visible { box-shadow: var(--ring); }
.menue-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 256px;
  background: var(--card); border: 1px solid var(--ink-100);
  border-radius: var(--r-lg); box-shadow: var(--schatten-lg); padding: 8px;
}
.menue-wer { padding: 10px 12px 12px; border-bottom: 1px solid var(--ink-100); margin-bottom: 6px; }
.menue-wer strong { display: block; color: var(--ink-900); font-size: 14px; }
.menue-wer .muted { font-size: 12.5px; }
.menue-sprache {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 12px 10px; font-size: 13px; color: var(--ink-600);
}
/* `button` setzt global `color: #fff` – ein heller Eintrag MUSS seine
   Schriftfarbe mitbringen, sonst steht Weiss auf Weiss (siehe CLAUDE.md §4). */
.menue-eintrag {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: var(--r-sm); border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--ink-700);
  cursor: pointer; text-align: left;
}
.menue-eintrag:hover { background: var(--ink-50); color: var(--ink-900); }

/* Sprachumschalter (i18n) – sitzt im Benutzermenue. */
.lang-switch { display: inline-flex; padding: 3px; gap: 2px; background: var(--ink-100); border-radius: 9px; }
.lang-btn {
  border: none; background: transparent; color: var(--ink-600);
  font-size: 12px; font-weight: 600; padding: 4px 10px; cursor: pointer;
  border-radius: 6px; font-family: inherit; transition: background .15s, color .15s;
}
.lang-btn:hover { color: var(--ink-900); }
/* Die gewaehlte Sprache wird durch eine WEISSE Flaeche hervorgehoben, nicht
   durch die Markenfarbe – Tuerkis ist im Kopf schon durch die Wortmarke und
   den aktiven Reiter gesetzt. */
.lang-btn.active { background: var(--card); color: var(--ink-900); box-shadow: var(--schatten-sm); }

/* ---- Enge Fenster. Reihenfolge wie bei der Academy: zuerst faellt der
   Produktname weg, dann die Beschriftungen der Reiter. Die Symbole bleiben,
   und jeder Reiter traegt `data-i18n-title` – ohne Beschriftung ist der
   Tooltip die einzige Auskunft darueber, was er bedeutet. ---- */
@media (max-width: 1180px) { .kopf h1, .marke-trenner { display: none; } }
/* 1040 statt 980: Gemessen (2026-10-07, deutsche Beschriftungen) braucht die
   Kopfzeile 1022px, bevor die Navigation anstoesst. Bei 980 waere dazwischen ein
   Streifen geblieben, in dem sie schon klemmt, aber noch Text traegt. */
@media (max-width: 1040px) {
  .tab span[data-i18n] { display: none; }
  .tab { padding: 8px 9px; }
  .kopf { gap: 10px; padding: 0 14px; }
}

.panel { display: none; padding: 24px; max-width: 1760px; }
.panel.active { display: block; }

h2 { font-size: 17px; margin: 0 0 12px; font-weight: 650; }
h3 { font-size: 14px; margin: 24px 0 8px; font-weight: 650; letter-spacing: -0.005em; }
.hint { color: var(--muted); margin: 0 0 14px; }
.muted { color: var(--muted); font-weight: 400; }
code { background: var(--ink-100); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }

form { display: flex; gap: 10px; align-items: center; }
/* `color: #fff` ist hier GLOBAL gesetzt. Ein eigener Knopfstil mit hellem
   Hintergrund MUSS deshalb seine Schriftfarbe mitbringen (`color: var(--ink)`),
   sonst steht Weiss auf Weiss – genau so waren die Kategorie-Chips der
   Prüfungen unsichtbar. */
button {
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 560;
  font-family: inherit;         /* sonst zeichnet der Browser seine eigene Schrift */
  line-height: 1.2;
  transition: background .15s, box-shadow .15s, transform .05s;
}
/* Abdunkeln statt Umfärben. Ein globales `background: <akzent>` beim Überfahren
   hätte JEDEN hellen Knopf eingefärbt – und die Helle-Knopf-Varianten bringen
   ihre eigene, dunkle Schriftfarbe mit (.ghost, .schlicht, .danger, die Chips
   der Prüfungen, die Knöpfe in .bk-hint und .pager). Die hätten dann dunkel auf
   dunkel gestanden, also dieselbe Falle wie Weiss auf Weiss, nur andersherum.
   `brightness` wirkt auf dem vorhandenen Farbton und braucht keine Ausnahmeliste,
   die beim nächsten neuen Knopf wieder vergessen wird. */
button:hover:not(:disabled) { filter: brightness(.94); }
/* Der Knopf gibt beim Drücken um 1px nach. Winzig, aber es ist der Unterschied
   zwischen „angeklickt" und „passiert gerade nichts". */
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: default; }

.report {
  margin-top: 16px;
  border: 1px solid var(--ink-100);
  border-radius: var(--r);
  box-shadow: var(--schatten-sm);
  background: var(--card);
  padding: 14px 16px;
}
.report.ok { border-left: 4px solid var(--ok); }
.report.err { border-left: 4px solid var(--err); }
.report.warn { border-left: 4px solid var(--warn); }

/* EZB-Abruf (Punkt 4) */
.ecb-fetch { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
#ecb-proposals { margin-bottom: 8px; }
.report .stats { display: flex; gap: 24px; margin: 8px 0; flex-wrap: wrap; }
.report .stats b { font-size: 18px; display: block; }
.report .warn { color: var(--warn); }

table { border-collapse: collapse; width: 100%; background: var(--card); }
.table-wrap { overflow-x: auto; border: 1px solid var(--ink-100); border-radius: var(--r); background: var(--card); box-shadow: var(--schatten-sm); }
/* `white-space: nowrap` ist für die Zahlenspalten gesetzt. Ein aufklappbarer
   Bereich INNERHALB einer Zelle enthält aber Fliesstext und muss es zurücknehmen
   (siehe .alias-panel, tr.liq-detail). */
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--ink-100); white-space: nowrap; }
th {
  background: var(--card); position: sticky; top: 0; z-index: 1;
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-500); padding-top: 11px; padding-bottom: 11px;
  /* Durchgezogene Trennlinie statt grauer Fläche: Die Überschriftenzeile soll
     die Tabelle gliedern, nicht als eigener Balken um Aufmerksamkeit werben. */
  box-shadow: inset 0 -1px 0 var(--ink-200);
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: var(--ink-50); color: var(--ink-800); }
th.sortable.active { color: var(--accent); }
th.sortable .sort-arrow { font-size: 10px; opacity: .5; }
th.sortable.active .sort-arrow { opacity: 1; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.neg { color: var(--err); }
tr:hover td { background: var(--ink-50); }
tfoot .sum-row td { background: var(--ink-50); font-weight: 650; color: var(--ink-900); border-top: 1px solid var(--ink-300); position: sticky; bottom: 0; }
tfoot .sum-row td.num { font-variant-numeric: tabular-nums; }

.pill { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); }
.pill.Recurring { background: #e8f6ef; color: var(--ok); }
.pill.One-Off { background: var(--accent-soft); color: var(--accent); }
.pill.Other { background: #fff5e6; color: var(--warn); }

input[type="text"], input[type="number"] {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  width: 100%;
}
.saved { color: var(--ok); font-size: 12px; }
.pager { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.pager button { background: var(--ink-100); color: var(--ink); }

/* Abgrenzung */
tr.clickable { cursor: pointer; }
.accr-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.accr-none { color: var(--muted); }

/* Intercompany-Kennzeichnung (dezent) */
.ic-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: #efe7fb; color: #6b46c1; border: 1px solid #d7c4f2; letter-spacing: .04em; }
tr.is-ic td { background: #faf8fe; }
td.ic-cell { white-space: nowrap; }
button.ghost { background: var(--ink-100); color: var(--ink); }
button.danger { background: #fdeeed; color: var(--err); }
.icon-btn { background: transparent; color: var(--muted); font-size: 22px; line-height: 1; padding: 0 6px; }

.overlay { position: fixed; inset: 0; background: rgba(28, 31, 34, .5); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50; }
.overlay[hidden] { display: none; }
.modal { background: var(--card); border-radius: var(--r-lg); width: 100%; max-width: 560px; box-shadow: var(--schatten-lg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; }
.modal-booking { padding: 14px 20px; background: var(--ink-50); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink); }
.modal-booking b { font-weight: 600; }
.modal-booking .amount { font-variant-numeric: tabular-nums; }
.modal-booking > div { margin-bottom: 8px; } /* Abstand zwischen den Datenzeilen */
.modal-booking .bem { color: var(--ink); } /* Bemerkung dunkel – wie Buchungsdatum */
/* generischer Hinweis: deutlich abgesetzt, heller, kleiner – vom Bemerkungstext klar unterscheidbar */
.modal-booking .abw-hinweis { margin-top: 18px; margin-bottom: 0; color: var(--ink-400); font-size: 12px; font-style: italic; }
/* Umsatzart-Override im Dialog (Punkt 3) */
.modal-type { padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 13px; }
.modal-type .mt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-type .mt-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.modal-type .mt-current { flex: 1; }
.modal-type .ovr-from { color: var(--muted); text-decoration: line-through; }
.modal-type .mt-editor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.modal-type .mt-editor[hidden] { display: none; }
.modal-type .mt-editor select { min-width: 260px; }
/* Die Kundensuche im Umbuchen-Dialog: Aussehen aus der gemeinsamen Feldregel,
   hier nur die Breite. */
#umb-suche { width: 200px; }
#cust-select { min-width: 260px; max-width: 320px; }
.modal-type .mt-hint { flex-basis: 100%; font-size: 12px; }
.ovr-icon { color: var(--accent); font-size: 12px; cursor: help; }
.modal-fields { display: flex; gap: 20px; padding: 18px 20px 8px; }
.field { flex: 1; }
.field > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; }
.month-year { display: flex; gap: 8px; }
.month-year select { flex: 2; }
.month-year input { flex: 1; }
/* Aussehen kommt aus der gemeinsamen Feldregel oben - hier nur das Verhaeltnis. */
.quick { display: flex; align-items: center; gap: 8px; padding: 4px 20px 14px; flex-wrap: wrap; }
.quick button { font-size: 13px; padding: 6px 12px; }
#preview-area { padding: 4px 20px 8px; }
#preview-area h3 { margin: 8px 0; }
#preview-content { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
#preview-content table { width: 100%; }
#preview-content .booking-month td { background: #fff5e6; }
#preview-content .zero { color: var(--muted); }
.preview-note { padding: 8px 12px; font-size: 13px; }
.preview-note.err { color: var(--err); }
.preview-sum { padding: 8px 12px; border-top: 1px solid var(--line); font-weight: 600; display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.modal-actions { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); }
.modal-actions .spacer { flex: 1; }

/* Dashboard */
.filters { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; background: var(--card); border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 18px; box-shadow: var(--schatten-sm); }
.filter > label { display: block; font-size: 11px; font-weight: 650; color: var(--ink-500); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
/* Ein Kontrollkästchen ist eine Option, keine Feldbeschriftung: `.filter > label`
   ist spezifischer als `.chk` und machte den Text sonst grau und GROSSGESCHRIEBEN
   ("PLAN EINBEZIEHEN"), also genau wie die Überschrift darüber. */
.filter > label.chk {
  display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink);
  text-transform: none; letter-spacing: normal; margin-bottom: 0; height: var(--feld-h); padding: 0;
}
/* Ein Filter, der in der gewählten Region nichts bewirken kann (Intercompany
   nur EU, EUR-Umrechnung nur US/AUS). BEWUSST gedämpft statt ausgeblendet: Ein
   Element, das je nach Region kommt und geht, lässt die Filterleiste springen
   und ist beim nächsten Mal nicht wiederzufinden. Gesperrt und blass erklärt
   sich von selbst; den Grund nennt der Tooltip am Kästchen. */
.filter.nicht-anwendbar { opacity: .45; }
.filter.nicht-anwendbar label.chk { cursor: not-allowed; }

/* ====================================================================
   EINGABEFELDER – eine Regel für das ganze Tool.
   Jede neue Feldart und jeder neue Bereich gehört HIER hinein, nicht in eine
   eigene Regel daneben. Dreimal ist genau das schiefgegangen und jedes Mal
   gleich: ein Feldtyp fehlte in der Aufzählung, der Browser zeichnete sein
   eigenes Feld, und es fiel neben den übrigen sichtbar ab (anderer Rahmen,
   andere Schrift, geringere Höhe) – `input[type="month"]` im Buchungen-Tab,
   `input[type="date"]` im Liquiditäts-Tab, `select` im Kunden-Detailbereich.

   2026-10: Dieselbe Sache von der anderen Seite – sieben Stellen hatten eine
   EIGENE, fast gleiche Regel daneben (Monat/Jahr im Abgrenzungs-Dialog, die
   Kursfelder, das Mapping-Auswahlfeld, die Plan-Zuordnung, die Alias-Felder,
   die Kundenauswahl des Dashboards). „Fast gleich" heisst: 6px statt 8px Radius,
   13px statt 14px Schrift, keine gemeinsame Höhe. Einzeln fällt das nicht auf,
   nebeneinander schon. Sie stehen jetzt alle HIER; ihre Einzelregeln tragen nur
   noch, was wirklich nur dort gilt (Breite, Höchstbreite).
   ==================================================================== */
.filter select,
.filter input[type="number"],
.filter input[type="month"],
.filter input[type="date"],
.filter input[type="search"],
.filter input[type="text"],
.filter input[type="password"],
select.user-rolle,
.cust-felder select,
.cust-felder input,
#segments-table input[type="text"],
.login-karte input[type="text"],
.login-karte input[type="password"],
.month-year select,
.month-year input,
#umb-suche,
#cust-select,
#type-select,
#map-add-label,
.alias-add input,
.alias-add select,
.fx-form select,
.fx-form input[type="number"],
#map-table td select,
#fc-result select.fc-dec,
#db-customer,
.mehrfach-knopf,
#import-form select {
  border: 1px solid var(--ink-200); border-radius: var(--r-sm); padding: 7px 10px;
  font-size: 14px; font-family: inherit; color: var(--ink-900); background: #fff;
  line-height: 1.2; height: var(--feld-h); text-transform: none; letter-spacing: normal;
  transition: border-color .15s, box-shadow .15s;
}
/* Die Höhe steht als Variable in der Regel, damit ein ANDERER Zusammenhang sie
   ändern kann, ohne eine zweite Feldregel danebenzustellen (genau der Fehler,
   der hier dreimal passiert ist). Bisher gibt es eine solche Abweichung: die
   Anmeldeseite, wo zwei Felder allein auf einer Seite stehen und 35px verloren
   wirken. */
:root { --feld-h: 35px; }
.login-seite { --feld-h: 44px; }
.filter select:focus,
.filter input:focus,
.cust-felder select:focus,
.cust-felder input:focus,
select.user-rolle:focus,
#segments-table input[type="text"]:focus,
.login-karte input:focus,
.month-year select:focus,
.month-year input:focus,
#umb-suche:focus,
#cust-select:focus,
#type-select:focus,
#map-add-label:focus,
.alias-add input:focus,
.alias-add select:focus,
.fx-form select:focus,
.fx-form input:focus,
#map-table td select:focus,
#fc-result select.fc-dec:focus,
#db-customer:focus {
  outline: none; border-color: var(--brand-400); box-shadow: var(--ring);
}
.filter .month-year input { width: 80px; }
/* Knöpfe in der Filterleiste auf dieselbe Höhe wie die Eingabefelder – sonst
   stehen sie um 3px versetzt auf der Grundlinie. */
.filter button { height: var(--feld-h); padding-top: 0; padding-bottom: 0; }
/* Der Kalender-Knopf von Monats- und Datumsfeld ist sonst pechschwarz und
   dominiert das Feld. Datum und Monat werden hier IMMER gemeinsam behandelt –
   das Datumsfeld fehlte zunächst und zeichnete sich als Browser-Standardfeld
   neben den übrigen (andere Höhe, andere Schrift, anderer Rahmen). */
.filter input[type="month"]::-webkit-calendar-picker-indicator,
.filter input[type="date"]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
.filter input[type="month"]:hover::-webkit-calendar-picker-indicator,
.filter input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .8; }
.filter input[type="month"]:focus, .filter input[type="date"]:focus,
.filter input[type="search"]:focus,
.filter input[type="text"]:focus, .filter select:focus {
  outline: none; border-color: var(--brand-400); box-shadow: var(--ring);
}

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { background: var(--card); border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: 18px 20px; border-left: 3px solid var(--accent); box-shadow: var(--schatten-sm); }
.kpi .label { font-size: 11px; font-weight: 650; color: var(--ink-500); text-transform: uppercase; letter-spacing: .05em; }
.kpi .value { font-size: 27px; font-weight: 680; margin-top: 7px; color: var(--ink-900); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi.mrr { border-left-color: var(--ok); }
.kpi.arr { border-left-color: #6f54c1; }
.kpi.total { border-left-color: var(--accent); }
.kpi.cust { border-left-color: var(--warn); }

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.charts .card { background: var(--card); border: 1px solid var(--ink-100); border-radius: var(--r-lg); padding: 18px 20px; min-width: 0; box-shadow: var(--schatten-sm); }
.charts .card.wide { grid-column: 1 / -1; }
.charts .card h3 { margin: 0 0 12px; }
.charts canvas { max-height: 320px; }
#db-customer { width: 360px; max-width: 100%; margin-bottom: 12px; }
@media (max-width: 760px) { .charts { grid-template-columns: 1fr; } }

/* Filterleiste im Buchungen-Tab */
#bk-type, #bk-mode, #bk-region { min-width: 180px; }
.bk-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--accent-line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.bk-hint[hidden] { display: none; }
.bk-hint .txt { font-size: 14px; }
.bk-hint .txt b { font-weight: 600; }
.bk-hint button { background: #fff; color: var(--accent); border: 1px solid var(--accent-line); padding: 5px 12px; }
.chk { display: flex; align-items: center; gap: 6px; font-size: 14px; padding: 7px 0; }
.chk input { width: 16px; height: 16px; }
/* Buchung mit erkanntem Zeitraum, aber noch nicht abgegrenzt -> Handlungsbedarf */
tr.needs-accrual td { background: #fff5e6; }
tr.needs-accrual:hover td { background: #ffecc9; }
/* Zwei Kategorien: (A) Vorschlag = blau/neutral, (B) Warnung = rot/orange */
tr.cat-a td { background: var(--accent-soft); }
tr.cat-a:hover td { background: var(--brand-100); }
tr.cat-b td { background: #fdeeed; }
tr.cat-b:hover td { background: #f9dedb; }
td.bk-cb, th.bk-cb { width: 34px; text-align: center; }
td.bk-cb.warn { color: var(--err); cursor: help; font-size: 15px; }
.bulk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.bulk-bar[hidden] { display: none; }
.bulk-bar .spacer { flex: 1; }
.bulk-bar button { padding: 7px 14px; }
.bulk-bar .cancel { background: var(--ink-100); color: var(--ink); }
.bulk-bar .summary { font-size: 14px; }
.bulk-legend { font-size: 12px; color: var(--muted); display: flex; gap: 14px; align-items: center; }
.bulk-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.detect-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #ffecc9; color: var(--warn); border: 1px solid #e8c98a; white-space: nowrap; }
.detect-badge.late-badge { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } /* Monatskorrektur (Kategorie A) */
.detect-badge.warn-badge { background: #fdeeed; color: var(--err); border-color: #f4cdca; }   /* Warnung (Kategorie B) */
.detect-note { margin-top: 6px; padding: 8px 10px; background: #fff5e6; border: 1px solid #e8c98a; border-radius: 6px; font-size: 13px; color: #7a5200; }

/* Plan-Umsätze (Forecast) */
/* Zeilenmarkierung + Text-Badge: Farbe allein wäre bei Farbsehschwäche unsichtbar. */
tr.forecast td { background: var(--brand-50); }
tr.forecast:hover td { background: var(--brand-100); }
.plan-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--c-forecast); color: var(--brand-900); border: 1px dashed var(--accent); white-space: nowrap; }
.fc-note { border: 1px solid var(--accent-line); background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
.kpi .sub.plan { color: var(--accent); }
h2.fc-head { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 20px; }
#fc-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.fc-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; margin-top: 12px; }
.fc-cols h4 { margin: 0 0 8px; }
.fc-auto { color: var(--ok); }
tr.fc-open td { background: #fff5e6; }
#fc-result select.fc-dec { max-width: 320px; }
.fc-replace .chk { margin-top: 6px; }
.fc-actions { display: flex; gap: 12px; align-items: center; margin: 14px 0; }
@media (max-width: 900px) { .fc-cols { grid-template-columns: 1fr; } }

/* Umsatzart-Mapping */
.origin-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); }
.origin-badge.seed { background: var(--ink-100); color: var(--muted); }
.origin-badge.manual { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
#map-table td select { max-width: 340px; }
#map-table tr.inactive td { opacity: 0.5; }
.map-assign { background: #fff; color: var(--accent); border: 1px solid var(--accent-line); padding: 4px 10px; font-size: 12px; }

/* Wechselkurse */
.fx-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }

.fx-form input[type="number"] { width: 130px; }
#fx-inverse { min-width: 160px; }
.fx-missing { border: 1px solid #f3ddb3; background: #fff5e6; border-left: 4px solid var(--warn); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.fx-missing.none { border-color: var(--line); background: #e8f6ef; border-left-color: var(--ok); }
.fx-missing h3 { margin: 0 0 8px; }
.fx-missing .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #fff; border: 1px solid #e8c98a; cursor: pointer; }
.fx-chip:hover { background: #ffecc9; }

/* Belegdatum korrigiert (date_corrections): dezenter Text-Marker neben dem Datum.
   Bewusst neutral-grau und KEIN neuer Farbton – Gelb/Rot/Violett/Blau sind für
   Abgrenzung, Warnung, Intercompany und Plan belegt. Der Text trägt die Aussage,
   die Farbe ist nur Beiwerk (Farbsehschwäche). */
.korr-badge {
  font-size: .72em;
  padding: .05em .35em;
  border: 1px dashed var(--border, var(--ink-300));
  border-radius: 3px;
  color: var(--muted, var(--muted));
  white-space: nowrap;
  cursor: help;
}

/* Kunden-Aliase: aufklappbarer Bereich unter der Kundenzeile.
   Bewusst keine eigene Signalfarbe – es ist Stammdatenpflege, keine Warnung. */
/* Breite begrenzt: Die Kundentabelle ist ~1750px breit, ohne max-width zoegen
   die beiden Bloecke ueber die ganze Zeile auseinander und "Zusammenfuehren"
   landete weit rechts vom Alias-Block. (position:sticky waere hier verlockend,
   funktioniert in einer Tabellenzelle aber nur halb – bewusst weggelassen.) */
/* Drei gleich breite Spalten statt Flex-Umbruch: So bleiben die Bloecke auf einer
   Hoehe und die Eingabefelder bekommen Platz (vorher 171px, Platzhalter abgeschnitten). */
/* `th, td` setzt global `white-space: nowrap` (fuer die Zahlenspalten der Tabellen).
   Im aufgeklappten Bereich stehen aber Fliesstexte – ohne Ruecknahme laufen die
   Erklaerungen als eine Zeile ueber alle drei Spalten hinaus. */
.alias-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 22px 32px; padding: 14px 4px 6px; max-width: 1400px; align-items: start;
  white-space: normal; }
.alias-block { min-width: 0; }
.alias-block h4 { margin: 0 0 8px; font-size: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.alias-block .hint { margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
.alias-list { list-style: none; margin: 0 0 10px; padding: 0; }
.alias-list li { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.alias-list code { background: var(--ink-50); padding: 1px 5px; border-radius: 3px; }
.badge-soft { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--ink-100); color: var(--muted); border: 1px solid var(--line); margin-left: 4px; }
.link-btn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0 0 0 6px; font-size: 12px; }
.link-btn:hover { color: var(--err); }
/* Untereinander statt nebeneinander: In einer ~400px breiten Spalte waeren zwei
   Felder plus Knopf immer zu schmal, die Platzhalter wurden abgeschnitten. */
.alias-add { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.alias-add input, .alias-add select { width: 100%; }
.alias-add button { align-self: flex-start; }
.alias-msg { flex-basis: 100%; font-size: 12px; white-space: pre-line; }
tr.alias-row > td { background: var(--ink-50); }

/* Prüfungen (Abweichungen). Die Schwere trägt IMMER auch Text ("Fehler"/"prüfen"/
   "Hinweis") – Farbe allein wäre bei Farbsehschwäche unsichtbar, wie beim
   Plan-Badge und beim Korrektur-Marker. */
.chk-counts { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.chk-count { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); }
.chk-group { margin: 18px 0; }
.chk-group h3 { margin: 0 0 2px; font-size: 15px; }
.chk-group .hint { margin: 0 0 10px; font-size: 12px; }
.chk-item { border: 1px solid var(--ink-100); border-left-width: 3px; border-radius: var(--r); padding: 12px 16px; margin-bottom: 9px; background: #fff; box-shadow: var(--schatten-sm); }
.chk-item.is-acked { opacity: .6; }
.chk-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.chk-sev { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); }
.chk-region { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.chk-titel { font-weight: 600; }
.chk-detail { color: var(--muted); font-size: 13px; margin: 4px 0 8px; }
.chk-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chk-acked { font-size: 12px; color: var(--muted); }
.chk-err { color: var(--err); font-size: 12px; margin-top: 6px; }
.chk-item.sev-fehler  { border-left-color: var(--err); }
.chk-item.sev-pruefen { border-left-color: var(--warn); }
.chk-item.sev-hinweis { border-left-color: var(--line); }
.chk-count.sev-fehler  { border-color: #f4cdca; background: #fdeeed; }
.chk-count.sev-pruefen { border-color: #f3ddb3; background: #fff5e6; }
.chk-count.sev-hinweis { background: var(--ink-50); }
.chk-item.sev-fehler .chk-sev  { border-color: #f4cdca; background: #fdeeed; color: var(--err); }
.chk-item.sev-pruefen .chk-sev { border-color: #f3ddb3; background: #fff5e6; }
.report.warn-box { border-left: 4px solid var(--warn); }
/* Zähler am Tab: fällt auf, ohne den Tab zu öffnen. */
.tab-badge { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff; font-size: 11px; font-weight: 600; line-height: 17px; text-align: center; }

/* Kategorie-Filter und Sammelquittierung der Prüfungen. */
/* Kategorie-Chips sitzen in der Filterkarte (eigenes Feld "Kategorie"), daher
   kein eigener Aussenabstand mehr. */
.chk-filter { display: flex; flex-wrap: wrap; gap: 6px; }
/* Ein Filterfeld, das die ganze Zeilenbreite braucht (die Chips umbrechen sonst
   in eine schmale Spalte). */
.filter-wide { flex: 1 1 100%; }
/* Wächst mit, erzwingt aber KEINEN Zeilenumbruch – anders als .filter-wide, das
   eine eigene Zeile belegt (dort gewollt: Kategorie-Chips, Mail-Textfeld). Die
   Kundensuche gehört neben Region und Ansicht, nicht darüber. */
.filter-grow { flex: 0 1 320px; min-width: 190px; }
.filter-grow > input, .filter-grow > select { width: 100%; }
/* `button` setzt global `color: #fff` – ohne eigene Schriftfarbe wäre der Chip
   weiß auf weiß und damit unsichtbar. */
.chk-chip { font-size: 12px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.chk-chip:hover { background: var(--ink-50); }
.chk-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Aktionsleiste, kein Filter – deshalb dieselbe Optik wie die Bulk-Leiste im
   Buchungen-Tab (.bulk-bar) statt der grauen Filterkarte. */
.chk-bulk { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--accent-line); border-radius: 8px; background: var(--accent-soft); }
.chk-pick { margin-right: 2px; }
/* Zahlen zum Befund: schmal, damit sie die Liste nicht auseinanderzieht. */
.chk-table { margin: 6px 0 8px; max-width: 760px; }
.chk-table table { font-size: 12px; }
.chk-table td, .chk-table th { padding: 3px 8px; }
.chk-table tr.chk-sum td { font-weight: 600; border-top: 1px solid var(--line); }

/* Detailfilter im Buchungen-Tab: abgesetzter Block unter der Standardzeile, damit
   erkennbar bleibt, dass diese Filter zusätzlich wirken. */
.filters-detail { border-left: 3px solid var(--accent); background: var(--ink-50); margin-top: -6px; }
/* Nur die Feldbeschriftungen dezent – NICHT den Text am Kontrollkästchen, der
   sähe sonst deaktiviert aus. */
.filters-detail .filter > label:not(.chk) { color: var(--muted); }
.range { display: flex; gap: 6px; }
.range input { width: 100px; }
/* `button` setzt global color:#fff – .ghost bringt seine eigene Schriftfarbe mit,
   der Zähler daneben muss lesbar bleiben. */
#bk-more { display: inline-flex; align-items: center; gap: 2px; }
#bk-more.has-filter { border: 1px solid var(--accent); color: var(--accent); }

/* Kunden-Auswahl im Buchungen-Tab: ein Feld mit aufklappender Trefferliste. */
.combo { position: relative; display: inline-block; }
/* Breite und rechter Innenabstand fuer das x; Hoehe/Rahmen kommen aus der
   gemeinsamen Regel fuer .filter-Eingabefelder. */
.combo input[type="text"] { width: 230px; padding-right: 26px; }
.combo-clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1;
  padding: 0 6px; cursor: pointer; }
.combo-clear:hover { color: var(--err); }
/* Breiter als das Eingabefeld: Kundennamen wie "Northern Adelaide Local Health
   Network, Lyell McEwin Hospital" wären sonst schon in der Auswahl abgeschnitten. */
.combo-list { position: absolute; z-index: 30; left: 0; min-width: 380px; top: 100%; margin: 2px 0 0;
  padding: 4px 0; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.combo-list li { padding: 5px 10px; font-size: 13px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.combo-list li:hover, .combo-list li.hl { background: var(--accent-soft); }
.combo-list li.combo-more { color: var(--muted); font-style: italic; cursor: default; }
.combo-list li.combo-more:hover { background: none; }
/* Native Monatsauswahl im Zeitraum-Filter: ein Feld je Grenze statt Monat + Jahr. */
#bk-from, #bk-to { width: 150px; }

/* Regionsauswahl der Prüfungen auf dieselbe Mindestbreite wie im Buchungen-Tab. */
#chk-region { min-width: 160px; }

/* Kundenliste: die Zeile selbst klappt den Detailbereich auf. */
tr.cust-row { cursor: pointer; }
tr.cust-row:hover { background: var(--ink-50); }
tr.cust-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
td.cust-caret { width: 24px; color: var(--muted); text-align: center; }
td.cust-marker { white-space: nowrap; }
/* „ignoriert“: TEXT, nicht nur Farbe – wie beim Plan- und Korrektur-Marker,
   damit der Hinweis bei Farbsehschwäche nicht verschwindet. */
.ign-badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px;
  background: var(--ink-100); color: var(--muted); border: 1px solid var(--ink-300); letter-spacing: .04em; }
tr.is-ign td:not(.cust-marker) { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
/* Stammdaten im aufgeklappten Bereich. */
.cust-felder { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 4px; }
.cust-felder label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; }
/* Aussehen kommt aus der gemeinsamen Feldregel weiter oben – hier nur die Breite.
   Die Auswahlliste braucht Platz für den längsten Segmentnamen („Global Caterer"). */
.cust-felder select.seg { width: 220px; }
.cust-save { display: flex; align-items: center; gap: 8px; height: var(--feld-h); }
/* Marktsegment in der Nur-Lese-Fassung des Kundendetails: Beschriftung wie bei
   einem Feld, der Wert daneben als Text. Bewusst KEIN deaktiviertes <select> –
   ein ausgegrautes Auswahlfeld sieht nach „kaputt" aus, Text nach „so ist es". */
.cust-nurlesen { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cust-nurlesen-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cust-nurlesen-wert { font-size: 14px; color: var(--ink-900); font-weight: 550; }

/* Nur die Erklaerung UNTER einem Kontrollkaestchen wird eingerueckt – sonst zoege
   die Regel auch die Blockhinweise ein (der Merge-Hinweis stand dadurch versetzt). */
.alias-block > .chk { margin-top: 10px; }
.alias-block > .chk + .hint { margin: 2px 0 6px 24px; font-size: 12px; }

/* Liquidität: Eingabefeld für den Mailtext, Deltas, Verlauf. */
#liq-text { width: 100%; min-width: 420px; border: 1px solid var(--ink-200); border-radius: var(--r-sm);
  padding: 8px 10px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px;
  line-height: 1.45; color: var(--ink); resize: vertical; }
#liq-text:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
/* Richtung IMMER auch als Pfeil/Vorzeichen, nicht nur als Farbe. */
.liq-delta { font-size: 12px; font-weight: 600; white-space: nowrap; }
.liq-delta.auf { color: var(--ok); }
.liq-delta.ab { color: var(--err); }
tr.liq-weg td { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
/* Mehrere Mails auf einmal: eine Uebersichtszeile je Woche, Einzelposten aufklappbar. */
tr.liq-row { cursor: pointer; }
tr.liq-row:hover td { background: var(--ink-50); }
tr.liq-detail > td { background: var(--ink-50); padding: 10px 12px; white-space: normal; }
/* Ein Hinweis darf nicht nur farbig sein – die Zahl davor sagt, worum es geht. */
.badge-warn { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: #fff5e6;
  color: #8a5300; border: 1px solid #f3ddb3; margin-left: 4px; white-space: nowrap; }
#liq-current .kpi .sub { font-size: 12px; margin-top: 4px; min-height: 16px; }
#liq-history h3 { margin: 18px 0 8px; font-size: 15px; }
/* Hinweise zu einzelnen Wochen ueber der Uebersichtstabelle – nach Stichtag gruppiert. */
.liq-hinweis { margin: 6px 0; padding-left: 10px; border-left: 3px solid #f3ddb3; }
.liq-hinweis > strong { font-size: 12px; color: var(--muted); }
/* Veränderung zur Vorwoche unter dem Wert – kleiner, damit die Zahl die Zeile führt. */
td.num .liq-delta { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; }
/* Sieben Kacheln statt fünf: bei 26px brach „1.382.563,21" in die zweite Zeile. */
#liq-current .kpi .value { font-size: 22px; }
/* Kunden-Tabelle: Ohne Breitenvorgabe bekommt die Namensspalte den gesamten
   Überschuss (bei 1280px waren es 600 von 1215) und die Zahlen rutschen an den
   rechten Rand – für einen schnellen Überblick genau das Falsche. Die beiden
   Betragsspalten bekommen deshalb eine feste Breite, die Namensspalte den Rest. */
#customers-table th:nth-child(4), #customers-table th:nth-child(5) { width: 170px; }
#customers-table th:nth-child(2) { width: 38%; }
#customers-table th:nth-child(3) { width: 90px; }

/* Einstellungen-Klappmenü in der Reiterleiste. Die Seiten darin (Wechselkurse,
   Umsatzart-Mapping, Marktsegmente) werden selten und gezielt gebraucht – als
   gleichwertige Reiter standen sie dauerhaft neben den täglich genutzten. */
.tab-menu { position: relative; display: inline-block; }
.tab-menu-list {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 210px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; display: flex; flex-direction: column;
}
.tab-menu-item {
  background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer;
  padding: 8px 12px; border-radius: 6px; font: inherit; font-size: 14px; white-space: nowrap;
}
.tab-menu-item:hover { background: var(--ink-100); }
/* Segment-Verwaltung: schmale Spalten für Zahl, Reihenfolge und Aktionen, damit
   das Namensfeld die Breite bekommt. */
#segments-table td input.seg-name { width: 100%; max-width: 320px; }
#segments-table th:nth-child(2) { width: 110px; }
#segments-table th:nth-child(3) { width: 90px; }
.seg-move .link-btn, .seg-aktionen .link-btn { padding: 0 6px; }
.seg-move .link-btn[disabled] { opacity: .3; cursor: default; }
.seg-aktionen { white-space: nowrap; }

/* Dateifelder: Der Browser zeichnet "Durchsuchen…" in seinem eigenen Stil und
   setzt weder Hoehe noch Rahmen des Tools. Es gibt genau drei im Programm
   (Roh-Import, Plan-Import, Kurs-CSV) – und sie sahen an jeder Stelle anders aus,
   weil jede ihre eigene Regel hatte. Deshalb EINE Regel fuer alle, inklusive des
   Knopfes selbst (::file-selector-button). */
input[type="file"] {
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  font-size: 14px; font-family: inherit; color: var(--ink);
  height: var(--feld-h); line-height: calc(var(--feld-h) - 2px); padding: 0 10px 0 0; max-width: 460px;
}
input[type="file"]::file-selector-button {
  height: 33px; margin-right: 10px; padding: 0 12px; border: 0;
  border-right: 1px solid var(--line); border-radius: 6px 0 0 6px;
  background: var(--ink-100); color: var(--ink); font: inherit; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--ink-200); }
input[type="file"]:focus {
  outline: none; border-color: var(--brand-400); box-shadow: var(--ring);
}
/* Import-Protokoll: die Duplikatliste ist zugeklappt, weil sie im Normalfall
   lang und uninteressant ist – aber sie muss da sein. */
.imp-dups { margin-top: 10px; }
.imp-dups > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.imp-dups > summary:hover { color: var(--ink); }
.imp-dups .table-wrap { margin-top: 8px; max-height: 320px; overflow: auto; }
#import-report-view { margin-top: 14px; }

/* ====================================================================
   ANMELDUNG, BENUTZERLEISTE UND HINWEISE
   Die Eingabefelder der Anmeldeseite stehen BEWUSST in der gemeinsamen
   Feldregel oben, nicht hier – sonst sähen sie anders aus als überall sonst.
   ==================================================================== */
/* Zweigeteilte Seite: links die Marke, rechts das Formular. Dasselbe Bild wie
   in der Delegate Academy – wer beide Werkzeuge benutzt, soll sie als EIN Haus
   erkennen. Die Markenseite trägt keine Bedienelemente; fällt sie auf schmalen
   Bildschirmen weg, geht nichts verloren. */
.login-seite { margin: 0; background: #fff; }
.login-raster { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }

.login-marke {
  position: relative; overflow: hidden; color: #fff;
  padding: 44px 56px; display: flex; flex-direction: column;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(150deg, var(--brand-800) 0%, var(--brand-600) 55%, var(--brand-400) 100%);
}
/* Feines Punktraster, nach unten ausgeblendet. Nimmt der grossen Farbfläche das
   Plakathafte, ohne selbst aufzufallen. */
.login-marke::after {
  content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(200deg, #000, transparent 70%);
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%);
}
.login-marke > * { position: relative; z-index: 1; }
.login-marke .wortmarke { color: #fff; font-size: 24px; }
.login-marke .wortmarke .gate { color: var(--brand-100); }
.login-marke h2 {
  color: #fff; margin: auto 0 0; max-width: 15ch;
  font-size: clamp(28px, 1.2rem + 1.8vw, 42px); font-weight: 700; letter-spacing: -0.035em;
}
.login-lead { color: rgba(255,255,255,.86); font-size: 16px; max-width: 44ch; margin: 16px 0 34px; }
.login-punkte { display: grid; gap: 15px; margin: 0 0 auto; padding: 0; list-style: none; }
.login-punkte li { display: flex; gap: 13px; align-items: center; color: rgba(255,255,255,.93); font-size: 15px; }
.login-punkte .i {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
}
.login-fuss { margin: 44px 0 0; font-size: 12.5px; color: rgba(255,255,255,.7); }

.login-haupt { position: relative; display: grid; place-items: center; padding: 48px 24px; background: #fff; }
/* Der Sprachumschalter gehört auf die Formularseite: Er betrifft die Eingabe,
   nicht die Marke – und auf der Farbfläche wäre er kaum zu treffen. */
.login-haupt .lang-switch { position: absolute; top: 24px; right: 24px; }

/* Die Abschaltung der Markenseite steht BEWUSST hier unten, NACH `.login-marke`.
   Beide Regeln haben dieselbe Spezifität – stünde die Abfrage oben, gewänne das
   spätere `display: flex` und die Farbfläche bliebe auf dem Telefon stehen (sie
   tat es, bis es jemand nachgemessen hat). Eine Media-Abfrage gewinnt NICHT von
   sich aus; sie zählt wie jede andere Regel. */
@media (max-width: 900px) {
  .login-raster { grid-template-columns: 1fr; }
  .login-marke { display: none; }
  .login-haupt { padding: 72px 20px 48px; align-items: start; }
}

.login-karte {
  display: flex; flex-direction: column;
  /* `form` setzt global `align-items: center` und `gap: 10px` (für die
     einzeiligen Formulare im Werkzeug). In einer Spalte bedeutet `center`,
     dass jedes Feld nur so breit wird wie sein Inhalt – Benutzername und
     Passwort standen dadurch unterschiedlich breit und mittig untereinander.
     Beides wird hier ausdrücklich zurückgenommen. */
  align-items: stretch; gap: 0; text-align: left;
  width: 100%; max-width: 380px;
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
.login-karte h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.login-sub { color: var(--ink-500); margin: 9px 0 28px; }
.login-karte label {
  font-size: 13px; font-weight: 600; color: var(--ink-700);
  text-transform: none; letter-spacing: normal; margin-bottom: 7px;
}
.login-karte input { margin-bottom: 18px; }
.login-karte button {
  margin-top: 6px; height: 46px; font-size: 15px; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
/* Der Pfeil steht in der CSS und nicht im Knopftext: `data-i18n` setzt
   `textContent` und löschte ein Kind-Element bei jedem Sprachwechsel. Ein Pfeil
   ist ohnehin in beiden Sprachen derselbe. */
.login-karte button::after { content: "→"; font-size: 16px; line-height: 1; }
.login-hilfe { margin: 22px 0 0; font-size: 13px; color: var(--ink-500); text-align: center; }
.login-fehler {
  margin: 0 0 18px; padding: 11px 13px; border-radius: var(--r-sm);
  background: #fdeeed; border: 1px solid #f4cdca; color: #7d211b; font-size: 13.5px;
}

/* Kürzel im Kreis mit Markenverlauf. Trägt keine eigene Aussage – der Name
   steht daneben –, gibt der Kopfzeile aber einen Ankerpunkt rechts, der dem
   Türkis der Wortmarke links entspricht. */
.benutzer-kuerzel {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  color: #fff; font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
}

/* Hinweis bei fehlender Berechtigung (public/api.js). */
.hinweis-oben {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 1000; display: flex; align-items: center; gap: 12px;
  background: #fdeeed; border: 1px solid #f4cdca; color: #7d211b;
  padding: 10px 14px; border-radius: 8px; font-size: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12); max-width: 90vw;
}
.hinweis-oben button {
  background: transparent; color: #7d211b; border: none;
  font-size: 18px; line-height: 1; padding: 0 2px; height: auto;
}

/* Zugriffsprotokoll: abgewiesene Zugriffe und fehlgeschlagene Anmeldungen
   heben sich ab - das sind die Zeilen, wegen derer man hineinsieht. Die Farbe
   ist nur die Zugabe, erkennbar bleibt es am Text in der Spalte "Vorgang". */
#tab-protokoll tr.prot-warn td { background: #fdf3f2; }
#tab-protokoll code { font-size: 12px; }
/* Die Anmerkung ist der einzige Freitext in der Tabelle - sie bekommt eine
   Höchstbreite, damit ein langer User-Agent nicht die ganze Zeile aufzieht. */
#tab-protokoll td.prot-detail { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* ====================================================================
   MEHRFACHAUSWAHL (Umsatzart im Buchungen-Tab)
   Der Knopf steht BEWUSST in der gemeinsamen Feldregel oben – er soll
   aussehen wie ein Auswahlfeld, nicht wie ein Knopf. `button` setzt global
   `color: #fff`, deshalb hier ausdrücklich die Schriftfarbe (die Falle aus
   CLAUDE.md §4: sonst steht weiss auf weiss).
   ==================================================================== */
.mehrfach { position: relative; }
.mehrfach-knopf {
  color: var(--ink); background: #fff; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 190px; max-width: 260px;
}
.mehrfach-knopf:hover { filter: none; border-color: var(--ink-300); }
.mehrfach-knopf > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mehrfach-pfeil { color: var(--muted); flex: none; }
.mehrfach-liste {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  /* Breiter als der Knopf, aber nie breiter als das Fenster. Die Umsatzarten
     tragen lange Namen ("Implementation, Service, Hosting & Managed Services
     Setup") - abgeschnitten waeren sie nicht mehr zu unterscheiden. */
  min-width: 300px; width: max-content; max-width: min(460px, calc(100vw - 24px));
  max-height: 340px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--schatten);
  padding: 6px 0;
}
.uart-block + .uart-block { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.mehrfach-liste label.chk {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 12px; margin: 0; cursor: pointer;
  font-size: 13px;
  /* Lange Namen UMBRECHEN statt abzuschneiden. `th, td` setzt global nowrap,
     und ein geerbtes nowrap machte aus jedem langen Namen eine Zeile, die aus
     dem Kasten lief. Das Kaestchen bleibt oben buendig. */
  white-space: normal; line-height: 1.35;
}
.mehrfach-liste label.chk input { margin-top: 2px; flex: none; }
.mehrfach-liste label.chk:hover { background: var(--brand-50); }
.uart-zeile { padding-left: 28px !important; }
.uart-fuss { padding: 6px 12px 2px; border-top: 1px solid var(--line); margin-top: 4px; }

/* Die Kopfzeile der Buchungsliste, solange eine Abfrage unterwegs ist. Die Zahl
   gilt dann noch für den vorigen Filter - sie zu verstecken wäre schlechter
   (dann flackerte die Zeile), sie unverändert zu zeigen aber auch: Es sah aus,
   als reagiere der Filter nicht. */
/* ====================================================================
   LADEANZEIGE – ein Spinner für das ganze Werkzeug.
   Dieselbe Haltung wie bei der Feldregel: EINE Klasse, nicht je Stelle eine
   eigene. Wer eine neue Ansicht baut, nimmt `.spinner` und `.laedt`.
   ==================================================================== */
.spinner {
  display: inline-block; width: 13px; height: 13px; flex: none;
  border: 2px solid var(--brand-100, #d6eef1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dreh .7s linear infinite;
  vertical-align: -2px;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* Wer „weniger Bewegung" eingestellt hat, bekommt kein Karussell – aber auch
   kein Nichts: Der Ring pulsiert dann nur noch dezent. Ein stehender Ring wäre
   nicht als „es lädt" erkennbar. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: pulsiere 1.4s ease-in-out infinite; border-top-color: var(--accent); }
  @keyframes pulsiere { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}

/* Die Zahl gilt waehrend des Ladens noch dem VORIGEN Filter. Sie zu verstecken
   waere schlechter (die Zeile flackerte), sie unveraendert zu zeigen aber auch:
   Es sah aus, als reagiere der Filter nicht. Also dimmen. */
.laedt { opacity: .45; transition: opacity .12s ease-in; }
/* Spinner und Text auf einer Grundlinie, ohne dass die Zeile springt, wenn der
   Spinner verschwindet: Die Zeile behaelt ihre Hoehe. */
.zeile-laden { display: flex; align-items: center; gap: 8px; min-height: 20px; margin-bottom: 10px; }
/* Die Tabelle wird beim Laden mitgedimmt - sonst wirkt nur die Kopfzeile
   beschaeftigt, waehrend darunter unveraendert die alten Zeilen stehen. */
#bookings-table.laedt, #db-charts.laedt, #db-kpis.laedt { opacity: .5; }