/* ============================================================================
   Badges — die EINE Status-/Label-Plakette. Baustein: Core\Design::badge().
   Vorher in datatable.css (nur dort sichtbar) — jetzt Kernmodul, damit dieselbe
   Plakette in Wartung, Health, Modulen … identisch aussieht. Kein anderes Modul
   definiert .badge-status neu (Compliance erzwingt es).
   ============================================================================ */
.badge-status {
    display: inline-block;
    font-size: var(--fs-xs);
    padding:var(--sp-0) var(--sp-2);
    font-weight: var(--fw-bold);
    border-radius: var(--radius);
    line-height: 1.6;
    color: var(--surface);
}
.badge-status.bg-success   { background-color: var(--ok); }
.badge-status.bg-secondary { background-color: var(--grey-500); }
.badge-status.bg-danger    { background-color: var(--danger); }

/* Chip/Tag (Design::chip) — kleine, neutrale Label-Plakette; Datenfarbe optional per style. */
/* CHIP-REIHE (Design::chips): Plaketten nebeneinander mit Luft, umbrechend. Und als Sicherheitsnetz:
   zwei Chips/Plaketten direkt hintereinander kleben NIE aneinander, auch ohne Wrapper. */
.cc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
:where(.cc-chip + .cc-chip, .cc-chip + .badge-status, .badge-status + .cc-chip, .badge-status + .badge-status) { margin-left: var(--sp-2); }
:where(.cc-chips) > * { margin-left: 0 !important; }
.cc-chip { display: inline-block; background: var(--grey-100); color: var(--grey-700); font-size: var(--fs-xs); padding:var(--sp-0) var(--sp-3); border-radius: var(--radius); }

/* Status-Punkt (Design::statusDot) — kompakter Aktiv/Inaktiv-Indikator für Tabellenzellen. */
.cc-status-dot { width: var(--sz-8); height: var(--sz-8); border-radius: 50%; display: inline-block; }
.cc-status-dot.on { background: var(--ok); }
.cc-status-dot.off { background: var(--grey-300); }

/* Icon-Punkt (Design::iconDot) — runder farbiger Kreis mit Icon (Zugewiesen/Öffentlich/Privat …). */
.cc-icon-dot { width: var(--sz-30); height: var(--sz-30); border-radius: 50%; border: 2px solid var(--surface);
               display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--surface); }
.cc-icon-dot-ok { background: var(--ok); }
.cc-icon-dot-muted { background: var(--muted); }
.cc-icon-dot-info { background: var(--info); }
.cc-icon-dot-danger { background: var(--danger); }
.cc-icon-dot-warn { background: var(--warn); }

/* Gekürzter Chip (Design::chip ['truncate'=>true]) — lange Werte laufen nicht aus der Zelle. */
.cc-chip-trunc{max-width:var(--sz-180);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

/* Warn-Ton der Badge-Skala (Design::badge 'warning'). */
.badge-status.bg-warning{background:var(--warn-bg);color:var(--warn-fg)}

/* Ton-Chips (Design::chip ['tone'=>…]) — weiche Fläche + kräftige Schrift der Kern-Skala statt Grau. */
.cc-chip-info   { background: var(--info-bg);   color: var(--info-fg); }
.cc-chip-ok     { background: var(--ok-bg);     color: var(--ok-fg); }
.cc-chip-warn   { background: var(--warn-bg);   color: var(--warn-fg); }
.cc-chip-danger { background: var(--danger-bg); color: var(--danger-fg); }

/* Marken-Ton des Status-Punkts (Design::statusDot(…, ['tone'=>'brand'])) — z.B. „ungelesen" in einer Nachrichtenliste. */
.cc-status-dot.cc-status-dot-brand { background: var(--o); }
/* Farbpunkt klein + rund (Design::swatch($c, ['dot'=>true])) — Flag-/Label-Markierung in Listen. */
.cc-swatch.cc-swatch-dot { width: var(--sz-10); height: var(--sz-10); border-radius: 50%; }
/* Datei-Chip (Design::fileChip): Büroklammer + Name im Kästchen — als Link öffnet er die Datei, mit X wird er entfernt. */
.cc-file-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
                border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text);
                cursor: pointer; text-decoration: none; }
.cc-file-chip:hover { border-color: var(--o); text-decoration: none; }
.cc-file-chip-rm { display: inline-flex; cursor: pointer; color: var(--muted); }
.cc-file-chip-rm:hover { color: var(--danger); }

