/* ============================================================
   Reallead huisstijl — override-laag boven Vuexy (core.css/demo.css)
   Bron: docs/design/stijlgids.md (v0.1) + docs/design/preview.html
   Geen SCSS-hercompilatie beschikbaar in dev, daarom overschrijven we
   de Vuexy CSS custom properties na core.css. Django-admin blijft buiten.
   ============================================================ */

/* --- Merk-tokens (thema-neutraal) ----------------------------------
   Deze --rl-* tokens gelden in beide thema's. Het primair-groen is de
   merkkleur en blijft in dark hetzelfde (we lichten alleen de tint op
   in de dark-sectie hieronder). De neutrale/oppervlakte-kleuren worden
   PER THEMA gezet zodat dark zijn eigen (Vuexy) surfaces krijgt. */
:root {
  --rl-primary: #2E6B5E;
  --rl-primary-dark: #245648;
  --rl-mint: #E7F0EC;
  --rl-accent: #9C4221;
  --rl-accent-tint: #F7E8E1;
  --rl-accent-deco: #C4643B;

  --rl-ivory: #FAF6F1;
  --rl-footer: #223F37;
  --rl-footer-link: #BFD6CC;
}

/* --- LICHT thema ---------------------------------------------------
   Alleen hier overschrijven we de Vuexy body/surface/border-kleuren met
   het warme huisstijlpalet. Zo blijft dark ongemoeid en houdt het zijn
   eigen Vuexy-dark kleuren.

   BELANGRIJK — géén bare `:root` hier. Vuexy zet zijn dark-surfaces via
   `[data-bs-theme=dark] { --bs-body-bg: … }` (specificiteit 0,1,0). Een
   bare `:root` (óók 0,1,0) die ná core.css laadt, wint dan op broncode-
   volgorde en dwingt overal de lichte crème/witte surfaces af — óók in
   dark. Daarom scopen we de licht-surfaces STRIKT op de light-selector,
   zodat ze in dark niet matchen en Vuexy-dark zichtbaar wordt. */
[data-bs-theme="light"] {
  /* Neutraal (warm) */
  --rl-bg: #FAF2E5;
  --rl-paper: #FFFFFF;
  --rl-heading: #3D3A34;
  --rl-body: #57534A;
  --rl-muted: #6B665C;
  --rl-border: #E5DFD5;

  /* --- Bootstrap/Vuexy runtime custom properties overschrijven --- */
  --bs-primary: #2E6B5E;
  --bs-primary-rgb: 46, 107, 94;
  --bs-body-bg: #FAF2E5;
  --bs-body-bg-rgb: 250, 242, 229;
  --bs-body-color: #57534A;
  --bs-body-color-rgb: 87, 83, 74;
  --bs-heading-color: #3D3A34;
  --bs-link-color: #2E6B5E;
  --bs-link-color-rgb: 46, 107, 94;
  --bs-link-hover-color: #245648;
  --bs-border-color: #E5DFD5;

  /* Vuexy paper/menu surfaces stay white; page bg becomes crème */
  --bs-paper-bg: #FFFFFF;

  /* Vuexy leidt tinten af van deze tokens (bg-label-primary etc.) */
  --bs-primary-bg-subtle: #E7F0EC;
  --bs-primary-border-subtle: #B9D4CB;
  --bs-primary-text-emphasis: #245648;
}

/* Body-achtergrond expliciet in light (sommige layouts zetten inline bg) */
[data-bs-theme="light"] body {
  background-color: var(--rl-bg);
}

/* --- Knoppen ------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: #2E6B5E;
  --bs-btn-border-color: #2E6B5E;
  --bs-btn-hover-bg: #245648;
  --bs-btn-hover-border-color: #245648;
  --bs-btn-active-bg: #245648;
  --bs-btn-active-border-color: #245648;
  --bs-btn-disabled-bg: #2E6B5E;
  --bs-btn-disabled-border-color: #2E6B5E;
}
.btn-outline-primary {
  --bs-btn-color: #2E6B5E;
  --bs-btn-border-color: #2E6B5E;
  --bs-btn-hover-bg: #2E6B5E;
  --bs-btn-hover-border-color: #2E6B5E;
  --bs-btn-active-bg: #2E6B5E;
  --bs-btn-active-border-color: #2E6B5E;
}

/* Vuexy "label" buttons/badges van primary */
.btn-label-primary,
.bg-label-primary {
  background-color: #E7F0EC !important;
  color: #2E6B5E !important;
}
.btn-label-primary:hover {
  background-color: #2E6B5E !important;
  color: #fff !important;
}

/* Links en tekst-accenten */
.text-primary {
  color: #2E6B5E !important;
}

/* --- Avatars met initialen op mint/terracotta -------------------- */
.avatar-initial.bg-label-primary {
  background-color: #E7F0EC !important;
  color: #2E6B5E !important;
}

