/* ═══════════════════════════════════════════════════════════════════════════
   Vorlagen & Dokumentdesign (document_templates) — Modul-Styles.
   Namespace .dt-. Nur Design-System-Tokens (var(--…)), keine Fremd-Hex/px
   außerhalb dynamischer Werte. App-.modal wird NICHT überschrieben (eigenes
   .dt-modal). Editor = 3 Spalten (Palette · A4-Fläche · Eigenschaften).
   ═══════════════════════════════════════════════════════════════════════════ */
.dt-page { padding: 0; }
.dt-hidden { display: none !important; }
.dt-toolbar .dt-spacer { flex: 1 1 auto; }
.dt-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.dt-filters select, .dt-filters input { min-width: 0; }
.dt-search { min-width: 220px; }

.dt-table-wrap { overflow-x: auto; }
.dt-table { width: 100%; border-collapse: collapse; }
.dt-table th, .dt-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default, var(--color-slate-200)); font-size: var(--text-sm); vertical-align: middle; }
.dt-table th { color: var(--text-muted, var(--color-slate-500)); font-weight: var(--fw-semibold); white-space: nowrap; }
.dt-table tbody tr:hover { background: var(--color-forest-soft, var(--color-slate-50)); }
.dt-name { font-weight: var(--fw-semibold); color: var(--text-primary); cursor: pointer; }
.dt-name:hover { text-decoration: underline; }
.dt-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.dt-row-actions { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; }

.dt-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--fw-semibold); white-space: nowrap; }
.dt-badge.is-draft { background: var(--color-slate-100); color: var(--color-slate-700); }
.dt-badge.is-published { background: var(--color-mint-soft, var(--color-green-100)); color: var(--color-success-ink, var(--color-green-800)); }
.dt-badge.is-archived { background: var(--color-slate-100); color: var(--color-slate-500); }
.dt-badge.is-default { background: var(--color-gold-soft); color: var(--color-gold-ink); }
.dt-badge.is-scope { background: var(--color-info-soft); color: var(--color-info-ink); }

.dt-empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-muted); }

/* ── Editor-Rahmen ─────────────────────────────────────────────────────────── */
.dt-editor { display: flex; flex-direction: column; gap: var(--space-3); }
.dt-editbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); background: var(--color-surface, #fff); border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-md); position: sticky; top: 0; z-index: 5; }
.dt-editbar .dt-title { font-weight: var(--fw-bold); color: var(--text-primary); }
.dt-editbar .dt-sub { font-size: var(--text-xs); color: var(--text-muted); }
.dt-dirty { color: var(--color-amber-600); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.dt-saved { color: var(--color-success, var(--color-green-600)); font-size: var(--text-xs); }

.dt-grid { display: grid; grid-template-columns: 240px 1fr 300px; gap: var(--space-3); align-items: start; }
.dt-panel { background: var(--color-surface, #fff); border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-md); overflow: hidden; }
.dt-panel h4 { margin: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--border-default, var(--color-slate-200)); background: var(--color-slate-50); }
.dt-panel .dt-panel-body { padding: var(--space-2); max-height: 72vh; overflow-y: auto; }

/* Palette */
.dt-pal-group { margin-bottom: var(--space-3); }
.dt-pal-group > .dt-pal-h { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); margin: var(--space-2) 0 var(--space-1); }
.dt-chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px; padding: 5px 9px; border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-sm); background: var(--color-surface, #fff); font-size: var(--text-xs); cursor: grab; color: var(--text-primary); white-space: normal; overflow-wrap: anywhere; }
.dt-chip:hover { border-color: var(--color-forest); background: var(--color-forest-soft, var(--color-slate-50)); }
.dt-chip[draggable="true"]:active { cursor: grabbing; }
.dt-fieldsearch { width: 100%; margin-bottom: var(--space-2); }
.dt-fcat { margin-bottom: var(--space-2); }
.dt-fcat > summary { cursor: pointer; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); padding: 2px 0; }
.dt-field-item { display: block; width: 100%; text-align: left; margin: 2px 0; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--color-slate-50); font-size: var(--text-xs); cursor: grab; color: var(--text-primary); white-space: normal; overflow-wrap: anywhere; }
.dt-field-item:hover { border-color: var(--color-sage); background: var(--color-surface, #fff); }
.dt-field-item .dt-fk { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-subtle, var(--color-slate-400)); }

/* A4-Fläche */
.dt-canvas-wrap { background: var(--color-slate-100); border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-md); padding: var(--space-4); overflow: auto; max-height: 76vh; }
.dt-canvas-tools { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.dt-sheet { background: var(--color-surface); margin: 0 auto; box-shadow: var(--shadow-md); width: 794px; min-height: 1123px; transform-origin: top center; position: relative; }
.dt-zone { border: 1px dashed transparent; padding: 10px 14px; }
.dt-zone.dt-zone-header { border-bottom: 1px dashed var(--color-slate-300); min-height: 40px; }
.dt-zone.dt-zone-footer { border-top: 1px dashed var(--color-slate-300); min-height: 30px; }
.dt-zone.dt-zone-body { min-height: 900px; }
.dt-zone-label { position: absolute; right: 6px; font-size: 10px; color: var(--text-subtle, var(--color-slate-400)); text-transform: uppercase; letter-spacing: .05em; }
.dt-zone.dt-dropok { border-color: var(--color-forest); background: var(--color-forest-soft, rgba(20,122,67,.05)); }

.dt-el { position: relative; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 4px 8px; margin: 2px 0; cursor: pointer; font-size: var(--text-sm); color: var(--color-slate-800); }
.dt-el:hover { border-color: var(--color-slate-200); background: var(--color-slate-50); }
.dt-el.is-selected { border-color: var(--color-forest); background: var(--color-forest-soft, rgba(20,122,67,.06)); box-shadow: 0 0 0 1px var(--color-forest); }
.dt-el.is-conditional::after { content: "?"; position: absolute; top: 2px; right: 4px; font-size: 10px; color: var(--color-gold-ink); background: var(--color-gold-soft); border-radius: var(--radius-full); width: 14px; height: 14px; text-align: center; line-height: 14px; }
.dt-el .dt-el-type { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle, var(--color-slate-400)); }
.dt-el .dt-el-head { font-weight: var(--fw-bold); color: var(--color-forest); }
.dt-el .dt-el-field { font-family: var(--font-mono); font-size: var(--text-xxs); color: var(--color-sage-hover, var(--color-slate-600)); }
.dt-el .dt-el-muted { color: var(--text-muted); }
.dt-el-tbl { border: 1px solid var(--color-slate-200); border-radius: var(--radius-sm); overflow: hidden; }
.dt-el-tbl .dt-el-tbl-h { background: var(--color-slate-50); padding: 3px 6px; font-size: 10px; color: var(--text-muted); display: flex; gap: 8px; }
.dt-el-drop { height: 4px; margin: 0; border-radius: 2px; }
.dt-el-drop.dt-dropok { height: 14px; background: var(--color-forest-soft, rgba(20,122,67,.2)); border: 1px dashed var(--color-forest); }

