/*
 * 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-white: #ffffff;
    --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);
    /* Standaardkleuren van het cliënttabje in het dossier, per geslacht */
    --pa-geslacht-man: #ADD8E6;
    --pa-geslacht-vrouw: #FFC0CB;
    --pa-geslacht-x: #ebebeb;
    --pa-geslacht-o: #bdbbbb;
    --pa-geslacht-leeg: #eeeeee;
    --pa-geslacht-anoniem: #bdbbbb;
}

/* ===== 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;
}
/* Sectiekop met filters erin: op een smal scherm vallen de filters op een eigen
   regel onder de titel, in plaats van naast een titel die over twee regels breekt. */
body .pa-sectie-kop-wrap {
    flex-wrap: wrap;
}
body .pa-sectie-kop-filters {
    flex: 1 1 100%;
}
@media (min-width: 768px) {
    body .pa-sectie-kop-filters {
        flex: 0 0 auto;
        margin-left: auto;
    }
}
/* 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;
}
/* Afdelingboom (bovenliggend bedrijf / ... / bedrijf / ... / afdeling) die start.php
   via JavaScript naar #rightTopPlacer rechtsboven verplaatst, dezelfde plek als de
   dossier-/clienttitel. Alles vet; de klikbare bedrijf-/afdelingnodes in primary. */
body #rightTopPlacer .pa-afdeling-titel {
    font-size: 12.8px;
    font-weight: 600;
    color: var(--pa-gray-900);
}
body #rightTopPlacer .pa-afdeling-titel .pa-boom-link {
    cursor: pointer;
    color: var(--pa-primary);
}
/* 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;
}

/* Tijd in de kalender van het periode-veld: één vrij te typen tijdveld per helft
   (pa-timepicker met een keuzelijst als snelkeuze) in plaats van uur- en minutenlijsten,
   zodat elke minuut mogelijk is. De lijsten blijven onzichtbaar bestaan, omdat de picker
   zijn tijd daaruit leest. */
body .daterangepicker .calendar-time select.periode-spiegel {
    display: none !important;
}

body .daterangepicker .calendar-time .periode-kalender-tijdveld {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body .daterangepicker .calendar-time .periode-kalender-tijdveld > i {
    color: var(--pa-gray-400);
}

body .daterangepicker .calendar-time .pa-timepicker-wrapper {
    display: inline-flex;
    align-items: center;
    width: auto;
}

/* Zelfde maten als de keuzelijsten die hier eerder stonden. De !important's zijn nodig:
   start.php en custom.css geven elk tekstveld een binnenruimte, afronding en focusrand
   met !important mee. */
body .daterangepicker .calendar-time .pa-timepicker {
    width: 92px;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--pa-gray-300) !important;
    border-radius: var(--pa-radius-input) !important;
    background: var(--pa-white) !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-align: center;
    transition: border-color 0.3s ease;
}

body .daterangepicker .calendar-time .pa-timepicker:focus {
    border-color: var(--pa-accent, var(--pa-primary)) !important;
}

/* Korte markering als de picker de getypte tijd heeft begrensd (eind niet vóór start,
   binnen de horizon), zodat het verspringen van de waarde niet onopgemerkt blijft. */
body .daterangepicker .calendar-time .pa-timepicker.periode-tijd-begrensd {
    border-color: var(--pa-warning) !important;
}

body .daterangepicker .calendar-time .pa-timepicker.invalid {
    border-color: var(--pa-danger) !important;
}

/* Zelfde opmaak als de overige niet-bewerkbare velden. */
body .daterangepicker .calendar-time .pa-timepicker:disabled {
    background: var(--pa-gray-100) !important;
    color: var(--pa-gray-500);
    cursor: not-allowed;
}

/* De keuzelijst krijgt van pa-timepicker.js de breedte van het veld mee. */
body .daterangepicker .calendar-time .pa-timepicker-dropdown {
    min-width: 92px;
}

/* Zolang een tijdveld de focus heeft of zijn snelkeuzelijst openstaat (240px hoog, 4px
   onder het veld), schuift de knoppenrij omlaag; anders hangt de lijst over Annuleren en
   Toepassen heen en kiest een klik op zo'n knop een tijd uit de lijst. Padding in plaats
   van margin: de rij heeft clear: both, waardoor een marge erboven kan wegvallen. */
body .daterangepicker.periode-tijd-actief .drp-buttons {
    padding-top: 256px;
}

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;
}

/* 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, hoort de hoogte bij de
   overlay en niet meer bij het hoofdmenu. Die overlay staat absoluut binnen de
   slimScroll-wrapper, dus hij duwt de wrapper niet vanzelf op: hoe hoog het menu
   werd hing af van het aantal items in het hoofdmenu, en dat verschilt per
   omgeving en rol. De JS in flexdossier.php zet daarom --pa-submenu-hoogte op de
   inhoud van de overlay; hieronder wordt die tussen een vaste ondergrens en een
   met het venster meeschalende bovengrens gehouden, zodat een lange lijst zoveel
   mogelijk in één keer zichtbaar is zonder het menu buiten beeld te duwen. */
body table.pa-sectie-tabel .dropdown-menu.submenu-open .slimScrollDiv,
body table.pa-sectie-tabel .dropdown-menu.submenu-open .slimmScrollBoxBig{
    height: var(--pa-submenu-hoogte, auto) !important;
    min-height: 250px;
    max-height: min(60vh, 520px);
}
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 > td > b,
body .pa-section-header > td > strong,
body .pa-section-header .pull-left strong,
body .pa-section-header .pull-left b,
body .pa-section-header .text,
body .pa-section-header .text b,
body .pa-section-header label {
    /* Element-titels: donker en (half)vet, in één consistente stijl — NIET grijs. */
    font-size: 12.8px;
    font-weight: 600;
    color: var(--pa-gray-900);
}
/* Kolomkoppen BINNEN een element (dus niet de element-titel) — bv. bij geadviseerde mogelijkheden,
   prognoses, offertes en informatie aanvragen: grijs en niet vet. */
body .pa-section-box thead th,
body .pa-section-box thead td,
body .pa-section-box thead b,
body .pa-section-box .pa-koprij,
body .pa-section-box .pa-koprij td,
body .pa-section-box .pa-koprij b {
    font-weight: 400;
    color: var(--pa-gray-500);
}
/* Status (zoekrichting) en resultaat (sollicitatie activiteiten) staan als keuzelijst in de laatste
   kolom van hun element. Twee dingen worden hier rechtgezet.

   1. De kolom krijgt in beide elementen dezelfde vaste breedte. Zonder die breedte verdeelt de browser
      de ruimte over het aantal kolommen, en omdat het ene element er vier heeft en het andere vijf,
      begon de laatste kolom 32px uit elkaar. Nu starten Status en Resultaat op dezelfde afstand vanaf
      de linkerrand van het element.
   2. Select2 houdt zijn eigen binnenruimte, anders plakt de waarde tegen de rand van het keuzevak. De
      kolomkop krijgt diezelfde ruimte, zodat de kop recht boven de waarde staat. */
body .pa-section-box tr.passendeFunctieKoprij > td:last-child,
body .pa-section-box tr.sollicitatieActiviteitKoprij > td:last-child {
    padding-left: 9px;
}
body .pa-section-box .passendeFunctieStatusSelect + .select2-container .select2-selection__rendered,
body .pa-section-box .sollicitatieActiviteitResultaatSelect + .select2-container .select2-selection__rendered {
    padding-left: 8px;
}
/* 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 op 8px van de rand van het hovervlak, met vaste ademruimte tot de tekst */
body tr.trajecten_tr > td:first-child,
body tr.afspraken_tr > td:first-child {
    width: 29px;
    padding-left: 8px !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; de inrichting kan per dossier type een eigen grootte zetten */
    font-size: var(--pa-client-kaart-font-size, 11px) !important;
}
/* Compacte duur-notatie (3w 5d): de eenheid-letter (w/d/j/u) lichter dan het getal */
.pa-duur-eenheid {
    color: #6b7280;
    font-size: 10px;
    margin-left: 1px;
}
/* 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;
}
/* Gesloten dossier: gedempte kaart zodat in een oogopslag zichtbaar is dat het
   traject niet meer loopt. Het actieve dossier (.rowOver) houdt voorrang. */
body #switcherDiv > div.dossier-gesloten:not(.rowOver),
body #switcherDiv .dossier-wrap.dossier-gesloten:not(.rowOver),
body #switcher2 .dossier-wrap.dossier-gesloten:not(.rowOver) {
    background: var(--pa-gray-100) !important;
    border-color: var(--pa-gray-300) !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;
}

/* ===== Dossierlijsten: uniforme rij-hover =====
   Eén look voor alle elementen (documenten, notities, journaal, trajecten,
   afspraken, vragenlijsten, …): de tint op de cellen in plaats van op de rij,
   zodat de uiteinden afgerond kunnen worden. custom.css zet de tint op de rij
   zelf (.rowOver); een rij-achtergrond kent geen afronding en zou als vierkant
   vlak achter de ronde hoeken blijven hangen — daarom uit. */
body .pa-section-box tr.rowOver {
    background: none;
}
body .pa-section-box tr.rowOver > td {
    background: #dae9ed;
}
body .pa-section-box tr.rowOver > td:first-child,
body tr.trajecten_tr:hover > td:first-child,
body tr.afspraken_tr:hover > td:first-child,
body #journaalDiv table tr[onclick]:hover > td:first-child {
    border-radius: var(--pa-radius-input) 0 0 var(--pa-radius-input);
}
body .pa-section-box tr.rowOver > td:last-child,
body tr.trajecten_tr:hover > td:last-child,
body tr.afspraken_tr:hover > td:last-child {
    border-radius: 0 var(--pa-radius-input) var(--pa-radius-input) 0;
}
/* Journaal: de laatste twee kolommen zijn op breedte 0 gezet; de datumkolom is
   daar het zichtbare einde van de rij en krijgt dus de rechter afronding. */
body #journaalDiv table tr[onclick]:hover > td:nth-child(3) {
    border-radius: 0 var(--pa-radius-input) var(--pa-radius-input) 0;
}
/* Zelfde ademruimte binnen het hovervlak in alle lijsten: het icoon start 8px
   van de linkerrand en de laatste kolom houdt 8px tot de rechterrand. */
body tr.documenten_tr > td:first-child {
    padding-left: 8px;
}
body tr.documenten_tr > td:last-child {
    padding-right: 8px;
}
body #notitiesDiv .styled-table tr > td:last-child {
    padding-right: 8px;
}
body #journaalDiv table tr[onclick] > td:first-child {
    padding-left: 8px;
}

/* ===== 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);
}
/* De placeholderkleur hierboven is alleen bedoeld voor de dichtgeklapte select.
   Windows en Linux tekenen de uitklaplijst zelf en laten de opties de kleur van
   de select erven: met de placeholder actief leken alle keuzes uitgeschakeld.
   De opties krijgen daarom altijd hun eigen leeskleur; macOS tekent de lijst via
   het systeem en werd hier nooit door geraakt. */
body select option {
    color: var(--pa-gray-900);
}
body select option:disabled,
body select[disabled] option {
    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;
}
/* Keuzelijsten in een vragenlijst (wizard, stap-voor-stap en het one-page
   formulier; .uitgebreid_td is de cel van de dropdown-vraag uit renderInputVeld).
   custom.css bevat hier nog de maatvoering van vóór deze skin: 41/42px hoog met
   5px padding op de select2 zelf (.vragenlijst_regulier) of op de tekst
   (.vragenlijst). De hoogte wordt hieronder op de standaard 38px gezet, maar die
   padding bleef staan — de tekstregel van 36px paste dan niet meer in de
   overgebleven 30px inhoud en zakte onderuit het veld. Verticale padding daarom
   op nul, en de tekst met flex centreren zodat de regelhoogte de plaatsing niet
   meer bepaalt. */
body .vragenlijst .select2-container .select2-selection--single,
body .vragenlijst .select2-container--default .select2-selection--single,
body .vragenlijst_regulier .select2-container .select2-selection--single,
body .vragenlijst_regulier .select2-container--default .select2-selection--single,
body .vragenlijst_one_page .select2-container .select2-selection--single,
body .vragenlijst_one_page .select2-container--default .select2-selection--single,
body .uitgebreid_td .select2-container .select2-selection--single,
body .uitgebreid_td .select2-container--default .select2-selection--single {
    height: 38px !important;
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body .vragenlijst .select2-container--default .select2-selection--single .select2-selection__rendered,
body .vragenlijst_regulier .select2-container--default .select2-selection--single .select2-selection__rendered,
body .vragenlijst_one_page .select2-container--default .select2-selection--single .select2-selection__rendered,
body .uitgebreid_td .select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 36px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Zolang select2 nog niet is geïnitialiseerd staat hier een kale select; die
   krijgt dezelfde hoogte met gecentreerde tekst, anders springt de tekst bij
   het laden. De padding moet !important zijn: start.php zet select{padding:5px}
   met !important, wat de tekst binnen de vaste hoogte omlaag zou duwen. */
body .uitgebreid_td select {
    height: 38px;
    line-height: 36px;
    padding-top: 0 !important;
    padding-bottom: 0 !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;
}
/* Tabblad-acties boven secties die zelf een kop met toevoegen-knop hebben (o.a.
   bedrijf-verzekeringen): beyond geeft .widget-buttons een vaste hoogte van 36px,
   waardoor de toevoegen-knop van de eerste sectiekop over deze knoppen schoof.
   Eigen regel met lucht eronder. */
body .widget > .tabbable > .widget-body > .widget-buttons.pa-tab-acties {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    height: auto;
    margin-bottom: 20px;
}
/* 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) ===== */
/* Achtergrond vervagen zolang er een dialoog openstaat, zodat de aandacht op de
   dialoog ligt. De waarde 3px komt overeen met de moderne schermen
   (connect-dashboard, flexibele-rapportage), maar het bereik is hier ruimer:
   daar ligt de blur op een los overlay-element, hier op de backdrop van elke
   legacy dialoog. Bij geneste dialogen vervaagt elke backdrop de laag eronder. */
body .modal-backdrop {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
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;
}
/* Wizard: een venster dat precies het stapvlak vult, van onder de vaste stappenbalk
   tot onderaan, zonder ronde hoeken of schaduw (o.a. het mailcontrolescherm en het
   pdf-voorbeeld daarin). De stappenbalk (#wizard) is 47px hoog: regelhoogte 46px
   plus 1px onderrand; hij ligt boven elke dialoog, dus het venster begint eronder.
   Het iframe vult de body; zet er geen hoogte op. */
body .bootbox.pa-wizard-paneel {
    top: 47px;
    bottom: 0;
    height: auto;
    overflow: hidden;
}
body .bootbox.pa-wizard-paneel .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
}
/* custom.css zet margin-top en border-radius op elke .modal-content met !important */
body .bootbox.pa-wizard-paneel .modal-content {
    height: 100%;
    max-height: none;
    margin-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
}
body .bootbox.pa-wizard-paneel .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0;
    overflow: hidden;
}
body .bootbox.pa-wizard-paneel .modal-body > .bootbox-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
body .bootbox.pa-wizard-paneel .modal-body > .bootbox-body > iframe {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    border: 0;
}
/* Kop van een paneel met eigen titel (pdf-voorbeeld): dezelfde zijmarge en hoogte als de
   kopregel van het mailcontrolescherm (px-8 = 24px, root-lettergrootte 12px), zodat titel
   en kruisje niet verspringen. Het kruisje staat absoluut, zonder de negatieve marge van Bootstrap. */