/* --- Woordmerk -----------------------------------------------------
   Het volledige woordmerk (mark + "Reallead" in Poppins, Real vet /
   lead regular) zit al in de logo-partial (partials/logo.html). De
   losse app-brand-text-span die Vuexy ernaast rendert, verbergen we
   zodat de naam niet dubbel verschijnt. */
.app-brand-text { display: none !important; }
.rl-wordmark {
  font-family: "Poppins", "Public Sans", -apple-system, "Segoe UI", sans-serif !important;
  color: var(--rl-heading);
  letter-spacing: -0.01em;
}
.rl-wordmark .rl-w-bold { font-weight: 700; }
.rl-wordmark .rl-w-light { font-weight: 400; }

/* --- Logo-afmetingen (FIX klein/vervormd logo) ---------------------
   Vuexy's demo.css forceert `.app-brand-logo.demo svg { width:34px;
   height:24px }` — dat is bedoeld voor het vierkante Vuexy-beeldmerk
   en verminkt ons brede woordmerk (viewBox 254x64, ratio ~4:1) tot een
   klein, uitgerekt vlakje. We overschrijven: hoogte vast, breedte auto,
   zodat het woordmerk zijn eigen verhouding houdt en netjes uitlijnt. */
.app-brand-logo .rl-logo-svg,
.rl-logo .rl-logo-svg {
  width: auto !important;
  height: 34px !important;   /* desktop-navbar richtlijn 34-40px */
  display: block;
}
/* In het zijmenu iets ruimer, past binnen de menubreedte (~260px) */
.menu .app-brand-logo .rl-logo-svg,
.layout-menu .app-brand-logo .rl-logo-svg {
  height: 32px !important;
}
/* Footer: woordmerk mag wat groter voor merkaanwezigheid */
.rl-footer .app-brand-logo .rl-logo-svg {
  height: 38px !important;
}
/* De .rl-logo-span mag niet door demo.css op 24px hoogte worden gezet */
.app-brand-logo.demo .rl-logo { height: auto; }

/* --- Ingeklapt verticaal menu (smalle rail) ------------------------
   Ons woordmerk is breed (~4:1). In de ingeklapte staat past dat niet
   in de smalle menurail. Keuze: dáár tonen we alleen het BEELDMERK.
   De mark beslaat x=0..64 van de viewBox (254 breed); we clippen de
   SVG-container op ~beeldmerkbreedte en verbergen de overflow, zodat
   het woordmerk-deel wegvalt. Bij hover (menu klapt uit) toont Vuexy
   het menu weer volledig en herstelt de volle breedte hieronder. */
@media (min-width: 1200px) {
  .layout-menu-collapsed:not(.layout-menu-hover) .app-brand-logo .rl-logo {
    width: 2rem;              /* ~beeldmerk (32px hoog → ~32px breed) */
    overflow: hidden;
  }
  .layout-menu-collapsed:not(.layout-menu-hover) .app-brand-logo .rl-logo-svg {
    max-width: none;          /* laat de SVG op volle breedte, container clipt */
  }
  /* Bij hover: volledige rail, dus volledig woordmerk weer tonen */
  .layout-menu-collapsed.layout-menu-hover .app-brand-logo .rl-logo {
    width: auto; overflow: visible;
  }
}

/* Toon per thema de juiste logovariant. Standaard (light) de groene,
   in dark de diapositief-variant. */
.rl-logo-dark { display: none !important; }
.rl-logo-light { display: block !important; }
[data-bs-theme="dark"] .rl-logo-light { display: none !important; }
[data-bs-theme="dark"] .rl-logo-dark { display: block !important; }
/* De footer is altijd donker (dennengroen), ook in light mode: daar
   hoort altijd de diapositief-variant. */
.rl-footer .rl-logo-light { display: none !important; }
.rl-footer .rl-logo-dark { display: block !important; }

/* --- Front-page hero/deco-bol (Reallead-tint i.p.v. Vuexy paars) -- */
.rl-hero {
  position: relative;
  overflow: hidden;
}
.rl-hero-deco {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.rl-hero-deco-1 {
  width: 420px; height: 420px; background: var(--rl-mint);
  top: -140px; left: -120px; filter: blur(8px);
}
.rl-hero-deco-2 {
  width: 300px; height: 300px; background: var(--rl-accent-tint);
  bottom: -60px; right: 4rem; filter: blur(8px);
}
.rl-hero > .container { position: relative; z-index: 1; }

/* Volledig ronde deco-bol met initiaal/beeld (preview.html) */
.rl-deco-ball {
  border-radius: 50%;
  background: var(--rl-mint);
  color: var(--rl-primary);
}

/* --- Zoekbalk (hero) --------------------------------------------- */
.rl-search {
  display: flex; gap: .5rem;
  background: var(--rl-paper);
  border: 1px solid var(--rl-border);
  border-radius: 1rem;
  box-shadow: 0 .25rem 1.25rem rgba(61, 58, 52, .08);
  padding: .5rem;
}
.rl-search input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: .55rem .75rem; color: var(--rl-heading);
}
.rl-search input:focus { outline: none; }
.rl-search:focus-within { border-color: var(--rl-primary); }

