/* Tombeton Portaal: designtokens 27 Automations (bron: colors_and_type.css van het
   design system, gekopieerd per playbook-regel "kopieer tokens, herbouw ze niet")
   plus portaal-chrome. Geen inline hex buiten deze tokens. */

/* Outfit stond hier als @font-face naar ../fonts/, maar die map ligt buiten de
   Pages-root (die is `frontend`) en het bestand staat niet in de repo. Dat gaf
   bij elke paginalading een 404 in de console en toch de systeemletter.
   Zolang het bestand er niet is, staat het lettertype in de fallbackketen van
   --font-sans; zet het bestand in frontend/fonts/ en zet dit blok terug. */

:root {
  --brand-deep-blue: #0F2EA3;
  --brand-off-black: #050A30;
  --brand-azure-blue: #2458EA;
  --brand-bright-blue: #1D58FF;
  --brand-sky-blue: #28AFF9;
  --brand-lemon-lime: #D1F24C;
  --brand-warm-white: #F7F3EA;
  --brand-ink: #050A30;
  --brand-gradient: linear-gradient(100deg, #0F2EA3 0%, #2458EA 45%, #28AFF9 100%);

  --neutral-0: #FFFFFF;  --neutral-50: #F7F3EA; --neutral-100: #EFEADD;
  --neutral-200: #DFD9C8; --neutral-300: #C4BEAC; --neutral-400: #8E8979;
  --neutral-500: #5E5A4F; --neutral-600: #3D3A33; --neutral-900: #050A30;

  --bg: var(--brand-warm-white);
  --bg-elevated: #FFFDF8;
  --bg-subtle: var(--neutral-100);
  --bg-inverse: var(--brand-deep-blue);
  --bg-ink: var(--brand-off-black);
  --fg: var(--brand-ink);
  --fg-muted: var(--neutral-500);
  --fg-subtle: var(--neutral-400);
  --fg-on-blue: var(--brand-warm-white);
  --fg-on-lime: var(--brand-off-black);
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);

  --link: var(--brand-azure-blue);
  --link-hover: var(--brand-deep-blue);
  --focus-ring: var(--brand-azure-blue);

  --success-bg: #F4FBDB; --success-fg: #4A6B0E;
  --info-bg: #E0F1FD;    --info-fg: #0F2EA3;
  --warning-bg: #FBF1D9; --warning-fg: #6B4D04;
  --danger-bg: #F7E0DB;  --danger-fg: #6E2218;

  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;

  --fs-h1: clamp(28px, 3.4vw, 40px);
  --fs-h2: clamp(22px, 2.6vw, 30px);
  --fs-h3: 20px; --fs-h4: 17px;
  --fs-body: 15px; --fs-body-sm: 13px; --fs-caption: 12px;

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --r-xl: 24px; --r-2xl: 28px; --r-3xl: 40px; --r-pill: 999px;

  --shadow-card: 0 4px 24px -8px rgba(5, 10, 48, 0.06);
  --shadow-md: 0 10px 30px -10px rgba(5, 10, 48, 0.08);
  --shadow-lg: 0 24px 50px -18px rgba(5, 10, 48, 0.12);

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 140ms; --dur-base: 220ms;

  /* z-index-schaal, gedocumenteerd en vast (playbook hfst. 9) */
  --z-pop: 50; --z-menu: 60; --z-panel: 120; --z-modal: 130;

  --s27-topbar-h: 56px;
  --s27-bottomnav-h: 62px;
}

/* Mobiel fundament (playbook hfst. 10): vanaf dag 1, geen afwerking achteraf. */
html { color-scheme: light; }
/* hidden wint ALTIJD, ook van klassen met een eigen display-waarde. */
[hidden] { display: none !important; }
html, body { overflow-x: clip; }             /* clip, NIET hidden (breekt sticky) */
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-top: calc(var(--s27-topbar-h) + env(safe-area-inset-top));
  padding-bottom: calc(var(--s27-bottomnav-h) + env(safe-area-inset-bottom));
}
body.kb-open #cms-bottomnav { display: none; }  /* onderbalk weg bij open toetsenbord */