body .bootbox.pa-wizard-paneel .modal-header {
    padding: 12px 24px;
}
body .bootbox.pa-wizard-paneel .modal-header .bootbox-close-button {
    right: 24px;
    margin-right: 0;
}
/* Reserve-sluitknop zolang het scherm in het paneel nog laadt of niet geladen kon worden;
   zelfde plek en maat als het kruisje in de kopregel van het mailcontrolescherm. */
body .pa-wizard-paneel-sluiten {
    position: absolute;
    top: 10px;
    right: 24px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--pa-radius-btn);
    background: transparent;
    color: var(--pa-gray-500);
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
body .pa-wizard-paneel-sluiten:hover {
    background: var(--pa-gray-100);
    color: var(--pa-gray-900);
}
body .pa-wizard-paneel-sluiten:focus-visible {
    outline: 2px solid var(--pa-primary);
    outline-offset: 2px;
}
@media (max-width: 639px) {
    body .bootbox.pa-wizard-paneel .modal-header {
        padding: 12px 12px;
    }
    body .bootbox.pa-wizard-paneel .modal-header .bootbox-close-button,
    body .pa-wizard-paneel-sluiten {
        right: 12px;
    }
}

/* ===== 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;
}
/* Select2-velden die hun optielijst via dropdownParent in de kaart hangen (o.a.
   uitgeschakelde meldingen/taken in het profiel): zolang de lijst open staat mag
   de kaart niet clippen, anders wordt de lijst onder de kaartrand afgekapt */
body .widget:has(.select2-container--open .select2-dropdown){
    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;
}

/* Dossierlijsten (rijen met .pa-section-box): custom.css klemt de select2 daar op
   max-height 26px en schuift tekst en pijl 4px omhoog — maatvoering van vóór deze
   skin. In de 32px-hoge tabel-select van de skin hing de tekst daardoor boven het
   midden. Terug naar de standaardmaat, zodat de regelhoogte de tekst weer centreert. */
body .pa-section-box .select2-selection {
    max-height: none;
}
body .pa-section-box .select2-selection__rendered,
body .pa-section-box .select2-selection__arrow {
    margin-top: 0;
}
/* Het FontAwesome-chevron tekent zijn inkt net boven het midden van het regelvak;
   1px omlaag zet de pijl optisch in het midden van de 32px-select. De lange
   selector is nodig: de gebouwde bundel zet top:0 met drie klassen. */
body .pa-section-box .select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: relative;
    top: 1px;
}

/* 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;
}
/* Geen eigen padding op de modal-body: de iframe-regels hierboven geven de body
   een grijze achtergrond (--pa-gray-50), die als grijze balk onder de kopregel
   zichtbaar werd zodra er ruimte boven het iframe overbleef. Het formulier in
   het iframe heeft zelf al lucht aan de bovenkant. */
/* De dialoog stond ver naar beneden geduwd waardoor hij onnodig laag opende.
   Hij begint nu 20px onder de vaste stappenbalk van de wizard (47px hoog,
   position: fixed); zonder die 47px verdwijnt de dialoogkop erachter. De
   !important hieronder is nodig om de generieke .modal-content marge
   (30px !important) te overstemmen. */
body .bootbox.bootbox-diagnose .modal-dialog {
    margin-top: 67px;
}
body .bootbox.bootbox-diagnose .modal-content {
    margin-top: 0 !important;
}

/* ===== 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;
    /* Geen eigen inspringing: de tabs en de panelen eronder delen dezelfde
       linker- en rechterrand. */
    padding: 0;
    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;
    /* Gelijk aan de binnenmarge van de lijstrijen: het icoon van een tab staat
       zo boven de iconen in de lijst. */
    padding: 0 12px;
    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;
}
/* Elk paneel begint op dezelfde afstand onder de tabbalk en loopt van rand tot
   rand mee met de tabbalk; de lijsten zelf springen niet nog eens in. */
body .medische_kaart_area.pa-kaart-toevoegmodus .medische-kaart-zijtab-paneel {
    padding: 12px 0 20px;
}

/* 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,
body .medische_kaart_area:not(.pa-kaart-toevoegmodus) #zijtab_documenten{
    display: none;
}

/* Historie: de ingevulde vragenlijsten als rijen in een kaartje. Zelfde opbouw
   als de documentenlijst: een rand, geen schaduw. */
body .vragenlijst-historie-items {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--pa-gray-200);
    border-radius: 8px;
    background-color: #ffffff;
    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-gray-50);
}
/* De marge maakt de stip even breed als het documenticoon (14px), zodat de
   titels in beide tabbladen op dezelfde plek beginnen. */
body .vragenlijst-historie-stip {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin: 0 3px;
    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-400);
    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);
}
/* Lege staat binnen een sectiekaart (tabblad Contracten bij een bedrijf): dezelfde rustige
   grijze tekst, zonder eigen rand omdat de kaart die al geeft. */
body .contracten-leeg {
    padding: 12px 16px;
    font-size: 12px;
    color: var(--pa-gray-500);
}
body .vragenlijst-historie-detail {
    display: none;
}
body .vragenlijst-historie-detail.actief {
    display: block;
}

/* Antwoordenpaneel en geopend document: een omrand kaartje met een rustige kop
   en de inhoud eronder, in dezelfde opbouw als de lijsten. */
body .vragenlijst-antwoorden,
body .documenten-detail-wrap {
    border: 1px solid var(--pa-gray-200);
    border-radius: 8px;
    background-color: #ffffff;
}
/* Een PDF of afbeelding onderaan het document heeft rechte hoeken; zonder
   afknippen steken die buiten de afgeronde rand. */
body .documenten-detail-wrap {
    overflow: hidden;
}
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: 0;
    list-style: none;
}
/* Zelfde maatvoering als een vragenlijst-rij, zodat beide tabbladen gelijk ogen. */
body .documenten-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    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);
}
/* Zelfde signaal als bij de vragenlijsten: de rij kleurt en de pijl wordt
   blauw, de naam zelf blijft gewone tekst. */
body .documenten-item-pijl {
    margin-left: auto;
    align-self: center;
    font-size: 14px;
    color: var(--pa-gray-400);
    transition: color .12s ease;
}
body .documenten-item-open:hover .documenten-item-pijl {
    color: var(--pa-primary);
}
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;
}
/* Terug naar de lijst: in beide tabbladen dezelfde knop, op dezelfde afstand
   boven het geopende kaartje. */
body .documenten-terug,
body .vragenlijst-historie-terug {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--pa-gray-600);
    text-decoration: none;
    transition: color .12s ease, background-color .12s ease;
}
body .documenten-terug:hover,
body .vragenlijst-historie-terug:hover {
    background-color: var(--pa-gray-50);
    color: var(--pa-primary);
    text-decoration: none;
}
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;
}

/* ===== Popovers: overal dezelfde maximale breedte =====
   Zonder begrenzing (custom.css en de gebouwde bundel zetten allebei max-width:100%)
   rekte een lange waarde zoals een locatie-opmerking de popover tot ver buiten de
   agenda uit. De body-prefix is nodig omdat de gebouwde bundel na dit bestand laadt
   met een kale .popover-regel; met een hogere specificiteit wint deze regel toch. */
body .popover {
    max-width: 500px;
}
/* De inhoud is een tabel met label/waarde-cellen. Lange waarden moeten binnen de
   popover doorlopen op de volgende regel in plaats van de tabel op te rekken. */
body .popover .popover-body {
    overflow-wrap: break-word;
}
body .popover .popover-body table {
    width: 100%;
    max-width: 100%;
}
body .popover .popover-body td {
    white-space: normal;
    overflow-wrap: break-word;
    /* Een tabelcel staat standaard verticaal gecentreerd; bij een waarde van meerdere
       regels (zoals een locatie-opmerking) zweefde het label daardoor halverwege.
       Boven uitlijnen zet het label op dezelfde hoogte als de eerste regel. */
    vertical-align: top;
}
/* De waarde kan opgemaakte tekst bevatten; de alinea-marges eromheen duwen de eerste
   regel anders naar beneden en laten onderaan een lege ruimte staan. */
body .popover .popover-body td > p:first-child {
    margin-top: 0;
}
body .popover .popover-body td > p:last-child {
    margin-bottom: 0;
}

/* ===== Legacy keuzerondjes: gevulde stip in het midden =====
   Het zichtbare rondje is niet de input zelf (die staat buiten beeld) maar het
   ::before van de bijbehorende span.text uit beyond.css. De gevulde stip was daar
   een FontAwesome-glyph die als letter in een regel van 17px werd gezet; met de
   huidige Font Awesome-versie wijken de glyph-maten af, waardoor de stip links en
   boven het midden van het rondje uitkwam. De stip wordt daarom getekend in plaats
   van als letter gezet: dan staat hij altijd exact in het midden. currentColor
   houdt de bestaande kleuren aan, ook bij varianten die de stip wit maken. */
body input[type=radio]:checked ~ .text::before {
    content: "\a0";
    background-image: radial-gradient(circle at 50% 50%, currentColor 0 4px, rgba(0, 0, 0, 0) 4px);
}

/* ===== Verzuimpatronen (bedrijfstabblad) ===== */
/* Lichte tinten van de signaalkleuren voor labels en accenten */
:root {
    --pa-danger-50: #fae3df;
    --pa-warning-50: #fdf1d1;
    --pa-success-50: #e0f0dc;
}

/* Kaart met kop: een sectie binnen een tabblad. Herbruikbaar op elke legacy-pagina die
   meerdere blokken onder elkaar toont (heatmap, tabel, samenvatting). */
body .pa-kaart {
    background: #fff;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    box-shadow: var(--pa-shadow-card);
    margin-bottom: 15px;
    overflow: hidden;
}
body .pa-kaart-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 15px;
    background: var(--pa-gray-50);
    border-bottom: 1px solid var(--pa-gray-200);
}
body .pa-kaart-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12.8px;
    font-weight: 600;
    color: var(--pa-gray-900);
}
body .pa-kaart-titel > .fa {
    color: var(--pa-gray-400);
}
body .pa-kaart-inhoud {
    padding: 15px;
}
/* De kernzin van een kaart: net boven de bodytekst, onder de kaarttitel in gewicht */
body .pa-kaart-lead {
    font-size: 12.8px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pa-gray-900);
}
body .pa-kaart-voet {
    padding: 10px 15px;
    border-top: 1px solid var(--pa-gray-200);
    font-size: 11px;
    color: var(--pa-gray-500);
}
body .pa-kaart > .table,
body .pa-kaart > .table-responsive > .table {
    margin-bottom: 0;
}
/* Een klikbaar info-icoon in een kaartkop */
body .pa-kaart-info {
    color: var(--pa-gray-400);
    transition: color .12s ease;
}
body .pa-kaart-info:hover,
body .pa-kaart-info:focus-visible,
body .pa-kaart-info[aria-expanded="true"] {
    color: var(--pa-primary);
}
/* Als knop, zonder de rand en achtergrond die een button standaard krijgt */
body button.pa-kaart-info {
    padding: 0;
    border: 0;
    background: none;
    line-height: inherit;
}
body .pa-kaart-uitleg {
    background: var(--pa-primary-50);
    border-bottom: 1px solid var(--pa-gray-200);
    color: var(--pa-gray-700);
    font-size: 11.5px;
    line-height: 1.5;
}

/* Kerncijfer: kleine kaart met een getal en een label, in een rij van gelijke tegels */
body .pa-kerncijfer {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 10px 15px;
    background: #fff;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    box-shadow: var(--pa-shadow-card);
}
body .pa-kerncijfer-icoon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--pa-gray-100);
    color: var(--pa-gray-500);
    font-size: 14px;
}
body .pa-kerncijfer-waarde {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--pa-gray-900);
    font-variant-numeric: tabular-nums;
}
body .pa-kerncijfer-label {
    font-size: 11px;
    line-height: 1.2;
    color: var(--pa-gray-500);
    hyphens: auto;
}
body .pa-kerncijfer-accent .pa-kerncijfer-icoon {
    background: var(--pa-danger-50);
    color: var(--pa-danger-dark);
}
body .pa-kerncijfer-accent .pa-kerncijfer-waarde {
    color: var(--pa-danger-dark);
}
/* "Valt op": dezelfde tint als de badge bij een score vanaf de bovengrens, zodat tegel en
   score bij elkaar horen. Rood blijft in de heatmap voor verzuim dat nog loopt. */
body .pa-kerncijfer-let-op .pa-kerncijfer-icoon {
    background: var(--pa-warning-50);
    color: var(--pa-gray-900);
}
/* Een kerncijfer dat een knop is, zet het filter van de tabel eronder. De pijl en de rand bij
   hover laten zien dat je kunt klikken; de actieve tegel hoort bij het gekozen filter. */
body .pa-kerncijfer-knop {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
body .pa-kerncijfer-pijl {
    margin-left: auto;
    color: var(--pa-gray-400);
    font-size: 12px;
    transition: color .12s ease;
}
body .pa-kerncijfer-knop:hover,
body .pa-kerncijfer-knop:focus-visible {
    border-color: var(--pa-primary);
}
body .pa-kerncijfer-knop:hover .pa-kerncijfer-pijl,
body .pa-kerncijfer-knop:focus-visible .pa-kerncijfer-pijl,
body .pa-kerncijfer-actief .pa-kerncijfer-pijl {
    color: var(--pa-primary);
}
body .pa-kerncijfer-actief {
    border-color: var(--pa-primary);
    box-shadow: 0 0 0 1px var(--pa-primary), var(--pa-shadow-card);
}

/* Segmentkeuze: één actieve keuze uit een korte rij, als filter boven een tabel */
body .pa-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    background: var(--pa-gray-100);
    border-radius: 8px;
}
body .pa-segment > a {
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--pa-gray-700);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}
body .pa-segment > a:hover {
    background: #fff;
    color: var(--pa-gray-900);
}
body .pa-segment > a.actief {
    background: #fff;
    color: var(--pa-gray-900);
    font-weight: 600;
    box-shadow: var(--pa-shadow-card);
}
body .pa-segment-aantal {
    margin-left: 3px;
    font-weight: 400;
    color: var(--pa-gray-500);
}

