/* ============================================================================
   media.css — module Media & documenten. Kern-tokens (R24), prefix md-.
   ============================================================================ */

.md-indeling{display:grid;grid-template-columns:250px 1fr;gap:14px;align-items:start}
.md-mappen{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:12px;padding:10px}
.md-map{display:flex;align-items:center;gap:6px;width:100%;text-align:left;background:none;border:0;
  border-radius:8px;padding:7px 9px;color:var(--color-text);font:inherit;font-size:12.5px;cursor:pointer}
.md-map:hover{background:color-mix(in srgb,var(--color-primary) 10%,transparent)}
.md-map.aan{background:color-mix(in srgb,var(--color-primary) 16%,transparent);font-weight:600}
.md-map .md-slot{color:var(--color-accent);font-size:11px}
.md-map-sub{margin-left:14px}
.md-mapacties{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;border-top:1px solid var(--color-border);padding-top:8px}

.md-balk{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--color-surface);
  border:1.5px solid var(--color-border);border-radius:12px;padding:8px 10px;margin-bottom:12px}
.md-balk input[type=text],.md-balk input[type=date],.md-balk select{background:var(--color-background);
  border:1px solid var(--color-border);border-radius:8px;color:var(--color-text);padding:6px 9px;font:inherit;font-size:12px}
.md-balk input[type=text]{min-width:170px}

.md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px}
.md-kaart{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column}
.md-kaart:hover{border-color:var(--color-primary)}
.md-thumb{height:110px;background:var(--color-background);display:flex;align-items:center;justify-content:center;
  font-size:34px;color:var(--color-text-dim);overflow:hidden;cursor:pointer}
.md-thumb img{width:100%;height:100%;object-fit:cover}
.md-kaart-info{padding:8px 10px;font-size:11.5px}
.md-kaart-naam{font-weight:600;color:var(--color-text-strong);word-break:break-word}
.md-kaart-sub{color:var(--color-text-muted);font-size:10.5px;margin-top:2px}
.md-kaart-acties{display:flex;gap:4px;padding:0 8px 8px}

/* preview-overlay */
.md-preview-achter{position:fixed;inset:0;z-index:900;background:rgba(2,6,23,.82);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:12px}
.md-preview-achter .md-titel{color:#e2e8f0;font-size:13px}
.md-preview-inhoud{max-width:92vw;max-height:78vh;display:flex;align-items:center;justify-content:center}
.md-preview-inhoud img,.md-preview-inhoud video{max-width:92vw;max-height:78vh;border-radius:10px}
.md-preview-inhoud iframe{width:min(880px,92vw);height:78vh;border:0;border-radius:10px;background:#fff}

.md-logtabel{max-height:50vh;overflow:auto}

@media(max-width:820px){
  .md-indeling{grid-template-columns:1fr}
  .md-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .md-preview-inhoud iframe{height:66vh}
}