/* ===================================================================
   Lettertypen — lokaal geserveerd (v2.18.1)

   Voorheen kwamen de fonts van fonts.googleapis.com. Dat kostte op elke
   paginawissel een extern verzoek (en op een telefoon een zichtbare
   "flits" waarin de tekst even in het reservelettertype stond). De vier
   woff2-bestanden (samen ~165 KB, latin-subset) staan nu in
   /static/fonts/ en laden na het eerste bezoek uit de browsercache.

   Sora en Inter zijn variabele fonts: één bestand dekt alle diktes.
   =================================================================== */

@font-face {
  font-family: "Sora";
  src: url("/static/fonts/Sora-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ===================================================================
   Maaltijdplanner — design tokens (v2.18.0)

   Thema "Vers & Helder": een lichte, frisse basis met zachtgroen papier,
   witte kaarten en veel lucht. Elke module heeft daarbinnen een eigen
   kleur (weekmenu terracotta, boodschappen groen, recepten oud-roze,
   producten blauw, gewicht paars) die terugkomt in de navigatie, de
   dashboardtegels en de maaltijdlabels — zo zie je in één oogopslag
   waar je bent.

   Het boodschappenlijstje blijft bewust een kassabonnetje: dat is het
   signature element van de app, nu in de nieuwe kleurtaal.

   Alle emoji zijn vervangen door één lijn-iconenset (zie templating.py).
   =================================================================== */

:root {
  --paper: #F3F7F2;
  --surface: #FFFFFF;
  --ink: #1C2B21;
  --muted: #6E8276;
  --line: #EAF0E9;
  --green: #1E9E5A;
  --green-dark: #136A3C;
  --green-light: #E3F3E9;

  /* terracotta blijft de accentkleur voor "let op"-momenten en het
     weekmenu; warmer en iets zachter dan voorheen */
  --terracotta: #E07A3F;
  --terracotta-light: #FCEEE4;

  /* modulekleuren */
  --mod-menu: #E07A3F;      --mod-menu-tint: #FCEEE4;
  --mod-bood: #2E8F6E;      --mod-bood-tint: #E3F1EC;
  --mod-recept: #C0517A;    --mod-recept-tint: #FAE9EF;
  --mod-product: #2E7BA6;   --mod-product-tint: #E5EFF6;
  --mod-gewicht: #6C5CD4;   --mod-gewicht-tint: #ECEAFA;

  --radius: 16px;
  --radius-klein: 10px;
  --shadow: 0 1px 3px rgba(28, 43, 33, 0.05), 0 8px 24px rgba(28, 43, 33, 0.05);
  --shadow-op: 0 2px 4px rgba(28, 43, 33, 0.05), 0 12px 28px rgba(28, 43, 33, 0.08);
  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Dezelfde achtergrond als de body. Zonder dit schildert de browser
     tussen twee paginaladingen heel even wit — dat zag je op de
     telefoon als een flits bij elke paginawissel. */
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0 0 4px; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 17px; letter-spacing: -0.01em; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; color: var(--ink); }
a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--terracotta-light); }

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

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------- layout */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  padding: 22px 12px;
}

.brand {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 2px 10px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--green); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.merk-icoon { width: 17px; height: 17px; display: block; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background-color 120ms ease, color 120ms ease;
}
.nav-link:hover { background: #F6F9F5; color: var(--ink); text-decoration: none; }
.nav-link .icon { width: 18px; height: 18px; display: inline-flex; flex-shrink: 0; }
.nav-link .icon .lijn-icoon { width: 18px; height: 18px; }

/* actieve pagina in de eigen modulekleur */
.nav-link.active { font-weight: 600; background: var(--green-light); color: var(--green-dark); }
.nav-link.active[data-module="menu"]     { background: var(--mod-menu-tint);    color: var(--mod-menu); }
.nav-link.active[data-module="shopping"] { background: var(--mod-bood-tint);    color: var(--mod-bood); }
.nav-link.active[data-module="recipes"]  { background: var(--mod-recept-tint);  color: var(--mod-recept); }
.nav-link.active[data-module="products"] { background: var(--mod-product-tint); color: var(--mod-product); }
.nav-link.active[data-module="gewicht"]  { background: var(--mod-gewicht-tint); color: var(--mod-gewicht); }

.sidebar-footer {
  margin-top: auto; font-size: 11px; color: var(--muted); padding: 10px;
  line-height: 1.9;
}

.main {
  flex: 1;
  min-width: 0;
  padding: 32px 40px 60px;
  max-width: 1180px;
}

.page-header { margin-bottom: 24px; }
.page-header .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terracotta);
  margin-bottom: 6px;
  display: block;
}
.page-header p.lede { color: var(--muted); max-width: 640px; }

/* mobiele topbar (sidebar verbergen, hamburger-vrij — gewoon stapelen) */
.mobile-topbar { display: none; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }
  .sidebar {
    width: 100%; flex-direction: row; align-items: center; gap: 4px;
    padding: 8px 12px; overflow-x: auto; flex-wrap: nowrap;
    border-right: none; border-bottom: 1px solid var(--line);
    /* niet meer sticky: een meescrollende balk met een eigen laag laat de
       telefoon bij elke scrollstap opnieuw tekenen, en de vijf
       hoofdpagina's staan toch al vast onderin in de tabbalk */
    -webkit-overflow-scrolling: touch;
  }
  .brand { padding: 2px 6px 2px 2px; font-size: 15px; flex-shrink: 0; }
  .brand-mark { width: 27px; height: 27px; border-radius: 9px; }
  /* footer compact in de rij tonen i.p.v. verbergen — uitloggen en account
     aanmaken moeten ook op mobiel bereikbaar zijn */
  .sidebar-footer {
    display: flex; align-items: center; gap: 10px;
    margin-top: 0; margin-left: auto; padding: 4px 6px;
  }
  .sidebar-footer .ws-label { white-space: nowrap; }
  .sidebar-footer .sidebar-extra-link { margin-top: 0; white-space: nowrap; }
  .sidebar-footer .logout-form { margin: 0; }
  .sidebar-footer .logout-form .btn { width: auto !important; padding: 6px 10px; }
  .sidebar-footer .app-version { display: none; }  /* op mobiel staat de versie op de instellingenpagina */

  /* De vijf hoofdpagina's staan onderin in de tabbalk; in de bovenbalk
     blijven alleen de pagina's over die daar niet in passen. */
  .nav-link { white-space: nowrap; flex-shrink: 0; }
  .nav-link[data-module="dashboard"],
  .nav-link[data-module="menu"],
  .nav-link[data-module="shopping"],
  .nav-link[data-module="recipes"],
  .nav-link[data-module="gewicht"] { display: none; }
  .nav-link .icon { margin-right: -4px; }

  .main { padding: 22px 18px 50px; }

  /* tabellen (recepten, producten, admin, ingrediënten) horizontaal
     scrollbaar maken zodat ze niet uit het ontwerp lopen */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table thead, table tbody { display: table; width: 100%; min-width: 560px; }

  /* knoppen-groepen in de toolbar (bijv. boodschappenlijst) onder elkaar
     laten vallen zodat ze niet buiten het scherm verdwijnen */
  .toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; }
}

