/* admin.css — Beheer framework: topbar, sidebar, workspace, and the
   standalone login/403 cards. Loaded only on beheer/auth pages. Uses only
   the semantic tokens from base.css (which must be loaded first). */

svg.ic {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

button {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit;
}

/* === Raamwerk ============================================================= */

.beheer-app {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 56px 1fr;
    min-height: 100vh;
}

.topbar {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border);
    padding-inline: 1rem;
}

.merk {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 218px;
    flex: none;
}

.merk .naam {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    color: var(--text-heading);
}

.merk-logo {
    height: 36px;
    width: auto;
}

/* Portie D1 (bevinding, commentaar bijgewerkt): logo-fluks-wit.svg is niet
   langer stuk — er staat nu een echte witte variant (raster-in-SVG, zie de
   restpuntenlijst), gebruikt door de PUBLIEKE header via <picture>. Dit
   scherm (beheer) is in D1 bewust niet meeverhuisd — buiten de scope van
   die portie — en blijft dus voorlopig bij dit CSS-filter op logo-fluks.svg. */
@media (prefers-color-scheme: dark) {
    .merk-logo {
        filter: brightness(0) invert(1);
    }
}

.merk .tag {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-orange);
    border: 1.5px solid var(--brand-orange);
    border-radius: 6px;
    padding: 1px 7px;
}

.zoek {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--admin-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.44rem 0.75rem;
    color: var(--text-muted);
}

.zoek input {
    border: 0;
    background: none;
    outline: none;
    font: inherit;
    width: 100%;
    color: var(--text);
}

.topbar .rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.naar-site {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--color-interactive);
    text-decoration: none;
}

.naar-site:hover {
    text-decoration: underline;
}

/* Avatar menu — <details>/<summary>, no JS needed. */
.avatar-menu {
    position: relative;
}

.avatar-menu summary {
    list-style: none;
    cursor: pointer;
}

.avatar-menu summary::-webkit-details-marker {
    display: none;
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-blue);
    color: var(--brand-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
}

.avatar-menu-paneel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(4, 20, 50, 0.16);
    padding: 0.5rem;
    min-width: 180px;
    z-index: 10;
}

.avatar-menu-naam {
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}

.avatar-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
}

.avatar-menu-item:hover {
    background: var(--admin-surface);
}

/* === Zijbalk =============================================================== */

.zijbalk {
    background: var(--admin-sidebar-surface);
    color: var(--admin-sidebar-text);
    overflow-y: auto;
    padding: 0.875rem 0 1.5rem;
}

.zijbalk .groep {
    margin-top: 1.125rem;
}

.zijbalk .groep-kop {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--admin-sidebar-text);
    opacity: 0.75;
    padding-inline: 1.125rem;
    margin-bottom: 0.25rem;
}

.zijbalk a,
.zijbalk .niet-klikbaar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.125rem;
    font-size: 0.84375rem;
    border-left: 3px solid transparent;
    text-decoration: none;
    color: inherit;
}

.zijbalk a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--brand-white);
}

.zijbalk a.actief {
    background: rgba(255, 255, 255, 0.1);
    color: var(--brand-white);
    border-left-color: var(--brand-orange);
    font-weight: 600;
}

.zijbalk .niet-klikbaar {
    opacity: 0.6;
    cursor: default;
}

.zijbalk .tekst {
    flex: 1;
}

.zijbalk .oud {
    font-size: 0.65625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--admin-sidebar-text);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    padding: 0 5px;
    flex: none;
}

/* === Werkgebied ============================================================ */

main {
    overflow-y: auto;
    padding: 1.5rem 1.75rem;
    background: var(--admin-surface);
}

.paginakop {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    margin-bottom: 1.125rem;
}

.paginakop h1 {
    font-size: 1.875rem;
}

.paginakop .sub {
    color: var(--text-muted);
    font-family: var(--font-body);
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
}

.paginakop .acties {
    margin-left: auto;
    display: flex;
    gap: 0.625rem;
}

.paginakop-extra {
    margin: -0.5rem 0 1.125rem;
}

.begroeting {
    color: var(--text-muted);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.84375rem;
    padding: 0.5625rem 0.9375rem;
    border-radius: 8px;
    text-decoration: none;
    transition: filter 0.12s;
}

.btn:hover {
    filter: brightness(1.06);
}

.btn-primair {
    background: var(--brand-blue);
    color: var(--brand-white);
}

.btn-stil {
    background: var(--surface-card);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-volledig {
    width: 100%;
    justify-content: center;
}

.kaart {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.kaart h2 {
    font-size: 1.1875rem;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--border);
}

/* Kaartkop: titel + actieknop op één regel (Hulptabellen-overzicht, vijf
   secties elk met een eigen "+Nieuw"-knop) — .kaart h2 hierboven blijft
   ongewijzigd voor kaarten zonder eigen kopactie. */
.kaart-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--border);
}

.kaart-kop h2 {
    padding: 0;
    border: none;
}

.dash-rij {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.875rem;
}

.lijstje {
    padding: 0.375rem 0;
}

.lijstje .item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    padding: 0.5625rem 1.125rem;
    font-size: 0.84375rem;
}

.lijstje .item + .item {
    border-top: 1px solid var(--admin-surface);
}

.lijstje .actie {
    font-weight: 500;
}

.lijstje .wie {
    color: var(--text-muted);
    margin-left: auto;
    font-size: 0.78125rem;
    white-space: nowrap;
}

.leeg {
    padding: 0.875rem 1.125rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.snel {
    display: grid;
    gap: 0.5rem;
    padding: 0.875rem 1.125rem;
}

.snel a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    font-weight: 600;
    font-size: 0.84375rem;
    text-decoration: none;
    color: var(--text);
}

.snel a:hover {
    border-color: var(--color-interactive);
    color: var(--color-interactive);
}

.kaart-stapel {
    margin-top: 0.875rem;
}

/* === Tabellen (Autorisaties en verdere beheerlijsten) ====================== */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84375rem;
}

th {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: left;
    padding: 0.625rem 1.125rem;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 0.625rem 1.125rem;
    border-bottom: 1px solid var(--admin-surface);
    vertical-align: middle;
}

tr:hover td {
    background: var(--admin-surface);
}

td.via {
    color: var(--text-muted);
}

