:root {
  --grond: #FAF8F5;
  --kaart: #FFFFFF;
  --inkt: #1C1B19;
  --grijs: #6B635C;
  --licht: #8A8078;
  --lijn: #E7E0D7;
  --lijn-sterk: #D8CFC2;
  --accent: #7B3F00;
  --accent-zacht: #F6F1EA;
  --goed: #4C6B3C;
  --let-op: #A4603A;
  --fout: #A4403A;
  --veilig-onder: env(safe-area-inset-bottom, 0px);
  --veilig-boven: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--grond); color: var(--inkt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.45;
  overscroll-behavior-y: none;
}

#app { min-height: 100%; padding-bottom: calc(76px + var(--veilig-onder)); }

.scherm { padding: calc(16px + var(--veilig-boven)) 20px 16px 20px; }

h1 { font-size: 26px; font-weight: 600; margin: 0; line-height: 1.1; }
h2 { font-size: 17px; font-weight: 600; margin: 0; }
.kop-klein { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--licht); }
.zacht { color: var(--grijs); font-size: 13px; }
.mini { font-size: 11px; color: var(--licht); }
.cijfer { font-variant-numeric: tabular-nums; }

.rij { display: flex; align-items: center; gap: 12px; }
.tussen { justify-content: space-between; }
.kolom { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.groei { flex: 1 1 auto; min-width: 0; }
.stapel { display: flex; flex-direction: column; gap: 10px; }
.afkap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kaart {
  background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: 16px; padding: 16px;
}
.kaart.aan { background: var(--accent-zacht); border-color: var(--lijn-sterk); }
.kaart.donker { background: #1C1B19; color: var(--grond); border-color: #1C1B19; }
.kaart.donker .mini, .kaart.donker .zacht { color: #A9A199; }

/* ---------------------------------------------------------- dagtotalen */
.totaal-getal { font-size: 40px; font-weight: 600; line-height: 1; }
.balk { height: 10px; border-radius: 999px; background: #EFE9E1; overflow: hidden; }
.balk > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .25s ease; }
.balk.dun { height: 6px; }
.balk.over > span { background: var(--fout); }
.balk.gehaald > span { background: var(--goed); }
.macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* ---------------------------------------------------------- knoppen */
button, .knop {
  font: inherit; color: inherit; border: 0; background: none;
  cursor: pointer; border-radius: 12px;
}
.knop-hoofd {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; border-radius: 14px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 15px;
  text-decoration: none;
}
.knop-hoofd[disabled] { background: #C6BEB5; }
.knop-rand {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px; border-radius: 14px;
  background: var(--kaart); border: 1px solid var(--lijn-sterk);
  font-weight: 600; font-size: 15px; text-decoration: none; color: var(--inkt);
}
.vink {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1.5px solid var(--lijn-sterk); background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.vink.aan { background: var(--accent); border-color: var(--accent); }
.vink svg { stroke: #fff; }
.icoonknop {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: #F3EEE7; display: flex; align-items: center; justify-content: center;
}

.schakel { display: flex; background: #EFE9E1; border-radius: 999px; padding: 3px; }
.schakel button { flex: 1; padding: 8px 14px; font-size: 13px; border-radius: 999px; color: var(--grijs); }
.schakel button.aan { background: #fff; color: var(--inkt); font-weight: 500; box-shadow: 0 1px 2px rgba(28,27,25,.1); }

/* ---------------------------------------------------------- lijsten */
.maaltijd { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--lijn); border-radius: 14px; background: var(--kaart); }
.maaltijd.op { background: var(--accent-zacht); border-color: var(--lijn-sterk); }
.maaltijd a { text-decoration: none; color: inherit; }

.tabelkop { display: flex; gap: 6px; padding-bottom: 7px; border-bottom: 1.5px solid var(--lijn-sterk); align-items: flex-end; }
.ingredient { display: flex; gap: 6px; padding: 9px 0; border-bottom: 1px solid #EDE7DE; align-items: baseline; }
.getalkolom { flex: none; width: 52px; text-align: right; font-size: 13px; color: var(--grijs); }
.getalkolom.samen { width: 60px; color: var(--inkt); font-weight: 600; }

.boodschap { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EDE7DE; }
.boodschap.af .naam { text-decoration: line-through; color: #B3ABA3; }
.boodschap a { font-size: 12px; color: #0B5FA5; text-decoration: none; flex: none; }

/* ---------------------------------------------------------- navigatie */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--kaart); border-top: 1px solid var(--lijn);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 8px calc(6px + var(--veilig-onder)) 8px;
}
.nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0; text-decoration: none; color: var(--licht); font-size: 11px;
}
.nav a.aan { color: var(--accent); font-weight: 500; }

/* ---------------------------------------------------------- blad en melding */
/* Het hidden-attribuut moet winnen van de display-regels hieronder. */
.blad[hidden], .melding[hidden] { display: none; }

.blad {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(28,27,25,.45);
  display: flex; align-items: flex-end;
}
.blad-inhoud {
  width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--grond); border-radius: 20px 20px 0 0;
  padding: 18px 20px calc(20px + var(--veilig-onder)) 20px;
  animation: omhoog .22s ease;
}
@keyframes omhoog { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
.greep { width: 40px; height: 4px; border-radius: 999px; background: var(--lijn-sterk); margin: 0 auto 12px auto; }

.melding {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(92px + var(--veilig-onder)); z-index: 60;
  background: #1C1B19; color: var(--grond);
  padding: 11px 16px; border-radius: 12px; font-size: 14px;
  max-width: calc(100% - 40px); box-shadow: 0 6px 20px rgba(28,27,25,.25);
}
.melding.fout { background: var(--fout); }

.optie { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border-radius: 14px; border: 1.5px solid var(--lijn); background: var(--kaart); }
.optie.aan { border-color: var(--accent); background: var(--accent-zacht); }
.bol { flex: none; width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--lijn-sterk); background: #fff; }
.optie.aan .bol { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px #fff; }

.veld {
  width: 100%; min-height: 48px; padding: 12px 14px; font: inherit;
  background: var(--kaart); border: 1px solid var(--lijn-sterk); border-radius: 12px;
}
label { font-size: 13px; color: var(--grijs); }

.leeg { text-align: center; color: var(--licht); padding: 40px 20px; font-size: 14px; }