/* Aanvullingen op bootstrap_ext.css (gymtracker/omgangslog-basis) voor het Quality Portaal */

/* ---------- Quality-huisstijl ----------
   Kleuren en lettertypen van quality.comtron.nl: navy #0F3E69, teal #2CA4BC, lichte tint #E2F1FF; koppen Ubuntu,
   tekst Montserrat. bootstrap_ext.css blijft gelijk aan omgangslog; het blauw daaruit wordt hieronder overschreven. */
:root {
    --merk-navy: #0f3e69;
    --merk-navy-700: #14507f;
    --merk-navy-900: #0a2e4f;
    --merk-teal: #2ca4bc;
    --merk-teal-600: #1f8a9f;
    --merk-tint: #e2f1ff;
    --merk-tint-zacht: #f3f8ff;
    --merk-inkt: #15212e;
    --merk-inkt-zacht: #46586b;
    --merk-lijn: #e3e9f0;
    --merk-schaduw: 0 4px 24px rgba(15, 62, 105, 0.08);
    --merk-font-kop: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
    --merk-font-tekst: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Rollen: tekst/actief in navy, hover en actieve vlakken in de lichte tint, accenten in teal */
    --merk-primair: var(--merk-navy);
    --merk-licht: var(--merk-tint-zacht);
    --merk-actief: var(--merk-tint);

    --bs-primary: #0f3e69;
    --bs-primary-rgb: 15, 62, 105;
    --bs-primary-text-emphasis: #0a2e4f;
    --bs-primary-bg-subtle: #e2f1ff;
    --bs-primary-border-subtle: #b9d6ee;
    --bs-link-color: #0f3e69;
    --bs-link-color-rgb: 15, 62, 105;
    --bs-link-hover-color: #1f8a9f;
    --bs-link-hover-color-rgb: 31, 138, 159;
    --bs-body-font-family: var(--merk-font-tekst);
    --bs-body-color: #15212e;
    --bs-body-color-rgb: 21, 33, 46;
    --bs-border-color: #e3e9f0;
    --bs-focus-ring-color: rgba(44, 164, 188, 0.3);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-title, .navbar-brand { font-family: var(--merk-font-kop); }
h1, h2, h3, .h1, .h2, .h3 { color: var(--merk-navy); letter-spacing: -0.01em; }
.page-title { font-size: 1.6rem; font-weight: 700; color: var(--merk-navy); letter-spacing: -0.01em; }

/* Knoppen: navy (teal als vlak haalt het contrast met witte tekst niet), pilvorm zoals op de website */
.btn { --bs-btn-border-radius: 999px; --bs-btn-font-family: var(--merk-font-kop); --bs-btn-font-weight: 500; --bs-btn-focus-shadow-rgb: 44, 164, 188; }
.btn-sm { --bs-btn-border-radius: 999px; }
.input-group > .btn, .btn-group > .btn { --bs-btn-border-radius: var(--bs-border-radius); }
.btn-primary {
    --bs-btn-bg: var(--merk-navy); --bs-btn-border-color: var(--merk-navy);
    --bs-btn-hover-bg: var(--merk-navy-700); --bs-btn-hover-border-color: var(--merk-navy-700);
    --bs-btn-active-bg: var(--merk-navy-900); --bs-btn-active-border-color: var(--merk-navy-900);
    --bs-btn-disabled-bg: var(--merk-navy); --bs-btn-disabled-border-color: var(--merk-navy);
}
.btn-outline-primary {
    --bs-btn-color: var(--merk-navy); --bs-btn-border-color: var(--merk-navy);
    --bs-btn-hover-bg: var(--merk-navy); --bs-btn-hover-border-color: var(--merk-navy);
    --bs-btn-active-bg: var(--merk-navy-900); --bs-btn-active-border-color: var(--merk-navy-900);
    --bs-btn-disabled-color: var(--merk-navy); --bs-btn-disabled-border-color: var(--merk-navy);
}
.btn-link { --bs-btn-color: var(--merk-navy); --bs-btn-hover-color: var(--merk-teal-600); }

/* Formulieren: focus in teal */
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--merk-teal); box-shadow: 0 0 0 0.25rem rgba(44, 164, 188, 0.25); }
.form-check-input:checked { background-color: var(--merk-navy); border-color: var(--merk-navy); }
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%232ca4bc'/%3e%3c/svg%3e");
}
.pagination { --bs-pagination-color: var(--merk-navy); --bs-pagination-hover-color: var(--merk-navy); --bs-pagination-active-bg: var(--merk-navy);
    --bs-pagination-active-border-color: var(--merk-navy); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(44, 164, 188, 0.25); }