/* Overlay-Canvas */
.dt-ov-page { position: relative; margin: 0 auto var(--space-3); box-shadow: var(--shadow-md); background: var(--color-surface); }
.dt-ov-page img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; }
.dt-ov-el { position: absolute; border: 1px dashed var(--color-forest); background: rgba(20,122,67,.08); font-size: 10px; padding: 1px 3px; cursor: move; color: var(--color-slate-800); overflow: hidden; white-space: nowrap; }
.dt-ov-el.is-selected { border-style: solid; box-shadow: 0 0 0 2px var(--color-forest); z-index: 3; }

/* Eigenschaften */
.dt-prop { margin-bottom: var(--space-3); }
.dt-prop label { display: block; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); margin-bottom: 3px; }
.dt-prop input[type=text], .dt-prop input[type=number], .dt-prop select, .dt-prop textarea { width: 100%; }
.dt-prop textarea { min-height: 60px; resize: vertical; font-family: inherit; }
.dt-prop-row { display: flex; gap: var(--space-2); }
.dt-prop-row > div { flex: 1; min-width: 0; }
.dt-prop-hint { font-size: var(--text-xxs); color: var(--text-muted); margin-top: 2px; }
.dt-prop-check { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.dt-prop-check input { width: auto; }
.dt-cond { border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-sm); padding: var(--space-2); margin-bottom: var(--space-2); }
.dt-cond-row { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; }
.dt-cond-row select, .dt-cond-row input { font-size: var(--text-xs); }
.dt-prop-none { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-4) var(--space-2); text-align: center; }

/* ── Eigene Modals (NICHT App-.modal überschreiben) ─────────────────────────── */
.dt-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,20,.5); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; z-index: 1200; overflow-y: auto; }
.dt-modal { background: var(--color-surface, #fff); border-radius: var(--radius-lg); box-shadow: var(--shadow-2xl); width: 100%; max-width: 640px; display: flex; flex-direction: column; max-height: 92vh; }
.dt-modal.dt-modal-lg { max-width: 1000px; }
.dt-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default, var(--color-slate-200)); }
.dt-modal-head h3 { margin: 0; font-size: var(--text-lg); color: var(--text-primary); }
.dt-modal-body { padding: var(--space-4); overflow-y: auto; }
.dt-modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-default, var(--color-slate-200)); }
.dt-x { background: none; border: none; font-size: var(--text-xl); line-height: 1; cursor: pointer; color: var(--text-muted); }

.dt-form-field { margin-bottom: var(--space-3); }
.dt-form-field label { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); margin-bottom: 4px; color: var(--text-secondary); }
.dt-form-field input, .dt-form-field select, .dt-form-field textarea { width: 100%; }
.dt-radio-cards { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dt-radio-card { flex: 1; min-width: 200px; border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-md); padding: var(--space-3); cursor: pointer; }
.dt-radio-card.is-active { border-color: var(--color-forest); box-shadow: 0 0 0 1px var(--color-forest); background: var(--color-forest-soft, var(--color-slate-50)); }
.dt-radio-card .dt-rc-title { font-weight: var(--fw-semibold); }
.dt-radio-card .dt-rc-desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* Vorschau */
.dt-preview-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-3); }
.dt-preview-frame { width: 100%; height: 70vh; border: 1px solid var(--border-default, var(--color-slate-200)); border-radius: var(--radius-md); background: var(--color-slate-100); }
.dt-issues { list-style: none; padding: 0; margin: var(--space-2) 0; }
.dt-issue { display: flex; gap: 6px; padding: 6px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); margin-bottom: 4px; }
.dt-issue.sev-error { background: var(--color-danger-soft); color: var(--color-danger-ink); }
.dt-issue.sev-warning { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.dt-issue.sev-hint { background: var(--color-info-soft); color: var(--color-info-ink); }

/* Versionshistorie */
.dt-ver-list { list-style: none; padding: 0; margin: 0; }
.dt-ver { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default, var(--color-slate-200)); }
.dt-ver .dt-ver-no { font-family: var(--font-mono); font-weight: var(--fw-bold); }

@media (max-width: 1100px) {
  .dt-grid { grid-template-columns: 1fr; }
  .dt-sheet { width: 100%; }
  .dt-preview-layout { grid-template-columns: 1fr; }
}