/* Dian Willems Coaching — huisstijl uit haar logo: roze #F40DAC, bruin #715136, Montserrat (alleen koppen). Mobiel eerst. */

/* Montserrat zelf gehost (CSP: font-src valt terug op 'self'). Alleen voor koppen en het merk:
   de trainingsschermen zijn krap en Montserrat loopt breder dan de systeemletter. */
@font-face {
  font-family: "Montserrat";
  src: url("/montserrat-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/*
 * Kleuren werken in twee lagen:
 *   1. Elk palet staat als paar klaar (--x-licht en --x-donker).
 *   2. Onderaan kiest één schakelaar welk paar actief is: het systeem volgen, of
 *      geforceerd licht/donker via data-modus op <html>.
 * Zo hoeft een nieuwe kleur maar op één plek en blijft de modus-schakelaar klein.
 */
:root {
  /* Basis */
  /* Warm crème en espresso, afgeleid van het bruin uit het logo */
  --bg-licht: #f7f1ea;                 --bg-donker: #17110d;
  --kaart-licht: #ffffff;              --kaart-donker: #221a14;
  --tekst-licht: #2b1e15;              --tekst-donker: #fbf6f0;
  --tekst-zacht-licht: #7a6656;        --tekst-zacht-donker: #ae9e8f;
  --rand-licht: #e4d8cb;               --rand-donker: #33281f;
  --veld-licht: #ffffff;               --veld-donker: #17110d;
  --grijs-bg-licht: #f2ebe3;           --grijs-bg-donker: #2a211a;
  --grijs-tekst-licht: #5c4a3d;        --grijs-tekst-donker: #dccfc2;
  --fout-bg-licht: #fee2e2;            --fout-bg-donker: #3f1d1d;
  --fout-tekst-licht: #991b1b;         --fout-tekst-donker: #fca5a5;
  --info-bg-licht: #eff6ff;            --info-bg-donker: #16233d;
  --info-tekst-licht: #1e40af;         --info-tekst-donker: #93c5fd;
  --waarschuwing-licht: #b45309;       --waarschuwing-donker: #fcd34d;
  --waarschuwing-zacht-licht: #fef3c7; --waarschuwing-zacht-donker: #3a2a08;
  --terug-licht: #b91c1c;              --terug-donker: #fca5a5;

  /* Standaard accentpalet: Dians roze. Licht iets dieper (#C2007F) voor witte knoptekst (contrast 5,8),
     donker het heldere roze met donkere knoptekst. */
  --accent-licht: #c2007f;             --accent-donker: #ff3dbe;
  --accent-hover-licht: #a3006b;       --accent-hover-donker: #f40dac;
  --accent-zacht-licht: #fce4f3;       --accent-zacht-donker: #3d0f2c;
  --accent-tekst-licht: #8a0059;       --accent-tekst-donker: #ffb3e3;
  --knop-tekst-licht: #fff;            --knop-tekst-donker: #1a0410;
  --merk-letter: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Actief: standaard het lichte palet. De schakelaar onderaan zet dit om. */
  --bg: var(--bg-licht);
  --kaart: var(--kaart-licht);
  --tekst: var(--tekst-licht);
  --tekst-zacht: var(--tekst-zacht-licht);
  --rand: var(--rand-licht);
  --veld: var(--veld-licht);
  --grijs-bg: var(--grijs-bg-licht);
  --grijs-tekst: var(--grijs-tekst-licht);
  --fout-bg: var(--fout-bg-licht);
  --fout-tekst: var(--fout-tekst-licht);
  --info-bg: var(--info-bg-licht);
  --info-tekst: var(--info-tekst-licht);
  --waarschuwing: var(--waarschuwing-licht);
  --waarschuwing-zacht: var(--waarschuwing-zacht-licht);
  --terug: var(--terug-licht);
  --accent: var(--accent-licht);
  --accent-hover: var(--accent-hover-licht);
  --accent-zacht: var(--accent-zacht-licht);
  --accent-tekst: var(--accent-tekst-licht);
  --knop-tekst: var(--knop-tekst-licht);

  --radius: 12px;
  --nav-hoogte: 64px;
}

/* Kleurthema's: elk thema levert alleen het accentpaar. Welke helft actief wordt,
   bepaalt de modus-schakelaar onderaan dit bestand. Keuze staat als data-thema op <html>. */
:root[data-thema="dian"] {
  --accent-licht: #c2007f;       --accent-donker: #ff3dbe;
  --accent-hover-licht: #a3006b; --accent-hover-donker: #f40dac;
  --accent-zacht-licht: #fce4f3; --accent-zacht-donker: #3d0f2c;
  --accent-tekst-licht: #8a0059; --accent-tekst-donker: #ffb3e3;
  --knop-tekst-licht: #fff;      --knop-tekst-donker: #1a0410;
}
:root[data-thema="groen"] {
  --accent-licht: #15803d;       --accent-donker: #22c55e;
  --accent-hover-licht: #166534; --accent-hover-donker: #16a34a;
  --accent-zacht-licht: #dcfce7; --accent-zacht-donker: #14321f;
  --accent-tekst-licht: #14532d; --accent-tekst-donker: #86efac;
  --knop-tekst-licht: #fff;      --knop-tekst-donker: #04140a;
}
:root[data-thema="lime"] {
  --accent-licht: #4d7c0f;       --accent-donker: #b6ff4d;
  --accent-hover-licht: #3f6212; --accent-hover-donker: #a3e635;
  --accent-zacht-licht: #ecfccb; --accent-zacht-donker: #1f2b0a;
  --accent-tekst-licht: #365314; --accent-tekst-donker: #d9f99d;
  --knop-tekst-licht: #fff;      --knop-tekst-donker: #14200a;
}
:root[data-thema="blauw"] {
  --accent-licht: #0284c7;       --accent-donker: #38bdf8;
  --accent-hover-licht: #0369a1; --accent-hover-donker: #0ea5e9;
  --accent-zacht-licht: #e0f2fe; --accent-zacht-donker: #082f49;
  --accent-tekst-licht: #075985; --accent-tekst-donker: #bae6fd;
  --knop-tekst-licht: #fff;      --knop-tekst-donker: #04121a;
}
:root[data-thema="paars"] {
  --accent-licht: #7c3aed;       --accent-donker: #a78bfa;
  --accent-hover-licht: #6d28d9; --accent-hover-donker: #8b5cf6;
  --accent-zacht-licht: #ede9fe; --accent-zacht-donker: #2e1065;
  --accent-tekst-licht: #5b21b6; --accent-tekst-donker: #ddd6fe;
  --knop-tekst-licht: #fff;      --knop-tekst-donker: #16072e;
}
:root[data-thema="roze"] {
  --accent-licht: #db2777;       --accent-donker: #f472b6;
  --accent-hover-licht: #be185d; --accent-hover-donker: #ec4899;
  --accent-zacht-licht: #fce7f3; --accent-zacht-donker: #500724;
  --accent-tekst-licht: #9d174d; --accent-tekst-donker: #fbcfe8;
  --knop-tekst-licht: #fff;      --knop-tekst-donker: #2a0716;
}
:root[data-thema="oranje"] {
  --accent-licht: #ea580c;       --accent-donker: #fb923c;
  --accent-hover-licht: #c2410c; --accent-hover-donker: #f97316;
  --accent-zacht-licht: #ffedd5; --accent-zacht-donker: #431407;
  --accent-tekst-licht: #9a3412; --accent-tekst-donker: #fed7aa;
  --knop-tekst-licht: #fff;      --knop-tekst-donker: #200a02;
}

* { box-sizing: border-box; }

/* Een eigen display-waarde overschrijft het hidden-attribuut. Dat is hier twee keer
   misgegaan (navigatie en formulieren), dus dit zet het patroon in één keer dicht. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 640px;
  margin: 0 auto;
  /* Altijd minstens een schermhoogte. Zonder dit krimpt een korte pagina (Klanten,
     Profiel, Schema) tijdens het laden, corrigeert iOS de scrollpositie achteraf en
     zie je het scherm omhoog schieten bij het wisselen van tabblad. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Boven én onder binnen de "veilige zone" (statusbalk/notch en home-indicator) blijven
     wanneer de app standalone draait. */
  padding: calc(20px + env(safe-area-inset-top)) 16px
    calc(var(--nav-hoogte) + 32px + env(safe-area-inset-bottom));
}

.laden { color: var(--tekst-zacht); padding: 40px 0; text-align: center; }

h1 { font-size: 24px; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 18px; font-weight: 600; margin: 24px 0 10px; }
p { margin: 0 0 12px; }
.zacht { color: var(--tekst-zacht); font-size: 14px; }

.kop { margin-bottom: 20px; }
.kop .zacht { margin: 0; }

.kaart {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.kaart-knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.kaart-knop:active { transform: scale(0.995); }

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-zacht);
  color: var(--accent-tekst);
}
.badge.grijs { background: var(--grijs-bg); color: var(--grijs-tekst); }
.badge.waarschuwing { background: var(--waarschuwing-zacht); color: var(--waarschuwing); }

