/* =========================================================================
   Samenwerkingsportaal — stylesheet
   Mobile-first: alles is eerst voor telefoon opgemaakt, daarna verbreed naar
   tablet/laptop met min-width media queries.
   ========================================================================= */

:root {
    --bg: #f1f5f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #e2e8f0;
    --text: #0f172a;
    --text-muted: #64748b;
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --danger: #dc2626;
    --warn: #b45309;
    --ok: #059669;

    --red: #ef4444;
    --amber: #f59e0b;
    --emerald: #10b981;
    --blue: #3b82f6;
    --violet: #8b5cf6;
    --rose: #f43f5e;
    --indigo: #6366f1;
    --slate: #64748b;

    --radius: 10px;
    --radius-lg: 14px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .1);
    --shadow-lg: 0 10px 25px rgba(15, 23, 42, .12);

    --topbar-h: 56px;
    /* De balk zelf, plus de inkeping-marge erboven (0 op telefoons zonder
       inkeping/als gewone website). Alles dat rekent met "de ruimte onder de
       balk" moet híér op rekenen, niet op --topbar-h alleen — anders klopt de
       hoogte niet meer zodra de balk in standalone-modus wat groeit. */
    --topbar-total-h: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));

    /* Zelfde soort berekening, maar dan voor de onderbalk op de telefoon (zie
       .bottomnav) — plus de veilige ruimte onderin voor de thuisknop-balk. */
    --bottomnav-h: 58px;
    --bottomnav-total-h: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0; }

a { color: var(--primary); }

/* ---------------------------------------------------------------- Topbar */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Als geïnstalleerde app (standalone) is er geen browserbalk meer die de
       inhoud vanzelf onder de camera-inkeping/Dynamic Island duwt — dat moet
       de balk nu zelf doen. env(...) is 0 op telefoons zonder inkeping, dus dit
       verandert niets in de gewone browser. */
    height: var(--topbar-total-h);
    padding: 0 12px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    background: #0f172a;
    color: #e2e8f0;
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 650;
    flex-shrink: 0;
}

.topbar__logo {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--primary), var(--violet));
}

.topbar__name { display: none; }

/* Let op: hier NOOIT overflow zetten. De 'Boards'-dropdown hangt hieronder en
   wordt door een overflow-regel afgeknipt — dan klap je 'm open en zie je niets.
   Schuiven is ook niet meer nodig: sinds de boards in een uitklapmenu zitten,
   staan er nog maar een paar korte items in de balk.
   Op de telefoon (< 640px) zit dit menu niet hier, maar onderin (.bottomnav) —
   duim-bereikbaar in plaats van in de krappe bovenbalk. */
.topbar__nav {
    display: none;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    color: #cbd5e1;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
}