/* Farbpunkt-Varianten (Design::swatch $o: round, size sm|md|lg, pick, opt) — Kategorie-/Terminfarben. */
.cc-swatch.cc-swatch-round { border-radius: 50%; }
.cc-swatch.cc-swatch-sm { width: var(--sz-8); height: var(--sz-8); flex-shrink: 0; }
.cc-swatch.cc-swatch-md { width: var(--sz-20); height: var(--sz-20); flex-shrink: 0; border: 2px solid transparent; }
.cc-swatch.cc-swatch-lg { width: var(--sz-24); height: var(--sz-24); }
/* pick = die Farbe ist wählbar (Klick öffnet eine Palette daneben). */
.cc-swatch.cc-swatch-pick { cursor: pointer; border: 2px solid color-mix(in srgb, var(--ink) 15%, transparent); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast); position: relative; }
.cc-swatch.cc-swatch-pick:hover { transform: scale(1.15); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
/* opt = eine Option einer Palette; die gewählte trägt is-selected. */
.cc-swatch.cc-swatch-opt { cursor: pointer; border: 2px solid transparent; }
.cc-swatch.cc-swatch-opt:hover { border-color: var(--muted); }
.cc-swatch.cc-swatch-opt.is-selected { border-color: var(--ink); box-shadow: var(--focus); }
/* ring = wählbarer runder Punkt mit ABSTANDSRING (Design::swatch ['ring'=>true, 'selected'=>…]) — Farbwahl direkt auf
   einer farbigen Fläche (Notizzettel): der Ring steht mit Luft um den Punkt, Zeigen vergrössert leicht. */
/* Der Auswahl-Ring ist KEIN Fokus-Ring (den trägt :focus-visible über var(--focus)): Umriss mit Abstand zum Punkt. */
.cc-swatch.cc-swatch-ring { width: var(--sz-16); height: var(--sz-16); border-radius: 50%; margin: calc(var(--sp-1) + 2px);
                            outline-style: solid; outline-width: 2px; outline-color: transparent; outline-offset: var(--sp-1);
                            cursor: pointer; transition: transform var(--dur-fast) var(--ease); }
.cc-swatch.cc-swatch-ring:hover { transform: scale(1.15); }
.cc-swatch.cc-swatch-ring:focus-visible { box-shadow: var(--focus); }
.cc-swatch.cc-swatch-ring.is-selected { outline-color: var(--ink); }
/* Palette (Design::swatchPalette) — inline oder als Popover an einem pick-Farbpunkt (['pop'=>true]). */
.cc-swatch-pal { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cc-swatch-pal.cc-swatch-pop { position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface); border: 1px solid var(--grey-300); border-radius: var(--radius); padding: var(--sp-2); gap: var(--sp-1); width: var(--sz-200); box-shadow: var(--shadow-md); z-index: var(--z-popover); }
.cc-swatch-pop .cc-swatch.cc-swatch-lg { width: var(--sz-22); height: var(--sz-22); }

/* Pille (Design::chip ['pill'=>true, 'lead'=>…, 'remove'=>…]) — Person/Wert in einem Feld (Teilnehmer,
   Erinnerung): Avatar/Icon vorn, Name, kleines Entfernen-X. */
.cc-chip.cc-chip-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); background: var(--grey-100); border-radius: var(--radius-pill); font-size: var(--fs-sm); color: var(--ink); }
.cc-chip-x { cursor: pointer; color: var(--muted); font-size: var(--fs-md); padding: 0 var(--sp-1); line-height: 1; background: none; border: 0; font-family: inherit; }
.cc-chip-x:hover { color: var(--danger-fg); }
/* Kräftige Plakette (['strong'=>true]) — Uhrzeit/„Ganztägig" auf Datenfarbe. */
.cc-chip.cc-chip-strong { font-size: var(--fs-2xs); font-weight: var(--fw-heavy); padding: var(--sp-1) var(--sp-3); letter-spacing: var(--tracking); }
/* Datenfarbe zur Laufzeit (['data'=>true]; Wert als --cc-color am Element oder einem Vorfahren). */
.cc-chip.cc-chip-data { background: var(--cc-color, var(--o)); color: var(--surface); }

/* Icon-Punkt klein (Design::iconDot ['size'=>'sm']) — Ecken-Marke einer Vorschau-Kachel, ohne Ring. */
.cc-icon-dot.cc-icon-dot-sm { width: var(--sz-18); height: var(--sz-18); border: 0; font-size: var(--fs-2xs); }
/* Neutraler Ton (Design::iconDot 'secondary') — dasselbe Dunkelgrau wie die secondary-Plakette. */
.cc-icon-dot-secondary { background: var(--grey-500); }
/* Schlagwort mit Datenfarbe als weicher Fläche (Design::chip ['tint'=>#hex]; Wert als --chip am Element). */
.cc-chip.cc-chip-tint { background: color-mix(in srgb, var(--chip) 13%, transparent); color: var(--chip); font-weight: var(--fw-bold); }
/* Kompakter Chip (Design::chip ['size'=>'sm']) — z.B. im Fuss einer Galerie-Karte. */
.cc-chip.cc-chip-sm { display: inline-flex; align-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-bold); padding: var(--sp-1) var(--sp-2); }
/* Chip mit Entfernen-X (Design::chip ['remove'=>…]) — Text und X auf einer Linie, das X so klein wie der Text. */
.cc-chip.cc-chip-rm { display: inline-flex; align-items: center; gap: var(--sp-1); }
.cc-chip-rm > .cc-chip-x { font-size: var(--fs-2xs); padding: 0; }
/* Pille mit Entfernen-X behält den Pillen-Abstand (steht nach .cc-chip-rm und gewinnt). */
.cc-chip.cc-chip-pill.cc-chip-rm { gap: var(--sp-2); }
.cc-chip-pill.cc-chip-rm > .cc-chip-x { padding: 0 var(--sp-1); }