/* Dokumentenverwaltung. Nutzt ausschliesslich die VDM-Tokens aus site.css, damit das Modul
   in beiden Themes und neben Lager, Boards und Hilfe gleich aussieht.
   Mockup: docs/ui/dokumente-mockup/ */

.dok {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: var(--vdm-font-family);
    color: var(--vdm-text-strong);
}

/* ---------------------------------------------------------------- Kopfbereich */
.dok-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.dok-kopf h1 {
    margin: 0;
    font-size: var(--vdm-font-size-page-title);
    line-height: var(--vdm-line-height-page-title);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.dok-eyebrow {
    font-size: var(--vdm-font-size-label);
    line-height: 16px;
    color: var(--vdm-text-muted);
}

.dok-lede {
    font-size: var(--vdm-font-size-value);
    line-height: var(--vdm-line-height-body);
    color: var(--vdm-text-muted);
}

.dok-kopf-aktionen {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------- Karten */
.dok-karte {
    background: var(--vdm-surface-card);
    border: 1px solid var(--vdm-border-card);
    border-radius: var(--vdm-radius-card);
    box-shadow: var(--vdm-shadow-card);
}

.dok-karte-pad {
    padding: 14px 16px;
}

.dok-karte-titel {
    margin: 0;
    font-size: var(--vdm-font-size-card-title);
    line-height: var(--vdm-line-height-card-title);
    font-weight: 600;
}

/* ---------------------------------------------------------------- Filterleiste
   Muster nach docs/ui/kompakte-filterleisten.md: Kennzahlen-Chips sichtbar,
   Detailfilter bei Bedarf. */
.dok-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dok-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dok-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--vdm-font-size-chip);
    line-height: 16px;
    border-radius: 999px;
    padding: 5px 12px;
    border: 1px solid var(--vdm-border-card);
    background: var(--vdm-surface-card);
    color: var(--vdm-text-muted);
    cursor: pointer;
    transition: 0.13s;
}

.dok-chip:hover {
    border-color: var(--vdm-accent-green);
    color: var(--vdm-text-strong);
}

.dok-chip.on {
    background: var(--vdm-accent-green);
    border-color: var(--vdm-accent-green);
    color: #fff;
    font-weight: 500;
}

.dok-chip-n {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.dok-suche {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--vdm-border-card);
    border-radius: var(--vdm-radius-card);
    padding: 6px 11px;
    background: var(--vdm-surface-card);
    min-width: 240px;
}

.dok-suche input {
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--vdm-font-size-value);
    color: var(--vdm-text-strong);
    width: 100%;
}

/* ---------------------------------------------------------------- Tabelle
   Mindestbreite plus Scrollcontainer nach docs/ui/kompakte-filterleisten.md. */
.dok-tabwrap {
    overflow-x: auto;
}

.dok-tab {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.dok-tab th {
    font-size: var(--vdm-font-size-grid-head);
    line-height: 18px;
    font-weight: 600;
    color: var(--vdm-text-muted);
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--vdm-border-card);
    background: var(--vdm-surface-card-muted);
    white-space: nowrap;
}

.dok-tab td {
    font-size: var(--vdm-font-size-grid-body);
    line-height: 18px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--vdm-surface-spalte);
    vertical-align: middle;
}

.dok-tab tr:last-child td {
    border-bottom: 0;
}

.dok-tab tr.dok-extern td {
    background: var(--vdm-warn-bg);
    border-bottom-color: var(--vdm-warn-border);
}

.dok-haupt {
    font-size: var(--vdm-font-size-grid-main);
    line-height: 20px;
    font-weight: 500;
    display: block;
}

.dok-sub {
    font-size: var(--vdm-font-size-grid-sub);
    line-height: 16px;
    color: var(--vdm-text-muted);
}

.dok-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dok-rechts {
    text-align: right;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- Marken */
.dok-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--vdm-font-size-chip);
    line-height: 16px;
    font-weight: 500;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.dok-badge.ok {
    background: var(--vdm-ok-bg);
    border: 1px solid var(--vdm-ok-border);
    color: var(--vdm-ok-text);
}

.dok-badge.warn {
    background: var(--vdm-warn-bg);
    border: 1px solid var(--vdm-warn-border);
    color: var(--vdm-warn-text);
}

.dok-badge.entwurf {
    background: var(--vdm-surface-muted);
    border: 1px solid var(--vdm-border-card);
    color: var(--vdm-icon-muted);
}

.dok-badge.aus {
    background: var(--vdm-surface-card);
    border: 1px dashed var(--vdm-border-card);
    color: var(--vdm-text-disabled);
}

