/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   TABELLE — das Datensatz-Register als Karte: Rahmen, Radius, eigener
   Grund, Zebra, Hover, ein Kopf, der beim Scrollen stehen bleibt.
       <div class="tabellen-titel">Benutzer</div>              (optional)
       <div class="tabelle-huelle"><table class="tabelle klickbar">
         <thead><tr><th data-key="name" class="sort-auf">Name</th> …
         <tbody><tr class="gewaehlt"><td class="num">…</td><td class="zelle-mono">SA450012</td>
   Varianten: .tabelle-einzeilig (nie zweizeilig, lange Namen enden in „…"),
   .tabelle-mono (reine Zahlen in Monospace). Spalten und Breiten setzt das
   Werkzeug an den th — Optik zentral, Größe lokal. */

.tabelle-huelle {
    background: var(--flaeche-erhaben);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
    font-size: var(--schrift-sm);
}

/* Der Kopf bleibt beim Scrollen stehen. Der eigene Grund ist dafür Pflicht,
   sonst scheinen die Zeilen durch. Die Trennlinie ist ein inset-Schatten,
   kein border-bottom: Ein Rahmen scrollt bei sticky-Zellen weg, der
   Schatten bleibt. */
.tabelle thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: var(--abstand-6) var(--abstand-12);
    background: var(--flaeche-erhaben);
    font-size: var(--schrift-2xs);
    font-weight: var(--gewicht-halbfett);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    white-space: nowrap;
    user-select: none;
    box-shadow: inset 0 -1px 0 var(--linie);
}

/* Sortierbare Spalte: Der Pfeil sagt, wohin sortiert wird. ↑/↓ als Zeichen
   mit fester Breite, damit selbst ein Ersatz-Glyph die Kopfzeile nicht
   verschiebt. Eine Spalte mit data-key IST sortierbar; .sortierbar bleibt
   als zweite Schreibweise gültig. */
.tabelle thead th.sortierbar,
.tabelle thead th[data-key] { cursor: pointer; }
.tabelle thead th.sortierbar:hover,
.tabelle thead th[data-key]:hover { color: var(--text); }
.tabelle thead th.sort-auf::after,
.tabelle thead th.sort-ab::after {
    display: inline-block;
    width: 0.8em;
    margin-left: 0.35em;
    line-height: 1;
    text-align: center;
    opacity: 0.75;
}
.tabelle thead th.sort-auf::after { content: '↑'; }
.tabelle thead th.sort-ab::after  { content: '↓'; }

/* Zellen: Zahlen stehen in allen Zellen tabellarisch untereinander — das
   kostet nichts, wo keine Zahlen stehen. */
.tabelle tbody td {
    padding: var(--abstand-6) var(--abstand-12);
    color: var(--text);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.tabelle td.leise { color: var(--text-leise); }
/* Zeit- und Kennungsspalten nie umbrechen — sonst zerreißt ein Datum die Zeile. */
.tabelle td.num { white-space: nowrap; }

/* Zeilen: Trennlinie, Zebra, Hover. Beide Töne sind Rollen, die in beiden
   Welten tragen — drei Prozent Weiß wären im Hellen unsichtbar gewesen.
   Die letzte Zeile ohne Linie, sonst doppelt sie sich mit dem Kartenrand. */
.tabelle tbody tr { border-bottom: 1px solid var(--linie-zart); }
.tabelle tbody tr:last-child { border-bottom: none; }
.tabelle tbody tr:nth-child(even) { background: var(--flaeche); }
.tabelle tbody tr:hover { background: var(--linie-zart); }

/* Wählbare Zeilen: `.klickbar` sagt, dass Zeilen Aktionen sind; `.gewaehlt`
   ist die getroffene Wahl — allein über die Fläche, ohne Akzent-Balken, der
   die Wahl doppelt erzählte. `.zeile-zu` ist die Gegen-Auszeichnung: eine
   Zeile, die in dieser Tabelle ausdrücklich nicht zu öffnen ist. */
.tabelle.klickbar tbody tr { cursor: pointer; }
.tabelle.klickbar tbody tr.zeile-zu { cursor: default; }
.tabelle tbody tr.gewaehlt,
.tabelle tbody tr.gewaehlt:hover { background: var(--flaeche-betont); }

/* Eine Zelle in Monospace — für Kennungen, die Buchstaben und Ziffern
   mischen (SA450012, LG-113029-01): Solche Ketten vergleicht man Zeichen
   für Zeichen, und nur bei fester Breite steht die vierte Stelle in jeder
   Zeile an derselben Stelle. Nicht für reine Zahlenspalten — dafür gibt es
   `.num` mit tabellarischen Ziffern, ohne Schriftwechsel. */
.zelle-mono,
.tabelle td.zelle-mono {
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-xs);
}

/* Kästchen in Tabellenzellen (Mehrfach-Auswahl): hier nur die Ausrichtung. */
.tabelle th input[type="checkbox"],
.tabelle td input[type="checkbox"] { vertical-align: middle; }

/* Reine Zahlen-Tabelle in Monospace. */
.tabelle-mono tbody td { font-family: var(--schriftart-mono); }

/* Die Hülle scrollt: Sie IST die Karte, und erst `overflow` schneidet die
   Tabellenecken auf die Rundung zu. Der Preis: Der sticky-Kopf klebt an der
   Hülle statt am Fenster — und weil sie keine feste Höhe hat, scrollt sie
   nie. Wer den Kopf am Fenster kleben lassen will, setzt die Tabelle in eine
   .karte mit `overflow: clip` (kopfleiste.css). */
.tabelle-huelle { overflow: auto; }

/* Ein optionaler Titel über der Tabelle. */
.tabellen-titel {
    font-size: var(--schrift-xs);
    font-weight: var(--gewicht-halbfett);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-gedaempft);
    margin: 0 0 var(--abstand-8);
}

/* Die Textfarbe der Kopfzeile: gedämpft, nicht leise — auch aus Abstand
   lesbar. */
.tabelle thead th { color: var(--text-gedaempft); }

/* Eine gedämpfte Zelle. */
.zelle-dim,
.tabelle td.zelle-dim  { color: var(--text-gedaempft); }

/* Strikt einzeilig: Lange Namen enden in „…" statt umzubrechen.
   table-layout: fixed ist die Voraussetzung — erst damit respektieren Zellen
   die Spaltenbreiten und die Ellipse greift. */
.tabelle-einzeilig { table-layout: fixed; width: 100%; }
.tabelle-einzeilig th,
.tabelle-einzeilig td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}