/* ============================================================
   Health Cockpit — brand.css
   Eén gedeelde stijlbron voor de hele reis: publiek én app.
   Concept: "Salie is het merk, petrol is de interface."

   - Salie (#7A9E7E) is de merkkleur: accenten, actieve staat, iconen.
   - Voor witte tekst op een salie-knop gebruik je --brand-button
     (#4F7355, WCAG AA 5.36:1) — NIET --brand (2.99:1, faalt).
   - Petrol (#32535F) is de interface/chrome: koppen, nav, sidebar.
   - Publieke pagina's: warme crème achtergrond. App: koel grijs.
   - Fonts self-hosted (geen Google-call, GDPR + snelheid):
     Fraunces (publieke koppen), DM Sans (body + alle UI).
   ============================================================ */

/* ---- Self-hosted fonts (woff2 in /static/fonts/) ---- */

/* DM Sans — variable font, weights 400–700. Body + alle UI. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces — variable font, weights 400–600. Publieke koppen. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Brand tokens ---- */
:root {
  /* Merkkleur salie */
  --brand: #7A9E7E;          /* accenten, borders, actieve staat, iconen — NIET witte tekst erop */
  --brand-button: #4F7355;   /* achtergrond knoppen/links met WITTE tekst (WCAG AA 5.36:1) */
  --brand-button-hover: #456349; /* tekstdragende hover, wit haalt WCAG AA 6.70:1 */
  --brand-deep: #5F8263;     /* hover op groen vlak */
  --brand-tint: #E8EFE7;     /* chip/label/voortgang-achtergrond met DONKERE tekst */

  /* Semantische statussen. Schermen gebruiken deze rollen en kiezen nooit zelf
     een groen. De succeswaarden verwijzen bewust terug naar de merk-tokens: zo
     blijft brand.css de enige bron van waarheid voor de Health Cockpit-stijl. */
  --status-success-bg: var(--brand-tint);
  --status-success-text: var(--brand-button);
  --status-success-border: var(--brand);
  --status-success-solid: var(--brand-button);
  --status-success-hover: var(--brand-button-hover);
  --status-error-bg: #FDECEC;
  --status-error-text: #B91C1C;
  --status-error-border: #E3B4B4;
  --status-error-solid: #B42318;
  --status-error-hover: #8F1D13;
  --status-warning-bg: #FEF3C7;
  --status-warning-text: #92400E;
  --status-warning-border: #F0D4A3;
  --status-warning-solid: #85560C;
  --status-warning-hover: #6A4409;
  --status-info-bg: #DBEAFE;
  --status-info-text: #1D4ED8;
  --status-info-border: #93C5FD;
  --status-info-solid: #1D4ED8;
  --status-info-hover: #1E40AF;
  --status-neutral-bg: #F3F4F6;
  --status-neutral-text: #4B5563;
  --status-neutral-border: #D1D5DB;
  --status-neutral-solid: #4B5563;
  --status-neutral-hover: #374151;
  --status-solid-text: #FFFFFF;

  /* Form controls. Checkboxen, radio's en aan/uit-schakelaars zijn een
     interactieve selectie, geen successtatus en geen interfacechrome. Deze
     semantische rol voorkomt dat elk scherm zelf petrol, teal of groen kiest. */
  --control-selected: var(--brand-button);
  --control-selected-hover: var(--brand-button-hover);
  --control-unselected: #878787;
  --control-indicator: #FFFFFF;
  --control-focus: var(--brand);

  /* De vlakken en randen van datzelfde controlevakje. Ze verwijzen eerst naar de
     cockpit-tokens, zodat de app precies houdt wat ze had, en vallen op een publieke
     pagina (die cockpit.css niet laadt) terug op de merkwaarden hierboven. Een pagina
     met praktijkbranding zet deze rollen in haar eigen :root op de praktijkkleur in
     plaats van het component over te schrijven of te kopieren. */
  --control-bg: var(--color-card-bg, #FFFFFF);
  --control-border: var(--ui-border, var(--control-unselected));
  --control-hover-border: var(--ui-secondary, var(--control-selected));
  --control-hover-bg: var(--ui-highlight, var(--brand-tint));
  --control-disabled-bg: var(--color-muted-bg, var(--status-neutral-bg));
  --control-disabled-border: var(--color-muted, var(--status-neutral-border));
  --control-label-text: var(--ui-text, var(--brand-text));

  /* Zichtbaarheid voor de cliënt. De pil die op een blok vertelt of de cliënt
     het te zien krijgt is geen successtatus: ze zegt niets over of iets goed
     ging, alleen voor wiens ogen het is. Vandaar een eigen rol. De waarden zijn
     de teal die het gezondheidsdossier vandaag al draagt; ze staan hier zodat
     elk scherm dezelfde pil toont in plaats van de kleur te kopieren. */
  --visibility-shared-bg: #D6F5EC;
  --visibility-shared-text: #0F766E;
  --visibility-private-bg: #EEF1F2;
  /* #6B7C83 haalde op #EEF1F2 maar 3,83:1 en de pil is 11px vet: WCAG 1.4.3
     eist 4,5:1. In het consultscherm is dit sinds 7 oktober 2026 de stand die
     een therapeut het vaakst ziet, dus Iris mat hem door naar 4,66:1. Zelfde
     koele grijs, alleen donkerder. Maak hem niet lichter zonder opnieuw te
     meten. */
  --visibility-private-text: #5F6E75;

  /* Interface / chrome petrol */
  --ink: #32535F;            /* koppen, nav, sidebar, topbar */

  /* Oppervlakken */
  --surface-warm: #FAF7F2;   /* publieke pagina's */
  --surface-cool: #EEF1F3;   /* de app */
  --surface-card: #FFFFFF;   /* kaarten en panelen die boven het oppervlak liggen */

  /* Compatibiliteitsnamen voor bestaande cockpit-schermen. Nieuwe CSS gebruikt
     waar mogelijk de merk- en statustokens hierboven. */
  --color-background: var(--hc-page);
  --color-primary: var(--ink);
  --color-content-text: #333333;
  --color-accent: #5A8FA0;
  --hc-title: var(--ink);
  --hc-body-text: #3A4650;
  --hc-muted: #8BA0A8;
  --hc-title-size: 30px;

  /* Fonts */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Tekst-hiërarchie (exact uit de goedgekeurde mockup "Uniforme huisstijl").
     De mockup gebruikt warme grijsgroene tinten voor body/muted, niet het koele
     houtskool uit de oude landing.css. Koppen = --ink (petrol). */
  --brand-text: #51595B;         /* body-tekst op lichte grond (mockup) */
  --brand-text-muted: #6E7671;   /* secundaire tekst (mockup) */
  --brand-text-soft: #8A8F8B;    /* tertiaire/label-tekst (mockup) */
  --brand-tint-text: #4E6E52;    /* donkergroene tekst op --brand-tint chips (mockup) */
  --brand-border: #E6E0D5;       /* zachte rand op crème */

  /* Aanvullende oppervlak- en accenttokens uit de mockup (single source of truth
     i.p.v. losse hardcodes). */
  --surface-tint: #F2ECE3;       /* warme secundaire sectie-achtergrond (features, prijzen) */
  --brand-warn: #C4704B;         /* terracotta waarschuwing/onbetaald-accent */
}

/* Nul specificiteit: Health Cockpit-controls krijgen centraal de juiste
   default, terwijl expliciete praktijkbranding op publieke pagina's kan
   blijven overschrijven. */
:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--control-selected);
}

