/* MetricMelon: de applicatielaag boven het designsysteem.

   De tokens in metricmelon/ zijn onaangeraakt overgenomen uit het
   designsysteem. Komt daar een nieuwe versie van, dan kunnen die bestanden er
   één op één overheen; alles wat van ons is staat in dit bestand. */
@import url("metricmelon/fonts.css");
@import url("metricmelon/colors.css");
@import url("metricmelon/typography.css");
@import url("metricmelon/spacing.css");
@import url("metricmelon/shape.css");
@import url("metricmelon/motion.css");

/* --- Brug naar de oude tokennamen ---------------------------------------
   De schermen en de JavaScript zetten kleuren op bijna 300 plekken inline,
   met de namen uit het kompas-ontwerp. Die namen wijzen hier naar de
   MetricMelon-tokens, zodat het hele product in één keer meeverhuist zonder
   dat elk `style="..."`-attribuut aangeraakt hoeft te worden. Nieuwe code
   gebruikt de tokens uit metricmelon/ rechtstreeks; deze laag is er voor het
   bestaande werk en mag slinken. */
:root {
  --c-page: var(--surface-page);
  --c-surface: var(--surface-card);
  --c-surface-2: var(--surface-sunken);
  --c-sidebar: var(--surface-card);

  --c-ink: var(--text-strong);
  --c-ink-soft: var(--text-body);
  --c-muted: var(--text-muted);

  /* Twee randgewichten, want de schermen gebruiken ze voor twee dingen:
     --c-border staat 44 keer om een heel element (invoervelden, selects,
     panelen) en --c-border-soft vrijwel altijd als haarlijn tussen rijen.
     Beide op --border-subtle zetten liet die invoervelden vervagen. */
  --c-border: var(--border-default);
  --c-border-soft: var(--border-subtle);
  --c-border-strong: var(--border-strong);

  /* Groen is in dit merk de actiekleur, niet blauw. */
  --c-accent: var(--action-primary);
  --c-accent-ink: var(--mm-white);
  --c-accent-soft: var(--surface-accent);

  --c-pos: var(--data-pos);
  --c-pos-soft: var(--mm-green-50);
  --c-neg: var(--data-neg);
  --c-neg-soft: var(--mm-coral-50);

  /* Grafiekreeksen 2 tot en met 6; reeks 1 is de merkkleur hierboven. */
  --c-sky: var(--chart-4);
  --c-mint: var(--chart-1);
  --c-orange: var(--chart-2);
  --c-purple: var(--chart-6);
  --c-yellow: var(--chart-5);

  --c-track: var(--mm-gray-100);

  /* Zachte tinten voor gewonnen en verloren, in pillen en in de kolommen van
     het bord. In beide thema's een eigen paar: een lichte tint die op crème
     werkt, blijft op navy een lichte vlek. */
  --tint-pos-bg: var(--mm-green-50); --tint-pos-ink: var(--mm-green-600);
  --tint-neg-bg: var(--mm-coral-50); --tint-neg-ink: var(--mm-coral-600);
  /* Amber heeft in dit palet geen donkere tint, en amber-500 op amber-100
     haalt geen enkele leesbaarheidsnorm. De tekst blijft daarom de gewone
     inktkleur; het driehoekje draagt het signaal. */
  --tint-warn-bg: var(--mm-amber-100);

  --sh-sm: var(--shadow-sm);
  --sh-md: var(--shadow-md);
  --sh-lg: var(--shadow-lg);

  --radius: var(--radius-lg);
  --radius-sm: var(--radius-sm);

  /* De verschilkolommen in het raamwerk krijgen een eigen band, zodat ze
     opvallen tussen de maanden. Koel blauw en niet het groen van het merk:
     de cijfers erin zijn zelf al groen of koraal, en die moeten kunnen
     spreken zonder tegen hun achtergrond te vechten. */
  --rw-delta: rgba(46, 125, 215, 0.07);
}

[data-theme="dark"] {
  --tint-pos-bg: rgba(34, 181, 98, 0.18); --tint-pos-ink: var(--mm-green-300);
  --tint-neg-bg: rgba(255, 88, 72, 0.18); --tint-neg-ink: var(--mm-coral-300);
  --tint-warn-bg: rgba(245, 165, 36, 0.18);
  --c-pos-soft: rgba(34, 181, 98, 0.16);
  --c-neg-soft: rgba(255, 88, 72, 0.16);
  --c-track: var(--mm-navy-700);
  --c-accent: var(--mm-green-400);
  --c-accent-soft: var(--surface-accent);
  --rw-delta: rgba(120, 165, 225, 0.16);
}

/* --- Basis --------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body, #root { height: 100%; }
/* Zonder dit blijven native controls (select, datumveld, checkbox, scrollbar)
   wit in het donkere thema: de browser tekent die zelf en gaat af op deze
   eigenschap, niet op onze kleuren. */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* Schermkoppen en cijfers dragen het merk en staan daarom in Fredoka. Anders
   dan in het kompas-ontwerp worden ze niet meer naar kleine letters gedwongen:
   MetricMelon schrijft overal in zinsvorm. */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  letter-spacing: var(--ls-heading);
}

/* Toetsenbordfocus is een omlijning, geen gloed. */
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; box-shadow: none; }

