/* AH Boodschappen AI — "Liquid Glass" (design-handoff 4A)
   Tokens en glas-materiaal volgen het handoff-document exact. */

:root {
  /* Materiaal-tripels. Het hele glas-systeem hangt hieraan: elke vulling,
     glans en schaduw verwijst ernaar, dus een thema omzetten is een kwestie
     van deze drie regels overschrijven. */
  --vlak-rgb: 255, 255, 255;      /* oppervlak van paneel, kaart en capsule */
  --glans-rgb: 255, 255, 255;     /* lichtrand die het glas reliëf geeft */
  --schaduw-rgb: 14, 26, 38;      /* slagschaduw onder het glas */
  --meng: #ffffff;                /* waar zachte tinten naartoe mengen */

  /* Kernkleuren (thema-variabelen; live te wisselen) */
  --accent: #7292ab;
  --accent-zacht: color-mix(in srgb, var(--accent) 13%, var(--meng));
  --accent-diep: color-mix(in srgb, var(--accent) 82%, #002638);
  --op-accent: #fff;              /* tekst op een accentvlak (knop, actieve tab) */
  --bonus: #ad7290;
  --bonus-zacht: color-mix(in srgb, var(--bonus) 13%, var(--meng));
  --achtergrond: #eef1f5;
  --tekst: #0e1a26;
  --tekst-zacht: #5e6975;         /* was #7c8894: haalde maar 3,2:1 op de achtergrond */
  --tekst-tertiair: #a8b2bc;
  --tekst-gedempt: #3c4854;
  --haarlijn: rgba(18, 38, 56, .07);
  /* Rood doet twee dingen die in donker tegengesteld bewegen: als tekstkleur
     moet het oplichten, als badge-vulling juist verdiepen. Daarom gesplitst. */
  --rood: #d93a30;                /* fouttekst en gevaar-knoppen */
  --teller-vlak: #d93a30;         /* vulling van de lijst-badge */
  --teller-tekst: #fff;
  --navy-verloop: linear-gradient(160deg, #28415c, #0a3357);
  --schakel-uit: rgba(190, 199, 208, .7);

  /* Effen vlakken en gekleurde pillen (planner, statistieken, dagkeuze) */
  --vlak-effen: #fff;             /* actief segment, schakelknopje */
  --tegel: #f3f6f9;               /* statistiektegel, dagknop */
  --groen: #2c7a52;
  --groen-vlak: #e4f0e8;
  --pil-recept: #3f5f76;
  --pil-recept-vlak: #e3eaf0;
  --pil-uit: #5d6b78;
  --pil-uit-vlak: rgba(18, 38, 56, .06);
  --pil-bezorg: #8f5a75;
  --pil-bezorg-vlak: #f4ecf0;
  --blauw-diep: #4a6a81;
  --stip-grijs: #c3ccd4;
  --gloed-een: #e3ecf3;           /* radiale gloed achter de loginkaart */
  --gloed-twee: #eae7f0;

  /* Radii — bewust vierkanter dan de oorspronkelijke Liquid Glass-mock */
  --radius: 12px;
  --radius-groep: 14px;
  --radius-foto: 8px;
  --radius-rij: 9px;
  --radius-pil: 9px;

  /* Veilige zones — Dynamic Island (iPhone) en gebarenbalk (Android).
     Vereist viewport-fit=cover in de meta-tag; valt terug op 0px op desktop. */
  --veilig-boven: env(safe-area-inset-top, 0px);
  --veilig-onder: env(safe-area-inset-bottom, 0px);
  --veilig-links: env(safe-area-inset-left, 0px);
  --veilig-rechts: env(safe-area-inset-right, 0px);

  /* Glas-materiaal */
  --glas-paneel: rgba(var(--vlak-rgb), .55);
  --glas-kaart: rgba(var(--vlak-rgb), .82);
  --glas-capsule: rgba(var(--vlak-rgb), .55);
  --glas-blur: blur(20px) saturate(1.6);
  --glas-schaduw: inset 0 1px 1.5px rgba(var(--glans-rgb), .95), inset 0 -1px 1px rgba(var(--glans-rgb), .35), 0 10px 34px rgba(var(--schaduw-rgb), .18);
  --kaart-schaduw: inset 0 1px 1px rgba(var(--glans-rgb), .9), 0 8px 28px rgba(var(--schaduw-rgb), .08);
  --capsule-schaduw: inset 0 1px 1.5px rgba(var(--glans-rgb), .9), 0 2px 10px rgba(var(--schaduw-rgb), .08);
  --pil-schaduw: inset 0 1px 1px rgba(var(--glans-rgb), .4), 0 2px 8px rgba(var(--schaduw-rgb), .18);
}

/* ---------- Donker thema ----------
   Alleen de tokens kantelen; de rest van het bestand blijft ongewijzigd.
   De glans blijft licht maar niet wit: een felwitte rand op een donker vlak
   leest als een streep, een gedempte blauwgrijze rand als glas. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --vlak-rgb: 48, 58, 71;
    --glans-rgb: 150, 168, 188;
    --schaduw-rgb: 0, 0, 0;
    --meng: #1b232d;

    --accent: #8fb2cc;
    --accent-diep: color-mix(in srgb, var(--accent) 70%, #cfe2f0);
    /* Het accentvlak is hier licht, dus draagt het donkere in plaats van
       witte tekst — anders zakt een knoplabel naar ~2:1 contrast. */
    --op-accent: #11212c;
    --bonus: #d09cb8;
    --achtergrond: #131920;
    --tekst: #e9eef4;
    --tekst-zacht: #9aa7b5;
    --tekst-tertiair: #8794a3;
    --tekst-gedempt: #c8d2dd;
    --haarlijn: rgba(255, 255, 255, .08);
    --rood: #ff8a82;
    --teller-vlak: #c1392f;
    --teller-tekst: #fff;
    --navy-verloop: linear-gradient(160deg, #4a6a8c, #2c4a6b);
    --schakel-uit: rgba(96, 108, 122, .75);

    /* Gekleurde pillen keren om: verzadigde tekst op een doorschijnend
       vlak van diezelfde tint, zodat ze niet als lichtvlekken opvallen. */
    --vlak-effen: #59667a;
    --tegel: rgba(255, 255, 255, .06);
    --groen: #7fc9a0;
    --groen-vlak: rgba(127, 201, 160, .16);
    --pil-recept: #a9c6dd;
    --pil-recept-vlak: rgba(169, 198, 221, .16);
    --pil-uit: #a4b1be;
    --pil-uit-vlak: rgba(255, 255, 255, .07);
    --pil-bezorg: #dda6c1;
    --pil-bezorg-vlak: rgba(221, 166, 193, .16);
    --blauw-diep: #9dbdd4;
    --stip-grijs: #6a7683;
    --gloed-een: #1e2c3a;
    --gloed-twee: #241f2e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", sans-serif;
  background: var(--achtergrond);
  color: var(--tekst);
  line-height: 1.45;
  font-size: 14px;
}

/* Zonder backdrop-filter: glas dichter maken */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glas-paneel: rgba(var(--vlak-rgb), .88);
    --glas-capsule: rgba(var(--vlak-rgb), .88);
  }
}

