/* AUNIWA — Copyright (c) 2025-2026 Patrick Brand. Alle Rechte vorbehalten. */
/* ============================================================
   AUNIWA Tabellen-Patterns
   Stand: 2026-05-26 (UI-2b)
   CSS-Grid-basierte Tabellen mit Spalten-Prioritäten,
   Sticky-Header, Sticky-First-Column, Container-Queries.
   Wirkt erst wenn Listen in UI-3+ auf .aw-table umgestellt werden.
   ============================================================ */

/* ===========================================================
   WRAPPER (für Container-Queries + Horizontal-Scroll)
   =========================================================== */
.aw-table-wrapper {
  container-type: inline-size;
  container-name: aw-table-ctx;
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background: var(--color-bg);
}

/* Schatten an Sticky-Spalte beim horizontal scrollen
   (wird via JS-Klasse .is-scrolled-x am Wrapper aktiviert) */
.aw-table-wrapper.is-scrolled-x .col-pin-2,
.aw-table-wrapper.is-scrolled-x .aw-cell:last-of-type {
  box-shadow: 2px 0 4px rgba(15, 23, 42, 0.08);
}

/* ===========================================================
   TABELLE (CSS-Grid statt klassischem <table>)
   =========================================================== */
/* Einfache native Tabelle (Urlaubsplaner u.a.) — NICHT das aw-table-Grid.
   Verhindert das Überlappen, das entsteht, wenn <table>-Markup die Grid-Regeln
   von .aw-table erbt. */
.u-tbl th,
.u-tbl td {
  padding: 6px 9px;
  white-space: nowrap;
  border-bottom: 1px solid var(--buero-border, #e2e8f0);
}
.u-tbl th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--buero-text-muted, #64748b);
}
.u-tbl td { font-size: var(--text-sm); }

.aw-table {
  display: grid;
  /* Default: 8 Spalten — pro Tabelle überschreiben via inline style
     oder dedizierter Klasse */
  grid-template-columns:
    var(--col-status, 56px)
    minmax(180px, 2fr)
    minmax(100px, 1fr)
    minmax(100px, 1fr)
    minmax(100px, 1fr)
    minmax(140px, 1.2fr)
    minmax(120px, 1fr)
    var(--col-actions, 56px);
  gap: 0;
  width: 100%;
  background: var(--color-bg);
  font-size: var(--row-font);
  line-height: var(--leading-table);
}

/* Subgrid-Pattern: Zeilen erben das Grid */
.aw-row {
  display: contents;
}

/* Zellen */
.aw-cell {
  padding: var(--row-padding-y) var(--row-padding-x);
  min-height: var(--row-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}

/* Hover über die ganze Zeile (alle .aw-cell in der gleichen Row) */
.aw-row:hover .aw-cell {
  background: var(--color-surface-hover);
}

/* Zeilen-Selektion */
.aw-row[aria-selected="true"] .aw-cell {
  background: var(--color-brand-50);
}
.aw-row[aria-selected="true"] .aw-cell:first-child {
  box-shadow: inset 3px 0 0 var(--color-brand-500);
}

/* Status-Zeilen-Streifen entfernt (2026-07-03): Status zeigt nur noch der
   Ampelpunkt (.aw-dot) in der ersten Spalte. data-status bleibt als Semantik. */
.aw-dot {
  font-size: 1.15em;
  line-height: 1;
}

/* ===========================================================
   HEADER
   =========================================================== */
.aw-row.is-header .aw-cell {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-strong);
  min-height: auto;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

/* Sortier-Indikator im Header */
.aw-cell.is-sortable {
  cursor: pointer;
  user-select: none;
}
.aw-cell.is-sortable::after {
  content: " ↕";
  opacity: 0.3;
  margin-left: var(--space-1);
}
.aw-cell.is-sortable[aria-sort="ascending"]::after {
  content: " ↑";
  opacity: 1;
  color: var(--color-brand-700);
}
.aw-cell.is-sortable[aria-sort="descending"]::after {
  content: " ↓";
  opacity: 1;
  color: var(--color-brand-700);
}

/* ===========================================================
   STICKY ERSTE / ZWEITE SPALTE
   =========================================================== */
.aw-cell.col-pin {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-bg);
}
.aw-cell.col-pin-2 {
  position: sticky;
  left: var(--col-status, 56px);
  z-index: 1;
  background: var(--color-bg);
}

/* Header-Zellen, die auch sticky-Spalten sind: höhere z-index */
.aw-row.is-header .aw-cell.col-pin,
.aw-row.is-header .aw-cell.col-pin-2 {
  z-index: 3;
  background: var(--color-surface);
}

/* ===========================================================
   ZAHLEN — rechtsbündig, tabular
   =========================================================== */