h1 { font-size: var(--fs-h1); font-weight: var(--fw-light); letter-spacing: -0.02em; margin: 0; }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-light); letter-spacing: -0.015em; margin: 0; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); margin: 0; }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); margin: 0; }
a { color: var(--link); text-decoration: none; font-weight: var(--fw-medium); }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* Class look: kaarten */
.kaart {
  background: var(--bg-elevated);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  padding: 24px;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.kaart:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Knoppen: label + arrow-box rechts (merk-signatuur) */
.knop {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 8px 8px 18px;
  border: 0; border-radius: var(--r-md);
  font: var(--fw-semibold) var(--fs-body) var(--font-sans);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-standard);
}
.knop .pijlbox {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.knop-lime { background: var(--brand-lemon-lime); color: var(--fg-on-lime); }
.knop-lime .pijlbox { background: var(--brand-off-black); color: #fff; }
.knop-lime:hover { filter: brightness(0.96); }
.knop-navy { background: var(--brand-off-black); color: #fff; }
.knop-navy .pijlbox { background: #fff; color: var(--brand-off-black); }
.knop-navy:hover { filter: brightness(1.15); }
.knop-outline { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* Statuspills: klikbaar, ook op mobiel de handigste tap-target */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  min-height: 28px; cursor: pointer;
}
.pill-info { background: var(--info-bg); color: var(--info-fg); }
.pill-ok { background: var(--success-bg); color: var(--success-fg); }
.pill-warn { background: var(--warning-bg); color: var(--warning-fg); }
.pill-danger { background: var(--danger-bg); color: var(--danger-fg); }

/* Gedeelde chrome: LEEFT OP document.body, buiten #app-root (playbook hfst. 8). */
#cms-topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(var(--s27-topbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; gap: 14px;
  padding-left: 16px; padding-right: 16px;
  background: rgba(255, 253, 248, 0.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  z-index: var(--z-menu);
  transition: transform var(--dur-base) var(--ease-standard);
}
body.cms-hidden #cms-topbar { transform: translateY(-100%); } /* verbergt bij omlaag scrollen */
#cms-topbar img.logo { height: 26px; }
#cms-topbar .titel { font-weight: var(--fw-medium); font-size: var(--fs-body); }

#cms-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--s27-bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: stretch; justify-content: space-around;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  z-index: var(--z-menu); /* onderbalk blijft ALTIJD zichtbaar */
}
#cms-bottomnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 44px;
  color: var(--fg-muted); font-size: var(--fs-caption); font-weight: var(--fw-medium);
  text-decoration: none;
}
#cms-bottomnav a.actief { color: var(--brand-azure-blue); }

/* Overlays boven de bottom-nav met bottom-inset (playbook hfst. 10) */
.overlay-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(5, 10, 48, 0.5); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
}
.overlay-paneel {
  background: var(--bg-elevated); border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: min(680px, 100%); max-height: 85dvh; overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* Lege staten: duidelijke reden, nooit nepdata (playbook #6). */
.leeg {
  padding: 40px 24px; text-align: center; color: var(--fg-muted);
  background: var(--bg-subtle); border-radius: var(--r-lg);
}

.scherm { padding: 16px; max-width: 1200px; margin: 0 auto; }
@media (min-width: 900px) { .scherm { padding: 24px 32px; } }

/* ---------- componenten ---------- */
.kop-met-actie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

.cms-input {
  font: var(--fw-regular) var(--fs-body) var(--font-sans);
  padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: #fff; color: var(--fg); width: 100%; min-height: 44px;
}
.cms-veld { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; margin-top: 10px; }
.cms-veld-label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.veld-rij { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.cms-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 32px; cursor: pointer; }
.cms-check input { width: 18px; height: 18px; }

.cms-tabel-wrap { overflow-x: auto; margin-top: 12px; }
.cms-tabel { width: 100%; border-collapse: collapse; background: var(--bg-elevated); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.cms-tabel th { text-align: left; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cms-tabel td { padding: 12px 14px; border-bottom: 1px solid var(--neutral-100); vertical-align: middle; }
.cms-tabel tr:last-child td { border-bottom: 0; }
.cms-tabel tr.klikbaar { cursor: pointer; }
.cms-tabel tr.klikbaar:hover td { background: var(--bg-subtle); }
.cms-tabel th.r, .cms-tabel td.r { text-align: right; }

.paneel-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sluitknop { width: 32px; height: 32px; border-radius: 9px; border: 0; background: var(--bg-subtle); font-size: 20px; cursor: pointer; }

.cms-toast {
  position: fixed; left: 50%; bottom: calc(var(--s27-bottomnav-h) + env(safe-area-inset-bottom) + 14px);
  transform: translate(-50%, 20px); opacity: 0; transition: all var(--dur-base) var(--ease-standard);
  background: var(--brand-off-black); color: #fff; padding: 12px 18px; border-radius: var(--r-md);
  z-index: 2147483000; max-width: min(480px, 92vw); box-shadow: var(--shadow-lg); font-size: var(--fs-body-sm);
}
.cms-toast.zichtbaar { transform: translate(-50%, 0); opacity: 1; }
.cms-toast-fout { background: var(--danger-fg); }
.cms-toast-ok { background: #12652F; }

/* auto-FIT, niet auto-fill. auto-fill houdt de lege sporen staan die er nog
   bij passen, dus met vier tegels in een raster waar er vijf in kunnen eindigde
   de rij op exact 4/5 van de breedte terwijl de kaarten eronder wel doorliepen.
   Dat las als "de uitlijning klopt niet" zonder dat er iets aan te wijzen viel.
   auto-fit klapt die lege sporen in en de tegels vullen de volle breedte. */
.kpi-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 16px; }
.kpi .kpi-waarde { font-size: 28px; font-weight: var(--fw-light); }
.kpi-label { font-weight: var(--fw-medium); margin-top: 4px; }
.kpi-sub { font-size: var(--fs-body-sm); color: var(--fg-muted); }
.melding { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--neutral-100); flex-wrap: wrap; }
.melding:last-child { border-bottom: 0; }

.tabbalk { display: flex; gap: 6px; background: var(--bg-subtle); border-radius: 13px; padding: 4px; width: fit-content; margin-top: 12px; }
.tab { border: 0; background: transparent; padding: 8px 16px; border-radius: 10px; font: var(--fw-medium) var(--fs-body-sm) var(--font-sans); cursor: pointer; min-height: 36px; }
.tab.actief { background: #fff; box-shadow: var(--shadow-xs); }

.regelrij { border: 1px solid var(--neutral-100); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 8px; background: #fff; }
.regelrij.kopregel { background: var(--bg-subtle); font-weight: var(--fw-semibold); }
.regelrij.optioneel { border-style: dashed; color: var(--fg-muted); }
.regel-hoofd { display: flex; align-items: center; gap: 10px; }
.regel-aantal { min-width: 34px; color: var(--fg-muted); }
.regel-titel { flex: 1; }
.regel-prijs { font-weight: var(--fw-semibold); white-space: nowrap; }
.regel-specs { font-size: var(--fs-body-sm); color: var(--fg-muted); white-space: pre-wrap; margin-top: 6px; }
.regel-acties { display: flex; gap: 4px; }
.mini { width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--bg-subtle); cursor: pointer; font-size: 14px; }
.mini.rood { color: var(--danger-fg); }
.totaalbalk { margin-top: 14px; text-align: right; font-size: 17px; }
.intern { background: #FDF9EC; border: 1px dashed var(--warning); }
.intern-tekst { color: var(--warning-fg); }
.custom-regel { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-subtle); border-radius: var(--r-pill); padding: 4px 6px 4px 14px; margin: 4px 6px 0 0; font-size: var(--fs-body-sm); }
.stap-rij { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.stap-naam { flex: 1; min-width: 160px; }
.calc-uitkomst { background: var(--bg-subtle); border-radius: var(--r-sm); padding: 12px 14px; margin-top: 12px; }
.calc-rij { font-size: var(--fs-body-sm); margin-top: 2px; }
.calc-totaal { font-weight: var(--fw-semibold); font-size: 16px; margin-top: 8px; }

.week-raster { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; overflow-x: auto; }
@media (max-width: 900px) { .week-raster { display: flex; flex-direction: column; } }
.dag-kolom { background: var(--bg-elevated); border-radius: var(--r-lg); padding: 10px; min-height: 120px; box-shadow: var(--shadow-card); }
.dag-kolom.vandaag { outline: 2px solid var(--brand-azure-blue); }
.dag-kop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chips { display: flex; gap: 3px; flex-wrap: wrap; }
.initialen { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: var(--fw-semibold); }
.initialen.klein { width: 22px; height: 22px; font-size: 9px; }
.initialen.afwezig { background: var(--neutral-300) !important; text-decoration: line-through; }
.taak-blok { border-radius: var(--r-sm); padding: 8px 10px; margin-top: 6px; cursor: pointer; background: var(--info-bg); border-left: 4px solid var(--brand-sky-blue); min-height: 44px; }
.taak-blok.klaar { opacity: 0.55; }
.taak-blok.soort-bekisten { background: #E5EBFB; border-left-color: var(--brand-deep-blue); }
.taak-blok.soort-storten, .taak-blok.soort-vullen { background: var(--warning-bg); border-left-color: var(--warning); }
.taak-blok.soort-polieren { background: #F3E8FA; border-left-color: #9441DB; }
.taak-blok.soort-ontkisten, .taak-blok.soort-afwerken { background: var(--success-bg); border-left-color: var(--success-fg); }
.taak-blok.soort-inmeten, .taak-blok.soort-bespreking { background: var(--bg-subtle); border-left-color: var(--neutral-400); }

.instelling-rij { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--neutral-100); flex-wrap: wrap; }
.instelling-rij > span:first-child { flex: 1; min-width: 220px; }

/* =============================================================
   HUB-CHROME (1-op-1 naar hub.studio27.be): donkere topbar 64px,
   donkere linkerrail 64px met uitklapmenu, content met linkermarge.
   Mobiel (<900px): rail weg, onderbalk blijft.
   ============================================================= */
:root { --hub-bar: 64px; --hub-rail: 64px; --hub-rail-open: 248px; }

body {
  padding-top: calc(var(--hub-bar) + env(safe-area-inset-top));
}
@media (min-width: 900px) {
  body { padding-left: var(--hub-rail); padding-bottom: 24px; }
  #cms-bottomnav { display: none; }
  .cms-bugknop { display: none; }
}

#cms-topbar {
  height: calc(var(--hub-bar) + env(safe-area-inset-top));
  background: var(--brand-off-black);
  border-bottom: 0; backdrop-filter: none;
  color: #fff; gap: 18px; z-index: 60;
}
body.cms-hidden #cms-topbar { transform: none; } /* hub-topbar blijft altijd staan */
#cms-topbar .titel { color: rgba(247, 243, 234, 0.85); font-weight: var(--fw-medium); }
#cms-topbar img.logo { display: none; }
.hub-logo {
  font: 800 22px/1 var(--font-sans); letter-spacing: -0.5px; text-decoration: none;
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 4px 2px; flex-shrink: 0;
}
.hub-zoek {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px;
  background: rgba(247, 243, 234, 0.08); border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: var(--r-pill); padding: 0 16px; height: 40px; color: rgba(247, 243, 234, 0.6);
}
.hub-zoek input {
  flex: 1; background: transparent; border: 0; outline: none; color: #fff;
  font: var(--fw-regular) var(--fs-body-sm) var(--font-sans); min-width: 0;
}
.hub-zoek input::placeholder { color: rgba(247, 243, 234, 0.45); }
.hub-topacties { display: flex; gap: 8px; margin-left: auto; }
.hub-topknop {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(247, 243, 234, 0.14);
  background: rgba(247, 243, 234, 0.06); color: #fff; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.hub-topknop:hover { background: rgba(247, 243, 234, 0.14); }
.hub-topknop .badge {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; border-radius: 9px;
  background: var(--brand-lemon-lime); color: var(--brand-off-black);
  font: var(--fw-semibold) 11px/17px var(--font-sans); padding: 0 4px;
}

#cms-rail {
  position: fixed; top: calc(var(--hub-bar) + env(safe-area-inset-top)); bottom: 0; left: 0;
  width: var(--hub-rail); background: var(--brand-off-black); z-index: 55;
  display: flex; flex-direction: column; overflow: hidden;
  transition: width var(--dur-base) var(--ease-standard);
}
@media (max-width: 899px) { #cms-rail { display: none; } }
#cms-rail:hover, #cms-rail.open { width: var(--hub-rail-open); box-shadow: 24px 0 60px -30px rgba(5, 10, 48, 0.5); }
.rail-kop {
  padding: 14px 12px 6px; font: var(--fw-semibold) 10px/1 var(--font-sans);
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 243, 234, 0.4);
  white-space: nowrap; opacity: 0; transition: opacity var(--dur-fast);
}
#cms-rail:hover .rail-kop, #cms-rail.open .rail-kop { opacity: 1; }
.rail-lijst { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; }
.rail-item {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px;
  color: rgba(247, 243, 234, 0.75); text-decoration: none; white-space: nowrap;
  font: var(--fw-medium) var(--fs-body-sm) var(--font-sans); border-left: 3px solid transparent;
}
.rail-item:hover { background: rgba(247, 243, 234, 0.07); color: #fff; text-decoration: none; }
.rail-item.actief { background: rgba(36, 88, 234, 0.22); color: #fff; border-left-color: var(--brand-sky-blue); }
.rail-item .ri-icoon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.rail-item.actief .ri-icoon { background: rgba(40, 175, 249, 0.25); }
.rail-item .ri-label { opacity: 0; transition: opacity var(--dur-fast); }
#cms-rail:hover .ri-label, #cms-rail.open .ri-label { opacity: 1; }
.rail-voet { border-top: 1px solid rgba(247, 243, 234, 0.1); padding: 6px 0; }

/* ---------- lijstscherm (strategielijst-stijl) ---------- */
.ls-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.ls-zoek {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-sm); height: 42px; padding: 0 12px; min-width: 220px; flex: 1; max-width: 320px;
}
.ls-zoek input { border: 0; outline: none; flex: 1; font: var(--fw-regular) var(--fs-body-sm) var(--font-sans); background: transparent; min-width: 0; }
.ls-toggle { display: flex; background: #fff; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px; margin-left: auto; }
.ls-toggle button {
  border: 0; background: transparent; border-radius: var(--r-pill); padding: 7px 16px;
  font: var(--fw-medium) var(--fs-body-sm) var(--font-sans); cursor: pointer; color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.ls-toggle button.actief { background: var(--info-bg); color: var(--brand-deep-blue); font-weight: var(--fw-semibold); }
.knop-donker {
  display: inline-flex; align-items: center; gap: 8px; background: var(--brand-off-black); color: #fff;
  border: 0; border-radius: var(--r-pill); padding: 0 20px; height: 42px;
  font: var(--fw-semibold) var(--fs-body-sm) var(--font-sans); cursor: pointer;
}
.knop-donker:hover { filter: brightness(1.25); }
.cms-tabel th.sorteer { cursor: pointer; user-select: none; white-space: nowrap; }
.cms-tabel th.sorteer:hover { color: var(--fg); }
.cms-tabel th.sorteer .pijl { opacity: 0.35; margin-left: 4px; }
.cms-tabel th.sorteer.actief .pijl { opacity: 1; color: var(--brand-azure-blue); }
.cel-edit { cursor: pointer; border-bottom: 1px dashed var(--border-strong); }
.cel-edit:hover { border-bottom-color: var(--brand-azure-blue); color: var(--brand-azure-blue); }
.soort-stip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }

/* ---------- modals: gecentreerde kaart zoals de hub (mobiel blijft bottom sheet) ---------- */
@media (min-width: 700px) {
  .overlay-backdrop { align-items: center; padding: 24px; }
  .overlay-paneel { border-radius: var(--r-lg); max-height: 88dvh; box-shadow: var(--shadow-xl); }
}
.cms-input { border-radius: var(--r-sm); }
.cms-input:focus { border-color: var(--brand-azure-blue); box-shadow: 0 0 0 3px rgba(36, 88, 234, 0.12); outline: none; }

/* meldingenpaneel onder de topbar-bel */
.meldingen-paneel {
  position: fixed; top: calc(var(--hub-bar) + 8px); right: 12px; width: min(400px, 94vw);
  max-height: 70dvh; overflow-y: auto; background: var(--bg-elevated); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl); z-index: 120; padding: 16px;
}

.cms-bugknop {
  position: fixed; right: 14px; bottom: calc(var(--s27-bottomnav-h) + env(safe-area-inset-bottom) + 14px);
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--brand-off-black); color: #fff;
  font-size: 18px; font-weight: var(--fw-semibold); cursor: pointer; z-index: var(--z-pop); box-shadow: var(--shadow-md);
}

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--brand-lemon-lime); color: var(--brand-off-black); }

/* =============================================================
   COMPACT: globale verdichting naar hub-dichtheid (hub.studio27.be,
   rijen van ±40px en 13px tekst). Deze sectie staat bewust onderaan
   en overschrijft de ruimere waarden hierboven.
   ============================================================= */

h1 { font-size: clamp(24px, 2.6vw, 32px); }
.scherm { padding: 14px; }
@media (min-width: 900px) { .scherm { padding: 20px 28px; } }
.kaart { padding: 16px; border-radius: var(--r-lg); }
.kpi-raster { gap: 10px; margin-top: 12px; }
.kpi .kpi-waarde { font-size: 22px; }

/* invoervelden: 36px hoog, 13px tekst; textarea's houden hun eigen hoogte */
.cms-input, select.cms-input { min-height: 36px; padding: 7px 10px; font-size: 13px; }
textarea.cms-input { min-height: auto; }
.cms-veld { margin-top: 6px; gap: 3px; }
.cms-veld-label { font-size: 10px; }
.veld-rij { gap: 8px; }

/* tabellen: compacte rijen zoals de hub */
.cms-tabel th { padding: 8px 10px; font-size: 10px; }
.cms-tabel td { padding: 7px 10px; font-size: 13px; }
.initialen { width: 24px; height: 24px; font-size: 10px; }
.initialen.klein { width: 20px; height: 20px; font-size: 8px; }
.pill { min-height: 22px; padding: 2px 10px; font-size: 12px; }

/* knoppen */
.knop { min-height: 36px; padding: 6px 6px 6px 14px; font-size: 13px; }
.knop .pijlbox { width: 24px; height: 24px; }
.knop-donker { height: 36px; }
.ls-toggle { height: 36px; box-sizing: border-box; }
.ls-toggle button { padding: 4px 14px; }
.ls-zoek { height: 36px; }

/* panelen en detailregels */
.overlay-paneel { padding: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.paneel-kop { margin-bottom: 8px; }
.regelrij { padding: 8px 10px; }
.regel-specs { font-size: 12px; }
.stap-rij { min-height: 34px; margin-top: 2px; gap: 8px; }
.stap-rij .cms-input { min-height: 30px; padding: 4px 8px; }
.calc-uitkomst { padding: 10px 12px; font-size: 12px; margin-top: 10px; }
.melding { padding: 7px 0; }
.instelling-rij { padding: 6px 0; }

/* mobiel blijft tikbaar: velden terug naar 42px onder 700px */
@media (max-width: 699px) {
  .cms-input, select.cms-input, .stap-rij .cms-input { min-height: 42px; }
}

/* ---------- COMPACT: configurator, tweekolomslayout ---------- */
.cfg-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; margin-top: 10px; }
.cfg-kop { margin: 12px 0 2px; font-size: 11px; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); }
.stap-naam { font-size: 13px; }
.stap-x { color: var(--fg-muted); font-size: 12px; }
.cfg-opties { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cfg-opties .cms-check { margin-top: 2px; min-height: 26px; font-size: 12px; gap: 6px; }
.cfg-opties .cms-check input { width: 15px; height: 15px; }
.cfg-samenvatting { background: var(--bg-subtle); border-radius: var(--r-md); padding: 14px; }
@media (min-width: 900px) { .cfg-samenvatting { position: sticky; top: 0; } }
.sv-rij { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 2px 0; }
.sv-rij .sv-label { color: var(--fg-muted); }
.sv-berekend { margin-top: 10px; font-size: 15px; font-weight: var(--fw-medium); }
.sv-voorstel { font-size: 21px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.sv-waarschuwing { margin-top: 8px; }
@media (max-width: 899px) {
  .cfg-grid { grid-template-columns: 1fr; }
  .cfg-samenvatting { order: -1; position: static; }
}

/* =============================================================
   PLANNING VOLLER: de weekkalender als volwaardige werkdag-kolommen.
   Bewust onderaan als override; de basisregels hierboven (sectie
   week-raster/dag-kolom/taak-blok) blijven ongewijzigd staan.
   ============================================================= */

/* Dag-kolommen op desktop hoog genoeg om als echte dagkolom te ogen. */
@media (min-width: 900px) {
  .dag-kolom { min-height: 420px; }
}

/* Taakblokjes iets ruimer: meer padding en een duidelijke 13px titel. */
.taak-blok { padding: 10px; }
.taak-blok strong { font-size: 13px; }

/* Maandraster: elke dagcel minstens 96px hoog. */
.maand-cel { min-height: 96px; }

/* =============================================================
   FORMULIERGRID: een 12-koloms grid voor ALLE formulieren en panelen,
   zodat velden overal strak uitlijnen (feedback Vincent, ronde 4).
   Gebruik: S27.frm(S27.veld('Naam', input, 8), S27.veld('Nr', input, 4), ...)
   ============================================================= */
.frm { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px 12px; margin-top: 8px; }
.frm .cms-veld { margin-top: 0; min-width: 0; grid-column: span 12; flex: none; }
.frm .cms-input { width: 100%; max-width: none !important; box-sizing: border-box; }
.frm .cms-check { grid-column: 1 / -1; margin-top: 2px; }
.frm .sp-2 { grid-column: span 2; } .frm .sp-3 { grid-column: span 3; } .frm .sp-4 { grid-column: span 4; }
.frm .sp-5 { grid-column: span 5; } .frm .sp-6 { grid-column: span 6; } .frm .sp-7 { grid-column: span 7; }
.frm .sp-8 { grid-column: span 8; } .frm .sp-9 { grid-column: span 9; } .frm .sp-10 { grid-column: span 10; }
.frm-acties { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.frm-acties.rechts { justify-content: flex-end; }
@media (max-width: 559px) {
  /* mobiel: alles onder elkaar, behalve echt smalle velden (sp-2/sp-3/sp-4 half) */
  .frm .cms-veld, .frm .cms-veld[class*="sp-"] { grid-column: span 12; }
  .frm .cms-veld.sp-2, .frm .cms-veld.sp-3, .frm .cms-veld.sp-4 { grid-column: span 6; }
}

/* Meldingen: tekst links (afgekapt), actie rechts, nooit onder elkaar. */
.melding { flex-wrap: nowrap; align-items: center; }
.melding > div:first-child { flex: 1; min-width: 0; }
.melding .mini { flex-shrink: 0; }

/* Zoek-dropdown: categoriechips bovenaan. */
.zoek-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px 6px; border-bottom: 1px solid rgba(15, 20, 40, 0.08); }
.zoek-chip {
  border: 1px solid var(--border-strong); background: #fff; border-radius: var(--r-pill);
  padding: 3px 12px; font: var(--fw-medium) 12px var(--font-sans); cursor: pointer; color: var(--fg-muted);
}
.zoek-chip.actief { background: var(--brand-off-black); border-color: var(--brand-off-black); color: #fff; }

/* Kalenderfilters: initialen-chips klikbaar aan/uit. */
.kalfilter-chip { cursor: pointer; opacity: 1; transition: opacity var(--dur-fast), outline var(--dur-fast); outline: 2px solid transparent; outline-offset: 1px; }
.kalfilter-chip.uit { opacity: 0.3; }
.kalfilter-chip.aan { outline-color: var(--brand-off-black); }

/* Drag & drop in de kalender. */
.taak-blok[draggable="true"], .maand-taak[draggable="true"] { cursor: grab; }
.taak-blok.sleept, .maand-taak.sleept { opacity: 0.4; }
.dag-kolom.drop-doel, .maand-cel.drop-doel { outline: 2px dashed var(--brand-azure-blue); outline-offset: -2px; background: var(--info-bg) !important; }

/* Kaartweergave van de werven. */
.kaart-wrap { position: relative; margin-top: 12px; }
#cms-kaart { height: min(64dvh, 640px); min-height: 380px; border-radius: var(--r-lg); box-shadow: var(--shadow-card); z-index: 1; }
.kaart-legende { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--fg-muted); margin-top: 10px; }
.kaart-popup { font: var(--fw-regular) 13px/1.45 var(--font-sans); min-width: 200px; }
.kaart-popup h4 { margin: 0 0 2px; font-size: 14px; }
.leaflet-container { font-family: var(--font-sans); }

/* Bekijk-als-banner (alleen Studio 27): altijd zichtbaar zolang de weergave actief is. */
.actas-banner {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--brand-off-black); color: #fff; border-radius: var(--r-pill);
  padding: 8px 8px 8px 18px; display: flex; align-items: center; gap: 12px;
  font: var(--fw-medium) 13px var(--font-sans); box-shadow: var(--shadow-lg); z-index: 1500;
  max-width: min(94vw, 560px);
}
.actas-banner .stip { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-lemon-lime); flex-shrink: 0; }
.actas-banner button {
  border: 0; border-radius: var(--r-pill); background: var(--brand-lemon-lime); color: var(--brand-off-black);
  font: var(--fw-semibold) 12px var(--font-sans); padding: 6px 14px; cursor: pointer; flex-shrink: 0;
}
@media (max-width: 899px) { .actas-banner { bottom: calc(var(--s27-bottomnav-h) + env(safe-area-inset-bottom) + 12px); } }

/* Suggestievelden (zoekbare select en Google-adresveld). */
.sug-wrap { position: relative; min-width: 0; }
.sug-drop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 140;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); max-height: 260px; overflow-y: auto; padding: 4px;
}
.sug-item { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; display: flex; flex-direction: column; gap: 1px; }
.sug-item:hover { background: var(--info-bg); }
.sug-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-sub { font-size: 11px; color: var(--fg-muted); }
.sug-status { font-size: 12px; color: var(--fg-muted); margin-top: 4px; }
.sug-ok { color: var(--success-fg); font-weight: var(--fw-medium); }

/* Compacte ploegkiezer: klein zwevend paneel met initialen-chips. */
.ploeg-pop {
  position: fixed; z-index: 135; background: var(--bg-elevated); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border); padding: 12px; width: 240px;
}
.ploeg-pop h4 { font-size: 12px; margin: 0 0 8px; color: var(--fg-muted); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; }
.ploeg-pop .chips { gap: 6px; }
.ploeg-pop .initialen { width: 32px; height: 32px; font-size: 12px; cursor: pointer; opacity: 0.35; outline: 2px solid transparent; outline-offset: 1px; transition: opacity var(--dur-fast); }
.ploeg-pop .initialen.aan { opacity: 1; outline-color: var(--brand-off-black); }
.ploeg-pop .waarschuw { margin-top: 8px; font-size: 11px; color: var(--warning-fg); }

