/*
 * PA UI Kit — legacy skin (pilot)
 * Flowbite-designtaal in Planningsagenda huisstijl.
 * Herstyled bestaande legacy classes (widget, form-control, btn, table, modal)
 * zonder markup-wijzigingen. Laden ná pages/iframe/header.php zodat deze
 * regels de Beyond/inline-styling op volgorde overschrijven.
 */
:root {
    --pa-primary: #396BC4;
    --pa-primary-dark: #2d56a0;
    --pa-primary-50: #eff3fb;
    --pa-primary-ring: rgba(57, 107, 196, 0.18);
    --pa-success: #53a93f;
    --pa-success-dark: #468e35;
    --pa-danger: #df5138;
    --pa-danger-dark: #c74430;
    --pa-warning: #f4b400;
    --pa-gray-50: #f9fafb;
    --pa-gray-100: #f3f4f6;
    --pa-gray-200: #e5e7eb;
    --pa-gray-300: #d1d5db;
    --pa-gray-400: #9ca3af;
    --pa-gray-500: #6b7280;
    --pa-gray-700: #374151;
    --pa-gray-900: #111827;
    --pa-radius-input: 6px;
    --pa-radius-btn: 6px;
    --pa-radius-card: 10px;
    --pa-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pa-shadow-card: 0 1px 2px rgba(17, 24, 39, 0.05);
    --pa-shadow-modal: 0 20px 40px rgba(17, 24, 39, 0.25);
}

/* ===== Basis typografie ===== */
/* Windows toont een scrollbalk die ruimte inneemt. Zonder gereserveerde ruimte
   verspringt de hele pagina (o.a. het gecentreerde partnerlogo in de kopbalk) zodra
   de balk na het laden verschijnt. scrollbar-gutter houdt die ruimte altijd vrij;
   de balk zelf blijft alleen zichtbaar op pagina's die echt scrollen. */
html {
    scrollbar-gutter: stable;
}
html body {
    font-family: var(--pa-font);
    font-size: 12.8px;
    color: var(--pa-gray-900);
    background: var(--pa-gray-50);
    -webkit-font-smoothing: antialiased;
}
/* Alleen iframe-pagina's (bootbox-inhoud): ademruimte rond de inhoud zodat
   kaart-hoeken en schaduwen zichtbaar blijven; full pages hebben eigen layout */
body.iframe-body {
    padding: 16px;
}
/* Negatieve gutter-marges van top-level rows neutraliseren; anders valt de
   rechterkolom buiten het iframe en verdwijnen de afgeronde hoeken tegen de rand */
body.iframe-body > .row,
body.iframe-body > form > .row {
    margin-left: 0;
    margin-right: 0;
}
/* Zelfde euvel binnen kaarten: een row direct in een ongepadde container steekt
   met zijn negatieve marges buiten de kaartranden (o.a. profiel en client bewerken).
   De 8px zij-padding maakt de netto-inset 20px, gelijk aan widget-body content */
body .widget > [class*="col-"] > .row,
body .widget > .tabbable > .row,
body .widget > .row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 8px;
    padding-right: 8px;
}
body label,
body .form-title-inline,
body th,
body td,
body input,
body select,
body textarea,
body .btn {
    font-family: var(--pa-font);
}
body .form-title-inline {
    font-size: 12.8px;
    font-weight: 500;
    color: var(--pa-gray-700);
    padding-top: 10px;
}

/* ===== Widget → kaart ===== */
body .widget {
    background: #fff;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    box-shadow: var(--pa-shadow-card);
    margin-bottom: 16px;
    overflow: hidden;
}
/* Wizard-knoppenbalk (Opslaan/Verwijderen/Vorige/Volgende): kale knoppen
   zonder kaders op de grijze balk, zoals de klassieke wizard-navigatie.
   Hoogte blijft gelijkgetrokken (Verwijderen werd anders hoger dan de rest) */
body #wizard-actxions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
body #wizard-actxions .btn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--pa-gray-800) !important;
    height: 42px !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    line-height: 1.2 !important;
    font-size: 12.8px !important;
}
body #wizard-actxions .btn:hover {
    background: var(--pa-gray-100) !important;
    color: var(--pa-gray-900) !important;
}
body #wizard-actxions .btn i.fa,
body #wizard-actxions .btn [class*="fa-"] {
    font-size: 12.8px;
    line-height: 1;
}
/* De oude gekleurde knoppen hadden witte iconen (class .white); op de kale
   kit-knoppen is wit onzichtbaar — laat het icoon de knopkleur volgen */
body #wizard-actxions .btn i.white {
    color: inherit !important;
}
/* Vragenlijst- en terugkoppelingsweergave (o.a. in de wizard): geen kaart om
   de inhoud — de vragenlijst heeft z'n eigen opmaak met de blauwe themabalk */
body .widget.vragenlijst-pa {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    margin-bottom: 0;
}
/* Planningswizard: de buitenwrapper om het formulier is geen kaart — de
   binnenwidget met de tabs is dat al; een dubbele rand lijnde onderaan niet uit */
body .widget.pa-heeft-wizardformulier{
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    margin-bottom: 0;
}
/* Geen inspringing: de formulierkaart lijnt links uit met de Resultaten-kaart */
body .widget.pa-heeft-wizardformulier > .row{
    padding: 0;
    margin: 0;
}
/* Geneste veld-subtabellen (duur/postcode, datum/tijd) op alle drie de tabs:
   de standaard 1px-celpadding liet die velden nét rechts van de inputs erboven
   beginnen */
body form#afspraakWizardForm table table > tbody > tr > td:first-child {
    padding-left: 0;
}
body form#afspraakWizardForm {
    padding: 0;
}
/* Kopknoppen rechts uitlijnen met de formulier-content eronder
   (de widget-body heeft 20px zijpadding) */
body form#afspraakWizardForm .widget-header .tab-red.pull-right.pa-heeft-widget-buttons{
    right: 20px;
}
/* De knoppen-wrapper draagt zelf nog 20px rechterpadding (custom.css zet die
   met !important); zonder deze reset eindigden de knoppen dubbel zo ver van
   de kaartrand als de select eronder */
body form#afspraakWizardForm .widget-header .widget-buttons {
    padding-right: 0 !important;
}
/* Sjabloonkiezer (documenten én e-mail): iets bredere en hogere dialoog zodat
   lange sjabloonnamen passen en er meer sjablonen tegelijk zichtbaar zijn */
body .modal-dialog.pa-heeft-verplaats-frame,
body .modal-dialog.pa-heeft-documentdelen-frame,
body .modal-dialog.pa-heeft-afspraakverplaats-frame,
body .modal-dialog.pa-heeft-sjabloonkiezer-frame,
body .modal-dialog.pa-heeft-notitiesjabloonkiezer-frame,
body .modal-dialog.pa-heeft-emailsjabloonkiezer-frame{
    width: 760px;
    max-width: 92vw;
}
body #sjabloonKiezerFrame,
body #notitiesjabloonKiezerFrame,
body #emailSjabloonKiezerFrame {
    height: 65vh !important;
    min-height: 400px;
}
/* Verrichting toevoegen (weekplanning): iets bredere dialoog */
body .modal-dialog.pa-heeft-verrichting-frame{
    width: 580px;
    max-width: 92vw;
}
/* Gevalideerde communicatie-dialoog: vaste ruime hoogte zodat de open
   select2-dropdown binnen het iframe past zonder afgekapt te worden */
body #gevalFrame {
    height: 260px !important;
}
/* Lange namen in een select met clear-kruisje: afkappen vóór het kruis
   (right: 34px) i.p.v. eronderdoor lopen */
body .select2-selection--single .select2-selection__rendered.pa-heeft-select2-clear{
    padding-right: 52px !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* Multi-selects: geen "alles wissen"-kruis; elke chip heeft al een eigen kruisje */
body .select2-selection--multiple .select2-selection__clear {
    display: none !important;
}
/* Sectiekop met de titel links en de toevoegen-knop rechts (o.a. bedrijf-
   verzekeringen); tussen opeenvolgende secties extra lucht */
body .pa-sectie-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 32px;
    margin-bottom: 10px;
}
body .pa-sectie-kop:first-child {
    margin-top: 0;
}
/* De gekleurde kop-onderranden van beyond (tabelkoppen én dialoog-koppen zoals
   .modal-darkorange) volgen de partner-accentkleur i.p.v. vaste oranje/rode tinten */
body .table thead[class*="bordered-"] > tr > th {
    border-bottom-color: var(--pa-primary);
}
body .modal[class*="modal-"] .modal-header,
body [class*="modal-"] > .modal-dialog > .modal-content > .modal-header {
    border-bottom-color: var(--pa-primary);
}
/* Froala: de onderbalk (voorheen de tekenteller) is leeg sinds de teller uit
   staat, maar hield z'n rand — dat oogde als een dubbele onderrand */
body .fr-box .fr-second-toolbar:empty {
    display: none;
}
/* Taakformulier in het zijde-paneel: de paneel-widget en de frame-body geven al
   ruimte; het formulier stapelt er anders nóg twee lagen padding bovenop */
body.iframe-body form#clientTaakForm.iframe-form {
    padding: 0 !important;
}
body.iframe-body form#clientTaakForm #formDiv {
    padding: 4px 2px !important;
}
/* Iframe-formulieren zijn standaard height:auto (ook in custom.css) zodat er
   nooit een fantoom-scrollbalk ontstaat; hier nogmaals met !important zodat de
   kit dit draagt, onafhankelijk van de custom.css-cache. Alleen full-height
   editors met interne scroll-kolommen krijgen de volle hoogte expliciet terug. */
body.iframe-body form.iframe-form,
body.iframe-body div.iframe-form:not([style*="height"]) {
    height: auto !important;
}
body.iframe-body form#inputForm.iframe-form,
body.iframe-body form#rapportageForm.iframe-form {
    height: 100vh !important;
}
/* Eerste sectietitel in een iframe-form: geen extra topmarge — de body en het
   form geven al ademruimte onder de dialoog-kop */
body.iframe-body form.iframe-form .form-title:first-of-type {
    margin-top: 0;
}
/* Formulieren met een .widget-class die zelf widgets bevatten (o.a. flexibele
   rapportage controleren): geen dubbele kaart om de echte widgets heen */
body form.widget.pa-heeft-widget-kind{
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    margin-bottom: 0;
    padding: 0;
}
body .widget-header,
body .widget-header.bordered-bottom,
body .widget-header.bordered-yellow,
body .widget-header.bordered-bottom.bordered-white,
body .widget-header.bordered-bottom.bordered-sky,
body .widget-header.bg-blue,
body div.pa-widget-header,
body .widget-header-bg,
body #taakMenu div.widget-header,
body #agendaBody div.widget-header,
body #searchList div.widget-header,
body #optionList div.widget-header,
body div.flexboard div.widget-header,
body .vragenlijst-pa div.widget-header {
    background: #fff !important;
    border: 0;
    border-bottom: 1px solid var(--pa-gray-200) !important;
    min-height: 48px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    /* Anker voor absoluut gepositioneerde kop-knoppen (right rekent anders
       tegen een bredere buitencontainer) */
    position: relative;
}
/* Planning per agenda: de widget-titels dicht op de rand (zoals vanouds); geldt
   bewust alleen voor deze pagina (#agendaMenu/#agendaBody/#taakMenu bestaan alleen daar) */
body #agendaMenu .widget-header,
body #agendaBody div.widget-header,
body #taakMenu div.widget-header {
    padding-left: 6px;
    padding-right: 12px;
}
/* Witte iconen en links uit het blauwe thema zijn onleesbaar op de witte kit-koppen.
   De .white-utility en geërfde witte kleuren worden grijs; kleur-accenten blijven. */
body .widget-header > i,
body .widget-header > .fa,
body .widget-header > a:not(.btn),
body .widget-header > span:not(.widget-caption) > i,
body .widget-header .white,
body .widget-header a:not([class*="btn"]),
body .widget-header a:not([class*="btn"]) i,
body .widget-header .fa:not(.green):not(.purple):not(.red):not(.blue):not(.orange),
body .pa-section-header .white,
body .new-well .white {
    color: var(--pa-gray-500) !important;
}
/* FA5-stijlen (fa-solid/fa-brands, zonder .fa-basisclass) in koppen en taakmenu-knoppen ook grijs */
body .widget-header i[class*="fa-"]:not(.green):not(.purple):not(.red):not(.blue):not(.orange),
body #taakMenu .btn-default i[class*="fa-"]:not(.green):not(.purple):not(.red):not(.blue):not(.orange) {
    color: var(--pa-gray-500) !important;
}
/* Betekenisvolle icoon-kleuren in koppen herstellen; extra selector-gewicht omdat
   custom.css ze met .widget-header.bordered-bottom.bordered-white .fa wit maakt */
body .widget-header .fa.green,
body .widget-header .btn .green,
body .widget-header.bordered-bottom.bordered-white .green,
 body .widget-header .widget-buttons .btn .green,
body #taakMenu .btn-default .green,
body .pa-section-header .fa.green {
    color: var(--pa-success) !important;
}
body .widget-header .fa.purple,
body .widget-header .btn .purple,
body .widget-header.bordered-bottom.bordered-white .purple,
 body .widget-header .widget-buttons .btn .purple,
body #taakMenu .btn-default .purple,
body .pa-section-header .fa.purple {
    color: #9351cd !important;
}
body .widget-header .fa.blue,
body .widget-header.bordered-bottom.bordered-white .blue,
body .widget-header .widget-buttons .btn .blue {
    color: var(--pa-primary) !important;
}
body .widget-header .fa.red,
body .widget-header.bordered-bottom.bordered-white .red,
body .widget-header .widget-buttons .btn .red {
    color: var(--pa-danger) !important;
}
body .widget-header .fa.orange,
body .widget-header.bordered-bottom.bordered-white .orange,
body .widget-header .widget-buttons .btn .orange {
    color: var(--pa-warning) !important;
}
body .widget-caption {
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-shadow: none;
}
/* Widget-titel als accent-tab op de witte kop: vult de kophoogte, flush tegen
   de linker kaartrand. De achtergrond volgt --pa-primary (die door de
   partner-labeling op kleur3 gezet wordt); expliciete labeling-regels
   (kleur3/kleur3_tekst met !important) winnen daarvan. */
body div.widget-header > .widget-caption {
    background: var(--pa-primary);
    color: #fff;
    font-size: 12.8px !important;
    font-weight: 600 !important;
    line-height: normal;
    align-self: stretch;
    margin-left: -20px !important;
    padding: 0 14px !important;
    /* Alleen boven rond; de onderkant sluit vlak aan (zoals de tabs) */
    border-radius: 0 8px 0 0 !important;
}
/* Kop met accent-tab: zelfde maat als de moderne instellingen-kop (40px);
   de cleane weergaven (dossier, planning) houden hun eigen 48px-kop */
body:not(.pa-clean-weergave) div.widget-header.pa-heeft-widget-caption{
    min-height: 40px;
}
/* Los decoratie-icoon direct vóór de titel-tab verbergen zodat de tab
   flush tegen de linker kaartrand ligt (kit-look zonder dubbel ornament) */
body div.widget-header > i.pa-voor-widget-caption,
body div.widget-header > .widget-icon.pa-voor-widget-caption{
    display: none;
}
/* Iconen in de accent-tab volgen de titelkleur */
body .widget-header .widget-caption > i,
body .widget-header .widget-caption .fa:not(.green):not(.purple):not(.red):not(.blue):not(.orange),
body .widget-header .widget-caption i[class*="fa-"]:not(.green):not(.purple):not(.red):not(.blue):not(.orange) {
    color: inherit !important;
}
/* Planning-kopbalk (cleane weergave): uniforme knoppen — zelfde hoogte,
   icoongrootte en onderlinge afstand, netjes verticaal gecentreerd */
body.pa-clean-weergave .widget-header .widget-buttons {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
body.pa-clean-weergave .widget-header .widget-buttons .btn-group {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}
body.pa-clean-weergave .widget-header .widget-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 26px !important;
    min-width: 26px;
    padding: 0 7px !important;
    margin: 0 !important;
    font-size: 12.8px;
    line-height: 1 !important;
}
body.pa-clean-weergave .widget-header .widget-buttons .btn i.fa,
body.pa-clean-weergave .widget-header .widget-buttons .btn [class*="fa-"] {
    font-size: 12.8px !important;
    line-height: 1;
}

/* Cleane weergave (dossier, flexdossier, gebruikers- en bedrijfsdossier, planning):
   daar blijft de rustige witte kop met donkere titel */
body.pa-clean-weergave .widget-caption,
body.pa-clean-weergave div.widget-header > .widget-caption {
    background: transparent !important;
    color: var(--pa-gray-900) !important;
    align-self: center;
    margin-left: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
body.pa-clean-weergave .widget-header .widget-caption > i,
body.pa-clean-weergave .widget-header .widget-caption .fa,
body.pa-clean-weergave .widget-header .widget-caption i[class*="fa-"] {
    color: var(--pa-gray-500) !important;
}
/* In de cleane weergave blijft het decoratie-icoon vóór de titel gewoon staan */
body.pa-clean-weergave div.widget-header > i.pa-voor-widget-caption,
body.pa-clean-weergave div.widget-header > .widget-icon.pa-voor-widget-caption{
    display: inline-block;
}
body .widget-buttons {
    margin-left: auto;
    padding: 0 !important;
}
/* Knoppen en selects in een widget-kop verticaal centreren: als inline-blokken
   hangen ze aan de tekstregel en staan ze een paar pixels te laag in de balk.
   De gap vervangt de witruimte die inline-block tussen de knoppen gaf. */
body .widget-header > .widget-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* header-select brengt zijn eigen 2px marge mee; in een gecentreerde balk niet nodig */
body .widget-header > .widget-buttons .header-select .select2-container .select2-selection--single {
    margin-top: 0 !important;
}
/* custom.css zet .tabbable .widget-buttons op 20px rechterpadding mét !important en
   wint daarmee van de helper p-r-0 (lagere specificiteit). Knoppenbalken boven een
   lijst stonden zo 20px links van de tabelrand eronder. */
body .tabbable .widget-buttons.p-r-0 {
    padding-right: 0 !important;
}
/* Zijdepaneel van de wizard sluit aan op het formulier ernaast; custom.css zet er
   nog 15px linkermarge op, waardoor er een grijze strook naast de kaart overbleef. */
body .modelFillerSide {
    margin-left: 0;
}
/* BIG-registratie: nummer, verloopdatum en het vinkje op één regel. De verloopdatum
   heeft een label erboven, dus onderlangs uitlijnen. */
/* Afspraakformulier: de veldkolom houdt een vaste breedte. Zonder gekozen client
   zijn type-contact en het dossier-mapje verborgen; met een auto-verdeling sprong
   de kolom dan smaller/breder zodra er een client gekozen werd. */
body #afspraakForm .afspraak-veldtabel > tbody > tr > td:first-child {
    width: 150px;
}
body #afspraakForm .afspraak-veldtabel > tbody > tr > td:nth-child(2) {
    width: 466px;
}
/* De dossiertitel wordt door een script naar de kopbalk (#rightTopPlacer) gekopieerd
   en daarna geleegd. Tot dat moment stond hij zichtbaar boven de clientgegevens en
   sprong hij bij het laden even heen en weer; dit doorgeefluik hoort nooit in beeld. */
body #dossierTitelInput {
    display: none;
}
/* Naamrij: roepnaam, initialen, tussenvoegsel en achternaam naast elkaar; de
   achternaam krijgt de resterende ruimte omdat die het langst is. */
