/* ============================================================================
 * COMPONENT · tc-wb-status
 * ----------------------------------------------------------------------------
 * Lebenszyklus-Badge einer Kriegerbande: Aktiv / Pausiert / Zurueckgezogen.
 * SSOT fuer das Aussehen aller Banden-Status plattformweit (Roster-Editor,
 * Profil, Ranglisten, Dashboard). Kanonisches Markup via
 * WarbandStatus.badgeHtml(status) aus js/warband-status.js.
 *
 * Semantische Farben = DATEN (kein Theme-Akzent):
 *   active  -> success (gruen)
 *   benched -> neutral/muted (ausgegraut, aber lesbar)
 *   retired -> disabled + durchgestrichenes Label (archiviert)
 *
 * Datei ist UTF-8. Version: 1.0 (04.07.2026)
 * ============================================================================ */
.tc-wb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--tc-space-2);
  border-radius: var(--tc-radius-full);
  border: 1px solid var(--tc-border-subtle);
  background: var(--tc-bg-surface-1);
  color: var(--tc-text-default);
  font-size: var(--tc-text-2xs);
  font-weight: var(--tc-weight-semibold);
  letter-spacing: var(--tc-tracking-wide);
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

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

.tc-wb-status__icon {
  font-size: 0.95em;
  line-height: 1;
  flex-shrink: 0;
}

.tc-wb-status__label { line-height: 1; }

/* --- Zustaende (semantische Token) --- */
.tc-wb-status--active {
  color: var(--tc-success);
  background: var(--tc-success-bg);
  border-color: var(--tc-success-border);
}
.tc-wb-status--benched {
  color: var(--tc-text-muted);
  background: rgba(156, 163, 175, 0.06);
  border-color: rgba(156, 163, 175, 0.25);
}
.tc-wb-status--retired {
  color: var(--tc-text-disabled);
  background: rgba(120, 120, 120, 0.05);
  border-color: var(--tc-border-subtle);
}
.tc-wb-status--retired .tc-wb-status__dot { box-shadow: none; }
.tc-wb-status--retired .tc-wb-status__label {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* --- Zulassungs-Pipeline (Entwurf / In Pruefung / Abgelehnt) --- */
.tc-wb-status--draft {
  color: var(--tc-text-muted);
  background: rgba(156, 163, 175, 0.05);
  border-color: rgba(156, 163, 175, 0.30);
  border-style: dashed;
}
.tc-wb-status--draft .tc-wb-status__dot { box-shadow: none; }
.tc-wb-status--pending {
  color: var(--tc-info);
  background: var(--tc-info-bg);
  border-color: var(--tc-info-border);
}
.tc-wb-status--rejected {
  color: var(--tc-danger);
  background: var(--tc-danger-bg);
  border-color: var(--tc-danger-border);
}

/* --- Compact (Karten-Header, dichte Listen) --- */
.tc-wb-status--compact {
  padding: 1px 6px;
  font-size: 9px;
  gap: 4px;
}
.tc-wb-status--compact .tc-wb-status__dot { width: 5px; height: 5px; }

/* --- Touch: etwas groesser --- */
@media (hover: none) and (pointer: coarse) {
  .tc-wb-status { padding: 3px var(--tc-space-2); font-size: var(--tc-text-xs); }
}