button {
  font: inherit;
  border: 1px solid var(--rand);
  background: var(--kaart);
  color: var(--tekst);
  border-radius: 10px;
  padding: 11px 16px;
  cursor: pointer;
}
button:hover { border-color: #cbd5e1; }

.knop-primair {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--knop-tekst);
  font-weight: 600;
  width: 100%;
  padding: 13px 16px;
}
.knop-primair:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.knop-primair:disabled { opacity: 0.55; cursor: not-allowed; }

input, textarea {
  font: inherit;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--veld);
  color: var(--tekst);
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-zacht);
}
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.veld { margin-bottom: 14px; }

/* Oefeningen */
.oefening { margin-bottom: 14px; }
.oefening-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.oefening-naam { font-weight: 600; }
.oefening-target { font-size: 13px; color: var(--tekst-zacht); white-space: nowrap; }
.oefening-notitie { font-size: 13px; color: var(--tekst-zacht); margin: -4px 0 10px; }

.set-rij {
  display: grid;
  grid-template-columns: 30px 1fr 1fr 78px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.set-nr { font-size: 13px; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
/* 16px is het minimum, daaronder zoomt iOS Safari bij focus in op het veld */
.set-rij input { text-align: center; padding: 12px 6px; font-size: 16px; min-height: 48px; }

/* De vorige waarde is tikbaar: één tik neemt hem over */
.set-vorige {
  font-size: 12px;
  color: var(--tekst-zacht);
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: none;
  border: none;
  padding: 6px 2px;
  min-height: 48px;
  border-radius: 8px;
}
.set-vorige:disabled { opacity: 0.45; }
.set-vorige:not(:disabled):hover { background: var(--accent-zacht); color: var(--accent-tekst); border: none; }
.set-vorige:not(:disabled):active { transform: scale(0.96); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-kop { font-size: 12px; color: var(--tekst-zacht); text-align: center; }

.opslaan-balk {
  position: sticky;
  bottom: calc(var(--nav-hoogte) + 8px);
  padding-top: 8px;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}

/* De sticky knop zweeft over de inhoud, dus schermen met zo'n balk hebben extra
   onderruimte nodig. Zonder dit blijft de laatste vraag eronder verscholen. */
.app:has(.opslaan-balk) { padding-bottom: calc(var(--nav-hoogte) + 100px); }

.melding {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 12px;
}
.melding.goed { background: var(--accent-zacht); color: var(--accent-tekst); }
.melding.fout { background: var(--fout-bg); color: var(--fout-tekst); }
.melding.info { background: var(--info-bg); color: var(--info-tekst); }

/* Notities van de coach */
.notitie {
  background: var(--waarschuwing-zacht);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 14px;
}
.notitie-meta { font-size: 12px; color: var(--waarschuwing); font-weight: 600; margin-bottom: 3px; }

/* Grafiek */
.grafiek { width: 100%; height: 180px; display: block; }
.stat-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.stat { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px; }
.stat-waarde { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 12px; color: var(--tekst-zacht); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; color: var(--tekst-zacht); font-weight: 600; padding: 6px 0; }
td { padding: 7px 0; border-top: 1px solid var(--rand); font-variant-numeric: tabular-nums; }

/* Voeding */
.schakelaar { display: flex; gap: 8px; margin-bottom: 14px; }
.schakelaar button { flex: 1; padding: 10px; font-size: 14px; }
.schakelaar button.aan {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--knop-tekst);
  font-weight: 600;
}

.afvink-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  border: none;
  background: none;
  padding: 4px 0 10px;
  text-align: left;
  font-weight: 600;
}
.afvink-rij:hover { border: none; }
.vinkje {
  width: 26px; height: 26px;
  flex: 0 0 26px;
  border: 2px solid var(--rand);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.afvink-rij.af .vinkje { background: var(--accent); border-color: var(--accent); color: var(--knop-tekst); }
.afvink-rij.af .afvink-naam { color: var(--tekst-zacht); text-decoration: line-through; }

.eet-item { padding: 8px 0 8px 38px; border-top: 1px solid var(--rand); font-size: 14px; }
.eet-hoeveelheid { font-weight: 600; font-variant-numeric: tabular-nums; }
.eet-alt { font-size: 13px; margin-top: 2px; }

/* Per onderdeel afvinken. Elke regel is een knop, met een kleiner vinkje recht onder dat van
   het moment, zodat de tekst op dezelfde lijn blijft als de naam van het moment. */
.eet-vink {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 0 10px 2px;
  border: 0;
  border-top: 1px solid var(--rand);
  border-radius: 0;
  background: none;
  color: var(--tekst);
  text-align: left;
  font-size: 14px;
  font-weight: 400;
}
.eet-vink:hover { border-color: var(--rand); }
.eet-check {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  border: 2px solid var(--rand);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
}
.eet-vink.gegeten .eet-check { background: var(--accent); border-color: var(--accent); color: var(--knop-tekst); }
.eet-tekst { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.eet-vink .eet-alt { display: block; }
/* Half gegeten: een streep in het vinkje van het moment, zoals een half aangevinkte lijst. */
.afvink-rij.deels .vinkje { border-color: var(--accent); }
.afvink-rij.deels .vinkje::after { content: ""; width: 12px; height: 2px; border-radius: 1px; background: var(--accent); }
.afvink-uitleg { margin: 2px 0 0; font-size: 13px; }

.totaal-kaart { padding: 14px; }
.totalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.totaal-item { background: var(--bg); border-radius: var(--border-radius-md, 10px); padding: 10px 12px; }
.totaal-label { font-size: 12px; color: var(--tekst-zacht); }
.totaal-waarde { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-balk { height: 4px; background: var(--rand); border-radius: 999px; margin-top: 6px; overflow: hidden; }
.mini-balk div { height: 100%; background: var(--accent); }

/* Krachtscore */
.kracht-rij {
  display: grid;
  grid-template-columns: 1fr 88px auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 0;
  border-top: 1px solid var(--rand);
}
.kracht-rij:first-of-type { border-top: none; }
.kracht-naam { font-size: 14px; font-weight: 500; }
.kracht-naam .zacht { font-size: 12px; font-weight: 400; }
.sparkline { width: 88px; height: 28px; }
.status-vooruit, .status-stabiel, .status-achteruit, .status-teweinig,
.status-te-weinig { font-size: 13px; text-align: right; white-space: nowrap; }
.status-vooruit { color: var(--accent-tekst); font-weight: 600; }
.status-achteruit { color: var(--terug); font-weight: 600; }
.status-stabiel, .status-te-weinig { color: var(--tekst-zacht); }
details summary { cursor: pointer; padding: 6px 0; }

/* Eigen invoer: extra oefeningen, losse activiteiten, los eten */
.badge-eigen {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-zacht);
  color: var(--accent-tekst);
  vertical-align: middle;
  margin-left: 4px;
}
.mini-verwijder {
  border: none;
  background: none;
  color: var(--tekst-zacht);
  font-size: 16px;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 8px;
  flex: 0 0 auto;
}
.mini-verwijder:hover { border: none; color: var(--terug); background: var(--bg); }

.extra-form, .extra-oef-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.extra-getallen { display: flex; gap: 10px; }
.extra-getallen input, .extra-getallen select { flex: 1; }
select {
  font: inherit;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--kaart);
  color: var(--tekst);
  min-height: 48px;
}
.extra-item, .act-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.extra-item { padding-left: 0; }
.extra-oef { margin-bottom: 12px; }

/* Check-in */
.vraag { margin-bottom: 20px; }
.vraag-kop { font-size: 15px; font-weight: 600; margin-bottom: 8px; }

.schaal, .keuze-rij { display: flex; gap: 8px; }
.schaal-knop {
  flex: 1;
  min-height: 52px;
  font-size: 16px;
  font-weight: 600;
  padding: 0;
}
.keuze-knop { flex: 1; min-height: 48px; font-size: 14px; padding: 0 6px; }

/* Bewust geen kleurverloop van groen naar rood: bij stress is een hoge score niet
   "fout", en kleur duwt mensen naar het sociaal wenselijke antwoord. */
.schaal-knop.aan, .keuze-knop.aan {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--knop-tekst);
}

.schaal-uitleg {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--tekst-zacht);
  margin-top: 6px;
}