/* --- Knoppen ------------------------------------------------------------- */
/* Volledig ronde knoppen zijn het meest herkenbare UI-signaal van dit merk. */
.btn-primary {
  border: none; border-radius: var(--radius-pill);
  background: var(--action-primary); color: var(--mm-white);
  font-family: var(--font-display); font-weight: var(--fw-medium); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn-primary:hover { background: var(--action-primary-hover); transform: var(--lift-hover); }
.btn-primary:active { background: var(--action-primary-press); transform: var(--press-scale); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; background: var(--action-primary); }

.btn-ghost {
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-strong);
  font-family: var(--font-display); font-weight: var(--fw-medium); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn-ghost:hover { background: var(--surface-hover); transform: var(--lift-hover); }
.btn-ghost:active { transform: var(--press-scale); }
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* --- Vlakken ------------------------------------------------------------- */
/* De rand scheidt, de schaduw geeft alleen lichte lift. Het crèmekleurige
   paginavlak doet de rest van het werk. */
.card {
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}
.pill.pos { background: var(--tint-pos-bg); color: var(--tint-pos-ink); }
.pill.neg { background: var(--tint-neg-bg); color: var(--tint-neg-ink); }
/* Een waarschuwing, geen fout: iets vraagt aandacht maar er is niets stuk. */
.pill.warn { background: var(--tint-warn-bg); color: var(--text-strong); }
.pill.warn svg { color: var(--mm-amber-500); }
.pill.accent { background: var(--surface-accent); color: var(--text-brand); }
.pill.muted { background: var(--surface-sunken); color: var(--text-muted); }

/* Thema-toggle: het icoon toont waar je naartoe gaat, niet waar je nu bent. In
   het lichte thema zie je dus de maan, in het donkere de zon. Welk icoon
   zichtbaar is volgt puur data-theme, geen JS-DOM-swap. De spans mogen daarom
   geen eigen display inline meedragen: dat zou deze regels overstemmen. */
.icon-sun { display: none; }
.icon-moon { display: inline-flex; }
[data-theme="dark"] .icon-sun { display: inline-flex; }
[data-theme="dark"] .icon-moon { display: none; }

.spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--border-subtle); border-top-color: var(--action-primary);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Skeletonlaadstaat ---
   Terwijl een scherm zijn cijfers ophaalt, staan er schimmende vlakken in de
   vorm van wat er komt (public/js/skeleton.js bouwt ze). Overgenomen van
   .skeleton-card in het dashboard, hier op de MetricMelon-tokens: een rustige
   basistint met een lichtere glans die er langzaam overheen schuift. In het
   donkere thema is de glans een tint lichter navy in plaats van wit, anders
   flitst hij. motion.css zet bij prefers-reduced-motion elke animatie stil,
   dus de glans staat dan gewoon als egaal vlak. */
:root {
  --skeleton-base: var(--mm-gray-100);
  --skeleton-shine: var(--mm-gray-50);
}
[data-theme="dark"] {
  --skeleton-base: var(--mm-navy-700);
  --skeleton-shine: var(--mm-navy-600);
}
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--skeleton-base) 30%, var(--skeleton-shine) 50%, var(--skeleton-base) 70%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}
/* Een hele kaart als skeleton, zoals in het Overzicht voor de widgets. */
.skeleton-card {
  background: linear-gradient(100deg, var(--c-surface) 30%, var(--skeleton-shine) 50%, var(--c-surface) 70%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}
@keyframes skeleton-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* --- Merklogo in licht en donker ---
   Beide lockups staan in de pagina; welke zichtbaar is volgt data-theme, net
   als bij het zijmenu. Zo staat er in het donkere thema nooit navy tekst op
   een navy vlak. */
.merk-logo { display: inline-flex; align-items: center; }
.merk-logo img { height: 100%; width: auto; display: block; }
.merk-logo .merk-logo-donker { display: none; }
[data-theme="dark"] .merk-logo .merk-logo-licht { display: none; }
[data-theme="dark"] .merk-logo .merk-logo-donker { display: block; }

/* --- Gastpagina's: inloggen, wachtwoord, uitnodiging ---
   Eén formulierkolom op het crèmekleurige paginavlak en, op de login, een
   navy zijpaneel met de mascotte. Navy en niet groen: groen is de actiekleur
   en blijft voorbehouden aan de knop. */
.auth-pagina { display: flex; min-height: 100vh; min-height: 100dvh; }
.auth-kolom {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px; position: relative;
}
.auth-paneel { width: 100%; max-width: 400px; }
.auth-kop { margin: 28px 0 6px; font-size: 26px; }
.auth-intro { margin: 0 0 24px; font-size: 14px; line-height: 1.6; color: var(--text-body); }
.auth-formulier { display: flex; flex-direction: column; gap: 16px; }
.auth-veld label {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-body);
}
.auth-veld input {
  width: 100%; padding: 12px 14px;
  border: var(--border-w) solid var(--border-default); border-radius: 12px;
  background: var(--surface-card); color: var(--text-strong);
  font: inherit; font-size: 15px; line-height: 1.3;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.auth-veld input::placeholder { color: var(--text-muted); }
.auth-veld input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 4px var(--surface-accent); }
.auth-veld input:disabled { color: var(--text-muted); background: var(--surface-sunken); }
.auth-veld .hint { margin-top: 5px; font-size: 12px; color: var(--text-muted); }
.auth-veld-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-veld-kop a { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--text-link); text-decoration: none; }
.auth-veld-kop a:hover { color: var(--text-link-hover); text-decoration: underline; }
.auth-wachtwoord { position: relative; }
.auth-wachtwoord input { padding-right: 48px; }
.auth-toon {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: none; border-radius: 50%; padding: 0;
  background: transparent; color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-toon:hover { background: var(--surface-hover); color: var(--text-strong); }
.auth-toon .icon-verberg { display: none; }
.auth-toon[aria-pressed="true"] .icon-toon { display: none; }
.auth-toon[aria-pressed="true"] .icon-verberg { display: inline-flex; }
.auth-knop { width: 100%; padding: 13px 16px; font-size: 15px; margin-top: 4px; }
.auth-scheiding {
  display: flex; align-items: center; gap: 12px; margin: 22px 0;
  font-size: 12px; color: var(--text-muted);
}
.auth-scheiding::before, .auth-scheiding::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
.auth-google { width: 100%; padding: 12px 16px; font-size: 15px; text-decoration: none; }
.auth-google:hover { text-decoration: none; }
.auth-melding {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px;
  padding: 11px 14px; border-radius: 12px;
  font-size: 13.5px; font-weight: var(--fw-semibold); line-height: 1.45;
}
.auth-melding.pos { background: var(--tint-pos-bg); color: var(--tint-pos-ink); }
.auth-melding.neg { background: var(--tint-neg-bg); color: var(--tint-neg-ink); }
.auth-melding svg { flex: none; margin-top: 2px; }
.auth-voet { margin: 26px 0 0; font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.5; }
.auth-voet a { color: var(--text-body); font-weight: var(--fw-semibold); }
.auth-thema { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; padding: 0; border-radius: 50%; }

/* Het zijpaneel: navy-800 en niet --surface-inverse, want die draait in het
   donkere thema om naar wit. Een zachte groene gloed rechtsboven houdt het
   vlak levend zonder het groene budget op te maken. */
.auth-aside {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 48px 40px; color: var(--mm-white);
  background:
    radial-gradient(circle at 85% 12%, rgba(34, 181, 98, 0.28), transparent 42%),
    radial-gradient(circle at 10% 95%, rgba(255, 88, 72, 0.16), transparent 38%),
    var(--mm-navy-800);
}
[data-theme="dark"] .auth-aside { border-left: 1px solid var(--border-subtle); }
.auth-aside-inhoud { max-width: 400px; }
.auth-aside img { width: 200px; max-width: 60%; height: auto; margin-bottom: 26px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35)); }
.auth-aside .display { font-size: 32px; margin-bottom: 12px; color: var(--mm-white); text-wrap: balance; }
.auth-aside p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.auth-punten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.auth-punten li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.9); }
.auth-punten .vink {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(34, 181, 98, 0.22); color: var(--mm-green-300);
}
.auth-kaart { padding: 28px; text-align: center; }
.auth-kaart .merk-logo { justify-content: center; }
.auth-kaart .auth-intro { margin-top: 12px; }

