/* Dagplan — stijlblad (geen build-stap) */

@font-face {
  font-family: "Bricolage";
  src: url("../fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --achtergrond: #EEF1F6;
  --vlak: #FFFFFF;
  --vlak-zacht: #F6F8FB;
  --inkt: #1C2333;
  --gedempt: #626B80;
  --lijn: #D6DCE6;
  --focus: #4A7CF0;
  --fout: #C8372D;
  --ok: #24855A;
  --schaduw: 0 12px 32px rgba(28, 35, 51, .14);

  --koraal: #F26B5B;
  --oranje: #F39A1F;
  --geel: #E2BA2E;
  --groen: #36A86C;
  --petrol: #1C95A3;
  --blauw: #4A7CF0;
  --paars: #8B5CF6;
  --roze: #E25A97;

  --display: "Bricolage", "Figtree", system-ui, sans-serif;
  --tekst: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-klein: 10px;
  --r-groot: 22px;
  --uur: 64px; /* hoogte van een uur in de tijdlijn */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-modus="licht"]) {
    --achtergrond: #10141C;
    --vlak: #1A202B;
    --vlak-zacht: #212835;
    --inkt: #E8ECF3;
    --gedempt: #98A1B4;
    --lijn: #2C3442;
    --focus: #7FA2FF;
    --fout: #FF7A6E;
    --ok: #5BD394;
    --schaduw: 0 12px 32px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-modus="donker"] {
  --achtergrond: #10141C;
  --vlak: #1A202B;
  --vlak-zacht: #212835;
  --inkt: #E8ECF3;
  --gedempt: #98A1B4;
  --lijn: #2C3442;
  --focus: #7FA2FF;
  --fout: #FF7A6E;
  --ok: #5BD394;
  --schaduw: 0 12px 32px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
:root[data-modus="licht"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.45;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.gedempt { color: var(--gedempt); }

/* ---------- knoppen & velden ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 44px; padding: 0 1.1em;
  border: 1px solid var(--lijn); border-radius: 999px;
  background: var(--vlak); color: var(--inkt);
  font-weight: 600; text-decoration: none; cursor: pointer;
}
.knop:hover { border-color: var(--gedempt); }
.knop.primair { background: var(--inkt); color: var(--vlak); border-color: var(--inkt); }
.knop.gevaar { color: var(--fout); }
.knop.tekst { border-color: transparent; background: none; padding: 0 .4em; }
.knop.klein { min-height: 36px; padding: 0 .9em; font-size: .9rem; }
.knop.breed { width: 100%; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=time],
input[type=number], input:not([type]), select, textarea {
  width: 100%; min-height: 44px; padding: .55em .8em;
  border: 1px solid var(--lijn); border-radius: var(--r-klein);
  background: var(--vlak-zacht);
}
textarea { resize: vertical; }
label { display: block; font-weight: 600; font-size: .92rem; }
label > input, label > select, label > textarea { margin-top: .35em; font-weight: 400; }

.melding { padding: .7em .9em; border-radius: var(--r-klein); margin: .8em 0; font-weight: 500; }
.melding.fout { background: color-mix(in srgb, var(--fout) 12%, transparent); color: var(--fout); }
.melding.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.melding.sleutel {
  background: var(--vlak-zacht); border: 2px dashed var(--inkt);
  font-variant-numeric: tabular-nums; word-break: break-word; user-select: all;
}

/* ---------- formulierpagina's (login, account, beheer) ---------- */
body.formpagina { min-height: 100dvh; display: grid; place-items: start center; padding: 6vh 16px 40px; }
.formkaart { width: 100%; max-width: 420px; background: var(--vlak); border-radius: var(--r-groot); padding: 28px 24px; box-shadow: var(--schaduw); }
.formkaart.breed { max-width: 860px; }
.formkaart h1 { font-size: 2rem; font-weight: 700; }
.formkaart h2 { margin-top: 1.6em; margin-bottom: .6em; }
.formkaart form label { margin-bottom: 1em; }
.merk { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.merk img { border-radius: 12px; }
.voetnoot { font-size: .9rem; color: var(--gedempt); margin-top: 1.4em; }
.terug { display: inline-block; margin-bottom: 1em; color: var(--gedempt); text-decoration: none; font-weight: 600; }
.rij-acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6em; }
.rij-acties form { margin: 0; }

.beheer .raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; align-items: end; }
.beheer .raster .knop { margin-bottom: 1em; }
.vinkje { display: flex !important; align-items: center; gap: .5em; min-height: 44px; }
.vinkje input { width: 20px; height: 20px; margin: 0; }
.gebruikerslijst { list-style: none; padding: 0; margin: 0; }
.gebruikerslijst li { padding: 14px 0; border-top: 1px solid var(--lijn); display: grid; gap: 10px; }
.gebruikerslijst li.inactief .wie { opacity: .6; }
.wie span.gedempt { display: block; font-size: .88rem; }
.label { display: inline-block; font-size: .78rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--vlak-zacht); border: 1px solid var(--lijn); margin-left: 4px; }
.label.rood { color: var(--fout); }
.acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.acties form { margin: 0; }
.verwijder summary { list-style: none; }
.verwijder summary::-webkit-details-marker { display: none; }
.verwijder[open] { flex-basis: 100%; }
.verwijder form { margin-top: 10px; padding: 12px; border-radius: var(--r-klein); background: var(--vlak-zacht); }