/* ---------------------------------------------------------------- componenten */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card-pad { padding: 20px 22px; }

.grid {
  display: grid;
  gap: 16px;
}
.kpi-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 17px 18px;
  /* kolom met het getal onderaan: zo blijven de tegels even hoog als een
     label op de telefoon over twee regels valt */
  display: flex;
  flex-direction: column;
}
.kpi .label {
  font-size: 12.5px; color: var(--muted); display: flex; align-items: center;
  justify-content: space-between; gap: 10px; font-weight: 500;
}
.kpi .value {
  font-family: var(--font-display); font-weight: 700; font-size: 27px;
  letter-spacing: -0.01em; color: var(--ink);
  margin-top: auto; padding-top: 10px;
}
.kpi .value small { font-size: 14px; color: var(--muted); font-weight: 500; }

/* icoonvlakje in de modulekleur — dezelfde kleur als in de navigatie */
.kpi-icoon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-light); color: var(--green-dark);
}
.kpi-icoon .lijn-icoon { width: 16px; height: 16px; }
.kpi[data-module="menu"]     .kpi-icoon { background: var(--mod-menu-tint);    color: var(--mod-menu); }
.kpi[data-module="shopping"] .kpi-icoon { background: var(--mod-bood-tint);    color: var(--mod-bood); }
.kpi[data-module="recipes"]  .kpi-icoon { background: var(--mod-recept-tint);  color: var(--mod-recept); }
.kpi[data-module="gewicht"]  .kpi-icoon { background: var(--mod-gewicht-tint); color: var(--mod-gewicht); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
     color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; background: var(--green); color: #fff;
  transition: background-color 120ms ease;
}
.btn:hover { background: var(--green-dark); text-decoration: none; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { background: var(--green-light); }
.btn.danger { background: var(--surface); color: var(--terracotta); border-color: var(--terracotta-light); }
.btn.danger:hover { background: var(--terracotta-light); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.icon-only { padding: 6px 9px; }

input[type="text"], input[type="number"], input[type="email"], select, textarea {
  font-family: var(--font-body); font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--green); }
label { font-size: 12px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 5px; }
.field { margin-bottom: 16px; }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 140px; }

.tag {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 99px; background: var(--green-light); color: var(--green-dark);
}

.empty-state {
  text-align: center; padding: 50px 20px; color: var(--muted);
}
.empty-state .icon { font-size: 32px; display: block; margin-bottom: 10px; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }

.saved-flash {
  font-size: 12px; color: var(--green-dark); font-weight: 600;
  opacity: 0; transition: opacity 200ms ease;
}
.saved-flash.show { opacity: 1; }

/* ---------------------------------------------------------------- weekmenu */

.menu-table th, .menu-table td { padding: 8px; }
.menu-table th:first-child, .menu-table td:first-child { padding-left: 12px; }
.menu-cell { display: flex; flex-direction: column; gap: 6px; }
.menu-cell select { font-size: 13px; }
.menu-cell .servings-row { display: flex; align-items: center; gap: 6px; }
.menu-cell .servings-row input { width: 56px; padding: 6px 8px; }
.menu-cell .servings-row span { font-size: 12px; color: var(--muted); }
.day-label { font-weight: 700; font-family: var(--font-display); font-size: 15px; }

/* ---------------------------------------------------------------- boodschappenlijst (bonnetje) */

.receipt-wrap { display: flex; justify-content: center; }
.receipt {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 26px 26px 30px;
  position: relative;
}
.receipt::before {
  content: "";
  position: absolute; top: -7px; left: 0; right: 0; height: 14px;
  background-image: radial-gradient(circle at 7px 7px, var(--paper) 6px, transparent 6.5px);
  background-size: 14px 14px;
  background-repeat: repeat-x;
}
.receipt-head { text-align: center; margin-bottom: 6px; }
.receipt-head .store { font-family: var(--font-display); font-size: 20px; }
.receipt-head .meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; }
.receipt hr {
  border: none; border-top: 1px dashed var(--line); margin: 14px 0;
}
.receipt-section-title {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--terracotta); margin: 18px 0 8px;
}
.receipt-row {
  display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
  font-family: var(--font-mono); font-size: 13.5px;
}
.receipt-row .chk {
  width: 16px; height: 16px; border: 1.5px solid var(--ink); border-radius: 3px;
  flex-shrink: 0; cursor: pointer; background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
  margin-top: 1px;
}
.receipt-row.checked .chk { background: var(--green); border-color: var(--green); color: #fff; }
.receipt-row .name { flex: 1; cursor: pointer; }
.receipt-row.checked .name { text-decoration: line-through; color: var(--muted); }
.receipt-row .qty { color: var(--muted); white-space: nowrap; }
.receipt-total {
  display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: 13px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ink);
}
.progress-bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.progress-bar > div { height: 100%; background: var(--green); }

/* ---------------------------------------------------------------- instellingen lijstjes */

.settings-list { list-style: none; margin: 0; padding: 0; }
.settings-list li {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.settings-list li:last-child { border-bottom: none; }
.settings-list .order-controls { display: flex; flex-direction: column; gap: 0; }
.settings-list .order-controls button {
  border: none; background: none; cursor: pointer; color: var(--muted); padding: 0 4px; font-size: 11px;
}
.settings-list .order-controls button:hover { color: var(--green-dark); }
.settings-list .name { flex: 1; }
.inline-add-form { display: flex; gap: 8px; margin-top: 12px; }

.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: flex; align-items: center; gap: 8px; background: var(--green-light);
  color: var(--green-dark); border-radius: 99px; padding: 6px 6px 6px 12px; font-size: 13px; font-weight: 500;
}
.chip button {
  border: none; background: rgba(0,0,0,0.08); color: var(--green-dark); border-radius: 50%;
  width: 18px; height: 18px; cursor: pointer; font-size: 11px; line-height: 1;
}

/* ---------------------------------------------------------------- ingrediënten editor */

.ing-table input, .ing-table select { font-size: 13px; padding: 6px 8px; }
.ing-table td { padding: 6px 8px; }
.ing-table .qty-col { width: 90px; }
.ing-table .unit-col { width: 130px; }
.ing-table .section-col { width: 190px; }
.ing-table .action-col { width: 40px; text-align: right; }