.rij-acties {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

.rij-acties a,
.rij-acties button {
    display: inline-flex;
    padding: 6px;
    border-radius: 6px;
    color: var(--text-muted);
}

.rij-acties a:hover,
.rij-acties button:hover {
    background: var(--admin-surface);
    color: var(--color-interactive);
}

/* A disabled arrow (top row's "omhoog", bottom row's "omlaag" — on the
   toestemmingen-itemlijst server-side, and on the versiepagina toggled
   client-side by toestemmingen-versie-items.js on every move) must read as
   unavailable, not just refuse the click. Same treatment .blok-acties
   button:disabled already gets in the blokkeneditor; without it a disabled
   .rij-acties button looks identical to an active one. */
.rij-acties button:disabled {
    opacity: 0.35;
    pointer-events: none;
}

.rij-acties a.gevaar:hover {
    background: var(--status-error-surface);
    color: var(--status-error-text);
    opacity: 1;
}

/* Portie 14d, deel 4e: de vier bezettingsregel-acties (Bewerken/Sluiten of
   Op historisch zetten/Terugzetten/Verwijderen) zagen er tot nu toe
   identiek uit — .gevaar stond al op de Verwijderen-<button>s (13b/14b),
   maar de regel hierboven dekt alleen <a>, dus deed niets voor een
   <button>. Verwijderen wordt nu ingetogener, zoals de prullenbakknop in
   de kopkaart (.btn.gevaar) zich verhoudt tot .btn-primair/.btn-stil
   daar: dezelfde 0.55-dimopaciteit als .rij-verwijderd/.rij-inactief
   hierboven in rust, en dezelfde fout-kleuren als a.gevaar bij hover. */
.rij-acties .gevaar {
    opacity: 0.55;
}

.rij-acties button.gevaar:hover {
    background: var(--status-error-surface);
    color: var(--status-error-text);
    opacity: 1;
}

/* Nieuws-bewerken: "Naar de prullenbak"/"Definitief wissen" staan hier als
   losse .btn-knoppen (in een paneelsectie, niet in .rij-acties), vandaar
   een eigen .btn.gevaar in plaats van de bestaande, aan .rij-acties/
   .blok-acties gebonden .gevaar-regels hierboven. */
.btn.gevaar {
    color: var(--status-error-text);
    border-color: var(--status-error-text);
}

.btn.gevaar:hover {
    background: var(--status-error-surface);
}

/* Bulkactiebalk (teams-overzicht.php) — verschijnt pas zodra minstens één
   rij geselecteerd is, zie public_html/assets/js/teams-bulk.js. */
.bulk-balk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.75rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
}

.bulk-aantal {
    font-weight: 600;
    color: var(--text);
    margin-right: auto;
}

.kolom-selectie {
    width: 2rem;
}

/* === Pagina's: boomweergave, filter, sleeporde ============================= */

.boom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.boom .inspring {
    width: 22px;
    flex: none;
}

.boom svg.ic {
    color: var(--text-muted);
    width: 15px;
    height: 15px;
}

/* Was .boom .titel-link: scoped to the pages tree only, so the same class
   on Nieuws-overzicht's title (not inside .boom — news is a flat list, not
   a tree) rendered as a default, browser-blue underlined link. Found while
   wiring up that row link (opdracht, punt 1/5) and widened here rather
   than duplicated under a second name — same "title link in a table row"
   intent either way. */
.titel-link {
    color: var(--text);
    text-decoration: none;
}

.titel-link:hover {
    color: var(--color-interactive);
    text-decoration: underline;
}

.boom .chip {
    margin-left: 0.25rem;
}

.rij-verwijderd td {
    opacity: 0.55;
}

/* "Actief" staat niet in de kolomlijst van de nieuwscategorieën-tabel
   (vervolgtaak, expliciet gemeld i.p.v. er stilzwijgend een kolom bij te
   zetten) — een eigen, lichter gedempte variant i.p.v. .rij-verwijderd
   hergebruiken: "inactief" is een veel minder ingrijpende toestand dan
   "verwijderd", dus geen identieke dimming. */
.rij-inactief td {
    opacity: 0.75;
}