@media (max-width: 860px) {
  .auth-aside { display: none !important; }
  .auth-kolom { justify-content: flex-start; padding-top: 72px; }
  .auth-thema { top: 14px; right: 14px; }
}

/* --- Zijmenu, in- en uitklapbaar ---
   Ingeklapt blijft het een icoonrail: de navigatie zelf verdwijnt nooit, alleen
   de tekst eromheen. De stand staat als `data-sidebar` op <html> (zelfde patroon
   als het thema), zodat de breedte al vóór de eerste paint klopt. */
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--surface-card); border-right: var(--border-w) solid var(--border-subtle);
  display: flex; flex-direction: column; padding: 20px 16px;
  transition: width var(--dur-base) var(--ease-standard),
              flex-basis var(--dur-base) var(--ease-standard),
              padding var(--dur-base) var(--ease-standard);
}
.sidebar-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 0 6px; min-height: 56px; }
/* Het beeldmerk met het woordmerk ernaast op twee regels: dat is één bestand,
   de horizontale lockup, want beeldmerk en woordmerk mogen nooit zelf opnieuw
   uitgelijnd worden. Op 56px is de lockup circa 138px breed, dus binnen een
   menu van 248px houdt de inklapknop ernaast ruimte over. */
.sidebar-logo { height: 56px; width: auto; flex: 0 1 auto; min-width: 0; margin-right: auto; object-fit: contain; object-position: left center; }
[data-theme="dark"] .sidebar-logo-licht { display: none; }
.sidebar-logo-donker { display: none; }
[data-theme="dark"] .sidebar-logo-donker { display: block; }
/* Ingeklapt blijft alleen het beeldmerk over. */
.sidebar-beeldmerk { display: none; height: 30px; width: 30px; object-fit: contain; }

/* Het accountblok bovenaan: wie je bent en welke klant je bekijkt, met een
   menu eronder om te wisselen en uit te loggen. Eén blok in plaats van een
   losse klantkiezer boven en een gebruikersregel onderin, zodat je op één plek
   ziet in wiens omgeving je werkt. */
.accountblok { position: relative; margin-bottom: 18px; }
.accountkaart {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.accountkaart:hover { border-color: var(--border-strong); }
.accountkaart[aria-expanded="true"] { border-color: var(--border-focus); }
.accountkaart-avatar {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--surface-accent); color: var(--text-brand);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 14px;
  flex: 0 0 auto;
}
.accountkaart-tekst { flex: 1; min-width: 0; }
.accountkaart-naam {
  display: block;
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 14px; color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.accountkaart-sub {
  display: block; font-size: var(--fs-caption); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.accountkaart-chevron { color: var(--text-muted); display: flex; flex: 0 0 auto; }

.accountmenu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
}
.accountmenu-kop { padding: 8px 10px 10px; border-bottom: var(--border-w) solid var(--border-subtle); margin-bottom: 6px; }
.accountmenu-naam { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 13.5px; color: var(--text-strong); }
.accountmenu-mail { font-size: var(--fs-caption); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accountmenu-rol { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 3px; }
.accountmenu-titel {
  font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--text-muted); padding: 6px 10px 4px;
}
/* Alleen de klantenlijst scrollt. Zo blijven de kop en Uitloggen staan, ook
   bij een bureau met tientallen klanten. */
.accountmenu-lijst { display: flex; flex-direction: column; max-height: 40vh; overflow-y: auto; }
.accountmenu-voet { border-top: var(--border-w) solid var(--border-subtle); margin-top: 6px; padding-top: 6px; }
.accountmenu-rij {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border: none; border-radius: var(--radius-sm);
  background: none; color: var(--text-body);
  font: inherit; font-size: 13px; font-weight: var(--fw-semibold);
  text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
/* Het hidden-attribuut moet winnen van de flex-weergave hierboven: de rijen
   onder "alle klanten" en de zoekfilter zetten het. */
.accountmenu-rij[hidden], .accountmenu-titel[hidden] { display: none; }
.accountmenu-rij:hover { background: var(--surface-hover); }
.accountmenu-rij.actief { background: var(--surface-accent); color: var(--text-brand); cursor: default; }
.accountmenu-rij-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accountmenu-bol {
  width: 22px; height: 22px; border-radius: var(--radius-xs);
  background: var(--surface-sunken); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--fw-semibold); flex: 0 0 auto;
}
.accountmenu-rij.actief .accountmenu-bol { background: var(--mm-white); color: var(--text-brand); }

.sidebar-toggle {
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  display: flex; padding: 6px; border-radius: var(--radius-xs); flex: 0 0 auto;
}
.sidebar-toggle:hover { background: var(--surface-hover); color: var(--text-strong); }
.nav-link {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm);
  text-decoration: none; font-family: var(--font-body); font-weight: var(--fw-semibold);
  font-size: var(--fs-body); color: var(--text-body);
  transition: background var(--dur-fast) var(--ease-standard);
}
.nav-link:hover { background: var(--surface-hover); text-decoration: none; color: var(--text-body); }
.nav-link.actief { color: var(--text-brand); background: var(--surface-accent); }
.nav-link svg { flex: 0 0 auto; }
.nav-scheiding { margin-top: 6px; border-top: var(--border-w) solid var(--border-subtle); padding-top: 16px; }
/* Raamwerk: de KPI-namen blijven links staan terwijl je door de maanden
   scrollt. De achtergrond komt van de rij zelf, zodat een kopregel, een gewone
   rij en een uitsplitsing elk hun eigen kleur meenemen onder de cijfers door.
   `align-self: stretch` is daarbij geen detail: de rij centreert zijn cellen,
   dus zonder dat is de naam lager dan de cellen ernaast en schuiven die er
   boven- en onderlangs zichtbaar onderdoor. */
.rw-label {
  position: sticky; left: 0; z-index: 1; background: inherit;
  align-self: stretch; display: flex; align-items: center;
  box-shadow: 1px 0 0 var(--c-border-soft);
}

.nav-blok, .nav-items { display: flex; flex-direction: column; gap: 2px; }
/* Het kopje is tegelijk de knop die zijn blok in- en uitklapt: het menu wordt
   met elk kanaal langer, en niet iedereen gebruikt alles even vaak. */