/* Taakblok in de kalender: initialen altijd zichtbaar. */
.taak-blok .chips { margin-top: 4px; }
.maand-taak .initialen { width: 16px; height: 16px; font-size: 7px; flex: 0 0 auto; }

/* Bezettingsoverzicht bij het kiezen van een datum. */
.bezet-lijst { max-height: 320px; overflow-y: auto; border: 1px solid var(--neutral-100); border-radius: var(--r-sm); padding: 6px 10px; background: #fff; }
.bezet-rij { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--neutral-100); font-size: 12px; }
.bezet-rij:last-child { border-bottom: 0; }
.bezet-rij .dag { width: 92px; flex-shrink: 0; color: var(--fg-muted); }
.bezet-rij.weekend { opacity: 0.5; }
.bezet-rij.gekozen { background: var(--info-bg); border-radius: 6px; padding-left: 6px; padding-right: 6px; }
.bezet-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.bezet-cel { border: 1px solid var(--neutral-100); border-radius: 8px; background: #fff; padding: 4px 5px; min-height: 52px; font-size: 11px; }
.bezet-cel.vandaag { outline: 2px solid var(--brand-azure-blue); outline-offset: -2px; }
.bezet-cel .chips { gap: 2px; margin-top: 2px; }
.bezet-cel .initialen { width: 16px; height: 16px; font-size: 7px; }

/* Bestandenkaart: nette uploadknop (gsm-camera en galerij via accept). */
.bestand-knop input[type="file"] { display: none; }

/* Teamrol op desktop: geen rail, wel de onderbalk als navigatie. */
@media (min-width: 900px) {
  body.rol-team { padding-left: 0; padding-bottom: calc(var(--s27-bottomnav-h) + env(safe-area-inset-bottom)); }
  body.rol-team #cms-bottomnav { display: flex; }
  body.rol-team .cms-bugknop { display: block; }
}

/* =====================================================================
   CMS-specifiek. De rest van dit bestand is de gedeelde hub-look; wat
   hieronder staat, bestaat alleen in het CMS.
   ===================================================================== */

.kop-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.kop-rij h2 { margin: 0; }
.kop-rij > *:last-child { margin-left: auto; }

.pill-rij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Sitekiezer in de topbar. Wie één site heeft, ziet hem niet. */
.hub-sitekiezer {
  height: 34px;
  max-width: 220px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: var(--fg-on-blue);
  font-size: 13px;
  padding: 0 8px;
}
.hub-sitekiezer option { color: var(--fg); }

/* Banner van bekijk-als: altijd zichtbaar, altijd met een uitweg. */
.act-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg-ink);
  color: var(--fg-on-blue);
  font-size: 13px;
}