.filter-balk {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

/* === Filtervorm (Nieuws-overzicht en verdere beheerlijsten met filters) === */

.filter-vorm {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.filter-vorm .veld {
    min-width: 9rem;
}

.filter-vorm .veld label {
    margin-bottom: 0.25rem;
}

.filter-vorm .veld-inline {
    margin-top: 0;
    padding-bottom: 0.5625rem;
}

/* === Titel + ondertitel in een tabelcel (Nieuws-overzicht) ================ */

.nieuws-titel {
    display: grid;
    gap: 0.125rem;
}

.nieuws-titel-tekst {
    font-weight: 600;
    color: var(--text);
}

.nieuws-samenvatting {
    font-size: 0.78125rem;
    color: var(--text-muted);
}

/* Nagelopen-markering: kleine, betekenisvolle waarschuwing bij de titel —
   eigen aria-label op de span zelf (Icons::svg() zet altijd aria-hidden op
   de svg erin, dus de toegankelijke naam moet van de omhullende span komen). */
.review-markering {
    display: inline-flex;
    vertical-align: -3px;
    color: var(--right-exception-text);
}

.review-markering svg {
    width: 16px;
    height: 16px;
}

/* Privacy-markering (Nieuws-overzicht titel): schild bij privacy_limited=1,
   zelfde opzet als .review-markering — kleur maakt "loopt nog" (nog actief
   beperkt, --right-exception-text, dezelfde taal als de nagelopen-markering)
   en "verlopen" (--text-muted, gedempt: al van de site af) los van de
   title/aria-label-tekst uit elkaar te houden. */
.privacy-markering {
    display: inline-flex;
    vertical-align: -3px;
    color: var(--right-exception-text);
}

.privacy-markering svg {
    width: 16px;
    height: 16px;
}

.privacy-markering--verlopen {
    color: var(--text-muted);
}

/* Uitgelicht-markering (Nieuws-overzicht kolom, Nieuws-bewerken paneel):
   ster/ster-vol i.p.v. de eerdere chip — --brand-orange alleen in de gevulde
   stand, zodat "uitgelicht" ook zonder kleur (alleen gevuld vs. omlijnd)
   te onderscheiden blijft. */
.ster-markering {
    display: inline-flex;
    vertical-align: -3px;
    color: var(--text-muted);
}

.ster-markering svg {
    width: 16px;
    height: 16px;
}

.ster-markering--vol {
    color: var(--brand-orange);
}

/* Klikbare variant van .ster-markering (Nieuws-overzicht rij-acties,
   Nieuws-bewerken paneel) — zelfde maat/kleurlogica, plus een knop-reset en
   een hover die dezelfde taal spreekt als .rij-acties button:hover. */
.ster-schakelaar {
    display: inline-flex;
    vertical-align: -3px;
    padding: 3px;
    border-radius: 6px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text-muted);
}

.ster-schakelaar svg {
    width: 16px;
    height: 16px;
}

.ster-schakelaar:hover {
    background: var(--admin-surface);
    color: var(--brand-orange);
}

.ster-schakelaar--vol {
    color: var(--brand-orange);
}

/* Actief uitgelicht: schakelaar (uitzetten, geen datum nodig) + de datum
   waarop het vanzelf terugzakt — opdracht: "het verschil tussen 'loopt nog'
   en 'verlopen' zichtbaar... zonder de datum te hoeven lezen" is al de
   vol/dof ster zelf; de datum ernaast is de aanvulling voor wie 'm wél wil
   lezen. */
.ster-rij {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ster-datum {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Dof ster -> <details> i.p.v. meteen posten: voorkomt dat "uitlichten"
   zonder (verplichte) einddatum verstuurd kan worden — zelfde no-JS
   disclosure-idioom als .avatar-menu/.nieuwe-pagina summary hierboven. */
.ster-uitlichten summary {
    list-style: none;
    cursor: pointer;
}

.ster-uitlichten summary::-webkit-details-marker {
    display: none;
}

.ster-uitlichten[open] summary {
    background: var(--admin-surface);
    color: var(--brand-orange);
}

.ster-uitlichten-vorm {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.375rem;
}

.ster-uitlichten-vorm label {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.ster-uitlichten-vorm input[type="date"] {
    font: inherit;
    font-size: 0.8125rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.3rem 0.4rem;
    background: var(--surface-card);
    color: var(--text);
}

/* === Paginering (Nieuws-overzicht en verdere beheerlijsten) =============== */

.paginering {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.875rem;
}

.paginering-info {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Drag handle: only this element is draggable="true", not the whole row —
   a deliberate handle instead of a whole-row drag target. Inert without JS
   (no listeners attached, see pages-reorder.js), so it never looks or acts
   like a broken button when JavaScript is unavailable. */
.sleep-greep {
    display: inline-flex;
    cursor: grab;
    color: var(--text-muted);
    touch-action: none;
}

.sleep-greep:active {
    cursor: grabbing;
}

tr.wordt-gesleept {
    opacity: 0.4;
}

tr.sleep-doel-boven {
    box-shadow: inset 0 2px 0 0 var(--color-interactive);
}

tr.sleep-doel-onder {
    box-shadow: inset 0 -2px 0 0 var(--color-interactive);
}

.sleep-melding {
    margin-bottom: 0.75rem;
}

/* "Nieuwe pagina": a <details> disclosure (same no-JS-required pattern as
   .avatar-menu) styled as a centered modal. The backdrop and panel are only
   ever visible while the <details> carries [open] — that toggling is native
   browser behaviour, so the modal-like look works even without JavaScript;
   pages-new-form.js only adds focus-on-open and Esc-to-close on top of it. */
.nieuwe-pagina summary {
    list-style: none;
    cursor: pointer;
}

.nieuwe-pagina summary::-webkit-details-marker {
    display: none;
}

.nieuwe-pagina-achtergrond {
    position: fixed;
    inset: 0;
    background: rgba(6, 20, 45, 0.45);
    z-index: 20;
}

.nieuwe-pagina-paneel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(4, 20, 50, 0.16);
    padding: 1.25rem;
    width: 22rem;
    max-width: calc(100vw - 3rem);
    z-index: 21;
    text-align: left;
}

.nieuwe-pagina-paneel h2 {
    font-size: 1.1875rem;
    margin-bottom: 0.875rem;
}

.nieuwe-pagina-paneel .veld + .veld {
    margin-top: 0.75rem;
}

/* === Chips & tags (rechtenniveaus, rollen, uitzonderingen) ================= */

.chip {
    display: inline-block;
    font-size: 0.71875rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 9px;
}

.chip.geen {
    background: var(--right-none-surface);
    color: var(--right-none-text);
}

.chip.lezen,
.chip.rol {
    background: var(--right-read-surface);
    color: var(--right-read-text);
}

.chip.schrijven {
    background: var(--right-write-surface);
    color: var(--right-write-text);
}

.chip.vol {
    background: var(--right-full-surface);
    color: var(--right-full-text);
}

.chip.super {
    background: var(--brand-orange);
    color: var(--brand-white);
}

.chip.test {
    background: var(--right-exception-surface);
    color: var(--right-exception-text);
    border: 1px dashed var(--brand-orange);
}

.chip.con {
    background: var(--right-exception-surface);
    color: var(--right-exception-text);
}

/* Page status (Pagina's overzicht): reuses the same success/warning tokens
   as the rights chips above, under names that match page status instead. */
.chip.pub {
    background: var(--status-success-surface);
    color: var(--status-success-text);
}

.chip.verborgen {
    background: var(--right-none-surface);
    color: var(--right-none-text);
}

.chip.wacht {
    background: var(--right-exception-surface);
    color: var(--right-exception-text);
    border: 1px dashed var(--brand-orange);
}

/* Nieuws-overzicht: status='published' met published_at in de toekomst —
   een aparte weergavetoestand, geen eigen databasestatus (zie
   NewsAdminController::statusChip()) — dus ook een eigen, van "Gepubliceerd"
   te onderscheiden kleur; hergebruikt --right-read-* net als .chip.lezen. */
.chip.ingepland {
    background: var(--right-read-surface);
    color: var(--right-read-text);
}

/* Toestemmingsoverzicht (portie 12d): "Ingetrokken" is een uitgesproken,
   gerespecteerde keuze van het lid (precies wat de AVG toestaat) — niet
   hetzelfde als "Geen toestemming", dat openstaand werk is, en geen fout.
   Een eigen, informatieve kleur i.p.v. hetzelfde grijs als .chip.geen:
   --right-read-* (het lichtblauw dat .chip.lezen/.chip.ingepland ook al
   voor een neutrale, aparte weergavetoestand gebruiken). Bewust GEEN rood
   (--status-error-*): dat zou het als fout laten lezen. Eigen classnaam in dezelfde
   trant als .chip.verborgen/.chip.ingepland, geen nieuwe variabele of
   hexcode. */
.chip.ingetrokken {
    background: var(--right-read-surface);
    color: var(--right-read-text);
}

.chip + .chip {
    margin-left: 0.375rem;
}

.publicatiestatus {
    margin-top: 0.5rem;
    display: grid;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.publicatiestatus b {
    color: var(--right-exception-text);
}

.via {
    color: var(--text-muted);
    font-size: 0.78125rem;
}

.via-fout {
    color: var(--status-error-text);
    font-weight: 600;
}

.tag-lijst {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.75rem 1.125rem;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--right-read-surface);
    color: var(--right-read-text);
    font-weight: 600;
    font-size: 0.78125rem;
    border-radius: 999px;
    padding: 0.25rem 0.625rem;
}

.tag .x {
    opacity: 0.55;
    font-weight: 700;
}

.tag.uitz {
    background: var(--right-exception-surface);
    color: var(--right-exception-text);
}

.tag.plus {
    background: none;
    border: 1.5px dashed var(--border);
    color: var(--text-muted);
}

.tag-lijst details summary {
    list-style: none;
    cursor: pointer;
}

.tag-lijst details summary::-webkit-details-marker {
    display: none;
}

.tag-lijst details[open] {
    flex-basis: 100%;
}

.mini-form {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.mini-form select,
.mini-form input[type="date"] {
    font: inherit;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-card);
    color: var(--text);
}

.detail-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0.875rem;
    align-items: start;
}

@media (max-width: 899px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

/* === Rollenbeheer: rechtenrooster in het rol-formulier ====================== */

.rechten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem 1rem;
    margin: 0.5rem 0 1.125rem;
}

.rechten-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.84375rem;
}

.rechten-rij select {
    font: inherit;
    font-size: 0.8125rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-card);
    color: var(--text);
}

.rol-form {
    padding: 0.875rem 1.125rem 1.125rem;
}

.rol-form h3 {
    font-size: 1rem;
}

/* === Losstaande kaarten: inloggen, geen-toegang ============================ */

.inlog-pagina,
.melding-pagina {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--brand-blue-dark) 0%, var(--brand-blue) 70%);
}

