:root{
  --bg:#f4f6f5;
  --surface:#ffffff;
  --surface-2:#f8f9fa;
  --ink:#1c2422;
  --muted:#66756f;
  --border:#e3e8e6;
  --accent:#0f8a5f;
  --accent-ink:#ffffff;
  --accent-soft:#e5f5ee;
  --danger:#d9483a;
  --danger-soft:#fbe9e7;
  --warn:#c97a1a;
  --warn-soft:#fdf1e0;
  --info:#1f7a8c;
  --info-soft:#e2eff1;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(20,30,25,.04), 0 6px 20px rgba(20,30,25,.05);
  --bg-glow:none;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131c18; --surface:#1c2722; --surface-2:#24322b; --ink:#eef4f0; --muted:#a2b5ab;
    --border:#33453c; --accent:#3ccf8e; --accent-ink:#06140d; --accent-soft:#1a3d2e;
    --danger:#f27567; --danger-soft:#402624; --warn:#ecb34c; --warn-soft:#3d3019;
    --info:#5ec6da; --info-soft:#183a42;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.4);
    --bg-glow:radial-gradient(1100px 520px at 50% -180px, rgba(60,207,142,.13), transparent 70%);
  }
}
:root[data-theme="dark"]{
  --bg:#131c18; --surface:#1c2722; --surface-2:#24322b; --ink:#eef4f0; --muted:#a2b5ab;
  --border:#33453c; --accent:#3ccf8e; --accent-ink:#06140d; --accent-soft:#1a3d2e;
  --danger:#f27567; --danger-soft:#402624; --warn:#ecb34c; --warn-soft:#3d3019;
  --info:#5ec6da; --info-soft:#183a42;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.4);
  --bg-glow:radial-gradient(1100px 520px at 50% -180px, rgba(60,207,142,.13), transparent 70%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-glow) no-repeat, var(--bg); color:var(--ink); font-family:var(--font);
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:inherit; text-decoration:none}
.icon{width:1.15em; height:1.15em; vertical-align:-0.2em; flex-shrink:0}

/* ---------- App bar ---------- */
.appbar{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--border); padding:.7rem 1rem;
}
.appbar-row{display:flex; align-items:center; gap:.75rem; max-width:1100px; margin:0 auto}
.appbar-back{
  width:2.5rem; height:2.5rem; border-radius:999px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); flex-shrink:0;
}
.appbar-back:hover{background:var(--surface-2)}
.appbar-title{font-weight:800; font-size:1.05rem; flex:1; min-width:0}
.appbar-title small{display:block; font-weight:600; font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.appbar-title .truncate{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.navbar{
  background:var(--surface); border-bottom:1px solid var(--border);
}
.navbar-row{
  max-width:1100px; margin:0 auto; display:flex; gap:.25rem; padding:0 .5rem; overflow-x:auto;
}
.navlink{
  padding:.85rem 1rem; font-weight:700; font-size:.92rem; color:var(--muted);
  border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:.4rem;
}
.navlink:hover{color:var(--ink)}
.navlink.active{color:var(--accent); border-bottom-color:var(--accent)}

.userchip{
  display:flex; align-items:center; gap:.5rem; flex-shrink:0;
}
.userchip .name{font-size:.8rem; font-weight:700; color:var(--muted); display:none}
@media(min-width:560px){ .userchip .name{display:inline} }
.iconbtn{
  width:2.5rem; height:2.5rem; border-radius:999px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); background:transparent; border:none; cursor:pointer;
}
.iconbtn:hover{background:var(--surface-2); color:var(--ink)}
.iconbtn.danger:hover{background:var(--danger-soft); color:var(--danger)}

main{flex:1; width:100%; max-width:1100px; margin:0 auto; padding:1.1rem 1rem 3rem}

.footer{
  text-align:center; padding:1.5rem; color:var(--muted); font-size:.75rem; opacity:.8;
}
.footer b{color:var(--muted); letter-spacing:.05em}

/* ---------- Building blocks ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-pad{padding:1.25rem}
.section-title{font-weight:800; font-size:1.1rem; margin:0 0 .9rem; display:flex; align-items:center; gap:.5rem}
.section-title .icon{color:var(--accent)}

.grid{display:grid; gap:1rem}
.grid.cols-2{grid-template-columns:repeat(auto-fill, minmax(220px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fill, minmax(230px,1fr))}

.loc-card{
  display:flex; flex-direction:column; gap:.4rem; padding:1.1rem 1.2rem; text-align:left;
}
.loc-card .top{display:flex; justify-content:space-between; align-items:flex-start}
.loc-card .name{font-weight:800; font-size:1.1rem}
.loc-card .meta{color:var(--muted); font-size:.82rem}
.loc-card:hover{border-color:var(--accent)}
.loc-card .chev{color:var(--border); transition:transform .15s}
.loc-card:hover .chev{color:var(--accent); transform:translateX(2px)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; border-radius:var(--radius-sm); border:1px solid transparent;
  padding:.7rem 1.1rem; cursor:pointer; font-size:.92rem; font-family:inherit;
}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-outline{background:var(--surface); border-color:var(--border); color:var(--ink)}
.btn-outline:hover{background:var(--surface-2)}
.btn-danger{background:var(--danger-soft); color:var(--danger)}
.btn-danger:hover{filter:brightness(.97)}
.btn-sm{padding:.45rem .7rem; font-size:.82rem; border-radius:8px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5; cursor:default}

.field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem}
.field label{font-size:.72rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.input, select.input, textarea.input{
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink);
  border-radius:var(--radius-sm); padding:.7rem .8rem; font-size:.95rem; font-family:inherit; width:100%;
}
.input:focus, select.input:focus, textarea.input:focus{outline:2px solid var(--accent); outline-offset:1px}
.check-row{display:flex; flex-wrap:wrap; gap:.5rem}
.check-pill{
  display:flex; align-items:center; gap:.4rem; background:var(--surface-2); border:1px solid var(--border);
  padding:.4rem .7rem; border-radius:999px; font-size:.82rem; font-weight:600; cursor:pointer;
}

.empty{color:var(--muted); font-style:italic; padding:1rem 0}

/* ---------- Tellen (count) screen ---------- */
.search-wrap{position:relative; margin-bottom:1.3rem}
.tel-top{display:flex; gap:.6rem; align-items:flex-start}
.tel-top .search-wrap{flex:1}
.volgorde-knop{height:3.15rem; flex-shrink:0}
.volgorde-knop svg{width:1.1rem; height:1.1rem}
.volgorde-uit .drag-handle{display:none}
.volgorde-balk{
  display:none; position:sticky; top:.5rem; z-index:20; margin:-.4rem 0 1.2rem; padding:.6rem .7rem .6rem 1rem;
  align-items:center; justify-content:space-between; gap:.8rem; border-radius:14px;
  background:var(--ink); color:var(--bg); font-size:.88rem; font-weight:600; box-shadow:var(--shadow);
}
.volgorde-modus .volgorde-balk{display:flex}
.volgorde-modus .tel-top{display:none}
.volgorde-modus #tellijst .tel-rij, .volgorde-modus #tellijst .prod-counter, .volgorde-modus #tellijst .telregels{display:none}
.volgorde-modus #tellijst .drag-handle{color:var(--muted); padding:.6rem .5rem}
.volgorde-modus #tellijst .prod-card{cursor:default}
.search-wrap .icon{position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--muted)}
.search-wrap input{padding-left:2.5rem; font-size:1rem; padding-top:.9rem; padding-bottom:.9rem}