/* ---------- Frosted toolbar ---------- */
.kop {
  background: rgba(var(--vlak-rgb), .62);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border-bottom: 1px solid rgba(var(--glans-rgb), .7);
  box-shadow: 0 1px 12px rgba(var(--schaduw-rgb), .06);
  color: var(--tekst);
  position: sticky;
  top: 0;
  z-index: 20;
}
.kop-binnen {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 58px;
  padding: calc(6px + var(--veilig-boven)) calc(24px + var(--veilig-rechts)) 6px calc(24px + var(--veilig-links));
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-merk {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--accent), var(--accent-diep));
  color: var(--op-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .55), 0 2px 6px rgba(var(--schaduw-rgb), .18);
}
.logo-naam { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.logo-naam em { font-style: normal; color: var(--accent); }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy-verloop);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .35), 0 2px 6px rgba(var(--schaduw-rgb), .2);
}

.badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: var(--radius-pil);
}
.badge.demo { background: var(--bonus-zacht); color: var(--bonus); box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .7); }
.badge.status { background: var(--accent-zacht); color: var(--accent-diep); box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .7); }

/* Segmented capsule-navigatie */
.tabs {
  margin: 0 auto;
  display: flex;
  background: rgba(var(--vlak-rgb), .5);
  border-radius: var(--radius-pil);
  padding: 3px;
  box-shadow: var(--capsule-schaduw);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: transparent;
  border: 0;
  color: var(--tekst-gedempt);
  padding: 6px 16px;
  border-radius: var(--radius-pil);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease-out, color .2s ease-out;
}
.tab:hover { background: rgba(var(--vlak-rgb), .6); }
.tab.actief {
  background: var(--accent);
  color: var(--op-accent);
  font-weight: 600;
  box-shadow: var(--pil-schaduw);
}
.teller {
  background: var(--teller-vlak);
  color: var(--teller-tekst);
  border-radius: var(--radius-pil);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  margin-left: 5px;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
.tab.actief .teller { background: rgba(var(--vlak-rgb), .28); }

/* ---------- Panelen ---------- */
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px calc(24px + var(--veilig-rechts)) calc(90px + var(--veilig-onder)) calc(24px + var(--veilig-links));
}
.paneel { display: none; }
.paneel.actief { display: block; }

h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

.werkbalk {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 6px 0 16px;
}
.werkbalk h2 { margin-right: auto; }
.werkbalk h3 { margin: 0; margin-right: auto; }
.werkbalk input[type="search"] { flex: 1; min-width: 220px; }

input, select, textarea {
  font: inherit;
  font-size: 13px;
  padding: 9px 15px;
  border: 0;
  border-radius: var(--radius-pil);
  background: var(--glas-capsule);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  color: var(--tekst);
  box-shadow: var(--capsule-schaduw);
}
textarea { border-radius: var(--radius-foto); width: 100%; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
input::placeholder { color: var(--tekst-zacht); }
input[type="number"] { width: 76px; }
label { font-size: 13px; color: var(--tekst-gedempt); display: inline-flex; align-items: center; gap: 8px; }

/* iOS-schakelaar */
.schakel { cursor: pointer; user-select: none; }
.schakel input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 27px;
  border-radius: 999px; /* schakelaar blijft een capsule */
  background: var(--schakel-uit);
  position: relative;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease-out;
  box-shadow: inset 0 1px 2px rgba(var(--schaduw-rgb), .12);
}
.schakel input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--vlak-effen);
  box-shadow: 0 1px 3px rgba(var(--schaduw-rgb), .25);
  transition: left .2s ease-out;
}
.schakel input[type="checkbox"]:checked { background: var(--accent); }
.schakel input[type="checkbox"]:checked::after { left: 19px; }