.pagination .page-link { color: var(--merk-navy); }
.pagination .active .page-link { background-color: var(--merk-navy); border-color: var(--merk-navy); color: #fff; }
.nav-tabs .nav-link.active { color: var(--merk-navy); }

/* Menubalk: wit met een dunne lijn, zoals de header van de website */
.app-navbar { background: #fff; box-shadow: 0 1px 0 var(--merk-lijn), 0 4px 16px rgba(15, 62, 105, 0.05); }
.app-brand, .app-brand:hover { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--merk-navy); }
.app-brand-logo { height: 28px; width: auto; display: block; }
.app-brand-onderdeel { padding-left: 0.6rem; border-left: 1px solid var(--merk-lijn); font-weight: 500; font-size: 1rem; color: var(--merk-teal-600); }
.app-nav .nav-link { font-family: var(--merk-font-kop); font-weight: 500; }
.app-nav .nav-link:hover, .app-nav .nav-link:focus, .app-nav .nav-link.show { color: var(--merk-navy); background-color: var(--merk-tint-zacht); }
.app-nav .nav-link.active { color: var(--merk-navy); background-color: var(--merk-tint); }
.app-navbar .dropdown-item:hover, .app-navbar .dropdown-item:hover .mdi { background-color: var(--merk-tint-zacht); color: var(--merk-navy); }
.app-notifications-link:hover, .app-notifications-link:focus, .app-notifications-link.active { color: var(--merk-navy); background-color: var(--merk-tint); }
.app-notifications-count { border-color: #fff; }
.app-avatar-initials { background: var(--merk-tint); color: var(--merk-navy); }
.pull-refresh-ready { color: var(--merk-navy); }
@media (max-width: 991.98px) {
    /* Ubuntu is smaller dan Montserrat: 'Dashboard' en 'Opnames' lopen anders tegen elkaar aan */
    .app-tabbar { border-color: var(--merk-lijn); box-shadow: 0 4px 16px rgba(15, 62, 105, 0.1); font-family: var(--merk-font-kop); }
    .app-tabbar-item.active, .app-tabbar-item.show { color: var(--merk-navy); background-color: var(--merk-tint); }
}
.app-tabbar .dropdown-item:hover, .app-tabbar .dropdown-item:hover .mdi { background-color: var(--merk-tint-zacht); color: var(--merk-navy); }

/* Tabbalk ook in de geïnstalleerde desktop-app (PWA): zelfde dock als op mobiel, maar smal en gecentreerd
   i.p.v. edge-to-edge (bootstrap_ext.css toont hem anders alleen onder 992px, zie includes/tab_bar.html) */
@media (min-width: 992px) {
    html.pwa-standalone .app-tabbar {
        display: flex;
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 16px;
        transform: translateX(-50%);
        z-index: 1030;
        width: auto;
        padding: 5px;
        border: 1px solid var(--merk-lijn);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 4px 16px rgba(15, 62, 105, 0.1);
        font-family: var(--merk-font-kop);
    }
    html.pwa-standalone .app-tabbar > .app-tabbar-item,
    html.pwa-standalone .app-tabbar-nieuw {
        flex: 0 0 auto;
        min-width: 0;
    }
    html.pwa-standalone .app-tabbar-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.45rem;
        width: auto;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 999px;
        background: none;
        color: #495057;
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color 0.15s ease, color 0.15s ease;
    }
    html.pwa-standalone .app-tabbar-item .mdi::before {
        font-size: 18px;
        line-height: 18px;
    }
    html.pwa-standalone .app-tabbar-item:hover {
        background-color: var(--merk-tint-zacht);
        color: var(--merk-navy);
    }
    html.pwa-standalone .app-tabbar-item.active,
    html.pwa-standalone .app-tabbar-item.show {
        color: var(--merk-navy);
        background-color: var(--merk-tint);
    }
    /* Ruimte onder de footer, zodat het zwevende dock niets afdekt */
    html.pwa-standalone .app-body-tabbar {
        padding-bottom: 70px;
    }
}
.app-footer { border-top-color: var(--merk-lijn); }
.app-footer a:hover { color: var(--merk-teal-600); }
.app-footer-logo { height: 18px; width: 18px; display: block; }

/* Kaartjes en tegels */
.card { --bs-card-border-color: var(--merk-lijn); --bs-card-border-radius: 12px; }
.card-entry { border-color: var(--merk-lijn); }
.card-entry:hover { background-color: var(--merk-tint-zacht); border-color: rgba(44, 164, 188, 0.45); box-shadow: 0 2px 10px rgba(15, 62, 105, 0.08); }
.card-entry:focus-visible { outline: 2px solid var(--merk-teal); }
.card-entry-icon { background: var(--merk-tint); color: var(--merk-navy); }
.card-entry:hover .card-entry-chevron { color: var(--merk-teal-600); }
.stat-tile { border-left-color: var(--accent-color, var(--merk-teal)); }
.stat-tile-icon { background: var(--merk-tint); color: var(--accent-color, var(--merk-navy)); }
.stat-tile-value { font-family: var(--merk-font-kop); color: var(--merk-navy); }
.soft-ui .stat-tile { box-shadow: var(--merk-schaduw); }
a.stat-tile:hover { box-shadow: 0 10px 30px rgba(15, 62, 105, 0.14); }

/* Inloggen */
.auth-icon { background: var(--merk-tint); color: var(--merk-navy); }
.auth-logo { height: 44px; width: auto; margin: 0 auto 1.25rem; display: block; }
.auth-provider-btn:hover { background-color: var(--merk-tint-zacht); border-color: var(--merk-teal); color: var(--merk-navy); box-shadow: 0 2px 8px rgba(15, 62, 105, 0.1); }
.auth-provider-icon { color: var(--merk-navy); }

.card-entry-icon.icon-danger, .stat-tile-icon.icon-danger { background: rgba(198, 40, 40, 0.1); color: #c62828; }
.card-entry-icon.icon-success, .stat-tile-icon.icon-success { background: rgba(46, 125, 50, 0.12); color: #2e7d32; }
.card-entry-icon.type-vakantie { background: rgba(245, 124, 0, 0.12); color: #ef6c00; }
.card-entry-icon.type-verzoek, .card-entry-icon.type-contactmoment { background: #f3f5f8; color: #6c757d; }
.card-entry-icon.icon-warning, .stat-tile-icon.icon-warning { background: #fdf3d7; color: #9a6b00; }
.card-entry-meta > span.card-entry-meta-warning,
.card-entry-meta > span.card-entry-meta-warning i { background: #fdf3d7; color: #9a6b00; }
.card-entry-meta > span.card-entry-meta-success,
.card-entry-meta > span.card-entry-meta-success i { background: rgba(46, 125, 50, 0.1); color: #2e7d32; }
.card-entry-meta > span.card-entry-meta-danger,
.card-entry-meta > span.card-entry-meta-danger i { background: rgba(198, 40, 40, 0.08); color: #c62828; }

/* Meldingencentrum: ongelezen vet met een blauwe stip */
.melding-ongelezen .card-entry-header { font-weight: 600; }
.melding-ongelezen .card-entry-icon { position: relative; }
.melding-ongelezen .card-entry-icon::after { content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--merk-teal); border: 2px solid #fff; }
.card-entry-meta > span.melding-nieuw { background: var(--merk-licht); color: var(--merk-primair); font-weight: 600; }

.tekst-blok { white-space: normal; overflow-wrap: anywhere; }
/* Markdown in tekstvelden (core/markdown.py) */
.tekst-blok > :last-child, .bewijs-viewer-omschrijving > :last-child { margin-bottom: 0; }
.tekst-blok p, .tekst-blok ul, .tekst-blok ol, .tekst-blok pre, .tekst-blok table, .tekst-blok blockquote { margin-bottom: 0.6rem; }
.tekst-blok ul, .tekst-blok ol, .bewijs-viewer-omschrijving ul, .bewijs-viewer-omschrijving ol { padding-left: 1.4rem; }
.tekst-blok h1, .tekst-blok h2, .tekst-blok h3, .tekst-blok h4, .tekst-blok h5, .tekst-blok h6 { font-size: 1rem; font-weight: 600; margin: 0.8rem 0 0.3rem; }
.tekst-blok h1, .tekst-blok h2 { font-size: 1.1rem; }
.tekst-blok blockquote, .bewijs-viewer-omschrijving blockquote { border-left: 3px solid #dee2e6; padding-left: 0.75rem; color: #6c757d; }
.tekst-blok pre { background: #f3f5f8; border-radius: 6px; padding: 0.5rem 0.75rem; white-space: pre-wrap; }
.tekst-blok table { border-collapse: collapse; } .tekst-blok th, .tekst-blok td { border: 1px solid #dee2e6; padding: 0.25rem 0.5rem; }
.bewijs-viewer-omschrijving p { margin-bottom: 0.3rem; }
code.hash { font-size: 0.72rem; color: #495057; }

/* Mobiel: tegels twee naast elkaar, datums in kaartjes mogen afbreken */
.soft-ui .dashboard-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
/* Klikbare tegels: geen linkopmaak, wel een rustige hover */
a.stat-tile { color: inherit; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; }
a.stat-tile:hover { color: inherit; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12); transform: translateY(-1px); }
@media (min-width: 1200px) { .soft-ui .dashboard-tiles { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) {
    .soft-ui .stat-tile { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.85rem; }
    .soft-ui .stat-tile-icon { width: 34px; height: 34px; font-size: 0.9rem; }
    .soft-ui .stat-tile-value { font-size: 1.2rem; }
}
.card-entry-header.wrap { white-space: normal; }

/* Dashboard: 'Vandaag' (hero) en 'Deze week' (tegels), CLAUDE.md §3.2 */
.dash-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem; }
.dash-datum { color: var(--merk-inkt-zacht); font-size: 0.95rem; }
.dash-datum::first-letter { text-transform: uppercase; }
.dash-hero { margin-bottom: 0.25rem; }
.dash-vandaag-card { box-shadow: var(--merk-schaduw); }
.dash-vandaag-sub + .dash-vandaag-sub { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--merk-lijn); }
.dash-vandaag-sub-titel { display: flex; align-items: center; gap: 0.4rem; font-family: var(--merk-font-kop);
    font-weight: 600; font-size: 0.95rem; color: var(--merk-navy); margin-bottom: 0.6rem; }
.dash-week-tiles { display: flex; flex-direction: column; gap: 0.75rem; }
.dash-week-tiles .stat-tile { width: 100%; }
.dash-modules { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.dash-module-blok { background: #fff; border: 1px solid var(--merk-lijn); border-radius: 12px; padding: 1rem; }
.dash-module-blok .card { border: none; box-shadow: none; background: transparent; margin-bottom: 0 !important; }
.dash-module-blok .card-body { padding: 0; }
.dash-module-blok .dashboard-tiles:last-child { margin-bottom: 0 !important; }
@media (min-width: 992px) { .dash-modules { grid-template-columns: repeat(2, 1fr); } }

/* Changelog */
.changelog { max-width: 760px; }
.changelog-categorie { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; margin: 0 0 0.4rem; }
.changelog-items { padding-left: 1.2rem; margin-bottom: 1rem; }
.changelog-items:last-child { margin-bottom: 0; }
.changelog-items li + li { margin-top: 0.25rem; }

/* Trek-om-te-verversen: knop vult zich in de merkkleur zodra loslaten ververst, zodat het goed opvalt */
.pull-refresh.pull-refresh-ready, .pull-refresh.pull-refresh-loading { background: var(--merk-primair); color: #fff; }

/* Submenu's in de menubalk: actief item in de lichte merktint in plaats van het standaard vlak */
.app-navbar .dropdown-item.active, .app-navbar .dropdown-item:active { background: var(--merk-licht); color: var(--merk-primair); }
.app-navbar .dropdown-item.active .mdi { color: var(--merk-primair); }
.afwijking-menu .form-select { min-width: 0; }


/* Dashboard */
.widget-titel { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6c757d; margin-bottom: 0.4rem; }
.module-kaart { display: flex; align-items: center; gap: 0.75rem; }

/* Mappenboom (zijpaneel en mappenpagina) */
.mappenboom { list-style: none; padding-left: 0; margin: 0; }
.mappenboom .mappenboom { padding-left: 0.85rem; margin-left: 0.7rem; border-left: 1px solid #e3e9f1; }
.mappenboom li:not(.open):not(.filter-open) > .mappenboom { display: none; }
.mapboom-rij { display: flex; align-items: flex-start; gap: 0.1rem; border-radius: 6px; min-height: 32px; }
.mapboom-rij:hover { background: var(--merk-licht); }
.mapboom-rij.actief { background: var(--merk-actief); }
.mapboom-rij.actief a { color: var(--merk-primair); font-weight: 600; }
/* Lange namen lopen door op een volgende regel in plaats van af te breken met … */
.mapboom-rij a { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 0.4rem; padding: 0.3rem 0.3rem; color: #222; text-decoration: none; line-height: 1.3; }
.mapboom-naam { min-width: 0; overflow-wrap: anywhere; }
.mapboom-rij > .mapboom-toggle, .mapboom-rij > .sorteer-greep { margin-top: 0.3rem; }
.mapboom-extra { color: #adb5bd; font-size: 0.85rem; }
.mapboom-rij .mdi::before { top: 0; }
.mapboom-toggle { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 4px; background: none; color: #6c757d; }
button.mapboom-toggle:hover { background: rgba(0, 0, 0, 0.06); }
button.mapboom-toggle .mdi { transition: transform 0.15s; }
li.open > .mapboom-rij > button.mapboom-toggle .mdi, li.filter-open > .mapboom-rij > button.mapboom-toggle .mdi { transform: rotate(90deg); }
li.filter-treffer > .mapboom-rij .mapboom-naam { background: #fdf3d7; border-radius: 3px; }
.mapboom-inbox { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.4rem; margin-bottom: 0.5rem; border-radius: 6px; color: #222; text-decoration: none; }
.mapboom-inbox:hover, .mapboom-inbox.active { background: var(--merk-licht); color: var(--merk-primair); }
.mappen-sectie + .mappen-sectie { margin-top: 0.9rem; }
.mappen-sectie-titel { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; margin: 0 0 0.25rem 0.3rem; }
.mappen-az { font-size: 0.75rem; text-transform: none; letter-spacing: 0; text-decoration: none; }
.mappen-leeg { font-size: 0.85rem; color: #6c757d; margin: 0 0 0 0.3rem; }

/* Slepen: greep alleen bij hover (muis), op touch altijd zichtbaar */
.sorteer-greep { flex: 0 0 auto; display: inline-flex; align-items: center; color: #adb5bd; cursor: grab; padding: 0 0.15rem; touch-action: none; }
.sorteer-greep:hover { color: #495057; }
@media (hover: hover) {
    .mapboom-rij .sorteer-greep, .card-entry .sorteer-greep { visibility: hidden; }
    .mapboom-rij:hover .sorteer-greep, .card-entry:hover .sorteer-greep { visibility: visible; }
}
.sorteer-schaduw { opacity: 0.4; }
.card-entry .sorteer-greep { margin-left: -0.4rem; margin-right: 0.1rem; }

/* Zijpaneel: vast naast de pagina vanaf lg, daaronder een uitschuifpaneel (Bootstrap offcanvas-lg) */
.app-shell { flex: 1 0 auto; }
.mappen-zijpaneel-inhoud { width: 100%; }
.mappen-zijpaneel-kop { display: flex; gap: 0.35rem; margin-bottom: 0.6rem; }
.app-mappen-knop { border: 0; background: none; }
@media (min-width: 992px) {
    .app-shell { display: flex; align-items: flex-start; }
    .app-shell > .app-main { flex: 1 1 auto; min-width: 0; }
    .mappen-zijpaneel { position: sticky; top: var(--app-navbar-h, 64px); flex: 0 0 300px; width: 300px;
        height: calc(100vh - var(--app-navbar-h, 64px)); overflow-y: auto; padding: 1.25rem 0.75rem 2rem;
        border-right: 1px solid var(--merk-lijn); background: var(--merk-tint-zacht); }
    html.zijpaneel-dicht .mappen-zijpaneel { display: none; }
    .app-mappen-knop { display: none; }
    html.zijpaneel-dicht .app-mappen-knop { display: inline-flex; }
}
@media (max-width: 991.98px) {
    .mappen-zijpaneel { --bs-offcanvas-width: min(320px, 85vw); }
    .mappen-zijpaneel .offcanvas-body { padding-top: 0; }
}
/* Assistent: eerdere gesprekken in een zijmenu (vast vanaf lg, daaronder een uitschuifpaneel) */
.assistent-zijmenu-kop { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--merk-inkt-zacht); padding: 0 0.6rem; margin: 0.9rem 0 0.2rem; }
.assistent-zijmenu-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 0.5rem;
    color: var(--merk-inkt); text-decoration: none; font-size: 0.875rem; }
.assistent-zijmenu-item:hover { background: var(--merk-licht); color: var(--merk-inkt); }
.assistent-zijmenu-item.actief { background: var(--merk-actief); color: var(--merk-primair); font-weight: 500; }
.assistent-zijmenu-titel { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistent-zijmenu-aantal { flex: 0 0 auto; font-size: 0.7rem; line-height: 1; padding: 0.2rem 0.4rem; border-radius: 999px;
    background: var(--merk-lijn); color: var(--merk-inkt-zacht); }
.assistent-zijmenu-zoek { position: relative; }
.assistent-zijmenu-zoek .mdi { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--merk-inkt-zacht); }
.assistent-zijmenu-zoek .form-control { padding-left: 1.9rem; }
.voorstel-argumenten { display: grid; grid-template-columns: max-content 1fr; gap: 0 0.75rem; }
.voorstel-argumenten dt { font-weight: 500; color: var(--merk-inkt-zacht); }
.voorstel-argumenten dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 992px) {
    .assistent-zijmenu { position: sticky; top: calc(var(--app-navbar-h, 64px) + 1rem);
        max-height: calc(100vh - var(--app-navbar-h, 64px) - 2rem); overflow-y: auto; }
}
.map-niveau { font-size: 0.68rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: #f3f5f8; color: #6c757d; }
.map-kleur { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.breadcrumb-mappen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; font-size: 0.85rem; }
.breadcrumb-mappen a { text-decoration: none; }
.breadcrumb-mappen .mdi-chevron-right { color: #adb5bd; }

/* Sprekers en transcript */
.spreker-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 500; background: #f3f5f8; }
.spreker-chip .stip { width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.zekerheid-automatisch { background: rgba(46, 125, 50, 0.12); color: #2e7d32; }
.zekerheid-suggestie { background: #fdf3d7; color: #9a6b00; }
.zekerheid-handmatig { background: var(--merk-licht); color: var(--merk-primair); }
.transcript { max-height: 70vh; overflow-y: auto; }
.transcript-segment { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid #f1f3f5; }
.transcript-segment .tijd { font-family: var(--bs-font-monospace); font-size: 0.75rem; color: #6c757d; cursor: pointer; }
.transcript-segment .wie { font-weight: 600; font-size: 0.85rem; }
.status-balk { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.status-balk span { font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #f3f5f8; color: #adb5bd; }
.status-balk span.klaar { background: rgba(46, 125, 50, 0.1); color: #2e7d32; }
.status-balk span.bezig { background: var(--merk-licht); color: var(--merk-primair); }
.status-balk span.fout { background: rgba(198, 40, 40, 0.08); color: #c62828; }
.opdracht-blok { white-space: pre-wrap; font-size: 0.85rem; background: #f3f5f8; border-radius: 8px; padding: 0.75rem; }
.min-w-0 { min-width: 0; }
.titel-bewerkbaar { cursor: text; border-radius: 6px; margin-left: -0.25rem; padding: 0 0.25rem; }
.titel-bewerkbaar:hover, .titel-bewerkbaar:focus-visible { background: var(--merk-licht); outline: none; }
.titel-form .form-control { font-size: 1.6rem; font-weight: 600; padding: 0 0.25rem; margin-left: -0.25rem; max-width: 40rem; }
.opname-tabs .nav-link { color: #6c757d; }
.opname-tabs .nav-link.active { color: var(--merk-primair); font-weight: 500; }
/* Veel verslagen: tabs op één regel en horizontaal scrollen in plaats van een rommelige tweede rij */
.opname-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.opname-tabs .nav-link { white-space: nowrap; }
.verslag-blok { max-width: 900px; }
.verslag-blok.met-zijkant { max-width: 1260px; }
/* Verslag met de actiepunten rechts ernaast zodra er ruimte is (ook met het mappenzijpaneel open), anders eronder */
.verslag-kolommen-houder { container-type: inline-size; }
@container (min-width: 860px) {
    .verslag-kolommen.met-zijkant { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.25rem; align-items: start; }
    .verslag-kolommen.met-zijkant > .verslag-zijkant { position: sticky; top: calc(var(--app-navbar-h, 64px) + 1rem);
        max-height: calc(100vh - var(--app-navbar-h, 64px) - 2rem); overflow-y: auto; }
}
/* Bewerken door erin te klikken (static/js/markdown_editor.js): verslagen, taken */
.md-bewerkbaar { cursor: text; min-height: 4rem; border-radius: 6px; outline: none; transition: box-shadow 0.15s; }
.md-bewerkbaar:hover { box-shadow: 0 0 0 1px #dee2e6; }
.md-bewerkbaar:focus { box-shadow: 0 0 0 2px var(--merk-licht), 0 0 0 3px var(--merk-primair); }
h1.titel-bewerkbaar[contenteditable]:focus { background: var(--merk-licht); outline: none; }
.md-status { min-height: 1.25rem; }
/* Takenlijst (- [ ] / - [x], core/markdown.py): vakje getekend met CSS; afvinken in de editor */
.tekst-blok li.taak { list-style: none; position: relative; }
.tekst-blok li.taak::before { content: ""; position: absolute; left: -1.45rem; top: 0.22em; width: 1.05em; height: 1.05em; border: 1.5px solid #adb5bd; border-radius: 4px; background: #fff; }
.tekst-blok li.taak-klaar::before { content: "\2713"; color: #fff; background: var(--merk-primair); border-color: var(--merk-primair); font-size: 0.85em; font-weight: 700; line-height: 1.05em; text-align: center; width: 1.25em; height: 1.25em; }
.tekst-blok li.taak-klaar { color: #6c757d; }
.tekst-blok li.taak-klaar > ul, .tekst-blok li.taak-klaar > ol { color: var(--bs-body-color); }
.md-bewerkbaar li.taak::before { cursor: pointer; }
.tekst-blok li.taak + li.taak { margin-top: 0.15rem; }
.card-entry.active { background: var(--merk-licht); }

/* Map-inhoud: onderdelen (bijv. verslagen) onder hun item (de opname) */
.map-item-onderdelen { list-style: none; margin: -0.25rem 0 0.5rem 3.4rem; padding: 0 0 0 0.75rem; border-left: 2px solid #e3e9f1; }
.map-item-onderdelen li + li { margin-top: 0.15rem; }
.map-item-onderdelen a { display: inline-flex; align-items: baseline; gap: 0.3rem; font-size: 0.88rem; text-decoration: none; overflow-wrap: anywhere; }
.map-item-rij { display: flex; align-items: center; gap: 0.5rem; }
.map-item-rij > .card-entry { flex: 1 1 auto; min-width: 0; }
.map-item:not(:last-child) .map-item-rij > .card-entry, .map-item:has(.map-item-onderdelen) .map-item-rij > .card-entry { margin-bottom: 0.6rem; }
.map-item-onderdelen.met-vak { margin-left: 5.5rem; }

/* Selecteren in een map (templates/portaal/_inhoud.html, static/js/selectie.js): vakje voor elk item en een zwevende balk */
.selectie-vak { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 1.6rem; align-self: stretch; cursor: pointer; margin: 0; }
.selectie-vak input { width: 1.1rem; height: 1.1rem; accent-color: var(--merk-primair); cursor: pointer; }
.map-item-rij.gekozen > .card-entry { background: var(--merk-licht); border-color: rgba(44, 164, 188, 0.45); }
.selectie-balk { position: fixed; z-index: 1035; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; max-width: calc(100vw - 24px); padding: 0.5rem 0.75rem;
    background: #fff; border: 1px solid #e3e9f1; border-radius: 14px; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.14); }
.selectie-balk[hidden] { display: none; }
.selectie-aantal { font-size: 0.9rem; white-space: nowrap; }
.selectie-knoppen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
body.selectie-actief { padding-bottom: 5rem; }
@media (max-width: 991.98px) {
    /* Boven de tabbalk */
    .selectie-balk { left: 12px; right: 12px; transform: none; max-width: none; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
    body.selectie-actief { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

/* Mapkiezer: venster om een object met zoeken in een map te zetten (templates/portaal/_mapkiezer.html) */
.map-knop { border: 0; background: none; padding: 0.05rem 0.4rem; margin-left: -0.1rem; border-radius: 6px; color: var(--merk-primair); }
.map-knop:hover, .map-knop:focus-visible { background: var(--merk-licht); outline: none; }
.mapkiezer-sectie + .mapkiezer-sectie { margin-top: 0.6rem; }
.mapkiezer-kop { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; margin: 0.25rem 0.5rem; }
.mapkiezer-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; border: 0; background: none; border-radius: 6px;
    padding: 0.45rem 0.5rem 0.45rem calc(0.5rem + var(--diepte, 0) * 1.1rem); color: #222; min-height: 40px; }
.mapkiezer-item:hover, .mapkiezer-item:focus-visible { background: var(--merk-licht); outline: none; }
.mapkiezer-item.huidig { color: var(--merk-primair); font-weight: 600; opacity: 1; }
.mapkiezer-naam { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }  /* hele naam leesbaar, desnoods op twee regels */
.mapkiezer-pad { display: none; font-size: 0.75rem; color: #6c757d; font-weight: 400; overflow-wrap: anywhere; }
.mapkiezer-vink { margin-left: auto; }
/* Bij zoeken en in 'Recent': niet inspringen maar het pad tonen, zodat gelijknamige submappen te onderscheiden zijn */
.filteren .mapkiezer-item, .mapkiezer-recent-item { padding-left: 0.5rem; }
.filteren .mapkiezer-pad, .mapkiezer-recent-item .mapkiezer-pad { display: block; }
/* Submap maken vanuit de mapkiezer: knop naast elke map, en een balk zolang je een naam typt */
.mapkiezer-rij { display: flex; align-items: center; gap: 0.15rem; }
.mapkiezer-rij > .mapkiezer-item { flex: 1 1 auto; min-width: 0; }
.mapkiezer-plus { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 6px; background: none; color: #adb5bd; }
.mapkiezer-plus:hover, .mapkiezer-plus:focus-visible { background: var(--merk-licht); color: var(--merk-primair); outline: none; }
@media (hover: hover) {
    .mapkiezer-rij .mapkiezer-plus { visibility: hidden; }
    .mapkiezer-rij:hover .mapkiezer-plus, .mapkiezer-plus:focus-visible { visibility: visible; }
}
.mapkiezer-submap-modus { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border-radius: 6px;
    background: var(--merk-licht); color: var(--merk-primair); font-size: 0.9rem; }
.mapkiezer.submap-modus .modal-body .mapkiezer-sectie, .mapkiezer.submap-modus [data-mapkiezer-geen] { display: none; }

/* Module Taken (static/js/taken.js): rijen met een rond vakje in de kleur van de prioriteit, zoals Todoist */
:root { --prio-1: #d1453b; --prio-2: #eb8909; --prio-3: #246fe0; --prio-4: #adb5bd; }
.taken-nav { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 0.25rem; }
.taken-nav-item { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; padding: 0.3rem 0.7rem; border-radius: 999px;
    color: #495057; text-decoration: none; font-size: 0.9rem; }
.taken-nav-item:hover { background: var(--merk-licht); color: var(--merk-primair); }
.taken-nav-item.actief { background: var(--merk-licht); color: var(--merk-primair); font-weight: 600; }
.taken-teller { font-size: 0.72rem; min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: #e9ecef; color: #495057; text-align: center; }
.taken-teller.te-laat { background: rgba(198, 40, 40, 0.12); color: #c62828; }
.taken-kop { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 600; font-size: 0.95rem;
    padding: 0.6rem 0 0.35rem; border-bottom: 1px solid #e9ecef; margin-bottom: 0.15rem; }
.taken-kop form { margin: 0; }
.taken-leeg { color: #6c757d; font-size: 0.9rem; margin: 0.5rem 0 0.75rem; }
.taken-lijst[data-sorteerbaar] { min-height: 0.5rem; }
.taak-rij { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid #f1f3f5; transition: opacity 0.3s; }
.taak-rij:hover { background: #fafcfe; }
.taak-rij.bezig-afronden { opacity: 0.35; }
.taak-rij .sorteer-greep { margin-top: 0.1rem; margin-left: -0.35rem; }
@media (hover: hover) { .taak-rij .sorteer-greep { visibility: hidden; } .taak-rij:hover .sorteer-greep { visibility: visible; } }
.taak-vak { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; border-radius: 50%; border: 2px solid var(--prio-4);
    background: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: transparent; font-size: 0.8rem; }
.taak-vak.groot { width: 1.6rem; height: 1.6rem; margin-top: 0.3rem; font-size: 1rem; }
.taak-vak:hover, .taak-vak:focus-visible { color: var(--prio-4); outline: none; }
.prio-1 > .taak-vak, .taak-vak.prio-1 { border-color: var(--prio-1); background: rgba(209, 69, 59, 0.08); }
.prio-2 > .taak-vak, .taak-vak.prio-2 { border-color: var(--prio-2); background: rgba(235, 137, 9, 0.08); }
.prio-3 > .taak-vak, .taak-vak.prio-3 { border-color: var(--prio-3); background: rgba(36, 111, 224, 0.08); }
.prio-1 > .taak-vak:hover { color: var(--prio-1); } .prio-2 > .taak-vak:hover { color: var(--prio-2); } .prio-3 > .taak-vak:hover { color: var(--prio-3); }
.taak-rij.afgerond .taak-vak, .taak-vak.klaar { background: #adb5bd; border-color: #adb5bd; color: #fff; }
.taak-rij.afgerond .taak-titel { text-decoration: line-through; color: #6c757d; }
.taak-rij-link { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.taak-rij-link:hover { color: inherit; }
.taak-titel { overflow-wrap: anywhere; line-height: 1.35; }
.taak-omschrijving { font-size: 0.8rem; color: #6c757d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taak-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.75rem; font-size: 0.78rem; color: #6c757d; margin-top: 0.1rem; }
.taak-meta:empty { display: none; }
.taak-project { display: inline-flex; align-items: center; gap: 0.25rem; }
.deadline-te-laat { color: #d1453b; } .deadline-vandaag { color: #058527; } .deadline-morgen { color: #ad6200; } .deadline-week { color: #692fc2; }
/* Snel toevoegen */
.snel-toevoegen { margin-bottom: 0.75rem; }
.snel-regel { display: flex; align-items: center; gap: 0.4rem; border: 1px solid #dee2e6; border-radius: 10px; padding: 0.3rem 0.35rem 0.3rem 0.6rem; background: #fff; }
.snel-regel:focus-within { border-color: var(--merk-primair); box-shadow: 0 0 0 3px var(--merk-licht); }
.snel-plus { color: var(--merk-primair); }
.snel-veld { position: relative; flex: 1 1 auto; min-width: 0; }
/* Invoer en markeerlaag moeten exact dezelfde tekstmaten hebben, anders verschuiven de markeringen */
.snel-invoer, .snel-markering { font: inherit; font-size: 1rem; line-height: 1.5; letter-spacing: normal; padding: 0.25rem 0; }
.snel-invoer { position: relative; width: 100%; border: 0; outline: none; background: transparent; }
.snel-markering { position: absolute; inset: 0; white-space: pre; overflow: hidden; color: transparent; pointer-events: none; }
.snel-markering mark { color: transparent; padding: 0; border-radius: 3px; background: var(--merk-licht); box-shadow: 0 0 0 2px var(--merk-licht); }
.snel-markering mark.hl-datum, .snel-markering mark.hl-tijd { background: rgba(5, 133, 39, 0.16); box-shadow: 0 0 0 2px rgba(5, 133, 39, 0.16); }
.snel-markering mark.hl-herhaling { background: rgba(105, 47, 194, 0.15); box-shadow: 0 0 0 2px rgba(105, 47, 194, 0.15); }
.snel-markering mark.hl-prioriteit { background: rgba(209, 69, 59, 0.15); box-shadow: 0 0 0 2px rgba(209, 69, 59, 0.15); }
.snel-markering mark.hl-project, .snel-markering mark.hl-sectie, .snel-markering mark.hl-toegewezen { background: var(--merk-actief);
    box-shadow: 0 0 0 2px var(--merk-actief); }
/* Keuzelijst bij # (projecten en secties), / (secties) en + (collega's) */
.snel-keuzes { position: absolute; z-index: 1060; top: calc(100% + 0.4rem); left: 0; width: min(22rem, 85vw); max-height: 18rem; overflow-y: auto;
    padding: 0.25rem; background: #fff; border: 1px solid #e3e9f1; border-radius: 10px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.16); }
.snel-keuze { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem 0.5rem; border: 0; border-radius: 6px; background: none;
    text-align: left; color: #222; font-size: 0.9rem; }
.snel-keuze.actief, .snel-keuze:hover { background: var(--merk-licht); }
.snel-keuze .sub { color: #6c757d; font-size: 0.78rem; margin-left: auto; padding-left: 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.snel-keuze.sectie { padding-left: 1.6rem; }
.snel-toevoegen.compact { margin: 0.25rem 0 0.5rem; }
.snel-toevoegen.compact .snel-regel { border-color: transparent; background: transparent; }
.snel-toevoegen.compact .snel-regel:focus-within { border-color: #dee2e6; background: #fff; box-shadow: none; }
.snel-toevoegen.compact .snel-knop { display: none; }
.snel-toevoegen.compact .snel-regel:focus-within .snel-knop { display: inline-block; }
.snel-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.snel-chips:empty { display: none; }
.snel-chip { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.78rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: #f3f5f8; color: #495057; }
.snel-chip.chip-datum, .snel-chip.chip-tijd { background: rgba(5, 133, 39, 0.1); color: #058527; }
.snel-chip.chip-prioriteit { background: rgba(209, 69, 59, 0.1); color: #d1453b; }
.snel-chip.chip-herhaling { background: rgba(105, 47, 194, 0.1); color: #692fc2; }
.snel-chip.chip-project, .snel-chip.chip-sectie { background: var(--merk-licht); color: var(--merk-primair); }
/* Secties en projecten */
.taken-sectie { margin-top: 0.75rem; }
.sectie-kop { justify-content: flex-start; }
.sectie-kop .sorteer-greep { margin-left: -0.35rem; }
@media (hover: hover) { .sectie-kop .sorteer-greep { visibility: hidden; } .sectie-kop:hover .sorteer-greep { visibility: visible; } }
.sectie-nieuw { display: flex; gap: 0.4rem; max-width: 26rem; margin: 1rem 0; }
/* Bord: secties als kolommen naast elkaar, horizontaal scrollen; taken als kaartjes */
.taken-secties-lijst > .taken-geen-sectie { margin-top: 0; }
.taken-bord { display: flex; gap: 0.75rem; align-items: flex-start; overflow-x: auto; padding-bottom: 0.75rem; scroll-snap-type: x proximity; }
.taken-bord > [data-secties] { display: flex; gap: 0.75rem; align-items: flex-start; }
.taken-bord .taken-sectie { flex: 0 0 280px; width: 280px; margin-top: 0; padding: 0.15rem 0.5rem 0.5rem; border-radius: 10px;
    background: #f4f6f9; scroll-snap-align: start; }
.taken-bord .taken-kop { border-bottom: 0; padding-top: 0.45rem; }
.taken-bord .taken-lijst { min-height: 2.5rem; }
.taken-bord .taak-rij { background: #fff; border: 1px solid #e3e9f1; border-radius: 8px; margin-bottom: 0.4rem; padding: 0.55rem 0.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.taken-bord .taak-rij:hover { background: #fff; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.1); }
.taken-bord .taak-omschrijving { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.taken-bord .snel-toevoegen.compact { margin-bottom: 0; }
.taken-bord .sectie-nieuw { flex: 0 0 240px; flex-direction: column; margin: 0; padding: 0.5rem; border-radius: 10px; border: 1px dashed #d0d7e2; }
@media (max-width: 575.98px) { .taken-bord .taken-sectie { flex-basis: 82vw; width: 82vw; } }
.kleur-keuze { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #dee2e6; padding: 0; }
.kleur-keuze.gekozen { box-shadow: 0 0 0 2px #212529; }
/* Zijpaneel en detail */
.taak-paneel { --bs-offcanvas-width: min(560px, 100vw); }
.taak-detail-titel { font-size: 1.25rem; font-weight: 600; margin: 0.2rem 0 0.4rem; overflow-wrap: anywhere; }
h2.titel-bewerkbaar[contenteditable]:focus { background: var(--merk-licht); outline: none; }
.taak-omschrijving-editor { min-height: 2.5rem; padding: 0.35rem 0.5rem; margin: 0 -0.5rem 0.25rem; }
.taak-omschrijving-editor:empty::before { content: attr(data-placeholder); color: #adb5bd; }
.taak-eigenschappen { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6rem 0.75rem; margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid #e9ecef; }
.taak-eigenschappen dt { font-weight: 500; font-size: 0.85rem; color: #6c757d; padding-top: 0.25rem; }
.taak-eigenschappen dd { margin: 0; min-width: 0; }
@media (max-width: 400px) { .taak-eigenschappen { grid-template-columns: 1fr; gap: 0.2rem; } .taak-eigenschappen dd { margin-bottom: 0.5rem; } }
.prio-knop.prio-1.active { background: var(--prio-1); border-color: var(--prio-1); }
.prio-knop.prio-2.active { background: var(--prio-2); border-color: var(--prio-2); }
.prio-knop.prio-3.active { background: var(--prio-3); border-color: var(--prio-3); }
.taak-pagina { max-width: 760px; }
.taken-toast { position: fixed; left: 50%; bottom: calc(5rem + env(safe-area-inset-bottom)); transform: translate(-50%, 1rem); z-index: 1080;
    display: flex; align-items: center; gap: 0.5rem; max-width: calc(100vw - 2rem); padding: 0.45rem 0.6rem 0.45rem 1rem; border-radius: 8px;
    background: #212529; color: #fff; font-size: 0.9rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.taken-toast.zichtbaar { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.taken-toast .btn-link { color: #8ab4f8; text-decoration: none; font-weight: 600; }
/* Actiepunten uit een verslag (gesprekken) */
.actiepunt-rij { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid #f1f3f5; }
.actiepunt-rij:last-child { border-bottom: 0; }
.actiepunt-rij input[type=checkbox] { margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; accent-color: var(--merk-primair); }
.actiepunt-titel { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 4px; padding: 0.1rem 0.3rem; margin-left: -0.3rem; background: transparent; }
.actiepunt-titel:hover, .actiepunt-titel:focus { background: var(--merk-licht); outline: none; }

/* Portaalbeheer: zijbalk met de beheerpagina's (vanaf lg links naast de inhoud), daaronder een rij die horizontaal scrollt */
.beheer-zijbalk { display: flex; gap: 0.35rem; overflow-x: auto; margin: 0 -0.25rem 1rem; padding: 0 0.25rem 0.35rem; scrollbar-width: thin; }
.beheer-groep { display: contents; }
.beheer-groep-naam { display: none; }
.beheer-link { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; padding: 0.4rem 0.75rem; border-radius: 0.5rem;
    white-space: nowrap; font-size: 0.9rem; color: #344054; text-decoration: none; background: #f3f5f8; }
.beheer-link .mdi { font-size: 1.1rem; color: #6c757d; }
.beheer-link:hover { background: var(--merk-licht); color: var(--merk-primair); }
.beheer-link.active { background: var(--merk-licht); color: var(--merk-primair); font-weight: 600; }
.beheer-link.active .mdi, .beheer-link:hover .mdi { color: var(--merk-primair); }
.beheer-inhoud { min-width: 0; }
@media (min-width: 992px) {
    .beheer-layout { display: flex; align-items: flex-start; gap: 2rem; }
    .beheer-zijbalk { flex: 0 0 230px; flex-direction: column; gap: 0; overflow: visible; margin: 0; padding: 0;
        position: sticky; top: calc(var(--app-navbar-h, 64px) + 1rem); }
    .beheer-groep { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 1rem; }
    .beheer-groep-naam { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
        color: #6c757d; padding: 0 0.75rem; margin-bottom: 0.2rem; }
    .beheer-link { background: none; white-space: normal; }
    .beheer-inhoud { flex: 1 1 auto; }
}

/* Kostengrafiek in beheer (portaal/beheer/kosten.html): gestapelde staven per periode. Vaste kleur per integratie
   (gevalideerd op kleurenblindheid tegen wit); 2px gat tussen segmenten, afgeronde bovenkant, rustige hulplijnen. */
.kosten-grafiek { --kg-hoogte: 200px; --kg-as: 3.75rem; }
.kg-plot { position: relative; height: var(--kg-hoogte); margin: 0.75rem 0 0 var(--kg-as); }
.kg-lijn { position: absolute; left: 0; right: 0; border-top: 1px solid #ecebe6; }
.kg-lijn.kg-basis { border-top-color: #c3c2b7; }
.kg-lijn span { position: absolute; right: 100%; top: 0; transform: translateY(-50%); padding-right: 0.5rem; font-size: 0.7rem;
    color: #6c757d; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kg-staven { position: absolute; inset: 0; display: flex; }
.kg-kolom { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; border-radius: 4px 4px 0 0;
    outline: none; cursor: default; }
.kg-kolom:hover, .kg-kolom:focus-visible { background: var(--merk-licht); }
.kg-staaf { width: min(24px, 65%); min-height: 2px; display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; }
.kg-staaf > div { flex-basis: 0; min-height: 1px; }
.kg-x { display: flex; margin-left: var(--kg-as); padding-top: 0.3rem; }
.kg-x > span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 0.7rem; color: #6c757d; white-space: nowrap; }
.kg-x > span:last-child { font-weight: 600; color: #495057; }
@media (max-width: 575.98px) { .kg-x > span.kg-smal-verbergen { visibility: hidden; } }
.kg-legenda { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.6rem 0 0 var(--kg-as); font-size: 0.78rem; color: #495057; }
.kg-legenda span, .kg-tip-rij span:first-child { display: inline-flex; align-items: center; gap: 0.4rem; }
.kg-staal { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.kg-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5; min-width: 11rem;
    padding: 0.5rem 0.65rem; background: #fff; border-radius: 0.5rem; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14); font-size: 0.75rem;
    color: #212529; pointer-events: none; white-space: nowrap; }
.kg-tip-links .kg-tip { left: 0; transform: none; }
.kg-tip-rechts .kg-tip { left: auto; right: 0; transform: none; }
.kg-kolom:hover .kg-tip, .kg-kolom:focus-visible .kg-tip { display: block; }
.kg-tip-rij { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.kg-tip-totaal { border-top: 1px solid #ecebe6; margin-top: 0.25rem; padding-top: 0.25rem; font-weight: 600; }
.kg-reeks-1 { background: #2a78d6; } .kg-reeks-2 { background: #eb6834; } .kg-reeks-3 { background: #1baf7a; }
.kg-reeks-4 { background: #eda100; } .kg-reeks-5 { background: #e87ba4; } .kg-reeks-6 { background: #008300; }
.kg-reeks-7 { background: #4a3aa7; } .kg-reeks-8 { background: #e34948; } .kg-reeks-0 { background: #898781; }
@media (forced-colors: active) { .kg-staaf > div, .kg-staal { forced-color-adjust: none; } }

/* Agenda (M365): weekraster zoals Outlook */
.agenda-balk { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.agenda-titel { font-family: Ubuntu, sans-serif; font-weight: 500; font-size: 1.1rem; }
.agenda-raster { border: 1px solid #dee2e6; border-radius: 10px; background: #fff; overflow: hidden; }
.agenda-kop { display: grid; grid-template-columns: 52px repeat(var(--dagen), 1fr); border-bottom: 1px solid #dee2e6; }
.agenda-dagkop { text-align: center; padding: 0.35rem 0; border-left: 1px solid #eef0f3; }
.agenda-dagnaam { display: block; font-size: 0.7rem; color: #6c757d; letter-spacing: 0.04em; }
.agenda-dagnummer { display: inline-block; min-width: 1.8rem; line-height: 1.8rem; border-radius: 50%; font-weight: 600; }
.agenda-dagkop.vandaag .agenda-dagnummer { background: var(--merk-navy, #0F3E69); color: #fff; }
.agenda-dagkop.vandaag .agenda-dagnaam { color: var(--merk-navy, #0F3E69); }
.agenda-hele-dag .agenda-dagkop-cel { border-left: 1px solid #eef0f3; padding: 2px; min-height: 1.8rem; }
.agenda-hele-dag .agenda-uurkolom { padding: 0.35rem 0.25rem; text-align: right; }
.agenda-chip { display: block; background: var(--merk-tint, #E2F1FF); color: var(--merk-navy, #0F3E69); border-radius: 4px; padding: 1px 6px; font-size: 0.78rem; margin-bottom: 2px; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agenda-lichaam { display: grid; grid-template-columns: 52px repeat(var(--dagen), 1fr); max-height: 70vh; overflow-y: auto; position: relative; }
.agenda-uur { position: relative; border-top: 1px solid #eef0f3; }
.agenda-uur span { position: absolute; top: -0.55rem; right: 6px; font-size: 0.7rem; color: #6c757d; background: #fff; padding: 0 2px; }
.agenda-uur:first-child { border-top: 0; }
.agenda-dag { position: relative; border-left: 1px solid #eef0f3; }
.agenda-dag.vandaag { background: rgba(226, 241, 255, 0.35); }
.agenda-lijn { border-top: 1px solid #eef0f3; box-sizing: border-box; }
.agenda-lijn:first-child { border-top: 0; }
.agenda-nu { position: absolute; left: 0; right: 0; border-top: 2px solid #dc3545; z-index: 3; pointer-events: none; }
.agenda-blok { position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden; padding: 2px 6px; border-radius: 5px; border-left: 3px solid var(--merk-teal, #2CA4BC);
    background: var(--merk-tint, #E2F1FF); color: var(--merk-navy, #0F3E69); font-size: 0.78rem; line-height: 1.25; text-decoration: none; }
.agenda-blok:hover { filter: brightness(0.96); color: var(--merk-navy, #0F3E69); }
.agenda-blok.online { border-left-color: #198754; }
.agenda-blok.voorlopig { background: repeating-linear-gradient(45deg, var(--merk-tint, #E2F1FF), var(--merk-tint, #E2F1FF) 6px, #fff 6px, #fff 12px); }
.agenda-blok.afgewezen { opacity: 0.55; text-decoration: line-through; }
.agenda-blok-titel { display: block; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agenda-blok-tijd { display: block; color: #4f6b85; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }