/* daily-chart.css — Dashboard DailyChart (Custom-SVG + Frappe-basiert)

   Quelle: extrahiert aus dashboard.css ("DailyChart"-Block). Inhalt 1:1.

   Konsumenten:
   - web/js/domain/dashboard/daily-chart.js — rendert Custom-SVG mit
     `.dc-*`-Klassen (`.dc-svg`, `.dc-bar`, `.dc-grid`, `.dc-hover`, `.dc-y-label`).
   - window.TimeBucketBars (Paket KONT-V2 Audit-Promotion 2026-04-26) nutzt
     dieselbe SVG-Struktur mit `.tbb-*`-Klassen — Selektoren werden hier
     gespiegelt damit beide identisch aussehen.

   Tooltip-Klassen `.dc-tooltip*` liegen separat in chart-tooltip.css
   (geteilt mit StatusDonut).

   Frappe-Chart-Anpassungen: SVG-Text + Achsen-Linien ueberschreiben Frappe-
   Defaults (zu hellgrau, schlecht lesbar). Frappe-eigene Legende wird
   verborgen — eigene HTML-Legende unter dem Chart in `.dash-daily-legend`.
   ========================================================================== */

.dash-daily-head {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--fs-caption, 13px);
  color: var(--color-text-muted);
}
.dash-legend-spacer { flex: 1; }

/* Custom-SVG-Chart-Host: feste Hoehe + relative Positionierung fuer Tooltip.
   Anfragen-Pattern: ~150px Hoehe (60% des früheren 240). */
