/* documents.css — dv-Viewer: NUR ANORDNUNG (Flex/Grid, Breiten/Höhen, Abstände, Lage, Sichtbarkeits-Zustände).
   Jedes Aussehen (Flächen, Rahmen, Schrift, Farben, Schatten) liefern die Kern-Bausteine aus core/Design.php:
   pane · stage · thumb · mediaCard · divider · popover · noPreview · textPage · richText(doc) · metaLine ·
   editTitle · chip(tint/remove/sm) · iconDot(sm) · iconBtn(pressed/badge) · mediaLightbox · floatbar/toolBtn ·
   dropOverlay · plainTable · loading. */

/* Scroll-Sperre (Lightbox/Annotieren offen) — Layout-Zustand als Klasse statt inline body.style.overflow */
body.dv-noscroll { overflow: hidden; }

/* Fenster-Body-Höhe (100% statt 100vh — sonst ist die Kachel höher als das Fenster → Endlos-Scroll). */
.dv-wrap { display: flex; height: 100%; overflow: hidden; position: relative; }
.dv-content-col { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.dv-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); }

/* ── Werkzeugleiste (Design::pane edge bottom) ── */
.dv-topbar { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-7) 0 var(--sp-1); height: var(--sz-48); flex-shrink: 0; z-index: var(--z-raised); }
.dv-topbar-left, .dv-topbar-right { display: flex; align-items: center; gap: var(--sp-3); }
.dv-topbar-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
/* Suche: löschbares Kern-Feld, das × liegt im Feld rechts */
.dv-search { position: relative; width: var(--sz-220); display: flex; align-items: center; }
.dv-search-input { width: 100%; }
.dv-search-reset { position: absolute; right: var(--sp-1); top: 50%; transform: translateY(-50%); }
.dv-search-reset[hidden] { display: none; }
/* Filter-Panel (Design::popover) klappt unter dem Filter-Knopf auf */
.dv-filter-wrap { position: relative; }
.dv-filter-dropdown { display: none; position: absolute; top: 100%; left: 0; margin-top: var(--sp-1); z-index: var(--z-nav); width: var(--sz-320); }
.dv-filter-dropdown.open { display: block; }
.dv-nav-info { min-width: var(--sz-40); text-align: center; }
.dv-tool-sep { height: var(--sz-24); margin: 0 var(--sp-1); }
.dv-tool-zoom-group, .dv-tool-file-group { display: inline-flex; align-items: center; gap: 0; }
.dv-tool-zoom-group[hidden], .dv-tool-annotate[hidden] { display: none; }

/* ── Hauptfläche: Bühne + Filmstreifen | rechte Spalte ── */
.dv-main { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.dv-viewer-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* Bühne (Design::stage) */
.dv-viewer { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; position: relative; min-width: 0; transition: opacity var(--dur); }
.dv-viewer.dv-loading { opacity: var(--op-dim); pointer-events: none; }
.dv-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform var(--dur); cursor: grab; }
.dv-viewer img.zoomed { cursor: zoom-out; }
.dv-viewer iframe { width: 100%; height: 100%; border: none; }
.dv-viewer .dv-text { max-width: 100%; max-height: 100%; margin: var(--sp-8); }
.dv-md-viewer { min-height: 100%; overflow-y: auto; width: 100%; }
/* Office-Vorschau: der Rahmen blendet ein, sobald geladen; bis dahin liegt der Ladezustand darüber */
.dv-office-frame { opacity: 0; transition: opacity var(--dur-slow); }
.dv-office-frame.loaded { opacity: 1; }
.dv-office-loading { position: absolute; inset: 0; z-index: var(--z-base); }
/* CSV-Tabelle (Design::pane + Design::plainTable) füllt die Bühne */
.dv-csv-view { flex: 1; width: 100%; height: 100%; align-self: stretch; overflow: auto; box-sizing: border-box; padding: var(--sp-5); }

/* Filmstreifen (Design::pane edge top + Design::thumb) */
.dv-thumb-strip { height: var(--sz-80); min-height: var(--sz-80); display: flex; align-items: center; padding: 0 var(--sp-7); overflow: hidden; flex-shrink: 0; }
.dv-thumb-strip-inner { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-behavior: smooth; padding: var(--sp-3) 0; scrollbar-width: thin; flex: 1; min-width: 0; }
.dv-thumb-expand-btn { flex-shrink: 0; margin-right: var(--sp-3); }
/* Ausgeklappt = Galerie über die ganze Bühne */
.dv-thumb-strip.expanded { height: auto; min-height: var(--sz-80); flex: 1; overflow: hidden; align-items: stretch; }
.dv-thumb-strip.expanded .dv-thumb-expand-btn { align-self: center; }
.dv-thumb-strip.expanded .dv-thumb-strip-inner { flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; align-content: flex-start; padding: var(--sp-7) var(--sp-5); gap: 0; display: block; }
.dv-viewer-col.thumbs-expanded .dv-viewer { display: none; }
/* Galerie: Zeitgruppen (Design::divider) mit Karten-Raster (Design::mediaCard) */
.dv-gallery-group { margin-bottom: var(--sp-10); }
.dv-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); padding: 0 var(--sp-1); }

/* ── Rechte Spalte (Design::pane edge left + Design::stack divided) ── */
.dv-sidebar { width: var(--sz-320); flex-shrink: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
/* Der Kern-Picker (Dokumenttyp/Tags) darf aus der schmalen Spalte heraus aufklappen */
.dv-sidebar:has(.mpp-dropdown.open) { overflow: visible; }
.dv-sidebar .mpp-dropdown { right: 0; left: auto; max-width: var(--sz-320); }
.dv-sb-section { padding: var(--sp-7) var(--sp-8); }
.dv-sb-section:last-child { padding-bottom: var(--sp-9); }
.dv-sb-subtitle, .dv-file-meta { display: block; margin-top: var(--sp-1); word-break: break-word; }
.dv-sb-subtitle[hidden] { display: none; }
.dv-file-source { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.dv-sb-ref { margin-top: var(--sp-3); }
.dv-tags-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
/* „+ Tag" (Kern-Picker) in EIGENER Zeile unter den Chips → das Dropdown dockt am Trigger an */
.dv-addtag { flex-basis: 100%; margin-top: var(--sp-1); }
#dvNotesEditor { margin-top: var(--sp-2); }
/* Freigabe-Segmented füllt die Spaltenbreite (drei gleich breite Optionen) */
#dvVisibility { width: 100%; }
#dvVisibility .cc-seg-btn { flex: 1; }
/* Metadaten-Ansicht (ersetzt die Spalte vorübergehend) */
.dv-meta-panel { padding: var(--sp-6) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.dv-meta-panel .cs-sec { width: 100%; }