.cat-block{margin-bottom:1.6rem}
.cat-block h3{
  font-weight:800; font-size:1rem; color:var(--ink); margin:0 0 .6rem; padding-bottom:.5rem;
  border-bottom:2px solid var(--accent-soft);
}
/* Uitklapbare categorieën op het telscherm */
#tellijst .cat-block{margin-bottom:.6rem}
.cat-kop{
  width:100%; display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; border-radius:14px;
  border:1px solid var(--border); background:var(--surface); font:inherit; color:var(--ink); cursor:pointer; text-align:left;
}
.cat-naam{flex:1; font-weight:800; font-size:1rem}
.cat-aantal{font-size:.75rem; font-weight:700; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:.15rem .55rem}
.cat-chev{display:flex; color:var(--muted); transition:transform .15s}
.cat-chev svg{width:1.1rem; height:1.1rem}
.cat-block:not(.dicht) .cat-chev{transform:rotate(90deg)}
.cat-block:not(.dicht) .cat-kop{border-color:var(--accent); background:var(--accent-soft)}
.cat-block.dicht .cat-inhoud{display:none}
.cat-inhoud{padding:.6rem 0 .8rem}
.cat-zoek{position:relative; margin-bottom:.6rem}
.cat-zoek svg{position:absolute; left:.8rem; top:50%; transform:translateY(-50%); width:1rem; height:1rem; color:var(--muted)}
.cat-zoek input{padding:.6rem .8rem .6rem 2.3rem; font-size:.92rem}
.cat-leeg{padding:.8rem 1rem; color:var(--muted); font-size:.88rem}
.cat-alles{display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin:-.6rem 0 .5rem}
.cat-alles-knop{display:inline-flex; align-items:center; gap:.3rem; border:0; background:none; font:inherit; font-size:.85rem; font-weight:700; color:var(--accent); cursor:pointer; padding:.3rem .2rem}
.cat-alles-knop svg{width:.95rem; height:.95rem; transform:rotate(90deg); transition:transform .15s}
.cat-alles-knop[data-open="1"] svg{transform:rotate(-90deg)}
.volgorde-modus .cat-alles, .volgorde-modus .cat-zoek{display:none}
.prod-list{display:flex; flex-direction:column; gap:.6rem}
.prod-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.6rem;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.prod-card.dragging{opacity:.4}
.drag-handle{color:var(--border); cursor:grab; padding:.6rem .3rem; touch-action:none}
.drag-handle:hover{color:var(--muted)}
.prod-info{flex:1; min-width:120px}
.prod-info .kn{font-weight:800; font-size:1.02rem}
.prod-info .ln{font-size:.8rem; color:var(--muted)}
.prod-counter{
  display:flex; align-items:center; gap:.6rem; background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; padding:.4rem .6rem;
}
.count-total{
  min-width:2.6rem; text-align:center; font-weight:900; font-size:1.3rem; color:var(--accent);
  border-radius:8px; padding:.1rem .3rem; cursor:text; transition:transform .15s, color .15s;
}
.count-total:hover{background:var(--accent-soft)}
.count-wrap{position:relative; display:inline-flex}
.count-clear{
  position:absolute; top:-.95rem; right:-.75rem; width:1.35rem; height:1.35rem; border-radius:999px; padding:0;
  border:1px solid var(--border); background:var(--surface); color:var(--muted); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.count-clear svg{width:.75rem; height:.75rem}
.count-clear::before{content:""; position:absolute; inset:-.45rem}
.count-clear.hidden{display:none}
.count-total.pulse{transform:scale(1.2)}
.stepbtn{
  width:2.5rem; height:2.5rem; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  font-weight:800; font-size:1.2rem; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.stepbtn.plus{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.stepbtn:active{transform:scale(.95)}
.qty-input{
  width:3.4rem; height:2.5rem; text-align:center; border:1px solid var(--border); border-radius:10px;
  font-weight:700; font-size:1rem;
}

.prod-card .prod-counter{margin-left:auto}
.stepbtn.pakbtn{position:relative; background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
.stepbtn.pakbtn svg{width:1.3rem; height:1.3rem}
.stepbtn.pakbtn{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation}
.pak-keer{
  position:absolute; bottom:-.45rem; left:-.45rem; min-width:1.25rem; height:1.25rem; padding:0 .3rem; border-radius:999px;
  background:var(--ink); color:var(--bg); font-size:.7rem; font-weight:800; line-height:1.25rem; text-align:center;
  box-shadow:0 0 0 2px var(--surface-2); transition:transform .15s;
}
.pak-keer.pulse{transform:scale(1.25)}
.pak-n{
  position:absolute; top:-.45rem; right:-.45rem; min-width:1.15rem; height:1.15rem; padding:0 .25rem; border-radius:999px;
  background:var(--accent); color:var(--accent-ink); font-size:.66rem; font-weight:800; line-height:1.15rem; text-align:center;
}
.stepbtn.addbtn{background:var(--ink); color:var(--bg); border-color:var(--ink); margin-left:.15rem}
.stepbtn.addbtn:disabled{background:var(--surface); color:var(--border); border-color:var(--border); cursor:default}
.tr-totaal{transition:transform .2s}
.tr-totaal.pulse{transform:scale(1.12)}
.telregels{flex-basis:100%; margin:.1rem 0 0 2rem}
.tr-kop{
  width:100%; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; background:none; border:0; border-top:1px dashed var(--border);
  padding:.45rem .2rem .1rem; font:inherit; font-size:.82rem; color:var(--muted); cursor:pointer; text-align:left;
}
.tr-kop b{color:var(--ink)}
.tr-som{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tr-totaal{margin-left:auto; background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:.15rem .6rem; font-weight:700}
.tr-totaal b{color:var(--accent); font-weight:900}
.tr-chev{display:flex; transition:transform .15s}
.tr-chev svg{width:1rem; height:1rem}
.tr-kop.open .tr-chev{transform:rotate(90deg)}
.tr-lijst{display:flex; flex-direction:column; gap:.2rem; padding:.35rem 0 .1rem}
.tr-rij{display:flex; align-items:center; gap:.7rem; font-size:.85rem; padding:.2rem .2rem}
.tr-nr{width:1.4rem; color:var(--muted); font-size:.75rem}
.tr-rij b{min-width:2rem}
.tr-wie{flex:1; color:var(--muted); font-size:.75rem}
.tr-knop{width:1.9rem; height:1.9rem; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0}
.tr-knop svg{width:.9rem; height:.9rem}
.tr-knop.tr-ok{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.tr-veld{width:4rem; height:1.9rem; font-size:.9rem}

.toast{
  position:fixed; top:1rem; left:50%; transform:translateX(-50%) translateY(-140%);
  background:var(--ink); color:var(--bg); font-weight:700; font-size:.85rem;
  padding:.65rem 1.1rem; border-radius:999px; z-index:100; transition:transform .25s ease; box-shadow:var(--shadow);
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- Datepicker ---------- */
.date-field{display:flex; align-items:center; gap:.6rem; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.55rem .9rem}
.date-field input{border:none; background:none; font-weight:700; font-size:.95rem; color:var(--ink); font-family:inherit}
.date-field .icon{color:var(--accent)}
.dot{width:6px; height:6px; border-radius:999px; background:var(--accent); display:inline-block}

/* ---------- Tabs (admin) ---------- */
.tabs{display:flex; gap:.3rem; margin-bottom:1.1rem; border-bottom:1px solid var(--border); overflow-x:auto}
.tab{padding:.7rem 1rem; font-weight:700; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap}
.tab.active{color:var(--accent); border-bottom-color:var(--accent)}

/* ---------- Admin lists ---------- */
.admin-row{
  display:flex; align-items:center; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--border);
}
.admin-row:last-child{border-bottom:none}
.admin-row .info{flex:1; min-width:0}
.admin-row .name{font-weight:700}
.admin-row .sub{font-size:.78rem; color:var(--muted)}
.actions{display:flex; gap:.4rem; flex-shrink:0}

.badge{
  display:inline-flex; align-items:center; padding:.15rem .55rem; border-radius:999px;
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
}
.badge-accent{background:var(--accent-soft); color:var(--accent)}
.badge-warn{background:var(--warn-soft); color:var(--warn)}
.badge-muted{background:var(--surface-2); color:var(--muted)}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,14,12,.55); z-index:80; display:none;
  align-items:center; justify-content:center; padding:1rem;
}
.modal-backdrop.open{display:flex}
.modal{
  background:var(--surface); border-radius:18px; width:100%; max-width:560px; max-height:90vh;
  overflow-y:auto; box-shadow:var(--shadow);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface);
}
.modal-head h3{margin:0; font-size:1.05rem; font-weight:800}
.modal-body{padding:1.2rem}
.modal-foot{display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.2rem; border-top:1px solid var(--border)}

/* ---------- Report table ---------- */
.rtable{width:100%; border-collapse:collapse}
.rtable th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:.7rem .9rem; border-bottom:1px solid var(--border)}
.rtable td{padding:.8rem .9rem; border-bottom:1px solid var(--border)}
.rtable tr.cat-row td{background:var(--surface-2); font-weight:800; font-size:.85rem}
.rtable td.num{text-align:center}
.rtable td.order{text-align:center; font-weight:900; font-size:1.05rem}
.order-yes{color:var(--warn)}
.order-no{color:var(--border)}
.report-actions{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; justify-content:space-between; margin-bottom:1.1rem}
.report-actions .grp{display:flex; gap:.6rem; flex-wrap:wrap}
.email-form{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}

/* ---------- Login ---------- */
.login-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:1.5rem}
.login-card{width:100%; max-width:360px; padding:2rem; text-align:center}
.login-card h1{margin:.2rem 0 .3rem; font-size:1.6rem; font-weight:900}
.login-card p{color:var(--muted); margin:0 0 1.5rem; font-size:.88rem}
.alert{padding:.8rem 1rem; border-radius:var(--radius-sm); font-weight:700; font-size:.85rem; margin-bottom:1rem}
.alert-danger{background:var(--danger-soft); color:var(--danger)}
.alert-accent{background:var(--accent-soft); color:var(--accent)}

@media print{
  .no-print{display:none !important}
  body{background:#fff}
  .rtable th, .rtable td{border:1px solid #ccc}
}

/* ---------- Schoonmaak: takenlijst ---------- */
.taak-row{
  display:flex; align-items:flex-start; gap:.7rem; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:.8rem .9rem; margin-bottom:.6rem; transition:background .15s, border-color .15s;
}
.taak-row.partial{background:var(--accent-soft); border-color:var(--accent)}
.taak-row.done{background:var(--surface-2); border-color:var(--border)}
.taak-row.done .taak-naam{color:var(--muted); text-decoration:line-through}
.taak-check{
  width:1.9rem; height:1.9rem; border-radius:8px; border:2px solid var(--border); background:var(--surface);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer; color:transparent;
}
.taak-check input{position:absolute; opacity:0; width:1px; height:1px}
.taak-check.checked{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.taak-check.super{border-radius:999px}
.taak-check.super.checked{background:var(--warn); border-color:var(--warn)}
.taak-check.disabled{opacity:.4; cursor:not-allowed}
.taak-body{flex:1; min-width:0}
.taak-naam{font-weight:800}
.taak-desc{font-size:.82rem; color:var(--muted); margin-top:.15rem; white-space:pre-line}
.taak-side{display:flex; flex-direction:column; align-items:center; gap:.3rem}
.taak-side .lbl{font-size:.6rem; font-weight:800; text-transform:uppercase; color:var(--muted); letter-spacing:.03em}
.foto-btn{
  position:relative; width:2.6rem; height:2.6rem; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.foto-btn .n{position:absolute; bottom:-4px; right:-4px; background:var(--accent); color:var(--accent-ink); font-size:.62rem; font-weight:800; border-radius:999px; padding:0 .3rem}

.gallery-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:90; display:none; flex-direction:column}
.gallery-backdrop.open{display:flex}
.gallery-top{display:flex; justify-content:space-between; align-items:center; padding:1rem; color:#fff}
.gallery-stage{flex:1; display:flex; align-items:center; justify-content:center; position:relative; padding:0 3rem; min-height:0}
.gallery-stage img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px}
.gallery-nav{position:absolute; top:50%; transform:translateY(-50%); width:3rem; height:3rem; border-radius:999px; background:rgba(255,255,255,.15); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer}
.gallery-nav.prev{left:.5rem} .gallery-nav.next{right:.5rem}

.photo-thumb{position:relative; width:4.5rem; height:4.5rem; border-radius:10px; overflow:hidden; border:1px solid var(--border); flex-shrink:0}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.photo-thumb .rm{position:absolute; top:2px; right:2px; width:1.3rem; height:1.3rem; border-radius:999px; background:var(--danger); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.7rem; cursor:pointer; z-index:2}
.photo-thumb .grip{position:absolute; top:2px; left:2px; width:1.3rem; height:1.3rem; border-radius:6px; background:rgba(0,0,0,.5); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.75rem; cursor:grab; z-index:1; line-height:1}
.photo-thumb.new{border-color:var(--accent)}
.photo-grid{display:flex; flex-wrap:wrap; gap:.6rem}
.upload-btn{display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .9rem; border-radius:10px; border:1px solid var(--border); background:var(--surface); font-weight:700; font-size:.85rem; cursor:pointer}

/* ---------- Rooster: weekkiezer ---------- */
.week-switch{display:flex; align-items:center; gap:.7rem; justify-content:space-between; margin-bottom:1.2rem; flex-wrap:wrap}
.week-switch .lbl{font-weight:800}
.week-switch .sub{font-size:.78rem; color:var(--muted)}
.week-nav{display:flex; gap:.4rem}

/* ---------- Rooster: weekrooster grid (admin) ---------- */
.grid-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface)}
table.week-grid{border-collapse:collapse; width:100%; min-width:760px}
table.week-grid th{
  background:var(--surface-2); padding:.7rem .6rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted); text-align:left; border-bottom:1px solid var(--border); white-space:nowrap;
}
table.week-grid th.daycol{text-align:center}
table.week-grid td{border-bottom:1px solid var(--border); border-left:1px solid var(--border); padding:.4rem; vertical-align:top; min-width:120px}
table.week-grid td.namecol{
  font-weight:700; white-space:nowrap; border-left:none; background:var(--surface); position:sticky; left:0; padding:.6rem .8rem;
}
table.week-grid tr.open-row td.namecol{color:var(--warn)}
.cell-add{
  width:100%; min-height:2.4rem; border:1px dashed var(--border); border-radius:8px; background:none; color:var(--border);
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.cell-add:hover{border-color:var(--accent); color:var(--accent)}
.shift-chip{
  display:block; width:100%; text-align:left; border:none; border-radius:8px; padding:.4rem .55rem; margin-bottom:.3rem;
  background:var(--accent-soft); color:var(--accent); cursor:pointer; font-size:.78rem; line-height:1.35;
}
.shift-chip .t{font-weight:800; display:block}
.shift-chip .r{opacity:.85}
.shift-chip.warn{background:var(--danger-soft); color:var(--danger)}

/* ---------- Rooster: beschikbaarheid ---------- */
.avail-day{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:.9rem 1rem; margin-bottom:.7rem;
}
.avail-day .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem}
.avail-day .dag{font-weight:800}
.avail-day .datum{font-size:.78rem; color:var(--muted)}
.status-switch{display:flex; gap:.4rem; margin-bottom:.6rem}
.status-btn{
  flex:1; padding:.55rem; border-radius:9px; border:1px solid var(--border); background:var(--surface-2);
  font-weight:700; font-size:.82rem; cursor:pointer; color:var(--muted);
}
.status-btn.on.beschikbaar{background:var(--accent-soft); color:var(--accent); border-color:var(--accent)}
.status-btn.on.niet_beschikbaar{background:var(--danger-soft); color:var(--danger); border-color:var(--danger)}
.status-btn.on.deels{background:var(--warn-soft); color:var(--warn); border-color:var(--warn)}
.avail-times{display:flex; gap:.5rem; margin-bottom:.5rem}
.avail-times input{flex:1}

/* ---------- Rooster: niveau-selector ---------- */
.level-select{display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden}
.level-btn{width:2.1rem; height:2.1rem; border:none; background:var(--surface); color:var(--muted); font-weight:800; cursor:pointer; border-right:1px solid var(--border)}
.level-btn:last-child{border-right:none}
.level-btn.on{background:var(--info); color:#fff}

/* ---------- Rooster: aanvragen/verlof ---------- */
.req-row{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--border)}
.req-row:last-child{border-bottom:none}
.req-main{font-weight:700}
.req-sub{font-size:.8rem; color:var(--muted); margin-top:.15rem}
.badge-info{background:var(--info-soft); color:var(--info)}

.warn-banner{
  display:flex; align-items:center; gap:.6rem; background:var(--danger-soft); color:var(--danger); border-radius:10px;
  padding:.7rem 1rem; font-size:.85rem; font-weight:600; margin-bottom:1rem;
}

/* ---------- Rooster: dagoverzicht (timeline, a la Formitable) ---------- */
.tl-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface)}
.tl-inner{min-width:900px}
.tl-namecol{width:150px; flex-shrink:0}
.tl-header{display:flex; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--surface); z-index:2}
.tl-header .tl-namecol{padding:.6rem .8rem; font-size:.72rem; font-weight:800; text-transform:uppercase; color:var(--muted)}
.tl-hours{flex:1; display:grid}
.tl-hour{padding:.6rem .3rem; font-size:.74rem; font-weight:700; color:var(--muted); border-left:1px solid var(--border); text-align:left}

