/* ==========================================================================
 dashboard.css — Dashboard-V2 Shell + Card-Reset + Card-Head/Body/Title-
 Tone-Varianten

 Konsumenten:
 web/js/domain/dashboard/dashboard.js (SSOT-Renderer)
 web/js/domain/dashboard/tabs-container.js, attention-banner.js, ...
 ueber Sections aufgerufen aus: vertrieb.js, kontingente.js, anfragen.js,
 wissen.js, projekte.js

 Diese Datei enthaelt nur die Shell:
 - Card-Reset (button-Reset fuer .kpi-card / .gg-card / .pm-item / .al-row /
 .gl-row / .dash-bar-row gegen den `.app-scope button`-Reset)
 - Layout (.dash-host, .dash-grid, .dash-card)
 - Card-Head (.dash-card-head, .dash-card-ico, .dash-card-title) +
 Tone-Varianten — von ALLEN Sub-Modulen genutzt
 - Card-Body / Card-Subtitle / Card-Spacer
 - Block-Title / Block-Empty (BarList + AttentionBanner Section-Header)
 - Shell-Responsive (.dash-host / .dash-grid / .dash-card auf Tablet+Mobile)

 Sub-Module liegen unter web/styles/domain/dashboard/<modul>.css und
 werden in index.html sequenziell nach dashboard.css geladen.

 Aus web/styles/dashboard.css verschoben in die
 Mirror-Topologie zu web/js/domain/dashboard/. Damit liegen Shell + alle
 Sub-Module im selben Verzeichnis als 1:1-Spiegel zur JS-Topologie.
 ========================================================================== */

/* Spezifizitaets-Override: app.css setzt
   `.app-scope button { border: none; background: none; padding: 0 }`
   — das schluckt unsere Card-Styles fuer alle <button>-basierten Karten
   (kpi-card, gg-card, etc.). Wir spiegeln die Defaults hier zurueck.
   Spezifizitaet 0,2,0 schlaegt 0,1,1 dank zwei Klassen.

   WICHTIG: gescoped auf die MODUL-EIGENE Wurzelklasse (die das jeweilige
   Sub-Modul selbst auf seinen Host setzt: KpiGrid→.kpi-grid, GastGrid→
   .dash-gast-grid, …), NICHT auf `.dash-host`. Sonst greift der Reset nur
   wenn das Modul in einer Dashboard-Huelle sitzt und bricht bei Standalone-
   Wiederverwendung (Liquiditaet-Bug). Regel: Modul-CSS ist self-scoped —
   siehe web/CLAUDE.md und `npm run check:css-scope`. */
