/*!
 * compat-bs5.css  —  Bootstrap 3 → 5 compatibiliteitslaag voor Indigo
 *
 * Doel: laat bestaande BS3-markup (panel, well, label-*, btn-default, form-group,
 * has-error, input-group-addon, pull-*, enz.) acceptabel renderen ONDER Bootstrap 5,
 * zodat de globale core-switch kan zonder eerst ~1277 JSP's te herschrijven.
 *
 * MOET NA bootstrap5.min.css geladen worden (overschrijft / vult aan).
 * Wordt fragment-voor-fragment afgebouwd zodra echte BS5-markup is doorgevoerd (Fase 5).
 *
 * Bewust NIET hier afgedekt:
 *  - navbar  -> structureel anders in BS5; wordt herschreven in rvcmenu.jsp (Fase 3)
 *  - .show / .hide -> botsen met BS5 component-state (dropdown/collapse); niet aanraken
 *  - glyphicons -> aparte glyphicons-compat.css
 *  - grid col-xs-* -> via geautomatiseerde rename (Fase 4)
 *
 * BS3-referentiekleuren: primary #337ab7, default-grijs #777, success #5cb85c,
 * info #5bc0de, warning #f0ad4e, danger #d9534f, randen #ddd/#ccc.
 */

/* ============================================================
 * 1. Basis-dichtheid — Indigo is ontworpen op BS3's 14px-basis.
 *    BS5 default = 16px; tekst/controls terugbrengen naar ~14px
 *    voorkomt dat alle schermen plots groter/ruimer ogen.
 * ============================================================ */
