/* ============================================================================
   Layout — Raster/Zeile/Stapel/Split. Bausteine: Core\Design::grid/row/stack/split.
   Anordnung geteilter Muster kommt HIER her, damit Karten-Raster & Split-Ansichten
   überall gleich aussehen und gleich umbrechen. Abstände aus den Gap-Tokens.
   ============================================================================ */

/* Karten-Raster — Standard: auto-fit ab 220px. Feste Spalten via cc-grid-2/3/4. */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap-md); }
.cc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cc-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width:720px) { .cc-grid-2, .cc-grid-3, .cc-grid-4 { grid-template-columns: 1fr; } }
.cc-cell { min-width: 0; }

/* Zeile — Flex mit Gap. */
.cc-row { display: flex; align-items: center; gap: var(--gap-sm); }
.cc-row-between { justify-content: space-between; }
.cc-row-end { justify-content: flex-end; }
.cc-row-center { justify-content: center; }
.cc-align-start { align-items: flex-start; }
.cc-align-center { align-items: center; }
.cc-wrap { flex-wrap: wrap; }

/* Stapel — senkrecht mit gleichmäßigem Abstand. */
.cc-stack { display: flex; flex-direction: column; gap: var(--gap-md); }
.cc-stack-xs { gap: var(--gap-xs); }
.cc-stack-sm { gap: var(--gap-sm); }
.cc-stack-md { gap: var(--gap-md); }
.cc-stack-lg { gap: var(--gap-lg); }

/* Split — geteilte Flächen nebeneinander (Grid-Template kommt vom Baustein). Mobil 1-spaltig. */
.cc-split { display: grid; gap: var(--gap-md); align-items: start; }
.cc-split-pane { min-width: 0; }
@media (max-width:720px) { .cc-split { grid-template-columns: 1fr !important; } }

/* Entitäts-Zelle (Design::entityCell): Avatar/Icon links, Titel + Metazeile rechts.
   DIE Standard-Rolle für „Wer/Was"-Spalten in Listen (Kontakte, User, Tickets …). */
.cc-ent { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--sz-40); min-width: var(--sz-280); }
.cc-ent-info { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.cc-ent-title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ent-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cc-ent-meta-text { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.cc-ent-tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.cc-ent-sep { color: var(--grey-300); font-size: var(--fs-2xs); }
.cc-ent-actions { display: flex; gap: var(--sp-2); }

/* Stat-/KPI-Kachel (Design::stat): grosse Zahl + Beschriftung — EINE Kachel fürs ganze System. */
.cc-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); }
.cc-stat-num { font-size: var(--fs-xl); font-weight: var(--fw-heavy); color: var(--ink); line-height: 1.2; }
.cc-stat-brand { color: var(--o); }
.cc-stat-label { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); }

/* Listenzeile (Design::listRow): Inhalt links, Aktionen IMMER rechtsbündig — EIN Muster für
   jede Aufzählung in Sidebars/Panels. Der Inhalt kürzt sich, die Knöpfe wandern nie. */
.cc-lrow { display: flex; align-items: center; gap: var(--gap-sm); padding: var(--sp-2) 0; min-width: 0; }
.cc-lrow + .cc-lrow { border-top: 1px solid var(--border); }
.cc-lrow-main { display: flex; align-items: center; gap: var(--gap-xs); flex: 1 1 auto; min-width: 0; overflow: hidden; }
.cc-lrow-main > * { min-width: 0; }
.cc-lrow-act { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

/* Auswahl-Sperre während eines Zieh-Vorgangs (Trenner, Fenster) — als Klasse, nicht per JS-Stil. */
.cc-noselect, .cc-noselect * { user-select: none !important; }