.kpi-grid .kpi-card,
.dash-gast-grid .gg-card,
.dash-pressure .pm-item,
.dash-assignee .al-row,
.dash-gast-list .gl-row,
.dash-bottleneck .dash-bar-row {
  border: 1px solid transparent;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

/* Desktop ≥1000px: Dashboard fuellt EXAKT eine Bildschirmhoehe (kein Scroll).
   Mobile/Tablet: natuerliches Scrolling. .dash-scroll-host ist der Outer-
   Container der Section-Dashboards (s-projekte/s-wissen/s-firmen/…) — wir
   setzen ihn auf 100% Hoehe und verteilen die Reihen via flex-grow.
   SSOT: Basis + Kind-Mount leben HIER, nicht in den Section-CSS. */
.dash-scroll-host {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Das einzige Kind ist der Section-Mount ([data-*-dash-host]) — generisch
   gestylt, damit nicht jede Section ihr Attribut-Pendant duplizieren muss. */
.dash-scroll-host > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (max-width: 999px) {
  .dash-scroll-host { overflow-y: auto; display: block; }
  .dash-scroll-host > div { display: block; }
}

.dash-host {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* Grid-Reihen werden vom Modul Dashboard.create dynamisch gesetzt:
   --dash-grid-rows enthaelt z.B. "auto auto minmax(0, 1fr)" — Reihen mit
   einer fillHeight-Card bekommen 1fr, alle anderen auto. Faellt das Property
   weg (= keine row-Props), greift der Default min-content (auto-flow). */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: var(--dash-grid-rows, none);
  grid-auto-rows: min-content;
  gap: var(--space-4);
  flex: 1;
  min-height: 0;
}

/* Card kann per --dash-row-span ueber mehrere Reihen gespannt werden. */
.dash-card { grid-row: span var(--dash-row-span, 1); }

/* Auf Desktop ueberlaeuft das Dashboard NIE — Cards skalieren sich klein.
   Auf kleineren Bildschirmen darf gescrollt werden. */
@media (min-width: 1000px) {
  .dash-scroll-host { overflow: hidden; }
}

.dash-card {
  grid-column: span var(--dash-span, 6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
  overflow: hidden;  /* Card haelt ihre Hoehe, Body scrollt bei Bedarf */
}

/* DASH-G3/G4: align-self pro Card via data-dash-align (Default: stretch =
   Equal-Height in Grid-Zeile). align="start" = wachsend nach Inhalt. */
.dash-card[data-dash-align="start"]    { align-self: start; }
.dash-card[data-dash-align="stretch"]  { align-self: stretch; }

/* DASH-G4: variant="frameless" = ohne eigene Frame (z.B. KPI-Reihe). */
.dash-card[data-dash-variant="frameless"] {
  background: transparent;
  border: none;
  padding: 0;
}

/* DASH-G4: scrollBody = Body scrollt intern, fillHeight = Body wird gestreckt
   damit der interne Scroll-Container die volle Hoehe nutzt. */
.dash-card[data-dash-fill="true"] {
  min-height: 0;
}
.dash-card[data-dash-fill="true"] .dash-card-body {
  flex: 1 1 auto;
  min-height: 0;
}
.dash-card[data-dash-scroll="true"] .dash-card-body {
  overflow-y: auto;
  scrollbar-width: thin;
}
.dash-card[data-dash-scroll="true"] .dash-card-body::-webkit-scrollbar {
  width: 6px;
}
.dash-card[data-dash-scroll="true"] .dash-card-body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-xs);
}

/* Body-Overflow expliziter Override (z.B. attention-banner braucht visible). */
.dash-card-body[data-dash-body-overflow="visible"] { overflow: visible; flex: 0 0 auto; }
.dash-card-body[data-dash-body-overflow="auto"]    { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* Wenn Body visible ist, muss auch die Card visible sein, sonst wird der
   Inhalt am Card-Rand geclippt. */
.dash-card:has(.dash-card-body[data-dash-body-overflow="visible"]) {
  overflow: visible;
}

/* DASH-G4: collapseWhenEmpty = Card verschwindet wenn der Body-Inhalt
   .is-empty gesetzt hat (z.B. AttentionBanner ohne aktive Items). */
.dash-card[data-dash-collapse-empty="true"] {
  overflow: visible;
}
.dash-card[data-dash-collapse-empty="true"] .dash-card-body {
  overflow: visible;
}
.dash-card[data-dash-collapse-empty="true"]:has(.is-empty) {
  display: none;
}

/* Section-Titel global: UPPERCASE-Schrift mit subtle letter-spacing.
   Default-Variante (titleSize='lg') ist groesser + farbig je Tone — s. DASH-G1.
   Auf Mobile werden Titel etwas kleiner. */
.dash-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1-5);
}
.dash-card-ico {
  display: inline-flex;
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}
.dash-card-head[data-title-size="sm"] .dash-card-ico { width: 14px; height: 14px; opacity: 0.55; }
.dash-card-head[data-title-size="md"] .dash-card-ico { width: 15px; height: 15px; }
.dash-card-head[data-title-size="lg"] .dash-card-ico { width: 18px; height: 18px; }
.dash-card-ico img { width: 100%; height: 100%; display: block; }
.dash-card-title {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--slate-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  /* In schmalen Card-Slots (z.B. Donut span 2-3 bei Notebook-Breite) darf der
     Titel nicht ueber die Card hinauslaufen: im Flex-Head schrumpfbar machen
     und lange Einzelwoerter umbrechen statt ueberlaufen. */
  min-width: 0;
  overflow-wrap: break-word;
}
/* Groessen-Varianten (DASH-G1) */
.dash-card-title--sm { font-size: var(--font-size-sm); letter-spacing: 0.08em; color: var(--slate-700); }
.dash-card-title--md { font-size: 13px; letter-spacing: 0.06em; }
.dash-card-title--lg { font-size: 15px; letter-spacing: 0.04em; }

/* Tone-Varianten (DASH-G1)
   Faerben Titel-Text + Icon-SVG (Filter-Trick wie bei KPI-Cards). */
.dash-card-title--default { color: var(--slate-700); }
.dash-card-ico--default { filter: brightness(0.55); opacity: 0.7; }