body {
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
h1 small, h1 .small,
h2 small, h2 .small,
h3 small, h3 .small,
h4 small, h4 .small,
h5 small, h5 .small,
h6 small, h6 .small {
    font-weight: 400;
    line-height: 1;
    color: #777;
}
h1 small, h1 .small,
h2 small, h2 .small,
h3 small, h3 .small { font-size: 65%; }
h4 small, h4 .small,
h5 small, h5 .small,
h6 small, h6 .small { font-size: 75%; }
.form-control,
.form-select,
.input-group-text,
.btn,
table.table {
    font-size: 14px;
}
.form-control,
.form-select {
    /* BS3-hoogte/padding-gevoel */
    padding: 6px 12px;
}

/* ============================================================
 * 2. Panels  ->  card-achtige weergave (1402 occ / 260 files)
 * ============================================================ */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
    padding: 15px;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle { color: inherit; }
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a { color: inherit; }
.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.panel-group { margin-bottom: 20px; }
.panel-group .panel { margin-bottom: 0; border-radius: 4px; }
.panel-group .panel + .panel { margin-top: 5px; }

/* contextvarianten */
.panel-default { border-color: #ddd; }
.panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; }
.panel-primary { border-color: #337ab7; }
.panel-primary > .panel-heading { color: #fff; background-color: #337ab7; border-color: #337ab7; }
.panel-success { border-color: #d6e9c6; }
.panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.panel-info { border-color: #bce8f1; }
.panel-info > .panel-heading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.panel-warning { border-color: #faebcc; }
.panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.panel-danger { border-color: #ebccd1; }
.panel-danger > .panel-heading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

/* ============================================================
 * 3. Wells (25 occ)
 * ============================================================ */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well-sm { padding: 9px; border-radius: 3px; }
.well-lg { padding: 24px; border-radius: 6px; }

/* ============================================================
 * 4. Labels  =  BS3 inline-badges (label-* 119 occ)
 *    LET OP: .badge NIET overschrijven (BS5 gebruikt die zelf).
 * ============================================================ */
.label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}
.label:empty { display: none; }
a.label:hover, a.label:focus { color: #fff; text-decoration: none; cursor: pointer; }
.label-default { background-color: #777; }
.label-primary { background-color: #337ab7; }
.label-success { background-color: #5cb85c; }
.label-info    { background-color: #5bc0de; }
.label-warning { background-color: #f0ad4e; }
.label-danger  { background-color: #d9534f; }

/* ============================================================
 * 5. Buttons: btn-default (459 occ) + btn-xs hangt af van rename
 * ============================================================ */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-default:disabled,
.btn-default.disabled {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    opacity: .65;
}
/* vangnet zolang btn-xs nog niet hernoemd is naar btn-sm */
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* ============================================================
 * 6. Formulieren (form-group 1772, control-label 1306,
 *    has-error 1141, help-block 170, input-group-addon 162)
 * ============================================================ */
.form-group { margin-bottom: 15px; }

.control-label { font-weight: 700; }

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

/* validatie-states (BS3) -> visueel gelijk houden */
.has-error .control-label,
.has-error .help-block,
.has-error .form-check-label { color: #a94442; }
.has-error .form-control,
.has-error .form-select {
    border-color: #a94442;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-error .form-control:focus,
.has-error .form-select:focus {
    border-color: #843534;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483;
}
.has-success .control-label,
.has-success .help-block { color: #3c763d; }
.has-success .form-control,
.has-success .form-select { border-color: #3c763d; }
.has-warning .control-label,
.has-warning .help-block { color: #8a6d3b; }
.has-warning .form-control,
.has-warning .form-select { border-color: #8a6d3b; }

/* input-group: BS3 .input-group-addon gedraagt zich als BS5 .input-group-text.
 * BS5's input-group is flex; geef de addon flex-uitlijning. */
.input-group-addon {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    white-space: nowrap;
    background-color: #eee;
    border: 1px solid #ced4da;
}

/* BS3 statische "form-control" weergave */
.form-control-static {
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 0;
}

/* ============================================================
 * 7. Utility-klassen (renames die Fase 4 nog niet deed)
 * ============================================================ */
.pull-right { float: right !important; }
.pull-left  { float: left  !important; }

.text-left   { text-align: left  !important; }
.text-right  { text-align: right !important; }
.text-center { text-align: center !important; }

.hidden { display: none !important; }

.center-block { display: block; margin-left: auto; margin-right: auto; }

.img-responsive { display: block; max-width: 100%; height: auto; }
.img-circle  { border-radius: 50%; }
.img-rounded { border-radius: 6px; }
.img-thumbnail {
    padding: 4px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-width: 100%;
    height: auto;
}

/* BS3-caret (BS5-dropdowns tekenen hun eigen pijl, maar losse .caret komt nog voor) */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* responsive zichtbaarheid (BS3-breakpoints; 18 files) */
@media (max-width: 767px)  { .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px)  { .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .hidden-lg { display: none !important; } }
.visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; }
@media (max-width: 767px)  { .visible-xs { display: block !important; } }
@media (min-width: 768px) and (max-width: 991px)  { .visible-sm { display: block !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } }
@media (min-width: 1200px) { .visible-lg { display: block !important; } }

/* ============================================================
 * 8. bootstrap-multiselect (BS3-plugin) onder BS5 laten openklappen.
 *    De plugin toggelt de BS3 .open-class op .btn-group; BS5 kent die
 *    niet meer, dus de menu-weergave hier herstellen. Tijdelijk —
 *    plugin wordt in Fase 6 vervangen (Tom Select).
 * ============================================================ */
.btn-group.open > .dropdown-menu { display: block; }
/* Menu minstens zo breed als de knop (BS3-gedrag bij buttonWidth:'100%');
 * min-width laat smalle knoppen nog meegroeien met lange optienamen */
.btn-group > .dropdown-menu.multiselect-container { min-width: 100%; }
/* BS3-theme-gradient op de multiselect-knop (user: grijze BS3-look mooier) */
.btn-default.multiselect {
    background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
    border-color: #ccc;
}
.btn-default.multiselect:hover, .btn-default.multiselect:focus,
.btn-group.open > .btn-default.multiselect {
    background-image: linear-gradient(to bottom, #f2f2f2 0%, #d8d8d8 100%);
}
.multiselect-container { max-height: 400px; overflow-y: auto; }
.multiselect-container > li > a { padding: 3px 20px; display: block; }
.multiselect-container > li > a > label { margin: 0; cursor: pointer; font-weight: 400; }
/* Deze plugin levert bewust een eigen BS3-caret. Voorkom de dubbele BS5-caret
 * en herstel de interne pijl die door de generieke dropdownregel wordt verborgen. */
.multiselect.dropdown-toggle::after { display: none; }
.multiselect.dropdown-toggle > .caret,
.multiselect.dropdown-toggle .caret { display: inline-block; }

/* ============================================================
 * 9. Navbar + dropdowns met BS3-markup onder BS5
 *    De navbar (rvcmenu.jsp) en submenu-fragmenten gebruiken nog
 *    BS3-structuur: <ul class="navbar-nav"><li><a> en
 *    <ul class="dropdown-menu"><li><a>. BS5 verwacht .nav-link /
 *    .dropdown-item op de <a>. Hier stylen we de oude structuur,
 *    zodat de submenu-fragmenten (honderden links) ongemoeid blijven.
 *    Dekt meteen ALLE BS3-dropdowns elders in de app.
 * ============================================================ */
/* nav-links (top-level <li><a> in de navbar) — BS3-dichtheid: de balk zelf
 * heeft geen verticale padding (BS5-default 8px), de links dragen de hoogte
 * (15px + 20px regel + 15px = 50px, zoals BS3 .navbar min-height) */
.navbar.fixed-top { padding-top: 0; padding-bottom: 0; border-bottom: 1px solid #e7e7e7; /* BS3 navbar-default-rand */ }
.navbar-nav > li > a {
    display: block;
    padding: 15px 12px;
    line-height: 20px;
    color: rgba(0, 0, 0, .55);
    text-decoration: none;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus { color: rgba(0, 0, 0, .7); }
.navbar-nav > li.show > a { color: rgba(0, 0, 0, .9); }

/* BS5 tekent zelf een caret op .dropdown-toggle::after; verberg de losse BS3 .caret erin */
.dropdown-toggle > .caret,
.dropdown-toggle .caret { display: none; }

/* dropdown-menu items (<li><a> zonder .dropdown-item) als BS5 dropdown-item stylen */
.dropdown-menu > li > a {
    display: block;
    width: 100%;
    padding: 4px 16px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    text-decoration: none;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { color: #1e2125; background-color: #e9ecef; }
.dropdown-menu > li > a:active,
.dropdown-menu > li.active > a { color: #fff; background-color: #0d6efd; }

/* BS3-scheidingslijn <li class="divider"> / role="separator" */
.dropdown-menu .divider {
    height: 0;
    margin: 8px 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

/* ============================================================
 * 10. Modals — overgangsregel voor de GEFASEERDE uitrol.
 *     Geconverteerde modals (titel eerst, .btn-close) gebruiken
 *     de normale BS5-flexheader. Nog niet gereleasede BS3-modals
 *     (met .close vóór de titel) krijgen via :has() de oude
 *     block-layout. Browsers zonder :has() tonen bij die oude
 *     modals alleen een cosmetisch verschil (kruisje links).
 *     VERWIJDEREN zodra de laatste markup-plak live is.
 * ============================================================ */
.modal-header:has(> .close) { display: block; }
.modal-header:has(> .close)::after { content: ""; display: table; clear: both; }
/* BS5's default btn-close is een dik zwart kruis; verfijnder: dunne lijnen,
 * gedempt, zachte cirkel bij hover (user-wens 20-07). */
.btn-close {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3e%3cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3e%3c/svg%3e");
    opacity: .45;
    border-radius: 50%;
    transition: opacity .15s, background-color .15s;
}
.btn-close:hover, .btn-close:focus {
    opacity: .8;
    background-color: rgba(0, 0, 0, .07);
    box-shadow: none;
}
.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
    padding: 0;
    background: transparent;
    border: 0;
}
.close:hover,
.close:focus { color: #000; opacity: .5; cursor: pointer; text-decoration: none; }

/* ============================================================
 * 11. Diversen
 * ============================================================ */
.list-group-item-heading { margin-top: 0; margin-bottom: 5px; }
.breadcrumb { display: flex; flex-wrap: wrap; }   /* BS5 maakt breadcrumb flex; BS3-markup blijft werken */
.sr-only {  /* BS5 hernoemde .sr-only -> .visually-hidden; oude markup blijft toegankelijk */
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
 * 12. BS3-pariteitstokens (visuele pariteit, iteratie 1)
 *     BS5's felle default-palet, onderstreepte links, grotere
 *     koppen/radius en 16px-dropdowns terug naar de BS3-look.
 *     Volgorde: de bg-, text-bg- en border-utilities en pagination
 *     volgen de :root-vars; knoppen/alerts/modals hardcoden hun
 *     component-vars en krijgen eigen overrides.
 * ============================================================ */
:root,
[data-bs-theme=light] {
    --bs-primary: #337ab7;  --bs-primary-rgb: 51, 122, 183;
    --bs-success: #5cb85c;  --bs-success-rgb: 92, 184, 92;
    --bs-info:    #5bc0de;  --bs-info-rgb: 91, 192, 222;
    --bs-warning: #f0ad4e;  --bs-warning-rgb: 240, 173, 78;
    --bs-danger:  #d9534f;  --bs-danger-rgb: 217, 83, 79;
    --bs-secondary: #777;   --bs-secondary-rgb: 119, 119, 119;
    --bs-link-color: #337ab7;       --bs-link-color-rgb: 51, 122, 183;
    --bs-link-hover-color: #23527c; --bs-link-hover-color-rgb: 35, 82, 124;
    --bs-border-radius: 4px; --bs-border-radius-sm: 3px; --bs-border-radius-lg: 6px;
    --bs-border-color: #ddd;
    /* subtle-tinten = BS3-panelkoppen (cards met border-*-subtle/bg-*-subtle) */
    --bs-primary-bg-subtle: #d9edf7; --bs-primary-border-subtle: #337ab7; --bs-primary-text-emphasis: #fff;
    --bs-success-bg-subtle: #dff0d8; --bs-success-border-subtle: #d6e9c6; --bs-success-text-emphasis: #3c763d;
    --bs-info-bg-subtle:    #d9edf7; --bs-info-border-subtle:    #bce8f1; --bs-info-text-emphasis:    #31708f;
    --bs-warning-bg-subtle: #fcf8e3; --bs-warning-border-subtle: #faebcc; --bs-warning-text-emphasis: #8a6d3b;
    --bs-danger-bg-subtle:  #f2dede; --bs-danger-border-subtle:  #ebccd1; --bs-danger-text-emphasis:  #a94442;
}

/* Links: BS3 onderstreepte alleen bij hover */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
.btn:hover, .btn:focus, .nav-link:hover, .navbar-brand:hover,
.dropdown-item:hover, .breadcrumb-item a:hover + *, .page-link:hover { text-decoration: none; }

/* Koppen: BS3-groottes/marges (BS5 rem-koppen zijn ~15% groter) */
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
h1, h2, h3, .h1, .h2, .h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6, .h4, .h5, .h6 { margin-top: 10px; margin-bottom: 10px; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 500; line-height: 1.1; }

/* Knoppen: BS3-kleuren + radius (BS5 hardcodet per variant) */
.btn { --bs-btn-border-radius: 4px; }
.btn-sm { --bs-btn-border-radius: 3px; }
.btn-lg { --bs-btn-border-radius: 6px; }
.btn-primary {
    --bs-btn-bg: #337ab7; --bs-btn-border-color: #2e6da4;
    --bs-btn-hover-bg: #286090; --bs-btn-hover-border-color: #204d74;
    --bs-btn-active-bg: #204d74; --bs-btn-active-border-color: #122b40;
    --bs-btn-disabled-bg: #337ab7; --bs-btn-disabled-border-color: #2e6da4;
    --bs-btn-focus-shadow-rgb: 51, 122, 183;
}
.btn-success {
    --bs-btn-bg: #5cb85c; --bs-btn-border-color: #4cae4c;
    --bs-btn-hover-bg: #449d44; --bs-btn-hover-border-color: #398439;
    --bs-btn-active-bg: #398439; --bs-btn-active-border-color: #255625;
    --bs-btn-disabled-bg: #5cb85c; --bs-btn-disabled-border-color: #4cae4c;
    --bs-btn-focus-shadow-rgb: 92, 184, 92;
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
    --bs-btn-bg: #5bc0de; --bs-btn-border-color: #46b8da;
    --bs-btn-hover-bg: #31b0d5; --bs-btn-hover-border-color: #269abc;
    --bs-btn-active-bg: #269abc; --bs-btn-active-border-color: #1b6d85;
    --bs-btn-disabled-bg: #5bc0de; --bs-btn-disabled-border-color: #46b8da;
    --bs-btn-focus-shadow-rgb: 91, 192, 222;
}
.btn-warning {
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
    --bs-btn-bg: #f0ad4e; --bs-btn-border-color: #eea236;
    --bs-btn-hover-bg: #ec971f; --bs-btn-hover-border-color: #d58512;
    --bs-btn-active-bg: #d58512; --bs-btn-active-border-color: #985f0d;
    --bs-btn-disabled-bg: #f0ad4e; --bs-btn-disabled-border-color: #eea236;
    --bs-btn-focus-shadow-rgb: 240, 173, 78;
}
.btn-danger {
    --bs-btn-bg: #d9534f; --bs-btn-border-color: #d43f3a;
    --bs-btn-hover-bg: #c9302c; --bs-btn-hover-border-color: #ac2925;
    --bs-btn-active-bg: #ac2925; --bs-btn-active-border-color: #761c19;
    --bs-btn-disabled-bg: #d9534f; --bs-btn-disabled-border-color: #d43f3a;
    --bs-btn-focus-shadow-rgb: 217, 83, 79;
}

/* Alerts: BS3-tinten */
.alert-success { --bs-alert-bg: #dff0d8; --bs-alert-color: #3c763d; --bs-alert-border-color: #d6e9c6; --bs-alert-link-color: #2b542c; }
.alert-info    { --bs-alert-bg: #d9edf7; --bs-alert-color: #31708f; --bs-alert-border-color: #bce8f1; --bs-alert-link-color: #245269; }
.alert-warning { --bs-alert-bg: #fcf8e3; --bs-alert-color: #8a6d3b; --bs-alert-border-color: #faebcc; --bs-alert-link-color: #66512c; }
.alert-danger  { --bs-alert-bg: #f2dede; --bs-alert-color: #a94442; --bs-alert-border-color: #ebccd1; --bs-alert-link-color: #843534; }

/* Dichtheid: dropdowns/pagination op 14px (BS5 default 16px) */
.dropdown-menu { --bs-dropdown-font-size: 14px; }
.pagination {
    --bs-pagination-font-size: 14px;
    --bs-pagination-active-bg: #337ab7;
    --bs-pagination-active-border-color: #337ab7;
}

/* Modals: BS3-radius */
.modal { --bs-modal-border-radius: 6px; }

/* Inputs: BS3-focusglow i.p.v. BS5-ring */
.form-control:focus, .form-select:focus {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

/* hr: BS3 toonde een lichte lijn, BS5 een kwart-transparante */
hr { border-top: 1px solid #eee; opacity: 1; }

/* .btn-link: BS3-regels waren self-contained (werkten ook zonder .btn):
 * transparant, randloos, linkkleur; onderstreping alleen bij hover. */
.btn-link {
    color: #337ab7;
    font-size: medium;  /* BS3 (maatwerk): btn-links op 16px */
    font-weight: 400;
    text-decoration: none;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    border-radius: 0;
}
.btn-link:hover, .btn-link:focus {
    color: #23527c;
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent;
}

/* .nav-sidebar: BS3-.nav was blok-gestapeld met 10x15-links; BS5-.nav is flex-row */
.nav-sidebar { display: block; }
.nav-sidebar > li { display: block; }
.nav-sidebar > li > a { display: block; padding: 10px 15px; }
.nav-sidebar > li > a:hover,
.nav-sidebar > li > a:focus { background-color: #eee; text-decoration: none; }

/* BS3: tel-badges rechts uitgelijnd in lijstitems (regel verdween in BS5).
 * Flex i.p.v. float: bij lange omschrijvingen zakte de gefloate badge naar
 * de volgende regel en werd hij afgeknipt (bv. "Ontbrekende gegevens CvO aangeleverd"). */
.list-group-item > .badge { float: right; }
/* Alleen bij badge als sluitstuk (tel-badges werkvoorraad); nieuwsitems
 * (badge vooraan + h4 + p) moeten blok blijven en houden de float. */
.list-group-item:has(> .badge:last-child) { display: flex; align-items: center; gap: 8px; }
.list-group-item:has(> .badge:last-child) > .badge { float: none; margin-left: auto; flex: 0 0 auto; }
.list-group-item:has(> .badge:last-child) > .badge ~ .badge { margin-left: 0; }
.list-group-item > .badge + .badge { margin-right: 5px; }
/* BS3-hover op klikbare lijstitems: grijze tint, géén link-underline
 * (de globale a:hover-underline-pariteitsregel is hier lelijk) */
a.list-group-item:hover, a.list-group-item:focus {
    background-color: #f5f5f5; color: #555; text-decoration: none;
}
.nav-sidebar > li > a > .badge { float: right; }
/* BS3 list-group-item-dichtheid (BS5: 8x16) */
.list-group-item { padding: 10px 15px; }

/* BS3: knoppen wrapten hun tekst nooit (white-space: nowrap zat op .btn);
 * BS5 laat wrappen toe -> dubbele-hoogte-knoppen bij krappe kolommen */
.btn { white-space: nowrap; }

/* BS3 zette panel-classes op <thead> (vergader-/herprint-pagina's, 7×); BS5's
 * .card (flex-kolom + rand + bg) sloopt de tabelkop: koppen klonteren los van
 * de kolommen. Terug naar table-gedrag; de zachte-tabellen-header stylet de kop. */
thead.card {
    display: table-header-group;
    border: 0; border-radius: 0; box-shadow: none;
    background: transparent; margin-bottom: 0;
}

/* BS3-grid zonder .row-wrapper: veel schermen zetten col-md-* direct in
 * een container/form zonder .row. Onder BS3 floatten kolommen ook zo; BS5-
 * kolommen zijn flex-items en stapelen dan. In plaats van de kolommen te
 * floaten (dat brak geneste flex-cards) maken we de DIRECTE parent een
 * flex-row via :has(), zodat de kolommen zich native als BS5-kolommen
 * gedragen. .row/.card/.card-body/.form-check zijn zelf al layout-contexten
 * en blijven ongemoeid. */
:not(body):not(tr):not(thead):not(tbody):not(table):not(.row):not(.card):not(.form-check):not(.input-group):not(.btn-group):has(> [class*="col-sm-"]:not(.row)),
:not(body):not(tr):not(thead):not(tbody):not(table):not(.row):not(.card):not(.form-check):not(.input-group):not(.btn-group):has(> [class*="col-md-"]:not(.row)),
:not(body):not(tr):not(thead):not(tbody):not(table):not(.row):not(.card):not(.form-check):not(.input-group):not(.btn-group):has(> [class*="col-lg-"]:not(.row)),
:not(body):not(tr):not(thead):not(tbody):not(table):not(.row):not(.card):not(.form-check):not(.input-group):not(.btn-group):has(> [class*="col-xl-"]:not(.row)) {
    display: flex;
    flex-wrap: wrap;
    /* geen regel-stretch: een meegerekte kolom (naast een langere buurkolom) duwde
     * anders de page-header-onderlijn ver onder de titel (blok-flow = BS3-gedrag) */
    align-content: flex-start;
}
/* Koppen die door bovenstaande flexrow tot tekstbreedte krimpen (blauwe
 * page-header-onderlijn werd een los streepje) houden de volle regel.
 * flex-basis werkt alleen als flex-item; block-layout blijft ongemoeid. */
h1.page-header, h2.page-header, h3.page-header, h4.page-header, h5.page-header {
    flex: 0 0 100%;
}
/* Idem voor blok-kinderen (div/p/form/fieldset/ul/ol) zónder kolomklasse in
 * zo'n flexrow: onder BS3 (block-flow) besloegen die de hele regel; als
 * krimpend flex-item schoven veldrijen naast elkaar (WV-blok) of kromp een
 * wrapper-div tot contentbreedte (emailtelefoon-blok). Inline-elementen
 * (button/span/a/label) blijven meestromen, zoals onder BS3. */
:not(body):not(tr):not(thead):not(tbody):not(table):not(.row):not(.card):not(.form-check):not(.input-group):not(.btn-group):has(> [class*="col-sm-"]:not(.row)) > :is(div, p, form, fieldset, ul, ol):not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]),
:not(body):not(tr):not(thead):not(tbody):not(table):not(.row):not(.card):not(.form-check):not(.input-group):not(.btn-group):has(> [class*="col-md-"]:not(.row)) > :is(div, p, form, fieldset, ul, ol):not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]),
:not(body):not(tr):not(thead):not(tbody):not(table):not(.row):not(.card):not(.form-check):not(.input-group):not(.btn-group):has(> [class*="col-lg-"]:not(.row)) > :is(div, p, form, fieldset, ul, ol):not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]),
:not(body):not(tr):not(thead):not(tbody):not(table):not(.row):not(.card):not(.form-check):not(.input-group):not(.btn-group):has(> [class*="col-xl-"]:not(.row)) > :is(div, p, form, fieldset, ul, ol):not([class*="col-sm-"]):not([class*="col-md-"]):not([class*="col-lg-"]):not([class*="col-xl-"]) {
    flex: 0 0 100%;
}

/* BS3 gaf ELKE grid-kolom een harde 15px horizontale padding; BS5 doet dat via
 * --bs-gutter-x die alleen binnen .row bestaat, dus kale kolommen (zonder .row)
 * kregen padding 0 → misuitlijning/overflow. Herstel de vaste 15px. Rows houden
 * hun -15px gutter-marge (zie .row-regel), dus binnen .row verrekent dit netjes. */
[class*="col-sm-"]:not(th):not(td), [class*="col-md-"]:not(th):not(td),
[class*="col-lg-"]:not(th):not(td), [class*="col-xl-"]:not(th):not(td) {
    padding-left: 15px;
    padding-right: 15px;
}
.g-0 > [class*="col-"], .gx-0 > [class*="col-"] { padding-left: 0; padding-right: 0; }

/* Dossieroverzicht-pariteit (gemeten diff home 8080 vs 8085) */
.list-group { margin-bottom: 20px; }          /* BS3: blokken hadden 20px onderling */
.row { --bs-gutter-x: 30px; }                 /* BS3-gutter: 15px per kolomzijde (BS5: 12px) */
.badge {                                       /* BS3-badge: 12px, 3x7 padding */
    font-size: 12px;
    padding: 3px 7px;
}

/* FontAwesome-iconen als class direct op een knop (btn ... fa fa-x):
 * BS5's .btn zet font-family (CSS-var) en fontawesome.css laadt vóór
 * bootstrap5.css, dus verloor het icoonfont. Laatste stem hier. */
.btn.fa, .btn.fas { font-family: "Font Awesome 5 Free"; font-weight: 900; }
.btn.far { font-family: "Font Awesome 5 Free"; font-weight: 400; }

/* BS3/normalize resette form-marges; BS5-reboot laat de UA-default (1em) staan.
 * Zichtbaar als extra hoogte onder o.a. de bladergroep in de breadcrumb. */
form { margin: 0; }

/* BS3: breadcrumb had 20px ondermarge (BS5: 1rem) */
.breadcrumb { margin-bottom: 20px; }

/* Formulier-ritme exact op BS3 (gemeten diff step1):
 * - BS3 label: 5px ondermarge (BS5: 0)
 * - form-group was 15px; de geconverteerde mb-3 is 1rem=16px */
label { margin-bottom: 5px; }
.mb-3 { margin-bottom: 15px !important; }

/* Cards: BS3-panel-paddings (BS5: 8x16/16) */
.card-header { padding: 10px 15px; }
.card-body { padding: 15px; }
.card-footer { padding: 10px 15px; }
.form-label { margin-bottom: 5px; }  /* BS5: .5rem=8px; BS3-label: 5px */


/* Drie-puntjes-actieknop (dropup naast Terug): was in BS3 bewust pijl-loos;
 * BS5's dropdown-toggle::after tekende er een halve pijl bij. */
.btn-actions.dropdown-toggle::after { display: none; }
/* Kebab-knoppen (⋮): het icoon is de affordance, BS3 tekende daar geen caret bij */
.dropdown-toggle:has(> .glyphicon-option-vertical)::after,
.dropdown-toggle:has(> .fa-ellipsis-v)::after { display: none; }

/* Addon-knoppen in input-groups (kalender e.d.): BS5's .btn komt in de bron ná
 * .input-group-text en maakt ze transparant+randloos+inline-block — icoon leek
 * los te zweven en stond niet gecentreerd */
.input-group > .input-group-text.btn {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    display: flex; align-items: center; justify-content: center;
    /* label-marge (form-ritme-regel) snoept anders 5px van de flex-stretch af */
    margin-bottom: 0;
}

/* BS3-erfenis: 10 instructie-modals hebben modal-lg op .modal-content i.p.v.
 * .modal-dialog; onder BS3 pakte de width-regel dat element toch, onder BS5
 * is het een dialog-variabele. 900px = BS3 modal-lg-maat. */
.modal-dialog:has(> .modal-content.modal-lg) { max-width: 900px; }
/* Het doelgroepenmodel gebruikt als enige modal-xl en was in BS3 1100px breed.
 * BS5 begrenst modal-xl tot 800px onder 1200px, tenzij de dialogvariabele wint. */
@media (min-width: 1102px) {
    .modal-xl { --bs-modal-width: 1100px; }
}

/* bootstrap-filestyle 1.2.1 nestelt de knop in een BS3 input-group-btn-wrapper.
 * BS5 herkent alleen directe knoppen; herstel flex-uitlijning en uitsluitend de
 * twee aansluitende hoeken, zowel met de knop vóór als na het invoerveld. */
.bootstrap-filestyle > .input-group-btn {
    display: flex;
}
.bootstrap-filestyle > .input-group-btn > label {
    margin-bottom: 0;
}
.bootstrap-filestyle > .form-control:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.bootstrap-filestyle > .form-control:first-child + .input-group-btn > label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.bootstrap-filestyle > .input-group-btn:first-child > label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.bootstrap-filestyle > .input-group-btn:first-child + .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* SearchPanes (DataTables): de rij-labels heten toevallig .label —
 * daar géén BS3-badge-styling (witte tekst) maar platte zwarte tekst,
 * zoals de referentie. */
.dt-searchPanes .pane .label {
    color: #000;
    font-weight: 400;
    padding: 0;
    display: inline;
}

/* Modal-paddings op BS3-maat (BS5: 1rem=16px). Header houdt ruimte rechts
 * voor de absoluut-gepositioneerde btn-close. */
.modal-header { padding: 15px; }
.modal-body   { padding: 15px; }
.modal-footer { padding: 15px; }

/* Legacy-markup die tegelijk .row én .col-* is (bv. <label class="row col-md-10">):
 * onder BS3 won de kolom (block + breedte), onder BS5 wint .row (flex, breedteloos).
 * Zet zulke elementen terug naar block zodat de kolom-breedte weer geldt. */
.row[class*="col-sm-"], .row[class*="col-md-"], .row[class*="col-lg-"] { display: block; }
/* Vraag+radio-patroon (WV-blok, aanvraagStep3/5): <label class="row col-md-10">vraag</label>
 * met daarna inline Ja/Nee-radio's. BS3 floatte de kolom links zodat de radio's de
 * restruimte rechts vulden; inline-block herstelt dat zonder float. */
label.row[class*="col-sm-"], label.row[class*="col-md-"], label.row[class*="col-lg-"] {
    display: inline-block; vertical-align: top;
}
/* BS5's `.row > *` geeft kinderen width:100% — binnen zo'n legacy-label duwt dat
 * het tooltip-icoontje naar een eigen regel. Terug naar inline gedrag. */
label.row[class*="col-sm-"] > *, label.row[class*="col-md-"] > *, label.row[class*="col-lg-"] > * {
    width: auto; max-width: none; padding: 0; margin-top: 0;
}
label.row[class*="col-"] ~ .form-check-inline { vertical-align: top; margin-top: 2px; }

/* BS3: .navbar-right .dropdown-menu lijnde automatisch rechts uit; de BS5-navbar
 * gebruikt ms-auto, waardoor rechtse menu's (gebruiker/help) buiten beeld groeiden. */
.navbar-nav.ms-auto .dropdown-menu { left: auto; right: 0; }

/* ============================================================
 * 13. Zachte tabellen — BEWUSTE afwijking van BS3 (user-keuze).
 *     Het BS3-raster (table-bordered om elke cel) oogde hard;
 *     nu alleen horizontale scheidingen, lichtere lijnen, rustige
 *     header-tint, subtielere zebra en een lichte rij-hover.
 * ============================================================ */
.table { --bs-table-striped-bg: rgba(0, 0, 0, .022); }
.table-bordered > :not(caption) > * > * { border-left: 0; border-right: 0; }
.table > :not(caption) > * > * { border-color: #eceef1; }
/* Ruimer, verticaal gecentreerd celritme voor een strakker beeld */
.table > :not(caption) > * > * { padding: 10px 14px; vertical-align: middle; }
/* Buitenste cellen wat meer marge van de rand af */
.table > :not(caption) > * > *:first-child { padding-left: 16px; }
.table > :not(caption) > * > *:last-child  { padding-right: 16px; }
.table > thead th,
table.dataTable thead th {
    /* iets donkerder dan de oorspronkelijke #f8f9fa: BS3 gebruikte #eee,
     * de te lichte tint liet de kopregel wegvallen (user 20-07) */
    background-color: #eceef1;
    border-bottom: 2px solid #ced4da;
    /* strakkere kopregel: iets meer letterruimte, geen bovenrand */
    letter-spacing: .02em;
    border-top: 0;
    white-space: nowrap;
}
/* Historie-overzichten houden een rustige, achtergrondloze kopregel. */
.table#historieTable > thead th,
.table.historie-table > thead th {
    background-color: transparent;
}
.table > tbody > tr:hover > * { background-color: rgba(51, 122, 183, .05); }
/* BS3-contextklassen dragen in enkele rapportages en beheerflows betekenis.
 * Zet ook de BS5-tabelvariabelen, zodat zebra/hover-box-shadows de kleur niet maskeren. */
.table > tbody > tr.warning > * {
    --bs-table-bg-type: #fcf8e3;
    --bs-table-bg-state: #fcf8e3;
    background-color: #fcf8e3;
}
.table > tbody > tr.info > * {
    --bs-table-bg-type: #d9edf7;
    --bs-table-bg-state: #d9edf7;
    background-color: #d9edf7;
}
.table > tbody > tr.active > *,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active {
    --bs-table-bg-type: #f5f5f5;
    --bs-table-bg-state: #f5f5f5;
    background-color: #f5f5f5;
}
/* Subtiel kader om de hele tabel — geeft de kopregel + filter/zoekvelden weer
 * een omsluitende lijn (viel weg met de zachte-tabellen-look; user 20-07) */
.table { border: 1px solid #dee2e6; }

/* ============================================================
 * 14. Brede DataTables binnen het scherm houden.
 *     Rapportage-/exporttabellen hebben bewust veel kolommen (tot > 6.000px).
 *     BS3 liet die feitelijk de hele pagina verbreden; onder de BS5-layout
 *     trekt dat ook navbar, breadcrumb en filters uit beeld. Laat daarom de
 *     DataTables-wrapper horizontaal scrollen en houd de pagina zelf op de
 *     viewportbreedte. Smalle tabellen veranderen hierdoor niet.
 * ============================================================ */
.dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Een eventueel actiemenu mag tijdens gebruik buiten de tabelwrapper vallen. */
.dataTables_wrapper:has(.dropdown-menu.show) { overflow-x: visible; }