/* Heatmap-cellen: de tint zegt hoeveel verzuim, de balk zegt hoe lang een melding loopt */
body .pa-verzuim-cel {
    text-align: center;
    font-weight: 600;
    color: var(--pa-gray-900);
}
/* Geen zijpadding in de maandcellen, anders breekt de balk tussen twee maanden */
body .table > :not(caption) > * > .pa-verzuim-cel {
    padding-left: 0;
    padding-right: 0;
}
/* De tinten zijn afgeleid van de primaire kleur, zodat de heatmap de partnerkleur volgt;
   de vaste kleur ervoor is de terugval voor browsers zonder color-mix. Bootstrap zet zelf
   een achtergrond en een inset-schaduw (streep/hover) op elke cel, dus hier dezelfde
   specificiteit. */
body .table > :not(caption) > * > .pa-verzuim-kort,
body .pa-verzuim-swatch.pa-verzuim-kort {
    background-color: #d7e1f3;
    background-color: color-mix(in srgb, var(--pa-primary) 20%, #fff);
}
body .table > :not(caption) > * > .pa-verzuim-middel,
body .pa-verzuim-swatch.pa-verzuim-middel {
    background-color: #b0c4e7;
    background-color: color-mix(in srgb, var(--pa-primary) 40%, #fff);
}
body .table > :not(caption) > * > .pa-verzuim-lang,
body .pa-verzuim-swatch.pa-verzuim-lang {
    background-color: #7e9fd9;
    background-color: color-mix(in srgb, var(--pa-primary) 65%, #fff);
}
body .table > :not(caption) > * > .pa-verzuim-kort,
body .table > :not(caption) > * > .pa-verzuim-middel,
body .table > :not(caption) > * > .pa-verzuim-lang {
    box-shadow: none;
}
body .pa-verzuim-balk {
    display: block;
    /* Ook zonder getal even hoog, zoals in een maand waarin een lopende melding geen dagen telt */
    min-height: calc(1.45em + 2px);
    padding: 1px 8px;
    line-height: 1.45;
    /* Neutrale data-inkt: leesbaar bij elke partnerkleur (wit op gray-700 is ruim AA) */
    background: var(--pa-gray-700);
    color: #fff;
}
body .pa-verzuim-balk-start {
    margin-left: 6px;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}
body .pa-verzuim-balk-eind {
    margin-right: 6px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}
/* Een melding die nog loopt, loopt door tot vandaag en eindigt daar plat met een rood
   streepje: de nu-lijn. Rood betekent in de heatmap alleen dat. */
body .pa-verzuim-balk-lopend {
    margin-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: inset -3px 0 0 var(--pa-danger);
}
/* Kop boven de groep medewerkers zonder verzuim in de heatmap */
body .table > tbody > .pa-verzuim-groepkop > th {
    padding: 4px 8px;
    background-color: var(--pa-gray-50);
    box-shadow: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--pa-gray-500);
}
/* Het vinkje voor de medewerkers zonder verzuim in de kaartkop */
body .pa-verzuim-zonder-keuze {
    font-size: 11px;
    cursor: pointer;
}
/* Legenda-blokjes onder de heatmap */
body .pa-verzuim-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border-radius: 3px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    vertical-align: -2px;
}
body .pa-verzuim-swatch.pa-verzuim-balk {
    width: 22px;
    height: 10px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    vertical-align: -1px;
}
body .pa-verzuim-swatch.pa-verzuim-balk.pa-verzuim-balk-lopend {
    border-radius: 999px 0 0 999px;
}

/* Rij met kerncijfers: de tegels vullen de breedte altijd helemaal, hoeveel het
   er ook zijn. Een vast kolomraster laat bij vijf tegels een gat vallen zodra er
   nog maar drie naast elkaar passen. */
body .pa-kerncijfer-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
body .pa-kerncijfer-rij > * {
    flex: 1 1 168px;
    min-width: 0;
}
body .pa-kerncijfer-eenheid {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--pa-gray-500);
}

/* Een tabel die breder is dan de kaart. De schaduw rechts verschijnt alleen zolang
   er nog iets te scrollen valt: de witte laag schuift mee met de inhoud
   (background-attachment: local) en dekt de schaduw af zodra je aan het eind bent. */
body .pa-tabel-scroll {
    background:
        linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)) right center,
        radial-gradient(farthest-side at 100% 50%, rgba(17, 24, 39, .14), rgba(17, 24, 39, 0)) right center;
    background-repeat: no-repeat;
    background-size: 32px 100%, 14px 100%;
    background-attachment: local, scroll;
}

/* De eerste kolom blijft staan bij horizontaal scrollen, zodat je blijft zien
   wiens rij je leest. Bootstrap zet de streep- en hoverkleur met een inset-schaduw
   op de cel zelf, dus een vaste kolom heeft een eigen achtergrond nodig. */
body .table > :not(caption) > * > .pa-kolom-vast {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
    box-shadow: 1px 0 0 var(--pa-gray-200);
}
body .table-hover > tbody > tr:hover > .pa-kolom-vast {
    background-color: var(--pa-gray-50);
}

/* Hetzelfde voor de actiekolom aan de rechterkant: de knop en het menu met de taak
   blijven in beeld, ook als de tabel breder is dan de kaart. Een geopend menu komt
   boven de actiecel van de volgende rijen te liggen. */
body .table > :not(caption) > * > .pa-kolom-vast-rechts {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: #fff;
    box-shadow: -1px 0 0 var(--pa-gray-200);
}
body .table-hover > tbody > tr:hover > .pa-kolom-vast-rechts {
    background-color: var(--pa-gray-50);
}
body .table > :not(caption) > * > .pa-kolom-vast-rechts:has(.dropdown-menu.show) {
    z-index: 3;
}

/* Signaalcel in de medewerkerstabel: krijgt genoeg breedte om een korte zin op
   een of twee regels te houden; de knop- en badgecellen claimen anders alle ruimte
   en de tekst valt in losse woorden uiteen. */
body .table > :not(caption) > * > .pa-cel-signaal {
    min-width: 136px;
}
/* Vanaf een breed scherm past een korte zin op een regel; op tablet zou dezelfde
   breedte de actieknop buiten de kaart duwen. */
@media (min-width: 992px) {
    body .table > :not(caption) > * > .pa-cel-signaal {
        min-width: 184px;
    }
}

/* Lege staat in een kaart of tabel */
body .pa-leeg {
    padding: 24px 15px;
    text-align: center;
    font-size: 12px;
    color: var(--pa-gray-500);
}
body .pa-leeg > .fa {
    display: block;
    margin-bottom: 6px;
    font-size: 22px;
    color: var(--pa-gray-300);
}

/* Laadstatus: het paneel blijft staan maar wordt lichter en is even niet klikbaar */
body .pa-laadt {
    opacity: .5;
    pointer-events: none;
    transition: opacity .12s ease;
}

/* Acties rechts in een kaartkop (filters, zoekveld); onder 768px onder de titel */
body .pa-kaart-kop-acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
@media (max-width: 767.98px) {
    body .pa-kaart-kop-acties {
        flex: 1 1 100%;
        margin-left: 0;
    }
}
/* Zoekveld in een kaartkop, compact met een loepje. De app zet op elk invoerveld een
   hoogte en padding met !important, daarom hier ook. */
body .pa-zoek {
    position: relative;
}
body .pa-zoek > .fa {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pa-gray-400);
    pointer-events: none;
}
body .pa-zoek > .form-control {
    width: 200px;
    height: 28px !important;
    min-height: 0 !important;
    padding: 2px 8px 2px 26px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border: 1px solid var(--pa-gray-300) !important;
    border-radius: var(--pa-radius-input) !important;
}
/* Paginering en uitgeschakelde stappen in een segmentkeuze */
body .pa-segment > a.pa-segment-uit {
    opacity: .45;
    pointer-events: none;
}
body .pa-segment-stip {
    padding: 3px 4px;
    font-size: 11px;
    color: var(--pa-gray-500);
}

/* Compacte actieknop in een tabelrij: past bij 12px tabeltekst */
body .pa-knop-compact,
body .pa-knop-compact.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}
body .pa-knop-compact > .fa {
    font-size: 11px;
}
/* Vaste breedte: alle actieknoppen in een kolom even breed, zonder de kolom te vullen */
body .pa-knop-vast {
    flex: 0 0 172px;
    width: 172px;
    justify-content: flex-start;
    padding-left: 12px;
}

/* Kebab-knop (meer acties) in een tabelrij */
body .pa-kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--pa-gray-500);
    transition: background-color .12s ease, color .12s ease;
}
body .pa-kebab:hover,
body .pa-kebab[aria-expanded="true"] {
    background: var(--pa-gray-100);
    color: var(--pa-gray-900);
}

/* Zichtbare focus voor toetsenbordgebruik binnen het verzuimpatronen-paneel */
body .pa-verzuimpatronen .btn:focus-visible,
body .pa-verzuimpatronen button:focus-visible,
body .pa-verzuimpatronen a:focus-visible,
body .pa-verzuimpatronen .form-check-input:focus-visible {
    outline: 2px solid var(--pa-gray-900);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--pa-primary-ring);
}
/* Zachte statuslabels: lichte tint met donkere tekst, rustiger dan een gevulde badge */
body .pa-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
body .pa-badge-lopend {
    background: var(--pa-danger-50);
    color: var(--pa-gray-900);
}
body .pa-badge-let-op {
    background: var(--pa-warning-50);
    color: var(--pa-gray-900);
}
body .pa-badge-hersteld {
    background: var(--pa-warning-50);
    color: var(--pa-gray-900);
}
body .pa-badge-werkend {
    background: var(--pa-gray-100);
    color: var(--pa-gray-700);
}
body .pa-badge-geen-verzuim {
    background: var(--pa-success-50);
    color: var(--pa-gray-900);
}
body .pa-badge-uit-dienst {
    background: var(--pa-gray-100);
    color: var(--pa-gray-700);
}

/* ===== Verzuimpatroon (dossiertabblad Statistiek) ===== */
/* "Dit ben jij": de eigen kolom in de vergelijking en de eigen rij in de heatmap */
body .table > :not(caption) > * > .pa-cel-eigen {
    background-color: var(--pa-gray-50);
    font-weight: 600;
    box-shadow: none;
}
body .pa-rij-eigen > td {
    border-bottom: 2px solid var(--pa-gray-200);
}
/* Getallen rechts uitgelijnd en tabulair, zodat kolommen te vergelijken zijn */
body .table > :not(caption) > * > .pa-cel-getal {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body .pa-verschil {
    color: var(--pa-gray-700);
}
/* Kerncijfertabel: een maat groter dan de standaardtabel, zodat de getallen op afstand leesbaar zijn */
body .pa-tabel-groot > :not(caption) > * > * {
    font-size: 14px;
}
body .pa-tabel-groot > thead > tr > th {
    font-size: 13px;
}
/* Jaarkalender: per maand één rij met iedere dag van die maand. Hoe ziek iemand is, is
   de hoogte van de vulling en geen grijstint, anders valt deels aan het werk samen met
   de lichtere weekenden. */
body .pa-kalender-samenvatting {
    margin: 0 0 10px;
    font-size: 12.8px;
    color: var(--pa-gray-700);
}
body .pa-kalender-samenvatting > strong {
    color: var(--pa-gray-900);
}
body .pa-kalender {
    min-width: 720px;
}
body .pa-kalender-rij {
    display: grid;
    grid-template-columns: 40px repeat(31, minmax(0, 1fr)) 48px;
    gap: 2px;
    margin-bottom: 2px;
}
body .pa-kalender-kopregel {
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--pa-gray-200);
}
body .pa-kalender-nr {
    font-size: 10px;
    color: var(--pa-gray-500);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
body .pa-kalender-maand {
    font-size: 11px;
    line-height: 20px;
    color: var(--pa-gray-700);
}
body .pa-kalender-totaal {
    font-size: 11px;
    line-height: 20px;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--pa-gray-900);
}
body .pa-kalender-kopregel > .pa-kalender-totaal {
    font-size: 10px;
    line-height: inherit;
    font-weight: 400;
    color: var(--pa-gray-500);
}
body .pa-kalender-totaal.pa-kalender-nul {
    font-weight: 400;
    color: var(--pa-gray-500);
}
body .pa-kalender-dag {
    position: relative;
    height: 20px;
    background: var(--pa-gray-200);
    border-radius: 2px;
    overflow: hidden;
}
body .pa-kalender-dag.pa-kalender-weekend {
    background: var(--pa-gray-100);
}
body .pa-kalender-dag.pa-kalender-geen {
    background: transparent;
}
body .pa-kalender-dag.pa-kalender-later {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pa-gray-200);
}
body .pa-kalender-dag.pa-kalender-ziek::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: var(--pa-primary);
}
body .pa-kalender-dag.pa-kalender-vul-75::before {
    height: 75%;
}
body .pa-kalender-dag.pa-kalender-vul-50::before {
    height: 50%;
}
body .pa-kalender-dag.pa-kalender-vul-25::before {
    height: 25%;
}
body .pa-kalender-dag.pa-kalender-ziek.pa-kalender-weekend::before {
    opacity: .4;
}
/* Eerste ziektedag: een wit stipje onder in de vulling */
body .pa-kalender-dag.pa-kalender-start::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: #fff;
}
/* Rood staat op dit scherm voor een ziekmelding die nog loopt; vandaag krijgt daarom een donkere rand */
body .pa-kalender-dag.pa-kalender-vandaag {
    outline: 2px solid var(--pa-gray-900);
    outline-offset: -2px;
}
/* Hetzelfde dagvakje, klein, als voorbeeld in de legenda */
body .pa-kalender-dag.pa-kalender-voorbeeld {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -2px;
}
body .pa-kalender-voorbeeld.pa-kalender-start::after {
    bottom: 2px;
    width: 3px;
    height: 3px;
    margin-left: -1.5px;
}
/* Het weekendvakje in de legenda krijgt een randje, anders verdwijnt het tegen het wit */
body .pa-kalender-voorbeeld.pa-kalender-weekend {
    box-shadow: inset 0 0 0 1px var(--pa-gray-200);
}
/* Eerste ziektedag per weekdag: de zeven weekdagen naast elkaar over de hele breedte, per
   weekdag één blokje per ziekmelding. De ziekmeldingen uit het gekozen jaar zijn vol
   gekleurd, die uit andere jaren lichter. */
