/* ===================== TOKENS ===================== */
:root {
  /* Anthropic/Claude-palet — Slate (inkt) · Cloud (grijs) · Ivory (papier) ·
     Book Cloth/Kraft/Manilla (warm) + Focus/Error. Primitives staan onderaan;
     hier de semantische rollen. Eén warme achtergrond voor de héle app; kaarten
     in --color-surface contrasteren daartegen. */
  --color-bg: hsl(60 14% 97%); /* licht warm-wit paginagrond */
  --color-surface: #ffffff;   /* kaarten */
  /* Subtiele hover/actief-markering: een lichte donkere waas — altijd ietsje
     donkerder dan de ondergrond (werkt op elke achtergrond). */
  --color-hover: rgba(25, 25, 25, 0.06);
  /* Subtiel vlak voor het eigen bericht (book cloth op lage opacity). */
  --color-surface-own: rgba(204, 120, 92, 0.08);
  --color-text: #191919;      /* Slate Dark (inkt) */
  --color-text-muted: #666663; /* Cloud Dark — AA op de bg (~4.8:1) */
  --color-border: #d6d5cd;    /* zacht, iets donkerder dan de bg */
  /* Book Cloth (#cc785c) is te licht voor witte tekst (AA faalt). Voor tekst-
     dragende acties een verdiepte book-cloth; de heldere #cc785c gebruiken we waar
     geen tekst op staat (iconen, grafieken). */
  --color-accent: #b5663f;
  --color-accent-hover: #9c5436;
  --color-focus: #61aaf2;     /* Focus-ring */
  --color-error: #bf4d43;     /* Error */

  /* Chat (DP2) — deelt de bg met de rest (DRY → --color-bg). Eigen bubbel warm
     (Manilla), de ander wit; book cloth als warm accent. */
  --color-chat-bg: var(--color-bg);
  --color-chat-bubble-own: #ebdbbc;   /* Manilla */
  --color-chat-bubble-other: #ffffff;
  --color-chat-text: #191919;         /* Slate Dark */
  --color-chat-border: #d6d5cd;
  --color-chat-accent: #b5663f;
  --color-chat-accent-hover: #9c5436;
  --color-chat-surface-own: rgba(204, 120, 92, 0.08);
  /* Coach-ruimte (Claude-stijl): de ouder-bubbel is lichtgrijs i.p.v. het warme
     chat-eigen (Manilla). Eén token om de tint te draaien; de coach zelf praat
     bubbelloos (platte donkere tekst op de achtergrond — zie .coach). */
  --color-coach-bubble-own: #ededeb;

  /* Spacing (4px-schaal) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Typografie */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --weight-medium: 500;
  --leading: 1.5;

  /* Vorm */
  --radius: 8px;
  --sidebar-width: 264px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

  /* Primitives uit het Anthropic/Claude-palet (laagste laag, geen semantiek). */
  --slate-dark: #191919;
  --slate-medium: #262625;
  --slate-light: #40403e;
  --cloud-dark: #666663;
  --cloud-medium: #91918d;
  --cloud-light: #bfbfba;
  --ivory-dark: #e5e4df;
  --ivory-medium: #f0f0eb;
  --ivory-light: #fafaf7;
  --book-cloth: #cc785c;
  --kraft: #d4a27f;
  --manilla: #ebdbbc;

  /* Dataviz (DP6) — losse data-lijn in neutraal grijs: bewust NIET de actie-kleur,
     zodat een sparkline/bar niet als klikbaar actie-element leest. */
  --color-dataviz-line: var(--cloud-dark);
  --color-dataviz-muted: var(--cloud-light);
  --color-dataviz-axis: var(--color-border);
  --color-dataviz-text: var(--color-text-muted);
  /* Categorie-kleuren voor donut/multi-serie: onderscheidend & gelijkwaardig
     (book cloth vs neutraal grijs — zoals M365/Claude-usage); géén verkeerslicht. */
  --color-dataviz-cat-1: var(--book-cloth);  /* #cc785c */
  --color-dataviz-cat-2: var(--cloud-dark);  /* #666663 */
  --color-dataviz-cat-3: var(--kraft);       /* #d4a27f */
  --color-dataviz-cat-4: var(--slate-light); /* #40403e */

  /* Barometer (DP3) — gespreks-richting-meter. Bewust één wárme tint-familie die
     in verzadiging/diepte oploopt (zand → terracotta → diep oker), NOOIT een
     verkeerslicht (groen→rood = morele as, smokkelt een oordeel terug) en NOOIT
     signaalrood (alarmeert → verhoogt arousal → escaleert zelf). Familie-conflict-
     /style-eis: rustig, niet-alarmerend. Tint-waarden = startwaarden, te tunen met
     de drempel-kalibratie. Track/fill dragen nooit tekst → geen WCAG-tekst-eis erop;
     de richting-betekenis staat in het label + de positie (kleur is nooit de enige
     drager). */
  --color-barometer-track: var(--color-chat-border);
  --color-barometer-calm-fill: #b8b3a7;     /* warm-neutraal grijs, geen connotatie */
  --color-barometer-warming-fill: var(--kraft);    /* Kraft (tan) — warm, geen alarm */
  --color-barometer-hot-fill: var(--book-cloth);   /* Book Cloth (terracotta), geen rood */
  --color-barometer-cooldown-bg: var(--color-chat-surface-own); /* zacht koraal-vlak, = review-kaart */
}

/* ===================== BASE (mobile-first) ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  height: 100dvh;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-text);
  background: var(--color-bg);
}

a { color: var(--color-accent); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-4);
}

@media (min-width: 640px) {
  .container { padding: var(--space-6); }
}

/* ===================== COMPONENTEN ===================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

@media (min-width: 640px) {
  .card { padding: var(--space-6); }
}

.card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.card__meta {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ===================== CHAT (DP2) ===================== */
/* Eén gespreksstroom in het Claude-palet: volle-breedte warme achtergrond, content
   (berichten + composer) gecentreerd. Eigen bericht rechts (warm-grijs), de ander
   links (wit) — WhatsApp-indeling. De chat vult de viewport onder de nav (body =
   flex-kolom); de stroom scrollt, de composer staat vast onderaan. */
.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-chat-bg);
  color: var(--color-chat-text);
}

.chat__stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
}

.messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  /* 760px: chat-breedte — ruimer dan de 640px-container voor niet-chat-pagina's */
  max-width: 760px;
  margin-inline: auto;
}