.dash-daily-chart-host {
  position: relative;
  width: 100%;
  min-height: 150px;
}
.dash-daily-chart-host .dc-svg {
  display: block;
  width: 100%;
  height: 150px;
}
.dash-daily-chart-host .dc-grid {
  stroke: var(--color-border-light);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.dash-daily-chart-host .dc-y-label,
.dash-daily-chart-host .dc-x-label {
  font-family: inherit;
  font-size: 10.5px;
  fill: var(--color-text-muted);
}
.dash-daily-chart-host .dc-bar {
  transition: opacity var(--duration-quick);
  cursor: pointer;
}
.dash-daily-chart-host .dc-bar:hover { opacity: 0.85; }
.dash-daily-chart-host .dc-hover {
  cursor: pointer;
}

/* TimeBucketBars-Block (`.tbb-*`) 2026-05-08 nach domain/charts/time-bucket-
 bars.css verschoben. */

/* Legend-Linie im Tooltip (Reference). `.dash-daily-legend .tbb-legend-line`
   liegt in time-bucket-bars.css — der `.kvc-tip-line`-Counterpart bleibt hier
   weil er zum Tooltip-Rendering gehoert (kvc = key-value-chart). */
.dc-tooltip .kvc-tip-line { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: var(--space-1); }

/* Frappe-Default-Legende NICHT ausblenden — sie rendert die "Neu / Erledigt"-
   Beschriftung als SVG-Text-Elemente unter dem Chart. Wir stylen sie nur
   typografisch passender. */

/* Frappe-Achsen-Beschriftung: Schriftgroesse + Farbe an LoD-Stil anpassen.
   Default ist sehr schwach grau und nicht-lesbar. */
.dash-daily-chart-host .y.axis text,
.dash-daily-chart-host .x.axis text,
.dash-daily-chart-host .chart-label,
.dash-daily-chart-host text.x-value-text,
.dash-daily-chart-host text.y-value-text {
  fill: var(--color-text-muted) !important;
  font-family: inherit !important;
  font-size: 11px !important;
}

/* Achsen-Linien dezenter */
.dash-daily-chart-host .y.axis line,
.dash-daily-chart-host .x.axis line {
  stroke: var(--color-border-light) !important;
}

/* Frappe-Legende (SVG) verstecken — wir rendern eine eigene HTML-Legende
   im daily-chart.js (saubere Color-Dots, ohne lange Linien). */
.dash-daily-chart-host .chart-legend,
.dash-daily-chart-host g.legend,
.dash-daily-chart-host g.dataset-units g.legend {
  display: none !important;
}

/* Eigene HTML-Legende unter dem Chart */
/* ── Legende: zwei Zonen ────────────────────────────────────────────────────
   ★★ DIE HÖHE DER LEGENDE DARF NICHT AN DER ZAHL DER KATEGORIEN HÄNGEN. Vorher war das
   hier EIN `flex-wrap`-Container mit Chips UND dem Aufrufer-Slot darin: acht
   Projekt-Kategorien brachen auf zwei Zeilen um, schoben den Slot (Pille + Hinweis) mit
   nach unten, und die Legende lief aus der Karte (im Browser gemessen 73px Legende bei
   57px Platz — der Rest weggeschnitten, weil die Karte `overflow:hidden` trägt).
   Jetzt gibt die CHIP-Zone nach und ist gedeckelt; der Slot behält seine Zeile.
   `align-items: flex-start`, damit eine zweizeilige Chip-Zone den Slot nicht vertikal
   mittig wegzieht. */
.dash-daily-legend {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 0 var(--space-2-5) var(--space-1);
  font-size: 11.5px;
  color: var(--slate-600);
}
/* Die Chip-Zone: bricht um, ist in der Höhe gedeckelt und scrollt in sich, wenn mehr
   Kategorien kommen als zwei Zeilen tragen. Der Deckel ist eine Variable, weil Flächen mit
   FESTER Kartenhöhe (Auswertung „Zeit je Tag") ihn auf einen konstanten Wert setzen: dort
   darf die Legende auch bei einer Kategorie nicht kleiner werden, sonst wandert das
   Diagramm beim Wechsel der Aufteilung. Ohne Vorgabe bleibt es beim bisherigen Verhalten
   (Höhe folgt dem Inhalt, gedeckelt auf zwei Zeilen). */
.dash-daily-legend-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
  height: var(--tbb-legend-h, auto);
  max-height: var(--tbb-legend-h, 38px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.dash-daily-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-weight: 500;
  /* Deckel je Chip: ein Kategorie-Name kann beliebig lang sein („RECOM Recycling GmbH -
     Dynamics 365 Projekt"), die Legende ist aber eine Zuordnung Farbe→Name und keine
     Textspalte. Der volle Name steht im `title` (vom Modul gesetzt). */
  max-width: 200px;
  min-width: 0;
}
/* Die Ellipse braucht diesen inneren Span: am `inline-flex`-Chip greift `text-overflow`
   nicht (der Textknoten wäre ein anonymes Flex-Item). */
.dash-daily-legend-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-daily-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
/* Domain-Slot rechts in der Legende — z.B. "Heute: 1 ein, 0 aus (+1)" im
 Anfragen-Dashboard. */
/* ★★ DER SLOT GIBT NICHT NACH (`flex: 0 0 auto`) — die Chip-Zone tut es. Mit `1 1 auto` an
   beiden drückte die Chip-Zone den Slot auf seine Mindestbreite, und dessen Inhalt
   (Aufteilungs-Pille + Bedien-Hinweis) brach INTERN um: im Browser gemessen 76px Slot statt
   30px, und damit lief die Legende erneut aus der Karte — derselbe Befund wie vorher, nur an
   der anderen Zone. Der Slot trägt Bedienelemente mit festem Platzbedarf, die Chips sind das
   Nachgebende. */
.dash-daily-legend-extra {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--lod-gray-600);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
}
.dash-daily-legend-extra strong { color: var(--lod-darkblue); font-weight: 600; }
.dash-daily-legend-extra .delta-pos { color: var(--status-success-fg); }
.dash-daily-legend-extra .delta-neg { color: var(--status-danger-fg); }
.dash-daily-legend-extra .delta-zero { color: var(--lod-gray-500); }

/* Range-Switcher als app-segmented (nutzt PillSwitch-Thumb) — wird vom
   TimeBucketBars-Modul (web/js/domain/charts/time-bucket-bars.js) gerendert. */
.dash-range-pill {
  /* erbt app-segmented aus app-toolbar.css */
  --pill-thumb-bg: var(--color-surface);
}