.dok-fmt {
    font-size: 0.73333rem;
    line-height: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 3px;
    padding: 2px 6px;
    border: 1px solid var(--vdm-border-card);
    background: var(--vdm-surface-muted);
    color: var(--vdm-icon-muted);
}

/* ---------------------------------------------------------------- Buttons */
.dok-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: var(--vdm-font-size-button);
    line-height: 20px;
    font-weight: 500;
    padding: 7px 13px;
    border-radius: var(--vdm-radius-card);
    cursor: pointer;
    border: 1px solid var(--vdm-border-card);
    background: var(--vdm-surface-card);
    color: var(--vdm-text-strong);
    text-decoration: none;
    transition: 0.13s;
}

.dok-btn:hover:not(:disabled) {
    border-color: var(--vdm-accent-green);
}

.dok-btn:disabled {
    color: var(--vdm-text-disabled);
    cursor: default;
}

.dok-btn.primaer {
    background: var(--vdm-accent-green);
    border-color: var(--vdm-accent-green);
    color: #fff;
}

.dok-btn.primaer:hover:not(:disabled) {
    background: var(--vdm-accent-green-hover);
    border-color: var(--vdm-accent-green-hover);
}

/* Ein gesperrter Hauptknopf muss auch gesperrt AUSSEHEN. Ohne diese Regel bleibt er
   vollflaechig gruen und ist von einem aktiven nicht zu unterscheiden - "Freigeben" ohne
   Datei sah aktiv aus und der Klick tat stillschweigend nichts. */
.dok-btn.primaer:disabled {
    background: var(--vdm-surface-muted);
    border-color: var(--vdm-border-card);
    color: var(--vdm-text-disabled);
}

.dok-btn.klein {
    font-size: var(--vdm-font-size-grid-body);
    line-height: 18px;
    padding: 5px 10px;
}

.dok-btn.gefahr {
    color: var(--vdm-danger-text);
    border-color: var(--vdm-danger-border);
    background: var(--vdm-danger-bg);
}

/* ---------------------------------------------------------------- Hinweisband */
.dok-band {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: var(--vdm-radius-card);
    border: 1px solid var(--vdm-warn-border);
    background: var(--vdm-warn-bg);
    color: var(--vdm-warn-text);
}

.dok-band-titel {
    font-size: var(--vdm-font-size-value);
    line-height: 20px;
    font-weight: 600;
}

.dok-band-sub {
    font-size: var(--vdm-font-size-grid-sub);
    line-height: 16px;
}

.dok-band.info {
    border-color: var(--vdm-border-card);
    background: var(--vdm-surface-card);
    color: var(--vdm-text-muted);
}

.dok-leer {
    padding: 28px 16px;
    text-align: center;
    color: var(--vdm-text-muted);
    font-size: var(--vdm-font-size-value);
}

.dok-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 16px;
    border-top: 1px solid var(--vdm-border-card);
    background: var(--vdm-surface-card-muted);
    font-size: var(--vdm-font-size-grid-sub);
    color: var(--vdm-text-muted);
}

/* ---------------------------------------------------------------- Rechtematrix */
/* Die Matrix hat eine Spalte je Rolle - im Bestand sind das 15. Mit einer zu kleinen
   Mindestbreite werden die Auswahlfelder so schmal, dass "kein Zugriff" abgeschnitten wird.
   Deshalb je Spalte eine Mindestbreite und die Tabelle im Scrollcontainer wachsen lassen. */
.dok-matrix {
    width: 100%;
    border-collapse: collapse;
    min-width: 1600px;
}

.dok-matrix th,
.dok-matrix td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--vdm-surface-spalte);
    text-align: center;
    min-width: 104px;
}

.dok-matrix th.links,
.dok-matrix td.links {
    min-width: 190px;
}

.dok-matrix th {
    font-size: var(--vdm-font-size-grid-head);
    font-weight: 600;
    color: var(--vdm-text-muted);
    background: var(--vdm-surface-card-muted);
    border-bottom: 1px solid var(--vdm-border-card);
}

.dok-matrix th.links,
.dok-matrix td.links {
    text-align: left;
}

.dok-matrix td.links {
    background: var(--vdm-surface-card-muted);
}

.dok-rolle {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: var(--vdm-font-size-label);
    color: var(--vdm-text-strong);
}

.dok-matrix select {
    width: 100%;
    font-family: inherit;
    font-size: var(--vdm-font-size-chip);
    padding: 5px 6px;
    border-radius: var(--vdm-radius-card);
    border: 1px solid var(--vdm-border-card);
    background: var(--vdm-surface-card);
    color: var(--vdm-text-strong);
}

.dok-legende {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: var(--vdm-font-size-grid-sub);
    color: var(--vdm-text-muted);
}

/* ---------------------------------------------------------------- Formular */
.dok-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

