/* ============================================================================
   STYLE: Kompakt — MAXIMALE DATENDICHTE bei voller Lesbarkeit, aufgesetzt auf
   die WEB-DOM (Portal index.html + nve/hub styles.css + hub/dashboard.html).
   Signatur: kleinere Basis-Schrift, engere line-height, stark reduzierte
   Paddings/Margins/Gaps, kompaktere Komponenten-Höhen — damit grosse Tabellen
   (z.B. 851-Zeilen-Ladelisten) viel mehr auf einen Blick zeigen und weniger
   gescrollt werden muss.
   REIN LAYOUT/DICHTE: KEINE eigene Farbpalette, KEINE Farb-/Border-/Radius-
   Variablen werden gesetzt oder überschrieben. Farben, Border-Farbe und Radius
   kommen UNVERÄNDERT aus dem aktiven Theme (11 Themes). Geändert werden NUR
   padding, margin, gap, font-size, line-height und Komponenten-Höhen.
   Aktiv NUR bei <html data-style="kompakt">. JEDE Regel ist auf
   html[data-style="kompakt"] gescoped — kein globaler Leak.
   `!important` nur dort, wo der HUB-Seiten-Inline-<style> bzw. inline
   style="…"-Attribute (laden NACH dem <link> auf diese Datei) sonst gewinnen.
   Keine Animationen eingeführt; prefers-reduced-motion bleibt unberührt.
   ============================================================================ */

/* ---- Basis-Schrift kleiner, line-height enger ---- */
html[data-style="kompakt"],
html[data-style="kompakt"] body {
  font-size: 14px;
  line-height: 1.3;
}

/* Headlines kompakter (nur Größe/Abstand, keine Farbe) */
html[data-style="kompakt"] h1 {
  font-size: 19px;
  margin: 0 0 12px;
}
html[data-style="kompakt"] h2 {
  font-size: 15px;
  margin: 14px 0 8px;
}
html[data-style="kompakt"] h3 {
  font-size: 13px;
}

/* ===========================================================================
   PORTAL (index.html) — Variablen: --card --card-h --text --muted --border
                                    --nve --hub --page-bg
   =========================================================================== */

/* Topbar kompakter (sticky bleibt über die Basis erhalten) */
html[data-style="kompakt"] .topbar {
  padding: 10px 16px;
}
html[data-style="kompakt"] .brand {
  font-size: 15px;
}
html[data-style="kompakt"] .badge {
  font-size: 11px;
}
html[data-style="kompakt"] .theme-sel,
html[data-style="kompakt"] .fb-btn {
  font-size: 12px;
  padding: 6px 10px;
}
html[data-style="kompakt"] #adminFlag {
  font-size: 11px;
}

/* Portal-Hauptbereich dichter */
html[data-style="kompakt"] main {
  padding: 22px 16px;
}
html[data-style="kompakt"] .sub {
  font-size: 14px;
  margin-bottom: 22px;
}

/* Portal-Bereichskarten (.grid > .card): bleibt klickbare Kachel, nur kompakter */
html[data-style="kompakt"] .grid {
  gap: 12px;
}
html[data-style="kompakt"] .grid > .card {
  padding: 18px 16px;
  border-radius: 14px;
}
html[data-style="kompakt"] .ic {
  width: 44px;
  height: 44px;
  font-size: 23px;
  margin-bottom: 11px;
}
html[data-style="kompakt"] .ct {
  font-size: 17px;
  margin-bottom: 4px;
}
html[data-style="kompakt"] .cs {
  font-size: 13px;
  line-height: 1.4;
}
html[data-style="kompakt"] .go {
  margin-top: 12px;
  font-size: 13px;
}
html[data-style="kompakt"] .foot {
  font-size: 12px;
  margin-top: 20px;
}

