select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Achtergrond voor de losstaande aanmeldschermen (inloggen, wachtwoord wijzigen/
   vergeten/resetten, tweestapsverificatie) — zonder deze regel stond er enkel een
   lege, witte pagina achter de kaart. Kleuren in lijn met de blauwe huisstijl. */
body.aanmeldscherm {
    background:
        linear-gradient(90deg, rgba(5, 15, 36, 0.25), rgba(5, 15, 36, 0.4)),
        url("../../achtergrond/login-lourdes.png") center center / cover no-repeat fixed,
        #061833;
    min-height: 100vh;
}

body.aanmeldscherm .card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 24px 70px rgba(0, 11, 32, 0.38);
}

body.beheer-dashboard {
    background:
        linear-gradient(90deg, rgba(6, 18, 42, 0.34), rgba(6, 18, 42, 0.2)),
        url("../../achtergrond/dashboard-lourdes.png") center center / cover no-repeat fixed,
        #061833;
}

body.beheer-dashboard .wrapper,
body.beheer-dashboard .main-panel,
body.beheer-dashboard .main-content,
body.beheer-dashboard .content-wrapper {
    background: transparent;
}

body.beheer-dashboard .header-navbar {
    background: rgba(6, 24, 54, 0.82) !important;
    border-bottom: 1px solid rgba(173, 205, 255, 0.18);
    box-shadow: 0 10px 35px rgba(0, 11, 32, 0.16);
    backdrop-filter: blur(14px);
}

body.beheer-dashboard .header-navbar .nav-link,
body.beheer-dashboard .header-navbar .dropdown-toggle,
body.beheer-dashboard .header-navbar .ft-user {
    color: rgba(255, 255, 255, 0.92) !important;
}

body.beheer-dashboard .header-navbar .text-muted {
    color: rgba(214, 227, 248, 0.75) !important;
}

body.beheer-dashboard .content-wrapper {
    min-height: calc(100vh - 62px);
}

body.beheer-dashboard .card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 18px 55px rgba(0, 11, 32, 0.16);
}

body.beheer-dashboard .app-sidebar[data-background-color="black"] {
    background: rgba(3, 15, 36, 0.82);
    border-right: 1px solid rgba(173, 205, 255, 0.12);
    box-shadow: 16px 0 45px rgba(0, 8, 24, 0.24);
}

body.beheer-dashboard .app-sidebar .logo-text .text {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Het zijmenu is een kolom met drie delen: een vaste kop, een MEEROLLEND
   middenstuk en een vaste voet met Uitloggen.

   Waarom dit nodig was: het menu telt zestien items en werd afgekapt. Gemeten
   op 1440x900: de zijbalk is 900px hoog, `.sidebar-content` stond op
   `overflow-y: hidden` met 1417px inhoud, en het laatste item (Migraties) lag
   597px onder de onderrand. Zeven modules waren daarmee niet aanklikbaar —
   Kamerverdeling, Bus & TGV, Lijsten exporteren, Functies, Gebruikers,
   Auditlog en Migraties. Bovendien stond `.sidebar-logout` absoluut op
   `bottom: 16px` van de zijbalk en dus BOVENOP het menu-item dat daar
   toevallig stond; "Uitloggen" lag onleesbaar over "Inschrijvingen".

   Met een flexkolom kan dat niet meer gebeuren: het middenstuk rolt, de voet
   houdt altijd zijn eigen plaats, en er is geen absolute positionering meer
   die iets kan overlappen. */
body.beheer-dashboard .app-sidebar {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

body.beheer-dashboard .app-sidebar .sidebar-header,
body.beheer-dashboard .app-sidebar .sidebar-reiscontext {
    flex: 0 0 auto;
}

body.beheer-dashboard .app-sidebar .sidebar-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Smalle, discrete rolbalk: een brede grijze balk naast het menu leest als
       een tweede rand. */
    scrollbar-width: thin;
    scrollbar-color: rgba(173, 205, 255, .28) transparent;
}

body.beheer-dashboard .app-sidebar .sidebar-content::-webkit-scrollbar {
    width: 6px;
}

body.beheer-dashboard .app-sidebar .sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(173, 205, 255, .28);
    border-radius: 3px;
}

body.beheer-dashboard .app-sidebar .nav-container {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Compacter menu. Zestien items met zes kopjes hadden 1341px nodig in een vak
   van ruim 600px: je zag er acht, en dat de rest bestond moest je maar weten.
   Met 38px per item en strakkere kopjes past het hele menu op een gewoon
   laptopscherm, zonder dat de raakvlakken onder de 38px zakken. */
body.beheer-dashboard .app-sidebar .navigation li > a {
    border-radius: 0 22px 22px 0;
    margin: 1px 12px 1px 0;
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
}

body.beheer-dashboard .app-sidebar .navigation li.active > a,
body.beheer-dashboard .app-sidebar .navigation li > a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

body.beheer-dashboard .app-sidebar .navigation li.active > a:before,
body.beheer-dashboard .app-sidebar .navigation li > a:before {
    background: #5caeff;
}

body.beheer-dashboard .app-sidebar .navigation li.active > a {
    box-shadow: inset 3px 0 0 #5caeff;
}

body.beheer-dashboard .app-sidebar .navigation li.active > a:before {
    display: none;
}

body.beheer-dashboard .app-sidebar .navigation i {
    width: 22px;
    text-align: center;
}

/* Rolbalk zichtbaar houden zodra er iets buiten beeld staat. De standaard van
   perfect-scrollbar is 0.6 breed en pas zichtbaar bij hover: dan lijkt een
   afgekapt menu compleet. */
body.beheer-dashboard .app-sidebar .sidebar-content.ps-active-y > .ps-scrollbar-y-rail {
    background: rgba(255, 255, 255, .06);
    opacity: .9;
    width: 6px;
}

body.beheer-dashboard .app-sidebar .sidebar-content.ps-active-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
    background: rgba(173, 205, 255, .5);
    width: 4px;
}

