/* ═══════════════════════════════════════════════════════════════════════════════
 * PDF-ARBEITSPLATZ — Vollbild-Arbeitsfläche (Namespace .pdfw- / #pdfw-app)
 *
 * Leitsatz: das Dokument ist die Hauptsache. Die Bedienoberfläche nimmt so wenig
 * Platz wie möglich — eine Kopfzeile, eine Werkzeugleiste, sonst nur Blatt.
 * Keine Karte-in-Karte, keine gestapelten Toolbars, kein großer Header.
 *
 * EBENE: z-index 8500. Registry (vgl. vi-overlay.css §Ebenen):
 *   4000 Anhang-Lightbox · 8000 Mail-Fenster · 8500 PDF-Arbeitsplatz ·
 *   8900 Mail-Entwurfsleiste · 9000 VIUI-Menü · 9200 Mail-Popover · 9600 VIOverlay-Tooltip
 * Bewusst UNTER 9000, damit Aktionsmenüs und Tooltips des Arbeitsplatzes darüber liegen.
 *
 * Alle Farben/Abstände/Radien kommen aus public/css/design-system.css. Modulprivate
 * Tokens tragen das Präfix --pdfw-* und überschreiben nie einen kanonischen Namen.
 * ═══════════════════════════════════════════════════════════════════════════════ */

#pdfw-app {
  --pdfw-z: 8500;
  --pdfw-top-h: 52px;
  --pdfw-tools-h: 52px;
  --pdfw-stage-bg: var(--color-slate-200);
  --pdfw-sheet-shadow: 0 1px 3px rgba(16, 24, 40, .16), 0 8px 24px rgba(16, 24, 40, .10);
  --pdfw-sel: var(--color-forest);
  --pdfw-thumbs-w: 148px;

  position: fixed;
  inset: 0;
  z-index: var(--pdfw-z);
  display: none;
  flex-direction: column;
  background: var(--color-surface);
  font-family: var(--font-body);
  color: var(--gray-900);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#pdfw-app.is-open { display: flex; }
body.pdfw-lock { overflow: hidden; }

/* ── Kopfzeile ────────────────────────────────────────────────────────────── */
.pdfw-top {
  flex: 0 0 auto;
  min-height: var(--pdfw-top-h);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--gray-200);
  background: var(--color-surface);
}
.pdfw-back {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 36px; padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--gray-700);
  font: inherit; font-size: var(--text-md); cursor: pointer;
}
.pdfw-back:hover { background: var(--gray-100); }
.pdfw-back svg { width: 18px; height: 18px; }
.pdfw-titlewrap { min-width: 0; flex: 1 1 auto; display: flex; align-items: baseline; gap: var(--space-2); }
.pdfw-title {
  font-size: var(--text-md); font-weight: var(--font-weight-semibold);
  color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdfw-state {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xxs); font-weight: var(--font-weight-medium);
  background: var(--gray-100); color: var(--gray-700);
}
.pdfw-state.is-draft { background: var(--color-gold-soft); color: var(--color-gold-ink); }
.pdfw-state.is-finalized { background: var(--color-success-soft); color: var(--color-success-ink); }
.pdfw-save {
  flex: 0 0 auto; font-size: var(--text-xxs); color: var(--gray-500);
  min-width: 84px; text-align: right;
}
.pdfw-save.is-saving { color: var(--gray-600); }
.pdfw-save.is-err { color: var(--color-danger-ink); }

/* ── Werkzeugleiste ───────────────────────────────────────────────────────── */
.pdfw-tools {
  flex: 0 0 auto;
  min-height: var(--pdfw-tools-h);
  display: flex; align-items: center; gap: var(--space-1);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-25);
  overflow: hidden;
}
.pdfw-tool {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--gray-700);
  font: inherit; font-size: var(--text-sm); font-weight: var(--font-weight-medium);
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.pdfw-tool:hover { background: var(--gray-100); }
.pdfw-tool svg { width: 17px; height: 17px; flex: 0 0 auto; }
.pdfw-tool.is-active {
  background: var(--color-green-50); border-color: var(--color-green-200); color: var(--color-forest);
}
.pdfw-tool[disabled] { opacity: .45; cursor: not-allowed; }
.pdfw-sep { width: 1px; height: 22px; background: var(--gray-200); margin: 0 var(--space-1); flex: 0 0 auto; }
.pdfw-spacer { flex: 1 1 auto; }

