/* time-widget.css — Mein-Tag Time-Widget (Stunden-pro-Tag-Balkendiagramm)

   Quelle: extrahiert aus mein-tag.css ("Time mini widget"-Block, Refactor
   2026-05-01). Inhalt 1:1.

   Konsumenten: web/js/sections/mein-tag.js — rendert in der rechten Spalte
   ein SVG-Balkendiagramm mit gebuchten Stunden pro Wochentag, plus Soll-
   Linie bei 8h. "Heute"-Variante mit Tuerkis-Glow.

   2026-05-01 Refactor: vorher Linien-Chart, jetzt Balkendiagramm:
   - Bars mit Gradient (DarkBlue oben → unten dunkler)
   - Heute mit Tuerkis-Gradient + helleren Wert-Labels
   - Soll-Linie bei 8h (gestrichelt, dezent)
   - Hover-Lift via CSS-Transform
   - Tooltip ueber natives <title> innerhalb des <rect>
   ========================================================================== */

.zw-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
  gap: var(--space-1);
}
.zw-kw { font-size: var(--fs-meta); color: var(--color-text-muted); }
.zw-gesamt { font-size: var(--fs-body); color: var(--color-text); }
.zw-gesamt strong {
  font-weight: var(--fw-bold);
  color: var(--lod-darkblue);
  font-variant-numeric: tabular-nums;
}
.zw-chart {
  width: 100%;
  height: auto;
  max-height: 200px;
  display: block;
  overflow: visible;
}

/* Y-Achse + Referenzlinien */
.zw-ref-line {
  stroke: var(--color-border);
  stroke-width: 0.5;
  stroke-dasharray: 3 3;
}
.zw-y-label {
  font-size: var(--font-size-xs);
  fill: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Soll-Linie (8h Default-Arbeitstag) — etwas praegnanter als die Ref-Linien,
   aber immer noch dezent. Tuerkis-Akzent damit's auf den ersten Blick als
   "Ziel" erkannt wird. */
.zw-soll-line {
  stroke: var(--lod-turquoise);
  stroke-width: 1.2;
  stroke-dasharray: 6 4;
  opacity: 0.55;
}
/* SVG-Chart-Labels (Soll/Achse/Wert) nutzen bewusst Sub-Token-Groessen
   (9–10.5px) fuer die Balken-Beschriftung — kleiner als --font-size-xs (10px),
   kein Typo-Token vorhanden; absichtlich als px. */
.zw-soll-label {
  font-size: 9.5px;
  font-weight: var(--fw-semibold);
  fill: var(--lod-turquoise-900);
  letter-spacing: 0.02em;
  /* Kontur in Flaechenfarbe: das Label liegt jetzt ueber den Balken und muss
     sowohl ueber dem hellen Track als auch ueber einem dunklen Balken lesbar
     bleiben. paint-order:stroke zeichnet die Kontur HINTER die Fuellung. */
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* Bar-Track: Hintergrund-Strich pro Tag, immer sichtbar. Macht den
   gesamten Slot klickbar/hoverbar und zeigt visuell das Plot-Volumen. */
.zw-bar-track {
  fill: var(--lod-gray-100);
  fill-opacity: 0.35;
  transition: fill-opacity var(--duration-quick);
}
.zw-bar-track--heute {
  fill: var(--lod-turquoise-100);
  fill-opacity: 0.45;
}
/* Arbeitszeitausgleich (Überstundenabbau): bucht 0 Zeit, erscheint daher nicht im
   amber PZE-Segment. Violetter Track-Tint macht den Abbau-Tag erkennbar, ohne das
   Soll zu füllen — das Defizit unter der Soll-Linie bleibt sichtbar. Steht bewusst
   VOR .zw-bar-track--selected, damit die Tagesauswahl den Tint überschreibt. */
.zw-bar-track--ausgleich {
  fill: var(--lod-violet);
  fill-opacity: 0.14;
}

/* Day-Selector: jeder Slot (Track) ist klickbar → Tag waehlen. */
.zw-bar-track[data-zw-datum],
.zw-bar[data-zw-datum] { cursor: pointer; }

/* Ausgewaehlter Tag (!= heute): Track-Tint + Balken-Ring in Brand-Farbe.
   Funktioniert auch fuer leere Tage (nur Track sichtbar). */
.zw-bar-track--selected {
  fill: var(--brand-default);
  fill-opacity: 0.16;
}
.zw-bar--selected {
  stroke: var(--brand-default);
  stroke-width: 2;
  paint-order: stroke;
}
/* Bei aktiver Auswahl die nicht-gewaehlten Balken dezent abdunkeln, damit der
   gewaehlte Tag im Fokus steht. */
.zw-chart.has-selection .zw-bar:not(.zw-bar--selected) {
  opacity: 0.4;
  transition: opacity var(--duration-quick);
}

/* Eigentlicher Balken */
.zw-bar {
  cursor: default;
  transition: filter var(--duration-snappy) var(--ease-soft), transform var(--duration-snappy) var(--ease-soft);
  transform-origin: bottom center;
}
.zw-bar:hover {
  filter: brightness(1.08);
}
.zw-bar--heute {
  /* Heute bekommt zusaetzlich einen leichten Glow, damit's auf den ersten Blick
     auffaellt. Color-mix gegen den Tuerkis-Akzent-Token (statt rohem rgba). */
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--lod-turquoise-cyan) 35%, transparent));
}
.zw-bar--heute:hover {
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--lod-turquoise-cyan) 50%, transparent)) brightness(1.05);
}