.messages__empty {
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* Rij = bubbel + status-vinkjes. De ander links, eigen rechts (class door de
   own-message-controller). Kant + afgeplatte bubbelhoek = twee signalen naast
   kleur (WCAG 1.4.1). */
.message-row {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  align-items: flex-start;
  gap: 2px;
  max-width: 80%;
}

.message-row--own {
  align-self: flex-end;
  align-items: flex-end;
}

/* De ander: wit met subtiele rand + lichte schaduw (lift t.o.v. de lichte bg). */
.message {
  padding: var(--space-2) var(--space-3);
  background: var(--color-chat-bubble-other);
  border: 1px solid var(--color-chat-border);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.05);
}

/* Eigen bericht: warm-grijze bubbel, andere afgeplatte hoek. */
.message-row--own .message {
  background: var(--color-chat-bubble-own);
  border-color: transparent;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 4px;
}

/* Crisis-bubbel — alléén de coach-ruimte. "De warme vloor": een zacht, warm
   vasthoudend vlak, NOOIT een alarm (geen rood, geen schreeuw). Zelfde bubbel-
   anatomie als .message (DRY); alleen warmer getint — zacht clay-vlak + gedempte
   clay-rand. Coach = links, dus de afgeplatte linkeronderhoek blijft staan. */
.message--crisis {
  background: var(--color-chat-surface-own);
  border-color: rgba(196, 115, 74, 0.35);
}

.message__body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Afzender-naam: in een 1-op-1-chat zegt de kant al wie het stuurde — visueel
   verborgen, maar in de DOM voor schermlezers. */
.message__author {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Tijd + vinkjes rechtsonder ín de bubbel (WhatsApp-stijl). */
.message__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: 2px;
  font-size: 0.625rem;
  line-height: 1;
  color: var(--color-text-muted);
}

.message__time {
  font-variant-numeric: tabular-nums;
}

/* Status (vinkjes): ✓ verzonden, ✓✓ afgeleverd — own-only (controller toont 'm). */
.message__status {
  display: inline-flex;
  align-items: center;
}

.message__tick {
  letter-spacing: -0.15em;
}

/* Dag-scheiding: gecentreerde pil tussen berichten van verschillende dagen. */
.day-separator {
  align-self: center;
  margin: var(--space-3) 0 var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-chat-bubble-other);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

/* Composer: vast onderaan, wit afgerond veld + koraal-verzendknop (Claude-look). */
.chat__composer {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--color-chat-bg);
}

/* Composer = los tekstveld (eigen pill) + losse ronde verzendknop ernaast
   (WhatsApp-stijl). Volle-breedte achtergrond eromheen; content gecentreerd. */
.compose {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* Het veld is de pill (tekstveld + bijlage-/foto-iconen erin); de focus-rand
   staat op de pill, niet op het kale tekstveld. */
.compose__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-chat-bubble-other);
  border: 1px solid var(--color-chat-border);
  border-radius: 24px;
}

.compose__field:focus-within {
  outline: 2px solid var(--color-chat-accent);
  outline-offset: 2px;
}

.compose__body {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  max-height: 160px;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-chat-text);
  background: transparent;
  border: 0;
  resize: none;
}

.compose__body:focus-visible {
  outline: none;
}

/* Bijlage-/foto-placeholders (disabled): rustige icoon-knoppen in de pill. */
.compose__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.compose__icon:disabled {
  cursor: default;
  opacity: 0.55;
}

.compose__icon-svg {
  width: 20px;
  height: 20px;
}

/* Ronde koraal-knop met verzend-icoon (papieren vliegtuigje). */
.compose__submit {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #fff;
  background: var(--color-chat-accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
}

.compose__submit:hover {
  background: var(--color-chat-accent-hover);
}

.compose__send-icon {
  width: 20px;
  height: 20px;
  transition: opacity 0.15s;
}

/* Subtiele spinner: dun wit ringetje dat ronddraait; icoon verdwijnt zacht. */
/* Transparante wrapper zodat de flex-layout van .compose onveranderd blijft. */
.compose__actions { display: contents; }

.compose__submit--loading { cursor: default; }
.compose__submit--loading .compose__send-icon { opacity: 0; }
.compose__submit--loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Info-/fail-melding boven het veld (rustig informatief, geen alarm). */
.compose__notice {
  flex-basis: 100%;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ===================== COACH-RUIMTE (Claude-stijl) ===================== */
/* De coach-ruimte deelt de chat-shell (.chat / .message-row / .message / .compose)
   maar volgt het assistent-paradigma i.p.v. WhatsApp: de coach "praat" als platte
   donkere tekst direct op de achtergrond (géén bubbel), de ouder houdt een lichte
   bubbel rechts. Alle bubbel-anatomie komt nog uit .message (DRY) — hier alléén de
   afwijkingen, gescoped onder .coach. */

/* Ouder-bubbel: lichtgrijs i.p.v. het warme chat-eigen (Manilla), uniform afgerond
   (geen WhatsApp-hoek) — past bij het Claude-paradigma. */
.coach .message-row--own .message {
  background: var(--color-coach-bubble-own);
  border-bottom-right-radius: 16px;
}

/* Coach-beurt: geen bubbel. Platte donkere tekst op de achtergrond, volle leesbreedte.
   De crisis-vloer blijft wél een (warme) bubbel — een bewust vasthoudend vlak. */
.coach .message-row:not(.message-row--own) {
  max-width: 100%;
}

.coach .message-row:not(.message-row--own) .message:not(.message--crisis) {
  padding-inline: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Iets ruimer verticaal ritme tussen ouder-bubbel en coach-tekst (Claude-achtig). */
.coach .messages {
  gap: var(--space-4);
}


/* ===================== DE-ESCALATIE (DP3) ===================== */
/* Een gefluisterde alternatieve formulering bóven het invoerveld — géén dominante
   kaart en géén alarmerende blokkade. De kaart vervangt de verzendknop en wordt via
   flex (order/flex-basis) bovenop het veld geplaatst, zodat de suggestie verschijnt
   wáár je typt en niet ernaast. Een frosted, translucent warm vlak; het voorstel is
   een pull-quote (géén veld-look), de acties staan in één compacte rij. */
.review-card {
  /* Plaats de kaart bóven het invoerveld binnen de .compose-flexrij. */
  order: -1;
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-4);
  /* Schone, zachte warme panel — duidelijk de compose-zone, niet zwevend over de
     chat. (Géén blur: dat oogde troebel; de berichten blijven zichtbaar doordat de
     stroom mee-scrollt, zie chat_controller.) */
  background: var(--color-chat-surface-own);
  border: 1px solid var(--color-chat-border);
  border-radius: calc(var(--radius) + 4px);
  animation: review-card-in 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes review-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .review-card { animation: none; }
}

/* Kop: kleine, rustige label-regel met een zacht koraal-puntje als markering. */
.review-card__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.review-card__heading::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-chat-accent);
  opacity: 0.7;
}