/* ---------------------------------------------------------------- inloggen/registreren */

.auth-body { background: var(--paper); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-wrap { width: 100%; max-width: 420px; }
.auth-card { max-width: 420px; }
.auth-brand { padding: 0 0 18px; }

/* ---------------------------------------------------------------- sidebar realtime-indicator */

.ws-status { color: var(--terracotta); transition: color 200ms ease; }

/* ---------------------------------------------------------------- actief/inactief schuifje */

.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch input { display: none; }
.switch-track {
  width: 38px; height: 22px; background: var(--line); border-radius: 99px; position: relative;
  transition: background-color 150ms ease; flex-shrink: 0;
}
.switch input:checked + .switch-track,
.switch:has(input:checked) .switch-track { background: var(--green); }
.switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: left 150ms ease;
}
.switch:has(input:checked) .switch-thumb { left: 18px; }

/* ---------------------------------------------------------------- sterrenbeoordeling */

.star-rating { display: inline-flex; gap: 1px; }
.star-rating .star {
  border: none; background: none; cursor: pointer; font-size: 17px; color: var(--line); padding: 0 1px;
  line-height: 1;
}
.star-rating .star.filled { color: var(--terracotta); }

/* ---------------------------------------------------------------- receptfoto's */

.recipe-thumb { width: 42px; height: 42px; border-radius: 7px; object-fit: cover; display: block; }
.recipe-thumb-empty {
  display: flex; align-items: center; justify-content: center; background: var(--green-light);
  font-size: 18px; color: var(--green-dark);
}
.recipe-photo-preview { max-width: 220px; max-height: 160px; border-radius: var(--radius); display: block; margin-bottom: 10px; object-fit: cover; }

.checkbox-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink);
}
.checkbox-chip input { width: auto; margin: 0; }

/* ---------------------------------------------------------------- weekmenu (per-dag instelbaar) */

.menu-days { display: flex; flex-direction: column; gap: 18px; }
.day-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px;
}
.day-card-head h2 { margin-bottom: 14px; }
.day-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.menu-slot {
  border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--paper);
}
.menu-slot-head { display: flex; align-items: center; gap: 8px; }
.slot-label-input {
  font-family: var(--font-display); font-weight: 600; font-size: 14px; border: none; background: none;
  padding: 4px 2px; flex: 1; min-width: 0;
}
.slot-label-input:focus { outline: none; border-bottom: 1px solid var(--green); }
.slot-actions { display: flex; gap: 2px; flex-shrink: 0; }
.icon-btn {
  border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 6px; border-radius: 5px;
}
.icon-btn:hover { background: var(--green-light); color: var(--green-dark); }
.icon-btn.danger:hover { background: var(--terracotta-light); color: var(--terracotta); }
.slot-empty-hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.add-slot-form { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.add-slot-form input[type="text"] { flex: 1; min-width: 160px; }
.add-slot-form select { width: auto; min-width: 160px; }

/* ---------------------------------------------------------------- boodschappen: handmatig toevoegen */

.manual-add-card { margin-bottom: 20px; max-width: 480px; margin-left: auto; margin-right: auto; }
.manual-add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.autocomplete-wrap { position: relative; flex: 2; min-width: 160px; }
.autocomplete-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); margin-top: 4px; overflow: hidden;
}
.suggestion-list { list-style: none; margin: 0; padding: 4px; max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.suggestion-list li button {
  display: block; width: 100%; text-align: left; border: none; background: none; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink);
}
.suggestion-list li button:hover { background: var(--green-light); }
.suggestion-list .muted { color: var(--muted); }
.suggestion-empty { font-size: 12px; color: var(--muted); padding: 8px 10px; margin: 0; }
.manual-add-row select { flex: 1; min-width: 150px; }

/* Op smalle schermen de drie velden onder elkaar zetten. Anders wrappen ze
   half en valt de (absoluut gepositioneerde) suggestielijst over het
   productschap-veld en de knop heen, waardoor die onbereikbaar lijken. */
@media (max-width: 560px) {
  .manual-add-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .manual-add-row .autocomplete-wrap { flex: none; width: 100%; min-width: 0; }
  .manual-add-row select { flex: none; width: 100%; min-width: 0; }
  .manual-add-row button[type="submit"] { width: 100%; }
}

.manual-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--terracotta);
  background: var(--terracotta-light); border-radius: 99px; padding: 1px 6px; margin-left: 4px;
}
.manual-delete {
  border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 6px;
  margin-left: auto;
}
.manual-delete:hover { color: var(--terracotta); }

@media (max-width: 860px) {
  .day-slots { grid-template-columns: 1fr; }
}

.sample-tag { background: var(--paper); color: var(--muted); border: 1px dashed var(--line); font-style: italic; }

.sidebar-extra-link {
  display: block; margin-top: 10px; font-size: 12px; color: var(--muted); text-decoration: underline;
}
.sidebar-extra-link:hover { color: var(--ink); }

.account-switch-note {
  background: var(--green-light); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; margin: 10px 0 16px;
}

/* ---------------------------------------------------------------- weekmenu: dag-schakelaar & recept-link */

.day-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.day-shopping-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.day-shopping-toggle .toggle-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.day-card.day-excluded { opacity: 0.65; }
.day-card.day-excluded .day-card-head { opacity: 1; }

.slot-recipe-link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; }

/* ---------------------------------------------------------------- kookweergave receptpagina */

.cook-view { overflow: hidden; }
.cook-photo {
  display: block; width: 100%; max-height: 340px; object-fit: cover;
  border-radius: 14px 14px 0 0;
}
.cook-body { padding: 22px 26px 26px; }
.cook-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.cook-chip {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.cook-chip-cat { background: var(--green-light); }

.cook-heading {
  margin: 20px 0 4px; font-size: 19px;
}

.cook-steps { list-style: none; margin: 12px 0 0; padding: 0; }
.cook-steps li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 11px 0;
}
.cook-steps li + li { border-top: 1px dashed var(--line); }
.step-num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600;
  margin-top: 1px;
}
.step-text { font-size: 15.5px; line-height: 1.65; color: var(--ink); }

.cook-notes {
  margin-top: 18px; padding: 12px 14px; border-radius: 10px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted); line-height: 1.55;
}

/* bewerkpaneel (inklapbaar) */
.edit-details summary { list-style: none; cursor: pointer; }
.edit-details summary::-webkit-details-marker { display: none; }
.edit-summary {
  font-weight: 700; font-size: 15px; color: var(--ink);
  display: block; user-select: none;
}
.edit-summary .muted { font-weight: 400; font-size: 13px; color: var(--muted); }
.edit-details[open] .edit-summary { margin-bottom: 18px; }
.edit-details summary:hover { color: var(--green); }