/* ---------- Knoppen ---------- */
.knop {
  font: inherit;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: var(--radius-pil);
  border: 0;
  background: var(--glas-capsule);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  color: var(--tekst-gedempt);
  cursor: pointer;
  box-shadow: var(--capsule-schaduw);
  transition: filter .15s ease-out, background .2s ease-out;
}
.knop:hover { filter: brightness(.96); }
.knop.primair {
  background: var(--accent);
  color: var(--op-accent);
  font-weight: 600;
  box-shadow: var(--pil-schaduw);
}
.knop.primair:hover { filter: brightness(.92); }
.knop.gevaar { color: var(--rood); }
.knop:disabled { opacity: .55; cursor: not-allowed; }
.knop.klein { padding: 3px 10px; font-size: 12px; line-height: 1.5; }

/* Segmented control (bv. maand/week in de planner) */
.segmenten {
  display: flex;
  background: var(--glas-capsule);
  border-radius: var(--radius-pil);
  padding: 3px;
  box-shadow: var(--capsule-schaduw);
}
.segment {
  font: inherit;
  font-size: 13px;
  border: 0;
  background: transparent;
  color: var(--tekst-gedempt);
  padding: 5px 15px;
  border-radius: var(--radius-pil);
  cursor: pointer;
  transition: background .2s ease-out;
}
.segment.actief {
  background: var(--vlak-effen);
  font-weight: 600;
  color: var(--tekst);
  box-shadow: 0 1px 4px rgba(var(--schaduw-rgb), .14);
}

.melding { color: var(--tekst-zacht); font-size: 13px; min-height: 1.2em; }
.melding.fout { color: var(--rood); }

/* ---------- Productkaarten ---------- */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.kaart {
  background: var(--glas-kaart);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--kaart-schaduw);
  padding: 13px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  transition: box-shadow .2s ease-out;
}
.kaart:hover { box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .9), 0 12px 34px rgba(var(--schaduw-rgb), .13); }
.kaart .afbeelding {
  height: 150px;
  margin: -5px -8px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: repeating-linear-gradient(45deg, #f3f6f9 0, #f3f6f9 8px, #eaeff4 8px, #eaeff4 16px);
  border-radius: var(--radius-foto);
  overflow: hidden;
}
.kaart .afbeelding img { width: 100%; height: 100%; object-fit: cover; }
.kaart h4 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.kaart .sub { color: var(--tekst-zacht); font-size: 13px; }
.kaart .onderkant { margin-top: auto; display: flex; align-items: center; gap: 9px; padding-top: 8px; }

.prijs { font-weight: 700; font-size: 17px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.prijs .oud { color: var(--tekst-tertiair); text-decoration: line-through; font-weight: 400; font-size: 13px; margin-right: 6px; }
.prijs .nieuw { color: var(--bonus); }

.bonus-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--bonus-zacht);
  color: var(--bonus);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: var(--radius-pil);
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .7);
  z-index: 1;
}

.nutri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
}
.nutri.a { background: #038141; }
.nutri.b { background: #85bb2f; }
.nutri.c { background: #fecb02; color: #5d4d00; }
.nutri.d { background: #ee8100; }
.nutri.e { background: #e63e11; }

.voeg-toe {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--op-accent);
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .4), 0 3px 10px rgba(var(--schaduw-rgb), .18);
  transition: filter .15s ease-out, transform .15s ease-out;
}
.voeg-toe:hover { filter: brightness(.92); }
.voeg-toe:active { transform: scale(.92); }

/* ---------- Recepten ---------- */
.recepten .kaart { cursor: pointer; }
.recepten .kaart.gekozen { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-zacht); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  background: var(--accent-zacht);
  color: var(--accent-diep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 10px;
  border-radius: var(--radius-pil);
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .7);
}

.score {
  background: var(--accent);
  color: var(--op-accent);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pil);
  white-space: nowrap;
  box-shadow: var(--pil-schaduw);
}
.uitleg { font-size: 12px; color: var(--tekst-zacht); }
.voeding { font-size: 13px; font-weight: 600; color: var(--tekst-gedempt); font-variant-numeric: tabular-nums; }

/* ---------- AI-blok ---------- */
.ai-blok {
  margin-top: 22px;
  background: var(--accent-zacht);
  border: 0;
  border-radius: var(--radius-foto);
  padding: 16px;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .8);
}
.ai-blok h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.ai-blok textarea { background: rgba(var(--vlak-rgb), .75); }
.ai-blok.uitgeschakeld textarea, .ai-blok.uitgeschakeld .werkbalk { display: none; }

/* ---------- Tabellen (plan & lijst) ---------- */
.tabel-omhulsel { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--glas-kaart);
  border-radius: var(--radius);
  box-shadow: var(--kaart-schaduw);
  overflow: hidden;
}
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--haarlijn); font-size: 13px; vertical-align: middle; }
th {
  background: transparent;
  color: var(--tekst-zacht);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
tr:last-child td { border-bottom: 0; }
td .sub { color: var(--tekst-zacht); font-size: 12px; }
.opmerking { color: var(--bonus); font-size: 12px; }

.samenvatting {
  margin: 14px 0;
  padding: 14px 18px;
  background: var(--glas-kaart);
  border-radius: var(--radius);
  box-shadow: var(--kaart-schaduw);
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}
.samenvatting .totaal { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.samenvatting .voordeel { color: var(--bonus); font-weight: 700; }

.menu-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; }

.stapper { display: inline-flex; align-items: center; gap: 8px; }
.stapper button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: var(--accent-zacht);
  color: var(--accent-diep);
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .7);
}
.verwijder { background: none; border: 0; color: var(--rood); font-size: 15px; cursor: pointer; }

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

