html {

    font-size: calc(0.4rem + 0.37vw);
}
/*html {
    font-size: 0.8rem;
}*/


/*@media (min-width: 768px) {
  html {

    font-size: small;

  }
}*/

html {

  position: relative;
  min-height: 100%;

}


/* Login view */

.login_link{
    color: #000000;
}

/* Home view */
.home_h1 {
    padding-top: 200px;
    font-weight: bold;
/*    font-size: 1.3em;*/
}

.home_h1 {
    margin-top: 30px;
  

}

/* Body */

body {
    margin: 0;
    padding: 0;
    font-family: Helvetica;
    background: linear-gradient(160deg,#c5e4e3,#6f93ac);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

a {
    cursor: pointer;
}

header, footer {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

main {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    margin-left: 0.6rem;
    margin-right: 0.6rem;
}

.navbar-right {
    margin-right: 50px;
}

.footer {
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 2.5rem;
    background: #86a9bb;
}

.navbar_top {
    display: inline-block;
}


/* TABLE */
.fixed-table-footer, .fixed-table-header {
    overflow: hidden;
}

.fixed-table-body {
    overflow-x: auto;
    overflow-y: auto;
    height: 100%;
}

.bootstrap-table .table {
    margin-bottom: 0 !important;
    border-bottom: 1px solid #ddd;
    border-collapse: collapse !important;
    border-radius: 1px;
}

.table-header {
    text-align: center;
    vertical-align: middle;
}

/*.table-cell {
    text-align: center;
    vertical-align: middle;
    padding: 0.1rem;
    border: 1px solid darkgrey;
    font-weight: 400;
    margin: 5px auto 5px 0px;
    border-radius: 3px;
}*/

.fixed-table-body thead th .th-inner {
    box-sizing: border-box;
}

.fixed-table-container thead th .sortable {
    cursor: pointer;
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.fixed-table-container thead th .th-inner, .fixed-table-container tbody td .th-inner {
    padding: 8px;
    line-height: 24px;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

tr.bottomline {
    border-bottom: solid 0.1rem;
    border-color: black;
}

th.firstheader {
    min-width: 12em;
    max-width: 12em;
}

th.fixed-column {
    min-width: 10em;
    max-width: 10em;
}

.table-column {
    min-width: 6em;
    max-width: 6em;
    text-align: center;
}

.table-wide-column {
    min-width: 25em;
    max-width: 25em;
}

.table-cell-input {
    text-align: center;
    width: 75px;
}

.table-cell-input:disabled {
    font-weight: 700;
    border: 2px solid black;
    color:black;
}

.table-cell-90 {
    width: 90%; 
}

.table-cell-dropdown {
    width: 75px;
    text-align: left;
}

.table-textarea-input {

}

tbody th.sticky {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    left: 0;
    background-color: whitesmoke;
    z-index: 999;
}

.btn-submit {
    background-color: dodgerblue;
    color: white;
    border: 0;
    border-radius: 2px;

}

.th-non-header {
    font-weight:100 !important;
}

.th-big-header, .th-year-header {
    font-weight: bold;
    font-size: 1.2rem;
}

.th-middle-header {
    font-weight: bold;
}

.td-vertical-middle {
    text-align: center;
    vertical-align: middle;
}

.fifteen-padding-top {
    padding-top:15px;
}


.table-overflow-x {
    overflow-x: auto;
    display: block;
    padding-bottom: 18px;
}

.empty-tr {
    height: 1rem;
}

.tfoot-borderless {
    border-color:transparent;
    border-style: none !important;
    border-width: 0;
}



/* BOXES */

.box {
    position: relative;
    border-radius: 6px;
    background: #fff;
    border-top: 3px solid #fff;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

.box-body {
    padding: 0.8rem;
    background-color: whitesmoke;
    border: 1px solid;
    border-top: none;
}

.box-footer {
    padding: 0.8rem;
    background-color: whitesmoke;
    border-top: none;
}

.box-header {
    padding: 0.8rem;
    background-color: whitesmoke;
    border: 1px solid;
    border-bottom: none;
}

.box-header-table, .box-footer-table {
    padding: 0rem !important;
}

/* SELF MADE CLASSES */

.checkbox-medium {
    height:20px;
    width:20px;
}

.enquete-readonly {
    background-color: #b9c7cc;
    border: 1px solid;
}

.enquete-readonly-placeholder {
    padding-left: 8px;
    padding-right: 43px;
    text-overflow: clip;
}

@media (max-width: 768px) {
    .enquete-readonly-placeholder {
        padding-right: 50px;
    }
}

.disabled-button {
    pointer-events: none;
    background-color:#ddd;
    color: #f1f2f2;
}

.highlight-row {
    background-color: #ffb347 !important;
}

.save-button {
    background-color: #9b9b9b;
}

.override-bootstrap-col-buttons {
    margin-left:105%;
    float:right;
}

.button-on-right {
    margin-left: 5px;
}

.button-on-right-div {
    float: right;
}

.side-menu-button {
    width: 40%
}

/* Thumbnail (eerste foto uit Documentatie - Foto's) linksboven vóór de titel op Vestigings-/
   Vastgoedprofiel (review 28-7). Verborgen totdat JS een foto vindt en de src zet. */
.profiel-thumbnail-title {
    height: 48px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Social media iconen, rechts uitgelijnd in de Telefoon-regel van "Contact & vestigingssoort"
   (review 28-7/4-8): uitgegrijsd zonder link, in merkkleur zodra er een link geregistreerd is.
   Verplaatst uit de titelrij naar de telefoonregel zodat er meer ruimte is en de iconen groter
   kunnen (op eigen verzoek). */
.social-media-icons {
    display: flex;
    gap: .7rem;
    align-items: center;
}
.social-media-icon {
    font-size: 1.6rem;
    /* line-height:1 voorkomt dat het vergroten van font-size extra hoogte aan de regel toevoegt,
       waardoor de telefoon-regel eronder niet mee verschuift (review 4-8). */
    line-height: 1;
    color: #c9c9c9;
    cursor: pointer;
}
.social-media-icon.leeg .tiktok-icon {
    fill: #c9c9c9;
}
.social-media-icon.gevuld.Facebook { color: #1877F2; }
.social-media-icon.gevuld.Instagram { color: #C13584; }
.social-media-icon.gevuld.LinkedIn { color: #0A66C2; }
.social-media-icon.gevuld.YouTube { color: #FF0000; }
.social-media-icon.gevuld.TikTok .tiktok-icon { fill: #000000; }

/* Vestigingsprofiel: vaste marge boven een sectietitel-rij (Start/einde, Werkgelegenheid, SBI/
   Identificatie, Wijk/Buurt/Vestigingsmilieu), i.p.v. een losse <br/> die per rij kon verschillen. */
.profiel-section-gap {
    margin-top: 1.25rem;
}

/* KvK Mutaties zijpaneel: iconenvak in vaste rijen, over de volle breedte uitgelijnd
   (zie review 21-7, punt 36-41). Gebruik data-icon-grid-cols om het aantal iconen per rij te zetten.
   CSS Grid i.p.v. flexbox: repeat(N, 1fr) dwingt exact N even brede kolommen af, ongeacht de inhoud
   van de iconen - flex-basis in percentages bleek onvoorspelbaar (meer/minder items per rij dan
   bedoeld, afhankelijk van content-breedte). */
.kvk-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    padding: 0;
    border-bottom: none;
    list-style: none;
}

.kvk-icon-grid[data-icon-grid-cols="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.kvk-icon-grid-item {
    text-align: center;
    padding: 2px;
    box-sizing: border-box;
    min-width: 0;
}

.kvk-icon-grid-item .side-menu-button {
    width: 100%;
}

.align-right {
    text-align: right;
}

/* Vangnet tegen browser-autofill die de Mutaties-datumvelden blauw/geel kleurt zodra ze gevuld
   zijn (review 28-7 V4.1) - de -webkit-autofill pseudo-class negeert een gewone background-color
   override zonder deze inset box-shadow-truc. */
input.datepicker:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
}

.non-active-copy {
    pointer-events: none;
    color: lightgray;
}

.hidden-row {
    display: none;
}

.dot {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border: solid .5px #332e2e;
    display: inline-block;
    vertical-align: middle;
}

.dot.dot-green {
    background-color: #7ABD91;
}

.dot.dot-red {
    background-color: #FF8989;
}

.gray-border {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
} 

/* BOOTSTRAP ADJUSTMENTS */
.container {
    padding-left:0rem;
    padding-right:0rem;
    max-width:99%;
}

.form-control {
    height: 2rem;
    padding: 8px;
    font-size: inherit;
}

.form-control-1-padding {
    padding: 1rem;
}

.form-control-dropdown {
    @extend .form-control;
    width: 100%;
    padding: 0rem 0.75rem;
    color: #212529;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  
}

form-control-dropdown:disabled{
    background-color: darkgray;
    border-color: gray;
}

/* Vastgoed viewer mode: disabled fields look white (read-only style, not greyed out) */
.vastgoed-viewer input:disabled,
.vastgoed-viewer input[readonly],
.vastgoed-viewer select:disabled,
.vastgoed-viewer textarea:disabled,
.vastgoed-viewer textarea[readonly],
.vastgoed-viewer .form-control:disabled,
.vastgoed-viewer .form-control[readonly] {
    background-color: #ffffff !important;
    opacity: 1 !important;
    color: #212529 !important;
    cursor: default;
    pointer-events: none;
}

.vastgoed-viewer .select2-selection--single {
    background-color: #ffffff !important;
}

/* Viewer role: stack the side-panel icon buttons one per row instead of two per row.
   Button widths are left as-is (e.g. calc(50% - 0.125rem)) - flex-column simply stops
   packing multiple buttons per line, so each keeps its current width. Center them
   (align-items) so the half-width buttons land in the middle of the icon column instead of
   hugging the left edge (zie review 28-7, punt "iconenkolom centreren"). */
.side-menu-buttons-viewer-stack {
    flex-direction: column;
    align-items: center;
    /* Review 4-8: iets meer verticale ruimte tussen de knoppen in viewer-mode dan de gap-1
       (0.25rem) van de reguliere knoppenrij - alleen voor deze gestapelde variant. */
    gap: 0.5rem;
    /* Van boven tot helemaal onder uitlijnen: deze container vult de volle hoogte van het
       zijpaneel (dat door Bootstrap's .row al net zo hoog gerekt wordt als de hoofdinhoud), en
       justify-content verdeelt de knoppen dan over die volledige hoogte i.p.v. bovenaan
       opgestapeld te blijven staan. gap blijft de minimale ruimte tussen de knoppen garanderen. */
    flex: 1 1 auto;
    justify-content: space-between;
}

/* NRVR-zijpaneel: hier blijft het bestaande 2-koloms grid (knoppen op calc(50% - 0.125rem))
   ongewijzigd i.p.v. naar 1 kolom te forceren zoals side-menu-buttons-viewer-stack - alleen de
   gewrapte rijen zelf worden over de volle hoogte van het zijpaneel verdeeld. align-content i.p.v.
   justify-content, want dat laatste verspreidt knoppen ín een rij, niet de rijen onderling. */
.side-menu-buttons-grid-fill {
    flex: 1 1 auto;
    align-content: space-between;
}


.row {
    margin-bottom:0.25em;
}

.spacer-row {
    margin-bottom: 1rem;
}

label {
    vertical-align: middle;
}

.form-control-text-area {
    height: 7rem;
}

.form-control-text-area-small {
    height: 4rem;
}

.bedrijfsprofiel-toelichting-textarea {
    min-height: 7rem; /* ~4 regels */
}

.navbar-right {
    margin-left: auto;
    margin-right: 10px !important;
}

.nav-link {
    color: dimgrey;
    cursor: pointer;
}

.nav-link.active {
    background-color: #73a3bb !important;
    color: white !important;
    font-weight:bolder;
}

.active {
background-color: #73a3bb !important;
    color: white !important;
    font-weight:bolder;

}

/*.btn {
    font-size: inherit;
}*/

.btn-primary {
    background-color: #73a3bb;
    border-color: #9b9b9b;
}

.btn-status-red {
    background-color: #ff8989;
    border-color: #9b9b9b;
    padding: 2px 7px;
    font-size: 0.9em;
}

.btn-status-green {
    background-color: #7ABD91;
    border-color: #9b9b9b;
    padding: 2px 7px;
    font-size: 0.9em;
}

.btn-status-gray {
    background-color: #aaaaaa;
    border-color: #9b9b9b;
    padding: 2px 7px;
    font-size: 0.9em;
}

.extra-col {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* .col-X-5 gebruikte hier "@extend .extra-col;" - dat is SCSS-syntax en werd door de browser
   genegeerd omdat dit bestand ongecompileerd als CSS wordt geserveerd (geen Sass-buildstap in dit
   project). Daardoor hadden deze kolommen nooit hun position/width/padding, wat kolommen liet
   verspringen en velden zonder gutter deed lijken (review 4-8/28-7 huisnummer- en
   Bedrijfsgrootte-uitlijning). Properties van .extra-col hieronder letterlijk overgenomen i.p.v.
   @extend.

   Padding gebruikt bewust dezelfde calc(var(--bs-gutter-x) * .5) als Bootstrap's eigen .col-N-
   klassen (bootstrap.min.css: ".row{--bs-gutter-x:1.5rem;...}"), in plaats van een hardcoded 15px.
   Een vast getal matcht toevallig niet de werkelijke, op deze pagina berekende gutter-waarde
   (afhankelijk van root font-size resulteert dat hier in ~8px, niet 15px), waardoor een input in
   bv. .col-1-5 verder naar binnen kwam te staan dan een input in een standaard .col-4 ernaast -
   zichtbaar als een paar pixels resterende uitlijningsfout op het zoekscherm (Huisnummer-rij). */
.col-0-5 {
    position: relative;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    flex: 0 0 4.16666665%;
    max-width: 4.16666667%;
}

.col-1-5 {
    position: relative;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    flex: 0 0 12.5%;
    max-width: 12.5%;
}

.col-2-5 {
    position: relative;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    flex: 0 0 20.833333325%;
    max-width: 20.833333325%;
}

.col-3-5 {
    position: relative;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    flex: 0 0 29.166666655%;
    max-width: 29.166666655%;
}

.col-4-5 {
    position: relative;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    flex: 0 0 37.499999985%;
    max-width: 37.499999985%;
}

.col-5-5 {
    position: relative;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    flex: 0 0 45.833333315%;
    max-width: 45.833333315%;
}

.col-6-5 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 54.166666645%;
    max-width: 54.166666645%;
}

.col-7-5 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 62.499999975%;
    max-width: 62.499999975%;
}

.col-8-5 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 70.833333305%;
    max-width: 70.833333305%;
}

.col-9-5 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 79.166666635%;
    max-width: 79.166666635%;
}

.col-10-5 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 87.499999965%;
    max-width: 87.499999965%;
}

.col-11-5 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    flex: 0 0 95.8333333%;
    max-width: 95.8333333%;
}

/* SELECT2 ADJUSTMENTS */

.select2-selection__rendered {
    line-height: 15px !important;
    margin-top: 4px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 20px !important;
}


/*Deze regel gebruikt de aangrenzende sibling-selector (+) 
    om de .select2-container te targeten die direct volgt op een select-element 
    met de klasse enquete-dropdown. Dit zorgt ervoor dat de stijlen alleen 
    worden toegepast op de select2-velden die geassocieerd zijn met de klasse enquete-dropdown.*/
select.enquete-dropdown + .select2-container .select2-selection--single .select2-selection__rendered {
    width: 44%;
    text-overflow: clip !important;
}

@media (max-width: 768px) {
    select.enquete-dropdown + .select2-container .select2-selection--single .select2-selection__rendered {
        width: 30%;
    }
}

.select2-container .select2-selection--single {
    height: 2rem !important;
}

.select2-selection__arrow {
    height: 1.5rem !important;
}

/* When a dropdown that is initiated with select2 has a value that's blank, add it to this css 
    to make sure the empty option is still visible in height and doesn't get hidden.
    This is a fix for the select2 dropdowns that are initiated with a blank value. */

#select2-addressAanduiding-results > .select2-results__option, #select2-addressAanduidingModal-results > .select2-results__option {
    height: 2rem !important;
}

/* Template-select in de knoppenrij onder de Vestiging-/Vastgoed-zoekfilters: staat nu in dezelfde
   col-2 (label) / col-4 (select) rasterindeling als "Categorie" erboven, dus de breedte volgt gewoon
   de col-4-breedte (net als bij alle andere .SelectList-select) - geen aparte vaste breedte meer nodig.
   Dit blok krijgt zelf een vaste breedte van 50% (zelfde breedte als de col-lg-6 waar "Categorie" in
   staat) zodat label/select pixel-exact even breed worden - maar via een vaste width i.p.v. Bootstraps
   col-12/col-lg-6, want die laatste zou dit blok onder de lg-breakpoint naar 100% breedte laten
   stacken en zo Template/Zoeken/Reset (footer staat op flex-nowrap) van de knoppenrij af duwen. */
.zoek-template-footer-half {
    /* 50% + half gutter (0.75rem): de footer zelf is geen .row (geen negatieve marges), terwijl de veldrijen
       erboven dat wel zijn - zo eindigt de Template-select op dezelfde lijn als bv. de Naam-input. */
    width: calc(50% + 0.75rem);
}

/* Zelfde hoogte als de "Zoeken"-knop ernaast. Dit project schaalt de root font-size mee met de
   viewportbreedte (zie "html { font-size: calc(0.4rem + 0.37vw) }" bovenaan dit bestand), dus de
   knophoogte is GEEN vaste pixelwaarde - Bootstrap's .btn-hoogte is 2 x 0.375rem padding + 1.5rem
   (line-height 1.5 x font-size 1rem) + 2px rand = calc(2.25rem + 2px). Een vaste "38px !important"
   (eerdere poging) klopte toevallig alleen bij één specifieke viewportbreedte en liep bij smallere/
   bredere schermen uit de pas met de knop - vandaar hier dezelfde rem+calc-formule i.p.v. px, geverifieerd
   pixel-exact gelijk aan de "Zoeken"-knop op zowel 1024px als 1920px breedte. Specifieker dan de
   generieke ".select2-container .select2-selection--single { height: 2rem }" hierboven, die anders wint. */
select.zoek-template-select + .select2-container .select2-selection--single {
    height: calc(2.25rem + 2px) !important;
    line-height: calc(2.25rem) !important;
}

select.zoek-template-select + .select2-container .select2-selection__arrow {
    height: calc(2.25rem) !important;
}

/* Geen leeg-/kruisje-status (zie initZoekSelect2 in siteSelect2.js, allowClear:false voor deze
   select) - dus geen ruimte meer vrijhouden voor het kruisje. Tekst links uitgelijnd, zoals bij de
   andere .SelectList-select-velden (geen text-align override, dat is de select2-default). */
select.zoek-template-select + .select2-container .select2-selection__rendered {
    padding-right: 0 !important;
    /* De algemene ".select2-selection__rendered" geeft 4px margin-top en (elders) 2px padding-bottom, waardoor de
       tekst in deze flex-gecentreerde select ~3px te laag stond - hier uitgezet zodat hij echt in het midden staat. */
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100%;
    display: flex !important;
    align-items: center;
}

/* Review 30-9: veldlabels in de zoekformulieren stonden ~3,6px boven het midden van hun veld en de vinkjes
   ~2,7px boven het midden van hun tekst. position:relative verschuift alleen visueel (rijhoogte blijft gelijk);
   labels in een d-flex-kolom (bv. "t/m" naast WP) zijn al gecentreerd en blijven buiten beschouwing. */
#TabZoekInputVestiging .row:not(.align-items-center) > div.col-1:not(.d-flex) > label,
#TabZoekInputVestiging .row:not(.align-items-center) > div.col-2:not(.d-flex) > label,
#TabZoekInputVastgoed .row:not(.align-items-center) > div.col-1:not(.d-flex) > label,
#TabZoekInputVastgoed .row:not(.align-items-center) > div.col-2:not(.d-flex) > label {
    position: relative;
    top: 0.27rem;
}

#TabZoekInputVestiging .row > div.col-0-5 > input[type="checkbox"],
#TabZoekInputVastgoed .row > div.col-0-5 > input[type="checkbox"] {
    position: relative;
    top: 0.2rem;
}

/* DataTables geeft zijn tabellen standaard "margin: 0 auto". Is de rijentabel smaller dan het scherm (bv. na het
   smaller slepen van kolommen, of op een breed scherm), dan centreert de browser die tabel en staan de rijen
   tegenover de kop verschoven (gemeten: margin-left 78px). De kop en de rijen moeten beide links vastzitten. */
#SearchResults_wrapper .dataTables_scrollHead table,
#SearchResults_wrapper .dataTables_scrollBody table,
#SearchResultsAdres_wrapper .dataTables_scrollHead table,
#SearchResultsAdres_wrapper .dataTables_scrollBody table {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Sleephandvat voor de kolombreedte in de resultaatlijsten (zie _zoekMaakKolommenSleepbaar in siteZoek.js). */
#SearchResults_wrapper .dataTables_scrollHead th,
#SearchResultsAdres_wrapper .dataTables_scrollHead th {
    position: relative;
}

.kolom-sleephandvat {
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 3;
}

.kolom-sleephandvat:hover,
body.kolom-wordt-gesleept .kolom-sleephandvat:active {
    background: rgba(115, 163, 187, 0.45);
}

body.kolom-wordt-gesleept {
    cursor: col-resize;
    user-select: none;
}

/* Rechts uitgelijnde numerieke kolommen (ZoekKolom.Uitlijning: "rechts", zie siteZoek.js). */
.zoek-col-rechts {
    text-align: right;
}

.zoek-actions-footer .btn {
    white-space: nowrap;
    flex-shrink: 0;
}


/* Navigation buttons */
/* will add a red border when error is found on page */
.errorTab {
    border-color: red !important;
    border: 5px;
}




/* Backend layout */

.backend-menu {
    background: lightgray;
    color: #fff;
    height: 80vh;
    border: 3px solid white;
}

.backend-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: whitesmoke;
}

