:root {
  --chocolade: #4A3329; --kaneel: #8F5530; --karamel: #B5703F; --abrikoos: #E2B48C;
  --zand: #F1E6D8; --room: #FBF6EF; --taupe: #6E625C; --roze: #E8A0A8; --roze-licht: #FCEBED;
  --wit: #FFFFFF; --groen: #3F6B3A; --groen-licht: #EAF2E7; --rood: #A63D32; --rood-licht: #F8E6E3;
  --r: 16px;
  --kop: Georgia, "Times New Roman", serif;
  --tekst: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--room); color: var(--chocolade);
  font: 17px/1.5 var(--tekst);
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
a { color: var(--kaneel); }
h1, h2, h3 { font-family: var(--kop); font-weight: 700; line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
[hidden] { display: none !important; }
/* Onzichtbaar, maar wel leesbaar voor wachtwoordmanagers (gebruikersnaam bij het inloggen). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Kop en menu */
.kop {
  position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgba(251,246,239,.95);
  border-bottom: 1px solid var(--zand); backdrop-filter: blur(8px);
}
.kop-merk { display: flex; align-items: center; gap: 8px; font: 700 1.05rem var(--kop); }
.kop-merk img { width: 30px; height: 30px; border-radius: 50%; }
.kop-salon { font: 700 .72rem var(--tekst); letter-spacing: .1em; text-transform: uppercase; color: var(--karamel); }
.kop-titel { color: var(--taupe); font-size: .9rem; font-weight: 600; }
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--wit); border-top: 1px solid var(--zand); padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 9px;
  font-size: .72rem; font-weight: 700; color: var(--taupe); text-decoration: none;
}
.tabbar a .ic { font-size: 1.25rem; line-height: 1.2; }
.tabbar a.actief { color: var(--kaneel); }
.tabbar a.tab-plus .ic {
  background: var(--kaneel); color: var(--wit); border-radius: 50%; width: 34px; height: 34px;
  display: grid; place-items: center; font-size: 1.3rem; margin-top: -2px;
}

main { max-width: 760px; margin: 0 auto; padding: 16px; }
.laden { color: var(--taupe); text-align: center; padding: 40px 0; }

/* Bouwstenen */
.kaart { background: var(--wit); border-radius: var(--r); padding: 14px 16px; border: 1px solid var(--zand); margin-bottom: 10px; }
a.kaart { display: block; color: inherit; text-decoration: none; }
a.kaart:active { background: var(--roze-licht); }
.rij { display: flex; gap: 12px; align-items: center; }
.rij.tussen { justify-content: space-between; }
.rij.wrap { flex-wrap: wrap; }
.groei { flex: 1; min-width: 0; }
.sub { color: var(--taupe); font-size: .88rem; }
.klein { font-size: .85rem; }
.vet { font-weight: 700; }
.leeg { color: var(--taupe); font-style: italic; padding: 6px 2px 14px; }
.sectie { margin-top: 22px; }
.sectie > h2 { margin-bottom: 10px; }
.label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kaneel); margin-bottom: 4px; }

.chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.chip.gepland { background: var(--zand); color: var(--chocolade); }
.chip.afgerond { background: var(--groen-licht); color: var(--groen); }
.chip.geannuleerd, .chip.no-show { background: var(--rood-licht); color: var(--rood); }
.chip.betaald { background: var(--groen-licht); color: var(--groen); }
.chip.open { background: var(--roze-licht); color: var(--rood); }
.chip.maat { background: var(--room); color: var(--taupe); border: 1px solid var(--zand); }

.waarschuwing { background: var(--roze-licht); border: 1px solid var(--roze); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid transparent;
  border-radius: 999px; padding: 11px 18px; font: 700 1rem var(--tekst); cursor: pointer; text-decoration: none;
  background: var(--kaneel); color: var(--wit); min-height: 46px;
}
.knop:active { transform: scale(.98); }
.knop.licht { background: var(--wit); color: var(--kaneel); border-color: var(--kaneel); }
.knop.zacht { background: var(--zand); color: var(--chocolade); }
.knop.wa { background: var(--chocolade); color: var(--room); }
.knop.gevaar { background: var(--wit); color: var(--rood); border-color: var(--rood-licht); }
.knop.klein { padding: 7px 13px; min-height: 36px; font-size: .9rem; }
.knop.breed { width: 100%; }
.knop[disabled] { opacity: .5; }
.knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.knoppen.vol > * { flex: 1 1 140px; }

/* Formulieren */
form .veld { margin-bottom: 12px; }
label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
input, select, textarea {
  width: 100%; font: 17px var(--tekst); color: var(--chocolade); background: var(--wit);
  border: 1.5px solid var(--zand); border-radius: 12px; padding: 11px 12px; min-height: 46px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--karamel); box-shadow: 0 0 0 3px rgba(181,112,63,.18); }
.velden-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.velden-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.vink { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.vink input { width: 22px; height: 22px; min-height: 0; }
.keuzes { display: flex; gap: 8px; flex-wrap: wrap; }
.keuzes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuzes label {
  margin: 0; border: 1.5px solid var(--zand); background: var(--wit); border-radius: 999px; padding: 9px 16px;
  font-weight: 700; cursor: pointer;
}
.keuzes input:checked + label { background: var(--kaneel); color: var(--wit); border-color: var(--kaneel); }
details.uitklap { background: var(--wit); border: 1px solid var(--zand); border-radius: var(--r); padding: 12px 16px; margin-top: 12px; }
details.uitklap summary { font-weight: 800; cursor: pointer; color: var(--kaneel); }
details.uitklap[open] summary { margin-bottom: 12px; }

/* Agenda */
.weeknav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.weeknav h1 { margin: 0; font-size: 1.3rem; text-align: center; }
.dag { margin-bottom: 16px; }
.dag-kop { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 6px; }
.dag-kop h2 { margin: 0; font-size: 1.05rem; }
.dag.vandaag .dag-kop h2 { color: var(--kaneel); }
.dag.vandaag .dag-kop h2::after { content: " · vandaag"; font-family: var(--tekst); font-size: .8rem; color: var(--roze); }
a.kaart.afspraak { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; }
.afspraak .tijd { font: 700 1.05rem var(--kop); color: var(--kaneel); }
.afspraak.geannuleerd .groei, .afspraak.no-show .groei { opacity: .55; text-decoration: line-through; }
.dag-plus { font-size: .85rem; font-weight: 700; text-decoration: none; }

/* Lijst */
.zoek { position: sticky; top: 62px; z-index: 5; background: var(--room); padding: 4px 0 10px; }

/* Geld */
.cijfer { font: 700 2rem var(--kop); color: var(--kaneel); }
.tabel { width: 100%; border-collapse: collapse; }
.tabel td { padding: 8px 4px; border-bottom: 1px solid var(--zand); }
.tabel td:last-child { text-align: right; font-weight: 700; }

/* Inloggen */
.login { max-width: 380px; margin: 40px auto; text-align: center; }
.login img { width: 110px; height: 110px; border-radius: 50%; margin-bottom: 12px; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 20;
  background: var(--chocolade); color: var(--room); padding: 11px 18px; border-radius: 14px; font-weight: 700;
  max-width: 90vw; text-align: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
}
.toast.fout { background: var(--rood); }

@media (min-width: 700px) {
  main { padding: 24px; }
}