/* ============================================================
   Vinkvakje — het gedeelde component
   Stond tot 8 oktober 2026 alleen in cockpit.css, waardoor publieke pagina's
   (die cockpit.css niet laden) het moesten kopieren of een kaal browservinkje
   toonden. Het hoort hier: brand.css is de ene bron voor publiek en app.

   Markup:
     <label class="checkbox-wrapper">
       <span class="custom-checkbox">
         <input type="checkbox">
         <span class="checkmark"></span>
       </span>
       <span class="checkbox-label">Tekst</span>
     </label>

   Of, waar het label los staat, alleen de .custom-checkbox met een
   <label for="..."> ernaast.

   Wijzig de kleuren niet hier: zet op de pagina de rollen --control-selected,
   --control-border enzovoort, dan volgt het component vanzelf.
   ============================================================ */
.checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  cursor: pointer;
}

.custom-checkbox {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}

.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
}

.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: var(--control-bg);
  border: 2px solid var(--control-border);
  border-radius: 4px;
  transition: all 0.2s;
  /* Het vakje ligt over het doorzichtige invoerveld. Zonder dit komt een klik die
     precies op het vakje mikt nooit bij het invoerveld aan. */
  pointer-events: none;
}

.custom-checkbox:hover .checkmark {
  border-color: var(--control-hover-border);
  background-color: var(--control-hover-bg);
}

.custom-checkbox input[type="checkbox"]:checked ~ .checkmark {
  background-color: var(--control-selected);
  border-color: var(--control-selected);
}

.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--control-indicator);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox input[type="checkbox"]:checked ~ .checkmark:after {
  display: block;
}

.custom-checkbox input[type="checkbox"]:focus-visible ~ .checkmark {
  outline: 2px solid var(--control-focus);
  outline-offset: 2px;
}

.custom-checkbox input[type="checkbox"]:disabled ~ .checkmark {
  background-color: var(--control-disabled-bg);
  border-color: var(--control-disabled-border);
  cursor: not-allowed;
}

.checkbox-label {
  font-size: 14px;
  color: var(--control-label-text);
  user-select: none;
  cursor: pointer;
}