body .pa-kalender-weekdagen-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin-bottom: 8px;
}
body .pa-kalender-weekdagen-titel {
    font-size: 12.8px;
    font-weight: 600;
    color: var(--pa-gray-900);
}
body .pa-kalender-weekdagen-kop > .pa-kalender-samenvatting {
    margin: 0;
}
body .pa-kalender-weekdag-raster {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}
body .pa-kalender-weekdag-vak {
    padding: 6px 8px 8px;
    border-radius: 4px;
    background: var(--pa-gray-50);
}
body .pa-kalender-weekdag-vak-kop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
body .pa-kalender-blokken {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    min-height: 16px;
}
body .pa-kalender-blok {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: var(--pa-primary);
    opacity: .35;
}
body .pa-kalender-blok.pa-kalender-blok-jaar {
    opacity: 1;
}
body .pa-kalender-blok.pa-kalender-voorbeeld {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -2px;
}
body .pa-kalender-weekdagen-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-left: auto;
    font-size: 11px;
    color: var(--pa-gray-500);
}
/* Op een smal scherm passen zeven vakken niet naast elkaar; dan vier per regel */
@media (max-width: 575px) {
    body .pa-kalender-weekdag-raster {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
/* ===== Ziekmelden in stappen =====
   Het scherm "nieuw dossier" krijgt met wizard=1 een schil van drie stappen om
   dezelfde velden heen. De maten volgen een raster van 8 pixels (8/16/24/32) en
   de kleuren en de hoeken komen uit de tokens bovenaan dit bestand. */
body .pa-zm {
    max-width: 960px;
    margin: 0 auto;
    /* Ruimte onder de knoppenrij: rechtsonder zweeft de servicedeskknop, die
       anders over de primaire knop heen valt. */
    padding-bottom: 32px;
}
body .pa-zm-stap {
    display: none;
}
body .pa-zm-stap.pa-zm-actief {
    display: block;
}
/* Velden die de wizard zelf afhandelt, zoals de oorspronkelijke client-select */
body .pa-zm-verborgen {
    display: none;
}

/* Stappenbalk bovenaan: nummer, naam en een lijn naar de volgende stap */
body .pa-zm-stappen {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 8px 32px;
}
body .pa-zm-stappen-item {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}
body .pa-zm-stappen-bol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--pa-gray-300);
    color: var(--pa-gray-700);
    font-size: 16px;
    font-weight: bold;
    flex: 0 0 40px;
}
body .pa-zm-stappen-naam {
    font-size: 15px;
    line-height: 24px;
    color: var(--pa-gray-500);
}
body .pa-zm-stappen-item.pa-zm-actief .pa-zm-stappen-bol,
body .pa-zm-stappen-item.pa-zm-gedaan .pa-zm-stappen-bol {
    background-color: var(--pa-primary);
    color: #ffffff;
}
body .pa-zm-stappen-item.pa-zm-actief .pa-zm-stappen-naam {
    color: var(--pa-gray-900);
    font-weight: bold;
}
body .pa-zm-stappen-item.pa-zm-gedaan .pa-zm-stappen-naam {
    color: var(--pa-gray-900);
}
body .pa-zm-stappen-lijn {
    height: 3px;
    border-radius: 2px;
    flex: 1 1 auto;
    background-color: var(--pa-gray-300);
    min-width: 16px;
}
/* De lijn achter een afgeronde stap kleurt mee, zodat je in één oogopslag ziet
   hoe ver je bent. */
body .pa-zm-stappen-item.pa-zm-gedaan + .pa-zm-stappen-lijn {
    background-color: var(--pa-primary);
}

/* Kaart: witte bak met rand, gebruikt voor iedere stap en voor de bevestiging */
body .pa-zm-kaart {
    background-color: #ffffff;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    padding: 24px;
    margin-bottom: 16px;
}
body .pa-zm-kaart-titel {
    font-size: 20px;
    line-height: 28px;
    font-weight: bold;
    color: var(--pa-gray-900);
    margin-bottom: 8px;
}
body .pa-zm-kaart-uitleg {
    color: var(--pa-gray-500);
    margin-bottom: 24px;
}

/* Icoon voor de kop van stap 1; volgt de partnerkleur uit de labeling. */
body .pa-zm-titel-icoon {
    margin-right: 8px;
    font-size: 16px;
    color: var(--pa-primary);
}

/* Beginscherm van stap 1: de vraag en het zoekveld staan in het midden van de
   kaart. Zodra er gezocht is schuift alles naar boven en komen de resultaten
   eronder te staan. */
body .pa-zm-stap.pa-zm-start .pa-zm-kaart {
    padding: 64px 24px;
    text-align: center;
}
body .pa-zm-stap.pa-zm-start .pa-zm-kaart-titel {
    font-size: 24px;
    line-height: 32px;
}
body .pa-zm-stap.pa-zm-start .pa-zm-kaart-uitleg {
    margin-bottom: 32px;
}
body .pa-zm-stap.pa-zm-start .pa-zm-zoekbalk {
    max-width: 640px;
    margin: 0 auto 32px;
}
body .pa-zm-stap.pa-zm-start .pa-zm-titel-icoon {
    font-size: 20px;
}

/* Zoekbalk in stap 1 */
body .pa-zm-zoekbalk {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
}
body .pa-zm-zoekveld {
    flex: 1 1 320px;
    min-width: 240px;
}
/* Het zoekicoon staat links in het veld; de basisregel voor .input-icon zet het
   rechts, dus dat wordt hier expliciet teruggedraaid. */
body .pa-zm-zoekveld > i.fa-search {
    right: auto;
    left: 16px;
    font-size: 14px;
    color: var(--pa-gray-500);
}
body .pa-zm-zoekveld > .form-control {
    min-height: 40px;
    height: 40px;
    /* !important: custom.css zet een eigen padding op tekstvelden; zonder deze
       regel loopt de tekst door het zoekicoon heen. */
    padding: 8px 16px 8px 40px !important;
    border-radius: var(--pa-radius-input) !important;
    border-color: var(--pa-gray-300);
    font-size: 14px;
}
/* Regel in de zoekresultaten en de kaart van de gekozen medewerker */
/* Zoekresultaat: een doorlopende lijst met scheidingslijnen, geen losse kaartjes.
   Zo blijven meer medewerkers tegelijk in beeld en oogt het scherm rustiger. */
body .pa-zm-medewerker {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--pa-gray-200);
    padding: 8px;
    color: var(--pa-gray-900);
}
body a.pa-zm-medewerker:hover {
    background-color: var(--pa-gray-50);
    color: var(--pa-gray-900);
    text-decoration: none;
}
body .pa-zm-medewerker-gekozen {
    background-color: var(--pa-gray-50);
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    padding: 16px;
    margin-bottom: 16px;
}
body .pa-zm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background-color: var(--pa-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
}
body .pa-zm-medewerker-gegevens {
    flex: 1 1 auto;
    min-width: 0;
}
body .pa-zm-medewerker-naam {
    display: block;
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;
    color: var(--pa-gray-900);
}
body .pa-zm-medewerker-meta {
    display: block;
    font-size: 12.8px;
    line-height: 20px;
    color: var(--pa-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
}
body .pa-zm-medewerker-pijl {
    color: var(--pa-gray-300);
    font-size: 16px;
    flex: 0 0 auto;
    margin-right: 8px;
}
/* Het rondje krijgt de kleur van het cliënttabje in het dossier. Een eigen kleur
   uit de inrichting van het dossiertype staat in een regel op de pagina zelf en
   gaat hier vóór. */
body .pa-zm-avatar.pa-zm-avatar-geslacht-m {
    background-color: var(--pa-geslacht-man);
    color: var(--pa-gray-900);
}
body .pa-zm-avatar.pa-zm-avatar-geslacht-v {
    background-color: var(--pa-geslacht-vrouw);
    color: var(--pa-gray-900);
}
body .pa-zm-avatar.pa-zm-avatar-geslacht-x {
    background-color: var(--pa-geslacht-x);
    color: var(--pa-gray-900);
}
body .pa-zm-avatar.pa-zm-avatar-geslacht-o {
    background-color: var(--pa-geslacht-o);
    color: var(--pa-gray-900);
}
body .pa-zm-avatar.pa-zm-avatar-geslacht-leeg {
    background-color: var(--pa-geslacht-leeg);
    color: var(--pa-gray-900);
}
body .pa-zm-avatar.pa-zm-avatar-geslacht-anoniem {
    background-color: var(--pa-geslacht-anoniem);
    color: var(--pa-gray-900);
}
/* De gekozen medewerker staat groter in beeld dan een regel uit de zoeklijst */
body .pa-zm-medewerker-gekozen .pa-zm-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}
body .pa-zm-medewerker-gekozen .pa-zm-medewerker-naam {
    font-size: 16px;
}

/* Melding in plaats van een lijst: zoeken, niets gevonden. Eén regel op de plek
   waar anders de eerste medewerker staat, zodat de kaart niet opspringt. */
body .pa-zm-leeg {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--pa-gray-500);
    padding: 16px 0 8px;
}
body .pa-zm-leeg-icoon {
    color: var(--pa-gray-400);
    font-size: 14px;
}
body .pa-zm-leeg-kop {
    font-size: 14px;
    line-height: 24px;
    font-weight: bold;
    color: var(--pa-gray-700);
}
body .pa-zm-leeg-tekst {
    font-size: 14px;
    line-height: 24px;
}
body .pa-zm-leeg-tekst:empty {
    display: none;
}

/* Toelichting bij een keuze, bijvoorbeeld bij een ongeval */
body .pa-zm-toelichting {
    display: flex;
    gap: 8px;
    background-color: var(--pa-gray-50);
    border-radius: var(--pa-radius-card);
    padding: 8px 16px;
    color: var(--pa-gray-500);
    margin-top: 8px;
}

/* Knoppenrij onderaan een stap */
body .pa-zm-acties {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    /* Scheidingslijn boven de knoppenrij: die sluit het blok af zonder extra vlak. */
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--pa-gray-200);
}
body .pa-zm-acties .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: var(--pa-radius-btn);
    font-size: 14px;
}
body .pa-zm-icoon-links {
    margin-right: 8px;
}
body .pa-zm-icoon-rechts {
    margin-left: 8px;
}
/* Binnen een knoppenrij regelt de gap de afstand; anders staat het icoon dubbel
   ver van de tekst. */
body .pa-zm-acties .pa-zm-icoon-links,
body .pa-zm-acties .pa-zm-icoon-rechts {
    margin: 0;
}
body .pa-zm-acties-rechts {
    margin-left: auto;
}

/* Samenvatting in stap 3: twee kolommen met label en waarde */
body .pa-zm-samenvatting {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    /* Elk blok is zo hoog als zijn eigen inhoud */
    align-items: start;
}
body .pa-zm-samenvatting-blok {
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    padding: 16px 24px 24px;
    min-width: 0;
}
/* Zonder gekoppelde vragenlijst is er een blok; dat vult de breedte en zet de
   regels zelf in twee kolommen, zodat het beeld gelijk blijft. */
body .pa-zm-samenvatting-blok:only-child {
    grid-column: 1 / -1;
}
body .pa-zm-samenvatting-blok:only-child .pa-zm-samenvatting-regel {
    flex: 1 1 calc(50% - 16px);
    max-width: calc(50% - 16px);
}
body .pa-zm-samenvatting-kop {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--pa-gray-900);
    margin-bottom: 16px;
}
/* De regels staan onder elkaar; alleen gegevens die bij elkaar horen, zoals het
   percentage en de uren, delen een regel. */
body .pa-zm-samenvatting-regels {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
body .pa-zm-samenvatting-regel {
    display: flex;
    gap: 8px;
    flex: 1 1 100%;
    min-width: 0;
}
body .pa-zm-samenvatting-half {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
}
body .pa-zm-samenvatting-icoon {
    flex: 0 0 16px;
    width: 16px;
    color: var(--pa-gray-500);
    line-height: 20px;
    text-align: center;
}
body .pa-zm-samenvatting-tekst {
    min-width: 0;
}
/* Het label staat licht en de waarde eronder vet: zo lees je in een oogopslag wat
   je verstuurt, precies zoals in het ontwerp. */
body .pa-zm-samenvatting-label {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--pa-gray-500);
    line-height: 22px;
}
body .pa-zm-samenvatting-waarde {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--pa-gray-900);
    line-height: 22px;
    word-break: break-word;
}
@media (max-width: 767px) {
    body .pa-zm-samenvatting {
        grid-template-columns: 1fr;
    }
    body .pa-zm-samenvatting-blok:only-child .pa-zm-samenvatting-regel,
    body .pa-zm-samenvatting-half {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Bevestiging na het versturen */
body .pa-zm-bevestiging {
    text-align: center;
    padding: 32px 24px;
}
body .pa-zm-bevestiging-vinkje {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 50%;
    background-color: var(--pa-success);
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 24px;
}
body .pa-zm-bevestiging-titel {
    font-size: 24px;
    font-weight: bold;
    color: var(--pa-gray-900);
    margin-bottom: 8px;
}
body .pa-zm-bevestiging-tekst {
    color: var(--pa-gray-500);
    margin-bottom: 24px;
}
/* De kerngegevens naast elkaar, langere gegevens op een eigen regel eronder. */
body .pa-zm-bevestiging-gegevens {
    display: grid;
    /* De kolommen verdelen de ruimte over het aantal gegevens dat er is: bij twee
       velden blijft een e-mailadres zo op één regel staan. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px 24px;
    /* Even breed als het vlak erboven; anders lijkt dit blok smaller. */
    max-width: 640px;
    margin: 0 auto 32px;
    text-align: left;
    background-color: var(--pa-gray-50);
    border-radius: var(--pa-radius-card);
    padding: 24px;
}
body .pa-zm-bevestiging-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
body .pa-zm-bevestiging-breed {
    grid-column: 1 / -1;
}
@media (max-width: 575px) {
    body .pa-zm-bevestiging-gegevens {
        grid-template-columns: minmax(0, 1fr);
    }
}
body .pa-zm-bevestiging-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--pa-gray-500);
    white-space: nowrap;
}
body .pa-zm-bevestiging-label i {
    width: 16px;
    margin-right: 8px;
    text-align: center;
}
body .pa-zm-bevestiging-waarde {
    font-size: 14px;
    font-weight: 600;
    color: var(--pa-gray-900);
    word-break: break-word;
    /* Inspringen tot onder de tekst van het label: het icoon is 16px breed met
       8px ruimte erachter. */
    padding-left: 24px;
}
body .pa-zm-bevestiging-knoppen .btn.btnCustPad {
    padding: 8px 16px;
}
body .pa-zm-bevestiging-knoppen {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===== Ziekmelden in stappen: indeling van stap 2 =====
   In de wizard staat het formulier in een brede kolom, met de velden in een
   raster van twee. De gegevens van de medewerker staan uitklapbaar onder de
   kaart, zodat er niets verdwijnt maar het formulier wel de ruimte krijgt. */
body .pa-zm-widget {
    border: 0;
    box-shadow: none;
    background-color: transparent;
}
/* Ook de witte achtergrond eraf: de kaarten in de wizard zijn zelf de vlakken.
   !important omdat de basisopmaak van widget en widget-body die kleur vastzet. */
body .pa-zm-widget > .widget-body,
body .pa-zm-widget .widget-body > form.widget {
    padding: 0;
    border: 0;
    background-color: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
/* ===== Indeling van de velden in stap 2 =====
   De velden staan in twee blokken: de gegevens van de ziekmelding zelf en alles
   rond een ongeval. Die blokken worden bij het openen van stap 2 gevuld met de
   bestaande velden; de rijen van het oude formulier blijven leeg achter. */
/* De blokken staan naast elkaar in twee kolommen in plaats van als balken over
   de volle breedte. Ze beginnen bovenaan, dus een kort blok laat geen lege
   ruimte achter. */
body .pa-zm #formulier0 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    /* Zolang de overige velden dicht staan, lopen de kolommen even ver door; dat
       is het scherm waar je mee begint. Klap je ze open, dan groeit alleen het
       blok waar de velden bij horen en blijft de kolom ernaast staan. */
    align-items: start;
}
body .pa-zm.pa-zm-extra-verborgen #formulier0 {
    align-items: stretch;
}
/* Een blok dat over beide kolommen loopt, zoals de gegevens van een ongeval. */
body .pa-zm .pa-zm-sectie-breed {
    grid-column: 1 / -1;
}
/* De rechterkolom houdt vangnet en ongeval bij elkaar; ze sluiten op elkaar aan
   en houden hun eigen hoogte, los van het blok ernaast. */