body .pa-veld-rij.naam-rij > .veld-roepnaam {
    flex: 0 0 26%;
    min-width: 0;
}
body .pa-veld-rij.naam-rij > .veld-initialen {
    flex: 0 0 12%;
    min-width: 0;
}
body .pa-veld-rij.naam-rij > .veld-tussenvoegsel {
    flex: 0 0 18%;
    min-width: 0;
}
body .pa-veld-rij.naam-rij > .veld-achternaam {
    flex: 1 1 auto;
    min-width: 0;
}
/* Een dag uit een andere maand (bijvoorbeeld 27 juli in de augustus-kalender) kreeg
   dezelfde markering als de echte start- of einddatum, waardoor dezelfde dag twee keer
   geselecteerd leek. */
body .daterangepicker td.off,
body .daterangepicker td.off.active,
body .daterangepicker td.off.start-date,
body .daterangepicker td.off.end-date,
body .daterangepicker td.off.in-range {
    background-color: #fff !important;
    color: #999 !important;
}

/* Datumbereik-kalender: de rechterhelft heeft een max-width van 270px, terwijl de
   maandtabel plus padding 273px nodig heeft. De tabel liep daardoor over zijn eigen
   padding heen en stond bijna tegen de rand, terwijl links wel ruimte overbleef. */
body .daterangepicker .drp-calendar.right {
    max-width: 292px;
}

/* Planningswizards: één periode-veld met datum en tijd in plaats van vier losse
   velden. De originele velden blijven in de pagina staan omdat het zoeken naar
   beschikbaarheid en het aanmaken van de afspraak erop werken. */
body .wizard-periode-veld {
    max-width: 460px;
}

body .wizard-periode-bron {
    display: none;
}

/* Het periode-veld is een span in plaats van een input, zodat datum en tijd elk hun
   eigen icoon en opmaak kunnen krijgen. */
