/* ============================================================================
 * COMPONENT · tc-badge + tc-pill-cluster
 * ----------------------------------------------------------------------------
 * 5 Variants (status / count / system / ornate / default).
 * Loest .badge.*, .gf-taunt-badge, .macht-pill und (perspektivisch)
 * Trait-Pills aus pathfinder-item-configurator.js ab.
 *
 * Die activity-badge (aus js/activity-tracker.js + css/activity-tracker.css)
 * folgt bereits dem gleichen Pattern und wird in Phase 5 sanft umbenannt.
 *
 * --tc-badge--ornate ist die Trait/Rune-Pill — kapitaelchen + Blut-Akzent.
 * Konsumiert --tc-deco-blood-pill-* Tokens, also theme-abhaengig:
 *   theme-mordheim    → Mordheim-Blut
 *   theme-pathfinder  → Burgunderrot
 *   theme-bloodbowl   → Spielfeld-Gruen
 *   theme-aos         → Magisches Lila
 *
 * Version: 1.0 (29. Mai 2026, Phase 2)
 * ============================================================================ */


/* ============================================================================
 * BASE
 * ============================================================================ */
.tc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1);
  padding: 2px var(--tc-space-2);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-subtle);
  color: var(--tc-text-default);
  font-size: var(--tc-text-2xs);
  font-weight: var(--tc-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  letter-spacing: var(--tc-tracking-wide);
  white-space: nowrap;
  vertical-align: middle;
}

.tc-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px currentColor;
}

.tc-badge__icon {
  font-size: 0.9em;
  line-height: 1;
  flex-shrink: 0;
}


/* ============================================================================
 * STATUS-VARIANTS — semantische Farben aus tokens.css
 * Verallgemeinerung des activity-badge Patterns.
 * ============================================================================ */
.tc-badge--success {
  color: var(--tc-success);
  background: var(--tc-success-bg);
  border-color: var(--tc-success-border);
}
.tc-badge--success .tc-badge__dot { background: var(--tc-success); }

.tc-badge--warning {
  color: var(--tc-warning);
  background: var(--tc-warning-bg);
  border-color: var(--tc-warning-border);
}
.tc-badge--warning .tc-badge__dot { background: var(--tc-warning); }

.tc-badge--attention {
  color: var(--tc-attention);
  background: var(--tc-attention-bg);
  border-color: var(--tc-attention-border);
}
.tc-badge--attention .tc-badge__dot { background: var(--tc-attention); }

.tc-badge--danger {
  color: var(--tc-danger);
  background: var(--tc-danger-bg);
  border-color: var(--tc-danger-border);
}
.tc-badge--danger .tc-badge__dot { background: var(--tc-danger); }

.tc-badge--info {
  color: var(--tc-info);
  background: var(--tc-info-bg);
  border-color: var(--tc-info-border);
}
.tc-badge--info .tc-badge__dot { background: var(--tc-info); }

.tc-badge--neutral {
  color: var(--tc-text-muted);
  background: rgba(156, 163, 175, 0.06);
  border-color: rgba(156, 163, 175, 0.25);
  opacity: 0.85;
}
.tc-badge--neutral .tc-badge__dot { background: var(--tc-text-muted); }


/* ============================================================================
 * COUNT-VARIANT — numerische Anzeige (z.B. ungelesene Notifications)
 * ============================================================================ */
.tc-badge--count {
  background: var(--tc-accent);
  color: var(--tc-text-on-accent);
  border: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  text-align: center;
  font-weight: var(--tc-weight-bold);
  border-radius: var(--tc-radius-full);
  letter-spacing: 0;
}

.tc-badge--count.tc-badge--danger {
  background: var(--tc-danger);
  color: #fff;
}


/* ============================================================================
 * ORNATE-VARIANT — Trait/Rune-Pills mit Kapitaelchen + Blut-Akzent
 * (das ist das "Spielwelten"-Pattern aus pathfinder-item-configurator)
 * ============================================================================ */
.tc-badge--ornate {
  background: var(--tc-deco-blood-pill-bg);
  border-color: var(--tc-deco-blood-pill-border);
  color: var(--tc-deco-blood-pill-text);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-widest);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-2xs);
  font-weight: var(--tc-weight-bold);
  padding: 2px var(--tc-space-2);
}


/* ============================================================================
 * SYSTEM-MARKER — Eventtyp / Spielsystem
 * (loest .badge-mordheim, .badge-aos, .badge-pathfinder etc. ab)
 * ============================================================================ */
.tc-badge--system-mordheim {
  background: rgba(139, 0, 0, 0.15);
  border-color: rgba(139, 0, 0, 0.4);
  color: #c9a959;
}
.tc-badge--system-aos {
  background: rgba(167, 139, 250, 0.15);
  border-color: rgba(167, 139, 250, 0.4);
  color: #c4b5fd;
}
.tc-badge--system-pathfinder {
  /* Bronze — passt zum theme-pathfinder Akzent (29.05.2026) */
  background: rgba(200, 122, 63, 0.15);
  border-color: rgba(200, 122, 63, 0.4);
  color: #d99560;
}
.tc-badge--system-bloodbowl {
  background: rgba(201, 169, 89, 0.15);
  border-color: rgba(201, 169, 89, 0.4);
  color: #c9a959;
}
.tc-badge--system-social,
.tc-badge--system-hobby {
  background: rgba(217, 169, 245, 0.15);
  border-color: rgba(217, 169, 245, 0.4);
  color: #d9a9f5;
}
.tc-badge--system-community {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.4);
  color: #6ee7b7;
}


/* ============================================================================
 * tc-pill-cluster — Container fuer mehrere Pills nebeneinander
 * (loest .macht-breakdown Container-Pattern ab)
 * ============================================================================ */
.tc-pill-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tc-space-1);
  align-items: center;
}

.tc-pill-cluster--tight {
  gap: 2px;
}


/* ============================================================================
 * STATES — is-active (z.B. Filter-Chips)
 * ============================================================================ */
.tc-badge.is-active {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: var(--tc-text-on-accent);
}


/* ============================================================================
 * TOUCH-OPTIMIERUNG — etwas groesser auf Touch-Geraeten
 * ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  .tc-badge {
    padding: 3px var(--tc-space-2);
    font-size: var(--tc-text-xs);
  }
}