.dagen-rij { display: flex; gap: 6px; margin-bottom: 22px; }
.dag-bol {
  flex: 1;
  min-height: 44px;
  font-size: 12px;
  padding: 0;
  border-radius: 10px;
  color: var(--tekst-zacht);
}
.dag-bol.af { background: var(--accent-zacht); color: var(--accent-tekst); border-color: transparent; }
.dag-bol.nu { border-color: var(--accent); border-width: 2px; color: var(--tekst); }

.meer { margin-bottom: 16px; }
.lijst { margin: 0 0 16px; padding-left: 20px; font-size: 14px; }
.lijst li { margin-bottom: 6px; }

/* Navigatie */
/* (het hidden-attribuut wordt bovenaan dit bestand globaal afgedwongen) */

.nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--nav-hoogte) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: var(--kaart);
  border-top: 1px solid var(--rand);
  z-index: 10;
  /* Eigen compositing-laag: houdt de vaste balk stabiel op iOS bij een herteken (tabwissel),
     zonder dat we de blur terug hoeven. Bewust zonder will-change: dat is een blijvende
     geheugenhint en kan zelf weer artefacten geven. */
  transform: translateZ(0);
}
.nav-knop {
  flex: 1;
  border: none;
  background: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  color: var(--tekst-zacht);
  padding: 0;
}
.nav-knop:hover { border: none; }
.nav-icoon { font-size: 18px; line-height: 1; }
.nav-knop[aria-current="page"] { color: var(--accent); font-weight: 600; }