body .periode-weergave {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

body .periode-weergave .periode-deel {
    display: flex;
    align-items: center;
    gap: 10px;
}

body .periode-weergave .periode-label {
    color: #6b7280;
}

body .periode-weergave .periode-datum,
body .periode-weergave .periode-tijd {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Streepje tussen de datum en de tijd van dezelfde helft */
body .periode-weergave .periode-tijd {
    padding-left: 10px;
    border-left: 1px solid #e5e7eb;
    color: var(--pa-accent, #396BC4);
}

body .periode-weergave .periode-datum > i,
body .periode-weergave .periode-tijd > i {
    color: #9ca3af;
}

body .periode-weergave .periode-pijl {
    color: #9ca3af;
}

body .periode-weergave.periode-uitgeschakeld {
    cursor: default;
    background-color: #f5f5f5 !important;
}

body .wizard-periode-veld.wizard-periode-uit .periode-weergave {
    background-color: #f5f5f5 !important;
}

/* De tijdkeuzes in de kalender houden hun eigen grijze opmaak en zijn zo smal dat het
   pijltje over de cijfers valt. Gelijkgetrokken met de overige invoervelden. De
   !important is nodig omdat start.php een select-regel met !important meestuurt. */
body .daterangepicker .calendar-time select {
    min-width: 64px;
    height: 38px;
    /* De regelhoogte moet gelijk zijn aan de binnenruimte (38px min de randen), anders
       zakt de tekst onder het midden en staat hij niet op één lijn met het pijltje. */
    line-height: 36px;
    padding: 0 28px 0 10px !important;
    background-color: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px;
    text-align: left;
}

/* Trajecten-element: de kop heeft naast de titel vaste kolommen voor de
   dossierverantwoordelijken (2x 158px) en Start/Eind (2x 96px). Op een smal of
   vierkant scherm is de dossierkolom smaller dan die som, waardoor de koppen over
   elkaar en over het element ernaast heen liepen. Met een vaste tabelindeling
   verdeelt de browser de ruimte binnen de container en kappen te lange koppen af. */
body .trajecten-kop-tabel {
    table-layout: fixed;
}
body .trajecten-kop-tabel > tbody > tr > td {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* De titelkolom neemt de resterende ruimte, net als de naamkolom in de rij-tabel
   eronder. Met een vast percentage (38%) telde de kop over de 100% heen zodra de
   verantwoordelijke-kolommen erbij kwamen; de browser schaalde dan alle
   percentages naar beneden en stonden Casemanager/WVS niet meer boven hun select. */
body .trajecten-kop-tabel > tbody > tr > td.trajecten-kop-titel {
    width: auto;
}

/* ===== Skeleton voor de gekoppelde vragenlijst bij een nieuw dossier ===== */
/* De vragenlijst laadt in een iframe met een eigen laadscherm; zonder skeleton zie je
   eerst een leeg vlak, dan die loader en dan pas de vragen. */
body .pa-vragenlijst-skeleton {
    padding: 8px 0 4px;
}
/* Eigen klassenaam: .pa-skeleton-veld bestaat al in custom.css met een vaste hoogte
   van 34px, waardoor label en veld over elkaar heen schoven */
body .pa-vragenlijst-skeleton .pa-vragenlijst-skeleton-blok {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
body .pa-vragenlijst-skeleton .pa-skeleton-regel {
    display: block;
    height: 11px;
    border-radius: 6px;
    background-color: #eeeeee;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    background-position: -200px 0;
    animation: skeleton-loading 1.4s ease-in-out infinite;
}
body .pa-vragenlijst-skeleton .pa-vragenlijst-skeleton-label {
    width: 30%;
    flex: 0 0 11px;
}
body .pa-vragenlijst-skeleton .pa-vragenlijst-skeleton-blok:nth-child(even) .pa-vragenlijst-skeleton-label {
    width: 45%;
}
body .pa-vragenlijst-skeleton .pa-vragenlijst-skeleton-input {
    width: 100%;
    flex: 0 0 34px;
}
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(100% + 200px) 0;
    }
}

/* ===== Trajectformulier: samenstelling als verbruik-overzicht ===== */
/* Per verrichting het aantal afgeronde en geplande afspraken tegenover het maximum */
body .samenstelling-toelichting {
    margin-left: 12px;
    font-size: 11px;
    font-weight: 400;
    color: var(--pa-gray-500, #6b7280);
}
body .samenstelling-verbruik-tabel {
    border-collapse: collapse;
}
body .samenstelling-verbruik-tabel > tbody > tr > td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--pa-gray-200, #e5e7eb);
    vertical-align: middle;
}
body .samenstelling-verbruik-tabel > tbody > tr > td.getal {
    width: 110px;
    text-align: center;
}
body .samenstelling-verbruik-kop > td {
    font-weight: 600;
    color: var(--pa-gray-700, #374151);
    background-color: var(--pa-gray-50, #f9fafb);
}
/* Kopregel per fase wanneer het traject in fases is ingedeeld */
body .samenstelling-verbruik-fase > td {
    padding-top: 12px !important;
    font-weight: 600;
    color: var(--pa-gray-600, #4b5563);
    background-color: var(--pa-gray-50, #f9fafb);
}
body .samenstelling-verbruik-voortgang {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
body .samenstelling-verbruik-balk {
    flex: 1 1 120px;
    min-width: 80px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--pa-gray-100, #f3f4f6);
    border: 1px solid var(--pa-gray-200, #e5e7eb);
    overflow: hidden;
}
body .samenstelling-verbruik-balk > span {
    display: block;
    height: 100%;
    border-radius: 5px 0 0 5px;
    background-color: #53a93f;
}
body .samenstelling-verbruik-over .samenstelling-verbruik-balk > span {
    background-color: #df5138;
}
body .samenstelling-verbruik-vol .samenstelling-verbruik-balk > span {
    background-color: var(--pa-gray-400, #9ca3af);
}
body .samenstelling-verbruik-badge {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background-color: #53a93f;
}
body .samenstelling-verbruik-over .samenstelling-verbruik-badge {
    background-color: #df5138;
}
body .samenstelling-verbruik-vol .samenstelling-verbruik-badge {
    background-color: var(--pa-gray-400, #9ca3af);
}
body .samenstelling-verbruik-melding {
    flex: 1 0 100%;
    text-align: right;
    font-size: 11px;
    color: #df5138;
}

/* Verbruik-badge achter de verrichtingen in de planningswizard */
body .verrichting-verbruik {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid #53a93f;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    color: #53a93f;
    white-space: nowrap;
    /* De badge is kleiner dan de regel eromheen; met de middenlijn als anker staat
       hij verticaal gecentreerd in plaats van op de tekstbasislijn */
    vertical-align: middle;
    position: relative;
    top: -1px;
}
body .verrichting-verbruik-over {
    border-color: #df5138;
    color: #df5138;
}
body .verrichting-verbruik-vol {
    border-color: var(--pa-gray-400, #9ca3af);
    color: var(--pa-gray-600, #4b5563);
}

/* Verbruik-badge in de afsprakenlijst van het trajectformulier */
body .afspraak-verbruik {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid #53a93f;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #53a93f;
    white-space: nowrap;
}
body .afspraak-verbruik-over {
    border-color: #df5138;
    color: #df5138;
}
body .afspraak-verbruik-vol {
    border-color: var(--pa-gray-400, #9ca3af);
    color: var(--pa-gray-600, #4b5563);
}

/* ===== Dossierelement: traject verbruik ===== */
/* Per verrichting uit de trajectsamenstelling het gebruikte aantal tegenover het
   afgesproken maximum, met een balk die de status meteen laat zien. */
/* Het element toont altijd een regel met blokken; de hoogte ligt daarmee vast en volgt
   niet de ingestelde elementhoogte uit de inrichting */
/* Zonder vaste tabelindeling groeit de tabel mee met de blokken en valt het element
   buiten de kolom; met fixed volgt de cel de kolombreedte en schuift de regel */
body .traject-verbruik-tabel {
    table-layout: fixed;
}
body .traject-verbruik-tabel > tbody > tr > td {
    min-width: 0;
}
body .traject-verbruik-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Geen vaste hoogte: het element groeit mee met het aantal verrichtingen.
       Geen eigen rand; de kaart eromheen heeft er al een. */
    background-color: #ffffff;
    overflow-x: hidden;
    /* Het raster hieronder kijkt naar de breedte van dit element, niet naar die
       van het scherm: de dossierkolom is op een smal scherm ongeveer half zo
       breed, terwijl het venster nog steeds "groot" is */
    container-type: inline-size;
}
/* Raster in plaats van een flex-rij: met flex-grow werden twee tegels op de
   laatste regel over de volle breedte uitgerekt terwijl de regel erboven smalle
   tegels had. Met auto-fill houdt elke tegel dezelfde breedte, of er nu een of
   zeven staan, en vult de laatste regel netjes van links af. */
body .traject-verbruik-rij {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    /* Alle rijen even hoog: anders was een tweede regel met alleen korte namen
       een paar pixels lager dan de regel erboven */
    grid-auto-rows: 1fr;
    gap: 8px;
    padding: 12px;
    min-width: 0;
}
/* Smalle dossierkolom: kleinere tegels zodat er nog drie naast elkaar passen in
   plaats van twee, anders wordt het element bij zeven verrichtingen erg hoog */
@container (max-width: 430px) {
    body .traject-verbruik-rij {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: 6px;
        padding: 10px;
    }
    body .traject-verbruik-naam {
        -webkit-line-clamp: 3;
        min-height: 42px;
    }
}
body .traject-verbruik-blok {
    /* Kolom met de balk onderaan: zo zijn alle tegels even hoog, ook als de ene
       naam over twee regels loopt en de andere over een */
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 7px 9px 9px;
    border: 1px solid var(--pa-gray-200, #e5e7eb);
    border-radius: 8px;
    background-color: var(--pa-gray-50, #f9fafb);
}
body .traject-verbruik-naam {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Twee regels toegestaan: op een regel werd bijna elke verrichtingsnaam
       afgekapt tot "Bedrijfsbezoek/gespr..." */
    min-height: 28px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pa-gray-600, #4b5563);
    overflow-wrap: anywhere;
}
body .traject-verbruik-aantal {
    margin-top: 3px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pa-gray-800, #1f2937);
}
body .traject-verbruik-toelichting {
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.3;
    color: #53a93f;
}
body .traject-verbruik-vol .traject-verbruik-toelichting {
    color: var(--pa-gray-500, #6b7280);
}
body .traject-verbruik-over .traject-verbruik-aantal,
body .traject-verbruik-over .traject-verbruik-toelichting {
    color: #df5138;
}
body .traject-verbruik-balk {
    position: relative;
    height: 4px;
    /* auto duwt de balk naar de onderkant, zodat de balken van alle tegels op
       dezelfde lijn liggen */
    margin-top: auto;
    padding-top: 0;
    border-radius: 2px;
    background-color: var(--pa-gray-200, #e5e7eb);
}
body .traject-verbruik-blok > .traject-verbruik-balk {
    margin-top: 8px;
}
body .traject-verbruik-balk > span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background-color: #53a93f;
}
body .traject-verbruik-vol .traject-verbruik-balk > span {
    background-color: var(--pa-gray-400, #9ca3af);
}
body .traject-verbruik-over .traject-verbruik-balk > span {
    background-color: #df5138;
}
body .traject-verbruik-waarschuwing {
    margin-right: 3px;
    font-size: 11px;
    color: #df5138;
}

body .big-registratie-rij {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
body .big-registratie-rij > .big-nummer-veld {
    flex: 0 0 160px;
}
/* Breed genoeg voor het label "Verloopdatum herregistratie RGS" op één regel */
body .big-registratie-rij > .big-verloopdatum-veld {
    flex: 0 0 215px;
}
body .big-registratie-rij > .big-nummer-veld > .form-group,
body .big-registratie-rij > .big-verloopdatum-veld > .form-group {
    margin-bottom: 0;
}
body .big-registratie-rij > .big-nummer-veld > .form-title,
body .big-registratie-rij > .big-verloopdatum-veld > .form-title {
    white-space: nowrap;
}
body .big-registratie-rij > .big-gevalideerd-veld {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 38px;
    margin-bottom: 0;
    white-space: nowrap;
}
body .big-registratie-rij > .big-gevalideerd-veld > label {
    margin-bottom: 0;
}
body .widget-body {
    padding: 20px;
    background: #fff;
    /* beyond.css geeft widget-body een harde zwarte schaduw; de kaart-look
       komt al van de widget zelf (o.a. zichtbaar in bootbox/zijde-iframes) */
    box-shadow: none !important;
}
/* Formulieren die zelf de widget-class dragen binnen een andere widget
   (o.a. nieuw dossier) geven anders een dubbele kaartrand */
body .widget form.widget {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    overflow: visible !important;
}
/* Legacy zet .widget op overflow: visible !important; daardoor tekenen kinderen
   over de border en de afgeronde hoeken heen. Kaart-inhoud moet binnen blijven. */
body .widget,
body .page-body-inner > .widget {
    overflow: hidden !important;
}
/* Inline vaste breedtes uit legacy markup (bv. width: 400px) begrenzen tot de
   kaart. Select2's zwevende dropdown valt hierbuiten: die ankert aan een
   0px-brede span, waardoor max-width 100% hem tot een sliver zou knijpen */
body .widget-body [style*="width"]:not(.select2-dropdown):not(.select2-dropdown *) {
    max-width: 100%;
}
/* Inline tabel-marges neutraliseren; de widget-body padding zorgt al voor de inset */
body .widget-body table.table {
    margin: 0 !important;
    max-width: 100%;
}

/* ===== Flexdossier secties (pa-section-*) ===== */
/* Elke sectie is één tabel die kop (tr.pa-section-header) én inhoud bevat:
   die tabel is één complete kaart, met vaste ruimte tot de volgende sectie. */
body table.pa-sectie-tabel{
    background: #fff;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    box-shadow: var(--pa-shadow-card);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
    margin-bottom: 16px;
}
/* Zolang er een dropdown open staat mag de kaart niet clippen: het menu
   (bv. Toevoegen bij Documenten) steekt anders half afgekapt in de widget.
   Legacy bootstrap opent via .open op de btn-group, moderne via .show */
body table.pa-sectie-tabel.pa-dropdown-open{
    overflow: visible;
}
/* Dropdown-menu's in de widgets (Toevoegen, filters): kaart-look met nette items.
   Let op: de items zitten in een slimScroll-wrapper, dus descendant-selectors
   (geen > li) anders matchen de hoofdmenu-items niet. */
body table.pa-sectie-tabel .dropdown-menu{
    /* beyond.css zet 2px radius met !important; hier dus ook !important */
    border: 1px solid var(--pa-gray-200) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 15px -3px rgba(17, 24, 39, .12), 0 4px 6px -4px rgba(17, 24, 39, .1) !important;
    padding: 6px !important;
    /* Clipt het dichtgeklapte submenu (staat op left:200px klaar) én houdt
       hover-vlakken netjes binnen de afgeronde hoeken */
    overflow: hidden;
}
body table.pa-sectie-tabel .dropdown-menu li{
    list-style: none;
    margin: 0 0 2px 0;
}
/* De hover hoort op de link (afgerond), niet op de volle li (vierkant):
   overschrijft o.a. de hover:bg-gray-100-class op group-btn-items */
body table.pa-sectie-tabel .dropdown-menu li:hover{
    background: transparent !important;
}
body table.pa-sectie-tabel .dropdown-menu li > a{
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 6px;
    color: var(--pa-gray-700);
    font-size: 12.8px;
    line-height: 18px;
}
body table.pa-sectie-tabel .dropdown-menu li > a:hover{
    background: var(--pa-primary-50);
    color: var(--pa-primary-dark);
    text-decoration: none;
}
body table.pa-sectie-tabel .dropdown-menu li > a > i.fa{
    width: 17px;
    font-size: 12.8px;
    line-height: 1;
    text-align: center;
    flex: none;
}
/* Items met submenu (Wizards e.d.): zelfde hoogte en hover als de rest,
   met een subtiele ">"-chip rechts */
body table.pa-sectie-tabel .dropdown-menu .btn.group-btn-main{
    background: #fff;
    padding: 5px 32px 5px 9px;
    margin: 0;
    min-height: 28px;
    line-height: 18px;
    font-size: 12.8px;
    color: var(--pa-gray-700);
    border: 0;
    box-shadow: none;
}
body table.pa-sectie-tabel .dropdown-menu .btn.group-btn-main:hover{
    /* !important: verslaat de teal a:hover en grijze group-btn-item a:hover regels */
    background: var(--pa-primary-50) !important;
    color: var(--pa-primary-dark) !important;
}
body table.pa-sectie-tabel .dropdown-menu .group-btn-main:after{
    /* Subtiele chevron zonder chip-achtergrond; -1px omdat de glyph optisch
       iets onder het midden van z'n regelbox tekent */
    content: "\203A";
    top: calc(50% - 1px);
    transform: translateY(-50%);
    right: 12px;
    background: transparent;
    color: var(--pa-gray-400);
    border-radius: 0;
    font-size: 15px;
    line-height: 1;
    padding: 0;
}
body table.pa-sectie-tabel .dropdown-menu .btn.group-btn-main:hover:after{
    color: var(--pa-primary);
}
/* Terug-knop in submenu's: zelfde stijl, "<"-chip links */
body table.pa-sectie-tabel .dropdown-menu .group-btn-main-back{
    background: var(--pa-gray-50);
    border-radius: 6px;
    padding: 5px 9px 5px 32px !important;
    color: var(--pa-gray-700);
    font-size: 12.8px;
}
body table.pa-sectie-tabel .dropdown-menu .group-btn-main-back:hover{
    background: var(--pa-gray-100);
    text-decoration: none;
}
body table.pa-sectie-tabel .dropdown-menu .group-btn-main-back:after{
    /* Subtiele chevron zonder chip-achtergrond; -1px omdat de glyph optisch
       iets onder het midden van z'n regelbox tekent */
    content: "\2039";
    top: calc(50% - 1px);
    transform: translateY(-50%);
    left: 12px;
    background: transparent;
    color: var(--pa-gray-400);
    border-radius: 0;
    font-size: 15px;
    line-height: 1;
    padding: 0;
}
body table.pa-sectie-tabel .dropdown-menu .group-btn-main-back:hover:after{
    color: var(--pa-primary);
}
/* Submenu-overlay: zelfde binnenruimte als het hoofdmenu. In ruststand volledig
   buiten het menu parkeren (custom.css zet 200px, maar het menu is breder) */
body table.pa-sectie-tabel .dropdown-menu .sub-menu-group{
    padding: 6px;
    border-radius: 8px;
    /* 100% is t.o.v. de slimScroll-wrapper; de +14px overbrugt menupadding en rand */
    left: calc(100% + 14px);
}
/* Het menu krimpt naar de eigen inhoud (geen lege ruimte onderin); de slimScroll
   zet een vaste 300px, dus hoogte auto met dezelfde 300px als maximum */
body table.pa-sectie-tabel .dropdown-menu .slimScrollDiv,
body table.pa-sectie-tabel .dropdown-menu .slimmScrollBoxBig{
    height: auto !important;
    max-height: 340px;
}
/* Zodra een submenu (bv. Wizards) open is geschoven wél de volle hoogte gebruiken,
   anders krijgt de submenu-overlay te weinig ruimte bij een kort hoofdmenu */
body .pa-section-header,
body .pa-section-box,
body .pa-section-box-full {
    box-shadow: none !important;
}
/* Secties die als losse pa-section-tabel renderen (o.a. wazo-dossier en
   bedrijfs-dossiergegevens): zelfde kaart-look als de widgets, anders staan
   de velden kaal op de pagina */
body table.pa-section-box-full {
    background: #fff;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: var(--pa-shadow-card) !important;
    overflow: hidden;
}
body .pa-section-header {
    background: #fff;
    border-bottom: 1px solid var(--pa-gray-200);
}
body .pa-section-header > td {
    padding: 8px 16px;
    border-bottom: 1px solid var(--pa-gray-200);
    vertical-align: middle;
}
body .pa-section-header .pull-left strong,
body .pa-section-header .pull-left b,
body .pa-section-header .text,
body .pa-section-header label {
    font-size: 12.8px;
    font-weight: 600;
    color: var(--pa-gray-900);
}
/* Titel in het filter-dropdownmenu van een sectie-kop */
body .pa-section-header .dropdown-menu b {
    font-size: 12.8px;
}
/* Knoppen en links in sectie-koppen: geen eigen marges, netjes gecentreerd */
body .pa-section-header .btn,
body .pa-section-header .btn-traject-head,
body .new-well > table > tbody > tr:nth-child(2) .btn,
body .widget-header .btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle;
}
/* Actieknoppen in de sectie-koppen (Toevoegen, Afspraak, Verrichting, Chat …):
   een maat subtieler dan de koptitel en via flex exact verticaal gecentreerd.
   Geldt ook voor de gebruikersdossier-koppen (.new-well, koprij = 2e tr) */
body .pa-section-header .btn.btnCustPad,
body .pa-section-header .btn-group > .btn,
body .new-well > table > tbody > tr:nth-child(2) .btn:not(.dropdown-menu .btn) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px !important;
    line-height: 16px !important;
    padding: 3px 7px !important;
    color: var(--pa-gray-500) !important;
}
body .pa-section-header .btn.btnCustPad:hover,
body .pa-section-header .btn-group > .btn:hover,
body .new-well > table > tbody > tr:nth-child(2) .btn:not(.dropdown-menu .btn):hover {
    color: var(--pa-gray-900) !important;
}
/* De pull-right knoppengroep floatt tegen de bovenkant van de kop-rij en de
   rijhoogtes verschillen per widget; absolute positionering + translateY zet
   de groep in elke kop exact op het verticale midden */
body .pa-section-header > td {
    position: relative;
}
body .pa-section-header .btn-group.pull-right {
    position: absolute;
    right: 16px;
    /* Centreren via auto-marges, niet met translateY: een transform maakt een
       stacking context waardoor het Toevoegen-menu achter latere widgets valt */
    top: 0;
    bottom: 0;
    height: 22px;
    margin: auto 0;
    padding: 0 !important;
    float: none;
    /* Flex voorkomt baseline-witruimte onder de knoppen in de groep */
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Absolute groep telt niet meer mee voor de rijhoogte: borg de kop-hoogte */
body .pa-section-header > td.pa-heeft-knopgroep-rechts{
    height: 40px;
}
/* Linker knoppengroep in de kop (o.a. Documenten): zelfde opschoning, in flow */
body .pa-section-header .btn-group.pull-left {
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    float: none;
    margin: 0;
}
/* Titel-span naast de filterknop: geen extra linkerpadding en iets naar de
   filterknop toe, anders staat er te veel lucht tussen icoon en widget-titel */
body .pa-section-header .btn-group.pull-left > span.btn {
    padding-left: 0 !important;
    margin-left: -6px;
}
body .pa-section-header .btn.btnCustPad i.fa,
body .pa-section-header .btn.btnCustPad [class*="fa-"],
body .pa-section-header .btn-group > .btn i.fa,
body .pa-section-header .btn-group > .btn [class*="fa-"] {
    font-size: 12px !important;
    line-height: 1;
}
/* Chip-knoppen in kop-groepen (Chat/Mail/Sms bij Communicatie, Toevoegen bij
   Diagnoses en de gebruikersdossier-widgets): zelfde subtiele stijl als de
   overige kop-knoppen — randloos, grijs, zelfde maat */
body .pa-section-header .btn-group.pull-right > button,
body .pa-section-header .btn-group.pull-right > a,
body .pa-section-header .btn.btnCustPad:not(.dropdown-menu .btn),
body table > thead > tr > th.no-sort > .btn.btnCustPad,
body .new-well > table > tbody > tr:nth-child(2) .btn:not(.dropdown-menu .btn) {
    border: 0 !important;
    background: transparent !important;
    color: var(--pa-gray-500) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    height: auto !important;
    padding: 3px 7px !important;
    gap: 4px;
    box-shadow: none !important;
}
body .pa-section-header .btn-group.pull-right > button:hover,
body .pa-section-header .btn-group.pull-right > a:hover,
body .pa-section-header .btn.btnCustPad:not(.dropdown-menu .btn):hover,
body table > thead > tr > th.no-sort > .btn.btnCustPad:hover,
body .new-well > table > tbody > tr:nth-child(2) .btn:not(.dropdown-menu .btn):hover {
    color: var(--pa-gray-900) !important;
    background: transparent !important;
}
body .pa-section-header .btn-group.pull-right > button i.fa,
body .pa-section-header .btn-group.pull-right > button [class*="fa-"],
body .pa-section-header .btn-group.pull-right > a i.fa,
body .pa-section-header .btn-group.pull-right > a [class*="fa-"],
body table > thead > tr > th.no-sort > .btn.btnCustPad i.fa,
body table > thead > tr > th.no-sort > .btn.btnCustPad [class*="fa-"],
body .new-well > table > tbody > tr:nth-child(2) .btn i.fa,
body .new-well > table > tbody > tr:nth-child(2) .btn [class*="fa-"] {
    font-size: 12px !important;
    line-height: 1;
}
body .pa-section-box > tbody > tr > td,
body .pa-section-box-full > tbody > tr > td {
    padding: 8px 12px;
}

/* ===== Trajecten-sectie: kop ===== */
/* Titel en filterknop blijven op één regel */
body .pa-section-header td:first-child {
    white-space: nowrap;
}
/* Instelbare kolomlabels (casemanager/WVS e.d.) kunnen lang zijn: afkappen met ellipsis.
   Op een smalle dossierkolom is de cel zelf smaller dan 140px; dan volgt het label de
   celbreedte, anders knipt de cel af zonder puntjes en plakken de labels tegen elkaar. */
body .pa-section-header td#verantwoordelijke_naam strong,
body .pa-section-header td#verantwoordelijke2_naam strong {
    display: inline-block;
    max-width: min(140px, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 12.8px;
    color: var(--pa-gray-500);
    font-weight: 600;
}

/* ===== Trajecten-sectie: rijen ===== */
/* Scrollboxen en content-divs met een eigen inline rand (o.a. rapportages,
   #D5D5D5-patroon): de sectie-kaart levert de rand al */
body .pa-section-box .slimmScrollBox,
body .pa-section-box .slimmScrollBoxMedium,
body .pa-section-box div[style*="D5D5D5"],
body .pa-section-box-full div[style*="D5D5D5"] {
    border: 0 !important;
}

/* ===== Dossiergegevens: twee-koloms formulier-grid met enkel een rand ===== */
body .pa-dg-kaart {
    background: #fff;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    margin-bottom: 16px;
    overflow: hidden;
}
/* Geen aparte titel boven de dossiergegevens; de velden spreken voor zich */
body .pa-dg-kop {
    display: none;
}
body .pa-dg-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 16px;
}
body .pa-dg-veld {
    min-width: 0;
}
body .pa-dg-vol {
    grid-column: 1 / -1;
}
body .pa-dg-veld > label {
    display: block;
    font-size: 12.8px;
    font-weight: 500;
    color: var(--pa-gray-700);
    margin: 0 0 4px;
}
/* Datum-spans met inline vaste breedte vullen hun grid-cel */
body .pa-dg-veld .input-icon {
    width: 100% !important;
    margin: 0;
}
body .pa-dg-veld .form-group {
    padding: 0;
    margin: 0;
}
body tr.trajecten_tr > td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--pa-gray-100);
    vertical-align: middle;
    cursor: pointer;
}
body tr.trajecten_tr:hover > td {
    /* Zelfde hover-kleur als de rowOver-rijen (o.a. documenten) voor een consistent dossier */
    background: #dae9ed;
}
body tr.trajecten_tr > td.dossiercoll1 {
    width: 36px;
    text-align: center;
}
/* Geen extra inspringing links: het icoon ernaast heeft zijn eigen ruimte al,
   en die 8px is precies wat een naam als "Verzuimtraject" nodig heeft om
   volledig te passen. */
body tr.trajecten_tr > td.dossiercoll2 {
    padding-left: 0;
}
body tr.trajecten_tr .scalable-text-cutoff {
    font-weight: 500;
    color: var(--pa-gray-900);
}
/* Trajecten- en afspraakregels op dezelfde linkerlijn als de documentenregels:
   icoon strak links met vaste ademruimte tot de tekst */
body tr.trajecten_tr > td:first-child,
body tr.afspraken_tr > td:first-child {
    width: 22px;
    padding-left: 1px !important;
    /* Krap gehouden: elke pixel hier komt ten goede aan de datumkolommen, die
       anders buiten het element vallen. */
    padding-right: 4px;
    text-align: left;
}
/* Afspraakregels: zelfde hover en klik-cursor als de documenten- en trajectregels */
body tr.afspraken_tr > td {
    cursor: pointer;
}
body tr.afspraken_tr:hover > td {
    background: #dae9ed;
}
/* Sectie-inhoud mag nooit breder worden dan de eigen kolom: fixed layout
   garandeert dat; de eerste data-rij bepaalt de kolombreedtes */
body .pa-section-box .slimmScrollBox table,
body .pa-section-box .slimmScrollBoxMedium table {
    max-width: 100%;
    table-layout: fixed;
}
/* Start- en einddatum: vaste, leesbare breedte zonder afbreken. Kop en rij delen
   dezelfde regel zodat Start/Eind exact boven hun datum staan.
   Bewust px en geen min()/calc met een percentage: in een table-layout: fixed
   kolom valt zo'n waarde terug op auto en verdeelt de browser de ruimte
   gelijkmatig - dan lopen kop en rijen weer uiteen. */
body tr.trajecten_tr > td.dossiercoll4,
body .trajecten-kop-tabel > tbody > tr > td.trajecten-kop-datum {
    white-space: nowrap;
    width: 96px;
}
body tr.trajecten_tr > td {
    overflow: hidden;
}
/* Naam- en verantwoordelijke-kolommen vangen de krimp op met een ellipsis */
body tr.trajecten_tr .scalable-text-cutoff {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
/* Verantwoordelijke-kolommen (o.a. casemanager): de kop-tabel en de rij-tabel
   krijgen hetzelfde percentage zodat de selects altijd onder hun kolomkop
   staan en meeschalen met de widget-breedte — ook bij langere (instelbare)
   kolomnamen, die wrappen binnen de kolom. Wint bewust van de inline-breedtes
   (158px kop, 120/150px selects) en van custom.css' 80px !important. */
body td#verantwoordelijke_naam,
body td#verantwoordelijke2_naam,
body tr.trajecten_tr > td.dossiercollextra {
    /* Ruim genomen ten koste van de trajectnaam: bij een smallere kolom stond er
       alleen nog "J L..." in de selects. Niet ruimer dan dit, anders past de
       trajectnaam zelf niet meer op een regel. */
    width: 22% !important;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 8px !important;
    text-align: left;
    white-space: normal;
}
/* Met maar een verantwoordelijke bleef er veel te veel ruimte over voor de
   trajectnaam en stond die ene kolom onnodig ver naar rechts, met een afgekapte
   kop. Twee kolommen delen die ruimte wel, dus alleen de enkelvoudige variant
   krijgt hier meer breedte. */
body .trajecten-element-scroll.pa-heeft-verantwoordelijke-1:not(.pa-heeft-verantwoordelijke-2) td#verantwoordelijke_naam,
body .trajecten-element-scroll.pa-heeft-verantwoordelijke-1:not(.pa-heeft-verantwoordelijke-2) tr.trajecten_tr > td.dossiercollextra{
    width: 32% !important;
}
/* De kop-tabel volgt dezelfde vaste kolomverdeling als de rij-tabel
   (die al table-layout: fixed heeft), anders schuiven de koppen op.
   De negatieve marge compenseert het verschil in inset: de kop-cel heeft
   16px padding, de scroll-div om de rij-tabel 8px.
   Op de klasse en niet op :has(td#verantwoordelijke_naam): zonder
   verantwoordelijke-kolom matchte die selector niet en stond de hele kop
   8px naast de rijen. */
body tr.pa-section-header table.trajecten-kop-tabel {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    margin-left: -8px;
    margin-right: -8px;
    width: calc(100% + 16px) !important;
    max-width: calc(100% + 16px) !important;
}
/* Selects (en dossierverantwoordelijke-wizard divs) vullen hun kolom:
   leesbaar (min-width) én altijd uitgelijnd met de kop */
body tr.trajecten_tr .dossiercollextra > div,
body tr.trajecten_tr .dossiercollextra select,
body tr.trajecten_tr .dossiercollextra .select2-container {
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
}
/* Ondergrens voor het hele element: is de dossierkolom smaller dan wat de
   kolommen samen nodig hebben, dan schuiven kop en rijen samen horizontaal in
   plaats van dat de trajectnaam tot een paar pixels wordt samengedrukt.
   De breedte volgt het aantal kolommen: 22px icoon + 130px naam + 96px per
   datum, plus 93px per getoonde verantwoordelijke (via de modifier-klassen).
   Bewust krap: met de oude waarden paste de tweede-verantwoordelijke-variant
   niet in een dossierkolom van ~577px en viel de rechterrand van het element
   weg achter de horizontale scroll. */
body .trajecten-element-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}
body .trajecten-element-scroll > table {
    min-width: 344px;
}
body .trajecten-element-scroll.pa-heeft-verantwoordelijke-1 > table{
    min-width: 437px;
}
body .trajecten-element-scroll.pa-heeft-verantwoordelijke-1.pa-heeft-verantwoordelijke-2 > table{
    min-width: 530px;
}

/* ===== Dossier linkerkolom: statusbadges, clientkaart en dossier-switcher ===== */
body .pa-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: var(--pa-radius-input);
    border: 1px solid transparent;
    font-size: 12.8px;
}
body .pa-status-badge b {
    font-weight: 600;
}
body .pa-status-badge--vangnet {
    background: #fdf6e3;
    border-color: #f0e0b0;
    color: #9a7400;
}
body .pa-status-badge--ongeval {
    background: #fdf0ee;
    border-color: #f3cdc7;
    color: #b23a29;
}
/* Clientkaart: de geslachtskleur blijft als achtergrond (inline), de kaart-chrome komt hiervandaan */
body .pa-client-kaart {
    padding: 12px;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    box-shadow: var(--pa-shadow-card);
    overflow: hidden;
    margin-bottom: 8px;
}
body .pa-client-kaart table {
    /* Clientgegevens compact houden zoals vanouds */
    font-size: 11px !important;
}
/* Dossier-switcher: elk dossier als los kaartje; het actieve (rowOver) in huisstijl-tint */
body #switcherDiv > div {
    padding: 10px 12px !important;
    border: 1px solid var(--pa-gray-200) !important;
    border-radius: var(--pa-radius-input);
    margin-bottom: 6px;
    background: #fff;
    cursor: pointer;
}
body #switcherDiv > div.rowOver,
body #switcherDiv .dossier-wrap.rowOver {
    background: var(--pa-primary-50) !important;
    border-color: #c9d8f0 !important;
}
/* Dossier-switcher op advies/uitkeringen (td#switcher2): zelfde kaartjes en
   ademruimte als de flexdossier-switcher */
/* Rechts 6px + 0px op de volgende cel: samen met de kolom-marges komt de
   ruimte tussen de gegevens-kolom en de widgets zo op dezelfde 16px uit als
   tussen de kaarten onderling */
body td#switcher2 {
    padding: 12px 6px 12px 10px !important;
}
body td#switcher2 + td {
    padding: 12px 16px 12px 0 !important;
}
body #switcher2 .dossier-wrap {
    padding: 10px 12px !important;
    border: 1px solid var(--pa-gray-200) !important;
    border-radius: var(--pa-radius-input);
    margin-bottom: 6px;
    background: #fff;
    cursor: pointer;
}
body #switcher2 .dossier-wrap.rowOver {
    background: var(--pa-primary-50) !important;
    border-color: #c9d8f0 !important;
}
/* Dossier-schermen met de switcher-kolom: minder zijpadding zodat de
   elementen de beschikbare breedte beter benutten */
body .widget-body.pa-heeft-switcher2{
    padding-left: 6px !important;
    padding-right: 6px !important;
}
body .widget-body.pa-heeft-switcher2 > .row > [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===== Gebruikersdossier-secties (.new-well patroon) ===== */
/* Zelfde kaart-look als de flexdossier-secties: elke sectie-tabel is één kaart */
body .new-well {
    margin: 0;
    width: 100%;
}
body .new-well > table {
    background: #fff;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    box-shadow: var(--pa-shadow-card);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
}
/* Bij een open dropdown (Toevoegen-menu) mag de kaart het menu niet afkappen */
body .new-well > table.pa-dropdown-open{
    overflow: visible;
}
/* Koprij: eerste zichtbare rij na de screenreader-rij */
body .new-well > table > tbody > tr:nth-child(2) > td {
    padding: 8px 16px !important;
    border-bottom: 1px solid var(--pa-gray-200);
    vertical-align: middle;
}
body .new-well > table > tbody > tr:nth-child(2) strong {
    font-size: 12.8px;
    font-weight: 600;
    color: var(--pa-gray-900);
}
/* Content-cellen: ademruimte, en scrollboxen zonder eigen rand (de kaart heeft er al één) */
body .new-well > table > tbody > tr:nth-child(n+3) > td {
    padding: 8px 12px;
}
body .new-well [class*="slimmScrollBox"] {
    border: 0 !important;
}
/* Gestelde aandoeningen/oorzaken: de twee lijstboxen als afgeronde kaartjes */
body .new-well .slimmScrollBoxBordered {
    border: 1px solid var(--pa-gray-200) !important;
    border-radius: var(--pa-radius-card);
}

/* ===== Journaal-sectie: titel krijgt de ruimte, datum aan het einde ===== */
/* De rijen hebben twee lege slotkolommen die met fixed layout elk 1/3 van de
   breedte claimen; die vallen weg zodat de titelkolom niet meer hoeft te wrappen */
body #journaalDiv table td:nth-child(4),
body #journaalDiv table td:nth-child(5) {
    width: 0;
    padding: 0;
}
body #journaalDiv table td:nth-child(3) {
    text-align: right;
    white-space: nowrap;
    padding-right: 12px;
    color: var(--pa-gray-500);
}
body #journaalDiv table tr[onclick] > td {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pa-gray-100);
    vertical-align: middle;
    cursor: pointer;
}
body #journaalDiv table tr[onclick]:hover > td {
    /* Zelfde hover-kleur als de rowOver-rijen (o.a. documenten) voor een consistent dossier */
    background: #dae9ed;
}

/* ===== Inputs (Flowbite-stijl) ===== */
body .form-control,
body input[type="text"],
body input[type="number"],
body textarea,
body select {
    background: var(--pa-gray-50);
    border: 1px solid var(--pa-gray-300);
    /* !important: custom.css zet 8px !important op text/password-inputs */
    border-radius: var(--pa-radius-input) !important;
    color: var(--pa-gray-900);
    font-size: 12.8px;
    height: auto;
    min-height: 38px;
    padding: 8px 12px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Ingevulde selects iets zachter dan gray-900 (oogt anders te zwaar naast de
   placeholder-varianten); staat de placeholder-optie geselecteerd, dan krijgt
   de select de echte placeholderkleur */
body select {
    color: var(--pa-gray-700);
}
body select.pa-lege-optie-gekozen.pa-lege-optie-gekozen,
body select.pa-optie-zonder-waarde-gekozen.pa-optie-zonder-waarde-gekozen{
    color: var(--pa-gray-400);
}
/* Native selects: eigen chevron op dezelfde plek en in dezelfde kleur als de
   select2-varianten, i.p.v. het browser-pijltje tegen de rechterrand */
body select:not([multiple]):not([size]) {
    /* !important: custom.css zet appearance: auto !important op select */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}
/* DataTables autoWidth zet soms een te grote vaste inline-breedte op de tabel
   (berekend vóór de kaart zijn definitieve maat had), waardoor de lijst buiten
   de pagina valt; dwing de lijst binnen zijn wrapper */
body .dataTables_wrapper table.dataTable {
    width: 100% !important;
    max-width: 100%;
}
/* Tijdens sorteren (server-side redraw) is de tabel even leeg; zonder clear
   schuift de gefloate paginering dan kort omhoog naast de PDF/Excel-knoppen */
body .dataTables_wrapper .dataTables_paginate,
body .dataTables_wrapper .dataTables_info {
    clear: both;
}
/* DataTables "aantal resultaten"-select: custom.css wist met een background-
   shorthand op #searchable_wrapper de chevron; zet die hier met een sterkere
   selector terug (background-image i.p.v. shorthand zodat wit behouden blijft) */
body #searchable_wrapper .dataTables_length select.form-select-sm,
body .dataTables_wrapper .dataTables_length select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    padding-right: 26px !important;
    padding-left: 8px !important;
}
body .form-control:focus,
body input[type="text"]:focus,
body input[type="number"]:focus,
body textarea:focus,
body select:focus {
    /* Geen background-shorthand: die zou achtergrond-iconen (zoekvergrootglas,
       datumkalender) bij focus wissen */
    background-color: #fff;
    border-color: var(--pa-primary);
    box-shadow: 0 0 0 3px var(--pa-primary-ring);
    outline: none;
}
body .form-control::placeholder,
body input::placeholder {
    color: var(--pa-gray-400);
}
/* ===== Selects: vaste veldhoogte met gecentreerde tekst =====
   Alle selects volgen de standaard veldhoogte (38px, gelijk aan inputs en
   select2) met verticaal gecentreerde tekst. Selects die inline in tabellen
   staan (bewerken-in-rij) behouden hun compacte gedrag. */
body select {
    height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 36px;
}
body table select {
    height: auto;
    line-height: normal;
    padding-top: 8px;
    padding-bottom: 8px;
}
/* Iconen in velden: plain en gecentreerd, zonder de legacy cirkel-outline */
body span.input-icon {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
/* De attribuut-selectors zijn nodig om beyond's `.input-icon > [class*="fa-"].circular`
   (specificiteit 0,3,0) te verslaan; anders blijft de oude top:5px gelden en hangt
   het icoon te hoog in de 38px hoge inputs. De icon-right varianten verslaan
   beyond's `.input-icon.icon-right > [class*="fa-"]` (right: 0) zodat het icoon
   niet tegen de veldrand plakt */
body .input-icon > i,
body .input-icon > i.circular,
body .input-icon > [class*="fa-"],
body .input-icon > [class*="fa-"].circular,
body .input-icon.icon-right > i,
body .input-icon.icon-right > [class*="fa-"] {
    color: var(--pa-gray-400);
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
    width: auto;
    height: auto;
    line-height: 1;
    font-size: 12.8px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
}
body .input-icon.icon-right > input,
body .input-icon.icon-right > .form-control {
    padding-right: 34px;
}
/* Number-velden met een icoon rechts: de browser-spinner verschijnt bij focus/hover
   op dezelfde plek als het icoon en liep er dwars doorheen. Waardes typen (of met
   de pijltjestoetsen wijzigen) werkt gewoon door. */
body .input-icon > input[type="number"]::-webkit-outer-spin-button,
body .input-icon > input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
body .input-icon > input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
/* Datumvelden in tabelrijen (o.a. dossiergegevens) hebben inline padding 0 op de
   cellen; de wrapper krijgt zelf verticale ademruimte zodat rijen niet plakken */
body td > .input-icon.pa-heeft-datumveld{
    margin: 4px 0;
}
body .input-icon > input:focus + .circular,
body .input-icon > input:focus ~ i {
    box-shadow: none !important;
    color: var(--pa-primary);
}
/* Zoekveld in dropdown-menu's (o.a. Wizards onder Documenten > Toevoegen):
   zoek-icoon links in het veld, huisstijl-radius en focus-ring */
body li.dropdown-zoekwrap {
    position: relative;
    padding: 2px 8px 4px 4px;
    list-style: none;
}
body li.dropdown-zoekwrap::before {
    content: "\f002";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    position: absolute;
    left: 16px;
    /* Optisch centreren: glyph-massa zit onderin, dus nét boven het midden */
    top: calc(50% - 1px);
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--pa-gray-400);
    pointer-events: none;
    z-index: 1;
}
body .dropdown-zoekwrap .zoek-dropdown {
    width: 100%;
    padding: 6px 10px 6px 30px !important;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-input);
    background: var(--pa-gray-50);
    font-size: 12.8px;
    color: var(--pa-gray-900);
    box-shadow: none;
    height: auto;
}
body .dropdown-zoekwrap .zoek-dropdown:focus {
    outline: none;
    border-color: var(--pa-primary);
    box-shadow: 0 0 0 3px var(--pa-primary-ring);
    background: #fff;
}
/* Legacy plaats-iconen (fa-l) naast selects zijn overbodig; de select heeft een eigen pijl */
body .input-icon > i.fa-l {
    display: none;
}
/* Niet-bewerkbare velden */
body .form-control[disabled],
body .form-control[readonly],
body select[disabled],
body input[readonly] {
    background: var(--pa-gray-100);
    color: var(--pa-gray-500);
    cursor: not-allowed;
}
body .select2-container--disabled .select2-selection--single {
    background: var(--pa-gray-100) !important;
    color: var(--pa-gray-500);
    cursor: not-allowed;
}
body .form-group {
    margin-bottom: 12px;
}
/* Veldlabels boven inputs */
body label.control-label {
    display: block;
    font-size: 12.8px;
    font-weight: 500;
    color: var(--pa-gray-700);
    margin: 0 0 4px;
}
/* Korte toelichting onder een veld */
body .pa-veld-toelichting {
    display: block;
    font-size: 12px;
    color: var(--pa-gray-500);
    margin-top: 4px;
}
/* Sectiekoppen binnen formulieren (o.a. profiel bewerken) */
body .form-title {
    font-size: 12.8px;
    font-weight: 600;
    color: var(--pa-gray-900);
    margin: 20px 0 10px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--pa-gray-200);
}
body .form-title:first-child {
    margin-top: 0;
}
/* Actierij onder een sectiekop: zoekveld groeit mee, select en knoppen vaste maat */
body .pa-sectie-acties {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
body .pa-sectie-acties .form-control {
    flex: 1 1 auto;
}
body .pa-sectie-acties select,
body .pa-sectie-acties .select2-container {
    flex: 0 0 230px;
    width: 230px !important;
}
body .pa-sectie-acties .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Status-kleuren (has-info e.d.) horen niet op veldlabels */
body .has-info .control-label,
body .has-info label.control-label {
    color: var(--pa-gray-700) !important;
}

/* Veldrij: twee of drie velden naast elkaar met vaste tussenruimte en labels erboven */
body .pa-veld-rij {
    display: flex;
    gap: 10px;
}
body .pa-veld-rij > .pa-veld {
    flex: 1;
    min-width: 0;
}
body .pa-veld-rij > .pa-veld-smal {
    flex: 0 0 22%;
    min-width: 0;
}

/* Actiebalk profiel bewerken: huidig wachtwoord + opslaan/annuleren op één regel */
body .pa-profiel-acties {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pa-gray-200);
}
body .pa-profiel-acties label.control-label {
    margin: 0;
}
body .pa-profiel-acties input#wachtwoord_bevestiging {
    width: 200px;
}
/* Zijbalk-zoekveld: identieke maat op legacy en Laravel zodat het menu niet verspringt;
   padding-left volgt de pl-9/pl-10 uit de markup voor het zoek-icoon */
body input#zoekwaarde {
    min-height: 38px;
    padding: 8px 12px 8px 2.25rem;
}
/* Menu-items: zelfde tint als op de Laravel-pagina's (text-gray-800);
   custom.css zet hier color:inherit via een #sidebar-selector, dus die vorm volgen */
body #sidebar a.menu-item-overwrite:not(.menu-item-active),
body .bg-menu-overwrite nav a:not(.menu-item-active) {
    color: rgb(31, 41, 55);
}

/* ===== Select2 ===== */
body .select2-container .select2-selection--single,
body .select2-container--default .select2-selection--single {
    /* Wit: met een grijze vulling leken actieve selects disabled */
    background: #fff;
    border: 1px solid var(--pa-gray-300);
    border-radius: var(--pa-radius-input) !important;
    /* !important: diverse legacy pagina's zetten inline 28/32/34px !important */
    height: 38px !important;
}
/* Alleen echt uitgeschakelde selects krijgen de grijze vulling */
body .select2-container--disabled .select2-selection--single,
body .select2-container--default.select2-container--disabled .select2-selection--single,
body .select2-container--disabled .select2-selection--multiple,
body .select2-container--default.select2-container--disabled .select2-selection--multiple {
    background: var(--pa-gray-100);
}
body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    color: var(--pa-gray-900);
    font-size: 12.8px;
    padding-left: 12px;
}
body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 6px;
}
/* Select2 inline in tabellen (bewerken-in-rij) behoudt het compacte formaat */
body table .select2-container .select2-selection--single,
body table .select2-container--default .select2-selection--single {
    height: 32px !important;
}
body table .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
}
body table .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
}
/* Formulieren die met een layout-tabel zijn opgebouwd (o.a. mail versturen)
   zijn geen bewerken-in-rij: selects in een form-group houden de normale
   veldhoogte, gelijk aan de inputs ernaast */