.inlog-kaart,
.melding-kaart {
    width: 100%;
    max-width: 24rem;
    padding: 2rem 1.75rem;
    text-align: center;
}

.inlog-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 24rem;
}

.inlog-logo {
    height: 80px;
    width: auto;
    margin-bottom: 1.25rem;
    /* Achtergrond is altijd donkerblauw. Portie D1 (bevinding, commentaar
       bijgewerkt): logo-fluks-wit.svg is niet meer stuk (echte witte
       variant staat er nu, zie de restpuntenlijst) — deze inlogpagina is in
       D1 bewust niet meeverhuisd, blijft dus bij dit CSS-filter op
       logo-fluks.svg. */
    filter: brightness(0) invert(1);
}

.merk-woord {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--text-heading);
    margin-bottom: 0.75rem;
}

/* Op de inlogpagina staat het woordmerk (terugval) los van de kaart, op de
   altijd donkerblauwe achtergrond, dus wit in plaats van --text-heading. */
.inlog-wrap .merk-woord {
    color: var(--brand-white);
    margin-bottom: 1.25rem;
}

.inlog-kaart h1,
.melding-kaart h1 {
    font-size: 1.5rem;
    margin-bottom: 0.375rem;
}

.inlog-kaart .sub,
.melding-kaart .sub {
    color: var(--text-muted);
    font-family: var(--font-body);
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
    font-size: 0.875rem;
}

.melding {
    margin-top: 1rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
    text-align: left;
}

.melding--fout {
    background: var(--status-error-surface);
    color: var(--status-error-text);
}

.melding--succes {
    background: var(--status-success-surface);
    color: var(--status-success-text);
}

.melding ul {
    margin: 0;
    padding-left: 1.1rem;
}

.inlog-actie {
    margin-top: 1.25rem;
}