/* PZE-Segment (.zw-bar--pze): Urlaub/Krank/Schule/Feiertag, oben auf das Arbeits-
   Segment gestapelt (warmer Amber-Ton via JS-Gradient), erbt Hover von .zw-bar. */

/* Arbeitszeitausgleich-Basis-Marker: violetter Streifen am Boden des Slots (0 h
   gebucht — füllt NICHT bis zum Soll). Erbt Hover/Selection von .zw-bar. */
.zw-bar--ausgleich {
  fill: var(--lod-violet);
}

/* Wert-Labels ueber den Balken */
.zw-val-label {
  font-size: 10.5px;
  fill: var(--lod-darkblue);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.zw-val-label--heute {
  fill: var(--lod-turquoise-900);
  font-weight: var(--fw-bold);
}
/* Wert-Label bei reinem PZE-Tag (kein Arbeitssegment darunter) — Amber-Ton */
.zw-val-label--pze {
  fill: var(--lod-amber-800);
}
/* Reiner Arbeitszeitausgleich-Tag: kleines violettes "Ausgleich"-Label am Boden. */
.zw-val-label--ausgleich {
  fill: var(--lod-violet-700);
  font-size: 9.5px;
}

/* Header-Suffix "(+8h Abw.)" — Personalzeit-Summe in Klammern hinter Gesamt */
.zw-gesamt-pze {
  font-size: var(--fs-meta);
  color: var(--lod-amber-800);
  margin-left: var(--space-1);
  font-weight: var(--fw-medium);
}

/* Wochentag + Datum-Labels unter dem Chart */
.zw-wt-label {
  font-size: 10.5px;
  fill: var(--color-text-muted);
  font-weight: var(--fw-medium);
}
.zw-wt-label--heute {
  font-weight: var(--fw-bold);
  fill: var(--lod-turquoise-900);
}
.zw-dt-label {
  font-size: 9px;
  fill: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.zw-dt-label--heute {
  fill: var(--lod-turquoise-900);
  font-weight: var(--fw-semibold);
}

/* Chart-Legende (fakturierbar / intern / abwesenheit) — Stapel-Farb-Erklaerung. */
.zw-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
}
.zw-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.zw-legend-dot {
  width: var(--space-2-5);
  height: var(--space-2-5);
  border-radius: var(--radius-circular);
  flex-shrink: 0;
}
.zw-legend-dot--fakt { background: var(--lod-turquoise); }
.zw-legend-dot--intern { background: var(--lod-darkblue-700); }
.zw-legend-dot--pze { background: var(--lod-amber-600); }
.zw-legend-dot--ausgleich { background: var(--lod-violet); }

/* ==========================================================================
   KPI-Strip (Soll/Ist-Kacheln + Stichtag-Switch) oberhalb des Charts — mt-kpi.js
   Module-First: ViewSwitcher (Switch) + KpiTiles (Kacheln). Hier nur Layout +
   kompaktere Masse fuer die schmale Mein-Tag-Spalte.
   ========================================================================== */
.mt-zeit-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.mtk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.mtk-title {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: capitalize;
}
.mtk-switch { display: inline-flex; }
.mtk-tiles { width: 100%; }

/* Info-Toggle + Switch rechts im Head gruppiert. */
.mtk-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
/* Info-Button (Fluent info_24_regular SVG via ui-ico) — touch-taugliche Alternative
   zum reinen Hover-Tooltip. */
.mtk-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-circular);
  background: transparent;
  cursor: pointer;
  transition: background var(--duration-quick);
}
/* Groesse via .ui-ico.sm (16px, base.css). Hier nur die Tint: Fluent-SVG ist schwarz →
   muted-Grau, im Hover/aktiv Darkblue (gleiche Tint wie .ui-ico img Default in base.css). */