.tl-summary{display:flex; background:var(--surface-2); border-bottom:2px solid var(--border)}
.tl-summary .tl-namecol{padding:.4rem .8rem; font-size:.7rem; font-weight:800; color:var(--muted)}
.tl-summary .tl-hours{display:grid}
.tl-summary .tl-count{border-left:1px solid var(--border); text-align:center; font-family:var(--mono, inherit); font-size:.72rem; font-weight:800; padding:.3rem 0; color:var(--ink)}
.tl-summary .tl-count.peak{color:var(--danger)}

.tl-section-head{background:var(--surface-2); font-weight:800; font-size:.85rem; padding:.5rem .8rem; border-bottom:1px solid var(--border)}
.tl-row{display:flex; border-bottom:1px solid var(--border); min-height:2.6rem}
.tl-row .tl-namecol{padding:.5rem .8rem; font-size:.82rem; font-weight:700; display:flex; align-items:center}
.tl-row.tl-open .tl-namecol{color:var(--warn); font-style:italic; font-weight:600}
.tl-lane{flex:1; position:relative; min-height:2.6rem}
.tl-lane::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(to right, var(--border) 1px, transparent 1px);
  background-size:calc(100% / var(--hours)) 100%;
}
.tl-block{
  position:absolute; top:.35rem; bottom:.35rem;
  border-radius:7px; padding:.3rem .5rem; font-size:.74rem; font-weight:700; color:#fff;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden; white-space:nowrap; z-index:1;
  box-shadow:0 1px 2px rgba(0,0,0,.15); cursor:pointer; border:none; text-align:left; font-family:inherit;
}
.tl-block .r{font-size:.66rem; font-weight:600; opacity:.9}
.tl-block.open{
  background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, var(--border) 6px, var(--border) 10px);
  color:var(--warn); border:1px dashed var(--warn);
}
.tl-daynav{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap}

.hidden{display:none !important}

/* ==========================================================================
   Schoonmaak (afvinklijsten), herontwerp september 2026
   ========================================================================== */

