/* process-bottleneck.css — Dashboard ProcessBottleneck (Bar-Liste)

   Quelle: extrahiert aus dashboard.css ("ProcessBottleneck"-Block). Inhalt 1:1.
   Konsumenten: web/js/domain/dashboard/process-bottleneck.js — rendert eine
   Bar-Liste mit fester Label-Spalte, flexiblem Balken und fester Count-Spalte.
   Spaltenbreiten via Custom-Properties (--dash-bn-label-w, --dash-bn-count-w)
   am Host konfigurierbar — Balken beginnen bei jeder Zeile buendig.

   Tone-Varianten: --success, --warning, --overdue, --default, --info.
   ========================================================================== */

.dash-bottleneck-body { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
/* DASH-G2: Feste Label-Spalte + flexibler Balken + feste Count-Spalte.
   Spaltenbreiten via Custom-Properties am .dash-bottleneck-Host konfigurierbar.
   So beginnen Balken bei JEDER Zeile buendig — egal wie lang das Label ist. */
.dash-bottleneck { --dash-bn-label-w: 180px; --dash-bn-count-w: 64px; }
.dash-bottleneck .dash-bar-row {
  display: grid;
  grid-template-columns: var(--dash-bn-label-w, 180px) minmax(0, 1fr) var(--dash-bn-count-w, 64px);
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-2, 8px);
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  border: none;
  text-align: left;
  transition: background var(--duration-quick) var(--ease-soft);
  font-family: inherit;
  color: inherit;
}
.dash-bottleneck .dash-bar-row .dash-bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dash-bottleneck .dash-bar-row .dash-bar-count,
.dash-bottleneck .dash-bar-row .dash-bar-ok {
  text-align: right;
  white-space: nowrap;
}
/* Mobile/Tablet: Label-Spalte schmaler, damit Balken sichtbar bleibt */
@media (max-width: 999px) {
  .dash-bottleneck { --dash-bn-label-w: 130px; --dash-bn-count-w: 56px; }
}
@media (max-width: 599px) {
  .dash-bottleneck { --dash-bn-label-w: 110px; --dash-bn-count-w: 50px; }
}
.dash-bottleneck .dash-bar-row.is-clickable { cursor: pointer; }
.dash-bottleneck .dash-bar-row.is-clickable:hover { background: var(--color-bg-subtle); }
.dash-bar-label {
  font-size: var(--fs-caption, 13px);
  color: var(--color-text-primary);
}
.dash-bar-track {
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-circular);
  overflow: hidden;
}
.dash-bar-row--success .dash-bar-fill { background: var(--status-success-fg); }
.dash-bar-row--warning .dash-bar-fill { background: var(--status-warning-fg); }
.dash-bar-row--overdue .dash-bar-fill { background: var(--status-danger-fg); }
.dash-bar-row--default .dash-bar-fill { background: var(--color-brand); }
/* 'info'-Tone = Brand-Blau (Backlog im
 Normalbereich, nicht kritisch). Vorher fehlte der Eintrag → fiel auf
 default zurueck (was hier zufaellig richtig aussah). Explizit dokumentiert. */
.dash-bar-row--info    .dash-bar-fill { background: var(--color-brand); }
.dash-bar-fill { display: block; height: 100%; transition: width var(--duration-normal) var(--ease-soft); }
.dash-bar-count {
  font-size: var(--fs-caption, 13px);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.dash-bar-ok {
  font-size: var(--fs-caption, 13px);
  color: var(--status-success-fg);
  font-weight: var(--fw-semibold, 600);
}

/* ──────────────────────────────────────────────────────────────────────
 Responsive (aus ehemaligem dashboard.css "Responsive"-Block extrahiert,
 ). Mobile-Override fuer .dash-bar-row.
 ────────────────────────────────────────────────────────────────────── */

/* Mobile (<600px): Bar-Row enger gepackt */
@media (max-width: 599px) {
  .dash-bar-row { grid-template-columns: minmax(80px, 1fr) 1fr auto; gap: var(--space-2); }
}