/*
 * -----------------------------
 * CoreX — Bausteine der Oberflaeche
 * TiNi #Software
 * ------------------------------
 * Created: 2026-10-21
 * ------------------------------
 *
 * WAS JEDE VERWALTUNG HAT — einmal.
 *
 * Gemessen am 2026-10-21 ueber vierzehn Stylesheets: die Kopfzeile baut
 * jede Suite fuer sich (elf Mal), die Zeile elf Mal, die Liste zehn,
 * Karte und leerer Zustand je neun, Zustandsmarke und Raster je acht.
 * Elf Suiten ueberschreiben Bootstraps `.btn` — jede auf ihre Art.
 *
 * Diese Datei schreibt KEINE Farbe auf. Jede Angabe ist ein Merkmal aus
 * `corex_tokens.css`. Wer hier eine Farbe findet, hat einen Fehler
 * gefunden — `tools/check_design_tokens.php` prueft es.
 *
 * SIE ERSETZT BOOTSTRAP NICHT. Knopf, Formularfeld und Raster bleiben
 * Bootstrap; hier steht nur, was Bootstrap nicht hat und was deshalb
 * bisher achtmal nebeneinander entstanden ist.
 *
 * NAMENSRAUM `cx-`. Das Praefix der Bausteine ist bewusst ein anderes
 * als das der Merkmale (`--ui-`): ein Baustein ist eine Klasse, ein
 * Merkmal ein Wert. Wer `.cxu-badge` liest, weiss, dass er etwas
 * Gemeinsames vor sich hat und keine Suitenklasse.
 */

/* ==================================================================
   BAUSTEINE
   ================================================================== */

/* --- Zustandsmarke ------------------------------------------------
   Ein Zustand muss ohne Lesen erkennbar sein. Deshalb Form UND Farbe:
   die Pille traegt, die Farbe unterscheidet. Wer nur Farbe benutzt,
   verliert jeden, der sie nicht unterscheiden kann. */

.cxu-badge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ui-gap-1);
  padding: .12rem .55rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-pill);
  background: var(--ui-surface-2);
  color: var(--ui-ink-soft);
  font-size: var(--ui-text-s);
  line-height: 1.5;
  white-space: nowrap;
}

.cxu-badge.is-ok   { background: var(--ui-ok-bg);   border-color: var(--ui-ok-line);   color: var(--ui-ok); }
.cxu-badge.is-warn { background: var(--ui-warn-bg); border-color: var(--ui-warn-line); color: var(--ui-warn); }
.cxu-badge.is-bad  { background: var(--ui-bad-bg);  border-color: var(--ui-bad-line);  color: var(--ui-bad); }
.cxu-badge.is-info { background: var(--ui-info-bg); border-color: var(--ui-info-line); color: var(--ui-info); }

/* --- Merkkasten --------------------------------------------------- */

.cxu-note {
  border-left: 3px solid var(--ui-line);
  background: var(--ui-surface-2);
  color: var(--ui-ink);
  padding: var(--ui-gap-3) var(--ui-gap-4);
  margin-bottom: var(--ui-gap-3);
  font-size: var(--ui-text);
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
}

.cxu-note.is-ok   { border-left-color: var(--ui-ok);   background: var(--ui-ok-bg); }
.cxu-note.is-warn { border-left-color: var(--ui-warn); background: var(--ui-warn-bg); }
.cxu-note.is-bad  { border-left-color: var(--ui-bad);  background: var(--ui-bad-bg); }

/* --- Karte --------------------------------------------------------- */

.cxu-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-l);
  padding: var(--ui-gap-4);
  margin-bottom: var(--ui-gap-3);
  box-shadow: var(--ui-shadow);
}

.cxu-card-head {
  display: flex;
  align-items: center;
  gap: var(--ui-gap-2);
  flex-wrap: wrap;
  margin-bottom: var(--ui-gap-2);
}

.cxu-meta {
  color: var(--ui-ink-soft);
  font-size: var(--ui-text-s);
  margin: 0;
}

/* --- Tabelle -------------------------------------------------------
   Breite Tabellen rollen IN SICH, nicht die Seite. Sonst wandert bei
   vierzehn Spalten das ganze Seitengeruest nach links. */

.cxu-scroll { overflow-x: auto; margin-bottom: var(--ui-gap-4); }

.cxu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-text);
  background: var(--ui-surface);
}

.cxu-table th {
  text-align: left;
  font-size: var(--ui-text-s);
  font-weight: 600;
  color: var(--ui-ink-soft);
  background: var(--ui-surface-2);
  padding: var(--ui-gap-2) var(--ui-gap-3);
  border-bottom: 1px solid var(--ui-line);
  white-space: nowrap;
}

.cxu-table td {
  padding: var(--ui-gap-2) var(--ui-gap-3);
  border-bottom: 1px solid var(--ui-line-soft);
  color: var(--ui-ink);
  vertical-align: top;
}

.cxu-table tbody tr:last-child td { border-bottom: 1px solid var(--ui-line); }
.cxu-table tbody tr:hover td { background: var(--ui-surface-2); }

/* Zahlen in einer Spalte brauchen gleich breite Ziffern — sonst
   wandern Betraege beim Scrollen. */
.cxu-num { text-align: right; font-variant-numeric: var(--ui-num); }

/* --- Leerer Zustand ------------------------------------------------
   Er sagt, was fehlt, nicht dass etwas fehlt. */

.cxu-empty {
  border: 1px dashed var(--ui-line);
  border-radius: var(--ui-radius-l);
  background: var(--ui-surface-2);
  padding: var(--ui-gap-6) var(--ui-gap-4);
  text-align: center;
  color: var(--ui-ink-soft);
  margin-bottom: var(--ui-gap-4);
}

.cxu-empty i { font-size: 1.6rem; opacity: .5; display: block; margin-bottom: var(--ui-gap-2); }
.cxu-empty p { margin: 0; font-size: var(--ui-text); }

/* --- Formularzeile -------------------------------------------------- */

.cxu-field { margin-bottom: var(--ui-gap-4); max-width: 32rem; }

.cxu-field label {
  display: block;
  font-size: var(--ui-text-s);
  font-weight: 600;
  color: var(--ui-ink-soft);
  margin-bottom: var(--ui-gap-1);
}

.cxu-help {
  display: block;
  font-size: var(--ui-text-s);
  color: var(--ui-ink-faint);
  margin-top: var(--ui-gap-1);
}

/* --- Leiste ---------------------------------------------------------
   Werkzeugleiste und Filter in einem. Die Marken sind anklickbar —
   deshalb tragen sie einen Zeiger und eine Reaktion. Eine Marke, die
   nur beschriftet, gehoert NICHT hierher, sondern ist ein `.cxu-badge`. */

.cxu-bar {
  display: flex;
  align-items: center;
  gap: var(--ui-gap-2);
  flex-wrap: wrap;
  margin-bottom: var(--ui-gap-4);
}

.cxu-bar-sp { flex: 1 1 auto; }

.cxu-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ui-gap-1);
  padding: .3rem .7rem;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-pill);
  background: var(--ui-surface);
  color: var(--ui-ink-soft);
  font-size: var(--ui-text-s);
  cursor: pointer;
  user-select: none;
}

.cxu-chip b { color: var(--ui-ink); font-variant-numeric: var(--ui-num); }
.cxu-chip:hover { background: var(--ui-surface-2); }
.cxu-chip.is-on {
  border-color: var(--ui-accent);
  background: var(--ui-accent-bg);
  color: var(--ui-ink);
}