/* urlaub-kpi.css — Mein-Bereich Urlaub-KPI (Inline-Counter in der Urlaub-Karte)

 Quelle: extrahiert aus mein-bereich.css ("Zone B: Urlaub KPI"-Block,
 Inhalt 1:1.

 Konsumenten: web/js/sections/mein-bereich.js — rendert die Urlaub-Tile-
 Reihe (z.B. "Anspruch 30 / Genommen 12 / Geplant 5 / Rest 13") in der
 Urlaub-Karte mit farbigen Tone-Varianten je Counter.

 Tone-Modifier: --success, --warning, --overdue, --info, --muted.

 Alte `.uw-kpi*`-Layout (Tile-Variante vor 2026-05-06) wurde entfernt;
 nur die aktive Tile-Variante `.uw-kpi-row` + Sub-Klassen ist hier.
 ========================================================================== */

/* Inline-KPI-Counter in der Urlaub-Karte */
.uw-kpi-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.uw-kpi-tile { flex: 1; text-align: center; padding: var(--space-2) var(--space-1); border-radius: var(--surface-radius); background: var(--color-bg-subtle); border-left: var(--surface-accent-width) solid var(--color-border); }
.uw-kpi-tile .uw-kpi-value { display: block; font-size: var(--kpi-value-md); font-weight: var(--fw-bold); line-height: 1.2; }
.uw-kpi-tile .uw-kpi-label { display: block; font-size: var(--fs-badge); color: var(--color-text-muted); margin-top: var(--space-xxs); }
.uw-kpi-tile.tone-success { border-left-color: var(--status-success-fg); }
.uw-kpi-tile.tone-success .uw-kpi-value { color: var(--status-success-fg); }
.uw-kpi-tile.tone-warning { border-left-color: var(--status-warning-fg); }
.uw-kpi-tile.tone-warning .uw-kpi-value { color: var(--status-warning-fg); }
.uw-kpi-tile.tone-overdue { border-left-color: var(--status-danger-fg); }
.uw-kpi-tile.tone-overdue .uw-kpi-value { color: var(--status-danger-fg); }
.uw-kpi-tile.tone-info { border-left-color: var(--brand-default); }
.uw-kpi-tile.tone-info .uw-kpi-value { color: var(--brand-default); }
.uw-kpi-tile.tone-muted { border-left-color: var(--color-border); }
.uw-kpi-tile.tone-muted .uw-kpi-value { color: var(--color-text-muted); }

/* Urlaub-Progressbar (genommen + beantragt visualisiert mit zwei-farbigem Fill).
 Original aus mein-bereich.css, weil semantisch
 zur Urlaub-Funktionalitaet gehoerig. */
.uw-bar-wrap { height: 16px; background: var(--color-bg-selected); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-1-5); position: relative; }
/* Füllbreite + Versatz kommen als dynamischer Fortschritt über Custom-Properties
   (--uw-fill / --uw-left, inline gesetzt) — so bleiben die Layout-Properties width/
   left in der CSS statt als Inline-Layout-Style (Responsive-Regel; wie #27 enrich). */
.uw-bar-fill { width: var(--uw-fill, 0%); height: 100%; background: var(--brand-default); border-radius: var(--radius-lg); transition: width var(--duration-slower) var(--ease-soft); position: absolute; top: 0; left: 0; }
.uw-bar-fill--beantragt { left: var(--uw-left, 0); background: var(--status-success-bg); border-left: 1px solid var(--color-surface); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
/* Paket MB-Visualpolish: Ueberzieh-State bei genommen > anspruch */
.uw-bar-wrap--overdue .uw-bar-fill { background: var(--status-danger-fg); }
.uw-pct-overdue { color: var(--status-danger-fg); font-weight: var(--fw-semibold); }

.uw-beantragt-legend { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.uw-legend-dot { flex-shrink: 0; width: var(--space-2-5); height: var(--space-2-5); border-radius: var(--radius-xs); display: inline-block; }
.uw-legend-dot--genommen { background: var(--brand-default); }
.uw-legend-dot--beantragt { background: var(--status-success-bg); border: 1px solid var(--status-success-default); }
.uw-bar-meta { display: flex; justify-content: space-between; font-size: var(--fs-badge); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.uw-rest-info {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-badge);
  color: var(--color-text-muted);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-light);
}

/* Mobile (<600px): vier gleichwertige KPI-Kacheln nebeneinander werden zu eng
   (~80px/Kachel auf 375px → Wert + Label quetschen bzw. truncaten). Zweispaltiges
   Raster gibt jeder Kachel Luft (4 Kacheln → 2×2, 3 → 2+1). */
@media (max-width: 599px) {
  .uw-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}