.mtk-info-btn .ui-ico img {
  filter: brightness(0) saturate(100%) invert(55%);
  transition: filter var(--duration-quick);
}
.mtk-info-btn:hover,
.mtk-info-btn[aria-expanded="true"] {
  background: var(--lod-gray-100);
}
.mtk-info-btn:hover .ui-ico img,
.mtk-info-btn[aria-expanded="true"] .ui-ico img {
  filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
}
.mtk-info-btn:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 1px;
}
/* Kennzahl-Legende: rendert das KpiLegend-SSOT (domain/dashboard/kpi-legend.css). */

/* Stichtag-Switch im engen Panel kompakter als der 36px-Default. */
.mt-zeit-kpi .anfr-view-switcher-btn {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
}
/* KPI-Kacheln im Strip kompakter (Default 78px/22px ist fuer die schmale
   Spalte zu wuchtig). */
.mt-zeit-kpi .kpi-tiles-grid { gap: var(--space-2); }
.mt-zeit-kpi .kpi-tile {
  min-height: 0;
  padding: var(--space-2) var(--space-2-5);
  /* Wert ueber alle Kacheln auf gleicher Hoehe: Default-space-between laesst den Wert
     einer Kachel OHNE Balken (z.B. Fakturierbar „kein Ziel") in die Mitte schweben.
     flex-start haelt Kopf+Wert+Sub oben buendig, der Balken bleibt unten gepinnt. */
  justify-content: flex-start;
}
.mt-zeit-kpi .kpi-tile-bar { margin-top: auto; }
/* KPI-Wertgroesse ist eine bewusste responsive Feinskala (18/17/20px je
   Breakpoint) fuer die Kachel-Balance — kein passendes Typo-Token (dazwischen
   liegend), daher hier absichtlich als px. */
.mt-zeit-kpi .kpi-tile-value { font-size: 18px; }

/* Notebook (1000–1399): Spalte schmaler — Switch-Labels noch kompakter. */
@media (max-width: 1399px) {
  .mt-zeit-kpi .anfr-view-switcher-btn { padding: var(--space-1) var(--space-1-5); }
}
/* Tablet (600–999): Head darf umbrechen, Wert dezent kleiner. */
@media (max-width: 999px) {
  .mtk-head { align-items: stretch; }
  .mt-zeit-kpi .kpi-tile-value { font-size: 17px; }
  /* Info-Toggle auf Touch-Min (36px) — Desktop bleibt kompakt 22px. Das 16px-Icon
     (.ui-ico.sm) sitzt in beiden Groessen sauber zentriert. */
  .mtk-info-btn { min-height: 36px; min-width: 36px; }
}
/* Mobile (<600): Spalte volle Breite — Kacheln duerfen wieder etwas groesser atmen. */
@media (max-width: 599px) {
  .mt-zeit-kpi .kpi-tile { padding: var(--space-2-5) var(--space-3); }
  .mt-zeit-kpi .kpi-tile-value { font-size: 20px; }
}