/* documents.css — Document Viewer (dv-Viewer), cc2-tokenisiert */

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

/* =============================================
   Document Viewer — Fullscreen Detail View
   ============================================= */

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

/* ── Linke Navigations-Sidebar (wie ERP-DRM) ──
   Trägt .wn-sidebar (Kern-Fenster-Struktur → Fenster-Audit erkennt bündige Kern-Spalte, .wn-page-flex
   macht full-bleed). Die schmalen/hellen wn-sidebar-Defaults hier auf die echte Nav zurücksetzen. */

/* ── Empty State ── */

/* ── Top Bar ── */
.dv-topbar {
    display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-7) 0 var(--sp-1); height: var(--sz-48);
    background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; z-index: var(--z-raised);
}
.dv-topbar-left { 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); }
.dv-topbar-right { display: flex; align-items: center; gap: var(--sp-3); }

/* Delete button – same shape as mage-btn-add-sm, red */

/* Search – clearable Feld: KEIN Lupen-Icon (wie Kontakte/Kalender); × nur bei Text */
.dv-search { position: relative; width: var(--sz-220); display: flex; align-items: center; }
.dv-search-input {
    width: 100%; height: var(--sz-32); box-sizing: border-box;
    padding: var(--sp-2) var(--sz-28) var(--sp-2) var(--sp-4);
    border: 1px solid var(--grey-300); border-radius: var(--radius); background: var(--surface);
    font-size: var(--fs-sm); outline: none;
}
.dv-search-input:focus { border-color: var(--o); }

/* Filter Dropdown */
.dv-filter-wrap { position: relative; }
.dv-filter-dropdown {
    display: none; position: absolute; top: 100%; left: 0; margin-top: var(--sp-1);
    background: var(--surface); border: 1px solid var(--grey-300); box-shadow: var(--shadow-md);
    z-index: var(--z-nav); width: var(--sz-280); border-radius: var(--radius);
}
.dv-filter-dropdown.open { display: block; }
.dv-filter-dropdown-inner { padding: var(--sp-7); }
.dv-nav-info { font-size: var(--fs-sm); color: var(--muted); min-width: var(--sz-40); text-align: center; }

/* Toolbar-Buttons selbst = Kern-Baustein Design::iconBtn (.ac-btn-action). Nur die modul-eigenen
   AKTIV-Zustände bleiben hier — als eigene Klassen auf dem Button, ohne die Kern-Klasse zu stylen. */
.dv-meta-active { background: color-mix(in srgb, var(--o) 8%, transparent); color: var(--o); }
.dv-filter-active { background: var(--o); color: var(--surface); }
.dv-filter-active:hover { background: var(--o-h); color: var(--surface); }
.dv-filter-count { position: absolute; bottom: 2px; right: 2px; width: var(--sz-14); height: var(--sz-14); background: var(--surface); color: var(--o); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; }
.dv-tool-sep { width: 1px; height: var(--sz-24); background: var(--border); margin: 0 var(--sp-1); }
.dv-tool-zoom-group, .dv-tool-file-group { display: inline-flex; align-items: center; gap: 0; }

