/* =====================
   Variabelen & Globale Resets
   ===================== */
:root {
  --kleur-rand: #888;
  --kleur-achtergrond: white;
  --kleur-tekst: #333;
  --kleur-toelichting: #555;
  --kleur-subtiel: #888;
  --kleur-overlay: rgba(0, 0, 0, 0.5);
  --kleur-accent: #333;
  --kleur-accent-tekst: white;
  --kleur-knop-achtergrond: #f0f0f0;
  --rand-radius: 4px;
  --rand-radius-groot: 8px;
  --vp-sidebar-width: 288px;
}

/* FIX: Zorgt dat paddings de breedte van elementen niet opblazen */
*, ::before, ::after {
  box-sizing: border-box;
}

.dark {
  --kleur-achtergrond: #1b1b1f;
  --kleur-knop-achtergrond: #2e2e32;
  --kleur-rand: #555;
  --kleur-tekst: #ddd;
  --kleur-toelichting: #aaa;
  --kleur-subtiel: #888;
  --kleur-accent: #ddd;
  --kleur-accent-tekst: #1b1b1f;
}

/* =====================
   Huisstijl (Licht & Donker)
   ===================== */
html.echte {
  --kleur-rand: #3C3C43;
  --kleur-achtergrond: #F7F0F0;
  --kleur-tekst: #29292E;
  --kleur-toelichting: #3C3C43;
  --kleur-subtiel: #3C3C43;
  --kleur-overlay: rgba(41, 41, 46, 0.6);
  --kleur-accent: #313859;
  --kleur-accent-tekst: #ffffff;
  --kleur-knop-achtergrond: #D5D7E0;
  --vp-c-brand-1: #B03060;
  --vp-c-brand-2: #848CB0;
  --vp-c-brand-3: #B03060;
  --vp-c-brand-soft: rgba(49, 56, 89, 0.1);
  --vp-c-text-1: #29292E;
  --vp-c-text-2: #29292E;
  --vp-c-bg: #ffffff;
  --vp-c-divider: #d4d0ef;
  --vp-c-border: #c8c4e8;
  --vp-c-gutter: #D5D7E0;
  --vp-sidebar-bg-color: #F7E4E8;
  --vp-nav-bg-color: #313859;
}

html.echte.dark {
  --kleur-achtergrond: #29292e;
  --kleur-knop-achtergrond: #3c3c43;
  --kleur-rand: #848cb0;
  --kleur-tekst: #f0dde2;
  --kleur-toelichting: #c8c8d8;
  --kleur-subtiel: #848cb0;
  --kleur-overlay: rgba(0, 0, 0, 0.65);
  --kleur-accent: #ffb7c5;
  --kleur-accent-tekst: #29292e;
  --vp-c-brand-1: #ffb7c5;
  --vp-c-brand-2: #848cb0;
  --vp-c-brand-3: #848cb0;
  --vp-c-brand-soft: rgba(255, 183, 197, 0.1);
  --vp-c-bg: #29292e;
  --vp-c-bg-soft: #3c3c43;
  --vp-c-bg-mute: #3c3c43;
  --vp-c-text-1: #f0dde2;
  --vp-c-text-2: #c8c8d8;
  --vp-c-bg-elv: #29292e;
  --vp-c-divider: #52525a;
  --vp-c-border: #52525a;
  --vp-c-gutter: #29292e;
  --vp-sidebar-bg-color: #3c3c43;
  --vp-nav-bg-color: #1a1a20;
}