/* Feedback-Modal kompakter */
html[data-style="kompakt"] .fb-modal {
  padding: 16px;
}
html[data-style="kompakt"] .fb-modal h2 { font-size: 17px; }
html[data-style="kompakt"] .fb-modal .fb-sub { font-size: 12px; margin-bottom: 12px; }
html[data-style="kompakt"] .fb-modal label { margin: 9px 0 4px; font-size: 12px; }
html[data-style="kompakt"] .fb-modal input,
html[data-style="kompakt"] .fb-modal textarea {
  padding: 8px 11px;
  font-size: 14px;
}
html[data-style="kompakt"] .fb-modal textarea { min-height: 96px; }
html[data-style="kompakt"] .fb-row { margin-top: 14px; }
html[data-style="kompakt"] .fb-row button { padding: 10px; font-size: 13px; }

/* Login-Gate kompakter */
html[data-style="kompakt"] .gate-box {
  padding: 20px 18px;
}
html[data-style="kompakt"] .gate-logo { font-size: 26px; margin-bottom: 5px; }
html[data-style="kompakt"] .gate-box h2 { font-size: 17px; }
html[data-style="kompakt"] .gate-sub { font-size: 12px; margin-bottom: 12px; }
html[data-style="kompakt"] .gate-box input {
  padding: 10px 12px;
  font-size: 15px;
}
html[data-style="kompakt"] .gate-box button {
  padding: 10px;
  font-size: 15px;
}

/* ===========================================================================
   NVE / HUB (nve/styles.css + hub/styles.css) — Variablen: --bg --bg-card
     --bg-card-hover --fg --fg-muted --accent --accent-hover --accent-fg
     --success --warning --error --border --radius --shadow
   =========================================================================== */

/* Topbar (nve/hub) kompakter */
html[data-style="kompakt"] .topbar .brand {
  font-size: 16px;
}
html[data-style="kompakt"] .topbar .back {
  font-size: 20px;
  padding: 2px 6px;
}
html[data-style="kompakt"] .topbar .home {
  font-size: 12px;
  padding: 4px 9px;
}
html[data-style="kompakt"] .status {
  font-size: 11px;
}

/* Container etwas breiter nutzbar + dichteres Padding. HUB setzt inline
   .container{max-width:1200px} (lädt NACH dieser Datei) → bleibt erhalten,
   wir reduzieren nur das Padding (kein !important nötig). */
html[data-style="kompakt"] .container {
  padding: 12px 14px 60px;
}

/* Karten/Sektionen: padding stark reduziert (20px→11px), Abstände kleiner */
html[data-style="kompakt"] .card {
  padding: 11px 13px;
  margin-bottom: 8px;
}

/* Stat-Grid: kompaktere KPI-Kacheln, kleinere Gaps */
html[data-style="kompakt"] .stat-grid {
  gap: 7px;
  margin-bottom: 12px;
}
html[data-style="kompakt"] .stat-card {
  padding: 9px 11px;
}
html[data-style="kompakt"] .stat-card .label {
  font-size: 10px;
}
html[data-style="kompakt"] .stat-card .value {
  font-size: 23px;
  margin-top: 2px;
}
html[data-style="kompakt"] .stat-card .sub {
  font-size: 11px;
  margin-top: 1px;
}

/* Menü-Grid (NVE-Startseite): kleinere Gaps, kompaktere Kacheln */
html[data-style="kompakt"] .menu-grid {
  gap: 9px;
}
html[data-style="kompakt"] .menu-card {
  padding: 14px 12px;
  min-height: 110px;
  gap: 6px;
}
html[data-style="kompakt"] .menu-icon { font-size: 28px; }
html[data-style="kompakt"] .menu-title { font-size: 15px; }
html[data-style="kompakt"] .menu-sub { font-size: 11px; }

/* Formulare: dichtere Felder */
html[data-style="kompakt"] .field { margin-bottom: 10px; }
html[data-style="kompakt"] label {
  font-size: 12px;
  margin-bottom: 4px;
}
html[data-style="kompakt"] input,
html[data-style="kompakt"] select,
html[data-style="kompakt"] textarea {
  padding: 8px 11px;
  font-size: 14px;
}

/* Buttons kompakter */
html[data-style="kompakt"] .btn {
  padding: 10px 16px;
  font-size: 14px;
}
html[data-style="kompakt"] .btn-group { gap: 6px; }