/* Het voorstel: rechte tekst met een rustig koraal-lijntje links — een callout,
   géén box/rand/wit en géén cursief, dus niet te verwarren met een invoerveld. */
.review-card__suggestion {
  margin: 0;
  padding-left: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading);
  color: var(--color-chat-text);
  background: none;
  border: 0;
  border-left: 2px solid var(--color-chat-accent);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Eén actie-rij: hoofdacties links, de uitweg rechts (margin-left:auto). */
.review-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.review-card__action {
  margin: 0;
}

/* Compact: inhoudsbreedte i.p.v. volle breedte. */
.review-card__submit {
  min-height: 38px;
  padding: 0 var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Primair: gevuld koraal, compact, met een subtiele lift. */
.review-card__submit--primary {
  color: #fff;
  background: var(--color-chat-accent);
  border: 0;
  box-shadow: 0 1px 2px rgba(179, 97, 63, 0.25);
}

.review-card__submit--primary:hover {
  background: var(--color-chat-accent-hover);
}

/* Secundair: pure ghost-knop (geen vlak/rand) — ondergeschikt aan primair. */
.review-card__submit--secondary {
  color: var(--color-chat-text);
  background: transparent;
  border: 0;
}

.review-card__submit--secondary:hover {
  background: rgba(204, 120, 92, 0.10);
}

/* "Tóch ongewijzigd versturen": meest ondergeschikt — kleine link, rechts in de rij. */
.review-card__action--muted {
  margin-left: auto;
}

.review-card__link {
  padding: var(--space-1) 0;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}

.review-card__link:hover {
  color: var(--color-chat-text);
}

/* Hard-modus: melding dat rustige formulering vereist is — rechts in de rij. */
.review-card__enforced {
  margin: 0 0 0 auto;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ===================== BAROMETER (DP3) ===================== */
/* Cijferloze, perifere gespreks-richting-meter bovenaan de chat. Ontworpen om de
   arousal te VERLAGEN, niet om de "richting" zo scherp mogelijk te schreeuwen: een
   rustige rand-indicator, geen focaal element (anders gaan ouders "presteren voor de
   meter"). De track-container heeft in ELKE zone dezelfde footprint — alleen de
   fill-breedte + tint binnen die vaste track verschuift (thermometer, geen alarm).
   Geen border/shadow/groei die in de hot-zone aanzwelt (zou de meter laten schreeuwen,
   ongeacht de tint). */

/* Placeholder-staat (te weinig beurten): de lege #barometer blijft als Turbo-replace-
   target in de DOM maar neemt geen layout-ruimte in (geen opgedrongen witruimte). */
#barometer:not(.barometer) {
  display: contents;
}

/* Puur-visuele temperatuur-indicator bovenaan de compose-zone: een dunne getinte
   lijn + een rustig info-icoon met tooltip. Geen vaste tekstregels meer — de
   betekenis blijft als tekst beschikbaar via aria-label + tooltip (kleur is nooit
   de enige drager; de vullengte per zone is het tweede visuele kanaal). */
.barometer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  max-width: 760px; /* zelfde kolom-as als .messages / .compose */
  margin: 0 auto var(--space-1);
  padding: 0 var(--space-2);
}

/* Meter-rij: de lijn groeit, het info-icoon staat rustig aan het eind. */
.barometer__meter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Temperatuur-lijn: dun (4px), perifere rand-indicator net boven het invoerveld. */
.barometer__track {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--color-barometer-track);
  overflow: hidden;
}

/* Vulling links→rechts. Breedte + tint per zone; nooit 100% (= max-uitslag, alarm).
   Startwaarden, te tunen met de drempel-kalibratie. */
.barometer__fill {
  height: 100%;
  width: 28%;
  background: var(--color-barometer-calm-fill);
}

.barometer--calm .barometer__fill {
  width: 28%;
  background: var(--color-barometer-calm-fill);
}

.barometer--warming .barometer__fill {
  width: 58%;
  background: var(--color-barometer-warming-fill);
}

.barometer--hot .barometer__fill {
  width: 88%;
  background: var(--color-barometer-hot-fill);
}

/* Rustige overgang — load-bearing voor de de-escalatie ÉN de asymmetrie-bescherming:
   een trage, continue vervloeiing voorkomt een toerekenbare visuele sprong na één
   bericht (zou de dyade-meter de facto per-persoon maken — §8a.2). Pas actief ná de
   ready-haak, zodat de eerste render geen flash van de beginstand toont. */
.barometer--ready .barometer__fill {
  transition: width 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 1.8s ease;
}

@media (prefers-reduced-motion: reduce) {
  .barometer--ready .barometer__fill {
    transition: none;
  }
}

/* Richting-tekst: primaire betekenis-drager (kleur is nooit de enige drager), maar
   bewust niet zwaarder dan een bericht. */
/* Rustig info-icoon ("i", geen alarm-"!") aan het eind van de lijn. */
.barometer__info {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: 0;
  cursor: help;
}

.barometer__info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: var(--color-text-muted);
  border: 1px solid currentColor;
  border-radius: 50%;
}

.barometer__info:hover .barometer__info-icon,
.barometer__info:focus-visible .barometer__info-icon {
  color: var(--color-chat-text);
}

/* Tooltip: verschijnt boven het icoon op hover én focus (tap = focus → werkt op
   touch). Donkere bubbel met lichte tekst; opent linksboven vanaf het icoon. */
.barometer__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 5;
  width: max-content;
  max-width: 240px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: var(--leading);
  text-align: left;
  color: var(--color-chat-bg);
  background: var(--color-chat-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  pointer-events: none;
}

.barometer__info:hover .barometer__tooltip,
.barometer__info:focus .barometer__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Afkoel-prompt: een zachte uitnodiging met agency, geen waarschuwing. Lichter dan
   de berichten eromheen (geen border/shadow → niet urgenter ogen dan de review-kaart).
   Niet-blokkerend, naast de stroom. */
.barometer__cooldown {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-barometer-cooldown-bg);
}

/* [hidden] moet de display:flex hierboven verslaan — anders blijft de cooldown
   zichtbaar nadat de Sluit-knop hem op hidden zet (was de "Sluit werkt niet"-bug). */
.barometer__cooldown[hidden] {
  display: none;
}

.barometer__cooldown-text {
  flex: 1;
  min-width: 0;
}

.barometer__cooldown-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-chat-text);
}

