/* ═══════════════════════════════════════════════════════════════════════════
   VICore — ZENTRALE DOKUMENTEN-LESEANSICHT  (.vdv-)
   ---------------------------------------------------------------------------
   Vollbildebene an <body>. Liegt ÜBER der mobilen App-Schale (#vi-mobile,
   z-index 1000) und über dem Standarddialog, aber UNTER Bestätigung/Auswahl —
   eingeordnet in die zentrale Stapelordnung aus vi-dialog.css.
   Solange sie offen ist, liegt keine Bottom-Navigation über dem Dokument.
   ═══════════════════════════════════════════════════════════════════════════ */
.vdv {
  position: fixed; inset: 0;
  z-index: 8400;                          /* < PDF-Arbeitsplatz (8500), > Dialog (6000) */
  display: flex; flex-direction: column;
  background: var(--gray-900, #141A17);
  color: var(--color-surface);
  -webkit-tap-highlight-color: transparent;
}
.vdv * { box-sizing: border-box; }
/* Hintergrundseite ruhigstellen — kein Doppel-Scrollen hinter der Ansicht. */
body.vdv-open { overflow: hidden; }

/* ── Kopfzeile: kompakt, Safe-Area-fest ──────────────────────────────────────
   `height` + `padding-top: env(...)` vertragen sich mit border-box NICHT (der
   Inset frisst die Höhe auf und der Inhalt wird auf Notch-Geräten abgeschnitten)
   — deshalb `min-height` MIT eingerechnetem Inset. */
.vdv-top {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  height: auto; min-height: calc(52px + var(--app-safe-top));
  padding-top: var(--app-safe-top);
  padding-left: max(4px, var(--app-safe-left));
  padding-right: max(4px, var(--app-safe-right));
  background: rgba(0, 0, 0, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.vdv-icon {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--radius-lg); cursor: pointer; color: var(--color-surface);
}
.vdv-icon svg { width: 22px; height: 22px; }
.vdv-icon:active { background: rgba(255, 255, 255, .14); }
.vdv-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vdv-title-name {
  font-size: var(--text-base); font-weight: 650; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vdv-title-sub { font-size: var(--text-xxs); color: rgba(255, 255, 255, .62); }
.vdv-title-sub:empty { display: none; }

/* ── Bühne ───────────────────────────────────────────────────────────────── */
.vdv-stage {
  flex: 1 1 auto; min-height: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--app-safe-bottom);
  --vdv-zoom: 1;
}
.vdv-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 60%; padding: 40px 24px; text-align: center;
  color: rgba(255, 255, 255, .72); font-size: var(--text-md);
}
.vdv-fallback svg { width: 44px; height: 44px; opacity: .5; }
.vdv-fallback p { margin: 0; max-width: 34ch; line-height: 1.5; }
/* Dateiangabe unter der Meldung: leiser als der Satz, damit sie einordnet statt abzulenken. */
.vdv-fallback .vdv-fb-file { margin-top: -6px; font-size: var(--text-sm); opacity: .68; }
.vdv-btn {
  min-height: 46px; padding: 0 20px; cursor: pointer;
  border: none; border-radius: var(--radius-md, 8px);
  background: var(--brand-primary, #147352); color: var(--color-surface);
  font-size: var(--text-base); font-weight: 650;
}
.vdv-btn:active { background: var(--green-700, #0F5C42); }

/* ── PDF: fortlaufende Seitenbilder ──────────────────────────────────────── */
/* `width: max-content` + `min-width: 100%`: bei Zoom > 100 % wächst der Inhalt
   über die Bühne hinaus und wird waagerecht scrollbar (statt links abgeschnitten
   zu werden, wie es bei zentriertem Flex-Inhalt sonst passiert). */
.vdv-pages {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 14px 10px 24px;
  width: max-content; min-width: 100%; margin: 0 auto;
}
/* Die Breite hängt an der GEMESSENEN Bühnenbreite (--vdv-base, gesetzt in JS) —
   `max-width` allein wirkte auf Telefonen nie, weil 900px dort nie erreicht wird
   und der Zoom damit wirkungslos blieb. */
.vdv-page {
  margin: 0;
  width: calc(var(--vdv-base, 100%) * var(--vdv-zoom));
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.vdv-page img {
  display: block; width: 100%; height: auto;
  background: var(--color-surface); border-radius: 3px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}
/* Platzhalter hält die Höhe, bevor die Seite geladen ist (kein Springen). */
.vdv-page-ph {
  width: 100%; aspect-ratio: 1 / 1.414;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07); border-radius: 3px;
  color: rgba(255, 255, 255, .5); font-size: var(--text-sm);
}
.vdv-page figcaption { font-size: var(--text-xxs); color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }

/* ── Bild ────────────────────────────────────────────────────────────────── */
.vdv-stage-img { display: flex; }
.vdv-imgwrap {
  margin: auto; padding: 12px; display: flex; justify-content: center;
  width: max-content; min-width: 100%;
}
.vdv-imgwrap img {
  width: calc(var(--vdv-base, 100%) * var(--vdv-zoom));
  max-width: none; height: auto; border-radius: 4px;
}

/* ── Office / Text ───────────────────────────────────────────────────────── */
.vdv-office {
  background: var(--color-surface); color: var(--gray-900, #141A17);
  margin: 12px auto; padding: 20px; max-width: 900px;
  border-radius: 4px; overflow-x: auto;
}
.vdv-office table { border-collapse: collapse; }
.vdv-office td, .vdv-office th { border: 1px solid var(--gray-300, #D8DFDC); padding: 4px 8px; font-size: var(--text-sm); }
/* F-DOC-06: Die Office-Vorschau laeuft in einem gesperrten iframe (srcdoc,
   sandbox=""), damit durchgerutschtes HTML nie im App-Origin ausgefuehrt wird. */
.vdv-office-frame {
  display: block; width: 100%; height: 100%; min-height: 60vh;
  border: 0; background: var(--color-surface);
}
.vdv-text {
  margin: 12px; padding: 16px; background: var(--color-surface); color: var(--gray-900, #141A17);
  border-radius: 4px; font-size: var(--text-sm); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ── Dokumentinformationen ───────────────────────────────────────────────── */
.vdv-info { max-width: 520px; margin: 24px auto; padding: 0 18px; }
.vdv-info h2 { margin: 0 0 14px; font-size: var(--text-lg); font-weight: 700; }
.vdv-info-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: var(--text-md);
}
.vdv-info-row span { color: rgba(255, 255, 255, .62); }
.vdv-info-row b { text-align: right; overflow-wrap: anywhere; }
.vdv-info .vdv-btn { margin-top: 20px; width: 100%; }

/* ── Zoom-Leiste: schwebt über der Bühne, Safe-Area beachtet ─────────────── */
.vdv-zoom {
  position: fixed; z-index: 2;
  left: 50%; transform: translateX(-50%);
  bottom: calc(14px + var(--app-safe-bottom));
  display: flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.vdv-zoom button {
  width: 42px; height: 42px; border: none; background: none; cursor: pointer; color: var(--color-surface);
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill);
}
.vdv-zoom button svg { width: 20px; height: 20px; }
.vdv-zoom button:active { background: rgba(255, 255, 255, .16); }
.vdv-zoom span { min-width: 56px; text-align: center; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* ── Menü „⋮" ────────────────────────────────────────────────────────────── */
.vdv-menu {
  position: absolute; z-index: 3;
  top: calc(52px + var(--app-safe-top)); right: 8px;
  min-width: 214px; padding: 6px;
  background: var(--color-surface, #fff); color: var(--gray-900, #141A17);
  border: 1px solid var(--gray-300, #D8DFDC); border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-pop, 0 10px 30px rgba(0, 0, 0, .28));
}
.vdv-menu[hidden] { display: none; }
.vdv-menu button {
  display: block; width: 100%; text-align: left;
  min-height: 46px; padding: 0 12px; cursor: pointer;
  border: none; background: none; border-radius: var(--radius-sm, 6px);
  font-size: var(--text-md); font-weight: 550; color: inherit;
}
.vdv-menu button:hover, .vdv-menu button:active { background: var(--gray-100, #EFF2F1); }

/* Auf großen Bildschirmen als zentriertes Fenster statt Vollbild — dieselbe
   Komponente, nur eine andere Bühne (Desktop wird nicht zur Mobilansicht). */
@media (min-width: 1024px) {
  .vdv { inset: 24px; border-radius: var(--radius-xl, 16px); overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); }
}

/* ── STANDALONE-DOKUMENTANSICHT (/dokumente/<id>, 10.09.2026) ───────────────────
   Ein Dokument, das in einem EIGENEN Tab geöffnet wird (Nachweislink aus der
   Wartungs-/Prüfungs-PDF, „In neuem Tab öffnen", kopierte Adresse), hat keinen
   Arbeitskontext darunter — die Seite IST das Dokument. Diese Regeln beschreiben nur
   die Zustände, in denen KEIN Dokument gezeigt werden kann: kein Zugriff, gelöscht,
   ungültige Nummer. Sie sind bewusst ruhig und nennen einen Weg, statt automatisch
   irgendwohin zu navigieren. */
.vdv-standalone { display: flex; align-items: center; justify-content: center;
  min-height: 60vh; padding: var(--space-5, 20px); }
.vdv-standalone-box { max-width: 44ch; text-align: center; }
.vdv-standalone-t { font-size: var(--text-lg, 17px); font-weight: var(--fw-semibold, 600);
  color: var(--text-primary, #141A17); margin: 0 0 var(--space-2, 8px); }
.vdv-standalone-x { font-size: var(--text-md, 14px); color: var(--text-secondary, #3A4441); margin: 0; }
.vdv-standalone-a { display: flex; gap: var(--space-2, 8px); justify-content: center;
  flex-wrap: wrap; margin-top: var(--space-4, 16px); }
/* Ohne Rückweg trägt die Kopfzeile links das Dokumentsymbol statt eines Zurück-Knopfes:
   ein Knopf, der nirgendwohin führt, ist schlimmer als keiner. */
.vdv-icon--doc { display: inline-flex; align-items: center; justify-content: center;
  opacity: .7; pointer-events: none; }