body.beheer-dashboard .sidebar-logout {
    /* Deel van de flexkolom, niet absoluut: zo kan Uitloggen nooit meer over
       een menu-item vallen. */
    background: rgba(3, 15, 36, .92);
    border-top: 1px solid rgba(173, 205, 255, .12);
    flex: 0 0 auto;
    padding: 12px;
    position: static;
}

body.beheer-dashboard .sidebar-logout a {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #ffffff;
    display: flex;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
}

body.beheer-dashboard .sidebar-logout a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

body.beheer-dashboard .sidebar-logout i {
    text-align: center;
    width: 22px;
}

@media (min-width: 992px) {
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar:hover {
        overflow: hidden;
        width: 60px;
    }

    body.beheer-dashboard .wrapper.nav-collapsed .main-panel .main-content,
    body.beheer-dashboard .wrapper.nav-collapsed .header-navbar {
        padding-left: 60px;
    }

    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar .logo .text,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar:hover .logo .text,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar .menu-title,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar:hover .menu-title,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar .badge,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar:hover .badge,
    body.beheer-dashboard .wrapper.nav-collapsed .sidebar-logout .menu-title,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar:hover .sidebar-logout .menu-title {
        display: none !important;
    }

    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar .nav-toggle,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar:hover .nav-toggle {
        display: block !important;
        left: 50%;
        margin-left: -10px;
        position: relative;
    }

    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar .logo {
        padding: 20px 0;
        text-align: center;
    }

    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar .logo-text {
        display: none;
    }

    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar .navigation li > a,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar:hover .navigation li > a {
        align-items: center;
        display: flex;
        height: 48px;
        justify-content: center;
        margin: 3px 8px;
        padding: 0;
        width: 44px;
    }

    body.beheer-dashboard .wrapper.nav-collapsed .sidebar-logout {
        padding: 0 8px;
    }

    body.beheer-dashboard .wrapper.nav-collapsed .sidebar-logout a,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar:hover .sidebar-logout a {
        justify-content: center;
        padding: 0;
    }

    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar .navigation i,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar:hover .navigation i,
    body.beheer-dashboard .wrapper.nav-collapsed .sidebar-logout i,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar:hover .sidebar-logout i {
        float: none;
        font-size: 19px;
        margin: 0;
        width: auto;
    }
}

.dashboard-kop {
    align-items: center;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 18px;
}

.dashboard-kop h3 {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 3px 0 4px;
}

.dashboard-kop p {
    color: rgba(232, 240, 255, 0.82);
    font-size: 1rem;
    margin: 0;
}

.dashboard-label {
    color: #8fc7ff;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.dashboard-actie {
    background: #1d6fd1;
    border-color: #1d6fd1;
    box-shadow: 0 12px 32px rgba(29, 111, 209, 0.32);
    min-height: 42px;
}

.dashboard-statistieken {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 20px;
}

.dashboard-stat {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 8px;
    box-shadow: 0 18px 55px rgba(0, 11, 32, 0.16);
    min-height: 158px;
    padding: 18px;
}

.dashboard-stat-icoon {
    align-items: center;
    background: #e9f2ff;
    border-radius: 8px;
    color: #0b4f98;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    margin-bottom: 14px;
    width: 42px;
}