.backend-menu ul li {
    padding: 10px;
}

.backend-menu ul li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

.backend-menu li a:hover {
    background-color: #73a3bb;
    color: white;
}

.backend-content {
    padding: 20px;
    height:100%;
/*    height: 80vh;*/
    background-color: whitesmoke;
    border: 3px solid white;
}

/* Ensure all validation error messages are red */
label.error {
    color: red;
    font-size: 14px; /* You can adjust the size if needed */
    font-weight: normal; /* Optional: adjust font weight */
}

/*gives error*/
/*#ManagementMonitorTab, .row {
    overflow-x: hidden;
}*/


/* Ensure text in Naam & Straat columns is truncated */
#SearchResults td.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* >= de breedste vaste kolombreedte (Naam bij Marktaanbod: 200px) in ZoekTemplates.cs, anders knipt CSS eerder af dan de kolom breed is */
    position: relative;
}

/* Kolomkoppen breken anders af bij een smalle vaste kolombreedte (bv. Tijdreeks/Marktaanbod) - de
   td-regel hierboven voorkomt dat al voor de celwaarden. DataTables' scrollX zet de <th>'s in een
   losse geklonede header-tabel binnen .dataTables_scrollHead (zonder de #SearchResults-id zelf), dus
   scopen via de wrapper-div i.p.v. de tabel-id. */
