/* ═══════════════════════════════════════════════════════════════════════════════
 * ViCORE — VIVertrag · Optik des Vertragsdialogs
 * ───────────────────────────────────────────────────────────────────────────────
 * Ausschließlich Tokens (design-system.css). Kein Rahmen, kein Schatten und kein
 * z-index von hier — den Modalrahmen stellt VIDialog. Namespace `.vtr-`.
 * ═══════════════════════════════════════════════════════════════════════════════ */

.vtr-form { display: flex; flex-direction: column; gap: var(--space-3); }

.vtr-lead { margin: 0; font-size: var(--text-base); color: var(--gray-900); }
.vtr-sub  { margin: 0; font-size: var(--text-sm); color: var(--gray-500); line-height: 1.45; }
.vtr-hint {
  font-size: var(--text-sm); color: var(--gray-500); line-height: 1.45;
  background: var(--gray-100); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
}

/* Abschnitte innerhalb des Dialogs: eine Überschrift ordnet, sie rahmt nicht ein
   (Karte in Karte ist ausgeschlossen — auch im Dialog). */
.vtr-block { display: flex; flex-direction: column; gap: var(--space-2); }
.vtr-block + .vtr-block { border-top: 1px solid var(--gray-200); padding-top: var(--space-3); }
.vtr-h3 {
  margin: 0; font-size: var(--text-md); font-weight: 600; color: var(--gray-900);
}

/* Zweispaltige Feldpaare; unter 640 px untereinander (Dialog wird dort zum Sheet). */
.vtr-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; }
.vtr-row .form-group { margin: 0; }
.vtr-grow { grid-column: span 1; }
@media (max-width: 640px) { .vtr-row { grid-template-columns: 1fr; } }

.vtr-check {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-md); color: var(--gray-900); cursor: pointer;
}
.vtr-check input { width: 16px; height: 16px; accent-color: var(--brand-primary); cursor: pointer; }

/* Was noch fehlt — ein Hinweis, keine Warnung: ein unvollständiger Vertrag ist
   kein Fehler, sondern ein Arbeitsstand. */
.vtr-missing {
  font-size: var(--text-sm); color: var(--gray-700); line-height: 1.45;
  background: var(--gray-100); border-left: 3px solid var(--color-warning, var(--gray-300));
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
}

/* ── Leistungsauswahl (§K) ─────────────────────────────────────────────────── */
.vtr-duties {
  display: flex; flex-direction: column;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md); overflow: hidden;
}
.vtr-duty {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); cursor: pointer;
  background: var(--color-surface);
}
.vtr-duty + .vtr-duty { border-top: 1px solid var(--gray-200); }
.vtr-duty:hover { background: var(--gray-50, var(--gray-100)); }
.vtr-duty input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--brand-primary); cursor: pointer; flex: none; }
.vtr-duty-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vtr-duty-n  { font-size: var(--text-md); color: var(--gray-900); font-weight: 500; }
.vtr-duty-m  { font-size: var(--text-xs); color: var(--gray-500); }
.vtr-duty-c  { font-size: var(--text-xs); color: var(--gray-500); font-style: italic; }

/* ── Auswahl eines bestehenden Vertrags (§T) ───────────────────────────────── */
.vtr-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md); overflow: hidden;
  max-height: 42vh; overflow-y: auto;
}
.vtr-pick {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); cursor: pointer; background: var(--color-surface);
}
.vtr-pick + .vtr-pick { border-top: 1px solid var(--gray-200); }
.vtr-pick:hover { background: var(--gray-50, var(--gray-100)); }
.vtr-pick input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand-primary); cursor: pointer; flex: none; }
.vtr-pick-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vtr-pick-n  { font-size: var(--text-md); color: var(--gray-900); font-weight: 500; }
.vtr-pick-m  { font-size: var(--text-xs); color: var(--gray-500); }

/* ── §T: neu erfassen oder zuordnen ────────────────────────────────────────── */
.vtr-choice { display: flex; flex-direction: column; gap: var(--space-2); }
.vtr-choice-b {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: var(--space-3); cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--gray-300);
  border-radius: var(--radius-md); font: inherit;
}
.vtr-choice-b:hover { border-color: var(--color-forest, var(--brand-primary)); background: var(--gray-50, var(--gray-100)); }
.vtr-choice-b:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Die generische Knopfregel zentriert — hier steht ein Titel mit Erklärung darunter,
   und der liest sich linksbündig. Deshalb ausdrücklich an beiden Zeilen. */
.vtr-choice-t { font-size: var(--text-md); font-weight: 600; color: var(--gray-900); text-align: left; }
.vtr-choice-s { font-size: var(--text-sm); color: var(--gray-500); line-height: 1.4; text-align: left; }