/* ── Main area ── */
.dv-main { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.dv-viewer-col { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* ── Viewer ── */
.dv-viewer {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: var(--grey-200); 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 pre {
    padding: var(--sp-9); font-size: var(--fs-base); line-height: 1.5; white-space: pre-wrap;
    word-break: break-all; max-width: 100%; background: var(--surface); margin: var(--sp-8);
    border: 1px solid var(--grey-300); overflow: auto; max-height: 100%; box-sizing: border-box;
}
.dv-viewer .dv-no-preview {
    text-align: center; color: var(--muted); padding: var(--sp-11);
}
.dv-viewer .dv-no-preview i { font-size: var(--fs-display); display: block; margin-bottom: var(--sp-7); opacity: var(--op-dim); }
.dv-viewer .dv-no-preview p { font-size: var(--fs-md); margin: var(--sp-3) 0; }
.dv-download-link {
    color: var(--o); font-size: var(--fs-base); font-weight: var(--fw-bold); text-decoration: none;
    margin-top: var(--sp-5); display: inline-block;
}
.dv-legacy-hint { font-size: var(--fs-sm); color: var(--muted); }

/* ── Office Document Preview ── */
.dv-office-frame {
    width: 100%; height: 100%; border: none;
    opacity: 0; transition: opacity var(--dur-slow);
}
.dv-office-frame.loaded { opacity: 1; }
.dv-office-loading {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-3); color: var(--muted); font-size: var(--fs-base); background: var(--grey-200);
    z-index: var(--z-base);
}

/* ── Markdown Viewer ── */
.dv-md-viewer {
    padding: var(--sp-10) var(--sp-11); font-size: var(--fs-md); line-height: 1.7;
    max-width: var(--sz-820); margin: 0 auto; background: var(--surface);
    min-height: 100%; box-sizing: border-box; color: var(--ink);
    overflow-y: auto; width: 100%;
}
.dv-md-viewer h1 { font-size: var(--fs-xxl); font-weight: var(--fw-heavy); margin: 0 0 var(--sp-7); border-bottom: 1px solid var(--grey-200); padding-bottom: var(--sp-3); }
.dv-md-viewer h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: var(--sp-9) 0 var(--sp-5); }
.dv-md-viewer h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: var(--sp-8) 0 var(--sp-3); }
.dv-md-viewer h4 { font-size: var(--fs-md); font-weight: var(--fw-bold); margin: var(--sp-7) 0 var(--sp-2); }
.dv-md-viewer p { margin: 0 0 var(--sp-5); }
.dv-md-viewer code { background: var(--grey-100); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius); font-size: var(--fs-base); }
.dv-md-viewer pre { background: var(--grey-100); padding: var(--sp-7); border-radius: var(--radius); overflow-x: auto; margin: var(--sp-5) 0; }
.dv-md-viewer pre code { background: none; padding: 0; }
.dv-md-viewer ul, .dv-md-viewer ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-9); }
.dv-md-viewer li { margin-bottom: var(--sp-1); }
.dv-md-viewer a { color: var(--o); }
.dv-md-viewer blockquote { border-left: 3px solid var(--grey-300); margin: var(--sp-5) 0; padding: var(--sp-1) var(--sp-7); color: var(--grey-500); }
.dv-md-viewer hr { border: none; border-top: 1px solid var(--grey-200); margin: var(--sp-8) 0; }
.dv-md-viewer img { max-width: 100%; height: auto; }
.dv-md-viewer strong { font-weight: var(--fw-heavy); }

/* ── Thumbnail Strip ── */
.dv-thumb-strip {
    height: var(--sz-80); min-height: var(--sz-80); background: var(--surface); border-top: 1px solid var(--border);
    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; scrollbar-color: var(--grey-300) transparent;
    flex: 1; min-width: 0;
}
/* Fixed tooltip for thumb items (escapes overflow containers) */
.dv-fixed-tooltip {
    position: fixed; background: var(--grey-900); color: var(--surface); font-size: var(--fs-2xs);
    padding: var(--sp-1) var(--sp-3); border-radius: var(--radius); white-space: nowrap; pointer-events: none;
    z-index: var(--z-tooltip); opacity: 0; transition: opacity var(--dur);
}
.dv-fixed-tooltip.visible { opacity: 1; }
.dv-fixed-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 4px solid transparent; border-top-color: var(--grey-900);
}
.dv-thumb-strip-inner::-webkit-scrollbar { height: var(--sz-6); }
.dv-thumb-strip-inner::-webkit-scrollbar-track { background: transparent; }
.dv-thumb-strip-inner::-webkit-scrollbar-thumb { background: var(--grey-300); border-radius: var(--radius); }
.dv-thumb-item {
    width: var(--sz-64); height: var(--sz-64); flex-shrink: 0; border: 2px solid transparent;
    border-radius: var(--radius); overflow: hidden; display: flex; align-items: center;
    justify-content: center; background: var(--grey-100); cursor: pointer; transition: all var(--dur);
    text-decoration: none; position: relative;
}
.dv-thumb-item:hover { border-color: var(--grey-300); }
.dv-thumb-item.active { border-color: var(--o); }
.dv-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.dv-thumb-icon { font-size: var(--fs-xl); opacity: var(--op-half); }

/* Visibility badge on thumbnails */
.dv-thumb-vismark {
    position: absolute; top: 3px; right: 3px; z-index: var(--z-base);
    width: var(--sz-18); height: var(--sz-18); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-2xs); color: var(--surface); opacity: var(--op-muted);
    pointer-events: none;
}
.dv-thumb-vis-shared { background: var(--ok); }
.dv-thumb-vis-private { background: var(--grey-500); }
.dv-thumb-item:hover .dv-thumb-vismark { opacity: var(--op-strong); }