.barometer__cooldown-body {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Sluiten: een rustige × rechtsboven — makkelijke, ondergeschikte uitweg. */
.barometer__cooldown-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: -2px -4px 0 0;
  padding: 0;
  color: var(--color-text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.barometer__cooldown-dismiss:hover {
  color: var(--color-chat-text);
  background: rgba(0, 0, 0, 0.04);
}

/* ===================== DOSSIER-OVERZICHT (DP2) ===================== */
.dossier__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

.dossier__status {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.dossier__conversation-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-4);
  padding: 0 var(--space-4);
  font-weight: var(--weight-medium);
  color: var(--color-bg);
  background: var(--color-accent);
  border-radius: var(--radius);
  text-decoration: none;
}

.dossier__conversation-link:hover {
  background: var(--color-accent-hover);
}

.dossier__subtitle {
  margin-top: var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.dossier__parents {
  margin-top: var(--space-2);
  padding-left: var(--space-4);
}

/* ===================== METINGEN (DP6) ===================== */
/* Brede dashboard-pagina: vult de volledige breedte naast de sidebar (géén
   max-width), met ruime padding. Bewust niet de smalle .container (640px). */
.dashboard-page { width: 100%; padding: var(--space-6); }
@media (min-width: 768px) {
  .dashboard-page { padding: var(--space-8); }
}

.dashboard { display: flex; flex-direction: column; gap: var(--space-6); }
.dashboard__title { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.dashboard__lede { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Panelen-grid: tegels vloeien responsief in kolommen (M365-achtig). Laag-banden
   (toon/agenda, DEF-7) spannen de volle breedte zodat ze niet als gelijke tegel
   lezen maar als aparte meetlaag. */
.dashboard__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 640px) {
  .dashboard__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .dashboard__grid { grid-template-columns: repeat(4, 1fr); }
}
.dashboard__band { grid-column: 1 / -1; }

/* Agenda-sub-panelen tegelen net als de andere widgets (volume/lock/revert/self). */
.agenda-panel__sub-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 640px) {
  .agenda-panel__sub-panels { grid-template-columns: repeat(2, 1fr); }
}

.dashboard__band-heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* Sub-grid binnen een band: splitst een overvolle meetlaag in losse widgets
   (bv. de toon-trend + een indicatoren-widget per ouder), die tegelen. */
.dashboard__subgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 640px) {
  .dashboard__subgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .dashboard__subgrid { grid-template-columns: repeat(3, 1fr); }
}

/* Inklapbaar uitleg-panel: bundelt meet-kanttekeningen onder een band, rustig
   en standaard dicht. Chevron rechts die meedraait. */
.explain {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.explain__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.explain__summary::-webkit-details-marker { display: none; }
.explain__summary::after {
  content: "›";
  margin-left: auto;
  font-size: 15px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.explain[open] .explain__summary::after { transform: rotate(90deg); }
.explain__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.explain__body p {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading);
  color: var(--color-text-muted);
}
.dashboard__panel { /* CardComponent verzorgt de border/padding */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.measurements__pending {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 0;
}
.measurements__pending-title { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.measurements__pending-body { color: var(--color-text-muted); }
.measurements__pending-status { font-size: var(--text-sm); color: var(--color-text-muted); }

.dataviz { display: flex; flex-direction: column; gap: var(--space-2); }
.dataviz__label { font-size: var(--text-sm); color: var(--color-dataviz-text); }
.dataviz__svg { display: block; width: 100%; height: auto; max-height: 56px; }
.dataviz__stats-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.dataviz__stat { display: flex; align-items: baseline; gap: var(--space-2); }
.dataviz__stat-value { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.dataviz__stat-n { font-size: var(--text-sm); color: var(--color-dataviz-text); }
.dataviz__too-few {
  font-size: var(--text-sm);
  color: var(--color-dataviz-text);
  font-style: italic;
}

/* Lineaire %-meter (Claude-stijl): één dimensie als 0–100%-balk. */
.meter { display: flex; flex-direction: column; gap: 5px; }
.meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.meter__label { font-size: var(--text-sm); color: var(--color-text); }
.meter__value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.meter__percent { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); }
.meter__caption { font-size: var(--text-xs); color: var(--color-text-muted); }
.meter__value--muted { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }
.meter__track {
  height: 8px;
  background: var(--color-dataviz-muted);
  border-radius: 999px;
  overflow: hidden;
}
.meter__fill { height: 100%; background: var(--color-dataviz-line); border-radius: 999px; }

/* Stat-groep: een paar meters/stats onder een sub-label (bv. per ouder). */
.dashboard__stat-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Vergelijkingsbalken: per partij één balk op gedeelde schaal (voor duren e.d.,
   géén aandeel). Rij zonder waarde toont alleen tekst (te weinig data). */
.compare-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.compare-bars__row {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: var(--space-2);
}
.compare-bars__label { font-size: var(--text-sm); color: var(--color-text); }
.compare-bars__track {
  height: 8px;
  background: var(--color-dataviz-muted);
  border-radius: 999px;
  overflow: hidden;
}
.compare-bars__fill { height: 100%; border-radius: 999px; }
.compare-bars__value {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.compare-bars__value--muted {
  grid-column: 2 / -1;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Donut: ring met neutrale segmenten + totaal in het midden, legenda ernaast. */
.donut {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.donut__chart {
  position: relative;
  flex-shrink: 0;
  width: 132px;
  height: 132px;
}

.donut__svg { display: block; width: 100%; height: 100%; }

.donut__track { fill: none; stroke: var(--color-dataviz-muted); }

.donut__seg {
  fill: none;
  stroke-linecap: butt;
  transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.donut__center-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.donut__center-label { font-size: var(--text-xs); color: var(--color-text-muted); }

.donut__legend {
  flex: 1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.donut__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.donut__legend-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.donut__legend-label { color: var(--color-text); }
.donut__legend-value {
  margin-left: auto;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.dataviz__bars { display: flex; flex-direction: column; gap: var(--space-2); }
/* Mobile-first: label vol-breed boven de track; vanaf 480px naast elkaar
   in drie kolommen. Voorkomt overflow op 320–360px schermen. */
.dataviz__bar-row {
  display: grid;
  grid-template-columns: 1fr 2.5rem;
  grid-template-rows: auto auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}
.dataviz__bar-label {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  color: var(--color-dataviz-text);
}
.dataviz__bar-track { background: var(--color-dataviz-muted); border-radius: 999px; height: 8px; overflow: hidden; }
.dataviz__bar-fill { background: var(--color-dataviz-line); height: 100%; }
.dataviz__bar-value { font-size: var(--text-sm); color: var(--color-text); text-align: right; }

@media (min-width: 480px) {
  .dataviz__bar-row {
    grid-template-columns: 8rem 1fr 2.5rem;
    grid-template-rows: auto;
  }
  .dataviz__bar-label { grid-column: auto; }
}

/* ===================== APP-SHELL + SIDEBAR (mobile-first) ===================== */
/* Geen top-bar: links een sidebar-paneel. Off-canvas op mobiel (de hamburger
   schuift 'm in via .app--menu-open + backdrop), vast op desktop (≥768px). De chat
   vult de viewport (composer onderaan); content-pagina's groeien gewoon mee. */
.app { height: 100%; display: flex; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  max-width: 85vw;
  padding: var(--space-4);
  background: var(--color-chat-bg);
  border-right: 1px solid var(--color-chat-border);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  overflow-y: auto;
}

.app--menu-open .sidebar { transform: translateX(0); }

.app__backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.4);
  display: none;
}

.app--menu-open .app__backdrop { display: block; }

/* Mobiele header (WhatsApp-stijl): vaste balk bovenaan .app__main; de body eronder
   scrollt. Verborgen op desktop (de sidebar staat dan in de flow). */
.app__topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 56px;
  padding: 0 var(--space-2);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.app__topbar-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* Menu-knop: gewone knop ín de topbar (niet meer zwevend over de inhoud). */
.app__menu-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.app__menu-toggle:hover { background: var(--color-hover); }

/* Dev-icoon: uiterst rechts in de header; opent de dev-drawer (alleen development). */
.app__dev-toggle {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.app__dev-toggle:hover { background: var(--color-hover); color: var(--color-text); }

.app__menu-icon { width: 22px; height: 22px; }

/* .app__main = kolom: topbar (vast) + body (scrollt). */
.app__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Scrollende inhoud onder de topbar. Voor gewone pagina's scrollt de body zelf;
   voor chat-/coach-pagina's wordt de body een flex-kolom zodat de chat via flex:1
   exact vult en intern scrollt — de body zelf scrollt dan NIET (composer blijft
   vast onderin). :has() is veilig — de app dwingt moderne browsers af. */
.app__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.app__body:has(> .chat) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app__body:has(> .chat) > .chat {
  flex: 1;
  min-height: 0;
  height: auto;
}

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.sidebar__brand {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-chat-text);
  text-decoration: none;
}

.sidebar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.sidebar__icon { width: 20px; height: 20px; }
.icon { width: 20px; height: 20px; flex-shrink: 0; }

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  font: inherit;
  color: var(--color-chat-text);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
}

.sidebar__link:hover { background: var(--color-hover); }

.sidebar__link--muted { color: var(--color-text-muted); cursor: default; }
.sidebar__link--muted:hover { background: none; }
.sidebar__link--active { background: var(--color-hover); font-weight: var(--weight-medium); }

.sidebar__footer { margin-top: var(--space-4); }

.sidebar__signout {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  font: inherit;
  color: var(--color-text-muted);
  background: var(--color-chat-bubble-other);
  border: 1px solid var(--color-chat-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.sidebar__signout:hover { color: var(--color-chat-text); }

.sidebar__collapse { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); background: none; border: 0; border-radius: var(--radius); cursor: pointer; color: var(--color-text-muted); }
.sidebar__collapse:hover { background: var(--color-hover); border-radius: var(--radius); }

@media (min-width: 768px) {
  /* Sidebar in de echte flex-flow (geen fixed + margin-truc): flexbox reserveert
     de breedte fysiek, dus de chat kan er nooit achter verdwijnen en in-/uitklappen
     schuift de chat vanzelf mee. */
  .sidebar { position: relative; transform: none; flex-shrink: 0; }
  .app__topbar { display: none; } /* geen mobiele header op desktop */
  .app__menu-toggle { display: none; }
  .app__backdrop { display: none !important; }
  .sidebar__close { display: none; }
  .sidebar { transition: width 0.15s ease; }
  .app--sidebar-collapsed .sidebar { width: 72px; padding: var(--space-2); }
  .app--sidebar-collapsed .sidebar__label,
  .app--sidebar-collapsed .sidebar__brand { display: none; }
  .app--sidebar-collapsed .sidebar__link,
  .app--sidebar-collapsed .sidebar__collapse,
  .app--sidebar-collapsed .sidebar__signout { justify-content: center; padding: 0; }
  .app--sidebar-collapsed .sidebar__collapse .icon { transform: rotate(180deg); }
}

/* ===================== LANDING-DASHBOARD (DP1) ===================== */
.dashboard-landing { display: flex; flex-direction: column; gap: var(--space-3); }
.dashboard-landing__title { font-size: var(--text-lg); font-weight: var(--weight-medium); }
.dashboard-landing__welcome { color: var(--color-text-muted); }

/* Beheer-menu (coördinator/admin): kaarten met label + omschrijving. */
.menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

.menu__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 44px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.menu__link:hover { border-color: var(--color-accent); }
.menu__label { font-weight: var(--weight-medium); color: var(--color-text); }
.menu__description { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Dossier-werklijst (ouder/casemanager): label + status + acties. */
.dossier-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

.dossier-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.dossier-list__info { display: flex; flex-direction: column; gap: var(--space-1); }
.dossier-list__label { font-weight: var(--weight-medium); }
.dossier-list__status { font-size: var(--text-sm); color: var(--color-text-muted); }

.dossier-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dossier-list__action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
}

.dossier-list__action:hover { border-color: var(--color-accent); }

.dossier-list__action--primary {
  color: var(--color-bg);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.dossier-list__action--primary:hover { background: var(--color-accent-hover); }

.dossier-list__empty {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .dossier-list__item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .dossier-list__actions { flex-shrink: 0; }
}

/* ===================== UITNODIGINGEN-BEHEER (DP1) ===================== */
/* Mobile-first: elke uitnodiging is een kaart-rij met info boven de acties;
   vanaf 640px info links en acties rechts. Hergebruikt door portal + backoffice. */
.invitations {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
}

.invitation {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.invitation__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.invitation__email {
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}

.invitation__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.invitation__status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.invitation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.invitation__action {
  min-height: 44px;
  padding: 0 var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.invitation__action:hover {
  border-color: var(--color-accent);
}

/* Intrekken is destructief: tekst-accent zonder rood alarm (rustige huisstijl). */
.invitation__action--danger {
  color: var(--color-text-muted);
}

.invitations__empty {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .invitation {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .invitation__actions { flex-shrink: 0; }
}

/* Linkje "Metingen openen" in dossiers-index: secondary-look, 44px touch-target,
   visueel onderscheidend van de form-knoppen. */
.dossier__measurements-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
}
.dossier__measurements-link:hover { border-color: var(--color-accent); }

/* ===================== PROFESSIONAL — DOSSIERS-INDEX ===================== */
/* Kaarten-lijst: elke kaart = info-blok + acties. Mobile-first (gestapeld);
   vanaf 640px info links, acties rechts op dezelfde rij. */
.pro-dossiers__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
}

.pro-dossier-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.pro-dossier-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s;
}

.pro-dossier-card:hover { border-color: var(--color-accent); }

.pro-dossier-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pro-dossier-card__name {
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
}

.pro-dossier-card__name:hover { color: var(--color-accent); }

.pro-dossier-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pro-dossier-card__meta > * + *::before {
  content: "·";
  margin-right: var(--space-2);
}

.pro-dossier-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pro-dossier-card__assign-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pro-dossier-card__select {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0 var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.pro-dossier-card__submit {
  min-height: 36px;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-bg);
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}

.pro-dossier-card__submit:hover { background: var(--color-accent-hover); }

.pro-dossier-card__enforcement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.pro-dossier-card__enforced-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Collapsible agenda-lock-sectie: summary als klikbaar label (inline-flex),
   het formulier erin als card-achtige sectie. */
.lock-agenda {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.lock-agenda__summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
}

.lock-agenda__summary::-webkit-details-marker { display: none; }

.lock-agenda__summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--color-text-muted);
  transition: transform 0.15s;
}

.lock-agenda[open] .lock-agenda__summary::after { transform: rotate(90deg); }

.lock-agenda__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.lock-agenda__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lock-agenda__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.lock-agenda__textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  resize: vertical;
}

.lock-agenda__textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.lock-agenda__submit {
  align-self: flex-start;
  min-height: 36px;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-bg);
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.lock-agenda__submit:hover { background: var(--color-accent-hover); }

@media (min-width: 640px) {
  .pro-dossier-card {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .pro-dossier-card__info { flex: 1; min-width: 0; }

  .pro-dossier-card__actions {
    flex-shrink: 0;
    align-items: flex-end;
  }
}

/* ===================== PROFESSIONAL — METINGEN-DASHBOARD ===================== */
/* Dossier-context boven de panelen: naam van het dossier als oriëntatie. */
.dashboard-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.dashboard-header__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* Periode-filter: pill-tabs-rij boven de meetpanelen. */
.dashboard-filter {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.dashboard-filter__label {
  display: none;
}

.dashboard-filter__option {
  padding: var(--space-1) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
}

.dashboard-filter__option:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.dashboard-filter__option--active {
  background: var(--color-text);
  color: var(--color-surface);
  border-color: var(--color-text);
}

/* AGENDA (DP4-4b) — week-grid + event-kaartjes */

.agenda-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  position: relative;
  min-width: 0;
}

.agenda-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.agenda-page__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  margin: 0;
  flex: 1;
}

.agenda-page__nav {
  display: flex;
  gap: var(--space-2);
}

.agenda-page__navlink {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
}

.agenda-page__navlink:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* FAB — vaste knop rechtsonder; mobiel rond + koraal */
.agenda-page__fab {
  position: fixed;
  right: var(--space-4);
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--color-chat-accent);
  color: white;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.agenda-page__fab:hover {
  background: var(--color-chat-accent-hover);
}

/* Caption onder het afspraken-grid — muted, klein */
.agenda-page__caption {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Wisselschema-paneel — visueel gescheiden van het grid */
.agenda-page__schedule {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Week-grid — CSS Grid: 1 uurkolom + 7 dagkolommen.
   Mobiel scrollt horizontaal; alle zeven kolommen altijd zichtbaar. */
.agenda-week {
  --hour-height: 48px;
  display: grid;
  grid-template-columns: auto repeat(7, minmax(7.5rem, 1fr));
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Hoek linksboven (boven uur-labels) */
.agenda-week__corner {
  grid-column: 1;
  grid-row: 1;
  border-bottom: 1px solid var(--color-border);
}

/* Dag-koppen (rij 1, kolom 2-8) */
.agenda-week__dayhead {
  padding: var(--space-2);
  text-align: center;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.agenda-week__dayhead--today {
  color: var(--color-chat-accent);
  font-weight: var(--weight-medium);
}

.agenda-week__dayname {
  display: block;
  text-transform: capitalize;
}

.agenda-week__daynum {
  display: block;
}

/* Hele-dag-rij */
.agenda-week__allday-label {
  grid-column: 1;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.agenda-week__allday-cell {
  padding: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  min-height: 2rem;
}

/* Uur-labels (linkerkolom, rij 3+) */
.agenda-week__hours {
  grid-column: 1;
  display: grid;
  grid-auto-rows: var(--hour-height);
}

.agenda-week__hour {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

/* Dag-kolommen (tijdgebonden events) */
.agenda-week__col {
  position: relative;
  border-left: 1px solid var(--color-border);
  min-height: calc((var(--end-hour) - var(--start-hour)) * var(--hour-height));
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent calc(var(--hour-height) - 1px),
    var(--color-border) var(--hour-height)
  );
}

/* Event-wrapper voor absolute positionering */
.agenda-week__event {
  position: absolute;
  left: 2px;
  right: 2px;
  top: calc(var(--top) / 60 * var(--hour-height));
  height: calc(var(--height) / 60 * var(--hour-height));
  min-height: 2.5rem;
  z-index: 1;
}

/* Lege-week-melding */
.agenda-week__empty {
  grid-column: 1 / -1;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Event-kaartje */
.agenda-event {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-text-muted);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* Fix 2: eigen-accent subtieler — alleen de linkerrand onderscheidt;
   geen extra achtergrond zodat eigen en andermans even leesbaar zijn. */
.agenda-event--own {
  border-left-color: var(--color-chat-accent);
}

.agenda-event__time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-event__title {
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Maker-naam: altijd zichtbaar, muted, compact */
.agenda-event__creator {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Onderwerp-label: secundair, mag wegvallen bij krap kaartje (overflow: hidden op parent) */
.agenda-event__subject {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobiel: horizontaal scrollen via overflow-x: auto op .agenda-week;
   alle zeven kolommen altijd beschikbaar (minmax in grid-template-columns). */

/* Afspraak-formulier (new/edit) — mobile-first, labels boven inputs,
   44px touch-targets, tokens uit :root. */
.agenda-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 480px;
}

.agenda-form__errors {
  padding: var(--space-3) var(--space-4);
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.agenda-form__errors ul {
  padding-left: var(--space-4);
  margin: 0;
}

.agenda-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Inline variant: checkbox + label naast elkaar */
.agenda-form__field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.agenda-form__field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.agenda-form__field input[type="text"],
.agenda-form__field input[type="datetime-local"],
.agenda-form__field select,
.agenda-form__field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.agenda-form__field input[type="text"]:focus-visible,
.agenda-form__field input[type="datetime-local"]:focus-visible,
.agenda-form__field select:focus-visible,
.agenda-form__field textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.agenda-form__field textarea {
  resize: vertical;
  min-height: 80px;
}

.agenda-form__field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.agenda-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

/* Opslaan-knop: accent, volle kleur, 44px touch-target */
.agenda-form__actions input[type="submit"] {
  min-height: 44px;
  padding: 0 var(--space-6);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #fff;
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.agenda-form__actions input[type="submit"]:hover {
  background: var(--color-accent-hover);
}

/* Annuleren-link: rustig, ondergeschikt */
.agenda-form__cancel {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: underline;
}

.agenda-form__cancel:hover {
  color: var(--color-text);
}

/* Maand-grid — 7 kolommen, mobiel horizontaal scrollbaar */
.agenda-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(2.5rem, 1fr));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow-x: auto;
}

/* Dag-naam koppen (ma–zo) */
.agenda-month__dayname {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-align: center;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt, var(--color-surface));
}

/* Dag-cellen */
.agenda-month__cell {
  min-height: 5.5rem;
  padding: var(--space-1);
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

/* Eerste kolom (ma): geen linker border dubbeling */
.agenda-month__cell:nth-child(7n+8) {
  border-left: none;
}

/* Dag buiten de huidige maand: gedimd */
.agenda-month__cell--out {
  opacity: 0.4;
  background: transparent;
}

/* Vandaag: koraal-linkerrand als markering */
.agenda-month__cell--today {
  border-top-color: var(--color-chat-accent);
  border-top-width: 2px;
}

/* Dag-nummer */
.agenda-month__num {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  line-height: 1;
  margin-bottom: 2px;
}

.agenda-month__cell--today .agenda-month__num {
  color: var(--color-chat-accent);
  font-weight: var(--weight-bold, 700);
}

/* Events in maand-cellen: compacte weergave —
   tijd verborgen, alleen titel + eventueel subject;
   creator ook verborgen (te krap in cel). */
.agenda-month__cell .agenda-event {
  font-size: var(--text-xs);
  padding: 1px var(--space-1);
  gap: 0;
  height: auto;
}

.agenda-month__cell .agenda-event__time,
.agenda-month__cell .agenda-event__creator {
  display: none;
}

.agenda-month__cell .agenda-event__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.agenda-month__cell .agenda-event__subject {
  font-size: var(--text-xs);
}

/* Agenda-toolbar: view-switcher + onderwerp-filter-chips (Taak 8) */
.agenda-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  --color-accent: var(--color-chat-accent);
}

/* Segmented control: week / maand */
.agenda-toolbar__views {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.agenda-toolbar__view {
  padding: var(--space-2) var(--space-4);
  min-height: 40px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  background: transparent;
  border-right: 1px solid var(--color-border);
  display: flex;
  align-items: center;
}

.agenda-toolbar__view:last-child {
  border-right: none;
}

.agenda-toolbar__view:hover {
  color: var(--color-text);
}

.agenda-toolbar__view--active {
  color: var(--color-chat-accent);
  font-weight: var(--weight-medium);
  background: var(--color-chat-surface-own);
}

/* Filter-chips: horizontaal scrollbaar op mobiel */
.agenda-toolbar__filters {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-1); /* ruimte voor scrollbar op sommige OS */
}

.agenda-toolbar__chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  white-space: nowrap;
  background: transparent;
}

.agenda-toolbar__chip:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.agenda-toolbar__chip--active {
  color: var(--color-chat-accent);
  border-color: var(--color-chat-accent);
  background: var(--color-chat-surface-own);
  font-weight: var(--weight-medium);
}

/* ===================== INLOG (auth) ===================== */
/* Rustige, warme "doorway": gecentreerde kaart op een zachte warme gloed. Mobile-
   first; inputs 16px (geen iOS-zoom) en 48px hoog (touch). */
.auth {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(204, 120, 92, 0.10), transparent 60%),
    radial-gradient(90% 60% at 100% 110%, rgba(212, 162, 127, 0.12), transparent 55%),
    var(--color-bg);
}

.auth__card {
  width: 100%;
  max-width: 400px;
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(25, 25, 25, 0.08), 0 2px 8px rgba(25, 25, 25, 0.04);
  animation: auth-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes auth-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth__card { animation: none; }
}

.auth__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.auth__mark-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-chat-accent);
  background: var(--color-chat-surface-own);
  border-radius: 12px;
}
.auth__mark { width: 24px; height: 24px; }
.auth__wordmark {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.auth__heading {
  margin-bottom: var(--space-6);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.auth__form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth__field { display: flex; flex-direction: column; gap: 6px; }
.auth__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }

.auth__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-3);
  font-size: 1rem; /* 16px → geen iOS-zoom */
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth__input::placeholder { color: var(--color-text-muted); }
.auth__input:focus {
  outline: none;
  border-color: var(--color-chat-accent);
  box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15);
}
.auth__input--password { padding-right: 48px; }

.auth__input-wrap { position: relative; }
.auth__reveal {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-text-muted);
  background: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.auth__reveal:hover { color: var(--color-text); }
.auth__eye { width: 20px; height: 20px; }
/* Eén icoon zichtbaar: standaard het oog (tonen); na onthullen het doorgestreepte. */
.auth__eye--off { display: none; }
.auth__field.is-revealed .auth__eye--on { display: none; }
.auth__field.is-revealed .auth__eye--off { display: inline-block; }

.auth__submit {
  margin-top: var(--space-2);
  width: 100%;
  height: 48px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
.auth__submit:hover { background: var(--color-accent-hover); }
.auth__submit:active { transform: translateY(1px); }

.auth__alert {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading);
  color: var(--color-error);
  background: rgba(191, 77, 67, 0.08);
  border: 1px solid rgba(191, 77, 67, 0.3);
  border-radius: 10px;
}

/* Mobiel: geen card — het formulier vult het scherm op de warme achtergrond. */
@media (max-width: 767px) {
  .auth {
    padding: 0;
    align-items: stretch;
  }
  .auth__card {
    max-width: none;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-8) var(--space-6);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
  }
}

/* ===================== DEV-TOOLING (env-gated, alleen local) =====================
   Split-view + dev-paneel + reset-knoppen. Bewust een eigen, donker
   "developer-console"-palet (hardcoded, los van de tokens) zodat dev-tooling
   visueel onmiskenbaar verschilt van de echte ouder-/pro-UI. Alles hieronder
   verschijnt alleen in dev/test (env-guarded in de layout + controllers). */

/* Dev-paneel als off-canvas drawer (rechts), geopend via het dev-icoon in de
   header (alleen development). De gescopete --dev-*-tokens (GitHub-dark-achtig)
   staan hier zodat .dev-panel en .dev-reset binnen de drawer ze erven. */
.dev-drawer {
  --dev-bg: #0d1117;
  --dev-surface: #161b22;
  --dev-elev: #1f2733;
  --dev-border: #283041;
  --dev-text: #e6edf3;
  --dev-muted: #8b949e;
  --dev-accent: #58a6ff;
  --dev-ok: #3fb950;
  --dev-warn: #d29922;
  --dev-danger: #f85149;

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: 360px;
  max-width: 90vw;
  overflow-y: auto;
  background: var(--dev-bg);
  color: var(--dev-text);
  border-left: 1px solid var(--dev-border);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}
.app.dev-panel-open .dev-drawer { transform: translateX(0); }

.dev-drawer__backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(0, 0, 0, 0.4);
  display: none;
}
.app.dev-panel-open .dev-drawer__backdrop { display: block; }

/* Desktop + development: het dev-paneel staat VAST (geen toggle/overlay). De drawer
   blijft zichtbaar en we reserveren er ruimte voor zodat de inhoud er niet onder valt.
   Op mobiel blijft het de toggle-drawer via het header-icoon. */
@media (min-width: 768px) {
  .app--dev .dev-drawer { transform: none; }
  .app--dev .dev-drawer__backdrop { display: none !important; }
  .app--dev .app__main { margin-right: 360px; }
}

.dev-panel {
  padding: var(--space-3);
  font-size: 12px;
  line-height: 1.5;
}

/* Sticky header met env-badge: altijd zichtbaar dat dit dev-tooling is. */
.dev-panel__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-3);
  padding: var(--space-3);
  background: var(--dev-bg);
  border-bottom: 1px solid var(--dev-border);
}

.dev-panel__badge {
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dev-warn);
  border: 1px solid var(--dev-warn);
  border-radius: 4px;
}

.dev-panel__title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dev-text);
}

/* Secties als subtiele kaarten — duidelijke groepering i.p.v. losse regels. */
.dev-panel__section {
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--dev-surface);
  border: 1px solid var(--dev-border);
  border-radius: 8px;
}