body table .form-group .select2-container .select2-selection--single,
body table .form-group .select2-container--default .select2-selection--single {
    height: 38px !important;
}
body table .form-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
}
body table .form-group .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}
body .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--pa-gray-400);
}
body .select2-container--default.select2-container--open .select2-selection--single,
body .select2-container--default.select2-container--focus .select2-selection--single {
    background: #fff;
    border-color: var(--pa-primary);
    box-shadow: 0 0 0 3px var(--pa-primary-ring);
}
body .select2-container--default .select2-selection--multiple {
    /* Wit: met een grijze vulling leken actieve selects disabled */
    background: #fff;
    border: 1px solid var(--pa-gray-300);
    border-radius: var(--pa-radius-input) !important;
    min-height: 38px;
    /* Chips verticaal centreren: select2 geeft ze alleen een marge boven,
       waardoor er onder de rij meer ruimte overbleef dan erboven. !important
       omdat de select2-basis anders 1px onderpadding laat staan. */
    display: flex;
    align-items: center;
    padding: 0 !important;
}
body .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 4px 6px;
    margin: 0;
}
body .select2-container--default .select2-selection--multiple .select2-search--inline {
    display: flex;
    align-items: center;
    margin: 0;
}

/* De inline zoek-input is standaard hoger dan de chips en bepaalde zo de
   rijhoogte, waardoor de chips niet meer gecentreerd stonden */
body .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 4px 6px !important;
}
body .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 0 0 4px;
    line-height: 1.4;
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--pa-primary-50);
    border: 1px solid var(--pa-primary);
    border-radius: 999px;
    color: var(--pa-primary);
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
    margin: 4px 4px 0 0;
    /* Lange labels binnen de box houden: tekst wrapt in de chip, zodat het
       verwijder-kruisje nooit buiten de rand valt */
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0;
}
/* Kruisje rechts van de tekst, in huisstijlkleur; beyond zet hem wit (voor de
   oude donkerblauwe chip) en dat is op de lichte chip onzichtbaar */
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--pa-primary);
    opacity: 0.6;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    order: 2;
    cursor: pointer;
    flex-shrink: 0;
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--pa-danger);
    opacity: 1;
}
body .select2-dropdown {
    /* !important: elders wordt de rand weggehaald/transparant gemaakt, waardoor
       de optielijst randloos over de pagina zweeft */
    border: 1px solid var(--pa-gray-300) !important;
    border-radius: var(--pa-radius-input);
    box-shadow: 0 10px 20px rgba(17, 24, 39, 0.12);
    font-size: 12.8px;
    overflow: hidden;
    /* De lijst volgt standaard de breedte van het veld. Bij korte selects (status,
       casemanager) braken namen als "KLANT TestBedrijf" daardoor over twee regels.
       max-width houdt de lijst binnen het scherm als het veld rechts staat. */
    min-width: 200px;
    max-width: calc(100vw - 20px);
}
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--pa-primary);
    color: #fff;
}
body .select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--pa-gray-300);
    border-radius: 6px;
    min-height: 32px;
}

/* ===== Knoppen ===== */
body .btn {
    border-radius: var(--pa-radius-btn);
    font-size: 12.8px;
    font-weight: 500;
    padding: 8px 14px;
    line-height: 1.2;
    /* Icoon en tekst altijd op één regel, ook in smalle kolommen */
    white-space: nowrap;
    background-image: none !important;
    box-shadow: none;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}
/* Actieknoppen met btnCustPad (o.a. beschikbaarheid- en afspraakformulieren):
   dezelfde kit-maat als alle andere knoppen, met icoon en tekst gecentreerd
   naast elkaar. !important: verslaat de krappe custom-padding en inline styles. */
body .btn.btnCustPad {
    padding: 8px 14px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* De eigen icoon-marge kwam bovenop de flex-gap (11px totaal); de gap regelt
   de afstand tussen icoon en tekst al */
body .btn.btnCustPad > i.fa,
body .btn.btnCustPad > [class*="fa-"] {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
/* Kopknoppen naast de tabs (o.a. gebruiker bewerken, planningswizard): zelfde
   compacte maat als de actieknoppen op het flexdossier (Activiteiten, …) */
body .widget-header ul.nav-tabs .widget-buttons .btn.btnCustPad,
body .widget .tabbable > table.pa-heeft-navtabs .btn.btnCustPad,
body .widget > .tabbable > .widget-body > .widget-buttons .btn.btnCustPad,
body .widget > .widget-header > .widget-buttons .btn.btnCustPad,
body .widget > .tabbable > .widget-body > .tab-pane > .row > [class*="col-"].text-align-right > .btn.btnCustPad {
    padding: 2px 8px !important;
    min-height: 24px;
    font-size: 12px !important;
    line-height: 18px;
    border-radius: 6px !important;
    background: #fff;
    border: 1px solid #dee2e6 !important;
    color: rgb(31, 41, 55) !important;
}
body .widget-header ul.nav-tabs .widget-buttons .btn.btnCustPad:hover,
body .widget .tabbable > table.pa-heeft-navtabs .btn.btnCustPad:hover,
body .widget > .tabbable > .widget-body > .widget-buttons .btn.btnCustPad:hover,
body .widget > .widget-header > .widget-buttons .btn.btnCustPad:hover,
body .widget > .tabbable > .widget-body > .tab-pane > .row > [class*="col-"].text-align-right > .btn.btnCustPad:hover {
    background: var(--pa-gray-100);
}
/* Ruimte tussen de kopknoppen onderling (ze plakten anders tegen elkaar) */
body .widget .tabbable > table.pa-heeft-navtabs .btn.btnCustPad{
    margin-left: 6px;
}
/* Losse actieknoppen boven een lijst (Toevoegen bij Contact/Kostenplaatsen):
   de grote action-bar-maat (zoals Rapportages/Verwijderen), niet de compacte
   kopknop-variant hierboven */
body .widget > .tabbable > .widget-body > .widget-buttons.pa-lijst-acties .btn.btnCustPad {
    padding: 8px 14px !important;
    min-height: 0;
    font-size: 12.8px !important;
    line-height: 1.2;
}
/* Knoppen-cel: ruimte tot de kaartrand en exact op het verticale midden van de kop */
body .widget .tabbable > table.pa-heeft-navtabs tr > td:last-child:not(:first-child){
    vertical-align: middle;
    padding-right: 16px !important;
    padding-bottom: 0 !important;
}
body .btn.shiny {
    background-image: none !important;
}
body .btn-primary {
    background-color: var(--pa-primary) !important;
    border-color: var(--pa-primary) !important;
    color: #fff !important;
}
body .btn-primary:hover,
body .btn-primary:focus {
    background-color: var(--pa-primary-dark) !important;
    border-color: var(--pa-primary-dark) !important;
}
/* Actieve toggle-knop (o.a. Proceslijnen/Takenlijst): beyond.css zet hier een
   vaste blauwtint met !important; de accentkleur moet winnen */
body .btn-primary.active,
body .btn-primary:active {
    background-color: var(--pa-primary) !important;
    border-color: var(--pa-primary) !important;
    color: #fff !important;
}
body .btn-primary.active:hover,
body .btn-primary.active:focus {
    background-color: var(--pa-primary-dark) !important;
    border-color: var(--pa-primary-dark) !important;
}
/* beyond.css strips de linkerrand van shiny dropdown-toggles (bedoeld voor
   aansluitende split-buttons); losse dropdown-knoppen zoals "Vrije selectie"
   houden gewoon hun volledige rand */
body .btn.btn-default.shiny.dropdown-toggle {
    border-left-width: 1px !important;
}
/* Datumvelden in de planning-kop (dag/week/maand): even hoog als de
   navigatieknoppen ernaast i.p.v. de standaard 38px inputhoogte */
body .widget-buttons #dagplanning_datum,
body .widget-buttons #weekplanning_datum,
body .widget-buttons #maandplanning_datum {
    height: 32px !important;
    min-height: 0 !important;
    padding-top: 4px;
    padding-bottom: 4px;
}
/* Niet-actieve toggle (outline-variant): neutrale kit-look met grijze hover
   i.p.v. de blauwe bootstrap-vulling */
body .btn-outline-primary {
    background-color: #fff !important;
    border-color: var(--pa-gray-300) !important;
    color: var(--pa-gray-700) !important;
}
/* Toggle-groepen (o.a. Proceslijnen/Takenlijst): losse knoppen met ruimte
   ertussen i.p.v. de aaneengesloten bootstrap-groep */
body .btn-group.pa-heeft-outline-knop{
    display: inline-flex;
    gap: 6px;
}
body .btn-group.pa-heeft-outline-knop > .btn{
    border-radius: 6px !important;
    /* Bootstrap's -1px knop-overlap heft anders 1px van de gap op */
    margin-left: 0 !important;
}
body .btn-outline-primary:hover,
body .btn-outline-primary:focus {
    background-color: var(--pa-gray-100) !important;
    border-color: var(--pa-gray-300) !important;
    color: var(--pa-gray-900) !important;
}
body .btn-default,
body .btn.btn-default {
    background-color: #fff !important;
    /* Volledige border: sommige koppen (o.a. gebruiker bewerken) zetten border: 0
       op .btn waardoor de knop als kale link oogde */
    border: 1px solid var(--pa-gray-300) !important;
    color: var(--pa-gray-700) !important;
}
body .btn-default:hover,
body .btn-default:focus {
    background-color: var(--pa-gray-100) !important;
    color: var(--pa-gray-900) !important;
}
/* btn-blue (o.a. "afspraak boeken" in de wizard-resultaten): huisstijl-blauw.
   De witte btn-default-basis maakte deze knop anders wit, met een wit icoon
   erin — waardoor het plan-icoontje onzichtbaar was. */
body .btn.btn-blue {
    background-color: var(--pa-primary) !important;
    border-color: var(--pa-primary) !important;
    color: #fff !important;
}
body .btn.btn-blue:hover,
body .btn.btn-blue:focus {
    background-color: var(--pa-primary-dark) !important;
}
body .btn-success {
    background-color: var(--pa-success) !important;
    border-color: var(--pa-success) !important;
    color: #fff !important;
}
body .btn-success:hover {
    background-color: var(--pa-success-dark) !important;
}
body .btn-danger {
    background-color: var(--pa-danger) !important;
    border-color: var(--pa-danger) !important;
    color: #fff !important;
}
body .btn-danger:hover {
    background-color: var(--pa-danger-dark) !important;
}
body .btn-warning {
    background-color: var(--pa-warning) !important;
    border-color: var(--pa-warning) !important;
    color: #fff !important;
}
body .btn .fa {
    margin-right: 5px;
}
body .btn .fa.green {
    color: inherit;
}

/* Sorteerpijltjes: ▲ en ▼ zijn tekstglyphs met verschillende breedtes, terwijl
   DataTables ze allebei op dezelfde right-waarde absoluut plaatst. Zonder vaste
   breedte + centrering staan ze daardoor niet op dezelfde verticale as. */
body table.dataTable thead > tr > th[class*="sorting"]::before,
body table.dataTable thead > tr > th[class*="sorting"]::after,
body table.dataTable thead > tr > td[class*="sorting"]::before,
body table.dataTable thead > tr > td[class*="sorting"]::after {
    width: 14px;
    right: 6px;
    text-align: center;
}

/* ===== Tabellen ===== */
body .table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.8px;
    color: var(--pa-gray-700);
}
body .table > thead > tr > th {
    background: var(--pa-gray-50);
    color: var(--pa-gray-900);
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid var(--pa-gray-200);
    border-top: 0;
    padding: 10px 12px;
}
body .table > tbody > tr > td {
    border-top: 1px solid var(--pa-gray-200);
    padding: 10px 12px;
    vertical-align: middle;
}
/* Tijdlabels in de planning horen bovenaan de uurcel (klassieke weergave);
   de generieke middle-uitlijning duwt ze anders naar de halfuurlijn */