/* Green border for shared/public thumbnails */
.dv-thumb-item.dv-thumb-shared { border-color: var(--ok); }
.dv-thumb-item.dv-thumb-shared:hover { border-color: var(--ok-h); }
.dv-thumb-item.dv-thumb-shared.active { border-color: var(--ok); }

/* Expand button in thumb strip */

/* Expanded thumb strip — takes full viewer space, all files visible */
.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; }

/* ── Gallery Time Divider ── */
.dv-gallery-group { margin-bottom: var(--sp-10); }
.dv-gallery-divider {
    display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-1) var(--sp-1) var(--sp-4);
}
.dv-gallery-divider-label {
    font-size: var(--fs-xs); font-weight: var(--fw-heavy); color: var(--o); text-transform: uppercase;
    letter-spacing: var(--tracking); white-space: nowrap;
}
.dv-gallery-divider-line {
    flex: 1; height: 1px; background: color-mix(in srgb, var(--o) 25%, transparent);
}

/* ── Gallery Card Grid ── */
.dv-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5); padding: 0 var(--sp-1);
}

/* ── Gallery Card ── */
.dv-gallery-card {
    display: flex; flex-direction: column; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
    cursor: pointer; transition: border-color var(--dur), box-shadow var(--dur);
    text-decoration: none; color: inherit; position: relative;
}
.dv-gallery-card:hover {
    border-color: var(--grey-300); box-shadow: var(--shadow-sm);
}
.dv-gallery-card.active {
    border-color: var(--o);
}
.dv-gallery-card.dv-thumb-shared { border-color: var(--ok); }
.dv-gallery-card.dv-thumb-shared:hover { border-color: var(--ok-h); }
.dv-gallery-card.dv-thumb-shared.active { border-color: var(--ok); }

/* Card preview area */
.dv-gallery-preview {
    height: var(--sz-200); display: flex; align-items: center; justify-content: center;
    background: var(--grey-100); overflow: hidden; position: relative;
}
.dv-gallery-preview img {
    width: 100%; height: auto; object-fit: cover;
    object-position: top; min-height: 100%;
}
.dv-gallery-preview .dv-thumb-icon {
    font-size: var(--fs-display); opacity: var(--op-dim);
}

/* Card info area */
.dv-gallery-info {
    padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); min-height: 0;
    border-top: 1px solid var(--grey-100);
}
.dv-gallery-title {
    font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3;
}
.dv-gallery-meta {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-2xs); color: var(--muted); line-height: 1.3;
}
.dv-gallery-ext {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    font-size: var(--fs-2xs); font-weight: var(--fw-heavy); color: var(--muted);
    text-transform: uppercase; letter-spacing: var(--tracking);
}
.dv-gallery-ext i { font-size: var(--fs-xs); }

/* Card footer: type + tags */
.dv-gallery-footer {
    display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-4) var(--sp-3);
    flex-wrap: wrap; min-height: 0;
}
.dv-gallery-doc-type {
    display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-2xs); font-weight: var(--fw-bold); border-radius: var(--radius);
    background: var(--grey-100); color: var(--grey-500); white-space: nowrap;
}
.dv-gallery-topic {
    display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-2xs); font-weight: var(--fw-bold); border-radius: var(--radius);
    white-space: nowrap;
}

/* Visibility badge on gallery cards (reuses existing badge styles) */
.dv-gallery-card .dv-thumb-vismark {
    top: 5px; right: 5px; width: var(--sz-20); height: var(--sz-20); font-size: var(--fs-2xs);
}

/* ── Sidebar ── */
.dv-sidebar {
    width: var(--sz-320); flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--border);
    overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column;
}
/* Let MagePickerPlus dropdown escape sidebar overflow */
.dv-sidebar:has(.mpp-dropdown.open) { overflow: visible; }
.dv-sidebar .mpp-dropdown { right: 0; left: auto; }
.dv-sb-section {
    padding: var(--sp-7) var(--sp-8); border-bottom: 1px solid var(--grey-100);
}
.dv-sb-section:last-child { border-bottom: none; padding-bottom: var(--sp-9); }
.dv-sb-title {
    font-size: var(--fs-lg); font-weight: var(--fw-heavy); color: var(--ink); word-break: break-word;
    line-height: 1.3; outline: none; border-bottom: 1px dashed transparent;
    transition: border-color var(--dur);
}
.dv-sb-title:focus { border-bottom-color: var(--o); }
.dv-sb-subtitle { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); word-break: break-word; }
.dv-file-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); }