.pdfw-zoom { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.pdfw-zoomval {
  min-width: 46px; text-align: center;
  font-size: var(--text-xs); color: var(--gray-600);
  font-variant-numeric: lining-nums tabular-nums;
}
.pdfw-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--gray-600); cursor: pointer;
}
.pdfw-iconbtn:hover { background: var(--gray-100); color: var(--gray-800); }
.pdfw-iconbtn svg { width: 17px; height: 17px; }

.pdfw-primary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-md);
  background: var(--brand-primary); color: var(--brand-text-on-primary);
  font: inherit; font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
  cursor: pointer; white-space: nowrap;
}
.pdfw-primary:hover { background: var(--brand-primary-hover); }
.pdfw-primary[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Arbeitsbereich ───────────────────────────────────────────────────────── */
.pdfw-main { flex: 1 1 auto; min-height: 0; display: flex; }

.pdfw-thumbs {
  flex: 0 0 var(--pdfw-thumbs-w);
  border-right: 1px solid var(--gray-200);
  overflow-y: auto; overflow-x: hidden;
  background: var(--gray-50);
  padding: var(--space-2);
}
.pdfw-thumbs.is-hidden { display: none; }
.pdfw-thumb {
  display: block; width: 100%; margin-bottom: var(--space-2);
  border: 2px solid transparent; border-radius: var(--radius-sm);
  background: var(--color-surface); cursor: pointer; padding: 0;
  overflow: hidden; line-height: 0;
}
.pdfw-thumb img { width: 100%; height: auto; display: block; }
.pdfw-thumb.is-current { border-color: var(--pdfw-sel); }
.pdfw-thumb-n {
  display: block; text-align: center; line-height: normal;
  font-size: var(--text-xxs); color: var(--gray-500); padding: 2px 0;
  font-variant-numeric: lining-nums tabular-nums;
}

.pdfw-stage {
  flex: 1 1 auto; min-width: 0;
  overflow: auto;
  background: var(--pdfw-stage-bg);
  padding: var(--space-4) var(--space-3);
  -webkit-overflow-scrolling: touch;
}
.pdfw-doc { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

.pdfw-page {
  position: relative;
  background: var(--color-surface);
  box-shadow: var(--pdfw-sheet-shadow);
  line-height: 0;
  touch-action: pan-x pan-y;
}
.pdfw-page > img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.pdfw-page-ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: var(--gray-400);
  font-size: var(--text-xs); line-height: normal;
}
.pdfw-page.is-placing { cursor: crosshair; }

/* Vorhandene Formularfelder des PDFs sichtbar machen (nur Hinweis, kein Rahmenzwang) */
.pdfw-field {
  position: absolute; box-sizing: border-box;
  border: 1px dashed var(--color-info); background: var(--color-info-soft);
  opacity: .45; pointer-events: none; border-radius: 2px;
}
.pdfw-page.hide-fields .pdfw-field { display: none; }

/* ── Elemente auf dem Blatt ───────────────────────────────────────────────── */
.pdfw-el {
  position: absolute; box-sizing: border-box;
  line-height: 1.25;
  cursor: move;
  border: 1px solid transparent;
  border-radius: 2px;
  touch-action: none;
}
.pdfw-el:hover { border-color: var(--color-green-300); }
.pdfw-el.is-selected { border-color: var(--pdfw-sel); box-shadow: 0 0 0 1px var(--pdfw-sel); }
.pdfw-el-text {
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-body); color: var(--gray-900);
  padding: 0; overflow: hidden;
}
.pdfw-el-img { width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; }
.pdfw-el-check { width: 100%; height: 100%; display: block; pointer-events: none; }
.pdfw-el-input {
  width: 100%; height: 100%; border: 0; outline: 0; resize: none;
  background: transparent; font: inherit; color: inherit; padding: 0;
  line-height: 1.25; overflow: hidden;
}

/* Griffe: bewusst großzügig (Finger), aber optisch leise */
.pdfw-h {
  position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--pdfw-sel); background: var(--color-surface);
  border-radius: 50%; display: none; touch-action: none;
}
.pdfw-el.is-selected .pdfw-h { display: block; }
.pdfw-h-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.pdfw-h-del {
  right: -9px; top: -9px; width: 18px; height: 18px;
  border-color: var(--color-danger); color: var(--color-danger);
  display: none; align-items: center; justify-content: center; cursor: pointer;
  font-size: var(--text-xs); line-height: 1; font-weight: var(--font-weight-bold);
}
.pdfw-el.is-selected .pdfw-h-del { display: flex; }