.nav-groep {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--text-muted); margin: 14px 12px 5px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-groep:hover { color: var(--text-body); }
/* Staat de huidige pagina in dit blok, dan blijft dat ook ingeklapt te zien. */
.nav-groep.bevat-actief { color: var(--text-brand); }
.nav-groep-pijl { flex: none; transition: transform var(--dur-fast) var(--ease-standard); }
.nav-blok[data-dicht] .nav-groep-pijl { transform: rotate(-90deg); }
.nav-blok[data-dicht] .nav-items { display: none; }

[data-sidebar="ingeklapt"] .sidebar { width: 74px; flex-basis: 74px; padding-left: 12px; padding-right: 12px; }
/* Alles wat alleen zin heeft met tekst ernaast: labels, kopjes, de
   omgevingskiezer en de koppelingsvoortgang. */
[data-sidebar="ingeklapt"] .sidebar-inklapbaar { display: none; }
/* Ingeklapt is de rail 74px breed. Beeldmerk en inklapknop passen daar niet
   naast elkaar, dus staan ze onder elkaar, net als de gebruiker onderin. */
[data-sidebar="ingeklapt"] .sidebar-kop { flex-direction: column; align-items: center; gap: 10px; padding: 0; }
[data-sidebar="ingeklapt"] .sidebar-beeldmerk { display: block; }
[data-sidebar="ingeklapt"] .nav-link { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
/* Ingeklapt blijft alleen de avatar over; het menu klapt dan naast de rail uit
   in plaats van eronder, want de rail zelf is er te smal voor. */
[data-sidebar="ingeklapt"] .accountkaart { justify-content: center; padding: 8px; }
[data-sidebar="ingeklapt"] .accountmenu { top: 0; left: calc(100% + 8px); right: auto; width: 230px; }
/* Het kopje wordt een streepje: de blokken blijven van elkaar te onderscheiden,
   ook zonder de tekst erboven. */
[data-sidebar="ingeklapt"] .nav-groep { margin: 12px 0 5px; height: 1px; padding: 0; overflow: hidden; text-indent: -9999px; background: var(--border-subtle); }
/* In de icoonrail is het kopje een streepje: daar valt niets te klappen, en
   een ingeklapt blok zou zijn iconen zonder aanwijsbare reden verbergen. */
[data-sidebar="ingeklapt"] .nav-groep { pointer-events: none; }
[data-sidebar="ingeklapt"] .nav-blok[data-dicht] .nav-items { display: flex; }
/* Uitloggen blijft bereikbaar zonder eerst uit te klappen: avatar en knop
   gaan onder elkaar staan in plaats van naast elkaar. */

@media (prefers-reduced-motion: reduce) { .sidebar, .nav-groep-pijl { transition: none; } }

/* --- Kanban-bord ---
   De fasekleur is één keer luid genoeg: als bolletje in de kop, met een heel
   lichte waas van diezelfde kleur achter de kop zodat kop en kolom bij elkaar
   horen. Een dikke gekleurde balk over de volle breedte van elke kolom, zoals
   tpcrm die had, maakt van zeven fases een regenboog en trekt de aandacht naar
   de kolomkoppen in plaats van naar de leads. */
.board { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding-bottom: 14px; }
.kolom {
  flex: 0 0 290px;
  background: var(--surface-sunken);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 260px);
  overflow: hidden;
}
/* Het roadmapbord heeft vijf kolommen in plaats van de zeven fases van het
   CRM, maar staat in een smaller scherm en met kortere kaarten. Op deze
   breedte passen ze samen binnen het venster; daarboven blijft het bord
   gewoon horizontaal scrollen. */
.board-roadmap .kolom { flex-basis: 244px; max-height: none; }
/* De kaart opent zijn eigen venster; dat mag je aan de aanwijzer zien, en met
   het toetsenbord moet de focus net zo goed te volgen zijn. */