/* Source line (under file-meta) — jede Angabe (Badge / „von X" / Originaldokument) in eigener Zeile, linksbündig */
.dv-file-source {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-2);
}
/* Herkunft (E-Mail/Ticket) unter der Sichtbarkeit */
.dv-sb-ref { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--sp-2); align-items: flex-start; }
.dv-sb-ref[hidden] { display: none; }   /* Herkunft nur, wenn das Dokument eine hat (Attribut hidden schlägt display:flex sonst nicht) */

/* Date */
.dv-date-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-base); color: var(--grey-700); }
.dv-date-row i { font-size: var(--fs-lg); color: var(--muted); }

/* Tags */
.dv-tags-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.dv-doctag {
    display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-3);
    font-size: var(--fs-xs); font-weight: var(--fw-bold); border-radius: var(--radius); background: var(--grey-100); color: var(--grey-700);
    cursor: default;
}
.dv-doctag .tag-remove {
    cursor: pointer; font-size: var(--fs-base); color: var(--muted); line-height: 1; margin-left: var(--sp-1);
}
.dv-doctag .tag-remove:hover { color: var(--danger); }
.dv-doctag-add {
    display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-3);
    font-size: var(--fs-xs); border: 1px dashed var(--grey-300); border-radius: var(--radius); color: var(--muted);
    cursor: pointer; transition: border-color var(--dur), color var(--dur);
}
.dv-doctag-add:hover { border-color: var(--o); color: var(--o); }
/* Tag hinzufügen = MagePickerPlus-Trigger („+ Tag") in EIGENER Zeile unter den Chips → Dropdown dockt korrekt
   am Trigger an (der frühere versteckte 0-Höhe-Trigger liess das Dropdown oben in der Sidebar schweben). */
.dv-addtag { flex-basis: 100%; margin-top: var(--sp-1); }
.dv-addtag .mpp-trigger { border-style: dashed; }

/* Notizen = Kern-WYSIWYG (.cc-wysiwyg, gestylt vom wysiwyg-Kernmodul) — nur Mindesthöhe im Kontext */
#dvNotesEditor { margin-top: var(--sp-2); }

/* Sidebar-Abschnitts-Label (z.B. Sichtbarkeit) */
/* Freigabe-Segmented füllt die Sidebar-Breite (zwei gleich breite Optionen) */
#dvVisibility { width: 100%; }
#dvVisibility .cc-seg-btn { flex: 1; }

/* Generic source badge */

/* ── "Neu" Dropdown ── */

/* ── Global Drag & Drop Overlay ── */
.dv-drop-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: color-mix(in srgb, var(--o) 8%, transparent);
    border: 3px dashed var(--o);
    z-index: var(--z-drawer);
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.dv-drop-overlay.active { display: flex; }
.dv-drop-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
    color: var(--o);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}
.dv-drop-overlay-inner i { font-size: var(--fs-display); }

/* ── File Metadata (shown inside existing sidebar) ── */

