/* assignee-load.css — Dashboard AssigneeLoad (Legacy, bleibt verfuegbar)

   Quelle: extrahiert aus dashboard.css ("AssigneeLoad"-Block aus dem
   Legacy-Sammelblock). Inhalt 1:1.

   Konsumenten:
   - web/js/domain/dashboard/assignee-load.js — Bearbeiter-Auslastung mit
     Chip- oder Block-Variante (chipStyle: 'chip' | 'block').

   Zwei Varianten:
   - .al-row + .al-chip-Familie: kompakte Zeilen mit Chips
   - .al-row--blocks + .al-block-Familie: groessere Werte-Bloecke (Wert oben,
     Label unten, gleichmaessig verteilt)

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

   `.al-avatar-fallback` ist hier definiert, wird aber auch von bar-list.css,
   gast-grid.css, assignee-grid.css als Compound genutzt. Bewusst hier
   gelassen (Quelle der Wahrheit) — wenn das pflegen schwer wird, koennte
   man es ggf. in einen shared-utility-File ziehen.
   ========================================================================== */

.dash-assignee { display: flex; flex-direction: column; gap: var(--space-1, 4px); }
/* Scrollbar wenn scrollMaxHeight gesetzt (Default 320). */
.dash-assignee.dash-assignee--scroll {
  /* Subtile Scroll-Andeutung: leichter Schatten oben/unten via mask-image. */
  scrollbar-gutter: stable;
}
.dash-assignee .al-row { display: grid; grid-template-columns: 32px minmax(120px, 1fr) auto; align-items: center; gap: var(--space-2, 8px); padding: var(--space-2, 8px); border-radius: var(--radius-sm); background: transparent; border: none; text-align: left; width: 100%; font-family: inherit; color: inherit; }
.dash-assignee .al-row.is-clickable { cursor: default; }
.dash-assignee .al-row.is-clickable:hover { background: var(--color-bg-muted); }
/* al-row-trigger ist die klickbare Avatar+Name-Zone; reagiert auf Hover. */
.dash-assignee .al-row .al-row-trigger {
  display: contents;
  cursor: inherit;
}
.dash-assignee .al-row.is-clickable .al-row-trigger {
  cursor: pointer;
}
/* Klickbare Chips: rendern als <button>, sollen wie span aussehen + Hover-State. */
.dash-assignee .al-row .al-chip,
.dash-assignee .al-row .al-block {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  font-family: inherit;
}
.dash-assignee .al-row .al-chip.is-clickable,
.dash-assignee .al-row .al-block.is-clickable {
  cursor: pointer;
  transition: filter var(--duration-quick), transform var(--duration-instant);
}
.dash-assignee .al-row .al-chip.is-clickable:hover,
.dash-assignee .al-row .al-block.is-clickable:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.dash-assignee .al-row .al-chip.is-clickable:active,
.dash-assignee .al-row .al-block.is-clickable:active {
  transform: translateY(0);
}
/* Tone-Border : kennzeichnet Bearbeiter
 mit verletzten / Warnungs-SLAs visuell auch ohne Chip-Lesen. */
.dash-assignee .al-row--overdue { box-shadow: inset 3px 0 0 0 var(--status-danger-fg); }
.dash-assignee .al-row--warning { box-shadow: inset 3px 0 0 0 var(--status-warning-fg); }
.al-row-name { font-size: var(--fs-caption, 13px); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-row-chips { display: inline-flex; gap: var(--space-1, 4px); flex-wrap: wrap; justify-content: flex-end; }
/* `.dash-host`-Prefix hebt Specificity auf 0,2,0 und schlaegt damit den
   `.app-scope button { background: none; padding: 0 }`-Reset aus app.css.
   Ohne Prefix wuerde der Reset Hintergrund + Padding der Werte-Buttons in
   der Bearbeiter-Auslastung leer machen. */
.dash-assignee .al-chip,
.al-chip { display: inline-flex; align-items: center; gap: var(--space-1, 4px); padding: var(--space-xxs) var(--space-2, 8px); border-radius: var(--radius-circular); font-size: var(--font-size-xs, 12px); background: var(--color-bg-muted); color: var(--color-text-secondary); }
.al-chip-val { font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums; }
/* Tone-Hintergruende auch mit .dash-host-Prefix gegen `.app-scope button`-Reset
   (siehe Block-Variante unten). */
.dash-assignee .al-chip--overdue,
.al-chip--overdue { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.dash-assignee .al-chip--warning,
.al-chip--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.dash-assignee .al-chip--info,
.al-chip--info { background: var(--status-info-bg); color: var(--status-info-fg); }
.dash-assignee .al-chip--muted,
.al-chip--muted { background: transparent; color: var(--color-text-muted); }

/* Block-Variante (chipStyle: 'block'): groessere Box, Wert oben, Label unten,
 alle Bloecke gleich breit verteilt. Pattern uebernommen vom alten Anfragen-
 Bearbeiter-Card-Layout. */
.dash-assignee .al-row--blocks { grid-template-columns: 32px minmax(140px, 1.4fr) minmax(0, 5fr); }
/* Audit-Fix DB06 2026-04-26: Block-Chips dynamisch nach tatsaechlicher Anzahl
   verteilen (auto-fit), nicht fix auf 6 Spalten — sonst leere Slots links
   neben Stunden/Kontingente und Werte landen mitten im Bildschirm.
   --al-block-cols kann vom Konsumer ueberschrieben werden (Default: 6 fuer
   Anfragen-Kompat). */
.dash-assignee .al-row--blocks .al-row-chips {
  display: grid;
  grid-template-columns: repeat(var(--al-block-cols, 6), minmax(0, 1fr));
  gap: var(--space-1);
  justify-content: end;
}
/* `.dash-host`-Prefix schlaegt `.app-scope button { background: none; padding: 0 }`
   (siehe Hinweis bei .al-chip). */
.dash-assignee .al-block,
.al-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxs);
  padding: var(--space-1-5) var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  min-width: 0;
  text-align: center;
  line-height: 1.1;
}
.al-block-val { font-weight: var(--fw-semibold, 600); font-variant-numeric: tabular-nums; font-size: 13px; }
.al-block-lbl { font-size: 10.5px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Spezifizitaets-Override: app.css setzt `.app-scope button { background: none }`
   (Specificity 0,1,1) und schluckt damit den Tone-Hintergrund der <button>-
   basierten al-block / al-chip Werte-Boxen. Mit `.dash-host`-Prefix erreichen
   wir 0,2,0 und schlagen den Reset. Das parallele Muster fuer .kpi-card etc.
   steht oben am Datei-Anfang. */
.dash-assignee .al-block--overdue,
.al-block--overdue { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.dash-assignee .al-block--warning,
.al-block--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.dash-assignee .al-block--info,
.al-block--info    { background: var(--status-info-bg); color: var(--status-info-fg); }
.dash-assignee .al-block--success,
.al-block--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.dash-assignee .al-block--muted,
.al-block--muted   { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.dash-assignee .al-block--default,
.al-block--default { background: var(--lod-darkblue-100); color: var(--lod-darkblue); }
.al-avatar-fallback { width: var(--al-avatar-size, 28px); height: var(--al-avatar-size, 28px); display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-muted); color: var(--color-text-muted); border-radius: 50%; font-size: 11px; font-weight: var(--fw-semibold, 600); }