/* Het zijmenu van de beheeromgeving (19-10-2026), zie _admin_nav.html.

   Naar het beheer van Mistral: vaste groepen met een grijze kop in gewone
   letters (geen hoofdletters), het actieve item als vlak, onderin wie er is
   ingelogd. Het menu is iets donkerder dan de pagina, zoals bij Mistral het
   zijmenu (#F8F7F3) donkerder is dan de inhoud (#FBFBF8).

   Op de telefoon klapt het menu in onder één knop boven de pagina. */

:root { --beheer-nav-bg: #F1F0EB; --beheer-actief: rgba(28, 24, 18, 0.07); --beheer-hover: rgba(28, 24, 18, 0.045); }
[data-theme="dark"] { --zoekveld-rand: #646D78; --beheer-nav-bg: var(--surface-2); --beheer-actief: rgba(255, 255, 255, 0.08); --beheer-hover: rgba(255, 255, 255, 0.05); }

.beheer-shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    align-items: start;
}
.beheer-shell > main { min-width: 0; }

.beheer-nav {
    position: sticky;
    top: 0;
    align-self: start;
    /* Zo hoog als de ruimte onder de titelbalk, zodat het blok met wie er is
       ingelogd onderin in beeld staat (de hoogte zet _admin_nav.html). */
    height: calc(100vh - var(--kop-hoogte, 64px));
    overflow-y: auto;
    background: var(--beheer-nav-bg);
    border-right: 1px solid var(--border);
}
.beheer-nav-lijst {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 100%;
    padding: 18px 14px 14px;
    box-sizing: border-box;
}

.beheer-terug {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    color: var(--text-3);
    font-size: 0.86rem;
    text-decoration: none;
    border-radius: 8px;
}
.beheer-terug:hover { color: var(--text); background: var(--beheer-hover); }

.beheer-groep { display: flex; flex-direction: column; gap: 2px; }
.beheer-kop {
    padding: 0 10px 4px;
    color: var(--text-3);
    font-size: 0.82rem;
    font-weight: 500;
}
.beheer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--text);
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.12s;
}
.beheer-item svg { flex-shrink: 0; color: var(--text-2); }
.beheer-item:hover { background: var(--beheer-hover); }
.beheer-item.is-actief { background: var(--beheer-actief); font-weight: 600; }
.beheer-item:focus-visible, .beheer-terug:focus-visible { outline: 2px solid var(--vf-orange-2); outline-offset: 1px; }

.beheer-wie {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 6px 2px;
    border-top: 1px solid var(--border);
}
.beheer-wie-initialen {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.82rem;
    font-weight: 700;
}
.beheer-wie-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.beheer-wie-naam, .beheer-wie-org { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beheer-wie-naam { color: var(--text); font-weight: 600; font-size: 0.92rem; }
.beheer-wie-org { color: var(--text-3); font-size: 0.82rem; }
.beheer-wie-uit { margin: 0; }
/* De algemene knopregels (10-layout-shell.css) geven elke knop een vulling. */
.beheer-nav .beheer-afmelden,
.beheer-nav .beheer-nav-open {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text-2) !important;
    cursor: pointer;
    font: inherit;
}
.beheer-nav .beheer-afmelden { display: grid; place-items: center; width: 34px; height: 34px; padding: 0 !important; border-radius: 8px; }
.beheer-nav .beheer-afmelden:hover { background: var(--beheer-hover) !important; color: var(--text) !important; }

.beheer-nav-open { display: none !important; }

@media (max-width: 820px) {
    .beheer-shell { grid-template-columns: 1fr; }
    .beheer-nav {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .beheer-nav .beheer-nav-open {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 12px 16px !important;
        font-weight: 600;
        color: var(--text) !important;
    }
    .beheer-nav-lijst { display: none; padding-top: 4px; }
    .beheer-nav.is-open .beheer-nav-lijst { display: flex; }
}

/* De blokken van de instellingen hebben een eigen display; zonder dit wint
   dat van het hidden-attribuut en bleven alle vier zichtbaar. */
.settings-group[data-sectie][hidden] { display: none !important; }

/* ── Stap 2: "Alle dossiers" onderin de dossierkaart ─────────────────────── */
/* Eerst als losse knoppen Dossiers en Bibliotheek bovenin de zijbalk; op
   verzoek (19-10-2026) Dossiers bij de kaart gevoegd en de Bibliotheek naar
   het beheer-zijmenu. De kaart is zo de plek voor alles rond dossiers. De
   negatieve marges vallen weg tegen de padding van .dossier-sidebar-card. */
.dossier-kaart-alle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px -13px -10px;
    padding: 9px 13px;
    border-top: 1px solid var(--border);
    border-radius: 0 0 12px 12px;
    color: var(--text-2);
    font-size: 0.84rem;
    text-decoration: none;
    transition: background 0.12s;
}
.dossier-kaart-alle svg { flex-shrink: 0; color: var(--text-3); }
.dossier-kaart-alle .dossier-kaart-alle-pijl { margin-left: auto; }
.dossier-kaart-alle:hover { background: var(--beheer-hover); color: var(--text); }
.dossier-kaart-alle:focus-visible { outline: 2px solid var(--vf-orange-2); outline-offset: -2px; }

/* ── Stap 3: het menu rechtsboven bevat alleen nog het account ────────────── */
.nav-dropdown-wie {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.nav-dropdown-wie-naam { color: var(--text); font-weight: 600; font-size: 0.88rem; }
.nav-dropdown-wie-org { color: var(--text-3); font-size: 0.8rem; }