.aw-cell.num {
  justify-content: flex-end;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--numeric-features);
  white-space: nowrap;
}

/* Negative Zahlen (in roter Farbe — Klammer-Formatierung passiert in JS) */
.aw-cell.num.is-negative {
  color: var(--color-danger);
}

/* ===========================================================
   SPALTEN-PRIORITÄTEN (Responsive)
   col-priority-1: immer sichtbar
   col-priority-2: ab 900px (md)
   col-priority-3: ab 1280px (lg)
   =========================================================== */
@media (max-width: 899px) {
  .col-priority-2 { display: none; }
}
@media (max-width: 1279px) {
  .col-priority-3 { display: none; }
}

/* Container-Queries für eingebettete Tabellen (z.B. in Sidebar-Panels) */
@container aw-table-ctx (max-width: 700px) {
  .col-priority-3 { display: none; }
}
@container aw-table-ctx (max-width: 500px) {
  .col-priority-2 { display: none; }
}

/* ===========================================================
   TRUNCATION & CLAMP
   =========================================================== */
.aw-cell.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.aw-cell .clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===========================================================
   SUBTEXT (zweite Zeile in einer Zelle)
   =========================================================== */
.aw-cell .subtext {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ===========================================================
   PRINT — alle Spalten zeigen, Grid wird Tabelle
   =========================================================== */
@media print {
  .aw-table-wrapper {
    overflow: visible !important;
    container-type: normal;
  }
  .col-priority-2,
  .col-priority-3 {
    display: flex !important;
  }
  .aw-cell {
    padding: 4pt 8pt;
    font-size: 9pt;
    border-bottom: 0.5pt solid var(--color-text-faint);
    min-height: auto;
    background: white !important;
  }
  .aw-row.is-header .aw-cell {
    font-weight: bold;
    border-bottom: 1pt solid var(--color-text);
    background: white !important;
  }
  .aw-row {
    break-inside: avoid;
  }
  /* Header wiederholt sich auf jeder Seite */
  .aw-row.is-header {
    display: table-header-group;
  }
}

/* ===========================================================
   GLOBALE STICKY-HEADER  (Patrick 2026-07-14, v329)
   Spaltenueberschriften bleiben beim Scrollen stehen — in JEDER
   Liste/Tabelle, damit man nie raten muss, welche Spalte was ist.

   Warum der Wrapper zum Scroll-Container wird: .aw-table-wrapper hatte
   overflow-x:auto + overflow-y:visible. Nach CSS-Spec berechnet sich
   'visible' dann zu 'auto' — der Wrapper WAR schon ein Y-Scroll-Container,
   nur ohne Hoehenlimit, also scrollte er nie. Das sticky am Header klebte
   damit am Wrapper-Rand statt am Viewport und wanderte beim Seiten-Scroll
   mit weg. Mit max-height scrollt die Tabelle in sich, und der Kopf steht.
   Das umgeht zugleich die sonst noetige Offset-Rechnerei gegen die
   ebenfalls sticky .rl-toolbar (variable Hoehe durch umbrechende Chips).
   =========================================================== */
:root {
  --aw-table-vh: calc(100vh - 260px);   /* Scroll-Viewport der Tabelle */
  --table-head-bg: var(--buero-card);   /* deckend, sonst scrollt Inhalt durch */
}

.aw-table-wrapper {
  overflow: auto;
  max-height: var(--aw-table-vh);
  overscroll-behavior: contain;
}
.aw-row.is-header .aw-cell {
  background: var(--table-head-bg);
}

/* Klassische <table>-Koepfe (rez-table, buero-table, u-tbl, nackte <table>).
   border-bottom rendert bei border-collapse + sticky nicht mit — daher
   inset-Schatten als Trennlinie. */
table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--table-head-bg);
  box-shadow: inset 0 -1px 0 var(--buero-border);
}

/* Ausnahme: Mini-Tabellen INNERHALB aufgeklappter Zeilen/Zellen — die haben
   keinen eigenen Scroll-Kontext, ein sticky Kopf wuerde dort nur flackern. */
.rl-expand table > thead > tr > th,
.aw-cell table > thead > tr > th,
.rl-lots > thead > tr > th {
  position: static;
  box-shadow: none;
}

/* Cockpit-Listen (av4): Header ist ein CSS-Grid ueber Accordion-Karten. */
.av4 .list-header {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--table-head-bg);
}

/* Kurze Tabellen sollen nicht kuenstlich gestaucht werden: greift nur, wenn
   die Liste ueberhaupt laenger als der Viewport ist (max-height, nicht height). */
@media (max-height: 700px) {
  :root { --aw-table-vh: calc(100vh - 180px); }
}