/* ---------- planner-indeling ---------- */
body.planner { overscroll-behavior-y: none; }
.app { min-height: 100dvh; }
.dagpaneel { max-width: 640px; margin: 0 auto; padding: 0 16px calc(120px + env(safe-area-inset-bottom)); }
.zijpaneel { display: none; }

.app[data-weergave="inbox"] .dagpaneel { display: none; }
.app[data-weergave="inbox"] .zijpaneel {
  display: block; max-width: 640px; margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom));
}

.kop {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 44px 1fr 44px 44px; align-items: center; gap: 4px;
  padding: calc(14px + env(safe-area-inset-top)) 0 8px;
  background: var(--achtergrond);
}
.kopdatum { min-width: 0; text-align: center; }
.kopdatum h1 {
  font-size: clamp(1.6rem, 6.5vw, 2.3rem); font-weight: 750;
  font-variation-settings: "wdth" 85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kopsub {
  border: 0; background: none; padding: 2px 8px; border-radius: 999px;
  color: var(--gedempt); font-weight: 600; font-size: .92rem; cursor: pointer;
}
.kopsub.knipoog { color: var(--focus); }
.pijl {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: none;
  font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--inkt);
}
.pijl:hover { background: var(--vlak); }
.profiel {
  width: 38px; height: 38px; border-radius: 50%; justify-self: end;
  display: grid; place-items: center; text-decoration: none;
  background: var(--inkt); color: var(--achtergrond); font-weight: 700;
}

.weekstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 6px 0 14px; }
.weekdag {
  display: grid; justify-items: center; gap: 2px;
  padding: 6px 0 8px; border: 0; border-radius: 16px; background: none; cursor: pointer;
}
.weekdag .letter { font-size: .78rem; color: var(--gedempt); font-weight: 600; }
.weekdag .nummer { font-size: 1.05rem; font-weight: 700; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; }
.weekdag.vandaag .nummer { box-shadow: inset 0 0 0 2px var(--inkt); }
.weekdag[aria-current="date"] { background: var(--vlak); }
.weekdag[aria-current="date"] .nummer { background: var(--inkt); color: var(--vlak); box-shadow: none; }
.stippen { display: flex; gap: 3px; height: 6px; }
.stippen i { width: 6px; height: 6px; border-radius: 50%; background: var(--k); }

/* ---------- tijdlijn ---------- */
.tijdlijn { position: relative; }
.sectiekop { font-size: .88rem; font-weight: 700; color: var(--gedempt); margin: 6px 0 8px; }