body .table > tbody > tr.planningRow > td:first-child {
    vertical-align: top;
}
/* Flexibele lijsten (dossiers/urenspecificatie): rij-inhoud bovenaan uitlijnen,
   zodat cellen naast een wrappende kolom niet halverwege zweven */
body .table.flexibele-lijst-tabel > tbody > tr > td {
    vertical-align: top;
}
body .table-bordered,
body .table-bordered > thead > tr > th,
body .table-bordered > tbody > tr > td {
    border-color: var(--pa-gray-200);
}
/* Bordered tabellen netjes afsluiten: de kit tekent border-top per rij,
   waardoor de laatste rij anders zonder onderrand eindigt */
body .table-bordered > tbody > tr:last-child > td {
    border-bottom: 1px solid var(--pa-gray-200);
}
body .table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--pa-gray-50);
}
/* Knoppen in een tabelkop erven de kolomkop-opmaak niet */
body .table > thead > tr > th .btn {
    text-transform: none;
    letter-spacing: normal;
    font-size: 12.8px;
    font-weight: 500;
}
body .table-hover > tbody > tr:hover {
    background: var(--pa-primary-50);
}

/* ===== Modals / bootbox (dialogen geopend vanuit deze pagina) ===== */
body .modal-content {
    border: 0;
    border-radius: var(--pa-radius-card);
    box-shadow: var(--pa-shadow-modal);
    overflow: hidden;
    /* Nooit hoger dan het scherm: de body scrollt intern zodat de header en
       footer (met knoppen) altijd zichtbaar blijven. Generiek — geldt ook voor
       geneste bootboxes en iframe-modals, ongeacht de hoogte van de inhoud. */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3.5rem);
}
body .modal-header {
    border-bottom: 1px solid var(--pa-gray-200);
    padding: 16px 20px;
}
body .modal-header .modal-title,
body .modal-header h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--pa-gray-900);
    font-family: var(--pa-font);
}
body .modal-header {
    background: #fff;
    align-items: center;
}
body .modal-header .btn-close,
body .modal-header .bootbox-close-button {
    opacity: 0.6;
    border-radius: 6px;
    /* Netjes verticaal in het midden van de (flex-)header, ook bij hogere
       headers zoals in het medisch dossier */
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}
body .modal-header .btn-close:hover,
body .modal-header .bootbox-close-button:hover {
    opacity: 1;
    background-color: var(--pa-gray-100);
}
body .modal-body {
    padding: 20px;
    font-size: 12.8px;
    color: var(--pa-gray-700);
    /* Interne scroll zodat de modal binnen het scherm past (zie .modal-content).
       min-height:0 is nodig zodat een flex-body daadwerkelijk mag krimpen/scrollen. */
    overflow-y: auto;
    min-height: 0;
}
/* Bij een open modal scrollt de pagina zelf niet mee. Bootstrap zet overflow:hidden
   alleen op body, maar op deze pagina's is html het scrollende element — zonder deze
   regel staan er twee scrollbalken naast elkaar (pagina + modal, zichtbaar op Windows). */
html.pa-modal-open{
    overflow: hidden;
}
/* Iframe-modals (traject, journaal, vragenlijst, ...): iframe vult de body
   naadloos. De body scrolt hier zelf NIET: het iframe krimpt mee tot de
   beschikbare modal-hoogte (zijn inline height wordt een maximum) en alleen de
   iframe-inhoud scrollt. Anders staan er op Windows twee balken naast elkaar
   (modal-body + iframe-inhoud). Let op: bootbox wikkelt de message in een
   .bootbox-body, dus de hele keten moet mee-krimpen. */
body .modal-body.pa-heeft-modelfiller-hoofd,
body .modal-body.pa-heeft-framepa,
body .modal-body.pa-heeft-bootbox-iframe,
body .modal-body.pa-heeft-iframe-kind{
    padding: 0;
    background: var(--pa-gray-50);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Achtergrond onder de iframes wit, zodat er geen grijze kier overblijft waar het
   zijframe ophoudt. */
body .modal-content.pa-heeft-modelfiller-zijde,
body .modal-content.pa-heeft-modelfiller-zijde > .modal-body,
body .modal-content.pa-heeft-modelfiller-zijde .bootbox-body,
body .modal-content.pa-heeft-modelfiller-zijde #zijdeWidth{
    background: #fff !important;
}
body .modal-body > .bootbox-body.pa-heeft-iframe-kind{
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
}
body .modal-body iframe.modelFiller,
body .modal-body > .bootbox-body > iframe,
body .modal-body > iframe {
    display: block;
    /* Callsites compenseren met negatieve marges de oude modal-padding;
       de kit zet die padding al op 0, dus hier neutraliseren */
    width: 100%;
    margin: 0;
    flex: 0 1 auto;
    min-height: 0;
}
/* Uitzondering op de iframe-modal-regels hierboven: modals die twee iframes
   NAAST elkaar zetten (hoofdscherm + zijpaneel). De regels hierboven stapelen
   de iframes verticaal, wat voor die modals de layout omgooit en de onderkant
   (o.a. de opslaan-knoppen) buiten beeld drukt. De iframes vullen samen de
   modal-body: geen dubbele scrollbalken, elk iframe scrolt zijn eigen inhoud.
   De breedte-schuifknop staat vast (position: fixed) en mag geen ruimte innemen. */
body .modal.modal-split-iframes .modal-body > .bootbox-body {
    flex-direction: row;
    flex: 1 1 auto;
}
body .modal.modal-split-iframes #medischZijdeWidth {
    flex: 0 0 0;
}
/* De zoom-compensatie zet op smalle schermen vaste vh-hoogtes met !important op
   deze frames; die kunnen hoger uitvallen dan de modal. Aftoppen op de modal-body,
   anders valt de onderkant van een frame er weer buiten. */
body .modal.modal-split-iframes .modal-body > .bootbox-body > iframe {
    max-height: 100%;
}
/* Het invulblok van de medische kaart heeft een vaste vh-hoogte, terwijl de
   knoppenrij eronder er ook nog bij moet. In een frame korter dan ~925px valt die
   rij buiten beeld en het frame scrolt niet (html: overflow hidden), waardoor er
   niet opgeslagen kan worden. Aftoppen op de resterende ruimte zodat de knoppen
   altijd meekomen; max-height gaat boven een vaste hoogte, ook een !important. */
body.iframe-body .medische-kaart-form-filler {
    /* Ruimte die de select erboven en de knoppenrij eronder nodig hebben; die
       hoogtes staan vast in px, dus de aftopping is hoogte-onafhankelijk. */
    max-height: calc(100vh - 150px);
    /* De inline min-height staat hoger dan de aftopping en zou anders winnen */
    min-height: 0 !important;
}
body .modal-footer {
    background: var(--pa-gray-50);
    border-top: 1px solid var(--pa-gray-200);
    padding: 12px 20px;
    gap: 8px;
}
body .modal-footer .btn {
    margin: 0;
}

/* ===== Datepicker / daterangepicker popups ===== */
body .datepicker,
body .daterangepicker {
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-input);
    box-shadow: 0 10px 20px rgba(17, 24, 39, 0.12);
    font-family: var(--pa-font);
}
/* Range-popup groeit met de maandkalenders mee: met de vaste plugin-breedte
   staken de kalenders (o.a. op Windows, waar tekst breder rendert) buiten de
   popup-rand. Kleine padding zodat de onderste rij niet op de rand plakt. */
body .daterangepicker {
    width: max-content !important;
    max-width: none !important;
    padding: 6px;
}
body .daterangepicker .drp-calendar {
    max-width: none !important;
}
body .datepicker table tr td.active,
body .datepicker table tr td.active:hover,
body .daterangepicker td.active,
body .daterangepicker td.active:hover {
    background: var(--pa-primary) !important;
    background-image: none !important;
    border-radius: 6px;
}
body .datepicker table tr td.today {
    background: var(--pa-primary-50) !important;
    background-image: none !important;
    border-radius: 6px;
}

/* ===== Planning-agenda: afspraken en beschikbaarheidsbanen met kit-ronding ===== */
body .afspraak,
body .beschikbaarheid {
    border-radius: var(--pa-radius-input);
}

/* ===== Planning-zijbalk: agenda/ruimte-selectie ===== */
/* Zoekveld: kit-stijl in plaats van kale onderstreep-input */
body input.pa-zijbalk-zoek {
    width: calc(100% - 16px);
    margin: 8px;
    min-height: 34px;
    /* Zoek-icoon links in het veld, gelijk aan de andere zoekbalken */
    padding: 6px 12px 6px 30px !important;
    font-size: 12.8px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    /* Optisch centreren: het steeltje van het vergrootglas geeft de glyph
       massa onderin, dus de afbeelding hoort nét boven het geometrische midden */
    background-position: 10px calc(50% - 1px);
    background-size: 13px 13px;
}
/* Lijst-widgets (agenda/ruimte-selectie): compacte body zodat de smalle
   zijbalk-kolom niet verloren gaat aan dubbele padding */
body .widget.pa-heeft-artsendiv .widget-body{
    padding: 6px;
}
/* Taken-paneel: dubbele top-ruimte weg (widget-body 20px + datatables-wrapper 20px) */
body .widget.pa-heeft-taakdiv .widget-body{
    padding: 8px 12px 12px;
}
body #taakDiv .dataTables_wrapper {
    padding-top: 0 !important;
}
/* Groepskoppen: de ingestelde groepskleur blijft, de vorm wordt kit */
body .agenda-groep-header {
    width: auto !important;
    min-height: 0 !important;
    margin: 6px 0 4px;
    padding: 6px 10px !important;
    border-radius: var(--pa-radius-input);
    font-size: 12.8px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
body .agenda-groep-header .widget-icon {
    font-size: 12px;
}
/* Agenda- en ruimte-knoppen: rustige rijen met hover, naam links, discipline eronder */
body .artsenDiv {
    padding: 0 0 4px;
}
body a.agendabutton {
    display: block;
    border: 0 !important;
    border-radius: var(--pa-radius-input);
    padding: 5px 8px !important;
    margin: 2px 0;
    background: transparent;
    background-image: none !important;
    box-shadow: none !important;
    text-align: left;
    color: var(--pa-gray-900);
    text-shadow: none !important;
}
body a.agendabutton:hover {
    background: var(--pa-primary-50);
}
/* Geselecteerde agenda */
body a.agendabutton.btn-azure {
    background: var(--pa-primary) !important;
    color: #fff !important;
}
body a.agendabutton.btn-azure td {
    color: #fff !important;
}
body a.agendabutton table {
    width: 100%;
}
body a.agendabutton td {
    text-align: left;
    font-size: 12.8px;
    padding: 0 0 0 6px;
    line-height: 1.35;
}
body a.agendabutton td[style*="width: 30px"] {
    padding: 0;
}
/* Discipline-regel (inline 9px) leesbaar en ondergeschikt */
body a.agendabutton td[style*="font-size: 9px"] {
    font-size: 11px !important;
    opacity: .7;
}
/* Avatar en persoons-iconen compacter; foto rond */
body a.agendabutton .fa-user,
body a.agendabutton .fa-users {
    font-size: 22px !important;
}
/* Pasfoto: nette ronding; hoogte blijft inline (hover vergroot naar 120px) */
body a.agendabutton img {
    border-radius: var(--pa-radius-input);
    object-fit: cover;
}

/* ===== Tabs en overzicht-knoppen op legacy lijstpagina's: accent-kleur ===== */
/* Actieve tab was teal, actieve overzicht-knop (ovm-active) groen; beide → huisstijl.
   Medische tabs (nav-medisch) behouden hun eigen kleurcodering. */
body .tabbable .nav-tabs:not(.nav-medisch) > li.active > a,
body .tabbable .nav-tabs:not(.nav-medisch) > li.activeTab > a,
body .tabbable .nav-tabs:not(.nav-medisch) > li > a.active {
    background-color: var(--pa-primary) !important;
    border-color: var(--pa-primary) !important;
    color: #fff !important;
}

/* ===== Paginatabs (dossier-tabs en lijstpagina-tabs in .tabbable): pill-stijl
   zoals de moderne lijstpagina's — actieve tab een gevulde afgeronde pill, de
   rest kale tekst. De actie-li (ml-auto, met Overzicht/Toevoegen-knoppen)
   behoudt z'n eigen opmaak. ===== */
body ul.nav-tabs.rounded-top:not(.nav-medisch),
body .tabbable > ul.nav-tabs:not(.nav-medisch) {
    display: flex;
    flex-wrap: wrap;
    /* Tabs rusten op de onderrand (klassieke tab-look) */
    align-items: flex-end;
    gap: 4px;
    padding: 8px 10px 0;
    background: #fff;
    border-bottom: 1px solid var(--pa-gray-200);
}
body ul.nav-tabs.rounded-top:not(.nav-medisch) > li:not([class*="ml-auto"]),
body .tabbable > ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]) {
    float: none;
    margin: 0;
}
/* De actie-li draagt een pr-4 (16px) uit de markup; dat is te veel, maar helemaal
   zonder padding eindigde de knop 8px voorbij de rooilijn van de tabel eronder en
   plakte hij tegen de kaartrand. 8px laat hem exact uitlijnen. */
body .tabbable > ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] {
    padding-right: 8px !important;
}
/* nav-tabs geeft knoppen een margin-right van -1px om randen te laten overlappen.
   Bij deze actieknop stak hij daardoor net buiten de kaartrand. */
body ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] > .btn,
body ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] > .widget-buttons > .btn {
    margin-right: 0;
}
/* Actie-li's (Overzicht/Toevoegen-knoppen, of li's met een widget-buttons groep
   zoals op afspraak toevoegen) niet op de rand laten plakken */
body ul.nav-tabs.rounded-top:not(.nav-medisch) > li[class*="ml-auto"],
body .tabbable > ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"],
body ul.nav-tabs.rounded-top:not(.nav-medisch) > li.pa-heeft-widget-buttons,
body .tabbable > ul.nav-tabs:not(.nav-medisch) > li.pa-heeft-widget-buttons{
    margin-bottom: 8px;
}
body ul.nav-tabs.rounded-top:not(.nav-medisch) > li:not([class*="ml-auto"]) > a,
body .tabbable > ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]) > a {
    border: 0 !important;
    /* Alleen de bovenhoeken rond; de onderkant sluit aan op de rand eronder */
    border-radius: var(--pa-radius-btn) var(--pa-radius-btn) 0 0 !important;
    padding: 7px 14px !important;
    margin: 0 !important;
    background: transparent;
    color: var(--pa-gray-700);
    font-size: 12.8px;
    line-height: 18px;
}
body ul.nav-tabs.rounded-top:not(.nav-medisch) > li:not(.active):not(.activeTab):not([class*="ml-auto"]) > a:hover,
body .tabbable > ul.nav-tabs:not(.nav-medisch) > li:not(.active):not(.activeTab):not([class*="ml-auto"]) > a:hover {
    background: var(--pa-gray-100);
    color: var(--pa-gray-900);
}
/* Status-tabbalk, dienstverband-tabs en Proceslijnen/Takenlijst-schakelaar op
   de takenlijst: alles links uitlijnen met de zoekbalk (deze balken hebben
   geen kaart-zijrand) */
body .tabbable > ul.nav-tabs.pa-heeft-takentab,
body .tabbable > ul#dvbTab.nav-tabs {
    padding-left: 0;
    padding-right: 0;
}
/* Bootstrap's clearfix-pseudo telt in de flex-balk als onzichtbaar eerste
   item en duwt de eerste tab een gap-breedte naar rechts */
body .tabbable > ul.nav-tabs.pa-heeft-takentab::before,
body .tabbable > ul.nav-tabs.pa-heeft-takentab::after,
body .tabbable > ul#dvbTab.nav-tabs::before,
body .tabbable > ul#dvbTab.nav-tabs::after {
    content: none;
}
/* De balk zet z'n padding inline (12px 16px). Binnen een widget-body is die linkerpadding
   dubbelop met de containerpadding; in een kale tab-pane (proceslijnen) is hij juist nodig,
   anders plakken de knoppen tegen de kaartrand.
   !important: verslaat de inline padding. */