.dok-feld {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dok-feld.weit {
    grid-column: 1 / -1;
}

.dok-label {
    font-size: var(--vdm-font-size-label);
    line-height: 16px;
    color: var(--vdm-text-muted);
}

.dok-feld input,
.dok-feld select,
.dok-feld textarea {
    font-family: inherit;
    font-size: var(--vdm-font-size-value);
    padding: 7px 11px;
    border-radius: var(--vdm-radius-card);
    border: 1px solid var(--vdm-border-card);
    background: var(--vdm-surface-card);
    color: var(--vdm-text-strong);
}

.dok-fehler {
    color: var(--vdm-danger-text);
    background: var(--vdm-danger-bg);
    border: 1px solid var(--vdm-danger-border);
    border-radius: var(--vdm-radius-card);
    padding: 9px 12px;
    font-size: var(--vdm-font-size-grid-body);
}

.dok-erfolg {
    color: var(--vdm-ok-text);
    background: var(--vdm-ok-bg);
    border: 1px solid var(--vdm-ok-border);
    border-radius: var(--vdm-radius-card);
    padding: 9px 12px;
    font-size: var(--vdm-font-size-grid-body);
}

@media (max-width: 760px) {
    .dok-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .dok-kopf {
        flex-direction: column;
    }
}

/* ---------------------------------------------------------------- Vorschau
   Anatomie nach dem Hausmuster aus BoardDetail: Overlay mit Kopfzeile, darunter
   iframe fuer PDF beziehungsweise img fuer Bilder. */
.dok-viewer {
    position: fixed;
    inset: 24px;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    background: var(--vdm-surface-card);
    border: 1px solid var(--vdm-border-card);
    border-radius: var(--vdm-radius-card);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 16px 40px rgba(17, 24, 39, 0.24);
    overflow: hidden;
}

.dok-viewer-kopf {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--vdm-border-card);
    background: var(--vdm-surface-card-muted);
}

.dok-viewer-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: var(--vdm-surface-app);
}

.dok-viewer-bild {
    flex: 1 1 auto;
    min-height: 0;
    object-fit: contain;
    background: var(--vdm-surface-app);
    padding: 12px;
}

@media (max-width: 760px) {
    .dok-viewer {
        inset: 8px;
    }
}

/* Zeile, auf die ein Deeplink (/dokumente?dok=ID) gezeigt hat - damit man in einer langen
   Liste sieht, welches Dokument gemeint war. */
.dok-tab tr.dok-hervor > td{background:color-mix(in srgb, var(--vdm-aktion) 9%, transparent)}
.dok-tab tr.dok-hervor > td:first-child{box-shadow:inset 3px 0 0 var(--vdm-aktion)}

/* Rollenfilter (Konzept, Entscheidung 13). Bewusst als Hakenliste und nicht als Mehrfach-
   Auswahlfeld: bei 15 Rollen soll man den Stand ohne Aufklappen sehen. */
.dok-rollen {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--vdm-border-card);
    border-radius: var(--vdm-radius-card);
    background: var(--vdm-surface-card-muted);
}

.dok-rollen-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 8px 0 6px;
}

/* Eigener Name, weil .dok-rolle schon die Spaltenkoepfe der Rechtematrix beschriftet. */
.dok-rollenwahl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83333rem;
    color: var(--vdm-text-strong);
    cursor: pointer;
    white-space: nowrap;
}

.dok-rollenwahl input {
    margin: 0;
    accent-color: var(--vdm-aktion);
    cursor: pointer;
}

/* Eingeschraenkte Sichtbarkeit hervorheben - sie ist der Grund, wenn jemand ein Dokument
   nicht findet, und darf nicht als graue Nebenzeile untergehen. */
.dok-sub-stark {
    color: var(--vdm-aktion);
    font-weight: 500;
}

/* Ein Dokument ohne Rollenzuweisung sieht niemand. Das darf keine graue Nebenzeile sein. */
.dok-sub-warn {
    color: var(--vdm-warn-text);
    font-weight: 500;
}

/* Vorschau der Bereinigung. Bewusst als Liste mit Titel und Datei: wer endgueltig loescht,
   soll vorher lesen, was verschwindet. */
.dok-bereinigen-liste {
    margin: 10px 0 6px;
    padding: 0 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.dok-bereinigen-liste li {
    font-size: 0.83333rem;
    color: var(--vdm-text-strong);
}

.dok-bereinigen-liste li span {
    display: block;
    font-size: 0.76667rem;
    color: var(--vdm-text-muted);
}

/* Je Bereinigungsstufe ein abgesetzter Block. Die zwei Schritte muessen optisch getrennt sein,
   sonst klickt man den falschen. */
.dok-bereinigen-stufe {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--vdm-border-card);
}