#SearchResults_wrapper th.truncate-text {
    white-space: nowrap;
}

/* Ensure text in Naam & Straat columns is truncated */
#SearchResultsCB td.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    position: relative;
}

/* Vastgoed search results truncation */
#SearchResultsAdres td.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

/* Kolomkoppen breken anders af bij een smalle vaste kolombreedte (bv. "E-label" op 35px) - de
   td-regel hierboven voorkomt dat al voor de celwaarden. DataTables' scrollX zet de <th>'s in een
   losse geklonede header-tabel binnen .dataTables_scrollHead (zonder de #SearchResultsAdres-id zelf),
   dus scopen via de wrapper-div i.p.v. de tabel-id. */
#SearchResultsAdres_wrapper th.truncate-text {
    white-space: nowrap;
}

/* Review 15-9 V10 (geen horizontale scrollbalk): de Bootstrap/DataTables-standaardpadding (8px links/
   rechts in de cellen, 8px/26px in de kop voor het sorteericoon) komt bovenop de vaste kolombreedtes
   (Breedte in ZoekTemplates/ZoekVastgoedTemplates, content-box) en maakte de tabel per kolom ~36px
   breder dan opgegeven (Marktaanbod: 1929px, dus ook op 1920px breed scrollbalk). Compactere padding. */
