/* ============================================================
   Chip-Familie — drei distinkte Typen:
   Flag         · non-interaktiv · accent-Farben · eckig
   Status Chip  · non-interaktiv · Status-Farben · eckig
   Filter Chip  · interaktiv     · Accent2-Select · vollrund
   Konsumiert ausschließlich Semantic-Tokens aus dist/tokens.css
   ============================================================ */

/* ── Flag ─────────────────────────────────────────────────── */
/* Dekoratives Label / Kategorie-Tag. Nicht klickbar.          */
.flag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-gap-sm) var(--space-gap-md);
  border-radius: var(--radius-control-sm);
  font: var(--text-style-label);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}

.flag--accent1 {
  background-color: var(--color-fill-accent1-subtle);
  color: var(--color-text-accent1);
  border: 1px solid var(--color-border-accent1);
}

.flag--accent2 {
  background-color: var(--color-fill-accent2-subtle);
  color: var(--color-text-accent2);
  border: 1px solid var(--color-border-accent2);
}

.flag--neutral {
  background-color: var(--color-fill-neutral-subtle);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-default);
}

/* ── Status Chip ──────────────────────────────────────────── */
/* Status-Indikator: danger / warning / success / neutral.     */
/* Schmales Format, kleiner Radius, optionaler Punkt-Lead.     */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-gap-sm);
  padding: var(--space-gap-sm) var(--space-gap-md);
  border-radius: var(--radius-control-sm);
  border: 1px solid transparent;
  font: var(--text-style-label);
  font-weight: var(--weight-regular);
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}

/* Punkt-Indikator */
.status-chip::before {
  content: '';
  display: block;
  width: var(--space-gap-sm);
  height: var(--space-gap-sm);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.status-chip--danger {
  background-color: var(--color-danger-surface);
  color: var(--color-danger-on-surface);
  border-color: var(--color-danger-border);
}
.status-chip--danger::before { background-color: var(--color-danger-text); }

.status-chip--warning {
  background-color: var(--color-warning-surface);
  color: var(--color-warning-on-surface);
  border-color: var(--color-warning-border);
}
.status-chip--warning::before { background-color: var(--color-warning-text); }

.status-chip--success {
  background-color: var(--color-success-surface);
  color: var(--color-success-on-surface);
  border-color: var(--color-success-border);
}
.status-chip--success::before { background-color: var(--color-success-text); }

.status-chip--neutral {
  background-color: var(--color-fill-neutral-subtle);
  color: var(--color-text-muted);
  border-color: var(--color-border-default);
}
.status-chip--neutral::before { background-color: var(--color-text-muted); }

/* ── Filter Chip ──────────────────────────────────────────── */
/* Interaktiver Toggle-Chip für Filter-Bars. Vollrund.         */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-gap-sm);
  padding: 0 var(--space-inset-md);
  height: var(--size-control-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-default);
  background-color: var(--color-surface-default);
  font: var(--text-style-body-s);
  font-weight: var(--weight-regular);
  color: var(--color-text-default);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}

.chip:hover {
  background-color: var(--color-fill-neutral-subtle);
}

.chip:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Aktiv / ausgewählt → accent2 (Sky), konsistent mit anderen Selection-States */
.chip--active {
  background-color: var(--color-fill-accent2-subtle);
  border-color: var(--color-border-accent2);
  color: var(--color-text-accent2);
  font-weight: var(--weight-bold);
}

.chip--active:hover {
  background-color: var(--color-fill-accent2-subtle);
}

.chip--disabled,
.chip:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Icon-Slot innerhalb des Chips */
.chip__icon {
  flex-shrink: 0;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}

/* Check-Marker: erscheint rechts wenn aktiv */
.chip__check {
  display: none;
  flex-shrink: 0;
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}

.chip--active .chip__check {
  display: block;
}

/* ── Chip Group ───────────────────────────────────────────── */
/* Flex-Wrapper für mehrere Filter-Chips.                      */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gap-sm);
}