.melding-blok {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.melding-blok-acties {
    display: flex;
    gap: 0.5rem;
    flex: none;
}

.melding-acties--links {
    justify-content: flex-start;
}

.inlog-form {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.875rem;
    text-align: left;
}

.veld label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

/* .veld textarea was missing here — found while checking the Nieuws
   summary field (opdracht, punt 3/5): the field sat in a .veld wrapper but
   had no width rule of its own, so it fell back to the browser default
   (narrow), not "vol breed" as intended. */
.veld input,
.veld select,
.veld textarea {
    width: 100%;
    font: inherit;
    font-size: 0.9375rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5625rem 0.75rem;
    background: var(--surface-card);
    color: var(--text);
}

.veld textarea {
    resize: vertical;
}

.wachtwoord-vergeten {
    display: inline-block;
    margin-top: 1.125rem;
    font-size: 0.84375rem;
    color: var(--color-interactive);
}

.melding-acties {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.625rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* === Smal scherm: zijbalk klapt in tot iconen =============================== */

@media (max-width: 899px) {
    .beheer-app {
        grid-template-columns: 64px 1fr;
    }

    .merk {
        width: auto;
    }

    .merk .tag,
    .zoek {
        display: none;
    }

    .zijbalk .groep-kop,
    .zijbalk .tekst,
    .zijbalk .oud {
        display: none;
    }

    .zijbalk a,
    .zijbalk .niet-klikbaar {
        justify-content: center;
        padding-inline: 0;
    }
}

/* === Pagina-editor ========================================================= */

.melding--info {
    background: var(--right-exception-surface);
    color: var(--right-exception-text);
}

.inline-form {
    display: inline;
}

.link-knop {
    color: var(--color-interactive);
    font-weight: 600;
    text-decoration: underline;
}

/* Subtiele prullenbak-ingang onder een overzichtstabel (Pagina's en
   Nieuws) — verving de altijd-getoonde .btn-stil in een .filter-balk. */
.tabel-voet {
    display: flex;
    justify-content: flex-end;
    gap: 1.25rem;
    margin-top: 0.75rem;
}

.tabel-voet .link-knop {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.editor {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 0.875rem;
    align-items: start;
}

.editor .titel {
    width: 100%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.875rem;
    color: var(--text-heading);
    border: 0;
    outline: none;
    background: none;
    padding: 1rem 1.125rem 0.375rem;
}

.editor .titel:disabled {
    color: var(--text-muted);
}

.blok-kader {
    margin: 0.625rem 1.125rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.875rem;
    position: relative;
}

.blok-kader .soort {
    position: absolute;
    top: -9px;
    left: 12px;
    background: var(--surface-card);
    padding: 0 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.blok-acties {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    margin-bottom: 0.5rem;
}

.blok-acties button {
    display: inline-flex;
    padding: 5px;
    border-radius: 6px;
    color: var(--text-muted);
}

.blok-acties button:hover {
    background: var(--admin-surface);
    color: var(--color-interactive);
}

.blok-acties button.gevaar:hover {
    background: var(--status-error-surface);
    color: var(--status-error-text);
}

.blok-acties button:disabled {
    opacity: 0.35;
    pointer-events: none;
}

.blok-kader .veld {
    margin-top: 0.625rem;
}

.blok-kader .veld label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.veld-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.625rem;
}

.veld-inline label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
}

.blok-kader input[type="text"],
.blok-kader textarea,
.blok-kader select {
    width: 100%;
    font: inherit;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.5rem 0.625rem;
    background: var(--surface-card);
    color: var(--text);
}

.blok-kader textarea {
    resize: vertical;
}

/* Text block: contenteditable <div> + toolbar — see the comment block at the
   top of pages-editor.js for the full approach (sanitizeHtml, execCommand). */
.tekst-werkbalk {
    display: flex;
    gap: 2px;
    margin-bottom: 0.375rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 2px;
    width: fit-content;
}

.tekst-werkbalk button {
    padding: 0.3rem 0.5rem;
    border-radius: 5px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 1.75rem;
}

.tekst-werkbalk button:hover {
    background: var(--admin-surface);
    color: var(--color-interactive);
}

.tekst-veld {
    min-height: 6rem;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.5rem 0.625rem;
    background: var(--surface-card);
    color: var(--text);
}

.tekst-veld:focus-visible {
    outline: 2px solid var(--color-interactive);
    outline-offset: 1px;
}

.tekst-veld p {
    margin-block: 0.5em;
}

.tekst-veld p:first-child {
    margin-top: 0;
}

.tekst-veld p:last-child {
    margin-bottom: 0;
}

.tekst-veld h2,
.tekst-veld h3 {
    margin-block: 0.5em 0.25em;
}

.tekst-veld ul,
.tekst-veld ol {
    margin-block: 0.5em;
    padding-left: 1.25em;
}

.tekst-veld a {
    color: var(--color-interactive);
}

.upload-kader {
    aspect-ratio: 16 / 6;
    background: var(--admin-surface);
    border: 1.5px dashed var(--border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: center;
    overflow: hidden;
}

.upload-kader.sleep-actief {
    border-color: var(--color-interactive);
    color: var(--color-interactive);
}

.upload-kader img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.kolommen-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.kolom-editor {
    border: 1px dashed var(--border);
    border-radius: 7px;
    padding: 0.5rem;
    min-height: 3rem;
}

.kolom-editor .blok-kader {
    margin-inline: 0;
}

.blok-toevoegen {
    margin: 0.875rem 1.125rem 1.125rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kolom-editor .blok-toevoegen {
    margin: 0.5rem 0 0;
}

.blok-toevoegen button {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.8125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.blok-toevoegen button:hover {
    border-color: var(--color-interactive);
    color: var(--color-interactive);
}

.paneel .sectie {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--admin-surface);
}

.paneel .sectie:last-child {
    border-bottom: 0;
}

.paneel label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.3125rem;
}

.paneel input[type="text"],
.paneel input[type="date"],
.paneel select,
.paneel textarea {
    width: 100%;
    font: inherit;
    font-size: 0.84375rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.5rem 0.625rem;
    background: var(--surface-card);
    color: var(--text);
}

/* Portie H1: a read-only technical value in a .paneel form — the Hulptabel
   code on the edit screen, shown as text, never an input. */
.paneel .statisch-waarde {
    margin: 0;
    font-size: 0.84375rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    color: var(--text);
    padding: 0.125rem 0;
}

/* input[type="date"] was missing from the .paneel rule above — a bare,
   unstyled date input (Hulptabellen's seizoen-datums, both the season's
   own starts_on/ends_on in .paneel and the season_phases table below,
   which sits outside .paneel entirely) falls back to the browser's raw
   default look, unreadable against this admin theme and easy to mistake
   for non-interactive. Same values as .mini-form's own date input rule
   (public_html/assets/css/admin.css, ~line 932) for consistency. */
table input[type="date"] {
    font: inherit;
    font-size: 0.8125rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-card);
    color: var(--text);
}

/* Was .paneel .hint: scoped to the right-hand panel only, so any .hint
   outside it (settings/index.php, new-page-button.php, and the Nieuws
   summary field below) rendered as unstyled default text — found while
   checking nieuws-bewerken.php's huisstijl (opdracht, punt 5) and widened
   here rather than duplicated under a second name, since the intent
   ("kleine grijze hint") is the same everywhere .hint is used. */
.hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.3125rem;
}

.rev {
    font-size: 0.78125rem;
    color: var(--text-muted);
    display: grid;
    gap: 0.375rem;
}

.rev b {
    color: var(--text);
    font-weight: 600;
}

@media (max-width: 899px) {
    .editor {
        grid-template-columns: 1fr;
    }
}

/* === Tabbladen (teams-bewerken.php) — nieuw in deze codebase, zie
   TeamsAdminController's class docblock, punt 8. .tab-paneel zelf krijgt
   geen achtergrond/rand: elke tab vult die zelf in (.kaart/.kaart.paneel,
   hergebruikt zoals elders), dit is alleen de tabstrip en de layout eromheen. */

.tab-nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.875rem;
}