.dev-panel__section-title {
  margin: 0 0 var(--space-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dev-muted);
}

/* Inklapbare secties (<details>): de titel is de summary, met een chevron rechts
   die meedraait. Standaard open (open-attribuut in de HAML). */
.dev-panel__section--collapsible > summary {
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.dev-panel__section--collapsible > summary::-webkit-details-marker { display: none; }
.dev-panel__section--collapsible[open] > summary { margin-bottom: var(--space-2); }
.dev-panel__section--collapsible > summary::after {
  content: "›";
  margin-left: auto;
  font-size: 15px;
  line-height: 1;
  color: var(--dev-muted);
  transition: transform 0.15s ease;
}
.dev-panel__section--collapsible[open] > summary::after { transform: rotate(90deg); }
.dev-panel__section--collapsible > summary:hover::after { color: var(--dev-text); }

.dev-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 5px 0;
}
.dev-panel__row + .dev-panel__row { border-top: 1px solid rgba(255, 255, 255, 0.04); }

.dev-panel__label { color: var(--dev-muted); }
.dev-panel__value {
  color: var(--dev-text);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.dev-panel__empty { padding: var(--space-3); color: var(--dev-muted); font-style: italic; }
.dev-panel__empty-inline { color: var(--dev-muted); font-style: italic; }

/* Status-pills (dot + label) voor backend, uitkomst, hard mode. */
.dev-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.dev-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.dev-pill--ok      { color: var(--dev-ok); }
.dev-pill--warn    { color: var(--dev-warn); }
.dev-pill--accent  { color: var(--dev-accent); }
.dev-pill--muted   { color: var(--dev-muted); }
.dev-pill--neutral { color: var(--dev-text); border-color: var(--dev-border); }
.dev-pill--neutral::before { display: none; }

/* Meetscores als stat-chips: de score groot (hero), uitkomst + hard mode ernaast. */
.dev-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.dev-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  background: var(--dev-bg);
  border: 1px solid var(--dev-border);
  border-radius: 6px;
}
.dev-stat--wide { grid-column: 1 / -1; }
.dev-stat__label {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dev-muted);
}
.dev-stat__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--dev-text);
  font-variant-numeric: tabular-nums;
}

