/* grouped-list.css — Modul-SSOT fuer gruppierte Listen.
 Markup-Modul: web/js/components/lists/grouped-list.js
 aus components.css extrahiert.

 Konsumenten: Mein-Tag (Aufgaben/Anfragen/VK), Anfragen-Gast,
 Wissen-Gast, Vertrieb-Workspace, Gast-Vertraege. */

/* GroupedList Grundstruktur (Modul-agnostisch). */
.grouped-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Density-Modifier 'airy': groesserer Inter-Group-Gap, wenn die umgebende
   Toolbar eigenes padding-bottom hat und damit ein groesserer visueller
   Whitespace-Block ueber dem ersten Header entsteht. Aktuell: Vertrieb. */
.grouped-list--airy { gap: var(--space-7); }

.gl-group { display: flex; flex-direction: column; gap: var(--space-2); }
.gl-group-header {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-1);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.gl-group-label { line-height: 1; }
.gl-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-grouped-count);
  background: var(--lod-gray-100);
  color: var(--lod-gray-600);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}
.gl-group-cards { display: flex; flex-direction: column; gap: var(--space-2); }
/* Listen-Stagger (Charakter B) — Karten treffen gestaffelt ein (Cascade-Feel)
   statt alle gleichzeitig. Nur die ersten 8 staffeln (danach gemeinsam), damit
   lange Listen nicht traege wirken. Subtiles translateY + Fade, ease-out.
   prefers-reduced-motion ist global (base.css) abgefangen. Stagger-Schrittweite
   via --motion-stagger zentral tunebar. */
/* fill-mode: backwards (NICHT both) — sonst wuerde der gehaltene transform der
   Animation den :hover-Lift der Karten dauerhaft ueberschreiben. backwards
   versteckt die Karte nur waehrend ihres Stagger-Delays; danach gilt wieder
   normales CSS (Hover funktioniert). */
.gl-group-cards > * { animation: glCardIn var(--motion-enter) var(--ease-enter) backwards; }
/* nth-child(1) braucht kein animation-delay (Default 0). */
.gl-group-cards > *:nth-child(2) { animation-delay: calc(var(--motion-stagger) * 1); }
.gl-group-cards > *:nth-child(3) { animation-delay: calc(var(--motion-stagger) * 2); }
.gl-group-cards > *:nth-child(4) { animation-delay: calc(var(--motion-stagger) * 3); }
.gl-group-cards > *:nth-child(5) { animation-delay: calc(var(--motion-stagger) * 4); }
.gl-group-cards > *:nth-child(6) { animation-delay: calc(var(--motion-stagger) * 5); }
.gl-group-cards > *:nth-child(7) { animation-delay: calc(var(--motion-stagger) * 6); }
.gl-group-cards > *:nth-child(n+8) { animation-delay: calc(var(--motion-stagger) * 7); }
/* Karten-ERSATZ bei Datenaktualisierung (GroupedList-Reconcile/updateItem):
   kein erneutes glCardIn — die Karte ist ein Update, kein Neuzugang. Ohne
   diese Ausnahme wuerde jede Nachlade-Stufe (Meta-Batch, Tages-Zeiten) die
   Liste sichtbar flackern lassen. Spezifitaet (0,2,0) schlaegt `> *`. */
.gl-group-cards > .gl-no-enter { animation: none; }
@keyframes glCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Card-Layout-Modifier 'grid': Karten flieszen horizontal in einem
   responsive Grid statt vertikal untereinander. Genutzt von
   Vertrieb-Workspace (Lead-/VK-Karten in 2-N Spalten). */
.gl-group-cards--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  gap: var(--space-3);
}
.gl-loading,
.gl-empty {
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: 13px;
  text-align: center;
}

/* Tablet 600-999: kompakteres Inter-Group-Spacing. */
@media (max-width: 999px) {
  .grouped-list { gap: var(--space-3); }
}

/* Mobile <600: Header und Card-Container brauchen horizontales Padding,
   weil die Section-Liste auf Mobile bewusst ohne Padding rendert. */
@media (max-width: 599px) {
  .gl-group-header { padding-left: var(--space-3); padding-right: var(--space-3); }
  .gl-group-cards { padding-left: var(--space-3); padding-right: var(--space-3); }
}