/* ============================================================================
   1ki-table — Datentabelle mit Sortierung, Filter, fixierten Bereichen
   ----------------------------------------------------------------------------
   Single Source of Truth. Quelle: Staging/_ui/table/table.css
   Setzt 1ki-theme.css voraus, nutzt dessen Variablen, keine eigenen Farben.
   Governance: 08 Bereiche/Website & Webspace/UI-Module_Standard.md

   Arbeitet als Aufwertung einer vorhandenen <table>. Ohne JavaScript bleibt
   die Tabelle eine normale, lesbare Tabelle. Version: 1.0 (2026-08-04)
   ========================================================================= */

.dt {
  --dt-head: rgba(2, 18, 38, 0.96);
  --dt-freeze: rgba(2, 18, 38, 0.94);
  --dt-row-alt: rgba(255, 255, 255, 0.032);
  --dt-hover: rgba(68, 168, 222, 0.16);
  margin: 0 0 var(--space-5);
}

/* --- Werkzeugleiste über der Tabelle ------------------------------------- */
.dt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.dt-bar .dt-spacer { flex: 1; }

.dt-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit; font-size: var(--fs-xs);
  cursor: pointer;
}
.dt-btn:hover { border-color: var(--sky); color: var(--paper); }
.dt-btn[aria-pressed="true"] { border-color: var(--sky); color: var(--sky); }
.dt-btn svg { width: 14px; height: 14px; }

.dt-count { font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Spaltenmenü ---------------------------------------------------------- */
.dt-menu-wrap { position: relative; }
.dt-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 70;
  min-width: 260px; max-height: 60vh; overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  display: none;
}
.dt-menu[data-open="true"] { display: block; }
.dt-menu h4 {
  margin: 6px 8px 8px; font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.dt-menu-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px;
  font-size: var(--fs-sm);
}
.dt-menu-row:hover { background: rgba(255, 255, 255, 0.05); }
.dt-menu-row input { width: auto; margin: 0; }
.dt-menu-row .dt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-menu-row .dt-pin {
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: none; color: var(--text-muted);
  cursor: pointer; padding: 3px 7px; font-size: var(--fs-xs);
}
.dt-menu-row .dt-pin[aria-pressed="true"] { border-color: var(--sky); color: var(--sky); }
.dt-menu-note { padding: 8px; font-size: var(--fs-xs); color: var(--text-muted); }

/* --- Scrollrahmen mit abgerundeter Außenkante ---------------------------- */
.dt-scroll {
  overflow: auto;
  max-height: var(--dt-max-height, 62vh);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(2, 18, 38, 0.5);
}

.dt table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0;
}

/* --- Kopfzeile, immer sichtbar ------------------------------------------- */
.dt thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--dt-head);
  color: var(--text-strong);
  border-bottom: 2px solid var(--sky);
  padding: 0;
  white-space: nowrap;
}
.dt thead th .dt-th {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 0; background: none;
  color: inherit; font: inherit; font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-align: left; cursor: pointer;
}
.dt thead th .dt-th:hover { color: var(--sky); }
.dt thead th .dt-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dt thead th .dt-grip {
  cursor: grab; color: var(--text-muted); padding: 0 2px;
  font-size: 13px; line-height: 1;
}
.dt thead th[draggable="true"]:active .dt-grip { cursor: grabbing; }
/* Sortierzeichen: feste Größe, damit es in jeder Spalte gleich aussieht und
   nicht mit der Zellenhöhe mitwächst. Dezent, bis die Spalte sortiert ist. */
.dt-sort {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-left: auto;
  opacity: 0.3;
  transition: opacity var(--t-fast);
}
.dt thead th .dt-th:hover .dt-sort { opacity: 0.6; }
.dt th[aria-sort="ascending"] .dt-sort,
.dt th[aria-sort="descending"] .dt-sort { opacity: 1; color: var(--sky); }
.dt th[aria-sort="descending"] .dt-sort { transform: scaleY(-1); }

.dt th.dt-drop-target { box-shadow: inset 3px 0 0 var(--pulse); }