.terug {
  background: none;
  border: none;
  padding: 0 0 12px;
  color: var(--tekst-zacht);
  font-size: 14px;
}
.terug:hover { border: none; color: var(--tekst); }

/* ---- De modus-schakelaar ----------------------------------------------------
 * Donker geldt in twee gevallen: het systeem staat op donker en de gebruiker heeft
 * niet expliciet licht gekozen, óf de gebruiker koos zelf donker. Beide regels zetten
 * alleen de actieve variabelen om; de kleuren zelf staan bovenaan dit bestand.
 * ---------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="licht"]) {
    --bg: var(--bg-donker);
    --kaart: var(--kaart-donker);
    --tekst: var(--tekst-donker);
    --tekst-zacht: var(--tekst-zacht-donker);
    --rand: var(--rand-donker);
    --veld: var(--veld-donker);
    --grijs-bg: var(--grijs-bg-donker);
    --grijs-tekst: var(--grijs-tekst-donker);
    --fout-bg: var(--fout-bg-donker);
    --fout-tekst: var(--fout-tekst-donker);
    --info-bg: var(--info-bg-donker);
    --info-tekst: var(--info-tekst-donker);
    --waarschuwing: var(--waarschuwing-donker);
    --waarschuwing-zacht: var(--waarschuwing-zacht-donker);
    --terug: var(--terug-donker);
    --accent: var(--accent-donker);
    --accent-hover: var(--accent-hover-donker);
    --accent-zacht: var(--accent-zacht-donker);
    --accent-tekst: var(--accent-tekst-donker);
    --knop-tekst: var(--knop-tekst-donker);
  }
}
:root[data-modus="donker"] {
  --bg: var(--bg-donker);
  --kaart: var(--kaart-donker);
  --tekst: var(--tekst-donker);
  --tekst-zacht: var(--tekst-zacht-donker);
  --rand: var(--rand-donker);
  --veld: var(--veld-donker);
  --grijs-bg: var(--grijs-bg-donker);
  --grijs-tekst: var(--grijs-tekst-donker);
  --fout-bg: var(--fout-bg-donker);
  --fout-tekst: var(--fout-tekst-donker);
  --info-bg: var(--info-bg-donker);
  --info-tekst: var(--info-tekst-donker);
  --waarschuwing: var(--waarschuwing-donker);
  --waarschuwing-zacht: var(--waarschuwing-zacht-donker);
  --terug: var(--terug-donker);
  --accent: var(--accent-donker);
  --accent-hover: var(--accent-hover-donker);
  --accent-zacht: var(--accent-zacht-donker);
  --accent-tekst: var(--accent-tekst-donker);
  --knop-tekst: var(--knop-tekst-donker);
}

/* Schema-editor (coach) */
.nx-dag {
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.nx-dag-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.nx-dag-kop .oefening-naam { flex: 1; }
.nx-oef {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--rand);
}
.nx-oef-acties { display: flex; gap: 6px; flex-shrink: 0; }
.mini-knop {
  width: auto;
  padding: 7px 11px;
  font-size: 13px;
  border-radius: 8px;
}
.dag-form, .oef-form, .voed-form {
  border: 1px dashed var(--rand);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
}
.voed-kop { font-size: 15px; font-weight: 600; margin: 18px 0 10px; }
.doelen-form { margin-bottom: 8px; }
.veld-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  font-size: 12px;
  color: var(--tekst-zacht);
  margin-bottom: 0;
}
.of-rij { display: flex; gap: 8px; margin-bottom: 14px; }
.of-rij:last-child { margin-bottom: 0; }
.of-rij .knop-primair, .of-rij button { width: auto; }
.dag-form select, .oef-form select, .voed-form select {
  font: inherit;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--veld);
  color: var(--tekst);
}

/* Laptop / breed scherm: de onderbalk wordt een zijbalk en de content krijgt de ruimte. */
@media (min-width: 900px) {
  body { padding-left: 240px; }

  .app {
    max-width: 1040px;
    margin: 0 auto;
    padding: 36px 44px 72px;
  }
  .app:has(.opslaan-balk) { padding-bottom: 120px; }

  .nav {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 240px;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 22px 12px;
    border-top: none;
    border-right: 1px solid var(--rand);
    background: var(--kaart);
    backdrop-filter: none;
  }
  .nav::before {
    content: "Dian Willems";
    font-family: var(--merk-letter);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 6px 14px 18px;
    color: var(--tekst);
  }
  .nav-knop {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 10px;
  }
  .nav-knop[aria-current="page"] {
    background: var(--accent-zacht);
    color: var(--accent);
  }
  .nav-icoon { font-size: 18px; }
}