.tab-knop {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab-knop:hover {
    color: var(--color-interactive);
}

.tab-knop--actief {
    color: var(--text-heading);
    border-bottom-color: var(--color-interactive);
}

.tab-paneel[data-tab-paneel="algemeen"],
.tab-paneel[data-tab-paneel="fotos"] {
    max-width: 640px;
}

/* === Trainingstijden (teams-bewerken.php) ================================== */

.trainingen-lijst {
    display: grid;
    gap: 0.625rem;
    padding: 0.875rem 1.125rem;
}

.training-rij {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--admin-surface);
}

.training-rij:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.training-vorm {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
}

.training-toevoegen-vorm {
    padding: 0.875rem 1.125rem;
    border-top: 1px solid var(--admin-surface);
}

.training-vorm .veld {
    margin-top: 0;
}

.training-vorm .veld label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.training-vorm select,
.training-vorm input[type="time"],
.training-vorm input[type="text"] {
    font: inherit;
    font-size: 0.8125rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.4rem 0.5rem;
    background: var(--surface-card);
    color: var(--text);
}

.veld-groeit {
    flex: 1;
    min-width: 8rem;
}

.veld-groeit input {
    width: 100%;
}

.icon-knop {
    display: inline-flex;
    padding: 0.5rem;
    border-radius: 7px;
    color: var(--text-muted);
    align-self: flex-end;
}

.icon-knop:hover {
    background: var(--admin-surface);
    color: var(--color-interactive);
}

.icon-knop.gevaar:hover {
    background: var(--status-error-surface);
    color: var(--status-error-text);
}

.training-weergave {
    display: flex;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--text);
    flex: 1;
    padding: 0.4rem 0;
}

/* === Selectie (teams-bewerken.php) ========================================== */

.selectie-pending {
    padding: 1rem 1.125rem;
    margin-bottom: 0.875rem;
    border-color: var(--status-error-text);
}

.selectie-pending h2 {
    font-size: 1rem;
    margin-bottom: 0.625rem;
}

.selectie-pending-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--admin-surface);
    font-size: 0.875rem;
}

.selectie-pending-acties {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.selectie-rol-kop {
    font-size: 0.875rem;
    padding: 0.75rem 1.125rem 0.375rem;
    color: var(--text-muted);
}

.selectie-lijst {
    display: grid;
}

.selectie-rij {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.125rem;
    border-top: 1px solid var(--admin-surface);
}

.selectie-naam {
    flex: 1;
    font-size: 0.90625rem;
}

.selectie-rugnummer-vorm {
    display: flex;
    gap: 0.375rem;
}

.selectie-rugnummer-vorm input {
    width: 3.5rem;
    font: inherit;
    font-size: 0.8125rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.4rem 0.5rem;
    background: var(--surface-card);
    color: var(--text);
    text-align: center;
}

.selectie-zoeken {
    position: relative;
}

.selectie-zoeken input[type="text"] {
    width: 100%;
    font: inherit;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.5rem 0.625rem;
    background: var(--surface-card);
    color: var(--text);
}

.selectie-suggesties {
    position: absolute;
    z-index: 5;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 14rem;
    overflow-y: auto;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-floating);
}

.selectie-suggesties li {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.selectie-suggesties li:hover,
.selectie-suggesties li:focus {
    background: var(--admin-surface);
    outline: none;
}

.selectie-toevoegen-vorm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.625rem;
}

.selectie-zonder-team {
    display: grid;
    gap: 0.25rem;
    margin: 0.5rem 0;
    font-size: 0.875rem;
}

/* === Fasekop trainingenlijst (opdracht: "fase eerst, geen kader eromheen") == */

.trainingen-fasekop {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin: 0.25rem 0 -0.125rem;
}

.trainingen-fasekop:first-child {
    margin-top: 0;
}

/* === Veldbezetting (teams-bewerken.php, Trainingstijden-tab) ===============
   Fasekeuze: bewust GEEN .tab-nav/.tab-knop-stijl (onderstreepte tabstrip) —
   twee rijen tabbladen onder elkaar leest als één verwarrende navigatie
   (opdracht). Pillen/segmented buttons, kleiner en gedempter, zodat de
   volgorde in het scherm duidelijk is: hoofdtabbladen boven, deze balk
   ondergeschikt eronder, binnen de Trainingstijden-tab zelf. */

.veldbezetting {
    margin-top: 0.875rem;
}

.fase-keuze {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0 1.125rem 0.875rem;
}

.fase-knop {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    border-radius: var(--radius-round);
    border: 1px solid var(--border);
    background: var(--admin-surface);
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.fase-knop:hover {
    color: var(--text);
    border-color: var(--color-interactive);
}

.fase-knop--actief {
    background: var(--color-interactive);
    border-color: var(--color-interactive);
    color: var(--brand-white);
}

.fase-knop-aantal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: var(--radius-round);
    background: var(--right-exception-surface);
    color: var(--right-exception-text);
    font-size: 0.6875rem;
    font-weight: 700;
}

.fase-knop--actief .fase-knop-aantal {
    background: var(--brand-white);
}

.veldbezetting-paneel {
    border-top: 1px solid var(--admin-surface);
}

.veldbezetting-scroll {
    overflow-x: auto;
    padding: 0.875rem 1.125rem;
}

.veldbezetting-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.veldbezetting-tabel th,
.veldbezetting-tabel td {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--admin-surface);
    vertical-align: top;
    text-align: left;
}

.veldbezetting-tabel thead th {
    background: var(--admin-surface);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.veldbezetting-tabel tbody th {
    background: var(--admin-surface);
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}

.veldbezetting-blokje {
    display: block;
    padding: 0.25rem 0.4375rem;
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-small);
    background: var(--surface-card);
    line-height: 1.3;
}

.veldbezetting-blokje + .veldbezetting-blokje {
    margin-top: 0.3125rem;
}