body .widget-body > .view-switcher {
    padding-left: 0 !important;
}
/* Sommige legacy tab-sets (o.a. takenlijst-statustabs) markeren de actieve
   tab met .activeTab i.p.v. Bootstrap's .active */
body ul.nav-tabs.rounded-top:not(.nav-medisch) > li.active > a,
body ul.nav-tabs.rounded-top:not(.nav-medisch) > li.activeTab > a,
body .tabbable > ul.nav-tabs:not(.nav-medisch) > li.active > a,
body .tabbable > ul.nav-tabs:not(.nav-medisch) > li.activeTab > a {
    background: var(--pa-primary) !important;
    border-color: var(--pa-primary) !important;
    color: #fff !important;
}
/* ===== Tabs in een widget-kop (o.a. reserveringen): strak in de linker-
   bovenhoek en de volle kophoogte, zelfde beeld als de moderne lijstpagina's ===== */
body .widget > .widget-header > .tabbable {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    /* Compenseert de zijpadding van de kop zodat de eerste tab op de kaartrand begint */
    margin-left: -20px;
}
body .widget > .widget-header .tabbable > ul.nav-tabs:not(.nav-medisch) {
    align-items: stretch;
    height: 100%;
    padding: 0;
    /* De kop heeft zelf al een onderlijn */
    border-bottom: 0;
}
/* Clearfix-pseudo's tellen als flex-item en duwen de eerste tab van de rand af */
body .widget > .widget-header .tabbable > ul.nav-tabs:not(.nav-medisch)::before,
body .widget > .widget-header .tabbable > ul.nav-tabs:not(.nav-medisch)::after {
    display: none;
}
body .widget > .widget-header .tabbable > ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]) {
    display: flex;
    align-items: stretch;
}
body .widget > .widget-header .tabbable > ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]) > a {
    display: flex;
    align-items: center;
    padding: 0 16px !important;
    /* Bovenhoeken rond, aansluitend op de kaartstijl van de moderne lijstpagina's */
    border-radius: 6px 6px 0 0 !important;
}
/* De eerste tab volgt de ronde linkerbovenhoek van de kaart */
body .widget > .widget-header .tabbable > ul.nav-tabs:not(.nav-medisch) > li:first-child > a {
    border-radius: 10px 6px 0 0 !important;
}
/* Actieknoppen in de kop: verticaal gecentreerd in plaats van op de lijn.
   !important: verslaat de self-end/mb-1/mt-1 utility-classes op deze li's. */
body .widget > .widget-header .tabbable > ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"],
body .widget > .widget-header .tabbable > ul.nav-tabs:not(.nav-medisch) > li.pa-heeft-widget-buttons{
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* ===== Tabs direct bovenin een widget zonder widget-header (o.a. bedrijf- en
   aanvragen-weergaven, al dan niet met een tussenliggende kolom-div): zelfde
   strakke hoekstijl — de ul vormt hier zelf de kop, dus die krijgt de
   kophoogte en draagt de onderlijn ===== */
body .widget > .tabbable > ul.nav-tabs:not(.nav-medisch),
body .widget > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch),
body .widget > form > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch) {
    align-items: stretch;
    min-height: 48px;
    padding: 0;
    gap: 0;
}
/* Clearfix-pseudo's tellen als flex-item en duwen de eerste tab van de rand af */
body .widget > .tabbable > ul.nav-tabs:not(.nav-medisch)::before,
body .widget > .tabbable > ul.nav-tabs:not(.nav-medisch)::after,
body .widget > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch)::before,
body .widget > form > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch)::before,
body .widget > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch)::after,
body .widget > form > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch)::after {
    display: none;
}
body .widget > .tabbable > ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons),
body .widget > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons),
body .widget > form > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons){
    display: flex;
    align-items: stretch;
}
body .widget > .tabbable > ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons) > a,
body .widget > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons) > a,
body .widget > form > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons) > a{
    display: flex;
    align-items: center;
    /* min-height: houdt de tabs op kophoogte, ook wanneer een brede actierij
       naar een tweede regel wrapt (o.a. taken-pagina's) en stretch wegvalt */
    min-height: 48px;
    padding: 0 16px !important;
    /* Bovenhoeken rond, aansluitend op de kaartstijl van de moderne lijstpagina's */
    border-radius: 6px 6px 0 0 !important;
}
/* De eerste tab volgt de ronde linkerbovenhoek van de kaart. De :not()-delen
   zijn nodig om qua specificiteit boven de algemene tab-regel hierboven uit te komen. */
body .widget > .tabbable > ul.nav-tabs:not(.nav-medisch) > li:first-child:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons) > a,
body .widget > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch) > li:first-child:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons) > a,
body .widget > form > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch) > li:first-child:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons) > a{
    border-radius: 10px 6px 0 0 !important;
}
/* Actieknoppen in de kop: verticaal gecentreerd in plaats van op de lijn.
   !important: verslaat de self-end/mb-1/mt-1 utility-classes op deze li's. */
body .widget > .tabbable > ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"],
body .widget > .tabbable > ul.nav-tabs:not(.nav-medisch) > li.pa-heeft-widget-buttons,
body .widget > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"],
body .widget > form > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"],
body .widget > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch) > li.pa-heeft-widget-buttons,
body .widget > form > [class*="col-"] > .tabbable > ul.nav-tabs:not(.nav-medisch) > li.pa-heeft-widget-buttons{
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Selects in de kop-actierij (o.a. "Alle bedrijven" op aanvragen): zelfde
   hoogte en rand als de compacte kopknoppen ernaast */
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] .select2-container--default .select2-selection--single,
body .widget ul.nav-tabs:not(.nav-medisch) > li.pa-heeft-widget-buttons .select2-container--default .select2-selection--single{
    height: 24px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] .select2-container--default .select2-selection--single .select2-selection__rendered,
body .widget ul.nav-tabs:not(.nav-medisch) > li.pa-heeft-widget-buttons .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 22px;
    font-size: 12px;
    padding-left: 8px;
}
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] .select2-container--default .select2-selection--single .select2-selection__arrow,
body .widget ul.nav-tabs:not(.nav-medisch) > li.pa-heeft-widget-buttons .select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 22px;
}
/* Legacy btnCustPad-knoppen in de kop-actierij (o.a. "Taak toevoegen"): zelfde
   compacte maat als de overige kopknoppen */
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] .btn.btnCustPad,
body .widget ul.nav-tabs:not(.nav-medisch) > li.pa-heeft-widget-buttons .btn.btnCustPad{
    padding: 2px 8px !important;
    min-height: 24px;
    font-size: 12px !important;
    line-height: 18px;
    border-radius: 6px !important;
    background: #fff;
    border: 1px solid #dee2e6 !important;
    color: rgb(31, 41, 55) !important;
}
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] .btn.btnCustPad:hover,
body .widget ul.nav-tabs:not(.nav-medisch) > li.pa-heeft-widget-buttons .btn.btnCustPad:hover{
    background: var(--pa-gray-100);
}
/* Gekleurde actieknoppen in de kop (o.a. Opslaan/Verwijderen in het taak-
   zijpaneel): compacte maat, maar mét hun eigen kleur en witte tekst.
   De > li in de selector is nodig om de compacte kopknop-regel te verslaan. */
body .widget ul.nav-tabs:not(.nav-medisch) > li .btn.btnCustPad.btn-primary,
body .widget ul.nav-tabs:not(.nav-medisch) > li .btn.btnCustPad.btn-danger,
body .widget ul.nav-tabs:not(.nav-medisch) > li .btn.btnCustPad.btn-success,
body .widget ul.nav-tabs:not(.nav-medisch) > li .btn.btnCustPad.btn-warning {
    color: #fff !important;
    border-color: transparent !important;
}
/* Statusknoppen-rij (o.a. Afronden/Toewijzen/Uitstellen in het taak-zijpaneel):
   nette vaste afstand, ook verticaal wanneer de knoppen over twee regels wrappen */
body .widget-body > div.pull-right.pa-heeft-knop-kind{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* Dossier-weergave: geen extra witruimte tussen de dossier-tabs en de inhoud */
body .widget > .tabbable > .widget-body.pa-heeft-dossier-wrap{
    padding-top: 0;
}
/* Dossier-weergave: horizontale ruimte tussen de kolom-kaarten gelijk aan de
   16px verticale ruimte tussen gestapelde kaarten (was 2×12px = 24px). De
   row-marge compenseert zodat de buitenranden blijven uitlijnen. */
body .widget > .tabbable > .widget-body.pa-heeft-dossier-wrap .tab-pane > .row{
    margin-left: -8px;
    margin-right: -8px;
}
body .widget > .tabbable > .widget-body.pa-heeft-dossier-wrap .tab-pane > .row > [class*="col-"]{
    padding-left: 8px;
    padding-right: 8px;
}
/* Filter-dropdownknoppen (alleen een trechter-icoon, o.a. flexdossier-widgets
   Trajecten/Documenten): kaal icoon zonder kader */
body a.btn.btnCustPad[data-bs-toggle="dropdown"].pa-heeft-filtericoon.pa-heeft-filtericoon{
    background: transparent;
    border-color: transparent !important;
    box-shadow: none;
}
body a.btn.btnCustPad[data-bs-toggle="dropdown"].pa-heeft-filtericoon.pa-heeft-filtericoon:hover{
    background: var(--pa-gray-100);
}
/* Items in dropdown-menu's (o.a. documenten "Toevoegen" op flexdossier,
   medisch dossier, bedrijfsdossier én gebruikersdossier): kale menu-items
   in plaats van omkaderde knoppen. Descendant-selector (li i.p.v. > li):
   in het medisch dossier zit een slimScroll-wrapper tussen ul en li */
body .dropdown-menu .btn.btnCustPad.documenten_toevoegen_a_item,
body .dropdown-menu li > .btn.btnCustPad {
    background: transparent;
    border-color: transparent !important;
    box-shadow: none;
    width: 100%;
    justify-content: flex-start;
}
body .dropdown-menu .btn.btnCustPad.documenten_toevoegen_a_item:hover,
body .dropdown-menu li > .btn.btnCustPad:hover {
    background: var(--pa-gray-100);
}
/* Kaarten met een geopend dropdown-menu: overflow vrijgeven zodat het menu
   over de kaartrand valt in plaats van afgekapt te worden */
body .widget.pa-dropdown-open{
    overflow: visible !important;
}
/* Waarschuwing "Meerdere dienstverbanden" in de dienstverband-tabbalk:
   zelfde compacte maat als de tabs ernaast i.p.v. een groot rood blok */
body li.warning-li {
    display: inline-flex;
    align-items: center;
}
body li.warning-li > div {
    padding: 6px 12px !important;
    margin: 0 !important;
    font-size: 12px;
}
body li.warning-li > div:empty {
    display: none;
}
/* Sluitkruisje in de kop-actierij (o.a. taak-zijpaneel): strak tegen de
   rechterrand in plaats van met eigen ruime padding en marge ervoor */
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] > a:last-child:not(.btn) {
    margin-left: auto;
    margin-right: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}
/* Icoon-knoppen (o.a. gantt-weergave) in de kop-actierij: zelfde 24px-maat */
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] .gantt-toggle-btn {
    height: 24px;
    width: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Vaste onderlinge afstand in de kop-actierij, gelijk aan de andere koppen.
   !important: verslaat de gap-1 utility-class die op deze li's staat. */
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] {
    gap: 6px !important;
}
/* Inline formulier in de kop-actierij (o.a. weekplanning: agenda-filter met
   exportknoppen): zelfde rij-opmaak en afstanden als de rest van de kop */
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] > form.header-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Meerkeuze-select (agenda-filter) compact, passend bij de 24px-kopknoppen */
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] .select2-container--default .select2-selection--multiple {
    min-height: 24px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}
/* De bedrijfs- en agendaselect in de kop compacter. Ook de naamloze
   wrapper-div beperken: die hield anders zijn oude breedte en liet een gat
   tussen de select en de elementen ernaast. */
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] .select2-container:not(.pa-heeft-select2-multiple),
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] > div.pa-heeft-select2-container:not(.pa-heeft-select2-multiple){
    max-width: 160px;
}
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] .select2-container.pa-heeft-select2-multiple{
    max-width: 280px;
}
body .widget ul.nav-tabs:not(.nav-medisch) > li[class*="ml-auto"] .select2-selection--multiple .select2-selection__choice {
    margin: 2px 2px 2px 4px;
}
/* Sectiekaders (well.with-header, o.a. Totaal/Accordering op de weekplanning):
   titel in dezelfde dikgedrukte stijl als de overige kaart-titels */
body .well.with-header > .header {
    font-weight: 600;
    color: var(--pa-gray-900);
}
/* ===== Skeleton loader voor bootbox-iframes (o.a. voorwaarde toevoegen):
   pulserende schets van het formulier tot het iframe geladen is ===== */
body .pa-skeleton {
    display: block;
    background: linear-gradient(90deg, var(--pa-gray-100) 25%, var(--pa-gray-200) 50%, var(--pa-gray-100) 75%);
    background-size: 200% 100%;
    animation: pa-skeleton-glans 1.2s ease-in-out infinite;
    border-radius: 6px;
}
@keyframes pa-skeleton-glans {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
body .pa-skeleton-form {
    padding: 4px 0 12px;
}
body .pa-skeleton-form .pa-skeleton-rij {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}
body .pa-skeleton-form .pa-skeleton-veld {
    flex: 1;
}
body .pa-skeleton-form .pa-skeleton-label {
    width: 90px;
    height: 14px;
    margin-bottom: 8px;
}
body .pa-skeleton-form .pa-skeleton-input {
    height: 38px;
}

/* Standaard legacy DataTables (o.a. logboeken): zoekveld links, exportknoppen
   en de aantal-resultaten-select samen rechts op één rij — zelfde beeld als de
   moderne lijstpagina's. Floats stapelen anders op twee regels. */
/* De zoekbalk is standaard een block dat de regel breekt, waardoor de
   exportknoppen onder de aantal-select vielen; met een float delen zoeken,
   knoppen en de select één regel (de containers op deze legacy pagina's
   hebben geen echte breedte, dus flex/grid is hier geen optie) */
body #searchable_wrapper > .dataTables_filter {
    float: left;
}
body #searchable_wrapper > .dt-buttons {
    float: right;
    margin-right: 8px;
}
body #searchable_wrapper > table {
    clear: both;
}
/* Zelfde maat als de aantal-select op de lijstpagina's; standaard is hij
   te krap om het getal comfortabel te tonen */
body #searchable_wrapper > .dataTables_length select {
    min-width: 72px;
    height: 32px;
    padding: 4px 10px;
    font-size: 12.8px;
}
/* DataTables-secties binnen dossier-widgets (o.a. contactpersonen): ademruimte
   tussen de PDF/Excel-knoppen + aantal-select en de tabelkop eronder, en de
   select in dezelfde kit-maat als op de lijstpagina's */
body .widget-body .dataTables_wrapper .dt-buttons,
body .widget-body .dataTables_wrapper .dataTables_length {
    margin-bottom: 8px;
}
/* Losse knoppen met ruimte ertussen i.p.v. een aaneengesloten btn-group */
body .widget-body .dataTables_wrapper .dt-buttons {
    display: inline-flex;
    gap: 6px;
}
body .widget-body .dataTables_wrapper .dt-buttons .btn {
    border-radius: 6px !important;
}
body .widget-body .dataTables_wrapper .dataTables_length select {
    min-width: 72px;
    height: 32px;
    padding: 4px 10px;
    font-size: 12.8px;
}
/* Koppen die tabs en knoppen in een layout-tabel combineren (o.a. gebruiker
   bewerken): één doorlopende onderlijn onder de hele koprij, zoals de
   widget-koppen op de andere pagina's */
body .widget .tabbable > table.pa-heeft-navtabs{
    border-bottom: 1px solid var(--pa-gray-200);
}
body .widget .tabbable > table.pa-heeft-navtabs ul.nav-tabs{
    border-bottom: 0;
}
/* Zelfde koptabs als bij de andere widget-pagina's, ook wanneer ze in een
   layout-tabel staan (o.a. gebruiker-agenda). Zonder deze regels vallen ze
   terug op de compacte Bootstrap-maat en ogen ze lager dan elders. */
body .widget .tabbable > table.pa-heeft-navtabs ul.nav-tabs:not(.nav-medisch){
    display: flex;
    align-items: stretch;
    min-height: 48px;
    padding: 0;
    gap: 0;
}
body .widget .tabbable > table.pa-heeft-navtabs ul.nav-tabs:not(.nav-medisch)::before,
body .widget .tabbable > table.pa-heeft-navtabs ul.nav-tabs:not(.nav-medisch)::after{
    display: none;
}
body .widget .tabbable > table.pa-heeft-navtabs ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons){
    display: flex;
    align-items: stretch;
    float: none;
    margin: 0;
}
body .widget .tabbable > table.pa-heeft-navtabs ul.nav-tabs:not(.nav-medisch) > li:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons) > a{
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    font-size: 12.8px;
    line-height: 18px;
}
body .widget .tabbable > table.pa-heeft-navtabs ul.nav-tabs:not(.nav-medisch) > li:first-child:not([class*="ml-auto"]):not(.pa-heeft-widget-buttons) > a{
    border-radius: 10px 6px 0 0 !important;
}
body button.ovm-active,
body .dt-buttons .btn.ovm-active,
body #searchable_wrapper .dt-buttons .btn.ovm-active {
    background-color: var(--pa-primary) !important;
    border-color: var(--pa-primary) !important;
    color: #fff !important;
}

/* ===== DataTables op legacy lijstpagina's (o.a. reserveringen) ===== */
/* Minder lucht boven de zoekbalk: de wrapper-padding is dubbelop met de
   widget-body padding en de bovenste scroller (die blijft gewoon staan) */
body .widget-bottomscroller .dataTables_wrapper {
    padding-top: 0 !important;
}
body .widget-body.pa-heeft-bottomscroller{
    padding-top: 12px;
}

/* Lijst full width wanneer het aanvullende-filterpaneel volledig verborgen is;
   met zichtbaar (of ingeklapt) paneel gelden de normale kolombreedtes */
body .row.pa-filterpaneel-verborgen > #innerLijstDiv{
    width: 100% !important;
    padding-right: calc(1.5rem * .5) !important;
}

/* Zoek-icoon: het font-pseudo-element centreert nooit betrouwbaar;
   vervangen door een background-SVG die altijd exact in het midden staat */
body div.dataTables_filter label::before,
body div.dataTables_wrapper label::before {
    display: none !important;
    content: none !important;
}
body div.dataTables_filter input[type="search"],
body div.dataTables_wrapper input[type="search"],
body div.dataTables_wrapper div.dataTables_filter input[type="search"],
body div#searchable_filter input[type="search"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23396BC4' stroke-width='2'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m13.5 13.5 4 4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 14px 14px !important;
    padding-left: 36px !important;
    min-height: 38px;
}
/* Exportknoppen en per-pagina select: zelfde maten als de moderne lijstpagina's
   (knoppen en select 32px, zoekveld 38px, alles 12.8px) */
body .dt-buttons .btn {
    height: 32px !important;
    display: inline-flex;
    align-items: center;
    font-size: 12.8px !important;
    padding: 6px 12px !important;
}
body div.dataTables_length select,
body select.form-select-sm {
    height: 32px;
    min-height: 32px !important;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12.8px !important;
}