/* Tabellen: kompakte Schrift, dichtere Zellen */
html[data-style="kompakt"] table {
  font-size: 13px;
}
html[data-style="kompakt"] th,
html[data-style="kompakt"] td {
  padding: 3px 7px;
}
html[data-style="kompakt"] th {
  font-size: 11px;
}
html[data-style="kompakt"] td .row-actions { gap: 4px; }
html[data-style="kompakt"] td .row-actions button {
  padding: 4px 8px;
  font-size: 11px;
}

/* Toolbar / Zeilen dichter */
html[data-style="kompakt"] .toolbar {
  gap: 8px;
  margin-bottom: 10px;
}
html[data-style="kompakt"] .tb-filters { gap: 7px; }
html[data-style="kompakt"] .tb-actions { gap: 6px; }
html[data-style="kompakt"] .tb-actions .btn {
  flex: 1 1 130px;
  padding: 9px 11px;
  font-size: 13px;
}
html[data-style="kompakt"] .row { gap: 6px; }

/* Chips kleiner (KEIN text-transform: Chips tragen Datenwerte/Tour-Codes) */
html[data-style="kompakt"] .chip {
  padding: 2px 8px;
  font-size: 11px;
  margin-right: 4px;
}

/* Alerts kompakter */
html[data-style="kompakt"] .alert {
  padding: 9px 11px;
  margin-bottom: 8px;
  font-size: 13px;
}

/* Misc Listen / Leerzustände dichter */
html[data-style="kompakt"] .empty-state { padding: 22px 14px; font-size: 13px; }
html[data-style="kompakt"] .footnote { margin-top: 20px; font-size: 11px; }

/* Recent-Scans / Scan-Result (NVE) kompakter */
html[data-style="kompakt"] .recent-scans { margin-top: 12px; }
html[data-style="kompakt"] .scan-item {
  padding: 7px 10px;
  margin-bottom: 5px;
  font-size: 13px;
}
html[data-style="kompakt"] .scan-item .scan-meta { font-size: 11px; }
html[data-style="kompakt"] .scan-result {
  padding: 10px 12px;
  font-size: 13px;
}

/* Timeline (NVE) dichter */
html[data-style="kompakt"] .timeline { padding-left: 20px; }
html[data-style="kompakt"] .timeline-item {
  padding: 8px 11px;
  margin-bottom: 6px;
}
html[data-style="kompakt"] .timeline-item .ts { font-size: 11px; margin-bottom: 2px; }
html[data-style="kompakt"] .timeline-item .standort { font-size: 15px; margin-bottom: 2px; }
html[data-style="kompakt"] .timeline-item .fahrer { font-size: 12px; }

/* Toast etwas kompakter (Animation/opacity unberührt) */
html[data-style="kompakt"] .toast-overlay {
  padding: 18px 24px;
  font-size: 16px;
}

/* ===========================================================================
   HUB-SPEZIALKOMPONENTEN — inline im <style> von hub/dashboard.html gesetzt
   (lädt NACH dem <link> auf diese Datei) bzw. via inline style="…". Hier mit
   `!important` auf kompakte Paddings/Höhen/Schriftgrößen zwingen. KEINE Farben,
   Border-Farben oder Radien werden geändert — die kommen aus dem Inline-/Theme.
   =========================================================================== */

/* --- Zahlen-/Datums-Inputs in der Ladelisten-Tabelle ---
   Inline-Basis: .num-input{width:74px;padding:6px 8px;font-size:14px}
                 .date-input{padding:5px 7px;font-size:13px} → kompakter. */
html[data-style="kompakt"] .num-input,
html[data-style="kompakt"] .oel-input,
html[data-style="kompakt"] .colli-input {
  width: 60px !important;
  padding: 3px 6px !important;
  font-size: 13px !important;
}
html[data-style="kompakt"] .date-input {
  padding: 3px 6px !important;
  font-size: 13px !important;
}

/* --- .mini: kompakte Mikrozeile --- */
html[data-style="kompakt"] .mini { font-size: 11px !important; }

/* --- table.tight (HUB-Ladelisten): inline padding 8px 10px → dicht --- */
html[data-style="kompakt"] table.tight th,
html[data-style="kompakt"] table.tight td { padding: 3px 7px !important; }