#SearchResults_wrapper th, #SearchResultsAdres_wrapper th {
    padding-left: 4px;
    padding-right: 18px;
}
#SearchResults_wrapper td, #SearchResultsAdres_wrapper td {
    padding-left: 4px;
    padding-right: 4px;
}

/* Tooltip styling */
.tooltip-text {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    white-space: normal; 
    word-break: break-word; 
    position: absolute;
    z-index: 1000;
    display: none;
    max-width: 400px;
    overflow: hidden;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

/* Add small triangle below tooltip */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 10%;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}


.vestiging_search_form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.panel-min {
    min-height: 300px; /* or calc(100vh - 180px) */
    display: flex;
    flex-direction: column;
}

.panel-min .panel-scroll {
    flex: 1 1 auto;
    min-height: 0; /* critical for flex children to allow scrolling */
    overflow: auto;
    padding-bottom: .75rem; /* avoid visual overlap with footer */
}

.panel-min .box-footer {
    margin-top: auto; /* push footer to bottom */
}

/* Single select: keep height but give text breathing room */
.select2-container--default .select2-selection--single {
    height: 38px; /* match your Bootstrap control height */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px; /* slightly less than container height */
    padding-bottom: 2px; /* extra room for descenders */
    /* optional: inherit font for consistent metrics */
    font-size: inherit;
    font-family: inherit;
}

