/* 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 */
.dash-daily-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-2-5) var(--space-1);
  font-size: 11.5px;
  color: var(--slate-600);
}
.dash-daily-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-weight: 500;
}
.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. */
.dash-daily-legend-extra {
  margin-left: 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);
}