.losse-taken { display: grid; gap: 8px; margin-bottom: 18px; }

.item {
  --k: var(--blauw);
  position: relative;
  display: grid; grid-template-columns: 46px 52px 1fr 44px; align-items: start;
  column-gap: 8px;
}
.item .tijd { padding-top: 4px; text-align: right; font-size: .82rem; font-weight: 600; color: var(--gedempt); font-variant-numeric: tabular-nums; }
.item .spoor { position: relative; display: flex; justify-content: center; }
.capsule {
  position: relative; z-index: 1;
  width: 48px; min-height: 48px; height: var(--hoogte, 48px);
  border-radius: 24px; border: 0; padding: 0;
  display: grid; align-content: start; justify-items: center; padding-top: 11px;
  background: var(--k); color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer;
  box-shadow: 0 0 0 4px var(--achtergrond);
}
.item.klaar .capsule { background: color-mix(in srgb, var(--k) 30%, var(--vlak)); }
.item.bezig .capsule { box-shadow: 0 0 0 4px var(--achtergrond), 0 0 0 7px color-mix(in srgb, var(--k) 45%, transparent); }
.item .inhoud { min-width: 0; padding: 4px 0 18px; cursor: pointer; }
.item .meta { font-size: .85rem; color: var(--gedempt); font-variant-numeric: tabular-nums; }
.item .titel { font-weight: 650; font-size: 1.05rem; overflow-wrap: anywhere; }
.item.klaar .titel { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--gedempt); }
.item .herhaalteken { font-size: .8rem; margin-left: 4px; }

.vink {
  width: 32px; height: 32px; margin: 4px auto 0; border-radius: 50%;
  border: 2.5px solid var(--k); background: none; cursor: pointer; display: grid; place-items: center;
}
.vink::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid transparent; border-bottom: 2.5px solid transparent; transform: rotate(-45deg) translate(1px, -1px); }
.item.klaar .vink { background: var(--k); }
.item.klaar .vink::after { border-color: #fff; }
.vink.klein { width: 22px; height: 22px; border-width: 2px; margin: 0; flex: none; }
.vink.klein::after { width: 8px; height: 5px; border-width: 2px; }
.subtaak.klaar .vink.klein { background: var(--k); }
.subtaak.klaar .vink.klein::after { border-color: #fff; }

.subtaken { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
.subtaak { display: flex; align-items: center; gap: 8px; font-size: .93rem; }
.subtaak button.vink.klein { cursor: pointer; }
.subtaak.klaar span { text-decoration: line-through; color: var(--gedempt); }
.notitieteken { font-size: .85rem; color: var(--gedempt); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* verbindingslijn tussen opeenvolgende capsules */
.getimed { position: relative; }
.getimed::before {
  content: ""; position: absolute; top: 24px; bottom: 24px;
  left: calc(46px + 8px + 26px - 1.5px); width: 3px;
  background-image: linear-gradient(var(--lijn) 55%, transparent 0);
  background-size: 3px 10px;
}
.gat { display: grid; grid-template-columns: 46px 52px 1fr; column-gap: 8px; min-height: 36px; align-items: center; }
.gat .vrij { grid-column: 3; font-size: .85rem; color: var(--gedempt); padding: 4px 0; }
.gat.nu .vrij { color: var(--inkt); font-weight: 600; }
.gat.nu .spoor { display: flex; justify-content: center; }
.gat.nu .spoor::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--fout); position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--achtergrond); }
.nulijn { grid-column: 1; text-align: right; font-size: .82rem; font-weight: 700; color: var(--fout); }
.overlap { color: var(--fout) !important; }

.leeg {
  text-align: center; padding: 48px 16px; border: 2px dashed var(--lijn); border-radius: var(--r-groot);
}
.leeg p { margin: 0 0 14px; color: var(--gedempt); }
.laden { padding: 40px 0; text-align: center; color: var(--gedempt); }

/* ---------- inbox ---------- */
.zijkop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.zijkop h2 { font-size: 1.8rem; font-weight: 750; }
.zijuitleg { margin: 4px 0 14px; font-size: .92rem; }
.lijst { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.kaartje {
  --k: var(--blauw);
  display: grid; grid-template-columns: 40px 1fr 44px; gap: 10px; align-items: start;
  padding: 10px 10px 10px 12px; border-radius: 16px; background: var(--vlak);
}
.kaartje .bolletje { width: 40px; height: 40px; border-radius: 50%; background: var(--k); display: grid; place-items: center; font-size: 1.15rem; border: 0; cursor: pointer; }
.kaartje .tekst { min-width: 0; }
.kaartje .tekst strong { cursor: pointer; padding-top: 2px; }
.kaartje .vink { margin-top: 4px; }
.kaartje .tekst strong { display: block; overflow-wrap: anywhere; }
.kaartje .tekst span { font-size: .84rem; color: var(--gedempt); }
.kaartje.klaar strong { text-decoration: line-through; color: var(--gedempt); }
.kaartje .knoppen { display: flex; gap: 6px; margin-top: 8px; }
.leeg-inbox { color: var(--gedempt); font-size: .92rem; padding: 14px; border: 2px dashed var(--lijn); border-radius: 16px; text-align: center; }
.zijpaneel h3 { margin: 6px 0 10px; }

/* ---------- vaste knoppen ---------- */
.fab {
  position: fixed; z-index: 10; right: max(18px, env(safe-area-inset-right));
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: 50%; border: 0;
  background: var(--inkt); color: var(--vlak); font-size: 2rem; line-height: 1; cursor: pointer;
  box-shadow: var(--schaduw);
}
.onderbalk {
  position: fixed; z-index: 9; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--achtergrond) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--lijn);
}
.onderbalk button {
  min-height: 46px; border: 0; border-radius: 14px; background: none; font-weight: 700; color: var(--gedempt); cursor: pointer;
}
.onderbalk button[aria-pressed="true"] { background: var(--vlak); color: var(--inkt); }
.teller { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--inkt); color: var(--vlak); font-size: .78rem; }