/* --- Filterzeile ---------------------------------------------------------- */
.dt tr.dt-filters th {
  position: sticky;
  top: var(--dt-head-height, 43px);
  z-index: 3;
  background: var(--dt-head);
  border-bottom: 1px solid var(--line-strong);
  padding: 6px 8px;
}
.dt tr.dt-filters .dt-filter {
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.dt tr.dt-filters input {
  width: 100%; padding: 5px 8px;
  font-size: var(--fs-xs);
  border-radius: 6px;
  min-width: 0;
}
/* Vergleichsoperator je Spalte */
.dt-op {
  flex: 0 0 auto;
  width: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}
.dt-op:hover { border-color: var(--sky); color: var(--sky); }
.dt-op[data-gesetzt="true"] { border-color: var(--sky); color: var(--sky); font-weight: var(--fw-semibold); }
.dt tr.dt-filters .dt-filter[data-wertlos="true"] input { display: none; }
.dt[data-filters="false"] tr.dt-filters { display: none; }

/* Auswahlspalte */
.dt .dt-pick {
  width: 42px;
  text-align: center;
  padding: 0 !important;
}
.dt .dt-pick input {
  width: 17px; height: 17px;
  margin: 0;
  accent-color: var(--sky);
  cursor: pointer;
}
.dt tbody tr[data-gewaehlt="true"] td { background: color-mix(in srgb, var(--sky) 13%, transparent); }
.dt tbody tr[data-gewaehlt="true"] td:first-child { box-shadow: inset 3px 0 0 var(--pulse); }

/* Schnellaktionen, erscheinen nur bei getroffener Auswahl */
.dt-actions {
  display: none;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  width: 100%;
  padding: 9px 12px;
  margin-bottom: var(--space-2);
  border: 1px solid var(--sky);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--sky) 12%, var(--surface-2));
  font-size: var(--fs-xs);
}
.dt-actions[data-an="true"] { display: flex; }
.dt-actions .dt-gewaehlt { font-weight: var(--fw-semibold); color: var(--text-strong); }
.dt-actions .dt-spacer { flex: 1; }

/* Hilfe zur Tabelle: seit 2026-08-06 im eigenen Modul _ui/hilfe/.
   Die frueheren Regeln .dt-help / .dt-help-pop standen hier und sind
   dorthin umgezogen -- unveraenderte Optik, aber mit erzeugter ID,
   Aussenklick und eigener Position unter 480px. Seiten, die
   DataTable mit help: true benutzen, binden hilfe.css und hilfe.js
   mit ein. */

/* --- Datenzeilen ---------------------------------------------------------- */
.dt tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  background: transparent;
}
.dt[data-zebra="true"] tbody tr:nth-child(even) td { background: var(--dt-row-alt); }

/* Deutlicher Hover: farbige Fläche plus Markierung am linken Rand */
.dt tbody tr:hover td {
  background: var(--dt-hover);
  color: var(--paper);
}
.dt tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--sky); }
.dt tbody tr:last-child td { border-bottom: 0; }

.dt-empty { padding: var(--space-5); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

/* --- Fixierte Spalten ----------------------------------------------------- */
.dt .dt-frozen {
  position: sticky;
  z-index: 2;
  background: var(--dt-freeze);
}
.dt thead .dt-frozen, .dt tr.dt-filters .dt-frozen { z-index: 4; }
/* Kante am Ende des fixierten Bereichs, damit der Übergang sichtbar ist */
.dt .dt-frozen-last::after {
  content: "";
  position: absolute;
  top: 0; bottom: -1px; right: -1px;
  width: 1px;
  background: var(--sky);
}
.dt[data-zebra="true"] tbody tr:nth-child(even) .dt-frozen { background: var(--dt-freeze); }
.dt tbody tr:hover .dt-frozen { background: color-mix(in srgb, var(--sky) 18%, var(--dt-freeze)); }

/* Ausgeblendete Spalten */
.dt .dt-hidden { display: none; }

/* --- Schmale Geräte -------------------------------------------------------
   Die Tabelle selbst bleibt eine Tabelle und scrollt waagerecht, das ist bei
   mehrspaltigen Daten verlässlicher als ein Umbruch in Kartenform. Fixierte
   Spalten spielen hier ihre Stärke aus. Nur das Spaltenmenü würde am rechten
   Rand herauslaufen und wird deshalb über die volle Breite gelegt. */
@media (max-width: 480px) {
  .dt-menu {
    position: fixed;
    left: var(--pad-stage); right: var(--pad-stage);
    top: auto; bottom: var(--pad-stage);
    min-width: 0; max-height: 56vh;
  }
  .dt-bar { gap: 6px; }
  .dt-btn { padding: 8px 10px; }
  .dt-count { width: 100%; order: -1; }
  .dt-scroll { max-height: var(--dt-max-height, 70vh); }
}

@media print {
  .dt-bar { display: none; }
  .dt-scroll { max-height: none; overflow: visible; border: 0; }
  .dt thead th, .dt .dt-frozen { position: static; }
  .dt tr.dt-filters { display: none; }
}