@media print {


    .sidebar{
        display:none;
    }

    .row.filter{
        display:none;
    }

    .ordrPlnLabels, .ordrPln {
        left: 0px !important;
        position: inherit !important;
    }

    .ordrPlnLabels, .ordrPln {
    
        overflow:auto;
        display:block;
        left:auto;
        top:auto;
        right:auto;
        bottom:auto;
    }

    .superNavBar {
        display: none !important;
    }

    .top-row {
        display: none !important;
    }

    .scroll{
        display:none;
    }
}


@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
:root {
    --bs-body-color: #3A3A3A;
}

    html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.hide{
    display:none;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 3px;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9000;
    height: 600px;
    font-size:30px;
}




    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }



.fa-spin5 {
    -webkit-animation: fa-spin 0.5s infinite linear;
    animation: fa-spin 0.5s infinite linear;
}



.modal .modal-xxl {
    max-width: 80% !important;
}


.modal .modal-xxxl {
    max-width: 90% !important;
}

.modal .modal-xxxxl {
    max-width: 100% !important;
    max-width: 90% !important;
    top: 0px;
    position: absolute;
    width: 100%;
    margin: auto;
    margin: 0px !important;
    min-width: 100%;
 }

.click{
    cursor:pointer;
}

.click:hover {
    color:darkblue;
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

    .btn-circle.btn-lg {
        width: 50px;
        height: 50px;
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.33;
        border-radius: 25px;
    }

    .btn-circle.btn-xl {
        width: 70px;
        height: 70px;
        padding: 10px 16px;
        font-size: 24px;
        line-height: 1.33;
        border-radius: 35px;
    }

    /* Fix height and enable scrolling */
.grid {
    height: 70vh;
    overflow-y: auto;
    overflow-x: auto;
}

.grid-100w {
    height: 70vh;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    display: grid;
}


    .grid table {
        min-width: 100%;
    }


    /* Sticky header while scrolling */
    .grid thead {
        position: sticky;
        top: 0;
        /* Kleuren via --eqg-* zodat de stijlvarianten (onderaan dit bestand) ze kunnen overschrijven. */
        color: var(--eqg-head-color, white);
        z-index: 1;
        font-size: 12px;

        background: var(--eqg-head-bg, #3A3A3A);
        box-shadow: var(--eqg-head-shadow, none);
    }

    .grid thead th .col-title {
        color: var(--eqg-head-color, white);
        font-weight: 100;
        background: var(--eqg-head-bg, #3A3A3A);
        margin-right: 0px;
        padding: 0px;
        margin-left: 0px;
        zoom: 1;
    }

        .grid thead th .col-options-button {
            background: var(--eqg-head-chevron, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>")) center center / 1rem no-repeat;
        }




/* For virtualized grids, it's essential that all rows have the same known height */
    .grid tr {
        height: 20px;
    }
.grid tbody tr {
    background-color: var(--eqg-row-bg, #EBEBEB);
}
    .grid tbody tr:nth-child(even) {
        background: var(--eqg-row-alt-bg, white);
    }

    .grid tr:has(> td span.cnfrmdIsTrue) {
        background: rgb(180,255,180);
    }

    .grid tr:has(> td span.cnfrmdIsFalse) {
        background: #bb2d3b;
    }

    .grid tr:has(> td span.RowRedBG) {
        background: #bb2d3b;
        color:white;
    }

    .grid tr:has(> td span.RowGreenBG) {
        background: lightGreen;
    }

.grid tr:has(> td span.RowYellowBG) {
        background: yellow;
    }

    .grid tr:has(> td span.RowBlueBG) {
        background: #0074D9;
        color: white;
    }

.grid tr:has(> td span.RowOrangeBG) {
        background: orange;
    }

.grid tr:has(> td span.RowOrangeRedBG) {
    background: orangered;
}

.grid tr:has(> td span.RowVioletBG) {
    background: blueviolet;
    color: white;
}

/* FR-751: een link in een gekleurde statusrij (bijvoorbeeld de naam van de flexwerker op de
   betaallijst) hield de standaard linkkleur #0071c1. Op de blauwe rij "Afwachten" (#0074D9) viel de
   naam daardoor volledig weg, en op rood, violet, oranje en geel was hij slecht leesbaar. Links --
   en de rode foutmeldingen -- volgen nu de tekstkleur van de rij en blijven herkenbaar aan hun
   onderstreping. */
.grid tr:has(> td span.RowRedBG) a,
.grid tr:has(> td span.RowBlueBG) a,
.grid tr:has(> td span.RowVioletBG) a,
.grid tr:has(> td span.cnfrmdIsFalse) a {
    color: white;
    text-decoration: underline;
}

.grid tr:has(> td span.RowRedBG) .text-danger,
.grid tr:has(> td span.RowBlueBG) .text-danger,
.grid tr:has(> td span.RowVioletBG) .text-danger,
.grid tr:has(> td span.cnfrmdIsFalse) .text-danger {
    color: white !important;
}

.grid tr:has(> td span.RowOrangeBG) a,
.grid tr:has(> td span.RowOrangeRedBG) a,
.grid tr:has(> td span.RowYellowBG) a,
.grid tr:has(> td span.RowGreenBG) a {
    color: #212529;
    text-decoration: underline;
}

/* Grijze knoppen in de rij (zoals "Opgelost" bij een foutmelding) vielen op dezelfde donkere rijen weg. */
.grid tr:has(> td span.RowRedBG) .btn-outline-secondary,
.grid tr:has(> td span.RowBlueBG) .btn-outline-secondary,
.grid tr:has(> td span.RowVioletBG) .btn-outline-secondary {
    color: white;
    border-color: white;
}

.grid tr:has(> td span.Row#3A3A3ABG) {
    background: #3A3A3A;
    color: white;
}

.grid tr:has(> td span.RowWhiteBG) {
    background: white;
    color: #3A3A3A;
}




    .grid td {
        border: 1px solid var(--eqg-cell-border, white);
        border-bottom-color: var(--eqg-row-line, var(--eqg-cell-border, white));
    }

.grid-#3A3A3A-border td {
    border: 1px solid #3A3A3A !important;
}

    .grid td {
        padding: 0px 0px 0px 2px !important;
    }
        .grid td {
            font-size: 12px;
        }



.col-form-label {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0;  
    font-size: 15px;
}

select, input, textarea {
    font-size: 14px;
    line-height: normal;
}

.btn{
font-size: 14px;
padding: 0.1rem 0.5rem;
font-weight:100;
}

* {
  /*  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;*/
}

html {
    font-size: 14px;
}

.vh50{
    height:50vh;
}

.vh60{
    height:60vh;
}

.vh70{
    height:70vh;
}

.vh80{
    height:80vh;
}

.vh40{
height:40vh;
}

.vh30{
height:30vh;
}

.vh20{
height:20vh;
}



.table-striped select {
    max-width: unset !important;
}

.file-drop-zone input {
    width: 100%;
    padding: 20px;
}
.file-drop-zone {
    background-color: lightgray;
    width: 100%;
    border: 3px dotted #fb275d;
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    min-height: 100px;    
    border-radius: 10px;
    padding:5px;
}

    .hover{
        background-color: #fb275d;
        border-style:solid;
    }


.hover {
    border-style: solid;
    background-color: #00ca71;
}

.image-container {
    display: flex;
    justify-content: center;
}

    .image-container img {
        width: 50%;
    }


.error-message-container {
    color: red;
    text-align: center;
}



.ql-editor {
    min-height: 400px;
}



.dismiss{
    display:none;
}



.nav .nav-link {
    color: gray;
}

/* Bootstrap 5.3: .nav-link haalt zijn padding uit --bs-nav-link-padding-x/y, en die staan alleen op
   .nav en .navbar-nav. De zijbalkmenu's (NavMenu, CustomerPortal, RecruitersPortal, App, AppFlex)
   gebruiken <nav class="flex-column"> zonder .nav, waardoor de links geen padding meer kregen en de
   iconen links buiten de zijbalk vielen. Dit zijn de vaste waarden uit Bootstrap 5.1. */
nav.flex-column:not(.nav) {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
}

/* Bootstrap 5.3: .modal-content/.modal-header/.modal-body/.modal-footer halen achtergrond, padding en
   randen uit --bs-modal-*-variabelen, en die staan alleen op .modal. De contextmenu's op de planning
   (OrdrPlnSelects) en huisvestingsplanning (HvPlanRsrvtnContextMenu) gebruiken .modal-content los in
   een .card, waardoor de achtergrond transparant werd en de padding wegviel. Dit zijn dezelfde waarden
   die Bootstrap 5.3 zelf op .modal zet. */
.modal-content:not(.modal .modal-content) {
    --bs-modal-padding: 1rem;
    --bs-modal-color: var(--bs-body-color);
    --bs-modal-bg: var(--bs-body-bg);
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);
}

    .nav .nav-link.active {
        color: #3A3A3A;
    }


.grid tr:has(> td a.rowclick), .grid tr:has(> td button.rowclick) {
    cursor:pointer;
}

.grid tr:has(> td a.rowclick):hover, .grid tr:has(> td button.rowclick):hover {
    color: blue;
}

a.rowclick, button.rowclick{
    display:none;
}


.QuickGridTotal thead tr{
    height: 1px;
}




.quickgrid[theme=default] .col-header-content {
    padding-right: 0px !important;
}


.quickgrid[theme=default] .col-title {
    padding: 0px !important;
}

.quickgrid[theme=default] .col-title {
    gap: 0px !important;
}

.row {
    --bs-gutter-x: 0.5rem !important;
}


.sort-indicator {
    display: none;
}




.click-overlay td, .grid td {
    position: relative;
}
/* fix voor iOS */


/* Ensure buttons or interactive elements are ABOVE the overlay and clickable */
.grid .btn, .grid .click {
    position: relative;
    z-index: 0; /* changed, is this still needed? */
    pointer-events: auto;
}


/*no row click in quickgrid, this works for now*/
.row-click-overlay, .row-click {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
    display: block;
}

.row-click-overlay:hover, .row-click:hover {
    background-color: rgba(0, 0, 255, 0.1);
}

.grid tr:has(> td span.row-click-overlay):hover, .grid tr:has(> td a.row-click-overlay):hover {
    background: var(--eqg-row-hover-bg, orange);
    cursor: pointer;
}

/* Row class propagation - propagate class from first cell to entire row */
.grid tr:has(> td span.table-danger) {
    background-color: var(--bs-danger-bg-subtle) !important;
}

.grid tr:has(> td span.table-warning) {
    background-color: var(--bs-warning-bg-subtle) !important;
}

.grid tr:has(> td span.table-success) {
    background-color: var(--bs-success-bg-subtle) !important;
}

.grid tr:has(> td span.table-info) {
    background-color: var(--bs-info-bg-subtle) !important;
}

.grid tr:has(> td span.table-primary) {
    background-color: var(--bs-primary-bg-subtle) !important;
}

.grid tr:has(> td span.table-secondary) {
    background-color: var(--bs-secondary-bg-subtle) !important;
}


/* container die jij al zette */
.quickgrid .col-header-content {
    display: flex;
    align-items: center;
}

/* Titel eerst (links) */
.quickgrid .col-title {
    order: 1;
}

/* Optiesknop naar het uiteinde (rechts) */
.quickgrid .col-options-button {
    order: 2;
    margin-left: auto;
}

/* FR-738: bij een kolom met Align="Align.Right" hoort de kop ook rechts te staan. De koptekst zit in een
   flex-knop (.col-title) die de hele kolombreedte vult, dus de tekst bleef links staan terwijl de bedragen
   eronder rechts stonden. QuickGrid zet op zo'n kolom col-justify-right (Align.Right) of col-justify-end. */
.grid thead th.col-justify-right .col-title,
.grid thead th.col-justify-end .col-title,
.quickgrid th.col-justify-right .col-title,
.quickgrid th.col-justify-end .col-title {
    justify-content: flex-end;
}

/* In de EasyQuickGrid-kop staat rechts ook nog de optieknop; die duwt zichzelf normaal met margin-left: auto
   naar rechts en zou de titel weer naar links trekken. */
.grid thead th.col-justify-right .col-options-button,
.grid thead th.col-justify-end .col-options-button {
    margin-left: 0;
}



.quickgrid .col-options {
    right: 0 !important;
    min-width: 270px;
}

.tag-btn{
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .3rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background-color: #0084ff;
    color: white;
}

.nav-tabs .nav-link {
    
    border: solid 1px #f1f2f4 !important;
}
.nav-tabs .nav-link.active {
    color: darkorchid !important;
    background-color: rgba(0, 0, 0, 0.02) !important;
    /*border: solid 1px darkorchid !important;*/
    /*color: white !important;
    background-color: darkslategrey !important;*/
}

/* FR-63: volgorde-lijst (EasyOrderList) in het venster "Volgorde" van het job portal (vacatures op /job en
   jobdetails). Elke rij is handvat en drop-doel; de pijltjes rechts doen hetzelfde zonder slepen. */
.easy-order-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.easy-order-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    cursor: grab;
    user-select: none;
}

.easy-order-row:active {
    cursor: grabbing;
}

.easy-order-grip {
    color: #adb5bd;
}

.easy-order-position {
    min-width: 2.2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #6c757d;
}

.easy-order-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.easy-order-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.easy-order-subtitle {
    font-size: 0.85em;
    color: #6c757d;
}

.easy-order-buttons {
    flex: 0 0 auto;
}

.easy-order-source {
    opacity: 0.4;
}

.easy-order-target {
    border-color: #0d6efd;
    box-shadow: inset 0 3px 0 #0d6efd;
}

/* EasyQuickGrid: de AI-vraag staat achter een subtiel knopje in de werkbalk; het paneel zweeft eronder. */
.eqg-ai-toggle { border: 0; background: transparent; color: var(--bs-secondary-color); opacity: .5; padding: .3rem .45rem; margin-top: .1rem; border-radius: .375rem; line-height: 1; }
.eqg-ai-toggle:hover, .eqg-ai-toggle:focus-visible, .eqg-ai-toggle.open { opacity: 1; color: var(--bs-primary); background: var(--bs-tertiary-bg); }
.eqg-ai-toggle.busy { opacity: 1; color: var(--bs-primary); }
.eqg-ai-backdrop { position: fixed; inset: 0; z-index: 1049; }
.eqg-ai-panel { position: absolute; top: calc(100% + .25rem); right: 0; z-index: 1050; width: 28rem; max-width: calc(100vw - 2rem); text-align: start; }

/* =====================================================================================
   Stijlvarianten van EasyQuickGrid (klasse eqg-theme-* op de .grid-container).
   Alleen de kleuren van kop, rijen, lijnen en hover verschillen; rijhoogte (20px), celpadding en
   lettergrootte (12px) blijven gelijk, zodat elke variant evenveel data laat zien.
   "classic" is de opmaak van hierboven (geen variabelen gezet). De overige varianten volgen de
   kleuren van de filterbalk van het Kandidaten Log V2 (EasyFilterBar): witte kaart met rand #e3e5e9,
   afgeronde hoeken 8px, labelgrijs #6b7280 en het lichtblauw #e7f0fd / #0b5ed7 van de aan-chips.
   Keuze: EasyQuickGrid.Theme of de "Stijl"-knop in de werkbalk (localStorage QuickGrid.Theme).
   ===================================================================================== */
.grid.eqg-theme-soft,
.grid.eqg-theme-zebra,
.grid.eqg-theme-dark,
.grid.eqg-theme-blue {
    border: solid 1px #e3e5e9;
    border-radius: 8px;
    background-color: #fff;
    --eqg-row-bg: #fff;
    --eqg-row-alt-bg: #fff;
    --eqg-cell-border: transparent;
    --eqg-row-line: #eef0f3;
    --eqg-row-hover-bg: #e7f0fd;
}

/* Licht: grijze kop, witte rijen met een dunne lijn ertussen. */
.grid.eqg-theme-soft {
    --eqg-head-bg: #f6f7f9;
    --eqg-head-color: #4b5563;
    --eqg-head-shadow: inset 0 -1px 0 #e3e5e9;
    --eqg-head-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
}

/* Licht met zebra: als Licht, maar om en om een heel licht grijze rij in plaats van lijnen. */
.grid.eqg-theme-zebra {
    --eqg-head-bg: #f6f7f9;
    --eqg-head-color: #4b5563;
    --eqg-head-shadow: inset 0 -1px 0 #e3e5e9;
    --eqg-head-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
    --eqg-row-alt-bg: #f3f4f6;
    --eqg-row-line: transparent;
}

/* Donkere kop: de vertrouwde donkere kop in de witte kaart, met lichte rijen. */
.grid.eqg-theme-dark {
    --eqg-head-bg: #374151;
    --eqg-head-color: #fff;
}

/* Blauwe kop: kop in het lichtblauw van de aan-chips, zebra in heel licht grijs. */
.grid.eqg-theme-blue {
    --eqg-head-bg: #e7f0fd;
    --eqg-head-color: #0b5ed7;
    --eqg-head-shadow: inset 0 -1px 0 #9ec5fe;
    --eqg-head-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230b5ed7' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
    --eqg-row-alt-bg: #f3f4f6;
    --eqg-row-line: transparent;
    --eqg-row-hover-bg: #d6e6fb;
}


/* -------------------------------------------------------------------------------------
   Uitgesprokener varianten: hier wordt ook met rondingen, rij-afstand, schaduw en een donkere
   kop/achtergrond gespeeld. Rijhoogte en celpadding blijven gelijk, behalve bij "cards"
   (4px lucht tussen de rijen, dus iets minder rijen in beeld).
   ------------------------------------------------------------------------------------- */

/* Blauwe balk: kop met blauw verloop, kaart met 12px hoeken en zachte schaduw, lichtblauwe zebra. */
.grid.eqg-theme-bluebar {
    border: solid 1px #dbe4f3;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(11, 94, 215, 0.08);
    --eqg-head-bg: linear-gradient(90deg, #0b5ed7, #3b82f6);
    --eqg-head-color: #fff;
    --eqg-head-shadow: none;
    --eqg-row-bg: #fff;
    --eqg-row-alt-bg: #f3f7fd;
    --eqg-cell-border: transparent;
    --eqg-row-line: transparent;
    --eqg-row-hover-bg: #d6e6fb;
}

    /* Het verloop hoort op de hele kop, niet per kolomtitel opnieuw beginnen. */
    .grid.eqg-theme-bluebar thead th .col-title {
        background: transparent;
    }

/* Paars: sluit aan bij de paarse actieve tab (darkorchid) van de tabbladen. */
.grid.eqg-theme-purple {
    border: solid 1px #e6dcf0;
    border-radius: 10px;
    background-color: #fff;
    --eqg-head-bg: #f5eefa;
    --eqg-head-color: #6b21a8;
    --eqg-head-shadow: inset 0 -2px 0 #c084fc;
    --eqg-head-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b21a8' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
    --eqg-row-bg: #fff;
    --eqg-row-alt-bg: #faf7fc;
    --eqg-cell-border: transparent;
    --eqg-row-line: transparent;
    --eqg-row-hover-bg: #f3e8ff;
}

/* Raster: spreadsheet-achtig, witte kop met een zwarte onderlijn en lijnen tussen alle cellen. */
.grid.eqg-theme-lines {
    border: solid 1px #d3d7dd;
    border-radius: 4px;
    background-color: #fff;
    --eqg-head-bg: #fff;
    --eqg-head-color: #111827;
    --eqg-head-shadow: inset 0 -2px 0 #111827;
    --eqg-head-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23111827' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
    --eqg-row-bg: #fff;
    --eqg-row-alt-bg: #fff;
    --eqg-cell-border: #e3e5e9;
    --eqg-row-line: #e3e5e9;
    --eqg-row-hover-bg: #fff8e1;
}

/* Kaal: geen kaart en geen kopachtergrond; kleine hoofdletters in de kop, alleen dunne lijnen. */
.grid.eqg-theme-minimal {
    --eqg-head-bg: #fff;
    --eqg-head-color: #111827;
    --eqg-head-shadow: inset 0 -1px 0 #111827;
    --eqg-head-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
    --eqg-row-bg: #fff;
    --eqg-row-alt-bg: #fff;
    --eqg-cell-border: transparent;
    --eqg-row-line: #f0f1f3;
    --eqg-row-hover-bg: #f6f7f9;
}

    .grid.eqg-theme-minimal thead th .col-title-text {
        font-size: 11px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

/* Losse rijen: elke rij als eigen afgeronde kaart met 4px lucht ertussen; de kop als grijze balk. */
.grid.eqg-theme-cards {
    padding: 0 2px;
    --eqg-head-bg: #f6f7f9;
    --eqg-head-color: #4b5563;
    --eqg-head-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
    --eqg-row-bg: #fff;
    --eqg-row-alt-bg: #fff;
    --eqg-cell-border: transparent;
    --eqg-row-line: transparent;
    --eqg-row-hover-bg: #e7f0fd;
}

    .grid.eqg-theme-cards table {
        border-collapse: separate;
        border-spacing: 0 4px;
    }

    .grid.eqg-theme-cards thead {
        top: -4px; /* de border-spacing boven de kop wegwerken bij het plakken */
        background: #fff;
    }

    .grid.eqg-theme-cards thead th:first-child {
        border-radius: 8px 0 0 8px;
    }

    .grid.eqg-theme-cards thead th:last-child {
        border-radius: 0 8px 8px 0;
    }

    .grid.eqg-theme-cards tbody td {
        border-top: solid 1px #e3e5e9;
        border-bottom: solid 1px #e3e5e9;
    }

    .grid.eqg-theme-cards tbody td:first-child {
        border-left: solid 1px #e3e5e9;
        border-radius: 8px 0 0 8px;
    }

    .grid.eqg-theme-cards tbody td:last-child {
        border-right: solid 1px #e3e5e9;
        border-radius: 0 8px 8px 0;
    }

    .grid.eqg-theme-cards tbody tr:hover td {
        border-color: #9ec5fe;
    }

/* Donker: donkere kaart met lichte tekst; de statuskleuren van rijen (RowGreenBG, table-warning, ...)
   houden hun eigen kleur en steken er bewust uit. */
.grid.eqg-theme-night {
    border: solid 1px #374151;
    border-radius: 8px;
    background-color: #111827;
    color: #e5e7eb;
    --eqg-head-bg: #0f172a;
    --eqg-head-color: #cbd5e1;
    --eqg-head-shadow: inset 0 -1px 0 #374151;
    --eqg-row-bg: #1f2937;
    --eqg-row-alt-bg: #111827;
    --eqg-cell-border: transparent;
    --eqg-row-line: transparent;
    --eqg-row-hover-bg: #1e3a5f;
}

    .grid.eqg-theme-night a {
        color: #93c5fd;
    }

    /* Lichte statusachtergronden krijgen in de donkere variant weer donkere tekst. (De table-*-rijen
       niet: hun --bs-*-bg-subtle bestaat pas in Bootstrap 5.3, tot die tijd blijven ze donker.) */
    .grid.eqg-theme-night tr:has(> td span.cnfrmdIsTrue),
    .grid.eqg-theme-night tr:has(> td span.RowGreenBG),
    .grid.eqg-theme-night tr:has(> td span.RowYellowBG),
    .grid.eqg-theme-night tr:has(> td span.RowOrangeBG) {
        color: #111827;
    }

/* Ruim: zoals de tabel van de wervingscampagnes op /jobs (FR-805): witte kaart met een zachte schaduw in
   plaats van een rand, een lichtgrijze kop met halfvette grijze titels, dunne lijnen tussen de rijen en een
   grijze hover op elke rij. Bewust ruimer dan de andere varianten (letters 13,6px, cellen 5px 8px): voor
   lijsten met weinig regels waar leesbaarheid boven aantal gaat, zoals overzichten en tabbladen van een kaart.
   Vastzetten op een pagina met Theme="spacious". */
.grid.eqg-theme-spacious {
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --eqg-head-bg: #f8f9fa;
    --eqg-head-color: #6c757d;
    --eqg-head-shadow: inset 0 -1px 0 #eee;
    --eqg-head-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236c757d' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
    --eqg-row-bg: #fff;
    --eqg-row-alt-bg: #fff;
    --eqg-cell-border: transparent;
    --eqg-row-line: #eee;
    --eqg-row-hover-bg: #f8f9fa;
}

    .grid.eqg-theme-spacious thead {
        font-size: 0.85rem;
    }

        .grid.eqg-theme-spacious thead th {
            padding: 5px 8px;
            white-space: nowrap;
        }

            .grid.eqg-theme-spacious thead th .col-title {
                font-weight: 600;
            }

    .grid.eqg-theme-spacious td {
        padding: 5px 8px !important;
        font-size: 0.85rem;
        vertical-align: top;
    }

    .grid.eqg-theme-spacious tbody tr:hover {
        background: var(--eqg-row-hover-bg);
    }
/* Markdown-opmaak uit MarkdownRenderer (FR-855): tabellen, kaders, labels, afbeeldingen,
   scheidingslijnen en de blokken :::kaarten en :::uitgelicht. Globaal, zodat het overal werkt waar
   de renderer gebruikt wordt (handboek, dagtaken, bewerkveld). Selectors met drie klassen, zodat de
   gescopete kop- en alinea-regels van de pagina's ze niet overschrijven. */
.md-table-wrap {
    overflow-x: auto;
    margin: .25rem 0 .9rem;
}

.md-table-wrap .md-table {
    border-collapse: collapse;
    width: 100%;
    font-size: .92rem;
}

    .md-table-wrap .md-table th,
    .md-table-wrap .md-table td {
        border-bottom: 1px solid #dee2e6;
        padding: .45rem .7rem;
        vertical-align: top;
        text-align: left;
    }

    .md-table-wrap .md-table th {
        background: #f1f5fb;
        color: #1e3052;
        font-weight: 600;
        border-bottom: 2px solid #c9d6ea;
    }

    .md-table-wrap .md-table tbody tr:nth-child(even) td {
        background: #fafbfd;
    }

.md-callout {
    border: 1px solid;
    border-left-width: 4px;
    border-radius: .5rem;
    padding: .7rem 1rem .3rem;
    margin: .4rem 0 .9rem;
}

    .md-callout .md-callout-title {
        font-weight: 600;
        margin-bottom: .3rem;
    }

    .md-callout .md-callout-title i {
        margin-right: .3rem;
    }

.md-callout-tip { background: #edf8f1; border-color: #b5dfc4; border-left-color: #1f8a4c; }
.md-callout-tip .md-callout-title { color: #1f8a4c; }
.md-callout-info { background: #edf4fd; border-color: #bcd6f5; border-left-color: #2f6fd6; }
.md-callout-info .md-callout-title { color: #2f6fd6; }
.md-callout-letop { background: #fff6e8; border-color: #f3d4a4; border-left-color: #b25e00; }
.md-callout-letop .md-callout-title { color: #b25e00; }
.md-callout-waarschuwing { background: #fdeeee; border-color: #f0c0c0; border-left-color: #c0392b; }
.md-callout-waarschuwing .md-callout-title { color: #c0392b; }

.md-quote {
    border-left: 3px solid #c9d6ea;
    padding: .1rem 0 .1rem .9rem;
    margin: .4rem 0 .9rem;
    color: #4d5b75;
    font-style: italic;
}

.md-label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
    padding: .1rem .55rem;
    border-radius: 999px;
    vertical-align: .1em;
    white-space: nowrap;
}

.md-label-groen { color: #1f8a4c; background: #e3f4ea; }
.md-label-blauw { color: #2f6fd6; background: #e4edfc; }
.md-label-oranje { color: #b25e00; background: #fdf0de; }
.md-label-rood { color: #c0392b; background: #fbe4e2; }
.md-label-paars { color: #6b5bb5; background: #ece9f8; }
.md-label-grijs { color: #4d5b75; background: #eceff4; }

.md-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
    border: 1px solid #dee2e6;
    margin: .4rem 0 .9rem;
}

.md-rule {
    border: 0;
    border-top: 1px solid #dee2e6;
    margin: 1.2rem 0;
    opacity: 1;
}

.md-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: .5rem 0 1rem;
}

    .md-cards.md-cards-columns-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md-cards.md-cards-columns-1 {
        grid-template-columns: minmax(0, 1fr);
    }

@media (max-width: 700px) {
    .md-cards.md-cards.md-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

    .md-cards .md-card {
        background: #fff;
        border: 1px solid #dde4ee;
        border-radius: .75rem;
        padding: .9rem 1rem .5rem;
        min-width: 0;
    }

    .md-cards .md-card .md-card-title {
        font-size: 1.02rem;
        font-weight: 700;
        color: #1e3052;
        margin: .1rem 0 .35rem;
    }

    .md-cards .md-card .md-card-label {
        margin-bottom: .45rem;
    }

    .md-cards .md-card p {
        color: #4d5b75;
    }

.md-spotlight {
    background: #1e3052;
    color: #fff;
    border-radius: 1rem;
    padding: 1.3rem 1.4rem .6rem;
    margin: .6rem 0 1.1rem;
}

    .md-spotlight.md-spotlight.md-spotlight h1,
    .md-spotlight.md-spotlight.md-spotlight h2,
    .md-spotlight.md-spotlight.md-spotlight h3,
    .md-spotlight.md-spotlight.md-spotlight h4 {
        color: #fff;
        font-size: 1.4rem;
        font-weight: 800;
        margin: 0 0 .5rem;
    }

    .md-spotlight.md-spotlight p,
    .md-spotlight.md-spotlight li {
        color: #c8d4e8;
    }

    .md-spotlight.md-spotlight a {
        color: #8cc8ff;
    }

    .md-spotlight .md-cards .md-card {
        background: #283d66;
        border-color: #34507d;
    }

    .md-spotlight .md-cards .md-card .md-card-title {
        color: #fff;
    }

    .md-spotlight .md-cards .md-card p {
        color: #c8d4e8;
    }

    .md-spotlight .md-label-groen { color: #8be3b0; background: rgba(111, 211, 154, .16); }
    .md-spotlight .md-label-blauw { color: #a9c7ff; background: rgba(143, 182, 255, .18); }
    .md-spotlight .md-label-oranje { color: #ffc77d; background: rgba(243, 180, 98, .18); }
    .md-spotlight .md-label-rood { color: #ffaaa0; background: rgba(255, 150, 140, .18); }
    .md-spotlight .md-label-paars { color: #cfc5ff; background: rgba(183, 171, 240, .2); }
    .md-spotlight .md-label-grijs { color: #d5dcea; background: rgba(213, 220, 234, .16); }