/* If you use form-control-sm / -lg, tweak the numbers: */
.form-control-sm ~ .select2-container--default .select2-selection--single {
    height: 31px;
}

.form-control-sm ~ .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 29px;
    padding-bottom: 2px;
}

.form-control-lg ~ .select2-container--default .select2-selection--single {
    height: 48px;
}

.form-control-lg ~ .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px;
    padding-bottom: 2px;
}

/* Multi-select (chips) � prevent clipping as well */
/* Review 30-9: multiselects even hoog als de gewone selects (2rem, zie .select2-selection--single hierboven)
   i.p.v. 38px; de chips en het zoekveld zijn daarvoor iets compacter gemaakt. */
.select2-container--default .select2-selection--multiple {
    min-height: 2rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    /* flex + min-height: één rij is precies zo hoog als een gewone select (2rem minus de 2 randen); bij
       meerdere chips die op meerdere regels komen groeit het veld gewoon mee. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: calc(2rem - 2px);
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    line-height: 1.25 !important; /* avoid tight clipping in tags */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 2px;
    margin-bottom: 2px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.3;
}

.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 0;
    height: 1.2rem;
    line-height: 1.2rem;
}


.readonly-select {
    pointer-events: none; /* block mouse */
    background-color: #e9ecef;
}

.readonly-select:focus {
    outline: none;
}