/* ---------- Overig ---------- */
.voet {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px 28px;
  color: var(--tekst-zacht);
  font-size: 12px;
}

.toast {
  position: fixed;
  bottom: calc(24px + var(--veilig-onder));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(var(--schaduw-rgb), .82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: #fff;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: var(--radius-pil);
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .2), 0 10px 34px rgba(var(--schaduw-rgb), .3);
  z-index: 50;
  transition: opacity .25s;
}
.toast.fout { background: rgba(229, 72, 63, .88); }
.toast.onzichtbaar { opacity: 0; pointer-events: none; }
.verborgen { display: none !important; }

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--glans-rgb), .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: draai .7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: .01s !important; }
}

/* ---------- Blokken, chips & profielen ---------- */
.blok {
  background: var(--glas-kaart);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--kaart-schaduw);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.blok h3, .blok h4 { margin: 0 0 8px; }
.blok ol { margin: 8px 0; padding-left: 20px; }
.blok li { margin-bottom: 6px; font-size: 13px; }
.blok code { background: var(--accent-zacht); padding: 1px 6px; border-radius: 6px; font-size: .85em; }

.formulier-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.formulier-raster label { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font: inherit;
  font-size: 13px;
  border: 0;
  border-radius: var(--radius-pil);
  padding: 8px 16px;
  background: var(--glas-capsule);
  color: var(--tekst-gedempt);
  cursor: pointer;
  box-shadow: var(--capsule-schaduw);
  transition: background .2s ease-out;
}
.chip:hover { background: rgba(var(--vlak-rgb), .75); }
.chip.actief {
  background: var(--accent);
  color: var(--op-accent);
  font-weight: 600;
  box-shadow: var(--pil-schaduw);
}
.uitgegrijsd { opacity: .45; }

.kaart-kop { display: flex; align-items: flex-start; gap: 8px; }
.kaart-kop h4 { flex: 1; }

/* ---------- Maaltijdkaarten met foto en detaildialoog ---------- */
.recept-kaart { cursor: pointer; }
.kaart-foto {
  width: calc(100% + 16px);
  margin: -5px -8px 4px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-foto);
}
.kies-knop { margin-top: auto; }

dialog {
  border: none;
  border-radius: var(--radius-groep);
  box-shadow: 0 24px 70px rgba(var(--schaduw-rgb), .35);
  padding: 0;
  background: rgba(252, 253, 254, .97);
  color: var(--tekst);
}
dialog::backdrop {
  background: rgba(var(--schaduw-rgb), .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#recept-dialoog { width: min(680px, 92vw); max-height: 88vh; }
.dialoog-sluit {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(var(--vlak-rgb), .92);
  z-index: 1;
}
.dialoog-foto { width: 100%; height: 230px; object-fit: cover; display: block; }
.dialoog-inhoud { padding: 18px 22px 22px; }
.dialoog-inhoud h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.dialoog-inhoud h4 {
  margin: 18px 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-zacht);
}
.dialoog-inhoud ul, .dialoog-inhoud ol { margin: 0; padding-left: 20px; }
.dialoog-inhoud li { margin-bottom: 4px; font-size: 13px; }
.bereiding li { margin-bottom: 8px; }
.product-foto-cel { width: 48px; }
.product-foto { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; }

/* ---------- Paneelkoppen & filters (ontwerp Maaltijden & Planner) ---------- */
.paneel-kop { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; }
.paneel-kop .ondertitel { font-size: 13px; color: var(--tekst-zacht); }
.paneel-kop-rij { align-items: center; }
.paneel-kop-rij .paneel-kop { margin: 0; margin-right: auto; }
.blok-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.blok-kop h3 { margin: 0; font-size: 14px; }
.blok-kop .hint { font-size: 12px; color: var(--tekst-tertiair); }
.doel-regel { margin: 13px 0 0; font-size: 13px; color: #5d6b78; }
.doel-regel::before { content: "ⓘ "; color: var(--accent); }

.profiel-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: var(--radius-pil);
  padding: 6px 16px 6px 6px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: rgba(var(--vlak-rgb), .6);
  color: var(--tekst-gedempt);
  box-shadow: var(--capsule-schaduw);
  transition: background .2s ease-out;
}
.profiel-chip.actief { background: var(--accent); color: var(--op-accent); box-shadow: var(--pil-schaduw); }
.profiel-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--navy-verloop);
  color: #fff;
}
.profiel-chip.actief .profiel-avatar { background: rgba(var(--vlak-rgb), .25); }
.profiel-tekst { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.profiel-naam { font-weight: 600; }
.profiel-sub { font-size: 11px; font-weight: 500; white-space: nowrap; color: #8a97a3; }
.profiel-chip.actief .profiel-sub { color: rgba(var(--glans-rgb), .82); }

.personen-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glas-capsule);
  border-radius: var(--radius-pil);
  padding: 5px 6px 5px 15px;
  font-size: 13px;
  color: var(--tekst-gedempt);
  box-shadow: var(--capsule-schaduw);
}
.personen-pill .stepper { display: inline-flex; align-items: center; gap: 9px; }
#personen-waarde { min-width: 16px; text-align: center; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--tekst); }
.stap-knop {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: var(--accent-zacht);
  color: var(--accent-diep);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .7);
}
.stap-knop:disabled { opacity: .5; cursor: not-allowed; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.filter-chip {
  font: inherit;
  font-size: 13px;
  border: 0;
  border-radius: var(--radius-pil);
  padding: 7px 15px;
  cursor: pointer;
  white-space: nowrap;
  background: rgba(var(--vlak-rgb), .6);
  color: var(--tekst-gedempt);
  box-shadow: var(--capsule-schaduw);
  transition: background .2s ease-out;
}
.filter-chip.actief { background: var(--accent); color: var(--op-accent); font-weight: 600; box-shadow: var(--pil-schaduw); }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tekst-zacht);
}
.lijst-strip {
  background: var(--glas-kaart);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--kaart-schaduw);
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.lijst-strip-links { display: flex; flex-direction: column; gap: 2px; }
.lijst-strip-totaal { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lijst-strip-sub { font-size: 13px; color: #5d6b78; flex: 1; min-width: 180px; }

.kaart-fotovak { position: relative; margin: -5px -8px 6px; }
.kaart-fotovak .kaart-foto { margin: 0; width: 100%; }
.kaart-weg {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(var(--vlak-rgb), .88);
  color: var(--tekst-gedempt);
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--schaduw-rgb), .18);
}
.foto-plaatshouder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 138px;
  border-radius: var(--radius-foto);
  background: repeating-linear-gradient(45deg, #f3f6f9 0, #f3f6f9 8px, #eaeff4 8px, #eaeff4 16px);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8ba3b5;
}
.kaart-inhoud { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.voeding-cijfers { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
.voeding-cijfers strong { color: var(--tekst-gedempt); font-weight: 700; }
.kaart-onderkant { margin-top: auto; display: flex; align-items: center; gap: 9px; padding-top: 6px; }
.past-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--groen-vlak);
  color: var(--groen);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pil);
}
.kies-knop {
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-pil);
  padding: 7px 15px;
  cursor: pointer;
  margin-left: auto;
  background: var(--accent);
  color: var(--op-accent);
  box-shadow: var(--pil-schaduw);
  transition: filter .15s ease-out;
}
.kies-knop:hover { filter: brightness(.93); }
.kies-knop.gekozen { background: var(--accent-zacht); color: var(--accent-diep); box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .7); }
.kies-knop.groot { width: 100%; padding: 12px 0; font-size: 14px; margin: 0; }
.dialoog-kies { margin-top: 18px; }
.recepten .kaart.gekozen { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--glas-kaart); }
.recepten .kaart.gekozen::after {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--op-accent);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: var(--pil-schaduw);
}
.recepten .kaart.gekozen .kaart-weg { display: none; }