/* ── Lightbox ── */
.dv-lightbox {
    display: none; position: fixed; inset: 0; z-index: var(--z-drawer);
    background: color-mix(in srgb, var(--grey-900) 88%, transparent);
    align-items: center; justify-content: center;
}
.dv-lightbox.open { display: flex; }
.dv-lightbox-content {
    position: relative; max-width: 92vw; max-height: 90vh;
    display: flex; align-items: center; justify-content: center;
}
.dv-lightbox-content img {
    max-width: 92vw; max-height: 90vh; object-fit: contain;
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.dv-lightbox-content iframe {
    width: 90vw; height: 88vh; border: none; background: var(--surface);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.dv-lightbox-close {
    position: fixed; top: var(--sp-7); right: var(--sp-8);
    background: none; border: none; color: var(--surface); font-size: var(--fs-xxl);
    cursor: pointer; opacity: var(--op-soft); transition: opacity var(--dur);
    z-index: var(--z-popover); line-height: 1;
}
.dv-lightbox-close:hover { opacity: 1; }
.dv-lightbox-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    background: color-mix(in srgb, var(--surface) 12%, transparent); border: none; color: var(--surface);
    font-size: var(--fs-xl); width: var(--sz-44); height: var(--sz-44); border-radius: 50%;
    cursor: pointer; opacity: var(--op-muted); transition: opacity var(--dur), background var(--dur);
    display: flex; align-items: center; justify-content: center;
    z-index: var(--z-popover);
}
.dv-lightbox-nav:hover { opacity: 1; background: color-mix(in srgb, var(--surface) 22%, transparent); }
.dv-lightbox-nav:disabled { opacity: var(--op-faint); cursor: default; }
.dv-lightbox-nav:disabled:hover { background: color-mix(in srgb, var(--surface) 12%, transparent); }
.dv-lightbox-prev { left: var(--sp-8); }
.dv-lightbox-next { right: var(--sp-8); }
.dv-lightbox-title {
    position: fixed; bottom: var(--sp-7); left: 50%; transform: translateX(-50%);
    color: var(--surface); font-size: var(--fs-base); font-weight: var(--fw-bold); opacity: var(--op-soft);
    max-width: 60vw; text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; z-index: var(--z-popover);
}
.dv-lightbox-annotate {
    position: fixed; top: var(--sp-7); right: var(--sz-64);
    background: none; border: none; color: var(--surface); font-size: var(--fs-xl);
    cursor: pointer; opacity: var(--op-soft); transition: opacity var(--dur);
    z-index: var(--z-popover); line-height: 1;
}
.dv-lightbox-annotate:hover { opacity: 1; }

/* ── Parent doc reference ── */
.dv-parent-doc-link {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-sm); color: var(--grey-500); cursor: pointer;
    padding: var(--sp-1) 0;
}
.dv-parent-doc-link:hover { color: var(--o); }
.dv-parent-doc-link i { font-size: var(--fs-md); }

/* =============================================
   cc2-Plumbing: Toast + Zwei-Klick-Bestätigung
   Ersatz für ERP MageNotification (im nackten cc2 nicht vorhanden).
   ============================================= */

/* =============================================
   Upload-Guide Overlay (eigenes dv-guide-Prefix; war fälschlich kon-guide=CRM, 0 CSS → Block)
   Modell: .dv-confirm-overlay (fixed, zentriert, Backdrop, hidden bis .open)
   ============================================= */

/* MagePickerPlus (Dokumenttyp/Tags) in der schmalen Sidebar: Dropdown nicht über das Fenster sprengen */
.dv-sidebar .mpp-dropdown { max-width: var(--sz-320); }

/* ── CSV-Tabellen-Viewer (read-only, Daten aus documents.csv-Bus) ── */
.dv-csv-view { flex: 1; width: 100%; height: 100%; align-self: stretch; overflow: auto; background: var(--surface); box-sizing: border-box; padding: var(--sp-5); }
.dv-csv-scroll { overflow: auto; max-width: 100%; }
.dv-csv-table { border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface); }
.dv-csv-table th, .dv-csv-table td { border: 1px solid var(--grey-200); padding: var(--sp-2) var(--sp-4); text-align: left; white-space: nowrap; vertical-align: top; }
.dv-csv-table thead th { position: sticky; top: 0; background: var(--grey-100); font-weight: var(--fw-bold); color: var(--grey-700); z-index: var(--z-base); }
.dv-csv-table tbody tr:nth-child(even) { background: var(--grey-50); }
.dv-csv-table .dv-csv-rownum { background: var(--grey-100); color: var(--muted); font-size: var(--fs-2xs); text-align: right; position: sticky; left: 0; z-index: var(--z-base); }
.dv-csv-empty { color: var(--muted); font-size: var(--fs-base); padding: var(--sp-9); text-align: center; }
.dv-csv-trunc { color: var(--muted); font-size: var(--fs-xs); padding: var(--sp-3) var(--sp-5); font-style: italic; }

/* ── Kern-Bausteine im Viewer: nur Anordnung ── */
.dv-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); }
.dv-search-reset { position: absolute; right: var(--sp-1); top: 50%; transform: translateY(-50%); }
.dv-search-reset.hidden { display: none; }
.dv-thumb-expand-btn { flex-shrink: 0; margin-right: var(--sp-3); }
.dv-file-source { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.dv-filter-dropdown { width: var(--sz-320); }
.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%; }
.dv-upload .mage-field:last-of-type { margin-bottom: var(--sp-7); }