/* VitePress overrides per thema */
html.echte .vp-doc a { color: #B03060; }
html.echte .vp-doc a:hover { color: #B03060; opacity: 0.8; }
html.echte .link.active { color: #848cb0 !important; }

html.echte.dark .vp-doc a { color: #ffb7c5; }
html.echte.dark .vp-doc a:hover { color: #ffb7c5; opacity: 0.8; }
html.echte.dark .link.active { color: #ffb7c5 !important; }

/* Navigatie balken (Licht) */
html.echte .VPNav, html.echte .VPNavBar, html.echte .VPNavBar .wrapper,
html.echte .VPNavBar .container, html.echte .VPNavBarTitle,
html.echte .VPNavBarTitle.has-sidebar, html.echte .VPNavBarMenu,
html.echte .VPNavBarExtra { background-color: #313859 !important; }
html.echte .VPNavBar * { color: #D5D7E0 !important; }
html.echte .VPNavBar { border-bottom-color: #848CB0 !important; }
html.echte .VPNavBarTitle.has-sidebar a.title { border-bottom-color: transparent !important; }
html.echte:not(.dark) .VPNavBarAppearance, html.echte:not(.dark) .VPNavBarAppearance * { color: #29292E !important; }

/* Navigatie balken (Donker) */
html.echte.dark .VPNav, html.echte.dark .VPNavBar, html.echte.dark .VPNavBar .wrapper,
html.echte.dark .VPNavBar .container, html.echte.dark .VPNavBarTitle,
html.echte.dark .VPNavBarTitle.has-sidebar, html.echte.dark .VPNavBarMenu,
html.echte.dark .VPNavBarExtra { background-color: #1a1a20 !important; }
html.echte.dark .VPNavBar * { color: #c8c8d8 !important; }

/* Sidebar & Scrollbars */
html.echte .VPSidebarItem .text { color: #29292E; margin: 0 !important; }
html.echte .VPSidebarItem.is-active > .item > .link > .text { color: #B03060 !important; }
html.echte.dark .VPSidebarItem.is-active > .item > .link > .text { color: #FFB7C5 !important; }
html.echte .VPSidebarItem.is-active > .item > .indicator { background-color: #B03060; width: 3px  !important; }
html.echte.dark .VPSidebarItem.is-active > .item > .indicator { background-color: #FFB7C5; width: 3px  !important; }

html.echte .VPSidebar::-webkit-scrollbar-thumb,
html.echte.dark .VPSidebar::-webkit-scrollbar-thumb { background: #848CB0; border-radius: 4px; }
html.echte .VPSidebar::-webkit-scrollbar-track { background: #F7E4E8; }
html.echte.dark .VPSidebar::-webkit-scrollbar-track { background: #3c3c43; }

/* Verborgen VitePress Elementen */
.pager, .VPNavBarHamburger, .header-anchor, .VPNavBarTranslations, html.echte .VPSidebar .curtain { display: none !important; }

.VPSidebar {
  padding-right: 24px !important;
  padding-bottom: 0px !important;
  padding-left: 44px !important;
}

.VPSidebarItem .text { margin: 0 !important; }

.VPNavBarExtra {
  display: none !important;
}

.VPNavBarAppearance {
  display: none !important;
}

.Layout {
  overflow: visible !important;
}

html, body {
  overflow: visible !important;
  height: auto !important;
}

.filter-hoofdknop { margin: 2px 6px 2px 4px; }

/* =====================
   Lay-out & Componenten
   ===================== */

/* Formulieren & Inputs */
.contact-formulier { border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius-groot); padding: 24px; margin: 20px 0; background-color: var(--kleur-achtergrond); }
.form-groep { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }

.form-groep input, .form-groep select, .form-groep textarea,
.modal textarea, .modal input[type="number"], .modal input[type="email"],
.items-per-pagina select, .zoek-input, .sorteer-select {
  border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius);
  padding: 6px 8px; font-family: inherit; font-size: 0.85em; cursor: pointer;
  background-color: var(--vp-c-bg);
}

.form-groep input, .form-groep textarea,
.modal textarea, .modal input[type="number"], .modal input[type="email"],
.zoek-input {
  cursor: text;
}

.zoek-input { min-width: 100%; cursor: text; }

.zoek-input, .sorteer-select { border-width: 2px; height: 40px; }
select.sorteer-select, 
.items-per-pagina select, 
.modal select {
  padding-right: 24px;
  text-overflow: ellipsis;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* Paginering */
.paginering { display: flex; gap: 4px; flex-wrap: wrap; margin: 16px 0 24px; scroll-margin-top: 120px; }
.items-per-pagina { display: flex; align-items: center; gap: 8px; padding-top: 16px; padding-bottom: 8px; border-top: 1px solid var(--vp-c-divider); }

/* Markdown Overrides */
h1 { margin-bottom: 12px !important; }
h3 { margin: 16px 0 4px !important; }
h4 { margin-top: 4px !important; }
h5 { margin-top: 2px !important; margin-bottom: -2px !important; }

.vp-doc h2 { margin: 16px 0 8px !important; padding-top: 16px !important; scroll-margin-top: 80px !important; }
.vp-doc p { margin: 4px 0 0 !important; }
.vp-doc p.modal-toelichting { margin: 8px 0 0px !important; }
.vp-doc ul, .vp-doc ul li, .vp-doc li > ol, .vp-doc ol, .vp-doc ol > li { margin: 0 !important; }
.vp-doc table { font-size: 0.9em; display: block; overflow-x: auto; white-space: nowrap; }
.vp-doc a { color: #5b9bd5; }
.vp-doc a:hover { color: #3a7abf; }
.link.active { color: #5b9bd5 !important; }
a[target="_blank"]::after { content: '\f08e'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.8em; margin-left: 4px; }

/* Filterbalk */
.filter-balk { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 4px; }
.knoppen-naast-elkaar { display: flex; align-items: center; gap: 8px; margin: 4px 0 4px; }
.filter-container { display: flex; flex-direction: column; gap: 12px; }
.filter-rij { display: flex; gap: 12px; justify-content: center; }
.filter-groep { position: relative; }
.filter-dropdown {
  position: absolute; 
  top: 100%; 
  left: 0; 
  z-index: 50; 
  background: var(--kleur-achtergrond);
  border: 1px solid var(--kleur-rand); 
  border-radius: var(--rand-radius); 
  padding: 8px;
  width: max-content; 
  max-width: 90vw; 
  max-height: 300px; 
  overflow-y: auto;
  overscroll-behavior: contain; 
  /* box-shadow: 0 4px 12px var(--kleur-overlay);  */
}
.filter-dropdown::-webkit-scrollbar { width: 6px; }
.filter-dropdown::-webkit-scrollbar-track { background: transparent; }
.filter-dropdown::-webkit-scrollbar-thumb { background-color: var(--kleur-subtiel); border-radius: 4px; }
.filter-optie { display: block; white-space: normal; word-break: break-word; }
.filter-modus, .zoek-wrapper { display: flex; flex-direction: column; }
.zoek-wrapper { gap: 4px; flex: 1; }
.filter-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 11; }
.zoek-velden { display: flex; flex-wrap: wrap; gap: 6px; }
.zoek-label { display: flex; align-items: center; gap: 4px; font-size: 0.8em; color: var(--kleur-subtiel); cursor: pointer; }
.filter-balk-onder { justify-content: space-between; align-items: center; margin-top: 4px; margin-bottom: 12px; }
.filter-staat { display: inline-block; width: 16px; text-align: center; font-size: 14px !important; line-height: 1; }
.filter-staat i { color: var(--kleur-tekst) !important; }
.filter-categorie-knop { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 4px 0; font-weight: bold; font-size: 0.9em; }
.filter-categorie-opties { padding-left: 12px; }
.actieve-filters { max-height: 80px; overflow-y: auto; flex-wrap: wrap; margin: 16px; display: flex; }

/* Knoppen (Gegroepeerd) */
.knop, .melding-knop, .reset-knop, .filter-knop, .wachtwoord-knop, .melding-knop-klein {
  border: 2px solid var(--kleur-rand); border-radius: var(--rand-radius);
  cursor: pointer; background: var(--kleur-achtergrond); font-size: 0.85em;
}
.knop { padding: 6px 16px; }
.knop-primair { background: var(--kleur-accent); color: var(--kleur-accent-tekst); border-color: var(--kleur-accent); }
.melding-knop, .wachtwoord-knop { padding: 4px 12px; background: var(--kleur-knop-achtergrond) !important; font-size: 0.85em; }
.reset-knop, .filter-knop { padding: 4px 12px; background: var(--kleur-knop-achtergrond); align-self: flex-start; height: 40px; }
.filter-knop { white-space: nowrap; }
.doneer-knop {
  display: inline-block; padding: 8px 20px; background: var(--kleur-accent) !important;
  color: var(--kleur-accent-tekst) !important; border: 1px solid var(--kleur-accent) !important;
  border-radius: var(--rand-radius) !important; text-decoration: none; font-size: inherit;
  cursor: pointer; margin: 16px !important;
}
.melding-knop-klein {
  font-size: 0.7em !important;
  padding: 4px 6px !important;
  margin-top: 4px !important;
  line-height: 1 !important;
}

.beslisboom select {
  border: 1px solid var(--vp-c-border);
  border-radius: 4px;
  padding: 4px 8px;
}

/* Tags */
.tag { display: inline-block; border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius); padding: 2px 8px; margin: 2px; font-size: 0.85em; cursor: pointer; }
.tag-uitgesloten { text-decoration: none; }
.tag-uitgesloten span { text-decoration: line-through; }

/* Account Kaart */
.account-kaart h2 { margin: 0 0 4px !important; }
.account-kaart p { margin: 0 !important; }
.account-kaart .tag { cursor: default; margin-top: 8px; }
.account-kaart .melding-knop { margin-top: 0; }
.account-meta { display: flex; gap: 8px; align-items: center; margin: 12px 0 4px !important; }
.aanspreeknaam { font-size: 0.95em; }
.voornaamwoorden, .datum-tekst, .bijgewerkt-tekst, .resultaten-tekst { font-size: 0.8em; color: var(--kleur-subtiel); }
.resultaten-tekst { padding-bottom: 8px; }
.voornaamwoorden, .afkorting { margin-top: 0 !important; }
.beschrijving { font-size: 1em; padding: 4px !important; }
.platform-links { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 8px; }
.afkorting { font-size: 1.2em; color: var(--kleur-tekst); }

/* Datums */
.datum-rij { display: flex; gap: 16px; align-items: baseline; margin-bottom: 2px; }
.datum-rij p, .datum-tekst + .datum-tekst { margin: 0 !important; }
.datum-tekst { margin-top: 4px !important; }

/* Modal */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--kleur-overlay); z-index: 100; display: flex; align-items: flex-start; padding-top: 12vh; justify-content: center; }
.modal { background: var(--kleur-achtergrond); border-radius: var(--rand-radius-groot); padding: 24px; max-width: 600px; width: auto; min-width: 250px; }
.modal h3 { margin-top: 0 !important; text-align: center; }
.modal textarea { width: 100%; resize: vertical; }
.modal input[type="number"] { padding: 2px 6px; }
.modal input[type="email"] { width: 100%; }
.modal select { display: block; margin-top: 4px; margin-bottom: 8px; padding-left: 4px; padding-top: 2px; padding-bottom: 2px; cursor: pointer; }
.modal small { display: block; margin-bottom: 8px; }
.modal-knoppen { display: flex; gap: 8px; margin-top: 16px; justify-content: center; }
.modal-waarschuwing, .wachtwoord-fout { color: red; font-size: 0.85em; margin: 0; }
.modal-fout { color: red; }
.modal-toelichting { font-size: 0.85em; color: var(--kleur-toelichting); line-height: 1.5 !important; }
.modal-label { display: block; margin-top: 4px; margin-bottom: 4px; }
.modal-email { margin-top: 12px; }

.wachtwoord-input { border: 1px solid var(--vp-c-divider); padding: 4px;}
.wachtwoord-scherm { margin: 16px 0; }

.random-lijn { border-top: 1px solid var(--vp-c-divider); margin-top: 16px; margin-bottom: 16px; }
.marge-boven { margin-top: 8px; }
.marge-boven-klein { margin-top: 4px; }
.marge-boven-groot { margin-top: 12px; }

.VPDocFooter { display: none; }

/* Taal Melding */
.taal-melding { 
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  background: var(--kleur-accent); 
  color: var(--kleur-accent-tekst); 
  padding: 16px 20px; 
  border-radius: var(--rand-radius); 
  font-size: 0.9em; 
  z-index: 999; 
  max-width: calc(100% - 40px); /* FIX: Voorkomt dat de melding buiten schermen van 320px breed breekt */
}
.taal-melding-sluit { position: absolute; top: 8px; right: 10px; background: none; border: none; cursor: pointer; color: var(--kleur-accent-tekst); font-size: 1em; line-height: 1; padding: 0; }

/* =====================
   Hover, Focus & Transities
   ===================== */
.form-groep input:focus-visible, 
.form-groep select:focus-visible, 
.form-groep textarea:focus-visible,
.modal textarea:focus-visible, 
.modal input:focus-visible, 
.modal select:focus-visible,
.zoek-input:focus-visible, 
.sorteer-select:focus-visible,
.knop:focus-visible {
  outline: 2px solid var(--kleur-accent);
  outline-offset: 2px;
  border-color: var(--kleur-accent);
}

.knop:hover, .melding-knop:hover, .reset-knop:hover, .filter-knop:hover, .doneer-knop:hover {
  filter: brightness(0.9);
  /* transform: translateY(-1px); */
}

html.echte.dark .knop:hover, 
html.echte.dark .melding-knop:hover, 
html.echte.dark .reset-knop:hover, 
html.echte.dark .filter-knop:hover,
html.echte.dark .doneer-knop:hover {
  filter: brightness(1.2);
}

.taal-melding-sluit:hover {
  opacity: 0.7;
  transform: scale(1.1);
}

.knop, .melding-knop, .reset-knop, .filter-knop, .doneer-knop, .tag, 
.form-groep input, .form-groep select, .form-groep textarea {
  transition: all 0.2s ease-in-out;
}

/* Schaduwen & Overlays */
.filter-dropdown { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.modal-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); animation: modalVerschijnen 0.3s ease-out; }

html.echte.dark .filter-dropdown { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
html.echte.dark .modal { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }

@keyframes modalVerschijnen {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Tekst Overflow & Wrapping */
.vp-doc p, .vp-doc li, .account-kaart p, .modal-toelichting, .filter-optie {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: none;
  white-space: normal;
}

/* FIX: max-width naar 100% gezet om 'viewport bleeding' via 100vw te stoppen */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

html {
  scrollbar-gutter: stable;
}

.select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  cursor: pointer;
}

.select-wrapper .select-pijl {
  position: absolute;
  right: 8px;
  pointer-events: none; /* zodat klikken op het pijltje de select opent */
  color: var(--kleur-subtiel);
  font-size: 0.8em;
}


.VPDoc .content-container {
  max-width: 750px;
}


/* =====================
   Media Queries
   ===================== */
@media (min-width: 960px) {
  html.echte .VPLocalNav { display: none !important; }
  html.echte .VPSidebar { top: calc(64px + var(--vp-layout-top-height, 0px)) !important; height: calc(100vh - 64px - var(--vp-layout-top-height, 0px)) !important; padding-top: 0 !important; border-top: none !important; margin-top: 0 !important; }
}

@media (max-width: 600px) {
  .filter-balk { flex-wrap: wrap; font-size: 0.8em !important; position: relative; }
  .sorteer-select { flex: 1; }
  .zoek-wrapper { flex: 1; min-width: 60%; }
  .zoek-input { min-width: 100%; }
  .melding-knop-kaart { font-size: 0.65em !important; padding: 3px 8px !important; }
  .bijgewerkt-tekst, .datum-tekst, .resultaten-tekst { font-size: 0.7em !important; }
  .melding-knop-klein { font-size: 0.7em !important; padding: 4px 6px !important; margin-top: 4px !important; line-height: 1 !important; }
  
  .modal { width: calc(100% - 20px); max-width: 100%; box-sizing: border-box; }
  
  .filter-groep { position: static; }
  .filter-dropdown {
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 16px);
    max-height: 50vh;
    margin-top: 4px;
  }
  .filter-rij {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: relative;
  }
  .filter-rij > .filter-groep {
    width: 100%;
  }
  .filter-rij > .filter-groep:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: auto;
  }
  .filter-rij .filter-knop {
    white-space: nowrap;
    width: 100%;
  }
}