body .pa-zm .pa-zm-kolom {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (max-width: 991px) {
    body .pa-zm #formulier0 {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* !important omdat de row- en d-flex-klassen van bootstrap zelf ook !important
   gebruiken voor display. */
body .pa-zm .pa-zm-leeggehaald {
    display: none !important;
}
/* Elk onderwerp staat in een eigen vlak: dan is meteen duidelijk welke velden
   bij elkaar horen, en waar de velden thuishoren die pas na een keuze
   verschijnen. */
body .pa-zm .pa-zm-sectie {
    background-color: var(--pa-gray-50);
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    padding: 16px;
}
/* De vraag staat als kop van het blok; het label boven de keuzelijst mag weg. */
body .pa-zm #zmSectieVangnet #zmVangnetDetails > b {
    display: none;
}
/* De keuzelijst hoort bij de vraag erboven. */
body .pa-zm #zmVangnetDetails {
    margin-top: 16px;
}
body .pa-zm .pa-zm-sectie-kop {
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    color: var(--pa-gray-900);
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--pa-gray-300);
}
/* Twee velden naast elkaar; het label staat boven het veld. Groeit een blok
   doordat je een keuze maakt, dan blijft het veld ernaast staan. */
body .pa-zm .pa-zm-sectie-raster {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 24px;
}
body .pa-zm .pa-zm-sectie-raster > div {
    display: flex;
    flex-direction: column;
    /* Twee velden naast elkaar zolang ze allebei 240 px halen; past er maar één
       op de regel, dan vult die de hele breedte van het blok. */
    flex: 1 1 calc(50% - 12px);
    min-width: 240px;
    width: auto !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}
/* De vragen die bij een ongevalstype horen, staan onder de keuze over de volle
   breedte van het vlak. */
body .pa-zm .pa-zm-sectie-raster > .pa-zm-ongeval-breed {
    flex: 1 1 100%;
    max-width: 100% !important;
}
/* Op een smal scherm past er maar één veld naast elkaar. */
@media (max-width: 767px) {
    body .pa-zm .pa-zm-sectie-raster > div {
        flex-basis: 100%;
        max-width: 100% !important;
    }
}
/* De keuzelijst met het soort ongeval blijft op halve breedte, ook al staat hij
   als enige op de eerste regel van het brede blok. */
body .pa-zm #zmOngevalDetails {
    flex-grow: 0;
}
body .pa-zm #formulier0 .form-group {
    width: 100% !important;
    max-width: none !important;
}
body .pa-zm #formulier0 .form-group > .input-icon {
    width: 100% !important;
}
/* Verloop en uren delen samen een plaats op de regel en staan naast elkaar */
body .pa-zm #verloopDiv {
    flex-direction: row;
    gap: 16px !important;
}
body .pa-zm #verloopDiv > div {
    flex: 1 1 0;
    min-width: 0;
}

/* De gekoppelde vragenlijst is een eigen sectie onder de velden */
body .pa-zm #vragenlijstDiv {
    --bs-gutter-x: 0;
    margin: 24px 0 0;
    border-top: 1px solid var(--pa-gray-200);
    padding-top: 24px;
}

/* Velden die niet verplicht zijn staan ingeklapt achter "meer gegevens" */
body .pa-zm.pa-zm-extra-verborgen .pa-zm-extra {
    display: none !important;
}
/* Knop om de overige velden erbij te halen: een rond pijltje met de tekst
   ernaast. Het pijltje draait een kwartslag zodra het blok open staat. */
body a.pa-zm-meer-knop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--pa-gray-700);
    font-size: 14px;
}
body a.pa-zm-meer-knop:hover,
body a.pa-zm-meer-knop:focus {
    color: var(--pa-primary);
    text-decoration: none;
}
body a.pa-zm-meer-knop i.fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid var(--pa-gray-300);
    border-radius: 50%;
    background-color: #ffffff;
    font-size: 10px;
    color: var(--pa-gray-500);
    transition: transform 150ms ease, border-color 150ms ease, color 150ms ease;
}
body a.pa-zm-meer-knop:hover i.fa,
body a.pa-zm-meer-knop:focus i.fa {
    border-color: var(--pa-primary);
    color: var(--pa-primary);
}
body a.pa-zm-meer-knop.pa-zm-meer-open i.fa {
    transform: rotate(90deg);
}
/* Loopt er al een melding, dan is de rest van het scherm niet meer van toepassing:
   grijs en niet aan te klikken. De waarschuwing zelf en de knoppenrij blijven
   gewoon bruikbaar, anders kun je niet terug. */
body .pa-zm-stap.pa-zm-op-slot .pa-zm-kaart > *:not(.pa-zm-melding-blokkade):not(.pa-zm-acties):not(.pa-zm-medewerker-blok) {
    opacity: .5;
    pointer-events: none;
}

/* ===== Tijdlijn van het verloop =====
   De regels die al gemeld zijn staan onder elkaar aan een lijn; de regel die je
   invult sluit die rij af. Zo zie je meteen wat er verandert. */
body .pa-zm-tijdlijn {
    position: relative;
    margin-top: 8px;
    padding-left: 32px;
}
body .pa-zm-tijdlijn::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 16px;
    bottom: 24px;
    width: 2px;
    background-color: var(--pa-gray-200);
}
body .pa-zm-tijdlijn-regel {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 8px;
    border-radius: var(--pa-radius-input);
    line-height: 20px;
}
/* Om en om een band, zodat je de regels uit elkaar houdt. Wit in plaats van grijs:
   het blok eromheen is zelf al lichtgrijs. Het vak waarin je invult heeft zijn
   eigen kleur en doet niet mee. */
body .pa-zm-tijdlijn-regel:nth-of-type(even):not(.pa-zm-tijdlijn-nieuw) {
    background-color: #ffffff;
}
/* Op het controlescherm is de kaart wit; daar werkt een grijze band. */
body .pa-zm-tijdlijn-controle .pa-zm-tijdlijn-regel:nth-of-type(even) {
    background-color: var(--pa-gray-50);
}
body .pa-zm-tijdlijn-punt {
    position: absolute;
    left: -32px;
    top: 12px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid var(--pa-gray-300);
}
body .pa-zm-tijdlijn-nu .pa-zm-tijdlijn-punt {
    border-color: var(--pa-primary);
    background-color: var(--pa-primary);
}
body .pa-zm-tijdlijn-waarde {
    /* Breed genoeg voor de kop "Percentage ziek"; anders rekt die de kolom op en
       staan de kop en de waarde eronder niet meer op dezelfde lijn. */
    flex: 0 0 128px;
    min-width: 0;
    font-size: 14px;
    font-weight: bold;
    color: var(--pa-gray-900);
}
/* Kopregel boven de tijdlijn; dezelfde kolommen, met de inspringing van de punten. */
body .pa-zm-tijdlijn-koppen {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-top: 16px;
    padding: 0 8px 8px 40px;
    border-bottom: 1px solid var(--pa-gray-200);
}
body .pa-zm-tijdlijn-koppen span {
    font-size: 12.8px;
    font-weight: 600;
    color: var(--pa-gray-500);
    white-space: nowrap;
    min-width: 0;
}
body .pa-zm-tijdlijn-nu-tekst {
    margin-left: auto;
    font-size: 12.8px;
    color: var(--pa-gray-500);
    white-space: nowrap;
}
body .pa-zm-tijdlijn-nieuw .pa-zm-tijdlijn-punt {
    top: 24px;
    border-color: var(--pa-primary);
    background-color: #ffffff;
}
/* Een stap die je in dit scherm hebt toegevoegd: die staat nog niet in het
   dossier en kan er weer af. */
body .pa-zm-tijdlijn-toegevoegd .pa-zm-tijdlijn-punt {
    border-color: var(--pa-primary);
    background-color: var(--pa-primary-50);
}
/* Het vlak op de bevestiging met de stappen die zijn weggeschreven. */
body .pa-zm-bevestiging-vlak {
    max-width: 640px;
    margin: 0 auto 32px;
    padding: 16px 24px 24px;
    text-align: left;
    background-color: var(--pa-gray-50);
    border-radius: var(--pa-radius-card);
}
body .pa-zm-bevestiging-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    font-weight: bold;
    color: var(--pa-gray-900);
}
body .pa-zm-bevestiging-nummer {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12.8px;
    font-weight: normal;
    color: var(--pa-gray-500);
}
body .pa-zm-bevestiging-vlak .pa-zm-tijdlijn-koppen {
    margin-top: 8px;
}
body .pa-zm-bevestiging-vlak .pa-zm-tijdlijn-regel:nth-of-type(even) {
    background-color: #ffffff;
}

/* De tijdlijn op het controlescherm: per stap de periode waarin hij geldt. */
body .pa-zm-tijdlijn-controle {
    margin-top: 0;
}
body .pa-zm-tijdlijn-periode {
    flex: 0 0 200px;
    min-width: 0;
    color: var(--pa-gray-500);
    font-size: 14px;
}
body .pa-zm-tijdlijn-extra {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--pa-gray-500);
    font-size: 14px;
}
body .pa-zm-tijdlijn-extra i.fa {
    font-size: 12px;
}

/* Waarschuwing bovenaan stap 2: er loopt al een melding voor deze medewerker. */
body .pa-zm-melding-blokkade {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid var(--pa-danger);
    border-radius: var(--pa-radius-card);
    background-color: #ffffff;
    color: var(--pa-gray-700);
    line-height: 20px;
}
body .pa-zm-melding-blokkade > i.fa {
    color: var(--pa-danger);
    font-size: 16px;
    flex: 0 0 auto;
}
body .pa-zm-melding-kop {
    display: block;
    font-weight: bold;
    color: var(--pa-gray-900);
}
body .pa-zm-melding-tekst {
    display: block;
    font-size: 14px;
}
/* De knop staat op dezelfde regel als de melding, rechts in het vlak. */
body a.pa-zm-melding-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    min-height: 32px;
    padding: 0 16px;
    border-radius: var(--pa-radius-btn);
    font-size: 14px;
    white-space: nowrap;
}
body .pa-zm-stap.pa-zm-start #dhResultaten,
body .pa-zm-stap.pa-zm-start #hmResultaten {
    text-align: left;
}

/* Melding achteraan een regel in de zoeklijst: voor deze medewerker loopt al een
   ziekmelding. De regel gaat dan naar dat dossier, dus het gewone pijltje blijft
   de enige aanwijzing dat je verder kunt klikken. */
body .pa-zm-medewerker-vlag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-right: 16px;
    color: var(--pa-gray-500);
    font-size: 12.8px;
    line-height: 20px;
    white-space: nowrap;
}
body .pa-zm-medewerker-vlag i.fa {
    color: var(--pa-danger);
    font-size: 12px;
}

/* Sterretje achter een verplicht label, zoals in het ontwerp */
body .pa-zm-verplicht {
    color: var(--pa-danger);
    margin-left: 4px;
}
/* De verstuurknop staat even uit terwijl de melding wordt weggeschreven */
body .pa-zm-acties .btn.disabled {
    opacity: .65;
    pointer-events: none;
}
/* Tijdens het opslaan staat alleen het draaiende icoon met "Bezig met opslaan" in
   de knop. De knop houdt zijn eigen kleur: hij doet iets, hij is niet onbruikbaar. */
body .pa-zm-acties .btn.pa-zm-knop-bezig {
    pointer-events: none;
}
body .pa-zm-acties .pa-zm-knop-bezig > :not(.pa-zm-knop-bezig-tekst) {
    display: none;
}
body .pa-zm-knop-bezig-tekst {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Wijzig-link naast de kop van een blok in de controle */
body .pa-zm-samenvatting-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
/* Keuzes die al vastliggen (bijvoorbeeld een traject met maar één mogelijkheid)
   staan niet in beeld, maar tellen wel mee bij de controle in stap 3.
   !important: de bestaande code zet de zichtbaarheid van deze blokken met een
   inline stijl, en die zou anders altijd winnen. */
body .pa-zm .pa-zm-verborgen-veld {
    display: none !important;
}

/* ===== Ziekmelden: één stijl voor alle velden in de wizard =====
   Het formulier eronder is oud en heeft per veld een eigen opmaak. Binnen de
   wizard krijgen alle velden dezelfde hoogte, rand en hoeken, en staan de labels
   als rustige kop boven het veld. Buiten .pa-zm verandert er niets. */
body .pa-zm .form-control,
body .pa-zm input[type="text"],
body .pa-zm input[type="number"],
body .pa-zm input[type="email"],
body .pa-zm textarea,
body .pa-zm select {
    min-height: 40px;
    height: 40px;
    border: 1px solid var(--pa-gray-300);
    border-radius: var(--pa-radius-input) !important;
    background-color: #ffffff !important;
    color: var(--pa-gray-900);
    font-size: 14px;
    padding: 8px 16px;
    box-shadow: none;
}
body .pa-zm textarea {
    min-height: 96px;
    height: auto;
    padding: 16px;
}
body .pa-zm .form-control:focus,
body .pa-zm input[type="text"]:focus,
body .pa-zm select:focus,
body .pa-zm textarea:focus {
    border-color: var(--pa-primary);
    box-shadow: 0 0 0 3px var(--pa-primary-ring);
}
/* Select2 hoort er precies zo uit te zien als een gewoon veld */
body .pa-zm .select2-container--default .select2-selection--single {
    height: 40px;
    border: 1px solid var(--pa-gray-300);
    border-radius: var(--pa-radius-input);
    background-color: #ffffff;
}
body .pa-zm .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    padding-left: 16px;
    padding-right: 32px;
    font-size: 14px;
    color: var(--pa-gray-900);
}
body .pa-zm .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 8px;
}
body .pa-zm .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--pa-gray-50);
}
/* Labels: geen vette regel met dubbele punt maar een rustige kop */
body .pa-zm .pa-zm-raster-boven b,
body .pa-zm #formulier0 b,
body .pa-zm #dienstverbandClientDiv b {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--pa-gray-700);
    margin-bottom: 8px;
}
/* Het oude formulier zet achter elk label een <br> om het veld op de volgende
   regel te krijgen. Het label is hier zelf al een blok, dus die regelovergang
   geeft alleen een lege regel boven het veld. */