.tag-recipe-link { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.tag-recipe-link:hover { color: var(--green); text-decoration-color: var(--green); }

@media (max-width: 860px) {
  .cook-body { padding: 18px 16px 22px; }
  .cook-photo { max-height: 260px; }
  /* groter en luchtiger lezen op mobiel, voor aan het fornuis */
  .step-text { font-size: 16.5px; line-height: 1.7; }
  .cook-steps li { padding: 13px 0; gap: 12px; }
  .step-num { width: 30px; height: 30px; font-size: 14px; }
  .cook-chip { font-size: 13.5px; padding: 6px 13px; }
}

/* ---------------------------------------------------------------- ingrediënten-bewerker op mobiel: kaartjes i.p.v. brede tabel */

@media (max-width: 860px) {
  .ing-table { display: block; overflow: visible; }
  .ing-table thead { display: none; }
  .ing-table tbody { display: block; width: auto; min-width: 0; }
  .ing-table tr.ing-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.2fr) 38px;
    grid-template-areas:
      "name name name name"
      "qty  unit section del";
    gap: 8px;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }
  .ing-table td { display: block; padding: 0; border: none; min-width: 0; width: auto; }
  .ing-table tr.ing-row > td:first-child { grid-area: name; }
  .ing-table td.qty-col { grid-area: qty; width: auto; }
  .ing-table td.unit-col { grid-area: unit; width: auto; }
  .ing-table td.section-col { grid-area: section; width: auto; }
  .ing-table td.action-col { grid-area: del; justify-self: end; width: auto; }
  .ing-table input, .ing-table select { width: 100%; min-width: 0; font-size: 15px; }
  .ing-table td.action-col button { width: 34px; height: 34px; }
}

/* ---------------------------------------------------------------- ingrediënten-leeslijst in de kookweergave */

.cook-heading-sub { font-size: 13px; font-weight: 400; color: var(--muted); }
.cook-ingredients { list-style: none; margin: 10px 0 0; padding: 0; columns: 2; column-gap: 28px; }
.cook-ingredients li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; break-inside: avoid;
  border-bottom: 1px dotted var(--line);
  font-size: 14.5px;
}
.ing-amount {
  flex: 0 0 auto; min-width: 84px;
  font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 600;
  color: var(--green);
}
.ing-name { line-height: 1.45; }

@media (max-width: 860px) {
  .cook-ingredients { columns: 1; }
  .cook-ingredients li { font-size: 16px; padding: 8px 0; }
  .ing-amount { font-size: 14px; }
}

/* ---------------------------------------------------------------- weekschema-presets */

.preset-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.preset-form select { max-width: 100%; }
@media (max-width: 860px) {
  .preset-form { flex-direction: column; align-items: stretch; }
  .preset-form .field { flex: 1 1 auto !important; }
  .preset-form .btn { width: 100%; }
}

/* ---------------------------------------------------------------- recepten: zoeken & sorteren */

.recipe-search-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.recipe-search-bar input[type="search"] {
  flex: 1; max-width: 420px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 14px; background: #fff;
}
.recipe-search-bar input[type="search"]:focus { outline: 2px solid var(--green-light); border-color: var(--green); }
.recipe-count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--green); }
.sort-arrow { font-size: 10px; display: inline-block; width: 12px; }

.book-tag { background: var(--green-light); }

@media (max-width: 860px) {
  .recipe-search-bar input[type="search"] { max-width: none; font-size: 16px; }
}

/* ---------------------------------------------------------------- recept-zoekveld in weekmenu-vakken */