.select2-container .select2-selection.s2-readonly,
.AdresWijkList-select.readonly-select + .select2 .select2-selection {
    background-color: #e9ecef;
}

.select2-container .select2-selection.s2-readonly,
.WerklocatieTypeList-select.readonly-select + .select2 .select2-selection {
    background-color: #e9ecef;
}



.tilePictogram {
    text-align: center;
    padding: 0px;
    background: #ffebcd;
    border-right: 0px solid #126cbf;
}


.tilePictogramLogo {
    position: relative;
    height: 82%;
    bottom: 0px;
    margin-top: 10%;
    max-height: 85%;
    margin-bottom: auto;
}




/* base look (adjust to your palette) */
.opm-field {
    transition: background-color .15s ease, border-color .15s ease;
    background-color: #f8f9fa; /* light gray */
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 75px;
}
    /* darker when it contains text */
    .opm-field.opm-filled {
        background-color: #e0e0e0; /* darker gray when filled */
        border-color: #bdbdbd;
    }
    /* keep readonly subtle, but still allow filled state to darken it */
    .opm-field[readonly] {
        background-color: #f1f3f5;
    }

        .opm-field[readonly].opm-filled {
            background-color: #dcdfe3;
        }
    /* optional focus */
    .opm-field:focus {
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.1);
    }