body .pa-zm .pa-zm-sectie br,
body .pa-zm #formulier0 br,
body .pa-zm #dienstverbandClientDiv > br,
body .pa-zm #clientInhoudDiv br.pa-zm-nooit {
    display: none;
}
body .pa-zm .form-group {
    margin-bottom: 0;
}
/* Toelichting bij een keuze: zacht blauw in plaats van grijs */
body .pa-zm-toelichting {
    background-color: var(--pa-primary-50);
    color: var(--pa-gray-700);
    border-radius: var(--pa-radius-card);
    padding: 12px 16px;
    margin-top: 16px;
    line-height: 20px;
}
body .pa-zm-toelichting i.fa {
    color: var(--pa-primary);
    margin-top: 2px;
}
/* De rij met keuzerondjes is even hoog als een veld; dan loopt hij gelijk met de
   velden ernaast. */
body .pa-zm #ongevalDiv > .form-group {
    display: flex;
    align-items: center;
    min-height: 40px;
}
body .pa-zm .radio-inline {
    margin-right: 24px;
    padding-top: 0;
}
body .pa-zm .radio-inline .text {
    font-size: 14px;
    color: var(--pa-gray-900);
}
/* De vragenlijst staat in een eigen document; die krijgt dezelfde veldstijl mee */
body.pa-zm-frame {
    padding: 0;
    background: transparent;
}
body.pa-zm-frame .form-control,
body.pa-zm-frame input[type="text"],
body.pa-zm-frame input[type="number"],
body.pa-zm-frame textarea,
body.pa-zm-frame select {
    min-height: 48px;
    border: 1px solid var(--pa-gray-300);
    border-radius: var(--pa-radius-card) !important;
    background-color: #ffffff !important;
    font-size: 14px;
    padding: 8px 16px;
    box-shadow: none;
}
body.pa-zm-frame .vraag-form-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 20px;
    color: var(--pa-gray-700) !important;
    margin-bottom: 8px;
}
body.pa-zm-frame .vraag-title:not(.vraag-form-title) {
    font-size: 16px !important;
    line-height: 24px;
    color: var(--pa-gray-900) !important;
    border-bottom: 0 !important;
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
}
body.pa-zm-frame td {
    padding-bottom: 16px;
}

/* Vragen in het frame: korte vragen met z'n tweeen op een regel, zoals in het
   ontwerp. De blokken houden hun eigen volgorde. */
/* Elke vraag staat in een eigen kolom van volle breedte; korte vragen krijgen de
   halve breedte zodat ze met z'n tweeen op een regel passen, net als in het ontwerp. */
body.pa-zm-frame .sectieDiv.pa-zm-frame-half {
    flex: 0 0 50%;
    max-width: 50%;
}
@media (max-width: 767px) {
    body.pa-zm-frame .sectieDiv.pa-zm-frame-half {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Velden die in de wizard nooit in beeld komen omdat de keuze al eerder is
   gemaakt. Ze tellen ook niet mee in de controle bij stap 3. */
body .pa-zm .pa-zm-nooit {
    display: none !important;
}


/* Terwijl de skeleton in beeld staat, neemt het frame buiten de tekststroom al zijn
   echte maat in. Zo staat de vragenlijst meteen goed als hij verschijnt. */
body .pa-zm #vragenlijstDiv > [class*="col-"] {
    position: relative;
}
body .pa-zm #vragenlijstFrame.pa-zm-frame-wachten {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
}

/* De skeleton van de vragenlijst volgt in de wizard dezelfde indeling als de
   vragen zelf: twee naast elkaar, met de invoervelden op dezelfde hoogte. */
body .pa-zm-skeleton {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}
body .pa-zm-skeleton .pa-vragenlijst-skeleton-input {
    flex: 0 0 48px;
}
@media (max-width: 767px) {
    body .pa-zm-skeleton {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Aanvullende ongevalsvragen. De opbouw daarvan zet rijen in elkaar met vaste
   maten; in de wizard staan de vraagblokken daarom in een eigen raster van drie
   gelijke kolommen, waarbij een tekstvak twee plaatsen inneemt. */
body .pa-zm .pa-zm-ongeval-breed {
    grid-column: 1 / -1;
}
body .pa-zm #ongevalInhoudDiv:empty {
    display: none;
}
body .pa-zm #ongevalInhoudDiv {
    border-top: 1px solid var(--pa-gray-200);
    padding-top: 24px;
}
/* De vragen bij een ongeval vullen de breedte van hun blok: zoveel velden naast
   elkaar als er passen, een tekstvak over de hele regel. */
body .pa-zm .pa-zm-ongeval-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 24px;
    align-items: start;
}
body .pa-zm .pa-zm-ongeval-breed-veld {
    grid-column: 1 / -1;
}
/* Mededeling tussen de ongevalvragen: geen veld maar een toelichting. */
body .pa-zm .pa-zm-ongeval-melding {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--pa-radius-card);
    background-color: var(--pa-primary-50);
    color: var(--pa-gray-700);
    font-size: 14px;
    line-height: 20px;
}
body .pa-zm .pa-zm-ongeval-melding > i.fa {
    color: var(--pa-primary);
    margin-top: 2px;
}
body .pa-zm .pa-zm-ongeval-melding .form-group {
    font-weight: normal;
    margin: 0;
}
body .pa-zm .pa-zm-ongeval-melding a {
    color: var(--pa-primary);
    text-decoration: underline;
}
/* De eerste regel in een blok is het label bij het veld eronder */
body .pa-zm .pa-zm-ongeval-veld > div:first-child {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--pa-gray-700);
    margin-bottom: 8px;
}
body .pa-zm .pa-zm-ongeval-veld .form-group {
    margin-bottom: 0;
}
body .pa-zm .pa-zm-ongeval-veld textarea.form-control {
    width: 100% !important;
    height: 96px !important;
    min-height: 96px;
}


/* De skeleton van de vragenlijst volgt in de wizard dezelfde indeling als de
   vragen zelf: twee naast elkaar, met de invoervelden op dezelfde hoogte. */
body .pa-zm-skeleton {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
}
body .pa-zm-skeleton .pa-vragenlijst-skeleton-input {
    flex: 0 0 48px;
}
@media (max-width: 767px) {
    body .pa-zm-skeleton {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Aanvullende ongevalsvragen. Die worden met vaste maten in de opbouw gezet
   (waaronder een tekstvak van 31% breed); binnen de wizard volgen ze de opmaak
   van de rest van het scherm. */
/* Het blok met de aanvullende ongevalsvragen loopt over de hele breedte, onder de
   twee kolommen. Zo blijven de velden breed en het scherm kort. */
body .pa-zm .pa-zm-ongeval-breed {
    grid-column: 1 / -1;
}
body .pa-zm #ongevalInhoudDiv:empty {
    display: none;
}
body .pa-zm #ongevalInhoudDiv {
    border-top: 1px solid var(--pa-gray-200);
    padding-top: 24px;
}
body .pa-zm #ongevalInhoudDiv {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
}
body .pa-zm #ongevalInhoudDiv .row {
    --bs-gutter-x: 24px;
    margin-bottom: 16px;
    flex: 1 1 100%;
}
/* Een rij met alleen een tekstvak past met z'n tweeen op een regel. Zit zo'n rij
   in een andere rij, dan gaat die ouder mee in dezelfde verdeling. */
body .pa-zm #ongevalInhoudDiv .row.pa-zm-ongeval-half {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
}
body .pa-zm #ongevalInhoudDiv .row.pa-zm-ongeval-half > [class*="col-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
body .pa-zm #ongevalInhoudDiv .row:has(> .row.pa-zm-ongeval-half) {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    /* De ruimte tussen de kolommen komt van de gap; de gutter zou de eerste kolom
       nog een keer laten inspringen. */
    --bs-gutter-x: 0;
}
body .pa-zm #ongevalInhoudDiv .row:has(> .row.pa-zm-ongeval-half) > [class*="col-"] {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
}
body .pa-zm #ongevalInhoudDiv .row:last-child {
    margin-bottom: 0;
}
/* De eerste regel in een kolom is het label bij het veld eronder */
body .pa-zm #ongevalInhoudDiv [class*="col-"] > div:first-child {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--pa-gray-700);
    margin-bottom: 8px;
}
body .pa-zm #ongevalInhoudDiv .form-group {
    margin-bottom: 0;
}
/* De opbouw zet een rij binnen een kolom; zonder deze regel springt het laatste
   tekstvak een stukje naar binnen ten opzichte van de rest. */
body .pa-zm #ongevalInhoudDiv [class*="col-"] > .row,
body .pa-zm #ongevalInhoudDiv .row > .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}
body .pa-zm #ongevalInhoudDiv textarea.form-control {
    width: 100% !important;
    height: 96px !important;
    min-height: 96px;
}

/* De controle begint beknopt: regels die op stap 2 achter "meer gegevens" staan,
   staan hier ook ingeklapt. */
body .pa-zm-samenvatting.pa-zm-controle-beknopt .pa-zm-samenvatting-extra {
    display: none;
}

/* Keuzebalk boven het beginscherm: wat meld je over deze medewerker? */
/* Eén balk met de drie meldingen erin; de actieve staat als gevulde pil in de
   balk. De balk zelf is wit, want de pagina-achtergrond is al lichtgrijs. */
body .pa-zm-tabs {
    display: flex;
    width: fit-content;
    gap: 0;
    padding: 4px;
    margin: 0 auto 24px;
    background-color: #ffffff;
    border: 1px solid var(--pa-gray-200);
    border-radius: 999px;
}
body .pa-zm-tab {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 14px;
    color: var(--pa-gray-700);
}
body a.pa-zm-tab:hover,
body a.pa-zm-tab:focus {
    background-color: var(--pa-gray-100);
    color: var(--pa-gray-900);
    text-decoration: none;
}
body .pa-zm-tab-actief {
    background-color: var(--pa-primary);
    color: #ffffff;
    font-weight: bold;
}
/* Herstel en deelherstel horen bij een lopend traject: die meld je in het dossier. */
body .pa-zm-tab-uit {
    color: var(--pa-gray-500);
    cursor: default;
}
body .pa-zm-tijdlijn-datum {
    flex: 0 0 96px;
    min-width: 0;
    color: var(--pa-gray-500);
    font-size: 14px;
}
body .pa-zm-tijdlijn-leeg {
    color: var(--pa-gray-500);
    font-size: 14px;
    padding: 8px 0;
}
/* De regel die je invult: een eigen vlak aan het eind van de lijn. */
body .pa-zm-tijdlijn-nieuw {
    display: block;
    margin-top: 8px;
    padding: 16px;
    background-color: var(--pa-primary-50);
    border: 1px solid var(--pa-primary);
    border-radius: var(--pa-radius-card);
}
body .pa-zm-tijdlijn-velden {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}
body .pa-zm-tijdlijn-velden > div {
    display: flex;
    flex-direction: column;
    flex: 0 1 160px;
    min-width: 140px;
}
/* Een keuzelijst met lange teksten, zoals de reden van beëindiging, vult de rest
   van de regel; anders valt het gekozen antwoord half weg. */
body .pa-zm-tijdlijn-velden > div.pa-zm-tijdlijn-veld-breed {
    flex: 1 1 320px;
}
body .pa-zm-tijdlijn-velden .form-group {
    margin-bottom: 0;
}
body a.pa-zm-tijdlijn-weg {
    margin-left: auto;
    color: var(--pa-gray-400);
    font-size: 14px;
}
body a.pa-zm-tijdlijn-weg:hover,
body a.pa-zm-tijdlijn-weg:focus {
    color: var(--pa-danger);
    text-decoration: none;
}
body .pa-zm-controle-nu {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
}
body .pa-zm-controle-nu-label {
    color: var(--pa-gray-500);
    font-size: 14px;
}
body .pa-zm-controle-nu-waarde {
    font-size: 14px;
    font-weight: bold;
    color: var(--pa-gray-900);
}
body .pa-zm-controle-kop {
    font-size: 14px;
    font-weight: bold;
    color: var(--pa-gray-900);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--pa-gray-200);
}
/* Staat er een kopregel met kolomnamen onder, dan is een tweede lijn te veel. */
body .pa-zm-controle-kop-plat {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* Rond plusje naast de velden: daarmee zet je de stap in de tijdlijn. */
body a.pa-zm-tijdlijn-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-width: 0;
    border-radius: 50%;
    background-color: var(--pa-primary);
    color: #ffffff;
    font-size: 14px;
}
body a.pa-zm-tijdlijn-plus:hover,
body a.pa-zm-tijdlijn-plus:focus {
    background-color: var(--pa-primary-dark);
    color: #ffffff;
    text-decoration: none;
}

/* Veelgebruikte percentages als knop naast het veld */
body .pa-zm-tijdlijn-keuzes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
body a.pa-zm-tijdlijn-keuze {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--pa-gray-300);
    background-color: #ffffff;
    color: var(--pa-gray-700);
    font-size: 14px;
}
body a.pa-zm-tijdlijn-keuze:hover,
body a.pa-zm-tijdlijn-keuze:focus {
    border-color: var(--pa-primary);
    color: var(--pa-primary);
    text-decoration: none;
}
/* Kop boven de lijst met openstaande dossiers op stap 1 */
body .pa-zm-lijst-kop {
    font-size: 12.8px;
    font-weight: 600;
    color: var(--pa-gray-500);
    padding-bottom: 8px;
    margin-top: 8px;
    /* Het beginscherm staat gecentreerd; de lijst eronder leest links beter. */
    text-align: left;
}

/* Paginering onder de lijst met medewerkers: de telling links en de knoppen
   rechtsonder, net als onder de andere overzichten in de applicatie. */
body .pa-zm-paginering {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pa-gray-200);
}
body .pa-zm-paginering-telling {
    font-size: 12.8px;
    color: var(--pa-gray-500);
}
body .pa-zm-paginering-knoppen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    /* Even ver van de rand als de pijltjes in de regels erboven, zodat de lijst
       één rechterlijn houdt. */
    padding-right: 8px;
}
body .pa-zm-paginering-knoppen .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 16px;
    border-radius: var(--pa-radius-btn);
    font-size: 14px;
    white-space: nowrap;
}