.roadmap-kaart { cursor: pointer; }
.roadmap-kaart:focus-visible { outline: 2px solid var(--action-primary); outline-offset: 2px; }
.kolom-gewonnen { background: var(--tint-pos-bg); border-color: transparent; }
.kolom-verloren { background: var(--tint-neg-bg); border-color: transparent; }
.kolom-kop {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 15px;
  border-bottom: var(--border-w) solid var(--border-subtle);
  /* De waas is de fasekleur op 10%; op een browser zonder color-mix blijft de
     kop gewoon de achtergrond van de kolom houden. */
  background: color-mix(in srgb, var(--fase-kleur, transparent) 10%, transparent);
  font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-body);
  color: var(--text-strong);
}
.kolom-kop-bol { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.kolom-aantal {
  background: var(--surface-card); border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 1px 9px;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.kaarten { padding: 11px; overflow-y: auto; flex: 1; min-height: 90px; display: flex; flex-direction: column; gap: 9px; }
/* Actieve kolom tijdens het slepen. */
.kaarten.sleep-doel { outline: 2px dashed var(--action-primary); outline-offset: -6px; border-radius: var(--radius-sm); }
/* Een lege kolom is nu een grijze leegte; dit zegt tenminste wat hij betekent. */
.kolom-leeg {
  margin: auto; padding: 10px 6px; text-align: center;
  font-size: var(--fs-caption); color: var(--text-muted);
}

.kaart {
  display: block;
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 13px;
  box-shadow: var(--shadow-xs);
  cursor: grab;
  text-decoration: none; color: inherit;
  transition: box-shadow var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.kaart:hover { box-shadow: var(--shadow-md); text-decoration: none; color: inherit; }
.kaart:active { cursor: grabbing; }
.kaart.wordt-gesleept { opacity: 0.4; }
.kaart-titel { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 14px; color: var(--text-strong); }
.kaart-sub { color: var(--text-muted); font-size: var(--fs-caption); margin-top: 2px; }
/* Van welk formulier de lead komt. Eén regel, afgekapt: een lange
   formuliernaam hoort de kaart niet hoger te maken dan zijn buren. */
.kaart-herkomst { display: flex; align-items: center; gap: 5px; min-width: 0; margin-top: 6px; color: var(--text-muted); font-size: var(--fs-micro); }
.kaart-herkomst svg { flex: none; }
.kaart-herkomst span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kaart-voet { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.kaart-bedrag { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--data-pos); font-variant-numeric: tabular-nums; }
.kaart-datum { color: var(--text-muted); font-size: var(--fs-micro); margin-top: 6px; }

/* Bronlabels. Tekst op een gekleurd vlak is wit, behalve op geel: daar haalt
   wit geen contrast en gaat de tekst naar navy. */
.bron { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--mm-white); }
.bron-seo { background: var(--chart-1); }
.bron-sea { background: var(--chart-4); }
.bron-social { background: var(--chart-6); }
.bron-direct { background: var(--mm-gray-500); }

/* Invoervelden in de CRM-formulieren, zodat die niet overal inline staan. */
.veld {
  width: 100%; padding: 9px 12px;
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-sm);
  font-size: var(--fs-body); font-family: var(--font-body);
  background: var(--surface-card); color: var(--text-strong);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.veld:hover { border-color: var(--border-strong); }
.veld:focus { border-color: var(--border-focus); outline: none; }
.veld:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.veld:disabled { color: var(--text-muted); background: var(--surface-sunken); cursor: not-allowed; }
.veld-label { display: block; font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: 5px; }

/* Print / Save-as-PDF: drop app chrome, force light, let content flow. */
@media print {
  .no-print { display: none !important; }
  :root {
    --surface-page: #fff; --surface-card: #fff; --surface-sunken: #fff;
    --text-strong: #04122b; --text-body: #0b1d3a; --text-muted: #6b7488;
    --border-subtle: #eceef2; --border-default: #dee1e8;
  }
  html, body, #root { height: auto !important; background: #fff !important; }
  .dash-content { overflow: visible !important; height: auto !important; padding: 0 !important; }
}

/* --- Weergavekiezer op de kanaalschermen ------------------------------- */
.view-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-ink);
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.view-pill:hover { background: var(--surface-hover); transform: var(--lift-hover); }
.view-pill.actief { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.view-pill-label { font-size: 11px; font-weight: 600; opacity: 0.75; }

/* --- Widget-galerij met live voorbeeld ---------------------------------- */
/* De filterbalk van de widgetkiezer. Plakt bovenaan de modal, want in een
   lijst van ruim honderd tegels is de zoekbalk het enige wat je onderweg
   nog nodig hebt. De negatieve zijmarges trekken hem door de padding van de
   kaart, zodat er niets langs de randen doorheen scrolt; de titel erboven
   schuift eronderdoor, vandaar de dekkende achtergrond. */
.kiezer-balk {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -24px 14px;
  padding: 4px 24px 12px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--c-border-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kiezer-zoek {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
  background: var(--c-surface-2);
  color: inherit;
}

.kiezer-zoek:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.kiezer-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.kiezer-kop {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-right: 4px;
}

.kiezer-chip {
  border: 1px solid var(--c-border);
  background: none;
  color: var(--c-muted);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}

.kiezer-chip:hover { border-color: var(--c-accent); color: inherit; }

.kiezer-chip.actief {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #fff;
}

.kiezer-telling {
  font-size: 12px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* Keuzelijst met zoekbalk voor de bronnen van een klant (bronkiezer.js). Een
   knop die de gekozen bron toont, en een paneel met een zoekbalk en een lijst
   die je kunt doorscrollen. */
.bronkiezer { position: relative; }

.bronkiezer-knop {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.bronkiezer-knop:hover { border-color: var(--c-border-strong); }
.bronkiezer-knop:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.bronkiezer-knop:disabled { cursor: not-allowed; opacity: .6; }
.bronkiezer-knop.leeg .bronkiezer-tekst { color: var(--c-muted); }
.bronkiezer-tekst { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bronkiezer-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-muted); font-size: 11.5px; }
.bronkiezer-pijl { flex: none; margin-left: auto; color: var(--c-muted); font-size: 11px; }

.bronkiezer-paneel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  width: 100%;
  min-width: min(340px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(0, 0, 0, .18));
}

/* Zonder deze regel wint display:flex hierboven van het hidden-attribuut, en
   ligt een gesloten paneel onzichtbaar over het veld eronder. */
.bronkiezer-paneel[hidden] { display: none; }

.bronkiezer-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bronkiezer-optie {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.35;
}
.bronkiezer-optie.actief { background: var(--c-accent-soft); }
.bronkiezer-optie[aria-selected="true"] .bronkiezer-naam { font-weight: 700; }
.bronkiezer-optie.bronkiezer-geen .bronkiezer-naam { color: var(--c-muted); font-style: italic; }
.bronkiezer-naam { color: var(--c-ink); overflow-wrap: anywhere; }
.bronkiezer-optie-sub { color: var(--c-muted); font-size: 11.5px; overflow-wrap: anywhere; }
.bronkiezer-optie-sub:empty { display: none; }

.bronkiezer-voet {
  font-size: 11.5px;
  color: var(--c-muted);
  padding: 2px 4px 0;
  font-variant-numeric: tabular-nums;
}

.widget-preview {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--c-border); border-radius: 14px; background: var(--surface-sunken);
  padding: 12px; cursor: pointer; outline: none;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.widget-preview[hidden] { display: none; }
.widget-preview:hover, .widget-preview:focus-visible { border-color: var(--c-accent); transform: translateY(-2px); box-shadow: var(--sh-md); }
.widget-preview-inhoud { position: relative; max-height: 260px; overflow: hidden; pointer-events: none; }
.widget-preview-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(to bottom, transparent, var(--surface-sunken)); }
/* Wat er staat tot het voorbeeld getekend is: dezelfde hoogte als een kaart,
   zodat de tegels niet verspringen zodra ze in beeld komen. */
.widget-preview-skelet { height: 148px; border-radius: 10px; background: var(--c-surface); border: 1px solid var(--c-border); }
@media (prefers-reduced-motion: no-preference) {
  .widget-preview-skelet { animation: kiezer-puls 1.4s ease-in-out infinite; }
}
@keyframes kiezer-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Feedbackknop: verticaal tegen de rechterrand. Verticale schrijfrichting
   plus een halve slag, zodat de tekst van onder naar boven leest en de knop
   zonder rekenwerk aan de transform-origin op zijn plek blijft. */
.feedback-knop {
  position: fixed; right: 0; top: 50%; z-index: 90;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  border: 1px solid var(--c-border); border-left: none; border-radius: 0 10px 10px 0;
  background: var(--c-surface); color: var(--c-muted); font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 14px 7px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.feedback-knop:hover { color: var(--c-accent); }
.feedback-chip { border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--c-ink); }
.feedback-chip.aan { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent); }

/* --- AI-assistent: chatscherm en Markdown-antwoorden -------------------- */
.assistent-gesprek { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 4px 2px 8px; }
.assistent-beurt { display: flex; }
.assistent-beurt.is-gebruiker { justify-content: flex-end; }
.assistent-bubbel {
  max-width: min(78ch, 88%); border-radius: 14px; padding: 12px 15px;
  font-size: 13.5px; line-height: 1.6; border: 1px solid var(--c-border-soft); background: var(--c-surface);
}
.is-gebruiker .assistent-bubbel { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.assistent-tool { font-size: 12px; color: var(--c-muted); font-weight: 600; }
.is-gebruiker .assistent-tool { color: rgba(255,255,255,.8); }
.assistent-fout { font-size: 12.5px; color: var(--c-neg); margin-top: 4px; }
.assistent-chip {
  border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 999px;
  padding: 8px 14px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--c-ink);
  cursor: pointer; text-align: left;
}
.assistent-chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
.assistent-invoer {
  flex: 1; min-height: 44px; max-height: 160px; resize: vertical;
  border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface); color: var(--c-ink);
  font: inherit; font-size: 13.5px; padding: 12px 14px;
}
.assistent-invoer:focus { outline: none; border-color: var(--c-accent); }