/* overlay editor */
.opm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opm-dialog {
    background: #fff;
    width: min(800px, 90vw);
    max-height: 80vh;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.opm-textarea {
    width: 100%;
    min-height: 200px;
    max-height: 55vh;
    resize: vertical;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font: inherit;
}

.opm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn-opm {
    padding: .4rem .9rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #f8f9fa;
}

    .btn-opm.primary {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
    }

/* CB Icon - Custom Icon Class */
.icon-cb {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url('/CB-icoon-wit.ico');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.icon-cb-disabled {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url('/CB-icoon-wit.ico');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    opacity: 0.5;
}

.fade-out {
    opacity:0;
    transition: opacity 500ms ease;
}


.backend-menu {
    background: #fff;
}

.backend-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.backend-ul li {
    margin-bottom: 2px;
}

.backend-menu a {
    display: block;
    padding: 10px 14px;
    color: #333;
    text-decoration: none;
    border-left: 4px solid transparent;
    transition: background-color 0.2s ease;
}

.backend-menu a:hover {
background-color: #f2f2f2;
}

.backend-menu a.active-tab {
background-color: #e6f0ff;
color: #003a8f;
font-weight: 600;
border-left: 4px solid #0d6efd;
}

.backend-menu a.active-tab i {
    color: #0d6efd;
}

/* Backend group headers */
.backend-menu .backend-group-header {
    display: block;
    padding: 10px 14px;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    border-left: 4px solid transparent;
    background-color: #f8f8f8;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.backend-menu .backend-group-header:hover {
    background-color: #ebebeb;
    color: #333;
    text-decoration: none;
}

.backend-group-arrow {
    transition: transform 0.2s ease;
    font-size: 0.75em;
    margin-top: 3px;
}

.backend-menu .backend-group-header[aria-expanded="true"] .backend-group-arrow {
    transform: rotate(180deg);
}

.backend-subul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #f2f2f2;
}

.backend-subul li {
    margin: 0;
}

.backend-menu .backend-subitem {
    display: block;
    padding: 8px 14px 8px 28px;
    color: #444;
    text-decoration: none;
    border-left: 4px solid transparent;
    font-size: 0.95em;
    transition: background-color 0.2s ease;
}

.backend-menu .backend-subitem:hover {
    background-color: #e0e8f0;
    color: #333;
    text-decoration: none;
}

.backend-menu .backend-subitem.active-tab {
    background-color: #e6f0ff;
    color: #003a8f;
    font-weight: 600;
    border-left: 4px solid #0d6efd;
}

/* Normalize all checkboxes */
input[type="checkbox"] {
    width: 14px;
    height: 14px;
    transform: scale(1.1); /* tweak: 1.0 � 1.3 */
    cursor: pointer;
}
/* C3 - Mutatielijst groter */
#MutatieVestigingTab {
    min-height: 650px;
}
#BOGMutatiesTab {
    min-height: 650px;
}