.kaart.waarschuwing { border-left: 3px solid var(--brand-lemon-lime); }

/* Beelden */
.media-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.media-tegel {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elevated);
  cursor: pointer;
  padding-bottom: 10px;
}
.media-tegel:hover { border-color: var(--brand-azure-blue); }
.media-tegel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.media-geen-beeld {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
  color: var(--fg-muted);
  font-weight: var(--fw-medium);
}
.media-naam {
  padding: 8px 10px 0;
  font-size: 13px;
  word-break: break-all;
}
.media-tegel .kpi-sub { padding: 0 10px; }

/* Editor: balk boven, de echte site eronder, verder niets. */
.editor {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--hub-bar) - 24px);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.editor-balk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.editor-titel { font-weight: var(--fw-medium); }
.editor-balk .cms-input { height: 34px; max-width: 260px; }
.editor-status { margin-left: auto; font-size: 13px; color: var(--fg-muted); }
.editor-frame { flex: 1; width: 100%; border: 0; background: #fff; }

@media (max-width: 768px) {
  .editor { height: calc(100dvh - var(--hub-bar) - 80px); }
  .editor-status { margin-left: 0; width: 100%; }
  .editor-balk .cms-input { max-width: none; flex: 1 1 100%; }
}

/* ------------------------------------------------------- collecties en SEO --
   Toegevoegd voor de collectieschermen, de beeldkiezer en de SEO-werkbank.
   Alles op de bestaande tokens; geen losse hex-waarden. */

/* Klikbare KPI-kaart: één collectie in het overzicht. */
.kpi.klikbaar { cursor: pointer; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.kpi.klikbaar:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi.klikbaar:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Kleine knop in een tabelrij. Blijft op 32px zodat hij op een telefoon nog
   raakbaar is; kleiner maken leest wel netjes maar mist de helft van de tijd. */
.knop-klein { min-height: 32px; padding: 4px 12px; font-size: var(--fs-body-sm); }
.knop-gevaar { color: var(--danger-fg); border-color: var(--danger-fg); }
.knop-gevaar:hover { background: var(--danger-bg); }

/* Beeld in een tabelcel en in een invoerveld. */
.mini-beeld { width: 44px; height: 32px; object-fit: cover; border-radius: var(--r-xs); display: block; }
.veld-beeld { margin-bottom: 8px; }
.veld-beeld img { max-width: 180px; max-height: 120px; object-fit: cover; border-radius: var(--r-sm); display: block; border: 1px solid var(--border); }

/* Het gekozen beeld in de kiezer. */
.media-tegel.gekozen { outline: 2px solid var(--brand-azure-blue); outline-offset: 2px; }

/* Uitklapbaar blok, bv. de SEO-velden onder een item. */
.blok-uitklap { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; margin-top: 14px; background: var(--bg-elevated); }
.blok-uitklap > summary { cursor: pointer; font-weight: var(--fw-medium); list-style: none; }
.blok-uitklap > summary::-webkit-details-marker { display: none; }
.blok-uitklap > summary::before { content: '+ '; color: var(--fg-muted); }
.blok-uitklap[open] > summary::before { content: '- '; }
.blok-uitklap > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Voortgangsregels van de Webflow-import. Eigen naam, want .melding bestaat al
   voor de meldingenlijst onder de bel in de topbar. */
.importregel { padding: 8px 12px; border-radius: var(--r-sm); margin-bottom: 6px; font-size: var(--fs-body-sm); background: var(--bg-subtle); color: var(--fg); }
.importregel-ok { background: var(--success-bg); color: var(--success-fg); }
.importregel-fout { background: var(--danger-bg); color: var(--danger-fg); }
.importregel-waarschuwing { background: var(--warning-bg); color: var(--warning-fg); }

/* Op een telefoon staan de itemknoppen onder elkaar in plaats van geknepen
   naast elkaar. */
@media (max-width: 559px) {
  .mini-beeld { width: 36px; height: 26px; }
  .veld-beeld img { max-width: 120px; }
}