/* ================= Premium polish ================= */
:root {
  --schaduw-licht: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 20px rgba(16, 24, 40, 0.06);
  --schaduw-knop-licht: 0 1px 2px rgba(16, 24, 40, 0.10);
  --schaduw-donker: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.40);
  --schaduw-knop-donker: 0 1px 2px rgba(0, 0, 0, 0.5);

  --schaduw: var(--schaduw-licht);
  --schaduw-knop: var(--schaduw-knop-licht);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="licht"]) {
    --schaduw: var(--schaduw-donker);
    --schaduw-knop: var(--schaduw-knop-donker);
  }
}
:root[data-modus="donker"] {
  --schaduw: var(--schaduw-donker);
  --schaduw-knop: var(--schaduw-knop-donker);
}

body { text-rendering: optimizeLegibility; }
h1 { letter-spacing: -0.02em; font-weight: 700; }
h2 { letter-spacing: -0.01em; }

/* Kaarten: subtiele diepte + zachte overgang */
.kaart {
  box-shadow: var(--schaduw);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.kaart-knop { cursor: pointer; }
.kaart-knop:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--rand) 55%, var(--accent));
}

/* Knoppen: overgang + subtiele feedback */
button {
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}
button:active { transform: translateY(1px); }
.knop-primair { box-shadow: var(--schaduw-knop); }
.mini-knop:hover { border-color: color-mix(in srgb, var(--rand) 50%, var(--accent)); color: var(--accent); }

input, textarea, select { transition: border-color 0.15s ease, box-shadow 0.15s ease; }

/* Nav: echte SVG-iconen + zachte diepte */
.nav-icoon { display: inline-flex; }
.nav-icoon svg { width: 22px; height: 22px; display: block; }
.nav { box-shadow: 0 -6px 20px rgba(16, 24, 40, 0.05); }
.nav-knop { transition: color 0.15s ease, background 0.15s ease; }
@media (min-width: 900px) {
  .nav { box-shadow: 1px 0 14px rgba(16, 24, 40, 0.04); }
}

/* Laadindicator: nette spinner i.p.v. platte tekst */
.laden { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.laden::before {
  content: "";
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--rand);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: draai 0.7s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

/* Login / toestemming: gecentreerd en luchtig, zonder zijbalk-ruimte */
body:has(#nav[hidden]) { padding-left: 0; }
body:has(#nav[hidden]) .app { max-width: 440px; }

/* Kopieer-van-andere-klant + algemene select-stijl */
.veld select {
  font: inherit;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--veld);
  color: var(--tekst);
}
.kopieer-optie { display: inline-flex; align-items: center; gap: 8px; margin-right: 18px; font-size: 15px; }
.kopieer-optie input { width: auto; }

/* Klanten-overzicht (coach-dashboard) */
.overzicht-kop {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tekst-zacht);
  font-weight: 600;
  margin: 22px 0 10px;
}
.overzicht-kop:first-of-type { margin-top: 4px; }
.kaart-let-op { border-left: 3px solid var(--waarschuwing); }
.let-op-reden { color: var(--waarschuwing); font-size: 14px; margin-top: 2px; }

/* Voeding: grote calorie-teller voor de klant */
.kcal-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--tekst-zacht);
}
.kcal-groot {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 4px 0 14px;
}
.kcal-eenheid { font-size: 20px; font-weight: 600; color: var(--tekst-zacht); }
.kcal-over .kcal-groot { color: var(--waarschuwing); }
.voed-balk { background: var(--rand); border-radius: 999px; overflow: hidden; }
.voed-balk > div { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; }
.kcal-over .voed-balk > div { background: var(--waarschuwing); }
.kcal-balk { height: 10px; }
.kcal-onder { font-size: 14px; color: var(--tekst-zacht); margin-top: 8px; }
.macro-rij { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.macro-naam { font-size: 14px; width: 46px; flex: 0 0 46px; }
.macro-balk { height: 8px; flex: 1; }
.macro-getal { font-size: 13px; color: var(--tekst-zacht); white-space: nowrap; }
.kcal-klein { font-size: 12px; color: var(--tekst-zacht); margin-top: 16px; line-height: 1.6; }
.afvink-kcal { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--tekst-zacht); }

/* Rusttimer + opslaan-status in de balk onder een training */
.balk-rij { display: flex; gap: 8px; align-items: stretch; }
.balk-rij .knop-primair { flex: 1; width: auto; }
.rust-blok { display: flex; gap: 6px; flex: 0 0 auto; }
.rust-knop {
  min-width: 74px;
  padding: 13px 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rust-plus { min-width: 54px; padding-left: 10px; padding-right: 10px; }
.rust-loopt {
  background: var(--accent-zacht);
  border-color: var(--accent-zacht);
  color: var(--accent);
}
.rust-klaar {
  background: var(--waarschuwing-zacht);
  border-color: var(--waarschuwing-zacht);
  color: var(--waarschuwing);
  animation: knipper 0.9s ease-in-out infinite;
}
@keyframes knipper { 50% { opacity: 0.45; } }
.bewaar-status { font-size: 12px; color: var(--tekst-zacht); margin-top: 6px; min-height: 16px; }
.bewaar-status.goed { color: var(--accent); }
.bewaar-status.fout { color: var(--waarschuwing); }

/* Beter dan vorige keer: meer kilo's, of hetzelfde gewicht met meer reps */
.set-rij.set-beter input { border-color: var(--accent); }
.set-rij.set-beter .set-nr {
  color: var(--accent);
  font-weight: 700;
}
.set-rij.set-beter .set-nr::after { content: " ▲"; font-size: 9px; }

/* Oefening met minstens één volledig ingevulde set */
.oefening-klaar .oefening-naam::before {
  content: "✓ ";
  color: var(--accent);
  font-weight: 700;
}
.voortgang-klaar { color: var(--accent); font-weight: 600; }

/* Kleurthema kiezen (Profiel) */
.thema-rij { display: flex; flex-wrap: wrap; gap: 10px; }
.thema-knop {
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--rand);
  position: relative;
  cursor: pointer;
}
.thema-knop:hover { transform: translateY(-1px); }
.thema-knop[aria-pressed="true"] {
  border-color: var(--tekst);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--tekst);
}
.thema-knop[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

/* Tabbladen op de klantpagina van de coach. Zonder deze was de voedingseditor een
   halve meter scrollen onder een schema van vijf dagen, en dus onvindbaar. */
.tab-balk {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tab-knop {
  flex: 1 0 auto;
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tekst-zacht);
  white-space: nowrap;
  min-height: 40px;
}
.tab-knop:hover { background: var(--rand); }
.tab-knop-aan,
.tab-knop-aan:hover { background: var(--accent); color: var(--accent-tekst); }
.tab-balk::-webkit-scrollbar { display: none; }
.tab-balk { scrollbar-width: none; }

/* Op een telefoon moeten alle vier de tabbladen tegelijk in beeld staan. Moet je naar
   Voeding scrollen, dan is het net zo onvindbaar als toen het onder het schema stond. */
@media (max-width: 430px) {
  .tab-balk { gap: 2px; padding: 3px; }
  .tab-knop { flex: 1 1 0; padding: 10px 4px; font-size: 12.5px; letter-spacing: -0.2px; }
}

/* Weken binnen een trainingsblok */
.week-balk { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.week-knop {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--kaart);
  min-height: 36px;
}
.week-knop-aan,
.week-knop-aan:hover { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }
.week-knop-plus { border-style: dashed; color: var(--tekst-zacht); }
.week-nu { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }

.week-kopieer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.week-kopieer select { width: auto; min-width: 64px; padding: 7px 10px; }

.week-rij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.week-chip {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-zacht);
  color: var(--accent-tekst);
}
.week-chip-let-op { background: var(--waarschuwing-zacht); color: var(--waarschuwing); }

/* Gewicht noteren: niet elke oefening is "zoveel kilo op de stang" */
.gewicht-uitleg {
  font-size: 12px;
  color: var(--tekst-zacht);
  background: var(--rand);
  border-radius: 8px;
  padding: 7px 10px;
  margin: -2px 0 10px;
}
.gewicht-totaal {
  font-size: 13px;
  color: var(--tekst-zacht);
  text-align: right;
  margin-top: 2px;
  min-height: 18px;
}

/* Een set erbij: doe je vandaag een extra set, dan moet je die kwijt kunnen */
.set-erbij {
  width: 100%;
  margin-top: 4px;
  padding: 9px;
  font-size: 13px;
  color: var(--tekst-zacht);
  background: none;
  border: 1px dashed var(--rand);
  border-radius: 10px;
  min-height: 40px;
}
.set-erbij:hover { border-style: solid; color: var(--tekst); }
.set-rij.set-extra .set-nr { color: var(--accent); }

/* Wat de klant vandaag ziet, in het scherm van de coach */
.coach-dag { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.coach-dag-groot { font-size: 30px; font-weight: 700; line-height: 1.1; }
.coach-dag-groot .zacht { font-size: 15px; font-weight: 400; }
.coach-dag-rechts { text-align: right; font-size: 14px; }

.moment-rij { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.moment-chip {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--rand);
  color: var(--tekst-zacht);
}
.moment-chip-aan { background: var(--accent-zacht); color: var(--accent-tekst); border-color: transparent; font-weight: 600; }

.week-strip { display: flex; gap: 5px; margin-top: 14px; }
.dagblok {
  flex: 1;
  text-align: center;
  padding: 6px 2px;
  border-radius: 8px;
  border: 1px solid var(--rand);
  font-size: 11px;
  color: var(--tekst-zacht);
}
.dagblok b { display: block; font-size: 14px; margin-top: 2px; }
.dagblok-aan { background: var(--accent-zacht); color: var(--accent-tekst); border-color: transparent; }

/* Telt het schema op tot de ingestelde dagtotalen? */
.totaal-check { margin-top: 14px; border-top: 1px solid var(--rand); padding-top: 12px; }
.totaal-rij {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 14px;
  margin-bottom: 6px;
  border-left: 3px solid var(--rand);
  background: var(--rand);
}
.totaal-rij > span:first-child { min-width: 108px; color: var(--tekst-zacht); }
.totaal-goed { border-left-color: var(--accent); }
.totaal-bijna { border-left-color: var(--waarschuwing); }
.totaal-ver { border-left-color: var(--fout, var(--waarschuwing)); }

/* Beginscherm als overzicht van vandaag: wegen, voeding en de training die nog moet */
.thuis-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.weeg-rij { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.weeg-rij input { flex: 1; min-width: 0; font-size: 18px; text-align: center; min-height: 48px; }
.weeg-rij .knop-primair { width: auto; flex: 0 0 auto; }
.afvink-thuis { width: 100%; margin-top: 12px; display: flex; justify-content: center; align-items: baseline; gap: 8px; }
.afvink-thuis .afvink-kcal { color: inherit; opacity: 1; font-weight: 500; font-size: 13px; }
.link-knop {
  background: none;
  border: none;
  padding: 0;
  min-height: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.trainingen-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 22px 0 10px; }
.trainingen-kop h2 { margin: 0; }
.kaart-gedaan { opacity: 0.7; }

/* Weegdagen kiezen in Profiel */
.dag-kiezer { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dag-knop {
  padding: 10px 0;
  font-size: 13px;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: var(--kaart);
  min-height: 42px;
}
.dag-knop.aan { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); font-weight: 600; }

/* Home: in één oogopslag wat er vandaag moet. Aankomende training, wat je nog mag eten,
   je gewicht, en de check-in als klein knopje in plaats van een eigen tabblad. */
.home-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.home-kop h1 { margin: 0; }
.checkin-knop {
  flex: 0 0 auto;
  padding: 8px 13px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--kaart);
  font-weight: 600;
  min-height: 38px;
  white-space: nowrap;
}
.checkin-knop.af { background: var(--accent-zacht); color: var(--accent-tekst); border-color: transparent; }

.home-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tekst-zacht);
  margin-bottom: 6px;
}
.home-training h2 { margin: 0 0 4px; font-size: 22px; }
.home-training .knop-primair { width: 100%; margin-top: 14px; }

.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.tegels > .kaart { margin: 0; display: flex; flex-direction: column; min-height: 132px; }
.tegel-knop { cursor: pointer; }
.tegel-groot { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tegel-groot small { font-size: 14px; font-weight: 500; color: var(--tekst-zacht); }
.tegel-sub { font-size: 13px; color: var(--tekst-zacht); margin-top: 4px; }
.tegels .voed-balk { margin-top: auto; }
.tegel-weeg input { width: 100%; font-size: 18px; text-align: center; min-height: 44px; margin-top: 4px; }
.tegel-weeg .knop-primair { width: 100%; margin-top: 8px; min-height: 44px; }

/* Check-in als uitschuifpaneel over Home, in plaats van een aparte pagina */
.sheet-achtergrond {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border-radius: 18px 18px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
}
.sheet-greep { width: 40px; height: 4px; border-radius: 2px; background: var(--rand); margin: 0 auto 6px; }
.sheet-sluit {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--rand);
  background: var(--kaart);
  font-size: 18px;
  line-height: 1;
}
.sheet .opslaan-balk { position: sticky; bottom: 0; padding-bottom: 0; }
@media (min-width: 900px) {
  .sheet-achtergrond { align-items: center; }
  .sheet { border-radius: 18px; }
}
.tegels .voed-balk { height: 6px; }
.tegels + .afvink-thuis { margin-top: 0; margin-bottom: 12px; }

/* Lege weken in een blok: waarschuwing met één knop om ze te vullen */
.lege-weken .knop-primair { display: block; width: auto; margin-top: 10px; }
/* Voorstel om een plank of pull-up op het juiste gewichtstype te zetten */
.voorstel-knop { margin-top: 6px; }
.of-gewicht-hint { font-size: 12px; margin: -4px 0 8px; }

/* Zelf kiezen welke training je vandaag doet */
.kies-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.kies-rij .zacht { width: 100%; font-size: 13px; }
.kies-knop {
  max-width: 100%;
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--kaart);
  min-height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* De volgorde van je trainingsdagen aanpassen */
.trainingen-kop-rechts { display: flex; align-items: center; gap: 10px; }
.volgorde-kaart { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.volgorde-acties { display: flex; gap: 6px; flex: 0 0 auto; }
.volgorde-acties .mini-knop { min-width: 44px; min-height: 44px; font-size: 18px; }
.volgorde-acties .mini-knop:disabled { opacity: 0.35; }

/* Meldingen in Profiel */
.schakel-rij { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.schakel-label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; }
.schakel-rij input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; flex: 0 0 auto; accent-color: var(--accent); }
.schakel-rij input[type="time"] { width: auto; flex: 0 0 auto; }

