/* ============================================================
   Ledenportaal — eigen applicatie-stijl (los van de publieke site)
   Donkere sidebar + lichte content (admin-dashboard look)
   ============================================================ */

:root {
    --p-navy-900: #01243f;
    --p-navy-800: #012e50;
    --p-navy-700: #004b80;
    --p-accent: #e6a417;
    --p-accent-600: #cf9010;
    --p-ink: #1c2a3a;
    --p-body: #48576a;
    --p-muted: #8595a8;
    --p-line: #e6ecf3;
    --p-bg: #eef2f7;
    --p-card: #ffffff;
    --p-radius: 16px;
    --p-radius-sm: 10px;
    --p-sidebar-w: 268px;
    --p-shadow: 0 4px 16px rgba(16, 42, 67, .07);
    --p-shadow-lg: 0 20px 45px rgba(16, 42, 67, .18);
    --p-ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

/* Minimale utilities (portaal is verder los van Bootstrap) */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.m-0 { margin: 0; }
.d-none { display: none; }
@media (min-width: 576px) { .d-sm-inline { display: inline; } }

body.portal-body {
    margin: 0;
    font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--p-bg);
    color: var(--p-body);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.portal { min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--p-sidebar-w);
    background: linear-gradient(185deg, var(--p-navy-800) 0%, var(--p-navy-900) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform .3s var(--p-ease);
}
.sidebar__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.4rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sidebar__brand img { height: 40px; width: auto; }
.sidebar__brand .name { font-weight: 600; font-size: 1.02rem; line-height: 1.1; }
.sidebar__brand .name small { display: block; font-weight: 400; font-size: .72rem; color: rgba(255, 255, 255, .55); letter-spacing: .04em; }

.sidebar__section {
    padding: 1.2rem 1.5rem .5rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .4);
    font-weight: 500;
}
.sidebar__nav { flex: 1; overflow-y: auto; padding: .4rem .8rem 1rem; }

/* Accordion-groepen (max 1 open) */
.sb-group__head {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    background: none; border: 0; cursor: pointer;
    padding: 1rem .8rem .5rem;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
    color: rgba(255, 255, 255, .4); font-weight: 500;
    transition: color .18s;
}
.sb-group__head:hover { color: rgba(255, 255, 255, .72); }
.sb-group__chev { font-size: .6rem; opacity: .7; transition: transform .25s var(--p-ease); }
.sb-group.open .sb-group__head { color: rgba(255, 255, 255, .72); }
.sb-group.open .sb-group__chev { transform: rotate(180deg); }
.sb-group__body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .28s var(--p-ease), opacity .2s var(--p-ease); }
.sb-group.open .sb-group__body { max-height: 680px; opacity: 1; }

/* Icoon in het pagina's-overzicht */
.pagina-ic {
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 75, 128, .1); color: var(--p-navy-700); font-size: 1rem;
}

/* CMS-bewerkvelden (pagina-inhoud) */
.cms-veld { padding: .9rem 0; border-top: 1px solid var(--p-line); }
.cms-veld:first-of-type { border-top: 0; padding-top: .2rem; }
.cms-veld__label { display: block; font-weight: 500; color: var(--p-ink); margin-bottom: .4rem; font-size: .92rem; }
.cms-afb { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cms-afb__preview { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--p-line); background: var(--p-bg); }
.cms-afb__zone { flex: 1; min-width: 220px; padding: 1.1rem 1rem; }
.cms-trix { min-height: 160px; border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); background: var(--p-card); padding: .6rem .8rem; }
trix-toolbar .trix-button-group { border-color: var(--p-line); }
trix-toolbar { margin-bottom: .4rem; }
.sidebar__nav a {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .8rem;
    margin-bottom: .15rem;
    border-radius: var(--p-radius-sm);
    color: rgba(255, 255, 255, .74);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 400;
    position: relative;
    transition: background-color .18s, color .18s;
}
.sidebar__nav a .ic { width: 22px; text-align: center; font-size: 1rem; opacity: .9; }
.sidebar__nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar__nav a.active { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 500; }
.sidebar__nav a.active::before {
    content: ""; position: absolute; left: -0.8rem; top: 50%; transform: translateY(-50%);
    width: 4px; height: 60%; background: var(--p-accent); border-radius: 0 4px 4px 0;
}
.sidebar__nav a.active .ic { color: var(--p-accent); opacity: 1; }
.sidebar__nav a .nav-badge {
    margin-left: auto; background: var(--p-accent); color: var(--p-navy-900);
    font-size: .72rem; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}