/* Staat het gegevensblok in het vlak met de trajectkop, dan neemt het de
   achtergrond en de randen van dat vlak over in plaats van er een tweede blok
   in te tekenen. */
body .pa-zm-bevestiging-vlak .pa-zm-bevestiging-gegevens {
    background-color: transparent;
    border-radius: 0;
    padding: 16px 0 0;
    margin: 0;
    max-width: none;
}

/* ===== Knelpuntenscan (dossieronderdeel) =====
   Bovenaan staan de twee bronnen naast elkaar: links de functiebelasting (wat de taken vragen),
   rechts de belastbaarheid (wat de werknemer volgens het belastbaarheidsprofiel kan). De kolommen
   in elke taakkaart volgen dezelfde volgorde en iconen, met het oordeel als eigen kolom. Het vorige
   belastbaarheidsprofiel staat er pas bij als je de vergelijking aanzet.
   Alleen bestaande tokens; tinten komen met color-mix uit het token. Per oordeel zet een modifier
   --pa-kps-kleur (rand en balk) en een donkerder --pa-kps-icoon, zodat iconen op wit 3:1 halen. */
body .pa-kps {
    container-type: inline-size;
    padding: 12px 14px 14px;
    /* De profielwizard zet nowrap op alle tabelrijen; tekst in de scan moet gewoon teruglopen */
    white-space: normal;
    /* Partnerkleur met gray-900 gemengd: ook een lichte partnerkleur blijft als tekst leesbaar */
    --pa-kps-link: color-mix(in srgb, var(--pa-primary) 60%, var(--pa-gray-900));
    --pa-kps-grens-tekst: color-mix(in srgb, var(--pa-warning) 55%, var(--pa-gray-900));
}
body .pa-kps-botst { --pa-kps-kleur: var(--pa-danger); --pa-kps-icoon: var(--pa-danger-dark); }
body .pa-kps-grens { --pa-kps-kleur: var(--pa-warning); --pa-kps-icoon: var(--pa-kps-grens-tekst); }
body .pa-kps-past { --pa-kps-kleur: var(--pa-success); --pa-kps-icoon: var(--pa-success-dark); }
body .pa-kps-niet { --pa-kps-kleur: var(--pa-gray-400); --pa-kps-icoon: var(--pa-gray-500); }

/* In de wizard alleen de functiebelasting */
body .pa-kps-bronkop.pa-kps-bronkop-enkel {
    grid-template-columns: minmax(0, 1fr);
}
/* Bronkop: functiebelasting ⇄ belastbaarheid */
body .pa-kps-bronkop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
}
body .pa-kps-bronkop-pijl {
    align-self: center;
    color: var(--pa-gray-400);
}
body .pa-kps-bron {
    padding: 10px 14px;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    color: var(--pa-gray-700);
}
body .pa-kps-bron-titel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0 0 6px;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pa-gray-900);
}
body .pa-kps-bron-titel i:not(.pa-kps-info) {
    color: var(--pa-gray-700);
}
body .pa-kps-bron-regel {
    font-weight: 600;
    color: var(--pa-gray-900);
}
body .pa-kps-bron .pa-veld-toelichting {
    display: block;
    margin-top: 2px;
}
/* De taken waar de functiebelasting uit bestaat, kort als labels met hun deel van de werktijd */
body .pa-kps-bron-taken {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
/* Kop van een bronkaart: titel links, link naar waar de bron is vastgelegd rechtsboven */
body .pa-kps-bron-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 6px;
}
body .pa-kps-bron-kop > .pa-kps-bron-titel {
    margin-bottom: 0;
}
/* Link naar de plek waar een bron is vastgelegd */
body .pa-kps-bron-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pa-kps-link);
}
body .pa-kps-bron-link:hover {
    text-decoration: underline;
}
body .pa-kps-functie-link {
    align-self: flex-start;
    margin: 4px 8px;
}
/* Elke taak is een knop die de kaart van die taak hieronder opent */
body .pa-kps-bron-taak {
    padding: 2px 8px;
    border: 0;
    border-radius: var(--pa-radius-input);
    background-color: var(--pa-gray-100);
    font: inherit;
    font-size: 12px;
    line-height: 1.5;
    color: var(--pa-gray-900);
    cursor: pointer;
    transition: background-color .15s ease;
}
body .pa-kps-bron-taak:hover {
    background-color: var(--pa-gray-200);
}
body .pa-kps-bron-taak:focus-visible {
    box-shadow: 0 0 0 2px var(--pa-gray-50), 0 0 0 4px var(--pa-kps-link) !important;
    outline: none;
}
/* De kaart waar je via de taak naartoe ging, licht even op */
body .pa-kps-taak-gevonden {
    box-shadow: 0 0 0 3px var(--pa-primary-ring);
}
/* Scrolt de pagina naar een hoge kaart, dan begint die onder de vaste menubalk in plaats van erachter */
body .pa-kps-taak {
    scroll-margin-top: 72px;
}
body .pa-kps-taaknaam:focus {
    outline: none;
}
@media (prefers-reduced-motion: reduce) {
    body .pa-kps-bron-taak {
        transition: none;
    }
}
/* gray-500 op gray-100 haalt geen 4,5:1, daarom gray-700 */
body .pa-kps-bron-taak-werktijd {
    color: var(--pa-gray-700);
    font-variant-numeric: tabular-nums;
}

/* Schakelaar voor het vorige belastbaarheidsprofiel */
body .pa-kps-vergelijk {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--pa-gray-200);
}
/* Schakelaar en label in een raster in plaats van de float van Bootstrap; de app verbergt
   checkboxen standaard, de schakelaar moet zelf zichtbaar zijn */
body .pa-kps-vergelijk.form-switch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    min-height: 0;
    margin-bottom: 0;
    padding-left: 0;
}
/* De knop van de schakelaar tekenen we zelf met een radial-gradient: de app-opmaak zet anders met
   !important een zwart vinkje in een aangevinkte checkbox. Uit: grijze knop links, aan: lichte knop
   rechts op de linkkleur; beide halen 3:1 tegen de achtergrond. */
body .pa-kps-vergelijk .form-check-input {
    position: static;
    left: auto;
    z-index: auto;
    float: none;
    width: 2em;
    height: 1em;
    margin: 3px 0 0;
    opacity: 1;
    border: 1px solid var(--pa-gray-500) !important;
    border-radius: 2em;
    background-color: var(--pa-gray-50) !important;
    background-image: radial-gradient(circle at .5em 50%, var(--pa-gray-500) .3em, transparent calc(.3em + 1px)) !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
    cursor: pointer;
}
body .pa-kps-vergelijk .pa-veld-toelichting {
    grid-column: 2;
}
body .pa-kps-vergelijk .form-check-input:checked {
    border-color: var(--pa-kps-link) !important;
    background-color: var(--pa-kps-link) !important;
    background-image: radial-gradient(circle at calc(100% - .5em) 50%, var(--pa-gray-50) .3em, transparent calc(.3em + 1px)) !important;
}
/* beyond.css haalt de outline van checkboxen weg; een ring van box-shadow blijft staan */
body .pa-kps-vergelijk .form-check-input:focus-visible {
    box-shadow: 0 0 0 2px var(--pa-gray-50), 0 0 0 4px var(--pa-kps-link) !important;
}
body .pa-kps-vergelijk .form-check-label {
    color: var(--pa-gray-900);
    cursor: pointer;
}

body .pa-kps-lijst {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Kaart per taak: gekleurde rand links naar het oordeel */
body .pa-kps-taak {
    border: 1px solid var(--pa-gray-200);
    border-left: 3px solid var(--pa-kps-kleur);
    border-radius: var(--pa-radius-card);
    overflow: hidden;
}
/* Kop van de kaart: links de taak, rechts het oordeel naast de werktijd, boven de kolom Oordeel */
body .pa-kps-taak-kop {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px 4px;
}
body .pa-kps-taak-titel {
    flex: 1 1 auto;
    min-width: 0;
}
/* Oordeel, balkje, werktijd en knop op één regel, verticaal gecentreerd */
body .pa-kps-taak-rechts {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    /* Het midden van de knop (28px) op het midden van de eerste regel van de taaknaam */
    margin-top: -5px;
}
body .pa-kps-taak-rechts > .label {
    flex-shrink: 0;
}
/* De kop klapt de belastingen in en uit */
body .pa-kps-taak-kop {
    cursor: pointer;
}
body .pa-kps-taak-dicht .pa-kps-taak-kop {
    padding-bottom: 12px;
}
body .pa-kps-taak-knop {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: 0 -6px 0 -4px;
    padding: 0;
    border: 0;
    border-radius: var(--pa-radius-input);
    background-color: transparent;
    color: var(--pa-kps-link);
    cursor: pointer;
}
body .pa-kps-taak-knop:hover {
    background-color: var(--pa-gray-100);
}
body .pa-kps-taak-knop:focus-visible {
    box-shadow: 0 0 0 2px var(--pa-kps-link) !important;
}
body .pa-kps-taaknaam {
    display: inline;
    margin: 0 6px 0 0;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pa-gray-900);
}
body .pa-kps-taak-titel .pa-veld-toelichting {
    display: block;
    margin-top: 2px;
}
body .pa-kps-taak-werktijd {
    display: flex;
    align-items: center;
    gap: 8px;
}
body .pa-kps-taak-werktijd .pa-kps-balk {
    width: 96px;
    margin-top: 0;
}
body .pa-kps-werktijd {
    font-size: 12px;
    color: var(--pa-gray-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body .pa-kps-geen-belasting {
    margin: 0;
    padding: 4px 16px 12px;
    color: var(--pa-gray-500);
}

/* Belastingen: belasting | functiebelasting | belastbaarheid | oordeel (| vorig profiel) */
/* De tabel staat in een omrande doos met lijnen tussen de kolommen, zodat je ziet welke waarde
   bij de functiebelasting hoort en welke bij de belastbaarheid */
body .pa-kps-tabelvak {
    margin: 6px 16px 12px;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-input);
    overflow: hidden;
}
body .pa-kps-items {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}
/* De profielwizard zet nowrap op elke tabelrij; hier moet de tekst teruglopen */
body .pa-kps-items tr {
    white-space: normal;
}
body .pa-kps-items th,
body .pa-kps-items td {
    padding: 8px 12px;
    vertical-align: top;
    text-align: left;
    line-height: 1.45;
}
body .pa-kps-items tr > * + * {
    border-left: 1px solid var(--pa-gray-200);
}
body .pa-kps-items thead th {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pa-gray-200);
    background-color: var(--pa-gray-50);
    font-size: 12px;
    font-weight: 600;
    color: var(--pa-gray-700);
}
body .pa-kps-items thead th i:not(.pa-kps-info) {
    margin-right: 2px;
    color: var(--pa-gray-500);
}
/* Uitleg bij een kop als i-tje, zoals elders in de applicatie: fa-info-circle met de klasse blue en de
   lichte tooltip; de tekst staat in de tooltip */
body .pa-kps-info {
    margin-left: 4px;
    cursor: pointer;
}
body .pa-kps-info:focus-visible {
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--pa-gray-50), 0 0 0 4px var(--pa-kps-link) !important;
    outline: none;
}
body .pa-kps-kol-belasting { width: 16%; }
body .pa-kps-kol-oordeel { width: 170px; }
body .pa-kps-kol-vorig { width: 22%; }
/* Volgende belasting binnen dezelfde taak: lichte scheiding */
body .pa-kps-items tbody tr + tr > * {
    border-top: 1px solid var(--pa-gray-200);
}
body .pa-kps-belasting {
    font-weight: 600;
    color: var(--pa-gray-900);
}
body .pa-kps-tekst {
    color: var(--pa-gray-900);
}
/* Een belasting die past of niet te beoordelen is, staat er rustiger bij, ook binnen een botsende taak */
body .pa-kps-item.pa-kps-past .pa-kps-tekst,
body .pa-kps-item.pa-kps-niet .pa-kps-tekst,
body .pa-kps-item.pa-kps-past .pa-kps-belasting,
body .pa-kps-item.pa-kps-niet .pa-kps-belasting {
    color: var(--pa-gray-500);
}
body .pa-kps-ontbreekt {
    color: var(--pa-gray-500);
    font-style: italic;
}
body .pa-kps-oordeel-woord {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 600;
    color: var(--pa-gray-900);
}
body .pa-kps-oordeel-woord i {
    color: var(--pa-kps-icoon);
}
body .pa-kps-item.pa-kps-past .pa-kps-oordeel-woord,
body .pa-kps-item.pa-kps-niet .pa-kps-oordeel-woord {
    font-weight: 400;
    color: var(--pa-gray-500);
}
body .pa-kps-grens-uitleg {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--pa-kps-grens-tekst);
}
/* Labels in een cel: alleen voor schermlezers, in een smalle kolom zichtbaar boven de waarde */
body .pa-kps-cel-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Vorig belastbaarheidsprofiel: alleen met de vergelijking aan, grijs en buiten de rij van het oordeel */
body .pa-kps-vorig,
body .pa-kps-was,
body .pa-kps-alleen-vorig {
    display: none;
}
body .pa-kps-met-vorig .pa-kps-vorig {
    display: table-cell;
}
body .pa-kps-met-vorig .pa-kps-was,
body .pa-kps-met-vorig .pa-kps-alleen-vorig {
    display: inline;
}
body .pa-kps-items .pa-kps-vorig {
    border-left: 1px solid var(--pa-gray-300);
    background-color: var(--pa-gray-50);
    font-size: 12px;
    color: var(--pa-gray-700);
}
/* Per belasting eerst de verandering (woord met richting), daaronder de score van toen. Kleur alleen op het
   icoon van een echte richting; het woord zegt hetzelfde. */