.ai-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ai-kop h3 { margin: 0; font-size: 14px; font-weight: 600; }
.ai-icoon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: linear-gradient(160deg, var(--accent), var(--accent-diep));
  color: var(--op-accent);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-raster { display: grid; gap: 10px; margin: 14px 0 4px; grid-template-columns: repeat(4, 1fr); }
.stat-tegel { background: var(--tegel); border-radius: var(--radius-rij); padding: 11px 12px; text-align: center; }
.stat-waarde { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11px; color: var(--tekst-zacht); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Dagplanner ---------- */
.planner-nav { display: flex; align-items: center; gap: 8px; }
.planner-nav strong {
  min-width: 150px;
  text-align: center;
  font-size: 15px;
  text-transform: capitalize;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nav-rond {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(var(--vlak-rgb), .65);
  color: var(--tekst-gedempt);
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--capsule-schaduw);
}
.planner-stats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.stat-pil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(var(--vlak-rgb), .7);
  border-radius: var(--radius-pil);
  padding: 6px 13px;
  font-size: 12px;
  color: #5d6b78;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .8);
}
.stip { width: 8px; height: 8px; border-radius: 50%; }
.stip-accent { background: var(--accent); }
.stip-bonus { background: var(--bonus); }
.stip-grijs { background: var(--stip-grijs); }

.planner-foto {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

/* Maandkalender: één glazen paneel met haarlijn-cellen */
.maand-paneel {
  background: var(--glas-kaart);
  border-radius: var(--radius);
  box-shadow: var(--kaart-schaduw);
  padding: 16px 14px;
  overflow: hidden;
}
.maand-koppen {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--haarlijn);
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.kalender-kop {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-zacht);
}
.kalender { display: grid; grid-template-columns: repeat(7, 1fr); }
.kalender-cel {
  font: inherit;
  text-align: left;
  border: 0;
  background: transparent;
  box-shadow: inset -1px 0 0 var(--haarlijn), inset 0 -1px 0 var(--haarlijn);
  min-height: 92px;
  padding: 8px 7px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--tekst);
  overflow: hidden;
  transition: background .15s ease-out;
}
.kalender-cel:hover { background: rgba(114, 146, 171, .08); }
.kalender-cel.andere-maand { opacity: .35; }
.kalender-dagnr { font-size: 12px; font-weight: 600; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
.kalender-cel.vandaag .kalender-dagnr {
  font-weight: 700;
  background: var(--accent);
  color: var(--op-accent);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pil-schaduw);
}
.kalender-foto {
  width: 100%;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
}
.dag-pil {
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-pil);
  padding: 3px 9px;
  align-self: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.dag-pil.recept { color: var(--pil-recept); background: var(--pil-recept-vlak); }
.dag-pil.uit { color: var(--pil-uit); background: var(--pil-uit-vlak); }
.dag-pil.bezorg { color: var(--pil-bezorg); background: var(--pil-bezorg-vlak); }