.slot-recipe-search { width: 100%; }
.suggestion-clear { color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------- porties-schaler op de receptpagina */

.cook-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.cook-heading-row .cook-heading { margin: 0; }

.portion-scaler {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 6px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff;
}
.portion-label { font-size: 12px; color: var(--muted); padding-left: 8px; }
.portion-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 18px; line-height: 1; color: var(--green); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.portion-btn:hover { background: var(--green-light); border-color: var(--green); }
.portion-btn:active { transform: scale(0.94); }
.portion-count {
  min-width: 26px; text-align: center;
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 16px; color: var(--ink);
}
.portion-note {
  margin: 6px 0 0; font-size: 12.5px; color: var(--terracotta);
}

@media (max-width: 860px) {
  .cook-heading-row { gap: 8px; }
  .portion-btn { width: 34px; height: 34px; font-size: 20px; }
  .portion-count { font-size: 17px; }
}

/* ---------------------------------------------------------------- kleine formulierhint */

.field-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- versienummer in de zijbalk */

.app-version {
  display: block; margin-top: 8px; font-size: 11px;
  font-family: "IBM Plex Mono", monospace; color: rgba(255,255,255,0.4);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- versienummer op de instellingenpagina */

.settings-version {
  margin-top: 24px; text-align: center;
  font-size: 12px; color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}

/* ---------------------------------------------------------------- 'meer resultaten'-hint in suggestielijst */

.suggestion-more { display: block; padding: 8px 10px; font-size: 12px; color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------- afgevinkt-sectie onderaan de boodschappenlijst */

.receipt-section-done {
  color: var(--muted);
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* ---------------------------------------------------------------- sleepbare productschappen */

#sections-list li { position: relative; }
.drag-handle {
  cursor: grab; color: var(--muted); font-size: 16px; user-select: none;
  padding: 0 6px 0 0; touch-action: none;
}
.drag-handle:active { cursor: grabbing; }
#sections-list li.dragging { opacity: 0.5; background: var(--green-light); border-radius: 8px; }

/* ---------------------------------------------------------------- foto-upload knoppen op receptformulier */

.photo-upload-buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.photo-btn { cursor: pointer; margin: 0; }
.photo-filename { font-size: 12.5px; color: var(--green); }
#photo-preview, #photo-current { display: block; margin-bottom: 8px; }

/* ---------------------------------------------------------------- ongedaan maken op de boodschappenlijst */

.undo-bar:empty { display: none; }
.undo-bar { margin: 10px 0 0; }
.undo-btn { width: 100%; justify-content: center; font-family: var(--font-sans); }
.undo-btn strong { font-weight: 600; }

@media (max-width: 860px) {
  .undo-btn { padding: 10px 12px; font-size: 14px; }
}

/* ---------------------------------------------------------------- herkomst per boodschappen-artikel */

.receipt-row .row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.receipt-row .row-main .name { flex: none; }

/* het regeltje met de receptnaam blijft leesbaar als het artikel afgevinkt is
   (staat bewust buiten .name, dat wordt doorgestreept) */
.row-bron, .row-bronnen > summary {
  font-family: var(--font-sans); font-size: 11.5px; color: var(--muted);
  line-height: 1.35; cursor: pointer;
}
.row-bron {
  display: block; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-bron:hover, .row-bronnen > summary:hover { color: var(--green); text-decoration: underline; }

.row-bronnen > summary { list-style: none; display: inline-block; }
.row-bronnen > summary::-webkit-details-marker { display: none; }
.row-bronnen > summary::after { content: " ▾"; font-size: 9px; }
.row-bronnen[open] > summary::after { content: " ▴"; }

.bron-lijst {
  list-style: none; margin: 4px 0 4px; padding: 6px 8px;
  background: var(--paper); border-radius: 6px;
  font-family: var(--font-sans); font-size: 11.5px;
}
.bron-lijst li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.bron-lijst a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bron-lijst a:hover { color: var(--green); text-decoration: underline; }
.bron-lijst .bron-qty { color: var(--muted); white-space: nowrap; }

/* op de telefoon is de ruimte krap: iets compacter, en de tik-doelen ruim genoeg */
@media (max-width: 560px) {
  .row-bron, .row-bronnen > summary { font-size: 11px; padding: 1px 0; }
  .bron-lijst li { padding: 4px 0; }
}

/* ---------------------------------------------------------------- klikbare dashboard-tegels */

.kpi-link {
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.kpi-link:hover, .kpi-link:focus-visible {
  border-color: var(--line);
  box-shadow: var(--shadow-op);
  transform: translateY(-2px);
}
.kpi-link:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.kpi-link:active { transform: translateY(0); }
/* Bewust geen pijltje of extra teken in het label: dat duwde het langste label
   ("Ingevulde maaltijden") op de telefoon naar een tweede regel, waardoor de
   tegels ongelijk hoog werden. De tegels blijven dus exact zo groot als
   voorheen; dat ze klikbaar zijn blijkt uit de muisaanwijzer en het oplichten
   bij aanwijzen. */
.kpi-link:hover .value { color: var(--green); }

/* --- v2.15.0: meerdere pagina's uploaden bij "recept uit foto/PDF" --------
   Elke toegevoegde foto verschijnt als rijtje met miniatuur, volgnummer en
   verwijderknop, zodat je vóór het uitlezen ziet wat er meegaat en in welke
   volgorde. */
.pagina-lijst { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pagina-rij {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border-radius: 8px; padding: 6px 10px;
}
.pagina-rij span { flex: 1; font-size: 13px; color: var(--muted); }
.pagina-thumb {
  width: 52px; height: 52px; object-fit: cover; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
}

/* --- v2.15.1: kookstand (scherm aanhouden tijdens het koken) --------------
   Kaartje onderaan de kookweergave met een schuifje in de stijl van de app:
   uit = grijs, aan = kruidengroen. Wordt via JS verborgen op browsers zonder
   Wake Lock API, zodat er nooit een schuifje staat dat niets doet. */
.kookstand {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--paper); border-radius: 10px; padding: 14px 16px; margin-top: 18px;
}
.kookstand-tekst { display: flex; flex-direction: column; gap: 2px; }
.kookstand-tekst strong { font-size: 15px; }
.kookstand-tekst span { font-size: 13px; color: var(--muted); }
.kookstand-schakelaar { position: relative; flex: 0 0 auto; cursor: pointer; }
.kookstand-schakelaar input { position: absolute; opacity: 0; width: 0; height: 0; }
.kookstand-knop {
  display: block; width: 46px; height: 26px; border-radius: 13px;
  background: #c9c9c4; transition: background 0.15s ease;
}
.kookstand-knop::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.15s ease;
}
.kookstand-schakelaar input:checked + .kookstand-knop { background: var(--green); }
.kookstand-schakelaar input:checked + .kookstand-knop::after { transform: translateX(20px); }
.kookstand-schakelaar input:focus-visible + .kookstand-knop { outline: 2px solid var(--green); outline-offset: 2px; }

/* --- v2.16.0: gewichtstracking --------------------------------------------
   Eén rustig scherm: persoonschips + kort invoerformulier bovenaan, daaronder
   de voortgangskaarten, onderaan de grafiek. Lijn-iconen (SVG, stroke) in
   plaats van emoji. Mobiel-eerst: het formulier is met één hand te bedienen. */

.lijn-icoon { width: 1em; height: 1em; vertical-align: -0.12em; }
.nav-link .lijn-icoon { width: 1.1em; height: 1.1em; }

.gewicht-melding, .gewicht-fout {
  padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; font-size: 14px;
}
.gewicht-melding { background: rgba(75, 107, 77, 0.12); color: var(--green); }
.gewicht-fout { background: rgba(193, 89, 42, 0.12); color: var(--terracotta); }

.persoon-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.persoon-chip {
  border: 2px solid var(--chip-kleur, var(--green)); background: transparent;
  color: var(--ink); border-radius: 999px; padding: 8px 16px; font-size: 14px;
  font-family: inherit; cursor: pointer; transition: background 0.12s ease, color 0.12s ease;
}
.persoon-chip.actief { background: var(--chip-kleur, var(--green)); color: #fff; }
.persoon-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.persoon-stip {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--persoon-kleur, var(--green)); flex: 0 0 auto;
}

.gewicht-kaarten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin-top: 20px;
}
.gewicht-kaart { border-top: 3px solid var(--persoon-kleur, var(--green)); }
.gewicht-kaart-kop { display: flex; align-items: center; gap: 8px; }
.gewicht-kaart-kop .persoon-stip { background: var(--persoon-kleur, var(--green)); }
.gewicht-huidig { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 4px; }
.gewicht-getal { font-family: var(--font-display); font-size: 32px; line-height: 1; }
.gewicht-eenheid { color: var(--muted); font-size: 14px; }
.gewicht-datum { color: var(--muted); font-size: 12px; margin-left: auto; }
.gewicht-cijfers { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.gewicht-cijfers li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.gewicht-doel-regel { font-size: 13px; margin: 10px 0 6px; }
.gewicht-doel-bereikt { font-size: 13px; margin: 10px 0 6px; color: var(--green); display: flex; align-items: center; gap: 6px; }

.voortgangsbalk {
  height: 8px; border-radius: 4px; background: rgba(0,0,0,0.08); overflow: hidden;
}
.voortgangsbalk-vulling {
  height: 100%; border-radius: 4px; background: var(--persoon-kleur, var(--green));
  transition: width 0.3s ease;
}
.voortgangsbalk-label { font-size: 11px; color: var(--muted); margin: 4px 0 0; }

.metingen-tabel { width: 100%; border-collapse: collapse; }
.metingen-tabel th, .metingen-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px; text-align: left; }
.metingen-tabel .persoon-stip { margin-right: 4px; }

.lid-formulier { border-bottom: 1px dashed var(--line); padding-bottom: 14px; }
.lid-formulier:last-of-type { border-bottom: none; }
.lid-inactief { opacity: 0.55; }

/* grafiek */
.gewicht-grafiek { width: 100%; height: auto; display: block; }
.grafiek-raster { stroke: rgba(0,0,0,0.07); stroke-width: 1; }
.grafiek-aslabel { font-family: "IBM Plex Mono", monospace; font-size: 11px; fill: var(--muted); }
.grafiek-doellijn { stroke: var(--terracotta); stroke-width: 1.5; stroke-dasharray: 6 5; }
.grafiek-doellabel { font-family: "IBM Plex Mono", monospace; font-size: 11px; fill: var(--terracotta); }
.grafiek-leeg { color: var(--muted); font-size: 14px; }
.grafiek-filter { margin-bottom: 6px; }
.persoon-filter { border-color: var(--chip-kleur, var(--line)); }

.periode-keuze { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.periode-knop { padding: 6px 14px; font-size: 13px; cursor: pointer; background: transparent; }
.periode-knop + .periode-knop { border-left: 1px solid var(--line); }
.periode-knop.actief { background: var(--green); color: #fff; }

@media (max-width: 640px) {
  .gewicht-kaarten { grid-template-columns: 1fr; }
  .persoon-chip { padding: 10px 18px; }  /* dikkere duimdoelen op telefoon */
}

/* --- v2.17.0: gewichtstracking visueel verzorgder -------------------------
   Kaarten met zachte kleurwas en klikbaar naar de persoonspagina, vollere
   voortgangsbalk met percentage erin, mono-cijfers voor nette decimalen,
   maandkopjes in de historie, en meldingen die vanzelf wegfaden. */

.cijfer-mono { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }

.gewicht-kaart {
  border-top: none; position: relative; overflow: hidden;
}
.gewicht-kaart::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 64px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--persoon-kleur, var(--green)) 14%, transparent),
    transparent);
  pointer-events: none;
}
.gewicht-kaart-kop, .gewicht-huidig { position: relative; }
.gewicht-kaart-link { display: block; color: inherit; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.gewicht-kaart-link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.kaart-pijl { margin-left: auto; color: var(--muted); font-size: 20px; line-height: 1; }
.gewicht-getal { font-size: 38px; }
.gewicht-streefdatum { color: var(--muted); font-size: 12px; }

/* voortgangsbalk: voller, percentage erin */
.voortgangsbalk { height: 18px; border-radius: 9px; position: relative; }
.voortgangsbalk-vulling { border-radius: 9px; display: flex; align-items: center; justify-content: flex-end; }
.voortgangsbalk-pct {
  font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #fff;
  padding: 0 8px; white-space: nowrap;
}
.voortgangsbalk-pct.buiten { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--muted); padding: 0; }

/* meldingen faden vanzelf weg */
.gewicht-melding { animation: melding-weg 0.4s ease 4s forwards; }
@keyframes melding-weg { to { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; } }

/* persoonspagina */
.persoon-kop h1 { display: flex; align-items: center; gap: 12px; }
.persoon-stip.groot { width: 16px; height: 16px; background: var(--persoon-kleur, var(--green)); }
.persoon-indeling { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.maand-kop {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  margin: 18px 0 4px; color: var(--persoon-kleur, var(--ink));
}
.maand-kop:first-of-type { margin-top: 0; }

/* grafiek-extra's */
.grafiek-eindlabel { font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600; }

@media (max-width: 760px) {
  .persoon-indeling { grid-template-columns: 1fr; }
}

/* ===================================================================
   v2.18.0 — "Vers & Helder"

   Onderdelen die hun vorm hebben gekregen in het nieuwe ontwerp:
   de tabbalk op de telefoon, de begroeting op het dashboard, de
   maaltijdlabels in modulekleuren, en het bijgewerkte bonnetje.
   =================================================================== */

/* ---------------------------------------------------------------- tabbalk (telefoon) */

.tabbalk { display: none; }

@media (max-width: 860px) {
  .tabbalk {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    justify-content: space-around;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .tabbalk .tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 500; color: var(--muted);
    text-decoration: none; padding: 2px 8px; border-radius: 10px;
    flex: 1; min-width: 0;
  }
  .tabbalk .tab:hover { text-decoration: none; }
  .tabbalk .tab .lijn-icoon { width: 21px; height: 21px; }
  .tabbalk .tab span { white-space: nowrap; }
  .tabbalk .tab.active { color: var(--green-dark); font-weight: 600; }
  .tabbalk .tab.active .lijn-icoon { color: var(--green); }

  /* ruimte onder de pagina zodat de tabbalk niets afdekt */
  .main { padding-bottom: 92px; }
}

/* ---------------------------------------------------------------- begroeting op het dashboard */

.begroeting-datum {
  font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 5px;
}
.begroeting-regel { color: var(--muted); margin: 8px 0 0; max-width: 640px; }
.begroeting-regel .recept-link {
  color: var(--green-dark); font-weight: 600; text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(30, 158, 90, 0.35);
  transition: box-shadow 0.12s ease;
}
.begroeting-regel .recept-link:hover {
  text-decoration: none; box-shadow: inset 0 -2px 0 var(--green);
}

/* ---------------------------------------------------------------- weekoverzicht op het dashboard */

.week-lijst { display: flex; flex-direction: column; }
.week-rij {
  display: flex; gap: 16px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.week-rij:first-child { border-top: none; }
.week-dag {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  width: 92px; flex-shrink: 0; color: var(--muted);
}
.week-rij.vandaag .week-dag { color: var(--green-dark); }
.week-rij.vandaag .week-dag::after {
  content: "vandaag"; display: block;
  font-family: var(--font-body); font-weight: 500; font-size: 10.5px; color: var(--green);
}
.week-maaltijden { display: flex; flex-wrap: wrap; gap: 6px; }

/* Maaltijdlabel: het vakje ("Diner") in de modulekleur, de receptnaam
   in gewone tekst. De kleur wordt in de template gezet op basis van de
   naam van het vak, zodat ontbijt/lunch/diner uit elkaar te houden zijn. */
.maaltijd-tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px 5px 11px; font-size: 13.5px;
  background: #F6F9F5; color: var(--ink);
}
.maaltijd-tag .slot-label {
  font-family: var(--font-display); font-weight: 600; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  color: var(--muted);
}
.maaltijd-tag[data-moment="ontbijt"] { background: var(--mod-menu-tint); border-color: #F6DFCF; }
.maaltijd-tag[data-moment="ontbijt"] .slot-label { color: var(--mod-menu); }
.maaltijd-tag[data-moment="lunch"] { background: var(--mod-bood-tint); border-color: #D3E8E0; }
.maaltijd-tag[data-moment="lunch"] .slot-label { color: var(--mod-bood); }
.maaltijd-tag[data-moment="diner"] { background: var(--mod-product-tint); border-color: #D5E5F0; }
.maaltijd-tag[data-moment="diner"] .slot-label { color: var(--mod-product); }
.maaltijd-tag[data-moment="tussendoor"] { background: var(--mod-gewicht-tint); border-color: #DEDAF6; }
.maaltijd-tag[data-moment="tussendoor"] .slot-label { color: var(--mod-gewicht); }
.maaltijd-tag .tag-recipe-link { color: inherit; text-decoration: none; }
.maaltijd-tag .tag-recipe-link:hover { text-decoration: underline; }

/* Lege dag: een uitnodiging om te kiezen, geen mededeling. */
.week-leeg {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--muted); text-decoration: none;
  border: 1px dashed #D8E2D7; border-radius: 999px; padding: 5px 13px;
}
.week-leeg:hover { color: var(--green-dark); border-color: var(--green); text-decoration: none; }
.week-leeg .lijn-icoon { width: 13px; height: 13px; }

.week-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12px; color: var(--muted); margin: 10px 0 8px;
}
.week-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.week-legenda i { width: 8px; height: 8px; border-radius: 50%; }

@media (max-width: 860px) {
  .week-rij { flex-direction: column; gap: 7px; align-items: stretch; }
  .week-dag { width: auto; }
  .week-rij.vandaag .week-dag::after { display: inline; margin-left: 7px; }
}

/* ---------------------------------------------------------------- kaartkop met actie ernaast */

.kaart-kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.kaart-kop h2 { margin: 0; }
.kaart-kop a { font-size: 13.5px; font-weight: 600; color: var(--mod-menu); }
@media (max-width: 860px) {
  .kaart-kop { flex-direction: column; align-items: flex-start; gap: 3px; }
}

/* ---------------------------------------------------------------- vormtaal-correcties */

/* knoppen en velden volgen de zachtere ronding van de kaarten */
.btn { border-radius: 10px; }
.btn.small { border-radius: 8px; }
input[type="text"], input[type="number"], input[type="email"],
input[type="search"], input[type="password"], input[type="date"],
select, textarea { border-radius: 9px; }

/* het bonnetje houdt zijn eigen, rechtere vorm — dat hoort bij een kassabon */
.receipt { border-radius: 6px; }

/* iconen in knoppen en tabellen krijgen de juiste maat mee */
.btn .lijn-icoon { width: 15px; height: 15px; }
.icon-btn .lijn-icoon, .manual-delete .lijn-icoon { width: 15px; height: 15px; }
.drag-handle .lijn-icoon { width: 16px; height: 16px; }
.empty-state .icon .lijn-icoon { width: 30px; height: 30px; color: var(--muted); }
.receipt-head .store .lijn-icoon { width: 17px; height: 17px; vertical-align: -0.18em; }

/* het bolletje van de realtime-indicator */
.ws-status { color: var(--terracotta); transition: color 200ms ease; }
.ws-label { display: inline-flex; align-items: center; gap: 6px; }

/* het versienummer stond wit-op-donker in de oude zijbalk */
.app-version { color: var(--muted); }
.sidebar-extra-link { color: var(--muted); }

/* ---------------------------------------------------------------- foutpagina */

.fout-icoon {
  margin: 10px 0 6px; color: var(--muted);
  display: flex; justify-content: center;
}
.fout-icoon .lijn-icoon { width: 44px; height: 44px; stroke-width: 1.5; }

/* ---------------------------------------------------------------- inlogpagina */

.auth-brand { padding: 0 0 18px; font-size: 17px; }
.auth-card { border-radius: var(--radius); }

/* ---------------------------------------------------------------- zoekveld met icoon */

/* Het vergrootglas stond eerst als teken ín de placeholder. Dat kan niet meer
   nu het een inline SVG is (een icoon in een HTML-attribuut breekt de tag),
   dus staat het er als los element vóór het veld. */
.zoekveld { position: relative; flex: 1; max-width: 420px; display: flex; }
.zoekveld .zoek-icoon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; display: flex;
}
.zoekveld .zoek-icoon .lijn-icoon { width: 16px; height: 16px; }
.zoekveld input[type="search"] { padding-left: 38px; width: 100%; max-width: none; }
@media (max-width: 860px) { .zoekveld { max-width: none; } }

/* ---------------------------------------------------------------- boek-label in de receptenlijst */

/* Boeknamen zijn lang ("Op gewicht blijven e-book 8"). In een tabelcel werd
   zo'n label letter voor letter afgebroken tot een smalle kolom tekst. Het
   label blijft nu op één regel en krijgt zo nodig een beletselteken; de
   volledige naam staat in de tooltip en is doorzoekbaar. */
.book-tag {
  background: var(--green-light);
  max-width: 150px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}

/* ---------------------------------------------------------------- kaarten die zelf een link zijn */

/* Een hele kaart die één grote link is (dashboardtegel, gewichtkaart) moet
   bij aanwijzen oplichten, niet al zijn tekst onderstrepen. */
.kpi-link:hover, .kpi-link:focus-visible,
.gewicht-kaart-link:hover, .gewicht-kaart-link:focus-visible {
  text-decoration: none;
}
.kpi-link:hover *, .gewicht-kaart-link:hover * { text-decoration: none; }

/* ===================================================================
   v2.18.1 — receptentabel binnen de kaart + soepeler op de telefoon
   =================================================================== */

/* ---------------------------------------------------------------- tabel-scrollcontainer */

/* De receptentabel (9 kolommen) liep op smallere desktopvensters buiten de
   kaart. De tabel scrolt nu horizontaal bínnen de kaart als het echt niet
   past; de kaart zelf blijft altijd netjes binnen de pagina. */
.tabel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  /* Schaduwrandje aan de kant waar nog inhoud zit. De "local"-lagen dekken
     de schaduw af zodra je aan het begin of eind bent, dus het randje is
     alleen te zien als er écht iets te scrollen valt. */
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(28, 43, 33, 0.13), rgba(28, 43, 33, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 43, 33, 0.13), rgba(28, 43, 33, 0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tabel-scroll table { min-width: 720px; }

/* compactere cellen zodat de tabel op een normaal venster past zonder scroll */
#recipes-table th, #recipes-table td { padding: 10px 10px; }
#recipes-table th:first-child, #recipes-table td:first-child { padding-left: 16px; width: 52px; }
#recipes-table th:last-child, #recipes-table td:last-child { padding-right: 16px; }
#recipes-table .actie-cel { text-align: right; white-space: nowrap; }
#recipes-table .actie-cel .btn + .btn { margin-left: 6px; }

/* het mobiele tabel-gedrag uit de algemene regel geldt hier niet meer:
   de scrollcontainer regelt dit nu op elk formaat */
@media (max-width: 860px) {
  .tabel-scroll table { display: table; overflow: visible; }
  .tabel-scroll table thead, .tabel-scroll table tbody { display: table-header-group; width: auto; min-width: 0; }
  .tabel-scroll table tbody { display: table-row-group; }
}

/* ---------------------------------------------------------------- vlotter op de telefoon */

/* backdrop-filter (blur achter de tabbalk) bleek op telefoons merkbaar traag:
   elke scroll- en laadstap moet de achtergrond opnieuw vervagen. Een gewone
   witte balk oogt vrijwel hetzelfde en tekent in één keer. */
@media (max-width: 860px) {
  .tabbalk {
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 -1px 0 var(--line);
  }

  /* Grote, zachte schaduwen (24px blur) op elke kaart zijn mooi op een
     desktop maar duur om te tekenen op een telefoon — zeker met veel
     kaarten onder elkaar. Op kleine schermen volstaat een licht randje. */
  :root {
    --shadow: 0 1px 2px rgba(28, 43, 33, 0.06);
    --shadow-op: 0 2px 6px rgba(28, 43, 33, 0.10);
  }
}

/* ---------------------------------------------------------------- receptenlijst op de telefoon */

/* Een tabel met negen kolommen laat zich op een telefoon niet lezen: je zou
   voor elk recept heen en weer moeten schuiven. Elke rij wordt daarom een
   kaartje — dezelfde aanpak als bij de ingrediënten-bewerker. De tabel blijft
   een <table> in de HTML, zodat zoeken en sorteren (die op de rijen werken)
   onveranderd blijven werken.

   Indeling van het kaartje:

       ┌──────┬─────────────────┬───────────┐
       │      │ naam            │  knoppen  │
       │ foto ├─────────────────┼───────────┤
       │      │ categorieën     │  aan/uit  │
       │      ├─────────────────┼───────────┤
       │      │ boek            │  tijd     │
       └──────┴─────────────────┴───────────┘

   Alleen de beoordeling en het aantal personen vallen weg; die staan op de
   receptpagina zelf. */
@media (max-width: 640px) {
  .tabel-scroll { overflow: visible; background: none; border-radius: 0; }
  #recipes-table { min-width: 0; display: block; }
  #recipes-table thead { display: none; }
  #recipes-table tbody { display: block; }

  #recipes-table tr {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb naam acties"
      "thumb cats actief"
      "thumb boek tijd";
    align-items: center;
    gap: 5px 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  #recipes-table tr:last-child { border-bottom: none; }

  /* De cellen krijgen hier hun eigen plek in het raster. Belangrijk: de
     bredere desktopregels voor de eerste en laatste cel (met een eigen
     padding en breedte) moeten hier expliciet terug naar nul — anders schuift
     de foto over de receptnaam heen. */
  #recipes-table td,
  #recipes-table td:first-child,
  #recipes-table td:last-child {
    display: block; padding: 0; border: none; width: auto; min-width: 0;
  }

  #recipes-table td:nth-child(1) { grid-area: thumb; align-self: start; }
  #recipes-table td:nth-child(2) { grid-area: naam; }
  #recipes-table td:nth-child(3) { grid-area: boek; }        /* boek */
  #recipes-table td:nth-child(4) { grid-area: cats; }        /* categorieën */
  #recipes-table td:nth-child(5),                            /* beoordeling */
  #recipes-table td:nth-child(6) { display: none; }          /* personen */
  #recipes-table td:nth-child(7) {                           /* bereidingstijd */
    grid-area: tijd; justify-self: end; white-space: nowrap;
    font-size: 12.5px; color: var(--muted);
  }
  #recipes-table td:nth-child(8) { grid-area: actief; justify-self: end; }
  #recipes-table td.actie-cel { grid-area: acties; justify-self: end; }

  #recipes-table .recipe-thumb { width: 56px; height: 56px; border-radius: 9px; }
  #recipes-table td:nth-child(2) a { font-size: 15px; line-height: 1.35; }
  #recipes-table .book-tag { max-width: 100%; }
  /* categorieën netjes naast elkaar, desnoods op twee regels */
  #recipes-table td:nth-child(4) { display: flex; flex-wrap: wrap; gap: 4px; }
  #recipes-table td:nth-child(4) .tag { margin: 0; }
}

/* ---------------------------------------------------------------- sorteermenu */

/* Op een breed scherm sorteer je door op een kolomkop te tikken; dit menu is
   dan overbodig. Op de telefoon zijn die koppen er niet, dus verschijnt het. */
.sorteer-keuze { display: none; }

@media (max-width: 640px) {
  /* zoekveld op een eigen regel, daaronder sorteren en het aantal */
  .recipe-search-bar { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
  .recipe-search-bar .zoekveld { flex: 1 1 100%; }

  .sorteer-keuze { display: inline-flex; align-items: center; gap: 7px; flex: 1 1 auto; }
  .sorteer-label { font-size: 12.5px; color: var(--muted); font-weight: 500; white-space: nowrap; }
  .sorteer-keuze select {
    flex: 1; min-width: 0; padding: 8px 10px; font-size: 13.5px;
    background: var(--surface);
  }
  .recipe-count { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- instellingen: twee kolommen */

/* Stond als vaste `1fr 1fr` in de template, waardoor de twee kaarten op een
   telefoon naast elkaar bleven staan en de pagina 13px breder werd dan het
   scherm (die vervelende horizontale schuifruimte). Nu vallen ze onder
   elkaar zodra er geen ruimte meer is. */
.instellingen-kolommen {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

/* ---------------------------------------------------------------- boek- en categorielabels */

/* Boek en categorie zagen er allebei uit als een groen pilletje, waardoor je
   ze in een oogopslag niet uit elkaar hield. Het boek is nu neutraal (het is
   een herkomst, geen eigenschap) en de categorie krijgt dezelfde kleur als op
   het dashboard: ontbijt terracotta, lunch groen, diner blauw, tussendoor
   paars. Een eigen categorienaam blijft neutraal. */
.book-tag {
  background: #F6F9F5;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 500;
}
.cat-tag { background: #F1F5F0; color: var(--ink); }
.cat-tag[data-moment="ontbijt"]    { background: var(--mod-menu-tint);    color: var(--mod-menu); }
.cat-tag[data-moment="lunch"]      { background: var(--mod-bood-tint);    color: var(--mod-bood); }
.cat-tag[data-moment="diner"]      { background: var(--mod-product-tint); color: var(--mod-product); }
.cat-tag[data-moment="tussendoor"] { background: var(--mod-gewicht-tint); color: var(--mod-gewicht); }