/**
 * einstellungen-vertragsvorlagen.css — Settings-Panel „hr-vertragsvorlagen".
 *
 * Self-scoped über `.hrvv-root`, das das Panel-JS selbst auf seinen Host schreibt —
 * kein Selektor hängt an einem Vorfahren der Settings-Shell (`check:css-scope`).
 * Alle Farben, Abstände und Radien aus den Token (`check:css-tokens`).
 */

.hrvv-root { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; }

/* Zwei Spalten: Liste links (feste Bahn), Editor rechts (nachgebend). Der Editor ist der
   Arbeitsbereich — die Liste soll nicht mitwachsen, sonst wandert der Text bei jedem
   längeren Vorlagennamen. */
.hrvv-spalten { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-4); align-items: start; }

.hrvv-listspalte { display: flex; flex-direction: column; gap: var(--space-2); }
.hrvv-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }

.hrvv-root .hrvv-listitem {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); cursor: pointer;
  font-family: inherit; font-size: var(--font-size-sm); color: var(--color-text);
}
.hrvv-root .hrvv-listitem:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.hrvv-root .hrvv-listitem.is-aktiv { border-color: var(--color-accent); background: var(--color-accent-bg-soft); }
.hrvv-listname { font-weight: 600; }
.hrvv-listmeta { color: var(--color-text-secondary); font-size: var(--font-size-xs); }

.hrvv-leer, .hrvv-ph-laedt {
  color: var(--color-text-secondary); font-size: var(--font-size-sm); padding: var(--space-3);
}

.hrvv-editorhost { min-width: 0; }
.hrvv-editor { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.hrvv-kopf { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.hrvv-kopf .hrvv-name { flex: 2 1 220px; min-width: 0; }
.hrvv-kopf .hrvv-key, .hrvv-kopf .hrvv-gruppe { flex: 1 1 160px; min-width: 0; }
.hrvv-kopf .hrvv-zg { flex: 0 0 auto; }
.hrvv-key-fest {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  color: var(--color-text-secondary); background: var(--color-surface-soft);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 4px var(--space-2);
}

/* Text links, Platzhalter rechts. Die Platzhalter-Spalte ist schmal und fest: sie ist
   Nachschlagewerk, nicht Inhalt. */
.hrvv-split { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-3); align-items: start; }
.hrvv-textspalte { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

.hrvv-root .hrvv-koerper {
  width: 100%; min-height: 420px; resize: vertical;
  font-family: var(--font-mono); font-size: var(--font-size-sm); line-height: 1.55;
  tab-size: 2;
}

/* Befunde: ruhig, solange nichts anliegt. Ein dauerhaft roter Kasten unter dem Text würde
   beim Tippen ständig aufblitzen und wäre nach zwei Minuten unsichtbar. */
.hrvv-befunde { display: flex; flex-direction: column; gap: 2px; }
.hrvv-befund-ok { color: var(--color-success-strong); font-size: var(--font-size-xs); }
.hrvv-befunde.has-befunde {
  background: var(--color-warning-bg); border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
}
.hrvv-befund-titel { font-weight: 600; font-size: var(--font-size-xs); color: var(--color-text); margin-bottom: 2px; }
.hrvv-befund { display: flex; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.hrvv-befund-zeile { flex: 0 0 auto; font-family: var(--font-mono); color: var(--color-text-tertiary); }
.hrvv-befund-text { min-width: 0; }

.hrvv-phspalte { min-width: 0; }
.hrvv-ph-host { display: flex; flex-direction: column; gap: var(--space-3); }
.hrvv-ph-gruppe { display: flex; flex-wrap: wrap; gap: 4px; }
.hrvv-ph-titel {
  flex: 1 0 100%; font-size: var(--font-size-xs); font-weight: 600;
  color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .02em;
}
.hrvv-root .hrvv-ph-chip {
  font-family: var(--font-mono); font-size: var(--font-size-xs);
  padding: 3px var(--space-2); cursor: pointer;
  background: var(--color-surface-soft); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--color-text);
}
.hrvv-root .hrvv-ph-chip:hover { background: var(--color-accent-bg-soft); border-color: var(--color-accent); }

/* Feldliste: eine Zeile je Feld, feste Bahnen — die Schlüssel-Spalte trägt einen
   atomaren Wert und darf nicht nachgeben. */
.hrvv-feldblock { display: flex; flex-direction: column; gap: var(--space-2); }
.hrvv-feldtitel { font-weight: 600; font-size: var(--font-size-sm); }
.hrvv-feldhinweis { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.hrvv-felder { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.hrvv-feld {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) 140px auto auto;
  gap: var(--space-2); align-items: center; width: 100%;
}
.hrvv-feld > * { flex-shrink: 0; }
.hrvv-feld-key { font-family: var(--font-mono); }
.hrvv-feld-pflicht {
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: var(--font-size-xs); color: var(--color-text-secondary);
}

.hrvv-aktionen { display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; }

/* Vorschau-Overlay. Body-gemountet, aber layout-neutral (kein `.app-scope`). */
.hrvv-vorschau-overlay {
  position: fixed; inset: 0; z-index: var(--z-drawer-modal);
  background: var(--lod-scrim); display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.hrvv-vorschau-box {
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-16); width: min(900px, 100%); height: min(90vh, 100%);
  display: flex; flex-direction: column; overflow: hidden;
}
.hrvv-vorschau-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}
.hrvv-vorschau-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--color-surface-soft); }

/* ── Notebook: die Platzhalter-Spalte unter den Text ─────────────────────── */
@media (max-width: 1399px) {
  .hrvv-split { grid-template-columns: minmax(0, 1fr); }
  .hrvv-phspalte { order: 2; }
  .hrvv-ph-host { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }
}

/* ── Tablet: Liste über den Editor ───────────────────────────────────────── */
@media (max-width: 999px) {
  .hrvv-spalten { grid-template-columns: minmax(0, 1fr); }
  .hrvv-liste { flex-direction: row; flex-wrap: wrap; }
  .hrvv-root .hrvv-listitem { width: auto; }
  .hrvv-feld { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── Mobile: alles einspaltig, Editor kürzer ─────────────────────────────── */
@media (max-width: 599px) {
  .hrvv-feld { grid-template-columns: minmax(0, 1fr); }
  .hrvv-root .hrvv-koerper { min-height: 280px; }
  .hrvv-aktionen { flex-direction: column; align-items: stretch; }
}