/* ---------- Dag kiezen ---------- */
.sm-dag{display:flex; align-items:center; gap:.5rem; margin-bottom:1rem}
.sm-dag .label{flex:1; text-align:center; font-weight:800; font-size:1.05rem}
.sm-dag .label small{display:block; font-weight:600; font-size:.78rem; color:var(--muted)}
.sm-dag a.pijl{width:2.6rem; height:2.6rem; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border); color:var(--muted)}
.sm-dag a.pijl.uit{visibility:hidden}
.sm-terug-vandaag{display:inline-block; margin:-.4rem auto .9rem; font-size:.8rem; font-weight:700; color:var(--accent)}

/* ---------- Seintje voor de leiding ---------- */
.sm-sein{display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; margin-bottom:1rem; border-radius:var(--radius-sm); background:var(--warn-soft); color:var(--ink); font-weight:600}
.sm-sein .icon{color:var(--warn)}
.sm-sein a{margin-left:auto; font-weight:800; color:var(--warn); white-space:nowrap}

/* ---------- Lijsten op het overzicht ---------- */
.sm-groep{margin:0 0 1.3rem}
.sm-groep-kop{display:flex; align-items:center; gap:.45rem; margin:0 0 .6rem; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.sm-groep-kop .nu{padding:.12rem .5rem; border-radius:999px; background:var(--accent); color:var(--accent-ink); letter-spacing:.02em}
.sm-kaarten{display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr))}
.sm-kaart{display:flex; align-items:center; gap:.95rem; padding:.95rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); transition:border-color .15s, transform .15s}
.sm-kaart:hover{border-color:var(--accent)}
.sm-kaart:active{transform:scale(.99)}
.sm-kaart .info{flex:1; min-width:0}
.sm-kaart .naam{font-weight:800; font-size:1.05rem}
.sm-kaart .stand{font-size:.84rem; color:var(--muted); margin-top:.15rem}
.sm-kaart .chev{color:var(--border)}
.sm-kaart.klaar{border-color:var(--warn)}
.sm-kaart.gecontroleerd{background:var(--accent-soft); border-color:var(--accent-soft)}
.sm-kaart.leeg{opacity:.6; box-shadow:none}
.sm-badges{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem}
.sm-badge{display:inline-flex; align-items:center; gap:.25rem; padding:.15rem .5rem; border-radius:999px; font-size:.72rem; font-weight:800}
.sm-badge.melding{background:var(--warn-soft); color:var(--warn)}
.sm-badge.afgekeurd{background:var(--danger-soft); color:var(--danger)}
.sm-badge.controle{background:var(--info-soft); color:var(--info)}
.sm-badge.goed{background:var(--accent-soft); color:var(--accent)}

/* Voortgangsring */
.sm-ring{position:relative; width:3.2rem; height:3.2rem; flex-shrink:0}
.sm-ring > svg{width:100%; height:100%; transform:rotate(-90deg)}
.sm-ring .baan{fill:none; stroke:var(--surface-2); stroke-width:4}
.sm-ring .vulling{fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset .3s}
.sm-ring.klaar .vulling{stroke:var(--warn)}
.sm-ring .getal{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.74rem; font-weight:800}
.sm-ring .getal .icon{width:1.4rem; height:1.4rem; color:var(--accent)}