/* ===== Recente dossiers (topmenu-dropdown): identiek op legacy en Laravel ===== */
ul#recenteDossiersUl > li {
    display: flex;
    justify-content: space-between;
    position: relative;
    column-gap: 4px;
    padding: 8px 12px !important;
    margin: 2px 0;
    border-radius: var(--pa-radius-input);
    cursor: pointer;
    transition: background-color .15s ease;
}
ul#recenteDossiersUl > li:hover {
    background-color: var(--pa-primary-50);
}

/* ===== Alerts ===== */
body .alert {
    border-radius: var(--pa-radius-input);
    border: 1px solid transparent;
    font-size: 12.8px;
    padding: 12px 16px;
}
body .alert.alert-success {
    background: #f0f7ed;
    border-color: #cde3c3;
    color: #3c7a2d;
}
body .alert.alert-danger {
    background: #fdf0ee;
    border-color: #f3cdc7;
    color: #b23a29;
}
body .alert.alert-warning {
    background: #fdf6e3;
    border-color: #f0e0b0;
    color: #9a7400;
}
body .alert.alert-info {
    background: var(--pa-primary-50);
    border-color: #c9d8f0;
    color: var(--pa-primary-dark);
}
/* Links in een melding: zonder onderstreping vallen ze weg tegen de meldingstekst,
   want ze delen de kleur van de melding */
body .alert a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

/* Trajectformulier: de doorlooptijd/maximum-uren staan naast de traject-select. De overige
   velden reserveren diezelfde ruimte rechts, zodat alle selects op één rooilijn eindigen.
   De breedte wordt door lijnTrajectVeldenUit() gemeten (vertaalbare labels). */
/* Rijen met een labelkolom ernaast: reserveer binnen de veldkolom, anders krimpt de
   procentuele labelkolom mee en schuiven de velden naar links. Transparante rand i.p.v.
   padding, zodat de bestaande kolompadding blijft staan. */
body #trajectAlgemeenBody > .row:not(#trajectRij) > .col-md-10 {
    border-right: var(--traject-extra-kolom, 0px) solid transparent;
}
/* Rijen zonder labelkolom (label erboven of twee gelijke kolommen): hele rij mag krimpen,
   zodat beide kolommen even breed blijven. */
body #trajectAlgemeenBody > .row:not(#trajectRij):not(.pa-heeft-labelkolom){
    border-right: var(--traject-extra-kolom, 0px) solid transparent;
}

/* Nieuw dossier: het clientblok wordt door JS gevuld. Zolang er geen client gekozen is,
   is het leeg en mag het geen ruimte innemen (de padding hield anders 40px bezet).
   Met inhoud lijnt het uit met de kop en de tabel eronder; de ruimte zit daarom
   uitsluitend aan de onderkant. */
body #clientInhoudDiv:empty {
    display: none;
}
body #clientInhoudDiv {
    padding: 0 0 20px;
}

/* Nieuw dossier: traject-select met de doorlooptijd ernaast. Is er geen doorlooptijd
   (JS verbergt het blok), dan vult de select vanzelf de hele rij — net zo breed als
   de velden eronder. */
body .traject-doorlooptijd-rij {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
body .traject-doorlooptijd-rij > .traject-veld {
    flex: 1 1 auto;
    min-width: 0;
}
body .traject-doorlooptijd-rij > .doorlooptijd-veld {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Statusselects in de dossierlijsten (afspraken en documenten): een maat kleiner dan de
   standaard formuliermaat, zodat ze rustiger tussen de regels staan */
body .statusSelect,
body .statusSelect + .select2 .select2-selection__rendered,
body .statusSelect + .select2 .select2-selection {
    font-size: 12px;
}

/* Bedrijfsformulier: de logo-upload staat naast de zoek- en bedrijfsvelden. Zonder deze
   ruimte plakt hij tegen de knoppenbalk; met de marge begint hij op de hoogte van het
   eerste invoerveld ernaast. */
body .bedrijf-logo-kolom {
    margin-top: 28px;
}

/* Bedrijfsformulier: het zoekblok (AGB/KVK) staat direct boven de sectiekop
   "Bedrijfsgegevens". De veldmarge plus de kopmarge gaven daar te veel lucht. */
body .bedrijf-velden-kolom .zoekblok-rij .form-group {
    margin-bottom: 0;
}
body .bedrijf-velden-kolom .form-title {
    margin-top: 14px;
}

/* Bedrijfsformulier: het debiteurenblok staat buiten de veldenkolom en zou daardoor
   breder lopen dan de velden erboven. Zelfde breedte als col-10, zodat het
   verzekeraarsveld rechts uitlijnt met "Externe code". */
body .debiteur-velden-rij {
    /* breedte komt uit de omliggende col-10, net als bij de codevelden erboven */
    width: auto;
}

/* Werkgever toevoegen (wizard): postcode en woonplaats op één regel, waarbij woonplaats
   de resterende ruimte vult zodat hij rechts uitlijnt met de andere velden */
body .postcode-woonplaats-rij {
    display: flex;
    gap: 8px;
}
body .postcode-woonplaats-rij > .postcode-veld {
    flex: 0 0 120px;
}
body .postcode-woonplaats-rij > .woonplaats-veld {
    flex: 1 1 auto;
    min-width: 0;
}

/* Afspraakblokken in de agenda: custom.css geeft ze een donkerblauwe stippellijn
   onderaan (.afspraak, .andere_afspraak, .ruimte_afspraak). Die valt hard op tegen de
   statuskleur van het blok en voegt niets toe. */
body .afspraak,
body .andere_afspraak,
body .ruimte_afspraak {
    border-bottom: 0;
}

/* Sommige dialogen wikkelen het iframe in een sleepbare lijst (.dd-draghandle > ol.dd-list).
   De lijst-inspringing en de kaartrand daarvan gaven een brede witte band boven het
   formulier; die wrappers hoeven hier geen eigen ruimte. */
body .modal-body .dd-draghandle.pa-heeft-ddlist-iframe,
body .modal-body .dd-list.pa-heeft-iframe-kind{
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
body .modal-body .row.pa-heeft-kolom-ddlist-iframe,
body .modal-body [class*="col-"].pa-heeft-draghandle-ddlist-iframe{
    margin: 0;
    padding: 0;
}
/* Deze dialoog zet zijn hoogte op het iframe zelf (calc op de vensterhoogte); de
   flex/overflow-behandeling van de andere iframe-dialogen zou hem juist afknijpen. */
body .modal-body.pa-heeft-framepa{
    display: block;
    overflow: visible;
}
body .modal-body.pa-heeft-framepa > .bootbox-body{
    display: block;
}
body .modal-body iframe.framePa {
    display: block;
    width: 100%;
}

/* ===== Verplichte vraag die nog openstaat ===== */
/* Bij het doorklikken in een wizard verscheen alleen een melding; de vraag zelf
   was niet te herkennen. Deze markering licht de vraag op waar naartoe gescrold
   is en verdwijnt zodra hij beantwoord wordt. */
body .pa-vraag-ontbreekt {
    position: relative;
    padding: 8px 10px;
    border-left: 3px solid var(--pa-danger, #df5138);
    border-radius: var(--pa-radius-input, 8px);
    background-color: #fdf2f2;
    animation: pa-vraag-ontbreekt-pulse 1.2s ease-out 1;
}
body .pa-vraag-ontbreekt .vraag-title,
body .pa-vraag-ontbreekt .vraag-form-title {
    color: var(--pa-danger, #df5138);
}
@keyframes pa-vraag-ontbreekt-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(223, 81, 56, .45);
    }
    100% {
        box-shadow: 0 0 0 10px rgba(223, 81, 56, 0);
    }
}

/* ===== Diagnose toevoegen (bootbox in de wizard) ===== */
/* Het formulier is ongeveer 500px hoog; met de oude vaste 370px viel de laatste
   veldgroep buiten beeld. De negatieve bovenmarge trok het formulier bovendien
   tegen de dialoogkop aan, waardoor de eerste labelregel geen lucht had. */
body .bootbox-diagnose-frame {
    width: 100%;
    height: 520px;
    /* Op lagere schermen niet buiten de dialoog groeien */
    max-height: 70vh;
    border: 0;
}
/* De modal-body van deze dialoog heeft geen eigen padding, waardoor het
   formulier direct tegen de kopregel begon. De extra .bootbox in de selector is
   nodig om de generieke iframe-regel hierboven (padding: 0) te overstemmen. */
body .bootbox.bootbox-diagnose .modal-body {
    padding-top: 16px;
}

/* ===== Traject verbruik: eerstvolgende afspraak naast een enkele tegel ===== */
/* Bij een samenstelling met een verrichting blijft rechts van de tegel ruimte
   over. Die vullen we met de eerstvolgende afspraak in plaats van hem leeg te
   laten. Bij meer verrichtingen valt dit blok weg en blijft het raster leidend. */
/* Tegels links, de afspraakkaart ernaast. Geldt tot en met drie verrichtingen. */
body .traject-verbruik-box-naast {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding-right: 12px;
}
body .traject-verbruik-box-naast .traject-verbruik-rij {
    padding-right: 0;
    flex: 1 1 auto;
    min-width: 0;
}
/* Een kolom per verrichting: de tegels blijven zo op een regel naast de
   afspraakkaart. 118px is de gewenste breedte, de ondergrens 0 zodat ze krimpen
   in plaats van te wrappen wanneer de ruimte krap is. */
body .traject-verbruik-box-naast .traject-verbruik-kolommen-1 {
    grid-template-columns: minmax(0, 118px);
}
body .traject-verbruik-box-naast .traject-verbruik-kolommen-2 {
    grid-template-columns: repeat(2, minmax(0, 118px));
}
body .traject-verbruik-box-naast .traject-verbruik-kolommen-3 {
    grid-template-columns: repeat(3, minmax(0, 118px));
}
/* Vaste breedte in plaats van meegroeien met de resterende ruimte: bij een breed
   dossier werd deze kaart anders onnodig uitgerekt. Tekst die niet past wordt
   afgekapt met een beletselteken (zie de regels hieronder). */
body .traject-verbruik-afspraak {
    display: flex;
    flex-direction: column;
    flex: 0 0 240px;
    width: 240px;
    max-width: 100%;
    /* Zie .traject-verbruik-afspraak-compact verderop voor de smalle variant */
    min-width: 0;
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--pa-gray-200, #e5e7eb);
    border-radius: 8px;
    background-color: #ffffff;
}
body .traject-verbruik-afspraak-kop {
    display: flex;
    align-items: center;
    /* Titel links, actie rechts -- zelfde indeling als de kop van de andere
       dossier-elementen */
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--pa-gray-700, #374151);
}
body .traject-verbruik-afspraak-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
body .traject-verbruik-afspraak-icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #eaf6e7;
    color: #53a93f;
    font-size: 10px;
    flex-shrink: 0;
}
/* Kopje en verrichting onder elkaar, samen naast het icoon. */
/* Drie verrichtingen: smallere kaart (zonder behandelaar) zodat de drie tegels
   ernaast op een regel blijven passen. */
body .traject-verbruik-afspraak.traject-verbruik-afspraak-compact {
    flex: 0 0 180px;
    width: 180px;
}
body .traject-verbruik-afspraak-compact .btn.traject-verbruik-afspraak-knop {
    width: 100%;
}
body .traject-verbruik-afspraak-koptekst {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
body .traject-verbruik-afspraak-kopje {
    font-size: 10px;
    font-weight: 600;
    color: var(--pa-gray-500, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body .traject-verbruik-afspraak-naam {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pa-gray-800, #1f2937);
}
body .traject-verbruik-afspraak-regel {
    display: flex;
    align-items: center;
    /* Zelfde tussenruimte als de kop, zodat de tekst eronder gelijk begint */
    gap: 8px;
    margin-top: 3px;
    font-size: 10.5px;
    color: var(--pa-gray-600, #4b5563);
}
/* Even breed als het ronde icoon in de kop: anders staan de twee iconen onder
   elkaar niet op dezelfde lijn. */
body .traject-verbruik-afspraak-regel > i {
    color: var(--pa-gray-400, #9ca3af);
    font-size: 10px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
/* Datum met behandelaar erachter kan langer zijn dan de kaart breed is. */
body .traject-verbruik-afspraak-regel > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
body .traject-verbruik-afspraak-titel {
    overflow: hidden;
}
body .traject-verbruik-afspraak-kop .traject-verbruik-afspraak-titel {
    text-overflow: ellipsis;
    white-space: nowrap;
}
body .traject-verbruik-afspraak-leeg {
    font-size: 10.5px;
    color: var(--pa-gray-500, #6b7280);
}
/* Alleen de letergrootte van de knop gaat omlaag; de knop zelf houdt zijn normale
   afmetingen. !important is nodig omdat de basis een '.btn { font-size: 0.8rem
   !important }' meebrengt die anders altijd wint.
   Vaste breedte: het label wisselt tussen 'Bekijk in agenda' en 'Ga naar agenda',
   waardoor de knop anders van maat verspringt. Past het label niet, dan kapt het
   af met een beletselteken in plaats van de knop op te rekken. */
body .traject-verbruik-afspraak .btn.traject-verbruik-afspraak-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 150px;
    flex-shrink: 0;
    font-size: 10.5px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body .traject-verbruik-afspraak .btn.traject-verbruik-afspraak-knop > i {
    flex-shrink: 0;
}
body .traject-verbruik-afspraak-knop-tekst {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* Doorverwijzing naar de planning linksonder in het blok, los van de
   toevoeg-actie die rechtsboven staat. margin-top: auto duwt hem naar de
   onderkant zodat hij op één lijn blijft, ongeacht of er een afspraak staat. */
body .traject-verbruik-afspraak-voet {
    display: flex;
    justify-content: flex-start;
    margin-top: auto;
    padding-top: 8px;
}

/* ===== Medische kaart: vragenlijst-tabblad in de zijkolom ===== */
/* Eigen tab-classes in plaats van de Bootstrap-tabs: die balk staat binnen het
   tab-pane van de balk erboven, en Bootstrap deactiveerde bij elke klik ook dat
   buitenste paneel (hele zijkolom leeg). Zonder `.nav-tabs` gelden de
   custom.css-regels voor kaart-tabs hier ook niet meer, dus dit blok heeft geen
   !important nodig. */
body .medische-kaart-zijtabs {
    display: flex;
    flex-wrap: nowrap;
    /* In een smalle zijkolom schuift de balk liever horizontaal dan dat de
       tabs over elkaar heen vallen. */
    overflow-x: auto;
    margin: 0;
    padding: 0 5px;
    list-style: none;
    border-bottom: 1px solid var(--pa-gray-200);
}
body .medische-kaart-zijtabs > li {
    margin: 0;
    list-style: none;
}
body a.medische-kaart-zijtab {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 15px;
    border-bottom: 2px solid transparent;
    color: var(--pa-gray-500);
    font-size: 12.8px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
body a.medische-kaart-zijtab > i {
    font-size: 13px;
    color: var(--pa-gray-400);
    transition: color .12s ease;
}
body a.medische-kaart-zijtab:hover {
    color: var(--pa-gray-900);
    background-color: var(--pa-gray-50);
}
body a.medische-kaart-zijtab:hover > i {
    color: var(--pa-gray-500);
}
body a.medische-kaart-zijtab.actief {
    color: var(--pa-primary);
    border-bottom-color: var(--pa-primary);
}
body a.medische-kaart-zijtab.actief > i {
    color: var(--pa-primary);
}
/* Panelen: alleen het actieve tabblad is zichtbaar. */
body .medische-kaart-zijtab-paneel {
    display: none;
}
body .medische-kaart-zijtab-paneel.actief {
    display: block;
}

/* Buiten de toevoeg-/bewerkmodus staat de kaartenlijst over de volle breedte en
   is er niets om naast te leggen: dan geen tabbalk, alleen de kaarten. De
   modus is af te lezen aan .medische_kaart_toevoegen, dat in rust d-none is.
   Ook als CSS-regel en niet alleen via JS, zodat de kaartenlijst altijd
   zichtbaar is - ook wanneer er net een vragenlijst openstond. */
body .medische_kaart_area:not(.pa-kaart-toevoegmodus) .medische-kaart-zijtabs{
    display: none;
}
body .medische_kaart_area:not(.pa-kaart-toevoegmodus) #zijtab_medische_kaarten{
    display: block;
}
body .medische_kaart_area:not(.pa-kaart-toevoegmodus) #zijtab_vragenlijsten{
    display: none;
}

/* Inhoud van het vragenlijst-tabblad. De zijkolom zelf springt maar 5px in, dus
   de ademruimte van het paneel komt hier vandaan. */
body .vragenlijst-historie {
    padding: 15px 10px 20px;
}

/* Historie: de ingevulde vragenlijsten als rijen in een kaartje */
body .vragenlijst-historie-items {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--pa-gray-200);
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: var(--pa-shadow-card);
    overflow: hidden;
}
body .vragenlijst-historie-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--pa-gray-100);
    cursor: pointer;
    transition: background-color .12s ease;
}
body .vragenlijst-historie-item:last-child {
    border-bottom: 0;
}
body .vragenlijst-historie-item:hover {
    background-color: var(--pa-primary-50);
}
body .vragenlijst-historie-stip {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--pa-success);
}
body .vragenlijst-historie-open .vragenlijst-historie-stip {
    background-color: var(--pa-gray-300);
}
body .vragenlijst-historie-inhoud {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
body .vragenlijst-historie-titel {
    font-size: 12.8px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--pa-gray-900);
}
body .vragenlijst-historie-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
}
body .vragenlijst-historie-regel {
    font-size: 11px;
    line-height: 1.5;
    color: var(--pa-gray-500);
}
/* Puntje tussen datum en naam; alleen zichtbaar als beide op dezelfde regel staan. */
body .vragenlijst-historie-regel + .vragenlijst-historie-regel::before {
    content: "\00B7";
    margin-right: 6px;
    color: var(--pa-gray-300);
}
body .vragenlijst-historie-item > i {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--pa-gray-300);
    transition: color .12s ease;
}
body .vragenlijst-historie-item:hover > i {
    color: var(--pa-primary);
}
body .vragenlijst-historie-leeg,
body .vragenlijst-antwoorden-leeg {
    padding: 15px;
    border: 1px solid var(--pa-gray-200);
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 12px;
    color: var(--pa-gray-500);
}
body .vragenlijst-historie-detail {
    display: none;
}
body .vragenlijst-historie-detail.actief {
    display: block;
}
body .vragenlijst-historie-terug {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 4px 10px 4px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--pa-primary);
    text-decoration: none;
    transition: background-color .12s ease;
}
body .vragenlijst-historie-terug:hover {
    background-color: var(--pa-primary-50);
    color: var(--pa-primary);
    text-decoration: none;
}

/* Antwoordenpaneel: een kaartje met een rustige kop en de vragen eronder */
body .vragenlijst-antwoorden {
    border: 1px solid var(--pa-gray-200);
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: var(--pa-shadow-card);
}
body .vragenlijst-antwoorden-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 10px 15px;
    border-bottom: 1px solid var(--pa-gray-200);
    border-radius: 8px 8px 0 0;
    background-color: var(--pa-gray-50);
}
body .vragenlijst-antwoorden-titel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}
body .vragenlijst-antwoorden-naam {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pa-gray-900);
}
body .vragenlijst-antwoorden-datum {
    font-size: 11px;
    line-height: 1.4;
    color: var(--pa-gray-500);
}
body .vragenlijst-antwoorden-acties {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 5px;
}
body .btn.vragenlijst-kopieer-alles {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px !important;
    white-space: nowrap;
}
/* !important: de btn-default-basis hierboven in dit bestand zet `border` en
   `color` met !important, waardoor de bevestiging na het kopieren anders
   onzichtbaar bleef. */
body .btn.vragenlijst-kopieer-alles.gekopieerd {
    border-color: var(--pa-success) !important;
    color: var(--pa-success) !important;
}
body .vragenlijst-antwoorden-lijst {
    padding: 15px;
}