/* Thema-chips */
.rl-chip {
  background: var(--rl-paper); border: 1px solid var(--rl-border);
  color: var(--rl-muted); border-radius: 50rem;
  padding: .25rem .8rem; font-size: .8125rem; text-decoration: none;
  display: inline-block;
}
.rl-chip:hover { border-color: var(--rl-primary); color: var(--rl-primary); }

/* --- Footer donker (dennengroen) --------------------------------- */
.rl-footer {
  background: var(--rl-footer);
  color: var(--rl-ivory);
}
.rl-footer h6,
.rl-footer .footer-title { color: var(--rl-ivory); }
.rl-footer a,
.rl-footer .footer-link { color: var(--rl-footer-link); text-decoration: none; }
.rl-footer a:hover { color: var(--rl-ivory); text-decoration: underline; }
.rl-footer .footer-logo-description,
.rl-footer .footer-text { color: var(--rl-footer-link); }
.rl-footer .footer-bottom { border-top: 1px solid rgba(250, 246, 241, .18); }

/* Stap-nummers "hoe het werkt" */
.rl-step-num {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--rl-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.15rem; margin: 0 auto 1rem;
}

/* Icoon-vlak (features) */
.rl-icon-box {
  width: 3.25rem; height: 3.25rem; border-radius: .625rem;
  background: var(--rl-mint); color: var(--rl-primary);
  display: flex; align-items: center; justify-content: center;
}

/* Zachte warme kaartschaduw sitebreed (subtiel, laat Vuexy-radius staan) */
.card { box-shadow: 0 .25rem 1.25rem rgba(61, 58, 52, .06); }

/* ============================================================
   DARK MODE — huisstijl bovenop Vuexy-dark
   ------------------------------------------------------------
   Uitgangspunt (opdracht Bart): NEEM de standaard Vuexy-dark
   achtergronden/surfaces over (body #25293c, paper/card #2f3349,
   tekst #acabc1, rand #44485e). We laten die dus met rust en
   overschrijven ALLEEN de merk-accenten:
   - primair groen weer terug (Vuexy zet primary in dark op paars),
   - mint-tint donkerder/transparant zodat labels leesbaar blijven,
   - onze eigen --rl-* surface-tokens mappen naar de Vuexy-dark
     kleuren zodat rl-search / rl-chip / rl-icon-box e.d. meekleuren,
   - footer blijft dennengroen (diapositief-logo via de partial).
   ============================================================ */
[data-bs-theme="dark"] {
  /* --rl-* surface/neutraal-tokens → Vuexy-dark kleuren */
  --rl-bg: #25293c;
  --rl-paper: #2f3349;
  --rl-heading: #cfcde4;
  --rl-body: #acabc1;
  --rl-muted: #7f8296;
  --rl-border: #44485e;
  /* Mint wordt in dark een transparante groene sluier i.p.v. lichtgroen */
  --rl-mint: rgba(143, 191, 175, .16);

  /* Merk: primair groen behouden (Vuexy zou paars zetten).
     Iets lichter groen voor contrast op donkere vlakken. */
  --bs-primary: #4E9C8A;
  --bs-primary-rgb: 78, 156, 138;
  --bs-link-color: #7FC4B4;
  --bs-link-color-rgb: 127, 196, 180;
  --bs-link-hover-color: #A5D8CB;
  --bs-primary-bg-subtle: #223F37;
  --bs-primary-border-subtle: #2E6B5E;
  --bs-primary-text-emphasis: #A5D8CB;
}

