/* ============================================================================
 * COMPONENT · tc-warband-picker
 * ----------------------------------------------------------------------------
 * Einfachauswahl "welche (aktive) Bande spiele ich?" - fuer Terminanmeldung
 * und Match-Start, wenn ein Spieler MEHRERE aktive Banden hat.
 *
 * Regel der Integration (JS, nicht CSS):
 *   0 aktive Banden  -> .tc-warband-picker__empty (Hinweis, Anmeldung blocken)
 *   genau 1 aktive   -> automatisch gewaehlt, KEIN Picker noetig
 *   >= 2 aktive      -> dieser Picker
 *
 * Option-Karte: Name + Fraktion + Rating + Status. Single-Select (Radio).
 * Datenagnostisch - JS fuellt die Optionen. Token-getrieben, theme-folgend
 * (gewaehlte Karte nutzt --tc-accent des aktiven Themes).
 *
 * Struktur:
 *   .tc-warband-picker
 *     .tc-warband-picker__hint            Frage/Hilfetext
 *     .tc-warband-picker__list
 *       label.tc-warband-option(.is-selected)
 *         input[type=radio]               (visuell versteckt)
 *         .tc-warband-option__radio        (Custom-Radio-Punkt)
 *         .tc-warband-option__body
 *           .tc-warband-option__name
 *           .tc-warband-option__meta        (Fraktion, __rating, tc-wb-status)
 *     .tc-warband-picker__empty            (keine aktive Bande)
 *
 * Datei ist UTF-8. Version: 1.0 (04.07.2026)
 * ============================================================================ */
.tc-warband-picker { display: block; }

.tc-warband-picker__hint {
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
  margin: 0 0 var(--tc-space-2);
}

.tc-warband-picker__list {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2);
}

/* --- Option-Karte --- */
.tc-warband-option {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  padding: var(--tc-space-3);
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  cursor: pointer;
  transition: border-color var(--tc-motion-fast), background var(--tc-motion-fast);
}
.tc-warband-option:hover {
  border-color: var(--tc-border-strong);
  background: var(--tc-bg-surface-2);
}

/* Radio-Input visuell verstecken (Reihenfolge: input -> __radio fuer + Selektor) */
.tc-warband-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tc-warband-option__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--tc-border-strong);
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--tc-motion-fast);
}

.tc-warband-option__body { flex: 1; min-width: 0; }

.tc-warband-option__name {
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-text-strong);
  font-size: var(--tc-text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-warband-option__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--tc-space-2);
  margin-top: 3px;
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}

.tc-warband-option__rating {
  font-variant-numeric: tabular-nums;
  font-weight: var(--tc-weight-bold);
  color: var(--tc-highlight);
}

/* --- Gewaehlt: via :has (modern) + .is-selected (JS-Fallback) --- */
.tc-warband-option:has(input[type="radio"]:checked),
.tc-warband-option.is-selected {
  border-color: var(--tc-accent);
  background: rgba(var(--tc-accent-rgb), 0.08);
}
.tc-warband-option:has(input[type="radio"]:checked) .tc-warband-option__radio,
.tc-warband-option.is-selected .tc-warband-option__radio {
  border-color: var(--tc-accent);
}
.tc-warband-option:has(input[type="radio"]:checked) .tc-warband-option__radio::after,
.tc-warband-option.is-selected .tc-warband-option__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--tc-accent);
}
.tc-warband-option input[type="radio"]:focus-visible + .tc-warband-option__radio {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
}

/* --- Keine aktive Bande --- */
.tc-warband-picker__empty {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  padding: var(--tc-space-3);
  border-radius: var(--tc-radius-md);
  background: var(--tc-warning-bg);
  border: 1px solid var(--tc-warning-border);
  color: var(--tc-warning);
  font-size: var(--tc-text-sm);
}

/* --- Touch --- */
@media (hover: none) and (pointer: coarse) {
  .tc-warband-option {
    padding: var(--tc-space-3) var(--tc-space-4);
    min-height: var(--tc-touch-rec);
  }
}