.veldbezetting-team {
    display: block;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.veldbezetting-tijd {
    display: block;
    color: var(--text-muted);
}

.veldbezetting-blokje--eigen {
    border-left-color: var(--color-interactive);
}

.veldbezetting-blokje--overlap {
    background: var(--right-exception-surface);
    border-color: var(--right-exception-text);
}

.veldbezetting-team svg.ic {
    width: 12px;
    height: 12px;
    color: var(--right-exception-text);
    margin-right: 0.25rem;
    vertical-align: -1px;
}

/* === Veldindeling (plek voor de plattegrond) — nu leeg, later één
   afbeelding/SVG in .veldindeling-inhoud zonder dat deze structuur wijzigt. */

.veldindeling-blok {
    margin: 0.875rem 1.125rem 0;
    padding-bottom: 0.875rem;
}

.veldindeling-blok summary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
}

.veldindeling-blok summary::-webkit-details-marker {
    display: none;
}

.veldindeling-inhoud {
    margin-top: 0.625rem;
}

/* === Leden: kolomkiezer-dialoog (portie 5e) ================================
   Native <dialog>, styled like the other floating panels (.nieuwe-pagina-
   paneel) rather than centered fixed positioning — the browser's own
   top-layer/centering already does that for [open] dialogs, only the
   ::backdrop needs an explicit color (the UA default is far too light
   against this project's palette). */

.kolommen-knop {
    margin-left: auto;
}

.kolommen-dialoog {
    background: var(--surface-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-floating);
    padding: 1.25rem;
    width: 26rem;
    max-width: calc(100vw - 3rem);
    max-height: calc(100vh - 4rem);
}

.kolommen-dialoog::backdrop {
    background: rgba(6, 20, 45, 0.45);
}

.kolommen-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

.kolommen-kop h2 {
    font-size: 1.1875rem;
}

.kolommen-sluiten {
    display: inline-flex;
    padding: 6px;
    border-radius: 6px;
    color: var(--text-muted);
}

.kolommen-sluiten:hover {
    background: var(--admin-surface);
    color: var(--color-interactive);
}

.kolommen-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 60vh;
    overflow-y: auto;
}

.kolommen-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-small);
}

.kolommen-rij:hover {
    background: var(--admin-surface);
}

.kolommen-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.kolommen-pijlen {
    display: flex;
    gap: 2px;
}

.kolommen-pijlen button {
    display: inline-flex;
    padding: 4px;
    border-radius: 6px;
    color: var(--text-muted);
}

.kolommen-pijlen button:hover {
    background: var(--surface-muted);
    color: var(--color-interactive);
}

.kolommen-acties {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border);
}

/* === Leden: detailscherm (portie 5k, herzien portie 5l) ====================
   Summary block + four tabs now (portie 5l), not four stacked .kaart
   blocks — .tab-nav/.tab-knop/.tab-paneel below are teams-bewerken.php's
   own tab classes (this file's "Tabbladen" section above), reused as-is,
   not redefined here. .lid-velden is this screen's own label/value grid,
   since no existing read-only field-list component already covered that
   shape. */

.lid-samenvatting {
    padding: 1.125rem;
    margin-bottom: 0.875rem;
}

.lid-samenvatting .melding {
    margin-top: 0;
    margin-bottom: 0.875rem;
}

.lid-samenvatting-kop {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.lid-naam {
    font-size: 1.5rem;
    font-family: var(--font-display);
    color: var(--text-heading);
}

.lid-relatiecode {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.lid-badges {
    display: flex;
    gap: 0.625rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.lid-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-round);
    background: var(--admin-surface);
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 600;
}

.lid-badge svg.ic {
    width: 16px;
    height: 16px;
}

.lid-tab-zin {
    padding: 0.875rem 1.125rem 0;
    margin-top: 0;
}

.lid-velden {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: 0.625rem 1.125rem;
    padding: 0.875rem 1.125rem;
}

.lid-veld {
    display: contents;
}

.lid-velden dt {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8125rem;
    padding-top: 0.125rem;
}

.lid-velden dd {
    margin: 0;
    font-size: 0.9375rem;
}

.veld-bron {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

/* .hint already exists as the project-wide "small grey hint" (see this
   file's own note at its shared definition); here it just needs to sit on
   its own line under the value, like .veld-bron above, instead of its
   default inline flow. */
.lid-velden dd .hint {
    display: block;
    margin-top: 0.125rem;
}

.lid-verzorgers,
.lid-import {
    padding: 0 1.125rem 0.875rem;
}

.lid-verzorgers h3,
.lid-import h3 {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}

/* === Ledendetail: tabblad Toestemmingen (portie 9c) ======================== */

.lid-toestemming-proces,
.lid-toestemming-historie {
    padding: 0 1.125rem 0.875rem;
}

.lid-toestemming-proces h3 {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}

.lid-toestemming-items {
    margin: 0.5rem 0 0.75rem;
}

.lid-toestemming-items td {
    padding: 0.25rem 0.5rem 0.25rem 0;
    border-bottom: 1px solid var(--border);
}

.lid-toestemming-items td:last-child {
    width: 3rem;
    text-align: right;
    color: var(--text-muted);
}

.lid-toestemming-lijst {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.84375rem;
}

.lid-toestemming-lijst .datum {
    color: var(--text-muted);
    margin-right: 0.5rem;
}

.lid-toestemming-lijst .hint {
    display: block;
}

.lid-toestemming-historie summary {
    cursor: pointer;
    padding: 0.25rem 1.125rem 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
}

/* === Ledendetail: toestemmingen-bewerkmodal (portie 10) =====================
   The two dialogs (#lid-toestemming-dialoog / #lid-toestemming-intrekken-
   dialoog) reuse .kolommen-dialoog/.kolommen-kop/.kolommen-lijst/
   .kolommen-acties and .veld/.veld-inline/.hint as-is (same project-wide
   modal styles the "Wijzigen" member-fields dialog and the Secretariaat
   onbekende-waarden dialog already use) — only the pieces below are new. */

.lid-toestemming-acties {
    display: flex;
    gap: 0.625rem;
    margin: 0.75rem 0 1.25rem;
}

/* Portie 10b, STAP 2: "Wijzigen" carries an icon (svg.ic, 18px), "Intrekken"
   does not (see the template's own comment on that button for why) — .btn's
   shared padding already matches, this min-height only guards against the
   icon's intrinsic 18px making that one button a hair taller than a
   plain-text one, so both read as exactly the same size. */
.lid-toestemming-acties .btn {
    min-height: 2.375rem;
}

/* Portie 10b, STAP 4: the ".jonger dan 16" explanation sits next to the
   disabled "Het lid zelf" radio, inside the same .veld-inline flex row —
   .hint's own margin-top (meant for stacking BELOW something) would nudge
   it out of vertical alignment with the label here, so it is reset only in
   this inline context. */
.veld-inline .hint {
    margin-top: 0;
}

/* A plain caption above a radio pair (Wie tekent / Wijze) — same look as
   .veld label but on a <p>, not a <label>, since it names the GROUP rather
   than one control (an unbound <label> would be misleading for a screen
   reader). */
.veld-titel {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.lid-toestemming-vragen {
    display: grid;
    gap: 0.625rem;
}

.lid-toestemming-vraag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.lid-toestemming-vraag p {
    margin: 0;
    font-size: 0.875rem;
}

.lid-toestemming-vraag-antwoord {
    display: flex;
    gap: 0.875rem;
    flex-shrink: 0;
}

.lid-toestemming-vraag-antwoord label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text);
}

/* === Toestemmingen: formulierversies-beheerscherm (portie 12) ==============
   Everything else on these screens (.kaart/.kaart-kop/.titel-link/.chip/
   .rij-acties/.veld/.veld-inline/.veld-groeit/.filter-vorm/.kolommen-acties/
   .melding) is reused as-is — this is the one new piece, the action row on
   the version detail page (Wijzigen/Huidig maken/Verwijderen). */
.toestemming-versie-acties {
    display: flex;
    gap: 0.625rem;
    margin: 0.75rem 0 1.25rem;
}

/* === Secretariaat (portie 5y) ===============================================
   .kaart/.tab-nav/.tab-knop/.tab-paneel reused as-is (this file's own
   "Tabbladen" section and generic .kaart above) — only the counter row
   itself is new, since no existing screen already had a row of small
   number+label tiles. flex-wrap, not a fixed grid: the opdracht asks this
   to still look right with one tile today and four once AVG/VOG/diploma's/
   pasfoto's land, and a fixed column count would need to change with them. */

.secretariaat-tellers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}