/* --- Map-Toggle: kompaktere Segment-Buttons (Farben bleiben) --- */
html[data-style="kompakt"] .map-toggle { gap: 4px; }
html[data-style="kompakt"] .map-metric {
  padding: 4px 9px !important;
  font-size: 11px !important;
}

/* --- Finanz-Banner kompakter (Farben/Border/Radius unverändert) --- */
html[data-style="kompakt"] .fin-banner {
  font-size: 15px !important;
  padding: 10px 13px !important;
  margin-bottom: 10px !important;
}

/* --- Insights: kleinere Gaps + dichtere Highlight-Kacheln --- */
html[data-style="kompakt"] .ins-grid { gap: 7px !important; margin-bottom: 10px !important; }
html[data-style="kompakt"] .ins-cols { gap: 12px !important; }
html[data-style="kompakt"] .ins-hl {
  gap: 9px !important;
  padding: 8px 10px !important;
}
html[data-style="kompakt"] .ins-hl .ico { font-size: 17px !important; }
html[data-style="kompakt"] .ins-hl .lbl { font-size: 10px !important; }
html[data-style="kompakt"] .ins-hl .val { font-size: 13px !important; margin-top: 1px !important; }
html[data-style="kompakt"] .ins-cols h3 { font-size: 11px !important; margin: 0 0 3px !important; }
html[data-style="kompakt"] .ins-comment { margin: 0 0 10px !important; }

/* --- Scroll-Container etwas höher: mehr Zeilen pro Bildschirm sichtbar --- */
html[data-style="kompakt"] .scroll-360 { max-height: 520px; }

/* --- Depot-Drilldown-Panel kompakter --- */
html[data-style="kompakt"] .depot-panel { padding: 16px !important; }
html[data-style="kompakt"] .dp-head { margin-bottom: 11px !important; }
html[data-style="kompakt"] .dp-title { font-size: 18px !important; }
html[data-style="kompakt"] .dp-share { font-size: 11px !important; }
html[data-style="kompakt"] .dp-close { font-size: 20px !important; }
html[data-style="kompakt"] .dp-kpis { gap: 6px !important; margin-bottom: 11px !important; }
html[data-style="kompakt"] .dp-kpis > div { padding: 6px 9px !important; font-size: 10px !important; }
html[data-style="kompakt"] .dp-kpis b { font-size: 14px !important; margin-top: 1px !important; }
html[data-style="kompakt"] .dp-controls { gap: 12px !important; margin-bottom: 8px !important; }
html[data-style="kompakt"] .dp-seg .lbl { font-size: 10px !important; }
html[data-style="kompakt"] .dp-seg button { padding: 4px 9px !important; font-size: 11px !important; }
html[data-style="kompakt"] .dp-chart { padding: 10px 10px 6px !important; margin-bottom: 12px !important; }
html[data-style="kompakt"] .dp-legend { gap: 12px !important; margin-top: 6px !important; font-size: 10px !important; }
html[data-style="kompakt"] .dp-section h4 { font-size: 11px !important; margin: 0 0 5px !important; }

/* ===========================================================================
   RESPONSIVE — mobile-first; <=640px weiterhin dicht & sauber lesbar.
   Tabellen scrollen wie gehabt horizontal im .table-wrap (overflow-x:auto).
   =========================================================================== */
@media (max-width: 640px) {
  html[data-style="kompakt"],
  html[data-style="kompakt"] body { font-size: 13px; }
  html[data-style="kompakt"] .container { padding: 10px 9px 56px; }
  html[data-style="kompakt"] main { padding: 16px 10px; }
  html[data-style="kompakt"] .topbar { padding: 8px 10px; }
  html[data-style="kompakt"] .stat-card .value { font-size: 20px; }
  html[data-style="kompakt"] .tb-actions .btn { flex: 1 1 100%; }
  html[data-style="kompakt"] .num-input,
  html[data-style="kompakt"] .oel-input,
  html[data-style="kompakt"] .colli-input { width: 52px !important; }
}
