/* ===== LEASA IT — Compliance GAP Analyse ===== */
:root {
    --leasa-dark:    #1E4D8F;
    --leasa-mid:     #2563B0;
    --leasa-light:   #5BB3E0;
    --leasa-grad:    linear-gradient(135deg, #1E4D8F 0%, #5BB3E0 100%);
    --leasa-grad-h:  linear-gradient(135deg, #163d72 0%, #4a9ecf 100%);
    --bs-primary:            #1E4D8F;
    --bs-primary-rgb:        30, 77, 143;
}

/* === Tekstvakken: begrens vrije resize (anti-overflow) === */
textarea { resize: vertical; max-height: 45vh; }
textarea, .form-control, .form-select { max-width: 100%; }

/* === Bootstrap primary override === */
.btn-primary                        { background-color: var(--leasa-dark) !important; border-color: var(--leasa-dark) !important; }
.btn-primary:hover                  { background-color: var(--leasa-mid)  !important; border-color: var(--leasa-mid)  !important; }
.btn-outline-primary                { color: var(--leasa-dark) !important; border-color: var(--leasa-dark) !important; }
.btn-outline-primary:hover          { background-color: var(--leasa-dark) !important; color: #fff !important; }
.bg-primary                         { background-color: var(--leasa-dark) !important; }
.text-primary                       { color: var(--leasa-dark) !important; }
.badge.bg-primary                   { background-color: var(--leasa-dark) !important; }
.border-primary                     { border-color: var(--leasa-dark) !important; }
.progress-bar.bg-primary,
.progress-bar                       { background-color: var(--leasa-light) !important; }
.form-check-input:checked           { background-color: var(--leasa-dark); border-color: var(--leasa-dark); }
a                                   { color: var(--leasa-mid); }
a:hover                             { color: var(--leasa-dark); }

/* === Navbar === */
.navbar-leasa {
    background: var(--leasa-grad) !important;
    box-shadow: 0 2px 12px rgba(30,77,143,0.25);
}
.navbar-leasa .navbar-brand img     { height: 32px; }
.navbar-leasa .btn-outline-light    { border-color: rgba(255,255,255,0.5); }
.navbar-leasa .btn-outline-light:hover { background: rgba(255,255,255,0.15); border-color: #fff; }

/* Admin navbar */
.navbar-admin {
    background: linear-gradient(135deg, #0f2744 0%, #1E4D8F 100%) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* === Login pagina === */
.login-bg {
    background: var(--leasa-grad);
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.login-card {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(30,77,143,0.3);
}
.login-logo { height: 56px; }

/* === Sidebar === */
.sidebar-item {
    color: #495057;
    font-size: 0.82rem;
    line-height: 1.3;
}
.sidebar-item:hover  { background: #e9ecef; color: #212529; }
.sidebar-item.active { background: var(--leasa-dark); color: #fff !important; }
.sidebar-item.active .badge { background: rgba(255,255,255,0.25) !important; color: #fff; }

/* === Cards & algemeen === */
body        { background-color: #f0f4f8; font-family: 'Segoe UI', system-ui, sans-serif; }
.card       { border-radius: 10px; }
.navbar     { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

.control-card               { transition: box-shadow 0.2s; }
.control-card:hover         { box-shadow: 0 4px 16px rgba(30,77,143,0.12) !important; }

.score-btn  { font-size: 0.78rem; padding: 3px 10px; border-radius: 20px; }
.btn-xs     { font-size: 0.72rem; padding: 2px 8px; border-radius: 20px; line-height: 1.4; }

/* Sub-vragen panel */
.sub-vraag  { border-bottom: 1px solid #e8eff8; padding-bottom: 6px; }
.sub-vraag:last-of-type { border-bottom: none; }

.table th {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6c757d;
}
.progress   { border-radius: 10px; }

/* === Readonly banner === */
.readonly-banner {
    background: linear-gradient(90deg, #fff3cd, #ffeaa7);
    border-left: 4px solid #f39c12;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.88rem;
}

/* === PDF print styles === */
@media print {
    .navbar, .btn, .no-print       { display: none !important; }
    body                           { background: white !important; font-size: 10pt; font-family: Arial, sans-serif; }
    .rapport-page                  { max-width: 100% !important; padding: 0 !important; }
    .card                          { border: 1px solid #dee2e6 !important; box-shadow: none !important; page-break-inside: avoid; }
    .card-body                     { padding: 0.5rem !important; }
    .page-break                    { page-break-before: always; }
    h4, h5, h6                     { color: #1E4D8F !important; }
    a                              { color: inherit !important; text-decoration: none !important; }

    /* Tabellen passend op pagina */
    table                          { width: 100% !important; font-size: 9pt !important; border-collapse: collapse !important; }
    th, td                         { padding: 4px 6px !important; word-break: break-word; }
    thead                          { display: table-header-group; }
    tr                             { page-break-inside: avoid; }

    /* Rapport header compacter */
    .rapport-header                { padding: 1rem !important; margin-bottom: 0.75rem !important; }
    .rapport-header .score-ring    { width: 60px !important; height: 60px !important; font-size: 1rem !important; }
    .stat-box .num                 { font-size: 1.2rem !important; }

    /* Section titles */
    .section-title                 { margin-top: 1rem !important; font-size: 8pt !important; }

    /* Actieplan tabel niet afsnijden */
    .actie-row td                  { font-size: 8.5pt !important; }

    /* Vergelijkingstabel */
    .table-responsive              { overflow: visible !important; }
}

/* === Compact print helper === */
.rapport-page { max-width: 900px; margin: 0 auto; padding: 1.5rem; }

/* =======================================================================
   Zijmenu (sidebar) — Leasa-huisstijl, model zorgapp
   ======================================================================= */
:root { --gap-sb-w: 256px; --gap-sb-cw: 66px; }

body.has-sidebar              { padding-left: var(--gap-sb-w); transition: padding-left .2s ease; }
body.has-sidebar.sb-collapsed { padding-left: var(--gap-sb-cw); }

.gap-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: var(--gap-sb-w);
    display: flex; flex-direction: column; z-index: 1040;
    background: linear-gradient(180deg, #143257 0%, #1E4D8F 100%);
    color: #e8eef6; box-shadow: 2px 0 16px rgba(0,0,0,.18);
    transition: width .2s ease, transform .2s ease; overflow: hidden;
}
.gap-sidebar.sb-admin          { background: linear-gradient(180deg, #0c1f38 0%, #16335c 100%); }
body.sb-collapsed .gap-sidebar { width: var(--gap-sb-cw); }

/* Top / merk */
.sb-top   { padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.10); }
.sb-brand { display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; overflow: hidden; min-height: 30px; }
.sb-logo  { height: 28px; filter: brightness(0) invert(1); }
.sb-logo-mark { display: none; }   /* merk-only, alleen zichtbaar in ingeklapte balk */
.sb-adminbadge { background: #ffc107; color: #14233b; font-size: .58rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; }
body.sb-collapsed .sb-top   { padding: 18px 0 14px; text-align: center; }
body.sb-collapsed .sb-brand { justify-content: center; }
/* Ingeklapt: breed woordmerk verbergen, vierkant merk-icoon gecentreerd tonen.
   Geen wit-filter: het icoon heeft eigen kleuren (blauw schild op wit). */
body.sb-collapsed .sb-logo-full { display: none; }
body.sb-collapsed .sb-logo-mark { display: block; height: 28px; width: 28px; filter: none; }
body.sb-collapsed .sb-adminbadge { display: none; }

/* Navigatie */
.sb-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 10px; }
.sb-nav ul { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.sb-nav li { list-style: none !important; }
.sb-nav li::marker { content: "" !important; }
.sb-nav::-webkit-scrollbar       { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }

.sb-link, .sb-grouprow {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0;
    border-radius: 10px; color: rgba(255,255,255,.82); text-decoration: none;
    font-size: .92rem; white-space: nowrap; position: relative; cursor: pointer; border: 0; width: 100%;
    background: transparent; text-align: left;
}
.sb-link:hover, .sb-grouprow:hover { background: rgba(255,255,255,.10); color: #fff; }
.sb-link.active {
    background: rgba(255,255,255,.16); color: #fff; font-weight: 600;
    box-shadow: inset 3px 0 0 var(--leasa-light);
}
.sb-ico   { width: 20px; text-align: center; font-size: 1rem; flex: 0 0 auto; }
.sb-label { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.sb-badge { background: #e23b4e; color: #fff; font-size: .68rem; font-weight: 700; border-radius: 10px; padding: 1px 7px; flex: 0 0 auto; }
.sb-sep   { height: 1px; background: rgba(255,255,255,.12); margin: 9px 14px; }

/* Sectiekop (uitklapbaar) */
.sb-section    { text-transform: uppercase; letter-spacing: .045em; font-size: .74rem; font-weight: 700; color: rgba(255,255,255,.62); }
.sb-grouprow:hover .sb-section { color: #fff; }
.sb-caret-ico  { font-size: .72rem; transition: transform .18s ease; color: rgba(255,255,255,.55); flex: 0 0 auto; }
.sb-group.open .sb-caret-ico { transform: rotate(180deg); }
.sb-sub { list-style: none; margin: 0 2px 4px; padding: 0; max-height: 0; overflow: hidden; transition: max-height .24s ease; }
.sb-group.open .sb-sub { max-height: 60vh; overflow-y: auto; }
.sb-sublink {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 34px; margin: 1px 0;
    border-radius: 9px; color: rgba(255,255,255,.74); text-decoration: none; font-size: .85rem; white-space: nowrap;
}
.sb-sublink:hover  { background: rgba(255,255,255,.10); color: #fff; }
.sb-sublink.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--leasa-light); }
.sb-subdot   { width: 6px; height: 6px; border-radius: 50%; background: var(--leasa-light); opacity: .8; flex: 0 0 auto; }
.sb-sub-meta { opacity: .6; font-size: .76rem; margin-left: 4px; }
.sb-sub-empty { padding: 7px 12px 7px 34px; font-size: .78rem; opacity: .5; }

/* Geneste norm-subgroep (Analyses/Projectplannen -> norm -> datum) */
.sb-normgroup { list-style: none; }
.sb-normrow {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 30px; margin: 1px 0;
    border-radius: 8px; color: rgba(255,255,255,.8); cursor: pointer; font-size: .83rem; white-space: nowrap;
}
.sb-normrow:hover { background: rgba(255,255,255,.10); color: #fff; }
.sb-normname { flex: 1 1 auto; font-weight: 600; letter-spacing: .01em; }
.sb-norm-caret { font-size: .68rem; transition: transform .18s ease; color: rgba(255,255,255,.55); flex: 0 0 auto; }
.sb-normgroup.open .sb-norm-caret { transform: rotate(180deg); }
.sb-normsub { list-style: none; margin: 0 0 2px; padding: 0; max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.sb-normgroup.open .sb-normsub { max-height: 40vh; overflow-y: auto; }
.sb-normsub .sb-sublink { padding-left: 46px; }
body.sb-collapsed .sb-normrow, body.sb-collapsed .sb-normsub { display: none !important; }

/* Onderkant */
.sb-bottom { padding: 8px 10px 10px; border-top: 1px solid rgba(255,255,255,.12); }
.sb-pin    { color: rgba(255,255,255,.9); }
.sb-readonly { display: flex; align-items: center; gap: 12px; padding: 7px 12px; color: #ffd66e; font-size: .8rem; white-space: nowrap; }
.sb-user   { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-top: 2px; color: rgba(255,255,255,.85); font-size: .84rem; white-space: nowrap; }
.sb-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--leasa-light); color: #0c1f38; font-weight: 700;
             display: flex; align-items: center; justify-content: center; flex: 0 0 auto; text-transform: uppercase; font-size: .85rem; }
.sb-logout-ico { margin-left: auto; color: rgba(255,255,255,.7); padding: 4px 6px; border-radius: 7px; flex: 0 0 auto; }
.sb-logout-ico:hover { background: rgba(226,59,78,.85); color: #fff; }
.sb-collapse {
    display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 4px; padding: 9px 12px;
    background: transparent; border: 0; border-radius: 10px; color: rgba(255,255,255,.6); font-size: .84rem; cursor: pointer; text-align: left;
}
.sb-collapse:hover { background: rgba(255,255,255,.10); color: #fff; }
body.sb-collapsed .sb-collapse .sb-ico { transform: rotate(180deg); }

/* Ingeklapt: alleen iconen */
body.sb-collapsed .sb-label,
body.sb-collapsed .sb-caret-ico,
body.sb-collapsed .sb-sub,
body.sb-collapsed .sb-sep,
body.sb-collapsed .sb-logout-ico { display: none !important; }
body.sb-collapsed .sb-link,
body.sb-collapsed .sb-grouprow,
body.sb-collapsed .sb-user,
body.sb-collapsed .sb-readonly,
body.sb-collapsed .sb-collapse   { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
body.sb-collapsed .sb-badge      { position: absolute; top: 4px; right: 8px; padding: 0 5px; }
body.sb-collapsed .sb-avatar     { margin: 0; }
/* Ingeklapt is de balk leeg op merk, uitklapknop en avatar na: rustig beeld,
   en klikken op de balk zelf klapt hem uit. */
body.sb-collapsed .sb-nav        { display: none; }
body.sb-collapsed .gap-sidebar,
body.sb-collapsed .gap-sidebar * { cursor: pointer; }

/* Mobiel: off-canvas + hamburger */
.sb-hamburger {
    display: none; position: fixed; top: 12px; left: 12px; z-index: 1050;
    width: 42px; height: 42px; border: 0; border-radius: 10px;
    background: var(--leasa-dark); color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; }

@media (max-width: 991.98px) {
    body.has-sidebar, body.has-sidebar.sb-collapsed { padding-left: 0; }
    .gap-sidebar              { transform: translateX(-100%); width: var(--gap-sb-w) !important; }
    body.sb-open .gap-sidebar { transform: none; }
    body.sb-collapsed .sb-label,
    body.sb-collapsed .sb-caret-ico,
    body.sb-collapsed .sb-sub,
    body.sb-collapsed .sb-logout-ico { display: revert !important; }
    /* Op mobiel is de balk niet echt ingeklapt -> volledig logo terug */
    body.sb-collapsed .sb-logo-full { display: block; }
    body.sb-collapsed .sb-logo-mark { display: none; }
    body.sb-collapsed .sb-link,
    body.sb-collapsed .sb-grouprow,
    body.sb-collapsed .sb-user,
    body.sb-collapsed .sb-readonly,
    body.sb-collapsed .sb-collapse   { justify-content: flex-start; gap: 12px; padding-left: 12px; padding-right: 12px; }
    .sb-hamburger             { display: flex; align-items: center; justify-content: center; }
    body.sb-open .sb-backdrop { display: block; }
    .sb-collapse              { display: none; }   /* op mobiel inklappen niet nodig */
}

@media print {
    .gap-sidebar, .sb-hamburger, .sb-backdrop { display: none !important; }
    body.has-sidebar { padding-left: 0 !important; }
}

/* =======================================================================
   MOBIELE LAAG 1 — toegevoegd 2026-07-03 (Leasa IT compliance)
   Alleen actief op telefoons (max-width: 767.98px). Desktop blijft volledig
   ongemoeid: op bredere schermen negeert de browser dit hele blok.
   Puur additief — geen bestaande regel gewijzigd of verwijderd.
   ======================================================================= */
@media (max-width: 767.98px) {

    /* --- Ruimte: grote pagina-padding terugbrengen op smal scherm --- */
    .container-fluid.p-4  { padding: 1rem !important; }
    .container-fluid.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .container.p-4, .container.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .card-body { padding: 1rem; }

    /* --- Typografie iets leesbaarder --- */
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.15rem; }

    /* --- Tikdoelen: knoppen groot genoeg voor vingers (~44px) --- */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }
    /* In tabellen compacter houden zodat rijen niet te hoog worden */
    .table .btn, .table .btn-sm { min-height: 34px; }

    /* --- Formuliervelden: 44px hoog + 16px font (voorkomt auto-zoom op iOS) --- */
    .form-control, .form-select { min-height: 44px; font-size: 1rem; }

    /* --- Tabellen: soepel horizontaal scrollen met nette rand/hint --- */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 8px;
    }
    .table-responsive > .table { margin-bottom: 0; }

    /* --- Koprijen (titel links, knop rechts) mogen afbreken i.p.v. persen --- */
    .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }

    /* --- Zoekbalk / input-group over de volle breedte --- */
    .input-group { max-width: 100% !important; }

    /* --- Modals dichter bij de schermranden, meer ademruimte --- */
    .modal-dialog { margin: .5rem; }
}

/* =======================================================================
   MOBIELE LAAG 2 — verfijningen 2026-07-03 (Leasa IT compliance)
   Alleen actief op telefoons (max-width: 767.98px). Desktop ongemoeid.
   Puur additief — geen bestaande regel gewijzigd of verwijderd.
   ======================================================================= */
@media (max-width: 767.98px) {

    /* --- 1. Hamburger-knop niet meer over de titel/eerste veld ---
       De zwevende hamburger staat op top:12px, 42px hoog. We reserveren
       daarvoor een strook bovenaan de pagina-inhoud. */
    body.has-sidebar { padding-top: 58px; }

    /* --- 2. Brede tabellen: leesbare minimumbreedte i.p.v. platdrukken ---
       Zo krijgt elke kolom genoeg ruimte en scrollt de tabel netjes
       horizontaal in zijn .table-responsive-omhulsel (geen overlap meer). */
    .table-responsive > .table { min-width: 640px; }

    /* --- 3. Assessment: per-subvraag antwoordknoppen ONDER de vraagtekst
       i.p.v. ernaast (voorkomt dat de vraag in een smalle kolom wordt geperst). */
    .col-md-7 .d-flex.align-items-center.justify-content-between { flex-wrap: wrap; }
    .col-md-7 .d-flex.align-items-center.justify-content-between > .flex-shrink-0 {
        flex-basis: 100%;
        margin-left: 0 !important;
        margin-top: .45rem;
        justify-content: flex-start !important;
    }

    /* --- 4. Kaart-rijen met tekst + badge/knop: netjes afbreken i.p.v.
       overlappen (o.a. klant-kaartjes op het admin-dashboard). */
    .card .d-flex.align-items-center.justify-content-between { flex-wrap: wrap; gap: .4rem; }
}

/* Klantweergave-balk (38px, fixed): zijpanelen en modals eronder laten beginnen
   zodat de paneelkop niet wegvalt achter de oranje balk. */
body.has-namens .offcanvas { top: 38px; height: calc(100vh - 38px); }
body.has-namens .modal { padding-top: 38px; }

/* Slotje bij menu-items die in het app-abonnement zitten: rechts uitgelijnd,
   zodat het bij labels van verschillende lengte op één lijn staat en niet
   achter de tekst aan springt. */
.sb-sublink .sb-label { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.sb-slot {
    margin-left: auto;
    font-size: .62rem;
    opacity: .5;
    flex: 0 0 auto;
    padding-left: 10px;
}
.sb-sublink:hover .sb-slot { opacity: .85; }

/* Herstellen van open menugroepen bij het laden van een pagina mag niet
   zichtbaar animeren: de groep vouwde dan bij elke paginawissel open, wat
   onrustig oogt. Deze klasse staat een tiende seconde aan tijdens het
   herstellen en zet de overgang zolang uit. */
body.sb-geen-animatie,
body.sb-geen-animatie .gap-sidebar,
body.sb-geen-animatie .gap-sidebar *,
body.sb-geen-animatie .gap-sidebar .sb-sub,
body.sb-geen-animatie .gap-sidebar .sb-normsub { transition: none !important; animation: none !important; }

/* ───────────────────────────────────────────────────────────────────────────
   Registerschermen: één gedeelde opmaak
   ---------------------------------------------------------------------------
   De registers (belanghebbenden, middelen, risico's, incidenten, jaarkalender,
   scope en rollen, voortgang) hadden elk hun eigen breedtes: de intro tot 62rem,
   een kaart tot 52rem, een tabel over de volle breedte. Alles begon links maar
   eindigde ergens anders, en dat maakte de schermen onrustig.

   Hier staat één maat. Blokken lijnen links én rechts uit, lopende tekst houdt
   een leesbare regellengte, en formulieren krijgen overal dezelfde ritmiek.
   ─────────────────────────────────────────────────────────────────────────── */

.reg-pagina { max-width: 1460px; margin-left: auto; margin-right: auto; }

/* Lopende tekst blijft leesbaar: een regel van 130 tekens leest niemand. */
.reg-pagina .reg-lees { max-width: 60rem; }

/* Kop van de pagina: titel, uitleg en de knop rechts op één lijn. */
.reg-kop { display: flex; justify-content: space-between; align-items: flex-start;
           gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.15rem; }
.reg-kop h4 { font-weight: 700; letter-spacing: -.012em; margin: 0 0 .3rem; }
.reg-kop .reg-kop-akties { display: flex; gap: .5rem; flex-wrap: wrap; flex-shrink: 0;
                           align-items: center; margin-left: auto; align-self: flex-end; }
.reg-kop .reg-kop-akties > form { margin: 0; }

/* Alle kaarten even breed en met dezelfde rand. */
.reg-pagina .card { border: 1px solid #e6ebf2; border-radius: 10px;
                    box-shadow: 0 1px 2px rgba(16,32,51,.04); }
.reg-pagina .card + .card { margin-top: 1.1rem; }
.reg-pagina .card-body { padding: 1.15rem 1.3rem; }

/* Kaartkop binnen een kaart: rustiger dan een <h6> los boven de inhoud. */
.reg-kaartkop { font-size: .95rem; font-weight: 650; margin: 0 0 .3rem;
                letter-spacing: -.006em; }
.reg-kaartuitleg { font-size: .85rem; color: #62707e; line-height: 1.55;
                   max-width: 58rem; margin-bottom: 1rem; }

/* Tellers boven een tabel: één rij, gelijke hoogte, rustige kleuren. */
.reg-tellers { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
               margin-bottom: .9rem; }
.reg-tellers .badge { font-weight: 600; padding: .5rem .8rem; font-size: .74rem; }

/* Formulierblokken: labels compact, velden op een vast ritme. */
.reg-pagina .form-label { font-size: .78rem; font-weight: 600; color: #48545f;
                          margin-bottom: .25rem; }
.reg-pagina .form-text { font-size: .74rem; color: #7a8792; line-height: 1.45; }
.reg-pagina textarea.form-control { line-height: 1.55; }

/* Tekstvakken met een voorgevulde standaardtekst: hoog genoeg zodat de tekst
   erin past. Een vak met een eigen schuifbalk oogt als een fout. */
.reg-veld-hoog { min-height: 8.5rem; }
.reg-veld-hoger { min-height: 11rem; }

/* Tabellen in de registers. */
.reg-tabel { margin-bottom: 0; }
.reg-tabel th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
                color: #6c7885; font-weight: 600; border-bottom: 1px solid #e6ebf2;
                padding: .55rem .7rem; white-space: nowrap; }
.reg-tabel td { font-size: .83rem; vertical-align: top; padding: .6rem .7rem;
                border-bottom: 1px solid #f0f3f6; }
.reg-tabel tbody tr:hover { background: #f8fafc; }

/* Verwijzing naar een leeg veld: opvallend genoeg om op te pakken, niet zo
   fel dat een half ingevuld register alarmerend oogt. */
.reg-leeg { color: #a2721f; font-style: italic; }

/* Twee kolommen naast elkaar, met gelijke hoogte en genoeg tussenruimte. */
.reg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 62rem) { .reg-duo { grid-template-columns: 1fr; } }

/* ───────────────────────────────────────────────────────────────────────────
   Diepte in de registerschermen
   ---------------------------------------------------------------------------
   Lange uitleg op een egaal wit vlak leest als een muur: het oog vindt geen
   begin en geen eind. De verleiding is dan om labels en badges toe te voegen,
   maar dat maakt een scherm juist onrustiger.

   Deze laag doet het met licht in plaats van met elementen. Een kaart krijgt
   een nauwelijks zichtbaar verloop waardoor hij van de pagina afkomt, de kop
   van een kaart zit in een eigen lichte zone, en tekst krijgt meer contrast en
   lucht. Geen enkele ingreep valt op zichzelf op; samen geven ze het scherm
   reliëf.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. De pagina zelf: van boven iets lichter, zodat de inhoud naar voren komt
      in plaats van op een egaal grijs vlak te liggen. */
body { background-image: linear-gradient(180deg, #f6f9fc 0%, #eef2f7 340px, #eef2f7 100%);
       background-attachment: fixed; }

/* 2. Kaarten komen van de pagina af met een zacht verloop en een randlicht.
      Het verloop loopt over de eerste 90 pixels; daaronder is de kaart wit,
      zodat lange lappen tekst rustig blijven. */
.reg-pagina .card {
    background: linear-gradient(180deg, #fbfcfe 0%, #ffffff 90px);
    border: 1px solid #e3e9f1;
    box-shadow: 0 1px 2px rgba(22,42,68,.05), 0 6px 18px -12px rgba(22,42,68,.18);
}

/* 3. De kop van een kaart krijgt lucht en een haarlijn, zodat duidelijk is waar
      het blok begint en waar de inhoud. */
.reg-kaartkop { color: #1c2b3a; padding-bottom: .5rem; margin-bottom: .6rem;
                border-bottom: 1px solid #edf1f6; }

/* 4. Uitlegtekst: meer contrast en meer regelafstand. Grijs op wit met krappe
      regels is precies waardoor tekst wegvalt. */
.reg-kaartuitleg { color: #566372; line-height: 1.62; font-size: .855rem; }
.reg-pagina .reg-lees { color: #56636f; line-height: 1.62; }

/* 5. Tabellen: kopregel in een eigen tint met een verloop, en om-en-om een
      vleug kleur in de rijen. Dat leidt het oog langs een lange lijst zonder
      dat er ook maar één streep bij komt. */
.reg-tabel thead th,
.reg-pagina table thead th,
table.table thead th,
table.table thead.table-light th,
table.table thead.table-dark th {
    background: linear-gradient(90deg, #e8f1f9, #f2f7fb 70%, #f7fafc);
    /* Dezelfde blauwe regel als onder een subkop in een venster, zodat een
       kopregel er overal hetzelfde uitziet. */
    border-bottom: 2px solid #1E4D8F;
    color: #1f4e79;
    font-weight: 700;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-top: .55rem;
    padding-bottom: .55rem;
}
/* De subkop heeft zijn accent links; de tabelkop krijgt hem op de eerste cel,
   zodat de rij als geheel hetzelfde begin heeft. */
.reg-tabel thead th:first-child,
.reg-pagina table thead th:first-child,
table.table thead th:first-child {
    border-left: 3px solid #1E4D8F;
}
.reg-tabel tbody tr:nth-child(even) { background: #fbfcfe; }
.reg-tabel tbody tr:hover           { background: #f2f7fd; }
/* Sectiekoppen binnen een tabel (soort middel, hoofdstuk) mogen zwaarder
   wegen dan een gewone rij, maar hoeven geen eigen kleurvlak. */
.reg-tabel tbody tr.sectie td, .reg-pagina .sectie td {
    background: linear-gradient(180deg, #eef3f9 0%, #e9eff7 100%);
    color: #46586b; border-bottom: 1px solid #dfe7f1;
}

/* 6. Losse tip- en waarschuwingsblokken: zacht getint in plaats van vlak wit,
      met wat meer binnenruimte zodat de tekst niet tegen de rand plakt. */
.reg-pagina .alert-light {
    background: linear-gradient(180deg, #fbfcfe 0%, #f6f9fc 100%);
    border-color: #e3e9f1; padding: .85rem 1.05rem; line-height: 1.6;
}

/* 7. Formulierblokken in een kaart: een heel licht vlak eromheen scheidt
      "invullen" van "lezen". Alleen daar waar het echt een formulier is. */
.reg-formvlak { background: #f8fafd; border: 1px solid #eaeff6; border-radius: 8px;
                padding: 1rem 1.1rem; }

/* ───────────────────────────────────────────────────────────────────────────
   Donkere paginakop
   ---------------------------------------------------------------------------
   Een pagina die begint met zwarte tekst op wit heeft geen kop, alleen een
   eerste alinea. Een donker vlak bovenaan geeft het scherm een anker: je ziet
   in één oogopslag waar je bent, en de witte kaarten eronder komen daardoor
   vanzelf naar voren.

   De tint is dieper dan de zijbalk, zodat de twee zich van elkaar
   onderscheiden in plaats van in elkaar over te lopen. Het verloop is schuin
   en zacht; een egaal donker blok oogt log.
   ─────────────────────────────────────────────────────────────────────────── */

.reg-kop-donker {
    background: linear-gradient(118deg, #14293f 0%, #1b3e64 52%, #23548a 100%);
    border-radius: 12px;
    padding: 1.15rem 1.4rem 1.2rem;
    margin-bottom: 1.15rem;
    color: #fff;
    box-shadow: 0 1px 2px rgba(12,26,42,.16), 0 10px 26px -16px rgba(12,26,42,.55);
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1.5rem; flex-wrap: wrap;
}

.reg-kop-donker h4 {
    color: #fff; font-weight: 650; font-size: 1.28rem;
    letter-spacing: -.014em; margin: 0 0 .35rem;
}
/* De organisatienaam achter de titel: onderscheidend maar ondergeschikt. */
.reg-kop-donker h4 span {
    color: rgba(255,255,255,.62) !important; font-weight: 400; font-size: .8rem;
}

/* Uitleg op donker: zuiver wit leest schreeuwerig, te doorzichtig verdwijnt.
   Rond de 80 procent zit het punt waarop het rustig blijft en toch leesbaar is. */
.reg-kop-donker .reg-lees,
.reg-kop-donker .text-muted {
    color: rgba(255,255,255,.80) !important;
    line-height: 1.6; font-size: .855rem;
}
.reg-kop-donker strong { color: #fff; }
.reg-kop-donker a { color: #a8d4f5; }

/* Knoppen in de donkere kop: wit als hoofdactie, anders een lichte omlijning. */
.reg-kop-donker .btn-primary {
    background-color: #fff !important; border-color: #fff !important;
    color: #14293f !important; font-weight: 600;
}
.reg-kop-donker .btn-primary:hover {
    background-color: #e8f1fb !important; border-color: #e8f1fb !important;
    color: #14293f !important;
}
.reg-kop-donker .btn-outline-secondary,
.reg-kop-donker .btn-outline-primary {
    color: #fff !important; border-color: rgba(255,255,255,.5) !important;
    background: transparent !important;
}
.reg-kop-donker .btn-outline-secondary:hover,
.reg-kop-donker .btn-outline-primary:hover {
    background: rgba(255,255,255,.14) !important; border-color: #fff !important;
}

/* De terugknop hoort bij de kop: haal de losse regel eboven weg door hem
   binnen het donkere vlak op te nemen als dat zo gebruikt wordt. */
.reg-kop-donker .reg-terug {
    color: rgba(255,255,255,.72); font-size: .78rem; text-decoration: none;
    display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .45rem;
}
.reg-kop-donker .reg-terug:hover { color: #fff; }

@media (max-width: 48rem) {
    .reg-kop-donker { padding: 1rem 1.1rem; border-radius: 10px; }
    .reg-kop-donker h4 { font-size: 1.14rem; }
}

/* Merkiconen in de donkere kop zijn donkerblauw en zouden wegvallen tegen de
   achtergrond. Met dit filter worden ze wit, iets gedempt zodat ze de titel
   niet overstemmen. */
.reg-kop-donker .brand-ico { filter: brightness(0) invert(1); opacity: .88; }


/* ── Invulvensters van de registers ──────────────────────────────────────
   De formulieren waren één lange rij velden zonder kop of rustpunt, waardoor
   je bij het invullen kwijtraakte waar je was. Nu per venster een paar
   genummerde blokken met een kop, en binnen een blok een raster dat zich naar
   de schermbreedte voegt. Velden die alleen bij een bepaalde keuze horen
   verschijnen alleen dan, zodat niemand hoeft te raden wat hij mag overslaan.

   Ruimte is hier geen opsmuk: zonder witruimte tussen de blokken leest een
   formulier van dertig velden als één muur en ziet niemand meer waar een
   onderwerp begint. */
.modal-body.mv-body { padding: 1.1rem 1.25rem; background: #fbfcfd; }
.mv-blok { border: 1px solid #e4eaf1; border-radius: 10px; padding: 1.05rem 1.15rem 1.15rem;
           margin-bottom: 1.1rem; background: #fff; box-shadow: 0 1px 2px rgba(20,40,70,.04); }
.mv-blok:last-child { margin-bottom: 0; }
.mv-blok > .mv-kop { display: flex; align-items: baseline; gap: .55rem; margin: 0 0 .95rem;
           padding-bottom: .55rem; border-bottom: 1px solid #eef2f7; }
.mv-blok > .mv-kop b { font-size: .85rem; font-weight: 650; color: #1c2b3a; letter-spacing: .01em; }
.mv-blok > .mv-kop span { font-size: .74rem; color: #8593a4; font-weight: 400; }
.mv-blok > .mv-kop::before { content: counter(mv-teller); counter-increment: mv-teller;
           flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: 50%;
           background: #2e5c8a; color: #fff; font-size: .7rem; font-weight: 700;
           display: inline-flex; align-items: center; justify-content: center;
           position: relative; top: .1rem; }
.mv-body { counter-reset: mv-teller; }
/* Velden staan onder elkaar: vraag, antwoord, volgende vraag. De klassen
   k2 en k3 blijven bestaan zodat bestaande vensters niet hoeven te
   veranderen, maar ze stapelen nu allemaal. Wie echt een rij nodig heeft
   (een verplichting met zijn datums) bouwt die met een eigen klasse. */
.mv-rooster { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.mv-rooster.k2, .mv-rooster.k3 { grid-template-columns: 1fr; }
.mv-rooster .breed { grid-column: 1 / -1; }
.mv-veld label { font-size: .78rem; font-weight: 500; color: #46586c; margin-bottom: .4rem;
           display: block; line-height: 1.3; }
/* Vaste regel: elk label reserveert twee regels en zet de tekst onderaan,
   tegen zijn veld aan. Zo beginnen velden naast elkaar altijd op dezelfde
   hoogte, ook als het ene label een regel is en het andere twee. */
.mv-veld > label:not(.mv-vink) { min-height: 0; display: block; }
.mv-veld .form-text { font-size: .71rem; margin-top: .3rem; color: #8593a4; line-height: 1.35; }
.mv-uit { display: none; }
.mv-uitkomst { font-size: .8rem; color: #33587d; background: #f2f7fc; border: 1px solid #dde8f3;
           border-radius: 7px; padding: .5rem .75rem; line-height: 1.4; }
.mv-uitkomst:empty { display: none; }

/* Aanvinklijsten: elke regel een eigen regel, met ruimte tussen vinkje en tekst. */
.mv-keuzelijst { max-height: 12rem; overflow-y: auto; overflow-x: hidden;
           border: 1px solid #dee4ec; border-radius: 7px; padding: .45rem .6rem; background: #fff; }
.mv-keuzelijst label { display: flex; align-items: flex-start; gap: .5rem; font-size: .79rem;
           font-weight: 400; color: #33404f; padding: .28rem .15rem; margin: 0; cursor: pointer;
           line-height: 1.35; border-radius: 4px; }
.mv-keuzelijst label:hover { background: #f5f8fb; }
.mv-keuzelijst label input { margin: .2rem 0 0; flex: 0 0 auto; }
.mv-keuzelijst label > span, .mv-keuzelijst label > strong { flex: 0 0 auto; }
.mv-leeg { font-size: .78rem; color: #8a94a0; font-style: italic; padding: .3rem .15rem; }

/* Vinkje als veld: een vinkje met uitleg is invoer, geen lopende tekst. Het
   krijgt daarom hetzelfde kader als de andere velden; de uitleg staat eronder
   als form-text, buiten het kader. Vast stramien voor alle vensters. */
.mv-veld label.mv-vink { display: flex; margin-bottom: 0; }
.mv-vink { display: flex; align-items: center; gap: .5rem; border: 1px solid #dee4ec;
           border-radius: 7px; background: #fff; padding: .45rem .65rem; cursor: pointer;
           margin: 0; width: 100%; }
.mv-vink:hover { border-color: #c3d6ea; background: #f6f9fd; }
.mv-vink input { margin: 0; flex: 0 0 auto; }
.mv-vink span { font-size: .79rem; font-weight: 500; color: #33404f; line-height: 1.3; }

/* Toegevoegde regel in een beheerlijstje (contactpersonen, bijlagen en wat er
   nog bijkomt): naam vet, eigenschappen als chip of gedempte tekst, de
   verwijderknop rechts, elke regel een eigen kader. Vast stramien. */
.item-rij { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .55rem;
           padding: .38rem .6rem; border: 1px solid #e4eaf1; border-radius: 7px;
           background: #fff; margin-bottom: .35rem; font-size: .8rem; }
.item-rij b { font-weight: 600; color: #1c2b3a; }
.item-rij .dempen { color: #8593a4; }
.item-chip { font-size: .67rem; background: #eef2f7; color: #5a6b7f; border: 1px solid #dfe6ee;
           border-radius: 4px; padding: .06rem .4rem; white-space: nowrap; text-transform: uppercase;
           letter-spacing: .03em; }
.item-rij .weg { margin-left: auto; border: 0; background: none; color: #b3261e;
           cursor: pointer; padding: 0 .15rem; line-height: 1; }
.item-rij .weg:hover { color: #8f1d17; }

/* De geopende regel kleurt mee met zijn detailpaneel, met een blauw accent
   links, zodat je altijd ziet bij welke regel het paneel hoort. Werkt
   automatisch voor elk register met het uitklapstramien (rz-detail). */
/* Vensters die langer zijn dan het scherm moeten scrollen. Bootstrap regelt
   dat met modal-dialog-scrollable, maar alleen als de hoogtebeperking van de
   vensterinhoud naar de body doorloopt. Zit er een form tussen (en dat is bij
   ons meestal zo, want het venster is een formulier), dan breekt die keten en
   loopt de inhoud onder de schermrand door zonder scrollbalk. Deze regel geeft
   de form dezelfde opbouw, zodat de body weer scrolt. */
.modal-dialog-scrollable .modal-content > form {
  display: flex; flex-direction: column; overflow: hidden; max-height: 100%; min-height: 0;
}
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; min-height: 0; }
/* Vangnet: een venster zonder scrollable-klasse mag nooit hoger worden dan het
   scherm; dan scrollt de vensterlaag zelf. */
.modal { overflow-y: auto; }

tr.rz-detail>td{background:#f4f8fc;border-top:0;padding:.7rem .8rem .9rem;
  box-shadow:inset 0 6px 6px -6px rgba(20,40,70,.08)}
tr.rz-detail.dicht{display:none}
tr[hidden]+tr.rz-detail{display:none}

/* Uitklapdetail bij een registerregel. Stond eerst als los stijlblok in
   leveranciers.php; daardoor viel het detail in de meldregisters terug op
   platte tekst zonder kaders. Hoort centraal, want elk register met het
   uitklapstramien gebruikt dezelfde structuur. */
.lvd-grid{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:.8rem;align-items:stretch}
@media (max-width: 56rem){.lvd-grid{grid-template-columns:1fr}}
.lvd-vak{background:#fff;border:1px solid #e2eaf2;border-radius:10px;padding:.65rem .9rem .8rem}
.lvd-kop{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#2e5c8a;
  margin-bottom:.45rem;padding-bottom:.35rem;border-bottom:1px solid #e8eef5}
.lvd-rij{display:grid;grid-template-columns:122px 1fr;gap:.6rem;padding:.3rem 0;
  border-bottom:1px solid #f2f6fa;font-size:.8rem;align-items:start;color:#1f2d3b}
.lvd-rij:last-child{border-bottom:0}
.lvd-lab{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#8593a4;padding-top:.18rem}
.lvd-tekst{color:#5a6577;font-size:.78rem;line-height:1.5}
.lvd-acties{display:flex;gap:6px;flex-wrap:wrap;margin-top:.65rem;padding-top:.65rem;border-top:1px solid #eef3f8}
.lvd-acties .btn{padding:.1rem .55rem;font-size:.72rem}

/* Een venstervak dat niet van toepassing is klapt dicht tot zijn kop met
   een nvt-regel en een knop om toch in te vullen. Nooit hard verbergen:
   een auditor moet zien dat erover is nagedacht, en bewust toch invullen
   moet kunnen. */
.mv-blok.mv-nvt > *:not(.mv-kop):not(.mv-nvt-regel){display:none}
.mv-blok.mv-nvt > .mv-kop{opacity:.7}
.mv-nvt-regel{display:flex;align-items:center;gap:.7rem;font-size:.78rem;color:#6b7788;
  font-style:italic;padding:.15rem .1rem .05rem}
.mv-nvt-regel .btn{font-style:normal;padding:.05rem .5rem;font-size:.72rem}

/* Gesplitst venster: links een leesvak dat blijft staan, rechts het
   formulier. Voor elk venster waarin je iets beoordeelt en daarbij het
   origineel wilt blijven zien. */
.mv-split{display:grid;grid-template-columns:290px 1fr;gap:1rem;align-items:start}
@media (max-width: 62rem){.mv-split{grid-template-columns:1fr}}
.mv-lees{position:sticky;top:0}
.mv-lees .lvd-vak{background:#f7fafd}
.mv-lees .lvd-tekst{display:block;overflow:visible}

.mv-veld > label.spacer:empty { display: none; }

/* Statusbalk: onderwerp, stand van zaken en acties op een rij. Voor alles
   wat op een beheerpagina een eigen kaartje zou worden: koppelingen,
   inrichting, voortgang. Een gekleurde rand links draagt de stand, zodat de
   tekst dat niet hoeft te doen. */
.st-balk { background: #fff; border: 1px solid #e3e8ee; border-left: 4px solid #8593a4;
           border-radius: 10px; box-shadow: 0 1px 2px rgba(20,40,70,.05); margin-bottom: 1rem; }
.st-balk.klaar   { border-left-color: #1E7A46; }
.st-balk.aandacht{ border-left-color: #E8820A; }
.st-kop { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .7rem 1rem; }
.st-kop > i:first-child { color: #2e5c8a; width: 1.1rem; text-align: center; }
.st-titel { font-weight: 650; font-size: .88rem; color: #1c2b3a; }
.st-chip { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
           border-radius: 4px; padding: .12rem .45rem; background: #eef2f7; color: #5a6b7f;
           border: 1px solid #dfe6ee; }
.st-chip.groen { background: #e7f6ee; color: #14532d; border-color: #cfe6d8; }
.st-chip.amber { background: #fdf3e3; color: #8a6100; border-color: #f0dfc0; }
.st-sub { font-size: .76rem; color: #6c7a89; }
.st-acties { margin-left: auto; display: inline-flex; align-items: stretch;
             border: 1px solid #d6dfe9; border-radius: 7px; overflow: hidden; }
.st-knop { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem;
           font-size: .78rem; color: #33475b; text-decoration: none; background: #fff;
           border-left: 1px solid #e3e8ee; white-space: nowrap; transition: background .12s; }
.st-knop:first-child { border-left: 0; }
.st-knop:hover { background: #f2f7fc; color: #1E4D8F; }
.st-knop.hoofd { background: #1E4D8F; color: #fff; font-weight: 600; }
.st-knop.hoofd:hover { background: #17406f; color: #fff; }
.st-knop i { font-size: .78rem; opacity: .85; }
.st-body { padding: 0 1rem 1rem; border-top: 1px solid #eef2f7; margin-top: -.1rem; }
.st-body > .rij1 { padding-top: .9rem; }
@media (max-width: 48rem) { .st-acties { margin-left: 0; width: 100%; } .st-knop { flex: 1 1 auto; justify-content: center; } }

/* De kop van een klantpagina: kenmerken links, acties rechts.
   Kenmerken zijn om te lezen, acties om op te klikken; door ze te mengen
   vraagt alles tegelijk om aandacht. */
.kd-kenmerken { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: .3rem; }
.kd-kenm { font-size: .7rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
           color: #cfe0f0; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; padding: .1rem .45rem; }
.kd-kenm.aan { color: #b9f2d1; border-color: rgba(150,235,190,.55); }
.kd-info { font-size: .8rem; color: #c9d8e8; display: inline-flex; align-items: center; gap: .35rem; }
.kd-info i { opacity: .75; font-size: .75rem; }

/* Een gesloten knoppenbalk: gelijke hoogte, gedeelde randen, een hoofdactie.
   Zo leest het als een geheel in plaats van als losse knopjes. */
.kd-acties { display: inline-flex; align-items: stretch; border-radius: 8px; overflow: hidden;
             border: 1px solid rgba(255,255,255,.42); }
.kd-knop { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem;
           font-size: .8rem; font-weight: 500; color: #fff; text-decoration: none; white-space: nowrap;
           background: rgba(255,255,255,.06); border-left: 1px solid rgba(255,255,255,.28);
           transition: background .12s; }
.kd-knop:first-child { border-left: 0; }
.kd-knop i { font-size: .82rem; opacity: .9; }
.kd-knop:hover { background: rgba(255,255,255,.2); color: #fff; }
.kd-knop.hoofd { background: #fff; color: #14293f; font-weight: 650; }
.kd-knop.hoofd i { opacity: 1; }
.kd-knop.hoofd:hover { background: #e6eff8; color: #14293f; }
@media (max-width: 62rem) { .kd-acties { flex-wrap: wrap; } }

/* Knoppen op een donkere kop. Een grijze outline-knop op donkerblauw leest
   als uitgeschakeld; op een donkere grond hoort een knop licht te zijn. Zet
   .kop-donker op de balk en elke knop erin volgt vanzelf. */
.kop-donker .btn-outline-secondary,
.kop-donker .btn-outline-primary {
  border-color: rgba(255,255,255,.5); color: #fff; background: transparent;
}
.kop-donker .btn-outline-secondary:hover,
.kop-donker .btn-outline-primary:hover {
  background: rgba(255,255,255,.16); border-color: #fff; color: #fff;
}
.kop-donker .btn-primary { background: #fff; border-color: #fff; color: #14293f; font-weight: 600; }
.kop-donker .btn-primary:hover { background: #e8f1f9; border-color: #e8f1f9; color: #14293f; }
.kop-donker .btn:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.25); }

tr:has(+ tr.rz-detail:not(.dicht)) > td {
  --bs-table-accent-bg: #e9f1fa;
  background-color: #e9f1fa;
}
tr:has(+ tr.rz-detail:not(.dicht)) > td:first-child { box-shadow: inset 3px 0 0 #1E4D8F; }

/* De normmaatregelen: honderden regels, dus standaard verborgen. Alleen wat is
   aangevinkt en wat een zoekterm raakt komt in beeld. */
.ctl-rij { display: none; }
.ctl-rij.zicht { display: flex; }
.ctl-norm { font-size: .63rem; background: #eef2f7; color: #5a6b7f; border: 1px solid #dfe6ee;
           border-radius: 4px; padding: .05rem .35rem; white-space: nowrap; margin-right: .1rem; }

/* Criteria per niveau in het risicoregister. */
.crit-rij { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.crit-rij .crit-niveau { flex: 0 0 6rem; font-size: .74rem; font-weight: 600; color: #5a6577; }
.crit-hint { font-size: .73rem; color: #7a8899; margin-top: .3rem; min-height: 1.1em; line-height: 1.35; }


/* ── Koppen in drie stappen ──────────────────────────────────────────────
   Eén kleurfamilie, drie gewichten. De paginakop blijft het donkerst, daaronder
   wordt het per niveau lichter. Zo zie je aan de tint hoe diep je zit zonder
   dat de pagina één donker blok wordt. */

/* Kaartkop: middenblauw, band over de volle breedte van de kaart. De negatieve
   marges zijn gelijk aan de padding van .card-body, anders blijft er een witte
   rand staan. */
.reg-pagina .reg-kaartkop {
    background: linear-gradient(118deg, #2e5c8a 0%, #37699a 55%, #4179ac 100%);
    color: #fff;
    margin: -1.15rem -1.3rem 1.05rem;
    padding: .7rem 1.3rem .72rem;
    border-radius: 10px 10px 0 0;
    border-bottom: 0;
    font-size: .9rem;
    font-weight: 620;
    letter-spacing: -.004em;
    display: flex;
    align-items: center;
    gap: .5rem;
}
/* Een smalle lichte streep links in de band: geeft de kop een beginpunt zonder
   dat er een icoon bij hoeft. */
.reg-pagina .reg-kaartkop::before {
    content: "";
    flex: 0 0 auto;
    width: 3px; height: 1em;
    border-radius: 2px;
    background: rgba(255,255,255,.5);
}

/* Blokkop in de invulvensters: staalblauw, het lichtste niveau. */
.mv-blok > .mv-kop {
    background: linear-gradient(118deg, #43709e 0%, #4e7fae 55%, #588ec0 100%);
    color: #fff;
    margin: -1.05rem -1.15rem .95rem;
    padding: .55rem 1.15rem .58rem;
    border-radius: 10px 10px 0 0;
    border-bottom: 0;
    align-items: center;
}
.mv-blok > .mv-kop b { color: #fff; font-size: .82rem; font-weight: 620; }
.mv-blok > .mv-kop span { color: rgba(255,255,255,.72); }
/* Het nummerbolletje moet op gekleurde grond juist licht zijn. */
.mv-blok > .mv-kop::before {
    background: rgba(255,255,255,.2);
    color: #fff;
    top: 0;
}

.modal-body.mv-body { padding: 1.15rem 1.25rem; }

/* De kop van het venster zelf volgt de kaartkop, zodat een venster leest als
   een kaart die bovenop de pagina komt en niet als iets van een ander systeem. */
.modal-content > .modal-header {
    background: linear-gradient(118deg, #2e5c8a 0%, #37699a 55%, #4179ac 100%);
    color: #fff;
    border-bottom: 0;
    padding: .68rem 1.25rem;
}
.modal-content > .modal-header .modal-title { color: #fff; font-size: .93rem; font-weight: 620; }
.modal-content > .modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .8;
}
.modal-content > .modal-header .btn-close:hover { opacity: 1; }

/* ── Subkoppen binnen een kaart of venster ───────────────────────────────
   Eén stijl voor alle registers. Een lichtblauwe balk zet de secties uit
   elkaar zonder te concurreren met de donkerblauwe paginakop erboven.
   Nieuwe pagina's gebruiken .reg-sub; de klassen erachter zijn de bestaande
   varianten uit de registers, die hier naartoe zijn getrokken. */
.reg-sub,
.vw-sectie, .dp-sectie, .bv-sectie, .sel-sub, .hl-sub {
  display: block;
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #1f4e79;
  background: linear-gradient(90deg, #e8f1f9, #f2f7fb 70%, #f7fafc);
  border: 1px solid #d8e6f2;
  border-left: 3px solid #5b9bd5;
  border-radius: 0 7px 7px 0;
  padding: .34rem .7rem;
  margin: 1.25rem 0 .7rem;
}
.reg-sub:first-child,
.vw-sectie:first-child, .dp-sectie:first-child, .bv-sectie:first-child,
.sel-sub:first-child, .hl-sub:first-child {
  margin-top: 0;
}

/* In de handleiding staan de subkoppen in een smallere kolom; daar mag de
   balk iets rustiger, anders wordt de pagina een reeks balken. */
.hl-body .hl-sub { margin: 1.35rem 0 .6rem; }

@media print {
  .reg-sub, .vw-sectie, .dp-sectie, .bv-sectie, .sel-sub, .hl-sub {
    background: #f2f7fb; break-after: avoid;
  }
}

/* ── Startblok: het aanzetje bij een leeg register ────────────────────────
   Was een wit vlak met een zwarte kop en een grijze alinea, waardoor het als
   een lap tekst las. De kop krijgt dezelfde lichtblauwe balk als de subkoppen
   zodat het blok een duidelijk begin heeft. */
.reg-pagina .card-body > h6.fw-bold:first-child,
.reg-pagina .card-body > h5.fw-bold:first-child {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #1f4e79;
  background: linear-gradient(90deg, #e8f1f9, #f2f7fb 70%, #f7fafc);
  border: 1px solid #d8e6f2;
  border-left: 3px solid #5b9bd5;
  border-radius: 0 7px 7px 0;
  padding: .36rem .7rem;
  margin: -.25rem 0 .7rem;
}
/* De kop van een venster blijft gewoon een titel; daar hoort geen balk. */
.reg-pagina .modal h6.fw-bold,
.reg-pagina .modal h5.fw-bold { background: none; border: 0; padding: 0;
  text-transform: none; letter-spacing: 0; font-size: 1rem; color: inherit; }

/* ── Detailregel onder een naam in een lijst ─────────────────────────────
   Dit is geen sectiekop maar bijzin: de dienst onder de leverancier, de
   geldigheid onder een certificaat. Klein en grijs, zodat de naam erboven
   het werk doet. Stond eerder per ongeluk in de subkopselector hierboven,
   waardoor elke bijzin een blauwe balk werd. */
.lv-sub {
  display: block;
  font-size: .75rem;
  line-height: 1.45;
  color: #6c757d;
  background: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  padding: 0;
  border: 0;
  margin: .1rem 0 0;
}
.lv-sub .cel-bewerk { font-size: .78rem }

/* ── Eén veld op één regel ───────────────────────────────────────────────
   Het woord ervoor, de keuzelijst erachter. Zonder dit stond elk veld op
   drie regels en werd een rij met twee velden een lap tekst. */
.lv-regel {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin: .12rem 0 0;
  flex-wrap: nowrap;
}
.lv-regel .lv-lab {
  font-size: .7rem;
  color: #8a95a1;
  flex: 0 0 auto;
}
.lv-regel .cel-bewerk {
  font-size: .8rem;
  padding: .12rem .3rem;
  min-width: 0;
}
.lv-let { font-size: .72rem; color: #A9660D; margin-top: .1rem }

/* ── Vensterregel (stramien optie B) ─────────────────────────────────────
   Elk label in een venster: zelfde maat, zelfde gewicht, vaste minimumhoogte.
   Labels van één en van twee regels beginnen dan op dezelfde hoogte en de
   velden eronder liggen op één lijn. Geldt voor elk venster in de app. */
.modal-body .form-label {
  display: block;
  font-size: .73rem;
  font-weight: 650;
  color: #4a5765;
  margin-bottom: .25rem;
  min-height: 1.05rem;
  line-height: 1.3;
}
/* Twee regels is het maximum; daarboven is het label te lang en moet de
   tekst naar een form-text onder het veld. */
.modal-body .row.g-2 > [class^="col"] .form-label,
.modal-body .row.g-3 > [class^="col"] .form-label { min-height: 2.05rem; }
.modal-body .row.g-2 > .col-12 .form-label,
.modal-body .row.g-3 > .col-12 .form-label { min-height: 1.05rem; }
/* Een vinkje met tekst lijnt uit met de velden ernaast. */
.modal-body .form-check { padding-top: .15rem; }

/* ── Sectiekoppen in een bewerkvenster: één vormtaal ─────────────────────
   De oudere registers groeperen hun velden met .mv-blok en benoemen de groep
   met .mv-kop; de nieuwere doen dat met .reg-sub. De indeling was in beide
   gevallen al goed, alleen het uiterlijk liep uiteen. Hieronder krijgt de
   eerste vorm het uiterlijk van de tweede, zodat een sectiekop er overal
   hetzelfde uitziet: lichtblauwe balk, blauwe kapitalen, blauw accent links.
   De markup blijft ongemoeid; dat scheelt acht pagina's verbouwen. */
.mv-blok > .mv-kop {
  display: block;
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #1f4e79;
  background: linear-gradient(90deg, #e8f1f9, #f2f7fb 70%, #f7fafc);
  border-left: 3px solid #1E4D8F;
  border-radius: 0 4px 4px 0;
  padding: .42rem .7rem;
  margin: -.15rem -.15rem .85rem;
}
/* De toelichting achter de kop hoort bij de balk en mag niet schreeuwen. */
.mv-blok > .mv-kop b    { font-size: .73rem; font-weight: 700; color: #1f4e79; letter-spacing: .05em; }
.mv-blok > .mv-kop span { font-size: .68rem; color: #5f7590; font-weight: 400; text-transform: none;
                          letter-spacing: 0; margin-left: .5rem; }
/* Het kader eromheen mag rustiger nu de balk het begin markeert. */
.mv-blok { border-color: #e8eef5; }
/* Het telbolletje op de lichte balk: gevuld donkerblauw met wit cijfer,
   anders valt het weg tegen de lichte achtergrond (vaste contrastregel). */
.mv-blok > .mv-kop::before {
  position: static;
  display: inline-flex;
  vertical-align: middle;
  margin-right: .45rem;
  background: #1E4D8F;
  color: #fff;
}


/* Bootstrap-kolommen in een venster stapelen ook. Zo geldt de regel ook
   voor oudere vensters die nog met row en col-md zijn opgebouwd. */
.modal .modal-body .row > [class*="col-"]:not(.col-auto) { flex: 0 0 100%; max-width: 100%; }
/* Een knop naast een veld (col-auto) blijft ernaast staan; dat is een
   handeling, geen tweede vraag. */
/* Lege opvul-labels die een vinkje naast een veld op hoogte brachten,
   zijn in een kolom alleen nog witruimte. */
.mv-veld > label[aria-hidden="true"] { display: none; }


/* Rustige weergave: uitleg dicht achter een knop in de kop. */
.ui-uitleg-dicht { display: none !important; }
.ui-uitleg-knop { border: 1px solid #c9d4e2; background: #fff; color: #46586c; border-radius: 8px;
  padding: .28rem .7rem; font-size: .78rem; white-space: nowrap; align-self: flex-start; }
.ui-uitleg-knop.actief { background: #eef3fa; border-color: #9fb3cc; color: #1E4D8F; }
.reg-kop-donker .ui-uitleg-knop { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.reg-kop-donker .ui-uitleg-knop.actief { background: rgba(255,255,255,.16); border-color: #fff; }


/* Kees-blok als balk: alleen de kop zichtbaar tot je erop klikt. */
.kees-kaart.kk-dicht > :not(.kk-kop) { display: none !important; }
.kees-kaart .kk-kop { cursor: pointer; user-select: none; }
.kees-kaart.kk-dicht { padding-top: .55rem; padding-bottom: .55rem; }
.kees-kaart.kk-dicht .kk-kop::after { content: 'openen'; font-size: .72rem; color: #8593a4; margin-left: auto; }
.kees-kaart:not(.kk-dicht) .kk-kop::after { content: 'sluiten'; font-size: .72rem; color: #8593a4; margin-left: auto; }
.kees-kaart .kk-kop { display: flex; align-items: center; gap: .6rem; }

/* Werkbalk boven de tabel: chips, filters en zoekbalk op een regel. */
.reg-werkbalk { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 .75rem; }
.reg-werkbalk > * { margin: 0 !important; }
.reg-werkbalk > .d-flex { gap: .4rem !important; }
.reg-werkbalk > form.row { --bs-gutter-x: .4rem; --bs-gutter-y: 0; }
.reg-werkbalk .badge { font-weight: 600; font-size: .7rem; padding: .35rem .6rem !important; }
.reg-werkbalk .rz-balk { flex: 1 1 22rem; }

/* Compacte tabel: een regel per rij; het grijze fragment eronder verborgen. */
table.reg-tabel.reg-compact td > .fw-semibold ~ .small,
table.reg-tabel.reg-compact td > .fw-semibold ~ .text-muted:not(.badge) { display: none; }
table.reg-tabel.reg-compact td { padding-top: .5rem; padding-bottom: .5rem; }
.ui-dichtheid.actief { background: #eef3fa; color: #1E4D8F; }


/* Subkop: een korte grijze regel direct onder een sectiekop. */
.ui-subkop { font-size: .78rem !important; color: #6b7788 !important; margin: .1rem 0 .85rem !important; line-height: 1.45; }
.kop-donker .ui-uitleg-knop, .reg-kaartkop .ui-uitleg-knop { float: right; margin-top: -.15rem; }
.reg-werkbalk > .reg-tellers { display: flex; gap: .4rem; flex-wrap: wrap; }


/* Compacte tabel, uniform: een regel per cel. Alles wat een pagina als
   subregel markeert verdwijnt tot de tabel op uitgebreid staat; het staat
   sowieso in het uitklapdetail. */
table.reg-tabel.reg-compact :is(.reg-sub, .lv-sub, .md-sub, .uw-sub, .sel-sub, .wg-sub, .bs-sub, .reg-extra) { display: none !important; }
table.reg-tabel.reg-compact td .lv-regel { margin-top: 0; }


/* Compact, tweede versie: echt een regel per rij. Elke cel een regel met
   afkapping; blokken onder de eerste regel (subteksten, omschrijvingen,
   uitklapknoppen) verdwijnen tot de tabel op uitgebreid staat. Knoppen in
   een cel blijven altijd staan. */
table.reg-tabel.reg-compact td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26rem; }
table.reg-tabel.reg-compact td > div:first-child, table.reg-tabel.reg-compact td > p:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.reg-tabel.reg-compact td > :is(div, p):nth-child(n+2):not(:has(.btn, button, input, select, a.btn)) { display: none !important; }
table.reg-tabel.reg-compact td:last-child, table.reg-tabel.reg-compact td.text-end { overflow: visible; max-width: none; }
table.reg-tabel.reg-compact td .ui-meer { display: none !important; }
table.reg-tabel.reg-compact tr.rz-detail td { white-space: normal; overflow: visible; max-width: none; }
table.reg-tabel.reg-compact tr.rz-detail td > :is(div, p):nth-child(n+2) { display: block !important; }


/* Tabbladen voor samengestelde schermen: een laag tegelijk in beeld. */
.reg-tabs { display: flex; gap: .25rem; border-bottom: 2px solid #e2eaf2; margin: 0 0 1rem; padding: 0; list-style: none; }
.reg-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 0;
  padding: .55rem .9rem; font-size: .84rem; font-weight: 600; color: #6b7788; background: transparent; }
.reg-tabs .nav-link:hover { color: #1E4D8F; }
.reg-tabs .nav-link.active { color: #1E4D8F; border-bottom-color: #1E4D8F; background: transparent; }
.reg-tabs .nav-link .telbol { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; margin-left: .4rem; border-radius: 1rem;
  background: #eef3fa; color: #1E4D8F; font-size: .7rem; text-align: center; }


/* Statustaal: vier toestanden, overal dezelfde kleur. Toegekend door het
   gedragsbestand op grond van het woord in de chip. */
.ui-st { border-radius: 6px !important; padding: .2rem .55rem !important; font-size: .7rem !important; font-weight: 600 !important;
  letter-spacing: .01em; line-height: 1.3; border: 1px solid transparent !important; white-space: nowrap; }
.ui-st-klaar    { background: #e3f2e6 !important; color: #1c6b32 !important; border-color: #c9e6d0 !important; }
.ui-st-aandacht { background: #fdf1d6 !important; color: #8a5a00 !important; border-color: #f3dfa6 !important; }
.ui-st-bezig    { background: #e6eef9 !important; color: #1E4D8F !important; border-color: #c9d9f0 !important; }
.ui-st-laat     { background: #fbe3e1 !important; color: #a1281e !important; border-color: #f2c7c2 !important; }
.ui-st-nvt      { background: #f2f4f7 !important; color: #6b7788 !important; border-color: #e3e8ef !important; }

/* Eén vorm voor alle chips in registers en werkbalken, ook categoriechips. */
.reg-tabel .badge, .reg-werkbalk .badge, .reg-tabel .rub, .reg-tabel .md-chip, .reg-tabel .md-vlag,
.reg-tabel .lv-vlag, .reg-tabel .keten-chip, .reg-tabel .item-chip, .reg-tabel .norm-chip {
  border-radius: 6px; padding: .2rem .55rem; font-size: .7rem; font-weight: 600; line-height: 1.3; vertical-align: middle; }


/* Zijpaneel voor het rijdetail: schuift van rechts over de lijst. */
.reg-paneel { position: fixed; top: 0; right: 0; height: 100vh; width: min(40rem, 96vw); background: #fff;
  box-shadow: -10px 0 28px rgba(20, 40, 70, .16); z-index: 1045; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .18s ease-out; }
.reg-paneel.open { transform: translateX(0); }
.reg-paneel-kop { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; background: #1E4D8F; color: #fff; }
.reg-paneel-kop .titel { font-weight: 700; font-size: .95rem; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-paneel-kop .sluit { border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; border-radius: 6px; padding: .2rem .6rem; font-size: .8rem; }
.reg-paneel-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.1rem 1.5rem; background: #f4f8fc; }
.reg-paneel-body .lvd-grid { grid-template-columns: 1fr; }
.reg-paneel-body .lvd-tekst { display: block; overflow: visible; }
.reg-paneel-achter { position: fixed; inset: 0; background: rgba(20, 40, 70, .18); z-index: 1044; }
@media (prefers-reduced-motion: reduce) { .reg-paneel { transition: none; } }

/* Uitleg per veld achter een i-knop, in vensters. */
.mv-veld .ui-i { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem;
  margin-left: .35rem; border-radius: 50%; border: 1px solid #b9c6d6; background: #fff; color: #5a6f8a; font-size: .62rem;
  font-weight: 700; line-height: 1; cursor: pointer; vertical-align: text-bottom; }
.mv-veld .ui-i.actief { background: #1E4D8F; border-color: #1E4D8F; color: #fff; }
.mv-veld .form-text.ui-hint-dicht { display: none !important; }


/* Middelen die uit een externe koppeling komen. Het merkje is er om te
   voorkomen dat iemand de naam met de hand aanpast en zich verbaast dat hij
   bij de volgende ronde weer terugveert. */
.md-extern { display: inline-block; font-size: .65rem; font-weight: 600; border-radius: 5px;
  padding: 0 .4rem; margin-left: .35rem; background: #eef3fa; color: #2e5c8a; border: 1px solid #d6e2f2; }


/* Eerdere gebruikers van een apparaat. Dichtgeklapt want het gaat om de
   uitzondering: meestal wisselt een laptop niet. */
.md-historie { margin-top: .15rem; }
.md-historie summary { font-size: .72rem; color: #2e5c8a; cursor: pointer; list-style: none; }
.md-historie summary::-webkit-details-marker { display: none; }
.md-historie summary::before { content: 'B8'; margin-right: .25rem; display: inline-block; transition: transform .15s; }
.md-historie[open] summary::before { transform: rotate(90deg); }
.md-historie div { font-size: .72rem; color: #46586c; padding-left: .9rem; }