.sidebar__foot {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.sidebar__user {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .7rem; border-radius: var(--p-radius-sm);
    background: rgba(255, 255, 255, .06);
}
.sidebar__avatar {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    background: var(--p-accent); color: var(--p-navy-900);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .95rem;
}
.sidebar__user .meta { min-width: 0; }
.sidebar__user .meta .nm { font-size: .9rem; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user .meta .rl { font-size: .74rem; color: rgba(255, 255, 255, .55); }
.sidebar__logout {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; margin-top: .6rem;
    background: transparent; border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .82); border-radius: 999px;
    padding: .55rem; font-size: .88rem; cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.sidebar__logout:hover { background: rgba(230, 164, 23, .16); border-color: var(--p-accent); color: #fff; }

.sidebar__links { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sidebar__link {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .55rem .4rem; border-radius: var(--p-radius-sm);
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .82); text-decoration: none; font-size: .82rem;
    transition: background .2s, border-color .2s, color .2s;
}
.sidebar__link i { font-size: .82rem; }
.sidebar__link:hover { background: rgba(230, 164, 23, .16); border-color: var(--p-accent); color: #fff; }
.sidebar__link.active { background: rgba(230, 164, 23, .2); border-color: var(--p-accent); color: #fff; }
.sidebar__versie { text-align: center; margin-top: .6rem; font-size: .72rem; color: rgba(255, 255, 255, .4); letter-spacing: .03em; }


.rm-lijst { display: flex; flex-direction: column; gap: .9rem; }
.rm-item { display: flex; gap: 1rem; align-items: flex-start; background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius); padding: 1.1rem 1.3rem; box-shadow: var(--p-shadow-sm); }
.rm-status { flex: 0 0 auto; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .3rem .6rem; border-radius: 999px; margin-top: .1rem; }
.rm-status--bezig { background: rgba(230, 164, 23, .16); color: var(--p-accent-600); }
.rm-status--gepland { background: #eaf2f8; color: #14507e; }
.rm-status--idee { background: var(--p-bg); color: var(--p-muted); }
.rm-status--klaar { background: #e6f6ec; color: #1c7a43; }
.rm-item__titel { font-size: 1rem; font-weight: 600; color: var(--p-ink); margin: 0 0 .2rem; }
.rm-item__tekst { font-size: .9rem; color: var(--p-muted); margin: 0; }

/* ---- Content ---- */
.content { margin-left: var(--p-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 900;
    height: 66px; background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--p-line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.75rem;
}
.topbar__title { font-size: 1.1rem; font-weight: 600; color: var(--p-ink); }
.topbar__right { display: flex; align-items: center; gap: 1rem; }
.topbar__chip { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--p-body); }
.topbar__chip .av {
    width: 32px; height: 32px; border-radius: 50%; background: var(--p-navy-700); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 600;
}
.hamburger { display: none; background: none; border: none; font-size: 1.3rem; color: var(--p-ink); cursor: pointer; }

.topbar__left { display: flex; align-items: center; gap: 1rem; }
.topbar__back {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .85rem; font-weight: 500; color: var(--p-navy-700); text-decoration: none;
    background: rgba(0, 75, 128, .08); padding: .42rem .85rem; border-radius: 999px;
    transition: background .2s, color .2s;
}
.topbar__back:hover { background: rgba(0, 75, 128, .16); color: var(--p-navy-800); }

/* Gebruikersmenu (dropdown) */
.userMenu { position: relative; }
.userMenu__trigger {
    display: flex; align-items: center; gap: .6rem;
    background: transparent; border: 1px solid transparent; cursor: pointer;
    padding: .35rem .5rem; border-radius: 999px; font-family: inherit; font-size: .9rem; color: var(--p-body);
    transition: background .2s, border-color .2s;
}
.userMenu__trigger:hover, .userMenu.open .userMenu__trigger { background: #fff; border-color: var(--p-line); }
.userMenu__trigger .av {
    width: 32px; height: 32px; border-radius: 50%; background: var(--p-navy-700); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 600;
}
.userMenu__trigger .caret { font-size: .7rem; color: var(--p-muted); transition: transform .2s; }
.userMenu.open .userMenu__trigger .caret { transform: rotate(180deg); }

.userMenu__dropdown {
    position: absolute; right: 0; top: calc(100% + 10px); min-width: 216px;
    background: #fff; border: 1px solid var(--p-line); border-radius: 14px;
    box-shadow: var(--p-shadow-lg); padding: .4rem; z-index: 1200;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s var(--p-ease), transform .2s var(--p-ease), visibility .2s;
}
.userMenu.open .userMenu__dropdown { opacity: 1; visibility: visible; transform: none; }
.userMenu__head { padding: .55rem .8rem; border-bottom: 1px solid var(--p-line); margin-bottom: .3rem; }
.userMenu__head .nm { font-weight: 600; color: var(--p-ink); font-size: .92rem; }
.userMenu__head .rl { font-size: .76rem; color: var(--p-muted); }
.userMenu__item {
    display: flex; align-items: center; gap: .7rem; width: 100%;
    padding: .6rem .8rem; border: none; background: transparent; cursor: pointer;
    font-family: inherit; font-size: .9rem; color: var(--p-body); text-decoration: none;
    border-radius: 9px; transition: background .18s, color .18s; text-align: left;
}
.userMenu__item i { width: 18px; text-align: center; color: var(--p-muted); }
.userMenu__item:hover { background: var(--p-bg); color: var(--p-ink); }
.userMenu__item--danger { color: #c0392b; }
.userMenu__item--danger i { color: #c0392b; }
.userMenu__item--danger:hover { background: #fdecec; color: #a52d22; }

/* Topbar-icoonknoppen */
.topbar__right { gap: .3rem; }
.iconbtn {
    width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
    color: var(--p-body); font-size: 1rem; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; transition: background .2s, color .2s;
}
.iconbtn:hover { background: var(--p-bg); color: var(--p-navy-700); }

/* ============================================================
   RONDLEIDING (tour)
   ============================================================ */
.tour { position: relative; }
.tour__btn { color: var(--p-navy-700); }

.tour-overlay {
    position: fixed; inset: 0; z-index: 3000; background: transparent; cursor: pointer;
}
.tour-overlay.is-solid { background: rgba(4, 20, 36, .62); }

.tour-spot {
    position: fixed; z-index: 3001; border-radius: 12px; pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(4, 20, 36, .62), 0 0 0 2px var(--p-accent);
    transition: top .25s var(--p-ease), left .25s var(--p-ease), width .25s var(--p-ease), height .25s var(--p-ease);
}

.tour-pop {
    position: fixed; z-index: 3002; width: 300px; max-width: calc(100vw - 24px);
    background: #fff; border-radius: 14px; box-shadow: var(--p-shadow-lg);
    overflow: hidden; animation: tourPop .2s var(--p-ease);
}
@keyframes tourPop { from { opacity: 0; } to { opacity: 1; } }
.tour-pop__body { padding: 1rem 1.1rem .75rem; }
.tour-pop__titel { margin: 0 0 .35rem; font-size: 1rem; font-weight: 600; color: var(--p-ink); }
.tour-pop__tekst { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--p-body); }
.tour-pop__foot {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem;
    padding: .6rem 1.1rem .8rem; border-top: 1px solid var(--p-line); flex-wrap: wrap;
}
.tour-pop__uit {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--p-muted); cursor: pointer;
}
.tour-pop__uit input { accent-color: var(--p-accent); margin: 0; }
.tour-pop__nav { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.tour-pop__tel { font-size: .74rem; color: var(--p-muted); margin-right: .2rem; white-space: nowrap; }
.tour-mini {
    border: 1px solid var(--p-line); background: #fff; color: var(--p-body); border-radius: 8px;
    padding: .38rem .7rem; font-family: inherit; font-size: .82rem; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.tour-mini:hover { background: var(--p-bg); }
.tour-mini--primary { background: var(--p-navy-700); border-color: var(--p-navy-700); color: #fff; }
.tour-mini--primary:hover { background: var(--p-navy-800); }

/* Uitklapbare zoekbalk (icoon → veld bij hover) */
.topbar__search { position: relative; width: 40px; height: 40px; flex: 0 0 auto; }
.topbar__search .search-ic { position: absolute; right: 0; top: 0; z-index: 2; }
.topbar__search input {
    position: absolute; right: 0; top: 0; height: 40px; width: 40px;
    padding: 0 44px 0 1.1rem; border: 1px solid transparent; border-radius: 999px;
    background: var(--p-bg); font-family: inherit; font-size: .92rem; color: var(--p-ink);
    opacity: 0; pointer-events: none;
    transition: width .32s var(--p-ease), opacity .22s var(--p-ease), border-color .2s, box-shadow .2s;
}
.topbar__search.open input { width: min(300px, 62vw); opacity: 1; pointer-events: auto; border-color: var(--p-line); }
.topbar__search.open .search-ic { color: var(--p-navy-700); }
.topbar__search input:focus { outline: none; box-shadow: 0 0 0 4px rgba(0, 75, 128, .1); }

.topbar__results {
    position: absolute; top: calc(100% + 8px); right: 0; width: min(340px, 86vw);
    background: #fff; border: 1px solid var(--p-line); border-radius: 14px; box-shadow: var(--p-shadow-lg);
    padding: .4rem; max-height: min(70vh, 460px); overflow-y: auto; z-index: 1300; display: none;
}
.topbar__search.results-open .topbar__results { display: block; }
.results__group { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--p-muted); font-weight: 600; padding: .5rem .7rem .25rem; }
.results__item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 9px; text-decoration: none; color: var(--p-ink); }
.results__item:hover { background: var(--p-bg); }
.results__item .ri-ic { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; background: rgba(0, 75, 128, .1); color: var(--p-navy-700); display: flex; align-items: center; justify-content: center; font-size: .85rem; }
.results__item .ri-txt { min-width: 0; display: flex; flex-direction: column; }
.results__item .ri-label { font-size: .92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results__item .ri-sub { font-size: .78rem; color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results__empty { padding: 1rem; text-align: center; color: var(--p-muted); font-size: .9rem; }

/* Meldingen (bel) */
.notif { position: relative; }
.notif .notif-dot {
    position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--p-accent); border: 2px solid #fff; display: none;
}
.notif.has-new .notif-dot { display: block; }
.notif__dropdown {
    position: absolute; right: 0; top: calc(100% + 10px); width: 264px;
    background: #fff; border: 1px solid var(--p-line); border-radius: 14px; box-shadow: var(--p-shadow-lg);
    padding: .4rem; z-index: 1200; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s var(--p-ease), transform .2s var(--p-ease), visibility .2s;
}
.notif.open .notif__dropdown { opacity: 1; visibility: visible; transform: none; }
.notif__head { padding: .55rem .8rem; border-bottom: 1px solid var(--p-line); font-weight: 600; color: var(--p-ink); font-size: .9rem; }
.notif__empty { padding: 1.5rem 1rem; text-align: center; color: var(--p-muted); font-size: .88rem; }
.notif__empty i { display: block; font-size: 1.5rem; opacity: .45; margin-bottom: .5rem; }

.notif__dropdown { width: 330px; max-height: 72vh; overflow-y: auto; }
.notif__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.notif__item { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .7rem; border-radius: 10px; text-decoration: none; color: var(--p-ink); }
.notif__item:hover { background: var(--p-bg); }
.notif__item.is-nieuw { background: rgba(230, 164, 23, .10); }
.notif__ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; background: var(--p-bg); color: var(--p-navy-700); display: flex; align-items: center; justify-content: center; font-size: .85rem; }
.notif__txt { display: flex; flex-direction: column; min-width: 0; }
.notif__titel { font-size: .85rem; font-weight: 500; line-height: 1.25; }
.notif__tijd { font-size: .74rem; color: var(--p-muted); margin-top: .1rem; }
.notif__all { display: block; text-align: center; padding: .55rem; margin-top: .25rem; border-top: 1px solid var(--p-line); color: var(--p-navy-700); text-decoration: none; font-size: .85rem; font-weight: 500; }
.notif__all:hover { background: var(--p-bg); }

/* ---- Meldingen-pagina ---- */
.mld-lijst { display: flex; flex-direction: column; }
.mld { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.2rem; border-bottom: 1px solid var(--p-line); text-decoration: none; color: var(--p-ink); position: relative; transition: background .15s; }
.mld:last-child { border-bottom: none; }
.mld:hover { background: #f9fbfd; }
.mld--nieuw { background: rgba(230, 164, 23, .07); }
.mld__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; background: var(--p-bg); color: var(--p-navy-700); }
.mld__ic--evenement, .mld__ic--evenement-herinnering { background: #eaf2f8; color: #14507e; }
.mld__ic--document { background: rgba(230, 164, 23, .16); color: var(--p-accent-600); }
.mld__ic--nieuwsbrief { background: #e7f5ec; color: #1e7145; }
.mld__ic--fotoalbum { background: #fdecec; color: #c0392b; }
.mld__ic--lidmaatschap { background: #e6f6ec; color: #1c7a43; }
.mld__ic--clubartikel { background: rgba(230, 164, 23, .16); color: var(--p-accent-600); }
.mld__ic--betaling { background: #e6f6ec; color: #1c7a43; }
.mld__ic--betaling-mislukt { background: #fdecec; color: #c0392b; }
.mld__body { display: flex; flex-direction: column; min-width: 0; gap: .12rem; }
.mld__titel { font-weight: 500; }
.mld__tekst { font-size: .9rem; color: var(--p-body); }
.mld__tijd { font-size: .78rem; color: var(--p-muted); margin-top: .15rem; }
.mld__dot { position: absolute; top: 1.15rem; right: 1.2rem; width: 9px; height: 9px; border-radius: 50%; background: var(--p-accent); }

.page { padding: 2rem 1.75rem 3rem; flex: 1; }

/* ============================================================
   COMPONENTEN
   ============================================================ */
.page-head { margin-bottom: 1.75rem; }
.page-head h1 { font-size: 1.7rem; font-weight: 700; color: var(--p-ink); margin: 0 0 .3rem; }
.page-head p { color: var(--p-muted); margin: 0; }


.pill {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(0, 75, 128, .1); color: var(--p-navy-700);
    font-size: .8rem; font-weight: 500; padding: .25rem .7rem; border-radius: 999px;
}

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }

.qcard {
    display: flex; flex-direction: column; gap: .9rem;
    background: var(--p-card); border: 1px solid var(--p-line);
    border-radius: var(--p-radius); padding: 1.5rem;
    text-decoration: none; color: var(--p-ink);
    box-shadow: var(--p-shadow);
    transition: transform .25s var(--p-ease), box-shadow .25s var(--p-ease), border-color .2s;
}
.qcard:hover { transform: translateY(-4px); box-shadow: var(--p-shadow-lg); border-color: rgba(0, 75, 128, .25); }
.qcard .ico {
    width: 50px; height: 50px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--p-navy-700), var(--p-navy-800));
    color: #fff; font-size: 1.25rem;
}
.qcard h3 { font-size: 1.1rem; font-weight: 600; margin: 0; color: var(--p-ink); }
.qcard .go { margin-top: auto; font-size: .85rem; color: var(--p-navy-700); font-weight: 500; display: flex; align-items: center; gap: .4rem; }
.qcard:hover .go { color: var(--p-accent-600); }
.dash-sectiekop { margin: 2.25rem 0 1rem; }
.dash-sectiekop h2 { font-size: 1.25rem; font-weight: 600; color: var(--p-ink); margin: 0 0 .2rem; }
.dash-sectiekop p { color: var(--p-muted); margin: 0; font-size: .9rem; }

/* Vraagt om aandacht */
.aandacht-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.aandacht-card {
    display: flex; align-items: center; gap: 1rem;
    background: var(--p-card); border: 1px solid var(--p-line); border-left-width: 4px;
    border-radius: var(--p-radius); padding: 1rem 1.15rem; text-decoration: none;
    box-shadow: var(--p-shadow-sm); transition: transform .2s var(--p-ease), box-shadow .2s var(--p-ease);
}
.aandacht-card:hover { transform: translateY(-3px); box-shadow: var(--p-shadow-lg); }
.aandacht-card__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.aandacht-card__body { display: flex; flex-direction: column; gap: .1rem; }
.aandacht-card__label { font-weight: 600; color: var(--p-ink); }
.aandacht-card__sub { font-size: .85rem; color: var(--p-muted); }
.aandacht-card__go { margin-left: auto; color: var(--p-muted); transition: transform .2s var(--p-ease); }
.aandacht-card:hover .aandacht-card__go { transform: translateX(3px); color: var(--p-navy-700); }
.aandacht-card--gold { border-left-color: var(--p-accent); }
.aandacht-card--gold .aandacht-card__ic { background: rgba(230, 164, 23, .16); color: var(--p-accent-600); }
.aandacht-card--navy { border-left-color: var(--p-navy-700); }
.aandacht-card--navy .aandacht-card__ic { background: rgba(0, 75, 128, .1); color: var(--p-navy-700); }
.aandacht-leeg { display: flex; align-items: center; gap: .6rem; color: var(--p-muted); font-size: .95rem; }
.aandacht-leeg i { color: #1e9e5a; font-size: 1.15rem; }

/* ---- Dashboard: stats + widgets ---- */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
/* Extra lucht tussen het aandacht-blok en de statistieken eronder. */
.aandacht-grid + .dash-stats,
.panel + .dash-stats { margin-top: 1.75rem; }
.dstat { display: flex; flex-direction: column; gap: .1rem; background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius); padding: 1.1rem 1.25rem; box-shadow: var(--p-shadow-sm); text-decoration: none; position: relative; transition: transform .2s var(--p-ease), box-shadow .2s var(--p-ease); }
.dstat:hover { transform: translateY(-3px); box-shadow: var(--p-shadow-lg); }
.dstat__ic { position: absolute; top: 1rem; right: 1.1rem; width: 34px; height: 34px; border-radius: 9px; background: var(--p-bg); color: var(--p-navy-700); display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.dstat__num { font-size: 1.9rem; font-weight: 700; color: var(--p-ink); line-height: 1.1; }
.dstat__lbl { font-size: .84rem; color: var(--p-muted); }

/* ---- Evenement-statistieken: verhaal-kaarten ---- */
.stat-hls { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.stat-hl { display: flex; gap: .9rem; background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius); padding: 1.1rem 1.2rem; box-shadow: var(--p-shadow-sm); }
.stat-hl__ic { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--p-bg); color: var(--p-navy-700); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.stat-hl__lbl { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--p-muted); }
.stat-hl__val { font-size: 1.45rem; font-weight: 700; color: var(--p-ink); line-height: 1.15; margin: .1rem 0; }
.stat-hl__sub { font-size: .88rem; color: var(--p-muted); }
.stat-hl__names { font-size: .92rem; color: var(--p-ink); line-height: 1.5; margin-top: .15rem; }
.stat-hl--wide { grid-column: 1 / -1; }
.stat-hl__leeg { color: var(--p-muted); font-style: italic; }

.dash-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1.25rem; }
.widget { background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow-sm); display: flex; flex-direction: column; overflow: hidden; }
.widget__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--p-line); }
.widget__head h2 { font-size: 1rem; font-weight: 600; color: var(--p-ink); margin: 0; display: flex; align-items: center; gap: .55rem; }
.widget__head h2 i { color: var(--p-navy-700); }
.widget__meer { font-size: .82rem; font-weight: 500; color: var(--p-navy-700); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.widget__meer:hover { color: var(--p-accent-600); }
.widget__body { padding: .5rem .7rem; display: flex; flex-direction: column; }

.wrow { display: flex; align-items: center; gap: .8rem; padding: .6rem; border-radius: 10px; text-decoration: none; color: var(--p-ink); }
.wrow:hover { background: var(--p-bg); }
.wrow--plat:hover { background: none; }
.wdate { flex: 0 0 auto; width: 44px; text-align: center; background: var(--p-bg); border-radius: 9px; padding: .3rem 0; line-height: 1; }
.wdate .d { display: block; font-size: 1.1rem; font-weight: 700; color: var(--p-ink); }
.wdate .m { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--p-muted); }
.wrow__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; background: var(--p-bg); color: var(--p-navy-700); display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.wrow__ic--pdf { background: #fdecec; color: #c0392b; }
.wrow__ic--word { background: #e8f0fb; color: #2b579a; }
.wrow__ic--excel { background: #e7f5ec; color: #1e7145; }
.wrow__ic--ppt { background: #fdeee4; color: #c04a1e; }
.wrow__ic--image { background: rgba(230, 164, 23, .16); color: var(--p-accent-600); }
.wrow__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wrow__titel { font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow__sub { font-size: .78rem; color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow .badge { flex: 0 0 auto; }

.wempty { text-align: center; color: var(--p-muted); font-size: .88rem; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.wempty i { font-size: 1.4rem; opacity: .45; }
.wempty__cta { color: var(--p-navy-700); font-weight: 500; text-decoration: none; font-size: .85rem; }
.wempty__cta:hover { color: var(--p-accent-600); }

.walbums { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .3rem; }
.walbum { position: relative; aspect-ratio: 3/2; border-radius: 10px; overflow: hidden; background: var(--p-bg); text-decoration: none; display: block; }
.walbum img { width: 100%; height: 100%; object-fit: cover; }
.walbum__leeg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--p-muted); font-size: 1.3rem; }
.walbum__naam { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem .6rem .4rem; background: linear-gradient(transparent, rgba(1, 36, 63, .8)); color: #fff; font-size: .78rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- IT-beheer: functie-indicator (devbar) ---- */
.devbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; background: #0f2438; color: #cbd8e6; border-radius: var(--p-radius-sm); padding: .5rem .9rem; margin-bottom: 1.25rem; font-size: .82rem; }
.devbar__tag { display: inline-flex; align-items: center; gap: .35rem; background: var(--p-accent); color: var(--p-navy-900); font-weight: 700; font-size: .72rem; padding: .15rem .5rem; border-radius: 6px; }
.devbar code { background: rgba(255, 255, 255, .12); color: #fff; padding: .1rem .4rem; border-radius: 5px; font-size: .8rem; }
.devbar em { color: #8ea6bd; font-style: normal; opacity: .85; }

/* ---- Statuspagina ---- */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.status-tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.status-tbl th { text-align: left; font-weight: 500; color: var(--p-muted); padding: .5rem 0; width: 45%; vertical-align: top; }
.status-tbl td { padding: .5rem 0; text-align: right; }
.status-tbl tr { border-bottom: 1px solid var(--p-line); }
.status-tbl tr:last-child { border-bottom: none; }
.schijf-bar { height: 12px; border-radius: 999px; background: var(--p-bg); overflow: hidden; margin-bottom: .6rem; }
.schijf-bar span { display: block; height: 100%; background: var(--p-navy-700); border-radius: 999px; }
.schijf-info { font-size: .85rem; color: var(--p-muted); margin: 0; }

.panel { background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow); padding: 1.5rem; }
.panel--pad0 { padding: 0; overflow: hidden; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.panel__head h2 { font-size: 1.15rem; font-weight: 600; color: var(--p-ink); margin: 0; }

/* ---- Knoppen ---- */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
    padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid transparent;
    text-decoration: none; transition: transform .2s var(--p-ease), box-shadow .2s, background .2s, border-color .2s;
    white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg, var(--p-navy-700), var(--p-navy-800)); color: #fff; box-shadow: 0 6px 16px rgba(0, 75, 128, .25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0, 75, 128, .32); color: #fff; }
.btn-light { background: #fff; border-color: var(--p-line); color: var(--p-ink); }
.btn-light:hover { background: var(--p-bg); }
.btn-danger { background: #fff; border-color: #f0c4c0; color: #c0392b; }
.btn-danger:hover { background: #fdecec; }
.btn-sm { padding: .38rem .75rem; font-size: .82rem; }
.btn-ghost { background: transparent; color: var(--p-navy-700); padding: .4rem .7rem; }
.btn-ghost:hover { background: rgba(0, 75, 128, .08); }

/* ---- Tabel ---- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.tbl th, table.tbl td { padding: .85rem 1.1rem; text-align: left; vertical-align: middle; }
table.tbl thead th {
    background: #f7fafc; color: var(--p-muted); font-weight: 600; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--p-line);
}
table.tbl tbody tr { border-bottom: 1px solid var(--p-line); }
table.tbl tbody tr:last-child { border-bottom: none; }
table.tbl tbody tr:hover { background: #f9fbfd; }
table.tbl .actions { text-align: right; white-space: nowrap; display: flex; gap: .4rem; justify-content: flex-end; }

/* ---- Badges ---- */
.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .76rem; font-weight: 500; padding: .22rem .6rem; border-radius: 999px;
    background: rgba(0, 75, 128, .1); color: var(--p-navy-700);
}
.badge--muted { background: var(--p-bg); color: var(--p-muted); }
.badge--ok { background: #e6f6ec; color: #1c7a43; }
.badge--off { background: #fdecec; color: #c0392b; }
.badge--gold { background: rgba(230, 164, 23, .16); color: var(--p-accent-600); }
.badge-list { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---- Formulieren ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.5rem; }
.form-grid .col-span-2 { grid-column: 1 / -1; }
.frm-field label { display: block; font-weight: 500; color: var(--p-ink); font-size: .88rem; margin-bottom: .4rem; }
.frm-field input:not([type="checkbox"]):not([type="radio"]),
.frm-field select,
.frm-field textarea,
textarea.form-control {
    width: 100%; padding: .62rem .85rem; font-size: .95rem; font-family: inherit; line-height: 1.45;
    border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); background: #fff; color: var(--p-ink);
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.frm-field input:not([type="checkbox"]):not([type="radio"]):hover,
.frm-field select:hover, .frm-field textarea:hover, textarea.form-control:hover { border-color: #c6d4e2; }
.frm-field input:not([type="checkbox"]):not([type="radio"]):focus,
.frm-field select:focus, .frm-field textarea:focus, textarea.form-control:focus {
    outline: none; border-color: var(--p-navy-700); box-shadow: 0 0 0 4px rgba(0, 75, 128, .12);
}
.frm-field input::placeholder, .frm-field textarea::placeholder, textarea.form-control::placeholder { color: #9fb0c1; }

/* Textarea */
.frm-field textarea, textarea.form-control { resize: vertical; min-height: 92px; }

/* Select met eigen dropdown-pijl */
.frm-field select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7a8d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.3rem;
}

/* Datum- en tijdvelden: nette kalender-indicator */
.frm-field input[type="date"]::-webkit-calendar-picker-indicator,
.frm-field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: .5; padding: .15rem; margin-left: .25rem; transition: opacity .2s;
}
.frm-field input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .85; }
.frm-field input[type="date"]::-webkit-datetime-edit,
.frm-field input[type="number"] { color: var(--p-ink); }
/* Nette number-spinners */
.frm-field input[type="number"]::-webkit-inner-spin-button { opacity: .6; height: 1.6em; }
.frm-hint { font-size: .8rem; color: var(--p-muted); margin-top: .35rem; }

/* Uitleg-lijst (o.a. e-mailkoppeling) */
.uitleg-lijst { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .55rem; font-size: .89rem; color: var(--p-body); line-height: 1.5; }
.uitleg-lijst code { background: var(--p-bg); padding: .1rem .35rem; border-radius: 6px; font-size: .85em; }
.uitleg-tip { margin: 1rem 0 0; padding: .8rem 1rem; background: var(--p-bg); border-radius: 10px; font-size: .84rem; color: var(--p-body); line-height: 1.5; }
.uitleg-tip i { color: var(--p-accent); }

/* E-mailsjabloon-editor */
.mailedit-toolbar { display: flex; gap: .3rem; padding: .4rem; border: 1px solid var(--p-line); border-bottom: none; border-radius: 10px 10px 0 0; background: var(--p-bg); }
.mailedit-tool { width: 34px; height: 32px; border: 1px solid transparent; background: #fff; border-radius: 7px; cursor: pointer; color: var(--p-body); transition: border-color .15s, color .15s; }
.mailedit-tool:hover { border-color: var(--p-line); color: var(--p-navy-700); }
.mailedit-editor { border: 1px solid var(--p-line); border-radius: 0 0 10px 10px; padding: 1rem 1.1rem; min-height: 260px; background: #fff; font-size: .95rem; line-height: 1.6; color: var(--p-ink); outline: none; }
.mailedit-editor:focus { border-color: var(--p-navy-700); box-shadow: 0 0 0 3px rgba(0, 75, 128, .08); }
.mailedit-editor p { margin: 0 0 .8rem; }
.mailedit-editor a { color: var(--p-navy-700); }

.varchips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.varchip { border: 1px solid var(--p-line); background: #fff; border-radius: 999px; padding: .3rem .7rem; font-size: .8rem; font-family: ui-monospace, monospace; color: var(--p-navy-700); cursor: pointer; transition: background .15s, border-color .15s; }
.varchip:hover { background: var(--p-bg); border-color: var(--p-navy-700); }
.varlegenda { font-size: .8rem; color: var(--p-muted); line-height: 1.8; }
.varlegenda code { background: var(--p-bg); padding: .05rem .3rem; border-radius: 5px; color: var(--p-body); }
.frm-field input[readonly] { background: #f4f7fa; color: var(--p-muted); cursor: default; }

/* Zoekbaar keuzeveld (combobox) */
.combo { position: relative; }
.combo__box {
    display: flex; align-items: center; gap: .55rem;
    padding: .62rem .85rem; border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); background: #fff;
}
.combo__box:hover { border-color: #c6d4e2; }
.combo__box:focus-within { border-color: var(--p-navy-700); box-shadow: 0 0 0 4px rgba(0, 75, 128, .12); }
.combo__box > i { color: var(--p-muted); font-size: .9rem; }
.combo__input {
    flex: 1; min-width: 0; border: none !important; outline: none; background: transparent !important;
    box-shadow: none !important; padding: 0 !important; width: auto !important;
    font: inherit; font-size: .95rem; color: var(--p-ink);
}
.combo__input::placeholder { color: #9fb0c1; }
.combo__clear { border: none; background: transparent; color: var(--p-muted); cursor: pointer; padding: .1rem .25rem; border-radius: 4px; line-height: 1; }
.combo__clear:hover { color: var(--p-ink); background: #eef2f7; }
.combo__list {
    position: absolute; z-index: 30; top: calc(100% + .25rem); left: 0; right: 0;
    max-height: 288px; overflow-y: auto; margin: 0; padding: .3rem; list-style: none;
    background: #fff; border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); box-shadow: 0 10px 30px rgba(16, 42, 67, .16);
}
.combo__opt { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .6rem; border-radius: 6px; cursor: pointer; }
.combo__opt:hover { background: #eef2f7; }
.combo__opt-sub { font-size: .78rem; color: var(--p-muted); }

/* Registratie-opties — beheerformulier (repeater) */
.opties-kop {
    display: grid; grid-template-columns: 1fr 110px 120px 44px; gap: .6rem;
    padding: 0 .1rem .35rem; font-size: .8rem; color: var(--p-muted); font-weight: 600;
}
.optie-rij {
    display: grid; grid-template-columns: 1fr 110px 120px 44px; gap: .6rem;
    align-items: center; margin-bottom: .55rem;
}
.optie-rij input:not([type="hidden"]) {
    width: 100%; padding: .55rem .7rem; font-size: .92rem; font-family: inherit; line-height: 1.4;
    border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); background: #fff; color: var(--p-ink);
    transition: border-color .2s, box-shadow .2s;
}
.optie-rij input:not([type="hidden"]):hover { border-color: #c6d4e2; }
.optie-rij input:not([type="hidden"]):focus { outline: none; border-color: var(--p-navy-700); box-shadow: 0 0 0 4px rgba(0, 75, 128, .12); }
.optie-rij input::placeholder { color: #9fb0c1; }
.optie-rij .optie-verwijder { width: 100%; justify-content: center; padding-left: 0; padding-right: 0; }

@media (max-width: 640px) {
    .opties-kop { display: none; }
    .optie-rij { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .optie-rij .optie-titel { grid-column: 1 / -1; }
    .optie-rij .optie-verwijder { grid-column: 1 / -1; }
}

/* Registratie-opties — inschrijven (ledenkant) */
.opties-inschrijf { margin-bottom: 1rem; }
.optie-keuze {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .6rem 0; border-bottom: 1px solid var(--p-line);
}
.optie-keuze__titel { font-weight: 500; color: var(--p-ink); }
.optie-keuze__meta { font-size: .82rem; color: var(--p-muted); margin-top: .1rem; }
.optie-aantal {
    width: 72px; text-align: center; padding: .5rem; font-size: .95rem; font-family: inherit; line-height: 1.4;
    border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); background: #fff; color: var(--p-ink);
    transition: border-color .2s, box-shadow .2s; flex: 0 0 auto;
}
.optie-aantal:hover { border-color: #c6d4e2; }
.optie-aantal:focus { outline: none; border-color: var(--p-navy-700); box-shadow: 0 0 0 4px rgba(0, 75, 128, .12); }
.optie-totaal { display: flex; justify-content: space-between; font-weight: 600; color: var(--p-ink); padding-top: .8rem; }

/* Autocomplete-menu (eerder gebruikte opties) */
.ac-menu {
    position: absolute; z-index: 80;
    background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius-sm);
    box-shadow: 0 12px 28px rgba(16, 42, 67, .16); padding: .3rem; max-height: 264px; overflow-y: auto;
}
.ac-item {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .5rem .6rem; border-radius: var(--p-radius-sm); cursor: pointer;
    font-size: .9rem; color: var(--p-ink); transition: background-color .12s;
}
.ac-item:hover, .ac-item.actief { background: rgba(0, 75, 128, .09); }
.ac-item__titel { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-item__meta { flex: 0 0 auto; font-size: .8rem; color: var(--p-muted); }

/* Schakelaars: elke checkbox wordt als toggle getoond */
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto; width: 44px; height: 25px; margin: 0; padding: 0; border: none;
    border-radius: 999px; background: #cdd7e2; position: relative; cursor: pointer;
    vertical-align: middle; transition: background .2s var(--p-ease);
}
input[type="checkbox"]::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 42, 67, .3);
    transition: transform .2s var(--p-ease);
}
input[type="checkbox"]:checked { background: var(--p-navy-700); }
input[type="checkbox"]:checked::after { transform: translateX(19px); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--p-navy-700); outline-offset: 2px; }
.switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }

/* ---- Functie-keuze (checkbox-grid) ---- */
.perm-group { margin-bottom: 1.4rem; }
.perm-group__title { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--p-muted); font-weight: 600; margin-bottom: .6rem; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .5rem; }
.perm-check {
    display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem;
    border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); cursor: pointer;
    font-size: .88rem; color: var(--p-body); transition: border-color .2s, background .2s;
}
.perm-check:hover { border-color: rgba(0, 75, 128, .3); }
.perm-check:has(input:checked) { border-color: rgba(0, 75, 128, .45); background: rgba(0, 75, 128, .04); }
.perm-check input:checked ~ span { color: var(--p-ink); font-weight: 500; }
.perm-check code { font-family: ui-monospace, monospace; font-size: .82rem; color: var(--p-navy-700); }
.perm-check .lock-ic { display: none; margin-left: auto; color: var(--p-muted); font-size: .78rem; }
.perm-check.locked { background: var(--p-bg); border-style: dashed; cursor: default; }
.perm-check.locked .lock-ic { display: inline; }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

.form-actions { display: flex; gap: .6rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--p-line); }

/* Formuliervelden binnen een tabel (bv. Geplande taken) */
.tbl--form input[type="time"], .tbl--form select {
    padding: .5rem .75rem; font-size: .92rem; font-family: inherit; color: var(--p-ink);
    border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.tbl--form input[type="time"]:hover, .tbl--form select:hover { border-color: #c6d4e2; }
.tbl--form input[type="time"]:focus, .tbl--form select:focus {
    outline: none; border-color: var(--p-navy-700); box-shadow: 0 0 0 4px rgba(0, 75, 128, .12);
}
.tbl--form select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7a8d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center;
}
.tbl--form input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }
.tbl--form input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: .85; }

.taak-naam { font-weight: 500; color: var(--p-ink); }
.taak-naam i { color: var(--p-muted); margin-right: .45rem; }
.taak-oms { color: var(--p-muted); font-size: .84rem; margin-top: .2rem; max-width: 46ch; }
.taak-laatst { color: var(--p-muted); font-size: .85rem; white-space: nowrap; }

/* Voertuig-repeater */
.voertuig-rij {
    display: grid; grid-template-columns: 130px 1fr 1fr 1fr 40px; gap: .8rem; align-items: end;
    padding: .85rem 0; border-bottom: 1px solid var(--p-line);
}
.voertuig-rij:first-child { padding-top: 0; }
.voertuig-rij:last-child { border-bottom: none; }
.voertuig-verwijder {
    width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--p-line);
    background: #fff; color: #c0392b; cursor: pointer; transition: background .2s, border-color .2s;
}
.voertuig-verwijder:hover { background: #fdecec; border-color: #f0c4c0; }
@media (max-width: 720px) {
    .voertuig-rij { grid-template-columns: 1fr 1fr; }
    .voertuig-verwijder { width: 100%; }
}

/* Leden-zoekfilter */
.leden-filter { display: flex; gap: .6rem; align-items: center; }
.leden-filter__box { position: relative; flex: 1; max-width: 460px; }
.leden-filter__box i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--p-muted); font-size: .9rem; }
.leden-filter__box input {
    width: 100%; padding: .6rem .9rem .6rem 2.5rem; border: 1px solid var(--p-line); border-radius: 999px;
    background: #fff; font-family: inherit; font-size: .92rem; color: var(--p-ink);
}
.leden-filter__box input:focus { outline: none; border-color: var(--p-navy-700); box-shadow: 0 0 0 4px rgba(0, 75, 128, .1); }

/* ============================================================
   EVENEMENTEN
   ============================================================ */
.ev-lijst { display: flex; flex-direction: column; gap: .9rem; }
.ev-card {
    display: flex; align-items: center; gap: 1.25rem; text-decoration: none; color: var(--p-ink);
    background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius);
    box-shadow: var(--p-shadow-sm); padding: 1rem 1.25rem;
    transition: transform .2s var(--p-ease), box-shadow .2s var(--p-ease), border-color .2s;
}
.ev-card:hover { transform: translateY(-3px); box-shadow: var(--p-shadow); border-color: rgba(0, 75, 128, .25); }
.ev-card__date {
    flex: 0 0 auto; width: 62px; height: 62px; border-radius: 14px;
    background: linear-gradient(135deg, var(--p-navy-700), var(--p-navy-800)); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.ev-card__date .d { font-size: 1.5rem; font-weight: 700; }
.ev-card__date .m { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; margin-top: 2px; }
.ev-card__body { flex: 1; min-width: 0; }
.ev-card__body h3 { font-size: 1.1rem; font-weight: 600; color: var(--p-ink); margin: 0 0 .35rem; }
.ev-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; color: var(--p-muted); font-size: .88rem; }
.ev-meta i { color: var(--p-navy-700); margin-right: .3rem; }
.ev-card__side { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.ev-lijst--past .ev-card { opacity: .72; }
.ev-lijst--past .ev-card__date { background: #94a5b8; }

.row-2col { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; }
.ev-facts { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }
.ev-facts > div { color: var(--p-body); }
.ev-facts i { color: var(--p-navy-700); width: 1.3em; }
.ev-omschrijving { color: var(--p-body); line-height: 1.7; border-top: 1px solid var(--p-line); padding-top: 1.1rem; }
.ev-inschrijf { position: sticky; top: calc(var(--nav-h) + 20px); }
.ev-status { padding: .7rem .9rem; border-radius: var(--p-radius-sm); margin-bottom: 1rem; font-size: .92rem; }
.ev-status.ok { background: #e6f6ec; color: #1c7a43; border: 1px solid #bfe6cd; }
.ev-status.gold { background: rgba(230, 164, 23, .14); color: var(--p-accent-600); border: 1px solid rgba(230, 164, 23, .3); }

/* Jaar-tabs (horizontaal scrollbaar) */
.jaar-tabs {
    display: flex; gap: .3rem; overflow-x: auto; overflow-y: hidden; margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--p-line); scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.jaar-tabs::-webkit-scrollbar { height: 6px; }
.jaar-tabs::-webkit-scrollbar-thumb { background: var(--p-line); border-radius: 3px; }
.jaar-tab {
    flex: 0 0 auto; background: transparent; border: none; cursor: pointer;
    font-family: inherit; font-size: .95rem; font-weight: 500; color: var(--p-muted);
    padding: .7rem 1.15rem; border-bottom: 3px solid transparent; margin-bottom: -2px;
    transition: color .2s, border-color .2s; white-space: nowrap;
}
.jaar-tab:hover { color: var(--p-navy-700); }
.jaar-tab.active { color: var(--p-navy-700); border-bottom-color: var(--p-navy-700); }
a.jaar-tab { text-decoration: none; }
.jaar-panel.is-hidden { display: none; }
.tab-telling {
    display: inline-block; margin-left: .45rem; min-width: 1.4em; padding: 0 .4em;
    font-size: .72rem; font-weight: 600; line-height: 1.5em; text-align: center;
    color: var(--p-muted); background: var(--p-line); border-radius: 999px;
}
.jaar-tab.active .tab-telling { color: #fff; background: var(--p-navy-700); }

/* Samenvattingsstrip op "Mijn betalingen" */
.betaal-samenvatting { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; }
.betaal-sam__cel {
    flex: 1 1 auto; min-width: 130px; background: var(--p-card); border: 1px solid var(--p-line);
    border-radius: var(--p-radius); box-shadow: var(--p-shadow); padding: .85rem 1.1rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.betaal-sam__cel--open { border-color: var(--p-accent); }
.betaal-sam__label { font-size: .78rem; color: var(--p-muted); text-transform: uppercase; letter-spacing: .04em; }
.betaal-sam__waarde { font-size: 1.25rem; font-weight: 700; color: var(--p-ink); }
.betaal-sam__cel--open .betaal-sam__waarde { color: var(--p-accent-600); }

/* Financiën-beheer */
.financien-kop { display: flex; align-items: center; gap: .55rem; font-size: 1.05rem; font-weight: 600; color: var(--p-ink); margin: 0 0 .75rem; }
.financien-kop i { color: var(--p-navy-700); }
.fin-balk { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.fin-balk__groep { display: flex; align-items: center; gap: .5rem; margin: 0; }

/* Test-uitvoer (terminal-stijl) */
.test-output {
    margin: 0; padding: 1.1rem 1.25rem; max-height: 460px; overflow: auto;
    background: #0f1b2a; color: #d6e2f0; border-radius: 0 0 var(--p-radius) var(--p-radius);
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    font-size: .82rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.fin-balk select,
.fin-balk input:not([type="checkbox"]):not([type="radio"]) {
    padding: .5rem .8rem; font-size: .92rem; font-family: inherit; line-height: 1.4;
    border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); background: #fff; color: var(--p-ink);
    transition: border-color .2s, box-shadow .2s;
}
.fin-balk select:hover, .fin-balk input:hover { border-color: #c6d4e2; }
.fin-balk select:focus, .fin-balk input:focus {
    outline: none; border-color: var(--p-navy-700); box-shadow: 0 0 0 4px rgba(0, 75, 128, .12);
}
.fin-balk select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7a8d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2.1rem;
}
.ev-card--past { opacity: .72; }
.ev-card--past .ev-card__date { background: #94a5b8; }

/* ============================================================
   FOTOALBUMS
   ============================================================ */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
.album-card { display: block; text-decoration: none; color: var(--p-ink); background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius); overflow: hidden; box-shadow: var(--p-shadow-sm); transition: transform .25s var(--p-ease), box-shadow .25s var(--p-ease); }
.album-card:hover { transform: translateY(-4px); box-shadow: var(--p-shadow-lg); }
.album-card__cover { display: block; position: relative; aspect-ratio: 4/3; background: var(--p-bg); }
.album-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.album-card__leeg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--p-muted); font-size: 2rem; }
.album-card__count { position: absolute; right: .6rem; bottom: .6rem; background: rgba(1, 36, 63, .72); color: #fff; font-size: .78rem; padding: .2rem .55rem; border-radius: 999px; }
.album-card__body { padding: .9rem 1rem; }
.album-card__body h3 { font-size: 1.02rem; font-weight: 600; margin: 0; }
.album-card__datum { font-size: .82rem; color: var(--p-muted); }

.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; }
.foto-thumb { border: none; padding: 0; background: none; cursor: pointer; border-radius: var(--p-radius-sm); overflow: hidden; aspect-ratio: 1; }
.foto-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--p-ease); }
.foto-thumb:hover img { transform: scale(1.06); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(1, 20, 36, .94); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem 1rem; }
.lightbox.open { display: flex; }
.lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; max-width: 100%; min-height: 0; }
.lb-stage img { max-width: 90vw; max-height: 72vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.lb-close { position: absolute; top: 1rem; right: 1.25rem; background: rgba(255, 255, 255, .12); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; transition: background .2s; }
.lb-close:hover { background: rgba(255, 255, 255, .25); }
.lb-nav { position: absolute; top: 45%; transform: translateY(-50%); background: rgba(255, 255, 255, .12); color: #fff; border: none; width: 52px; height: 52px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; transition: background .2s; }
.lb-nav:hover { background: rgba(255, 255, 255, .28); }
.lb-prev { left: 1.5rem; }
.lb-next { right: 1.5rem; }
.lb-strip { display: flex; gap: .4rem; overflow-x: auto; overflow-y: hidden; max-width: 92vw; padding: .5rem; margin-top: 1rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }
.lb-strip::-webkit-scrollbar { height: 6px; }
.lb-strip::-webkit-scrollbar-track { background: transparent; }
.lb-strip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 3px; }
.lb-strip::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .45); }
.lb-thumb { flex: 0 0 auto; width: 66px; height: 50px; border: 2px solid transparent; border-radius: 6px; overflow: hidden; padding: 0; background: none; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s; }
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb.active { opacity: 1; border-color: #fff; }
@media (max-width: 600px) { .lb-nav { width: 42px; height: 42px; } .lb-prev { left: .5rem; } .lb-next { right: .5rem; } }

/* Document-lezer-modal (PDF inline, o.a. nieuwsbrieven) */
.docmodal { position: fixed; inset: 0; z-index: 3000; background: rgba(1, 20, 36, .94); display: none; flex-direction: column; padding: 1.25rem 1rem; }
.docmodal.open { display: flex; }
.docmodal__bar { display: flex; align-items: center; gap: 1rem; color: #fff; padding: 0 .25rem .9rem; }
.docmodal__titel { font-weight: 600; font-size: 1.05rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docmodal__acties { margin-left: auto; display: flex; gap: .5rem; flex: 0 0 auto; }
.docmodal__btn { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .12); color: #fff; border: none; height: 40px; padding: 0 .95rem; border-radius: 8px; font-size: .9rem; cursor: pointer; text-decoration: none; transition: background .2s; }
.docmodal__btn:hover { background: rgba(255, 255, 255, .25); }
.docmodal__stage { flex: 1; min-height: 0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.docmodal__stage iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 600px) { .docmodal__btn span { display: none; } .docmodal__btn { padding: 0 .7rem; } }

/* Titel als knop (opent de lezer-modal) — visueel gelijk aan de link-titel */
button.doc-card__title { background: none; border: 0; padding: 0; margin: 0; font-family: inherit; font-size: inherit; text-align: left; cursor: pointer; width: 100%; }

/* Upload-zone */
.upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 2.2rem 1rem; border: 2px dashed var(--p-line); border-radius: var(--p-radius); cursor: pointer; color: var(--p-muted); transition: border-color .2s, background .2s; }
.upload-zone:hover, .upload-zone.over { border-color: var(--p-navy-700); background: var(--p-bg); }
.upload-zone i { font-size: 1.8rem; color: var(--p-navy-700); }
.upload-zone span { font-weight: 500; color: var(--p-ink); }
.upload-zone small { font-size: .8rem; }

/* Foto-beheer (bewerkformulier) */
.beheer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.beheer-foto { position: relative; border-radius: var(--p-radius-sm); overflow: hidden; border: 2px solid transparent; aspect-ratio: 1; }
.beheer-foto[draggable="true"] { cursor: grab; }
.beheer-foto[draggable="true"]:active { cursor: grabbing; }
.beheer-foto.sleept { opacity: .35; }
.beheer-foto.is-cover { border-color: var(--p-accent); }
.beheer-foto img { width: 100%; height: 100%; object-fit: cover; }
.beheer-foto__cover { position: absolute; left: .4rem; bottom: .4rem; display: flex; align-items: center; gap: .3rem; background: rgba(1, 36, 63, .72); color: #fff; font-size: .74rem; padding: .2rem .5rem; border-radius: 999px; cursor: pointer; }
.beheer-foto__cover input { width: 14px; height: 14px; }
.beheer-foto.is-cover .beheer-foto__cover { background: var(--p-accent-600); }
.beheer-foto__del { position: absolute; top: .4rem; right: .4rem; width: 30px; height: 30px; border-radius: 8px; border: none; background: rgba(192, 57, 43, .9); color: #fff; cursor: pointer; font-size: .8rem; }
.beheer-foto__del:hover { background: #c0392b; }

/* Clubartikelen-beheer */
.artikel-thumb { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--p-bg); display: flex; align-items: center; justify-content: center; color: var(--p-muted); }
.artikel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.artikel-preview { max-width: 260px; margin-bottom: 1rem; border-radius: var(--p-radius-sm); overflow: hidden; border: 1px solid var(--p-line); background: var(--p-bg); }
.artikel-preview img { width: 100%; display: block; max-height: 220px; object-fit: contain; }

/* Besteller-gegevens */
.best-gegevens { display: flex; flex-direction: column; gap: .7rem; }
.best-gegevens > div { display: flex; flex-direction: column; }
.best-gegevens span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--p-muted); font-weight: 600; margin-bottom: .1rem; }
.best-gegevens a { color: var(--p-navy-700); }
@media (max-width: 860px) { .row-2col { grid-template-columns: 1fr; } .ev-inschrijf { position: static; } }
@media (max-width: 600px) { .ev-card { flex-wrap: wrap; } .ev-card__side { width: 100%; justify-content: flex-start; } }

/* ============================================================
   DOCUMENTEN
   ============================================================ */
.doc-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.chip {
    padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; text-decoration: none;
    background: #fff; border: 1px solid var(--p-line); color: var(--p-navy-700);
    transition: background .18s, border-color .18s, color .18s;
}
.chip:hover { background: var(--p-bg); }
.chip.active { background: var(--p-navy-700); color: #fff; border-color: var(--p-navy-700); }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1.1rem; }
.doc-card {
    display: flex; flex-direction: column; gap: .8rem;
    background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius);
    padding: 1.1rem; box-shadow: var(--p-shadow-sm);
    transition: transform .25s var(--p-ease), box-shadow .25s var(--p-ease);
}
.doc-card:hover { transform: translateY(-4px); box-shadow: var(--p-shadow-lg); }
.doc-card__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.doc-icon {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.doc-icon--pdf   { background: #fdecec; color: #c0392b; }
.doc-icon--word  { background: #e8f0fb; color: #2b579a; }
.doc-icon--excel { background: #e7f5ec; color: #1e7145; }
.doc-icon--ppt   { background: #fdeee4; color: #c04a1e; }
.doc-icon--image { background: rgba(230, 164, 23, .16); color: var(--p-accent-600); }
.doc-icon--other { background: var(--p-bg); color: var(--p-navy-700); }
.doc-cat {
    font-size: .72rem; padding: .2rem .55rem; border-radius: 999px;
    background: var(--p-bg); color: var(--p-navy-700); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%;
}
.doc-card__title { display: block; font-weight: 600; color: var(--p-ink); text-decoration: none; word-break: break-word; }
.doc-card__title:hover { color: var(--p-navy-700); }
.doc-card__desc { font-size: .85rem; color: var(--p-body); margin: .3rem 0 0; line-height: 1.4; }
.doc-card__meta { font-size: .8rem; color: var(--p-muted); margin: .35rem 0 0; }
.doc-card__actions { margin-top: auto; display: flex; gap: .4rem; align-items: center; }
.doc-card__view { flex: 1 1 auto; justify-content: center; }
.doc-huidig { display: flex; align-items: center; gap: .5rem; color: var(--p-ink); font-size: .92rem; margin-bottom: 1rem; }
.doc-huidig i { color: var(--p-navy-700); }
.doc-huidig span { color: var(--p-muted); font-size: .85rem; }

/* ---- Flash ---- */
.flash {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .85rem 1.1rem; border-radius: var(--p-radius-sm); margin-bottom: 1.25rem; font-size: .92rem;
}
.flash--ok { background: #e6f6ec; color: #1c7a43; border: 1px solid #bfe6cd; }
.flash--err { background: #fdecec; color: #b02a2a; border: 1px solid #f5c6c6; }
.flash--info { background: #eaf2f8; color: #14507e; border: 1px solid #c7ddef; }
.flash ul { padding-left: 1.1rem; margin-top: .3rem; }

.empty { text-align: center; padding: 3rem 1rem; color: var(--p-muted); }
.empty i { font-size: 2rem; opacity: .4; display: block; margin-bottom: .75rem; }

/* ---- Paginering ---- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }
.pager__info { font-size: .85rem; color: var(--p-muted); }
.pager__list { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.pager__item a, .pager__item span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 .6rem; border-radius: var(--p-radius-sm);
    font-size: .88rem; text-decoration: none; color: var(--p-body);
    background: #fff; border: 1px solid var(--p-line); transition: background .18s, border-color .18s, color .18s;
}
.pager__item a:hover { background: var(--p-bg); border-color: rgba(0, 75, 128, .3); color: var(--p-navy-700); }
.pager__item.active span { background: var(--p-navy-700); border-color: var(--p-navy-700); color: #fff; font-weight: 500; }
.pager__item.disabled span { opacity: .45; cursor: default; }

/* ============================================================
   LOGIN (split-screen)
   ============================================================ */
.auth { display: flex; min-height: 100vh; }
.auth__brand {
    flex: 1.1; position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--p-navy-700) 0%, var(--p-navy-900) 100%);
    color: #fff; display: flex; flex-direction: column; justify-content: center;
    padding: 3.5rem;
}
.auth__brand::after {
    content: ""; position: absolute; right: -120px; bottom: -120px;
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 164, 23, .22), transparent 65%);
}
.auth__brand img { height: 96px; width: auto; margin-bottom: 2rem; align-self: flex-start; }
.auth__brand h2 { font-size: 2.1rem; font-weight: 700; line-height: 1.15; margin: 0 0 1rem; max-width: 460px; }
.auth__brand p { color: rgba(255, 255, 255, .8); max-width: 420px; font-size: 1.02rem; }
.auth__brand .usps { margin-top: 2rem; display: flex; flex-direction: column; gap: .7rem; }
.auth__brand .usps span { display: flex; align-items: center; gap: .7rem; color: rgba(255, 255, 255, .9); }
.auth__brand .usps i { color: var(--p-accent); }

.auth__form { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem; background: var(--p-card); }
.auth__form-inner { width: 100%; max-width: 380px; }
.auth__form-inner h1 { font-size: 1.6rem; font-weight: 700; color: var(--p-ink); margin: 0 0 .3rem; }
.auth__form-inner .sub { color: var(--p-muted); margin-bottom: 1.75rem; }

.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 500; color: var(--p-ink); font-size: .9rem; margin-bottom: .4rem; }
.field input[type="email"], .field input[type="password"] {
    width: 100%; padding: .72rem .9rem; font-size: .98rem; font-family: inherit;
    border: 1px solid var(--p-line); border-radius: var(--p-radius-sm); background: #fff; color: var(--p-ink);
    transition: border-color .2s, box-shadow .2s;
}
.field input:focus { outline: none; border-color: var(--p-navy-700); box-shadow: 0 0 0 4px rgba(0, 75, 128, .12); }
.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--p-body); margin-bottom: 1.4rem; }
.btn-p {
    width: 100%; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--p-navy-700), var(--p-navy-800));
    color: #fff; font-family: inherit; font-size: 1rem; font-weight: 500;
    padding: .8rem; border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0, 75, 128, .3);
    transition: transform .2s var(--p-ease), box-shadow .2s;
}
.btn-p:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 75, 128, .38); }
.auth-alert { background: #fdecec; color: #b02a2a; border: 1px solid #f5c6c6; border-radius: var(--p-radius-sm); padding: .7rem .9rem; font-size: .9rem; margin-bottom: 1.25rem; }
.auth-alert--ok { background: #e9f7ef; color: #1c7a43; border-color: #bfe6cd; }
.auth-link { display: inline-block; margin-top: 1rem; color: var(--p-muted); font-size: .9rem; }
.auth-back { margin-top: 1.5rem; font-size: .86rem; color: var(--p-muted); text-align: center; }
.auth-back a { color: var(--p-navy-700); text-decoration: none; }
.auth-back a:hover { text-decoration: underline; }

/* Logo dat wit is omzetten naar donkerblauw voor lichte vlakken */
.logo-navy { filter: brightness(0) saturate(100%) invert(19%) sepia(53%) saturate(1352%) hue-rotate(178deg) brightness(94%) contrast(101%); }

/* ============================================================
   SIDEBAR MOBIEL
   ============================================================ */
.sidebar__overlay {
    display: none; position: fixed; inset: 0; z-index: 999;
    background: rgba(1, 36, 63, .5); backdrop-filter: blur(2px);
}
@media (max-width: 992px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--p-shadow-lg); }
    .sidebar.open { transform: translateX(0); }
    .sidebar__overlay.show { display: block; }
    .content { margin-left: 0; }
    .hamburger { display: inline-flex; }
}
@media (max-width: 768px) {
    .auth__brand { display: none; }
    .auth__form { padding: 1.75rem; }
    .page { padding: 1.5rem 1.1rem 2.5rem; }
}

/* ---- Dashboard: kop met actieknop ---- */
.page-head--met-actie { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---- Dashboard-rooster (persoonlijk instelbaar) ---- */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(var(--dash-kolommen, 4), 1fr);
    grid-auto-rows: var(--dash-row, 74px);
    grid-auto-flow: row dense;
    gap: 1.1rem;
    align-items: stretch;
}
.dash-tile {
    grid-column: span var(--w, 2);
    grid-row: span var(--h, 3);
    min-width: 0; min-height: 0;
    display: flex; position: relative;
}
.dash-tile > .widget { width: 100%; min-height: 0; max-height: 100%; }
/* De inhoud van een tegel schuift binnen het gekozen formaat. */
.dash-tile .widget__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Bewerk-modus */
.dash-bewerkbalk {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: linear-gradient(135deg, var(--p-navy-700), var(--p-navy-800)); color: #fff;
    padding: .7rem 1rem; border-radius: var(--p-radius-sm); margin-bottom: 1.25rem;
    box-shadow: 0 8px 20px rgba(0, 75, 128, .25); font-size: .9rem;
}
.dash-bewerkbalk__tekst { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dash-bewerkbalk__tekst strong { font-weight: 700; }
.dash-bewerkbalk__acties { display: flex; gap: .5rem; flex: 0 0 auto; }
.dash-bewerk-reset { margin-top: 1rem; text-align: center; }

.dash-grid--bewerk .dash-tile {
    padding-top: 40px;
    outline: 2px dashed var(--p-line); outline-offset: -2px; border-radius: var(--p-radius);
    cursor: grab; transition: outline-color .15s, opacity .15s;
}
.dash-grid--bewerk .dash-tile:hover { outline-color: var(--p-navy-700); }
.dash-grid--bewerk .dash-tile.is-verborgen { opacity: .5; }
.dash-grid--bewerk .dash-tile.is-sleep { opacity: .35; outline-style: solid; outline-color: var(--p-accent); }
.dash-grid--bewerk .widget__body { overflow: hidden; } /* geen scroll tijdens bewerken */

.tile-tools {
    position: absolute; z-index: 5; top: 5px; left: 5px; right: 5px;
    display: flex; align-items: center; gap: .4rem;
    background: rgba(255, 255, 255, .97); border: 1px solid var(--p-line); border-radius: 9px;
    padding: .28rem .4rem; box-shadow: var(--p-shadow-sm); font-size: .74rem;
}
.tile-tools__greep { cursor: grab; color: var(--p-muted); padding: 0 .1rem; }
.tile-tools__grp { display: inline-flex; align-items: center; gap: .18rem; color: var(--p-muted); font-weight: 700; }
.tile-tools__grp b { min-width: 12px; text-align: center; color: var(--p-ink); }
.tile-tools__grp button, .tile-tools__oog {
    width: 22px; height: 22px; border: 1px solid var(--p-line); background: #fff; color: var(--p-navy-700);
    border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem; line-height: 1; transition: background .15s, color .15s;
}
.tile-tools__grp button:hover, .tile-tools__oog:hover { background: var(--p-bg); }
.tile-tools__oog { margin-left: auto; }

/* Op smallere schermen stapelen de tegels: de rooster-maten vervallen. */
@media (max-width: 900px) {
    .dash-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .dash-tile { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .dash-tile > .widget { max-height: none; }
    .dash-tile .widget__body { overflow: visible; }
}

/* ---------------------------------------------------------------------------
   Ticketsysteem — bug/idee-modals (topbar) + statusbadges
   --------------------------------------------------------------------------- */
.tmodal { position: fixed; inset: 0; z-index: 3200; display: none; }
.tmodal.open { display: block; }
.tmodal__backdrop { position: absolute; inset: 0; background: rgba(1, 20, 36, .55); backdrop-filter: blur(2px); }
.tmodal__box {
    position: relative; z-index: 1; width: min(560px, calc(100vw - 2rem));
    margin: 6vh auto 0; background: var(--p-card, #fff); border-radius: var(--p-radius, 14px);
    box-shadow: 0 24px 60px rgba(1, 20, 36, .35); overflow: hidden;
    animation: tmodal-in .16s ease-out;
}
@keyframes tmodal-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.tmodal__head { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--p-line); }
.tmodal__head h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: .55rem; }
.tmodal__head h2 .fa-bug { color: #c0392b; }
.tmodal__head h2 .fa-lightbulb { color: #d4a017; }
.tmodal__x { margin-left: auto; background: none; border: 0; font-size: 1.15rem; color: var(--p-muted); cursor: pointer; padding: .25rem; border-radius: 8px; }
.tmodal__x:hover { background: var(--p-bg); color: var(--p-navy-700); }
.tmodal__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.tmodal__pagina { margin: 0; font-size: .88rem; color: var(--p-muted); background: var(--p-bg); padding: .55rem .75rem; border-radius: 8px; }
.tmodal__pagina strong { color: var(--p-navy-700); }
.tmodal__hint { font-style: italic; }
.tmodal__foot { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--p-line); background: var(--p-bg); }

/* Ticket-lijst (beheer) */
.ticket-list { display: flex; flex-direction: column; gap: 1rem; }
.ticket-card { border: 1px solid var(--p-line); border-radius: var(--p-radius-sm, 10px); background: var(--p-card, #fff); padding: 1rem 1.15rem; }
.ticket-card__top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ticket-card__meta { margin-left: auto; font-size: .82rem; color: var(--p-muted); }
.ticket-card__blok { margin: .5rem 0; }
.ticket-card__blok .lbl { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--p-muted); }
.ticket-card__blok p { margin: .2rem 0 0; white-space: pre-wrap; }
.ticket-card__pagina { font-size: .82rem; color: var(--p-muted); margin-top: .5rem; }
.ticket-card__afhandel { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--p-line); }
.ticket-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ticket-tabs a { padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--p-line); color: var(--p-navy-700); font-size: .88rem; text-decoration: none; background: var(--p-card, #fff); }
.ticket-tabs a.is-actief { background: var(--p-navy-700); color: #fff; border-color: var(--p-navy-700); }

/* Foto-beoordelingswachtrij */
.wachtrij-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.wachtrij-item { border: 1px solid var(--p-line); border-radius: var(--p-radius-sm, 10px); overflow: hidden; background: var(--p-card, #fff); display: flex; flex-direction: column; }
.wachtrij-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--p-bg); }
.wachtrij-item__meta { padding: .55rem .7rem; font-size: .82rem; }
.wachtrij-item__acties { display: flex; gap: .4rem; padding: 0 .7rem .7rem; margin-top: auto; }
.wachtrij-item__acties form { flex: 1; }
.wachtrij-item__acties .btn { width: 100%; justify-content: center; }

/* Tweefactor: herstelcodes + sleutel */
.herstelcodes { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.herstelcodes code { background: var(--p-bg); border: 1px solid var(--p-line); border-radius: 6px; padding: .4rem .7rem; font-size: 1rem; letter-spacing: .04em; }

/* ---- Patchnotes (tijdlijn) ---- */
.pn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.pn-head h1 { font-size: 1.7rem; font-weight: 700; color: var(--p-ink); margin: 0 0 .3rem; }
.pn-head p { color: var(--p-muted); margin: 0; max-width: 560px; }
.pn-live { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--p-navy-700); background: rgba(0, 75, 128, .07); border: 1px solid rgba(0, 75, 128, .16); padding: .45rem .9rem; border-radius: 999px; white-space: nowrap; }
.pn-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #1c7a43; box-shadow: 0 0 0 3px rgba(28, 122, 67, .2); }

.pn-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.pn-chip { display: inline-flex; align-items: center; gap: .45rem; font-family: inherit; font-size: .85rem; font-weight: 600; padding: .42rem .85rem; border-radius: 999px; border: 1px solid var(--p-line); background: var(--p-card); color: var(--p-body); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.pn-chip:hover { border-color: var(--p-navy-700); color: var(--p-navy-700); }
.pn-chip.is-active { background: var(--p-navy-700); border-color: var(--p-navy-700); color: #fff; }
.pn-chip__n { font-size: .72rem; opacity: .75; font-weight: 700; }

.pn-timeline { position: relative; }
.pn-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--p-line); }

.pn-era { position: relative; padding-left: 2.4rem; margin: 1.6rem 0 1.2rem; }
.pn-era span { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--p-muted); background: var(--p-bg); padding: .3rem .75rem; border-radius: 999px; }

.pn-rel { position: relative; padding-left: 2.4rem; margin-bottom: 1.5rem; }
.pn-rel__node { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--p-card); border: 3px solid var(--p-navy-700); z-index: 1; }
.pn-rel.is-live .pn-rel__node { border-color: var(--p-accent); box-shadow: 0 0 0 4px rgba(230, 164, 23, .18); }

.pn-rel__card { background: var(--p-card); border: 1px solid var(--p-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow); padding: 1.3rem 1.5rem; }
.pn-rel.is-live .pn-rel__card { border-color: rgba(230, 164, 23, .5); }

.pn-rel__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; width: 100%; background: none; border: 0; padding: 0; margin: 0; font-family: inherit; text-align: left; cursor: pointer; }
.pn-rel__ver { flex: 0 0 auto; font-weight: 700; font-size: .88rem; color: #fff; background: var(--p-navy-700); padding: .22rem .6rem; border-radius: 7px; letter-spacing: .01em; }
.pn-rel.is-live .pn-rel__ver { background: linear-gradient(135deg, var(--p-navy-700), var(--p-navy-800)); }
.pn-rel__titel { font-size: 1.05rem; font-weight: 700; color: var(--p-ink); }
.pn-rel__livetag { flex: 0 0 auto; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--p-navy-900); background: var(--p-accent); padding: .16rem .5rem; border-radius: 999px; }
.pn-rel__datum { margin-left: auto; font-size: .83rem; color: var(--p-muted); white-space: nowrap; }
.pn-rel__chev { flex: 0 0 auto; color: var(--p-muted); font-size: .8rem; transition: transform .2s; }
.pn-rel.is-open .pn-rel__chev { transform: rotate(180deg); }

.pn-rel__body { margin-top: 1.1rem; }
.pn-rel:not(.is-open) .pn-rel__body { display: none; }
.pn-rel:not(.is-open) .pn-rel__card { padding-top: 1.05rem; padding-bottom: 1.05rem; }
.pn-rel:not(.is-open) .pn-rel__card:hover { border-color: rgba(0, 75, 128, .35); }

.pn-block { margin-top: 1.15rem; }
.pn-block:first-of-type { margin-top: 0; }
.pn-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px; }
.pn-pill--nieuw { color: #1c7a43; background: rgba(28, 122, 67, .1); }
.pn-pill--verbeterd { color: var(--p-navy-700); background: rgba(0, 75, 128, .1); }
.pn-pill--fix { color: var(--p-accent-600); background: rgba(230, 164, 23, .15); }

.pn-cat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--p-muted); margin: .95rem 0 .4rem; }
.pn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pn-list li { position: relative; padding-left: 1.15rem; font-size: .92rem; color: var(--p-body); line-height: 1.55; }
.pn-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; }
.pn-list--nieuw li::before { background: #1c7a43; }
.pn-list--verbeterd li::before { background: var(--p-navy-700); }
.pn-list--fix li::before { background: var(--p-accent); }

/* Roadmap-filter: statusstipjes + lege staat */
.rm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.rm-dot--bezig { background: var(--p-accent-600); }
.rm-dot--gepland { background: #14507e; }
.rm-dot--idee { background: var(--p-muted); }
.rm-dot--klaar { background: #1c7a43; }
.rm-leeg { color: var(--p-muted); padding: 1.5rem; text-align: center; }

/* Ticket → publiceren op roadmap/patchnotes */
.ticket-pub { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--p-line); }
.ticket-pub > summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--p-navy-700); list-style: none; display: inline-flex; align-items: center; gap: .4rem; }
.ticket-pub > summary::-webkit-details-marker { display: none; }
.ticket-pub[open] > summary { margin-bottom: .8rem; }
.ticket-pub__form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.ticket-pub-ok { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--p-line); font-size: .86rem; font-weight: 600; color: #1c7a43; }
.ticket-pub-ok .fa-circle-check { margin-right: .3rem; }