/* Markdown uit de antwoorden. Bewust ingetogen: dit staat in een bubbel. */
.md-alinea { margin: 0 0 8px; }
.md-alinea:last-child, .md-lijst:last-child, .md-tabel-wrap:last-child { margin-bottom: 0; }
.md-kop { margin: 12px 0 6px; font-size: 14px; font-weight: 800; line-height: 1.35; }
.md-kop:first-child { margin-top: 0; }
.md-lijst { margin: 0 0 8px; padding-left: 20px; }
.md-lijst li { margin: 2px 0; }
.md-citaat { margin: 0 0 8px; padding-left: 10px; border-left: 3px solid var(--c-border); color: var(--c-muted); }
.md-code { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-sunken); overflow-x: auto; font-size: 12px; }
.md-tabel-wrap { overflow-x: auto; margin: 0 0 8px; }
.md-tabel { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.md-tabel th, .md-tabel td { border-bottom: 1px solid var(--c-border-soft); padding: 6px 10px; text-align: left; white-space: nowrap; }
.md-tabel th { font-weight: 700; color: var(--c-muted); }

/* --- Kleurkiezer voor fases ---------------------------------------------
   Een rijtje met het MetricMelon-palet plus een eigen kleur ernaast. Zo kiest
   iedereen standaard uit de huisstijl, zonder de vrijheid weg te nemen. */
.kleurkiezer { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; height: 38px; }
.kleurstip {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--stip); border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--border-default) inset;
  transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.kleurstip:hover { transform: scale(1.15); }
.kleurstip.actief { border-color: var(--text-strong); transform: scale(1.1); }
.kleureigen {
  width: 28px; height: 26px; padding: 1px; margin-left: 3px; cursor: pointer;
  border: var(--border-w) solid var(--border-default); border-radius: var(--radius-xs);
  background: var(--surface-card);
}

/* --- Micro-interacties ---------------------------------------------------
   De regel die hier overal geldt: beweging dient het aflezen van een getal,
   niet de sier. Wat hieronder staat onthult iets dat er anders niet was, of
   vertelt waar een klik toe leidt. Wat het niet doet is cijfers laten
   optellen of widgets laten inzweven; dat vertraagt het aflezen. */

/* Tooltip. Informatie, geen versiering: bij prefers-reduced-motion zet
   motion.css de duur op vrijwel nul, en dan verschijnt hij meteen. Weg mag hij
   dan nooit, want de tekst zelf heeft niets met beweging te maken. */
.tooltip {
  position: fixed; z-index: 200;
  max-width: 280px; padding: 7px 11px;
  border-radius: var(--radius-sm);
  background: var(--surface-inverse); color: var(--text-inverse);
  font-family: var(--font-body); font-size: 12.5px; font-weight: var(--fw-semibold);
  line-height: 1.45; text-align: left;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0; transform: translateY(3px);
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.tooltip.onder { transform: translateY(-3px); }
.tooltip.aan { opacity: 1; transform: translateY(0); }
[data-theme="dark"] .tooltip { background: var(--mm-gray-100); color: var(--mm-navy-800); }

/* Toast. Een bevestiging verdwijnt vanzelf, een fout blijft staan tot je hem
   wegklikt: die wil je kunnen lezen en desnoods overtypen. */
.toastbak {
  position: fixed; right: 20px; bottom: 20px; z-index: 190;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  max-width: 360px; padding: 11px 16px;
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-strong);
  font-family: var(--font-body); font-size: 13.5px; font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.toast.aan { opacity: 1; transform: translateY(0); }
.toast.fout { border-color: var(--action-danger); color: var(--action-danger); }
.toast-sluiten {
  border: none; background: none; cursor: pointer; color: inherit;
  font: inherit; font-size: 18px; line-height: 1; padding: 0 2px; flex: 0 0 auto;
}

/* De leeslijn op een vlakgrafiek. De leesstand staat absoluut over de grafiek,
   dus er springt niets zodra je erover beweegt. */
.grafiek { position: relative; }
.grafiek-lees {
  position: absolute; top: 0; right: 0; z-index: 2;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface-card); border: var(--border-w) solid var(--border-subtle);
  font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-strong);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: var(--shadow-xs);
  pointer-events: none;
}
.grafiek svg { cursor: crosshair; }

/* Donut: het segment onder de muis blijft vol, de rest dimt. Zo zie je meteen
   welk deel de tooltip beschrijft. */
.donut:hover circle { opacity: .4; transition: opacity var(--dur-fast) var(--ease-standard); }
.donut circle:hover { opacity: 1; }

/* Balkenlijst: de rij onder de muis licht op, zodat label en getal bij elkaar
   blijven horen als de lijst lang is. */
.balkrij { padding: 3px 6px; margin: -3px -6px; border-radius: var(--radius-xs); transition: background var(--dur-fast) var(--ease-standard); }
.balkrij:hover { background: var(--surface-hover); }

/* Drie kaartstaten. Een KPI-widget, een leadkaart en een widgettegel zagen er
   in rust identiek uit; nu vertelt de vorm wat er kan. `.card` zelf blijft
   stilstaan, want de meeste kaarten zijn alleen om te lezen. */