.topbar__link:hover { background: #1e293b; color: #fff; }
.topbar__link.is-active { background: #1e293b; color: #fff; }
.topbar__link--admin { border: 1px solid #334155; }

.topbar__right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    /* Duwt dit blok altijd naar rechts, ook nu .topbar__nav er op de telefoon
       niet meer is om die ruimte te vullen (zie .bottomnav). */
    margin-left: auto;
}

/* --- Hoofdmenu: uitklapbare 'Boards' -------------------------------------
   Vroeger stond elk board los in de balk; dat liep vast zodra er meer bij
   kwamen. Nu één knop die uitklapt, zodat de balk altijd rustig blijft. */

.menu { position: relative; }

.menu__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.menu__button::-webkit-details-marker { display: none; }
.menu__button:hover { background: #1e293b; color: #fff; }
.menu__button.is-active { background: #1e293b; color: #fff; }

.menu__caret {
    width: 9px;
    height: 9px;
    opacity: .6;
    transition: transform .15s ease;
}

.menu[open] .menu__caret { transform: rotate(180deg); opacity: 1; }

.menu__panel {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 2px;
    z-index: 40;
}

.menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
}

.menu__item:hover { background: var(--surface-2); }
.menu__item.is-active { background: #eef2ff; color: var(--primary-dark); font-weight: 600; }

.menu__item--sub {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.menu__empty {
    padding: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.usermenu { position: relative; }

.usermenu__button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
}

.usermenu__button::-webkit-details-marker { display: none; }
.usermenu__button:hover { background: #1e293b; }
.usermenu__name { display: none; font-size: 14px; }

.avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.usermenu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 210px;
    padding: 10px;
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 6px;
}

.usermenu__role {
    font-size: 12px;
    color: var(--text-muted);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.usermenu__panel a { text-decoration: none; font-size: 14px; padding: 4px 0; }

.usermenu__logout {
    width: 100%;
    text-align: left;
    padding: 4px 0;
    background: none;
    border: 0;
    color: var(--danger);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* ------------------------------------------------------------- Meldingen */

.notif__button {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: #cbd5e1;
    cursor: pointer;
    list-style: none;
}

.notif__button::-webkit-details-marker { display: none; }
.notif__button:hover { background: #1e293b; color: #fff; }

.notif__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.notif__panel {
    left: auto;
    right: 0;
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 0;
    gap: 0;
}

/* De bel zit vlak bij de rand op een telefoon: een paneel dat vanaf daar naar
   links opent, steekt dan met zijn linkerkant voorbij de viewport uit (het
   scherm is smaller dan het paneel). Vanaf hier hangt het paneel aan het
   scherm zelf vast, niet meer aan de knop. */
@media (max-width: 480px) {
    .notif__panel {
        position: fixed;
        top: var(--topbar-total-h);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }
}

.notif__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.notif__markread {
    background: none;
    border: 0;
    color: var(--primary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.notif__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.notif__item:last-child { border-bottom: 0; }
.notif__item:hover { background: var(--surface-2); }

.notif__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 5px;
    background: transparent;
    flex-shrink: 0;
}

.notif__item.is-unread .notif__dot { background: var(--primary); }
.notif__item.is-unread .notif__text { font-weight: 600; }

.notif__text { display: block; font-size: 13.5px; line-height: 1.4; }
.notif__time { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* ------------------------------------------------------------------ Flash */

.flash {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 14px;
}

.flash--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.flash__close {
    margin-left: auto;
    background: none;
    border: 0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .6;
}

/* Melding die vanuit JavaScript boven het bord verschijnt. */
.flash--floating {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    margin: 0;
    max-width: min(420px, calc(100vw - 24px));
    box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------- Auth-pagina */

.body--bare {
    min-height: 100vh;
    background: linear-gradient(160deg, #1e293b, #0f172a 60%);
}

.auth {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 20px;
}

.auth__card {
    width: 100%;
    max-width: 380px;
    padding: 28px 24px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 16px;
}

.auth__brand { text-align: center; display: grid; gap: 6px; justify-items: center; }

.auth__logo {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary), var(--violet));
}

.auth__brand h1 { font-size: 20px; }
.auth__subtitle { color: var(--text-muted); font-size: 14px; }
.auth__hint { text-align: center; font-size: 13px; color: var(--text-muted); }

/* --------------------------------------------------------- Formulieren etc */

/* Het hidden-attribuut moet altijd winnen. Zonder dit overschrijft een eigen
   display (zoals .field { display: grid }) het en blijft een verborgen blok
   toch zichtbaar. */
[hidden] { display: none !important; }

.field { display: grid; gap: 5px; }
.field--full { grid-column: 1 / -1; }
.field--checkbox { display: flex; align-items: center; gap: 8px; align-self: end; }
.field--checkbox .field__label { font-weight: 400; }

.field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.field__hint { font-size: 12px; color: var(--text-muted); }

.field__input {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 15px; /* < 16px zorgt op iOS voor inzoomen; 15px + max-width is ok */
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.field__input:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
    border-color: var(--primary);
}

textarea.field__input { resize: vertical; min-height: 80px; }

.field__input--color { width: 56px; padding: 4px; height: 40px; cursor: pointer; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    min-height: 40px; /* prettig aantikbaar op mobiel */
}

.btn:hover { background: var(--surface-2); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); }
.btn--ghost { background: transparent; border-color: var(--border); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #b91c1c; }
.btn--block { width: 100%; }
.btn--small { padding: 6px 10px; min-height: 34px; font-size: 13px; border-color: var(--border); }

.alert {
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 14px;
}

.alert--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ------------------------------------------------------------ Pagina-opmaak */

.page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 16px 48px;
}

.page--center { display: grid; place-items: center; min-height: 70vh; }
.page__head { margin-bottom: 20px; }
.page__title { font-size: 22px; margin-bottom: 4px; }
.page__lead { color: var(--text-muted); margin-bottom: 20px; }

.breadcrumb { margin-bottom: 12px; font-size: 14px; }
.breadcrumb a { text-decoration: none; }

.tabs { display: flex; gap: 4px; margin-top: 12px; border-bottom: 1px solid var(--border); }

.tabs__tab {
    padding: 8px 14px;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tabs__tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

.tabs--sub { margin-top: 4px; margin-bottom: 12px; }
.tabs--sub .tabs__tab { padding: 6px 10px; font-size: 13px; }

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 18px;
}

.panel--danger { border-color: #fecaca; }
.panel__title { font-size: 16px; margin-bottom: 6px; }
.panel__subtitle { font-size: 14px; margin-bottom: 8px; }
.panel__hint { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.panel__head .panel__title { margin-bottom: 0; }

/* Personeelsdossier: tabbladen (Info/Inwerkplan/Gesprekken). */
.dossiertabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.dossiertabs__btn {
    border: 0; background: none; padding: 10px 4px; margin-right: 20px; font-size: 14px; font-weight: 600;
    color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dossiertabs__btn:hover { color: var(--text); }
.dossiertabs__btn.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* Info-tab: locked weergave, bewerkbaar via het potlood. */
.infoview__pencil {
    border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
    width: 30px; height: 30px; cursor: pointer; font-size: 14px; color: var(--text-muted); flex-shrink: 0;
}
.infoview__pencil:hover { border-color: var(--primary); color: var(--primary); }
.infoview { display: grid; grid-template-columns: 180px 1fr; gap: 0; margin: 0; }
.infoview__row { display: contents; }
.infoview__row dt { padding: 8px 12px 8px 0; color: var(--text-muted); font-size: 13px; }
.infoview__row dd { padding: 8px 0; margin: 0; font-size: 14px; border-top: 1px solid var(--border); }
.infoview__row dt { border-top: 1px solid var(--border); }
.infoview__row:first-child dt, .infoview__row:first-child dd { border-top: 0; }
.infoview__row--full dt, .infoview__row--full dd { grid-column: 1 / -1; }
.infoview__row--full dd { white-space: pre-line; padding-top: 2px; }
.infoview__swatch { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border); vertical-align: -3px; }

.form--grid { display: grid; gap: 14px; }

.checkrow { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.checkrow--stack { flex-direction: column; gap: 8px; }

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.check input { width: 18px; height: 18px; }
.check small { display: block; color: var(--text-muted); font-size: 12px; }

/* Vinkje dat als los veld in een formulier staat (bv. in de kaart-modal). */
.check--field {
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.check--field[hidden] { display: none; }
.check--field input { margin-top: 2px; flex-shrink: 0; }

.twocol { display: grid; gap: 20px; }

.details { margin-top: 16px; font-size: 14px; }
.details summary { cursor: pointer; color: var(--text-muted); }

.plainlist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.plainlist--numbered { list-style: decimal; padding-left: 20px; }
.plainlist--tags { display: flex; flex-wrap: wrap; gap: 6px; }
.plainlist--rows { margin-top: 16px; gap: 8px; }

/* --------------------------------------------------------------- Personeel */

.staffrow {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-decoration: none;
}
.staffrow:hover { border-color: var(--primary); }
.staffrow__name { font-weight: 600; color: var(--text); }
.staffrow__date { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.staffrow__go { margin-left: auto; font-size: 13px; color: var(--primary); }

.staffcard { display: grid; gap: 4px; }
.staffcard__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--text-muted); }

.assessment {
    border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px;
}
.assessment__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.assessment__date { font-weight: 700; }
.assessment__by { font-size: 12.5px; color: var(--text-muted); }
.assessment__ratings { display: flex; flex-wrap: wrap; gap: 8px; }
.assessment__rating {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border-radius: 999px; background: var(--surface-2); font-size: 13px;
}
.assessment__stars { color: var(--amber, #b45309); letter-spacing: 1px; }
.assessment__note { font-size: 13.5px; color: var(--text); white-space: pre-wrap; }

.onboarding-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.onboarding-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.onboarding-item__check { flex: 1 1 280px; min-width: 0; }
.onboarding-item__note { flex: 1 1 220px; }

.empty {
    text-align: center;
    display: grid;
    gap: 12px;
    justify-items: center;
    padding: 40px 20px;
}

.empty__code { font-size: 40px; font-weight: 700; color: var(--text-muted); }
.empty__title { font-size: 18px; font-weight: 600; }
.empty__hint { color: var(--text-muted); font-size: 14px; }

.text-warn { color: var(--warn); }

/* ------------------------------------------------------------ Boardoverzicht */

.boardgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.boardcard {
    display: block;
    padding: 20px;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--slate);
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow);
}

.boardcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.boardcard__name { font-size: 17px; margin-bottom: 4px; }
.boardcard__desc { color: var(--text-muted); font-size: 14px; margin-bottom: 12px; }
.boardcard__go { font-size: 13px; font-weight: 600; color: var(--primary); }

.boardcard--red { border-left-color: var(--red); }
.boardcard--amber { border-left-color: var(--amber); }
.boardcard--emerald { border-left-color: var(--emerald); }
.boardcard--blue { border-left-color: var(--blue); }
.boardcard--violet { border-left-color: var(--violet); }
.boardcard--rose { border-left-color: var(--rose); }
.boardcard--indigo { border-left-color: var(--indigo); }
.boardcard--slate { border-left-color: var(--slate); }

/* --------------------------------------------------------------- Beheerlijst */

.userlist { display: grid; gap: 10px; }

.userrow {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.userrow--inactive { opacity: .65; }
.userrow__main { display: grid; gap: 8px; }
.userrow__meta { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.userrow__actions { display: flex; gap: 8px; margin-top: 10px; }

.adminlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.adminlist__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.adminlist__body { flex: 1; min-width: 0; }
.adminlist__name { font-weight: 600; text-decoration: none; color: var(--text); }
.adminlist__meta { font-size: 12px; color: var(--text-muted); }

/* ---------------------------------------------------------- Kleurstippen/tags */

.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--slate);
    flex-shrink: 0;
}

.dot--red { background: var(--red); }
.dot--amber { background: var(--amber); }
.dot--emerald { background: var(--emerald); }
.dot--blue { background: var(--blue); }
.dot--violet { background: var(--violet); }
.dot--rose { background: var(--rose); }
.dot--indigo { background: var(--indigo); }
.dot--slate { background: var(--slate); }

.tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #e2e8f0;
    color: #334155;
    white-space: nowrap;
}

.tag--red { background: #fee2e2; color: #991b1b; }
.tag--amber { background: #fef3c7; color: #92400e; }
.tag--emerald { background: #d1fae5; color: #065f46; }
.tag--blue { background: #dbeafe; color: #1e40af; }
.tag--violet { background: #ede9fe; color: #5b21b6; }
.tag--rose { background: #ffe4e6; color: #9f1239; }
.tag--slate { background: #e2e8f0; color: #334155; }

/* ====================================================== Evenementen ====== */

.page--wide { max-width: 1200px; }

/* Document met de inhoudsopgave ernaast. Op mobiel staat het lijstje boven het
   document; vanaf tablet schuift het naar links en blijft het meelopen. */
.doclayout { display: grid; gap: 16px; align-items: start; }

.doclayout__aside[hidden] { display: none; }

.toc {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.toc::-webkit-scrollbar { display: none; }
.toc__title { display: none; }

.toc__link {
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.toc__link:hover { color: var(--text); border-color: #cbd5e1; }
.toc__link.is-active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* Balk boven een editie: datums, bord openen, aanpassen. */
.editionbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.editionbar > div:first-child { flex: 1; min-width: 0; }
.editionbar__date { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.editionbar__menu summary { list-style: none; }
.editionbar__menu summary::-webkit-details-marker { display: none; }

.usermenu__panel--wide { min-width: 260px; padding: 14px; gap: 10px; }
.usermenu__panel--wide .field { margin-bottom: 2px; }

@media (min-width: 900px) {
    .doclayout { grid-template-columns: 210px 1fr; gap: 24px; }

    /* Geen inhoudsopgave (kort document): dan de volle breedte gebruiken. */
    .doclayout--single { grid-template-columns: 1fr; }

    .toc {
        position: sticky;
        top: calc(var(--topbar-total-h) + 16px);
        flex-direction: column;
        gap: 1px;
        overflow: visible;
        max-height: calc(100vh - var(--topbar-total-h) - 40px);
        overflow-y: auto;
    }

    .toc__title {
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--text-muted);
        padding: 0 10px 8px;
    }

    .toc__link {
        border: 0;
        border-left: 2px solid var(--border);
        border-radius: 0;
        background: none;
        padding: 7px 12px;
        white-space: normal;
    }

    .toc__link:hover { background: var(--surface-2); border-left-color: #cbd5e1; }

    .toc__link.is-active {
        background: none;
        color: var(--primary);
        border-left-color: var(--primary);
    }
}

.panel__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.panel__header .panel__title { flex: 1; margin-bottom: 0; }

/* Het blok waarmee je een nieuwe editie uitrolt: dit is de hoofdactie. */
.panel--action {
    border-color: #c7d2fe;
    background: linear-gradient(180deg, #f5f7ff, var(--surface) 60%);
}

.boardcard__meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* Het document zelf: lekker leesbaar, niet te breed. */
.document {
    max-width: 70ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
}

.document--compact { font-size: 14px; margin: 10px 0; }
.document p { margin: 0 0 .9em; }
.document h2 { font-size: 19px; margin: 1.4em 0 .5em; }
.document h3 { font-size: 16px; margin: 1.2em 0 .4em; }
.document ul, .document ol { margin: 0 0 .9em; padding-left: 1.4em; }
.document li { margin-bottom: .3em; }
.document blockquote {
    margin: 0 0 .9em;
    padding: 4px 0 4px 14px;
    border-left: 3px solid var(--border);
    color: var(--text-muted);
}
.document a { color: var(--primary); }
.document img { max-width: 100%; height: auto; border-radius: var(--radius); margin: .5em 0; }
.document__empty { color: var(--text-muted); font-style: italic; }

/* Tabellen in documenten. Op mobiel schuiven ze horizontaal binnen hun eigen
   kader, zodat de pagina zelf nooit scheef gaat staan. */
.document table,
.editor__area table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em;
    font-size: 14px;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.document th, .document td,
.editor__area th, .editor__area td {
    border: 1px solid var(--border);
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}

.document th,
.editor__area th {
    background: var(--surface-2);
    font-weight: 650;
}

.document tbody tr:nth-child(even),
.editor__area tbody tr:nth-child(even) { background: #fbfcfe; }

.editor__area td:focus,
.editor__area th:focus { outline: 2px solid var(--primary); outline-offset: -2px; }

.editor__area img { max-width: 100%; height: auto; border-radius: var(--radius); }

@media (min-width: 640px) {
    .document table,
    .editor__area table { display: table; white-space: normal; }
}

.editions { display: grid; gap: 10px; }

.edition {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    background: var(--surface-2);
}

.edition__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edition__head > div { flex: 1; }
.edition__name { font-size: 16px; }
.edition__date { font-size: 12px; color: var(--text-muted); }

.edition__settings {
    display: grid;
    gap: 10px;
    margin: 14px 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* --- Tekstvak met opmaakknoppen --- */

.editor {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: 12px;
}

.editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.editor__btn {
    padding: 5px 9px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    min-height: 32px;
}

.editor__btn:hover { background: #fff; border-color: var(--border); }
.editor__sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

.editor__area {
    min-height: 220px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.65;
    outline: none;
}

.editor__area:focus { box-shadow: inset 0 0 0 2px var(--primary); }
.editor__area p { margin: 0 0 .9em; }
.editor__area h2 { font-size: 19px; margin: 1.2em 0 .4em; }
.editor__area h3 { font-size: 16px; margin: 1em 0 .3em; }
.editor__area ul, .editor__area ol { padding-left: 1.4em; margin: 0 0 .9em; }

.editor__area.is-empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    font-style: italic;
    pointer-events: none;
}

/* ============================================================== Kanbanbord */

.board {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--topbar-total-h));
    height: calc(100dvh - var(--topbar-total-h));
}

/* Op de telefoon eet de onderbalk (.bottomnav) ook mee van de beschikbare
   hoogte — anders verdwijnt het laatste stukje van het board erachter. */
@media (max-width: 639px) {
    .board {
        height: calc(100vh - var(--topbar-total-h) - var(--bottomnav-total-h));
        height: calc(100dvh - var(--topbar-total-h) - var(--bottomnav-total-h));
    }
}

.board__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.board__heading { flex: 1; min-width: 0; }

.board__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
}

.board__desc {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.board__archive {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.board__archive:hover { color: var(--primary); border-color: var(--primary); }

.board__filterbtn {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.board__filterbtn:hover { color: var(--primary); border-color: var(--primary); }
.board__filterbtn.is-on { color: #fff; background: var(--primary); border-color: var(--primary); }

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--amber);
}

.status[data-state="live"] .status__dot { background: var(--ok); }
.status[data-state="offline"] .status__dot { background: var(--danger); }
.status__text { display: none; }

/* Kolommen: horizontaal scrollen met snap op mobiel. */
.board__columns {
    flex: 1;
    display: flex;
    gap: 12px;
    padding: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
}

.board__loading { color: var(--text-muted); padding: 20px; }

.column {
    display: flex;
    flex-direction: column;
    flex: 0 0 85%;
    max-width: 300px;
    max-height: 100%;
    background: #e9eef5;
    border-radius: var(--radius-lg);
    scroll-snap-align: start;
}

.column__head {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 8px 6px;
    flex-shrink: 0;
}

.column__grip {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: grab;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    touch-action: none;
    /* Duimvriendelijk tikdoel — vooral belangrijk op de telefoon, waar dit
       naast nog vier andere knopjes in dezelfde krappe kolomkop staat. */
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.column__grip:hover { background: rgba(255, 255, 255, .7); color: var(--text); }

.column--dragging {
    opacity: .6;
    cursor: grabbing;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .2);
}

.column__name {
    font-size: 14px;
    font-weight: 700;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 2px 4px;
    border-radius: 6px;
    font-family: inherit;
    color: var(--text);
}

.column__name:not(:disabled):hover { background: rgba(255, 255, 255, .6); }
.column__name:focus { outline: 2px solid var(--primary); background: #fff; }

.column__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .7);
    border-radius: 999px;
    padding: 1px 7px;
}

.column__menu {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    min-width: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.column__menu:hover { background: rgba(255, 255, 255, .7); color: var(--danger); }

/* Leesbaar teken (voor niet-beheerders): deze kolom vraagt een toelichting. */
.column__flag {
    font-size: 12px;
    color: var(--primary);
    cursor: help;
}

/* Schakelaar voor de super admin. Oplichtend als de eis aan staat. */
.column__notetoggle { color: var(--text-muted); }
.column__notetoggle:hover { background: rgba(255, 255, 255, .7); color: var(--primary); }
.column__notetoggle.is-on { color: var(--primary); }

/* Schakelaar: is dit de afgerond-kolom? Oplichtend groen als hij aan staat. */
.column__donetoggle { color: var(--text-muted); }
.column__donetoggle:hover { background: rgba(255, 255, 255, .7); color: var(--ok, #15803d); }
.column__donetoggle.is-on { color: var(--ok, #15803d); }

/* Alleen zichtbaar op de afgerond-kolom: kaarten die er nu in staan meteen
   wegleggen naar het archief — een bewuste actie, geen vaste datum. */
.column__archivebtn { color: var(--text-muted); font-size: 13px; }
.column__archivebtn:hover { background: rgba(255, 255, 255, .7); color: var(--primary); }

.column__cards {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 40px;
}

.column__cards.is-dropzone {
    background: rgba(79, 70, 229, .07);
    border-radius: var(--radius);
}

.column__add {
    margin: 0 8px 10px;
    padding: 8px;
    background: none;
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius);
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    flex-shrink: 0;
}

.column__add:hover { background: rgba(255, 255, 255, .6); color: var(--text); }

.column--new {
    flex: 0 0 200px;
    background: transparent;
    border: 1px dashed #cbd5e1;
    padding: 12px;
}

/* --------------------------------------------------------------- Kaartjes */

.card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 12px;
    cursor: grab;
    /* Scrollen blijft normaal werken; slepen begint pas na kort ingedrukt houden,
       en vanaf dat moment blokkeert de JS het scrollen zelf. */
    touch-action: manipulation;
    user-select: none;
    display: grid;
    gap: 6px;
    border-left: 3px solid transparent;
}

.card:active { cursor: grabbing; }
.card--urgent { border-left-color: var(--red); }
.card--high { border-left-color: var(--amber); }
.card--low { border-left-color: #cbd5e1; }

/* Kaart staat in de afgerond-kolom: duidelijk zichtbaar klaar, zonder de
   inhoud onleesbaar te maken. */
.card--done { background: #f1f5f9; opacity: .65; filter: grayscale(.4); }

/* Kaart wacht op iets/iemand anders — zelfde gedempte behandeling, maar los
   van de kolom: de kaart blijft op zijn eigen werkstroom-plek staan. */
.card--waiting { background: #f1f5f9; opacity: .65; filter: grayscale(.4); }

.card__labels { display: flex; flex-wrap: wrap; gap: 4px; }
.card__title { font-size: 14px; font-weight: 550; line-height: 1.35; }

.card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
}

.card__waitbtn {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1;
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: .5;
}

.card__waitbtn:hover { background: rgba(15, 23, 42, .06); opacity: 1; }
.card__waitbtn.is-on { opacity: 1; }

.card__due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--surface-2);
    font-weight: 600;
}

.card__due--soon { background: #fef3c7; color: #92400e; }
.card__due--late { background: #fee2e2; color: #991b1b; }

.card__assignee {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card__note {
    font-size: 11px;
    color: var(--text-muted);
}

/* Kaart die uit een mail is ontstaan. */
.card__mail {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 5px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 600;
}

.card__note--open {
    color: var(--warn);
    font-weight: 600;
}

/* Het mailgesprek onderin de kaart-modal. */
.thread {
    display: grid;
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.thread__item {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

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

.thread__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 4px;
}

.thread__when { color: var(--text-muted); font-size: 11px; margin-left: auto; }

.thread__body {
    font-size: 13px;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.thread__files {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

/* --- Subtaken --------------------------------------------------------- */
.subtasks {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
}

.subtask {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
}

.subtask:hover { background: var(--surface-2); }

.subtask__title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    word-break: break-word;
}

.subtask__title--done {
    text-decoration: line-through;
    color: var(--text-muted);
}

.subtask__remove {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 4px;
    opacity: 0;
}

.subtask:hover .subtask__remove { opacity: 1; }
.subtask__remove:hover { color: var(--danger); }

.subtask__edit {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0 4px;
    opacity: 0;
}

.subtask:hover .subtask__edit { opacity: 1; }
.subtask__edit:hover { color: var(--text); }

.subtask__input {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding: 2px 6px;
}

.subtasks__add,
.updates__add {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.subtasks__add .field__input { flex: 1; }
.updates__add .field__input { flex: 1; }

/* Subtaken als balkjes onder de mini-kaart: één segment per subtaak. */
.card__subbars {
    display: flex;
    gap: 3px;
    margin-top: 8px;
}

.card__subbar {
    flex: 1;
    min-width: 4px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
}

.card__subbar.is-done { background: var(--ok, #15803d); }

/* Subtaken als kleine regels met een vinkje, onder de balkjes. */
.card__subtasks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    min-width: 0;
}

.card__subtask {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 6px;
    background: var(--surface-2);
    font-size: 12px;
    color: var(--text);
    cursor: default;
    min-width: 0;
}

.card__subtask input { cursor: pointer; margin: 0; flex-shrink: 0; }

.card__subtask-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card__subtask.is-done .card__subtask-text {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Klein "+ subtaak" onderaan de kaart. */
.card__subadd { margin-top: 4px; }

.card__subadd-btn {
    background: none;
    border: 0;
    padding: 2px 4px;
    font: inherit;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
}

.card:hover .card__subadd-btn { color: var(--primary); }
.card__subadd-btn:hover { background: var(--surface-2); color: var(--primary); }

.card__subadd-input {
    width: 100%;
    padding: 4px 6px;
    font: inherit;
    font-size: 12px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: #fff;
    color: var(--text);
}

/* --- Updates ---------------------------------------------------------- */
.updates {
    display: grid;
    gap: 10px;
    max-height: 240px;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.update__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 3px;
}

.update__when { color: var(--text-muted); font-size: 11px; margin-left: auto; }

.update__body {
    font-size: 13px;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Automatisch geplaatste update (bijv. de verplichte toelichting) */
.update--system {
    border-left: 3px solid var(--primary);
    padding-left: 8px;
}

.update--system .update__body { color: var(--text-muted); font-style: italic; }

/* Kaart die opgepakt is */
.card.is-dragging { opacity: .35; }

.card--ghost {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
    transform: rotate(2deg) scale(1.02);
    cursor: grabbing;
    margin: 0;
}

.card--placeholder {
    background: rgba(79, 70, 229, .1);
    border: 1px dashed var(--primary);
    box-shadow: none;
    min-height: 40px;
}

/* ------------------------------------------------------------------ Modal */

.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(15, 23, 42, .55);
    padding: 0;
}

/* display:flex wint het van het standaard hidden-gedrag, dus expliciet uit. */
.modal[hidden] { display: none; }

.modal__panel {
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    display: grid;
    gap: 14px;
}

.modal__head { display: flex; align-items: center; gap: 12px; }
.modal__title { font-size: 17px; flex: 1; }

.modal__close {
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 4px;
}

.modal__row { display: grid; gap: 14px; }
.modal__actions { display: flex; gap: 8px; align-items: center; }
.modal__actions .btn--danger { margin-left: auto; }
.modal__error { color: var(--danger); font-size: 13px; }

.labelpicker { display: flex; flex-wrap: wrap; gap: 6px; }

.labelpicker__item {
    cursor: pointer;
    opacity: .4;
    transition: opacity .12s;
}

.labelpicker__item.is-on { opacity: 1; }
.labelpicker__item input { display: none; }

/* ------------------------------------------------------- Grotere schermen */

@media (min-width: 640px) {
    .topbar { padding: 0 16px; gap: 16px; }
    .topbar__name { display: inline; }
    .topbar__nav { display: flex; }
    .usermenu__name { display: inline; }
    .usermenu__admin-link { display: none; }
    /* Specifieker dan de basisregel (nav/tag + klasse i.p.v. alleen de klasse)
       — zo wint deze altijd, ongeacht waar in het bestand de klasse zelf staat. */
    nav.bottomnav { display: none; }
    p.djpage__lead--desktop { display: block !important; }
    a.djpage__desktop-only, button.djpage__desktop-only { display: inline-flex !important; }
    .status__text { display: inline; }

    .column { flex-basis: 290px; }

    .boardgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
    .form--grid { grid-template-columns: 1fr 1fr; }
    .twocol { grid-template-columns: 1fr 1fr; }

    .modal { align-items: center; padding: 20px; }

    .modal__panel {
        max-width: 520px;
        border-radius: var(--radius-lg);
        padding: 22px;
    }

    .modal__row--two { grid-template-columns: 1fr 1fr; }
    .board__columns { padding: 16px; gap: 14px; }
}

/* De gebruikersrij heeft vijf velden naast elkaar; onder deze breedte staan ze
   te dringen, dus daar blijven ze onder elkaar staan. */
@media (min-width: 900px) {
    .userrow { display: flex; align-items: flex-start; gap: 16px; }
    .userrow__form { flex: 1; }
    .userrow__main { grid-template-columns: 1.2fr 1.4fr 1fr .8fr auto; align-items: center; }
    .userrow__actions { margin-top: 0; flex-direction: column; }
}

@media (min-width: 1024px) {
    .board__header { padding: 14px 22px; }
}

/* --- Checklist op de mailkoppeling-pagina --- */

.checklist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }

.checklist__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
}

.checklist__mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.checklist__item.is-ok .checklist__mark { background: #d1fae5; color: #065f46; }
.checklist__item.is-todo .checklist__mark { background: #fef3c7; color: #92400e; }
.checklist__item small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }

.checklist code, .plainlist code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
}

/* Technische uitleg onder de testuitslag: mag lang zijn, moet leesbaar blijven. */
.testresult {
    font-size: 13px;
    color: var(--text-muted);
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Dagverslagen per editie --- */

.daylist { display: grid; gap: 12px; }

.day {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.day__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.day__title { font-size: 15px; }
.day__label { font-size: 12px; color: var(--text-muted); }

.block { border-top: 1px solid var(--border); }
.day .block:first-of-type { border-top: 0; }

.block__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    list-style: none;
}

.block__summary::-webkit-details-marker { display: none; }
.block__summary:hover { background: var(--surface-2); }

/* Klein driehoekje dat meedraait bij openklappen. */
.block__summary::before {
    content: '▸';
    color: var(--text-muted);
    font-size: 11px;
    transition: transform .15s ease;
}

.block[open] > .block__summary::before { transform: rotate(90deg); }

.block__part { font-weight: 600; min-width: 70px; }
.block__by { color: var(--text-muted); font-size: 13px; }
.block__empty { color: var(--text-muted); font-size: 13px; font-style: italic; }
.block.is-filled .block__part { color: var(--text); }

.block__body { padding: 4px 14px 14px; }

/* De actiepunten die uit een verslag gevist zijn. */
.points {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
}

.points__title {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 6px;
}

.points__list { margin: 0; padding-left: 18px; font-size: 13px; color: #78350f; }
.points__list li { margin-bottom: 3px; }

/* --- Tweede navigatiebalk: de onderdelen van één editie --- */

.partnav {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.partnav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex-shrink: 0;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.partnav__item:hover { color: var(--text); border-color: #cbd5e1; }

.partnav__item.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* De dagknoppen zijn smaller: dagnaam met het datumnummer eronder. */
.partnav__item--day { min-width: 52px; padding: 6px 10px; }
.partnav__item small { font-size: 11px; font-weight: 500; opacity: .7; }

.partnav__sep {
    width: 1px;
    background: var(--border);
    margin: 4px 6px;
    flex-shrink: 0;
}

/* --- Eén dag: middag- en avondverslag --- */

.dayparts { display: grid; gap: 18px; }

.daypart {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.daypart__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.daypart__title { font-size: 15px; }
.daypart__head .btn { margin-left: auto; }
.daypart__by { font-size: 13px; color: var(--text-muted); }
.daypart__empty { font-size: 13px; color: var(--text-muted); font-style: italic; }

/* Dagverslagen hebben geen inhoudsopgave: dan de hele breedte gebruiken. */
@media (min-width: 900px) {
    .doclayout--single { grid-template-columns: 1fr; }
}

/* Board dat uit het menu is gehaald: bestaat nog, maar valt niet op. */
.adminlist__item--archived { background: var(--surface-2); opacity: .8; }
.adminlist__item--archived .adminlist__name { color: var(--text-muted); }

/* --- Archief: maandoverzicht van afgeronde kaarten -------------------- */
.archive-month { margin-top: 22px; }

.archive-month__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    text-transform: capitalize;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.archive-month__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 1px 8px;
}

.archive-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.archive-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.archive-card__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.archive-card__title { font-size: 14px; font-weight: 600; }
.archive-card__desc {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-card__who {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* --- Super-admin-modus: de avatar wordt het embleem en gloeit --------- */
.avatar--sa {
    background: #1f2937;
    color: #fde047;
    animation: sa-glow 1.4s ease-in-out infinite;
}

@keyframes sa-glow {
    0%, 100% {
        box-shadow: 0 0 4px 1px rgba(253, 224, 71, .55), 0 0 10px 2px rgba(250, 204, 21, .35);
    }
    50% {
        box-shadow: 0 0 9px 3px rgba(253, 224, 71, .95), 0 0 22px 6px rgba(250, 204, 21, .6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .avatar--sa { animation: none; box-shadow: 0 0 8px 2px rgba(253, 224, 71, .7); }
}

/* Menu-acties in de gebruikers-dropdown (super-admin-modus). */
.usermenu__action {
    width: 100%;
    text-align: left;
    padding: 4px 0;
    background: none;
    border: 0;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.usermenu__action--sa { color: var(--primary); font-weight: 600; }

.usermenu__note {
    font-size: 12px;
    color: var(--warn);
    padding: 2px 0;
}

/* --- Impersonate: balk bovenin ---------------------------------------- */
.impersonate-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: #7c2d12;
    color: #ffedd5;
    font-size: 14px;
}

.impersonate-bar__note { opacity: .8; }

.impersonate-bar__stop {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #fdba74;
    background: transparent;
    color: #ffedd5;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.impersonate-bar__stop:hover { background: rgba(255, 255, 255, .15); }

/* --- Onderbalk op de telefoon (< 640px), zie app/View/partials/nav.php --- */

/* Ruimte vrijhouden onderin de pagina zodat de vaste onderbalk nooit content
   bedekt — maar alleen als die balk er ook echt is (:has, anders krijgt bijv.
   de inlogpagina zonder navigatie een onnodig gat onderin) én alleen op de
   breedte waarop hij ook getoond wordt (zie .bottomnav zelf hieronder). */
@media (max-width: 639px) {
    body:has(.bottomnav) { padding-bottom: var(--bottomnav-total-h); }
}

.bottomnav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    height: var(--bottomnav-total-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -2px 10px rgba(15, 23, 42, .15);
}

.bottomnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #94a3b8;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
}

.bottomnav__icon { width: 22px; height: 22px; }

.bottomnav__item.is-active { color: #fff; }
.bottomnav__item.is-active .bottomnav__icon { color: var(--primary); }

/* --- Impersonate: keuzelijst ------------------------------------------ */
.impersonate-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }

.impersonate-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.impersonate-list__who { display: grid; gap: 2px; }
.impersonate-list__name { font-weight: 600; }
.impersonate-list__role { font-size: 12px; color: var(--text-muted); }

/* ===================================================================
   DJ-planning
   =================================================================== */
.djpage { max-width: 1320px; margin: 0 auto; padding: 20px 16px 56px; }

.djpage__header { margin-bottom: 18px; }
.djpage__title { display: flex; align-items: center; gap: 9px; font-size: 22px; }
.djpage__lead { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

/* Op de telefoon is elke cm boven het rooster kostbaar: de uitleg-tekst en
   knoppen voor dingen die je toch niet tussendoor op je telefoon doet
   (sjablonen, bulk inplannen) staan hier verborgen en komen pas terug op
   grotere schermen. !important is hier bewust: dit is een algemene
   zichtbaarheids-knop die op willekeurige elementen (knop, link) staat, dus
   moet altijd winnen van de eigen .btn/.djbar__btn-stijl van dat element. */
.djpage__lead--desktop, .djpage__desktop-only { display: none !important; }
.djpage__loading { color: var(--text-muted); padding: 40px 0; text-align: center; }

.dot--indigo { background: var(--indigo, #6366f1); }

/* Toolbar */
.djbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.djbar__left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.djbar__filter { position: relative; }
.djbar__btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
    border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
    font-size: 13.5px; font-weight: 600; color: #334155; cursor: pointer;
}
.djbar__btn.is-on { background: #eef2ff; border-color: var(--primary); color: var(--primary); }
.djbar__menu {
    position: absolute; left: 0; top: calc(100% + 6px); min-width: 200px; max-height: 340px;
    overflow-y: auto; background: var(--surface); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 2px; z-index: 40;
}
.djbar__opt {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0;
    border-radius: 6px; background: transparent; font-size: 13.5px; color: #334155;
    cursor: pointer; text-align: left; width: 100%;
}
.djbar__opt:hover { background: var(--surface-2); }
.djbar__opt.is-on { font-weight: 700; }
.djbar__archived { color: var(--text-muted); font-weight: 400; font-size: 12px; }
.djdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.djbar__nav { display: flex; align-items: center; gap: 8px; }
.djbar__arrow {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; font-size: 15px; color: #334155;
}
.djbar__month { font-size: 14px; font-weight: 600; min-width: 150px; text-align: center; }
.djbar__today {
    padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600; color: #334155;
}

/* Kalenderkaart */
.djcal {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow); overflow: hidden;
}
.djcal--empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 14px; }
.djrow {
    display: flex; align-items: center; gap: 12px; padding: 6px 14px;
    border-bottom: 1px solid #eef2f6; background: var(--surface);
}
.djrow--thin { padding: 1px 14px; }
.djrow--today { background: #eef2ff; }
.djrow--weekend { background: #fafbfc; }
.djrow--closed { background: #fef2f2; }
.djrow--nodj { background: #fcfcfd; }
.djrow--weekbreak { border-bottom-width: 8px; border-bottom-color: var(--bg); }
.djrow--past { opacity: .5; filter: grayscale(.6); }

.djrow__date { width: 118px; flex-shrink: 0; display: flex; flex-direction: column; }
.djrow__dow { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--text-muted); }
.djrow__full { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.djrow--thin .djrow__full { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.djrow--today .djrow__full { color: #4338ca; }
.djrow--closed .djrow__full { color: #b91c1c; }
.djrow__deviate { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }

.djrow__labelcol { width: 118px; flex-shrink: 0; display: flex; align-items: center; }
.djlabel {
    display: inline-block; line-height: 1; background: var(--border); color: #334155;
    font-weight: 600; font-size: 11px; padding: 4px 9px; border-radius: 999px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.djrow--thin .djlabel { font-size: 9.5px; padding: 0 5px; }
.djlabel--closed { background: #fee2e2; color: #b91c1c; font-weight: 700; }
.djlabel--muted { background: transparent; color: var(--text-muted); font-weight: 600; padding-left: 0; }
.djlabel--edit { cursor: pointer; }
.djlabel--edit:hover { filter: brightness(1.06); }

.djlabel__add {
    width: 22px; height: 22px; border-radius: 999px; border: 1px dashed #cbd5e1;
    background: transparent; color: #94a3b8; font-size: 13px; line-height: 1;
    cursor: pointer; flex-shrink: 0;
}
.djlabel__add:hover { border-color: var(--primary); color: var(--primary); }

.djrow__single { display: flex; align-items: center; gap: 12px; }
.djrow__time { width: 90px; font-size: 13px; color: #334155; }
.djrow__time.is-dim { opacity: .35; }

.djrow__slots { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.djpill {
    display: inline-flex; align-items: center; background: var(--slate); color: #fff;
    font-size: 12.5px; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15,23,42,.18);
}
.djpill.is-dim { opacity: .25; }
.djpill__time { opacity: .85; margin-left: 6px; }
.djpill--empty { background: #fff7ed; border: 1px dashed var(--amber); color: #92400e; box-shadow: none; }

/* DJ-planning: bewerken */
.djpill--edit { cursor: pointer; }
.djpill--edit:hover { filter: brightness(1.06); }

/* DJ-planning: de pil zelf is de "ik kan"-knop voor een gekoppelde DJ op een
   open dienst — geen aparte knop ernaast nodig. */
.djpill--iamin { cursor: pointer; }
.djpill--iamin:hover { border-color: var(--primary); color: var(--primary); }
.djpill--iamin.is-on {
    background: #dcfce7; border-color: #16a34a; border-style: solid; color: #15803d; font-weight: 600;
}
.djpill--iamin.is-busy { opacity: .5; pointer-events: none; }

.djrow__add {
    width: 26px; height: 26px; border-radius: 8px; border: 1px dashed #cbd5e1;
    background: transparent; color: #94a3b8; font-size: 14px; line-height: 1;
    cursor: pointer; flex-shrink: 0;
}
.djrow__add:hover { border-color: var(--primary); color: var(--primary); }

.djmodal {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
    justify-content: center; background: rgba(15, 23, 42, .55);
}
.djmodal__panel {
    width: 380px; max-width: 92vw; max-height: 90vh; overflow-y: auto;
    background: var(--surface); border-radius: 14px; padding: 20px; display: grid; gap: 14px;
}
.djmodal__head { display: flex; align-items: center; gap: 12px; }
.djmodal__head h2 { flex: 1; font-size: 17px; }
.djmodal__close { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.djmodal__date { font-size: 13px; color: var(--text-muted); }
.djmodal__field { display: grid; gap: 5px; min-width: 0; }
.djmodal__field span { font-size: 13px; font-weight: 600; }
.djmodal__field input {
    width: 100%; padding: 10px 12px; font-size: 15px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
/* minmax(0, 1fr) i.p.v. 1fr: anders mag een grid-kolom nooit kleiner worden
   dan de intrinsieke breedte van zijn inhoud (bijv. een date/time-input), en
   dat is op smalle schermen precies wat een modal breder maakt dan het scherm. */
.djmodal__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.djmodal__checkbox { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.djmodal__weekdays { display: flex; flex-wrap: wrap; gap: 6px; }
.djmodal__weekday {
    display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.djmodal__weekday:has(input:checked) { border-color: var(--primary); color: var(--primary); background: var(--surface-2); }
.djmodal__error { color: var(--danger); font-size: 13px; }
.djmodal__actions { display: flex; gap: 8px; align-items: center; }
.djmodal__actions .btn--danger { margin-left: auto; }

.djmodal__select {
    width: 100%; padding: 10px 12px; font-size: 15px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}

/* DJ: link in de evenementen-dropdown + oude-evenementen-pagina */
.djbar__opt--link { color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--border); border-radius: 0; }
.djbar__opt--link:hover { background: var(--surface-2); }

.oldevents { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.oldevents__item {
    display: flex; align-items: baseline; gap: 12px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-decoration: none;
}
.oldevents__item:hover { border-color: var(--primary); }
.oldevents__name { font-weight: 600; color: var(--text); }
.oldevents__range { font-size: 13px; color: var(--text-muted); }
.oldevents__go { margin-left: auto; font-size: 13px; color: var(--primary); }

/* DJ: banner om een lege editie te vullen met vorig jaar se tijden */
.djtemplate {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; margin-bottom: 12px; border-radius: 12px;
    background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; font-size: 14px;
}
.djtemplate__btn { flex-shrink: 0; }

/* DJ-sjabloonpagina: dagen met hun voorgedefinieerde diensten */
.dj-template-days { display: grid; gap: 18px; }
.dj-template-day { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.dj-template-day__title { font-size: 15px; margin-bottom: 8px; }
.dj-template-day__empty { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }

.dj-template-slots { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.dj-template-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.dj-template-slot__form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dj-template-slot__form--add { margin-top: 4px; }

.dj-template-slot__close {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; color: var(--text-muted); white-space: nowrap;
}

.field__input--time { width: 100px; padding: 6px 8px; }

.field--inline { display: flex; align-items: center; gap: 8px; }

/* DJ-beschikbaarheid op open diensten */
.djslot { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

.djslot__interested { display: flex; gap: 4px; flex-wrap: wrap; }
.djslot__interestedchip {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 11px; padding: 3px 4px 3px 8px; border-radius: 999px;
    background: #eef2ff; color: #3730a3; line-height: 1.4;
}
.djslot__interestedname { border: 0; background: none; font: inherit; color: inherit; padding: 0; }
button.djslot__interestedname { cursor: pointer; }
button.djslot__interestedname:hover { text-decoration: underline; }
.djslot__interestedremove {
    border: 0; background: none; font: inherit; color: #6366f1; cursor: pointer;
    padding: 0 3px; line-height: 1; border-radius: 999px;
}
.djslot__interestedremove:hover { background: #c7d2fe; color: #312e81; }
.djslot__interestedremove:disabled { opacity: .5; cursor: default; }

.djslot__noteadd { display: flex; }
.djslot__noteselect {
    font-size: 11px; padding: 3px 6px; border-radius: 999px;
    border: 1px dashed #94a3b8; background: transparent; color: #64748b; max-width: 140px;
}
.djslot__noteselect:hover { border-color: var(--primary); color: var(--primary); }

/* DJ-planning op smalle telefoons: de vaste kolombreedtes van datum en label
   (118px + 118px) laten dan geen ruimte meer over voor de diensten zelf —
   die werden zonder deze regel stilletjes afgekapt. Datum/label krijgen hun
   eigen regel, de diensten verhuizen naar een volle regel eronder. */
@media (max-width: 480px) {
    .djrow { flex-wrap: wrap; }
    /* Dag-afkorting (ZA) en datum naast elkaar i.p.v. boven elkaar — scheelt
       een hele regel hoogte per dag, dus meer dagen zichtbaar tegelijk. */
    .djrow__date { width: auto; flex-direction: row; align-items: baseline; gap: 5px; }
    .djrow__labelcol { width: auto; }
    .djrow__slots, .djrow__single { flex-basis: 100%; }
}

/* ==========================================================================
   Rooster: het voorplannen van diensten. Zelfde ontwerptaal als de
   DJ-planning (kleur per persoon, gestippelde open-pillen).
   ========================================================================== */

.roosterpage { max-width: 1320px; margin: 0 auto; padding: 20px 16px 56px; }
.roosterpage__header { margin-bottom: 18px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.roosterpage__title { display: flex; align-items: center; gap: 9px; font-size: 22px; flex-basis: 100%; }
.roosterpage__lead { color: var(--text-muted); font-size: 14px; }
.roosterpage__lead--desktop, .roosterpage__desktop-only { display: none !important; }
.roosterpage__loading { color: var(--text-muted); padding: 40px 0; text-align: center; }
.roosterpage__colors { margin-top: 24px; }

@media (min-width: 860px) {
    .roosterpage__lead--desktop { display: block !important; }
    a.roosterpage__desktop-only { display: inline-flex !important; margin-left: auto; }
}

.roosterbar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 10px; margin-bottom: 14px;
}
.roosterbar__nav { display: flex; align-items: center; gap: 8px; }
.roosterbar__arrow {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; font-size: 15px; color: var(--text);
}
.roosterbar__arrow:hover { border-color: var(--primary); color: var(--primary); }
.roosterbar__label { font-size: 14px; font-weight: 600; min-width: 150px; text-align: center; }
.roosterbar__today {
    border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
    padding: 5px 10px; font-size: 13px; cursor: pointer;
}
.roosterbar__today:hover { border-color: var(--primary); color: var(--primary); }
.roosterbar__actions { display: flex; gap: 8px; }

/* Maandoverzicht: alleen op desktop — op de telefoon blijft de weekweergave. */
.roosterbar__viewtoggle { display: none; }
@media (min-width: 860px) {
    .roosterbar__viewtoggle { display: inline-flex; gap: 4px; }
}
.roosterbar__viewbtn {
    border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
    padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--text);
}
.roosterbar__viewbtn.is-on { background: #eef2ff; border-color: var(--primary); color: var(--primary); }

.roosterbar__filters { display: flex; align-items: center; gap: 8px; }
.roosterbar__filterwrap { position: relative; }
.roosterbar__btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
    padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--text);
}
.roosterbar__btn.is-on { background: #eef2ff; border-color: var(--primary); color: var(--primary); }
.roosterbar__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.roosterbar__menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 190px; max-height: 320px;
    overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 6px;
}
.roosterbar__menuopt {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    border: 0; background: none; padding: 7px 8px; border-radius: 6px; font-size: 13.5px;
    cursor: pointer; color: var(--text);
}
.roosterbar__menuopt:hover { background: var(--surface-2); }
.roosterbar__menuopt.is-on { font-weight: 700; }
.roosterbar__menulabel {
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--text-muted); padding: 8px 8px 4px; border-top: 1px solid var(--border); margin-top: 4px;
}

.roosterpill--dim { opacity: .3; }

.roostergrid {
    display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px;
    overflow-x: auto; padding-bottom: 4px;
}
.roosterday {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 150px;
}
.roosterday--today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
/* Vaste hoogte (twee eigen regels, dow/datum en opmerking), nooit afhankelijk
   van of de tekst toevallig wel of niet doorloopt naar een nieuwe regel —
   anders schuift een hele kolom omhoog/omlaag t.o.v. de rest van de week. */
.roosterday__head { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.roosterday__toprow { display: flex; align-items: baseline; gap: 6px; }
.roosterday__toprow strong { font-size: 13px; }
.roosterday__toprow span { color: var(--text-muted); }
.roosterday__note {
    display: block; border: 0; background: none; padding: 0; font-size: 11.5px; color: var(--text);
    cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; text-align: left;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4;
}
.roosterday__note--empty { color: var(--text-muted); text-decoration: none; opacity: 0; transition: opacity .1s; }
.roosterday__head:hover .roosterday__note--empty, .roosterday__note--empty:focus { opacity: 1; }

.roosterpart__label { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.roosterpart__shifts { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }

/* Elke dienst is een eigen blok (kader), niet enkel een lijntje — de
   gekleurde pil zit daar met een klein randje binnenin, als een lijstje van
   vakjes. Precies dezelfde hoogte voor elk vakje is wat zorgt dat de blokken
   over de hele week uitlijnen (zie renderGrid() in rooster.js). */
.roosterslot {
    display: flex; align-items: stretch; height: 34px; padding: 3px; overflow: hidden;
    border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; background: var(--surface-2);
}
.roosterslot--filler { border-style: dashed; background: transparent; opacity: .45; }

.roosterslot .roosterpill { width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; }

.roosterpill {
    display: inline-flex; align-items: center; gap: 5px; background: var(--slate); color: #fff;
    font-size: 12.5px; padding: 6px 9px; border-radius: 6px; border: 0; cursor: pointer;
    box-shadow: 0 1px 2px rgba(15,23,42,.18); max-width: 100%; min-height: 28px; box-sizing: border-box;
}
.roosterpill:hover { filter: brightness(1.06); }
.roosterpill__time { opacity: .85; margin-left: 2px; }
.roosterpill__note { margin-left: 2px; opacity: .85; }
.roosterpill--manager { box-shadow: 0 0 0 2px var(--amber), 0 1px 2px rgba(15,23,42,.18); }
.roosterpill__star { font-size: 11px; }
.roosterpill--noted { text-decoration: underline dotted; text-underline-offset: 3px; }
.roosterpill--empty { background: #fff7ed; border: 1px dashed var(--amber); color: #92400e; box-shadow: none; }
.roosterpill--openmanager { background: #fffbeb; border: 1px dashed #d97706; color: #92400e; box-shadow: none; font-weight: 600; }

.roosterpart__add {
    width: 26px; height: 26px; border-radius: 8px; border: 1px dashed var(--border);
    background: transparent; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1;
    align-self: flex-start; margin-top: 6px; flex-shrink: 0;
}
.roosterpart__add:hover { border-color: var(--primary); color: var(--primary); }

.roosterpill--sm { padding: 3px 7px; font-size: 11.5px; border-radius: 6px; cursor: default; }

/* Maandoverzicht: één rij per dag, puur ter overzicht — klik gaat naar die week. */
.roostermonth { display: flex; flex-direction: column; gap: 6px; }
.roostermonthrow {
    display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); cursor: pointer; font: inherit; color: inherit;
}
.roostermonthrow:hover { border-color: var(--primary); }
.roostermonthrow--today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.roostermonthrow__date { width: 84px; flex-shrink: 0; display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.roostermonthrow__date span { color: var(--text-muted); }
.roostermonthrow__parts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.roostermonthrow__part { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.roostermonthrow__partlabel {
    width: 54px; flex-shrink: 0; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--text-muted);
}
.roostermonthrow__none { font-size: 12.5px; color: var(--text-muted); }

.roostervacations {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px;
    font-size: 13px; color: var(--text-muted);
}
.roostervacations__label { display: flex; align-items: center; gap: 6px; }
.roostervacations__none { font-style: italic; }
.roostervacations__chip {
    display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2);
    border-radius: 999px; padding: 4px 6px 4px 10px; color: var(--text);
}
.roostervacations__remove { border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: 14px; padding: 0 4px; }
.roostervacations__remove:hover { color: var(--danger); }
.roostervacations__add {
    border: 1px dashed var(--border); background: transparent; border-radius: 999px;
    padding: 4px 10px; font-size: 12.5px; color: var(--text-muted); cursor: pointer;
}
.roostervacations__add:hover { border-color: var(--primary); color: var(--primary); }

.roostermodal {
    position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex;
    align-items: center; justify-content: center; padding: 16px; z-index: 60;
}
.roostermodal__panel {
    background: var(--surface); border-radius: 14px; padding: 20px; width: 100%; max-width: 380px;
    display: grid; gap: 14px; max-height: 90vh; overflow-y: auto;
}
.roostermodal__head { display: flex; align-items: center; gap: 12px; }
.roostermodal__head h2 { flex: 1; font-size: 17px; }
.roostermodal__close { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--text-muted); }
.roostermodal__date { font-size: 13px; color: var(--text-muted); }
.roostermodal__field { display: grid; gap: 5px; min-width: 0; }
.roostermodal__field span { font-size: 13px; font-weight: 600; }
.roostermodal__field input, .roostermodal__field select {
    width: 100%; padding: 10px 12px; font-size: 15px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.roostermodal__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.roostermodal__checkbox { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.roostermodal__error { color: var(--danger); font-size: 13px; }
.roostermodal__actions { display: flex; gap: 8px; align-items: center; }
.roostermodal__actions .btn--danger { margin-left: auto; }

/* Vaste-diensten-beheer: eenvoudige lijst per medewerker. */
.fixedshift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fixedshift {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px;
}
.fixedshift__main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fixedshift__note { color: var(--text-muted); font-size: 13px; }

/* Mobiele weekweergave (zie docs-bronnen/inbox/design_handoff_rooster_mobiel):
   dagen horizontaal naast elkaar met scroll-snap i.p.v. de desktop-grid.
   Zelfde breakpoint als de onderbalk (.bottomnav), zodat "mobiel" overal
   hetzelfde betekent. Lettergrootte/kolombreedte/rijhoogte komen uit
   rooster.js (computeMobileFit) als CSS-variabelen op .roostergrid. */
@media (max-width: 639px) {
    /* Top wat strakker: minder lucht boven/onder de titel en de werkbalk. */
    .roosterpage { padding: 12px 12px 40px; }
    .roosterpage__header { margin-bottom: 10px; }
    .roosterpage__title { font-size: 19px; }
    .roosterbar { margin-bottom: 10px; gap: 8px; }

    /* Filterknop: vierkant icoon i.p.v. de tekstknop op desktop, met een
       gekleurd bolletje als er een filter actief is. */
    .roosterbar__filterwrap--mobile { position: relative; margin-left: auto; }
    .roosterbar__filterbtn {
        position: relative; display: inline-flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface);
        border-radius: 8px; cursor: pointer; color: var(--text); padding: 0;
    }
    .roosterbar__filterbtn.is-on { background: #eef2ff; border-color: var(--primary); color: var(--primary); }
    .roosterbar__filterdot {
        position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
        border: 1.5px solid var(--bg);
    }
    .roosterbar__menudot {
        width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid var(--amber);
        display: inline-block; flex-shrink: 0; background: transparent;
    }
    .roosterbar__menudot--primary { border-color: var(--primary); }
    .roosterbar__menuopt--onlyopen.is-on { background: #fff7ed; color: #92400e; }
    .roosterbar__menuopt--onlyopen.is-on .roosterbar__menudot { background: var(--amber); }
    .roosterbar__menudivider { height: 1px; background: var(--border); margin: 5px 2px; }

    .roostermonthrow { flex-direction: column; gap: 6px; }
    .roostermonthrow__date { width: auto; }

    /* --------------------------------------------------------- rooster-sheet
       Optie 3a uit docs-bronnen/inbox/design_handoff_rooster_mobiel_v2: alle
       7 dagen tegelijk als raster, zoals het team dat in Google Sheets gewend
       is. Waarden hieronder komen 1-op-1 uit dat ontwerp. */

    .roosterbar--zoom { margin-bottom: 10px; gap: 6px; }
    .roosterbar__zoompct { margin-left: auto; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .roostersheet__fillbtn { display: block; width: 100%; margin-bottom: 10px; }

    .roostersheet {
        flex: 0 1 auto; max-height: 100%; margin: 0 0 12px; background: #fff;
        border: 1px solid #e2e8f0; border-radius: 12px; overflow: auto;
        touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
    }
    .roostersheet__zoom {
        transform-origin: 0 0; width: 354px; padding: 8px 8px 10px; box-sizing: border-box;
    }

    .roostersheet__head {
        display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
        padding: 0 0 5px; border-bottom: 1px solid #cbd5e1;
    }
    .roostersheet__headcell {
        text-align: center; line-height: 1.1; box-shadow: inset -1px 0 0 #eef2f6;
        display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 1px;
    }
    .roostersheet__headcell span {
        font-size: 9px; font-weight: 700; color: #0f172a; text-transform: uppercase; letter-spacing: .02em;
    }
    .roostersheet__headcell--today span { color: #4f46e5; }
    .roostersheet__notebtn {
        border: 0; background: none; padding: 0; line-height: 1; font-size: 7px; color: #cbd5e1; cursor: pointer;
    }
    .roostersheet__notebtn--set { color: var(--amber); }

    .roostersheet__label {
        font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
        color: #64748b; padding: 6px 0 3px;
    }
    .roostersheet__divider { height: 1px; background: #cbd5e1; margin: 6px 0 0; }

    .roostersheet__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; border-top: 1px solid #eef2f6; }
    .roostersheet__grid--chips { gap: 2px; border-top: 0; }
    .roostersheet__cell { height: 16px; padding: 1px; box-sizing: border-box; box-shadow: inset -1px 0 0 #eef2f6, inset 0 -1px 0 #f5f8fa; }

    .roostersheet__pill {
        height: 100%; width: 100%; border: 0; border-radius: 2px; color: #fff; font-size: 8.5px; font-weight: 600;
        line-height: 15px; padding: 0 3px; overflow: hidden; white-space: nowrap; text-align: left;
        box-shadow: 0 1px 2px rgba(15,23,42,.14); cursor: pointer;
    }
    .roostersheet__pill--dim { opacity: .3; }
    .roostersheet__pill--manager { box-shadow: 0 0 0 2px var(--amber), 0 1px 2px rgba(15,23,42,.14); }
    .roostersheet__open {
        height: 100%; width: 100%; border-radius: 2px; background: #fff7ed; border: 1px dashed #f59e0b;
        color: #92400e; font-size: 8px; line-height: 12px; padding: 0 3px; overflow: hidden; white-space: nowrap;
        box-sizing: border-box; cursor: pointer;
    }

    .roostersheet__grid--chips .roostersheet__cell { height: 17px; padding: 0; box-shadow: none; }
    .roostersheet__chip {
        height: 17px; border-radius: 5px; color: #fff; font-size: 9.5px; font-weight: 700;
        line-height: 17px; text-align: center;
    }
    .roostersheet__chip--short { background: #f43f5e; }
    .roostersheet__chip--good { background: #10b981; }
    .roostersheet__chip--neutral { background: #64748b; }

    /* --------------------------------------------------- "dienst bewerken"-sheet */
    .sheetpreview {
        position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end;
        justify-content: center; background: rgba(15, 23, 42, .35);
    }
    .sheetpreview__panel {
        width: 100%; max-width: 480px; background: #fff; border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 30px rgba(15,23,42,.2); padding: 14px 16px 40px;
    }
    .sheetpreview__handle { width: 38px; height: 4px; border-radius: 2px; background: #e2e8f0; margin: 0 auto 14px; }
    .sheetpreview__who { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 2px; }
    .sheetpreview__date { font-size: 13px; color: #64748b; margin: 0 0 12px; }
    .sheetpreview__times { display: flex; gap: 8px; margin-bottom: 10px; }
    .sheetpreview__timebox { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; }
    .sheetpreview__timelabel { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #64748b; letter-spacing: .04em; }
    .sheetpreview__timevalue { display: block; font-size: 14px; font-weight: 600; color: #0f172a; }
    .sheetpreview__note { font-size: 13px; color: #64748b; margin: 0 0 12px; }
    .sheetpreview__actions { display: flex; gap: 8px; }
    .sheetpreview__actions .btn { flex: 1; }
}