.secretariaat-teller {
    flex: 1 1 11rem;
    padding: 1.125rem;
}

.secretariaat-teller .cijfer {
    display: block;
    font-size: 2rem;
    font-family: var(--font-display);
    color: var(--text-heading);
}

.secretariaat-teller .omschrijving {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* === Secretariaat: importvoorbeeld, sectie-indeling (portie 6h) =============
   The preview used to be one run-on block: two counter groups side by side
   (so "Verzorgers" floated whatever distance "Leden" happened to be wide,
   opdracht) with no grid to align their chips, then every list below it in
   full-size uppercase h3's fighting the tellers for attention, with no
   space marking where one ended and the next began. .import-secties/
   .import-sectie below is the fix for the run-on part: one flex column
   with an explicit gap between sections, each section carrying the same
   horizontal inset the rest of admin.css already uses for kaart content
   (.snel/.leeg/.lijstje .item all pad 1.125rem) — no section brings its
   own one-off padding anymore. The scoped h3 here (0.9375rem) is the same
   size leden-detail.php already uses for .lid-verzorgers/.lid-import — a
   heading subordinate to the card's own content, not a new size invented
   for this screen. Generalized into its own class rather than a third
   member-specific one, since the shape (indented sub-section under a card)
   now recurs a third time. */

.import-secties {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.import-sectie {
    padding: 0 1.125rem;
}

.import-sectie h3 {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}

/* Two groups (Leden, Verzorgers) — stacked, not side by side, so both
   headings start at the same left edge regardless of how many chips the
   other group has (opdracht: "op dezelfde hoogte", the actual bug being
   fixed here). Same cijfer/omschrijving naming and tokens as
   .secretariaat-teller above (number gets the weight via --text-heading +
   var(--font-display), label stays small/--text-muted), re-scoped under
   .import-teller instead of reused as-is: those tiles are full-width flex
   cards (one glance, up to a handful of topics); this is a dense list of
   up to five, so cijfer/omschrijving sit inline and smaller instead of
   stacked. */

.import-tellers {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.import-tellergroep h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* Grid, not flex-wrap: a flex row sizes each chip to its own content, so
   chips in different rows never line up under each other. A grid gives
   every chip the same column width regardless of label length — a fixed
   column count would need to divide two different group sizes (four
   verzorgerstellers, five ledentellers) cleanly; auto-fill on a minimum
   chip width sidesteps that and still comes out at the same column count
   for both groups, since they sit in the same width card. */
.import-tellerrij {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.625rem 1.25rem;
}

.import-teller {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.import-teller .cijfer {
    font-size: 1.5rem;
    font-family: var(--font-display);
    color: var(--text-heading);
}

.import-teller .omschrijving {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* A zero counter is what did NOT happen — quieter than one that did, same
   dimming convention as .rij-verwijderd/.rij-inactief (opacity, not a
   second color) rather than a new muted token. */
.import-teller--nul {
    opacity: 0.55;
}

/* === Hulptabellen: tabbladen als links (portie 7) =========================
   Linkgebaseerd (?tab=…), werkt zonder JavaScript — anders dan de
   JS-gedreven .tab-nav/.tab-knop in teams-bewerken.php. De tabnamen volgen
   de bestaande kopstijl (.kaart h2 / th): Barlow Condensed, uppercase.
   Onderstreepte tabstrip, zoals .tab-nav. */
.hulptab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.hulptab-knop {
    padding: 0.5rem 1rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.hulptab-knop:hover {
    color: var(--color-interactive);
}

.hulptab-knop--actief {
    color: var(--text-heading);
    border-bottom-color: var(--color-interactive);
}

/* Hulptabellen: 'multiselect' veld — de afgeleide Sportlink-patroonkeuzelijst
   (portie 10b), aanvinkbaar binnen een .paneel .sectie. Alleen semantische
   variabelen, dus licht en donker volgen vanzelf. */
.multiselect-opties {
    max-height: 20rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 0.5rem 0.75rem;
    background: var(--surface-card);
}

.multiselect-opties .veld-inline {
    margin-top: 0.35rem;
    align-items: baseline;
}

.multiselect-opties .veld-inline:first-child {
    margin-top: 0;
}

.multiselect-optie-meta {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

.multiselect-opties input:disabled + label {
    opacity: 0.55;
}