.dev-details summary {
  cursor: pointer;
  color: var(--dev-accent);
  font-size: 11px;
}

.dev-panel__json {
  margin: var(--space-2) 0 0;
  padding: var(--space-3);
  background: var(--dev-bg);
  border: 1px solid var(--dev-border);
  border-radius: 6px;
  font-size: 11px;
  color: #a5d6ff;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.dev-input {
  width: 100%;
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--dev-bg);
  border: 1px solid var(--dev-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  color: var(--dev-text);
  resize: vertical;
}
.dev-input::placeholder { color: var(--dev-muted); }
.dev-input:focus-visible { outline: 2px solid var(--dev-accent); outline-offset: 1px; }

.dev-btn {
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--dev-text);
  background: var(--dev-bg);
  border: 1px solid var(--dev-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.dev-btn:hover { background: var(--dev-elev); border-color: #3a455c; }
.dev-btn--primary {
  color: var(--dev-bg);
  background: var(--dev-accent);
  border-color: var(--dev-accent);
}
.dev-btn--primary:hover { background: #79b8ff; border-color: #79b8ff; }

.dev-panel__warning {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(210, 153, 34, 0.12);
  border: 1px solid rgba(210, 153, 34, 0.5);
  border-left: 3px solid var(--dev-warn);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: #e3b341;
}
.dev-panel__warning-icon { flex-shrink: 0; }

.dev-reset {
  padding: var(--space-3);
  border-top: 1px solid var(--dev-border);
}
.dev-reset__title {
  margin: 0 0 var(--space-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dev-muted);
}
.dev-reset form.button_to { display: block; margin: 0 0 var(--space-2); }
.dev-reset__btn {
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(248, 81, 73, 0.5);
  background: transparent;
  color: var(--dev-danger);
  cursor: pointer;
  transition: background 0.12s ease;
}
.dev-reset__btn:hover { background: rgba(248, 81, 73, 0.12); }