/* ============================================================================
 * tc-picklist — aus einem Vorrat eine Aufstellung bauen (26.08.2026)
 * ----------------------------------------------------------------------------
 * Zwei Spalten: links der VORRAT (Charaktere, vorbereitete Gegner), rechts
 * die AUFSTELLUNG (wer wirklich im Kampf steht). Eintraege wandern per Zug
 * oder per Klick hinueber — beide Wege sind gleichwertig.
 *
 * Anlass (Tim, 26.08.2026): „Beim Encounter Manager ist die Logik des Setups
 * noch nicht darauf angeglichen, dass es vorbereitete Gegner gibt. Ich wuerde
 * gerne Charaktere und Gegner per Drag and Drop einem Encountersetup
 * hinzufuegen."  Der alte Dialog warf 45 vorbereitete Gegner als Chip-Wolke
 * aus und gab dem Eintipp-Formular — dem selteneren Fall — den meisten Platz.
 *
 * ⚠️ DER KLICK BLEIBT GLEICHWERTIG, das Ziehen ist die Abkuerzung. Ein
 * Vorrat, den man nur mit gehaltenem Finger leeren kann, ist auf einem
 * wackeligen Spieltisch keine Verbesserung — und ohne Klickweg gaebe es fuer
 * Tastatur und Screenreader gar keinen.
 *
 * AUFBAU
 *   .tc-picklist
 *     .tc-picklist__spalte
 *       .tc-picklist__kopf   (Titel + Zaehler)
 *       .tc-picklist__suche  (optional, ein tc-input)
 *       .tc-picklist__liste  (scrollt)
 *         .tc-picklist__eintrag[draggable]
 *     .tc-picklist__spalte.is-ziel
 *       .tc-picklist__liste.tc-picklist__zone
 * ========================================================================== */

.tc-picklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tc-space-3);
  align-items: start;
}
/* Unter 640px untereinander: zwei Spalten a 150px sind fuer Namen mit
   Werten zu schmal, und auf dem Handy zieht ohnehin niemand. */
@media (max-width: 640px) {
  .tc-picklist { grid-template-columns: 1fr; }
}

.tc-picklist__spalte {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2);
  min-width: 0;
  padding: var(--tc-space-3);
  background: var(--tc-bg-surface-2);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
}

.tc-picklist__kopf {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-2);
  font-family: var(--tc-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tc-highlight);
}
.tc-picklist__zaehler {
  margin-left: auto;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--tc-text-muted);
}

.tc-picklist__liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Der Vorrat kann lang sein (live: 45 vorbereitete Gegner) — er scrollt
     in sich, statt den Dialog auf drei Bildschirmhoehen zu ziehen. */
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  /* Damit die leere Zone ein sichtbares Ziel ist und nicht ein Nichts. */
  min-height: 96px;
  padding: 2px;
}

/* ── Ein Eintrag ───────────────────────────────────────────────────────── */
.tc-picklist__eintrag {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  /* ⚠️ Touch-Mindesthoehe (Heuristik 5). Der Eintrag IST das Ziehe- und
     Klickziel; 28px waeren am Spieltisch ein Zufallstreffer. */
  min-height: var(--tc-touch-min, 36px);
  padding: 5px 8px;
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-sm, 6px);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: grab;
  /* Ohne das faengt der Browser beim Ziehen an, Text zu markieren. */
  user-select: none;
  -webkit-user-select: none;
  /* ⚠️ Der Schluessel fuers Tablet: Ohne `touch-action: none` scrollt die
     Seite, sobald der Finger sich bewegt — das Ziehen kommt nie an. */
  touch-action: none;
  transition: border-color var(--tc-motion-fast), background var(--tc-motion-fast),
              opacity var(--tc-motion-fast);
}
.tc-picklist__eintrag:hover { border-color: var(--tc-accent); background: var(--tc-bg-surface-3); }
.tc-picklist__eintrag:focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 2px; }
.tc-picklist__eintrag:active { cursor: grabbing; }

/* Der Eintrag, der gerade am Finger haengt: er bleibt an seinem Platz
   stehen (gedaempft), damit die Liste nicht unter dem Zeiger springt. */
.tc-picklist__eintrag.is-zieht { opacity: .4; }

/* Zwei Zustaende aus #128 (08.09.2026), beide generisch:

   `is-inaktiv` — der Eintrag liegt in der Liste, zaehlt aber nicht mit.
   Beim Tiebreaker sind das die abgeschalteten Kriterien: Sie bleiben
   sichtbar (man muss sie ja zurueckholen koennen), stehen aber zurueck.
   Ziehbar bleibt er trotzdem — genau so holt man ihn zurueck.

   `is-fest` — die ganze Liste ist eingefroren. Beim Tiebreaker gilt das,
   sobald die Liga laeuft: An der Reihenfolge darf dann niemand mehr
   drehen. ⚠️ Der Zeiger muss das sagen: Ein `cursor: grab` an einer
   Liste, die nichts annimmt, ist ein Versprechen, das die Seite bricht. */
.tc-picklist__eintrag.is-inaktiv { opacity: .55; }
.tc-picklist__liste.is-fest .tc-picklist__eintrag { cursor: default; }
.tc-picklist__liste.is-fest .tc-picklist__eintrag:hover {
  border-color: var(--tc-border-default);
  background: var(--tc-bg-surface-1);
}

.tc-picklist__name  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; }
.tc-picklist__werte { font-size: var(--tc-text-xs); color: var(--tc-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-picklist__griff { color: var(--tc-text-muted); font-size: 0.9rem; line-height: 1; }

/* ── Die Zielzone ──────────────────────────────────────────────────────── */
.tc-picklist__zone {
  border: 1px dashed var(--tc-border-default);
  border-radius: var(--tc-radius-sm, 6px);
  transition: border-color var(--tc-motion-fast), background var(--tc-motion-fast);
}
.tc-picklist__zone.is-ueber {
  border-color: var(--tc-accent);
  background: rgba(var(--tc-accent-rgb, 120, 91, 136), 0.10);
}
.tc-picklist__leer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--tc-space-3);
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
  text-align: center;
  line-height: 1.5;
}

/* Das Abbild, das am Zeiger klebt. Liegt im <body>, damit es nicht am
   Scroll-Container der Liste haengenbleibt. */
.tc-picklist__geist {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: .92;
  transform: translate(-50%, -50%) rotate(-1.5deg);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: reduce) {
  .tc-picklist__eintrag,
  .tc-picklist__zone { transition: none; }
  .tc-picklist__geist { transform: translate(-50%, -50%); }
}