.card-klikbaar {
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.card-klikbaar:hover, .card-klikbaar:focus-visible {
  transform: var(--lift-hover); box-shadow: var(--shadow-md); border-color: var(--border-strong);
}

/* Panelen die uit een knop komen: 4px verplaatsing vanaf de hoek waar de knop
   staat. Genoeg om het verband te leggen, kort genoeg om niet in de weg te
   zitten. */
.paneel-uit {
  animation: paneel-uit var(--dur-fast) var(--ease-standard);
  transform-origin: top right;
}
.paneel-uit-links { transform-origin: top left; }
@keyframes paneel-uit {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* De plek waar een gesleepte leadkaart landt. Zonder dit weet je dat pas na
   het loslaten. */
.sleep-plek {
  border: 2px dashed var(--action-primary);
  border-radius: var(--radius-md);
  background: var(--surface-accent);
  flex: 0 0 auto;
}

/* De assistent die nadenkt: drie stipjes die om beurten opdoemen. Bij
   prefers-reduced-motion staan ze stil, en dat is precies goed: de tekst
   ernaast zegt al wat er gebeurt. */
.denkt { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: middle; }
.denkt span {
  width: 4px; height: 4px; border-radius: 50%; background: currentColor;
  animation: denkt 1.1s var(--ease-standard) infinite;
}
.denkt span:nth-child(2) { animation-delay: .18s; }
.denkt span:nth-child(3) { animation-delay: .36s; }
@keyframes denkt {
  0%, 60%, 100% { opacity: .25; }
  30% { opacity: 1; }
}

/* --- Mobiel en tablet -------------------------------------------------------
   Tot 900px verdwijnt het zijmenu van zijn vaste plek en wordt het een la die
   van links inschuift, geopend met de menuknop in de bovenbalk. De inklapstand
   van het menu (`data-sidebar`) heeft daar geen betekenis meer: een la is
   altijd volledig. De inhoud krijgt de volle breedte en minder witruimte; de
   uitklappanelen in de bovenbalk gaan over de volle breedte in plaats van als
   smal blokje rechts. Onder 640px worden alle widgets één kolom breed, gaan
   tabellen binnen hun eigen kader scrollen, en worden de kolommen van het
   bord zo breed als het scherm met snap, zodat je per fase kunt vegen. */
/* --- Documentatie ---
   Een vaste inhoudsopgave links die meescrolt en de sectie markeert waar je
   bent; de tekst rechts op leesbreedte. */
.docs-indeling { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.docs-inhoud { position: sticky; top: 16px; padding: 14px 6px; }
.docs-inhoud-knop {
  display: none; width: 100%; align-items: center; gap: 8px; padding: 12px 14px;
  border: none; background: transparent; color: var(--text-strong); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.docs-inhoud-label { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.docs-inhoud-huidig { flex: 1; min-width: 0; font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-inhoud-knop svg { flex: none; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-standard); }
.docs-inhoud-kop { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 0 12px 8px; }
.docs-inhoud a {
  display: block; padding: 7px 12px; border-radius: 8px;
  font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-body); text-decoration: none;
}
.docs-inhoud a:hover { background: var(--surface-hover); }
.docs-inhoud a.actief { background: var(--surface-accent); color: var(--text-brand); }
.docs-tekst { display: flex; flex-direction: column; gap: 36px; max-width: 760px; font-size: 14px; line-height: 1.65; }
.docs-tekst section { scroll-margin-top: 20px; }
.docs-tekst h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px; scroll-margin-top: 20px; }
.docs-tekst h3 { font-size: 15px; margin: 18px 0 6px; }
.docs-tekst p { margin: 0 0 10px; }
.docs-tekst ol, .docs-tekst ul { margin: 0 0 10px; padding-left: 22px; }
.docs-tekst li { margin-bottom: 5px; }
.docs-tekst .let-op { padding: 10px 14px; border-radius: 8px; background: var(--surface-sunken); font-size: 13px; margin: 10px 0; }
.docs-tekst dt { font-weight: var(--fw-bold); margin-top: 8px; }
.docs-tekst dd { margin: 2px 0 0; color: var(--text-body); }

.dash-content { padding: 28px; }
.topbar { padding: 16px 28px; }
.menu-knop, .sidebar-sluiten, .menu-achtergrond { display: none; }

@media (max-width: 900px) {
  .dash-content { padding: 16px; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .menu-knop { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; }
  /* De inklapknop heeft in de la geen zin; de sluitknop komt ervoor in de plaats. */
  .sidebar-toggle { display: none; }
  .sidebar-toggle.sidebar-sluiten { display: flex; margin-left: auto; }

  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 300;
    width: min(300px, 86vw); flex-basis: auto;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-standard);
    overflow-y: auto;
  }
  [data-menu="open"] .sidebar { transform: none; box-shadow: 0 20px 60px rgba(11, 29, 58, .28); }
  .menu-achtergrond { position: fixed; inset: 0; z-index: 290; background: rgba(11, 29, 58, .45); }
  [data-menu="open"] .menu-achtergrond { display: block; }
  [data-menu="open"] { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .sidebar, .nav-groep-pijl { transition: none; } }

  /* De inklapstand van het bureaublad ongedaan: in de la staat alles voluit. */
  [data-sidebar="ingeklapt"] .sidebar { width: min(300px, 86vw); padding: 20px 16px; }
  [data-sidebar="ingeklapt"] .sidebar-inklapbaar { display: revert; }
  /* De logo's volgen weer alleen het thema, niet de inklapstand. */
  [data-sidebar="ingeklapt"] .sidebar-beeldmerk { display: none !important; }
  [data-sidebar="ingeklapt"] .sidebar-logo-donker { display: none; }
  [data-theme="dark"][data-sidebar="ingeklapt"] .sidebar-logo-licht { display: none; }
  [data-theme="dark"][data-sidebar="ingeklapt"] .sidebar-logo-donker { display: block; }
  [data-sidebar="ingeklapt"] .sidebar-kop { flex-direction: row; align-items: center; gap: 8px; padding: 0 6px; }
  [data-sidebar="ingeklapt"] .nav-link { justify-content: flex-start; gap: 11px; padding-left: 12px; padding-right: 12px; }
  [data-sidebar="ingeklapt"] .accountkaart { justify-content: flex-start; padding: 10px 12px; }
  [data-sidebar="ingeklapt"] .accountmenu { top: auto; left: 0; right: 0; width: auto; }
  [data-sidebar="ingeklapt"] .nav-groep { height: auto; text-indent: 0; background: none; margin: 14px 12px 5px; overflow: visible; }

  /* De panelen van periode en signalen komen los van hun knop en schuiven als
     een blad van onderaf omhoog: zo staan ze nooit over de bovenbalk, wat er
     ook boven die balk staat (proefbalk, impersonatiebalk), en zitten de
     knoppen onder je duim. */
  #period-picker-panel, [data-bel-paneel] {
    position: fixed !important; left: 0; right: 0; top: auto !important; bottom: 0;
    width: auto !important; max-width: none !important; max-height: 82vh; overflow: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; z-index: 320 !important;
    box-shadow: 0 -12px 40px rgba(11, 29, 58, .22);
  }

  /* Kleine widgets (de KPI-tegels) worden halve breedte, de grote houden de
     volle. Deze regel wint door zijn attribuutselector ook van de
     telefoonregel hieronder, en dat is de bedoeling: twee tegels naast
     elkaar passen prima op een telefoon, een grafiek van halve breedte niet. */
  .widget-cell[style*="span 3"], .widget-cell[style*="span 4"],
  .widget-frame[style*="span 3"], .widget-frame[style*="span 4"] { grid-column: span 6 !important; }
  .tpl-kiezer { grid-template-columns: 1fr !important; }
  .assistent-indeling { grid-template-columns: minmax(0, 1fr) !important; }
  /* De inhoudsopgave wordt een sticky balk bovenaan: dicht toont hij de
     huidige sectie, open de hele lijst. */
  .docs-indeling { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .docs-inhoud { top: 8px; padding: 0; z-index: 20; }
  .docs-inhoud-knop { display: flex; }
  .docs-inhoud-lijst { display: none; padding: 4px 6px 8px; border-top: 1px solid var(--border-subtle); max-height: 60vh; overflow-y: auto; }
  .docs-inhoud[data-open] .docs-inhoud-lijst { display: block; }
  .docs-inhoud[data-open] .docs-inhoud-knop svg { transform: rotate(180deg); }
  .docs-inhoud-kop { display: none; }
  .docs-tekst section, .docs-tekst h2 { scroll-margin-top: 72px; }
  .rapport-secties { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
  /* Alles één kolom, behalve de KPI-tegels (zie hierboven). */
  .widget-cell, .widget-frame { grid-column: span 12 !important; }
  .rapport-secties { grid-template-columns: 1fr !important; }
  /* Een tabel die breder is dan het scherm scrollt binnen zijn eigen kader,
     in plaats van de hele pagina opzij te duwen. */
  .dash-content table { display: block; max-width: 100%; overflow-x: auto; }
  /* Onder 16px zoomt iOS in op een invoerveld zodra je erin tikt. */
  input, select, textarea { font-size: 16px; }
  .board { scroll-snap-type: x mandatory; scroll-padding-left: 16px; }
  .kolom { flex-basis: 84vw; max-height: calc(100vh - 200px); scroll-snap-align: start; }
  .feedback-knop { display: none; }
  .toastbak { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .tooltip { max-width: calc(100vw - 24px); }
}

/* Een samengevouwen regel (zoals een eigen signaal) opent met de eigen knop,
   niet met het driehoekje van de browser. */
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }

/* Venster: een modaal <dialog> in de stijl van een kaart, voor een bewuste
   stap zoals het koppelen van een CRM. */
dialog.venster {
  border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 0; width: min(440px, calc(100vw - 32px));
  background: var(--surface-card); color: var(--text-strong);
  box-shadow: var(--shadow-lg, 0 20px 50px rgba(0, 0, 0, 0.25));
}
dialog.venster::backdrop { background: rgba(15, 23, 42, 0.45); }

/* Tabbladen op het bewerkscherm van een klant: dezelfde onderstreepte stijl
   als de tabbladen van Instellingen. Op een smal scherm schuift de rij. */
.admin-tabs {
  display: flex; gap: 4px; margin-bottom: 18px;
  border-bottom: 1px solid var(--c-border); overflow-x: auto; scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs [role="tab"] {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; margin-bottom: -1px;
  border: none; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--c-muted);
}
.admin-tabs [role="tab"]:hover { color: var(--text-strong); }
.admin-tabs [role="tab"][aria-selected="true"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.admin-tabs [role="tab"]:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.admin-tab-tal {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--c-surface-2); color: var(--c-muted);
}
.admin-tab-letop { width: 7px; height: 7px; border-radius: 50%; background: var(--c-neg); }
[data-tabpaneel]:focus-visible { outline: none; }

/* eRaamwerk: de tabellen van invoer, werklaag en kwartaal. Een gewone tabel
   met een vaste eerste kolom, zodat de regelnamen blijven staan terwijl je
   door de maanden schuift. */
.er-scroll { overflow-x: auto; }
.er-tabel { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.er-tabel th, .er-tabel td { padding: 6px 10px; border-bottom: 1px solid var(--c-border-soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.er-tabel thead th {
  position: sticky; top: 0; z-index: 2; background: var(--c-surface-2); color: var(--c-muted);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 11px 10px;
}
.er-tabel th:first-child, .er-tabel td:first-child {
  position: sticky; left: 0; z-index: 1; text-align: left; background: var(--c-surface);
  box-shadow: 1px 0 0 var(--c-border-soft); min-width: 230px; white-space: normal;
}
.er-tabel thead th:first-child { z-index: 3; background: var(--c-surface-2); }
.er-tabel tr.er-sectie td {
  background: var(--c-surface-2); color: var(--c-muted); font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-align: left; padding: 9px 10px;
}
.er-tabel tr.er-sectie td:first-child { background: var(--c-surface-2); }
.er-tabel .er-naam { font-weight: 700; }
.er-tabel .er-bron { display: block; font-size: 11px; font-weight: 600; color: var(--c-muted); margin-top: 1px; }
.er-tabel .er-uit-invoer { color: var(--c-accent); }
.er-tabel .er-delta { background: var(--rw-delta); }
.er-tabel tr.er-nadruk td { font-weight: 700; }
.er-invul {
  width: 112px; height: 32px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 13px; font-weight: 600; text-align: right;
}
.er-invul.er-aanname { background: var(--tint-warn-bg); }
.er-invul.er-fout { border-color: var(--c-neg); }

/* De klantpagina: kerncijfers als kaarten, en de toelichting per maand. */
.er-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.er-kaart { padding: 16px 18px; }
.er-kaart-label { font-size: 12px; font-weight: 700; color: var(--c-muted); }
.er-kaart-waarde { font-family: var(--font-display, inherit); font-size: 26px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.er-kaart-delta { font-size: 12.5px; font-weight: 700; margin-top: 4px; }
.er-tekstvak {
  width: 100%; min-height: 110px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--c-border);
  background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 13.5px; line-height: 1.55; resize: vertical;
}
/* Een ingevulde waarde die een cijfer uit een koppeling vervangt. */
.er-invul.er-overschreven { border-color: var(--c-accent); box-shadow: inset 3px 0 0 var(--c-accent); }
.er-invul::placeholder { color: var(--c-ink-soft); opacity: .7; }