.dash-card-title--info { color: var(--color-brand); }
.dash-card-ico--info {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(2050%) hue-rotate(217deg) brightness(96%) contrast(91%);
}

.dash-card-title--warning { color: var(--status-warning-fg); }
.dash-card-ico--warning {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(33%) sepia(98%) saturate(1870%) hue-rotate(15deg) brightness(89%) contrast(92%);
}

.dash-card-title--overdue { color: var(--status-danger-fg); }
.dash-card-ico--overdue {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(20%) sepia(73%) saturate(3540%) hue-rotate(353deg) brightness(86%) contrast(93%);
}

.dash-card-title--success { color: var(--status-success-fg); }
.dash-card-ico--success {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(31%) sepia(95%) saturate(1116%) hue-rotate(140deg) brightness(94%) contrast(101%);
}

.dash-card-title--muted { color: var(--color-text-muted); }
.dash-card-ico--muted { filter: brightness(0.5); opacity: 0.5; }

/* Mobile: Titel etwas kleiner damit nichts umbricht */
@media (max-width: 599px) {
  .dash-card-title--lg { font-size: 13px; letter-spacing: 0.06em; }
  .dash-card-title--md { font-size: var(--font-size-sm); letter-spacing: 0.07em; }
}

.dash-card-spacer { flex: 1; min-width: 8px; }
.dash-card-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--slate-500);
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}
.dash-card-subtitle:empty { display: none; }

/* (.dash-card-body Definition siehe oben) */

.dash-block-title {
  font-size: var(--fs-body, 14px);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2, 8px);
}
.dash-block-empty {
  padding: var(--space-4, 16px);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-caption, 13px);
}

/* ════════════════════════════════════════════════════════════════════════════
 Sub-Modul-CSS . In Lade-Reihenfolge:

 /styles/domain/dashboard/tabs-container.css (Block B)
 /styles/domain/dashboard/bar-list.css (Block C)
 /styles/domain/dashboard/status-donut.css (Block D)
 /styles/domain/dashboard/kpi-grid.css (Block E + MiniSpark)
 /styles/domain/dashboard/process-bottleneck.css (Block F)
 /styles/domain/dashboard/daily-chart.css (Block G + TimeBucketBars + .dash-range-pill)
 /styles/domain/dashboard/chart-tooltip.css (Block H — geteilt von DailyChart + StatusDonut)
 /styles/domain/dashboard/gast-grid.css (Block I)
 /styles/domain/dashboard/attention-banner.css (Block J)
 /styles/domain/dashboard/assignee-grid.css (Block K)
 /styles/domain/dashboard/pressure-monitor.css (Block L Sub: .pm-*)
 /styles/domain/dashboard/assignee-load.css (Block L Sub: .al-* + .al-avatar-fallback)
 /styles/domain/dashboard/gast-list.css (Block L Sub: .gl-*)
 /styles/domain/dashboard/daily-bars.css (Block L Sub: .dash-day-*)

 Modul-spezifische Responsive-Overrides leben JEWEILS im Modul-File,
 nicht zentral hier am Datei-Ende. Nur Shell-Responsive bleibt unten.
 ════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive — nur Shell-Layout (Host, Grid, Card)
   Desktop ≥1000px: Single-Page (kein Scroll). Tablet/Mobile: natuerliches
   Scrolling mit normalem Card-Layout.

   Modul-spezifische Responsive-Overrides liegen Phase-3-konform JEWEILS
   im Modul-CSS unter web/styles/domain/dashboard/:
   - kpi-grid.css           — .kpi-grid + .kpi-card Mobile-Sizes
   - assignee-grid.css      — .dash-assignee-list Spalten + .dash-asg-stat-val
   - gast-grid.css          — .dash-gast-grid Spalten
   - process-bottleneck.css — .dash-bar-row Mobile-Pack
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet (≤999px): Single-Page-Modus aufgehoben — Cards atmen, Scroll im Outer */
@media (max-width: 999px) {
  .dash-host { height: auto; padding: var(--space-3); }
  .dash-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    flex: none;
  }
  .dash-card { grid-column: span 6; overflow: visible; }
  .dash-card-body { overflow: visible; }
}

/* Mobile (<600px): 1-spaltig */
@media (max-width: 599px) {
  .dash-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .dash-card { grid-column: span 1; padding: var(--space-3); }
}