/* ---------- De lijst zelf ---------- */
.sm-balk{position:sticky; top:4.1rem; z-index:30; margin:-1.1rem -1rem 1rem; padding:.75rem 1rem .8rem; background:var(--bg); border-bottom:1px solid var(--border)}
.sm-balk-rij{display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.86rem; font-weight:700; margin-bottom:.45rem}
.sm-balk-rij .dag{color:var(--muted); font-weight:600}
.sm-balk .baan{height:.55rem; border-radius:999px; background:var(--surface-2); overflow:hidden; border:1px solid var(--border)}
.sm-balk .vulling{height:100%; background:var(--accent); border-radius:999px; transition:width .3s}
.sm-schakel{display:flex; gap:.25rem; padding:.25rem; margin-top:.7rem; background:var(--surface-2); border:1px solid var(--border); border-radius:12px}
.sm-schakel button{flex:1; padding:.55rem .6rem; border:0; border-radius:9px; background:transparent; font:inherit; font-weight:800; font-size:.86rem; color:var(--muted); cursor:pointer}
.sm-schakel button.actief{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.sm-schakel .aantal{display:inline-block; min-width:1.3rem; padding:0 .35rem; margin-left:.3rem; border-radius:999px; background:var(--warn); color:#fff; font-size:.72rem; line-height:1.3rem}

.sm-sectie{margin:1.2rem 0 .5rem; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.sm-sectie:first-child{margin-top:0}
.sm-taken{display:flex; flex-direction:column; gap:.55rem}

.sm-taak{display:flex; gap:.85rem; align-items:flex-start; padding:.85rem .9rem; min-height:4.2rem; background:var(--surface); border:1.5px solid var(--border); border-radius:14px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; transition:background .15s, border-color .15s}
.sm-taak:active{transform:scale(.995)}
.sm-taak .vak{flex-shrink:0; width:2.1rem; height:2.1rem; margin-top:.05rem; border-radius:10px; border:2px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; color:transparent; transition:all .15s}
.sm-taak .vak .icon{width:1.3rem; height:1.3rem}
.sm-taak .midden{flex:1; min-width:0}
.sm-taak .naam{font-weight:800; font-size:1rem; line-height:1.3}
.sm-taak .uitleg{font-size:.84rem; color:var(--muted); margin-top:.15rem; white-space:pre-line}
.sm-taak .wie{font-size:.78rem; font-weight:700; margin-top:.35rem; color:var(--accent)}
.sm-taak .noot{margin-top:.45rem; padding:.45rem .6rem; border-radius:9px; font-size:.84rem; font-weight:600}
.sm-taak .noot.melding{background:var(--warn-soft); color:var(--ink)}
.sm-taak .noot.afgekeurd{background:var(--danger-soft); color:var(--danger)}
.sm-taak .noot img{display:block; margin-top:.4rem; max-width:9rem; border-radius:8px}
.sm-taak .meer{flex-shrink:0; width:2.4rem; height:2.4rem; margin:-.25rem -.35rem 0 0; border:0; border-radius:999px; background:transparent; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer}
.sm-taak .meer:hover{background:var(--surface-2); color:var(--ink)}
.sm-fotos{display:flex; gap:.4rem; margin-top:.55rem; flex-wrap:wrap}
.sm-fotos img{width:4.2rem; height:4.2rem; object-fit:cover; border-radius:10px; border:1px solid var(--border); cursor:zoom-in}

.sm-taak.gedaan{background:var(--accent-soft); border-color:var(--accent-soft)}
.sm-taak.gedaan .vak, .sm-taak.goedgekeurd .vak{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.sm-taak.gedaan .naam, .sm-taak.goedgekeurd .naam{color:var(--muted)}
.sm-taak.goedgekeurd{background:var(--surface-2); cursor:default}
.sm-taak.goedgekeurd .wie{color:var(--muted)}
.sm-taak.melding{border-color:var(--warn); background:var(--surface)}
.sm-taak.melding .vak{border-color:var(--warn); color:var(--warn); background:var(--warn-soft)}
.sm-taak.afgekeurd{border-color:var(--danger)}
.sm-taak.bezig{opacity:.6; pointer-events:none}
.sm-taak.alleen-lezen{cursor:default}

/* Controleren */
.sm-oordeel{display:flex; gap:.45rem; margin-top:.6rem}
.sm-oordeel button{flex:1; padding:.6rem .5rem; border-radius:10px; border:1px solid var(--border); background:var(--surface); font:inherit; font-weight:800; font-size:.86rem; cursor:pointer}
.sm-oordeel .goed{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.sm-oordeel .opnieuw{color:var(--danger)}

/* Onderaan: klaar melden */
.sm-voet{margin-top:1.3rem; display:flex; flex-direction:column; gap:.8rem}
.sm-klaar-knop{position:sticky; bottom:.8rem; z-index:20; width:100%; padding:1rem; border:0; border-radius:14px; background:var(--accent); color:var(--accent-ink); font:inherit; font-weight:800; font-size:1.02rem; box-shadow:0 8px 24px -8px rgba(15,138,95,.6); cursor:pointer}
.sm-klaar-knop.stil{background:var(--surface); color:var(--ink); border:1px solid var(--border); box-shadow:var(--shadow)}
.sm-afgerond{text-align:center; padding:1.3rem 1rem; border-radius:var(--radius); background:var(--accent-soft)}
.sm-afgerond .groot{font-size:1.15rem; font-weight:800; margin-bottom:.2rem}
.sm-afgerond .klein{color:var(--muted); font-size:.88rem}
.sm-notitie summary{cursor:pointer; font-weight:700; color:var(--muted); padding:.4rem 0; list-style:none}
.sm-notitie summary::-webkit-details-marker{display:none}
.sm-notitie textarea{margin-top:.5rem}

/* Onderblad (melding, afkeuren) */
.sm-blad-achter{position:fixed; inset:0; z-index:80; background:rgba(15,20,18,.45); display:none; align-items:flex-end; justify-content:center}
.sm-blad-achter.open{display:flex}
.sm-blad{width:min(560px, 100%); max-height:90vh; overflow:auto; background:var(--surface); border-radius:18px 18px 0 0; padding:1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); animation:sm-omhoog .18s ease-out}
@media(min-width:700px){ .sm-blad-achter{align-items:center} .sm-blad{border-radius:18px} }
@keyframes sm-omhoog{from{transform:translateY(24px); opacity:0} to{transform:none; opacity:1}}
.sm-blad h3{margin:0 0 .25rem; font-size:1.1rem}
.sm-blad .sub{margin:0 0 .9rem; color:var(--muted); font-size:.88rem}
.sm-snel{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem}
.sm-snel button{padding:.45rem .75rem; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); font:inherit; font-size:.84rem; font-weight:600; cursor:pointer}
.sm-blad .knoppen{display:flex; gap:.5rem; margin-top:.9rem}
.sm-blad .knoppen .btn{flex:1}
.sm-foto-kies{display:flex; align-items:center; gap:.7rem; margin-top:.2rem}
.sm-foto-kies img{width:3.6rem; height:3.6rem; object-fit:cover; border-radius:10px}

/* ---------- Weekoverzicht ---------- */
.sm-week{width:100%; border-collapse:separate; border-spacing:.3rem; table-layout:fixed}
.sm-week th{font-size:.72rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; padding:.2rem}
.sm-week th.lijst{text-align:left; width:34%}
.sm-week th.vandaag{color:var(--accent)}
.sm-week td.lijst{font-weight:700; font-size:.88rem; padding-right:.4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sm-week td.lijst small{display:block; font-weight:600; font-size:.7rem; color:var(--muted)}
.sm-vak{display:flex; align-items:center; justify-content:center; height:2.5rem; border-radius:9px; font-size:.72rem; font-weight:800; position:relative}
.sm-vak.leeg{background:transparent; color:var(--border)}
.sm-vak.open{background:var(--danger-soft); color:var(--danger)}
.sm-vak.nog{background:var(--surface-2); color:var(--muted)}
.sm-vak.bezig{background:var(--warn-soft); color:var(--warn)}
.sm-vak.klaar{background:var(--info-soft); color:var(--info)}
.sm-vak.gecontroleerd{background:var(--accent); color:var(--accent-ink)}
.sm-vak .stip{position:absolute; top:.25rem; right:.25rem; width:.45rem; height:.45rem; border-radius:999px; background:var(--warn)}
.sm-legenda{display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.8rem; font-size:.76rem; color:var(--muted)}
.sm-legenda span{display:inline-flex; align-items:center; gap:.3rem}
.sm-legenda i{width:.8rem; height:.8rem; border-radius:4px; display:inline-block}
.sm-meldingen{display:flex; flex-direction:column; gap:.5rem}
.sm-meldingen .m{padding:.75rem .9rem; border-radius:12px; background:var(--surface); border:1px solid var(--border)}
.sm-meldingen .m .kop{font-size:.78rem; color:var(--muted); font-weight:700}
.sm-meldingen .m .tekst{margin-top:.2rem; font-weight:600}
.sm-meldingen .m.afgekeurd{border-left:4px solid var(--danger)}
.sm-meldingen .m.melding{border-left:4px solid var(--warn)}

/* ---------- Beheer: dagen kiezen ---------- */
.sm-dagkeuze{display:flex; flex-wrap:wrap; gap:.35rem}
.sm-dagkeuze label{position:relative}
.sm-dagkeuze input{position:absolute; opacity:0; pointer-events:none}
.sm-dagkeuze span{display:inline-flex; align-items:center; justify-content:center; min-width:2.6rem; padding:.45rem .5rem; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); font-size:.84rem; font-weight:700; cursor:pointer}
.sm-dagkeuze input:checked + span{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.sm-chip{display:inline-block; padding:.1rem .5rem; margin-right:.3rem; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-size:.72rem; font-weight:700; color:var(--muted)}
.sm-blad [hidden]{display:none !important}
.sm-taak .meer svg{width:1.25rem; height:1.25rem}
.sm-vak.laat{box-shadow:inset 0 0 0 2px var(--danger)}

/* ---------- Groepen met een icoon ---------- */
.sm-iconen{display:grid; grid-template-columns:repeat(auto-fill, minmax(2.9rem, 1fr)); gap:.35rem}
.sm-iconen label{position:relative}
.sm-iconen input{position:absolute; opacity:0; pointer-events:none}
.sm-iconen span{display:flex; align-items:center; justify-content:center; height:2.9rem; border-radius:12px; border:2px solid var(--border); background:var(--surface-2); font-size:1.35rem; cursor:pointer}
.sm-iconen input:checked + span{border-color:var(--accent); background:var(--accent-soft)}
.sm-iconen input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.sm-voorstellen{display:flex; flex-wrap:wrap; gap:.4rem}
.sm-voorstellen form{margin:0}
.sm-voorstellen button{padding:.45rem .8rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); font:inherit; font-weight:700; font-size:.86rem; cursor:pointer}
.sm-voorstellen button:hover{border-color:var(--accent)}
.sm-groep-icoon{display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; margin-right:.2rem; border-radius:11px; background:var(--surface-2); font-size:1.25rem; flex-shrink:0}
.sm-tab{flex:1; padding:.55rem .6rem; border-radius:9px; text-align:center; font-weight:800; font-size:.86rem; color:var(--muted)}
.sm-tab.actief{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.sm-groepkop{display:flex; align-items:center; gap:.55rem; margin:1.3rem 0 .55rem}
.sm-groepkop:first-child{margin-top:0}
.sm-groepkop .ic{display:flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:10px; background:var(--surface); border:1px solid var(--border); font-size:1.15rem}
.sm-groepkop .nm{font-weight:800; font-size:1rem}
.sm-groepkop .tel{margin-left:auto; font-size:.78rem; font-weight:800; color:var(--muted)}
.sm-groepkop .tel.af{color:var(--accent)}

/* ---------- Aan/uit-schakelaar ---------- */
.sm-schakelaar{display:flex; align-items:flex-start; gap:.9rem; cursor:pointer}
.sm-schakelaar input{position:absolute; opacity:0; pointer-events:none}
.sm-schakelaar .baan{flex-shrink:0; position:relative; width:3rem; height:1.75rem; margin-top:.1rem; border-radius:999px; background:var(--border); transition:background .15s}
.sm-schakelaar .baan::after{content:''; position:absolute; top:.2rem; left:.2rem; width:1.35rem; height:1.35rem; border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .15s}
.sm-schakelaar input:checked + .baan{background:var(--accent)}
.sm-schakelaar input:checked + .baan::after{transform:translateX(1.25rem)}
.sm-schakelaar .tekst b{display:block}
.sm-schakelaar .tekst small{display:block; margin-top:.15rem; color:var(--muted); font-size:.84rem}
.field[hidden]{display:none}

/* ---------- Lijniconen van de groepen ---------- */
.sm-ico{width:1.25rem; height:1.25rem; flex-shrink:0; display:inline-block; vertical-align:-.22em}
.sm-iconen span{color:var(--ink)}
.sm-iconen span .sm-ico{width:1.45rem; height:1.45rem}
.sm-iconen input:checked + span{color:var(--accent)}
.sm-groep-icoon{color:var(--accent)}
.sm-groep-icoon .sm-ico{width:1.35rem; height:1.35rem}
.sm-groepkop .ic{color:var(--accent)}
.sm-groepkop .ic .sm-ico{width:1.2rem; height:1.2rem}
.sm-voorstellen button{display:inline-flex; align-items:center; gap:.4rem}
.sm-voorstellen button .sm-ico{width:1.05rem; height:1.05rem; color:var(--accent)}
.sm-chip{display:inline-flex; align-items:center; gap:.25rem}
.sm-chip .sm-ico{width:.9rem; height:.9rem}
.noot-ico{display:inline-flex; margin-right:.35rem; vertical-align:-.2em; color:var(--warn)}
.noot-ico svg{width:1rem; height:1rem}

/* ==========================================================================
   HACCP, oktober 2026
   ========================================================================== */
.toast.fout{background:var(--danger); color:#fff}
.linkknop{border:0; background:none; padding:0; font:inherit; font-weight:800; color:var(--accent); cursor:pointer; font-size:.84rem}
.print-only{display:none}
.hc-ico{width:1.2em; height:1.2em}
.hc-hint{display:block; margin-top:.3rem; color:var(--muted); font-size:.8rem}
.hc-hint a{color:var(--accent); font-weight:700}
.hc-rood{color:var(--danger)}

.hc-kop{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:0 0 1rem}
.hc-kop h1{margin:0; font-size:1.45rem; font-weight:900; letter-spacing:-.01em}
.hc-kop p{margin:.15rem 0 0; color:var(--muted); font-size:.9rem}
.hc-kop-knoppen{display:flex; gap:.4rem; flex-shrink:0}
.sm-groep-kop.rood{color:var(--danger)}

.hc-sein-rood{background:var(--danger-soft)}
.hc-sein-rood .hc-ico{color:var(--danger)}
.hc-sein-rood b{margin-left:auto; color:var(--danger); white-space:nowrap}
.hc-sein-groen{background:var(--accent-soft)}
.hc-sein-groen .icon{color:var(--accent)}

/* Tegels op Vandaag */
.hc-tegels{display:grid; grid-template-columns:repeat(2, 1fr); gap:.7rem; margin-bottom:1.4rem}
@media(min-width:700px){ .hc-tegels{grid-template-columns:repeat(3, 1fr)} }
.hc-tegel{position:relative; display:flex; flex-direction:column; gap:.2rem; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); transition:border-color .15s, transform .15s; overflow:hidden}
.hc-tegel:hover{border-color:var(--accent)}
.hc-tegel:active{transform:scale(.985)}
.hc-tegel b{font-size:1rem; font-weight:800; margin-top:.45rem}
.hc-tegel small{color:var(--muted); font-size:.8rem; line-height:1.35}
.hc-tegel.klaar small{color:var(--accent); font-weight:700}
.hc-tegel.rood{border-color:var(--danger)}
.hc-tegel.rood small{color:var(--danger); font-weight:700}
.hc-tegel.rood .hc-tegel-ic{background:var(--danger-soft); color:var(--danger)}
.hc-tegel.oranje small{color:var(--warn); font-weight:700}
.hc-tegel.oranje .hc-tegel-ic{background:var(--warn-soft); color:var(--warn)}
.hc-tegel-ic{display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:12px; background:var(--accent-soft); color:var(--accent); flex-shrink:0}
.hc-tegel-ic .hc-ico{width:1.35rem; height:1.35rem}
.hc-balkje{display:block; height:4px; border-radius:99px; background:var(--surface-2); margin-top:.5rem; overflow:hidden}
.hc-balkje i{display:block; height:100%; background:var(--accent); border-radius:99px}

/* Lopende terugkoeling */
.hc-timer{display:flex; align-items:center; gap:.85rem; padding:.9rem 1rem; margin-bottom:.7rem; background:var(--surface); border:1px solid var(--info); border-radius:var(--radius); box-shadow:var(--shadow)}
.hc-timer .hc-tegel-ic{background:var(--info-soft); color:var(--info)}
.hc-timer .info{flex:1; min-width:0}
.hc-timer .info b{display:block}
.hc-timer .info small{color:var(--muted); font-size:.8rem}
.hc-timer .balk{height:5px; border-radius:99px; background:var(--surface-2); margin-top:.45rem; overflow:hidden}
.hc-timer .balk i{display:block; height:100%; width:0; background:var(--info); transition:width .4s}
.hc-timer.bijna{border-color:var(--warn)} .hc-timer.bijna .balk i{background:var(--warn)}
.hc-timer.laat{border-color:var(--danger); background:var(--danger-soft)} .hc-timer.laat .balk i{background:var(--danger)}
.hc-timer.laat small span{color:var(--danger); font-weight:800}

/* Lijsten met registraties */
.hc-lijst{padding:.2rem 0}
.hc-rij{display:flex; align-items:flex-start; gap:.75rem; padding:.8rem 1rem; border-bottom:1px solid var(--border)}
.hc-rij:last-child{border-bottom:0}
a.hc-rij{align-items:center}
a.hc-rij:hover{background:var(--surface-2)}
.hc-rij .chev{color:var(--border)}
.hc-rij-ic{display:flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border-radius:10px; background:var(--surface-2); color:var(--muted); flex-shrink:0}
.hc-rij .info{flex:1; min-width:0}
.hc-rij .info b{display:block; font-size:.93rem}
.hc-rij .info small{display:block; color:var(--muted); font-size:.78rem; margin-top:.1rem}
.hc-rij .info small.noot{color:var(--ink); font-style:italic}
.hc-rij.afwijking .hc-rij-ic{background:var(--danger-soft); color:var(--danger)}
.hc-rij.weg{opacity:.5}
.hc-rij.weg .info b, .hc-rij.weg .hc-waarde{text-decoration:line-through}
.hc-waarde{flex-shrink:0; padding:.25rem .6rem; border-radius:999px; font-weight:800; font-size:.8rem; white-space:nowrap; background:var(--accent-soft); color:var(--accent); max-width:45%; overflow:hidden; text-overflow:ellipsis}
.hc-waarde.fout{background:var(--danger-soft); color:var(--danger)}
.hc-waarde.loopt{background:var(--info-soft); color:var(--info)}
.hc-weg{width:2rem; height:2rem; margin:-.2rem -.4rem 0 0}
.hc-maatregel{margin-top:.4rem; padding:.45rem .6rem; border-radius:8px; background:var(--surface-2); font-size:.82rem}
.hc-maatregel span{color:var(--muted)}
.hc-maatregel.open{background:var(--danger-soft); color:var(--danger); font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.hc-maatregel.open .linkknop{color:var(--danger); text-decoration:underline}
.hc-foto-link{display:inline-flex; align-items:center; gap:.25rem; margin-top:.3rem; font-size:.78rem; font-weight:700; color:var(--accent)}
.hc-alles-goed{display:flex; align-items:center; gap:.6rem; color:var(--accent); font-weight:700}

/* Temperaturen per apparaat */
.hc-apparaten{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr))}
.hc-apparaat{padding:1rem}
.hc-apparaat .kop{display:flex; align-items:center; gap:.75rem; margin-bottom:.8rem}
.hc-apparaat .kop .info{flex:1; min-width:0}
.hc-apparaat .kop b{display:block}
.hc-apparaat .kop small{color:var(--muted); font-size:.78rem}
.hc-momenten{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:.45rem}
.hc-moment{display:flex; flex-direction:column; align-items:flex-start; gap:.05rem; padding:.55rem .65rem; border-radius:12px; border:1.5px solid var(--border); background:var(--surface-2); font:inherit; color:var(--ink); text-align:left; cursor:pointer; min-height:4.1rem}
.hc-moment small{font-size:.72rem; font-weight:800; color:var(--muted)}
.hc-moment b{font-size:1.05rem; font-weight:900}
.hc-moment span{font-size:.66rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.hc-moment.goed{background:var(--accent-soft); border-color:transparent; cursor:default}
.hc-moment.goed b{color:var(--accent)}
.hc-moment.fout{background:var(--danger-soft); border-color:var(--danger); cursor:default}
.hc-moment.fout b{color:var(--danger)}
.hc-moment.nu{border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-soft)}
.hc-moment.nu b{color:var(--accent)}
.hc-moment.laat{border-color:var(--danger); background:var(--surface)}
.hc-moment.laat b{color:var(--danger)}
.hc-moment.later b{color:var(--muted); font-weight:700}

/* Formulieren */
.hc-form{margin-bottom:1rem}
.hc-tabs{margin:0 0 .9rem; overflow-x:auto}
.hc-tabs .sm-tab{white-space:nowrap}
.hc-beheer-tabs{margin-bottom:1.2rem}
.hc-norm{display:flex; align-items:center; gap:.5rem; margin:0 0 1rem; padding:.6rem .8rem; border-radius:10px; background:var(--info-soft); color:var(--info); font-weight:700; font-size:.88rem}
.hc-meetveld{display:flex; align-items:center; gap:.7rem; width:100%; padding:.85rem 1rem; border-radius:var(--radius-sm); border:1.5px solid var(--accent); background:var(--surface); font:inherit; font-size:1.25rem; font-weight:900; color:var(--ink); cursor:pointer; text-align:left}
.hc-meetveld .hc-ico{color:var(--accent); width:1.4rem; height:1.4rem}
.hc-meetveld.leeg{border-style:dashed; border-color:var(--border); font-size:.95rem; font-weight:700; color:var(--muted)}
.hc-meetveld.leeg .hc-ico{color:var(--muted)}
.hc-2kol{display:grid; gap:0 .8rem}
.hc-3kol{display:grid; gap:.5rem .8rem}
@media(min-width:620px){ .hc-2kol{grid-template-columns:1fr 1fr} .hc-3kol{grid-template-columns:repeat(3, 1fr)} }
.hc-invoer-eenheid{display:flex; align-items:center; gap:.5rem}
.hc-invoer-eenheid .input{flex:1; min-width:0}
.hc-invoer-eenheid span{font-size:.82rem; color:var(--muted); font-weight:600; white-space:nowrap}
.hc-meer summary{cursor:pointer; font-weight:800; font-size:.86rem; color:var(--accent); margin-bottom:.4rem; list-style:none}
.hc-meer summary::-webkit-details-marker{display:none}
.hc-meer summary::before{content:'+ '}
.hc-meer[open] summary::before{content:'– '}
.hc-keuze{display:flex; flex-wrap:wrap; gap:.4rem}
.hc-keuze label{position:relative}
.hc-keuze input{position:absolute; opacity:0; pointer-events:none}
.hc-keuze span{display:inline-flex; padding:.55rem .9rem; border-radius:999px; border:1.5px solid var(--border); background:var(--surface-2); font-weight:700; font-size:.88rem; cursor:pointer}
.hc-keuze input:checked + span{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.hc-keuze input[value="geweigerd"]:checked + span, .hc-keuze input[value="deels"]:checked + span, .hc-keuze input[name="in_orde"][value=""]:checked + span{background:var(--danger); border-color:var(--danger); color:#fff}
.hc-keuze input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.hc-checks{display:grid; gap:.8rem; margin:.3rem 0 1.1rem; padding:.9rem; border-radius:var(--radius-sm); background:var(--surface-2)}
.hc-stapper{display:flex; align-items:center; gap:.35rem}
.hc-stapper .input{text-align:center; flex:1; min-width:0}
.hc-stapper button{width:2.7rem; height:2.7rem; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink)}
.hc-voorbeeld{margin:.2rem 0 1rem; padding:.75rem .9rem; border-radius:var(--radius-sm); background:var(--accent-soft); font-size:.92rem}
.hc-voorbeeld small{color:var(--muted)}

/* Cijferblok */
.hc-toetsblad{max-width:400px}
.hc-scherm{display:flex; align-items:baseline; justify-content:flex-end; gap:.4rem; padding:.9rem 1.1rem; margin-bottom:.8rem; border-radius:14px; background:var(--surface-2); border:1px solid var(--border)}
.hc-scherm span{font-size:2.6rem; font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.hc-scherm small{font-size:1.1rem; font-weight:800; color:var(--muted)}
.hc-toetsen{display:grid; grid-template-columns:repeat(3, 1fr); gap:.45rem}
.hc-toetsen button{height:3.6rem; border-radius:14px; border:1px solid var(--border); background:var(--surface); font:inherit; font-size:1.45rem; font-weight:800; color:var(--ink); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.hc-toetsen button:active{background:var(--accent-soft); border-color:var(--accent)}
.hc-toetsen button.bij{background:var(--surface-2); font-size:1.15rem}
.hc-toetsblad .knoppen .btn:first-child{flex:0 0 3.4rem}
.hc-afwijking-kop{display:flex; gap:.75rem; align-items:flex-start}
.hc-afwijking-kop > .hc-ico{width:2.4rem; height:2.4rem; padding:.45rem; border-radius:12px; background:var(--danger-soft); color:var(--danger); flex-shrink:0}
.hc-afwijking-kop h3{color:var(--danger)}

/* Etiketten */
.hc-etiket{transition:opacity .25s, transform .25s}
.hc-etiket.weg{opacity:0; transform:translateX(20px)}
.hc-etiket.verlopen .hc-rij-ic{background:var(--danger-soft); color:var(--danger)}
.hc-etiket.vandaag .hc-rij-ic{background:var(--warn-soft); color:var(--warn)}
.hc-etiket-knoppen{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem}
.hc-etiket-knoppen .btn{display:inline-flex; align-items:center; gap:.3rem}

/* Allergenen */
.hc-allergeen-kies{display:flex; flex-wrap:wrap; gap:.35rem}
.hc-allergeen-kies label{position:relative}
.hc-allergeen-kies input{position:absolute; opacity:0; pointer-events:none}
.hc-allergeen-kies span{display:inline-flex; padding:.4rem .7rem; border-radius:999px; border:1.5px solid var(--border); background:var(--surface-2); font-size:.82rem; font-weight:700; cursor:pointer}
.hc-allergeen-kies input:checked + span{background:var(--danger); border-color:var(--danger); color:#fff}
.hc-allergeen-kies.bevat input:checked + span{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.hc-allergeen-kies.spoor input:checked + span{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}
.hc-al-zoek{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; margin-top:.9rem}
.hc-al-zoek .input{flex:1; min-width:200px}
.hc-al-uitkomst{margin:.8rem 0 0; font-size:.9rem}
.hc-al-uitkomst:empty{display:none}
.hc-matrix-wrap{overflow-x:auto}
.hc-matrix{border-collapse:collapse; width:100%; font-size:.84rem}
.hc-matrix th, .hc-matrix td{border-bottom:1px solid var(--border); padding:.45rem .3rem; text-align:center}
.hc-matrix th{vertical-align:bottom; height:7.5rem; font-size:.72rem; font-weight:800; color:var(--muted)}
.hc-matrix th span{writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap}
.hc-matrix .gerecht{text-align:left; min-width:11rem; font-weight:700; padding-left:.9rem; position:sticky; left:0; background:var(--surface)}
.hc-matrix th.gerecht{vertical-align:bottom}
.hc-matrix td.gerecht small{display:block; font-weight:500; color:var(--muted); font-size:.74rem}
.hc-matrix td.ja{font-size:1rem; color:var(--danger)}
.hc-matrix td.spoor{color:var(--warn)}
.hc-matrix tr.cat td{text-align:left; background:var(--surface-2); font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:.4rem .9rem}
.hc-matrix .gekozen{background:var(--danger-soft)}
.hc-matrix tr.nee td.gerecht{text-decoration:line-through; color:var(--muted)}
.hc-matrix tr.nee{opacity:.45}
.hc-matrix tr.kan td.gerecht{color:var(--accent)}
.hc-matrix tr.let-op td.gerecht{color:var(--warn)}
.hc-legenda{margin:.7rem 0 0; font-size:.8rem; color:var(--muted)}

/* Controles */
.hc-controles{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr))}
.hc-controle .kop{display:flex; align-items:center; gap:.75rem}
.hc-controle .kop .info{flex:1; min-width:0}
.hc-controle .kop b{display:block}
.hc-controle .kop small{color:var(--muted); font-size:.78rem}
.hc-controle.nodig{border-color:var(--warn)}
.hc-controle.nodig .hc-tegel-ic{background:var(--warn-soft); color:var(--warn)}
.hc-uitleg{margin:.7rem 0 .6rem; color:var(--muted); font-size:.86rem}
.hc-controle details{margin-top:.6rem}

/* Logboek en rapport */
.hc-filter{display:flex; flex-wrap:wrap; align-items:flex-end; gap:.2rem .8rem; margin-bottom:1rem}
.hc-filter .field{margin-bottom:.6rem; min-width:150px; flex:1}
.hc-filter .btn{margin-bottom:.6rem}
.hc-filter-vinkjes{display:flex; flex-wrap:wrap; gap:.4rem 1rem; width:100%; font-size:.86rem; font-weight:600; margin-bottom:.7rem}
.hc-filter-vinkjes input{accent-color:var(--accent)}
.hc-snel-periode{display:flex; flex-wrap:wrap; gap:.35rem; width:100%}
.hc-snel-periode .sm-chip{padding:.35rem .7rem; font-size:.8rem}
.hc-snel-periode .sm-chip.actief{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.hc-rapport{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow)}
.hc-r-kop{display:flex; justify-content:space-between; gap:1rem; border-bottom:2px solid var(--ink); padding-bottom:.8rem; margin-bottom:1rem}
.hc-r-kop h1{margin:0 0 .2rem; font-size:1.35rem}
.hc-r-kop p{margin:.1rem 0; font-size:.88rem}
.hc-r-gemaakt{color:var(--muted); font-size:.78rem !important; text-align:right}
.hc-r-cijfers{display:grid; grid-template-columns:repeat(4, 1fr); gap:.6rem; margin-bottom:1.2rem}
.hc-r-cijfers div{padding:.7rem; border-radius:10px; background:var(--surface-2); text-align:center}
.hc-r-cijfers b{display:block; font-size:1.4rem; font-weight:900}
.hc-r-cijfers span{font-size:.74rem; color:var(--muted); font-weight:700}
.hc-r-cijfers .afw b{color:var(--danger)}
.hc-rapport h2{font-size:1rem; margin:1.4rem 0 .5rem; padding-bottom:.3rem; border-bottom:1px solid var(--border)}
.hc-r-uitleg{margin:0 0 .5rem; font-size:.8rem; color:var(--muted)}
.hc-r-leeg{color:var(--muted); font-size:.85rem}
.hc-r-tabel{width:100%; border-collapse:collapse; font-size:.8rem; margin-bottom:.6rem}
.hc-r-tabel th{text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:.35rem .4rem; border-bottom:1.5px solid var(--border)}
.hc-r-tabel td{padding:.35rem .4rem; border-bottom:1px solid var(--border); vertical-align:top}
.hc-r-tabel td small{display:block; color:var(--muted); font-size:.7rem}
.hc-r-tabel tr.afw td, .hc-r-tabel td.afw{background:var(--danger-soft)}
.hc-r-temp td{text-align:center; white-space:nowrap}
.hc-r-temp td:first-child{text-align:left; white-space:normal}
.hc-r-temp td.leeg{color:var(--border)}
.hc-r-teken{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; margin-top:2.2rem}
.hc-r-teken div{border-bottom:1px solid var(--ink); height:2.6rem; position:relative}
.hc-r-teken span{position:absolute; bottom:-1.3rem; font-size:.72rem; color:var(--muted)}

/* Beheer */
.hc-instellingen .card{margin-bottom:1rem}
.hc-inst-rij{padding:.75rem 0; border-bottom:1px solid var(--border); margin:0}
.hc-inst-rij:last-child{border-bottom:0}
.hc-inst-getal{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.hc-inst-getal .tekst small{display:block; color:var(--muted); font-size:.78rem}
.hc-inst-getal .hc-invoer-eenheid{flex:0 0 auto; max-width:60%}
.hc-inst-getal .input{width:5.2rem; flex:0 0 auto; text-align:right}
.hc-opslaan-balk{position:sticky; bottom:0; padding:.8rem 0; background:linear-gradient(transparent, var(--bg) 35%); display:flex; justify-content:flex-end; z-index:5}
.hc-opslaan-balk .btn{box-shadow:var(--shadow)}
.hc-bewerk{padding:1rem; margin:.2rem 0 .8rem; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--border)}
.hc-bewerk[hidden]{display:none}
.admin-row.uit .name, .admin-row.uit .sub{opacity:.55}
.hc-cat-kop{margin:1rem 0 .2rem; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.hc-geen{color:var(--warn); font-weight:700}
[data-hc-dagen][hidden], [data-hc-meting][hidden], #hc-reden[hidden], #hc-et-naam-veld[hidden]{display:none}

@media print{
  .print-only{display:block}
  .navbar, .appbar, .footer, .toast{display:none !important}
  main{padding:0; max-width:none}
  .hc-rapport{border:0; box-shadow:none; padding:0}
  .hc-rapport h2{break-after:avoid}
  .hc-r-tabel tr{break-inside:avoid}
  .hc-r-tabel tr.afw td, .hc-r-tabel td.afw{background:#fbe0dd !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .hc-matrix-wrap{border:0; box-shadow:none; overflow:visible}
  .hc-matrix{font-size:9pt}
  .hc-matrix th{height:6rem}
  .hc-matrix tr{opacity:1 !important; break-inside:avoid}
  .hc-matrix tr.nee td.gerecht{text-decoration:none; color:#000}
  .hc-matrix .gerecht{position:static}
  .hc-print-kop h1{font-size:14pt; margin:0 0 .2rem}
  .hc-print-kop p{font-size:9pt; margin:0 0 .6rem}
}
.hc-tabs .sm-tab{flex:1 0 auto; padding:.55rem .8rem}
.field .hc-allergeen-kies label, .field .hc-keuze label{text-transform:none; letter-spacing:0; font-size:inherit; color:inherit; font-weight:inherit}
.field label.upload-btn{text-transform:none; letter-spacing:0; font-size:.85rem; color:var(--ink)}
.hc-inst-getal .hc-invoer-eenheid span{white-space:normal; max-width:7.5rem}
@media(max-width:560px){
  .hc-rij{flex-wrap:wrap}
  .hc-rij .info{flex:1 1 calc(100% - 5.5rem)}
  .hc-rij .hc-waarde{order:3; margin-left:2.85rem; max-width:calc(100% - 2.85rem)}
}

/* ---------- Confirm / message dialog (dialog.js) ---------- */
.mh-dialog{z-index:95; animation:mhFade .12s ease-out}
.mh-dialog .modal{max-width:400px; animation:mhPop .14s ease-out}
.mh-dialog .modal-body{padding:1.4rem 1.4rem .6rem}
.mh-dialog-titel{margin:0 0 .4rem; font-size:1.05rem; font-weight:800}
.mh-dialog-tekst{margin:0; font-size:.98rem; line-height:1.45; color:var(--ink)}
.mh-dialog .modal-foot{border-top:0; padding:1rem 1.4rem 1.3rem}
.mh-dialog .modal-foot .btn{min-width:6.5rem}
.btn-danger-solid{background:var(--danger); color:#fff}
.btn-danger-solid:hover{filter:brightness(1.06)}
@keyframes mhFade{from{opacity:0}}
@keyframes mhPop{from{transform:scale(.96); opacity:0}}

.mh-dialog-getal{margin-top:.9rem; font-size:1.3rem; font-weight:800; text-align:center; padding:.7rem}
.mh-dialog-getal.fout{border-color:var(--danger)}

/* Telscherm: ingedrukt houden (doos/krat) mag geen tekst selecteren */
#tellijst .prod-card, #tellijst .prod-card *{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
#tellijst .prod-card input{-webkit-user-select:text; user-select:text}
/* Venster dat opent onder een vinger die nog ingedrukt is: niets selecteren behalve het invulveld */
.mh-dialog, .mh-dialog *{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.mh-dialog input{-webkit-user-select:text; user-select:text}

/* Voorgevuld standaardaantal: lichter tot je het aanpast of toevoegt */
.count-total.is-standaard{color:var(--muted); font-style:italic}

/* Dutch date label over the native date input (datum.js) */
.nl-datum{position:relative}
.nl-datum .nl-datum-input{color:transparent !important; -webkit-text-fill-color:transparent}
.nl-datum .nl-datum-input::-webkit-datetime-edit{opacity:0}
.nl-datum-tekst{position:absolute; top:50%; transform:translateY(-50%); pointer-events:none; white-space:nowrap}
.nl-datum-tekst.leeg{opacity:.45}

/* Tijdens zoeken: ruimte onder de lijst zodat de pagina niet verspringt als het toetsenbord dichtgaat */
body.zoekt #tellijst{padding-bottom:100vh}

/* Alleen ongeteld */
.ongeteld-knop{
  display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--border); background:var(--surface);
  border-radius:999px; padding:.35rem .7rem; font:inherit; font-size:.82rem; font-weight:700; color:var(--ink); cursor:pointer;
}
.ongeteld-knop svg{width:.95rem; height:.95rem; color:var(--muted)}
.ongeteld-knop b{background:var(--surface-2); color:var(--muted); border-radius:999px; padding:0 .45rem; font-size:.75rem}
.ongeteld-knop[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.ongeteld-knop[aria-pressed="true"] svg{color:var(--bg)}
.ongeteld-knop[aria-pressed="true"] b{background:var(--warn-soft); color:var(--warn)}
.cat-aantal.ongeteld{background:var(--warn-soft); color:var(--warn)}
.prod-card.geteld .prod-info .kn::after{content:""; display:inline-block; width:.45rem; height:.45rem; border-radius:999px; background:var(--accent); margin-left:.45rem; vertical-align:middle}
.loc-card .loc-voortgang{margin-top:.35rem; display:flex; align-items:center; gap:.3rem; font-weight:700}
.loc-card .loc-voortgang.klaar{color:var(--accent)}
.loc-voortgang svg{width:.95rem; height:.95rem}
.volgorde-modus .ongeteld-knop{display:none}

/* Lopende / afgesloten telling */
.telling-melding{display:flex; align-items:center; gap:.75rem; padding:.8rem 1rem; border-radius:14px; margin-bottom:.8rem; border:1px solid var(--border); background:var(--surface)}
.telling-melding .tm-tekst{flex:1; display:flex; flex-direction:column; line-height:1.3}
.telling-melding .tm-tekst span{font-size:.8rem; color:var(--muted)}
.telling-melding form{margin:0}
.telling-melding > svg{width:1.3rem; height:1.3rem; flex-shrink:0}
.telling-melding.waarschuwing{background:var(--warn-soft); border-color:var(--warn)}
.telling-melding.waarschuwing > svg{color:var(--warn)}
.telling-melding.loopt{border-color:var(--accent); background:var(--accent-soft)}
.telling-melding.klaar > svg{color:var(--accent)}
.tm-stip{width:.7rem; height:.7rem; border-radius:999px; background:var(--accent); flex-shrink:0; box-shadow:0 0 0 0 var(--accent); animation:tmPuls 1.8s infinite}
@keyframes tmPuls{0%{box-shadow:0 0 0 0 rgba(15,138,95,.45)} 70%{box-shadow:0 0 0 .55rem rgba(15,138,95,0)} 100%{box-shadow:0 0 0 0 rgba(15,138,95,0)}}
.tel-datum{display:flex; align-items:center; gap:.5rem; margin:-.2rem 0 .8rem; font-size:.88rem; color:var(--ink)}
.tel-datum svg{width:1rem; height:1rem; color:var(--accent)}
.tel-datum .td-status{margin-left:auto; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:.15rem .55rem}
.tel-datum.afgesloten .td-status{color:var(--muted); background:var(--surface-2)}
.volgorde-modus .tel-datum{display:none}

/* Zoekbalk vast onderaan het telscherm */
.zoekbalk-onder{
  position:fixed; z-index:30; left:50%; bottom:calc(.7rem + env(safe-area-inset-bottom));
  width:min(560px, calc(100% - 1.5rem)); margin-left:calc(min(560px, calc(100% - 1.5rem)) / -2);
  display:flex; align-items:center; gap:.5rem; padding:0 .9rem; height:2.7rem;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.08);
}
.zoekbalk-onder svg{width:1rem; height:1rem; color:var(--muted); flex-shrink:0}
.zoekbalk-onder input{flex:1; min-width:0; border:0; background:none; outline:none; font:inherit; font-size:16px; color:var(--ink); padding:0; height:100%}
.zoekbalk-onder:focus-within{border-color:var(--accent)}
body:has(#zoekbalk) main{padding-bottom:4.5rem}
.volgorde-modus .zoekbalk-onder{display:none}
.tel-datum .volgorde-knop{
  width:2rem; height:2rem; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; margin-left:.2rem
}
.tel-datum .volgorde-knop svg{width:1rem; height:1rem; color:var(--muted)}
.tel-datum{margin-bottom:1.2rem}
#tellijst .prod-card{scroll-margin-top:5.5rem}