/* ============================================================================
 * COMPONENT · tc-confirm-dialog / tc-prompt-dialog / tc-choice-modal
 * ----------------------------------------------------------------------------
 * Die zwei Dialoge, die im ganzen Projekt als window.confirm() bzw. als
 * handgebaute Auswahl-Modals herumlagen. Library-First-Vorbedingung fuer die
 * Abloesung der Legacy-Modals (Taskwerk #189): Solange es sie nicht gab,
 * erfand jede Migration wieder eigene Dialoge.
 *
 * BEIDE SITZEN IM tc-modal-BODY. Sie ersetzen NICHT die Modal-Huelle, sondern
 * sind ihr Inhalt - Overlay, Kopf und Fuss kommen weiterhin von tc-modal
 * (CLAUDE.md §9, Modal-Vertrag). Verwendet ueber TC.Modal.confirm() und
 * TC.Modal.choice() in js/tc-ui.js.
 *
 * tc-confirm-dialog - "Willst du das wirklich?"
 *   .tc-confirm-dialog(.tc-confirm-dialog--danger)
 *     .tc-confirm-dialog__icon
 *     .tc-confirm-dialog__body
 *       .tc-confirm-dialog__text
 *       .tc-confirm-dialog__detail     (optional: was genau passiert)
 *
 *   --danger faerbt NUR das Symbol, nicht die Flaeche. Ein komplett rot
 *   unterlegter Dialog liest sich als Fehlermeldung; hier ist aber nichts
 *   schiefgegangen, es wird nur etwas Unwiderrufliches gefragt.
 *
 * tc-prompt-dialog - "Wie soll es heissen?" (Taskwerk #285, 12.08.2026)
 *   .tc-prompt-dialog
 *     label.tc-prompt-dialog__text        (die Frage, per for= mit dem Feld verbunden)
 *     .tc-prompt-dialog__detail           (optional)
 *     input.tc-input / textarea.tc-textarea .tc-prompt-dialog__feld
 *     .tc-prompt-dialog__fehler[role=alert]
 *
 *   Das Eingabefeld bringt KEINE eigenen Stile mit: .tc-input und .tc-textarea
 *   gibt es in form.css, und ein Dialogfeld ist kein anderes Feld als eines im
 *   Formular. Hier steht nur, was der Dialog drumherum braucht.
 *
 *   Kein Symbol wie beim confirm-Dialog: Dort warnt es vor einer Folge, hier
 *   gibt es keine — es wird nur etwas eingetippt. Ein Symbol waere Dekor, das
 *   Platz von dem nimmt, worum es geht.
 *
 * tc-choice-modal - "Welches davon?"
 *   .tc-choice-modal
 *     .tc-choice-modal__hint
 *     .tc-choice-modal__list
 *       button.tc-choice-option(.is-selected/.is-disabled)
 *         .tc-choice-option__icon
 *         .tc-choice-option__body
 *           .tc-choice-option__label
 *           .tc-choice-option__desc
 *         .tc-choice-option__meta
 *
 * Datei ist UTF-8. Version: 1.0 (11.08.2026, Taskwerk #189)
 * ============================================================================ */

/* ==========================================================================
 * tc-confirm-dialog
 * ========================================================================== */
.tc-confirm-dialog {
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-3);
}

.tc-confirm-dialog__icon {
  flex: 0 0 auto;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--tc-text-muted);
}
/* Datenfarbe, kein Theme-Akzent: Die Farbe sagt etwas ueber die Folge. */
.tc-confirm-dialog--danger .tc-confirm-dialog__icon { color: var(--tc-danger); }
.tc-confirm-dialog--warning .tc-confirm-dialog__icon { color: var(--tc-warning); }

.tc-confirm-dialog__body { flex: 1; min-width: 0; }

.tc-confirm-dialog__text {
  /* Meldungen aus den abgeloesten confirm()-Dialogen bringen Zeilenumbrueche
     mit (#285). Ohne pre-line waeren sie eine einzige lange Zeile. */
  white-space: pre-line;
  margin: 0;
  font-size: var(--tc-text-base);
  color: var(--tc-text-strong);
  line-height: 1.5;
}

.tc-confirm-dialog__detail {
  /* Meldungen aus den abgeloesten confirm()-Dialogen bringen Zeilenumbrueche
     mit (#285). Ohne pre-line waeren sie eine einzige lange Zeile. */
  white-space: pre-line;
  margin: var(--tc-space-2) 0 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
  line-height: 1.5;
}