/* Knoppen in dark: lichter groen zodat witte tekst leesbaar blijft */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #4E9C8A;
  --bs-btn-border-color: #4E9C8A;
  --bs-btn-hover-bg: #5FB09C;
  --bs-btn-hover-border-color: #5FB09C;
  --bs-btn-active-bg: #5FB09C;
  --bs-btn-active-border-color: #5FB09C;
  --bs-btn-disabled-bg: #4E9C8A;
  --bs-btn-disabled-border-color: #4E9C8A;
  --bs-btn-color: #0f1622;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #7FC4B4;
  --bs-btn-border-color: #4E9C8A;
  --bs-btn-hover-bg: #4E9C8A;
  --bs-btn-hover-border-color: #4E9C8A;
  --bs-btn-hover-color: #0f1622;
  --bs-btn-active-bg: #4E9C8A;
  --bs-btn-active-border-color: #4E9C8A;
}
[data-bs-theme="dark"] .text-primary { color: #7FC4B4 !important; }

/* Label-badges/-knoppen: donkere groene tint met leesbare lichte tekst */
[data-bs-theme="dark"] .btn-label-primary,
[data-bs-theme="dark"] .bg-label-primary,
[data-bs-theme="dark"] .avatar-initial.bg-label-primary {
  background-color: rgba(143, 191, 175, .18) !important;
  color: #9FD3C5 !important;
}
[data-bs-theme="dark"] .btn-label-primary:hover {
  background-color: #4E9C8A !important;
  color: #0f1622 !important;
}

/* Icoon-vlak (features): merkgroen op donkere sluier i.p.v. lichtmint */
[data-bs-theme="dark"] .rl-icon-box {
  background: rgba(143, 191, 175, .16);
  color: #9FD3C5;
}

/* Stap-nummers behouden groen; iets lichter zodat het opvalt op donker */
[data-bs-theme="dark"] .rl-step-num { background: #4E9C8A; color: #0f1622; }

/* Hero-deco-bollen: onze warme tints zijn te fel op donker → dempen */
[data-bs-theme="dark"] .rl-hero-deco-1 { background: rgba(143, 191, 175, .10); }
[data-bs-theme="dark"] .rl-hero-deco-2 { background: rgba(196, 100, 59, .10); }
[data-bs-theme="dark"] .rl-deco-ball {
  background: rgba(143, 191, 175, .14);
  color: #9FD3C5;
}

/* Kaartschaduw op donker: warme schaduw is onzichtbaar → neutrale, diepere */
[data-bs-theme="dark"] .card {
  box-shadow: 0 .25rem 1.25rem rgba(0, 0, 0, .28);
}

/* Zoekbalk in dark: paper-surface + zichtbare rand/focus */
[data-bs-theme="dark"] .rl-search {
  box-shadow: 0 .25rem 1.25rem rgba(0, 0, 0, .28);
}
[data-bs-theme="dark"] .rl-search input { color: var(--rl-heading); }

/* ============================================================
   FIX — navbar-dropdowns vielen achter het verticale zijmenu
   ------------------------------------------------------------
   In de app-layout (`layout-content-navbar`) geeft Vuexy op desktop
   (>=1200px) het zijmenu een HOGERE z-index dan de navbar:
     .layout-content-navbar .layout-navbar { z-index: 9 }
     .layout-content-navbar .layout-menu   { z-index: 11 }
   (en in ingeklapte/hover-staten zelfs 1085). De navbar vormt daardoor
   een lagere stacking context; álle navbar-dropdowns (taal, thema,
   snelkoppelingen, meldingen, user-menu) die naar de linkerkant
   openen, verdwijnen deels ACHTER de menukolom.

   REGRESSIE (opgelost): de eerdere fix verhoogde de navbar-z-index
   ONVOORWAARDELIJK naar 1090. Daardoor zweefde de HELE navbar-balk
   permanent boven het zijmenu en liep de witte navbar over de
   menukolom heen. Fout: het menu hoort standaard boven de navbar te
   liggen (Vuexy-gedrag); alleen een GEOPENDE dropdown moet er
   bovenuit komen.

   Fix (conditioneel via :has()): til de navbar alléén op wanneer er
   daadwerkelijk een dropdown-menu open staat (`.dropdown-menu.show`).
   In rust blijft de navbar op zijn lage Vuexy-z-index, dus onder het
   menu — geen overlap meer. Zodra een dropdown opent, springt de
   navbar (en dus haar dropdown) boven het menu.

   Robuustheid: kent een browser `:has()` niet, dan faalt enkel deze
   regel stil en houdt de navbar de lage standaard-z-index aan — exact
   het gewenste Vuexy-basisgedrag, dus géén regressie. Als vangnet
   voor Popper-plaatsing (dropdown buiten de navbar in de DOM) houden
   we daarnaast de z-index van geopende dropdown-menu's hoog.

   Geldt voor app-layout (.layout-navbar) én front-layout
   (.landing-navbar). Raakt de menu-z-index zelf niet aan, zodat de
   slide-in op mobiel ongemoeid blijft. */
@media (min-width: 1200px) {
  body:not(.modal-open) .layout-content-navbar .layout-navbar:has(.dropdown-menu.show),
  body:not(.modal-open) .layout-navbar-full .layout-navbar:has(.dropdown-menu.show),
  body:not(.modal-open) .layout-navbar:has(.dropdown-menu.show) {
    z-index: 1090;
  }
}

/* Geopende navbar-dropdowns altijd bovenop, ongeacht Popper-plaatsing */
.layout-navbar .dropdown-menu.show,
.landing-navbar .dropdown-menu.show {
  z-index: 1091;
}