/* ---------- taak-vel (dialoog) ---------- */
dialog { border: 0; padding: 0; color: var(--inkt); background: var(--vlak); }
dialog::backdrop { background: rgba(10, 14, 22, .45); }
dialog.vel {
  width: 100%; max-width: 560px; max-height: 92dvh;
  margin: auto auto 0; border-radius: var(--r-groot) var(--r-groot) 0 0;
  box-shadow: var(--schaduw);
}
dialog.vel[open] { animation: omhoog .22s ease-out; }
@keyframes omhoog { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.velkop {
  position: sticky; top: 0; z-index: 2; background: var(--vlak);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--lijn);
}
.velkop h2 { text-align: center; font-size: 1.05rem; }
.velinhoud { padding: 16px 18px calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 18px; }
.titelrij { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.icoonknop {
  --k: var(--blauw);
  width: 56px; height: 56px; border-radius: 28px; border: 0; background: var(--k); font-size: 1.6rem; cursor: pointer;
}
.titelinvoer { font-size: 1.25rem !important; font-weight: 650; border: 0 !important; background: none !important; padding-left: 0 !important; }
.titelinvoer:focus-visible { outline: none; box-shadow: 0 2px 0 var(--focus); border-radius: 0; }
.icoonraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; padding: 10px; border-radius: var(--r-klein); background: var(--vlak-zacht); }
.icoonraster button { height: 44px; border: 0; border-radius: 12px; background: none; font-size: 1.4rem; cursor: pointer; }
.icoonraster button[aria-pressed="true"] { background: var(--vlak); box-shadow: inset 0 0 0 2px var(--inkt); }
.kleuren { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kleuren label { position: relative; }
.kleuren input { position: absolute; opacity: 0; inset: 0; }
.kleuren span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--k); cursor: pointer; }
.kleuren input:checked + span { box-shadow: 0 0 0 3px var(--vlak), 0 0 0 5px var(--k); }
.kleuren input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 4px; }
.veld { display: grid; gap: 8px; }
.veldlabel { font-weight: 700; font-size: .9rem; }
.veldlabel output { font-weight: 500; color: var(--gedempt); margin-left: 6px; }
.veldengroep { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--vlak-zacht); }
.segment label { position: relative; text-align: center; font-size: .86rem; font-weight: 650; padding: 9px 4px; border-radius: 10px; cursor: pointer; color: var(--gedempt); }
.segment input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segment label:has(input:checked) { background: var(--vlak); color: var(--inkt); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.segment label:has(input:focus-visible) { outline: 3px solid var(--focus); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--lijn); background: none; font-weight: 600; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--inkt); color: var(--vlak); border-color: var(--inkt); }
.klein-invoer { max-width: 140px; }
.subtaakbewerker { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.subtaakbewerker li { display: grid; grid-template-columns: 1fr 40px; gap: 6px; }
.subtaakbewerker button { border: 0; background: none; font-size: 1.3rem; color: var(--gedempt); cursor: pointer; border-radius: 10px; }
.velvoet { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid var(--lijn); }
.velvoet .knop { margin-top: 12px; }

dialog.vraag { max-width: 380px; width: calc(100% - 32px); border-radius: var(--r-groot); padding: 22px; }
.vraag p { margin: 8px 0 18px; }
.vraagknoppen { display: grid; gap: 8px; }

.toast {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: calc(160px + env(safe-area-inset-bottom));
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px;
  background: var(--inkt); color: var(--vlak); font-weight: 600; box-shadow: var(--schaduw);
  display: flex; gap: 14px; align-items: center;
}
.toast button { border: 0; background: none; color: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 4px; }

/* ---------- desktop ---------- */
@media (min-width: 960px) {
  .app { display: grid; grid-template-columns: 340px 1fr; }
  .zijpaneel, .app[data-weergave="inbox"] .zijpaneel {
    display: block; position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    margin: 0; max-width: none;
    padding: 26px 20px 40px; border-right: 1px solid var(--lijn); background: var(--vlak-zacht);
  }
  .zijpaneel .kaartje { background: var(--vlak); }
  .app[data-weergave="inbox"] .dagpaneel { display: block; }
  .dagpaneel { width: 100%; padding-bottom: 80px; }
  .onderbalk { display: none; }
  .fab { bottom: 32px; right: 32px; }
  .toast { bottom: 40px; }
  dialog.vel { margin: auto; border-radius: var(--r-groot); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* kleurklassen voor taken */
.k-koraal { --k: var(--koraal); }
.k-oranje { --k: var(--oranje); }
.k-geel { --k: var(--geel); }
.k-groen { --k: var(--groen); }
.k-petrol { --k: var(--petrol); }
.k-blauw { --k: var(--blauw); }
.k-paars { --k: var(--paars); }
.k-roze { --k: var(--roze); }
#taaktitelkop:focus { outline: none; }

/* ======================================================================
   Persoonlijke weergave: achtergrondkleur (data-thema) en motief (data-motief)
   ====================================================================== */
[data-thema="mint"] { --achtergrond: #CDEFDD; }
[data-thema="lucht"] { --achtergrond: #CFE3FA; }
[data-thema="lavendel"] { --achtergrond: #DFD4FA; }
[data-thema="roze"] { --achtergrond: #F9D3E1; }
[data-thema="perzik"] { --achtergrond: #FDDCC4; }
[data-thema="zand"] { --achtergrond: #EEE3C7; }
[data-thema="salie"] { --achtergrond: #D5E5CB; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="licht"]) [data-thema="mint"] { --achtergrond: #0F2C21; }
  :root:not([data-modus="licht"]) [data-thema="lucht"] { --achtergrond: #0F2139; }
  :root:not([data-modus="licht"]) [data-thema="lavendel"] { --achtergrond: #231B3D; }
  :root:not([data-modus="licht"]) [data-thema="roze"] { --achtergrond: #361829; }
  :root:not([data-modus="licht"]) [data-thema="perzik"] { --achtergrond: #352110; }
  :root:not([data-modus="licht"]) [data-thema="zand"] { --achtergrond: #2B2517; }
  :root:not([data-modus="licht"]) [data-thema="salie"] { --achtergrond: #1B2C19; }
}
:root[data-modus="donker"] [data-thema="mint"] { --achtergrond: #0F2C21; }
:root[data-modus="donker"] [data-thema="lucht"] { --achtergrond: #0F2139; }
:root[data-modus="donker"] [data-thema="lavendel"] { --achtergrond: #231B3D; }
:root[data-modus="donker"] [data-thema="roze"] { --achtergrond: #361829; }
:root[data-modus="donker"] [data-thema="perzik"] { --achtergrond: #352110; }
:root[data-modus="donker"] [data-thema="zand"] { --achtergrond: #2B2517; }
:root[data-modus="donker"] [data-thema="salie"] { --achtergrond: #1B2C19; }

body { --motief: color-mix(in srgb, var(--inkt) 13%, transparent); }

[data-motief="stippen"]    { --motief-afb: radial-gradient(circle, #000 2.2px, transparent 2.8px); --motief-maat: 26px 26px; }
[data-motief="ruitjes"]    { --motief-afb: linear-gradient(#000 1.5px, transparent 1.5px), linear-gradient(90deg, #000 1.5px, transparent 1.5px); --motief-maat: 28px 28px; }
[data-motief="strepen"]    { --motief-afb: repeating-linear-gradient(-45deg, #000 0 3px, transparent 3px 16px); --motief-maat: auto; }
[data-motief="golfjes"]    { --motief-afb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M0 12 Q12 2 24 12 T48 12' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); --motief-maat: 48px 24px; }
[data-motief="sterretjes"] { --motief-afb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M20 8l2.6 6.4 6.9.5-5.3 4.5 1.7 6.7L20 22.4l-5.9 3.7 1.7-6.7-5.3-4.5 6.9-.5z'/%3E%3Cpath d='M60 46l1.8 4.4 4.7.3-3.6 3.1 1.1 4.6L60 55.9l-4 2.5 1.1-4.6-3.6-3.1 4.7-.3z'/%3E%3Ccircle cx='58' cy='14' r='1.8'/%3E%3Ccircle cx='16' cy='60' r='1.8'/%3E%3C/svg%3E"); --motief-maat: 80px 80px; }
[data-motief="bloemetjes"] { --motief-afb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg transform='translate(22 22)'%3E%3Ccircle cx='0' cy='-6' r='4.5'/%3E%3Ccircle cx='5.7' cy='-1.9' r='4.5'/%3E%3Ccircle cx='3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-5.7' cy='-1.9' r='4.5'/%3E%3C/g%3E%3Cg transform='translate(63 62) scale(.7)'%3E%3Ccircle cx='0' cy='-6' r='4.5'/%3E%3Ccircle cx='5.7' cy='-1.9' r='4.5'/%3E%3Ccircle cx='3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-3.5' cy='4.9' r='4.5'/%3E%3Ccircle cx='-5.7' cy='-1.9' r='4.5'/%3E%3C/g%3E%3C/svg%3E"); --motief-maat: 84px 84px; }
[data-motief="hartjes"]    { --motief-afb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M18 26c-6-4.6-10-8-10-12.4C8 10.4 10.4 8 13.4 8c2 0 3.6 1 4.6 2.6C19 9 20.6 8 22.6 8 25.6 8 28 10.4 28 13.6 28 18 24 21.4 18 26z'/%3E%3Cpath d='M54 62c-4.2-3.2-7-5.6-7-8.7 0-2.2 1.7-3.9 3.8-3.9 1.4 0 2.5.7 3.2 1.8.7-1.1 1.8-1.8 3.2-1.8 2.1 0 3.8 1.7 3.8 3.9 0 3.1-2.8 5.5-7 8.7z'/%3E%3C/svg%3E"); --motief-maat: 72px 72px; }

body { isolation: isolate; }
body::before, .tegel::before {
  content: ""; inset: 0; pointer-events: none;
  background-color: var(--motief);
  -webkit-mask-image: var(--motief-afb); mask-image: var(--motief-afb);
  -webkit-mask-size: var(--motief-maat); mask-size: var(--motief-maat);
}
body::before { position: fixed; z-index: -1; }
.tegel::before { position: absolute; }
body[data-motief="geen"]::before, .tegel[data-motief="geen"]::before { display: none; }
body[data-motief="confetti"]::before, .tegel[data-motief="confetti"]::before {
  background-color: transparent; -webkit-mask-image: none; mask-image: none; opacity: .55;
  background-size: 150px 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Crect x='14' y='18' width='10' height='4' rx='2' fill='%23F26B5B' transform='rotate(25 19 20)'/%3E%3Ccircle cx='70' cy='30' r='3' fill='%234A7CF0'/%3E%3Crect x='112' y='14' width='10' height='4' rx='2' fill='%23E2BA2E' transform='rotate(-30 117 16)'/%3E%3Ccircle cx='36' cy='78' r='2.6' fill='%2336A86C'/%3E%3Crect x='90' y='70' width='10' height='4' rx='2' fill='%238B5CF6' transform='rotate(60 95 72)'/%3E%3Ccircle cx='130' cy='96' r='3' fill='%23E25A97'/%3E%3Crect x='20' y='122' width='10' height='4' rx='2' fill='%231C95A3' transform='rotate(-15 25 124)'/%3E%3Ccircle cx='80' cy='128' r='2.6' fill='%23F39A1F'/%3E%3C/svg%3E");
}

/* kop laat het motief licht doorschemeren */
.kop { background: color-mix(in srgb, var(--achtergrond) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---------- accountpagina ---------- */
.account .blok { margin-top: 8px; }
.account form.smal { max-width: 420px; }
.tussenkop { margin: 1.4em 0 .6em; }
fieldset.themakeuze, fieldset.motiefkeuze { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
fieldset legend { font-weight: 700; font-size: .92rem; margin-bottom: 8px; padding: 0; }
.themakeuze { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.motiefkeuze { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
.themastaal, .motieftegel { position: relative; display: grid; justify-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.themastaal input, .motieftegel input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 1; margin: 0; }
.staal { width: 52px; height: 52px; border-radius: 50%; background: var(--achtergrond); border: 1px solid var(--lijn); }
.tegel { position: relative; overflow: hidden; width: 100%; height: 64px; border-radius: 14px; background: var(--achtergrond); border: 1px solid var(--lijn); }
.staalnaam { font-size: .82rem; color: var(--gedempt); }
.themastaal input:checked ~ .staal, .motieftegel input:checked ~ .tegel { box-shadow: 0 0 0 3px var(--vlak), 0 0 0 5px var(--inkt); }
.themastaal input:checked ~ .staalnaam, .motieftegel input:checked ~ .staalnaam { color: var(--inkt); }
.themastaal input:focus-visible ~ .staal, .motieftegel input:focus-visible ~ .tegel { outline: 3px solid var(--focus); outline-offset: 5px; }
.toestellijst { list-style: none; padding: 0; margin: 0; }
.toestellijst li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--lijn); }
.toestellijst span.gedempt { display: block; font-size: .86rem; }
.toestellijst form { margin: 0; }

/* ---------- pincodescherm ---------- */
.pinkaart { text-align: center; max-width: 380px; }
.pinavatar { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--inkt); color: var(--vlak); font-family: var(--display); font-size: 1.8rem; font-weight: 700; }
.pinkaart h1 { font-size: 1.7rem; }
.pinkaart .melding { text-align: left; }
.met-klavier .pinveld { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pinbolletjes { display: flex; justify-content: center; gap: 14px; min-height: 18px; margin: 22px 0 24px; }
.pinbolletjes i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--inkt); }
.pinbolletjes i.vol { background: var(--inkt); }
.pinbolletjes.schud { animation: schud .35s; }
@keyframes schud { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pinklavier { display: grid; grid-template-columns: repeat(3, 72px); justify-content: center; gap: 14px 22px; margin-bottom: 18px; }
.pinklavier button { width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--vlak-zacht); font-size: 1.6rem; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.pinklavier button:active { background: var(--lijn); }
.pinklavier button[data-wis] { background: none; font-size: 1.4rem; }
.met-klavier:not([data-lengte=""]) .pinverzend { display: none; }
.pinlinks { display: grid; gap: 8px; margin-top: 18px; font-size: .9rem; }
.pinlinks a, .linkknop { color: var(--gedempt); font-weight: 600; }
.pinlinks form { margin: 0; }
.linkknop { background: none; border: 0; padding: 4px; text-decoration: underline; cursor: pointer; font-size: .9rem; }

/* ---------- groet, voortgang & reeks ---------- */
.groet { margin: -4px 0 16px; padding: 14px 16px; border-radius: 18px; background: var(--vlak); }
.groettekst { margin: 0 0 10px; font-family: var(--display); font-size: 1.12rem; font-weight: 650; line-height: 1.3; }
.voortgang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.voortgang .balk { flex: 1 1 140px; height: 10px; border-radius: 999px; background: var(--vlak-zacht); overflow: hidden; }
.voortgang .balk span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--groen); transition: width .4s ease; }
.voortgang .balk.vol span { background: linear-gradient(90deg, var(--groen), var(--petrol), var(--blauw)); }
.voortgangtekst { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--gedempt); }
.reeks { font-weight: 700; font-size: .88rem; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--oranje) 18%, transparent); }

/* ---------- vinkje met pop ---------- */
.item.pop .vink { animation: vinkpop .45s cubic-bezier(.3, 1.6, .5, 1); }
.item.pop .capsule { animation: capsulepop .5s ease-out; }
@keyframes vinkpop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes capsulepop { 0% { box-shadow: 0 0 0 4px var(--achtergrond), 0 0 0 4px color-mix(in srgb, var(--k) 60%, transparent); }
  100% { box-shadow: 0 0 0 4px var(--achtergrond), 0 0 0 18px transparent; } }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }

/* ---------- emoji-kiezer ---------- */
.icoonkiezer { display: grid; gap: 10px; padding: 10px; border-radius: var(--r-klein); background: var(--vlak-zacht); }
.icoontabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.icoontabs button { flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--lijn); background: var(--vlak); font-weight: 600; font-size: .86rem; cursor: pointer; white-space: nowrap; }
.icoontabs button[aria-selected="true"] { background: var(--inkt); color: var(--vlak); border-color: var(--inkt); }
.icoonkiezer .icoonraster { padding: 0; background: none; max-height: 220px; overflow-y: auto; }
.eigenicoon { font-size: .86rem; }
.eigenicoon input { max-width: 160px; font-size: 1.3rem; }

/* ---------- herhaling ---------- */
.intervalrij { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.intervalrij input { max-width: 90px; }
.weekdagchips button { min-width: 46px; }

/* ---------- herhalen: zichtbare keuzes ---------- */
.herhaalblok { padding: 14px; border-radius: 16px; background: var(--vlak-zacht); }
.keuzechips { display: flex; flex-wrap: wrap; gap: 6px; }
.keuzechips label { position: relative; font-weight: 600; font-size: .9rem; }
.keuzechips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.keuzechips span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--lijn); background: var(--vlak); cursor: pointer; }
.keuzechips input:checked + span { background: var(--inkt); color: var(--vlak); border-color: var(--inkt); }
.keuzechips input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.herhaaldetails { display: grid; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.herhaaldetails .chips button { background: var(--vlak); }
.herhaaldetails .chips button[aria-pressed="true"] { background: var(--inkt); }
.herhaaldetails input[type=date], .herhaaldetails input[type=number] { background: var(--vlak); }