/* ==========================================================================
 * tc-choice-modal
 * ========================================================================== */
.tc-choice-modal { display: block; }

.tc-choice-modal__hint {
  margin: 0 0 var(--tc-space-3);
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
}

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

.tc-choice-option {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  width: 100%;
  padding: var(--tc-space-3);
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-left: 3px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--tc-motion-fast), background var(--tc-motion-fast);
}
.tc-choice-option:hover {
  border-color: var(--tc-border-strong);
  border-left-color: var(--tc-accent);
  background: var(--tc-bg-surface-2);
}
.tc-choice-option:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
}

/* Gewaehlt: Akzent links UND Flaeche - doppelt kodiert, damit die Auswahl
 * nicht allein an der Farbe haengt. */
.tc-choice-option.is-selected {
  border-color: var(--tc-accent);
  border-left-color: var(--tc-accent);
  background: rgba(var(--tc-accent-rgb), 0.10);
}
.tc-choice-option.is-selected .tc-choice-option__label { color: var(--tc-highlight); }

.tc-choice-option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.tc-choice-option__icon {
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
}

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

.tc-choice-option__label {
  display: block;
  font-weight: var(--tc-weight-semibold);
  font-size: var(--tc-text-base);
  color: var(--tc-text-strong);
}

.tc-choice-option__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
  line-height: 1.45;
}

.tc-choice-option__meta {
  flex: 0 0 auto;
  font-size: var(--tc-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--tc-weight-bold);
  color: var(--tc-highlight);
}

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

/* --- Schmale Schirme ----------------------------------------------------- */
@media (max-width: 600px) {
  .tc-confirm-dialog__icon { font-size: 1.5rem; }
  .tc-choice-option { flex-wrap: wrap; }
  .tc-choice-option__meta { width: 100%; text-align: right; }
}

/* --- Bewegung reduzieren (CLAUDE.md §9, Pflicht) ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tc-choice-option { transition: none; }
}

/* ==========================================================================
 * tc-prompt-dialog  (Taskwerk #285, 12.08.2026)
 * --------------------------------------------------------------------------
 * Inhalt des tc-modal-Body fuer TC.Modal.prompt(). Loest window.prompt() ab.
 * ========================================================================== */
.tc-prompt-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2);
}

.tc-prompt-dialog__text {
  margin: 0;
  color: var(--tc-text-strong);
  font-size: var(--tc-text-base);
  line-height: 1.45;
  /* Fragen aus abgeloesten prompt()-Aufrufen bringen Zeilenumbrueche mit. */
  white-space: pre-line;
  /* Das Label gehoert zum Feld darunter — der Klick darauf setzt den Fokus
     dorthin, und genau deshalb ist es ein <label> und kein <p>. */
  cursor: pointer;
}

.tc-prompt-dialog__detail {
  margin: 0;
  color: var(--tc-text-muted);
  font-size: var(--tc-text-sm);
  line-height: 1.45;
  white-space: pre-line;
}

/* Etwas Luft zwischen Frage und Feld, aber weniger als zwischen den Bloecken:
   Frage und Feld gehoeren zusammen. */
.tc-prompt-dialog__feld {
  margin-top: var(--tc-space-1);
}

/* Der Fehler steht UNTER dem Feld, nicht darueber: Der Blick kommt von der
   Eingabe und laeuft nach unten weiter — dort erwartet man die Antwort. */
.tc-prompt-dialog__fehler {
  margin: 0;
  color: var(--tc-danger);
  font-size: var(--tc-text-sm);
  line-height: 1.4;
}

.tc-prompt-dialog__fehler[hidden] { display: none; }

/* Kein roter Rahmen ueber :invalid — der schlaegt schon beim Tippen an, bevor
   jemand fertig ist. Die Markierung setzt erst die Pruefung beim Bestaetigen. */
.tc-prompt-dialog__feld[aria-invalid="true"] {
  border-color: var(--tc-danger);
}

/* Der iOS-Zoom-Schutz stand bis zum 13.08.2026 hier als Sonderregel fuer dieses
   eine Feld (#285). Seit #287 hebt form.css ALLE .tc-input/.tc-select/
   .tc-textarea auf Touch-Geraeten auf 16px — die Sonderregel waere ein
   Duplikat, das irgendwann auseinanderlaeuft. Sie ist deshalb entfallen;
   die Begruendung steht jetzt vollstaendig in form.css. */