/* Kop van de kolom: zelfde opbouw als de cellen (icoon met vaste breedte, dan tekst), zodat alles uitlijnt */
body .pa-kps-vorig-kop {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
body .pa-kps-items thead th .pa-kps-vorig-kop > i {
    flex: none;
    margin-right: 0;
}
body .pa-kps-vorig-datum {
    display: block;
    padding-left: calc(1.25em + 4px);
    font-size: 12px;
    font-weight: 400;
    color: var(--pa-gray-500);
}
body .pa-kps-vorig-status {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--pa-gray-700);
}
body .pa-kps-vorig-status > i {
    flex: none;
    color: var(--pa-gray-500);
}
body .pa-kps-vorig-woord {
    font-weight: 600;
    color: var(--pa-gray-900);
}
/* "toen: past" staat altijd op een eigen regel onder het woord, zodat elke cel dezelfde volgorde heeft */
body .pa-kps-vorig-toen {
    display: block;
    font-weight: 400;
    color: var(--pa-gray-500);
}
body .pa-kps-vorig-slechter > i {
    color: var(--pa-danger-dark);
}
body .pa-kps-vorig-beter > i {
    color: var(--pa-success-dark);
}
body .pa-kps-vorig-zelfde .pa-kps-vorig-woord {
    font-weight: 400;
    color: var(--pa-gray-700);
}
body .pa-kps-vorig-gelijk .pa-kps-vorig-woord,
body .pa-kps-vorig-geen .pa-kps-vorig-woord {
    font-weight: 400;
    color: var(--pa-gray-500);
}
body .pa-kps-vorig-score {
    display: block;
    margin-top: 2px;
    padding-left: calc(1.25em + 4px);
    color: var(--pa-gray-700);
}
body .pa-kps-was {
    margin-left: 2px;
    font-size: 12px;
    color: var(--pa-gray-500);
}

body .pa-kps .label {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--pa-radius-input);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: 1px;
}
/* Botst is het belangrijkste signaal: lichte tekst op de donkere variant haalt 4,5:1 */
body .pa-kps .label-danger {
    background-color: var(--pa-danger-dark);
    color: var(--pa-gray-50);
}
/* Witte tekst op geel haalt geen 2:1; donkere tekst wel */
body .pa-kps .label-warning {
    background-color: var(--pa-warning);
    color: var(--pa-gray-900);
}
/* Witte tekst op de groene variant haalt geen 4,5:1; met gray-900 gemengd wel */
body .pa-kps .label-success {
    background-color: color-mix(in srgb, var(--pa-success-dark) 75%, var(--pa-gray-900));
    color: var(--pa-gray-50);
}
body .pa-kps .label-default {
    background-color: var(--pa-gray-100);
    color: var(--pa-gray-700);
    font-weight: 600;
}

/* Aandeel in de werktijd: een native progress-element, de breedte komt uit
   value/max zodat er geen inline style nodig is */
body .pa-kps-balk {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 4px;
    border: 0;
    border-radius: 9999px;
    background-color: var(--pa-gray-200);
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}
body .pa-kps-balk::-webkit-progress-bar {
    border-radius: 9999px;
    background-color: var(--pa-gray-200);
}
body .pa-kps-balk::-webkit-progress-value {
    border-radius: 9999px;
    background-color: var(--pa-kps-kleur);
}
body .pa-kps-balk::-moz-progress-bar {
    border-radius: 9999px;
    background-color: var(--pa-kps-kleur);
}

/* Tabblad Knelpuntenscan: links de werknemer en de dossierlijst zoals op de dossierpagina,
   rechts de tabjes Eigen functie en Andere functies */
body .pa-kps-indeling {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
body .pa-kps-zijkolom {
    flex: 0 0 210px;
    width: 210px;
}
body .pa-kps-zijkolom > .pa-client-kaart {
    margin-bottom: 12px;
}
body .pa-kps-zijkolom-kop {
    padding: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pa-gray-500);
}
body .pa-kps-zijkolom-kop ~ .pa-kps-zijkolom-kop {
    margin-top: 12px;
}
body .pa-kps-inhoud {
    flex: 1 1 auto;
    min-width: 0;
}
/* Eigen functie of andere functies: twee knoppen zoals elders in de applicatie */
body .pa-kps-weergave {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 14px;
}
body .pa-kps-tab-aantal {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 9999px;
    background-color: var(--pa-gray-100);
    color: var(--pa-gray-700);
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* beyond.css haalt de outline van knoppen en tabjes weg en custom.css zet hun box-shadow met !important
   uit; deze specifiekere ring blijft zichtbaar, ook op een knop of tabje in de partnerkleur */
body .pa-kps-weergave-knop:focus-visible {
    box-shadow: 0 0 0 2px var(--pa-gray-50), 0 0 0 4px var(--pa-primary) !important;
}
body #effectFunctieTab a:focus-visible {
    box-shadow: inset 0 0 0 2px var(--pa-primary), inset 0 0 0 4px var(--pa-gray-50) !important;
}
body .pa-kps-weergave .btn-primary .pa-kps-tab-aantal {
    background-color: color-mix(in srgb, var(--pa-gray-50) 25%, transparent);
    color: inherit;
}
body .pa-kps-tabpaneel > .pa-veld-toelichting {
    margin: 12px 14px 8px;
}
/* Smal scherm: de werknemer en de dossierlijst boven de scan */
@media (max-width: 991px) {
    body .pa-kps-indeling {
        flex-direction: column;
    }
    body .pa-kps-zijkolom {
        flex-basis: auto;
        width: 100%;
    }
}

/* Een functie uit het functiehuis: naam, uitvoerbaar deel en de tellingen per oordeel op één regel */
body .pa-kps-functie {
    --pa-kps-icoon: var(--pa-gray-500);
}
body .pa-kps-functie-telling {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-variant-numeric: tabular-nums;
}
body .pa-kps-functie-telling i {
    margin-right: 2px;
    color: var(--pa-kps-icoon);
}
body .pa-kps-functie .pa-kps-groep-taken > .pa-kps {
    padding: 0;
}

/* Rechtertabblad in de profielwizard: het effect van de gekozen scores op de functie */
body .pa-kps-effect {
    overflow-x: hidden;
    overflow-y: auto;
}
/* Stap Belastbaarheid in een dossierwizard: links de scores, rechts het effect op de functie. De rechterkolom
   blijft in beeld onder de sticky rubriektabs, zodat je bij elke klik het effect ziet. */
body .pa-kps-wizardstap {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
    align-items: start;
    gap: 16px;
}
body .pa-kps-wizardstap-invoer {
    min-width: 0;
}
/* De stap houdt standaard 38px vrij voor rubriektabs die er bovenop schuiven; met werkende sticky staan de
   tabs erboven en is een gewone afstand genoeg */
body .pa-kps-wizardstap-invoer > #fmlwizard-steps {
    margin-top: 12px !important;
}
/* Het wizardformulier knipt zijn inhoud af met overflow hidden, waardoor niets erin sticky kan zijn (ook de
   rubriektabs niet). Clip knipt net zo af, maar laat sticky werken; flow-root houdt de marges binnen het
   formulier, zoals hidden dat deed, zodat de stap niet verschuift. */
body form.widget:has(.pa-kps-wizardstap) {
    display: flow-root;
    overflow: clip !important;
}
/* Onder elke wizard staan twee lege iframes (doel voor downloads en externe acties) van 300 bij 150. Die geven
   lege scrollruimte, waarin het einde van de stap de kolom onder de rubriektabs zou duwen. Ze blijven werken,
   maar nemen in deze stap geen plek meer in. */
body:has(.pa-kps-wizardstap) #externFrame,
body:has(.pa-kps-wizardstap) #downloadFrame {
    position: absolute;
    width: 0;
    height: 0;
}
body .pa-kps-wizardstap-effect {
    position: sticky;
    top: 120px;
    /* Onder de stap volgt nog wat ruimte; met deze hoogte duwt het einde van de stap de kolom niet onder de
       rubriektabs als je helemaal naar beneden scrolt */
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    /* Gelijk met de kaart links */
    margin-top: 12px;
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    background: var(--pa-gray-50);
    box-shadow: var(--pa-shadow-card);
}
/* Kaartkop met scheidingslijn; blijft staan als de kolom zelf scrolt */
body .pa-kps-wizardstap-kop {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--pa-gray-200);
    background: var(--pa-gray-50);
    font-weight: 600;
    line-height: 1.4;
    color: var(--pa-gray-900);
}
body .pa-kps-wizardstap-kop i {
    color: var(--pa-gray-500);
}
/* De kolom is al de kaart: de tab-content-opmaak van het thema (schaduw, achtergrond, padding) valt hier weg */
body .pa-kps-wizardstap-effect .pa-kps-effect {
    padding: 0;
    background: transparent;
    box-shadow: none;
}
@media (max-width: 1100px) {
    body .pa-kps-wizardstap {
        grid-template-columns: minmax(0, 1fr);
    }
    body .pa-kps-wizardstap-effect {
        position: static;
        max-height: none;
    }
}
body .pa-kps-leeg-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
/* Wizard: wat de laatste gekozen score veranderde, met de gewijzigde belastingen en taken gemarkeerd */
body .pa-kps-effect-wijziging {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--pa-gray-200);
    border-left: 3px solid var(--pa-primary);
    border-radius: var(--pa-radius-card);
    background-color: var(--pa-gray-50);
    color: var(--pa-gray-700);
}
body .pa-kps-effect-wijziging-titel {
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--pa-gray-900);
}
body .pa-kps-effect-wijziging-titel i {
    color: var(--pa-kps-link);
}
body .pa-kps-effect-wijziging .pa-veld-toelichting {
    display: block;
    margin-top: 2px;
}
body .pa-kps-effect-wijziging-sinds {
    font-size: 12px;
    font-weight: 400;
    color: var(--pa-gray-500);
}
body .pa-kps-effect-wijziging ul {
    margin-top: 4px;
}
body .pa-kps-effect-wijziging ul {
    margin: 0;
    padding-left: 18px;
}
body .pa-kps-wijziging-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
body .pa-kps-wijziging-link:hover {
    text-decoration: underline;
}
body .pa-kps-wijziging-link:focus-visible {
    border-radius: var(--pa-radius-input);
    box-shadow: 0 0 0 2px var(--pa-kps-link) !important;
    outline: none;
}
body .pa-kps-effect-wijziging li i {
    font-size: 11px;
    color: var(--pa-gray-500);
}
/* Op de rij zelf, zodat het ook werkt als de rij in de smalle weergave een raster is */
body .pa-kps-items tr.pa-kps-item-gewijzigd {
    background-color: color-mix(in srgb, var(--pa-primary) 12%, var(--pa-gray-50));
}
body .pa-kps-taak-gewijzigd {
    box-shadow: 0 0 0 3px var(--pa-primary-ring);
}
body .pa-kps-effect-status {
    display: block;
    margin: -4px 0 8px;
}
body .pa-kps-effect-status:empty {
    display: none;
}
body .pa-kps-effect-fout,
body .pa-kps-effect-fout i {
    color: var(--pa-danger-dark);
}

/* Geen taak die botst of op de grens ligt */
body .pa-kps-geen-aandacht {
    padding: 10px 16px;
    border: 1px solid var(--pa-gray-200);
    border-left: 3px solid var(--pa-success);
    border-radius: var(--pa-radius-card);
    color: var(--pa-gray-700);
}
body .pa-kps-geen-aandacht i {
    margin-right: 6px;
    color: var(--pa-success-dark);
}

/* Samenvatting van de taken die passen of niet te beoordelen zijn: de hele regel is
   de knop die de taken openklapt */
body .pa-kps-groep {
    border: 1px solid var(--pa-gray-200);
    border-radius: var(--pa-radius-card);
    overflow: hidden;
}
body .pa-kps-groep-kop {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    background-color: transparent;
    color: var(--pa-gray-500);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}
body .pa-kps-groep-kop:hover {
    background-color: var(--pa-gray-50);
}
/* Functie zonder taken: er valt niets open te klappen */
body .pa-kps-groep-kop-vast {
    cursor: default;
}
body .pa-kps-groep-kop-vast:hover {
    background-color: transparent;
}
body .pa-kps-groep-kop:focus-visible {
    outline: 2px solid var(--pa-kps-link);
    outline-offset: -2px;
}
body .pa-kps-groep-kop > i {
    color: var(--pa-kps-icoon);
}
body .pa-kps-groep-titel {
    font-weight: 600;
    color: var(--pa-gray-900);
    white-space: nowrap;
}
body .pa-kps-groep-werktijd,
body .pa-kps-groep-scheiding,
body .pa-kps-groep-veranderd {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
body .pa-kps-groep-namen {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Alleen het pijltje, even groot en recht boven het pijltje van de taakkaarten in de groep */
body .pa-kps-groep-toon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    margin-left: auto;
    margin-right: 3px;
    color: var(--pa-kps-link);
}
body .pa-kps-groep-taken {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px 8px;
}
body .pa-kps-groep-taken[hidden] {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    body .pa-kps-groep-kop {
        transition: none;
    }
}

/* Smalle kolom (zoals de profielwizard): bronnen onder elkaar en per belasting de waarden
   onder elkaar met zichtbare labels in plaats van kolommen */
@container (max-width: 720px) {
    body .pa-kps-bronkop {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    body .pa-kps-bronkop-pijl {
        display: none;
    }
    /* Smal: de taak op de eerste regel, daaronder het oordeel met de werktijd */
    body .pa-kps-taak-kop {
        flex-wrap: wrap;
        gap: 6px 12px;
    }
    body .pa-kps-taak-titel {
        flex-basis: 100%;
    }
    body .pa-kps-taak-rechts {
        flex: 1 1 100%;
        margin-top: 0;
    }
    body .pa-kps-taak-werktijd {
        flex: 1 1 auto;
    }
    body .pa-kps-items thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
    body .pa-kps-items,
    body .pa-kps-items tbody {
        display: block;
    }
    body .pa-kps-items tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 2px;
        padding: 8px 12px;
    }
    body .pa-kps-items tbody tr + tr {
        border-top: 1px solid var(--pa-gray-200);
    }
    body .pa-kps-items tbody tr > *,
    body .pa-kps-items tbody tr + tr > * {
        border-top: 0;
        border-left: 0;
    }
    body .pa-kps-items tbody th,
    body .pa-kps-items tbody td {
        display: block;
        padding: 0;
    }
    body .pa-kps-items .pa-kps-belasting { grid-column: 1; grid-row: 1; }
    body .pa-kps-items .pa-kps-oordeel { grid-column: 2; grid-row: 1; text-align: right; }
    body .pa-kps-items .pa-kps-vraag,
    body .pa-kps-items .pa-kps-kan,
    body .pa-kps-met-vorig .pa-kps-items .pa-kps-vorig {
        display: grid;
        grid-template-columns: 130px minmax(0, 1fr);
        column-gap: 8px;
        grid-column: 1 / -1;
    }
    body .pa-kps-items .pa-kps-vorig {
        margin-top: 4px;
        padding: 4px 8px;
        border-left: 0;
        border-radius: var(--pa-radius-input);
    }
    body .pa-kps-items .pa-kps-vorig .pa-kps-vorig-status,
    body .pa-kps-items .pa-kps-vorig .pa-kps-vorig-score {
        grid-column: 2;
    }
    body .pa-kps-vraag .pa-kps-cel-label,
    body .pa-kps-kan .pa-kps-cel-label,
    body .pa-kps-vorig .pa-kps-cel-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        font-size: 12px;
        color: var(--pa-gray-500);
    }
    body .pa-kps-groep-namen,
    body .pa-kps-scheiding-namen {
        display: none;
    }
}