/* ── Fußleiste (Seitenanzeige) ────────────────────────────────────────────── */
.pdfw-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 38px; padding: 0 var(--space-3);
  border-top: 1px solid var(--gray-200);
  background: var(--color-surface);
  font-size: var(--text-xs); color: var(--gray-600);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ── Zustände ─────────────────────────────────────────────────────────────── */
.pdfw-msg {
  margin: auto; max-width: 420px; text-align: center;
  padding: var(--space-5); color: var(--gray-600); font-size: var(--text-md);
}
.pdfw-msg-t { font-weight: var(--font-weight-semibold); color: var(--gray-900); margin-bottom: var(--space-2); }
.pdfw-banner {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-warning-soft); color: var(--color-warning-ink);
  font-size: var(--text-sm); border-bottom: 1px solid var(--gray-200);
}

/* ── Auswahl-Blätter (Unterschrift / Stempel) ─────────────────────────────── */
/* Nutzt bewusst das App-Standarddialogfeld (.modal-overlay > .modal, Modifier .vi-dlg) —
   kein zweites Dialogsystem. Nur die Ebene wird angehoben, damit das Blatt über der
   Arbeitsfläche (8500) liegt. */
.pdfw-sheet-ov { z-index: 8700; }
.pdfw-pick { display: flex; flex-direction: column; gap: var(--space-2); }
.pdfw-pick-btn {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 56px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer; text-align: left;
  font: inherit; font-size: var(--text-md); color: var(--gray-900);
}
.pdfw-pick-btn:hover { border-color: var(--color-green-300); background: var(--color-green-50); }
.pdfw-pick-btn img { max-height: 40px; max-width: 130px; object-fit: contain; }
.pdfw-pick-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdfw-pick-sub { font-size: var(--text-xs); color: var(--gray-500); }
.pdfw-pick-empty { font-size: var(--text-sm); color: var(--gray-500); padding: var(--space-2) 0; }

/* Unterschriften-Zeichenfeld: gehoert zur GETEILTEN Komponente VISignaturePad
   (public/vi-signature-pad.js) und wird deshalb `vi-`-praefigiert, nicht `pdfw-`.
   Zweiter Nutzer ist die Digitale Visitenkarte („Jetzt unterschreiben"). */
.vi-sigpad-wrap {
  position: relative; border: 1px dashed var(--gray-300); border-radius: var(--radius-md);
  background: var(--gray-25); height: 190px; overflow: hidden;
}
.vi-sigpad { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.vi-sigpad-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); font-size: var(--text-sm); pointer-events: none;
}
.vi-sigpad-ph.is-hidden { display: none; }

.pdfw-sum { list-style: none; margin: 0; padding: 0; }
.pdfw-sum li {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) 0; font-size: var(--text-md); color: var(--gray-800);
  border-bottom: 1px solid var(--gray-200);
}
.pdfw-sum li:last-child { border-bottom: 0; }
.pdfw-sum-note {
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--color-info-soft); color: var(--color-info-ink);
  border-radius: var(--radius-md); font-size: var(--text-sm);
}

/* ── Mobil: Werkzeuge nach unten, Kopfzeile schlank ───────────────────────── */
@media (max-width: 767px) {
  #pdfw-app { --pdfw-top-h: 48px; }
  .pdfw-thumbs { display: none; }
  .pdfw-stage { padding: var(--space-2); }
  .pdfw-tools {
    order: 3;
    border-bottom: 0; border-top: 1px solid var(--gray-200);
    background: var(--color-surface);
    justify-content: space-around;
    padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
    min-height: 58px;
  }
  .pdfw-main { order: 2; }
  .pdfw-foot { order: 1; border-top: 0; border-bottom: 1px solid var(--gray-200); min-height: 30px; }
  .pdfw-tool {
    flex-direction: column; gap: 2px; height: auto; min-width: 56px; min-height: 46px;
    padding: var(--space-1); font-size: var(--text-xxs);
  }
  .pdfw-tool svg { width: 20px; height: 20px; }
  .pdfw-sep, .pdfw-spacer, .pdfw-zoom { display: none; }
  .pdfw-primary { display: none; }         /* Abschließen liegt mobil im Kopf */
  .pdfw-top .pdfw-primary { display: inline-flex; height: 32px; padding: 0 var(--space-2); font-size: var(--text-xs); }
  .pdfw-save { display: none; }
  .pdfw-h { width: 20px; height: 20px; }
  .pdfw-h-se { right: -11px; bottom: -11px; }
  .pdfw-h-del { right: -12px; top: -12px; width: 24px; height: 24px; font-size: var(--text-md); }
}

@media (prefers-reduced-motion: reduce) {
  .pdfw-tool { transition: none; }
}