/* Vraag met antwoord */
body .vragenlijst-antwoord-kop {
    margin: 20px 0 10px;
    padding-top: 15px;
    border-top: 1px solid var(--pa-gray-100);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pa-gray-400);
}
/* De eerste kop staat direct onder de paneelkop en heeft die scheiding niet nodig. */
body .vragenlijst-antwoorden-lijst > .vragenlijst-antwoord-kop:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
/* Secties zonder vragen leveren twee koppen achter elkaar op. De tweede sluit
   dan strak aan op de eerste in plaats van er een lege scheiding tussen te zetten. */
body .vragenlijst-antwoord-kop + .vragenlijst-antwoord-kop {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
body .vragenlijst-antwoord-regel {
    margin-bottom: 15px;
}
body .vragenlijst-antwoord-regel:last-child {
    margin-bottom: 0;
}
body .vragenlijst-antwoord-vraag {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--pa-gray-700);
}
body .vragenlijst-antwoord-leeg {
    padding: 6px 10px;
    border: 1px dashed var(--pa-gray-200);
    border-radius: 6px;
    font-size: 12px;
    font-style: italic;
    color: var(--pa-gray-400);
}
/* Veld met kopieerknop: de knop staat in het veld, niet ernaast */
body .vragenlijst-antwoord-veld {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--pa-gray-200);
    border-radius: 6px;
    background-color: #ffffff;
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}
body .vragenlijst-antwoord-veld:hover {
    border-color: var(--pa-gray-300);
}
body .vragenlijst-antwoord-veld:focus-within {
    border-color: var(--pa-primary);
    box-shadow: 0 0 0 3px var(--pa-primary-ring);
}
/* !important op padding, rand, schaduw en lettergrootte: de basis-stylesheets
   zetten die op elke input/textarea (o.a. `input[type=text]:focus { border: 1px
   solid #e5e5e5 !important }`) en winnen anders van deze regels. */
body .vragenlijst-antwoord-veld input.vragenlijst-antwoord-tekst,
body .vragenlijst-antwoord-veld textarea.vragenlijst-antwoord-tekst {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
    font-size: 12.8px !important;
    line-height: 1.5;
    color: var(--pa-gray-900);
    resize: vertical;
}
body .vragenlijst-antwoord-veld input.vragenlijst-antwoord-tekst:focus,
body .vragenlijst-antwoord-veld textarea.vragenlijst-antwoord-tekst:focus {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
body .vragenlijst-antwoord-opties {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
}
body .vragenlijst-antwoord-optie {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: var(--pa-primary-50);
    font-size: 12px;
    line-height: 1.6;
    color: var(--pa-primary);
}
body .vragenlijst-antwoord-optie > i {
    font-size: 10px;
    flex: 0 0 auto;
}
/* Zijn de gekozen teksten hele zinnen, dan is een pil onleesbaar: die staan als
   lijst onder elkaar, met het vinkje naast de eerste regel. */
body .vragenlijst-antwoord-keuze-lang .vragenlijst-antwoord-opties {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
body .vragenlijst-antwoord-keuze-lang .vragenlijst-antwoord-optie {
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--pa-gray-900);
    line-height: 1.45;
}
body .vragenlijst-antwoord-keuze-lang .vragenlijst-antwoord-optie > i {
    margin-top: 4px;
    color: var(--pa-primary);
}
/* ===== Documenten-tabblad in de zijkolom ===== */
/* Zelfde kaart-opzet als het antwoordenpaneel; de regels zijn gewone tekst en
   dus met de muis te selecteren, naast de Kopieer-knop bovenaan. */
body .documenten-lijst-wrap {
    margin: 0;
    border: 1px solid var(--pa-gray-200);
    border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden;
}
body .documenten-items {
    margin: 0;
    padding: 5px 0;
    list-style: none;
}
body .documenten-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--pa-gray-100);
    /* Nadrukkelijk selecteerbaar: losse regels of stukken tekst overnemen moet
       kunnen zonder de knop te gebruiken. */
    user-select: text;
    cursor: text;
}
body .documenten-item:last-child {
    border-bottom: 0;
}
body .documenten-item > i {
    margin-top: 3px;
    width: 14px;
    flex: 0 0 auto;
    text-align: center;
    font-size: 12px;
    color: var(--pa-gray-400);
}
body .documenten-item-inhoud {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
body .documenten-item-naam {
    font-size: 12.8px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pa-gray-900);
}
body .documenten-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 11px;
    color: var(--pa-gray-500);
}
body .documenten-item-meta > span.documenten-item-status {
    color: var(--pa-gray-700);
}

/* Documenten met tekst zijn te openen; de naam is de aanwijsbare plek zodat
   losse tekst selecteren in de regel gewoon mogelijk blijft. */
body .documenten-item-open {
    cursor: pointer;
}
body .documenten-item-open:hover {
    background-color: var(--pa-gray-50);
}
body .documenten-item-open .documenten-item-naam {
    color: var(--pa-primary);
}
body .documenten-item-pijl {
    margin-left: auto;
    align-self: center;
    font-size: 14px;
    color: var(--pa-gray-400);
}
body .documenten-item-inhoud {
    flex: 1 1 auto;
}

/* De tekst van een geopend document: leesbaar, met behoud van regeleindes en
   volledig te selecteren. */
body .documenten-tekst {
    padding: 12px 15px;
    font-size: 12.8px;
    line-height: 1.55;
    color: var(--pa-gray-800);
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
    cursor: text;
}
/* Geuploade bestanden: dezelfde weergave als bij het openen in de Documenten-tab,
   passend gemaakt voor de smalle zijkolom. */
body .documenten-pdf {
    width: 100%;
    min-height: 520px;
    border: 0;
    display: block;
}
body .documenten-afbeelding {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 12px 15px;
}
body .documenten-download {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 15px;
}
body .documenten-download-naam {
    font-size: 12px;
    color: var(--pa-gray-600);
    word-break: break-word;
}
body .documenten-terug,
body .vragenlijst-historie-terug {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    font-size: 12px;
    color: var(--pa-gray-600);
}
body .documenten-terug:hover {
    color: var(--pa-primary);
}
body .documenten-zijlijst-detail {
    display: none;
}
body .documenten-zijlijst-detail.actief {
    display: block;
}

/* Plaatsvervangers tijdens het laden van een tabblad. */
body .pa-skeleton-lijst {
    padding: 12px 15px;
}
body .pa-skeleton {
    border-radius: 4px;
    background-color: var(--pa-gray-100);
    background-image: linear-gradient(90deg, var(--pa-gray-100) 0%, var(--pa-gray-50) 50%, var(--pa-gray-100) 100%);
    background-size: 200% 100%;
    animation: paSkeletonGolf 1.3s ease-in-out infinite;
}
body .pa-skeleton-regel {
    margin-bottom: 14px;
}
body .pa-skeleton-titel {
    width: 72%;
    height: 12px;
    margin-bottom: 6px;
}
body .pa-skeleton-meta {
    width: 45%;
    height: 9px;
}
body .pa-skeleton-tekstregel {
    height: 10px;
    margin-bottom: 9px;
}
@keyframes paSkeletonGolf {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    body .pa-skeleton {
        animation: none;
    }
}

/* Toelichting bij een keuzevraag: hoort bij hetzelfde antwoord, maar staat
   duidelijk los van de gekozen opties erboven. */
body .vragenlijst-antwoord-toelichting {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--pa-gray-100);
    font-size: 12.8px;
    line-height: 1.45;
    color: var(--pa-gray-900);
    white-space: pre-wrap;
}
/* Kopieerknop: zit in het veld en heeft bewust geen eigen rand of focusring,
   alleen een subtiel vlak dat bij hover en na kopieren van kleur wisselt. */
body button.vragenlijst-kopieer-knop {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--pa-gray-100);
    border-radius: 0;
    background-color: var(--pa-gray-50);
    font-size: 12px;
    color: var(--pa-gray-400);
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: background-color .12s ease, color .12s ease;
}
/* Ook bij een hoog veld (tekstvak of een rij keuzes) staat het icoon verticaal
   in het midden van de knop, niet bovenaan. */
body .vragenlijst-antwoord-lang > button.vragenlijst-kopieer-knop,
body .vragenlijst-antwoord-keuze > button.vragenlijst-kopieer-knop {
    align-items: center;
    padding-top: 0;
}
body button.vragenlijst-kopieer-knop:hover {
    background-color: var(--pa-gray-100);
    color: var(--pa-primary);
}
body button.vragenlijst-kopieer-knop:focus,
body button.vragenlijst-kopieer-knop:focus-visible,
body button.vragenlijst-kopieer-knop:active {
    outline: none;
    box-shadow: none;
}
body button.vragenlijst-kopieer-knop.gekopieerd,
body button.vragenlijst-kopieer-knop.gekopieerd:hover {
    background-color: rgba(83, 169, 63, .12);
    color: var(--pa-success);
}

/* ===== Planning: afspraakblokken van elkaar scheiden ===== */
/* Opeenvolgende afspraken sluiten exact op elkaar aan (gat van 0px) en hebben
   vaak dezelfde kleur; daardoor oogde een blok van zes afspraken als één vlak.
   Een witte ring vormt tussen twee aansluitende blokken een duidelijke lijn en
   valt tegen de witte kalenderachtergrond vanzelf weg. De ring is een
   box-shadow, dus de hoogte (en daarmee de tijd-uitlijning) verandert niet. */
body .afspraak {
    box-shadow: 0 0 0 1px #ffffff, inset 0 0 0 1px rgba(255, 255, 255, .3);
}

/* ===== Planning: actiemenu rechts in de knoppenbalk ===== */
/* De losse icoonknoppen (bulkwijziging, verlengen, wizard) en de Google-acties
   zitten samen onder dit menu; het staat als laatste in de balk. */
body .planning-actiemenu {
    margin-left: 4px;
}
body .planning-actiemenu > .btn.dropdown-toggle::after {
    /* Geen extra caret naast de drie puntjes */
    display: none;
}
/* Open menu: de knop blijft ingedrukt oogen, zodat duidelijk is waar het
   uitklapmenu bij hoort. */
body .planning-actiemenu > .btn.dropdown-toggle.show,
body .planning-actiemenu > .btn.dropdown-toggle[aria-expanded="true"] {
    background-color: var(--pa-gray-100, #f3f4f6);
    border-color: var(--pa-gray-300, #d1d5db);
}
body .planning-actiemenu .dropdown-menu {
    min-width: 224px;
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--pa-gray-200, #e5e7eb);
    /* !important: beyond.css zet .dropdown-menu op border-radius 2px !important */
    border-radius: 8px !important;
    background-color: #ffffff;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .10), 0 2px 6px rgba(17, 24, 39, .06);
}
body .planning-actiemenu .dropdown-menu.show {
    /* Rustig openen in plaats van hard verschijnen. Bewust alleen opacity:
       Bootstrap positioneert het menu zelf met een transform, dus een animatie
       op transform overschrijft die tijdens het afspelen - het menu verscheen
       dan eerst bij het icoon en sprong daarna op zijn plek. */
    animation: planning-actiemenu-open .13s ease-out;
}
@keyframes planning-actiemenu-open {
    from { opacity: 0; }
    to { opacity: 1; }
}
body .planning-actiemenu .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12.8px;
    line-height: 1.2;
    color: var(--pa-gray-700, #374151);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}
body .planning-actiemenu .dropdown-menu > li > a:hover,
body .planning-actiemenu .dropdown-menu > li > a:focus {
    background-color: rgba(57, 107, 196, .08);
    color: #396BC4;
}
body .planning-actiemenu .dropdown-menu > li > a > i {
    width: 16px;
    font-size: 13px;
    text-align: center;
    color: var(--pa-gray-400, #9ca3af);
    transition: color .12s ease;
}
body .planning-actiemenu .dropdown-menu > li > a:hover > i,
body .planning-actiemenu .dropdown-menu > li > a:focus > i {
    color: #396BC4;
}
/* Acties zonder eigen icoon (de Google-regels) laten inspringen tot onder de
   labels hierboven, zodat er een rustige tekstkolom ontstaat. */
body .planning-actiemenu .dropdown-menu > li > a:not(.pa-heeft-icoon){
    padding-left: 36px;
}
body .planning-actiemenu .dropdown-menu .dropdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 4px 10px 6px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pa-gray-400, #9ca3af);
}
body .planning-actiemenu .dropdown-menu .dropdown-header > i {
    width: 16px;
    font-size: 12px;
    text-align: center;
    color: var(--pa-gray-400, #9ca3af);
}
body .planning-actiemenu .dropdown-menu .dropdown-divider {
    margin: 6px 4px;
    border-top: 1px solid var(--pa-gray-200, #e5e7eb);
    opacity: 1;
}

/* ===== Formuliervalidatie: het veld met de fout aanwijzen ===== */
/* Meerdere velden delen soms een form-group (bv. de naam-rij). .has-error op die
   group kleurt alle velden erin, dus markeert de validator daarnaast het veld
   dat de fout veroorzaakt. */
/* Beyond kleurt élk veld in een .has-error group rood. Zit er meer dan één veld
   in die group, dan gingen ook de correct ingevulde buurvelden mee - vandaar dat
   we die hier terugzetten en alleen het gemarkeerde veld rood laten. */
body .form-group.has-error input:not(.bv-veld-fout),
body .form-group.has-error select:not(.bv-veld-fout),
body .form-group.has-error .select:not(.bv-veld-fout),
body .form-group.has-error textarea:not(.bv-veld-fout) {
    border-color: var(--pa-gray-200, #e5e7eb);
    color: inherit;
    background-color: #ffffff;
}
body .form-group.has-error input:not(.bv-veld-fout):focus,
body .form-group.has-error select:not(.bv-veld-fout):focus,
body .form-group.has-error textarea:not(.bv-veld-fout):focus {
    border-color: var(--pa-blue, #396BC4);
    color: inherit;
}
/* Selectors met .form-group.has-error ervoor, anders wint de beyond-regel
   hierboven op specificiteit en blijft het foute veld ongemarkeerd. */
/* !important is hier nodig: een later ingeladen stylesheet zet
   `input[type=text]:focus { border: 1px solid #e5e5e5 !important }`, en juist het
   foute veld krijgt focus - zonder deze prioriteit verdween de rode rand precies
   op het moment dat de gebruiker ernaartoe gesprongen werd. */
body .form-group.has-error input.bv-veld-fout,
body .form-group.has-error select.bv-veld-fout,
body .form-group.has-error .select.bv-veld-fout,
body .form-group.has-error textarea.bv-veld-fout,
body input.bv-veld-fout,
body select.bv-veld-fout,
body textarea.bv-veld-fout,
body .form-group.has-error input.bv-veld-fout:focus,
body .form-group.has-error select.bv-veld-fout:focus,
body .form-group.has-error textarea.bv-veld-fout:focus,
body input.bv-veld-fout:focus,
body select.bv-veld-fout:focus,
body textarea.bv-veld-fout:focus {
    border: 1px solid #df5138 !important;
    color: #df5138;
    background-color: #fdecea;
}
/* Alleen de melding van het foute veld tonen; buurvelden in dezelfde rij
   houden hun eigen (afwezige) melding. */
body .help-block.bv-msg {
    color: #df5138;
    font-size: 11px;
    margin-top: 2px;
}

/* ===== Beschikbaarheid bewerken: datum in de 'Verwijderen vanaf'-knop ===== */
/* De datum zit in de knop zelf; als los veld ernaast was hij 38px hoog tegen
   28px voor de knoppen. Het veld blijft klikbaar (opent de datumkiezer) maar
   oogt als tekst binnen de knop. */
body .btn.verwijder-vanaf-knop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* !important op padding en lettergrootte: de basis-stylesheet zet die op elke
   input en wint anders van deze regel, waardoor de datum in de knop afkapte. */
body .btn.verwijder-vanaf-knop input.date-picker.verwijder-vanaf-datum {
    width: 88px;
    height: 20px;
    min-height: 0;
    margin: 0;
    padding: 0 5px !important;
    border: 1px solid var(--pa-gray-200, #e5e7eb);
    border-radius: 3px;
    background-color: #ffffff;
    box-shadow: none;
    font-size: 12px !important;
    line-height: 18px;
    text-align: center;
    color: inherit;
    cursor: pointer;
}
body .btn.verwijder-vanaf-knop input.date-picker.verwijder-vanaf-datum:hover,
body .btn.verwijder-vanaf-knop input.date-picker.verwijder-vanaf-datum:focus {
    border-color: var(--pa-blue, #396BC4);
    outline: none;
}

/* ===== Select2 onder de vaste bovenbalk houden ===== */
/* Bij het openen zet select2 z-index 9999 op het veld en 1051 op de optielijst,
   terwijl de vaste bovenbalk (#pa-top-menu) op 105 zit. Bij scrollen schoof de
   select daardoor over de balk heen. In dialogen mag het wel: een modal vormt zijn
   eigen stapelcontext, dus een hoge z-index daarbinnen komt nooit buiten de modal. */
/* De z-index van het veld zelf staat in start.php (daar stond de 9999). Hier
   alleen de optielijst die select2 los aan de body hangt: die hoort bij een veld
   buiten een dialoog; binnen een dialoog staat hij via dropdownParent in de modal. */
body > .select2-container--open .select2-dropdown {
    z-index: 104;
}

/* Geadviseerde mogelijkheden: vaste kolombreedtes zodat de tabel binnen de
   widget blijft. Zonder vaste layout duwt een lange mogelijkheid-naam de
   datumkolommen buiten de container, die overflow-x verbergt. */
body table.geadviseerde-mogelijkheden-tabel {
    table-layout: fixed;
    width: 100%;
}
body table.geadviseerde-mogelijkheden-tabel td.gm-kolom-naam {
    /* Geen breedte: neemt bij een vaste layout de resterende ruimte. */
    padding-left: 20px;
    color: #666666;
    word-break: break-word;
}
body table.geadviseerde-mogelijkheden-tabel td.gm-kolom-getal {
    width: 70px;
}
body table.geadviseerde-mogelijkheden-tabel td.gm-kolom-bedrag {
    width: 85px;
}
body table.geadviseerde-mogelijkheden-tabel td.gm-kolom-datum {
    width: 90px;
}
/* Icoon en naam horen bij elkaar; de losse marges maakten het gat te breed. */
body table.geadviseerde-mogelijkheden-tabel .gm-status-icoon {
    margin-right: 6px;
}
body table.geadviseerde-mogelijkheden-tabel .gm-percentage {
    margin-right: 6px;
}

/* Arbeidsdeskundig onderzoeken: chevron verticaal centreren in de statusselect.
   De basisregel in start.php zet top:50% op een box die al height:100% is, dus de
   pijl begint halverwege en zakt onder het midden. Zelfde correctie als bij
   .dossiercollextra: box vanaf 0, glyph met eigen hoogte en line-height 1 zodat
   FontAwesome hem binnen de box tekent. */
body select.adOnderzoekStatusSelect + .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    /* -3px zet de chevron op dezelfde optische lijn als de statustekst: die staat
       door de -4px van custom.css al iets hoger, en de FontAwesome-glyph zelf hangt
       binnen zijn em-box een fractie laag. */
    margin-top: -3px !important;
}
body select.adOnderzoekStatusSelect + .select2-container--default .select2-selection--single .select2-selection__arrow b {
    height: auto !important;
}
body select.adOnderzoekStatusSelect + .select2-container--default .select2-selection--single .select2-selection__arrow b:before {
    line-height: 1 !important;
}
/* Iets kleiner dan de standaard 12.8px: de statuswaarde is een label, geen invoer. */
body select.adOnderzoekStatusSelect + .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 11.5px;
}