:root{--teal:#117C70;--tealdk:#0C5952;--txt:#233B42;--grey:#6B797E;--line:#D4E2DF;--zebra:#EAF3F1;--rood:#9A0000;--geel:#FFF3C4}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--txt);background:#F7FAF9}
header{background:var(--teal);color:#fff;padding:14px 16px;border-bottom:6px solid var(--tealdk)}
header h1{margin:0;font-size:17px;letter-spacing:.2px}
header p{margin:2px 0 0;font-size:13px;opacity:.9}
main{max-width:720px;margin:0 auto;padding:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
h2{font-size:15px;color:var(--tealdk);margin:0 0 10px}
button,.btn{display:block;width:100%;padding:15px;font-size:16px;font-weight:600;border:0;border-radius:10px;
  background:var(--teal);color:#fff;cursor:pointer;text-align:center;text-decoration:none;margin-bottom:10px}
button.secondair,.btn.secondair{background:#fff;color:var(--tealdk);border:1.5px solid var(--teal)}
button:disabled{background:#9DB8B4;cursor:not-allowed}
input,textarea,select{width:100%;padding:12px;font-size:16px;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;font-family:inherit}
label{font-size:13px;color:var(--grey);display:block;margin-bottom:4px}
.ronde{margin-bottom:8px}
.ronde h3{font-size:14px;background:var(--tealdk);color:#fff;margin:0;padding:9px 12px;border-radius:8px 8px 0 0}
.ronde .items{border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;overflow:hidden}
.taak{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--line);background:#fff;align-items:flex-start}
.taak:nth-child(even){background:var(--zebra)}
.taak:last-child{border-bottom:0}
.taak input[type=checkbox]{width:26px;height:26px;margin:0;flex:0 0 26px;accent-color:var(--teal)}
.taak .tekst{flex:1}
.taak .ruimte{font-weight:700;font-size:14px}
.taak .oms{font-size:14px}
.taak .toel{font-size:12px;color:var(--grey)}
.taak.klaar .tekst{opacity:.45;text-decoration:line-through}
.open{background:#FFF8E1;border:1px solid #E6C76B;border-radius:10px;padding:12px;margin-bottom:14px}
.open h2{color:#8A6100}
.open li{margin-bottom:6px;font-size:14px}
.voortgang{font-size:13px;color:var(--grey);margin-bottom:10px}
.balk{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-bottom:12px}
.balk i{display:block;height:100%;background:var(--teal);width:0;transition:width .2s}
.fout{color:var(--rood);font-size:14px;margin-bottom:10px}
.ok{color:var(--tealdk);font-weight:600}
.klein{font-size:12px;color:var(--grey)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--teal);color:#fff;font-size:13px}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;background:var(--zebra);color:var(--tealdk)}
.tag.rood{background:#FDECEA;color:var(--rood)}
footer{text-align:center;font-size:12px;color:var(--grey);padding:20px}

/* takenlijst voor de klant */
.telling{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:15px}
.telling .klein{display:block;margin-top:2px}
details.ronde{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
details.ronde summary{display:flex;align-items:center;gap:10px;padding:14px;cursor:pointer;list-style:none;
  font-weight:700;font-size:15px;color:var(--tealdk)}
details.ronde summary::-webkit-details-marker{display:none}
details.ronde summary::after{content:"›";margin-left:auto;font-size:22px;color:var(--teal);
  transform:rotate(90deg);transition:transform .15s}
details.ronde[open] summary::after{transform:rotate(-90deg)}
.rnr{flex:0 0 26px;height:26px;border-radius:13px;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px}
.rnaam{flex:0 1 auto}
.badge{font-size:11px;font-weight:600;color:var(--tealdk);background:var(--zebra);
  border-radius:10px;padding:3px 9px}
details.ronde .items{border-top:1px solid var(--line)}
.groep{padding:12px 14px;border-bottom:1px solid var(--line)}
.groep:last-child{border-bottom:0}
.groep-kop{display:flex;gap:8px;align-items:baseline}
.aantal{flex:0 0 auto;font-weight:700;color:var(--teal);font-size:15px;min-width:30px}
.groep-kop .oms{font-size:15px;font-weight:600}
.ruimtes{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 0 38px}
.chip{font-size:12px;background:var(--zebra);color:var(--tealdk);border-radius:9px;padding:3px 8px}
.groep .toel{font-size:12px;color:var(--grey);margin:6px 0 0 38px}

/* afvinkscherm: één vinkje per taaksoort, met aantal en ruimtes erbij */
.groep-taak{border-bottom:1px solid var(--line);background:#fff}
.groep-taak:last-child{border-bottom:0}
.groep-taak.klaar{background:var(--zebra)}
.groep-taak .taak{border-bottom:0}
.groep-taak .oms{display:block;font-size:15px;font-weight:600}
.groep-taak .aantal{display:inline-block;min-width:32px;color:var(--teal);font-weight:700}
.groep-taak.klaar > .taak .tekst{opacity:.5}
.groep-taak .ruimtes{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.groep-taak .chip{font-size:12px;background:#F2F5F4;color:var(--grey);border-radius:9px;padding:3px 8px;
  border:1px solid var(--line)}
.groep-taak .chip.chip-ok{background:var(--zebra);color:var(--tealdk);border-color:var(--teal)}
.groep-taak .toel{display:block;font-size:12px;color:var(--grey);margin-top:6px}
button.perruimte{width:auto;display:block;margin:0 0 10px 50px;padding:7px 12px;font-size:12px;
  background:#fff;color:var(--tealdk);border:1px solid var(--line);border-radius:8px;font-weight:600}
.groep-taak .sub{margin:0 0 10px 38px;border-left:2px solid var(--line)}
.groep-taak .sub .taak{padding:9px 12px;background:transparent;border-bottom:1px solid var(--line)}
.groep-taak .sub .taak:last-child{border-bottom:0}
.groep-taak .sub .oms{font-weight:500;font-size:14px}
#opslagfout{background:#FDECEA;border:1px solid #E0A9A2;border-radius:10px;padding:11px;margin-bottom:12px}

/* briefing */
.briefblok{border-radius:12px;padding:14px;margin-bottom:12px;border:1px solid}
.briefblok h2{margin:0 0 8px;font-size:14px}
.briefblok ul{margin:0;padding-left:18px}
.briefblok li{margin-bottom:6px;font-size:14px}
.briefblok p{margin:0;font-size:14px}
.briefblok.geel{background:#FFF8E1;border-color:#E6C76B}
.briefblok.geel h2{color:#8A6100}
.briefblok.blauw{background:#EAF1F6;border-color:#A8C3D6}
.briefblok.blauw h2{color:#1F4E6B}
.briefblok.groen{background:var(--zebra);border-color:var(--teal)}
.briefblok.groen h2{color:var(--tealdk)}