.dashboard-stat-label {
    color: #52657a;
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-stat strong {
    color: #071b3a;
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 4px 0;
}

.dashboard-stat small,
.dashboard-check small,
.dashboard-logregel small,
.dashboard-logregel em,
.dashboard-leeg {
    color: #52657a;
}

.dashboard-paneel {
    min-height: 330px;
}

.dashboard-paneel-kop {
    align-items: flex-start;
    border-bottom: 1px solid rgba(11, 35, 74, 0.12);
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
}

.dashboard-paneel-kop h4 {
    color: #071b3a;
    font-size: 1.2rem;
    margin: 3px 0 0;
}

.dashboard-paneel-kop > i {
    color: #0b4f98;
    font-size: 1.45rem;
}

.dashboard-checklist,
.dashboard-loglijst {
    display: grid;
    gap: 14px;
}

.dashboard-check,
.dashboard-logregel {
    align-items: flex-start;
    display: flex;
    gap: 13px;
}

.dashboard-check > span {
    align-items: center;
    background: #f0f6ff;
    border-radius: 8px;
    color: #0b4f98;
    display: inline-flex;
    flex: 0 0 38px;
    height: 38px;
    justify-content: center;
}

.dashboard-check strong,
.dashboard-logregel strong {
    color: #071b3a;
    display: block;
    font-weight: 700;
}

.dashboard-logpunt {
    background: #1d6fd1;
    border: 4px solid #d9eaff;
    border-radius: 50%;
    flex: 0 0 14px;
    height: 14px;
    margin-top: 4px;
    width: 14px;
}

.dashboard-logregel em {
    display: block;
    font-style: normal;
    margin-top: 2px;
}

@media (max-width: 1199px) {
    .dashboard-statistieken {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .dashboard-kop {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-statistieken {
        grid-template-columns: 1fr;
    }

    .dashboard-actie {
        width: 100%;
    }
}

/* Reiscontext en werkdashboard — alle cijfers hieronder horen bij de reis in
   focus. De basis is bewust één kolom; op grotere schermen valt de werkruimte
   uiteen in een duidelijke opvolgings- en configuratiekolom. */
/* Compacter. Dit blok nam 218px van de zijbalk in — vóór het menu begon — en
   herhaalde daarmee wat rechtsboven in de topbalk al staat. De reis in focus is
   nuttig om te zien waar je aan werkt; ze hoeft geen kaart van vier regels te
   zijn. Wat er overblijft: de naam, het jaar en de status op één regel, plus de
   link naar de configuratie. De ruimte die vrijkomt gaat naar het menu, dat ze
   nodig heeft. */
body.beheer-dashboard .sidebar-reiscontext {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(173, 205, 255, .16);
    border-radius: 8px;
    display: grid;
    gap: 1px;
    margin: 12px 12px 0;
    padding: 8px 11px;
}

body.beheer-dashboard .sidebar-reiscontext .sidebar-reiscontext-label {
    /* "Reis in focus" staat al in de topbalk; hier is de naam genoeg. */
    display: none;
}

body.beheer-dashboard .sidebar-reiscontext-label,
body.beheer-dashboard .sidebar-reiscontext small {
    color: rgba(214, 227, 248, .65);
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.beheer-dashboard .sidebar-reiscontext strong {
    color: #fff;
    font-size: .84rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.beheer-dashboard .sidebar-reiscontext a {
    color: #9dccff;
    font-size: .68rem;
    font-weight: 700;
    margin-top: 3px;
}

body.beheer-dashboard .sidebar-reiscontext a:hover {
    color: #fff;
    text-decoration: none;
}

body.beheer-dashboard .topbalk-reiscontext > a {
    align-items: center;
    display: flex;
    gap: 9px;
    min-height: 48px;
}

body.beheer-dashboard .topbalk-reiscontext > a > span:last-child {
    display: grid;
    gap: 2px;
}

body.beheer-dashboard .topbalk-reiscontext small {
    color: rgba(201, 222, 250, .62);
    font-size: .58rem;
    letter-spacing: .12em;
}

body.beheer-dashboard .topbalk-reiscontext strong {
    color: rgba(255, 255, 255, .92);
    font-size: .72rem;
    font-weight: 700;
}

body.beheer-dashboard .topbalk-reiscontext-punt {
    background: #64d09e;
    border: 4px solid rgba(100, 208, 158, .18);
    border-radius: 50%;
    flex: 0 0 13px;
    height: 13px;
    width: 13px;
}

.dashboard-home {
    margin: 0 auto;
    max-width: var(--beheer-max, 1540px);
    padding: 24px 18px 58px;
}

.dashboard-kruimel {
    align-items: center;
    color: rgba(225, 236, 255, .68);
    display: flex;
    font-size: .65rem;
    font-weight: 700;
    gap: 8px;
    letter-spacing: .16em;
    margin-bottom: 13px;
}

.dashboard-kruimel i { font-size: 10px; }
.dashboard-kruimel a { color: inherit; }
.dashboard-kruimel a:hover { color: #fff; text-decoration: none; }

body.beheer-dashboard .dashboard-kop {
    align-items: flex-start;
    margin-bottom: 22px;
}

body.beheer-dashboard .dashboard-kop h1,
.dashboard-geen-reis h1 {
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: 1;
    margin: 6px 0 9px;
}

body.beheer-dashboard .dashboard-kop p,
.dashboard-geen-reis p {
    color: rgba(232, 240, 255, .82);
    font-size: .96rem;
    line-height: 1.55;
    margin: 0;
}

.dashboard-scheiding { color: rgba(232, 240, 255, .42); padding: 0 5px; }
.dashboard-acties { display: flex; flex-wrap: wrap; gap: 9px; }

.dashboard-fokus {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 10px;
    box-shadow: 0 18px 55px rgba(0, 11, 32, .14);
    margin-bottom: 16px;
    padding: 18px;
}

.dashboard-fokus-kop {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dashboard-fokus-kop h2 { color: #112844; font-family: Georgia, 'Times New Roman', serif; font-size: 1.48rem; font-weight: 400; letter-spacing: -.02em; margin: 5px 0 5px; }
.dashboard-fokus-kop p { color: #52657a; font-size: .78rem; line-height: 1.5; margin: 0; max-width: 68ch; }
.dashboard-fokus-badge { background: #eef4f9; border-radius: 99px; color: #55718d; flex: 0 0 auto; font-size: .69rem; font-weight: 700; padding: 6px 10px; }

.dashboard-fasen { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-fase { align-items: center; background: #f8fafc; border: 1px solid #e4ebf2; border-radius: 7px; color: #5c6e80; display: flex; gap: 9px; min-height: 54px; padding: 8px 10px; }
.dashboard-fase:hover { background: #f1f7fc; border-color: #c9ddec; color: #1766c2; text-decoration: none; }
.dashboard-fase.is-actief { background: #eaf3fc; border-color: #a9cceb; color: #164f83; }
.dashboard-fase.is-volgende { background: #f1f8f4; border-color: #b7dcc8; color: #276b50; }
.dashboard-fase.is-vergrendeld { background: #fbfcfd; color: #9aa7b5; }
.dashboard-fase-nummer { align-items: center; background: #fff; border: 1px solid #d7e2ec; border-radius: 50%; color: #55718d; display: inline-flex; flex: 0 0 27px; font-size: .72rem; font-weight: 700; height: 27px; justify-content: center; width: 27px; }
.dashboard-fase.is-actief .dashboard-fase-nummer { background: #1766c2; border-color: #1766c2; color: #fff; }
.dashboard-fase.is-volgende .dashboard-fase-nummer { background: #4da879; border-color: #4da879; color: #fff; }
.dashboard-fase > span:last-child { display: grid; gap: 2px; min-width: 0; }
.dashboard-fase strong { color: currentColor; font-size: .74rem; }
.dashboard-fase small { color: #5c6e80; font-size: .65rem; line-height: 1.3; }
.dashboard-fase.is-actief small, .dashboard-fase.is-volgende small { color: #33587f; }

body.beheer-dashboard .dashboard-actie {
    align-items: center;
    border: 1px solid #1d6fd1;
    border-radius: 7px;
    color: #fff;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 700;
    gap: 7px;
    justify-content: center;
    min-height: 43px;
    padding: 0 14px;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body.beheer-dashboard .dashboard-actie:hover {
    box-shadow: 0 10px 24px rgba(13, 61, 119, .28);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

body.beheer-dashboard .dashboard-actie-licht {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(206, 226, 252, .32);
}

.dashboard-statistieken {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    margin-bottom: 16px;
}

.dashboard-stat {
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 9px;
    box-shadow: 0 16px 42px rgba(0, 11, 32, .14);
    min-height: 142px;
    padding: 16px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.dashboard-stat:hover {
    box-shadow: 0 20px 48px rgba(0, 11, 32, .21);
    text-decoration: none;
    transform: translateY(-2px);
}

.dashboard-stat-blauw { border-top: 3px solid #3b8bd8; }
.dashboard-stat-amber { border-top: 3px solid #cf902d; }
.dashboard-stat-coral { border-top: 3px solid #d87560; }
.dashboard-stat-green { border-top: 3px solid #4da879; }
.dashboard-stat-blauw .dashboard-stat-icoon { background: #e9f2ff; color: #1766c2; }
.dashboard-stat-amber .dashboard-stat-icoon { background: #fff5df; color: #8a5a08; }
.dashboard-stat-coral .dashboard-stat-icoon { background: #fff0eb; color: #b65d49; }
.dashboard-stat-green .dashboard-stat-icoon { background: #e7f5ee; color: #1f6a4d; }

.dashboard-stat-icoon {
    align-items: center;
    border-radius: 7px;
    display: inline-flex;
    height: 37px;
    justify-content: center;
    margin-bottom: 11px;
    width: 37px;
}

.dashboard-stat-label {
    color: #52657a;
    display: block;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.dashboard-stat strong {
    color: #071b3a;
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.15rem;
    font-weight: 400;
    line-height: 1;
    margin: 8px 0 5px;
}

.dashboard-stat small { color: #52657a; font-size: .72rem; }

.dashboard-grid {
    display: grid;
    gap: 16px;
    grid-template-areas: "opvolging" "reisinfo" "recent" "activiteiten";
}

.dashboard-paneel {
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 9px;
    box-shadow: 0 18px 55px rgba(0, 11, 32, .14);
    min-width: 0;
    padding: 19px;
}

.dashboard-opvolging { grid-area: opvolging; }
.dashboard-reisinfo { grid-area: reisinfo; }
.dashboard-recente-dossiers { grid-area: recent; }
.dashboard-activiteiten { grid-area: activiteiten; }

.dashboard-paneel-kop {
    align-items: flex-start;
    border-bottom: 1px solid #e5ebf2;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 13px;
}

.dashboard-label-donker { color: #33587f; }
.dashboard-paneel h2 { color: #112844; font-family: Georgia, 'Times New Roman', serif; font-size: 1.45rem; font-weight: 400; letter-spacing: -.02em; margin: 5px 0 0; }
.dashboard-paneel-kop > i { color: #1766c2; font-size: 1.35rem; }
.dashboard-paneel-badge { background: #eef4f9; border-radius: 99px; color: #55718d; font-size: .72rem; font-weight: 700; padding: 5px 9px; }

.dashboard-opvolg-lijst { display: grid; gap: 8px; }

.dashboard-opvolg-item {
    align-items: center;
    border: 1px solid #e8edf3;
    border-radius: 7px;
    color: #112844;
    display: grid;
    gap: 10px;
    grid-template-columns: 34px 1fr 16px;
    min-height: 60px;
    padding: 8px 10px;
    transition: background-color .18s ease, border-color .18s ease;
}

.dashboard-opvolg-item:hover { background: #f6f9fc; border-color: #c4d8eb; text-decoration: none; }
.dashboard-opvolg-item.is-open { background: #fffaf0; border-color: #e7c98c; }
.dashboard-opvolg-item.is-info { background: #f3f8fc; border-color: #c2d9eb; }
.dashboard-opvolg-item.is-klaar { background: #f4faf7; border-color: #b9dec9; }
.dashboard-opvolg-icoon { align-items: center; background: #eff5fb; border-radius: 6px; color: #1766c2; display: inline-flex; height: 32px; justify-content: center; width: 32px; }
.is-open .dashboard-opvolg-icoon { background: #fff5df; color: #8a5a08; }
.is-klaar .dashboard-opvolg-icoon { background: #e8f5ee; color: #318461; }
.dashboard-opvolg-item span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.dashboard-opvolg-item strong { color: #2d4966; font-size: .78rem; }
.dashboard-opvolg-item small { color: #5c6e80; font-size: .7rem; line-height: 1.4; }
.dashboard-opvolg-pijl { color: #9aaabd; font-size: 13px; }
.dashboard-opvolg-item:not(a) .dashboard-opvolg-pijl { visibility: hidden; }

.dashboard-verdieping { border-top: 1px solid #e5ebf2; margin-top: 14px; padding-top: 11px; }
.dashboard-verdieping summary { align-items: center; color: #55718d; cursor: pointer; display: flex; font-size: .73rem; font-weight: 700; justify-content: space-between; list-style: none; min-height: 44px; }
.dashboard-verdieping summary::-webkit-details-marker { display: none; }
.dashboard-verdieping summary > span:first-child { align-items: center; display: inline-flex; gap: 7px; }
.dashboard-verdieping summary > span:first-child i { color: #1766c2; }
.dashboard-verdieping summary::after { color: #5c6e80; content: '+'; font-size: 1.05rem; font-weight: 400; margin-left: 8px; order: 3; }
.dashboard-verdieping[open] summary::after { content: '−'; }
.dashboard-verdieping summary:focus-visible { border-radius: 5px; outline: 3px solid rgba(29, 111, 209, .28); outline-offset: 3px; }
.dashboard-verdieping-inhoud { display: grid; gap: 8px; margin-top: 8px; }

.dashboard-info-lijst { display: grid; gap: 0; margin: 0; }
.dashboard-info-lijst > div { align-items: baseline; border-bottom: 1px solid #edf1f5; display: flex; gap: 12px; justify-content: space-between; padding: 11px 0; }
.dashboard-info-lijst > div:last-child { border-bottom: 0; }
.dashboard-info-lijst dt { color: #5c6e80; font-size: .71rem; }
.dashboard-info-lijst dd { color: #2d4966; font-size: .8rem; font-weight: 700; margin: 0; text-align: right; }
.dashboard-info-lijst dd small { color: #5c6e80; display: block; font-size: .68rem; font-weight: 400; margin-top: 2px; }
.dashboard-paneel-link { color: #1766c2; display: inline-flex; font-size: .74rem; font-weight: 700; gap: 7px; margin-top: 14px; }
.dashboard-paneel-link:hover { color: #0b4f98; text-decoration: none; }

.dashboard-dossierlijst { display: grid; }
.dashboard-dossier { align-items: center; border-bottom: 1px solid #edf1f5; color: #112844; display: grid; gap: 10px; grid-template-columns: 34px 1fr auto; min-height: 57px; padding: 7px 0; }
.dashboard-dossier:last-child { border-bottom: 0; }
.dashboard-dossier:hover { color: #1766c2; text-decoration: none; }
.dashboard-dossier-avatar { align-items: center; background: #e9f2ff; border-radius: 50%; color: #1766c2; display: inline-flex; font-size: .65rem; font-weight: 700; height: 32px; justify-content: center; width: 32px; }
.dashboard-dossier > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.dashboard-dossier strong { color: #2d4966; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-dossier small { color: #5c6e80; font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-dossier-status { color: #52657a; font-size: .68rem; font-weight: 700; white-space: nowrap; }

.dashboard-loglijst { display: grid; gap: 13px; }
.dashboard-logregel { align-items: flex-start; display: flex; gap: 11px; }
.dashboard-logpunt { background: #3b8bd8; border: 4px solid #dcecff; border-radius: 50%; flex: 0 0 13px; height: 13px; margin-top: 4px; width: 13px; }
.dashboard-logregel > div { display: grid; gap: 2px; min-width: 0; }
.dashboard-logregel strong { color: #2d4966; font-size: .75rem; }
.dashboard-logregel small, .dashboard-logregel em { color: #5c6e80; font-size: .68rem; line-height: 1.35; }
.dashboard-logregel em { font-style: normal; }
.dashboard-logbeperkt { align-items: flex-start; background: #f7f9fb; border: 1px solid #e5ebf2; border-radius: 7px; color: #5c6e80; display: grid; gap: 6px; min-height: 100px; padding: 16px; }
.dashboard-logbeperkt i { color: #1766c2; font-size: 18px; }
.dashboard-logbeperkt strong { color: #2d4966; font-size: .78rem; }
.dashboard-logbeperkt span { font-size: .7rem; line-height: 1.5; }
.dashboard-leeg { align-items: center; color: #5c6e80; display: grid; gap: 7px; justify-items: start; min-height: 160px; padding: 8px 0; }
.dashboard-leeg i { color: #1766c2; font-size: 22px; }
.dashboard-leeg strong { color: #2d4966; font-size: .82rem; }
.dashboard-leeg span { font-size: .72rem; line-height: 1.5; }
.dashboard-leeg-klein { min-height: 100px; }
.dashboard-bron { align-items: center; color: rgba(225, 236, 255, .67); display: flex; font-size: .68rem; gap: 7px; margin-top: 14px; }
.dashboard-bron i { color: #8fc7ff; }

body.beheer-dashboard .dashboard-paneel { min-height: 0; }
body.beheer-dashboard .dashboard-stat,
body.beheer-dashboard .dashboard-fokus,
body.beheer-dashboard .dashboard-opvolg-item,
body.beheer-dashboard .dashboard-fase { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
body.beheer-dashboard .dashboard-stat:focus-visible,
body.beheer-dashboard .dashboard-fase:focus-visible,
body.beheer-dashboard .dashboard-opvolg-item:focus-visible { outline: 3px solid rgba(143, 199, 255, .8); outline-offset: 3px; }

.dashboard-melding { align-items: flex-start; border-radius: 8px; display: flex; gap: 10px; margin-bottom: 16px; padding: 12px 14px; }
.dashboard-melding > i { margin-top: 2px; }
.dashboard-melding strong, .dashboard-melding span { display: block; font-size: .75rem; line-height: 1.45; }
.dashboard-melding-fout { background: #fff1ed; border: 1px solid #efc9be; color: #934535; }
.dashboard-melding-fout > i { color: #a63f2c; }
.dashboard-melding-waarschuwing { background: #fff8ea; border: 1px solid #f2dfb8; color: #815917; }
.dashboard-melding-waarschuwing > i { color: #8a5a08; }
.dashboard-geen-reis { background: rgba(255, 255, 255, .94); border-radius: 10px; box-shadow: 0 18px 55px rgba(0, 11, 32, .18); max-width: 680px; padding: 28px; }
.dashboard-geen-reis p { color: #5f738b; margin-bottom: 20px; }
.dashboard-geen-reis-hulp { color: #5c6e80 !important; font-size: .76rem !important; margin: 18px 0 0 !important; }
.dashboard-geen-reis .dashboard-actie { background: #1766c2; }

@media (min-width: 560px) {
    .dashboard-home { padding-left: 28px; padding-right: 28px; }
    .dashboard-statistieken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
    .dashboard-home { padding-top: 31px; }
    .dashboard-grid { grid-template-areas: "opvolging reisinfo" "recent activiteiten"; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); }
}

@media (min-width: 1180px) {
    .dashboard-statistieken { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Demomodus (tijdelijk). Het dashboard toont dan twee panelen in plaats van
   vier; zonder eigen raster blijven ze in de benoemde vakken van het volledige
   dashboard staan en gaapt er een gat op de plaats van het opvolgpaneel. */
@media (min-width: 980px) {
    .dashboard-grid-demo { grid-template-areas: "recent reisinfo"; }
}

@media (min-width: 1180px) {
    .dashboard-statistieken-demo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .dashboard-fokus-kop { flex-direction: column; }
    .dashboard-fokus-badge { align-self: flex-start; }
    .dashboard-fasen { grid-template-columns: 1fr; }
    body.beheer-dashboard .dashboard-kop { flex-direction: column; }
    .dashboard-acties { width: 100%; }
    body.beheer-dashboard .dashboard-actie { flex: 1 1 150px; }
}

@media (min-width: 992px) {
    body.beheer-dashboard .wrapper.nav-collapsed .sidebar-reiscontext,
    body.beheer-dashboard .wrapper.nav-collapsed .app-sidebar:hover .sidebar-reiscontext { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.beheer-dashboard .dashboard-stat,
    body.beheer-dashboard .dashboard-fase,
    body.beheer-dashboard .dashboard-opvolg-item,
    body.beheer-dashboard .dashboard-actie { transition: none; }
}
	
	
.bollengr { width:60px; height:60px;	}
	
	.tim-50{height:50px;}


.week

{
 
	border-right: 1px solid #7899cc;
border-bottom: 1px solid #7899cc;
text-align: center;
color: #1766c2;
padding-top: 9px;
padding-bottom: 9px;
height: 30px;
line-height: 30px;
vertical-align: middle;
background-color: #fdfdfd;
	
}

.dag

{
 border-left: 1px solid #54c0cc;
	border-right: 1px solid #54c0cc;
border-bottom: 1px solid #54c0cc;
text-align: center;
color: #E9E9E9;
padding-top: 9px;
padding-bottom: 9px;
height: 30px;
line-height: 30px;
vertical-align: middle;
	 
 
	
}

.dag a:link, .dag a:visited

{
display: block;
height: 30px;
line-height: 30px;	 
 
	
}

.dag:hover

{
 
	 
	background-color:#fff;
 height: 30px;
line-height: 30px;
 
	
}

.timvtje 

{
 
	background-image: url('https://www.mediumsnl.nl/consulent/images/bol.png') ;
	 background-repeat: no-repeat;
  background-position: center;
  height:30px; 
	line-height: 30px;
 
 
	
}


.vtje {
    
    background-color: #c5fec1; color:#fff;
	 background-image: linear-gradient(45deg, #8bcb87, #c5fec1 )
}

@media only screen and (max-width: 480px) {
	
	 .app-sidebar.hide-sidebar,
  .off-canvas-sidebar.hide-sidebar { visibility: hidden; transition: transform 0s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(-100%, 0, 0);  
}
	
	
	
	.bollengr { width:20px; height:20px;	}
	h3.font-large-1{font-size: 24px;line-height: 15px;}
	.font-large-1{font-size: 24px;line-height: 15px;}
	 
	.tim-50{height:20px;}
	.card {margin: 8px 0;}
	.ct-label{ display:none; }
	.ct-chart-line .ct-label{ display:none; }
	#footer .sbs .menu2 li {    float: left;    width: 50%;}
  .verbergen-ipad	{   }
   .verbergen-sm	{ display:none; }
 
   .tonenklein   	{  }
   .consulentlogo	{font-size:24px; }
   .header5   a.consulentlogo	{font-size:24px; }
	.sc--has-fade-mask {margin-bottom: -100px; overflow: hidden; min-height: auto;}
.sc__boxed-mask {position: absolute; top: 0; bottom: auto; left: 50%; width: 1200px; height: 105%; border-radius: 4px; background: #f5f5f5; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);}
.testimonial_box[data-align=left] blockquote {margin-left: 20px;}
		h2.static-content__title{font-size: 2rem;}
	h3.static-content__subtitle{font-size: 1rem;}
	
	.font-large-1 {
    font-size: 15px;
    
}
}
@media only screen and  (min-width: 735px) and (max-width: 745px) {
	
		
	 .app-sidebar.hide-sidebar,
  .off-canvas-sidebar.hide-sidebar { visibility: hidden; transition: transform 0s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(-100%, 0, 0);  
}
	
	
	
	.bollengr { width:20px; height:20px;	}
	h3.font-large-1{font-size: 24px;line-height: 15px;}
	.font-large-1{font-size: 24px;line-height: 15px;}
	 
	.tim-50{height:20px;}
	.card {margin: 8px 0;}
	.ct-label{ display:none; }
	.ct-chart-line .ct-label{ display:none; }
	#footer .sbs .menu2 li {    float: left;    width: 50%;}
  .verbergen-ipad	{   }
   .verbergen-sm	{ display:none; }
 
   .tonenklein   	{  }
   .consulentlogo	{font-size:24px; }
   .header5   a.consulentlogo	{font-size:24px; }
	.sc--has-fade-mask {margin-bottom: -100px; overflow: hidden; min-height: auto;}
.sc__boxed-mask {position: absolute; top: 0; bottom: auto; left: 50%; width: 1200px; height: 105%; border-radius: 4px; background: #f5f5f5; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);}
.testimonial_box[data-align=left] blockquote {margin-left: 20px;}
		h2.static-content__title{font-size: 2rem;}
	h3.static-content__subtitle{font-size: 1rem;}
	
	.font-large-1 {
    font-size: 15px;
    
}
	
}
/* Landscape gsm > portrait tablet / ipad */
@media only screen and  (min-width: 481px) and (max-width: 770px) {
	 .app-sidebar.hide-sidebar,
  .off-canvas-sidebar.hide-sidebar { visibility: hidden; transition: transform 0s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translate3d(-100%, 0, 0);  
}
	
  .verbergen-sm	{     }
	  .verbergen-ipad	{ display:none;  }
	 
	.tim-50{height:52px;}
	
	.card-body {

     
    padding: 10px;
		
	}
	.card {margin: 8px 0;}
	
	  .tonenklein   	{ display:none;  }
	.tonenipad   	{   }
	   .consulentlogo	{font-size:30px; } 
	   .header5   a.consulentlogo	{font-size:30px; }
	   .sc--has-fade-mask {margin-bottom: -100px; overflow: hidden; min-height: auto;}
	    .sc__boxed-mask {position: absolute; top: 0; bottom: auto; left: 50%; width: 1200px; height: 105%; border-radius: 4px; background: #f5f5f5; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);}
	#footer .sbs .menu2 li {    float: left;    width: 50%;}
	
	
	h2.static-content__title{font-size: 2rem;}
	h3.static-content__subtitle{font-size: 1rem;}
	
	.font-large-1 {
    font-size: 20px;
    
}
	
	
}


/* Landscape gsm > portrait tablet / ipad */
@media only screen and  (min-width: 771px) and (max-width: 1219px) {
	
	.font-large-1 {
    font-size: 25px;
    
}
	
	.card-body {

     
    padding: 10px;
		
	}
	
	
  .verbergen-sm	{   }
	  .verbergen-ipad	{ display:none;  }
	  .verbergen-groterdanipad	{ display:none; }
	  .tonenklein   	{ display:none;  }
	 
	.tim-50{height:52px;}
	.card {margin: 8px 0;}
	
	.tonenipad   	{   }
	 .verbergen-groot	{ display:none; }
	   .consulentlogo	{font-size:30px; } 
	   .header5   a.consulentlogo	{font-size:30px; }
	   .sc--has-fade-mask {margin-bottom: -100px; overflow: hidden; min-height: auto;}
	    .sc__boxed-mask {position: absolute; top: 0; bottom: auto; left: 50%; width: 1200px; height: 105%; border-radius: 4px; background: #f5f5f5; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); box-shadow: 0 0 18px rgba(0, 0, 0, 0.35);}
	#footer .sbs .menu2 li {    float: left;    width: 50%;}
		h2.static-content__title{font-size: 2rem;}
	h3.static-content__subtitle{font-size: 1rem;}
}



/* PC  /  desktop */
@media only screen and (min-width: 1220px) {

	  .verbergen-sm	{}
	  .tonenklein   	{ display:none; }
	.tonenipad   	{ display:none; }
	  .consulentlogo	{font-size:36px; }
	  .header5   a.consulentlogo	{font-size:36px; }
	  .timhoofding  { margin-bottom: -450px;  }
	   .verbergen-groot	{ display:none; }
		h2.static-content__title{font-size: 3rem;}
	h3.static-content__subtitle{font-size: 2rem;}
}

 
@media only screen and (min-width : 1921px){
.timhoofding  { margin-bottom: -450px;  }
	 .verbergen-groot	{ display:none; }
	 .tonenklein   	{ display:none;  }
	.tonenipad   	{ display:none; }
}

 

/** Laptop+ **/
@media (min-width: 991px) {
 .tonenklein   	{ display:none;  }
}


/** Laptop **/
@media (min-width: 992px) and (max-width: 1199px) {
 .tonenklein   	{ display:none;  }
}


/** Large Tablets **/
@media (max-width: 992px) {

}


/** Tablets (landscape mode)  **/
@media (min-width: 768px) and (max-width: 991px) {

}


/** Tablets+  **/
@media (min-width: 768px) {

}


/** Tablets (portrait mode)  **/
@media (min-width : 481px) and (max-width : 768px) {

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 767px) {

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 600px) {

}


/** Smartphone portrait mode **/
@media (max-width: 480px) {

}


/** Normal phone portrait mode+ **/
@media (min-width: 320px) {
	
}


/* ------------------------------------------------------------------------
   Leesbaarheid: overschrijvingen op de hergebruikte stijl (app.css)
   ------------------------------------------------------------------------
   Gemeten met een contrastcontrole over alle beheerschermen (WCAG 2.1 AA):
   148 stukjes tekst haalden de norm niet. De grootste oorzaken zaten niet in
   losse schermen maar in de basis:

   1. app.css zet de linkkleur op #7997ca. Dat is 2,96 op 1 op wit, dus elke
      gewone link in de inhoud was te licht. Hij wordt hier de merkblauwe
      kleur (#1766c2, 4,98). Alleen binnen `main`: de links in de zijbalk en
      de topbalk staan op een donkere ondergrond en moeten licht blijven.
   2. De kleine hoofdletterlabels (.module-label, .dashboard-label) hadden een
      lichtblauwe kleur die alleen op de donkere paginakop leesbaar is - op een
      witte kaart meet ze 1,78. Ze zijn nu donker als standaard, licht binnen
      de kop.
   3. De koraalkleur en de statuskleuren werden zowel als vlak als als TEKST
      gebruikt. Als tekst zijn ze te licht; er is nu een donkere tekstvariant
      naast de vlakkleur.
   ------------------------------------------------------------------------ */

/* Alleen links in LOPENDE TEKST krijgen de merkblauwe kleur: `a` zonder eigen
   klasse, en links binnen een alinea, tabelcel, lijst of label. Bewust niet
   "elke a": knoppen, chips, kaarten en kruimelpaden hebben hun eigen kleur, en
   een algemene regel maakte de blauwe knop blauw-op-blauw - onleesbaar, met
   "Nieuwe reis" als een leeg vlak. Twee keer misgegaan (eerst met een lange
   :not()-ketting die juist de goede plekken overschreef), dus hier staat wat de
   regel WEL raakt in plaats van wat ze niet mag raken. */
body.beheer-dashboard a:not([class]),
body.beheer-dashboard main p a,
body.beheer-dashboard main small a,
body.beheer-dashboard main li a,
body.beheer-dashboard main span a,
body.beheer-dashboard main td a,
body.beheer-dashboard main label a {
    color: var(--lourdes-blue, #1766c2);
}

body.beheer-dashboard a:not([class]):hover,
body.beheer-dashboard main p a:hover,
body.beheer-dashboard main small a:hover,
body.beheer-dashboard main li a:hover,
body.beheer-dashboard main span a:hover,
body.beheer-dashboard main td a:hover,
body.beheer-dashboard main label a:hover {
    color: #0f4c93;
}

/* Labels: donker als standaard, licht in de paginakop. */
body.beheer-dashboard .dashboard-label { color: #33587f; }
body.beheer-dashboard .dashboard-kop .dashboard-label,
body.beheer-dashboard .dashboard-geen-reis .dashboard-label { color: #cfe2fb; }

/* Koraal en statuskleuren als TEKST. */
body.beheer-dashboard .module-knop-rood,
body.beheer-dashboard .reisbeheer-veld label span { color: #a63f2c; }
body.beheer-dashboard .hotelbeheer-status-actief { color: #1f6a4d; }
body.beheer-dashboard .hotelbeheer-status-volzet { color: #97402c; }

/* De roze `code`-kleur van bootstrap haalt 3,49 op de lichte kaarten. */
body.beheer-dashboard main code { color: #a12060; }

/* Initialen in het dossierpaneel: 4,42 op de lichtblauwe schijf. */
body.beheer-dashboard .dossier-avatar { color: #43536a; }

/* Lijstje binnen een dashboardmelding. De overboekings- en volzetmelding waren
   één alinea van drie regels waarin de hotels als opsomming in de lopende tekst
   stonden; als lijst lees je in één oogopslag hoeveel en welke. */
body.beheer-dashboard .dashboard-melding-lijst {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    margin: 7px 0 4px;
    padding: 0;
}

body.beheer-dashboard .dashboard-melding-lijst li {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(0, 20, 50, .09);
    border-radius: 5px;
    font-size: .74rem;
    font-weight: 600;
    padding: 2px 8px;
}

body.beheer-dashboard .dashboard-melding div > a {
    display: inline-flex;
    align-items: center;
    font-size: .78rem;
    font-weight: 700;
    gap: 5px;
    margin-top: 3px;
}

/* ── Openstaande reisinstellingen op het dashboard ───────────────────────────
   Eén regel per openstaand punt: links wat er ontbreekt en waarom het telt,
   rechts de knop die je naar het veld brengt waar je het invult. De knop is
   geen "meer info": hij zegt wat je er gaat doen ("Vroegboekvoorschot
   instellen"). Onder 640px zakt de knop onder de tekst en wordt hij volle
   breedte, zodat hij op tablet met de duim te raken blijft.
   Raakvlak 44px hoog conform B-018. */
body.beheer-dashboard .dashboard-checklist-lijst {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 10px 0 2px;
    padding: 0;
}

body.beheer-dashboard .dashboard-checklist-lijst li {
    align-items: center;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(0, 20, 50, .1);
    border-radius: 7px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: space-between;
    padding: 9px 11px;
}

body.beheer-dashboard .dashboard-checklist-tekst {
    flex: 1 1 260px;
    min-width: 0;
}

body.beheer-dashboard .dashboard-checklist-tekst strong {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.35;
}

body.beheer-dashboard .dashboard-checklist-tekst small {
    color: inherit;
    display: block;
    font-size: .74rem;
    line-height: 1.45;
    margin-top: 2px;
    opacity: .82;
}

body.beheer-dashboard .dashboard-checklist-knop {
    align-items: center;
    background: rgba(255, 255, 255, .95);
    border: 1px solid currentColor;
    border-radius: 6px;
    color: inherit;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .78rem;
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    margin-top: 0;
    min-height: 44px;
    padding: 0 14px;
    text-decoration: none;
    white-space: nowrap;
}

body.beheer-dashboard .dashboard-checklist-knop:hover { background: #fff; text-decoration: underline; }
body.beheer-dashboard .dashboard-checklist-knop:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

body.beheer-dashboard .dashboard-checklist-geen-recht {
    flex: 0 0 auto;
    font-size: .72rem;
    font-style: italic;
    opacity: .8;
}

@media (max-width: 640px) {
    body.beheer-dashboard .dashboard-checklist-lijst li { align-items: stretch; flex-direction: column; }
    body.beheer-dashboard .dashboard-checklist-knop { width: 100%; }
}