/* Weekweergave: één paneel met rijen */
.week-paneel {
  display: flex;
  flex-direction: column;
  background: var(--glas-kaart);
  border-radius: var(--radius);
  box-shadow: var(--kaart-schaduw);
  overflow: hidden;
}
.week-rij {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--tekst);
  text-align: left;
  background: transparent;
  padding: 13px 18px;
  transition: background .15s ease-out;
}
.week-rij:not(:last-child) { border-bottom: 1px solid var(--haarlijn); }
.week-rij:hover { background: rgba(114, 146, 171, .06); }
.week-datum { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 50px; }
.week-dagnaam { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-zacht); }
.week-dagnr { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.week-dagnr.vandaag {
  color: var(--op-accent);
  background: var(--accent);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pil-schaduw);
}
.week-midden { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.week-tekst { display: flex; flex-direction: column; gap: 1px; }
.week-titel { font-weight: 600; font-size: 14px; }
.week-titel.uit { font-size: 13px; font-weight: 700; color: #5d6b78; }
.week-titel.bezorg { font-size: 13px; font-weight: 700; color: #8f5a75; }
.week-sub { font-size: 12px; color: var(--tekst-zacht); }
.week-leeg { font-size: 13px; color: var(--tekst-tertiair); font-style: italic; }
.week-wijzig { font-size: 12px; color: var(--tekst-tertiair); flex-shrink: 0; }
.week-plus {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-zacht);
  color: var(--accent-diep);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .7);
}

/* Meerdere maaltijden per week-rij */
.week-maaltijden { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.week-maaltijd { display: flex; align-items: center; gap: 8px; }
.week-slot { font-size: 15px; flex-shrink: 0; }
.week-totalen { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; align-items: flex-end; }
.totaal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-zacht);
  border-radius: var(--radius-pil);
  padding: 3px 10px 3px 3px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .7);
}
.totaal-initiaal {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--op-accent);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.totaal-kcal { font-weight: 700; color: var(--accent-diep); }
.totaal-doel { color: var(--tekst-zacht); }
.totaal-doel.over { color: var(--bonus); font-weight: 700; }

.dag-pil-icoon { margin-right: 3px; }
.dag-pil.solo { border: 1px dashed currentColor; }
.kalender-meer { font-size: 10px; color: var(--tekst-zacht); }
.kalender-kcal {
  margin-top: auto;
  font-size: 9px;
  color: var(--accent-diep);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dagvenster: slot + eters + reeds geplande maaltijden */
.dag-reeds { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.dag-reeds-regel {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(var(--vlak-rgb), .6);
  border-radius: var(--radius-rij);
  padding: 8px 10px;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .8);
}
.dag-reeds-slot { font-size: 12px; font-weight: 600; color: var(--tekst-gedempt); flex-shrink: 0; width: 72px; }
.dag-reeds-midden { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dag-reeds-naam { font-size: 13px; font-weight: 600; }
.dag-reeds-eters { font-size: 11px; color: var(--accent-diep); }
.slot-keuze, .eter-keuze { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.slot-knop, .eter-knop {
  font: inherit;
  font-size: 13px;
  border: 0;
  border-radius: var(--radius-pil);
  padding: 7px 14px;
  cursor: pointer;
  background: rgba(var(--vlak-rgb), .6);
  color: var(--tekst-gedempt);
  box-shadow: var(--capsule-schaduw);
  transition: background .2s ease-out;
}
.slot-knop.actief, .eter-knop.actief { background: var(--accent); color: var(--op-accent); font-weight: 600; box-shadow: var(--pil-schaduw); }
.eter-keuze { margin-top: -4px; }

.verzin-formulier { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.verzin-naam, .verzin-omschrijving { width: 100%; }
.verzin-omschrijving { border-radius: var(--radius-foto); }
.voeding-invoer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.voeding-veld { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.voeding-veld input { width: 100%; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.voeding-veld .sub { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.verzin-knoppen { display: flex; gap: 10px; }
.verzin-knoppen .primair { flex: 1; }

/* Wie eet deze maaltijd: initialen-badges */
.eter-badges { display: inline-flex; gap: 3px; flex-shrink: 0; margin-left: auto; }
.eter-badges.compact { margin-left: 4px; }
.eter-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--op-accent);
  opacity: .45; /* "samen": gedempt aanwezig */
}
/* De ring scheidt de badge van wat eronder ligt, dus hij volgt het oppervlak */
.eter-badge.solo { opacity: 1; box-shadow: 0 0 0 2px rgb(var(--vlak-rgb)), 0 1px 4px rgba(var(--schaduw-rgb), .25); }
.eter-badges.compact .eter-badge { width: 16px; height: 16px; font-size: 10px; box-shadow: none; }
/* Navy blijft in beide thema's donker en houdt dus witte letters */
.eter-badge.kleur-0 { background: var(--navy-verloop); color: #fff; }
.eter-badge.kleur-1 { background: var(--bonus); }
.eter-badge.kleur-2 { background: var(--groen); }
.eter-badge.kleur-3 { background: var(--accent); }

/* Bewerken van een geplande maaltijd */
.dag-reeds-regel.bewerkt { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-zacht); }
.bewerk-banner {
  background: var(--accent-zacht);
  border-radius: var(--radius-rij);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--accent-diep);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .7);
}
.bewerk-acties { display: flex; gap: 8px; }

/* ---------- Overzicht: calorieën & macro's bijhouden ---------- */
#overzicht-inhoud {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.overzicht-kaart {
  background: var(--glas-kaart);
  border-radius: var(--radius);
  box-shadow: var(--kaart-schaduw);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.overzicht-kop { display: flex; align-items: center; gap: 12px; }
.overzicht-naam { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.overzicht-sub { font-size: 12px; color: var(--tekst-zacht); }
.overzicht-kaart h4 {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-zacht);
}

.kcal-blok { display: flex; flex-direction: column; gap: 6px; }
.kcal-getal { font-variant-numeric: tabular-nums; }
.kcal-getal strong { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.kcal-doel { font-size: 14px; color: var(--tekst-zacht); }

.voortgang-balk {
  height: 10px;
  border-radius: var(--radius-pil);
  background: rgba(18, 38, 56, .08);
  overflow: hidden;
}
.voortgang-balk.dun { height: 7px; }
.voortgang-vul {
  height: 100%;
  border-radius: var(--radius-pil);
  background: var(--accent);
  transition: width .4s ease-out;
}
.voortgang-vul.over { background: var(--bonus); }
.voortgang-vul.macro-eiwit { background: #2c7a52; }
.voortgang-vul.macro-kh { background: var(--accent); }
.voortgang-vul.macro-vet { background: #d99a3c; }

.macro-lijst { display: flex; flex-direction: column; gap: 10px; }
.macro-rij { display: flex; flex-direction: column; gap: 4px; }
.macro-kop { display: flex; justify-content: space-between; font-size: 12px; }
.macro-label { color: var(--tekst-gedempt); font-weight: 600; }
.macro-waarde { color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }

.week-grafiek {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: end;
  height: 110px;
}
.grafiek-staaf { display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.grafiek-balk-vak {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.grafiek-balk {
  width: 70%;
  min-height: 2px;
  border-radius: var(--radius-foto) var(--radius-foto) 2px 2px;
  background: var(--accent);
  transition: height .4s ease-out;
}
.grafiek-balk.over { background: var(--bonus); }
.grafiek-balk.leeg { background: rgba(18, 38, 56, .1); }
.grafiek-doellijn {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1.5px dashed var(--tekst-tertiair);
  z-index: 1;
}
.grafiek-dag { font-size: 10px; color: var(--tekst-zacht); font-weight: 600; }

.overzicht-samenvatting { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------- Profielen ---------- */
.profiel-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.profiel-kaart {
  background: var(--glas-kaart);
  border-radius: var(--radius);
  box-shadow: var(--kaart-schaduw);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profiel-kaart-kop { display: flex; align-items: center; gap: 12px; }
.profiel-kaart-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .3), 0 2px 6px rgba(var(--schaduw-rgb), .18);
}
.profiel-kaart-avatar.kleur-0 { background: linear-gradient(160deg, #28415c, #0a3357); }
.profiel-kaart-avatar.kleur-1 { background: linear-gradient(160deg, #b98aa0, #8f5a75); }
.profiel-kaart-avatar.kleur-2 { background: linear-gradient(160deg, #4c9d72, #2c7a52); }
.profiel-kaart-avatar.kleur-3 { background: linear-gradient(160deg, var(--accent), var(--accent-diep)); color: var(--op-accent); }
.profiel-kaart-namen { display: flex; flex-direction: column; min-width: 0; }
.profiel-kaart-naam { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.profiel-kaart-meta { font-size: 12px; color: var(--tekst-zacht); }
.doel-badge {
  margin-left: auto;
  align-self: flex-start;
  background: var(--accent-zacht);
  color: var(--accent-diep);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--radius-pil);
  white-space: nowrap;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .7);
}
.profiel-kaart-lijf { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tekst-gedempt); flex-wrap: wrap; }
.profiel-kaart-lijf .punt { color: var(--tekst-tertiair); }
.profiel-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.profiel-tegel {
  background: rgba(var(--vlak-rgb), .55);
  border-radius: var(--radius-rij);
  padding: 10px 8px;
  text-align: center;
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .8);
}
.profiel-tegel-waarde { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.profiel-tegel-label { font-size: 10px; color: var(--tekst-zacht); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.profiel-toelichting { margin: 0; font-size: 12px; color: var(--tekst-zacht); line-height: 1.4; }
.profiel-kaart-acties { display: flex; gap: 8px; margin-top: auto; }
.knop.klein.gevaar { color: var(--rood); }

.disclaimer { font-size: 12px; color: var(--tekst-zacht); margin: 18px 0 0; }

.profiel-leeg {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--tekst-zacht);
}
.profiel-leeg-icoon { font-size: 40px; opacity: .5; }

.profiel-formulier { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.profiel-formulier-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.profiel-veld { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.profiel-veld .sub { font-size: 12px; color: var(--tekst-gedempt); }
.profiel-veld input, .profiel-veld select { width: 100%; }
#profiel-dialoog { width: min(520px, 94vw); }

/* Dagvenster */
.dag-dialoog .dag-titel { text-transform: capitalize; margin: 3px 0 14px; }
.dag-knoppen { display: flex; gap: 10px; margin-bottom: 14px; }
.dag-knop {
  flex: 1;
  border: 0;
  border-radius: var(--radius-rij);
  padding: 12px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--tegel);
  color: var(--tekst-gedempt);
}
.dag-knop.uit.actief { background: var(--accent-zacht); color: var(--blauw-diep); box-shadow: inset 0 0 0 1.5px var(--blauw-diep); }
.dag-knop.bezorg.actief { background: var(--pil-bezorg-vlak); color: var(--pil-bezorg); box-shadow: inset 0 0 0 1.5px var(--pil-bezorg); }
.dag-keuze-naam { flex: 1; text-align: left; font-weight: 600; font-size: 13px; }
.dag-keuze-kcal { font-size: 12px; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dag-keuze-vink { color: var(--accent); font-weight: 800; }
.dag-keuze-recept.actief { background: var(--accent-zacht); box-shadow: inset 0 0 0 1.5px var(--accent); }
.dag-verwijder-rij { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--haarlijn); }
.dag-verwijder {
  border: 0;
  background: transparent;
  color: var(--rood);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}

#dag-keuze-dialoog { width: min(560px, 92vw); max-height: 85vh; }
#dag-keuze-dialoog input { width: 100%; margin-top: 10px; border-radius: var(--radius-pil); }
.dag-keuze-recepten { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dag-keuze-recept {
  display: flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-rij);
  background: rgba(var(--vlak-rgb), .6);
  box-shadow: inset 0 1px 1px rgba(var(--glans-rgb), .8);
  cursor: pointer;
  transition: background .15s ease-out;
}
.dag-keuze-recept:hover { background: var(--accent-zacht); }

/* ---------- Loginpagina ---------- */
.login-lichaam {
  /* dvh volgt de krimpende adresbalk op mobiel; vh zou de kaart buiten beeld duwen */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--veilig-boven)) calc(24px + var(--veilig-rechts)) calc(24px + var(--veilig-onder)) calc(24px + var(--veilig-links));
  background:
    radial-gradient(1100px 620px at 78% -8%, var(--gloed-een), transparent),
    radial-gradient(900px 520px at 4% 108%, var(--gloed-twee), transparent),
    var(--achtergrond);
}
.login-kaart {
  width: min(380px, 100%);
  background: var(--glas-paneel);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  border-radius: var(--radius-groep);
  box-shadow: var(--glas-schaduw);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.login-logo {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 24px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-titel { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.login-titel em { font-style: normal; color: var(--accent); }
.login-sub { margin: 4px 0 22px; font-size: 13px; color: var(--tekst-zacht); }
.login-kaart form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.login-kaart input {
  width: 100%;
  text-align: center;
  font-size: 15px;
  padding: 12px 16px;
  background: rgba(var(--vlak-rgb), .75);
}
.login-kaart .knop { width: 100%; padding: 12px 0; font-size: 14px; }
.login-kaart .melding { margin: 0; min-height: 1.2em; }
.login-gebruikers { display: flex; gap: 10px; justify-content: center; margin-bottom: 4px; }
.login-gebruiker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: var(--radius-pil);
  padding: 6px 16px 6px 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(var(--vlak-rgb), .6);
  color: var(--tekst-gedempt);
  box-shadow: var(--capsule-schaduw);
  transition: background .2s ease-out;
}
.login-gebruiker.actief { background: var(--accent); color: var(--op-accent); box-shadow: var(--pil-schaduw); }
.login-gebruiker.actief .profiel-avatar { background: rgba(var(--vlak-rgb), .25); }

.wachtwoord-formulier { display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.wachtwoord-formulier input { width: 100%; }

/* ---------- Mobiel ---------- */
@media (max-width: 720px) {
  .kop-binnen {
    padding: calc(6px + var(--veilig-boven)) calc(14px + var(--veilig-rechts)) 6px calc(14px + var(--veilig-links));
    gap: 10px;
  }
  main { padding: 16px calc(14px + var(--veilig-rechts)) calc(90px + var(--veilig-onder)) calc(14px + var(--veilig-links)); }
  h2 { font-size: 22px; }

  /* iOS Safari zoomt de hele pagina in zodra een veld met font-size < 16px
     focus krijgt. 16px houdt de layout stabiel bij het typen. */
  input, select, textarea { font-size: 16px; padding: 10px 15px; }

  /* Tikdoelen op 44px — Apple HIG en Android Material vragen 44/48px.
     Het logo wijkt terug zodat de hogere tabbalk geen extra kophoogte kost. */
  .logo-naam { display: none; }
  .tab, .knop, .segment {
    /* min-height i.p.v. padding: blijft kloppen ongeacht regelhoogte of tekst */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .tab { padding: 6px 15px; }
  .knop { padding: 6px 18px; }
  .knop.klein { min-height: 36px; padding: 4px 12px; }
  .stap-knop { min-width: 44px; min-height: 44px; }

  .tabs { margin: 0; order: 3; flex-basis: 100%; justify-content: flex-start; }
  /* Wegvloeiende rand als hint dat er meer tabbladen naast staan */
  .tabs.overloopt {
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .tabs.overloopt.einde {
    mask-image: linear-gradient(to right, transparent, #000 28px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
  }
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .maand-paneel { padding: 12px 6px; border-radius: 18px; }
  /* Leesbaarheid boven dichtheid: 10px is de ondergrens waarop een label in
     een cel van ~53px nog te lezen is. De ruimte komt uit krappere padding
     en een iets hogere cel, niet uit kleinere letters. */
  .kalender-cel { min-height: 68px; padding: 5px 3px; gap: 3px; }
  .kalender-dagnr { font-size: 11px; }
  .kalender-cel.vandaag .kalender-dagnr { width: 19px; height: 19px; }
  .kalender-foto { height: 26px; }
  .dag-pil { font-size: 10px; padding: 2px 5px; }
  .kalender-meer { font-size: 10px; }
  .week-rij { gap: 10px; padding: 11px 14px; min-height: 58px; }
  .week-datum { width: 38px; }
  .stat-raster { grid-template-columns: repeat(2, 1fr); }
  .planner-nav { width: 100%; }
  .planner-nav strong { flex: 1; min-width: 0; }
  .nav-rond { width: 44px; height: 44px; }
  .raster { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
}