/* Numeric spinner buttons */
.num-spinner {
    display: flex;
    align-items: stretch;
}
.num-spinner input.form-control {
    flex: 1;
    min-width: 0;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.num-spinner-btns {
    display: flex;
    flex-direction: column;
    width: 18px;
    flex-shrink: 0;
    border: 1px solid #ced4da;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden;
}
.num-spinner-btns button {
    flex: 1;
    border: none;
    background: #f8f9fa;
    padding: 0;
    cursor: pointer;
    font-size: 8px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.num-spinner-btns .num-spin-up {
    border-bottom: 1px solid #ced4da;
}
.num-spinner-btns button:hover {
    background: #e2e6ea;
    color: #212529;
}

.zoek-section-toggle-btn i.fa-chevron-up {
    transition: transform .2s ease;
}
.zoek-section-toggle-btn.collapsed i.fa-chevron-up {
    transform: rotate(180deg);
}

/* De Vastgoed-tabbladbalk (.vastgoed-header-tabs, col-lg-4) staat naast de titelkolom
   (.vastgoed-header-title, col-lg-7); met 6 tabs (incl. Duurzaamheid) past dat niet meer in een
   vast 33%-percentage, zeker niet bij een hoger zoomniveau (minder CSS-pixels beschikbaar in de
   viewport). Een scrollbalk op de tabs zelf oogde niet goed - in plaats daarvan groeit de tabs-
   kolom naar zijn eigen inhoudsbreedte (flex-shrink:0, dus nooit kleiner/scrollend) en krimpt de
   titelkolom ernaast mee (flex-grow/shrink, min-width:0 zodat de titeltekst mag wrappen als het
   echt moet) - de tabbalk "groeit naar links" i.p.v. dat er gescrold wordt. */
@media (min-width: 992px) {
    .vastgoed-header-title {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }
    .vastgoed-header-tabs {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
}

/* Zelfde probleem/oplossing als hierboven, maar dan voor de VestigingView-headerrij. Die gebruikt
   ongeprefixte .col-6/.col-6 (dus altijd naast elkaar, niet pas vanaf lg), daarom hier geen
   @media-grens - de override geldt op elke breedte waarop deze twee kolommen naast elkaar staan. */
.vestiging-header-title {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}
.vestiging-header-tabs {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}