/* Check-ins op de coachpagina */
.checkin-uitleg { margin: 0 0 12px; font-size: 13px; }
.checkin-dag { padding: 10px 0; border-top: 1px solid var(--rand); }
.checkin-lijst > .checkin-dag:first-child { border-top: 0; padding-top: 0; }
.meer .checkin-lijst { margin-top: 10px; }
.checkin-dag-kop { font-weight: 600; margin-bottom: 6px; }
.checkin-scores { display: flex; flex-wrap: wrap; gap: 6px; }
.checkin-score { background: var(--grijs-bg); color: var(--grijs-tekst); border-radius: 999px; padding: 2px 10px; font-size: 13px; }
.checkin-score strong { color: var(--tekst); }
.checkin-score.let-op { background: var(--waarschuwing-zacht); color: var(--waarschuwing); }
.checkin-score.let-op strong { color: var(--waarschuwing); }
.checkin-extra { margin-top: 6px; font-size: 13px; }
.checkin-extra .let-op { color: var(--waarschuwing); font-weight: 600; }
.checkin-notitie { margin-top: 6px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Klantenlijst: kaart met een actie (inloglink). Alleen het bovenste deel opent de klant, zodat
   er geen knop in een knop zit. */
.klant-met-actie .klant-open:hover,
.klant-met-actie .klant-open:active { transform: none; }
.klant-actie { margin-top: 12px; }
.klant-actie > .knop-primair { width: 100%; }

/* Home: herinneringen aanzetten */
.home-meldingen .stappen { margin: 0 0 10px; padding-left: 20px; }
.home-meldingen .stappen li { margin: 3px 0; }

/* Downloadknoppen per onderwerp: breken netjes af op een smal scherm */
.export-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.export-rij a { text-decoration: none; }
.export-rij button { width: auto; }

/* Notitie bij een hele trainingsdag (schema-editor van de coach) */
.dag-notitie {
  background: var(--waarschuwing-zacht);
  color: var(--waarschuwing);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 14px;
  white-space: pre-wrap;
}
.dag-notitie-form { margin: 8px 0; }
.dag-notitie-form textarea { width: 100%; margin-bottom: 8px; }
.home-losse { margin: 0 0 14px; }

/* Boodschappenlijstje */
.boodschappen-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.boodschappen { list-style: none; margin: 0 0 6px; padding: 0; }
.boodschappen li { border-top: 1px solid var(--rand); }
.boodschappen li:first-child { border-top: 0; }
.boodschappen label { display: flex; align-items: center; gap: 12px; padding: 11px 2px; cursor: pointer; }
.boodschappen input { width: 22px; height: 22px; min-height: 0; flex: 0 0 auto; accent-color: var(--accent); }
.boodschappen label.af span { text-decoration: line-through; color: var(--tekst-zacht); }

/* Losse training in de lijst van de coach */
.act-regel { padding: 8px 0; border-top: 1px solid var(--rand); }
.act-regel:first-child { border-top: 0; padding-top: 0; }

/* Berichten van de coach. Bij de klant: op Home tot ze gelezen zijn, en bovenaan de training of
   de voeding. Bij de coach: een vak om te schrijven, en of het vorige bericht gelezen is. */
.bericht-kaart .bericht { padding: 10px 0; border-top: 1px solid var(--rand); }
.bericht-kaart .home-label + .bericht { border-top: 0; padding-top: 2px; }
.bericht-meta { font-size: 12px; font-weight: 600; color: var(--tekst-zacht); margin-bottom: 3px; }
.bericht-tekst { white-space: pre-line; overflow-wrap: anywhere; }
.bericht-tekst a { color: inherit; text-decoration: underline; }
.bericht-knoppen { margin: 12px 0 0; }
.bericht-knoppen button { width: auto; }
.bericht-coach-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bericht-coach-kop h2 { margin: 0; }
.bericht-status { margin: 6px 0 0; font-size: 13px; }
.bericht-vak { margin-top: 12px; }
.bericht-bij { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.bf-melding { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 8px 0 12px; cursor: pointer; }
.bf-melding input { width: 20px; height: 20px; min-height: 0; padding: 0; flex: 0 0 auto; accent-color: var(--accent); }
.bf-app { width: 100%; margin-top: 8px; }
.bf-nog { margin-top: 10px; }
.bericht-oef-vak { padding: 10px 0 12px; border-top: 1px solid var(--rand); }
.bericht-gelezen { font-size: 12px; margin-top: 6px; color: var(--tekst-zacht); }
.bericht-gelezen.is-gelezen { color: var(--accent-tekst); font-weight: 600; }
.aangepast-inhoud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
  font-size: 14px;
}
.aangepast-knoppen { display: flex; gap: 8px; }
.aangepast-knoppen button { width: auto; }

/* Stappen: invullen op Home, staafjes per dag bij Voortgang voor klant en coach. */
.stappen-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.stappen-kop .home-label { margin: 0; }
.stap-dagkeuze { display: flex; gap: 4px; }
.stap-dagkeuze button { width: auto; padding: 5px 11px; font-size: 13px; border-radius: 999px; }
.stap-dagkeuze button.aan { background: var(--accent-zacht); color: var(--accent-tekst); border-color: transparent; font-weight: 600; }
.stappen-rij { display: flex; gap: 8px; margin-bottom: 10px; }
.stappen-rij input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.stappen-rij button { width: auto; }
.stappen-kaart .voed-balk { margin-bottom: 6px; }
.stappen-grafiek { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 90px; margin-top: 10px; }
.stappen-staaf { flex: 1; min-width: 0; background: var(--accent-zacht); border-radius: 4px 4px 0 0; }
.stappen-staaf.gehaald { background: var(--accent); }
.stappen-staaf.leeg { height: 2px; background: var(--rand); border-radius: 1px; }
.stappen-doellijn { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--tekst-zacht); opacity: 0.5; pointer-events: none; }
.stappen-dagen { display: flex; gap: 4px; margin-top: 4px; }
.stappen-dagen span { flex: 1; min-width: 0; text-align: center; font-size: 10px; color: var(--tekst-zacht); }
.stappen-samenvatting { margin: 8px 0 0; font-size: 13px; }
.stappen-doel-rij { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.stappen-doel-rij label { white-space: nowrap; font-size: 14px; margin: 0; }
.stappen-doel-rij input { flex: 1; min-width: 0; }
.stappen-doel-rij button { width: auto; }

/* Een smalle telefoon heeft geen ruimte voor de naam van een oefening én vijf knoppen naast elkaar.
   Dan staat de naam bovenaan op de volle breedte en de knoppen eronder, rechts uitgelijnd. */
@media (max-width: 480px) {
  .nx-oef { flex-wrap: wrap; row-gap: 8px; }
  .nx-oef > div:first-child { flex: 1 1 100%; min-width: 0; }
  .nx-oef-acties { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  /* De kop van een trainingsdag: past "verwijderen" er niet meer naast, dan rechts eronder. */
  .nx-dag-kop { flex-wrap: wrap; row-gap: 6px; }
  .nx-dag-kop [data-verwijder-dag] { margin-left: auto; }
}


/* ------------------------------------------------------------ merk ---- */
/* Koppen in Montserrat, zoals het logo. Lopende tekst, velden en getallen blijven in de systeemletter. */
h1, h2, h3 { font-family: var(--merk-letter); letter-spacing: -0.01em; }

/* Logo op het inlogscherm: het witte logo als masker, gekleurd met de tekstkleur.
   Zo past het zich vanzelf aan licht en donker aan. */
.merk-logo {
  width: 200px;
  max-width: 60%;
  aspect-ratio: 800 / 768;
  margin: 24px auto 8px;
  background: var(--tekst);
  -webkit-mask: url("/logo.webp") center / contain no-repeat;
  mask: url("/logo.webp") center / contain no-repeat;
}
.merk-kop { text-align: center; }
.merk-kop h1 { font-size: 20px; letter-spacing: 0.04em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }