/* Ein Tabellenformat für ALLE Tabellen der Konsole (design.md §5).
   Zwölf Tabellen über sechs Tabs: Sync-Läufe, Transaktionen, Stammdaten, beide
   Pendenzlisten, Webhooks, Statistik. Sie zeigen völlig Verschiedenes, sind aber
   dasselbe Ding — eine Liste von Zeilen, die man überfliegt. Deshalb gibt es hier
   genau einen Satz Regeln auf den blossen Elementen (`table`/`th`/`td`) und keine
   Tabellenklassen: eine neue Tabelle im Partial sieht ohne Zutun wie die anderen aus.
   Die Masse stehen als Tokens in tokens.css, damit sich die Dichte an einer Stelle
   nachziehen lässt. */

/* Waagrechter Überlauf gehört in die Tabelle, nicht auf die Seite. Auf dem Schirm
   passen alle Tabellen in die 960px des Inhalts; auf einem schmalen Fenster tut es
   die neunspaltige Transaktionsliste nicht mehr, und dann scrollt sie in sich statt
   die ganze Seite zu verschieben. Kein `margin` auf dem Wrapper — den trägt die
   Tabelle selbst, sonst hinterliesse eine per `x-show` versteckte Tabelle eine Lücke. */
.table-scroll {
  overflow-x: auto;
  /* Seit der Grund grau ist (tokens.css `--bg`), braucht eine Tabelle ihre eigene
     weisse Fläche: die Hälfte der Tabellen steht nicht in einer `.card`, und auf
     Grau schwebten deren Zeilen ohne Untergrund. Innerhalb einer Card wird das
     unten wieder zurückgenommen — sonst läge Weiss auf Weiss samt zweitem Schatten. */
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: .35rem .6rem;
  margin-bottom: 1.5rem;
}
.card .table-scroll { background: none; border-radius: 0; box-shadow: none; padding: 0; margin-bottom: 0; }
/* Der Abstand hängt jetzt an der Fläche, nicht mehr an der Tabelle darin. */
.table-scroll > table { margin-bottom: 0; }

table {
  /* Volle Breite und Umbruch, nicht `max-content`: eine Tabelle, die sich nach ihrem
     längsten Text richtet, schiebt in der Pendenzliste die Entscheid-Knöpfe aus dem
     Bild — der Preis für einzeilige Zeilen wäre, dass man zum Bedienen scrollen muss.
     Kurze Werte bleiben stattdessen gezielt einzeilig (`.num`, `.ts` unten). */
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: var(--table-font);
  line-height: 1.45;
  /* Beträge und Ids stehen dadurch stellengenau untereinander. */
  font-variant-numeric: tabular-nums;
}

/* Kopfzeile: Mikroversalien in Grau über einer roten Haarlinie — dieselbe
   Kopf-Trennlinie wie in den Intrapass-Dokumenten (CI-Layout-Spezifikation §4).
   Sie ist der einzige Farbakzent der Tabelle; alles Weitere bleibt Text auf Weiss,
   damit die Daten und nicht das Raster ins Auge fallen. */
thead th {
  padding: var(--table-pad-y) var(--table-pad-x);
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
  color: var(--muted);
  font-size: var(--table-head-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 2px solid var(--brand);
}

/* Zweitzeile in einem Spaltenkopf (die Stationsnamen unter „Weg des Belegs") — dasselbe
   `<small class="muted subline">` wie der MCC unter der Beschreibung, aber der Kopf setzt
   drei Dinge, die für eine Legende falsch sind: VERSALIEN und Sperrung liessen sie wie
   einen zweiten Spaltentitel aussehen, und `.muted` bringt absolute .85rem mit — mehr als
   der Kopftext selbst (--table-head-font). Nicht umbrochen wird sie nicht: `white-space`
   erbt sie vom `th`, und über zwei Zeilen verlöre die Reihenfolge ihren Bezug zu den
   gleich breiten Gliedern darunter. */
thead th .subline {
  margin-top: .1rem;
  font-size: var(--table-head-font);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

td {
  padding: var(--table-pad-y) var(--table-pad-x);
  /* Oben, nicht mittig: in einer Zeile stehen neben einzeiligen Zellen auch solche
     mit Badges, Zweitzeile oder Knopfgruppe — mittig zentriert driftet dann jede
     Spalte auf eine andere Höhe. */
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
/* Die letzte Linie schliesst nichts ab, sie steht nur im Weg. */
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }

/* Mehrere <tbody> in einer Tabelle — die Transaktionsliste.
   Eine Transaktion besteht dort aus zwei <tr> (Datenzeile + aufklappbare Detailzeile),
   und Alpines `x-for` verlangt genau ein Wurzelelement je Durchlauf; das eine
   Wurzelelement ist deshalb ein `<tbody class="tx-group">`. Damit stimmt die Annahme
   der beiden Regeln oben nicht mehr, dass „letzte Zeile" gleich „letzte Zeile der
   Tabelle" ist: `tr:last-child` wäre sonst jede Detailzeile und jede Transaktion
   verlöre ihre Trennlinie zur nächsten.
   Die Trennlinie hängt darum an der Gruppe statt an ihrer letzten Zeile — das trennt
   zugleich richtig herum: Datenzeile und ihre Detailzeile gehören zusammen und dürfen
   keinen Strich dazwischen haben. Das Weglassen bei `:last-child` erhält die Regel von
   oben; deshalb steht der Leerzustand im Partial VOR den Datenzeilen, damit die letzte
   Transaktionsgruppe wirklich die letzte ist. */
tbody.tx-group td { border-bottom: none; }
tbody.tx-group:not(:last-child) { border-bottom: 1px solid var(--border); }

/* Die aufgeklappte Fortsetzung einer Zeile — abgesetzter Grund, damit sie als
   Fortsetzung gelesen wird und nicht als eigene Transaktion. */
tr.tx-detail > td { background: var(--surface-2); padding-top: 0; }
.tx-detail-groups { display: flex; flex-wrap: wrap; gap: .35rem 2rem; }
/* Beschriftete Gruppen statt einer losen Badge-Wolke: ohne Titel wüsste niemand, dass
   „kein Konto" eine Beobachtung aus Bexio ist und keine Ableitung. */
.tx-detail-group { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; }
.tx-detail-title {
  font-size: var(--table-head-font); font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}

/* Zahlenspalten rechtsbündig (Betrag, Anzahl) — Ziffern vergleicht man an der
   Einerstelle. Wird im Partial an th UND td gesetzt, sonst rutscht der Titel weg. */
th.num, td.num { text-align: right; white-space: nowrap; }
/* Zeitstempel (`.ts`): ein Datum ist ein Wert, kein Satz. Ohne das bricht die
   engste Spalte zuerst genau dort um — „2026-08-11" über „06:00:12" — und macht
   jede zweite Zeile doppelt so hoch. */
td.ts, th.ts { white-space: nowrap; }

/* Leere Liste: ein einzelnes `colspan`-Feld über die ganze Breite. Zentriert und
   grau, damit es als Zustand und nicht als erste Datenzeile gelesen wird. */
tbody td[colspan] { text-align: center; color: var(--muted); padding: 1rem var(--table-pad-x); }

/* Links im Datenbereich sind Text, kein Akzent. In der Spalte „Bexio" ist der Link
   zugleich der Statuswert (`booked`/`pending`/`failed`), in den Storno-Pendenzen die
   Belegnummer — eine Tabelle voller rot unterstrichener Wörter liest sich als
   Fehlerliste, obwohl dort das Normale steht. Also `--fg` wie die Nachbarzelle und
   ohne Unterstreichung im Ruhezustand.
   Dass es ein Link ist, muss trotzdem ankommen: Unterstreichung bei Hover UND bei
   Tastaturfokus (der Fokusring allein sagt nur „hier steht der Cursor", nicht „das
   führt woandershin"). Fliesstext-Links bleiben unverändert rot und dauerhaft
   unterstrichen (base.css, design.md §7). */
td a { color: var(--fg); text-decoration: none; }
td a:hover, td a:focus-visible { text-decoration: underline; }

/* Ausnahme davon: ein Link, dessen Text keine Angabe ist, sondern eine AUFFORDERUNG
   („Beleg 706 öffnen", „Bexio-Ausgabe öffnen"). Die Regel oben ist für Datenwerte
   gedacht — dort ist der Link eine Zugabe zum Wort, das ohnehin dastehen muss. Wo der
   Text dagegen nur existiert, um angeklickt zu werden, nimmt ihm dieselbe Regel jedes
   Merkmal: er sieht aus wie Fliesstext, und ein Verweis, den man erst beim Überfahren
   findet, ist auf dem Touchscreen gar keiner (WCAG 1.4.1, design.md §7). Also der
   Fliesstext-Link von base.css — rot und DAUERHAFT unterstrichen. Zwei bis drei Stück
   in der ganzen Konsole; die Sorge der Regel oben (hundert rote Wörter untereinander)
   entsteht dabei nicht. */
td a.action-link { color: var(--brand-hover); text-decoration: underline; }
td a.action-link:hover, td a.action-link:focus-visible { color: var(--brand-active); }

/* Nebenangaben in einer Zelle müssen kleiner sein als der Haupttext. `.muted` allein
   reicht dafür nicht: dessen .85rem sind absolut und damit genau die Schriftgrösse
   der Tabelle — der Zusatz wäre gleich gross wie das, wozu er gehört. */
td small, td .muted { font-size: var(--table-small-font); }
/* Badges sitzen zu mehreren in einer Zelle (Spalte „Bexio-Ist"): eine Nummer kleiner
   als ausserhalb, sonst treiben sie die Zeilenhöhe auseinander. Umbrochen wird ein
   Badge nie — „Beleg fehlt" auf zwei Zeilen liest sich wie zwei kaputte Marken. */
td .badge { font-size: var(--table-small-font); padding: .05rem .4rem; white-space: nowrap; }