@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* Compliance-dossier palet — licht, technisch, geen 'donker dashboard' */
  --paper:#eef0f3;        /* koele werkbladachtergrond */
  --card:#ffffff;
  --ink:#15181c;          /* bijna-zwarte tekst */
  --muted:#5c6672;        /* staalgrijs */
  --faint:#8a94a0;
  --line:#e0e4ea;         /* haarlijn */
  --line2:#cdd3db;
  --red:#c0392b;          /* merk-rood: gezag, spaarzaam */
  --red-d:#8f2318;
  /* status = fysieke keursticker-taal */
  --ok:#1c7a45;    --ok-bg:#e7f3ec;   --ok-br:#bfe0cc;
  --soon:#a9741a;  --soon-bg:#fbf1dd;  --soon-br:#eed6a3;
  --nok:#b5271b;   --nok-bg:#fbe9e7;   --nok-br:#f0c3bd;
  --rep:#a9741a;   --rep-bg:#fbf1dd;   --rep-br:#eed6a3;
  --shadow:0 1px 2px rgba(20,24,30,.04),0 8px 24px rgba(20,24,30,.05);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--paper);color:var(--ink);font-family:'Barlow',sans-serif;font-size:15px;line-height:1.5;min-height:100vh;}
::selection{background:rgba(192,57,43,.15);}
.mono{font-family:'IBM Plex Mono',monospace;}
button{font-family:inherit;}
a{color:var(--red);}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;}

/* ── eyebrow / labels ── */
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

/* ═══ LOGIN ═══ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(120% 80% at 50% -10%,#f7f8fa 0%,var(--paper) 60%);}
.login-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0;width:100%;max-width:404px;
  overflow:hidden;box-shadow:var(--shadow);}
.login-box .rule{height:4px;background:linear-gradient(90deg,var(--red),var(--red-d));}
.login-inner{padding:32px 30px 30px;}
.logo-row{display:flex;align-items:center;gap:13px;margin-bottom:6px;}
.logo-row img{height:42px;width:auto;object-fit:contain;}
.logo-row h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.01em;line-height:1;}
.logo-row p{font-size:11px;color:var(--muted);letter-spacing:.02em;margin-top:2px;}
.login-lead{font-size:13px;color:var(--muted);margin:14px 0 20px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.field{margin-bottom:14px;}
.field label{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.field input,.field select{width:100%;background:#fbfcfd;border:1px solid var(--line2);border-radius:9px;color:var(--ink);
  font-family:inherit;font-size:15px;padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s;}
.field input::placeholder{color:var(--faint);}
.field input:focus,.field select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.1);}
.btn{width:100%;padding:13px;border-radius:9px;border:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:filter .15s,transform .05s;}
.btn:active{transform:translateY(1px);}
.btn:hover{filter:brightness(1.05);}
.btn-red{background:var(--red);color:#fff;}
.btn-blue{background:var(--ink);color:#fff;margin-top:8px;}
.btn-green{background:var(--ok);color:#fff;}
.btn-ghost{background:#eef0f3;color:var(--muted);margin-top:8px;}
.err{background:var(--nok-bg);border:1px solid var(--nok-br);border-radius:8px;padding:10px 13px;font-size:13px;
  color:var(--nok);margin-bottom:14px;display:none;line-height:1.45;}
.login-foot{text-align:center;font-size:12px;color:var(--muted);margin-top:18px;}
.login-foot strong{color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:12px;}

/* ═══ APP SHELL ═══ */
.app{display:none;}
.hdr{background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(20,24,30,.02);position:sticky;top:0;z-index:100;}
.hdr .rule{height:3px;background:var(--red);}
.hdr-in{max-width:1200px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:10px 13px;flex-wrap:wrap;}
.hdr-in img{height:34px;width:auto;object-fit:contain;flex-shrink:0;}
.hdr-title{flex:1;min-width:0;}
.hdr-meta{display:contents;}
.hdr-title .wm{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;line-height:1;letter-spacing:-.01em;}
.hdr-title .sub{font-size:10.5px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-top:1px;}
.admin-badge{background:var(--ink);color:#fff;border-radius:5px;padding:3px 9px;font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:11px;letter-spacing:.08em;}
#userLbl{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--muted);border:1px solid var(--line2);background:var(--card);border-radius:7px;padding:5px 10px;white-space:nowrap;}
.hdr-out{background:transparent;border:1px solid var(--line2);color:var(--muted);border-radius:7px;padding:7px 12px;
  font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
.hdr-out:hover{border-color:var(--red);color:var(--red);}

.main{max-width:1200px;margin:0 auto;padding:24px 22px 60px;}

/* ── HERO / compliance-strip ── */
.hero{margin-bottom:22px;}
.hero h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:27px;letter-spacing:-.01em;line-height:1.05;margin-top:4px;}
.hero .hint{font-size:13px;color:var(--muted);margin-top:5px;}
.stats{margin-top:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.stat{padding:15px 16px;position:relative;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 1px 3px rgba(20,24,30,.05),0 6px 20px rgba(20,24,30,.04);display:flex;align-items:center;gap:13px;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;}
.stat:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(20,24,30,.08),0 12px 28px rgba(20,24,30,.08);}
.stat::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--line2);}
.stat.s-tot::before{background:var(--ink);}
.stat.s-ok::before{background:var(--ok);}
.stat.s-soon::before{background:var(--soon);}
.stat.s-exp::before{background:var(--nok);}
.st-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;}
.stat.s-tot .st-ic{background:#eef1f5;}
.stat.s-ok .st-ic{background:#e7f6ec;}
.stat.s-soon .st-ic{background:#fdf1e3;}
.stat.s-exp .st-ic{background:#fdeaea;}
.st-body{min-width:0;}
.stat .n{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:32px;line-height:1;letter-spacing:-.01em;}
.stat .l{font-size:10.5px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;line-height:1.25;}
.stat.s-ok .n{color:var(--ok);}
.stat.s-soon .n{color:var(--soon);}
.stat.s-exp .n{color:var(--nok);}
/* Dashboard: volle kleurvakken (zonder icoon), duidelijk verschil oranje/rood, eenheid 'items' */
.stat .st-ic{display:none!important;}
.stat::before{display:none!important;}
.stat{border:none!important;}
.stat .n{color:#fff!important;}
.stat .l{color:rgba(255,255,255,.85)!important;}
.stat .n::after{content:' items';font-size:11px;font-weight:600;letter-spacing:.03em;opacity:.8;margin-left:5px;text-transform:lowercase;}
.stat.s-tot{background:#2b3340;} .stat.s-tot .l{color:rgba(255,255,255,.7)!important;}
.stat.s-ok{background:#1c7a45;}
.stat.s-soon{background:#eb8a1a;} .stat.s-soon .n{color:#20160a!important;} .stat.s-soon .l{color:rgba(32,22,10,.85)!important;}
.stat.s-exp{background:#cf2e2e;}
.stat:hover{filter:brightness(1.06);}
/* Materieel-gezondheidsbalk */
.health{margin:14px 0 2px;}
.hb-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;}
.hb-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.hb-score{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;color:var(--ok);letter-spacing:.01em;}
.hb-track{display:flex;height:15px;border-radius:9px;overflow:hidden;background:var(--line);box-shadow:inset 0 1px 2px rgba(0,0,0,.09);}
.hb-seg{cursor:pointer;transition:filter .15s;min-width:3px;}
.hb-seg:hover{filter:brightness(1.13);}
.hb-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px;}
.hb-leg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);cursor:pointer;}
.hb-leg:hover{color:var(--red);}
.hb-leg i{width:11px;height:11px;border-radius:3px;display:inline-block;flex-shrink:0;}
.hb-leg b{font-weight:700;}
.stat.s-rep{background:#3a7fb5;}
.stat.s-afg{background:#6e1414;}
/* Afgekeurd = eigen bordeaux-kleur, los van rood 'vervallen' */
.bfail{background:#f6e5e5;color:#6e1414;border-color:#e0b8b8;}
.bfail::before{background:#6e1414;}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr);gap:10px;}.stat{padding:13px;gap:10px;}.st-ic{width:38px;height:38px;font-size:18px;}.stat .n{font-size:27px;}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line);}.hero h2{font-size:23px;}}

/* ── TABS ── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.ptab{padding:11px 15px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.05em;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;text-transform:uppercase;white-space:nowrap;
  transition:color .15s;margin-bottom:-1px;}
.ptab:hover{color:var(--ink);}
.ptab.active{color:var(--red);border-bottom-color:var(--red);}

/* ── FILTERBALK ── */
.fbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.invbar{display:flex;justify-content:flex-end;margin:0 0 14px;}
.invbtn{background:#c0102e;color:#fff;border:none;border-radius:9px;padding:10px 16px;font-size:13px;font-weight:800;cursor:pointer;font-family:'Barlow Condensed',sans-serif;letter-spacing:.02em;}
.invbtn:hover{background:#a50d27;}
.search{flex:1 1 100%;min-width:0;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23788292' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 15px center;border:1px solid var(--line2);border-radius:10px;color:var(--ink);
  font-size:14px;padding:12px 14px 12px 42px;outline:none;transition:border-color .15s,box-shadow .15s;}
.search::placeholder{color:var(--faint);}
.search:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.09);}
.fbtn{padding:8px 13px;border-radius:8px;border:1px solid var(--line2);background:var(--card);color:var(--muted);
  font-size:12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.04em;cursor:pointer;
  white-space:nowrap;transition:all .15s;}
.fbtn:hover{border-color:var(--line2);color:var(--ink);}
.fbtn.active{border-color:var(--red);color:var(--red);background:var(--nok-bg);}
.kfbtn{padding:6px 12px;border-radius:20px;border:1px solid var(--line2);background:var(--card);color:var(--muted);
  font-size:12px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:600;letter-spacing:.03em;transition:all .15s;}
.kfbtn:hover{color:var(--ink);}
.kfbtn.active{border-color:var(--ink);color:var(--ink);background:#eef0f3;}

/* ── TABEL (document-grade) ── */
.twrap{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;overflow-x:auto;
  margin-bottom:20px;box-shadow:var(--shadow);}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
thead th{background:#f7f8fa;padding:11px 16px;text-align:left;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--line);
  white-space:nowrap;position:sticky;top:0;}
tbody td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink);}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background .12s;}
tbody tr:hover td{background:#f9fafb;cursor:pointer;}
/* eerste kolom = asset-ID, technisch monospace */
tbody td:first-child{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:12.5px;letter-spacing:-.01em;}
tbody td:first-child strong{font-weight:600;}
.nodata{text-align:center;padding:38px 16px;color:var(--muted);font-size:14px;}
.grouphdr td{background:#eef1f5;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;color:#1f2733;padding:9px 14px;border-top:2px solid var(--line2);letter-spacing:.02em;}
.grouphdr .ghcount{font-weight:400;font-size:13px;color:var(--muted);}

/* ── KEURSTICKER / status-pill ── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:20px;font-size:11.5px;
  font-weight:700;font-family:'Barlow Condensed',sans-serif;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.6);}
.bok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-br);} .bok::before{background:var(--ok);}
.brep{background:var(--rep-bg);color:var(--rep);border-color:var(--rep-br);} .brep::before{background:var(--rep);}
.bsoon{background:var(--soon-bg);color:var(--soon);border-color:var(--soon-br);} .bsoon::before{background:var(--soon);}
.bnok{background:var(--nok-bg);color:var(--nok);border-color:var(--nok-br);} .bnok::before{background:var(--nok);}

/* actie-knop in rij (📄) */
tbody td button{background:#f2f4f7;border:1px solid var(--line2);color:var(--muted);border-radius:7px;padding:5px 10px;
  font-size:12px;cursor:pointer;transition:all .15s;}
tbody td button:hover{border-color:var(--red);color:var(--red);background:var(--nok-bg);}

/* ── CONTACT-KAART ── */
.contact{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;font-size:13.5px;
  color:var(--muted);line-height:2;box-shadow:var(--shadow);}
.contact a{display:block;color:var(--red);text-decoration:none;font-weight:600;margin-top:5px;}
.contact a:hover{text-decoration:underline;}
.contact strong{color:var(--ink);display:block;margin-bottom:8px;font-family:'Barlow Condensed',sans-serif;font-size:16px;
  font-weight:700;letter-spacing:.01em;}

/* ── ADMIN ── */
.admin-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:18px;box-shadow:var(--shadow);}
.admin-card h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;margin-bottom:16px;color:var(--ink);
  display:flex;align-items:center;gap:8px;}
.admin-card h3::before{content:"";width:4px;height:16px;background:var(--red);border-radius:2px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.klant-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.klant-item{background:#f7f8fa;border:1px solid var(--line);border-radius:9px;padding:12px 14px;display:flex;
  justify-content:space-between;align-items:center;gap:12px;}
.klant-item .kn{font-weight:600;font-size:14px;}
.klant-item .ke{font-size:12px;color:var(--muted);font-family:'IBM Plex Mono',monospace;margin-top:2px;}
.klant-del{background:transparent;border:1px solid var(--line2);color:var(--muted);border-radius:7px;padding:6px 12px;
  font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;flex-shrink:0;}
.klant-del:hover{border-color:var(--red);color:var(--red);}
.sep{height:1px;background:var(--line);margin:18px 0;}

/* ── MODAL ── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(21,24,28,.5);backdrop-filter:blur(3px);z-index:200;
  align-items:center;justify-content:center;padding:16px;}
.modal-bg.open{display:flex;}
.modal{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;width:100%;max-width:560px;
  max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(20,24,30,.25);}
.modal h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;margin-bottom:18px;line-height:1.15;}
.mcl{float:right;background:#f2f4f7;border:1px solid var(--line2);color:var(--muted);border-radius:8px;padding:7px 13px;
  cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;transition:all .15s;}
.mcl:hover{border-color:var(--red);color:var(--red);}
.drow{display:flex;padding:9px 0;border-bottom:1px solid var(--line);}
.drow:last-child{border-bottom:none;}
.dlbl{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);width:44%;flex-shrink:0;padding-top:1px;}
.dval{font-size:14px;color:var(--ink);}

/* ── TOAST ── */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;
  padding:11px 20px;border-radius:22px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.02em;opacity:0;transition:all .25s;pointer-events:none;z-index:999;white-space:nowrap;
  box-shadow:0 8px 24px rgba(20,24,30,.25);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.err{background:var(--red);}

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

/* ══ LICHTE, STRAKKE SHELL (klantverzoek: portaal licht & clean) ══ */
:root{--red-lite:#c0392b;}
body{background:radial-gradient(130% 90% at 50% -20%,#f8fafc 0%,var(--paper) 55%);}
.login-wrap{background:radial-gradient(120% 80% at 50% -12%,#ffffff 0%,var(--paper) 62%);}
.admin-badge{background:var(--red);color:#fff;}

/* ══ FELLERE KLEUREN + GROTERE TEKST (klantverzoek) ══ */
/* status = felle, gevulde keurstickers met witte tekst */
.badge{font-size:13px;padding:5px 13px 5px 11px;font-weight:800;color:#fff!important;border:none!important;letter-spacing:.05em;}
.badge::before{background:#fff!important;box-shadow:none!important;width:8px;height:8px;}
.bok{background:#0f9d58!important;}
.brep{background:#f97316!important;}
.bsoon{background:#f97316!important;}
.bnok{background:#e11d2a!important;}
/* felle statuscijfers + dikkere kleurbalken */
.stat .n{font-size:40px;}
.stat .l{font-size:12px;}
.stat.s-ok .n{color:#0f9d58;}   .stat.s-ok::before{background:#0f9d58;height:4px;}
.stat.s-soon .n{color:#f97316;} .stat.s-soon::before{background:#f97316;height:4px;}
.stat.s-exp .n{color:#e11d2a;}  .stat.s-exp::before{background:#e11d2a;height:4px;}
/* groter & duidelijker leesbaar */
.hero h2{font-size:31px;}
.hero .hint{font-size:15px;color:var(--muted);}
.eyebrow{font-size:12px;}
thead th{font-size:12px;letter-spacing:.06em;}
tbody td{font-size:15px;padding:13px 16px;}
tbody td:first-child{font-size:13.5px;}
.dval{font-size:15.5px;}
.dlbl{font-size:12.5px;}
.search{font-size:15px;padding:13px 14px 13px 42px;}
.fbtn{font-size:13px;}
.badge{font-size:13px;}
/* Certificaat-knop in de rij — duidelijk gelabeld */
.cert-btn{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1.5px solid var(--red);color:var(--red);
  border-radius:8px;padding:6px 13px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.04em;cursor:pointer;white-space:nowrap;transition:all .15s;}
.cert-btn:hover{background:var(--red);color:#fff;}

/* ══ Actieve filterknop krijgt eigen kleur ══ */
.fbtn.f-all.active{background:#15181c;border-color:#15181c;color:#fff;}
.fbtn.f-ok.active{background:#0f9d58;border-color:#0f9d58;color:#fff;}
.fbtn.f-rep.active{background:#f97316;border-color:#f97316;color:#fff;}
.fbtn.f-nok.active{background:#e11d2a;border-color:#e11d2a;color:#fff;}
/* ── Mobiel: brede tabellen als leesbare kaarten ── */
@media (max-width:640px){
  /* Header netjes op mobiel — logo + titel op regel 1, rest op een nette tweede regel */
  .hdr-in{ padding:9px 14px; column-gap:10px; row-gap:8px; align-items:center; }
  .hdr-in img{ height:30px; }
  .hdr-title{ flex:1 1 auto; min-width:0; }
  .hdr-title .wm{ font-size:15px; }
  .hdr-title .sub{ font-size:9.5px; letter-spacing:.06em; }
  .hdr-meta{ display:flex; flex:1 1 100%; align-items:center; flex-wrap:wrap; column-gap:8px; row-gap:8px; }
  .hdr-meta #userLbl{ font-size:11px; padding:4px 8px; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .hdr-meta #toKeuringtool{ margin-right:0 !important; margin-left:auto; padding:7px 12px; font-size:12px; }
  .hdr-meta .hdr-out{ margin-left:auto; padding:7px 12px; }
  .tabs{ flex-wrap:wrap; overflow-x:visible; row-gap:0; }
  .ptab{ white-space:normal; padding:9px 11px; font-size:11.5px; }
  .search{ width:100%; min-width:0; }
  /* Filterbalk netjes stapelen op mobiel i.p.v. rommelig wrappen */
  .fbar{ gap:8px; }
  .fbar .fbtn{ flex:1 1 calc(50% - 4px); text-align:center; padding:11px 8px; font-weight:600; }
  .fbar > button:not(.fbtn){ flex:1 1 100%; width:100%; box-sizing:border-box; justify-content:center; }
  .fbar select{ flex:1 1 100%; width:100%; box-sizing:border-box; }
  #wisFilters{ flex:1 1 100%; }
  .invbar{ margin-bottom:12px; }
  .invbtn{ width:100%; }
  .rtable thead{ display:none; }
  .rtable, .rtable tbody, .rtable tr, .rtable td{ display:block; width:auto; }
  .rtable tbody tr{ border:1px solid #e2e5ea; border-radius:10px; margin:0 0 10px; padding:4px 2px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.05); }
  .rtable tbody tr.grouphdr{ background:#eef0f3; border:none; padding:8px 12px; font-weight:700; }
  .rtable tbody tr.grouphdr td{ display:block; text-align:left; padding:0; }
  .rtable tbody td{ display:flex; justify-content:space-between; align-items:center; gap:12px; border:none; border-bottom:1px solid #f1f2f4; padding:8px 12px; text-align:right; font-size:13px; }
  .rtable tbody td:last-child{ border-bottom:none; }
  .rtable tbody td::before{ content:attr(data-label); font-weight:700; color:#8a94a0; font-size:11px; text-transform:uppercase; letter-spacing:.03em; text-align:left; margin-right:auto; }
  .rtable tbody td.nodata{ display:block; text-align:center; }
  .rtable tbody td.nodata::before{ content:""; }
  .rtable tbody td[data-label="Certificaat"]{ justify-content:center; }
  .rtable tbody td[data-label="Certificaat"]::before{ content:""; }
  .rtable tbody td[data-label="Certificaat"] .cert-btn{ width:100%; }
}

.rtable tbody tr{transition:background .12s ease;}
.rtable tbody tr:hover{background:#f6f8fb;}
/* ── Documenten-tab: zoekbalk, mappen per jaar, leesbare lichte kaarten ── */
.docsearch{width:100%;margin-bottom:14px;}
.doc-klant{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;margin:18px 0 10px;color:var(--ink);border-bottom:2px solid var(--red);padding-bottom:4px;}
.docfolder{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.18);}
.docfolder-h{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;user-select:none;background:#f2f4f8;color:var(--ink);}
.docfolder-h:hover{background:#e9edf3;}
.docfolder-ic{font-size:17px;line-height:1;}
.docfolder-lbl{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;letter-spacing:.03em;}
.docfolder-cnt{background:#d8dee7;color:#3a424e;border-radius:20px;font-size:11px;font-weight:700;padding:1px 8px;min-width:20px;text-align:center;}
.docfolder-chev{margin-left:auto;color:var(--muted);font-size:18px;transition:transform .15s ease;}
.docfolder.open .docfolder-chev{transform:rotate(90deg);}
.docfolder-b{display:none;}
.docfolder.open .docfolder-b{display:block;}
.docrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--ink);}
.docrow:hover{background:#f6f8fb;}
.docrow-l{display:flex;align-items:center;gap:11px;min-width:0;}
.docrow-ic{font-size:22px;flex-shrink:0;line-height:1;}
.docrow-t{min-width:0;}
.docrow-nm{font-weight:700;font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);}
.docrow-sub{font-size:11px;color:var(--muted);}
.docrow-open{color:var(--red);font-weight:700;flex-shrink:0;white-space:nowrap;font-size:13px;}
.docrow-link{display:flex;align-items:center;gap:11px;min-width:0;flex:1;text-decoration:none;color:var(--ink);}
.docrow-act{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.docrow-del{background:none;border:1px solid var(--line);color:#c0392b;border-radius:8px;padding:6px 9px;cursor:pointer;font-size:14px;line-height:1;}
.docrow-del:hover{background:#c0392b;color:#fff;border-color:#c0392b;}
.btn,.ptab,.hdr-out,.klant-card{transition:all .16s ease;}
.modal{animation:mpop .18s cubic-bezier(.2,.7,.3,1);}
@keyframes mpop{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}

/* ── Groepskoppen (per opdracht) duidelijker + ID-nummer als opvallend vakje ── */
.grouphdr td{background:linear-gradient(#eef2f7,#e3e9f0)!important;font-family:'Barlow Condensed',sans-serif!important;font-weight:800!important;font-size:16px!important;color:#1c2430!important;padding:12px 16px!important;border-top:2px solid var(--red)!important;letter-spacing:.02em;}
.grouphdr .ghcount{color:var(--muted)!important;font-weight:600!important;font-size:13px!important;}
.rtable td[data-label="ID nummer"] strong{display:inline-block;background:#eef1f5;border:1px solid #d5dbe3;border-radius:7px;padding:2px 10px;color:#15181c;font-family:'IBM Plex Mono',monospace;font-weight:600;}
@media (max-width:640px){ .rtable td[data-label="ID nummer"] strong{padding:3px 11px;font-size:13px;} }

/* ═══════════ DONKERE MODUS ═══════════ */
.theme-toggle{background:transparent;border:1px solid var(--line2);color:var(--muted);border-radius:7px;padding:7px 10px;font-size:15px;cursor:pointer;line-height:1;}
.theme-toggle:hover{border-color:var(--red);color:var(--red);}
body.dark{
  --paper:#0c1016; --card:#1e2734; --ink:#e8ebef; --muted:#9aa4b1; --faint:#6f7883;
  --line:#333f4d; --line2:#42505f; --red:#e35b4c; --red-d:#c0392b;
  --ok:#3fb56e;  --ok-bg:rgba(63,181,110,.15);  --ok-br:rgba(63,181,110,.40);
  --soon:#e0a020; --soon-bg:rgba(224,160,32,.15); --soon-br:rgba(224,160,32,.40);
  --nok:#e35b4c; --nok-bg:rgba(227,91,76,.15);   --nok-br:rgba(227,91,76,.42);
  --rep:#e0a020; --rep-bg:rgba(224,160,32,.15);  --rep-br:rgba(224,160,32,.40);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.5);
  background:radial-gradient(130% 90% at 50% -20%,#121720 0%,var(--paper) 55%);
}
body.dark .hdr{background:rgba(18,24,33,.88);}
body.dark .field input,body.dark .field select{background:#141a24;color:var(--ink);}
body.dark .btn-ghost{background:#242c39;}
body.dark thead th{background:#222a37;color:#cbd3dc;}
body.dark tbody tr:hover td{background:rgba(255,255,255,.045);}
body.dark tbody td button{background:#242c39;color:var(--muted);}
body.dark .klant-item{background:#1e2531;}
body.dark .mcl{background:#242c39;}
body.dark .kfbtn.active{background:#242c39;}
body.dark .cert-btn{background:transparent;}
body.dark .docrow:hover{background:#222a37;}
body.dark .login-wrap{background:radial-gradient(120% 80% at 50% -12%,#1b2230 0%,var(--paper) 62%);}
body.dark .grouphdr td{background:linear-gradient(#222c3a,#1b2430)!important;color:#e8ebef!important;}
body.dark .rtable td[data-label="ID nummer"] strong{background:#222a37;border-color:#3a434f;color:#e8ebef;}
@media (max-width:640px){
  body.dark .rtable tbody tr{background:#1a212c;border-color:#2a323d;}
  body.dark .rtable tbody tr.grouphdr{background:#222a37;}
}

/* ═══════════ PREMIUM: BEWEGENDE ACHTERGROND + LOGO + KNOP-LIFT ═══════════ */
.fx-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.fx-glow{position:absolute;border-radius:50%;filter:blur(52px);will-change:transform;}
.fx-g1{width:38vmax;height:38vmax;top:-13vmax;left:-9vmax;background:radial-gradient(circle,rgba(192,57,43,.15),transparent 66%);animation:fxDrift1 19s ease-in-out infinite;}
.fx-g2{width:34vmax;height:34vmax;bottom:-13vmax;right:-7vmax;background:radial-gradient(circle,rgba(47,129,201,.12),transparent 66%);animation:fxDrift2 23s ease-in-out infinite;}
.fx-g3{width:26vmax;height:26vmax;top:42%;left:56%;background:radial-gradient(circle,rgba(28,122,69,.09),transparent 66%);animation:fxDrift3 27s ease-in-out infinite;}
@keyframes fxDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(6vmax,4vmax) scale(1.14);}}
@keyframes fxDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-5vmax,-3vmax) scale(1.1);}}
@keyframes fxDrift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-4vmax,5vmax) scale(1.12);}}
.fx-star{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--ink);opacity:0;animation:fxTwinkle 6s ease-in-out infinite;}
@keyframes fxTwinkle{0%,100%{opacity:0;transform:scale(.3);}48%{opacity:.45;transform:scale(1);}}
body.dark .fx-g1{background:radial-gradient(circle,rgba(224,72,58,.40),transparent 66%);}
body.dark .fx-g2{background:radial-gradient(circle,rgba(47,129,201,.32),transparent 66%);}
body.dark .fx-g3{background:radial-gradient(circle,rgba(63,181,110,.22),transparent 66%);}
body.dark .fx-star{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.7);animation-name:fxTwinkleDark;}
@keyframes fxTwinkleDark{0%,100%{opacity:0;transform:scale(.3);}45%{opacity:.9;transform:scale(1);}58%{opacity:.5;transform:scale(.8);}}
/* Zwevend logo (header + login) + zachte gloed op het login-logo */
.hdr-in img{animation:xtFloat 6s ease-in-out infinite;}
.logo-row img{animation:xtFloat 6s ease-in-out infinite,xtLogoGlow 5s ease-in-out infinite;}
@keyframes xtFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes xtLogoGlow{0%,100%{filter:drop-shadow(0 5px 14px rgba(192,57,43,.14));}50%{filter:drop-shadow(0 6px 22px rgba(192,57,43,.32));}}
/* Knoppen: hover-lift + schaduw */
.btn-red,.btn-blue,.btn-green,.btn-ghost,.invbtn,.cert-btn,.ptab{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,color .15s ease,border-color .15s ease;}
.btn-red:hover,.btn-green:hover,.invbtn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(192,57,43,.28);filter:brightness(1.05);}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(20,24,28,.22);}
.btn-ghost:hover,.cert-btn:hover{transform:translateY(-2px);}
@media(prefers-reduced-motion:reduce){.fx-glow,.fx-star,.hdr-in img,.logo-row img{animation:none!important;}}

/* ═══════════ PREMIUM MOTION v2: entrance-choreografie, sheen, levende tegels ═══════════ */
/* — basis-keyframes — */
@keyframes fxUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes fxRow{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes loginIn{from{opacity:0;transform:translateY(20px) scale(.965);}to{opacity:1;transform:none;}}

/* — login: kaart komt omhoog, glanslijn beweegt — */
.login-box{animation:loginIn .55s cubic-bezier(.2,.7,.3,1) both;}
.hdr .rule,.login-box .rule{background:linear-gradient(90deg,var(--red) 0%,var(--red) 38%,#ff9a86 50%,var(--red) 62%,var(--red) 100%);background-size:230% 100%;animation:ruleSheen 5.5s linear infinite;}
@keyframes ruleSheen{from{background-position:210% 0;}to{background-position:-30% 0;}}

/* — hero: titel glijdt in, rood accentlijntje tekent zichzelf — */
.hero h2{animation:fxUp .45s cubic-bezier(.2,.7,.3,1) both;position:relative;padding-bottom:11px;}
.hero h2::after{content:"";position:absolute;left:1px;bottom:2px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--red),#f0806c);animation:heroLine .7s cubic-bezier(.2,.7,.3,1) .3s both;}
@keyframes heroLine{from{width:0;opacity:0;}to{width:58px;opacity:1;}}

/* — dashboard-tegels: diepe gradients + lift + periodieke glans-sweep — */
.stat.s-tot{background:linear-gradient(135deg,#3a4557,#232a38);}
.stat.s-ok{background:linear-gradient(135deg,#23a05c,#14713c);}
.stat.s-soon{background:linear-gradient(135deg,#f9a02c,#e0790e);}
.stat.s-exp{background:linear-gradient(135deg,#e13d3d,#ad1f1f);}
.stat.s-rep{background:linear-gradient(135deg,#4a92cc,#2e6ca2);}
.stat.s-afg{background:linear-gradient(135deg,#8a1d1d,#5a0f0f);}
.stats .stat{animation:fxUp .5s cubic-bezier(.2,.7,.3,1) both;}
.stats .stat:nth-child(1){animation-delay:.05s;} .stats .stat:nth-child(2){animation-delay:.11s;}
.stats .stat:nth-child(3){animation-delay:.17s;} .stats .stat:nth-child(4){animation-delay:.23s;}
.stats .stat:nth-child(5){animation-delay:.29s;} .stats .stat:nth-child(6){animation-delay:.35s;}
.stat{position:relative;}
.stat::after{content:"";position:absolute;top:-25%;bottom:-25%;left:-45%;width:38%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-16deg) translateX(-40%);animation:statSheen 7.5s ease-in-out infinite;}
.stats .stat:nth-child(2)::after{animation-delay:.9s;} .stats .stat:nth-child(3)::after{animation-delay:1.8s;}
.stats .stat:nth-child(4)::after{animation-delay:2.7s;} .stats .stat:nth-child(5)::after{animation-delay:3.6s;}
.stats .stat:nth-child(6)::after{animation-delay:4.5s;}
@keyframes statSheen{0%,64%{transform:skewX(-16deg) translateX(-40%);}82%,100%{transform:skewX(-16deg) translateX(480%);}}
.stat:hover{transform:translateY(-3px) scale(1.015);box-shadow:0 4px 10px rgba(20,24,30,.14),0 16px 34px rgba(20,24,30,.16);}

/* — health-balk: veegt van links in, score-cijfer glijdt op — */
.hb-track{animation:hbWipe .95s cubic-bezier(.25,.7,.3,1) .2s both;}
@keyframes hbWipe{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
.hb-score{display:inline-block;animation:fxUp .5s ease .45s both;}
.health{animation:fxUp .5s ease .25s both;}

/* — tabs: onderstreping groeit vloeiend onder de actieve tab — */
.tabs{animation:fxUp .45s ease .12s both;}
.ptab{position:relative;}
.ptab.active{border-bottom-color:transparent;}
.ptab::after{content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--red),#e0684f);transform:scaleX(0);transform-origin:left center;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);}
.ptab.active::after{transform:scaleX(1);}
.ptab:hover{transform:translateY(-1px);}

/* — tab-inhoud + rijen: alles glijdt gefaseerd binnen (ook bij tab-wissel/filter) — */
.tc{animation:fxUp .4s cubic-bezier(.2,.7,.3,1) both;}
.rtable tbody tr{animation:fxRow .32s ease both;animation-delay:.3s;}
.rtable tbody tr:nth-child(1){animation-delay:.02s;} .rtable tbody tr:nth-child(2){animation-delay:.05s;}
.rtable tbody tr:nth-child(3){animation-delay:.08s;} .rtable tbody tr:nth-child(4){animation-delay:.11s;}
.rtable tbody tr:nth-child(5){animation-delay:.14s;} .rtable tbody tr:nth-child(6){animation-delay:.17s;}
.rtable tbody tr:nth-child(7){animation-delay:.20s;} .rtable tbody tr:nth-child(8){animation-delay:.22s;}
.rtable tbody tr:nth-child(9){animation-delay:.24s;} .rtable tbody tr:nth-child(10){animation-delay:.26s;}
.rtable tbody tr:nth-child(11){animation-delay:.28s;} .rtable tbody tr:nth-child(12){animation-delay:.30s;}
/* rij-hover: rood accent schuift aan de linkerkant in */
.rtable tbody tr:not(.grouphdr):hover td:first-child{box-shadow:inset 3px 0 0 var(--red);}

/* — status-stip in de badge pulseert zachtjes — */
.badge::before{animation:dotPulse 2.3s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.4);opacity:.65;}}

/* — knoppen: glans-sweep bij hover (bovenop bestaande lift) — */
.btn-red,.btn-blue,.btn-green,.invbtn{position:relative;overflow:hidden;}
.btn-red::after,.btn-blue::after,.btn-green::after,.invbtn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);pointer-events:none;}
.btn-red:hover::after,.btn-blue:hover::after,.btn-green:hover::after,.invbtn:hover::after{animation:btnSheen .65s ease;}
@keyframes btnSheen{from{left:-70%;}to{left:135%;}}
.fbtn,.kfbtn{transition:all .15s,transform .15s ease;}
.fbtn:hover,.kfbtn:hover{transform:translateY(-1px);}

/* — kleine levendigheid: themaknop kantelt, documentrijen schuiven aan, modal-achtergrond fade — */
.theme-toggle{transition:transform .3s ease,border-color .15s,color .15s;}
.theme-toggle:hover{transform:rotate(-14deg) scale(1.1);}
.docrow{transition:background .15s,transform .18s ease;}
.docrow:hover{transform:translateX(4px);}
.docfolder{transition:box-shadow .2s ease,transform .2s ease;}
.docfolder:hover{box-shadow:0 4px 14px rgba(20,24,30,.12);}
.modal-bg.open{animation:bgFade .22s ease;}
@keyframes bgFade{from{opacity:0;}to{opacity:1;}}
.contact,.admin-card,.twrap{transition:box-shadow .25s ease;}
.twrap:hover{box-shadow:0 2px 5px rgba(20,24,30,.06),0 14px 34px rgba(20,24,30,.09);}

/* — donkere modus: glans iets zachter — */
body.dark .stat::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.20),transparent);}
body.dark .twrap:hover{box-shadow:0 2px 6px rgba(0,0,0,.5),0 16px 38px rgba(0,0,0,.55);}
/* FIX: rij-hover was ook in donkere modus lichtgrijs (#f6f8fb) → tekst onleesbaar. Donkere hover-tint. */
body.dark .rtable tbody tr:hover{background:#26303f;}

/* — logo: GROTER + fonkelende sterretjes + duidelijke glinstering — */
.hdr-in img{height:46px;}
.logo-row img{height:58px;}
@media(max-width:640px){.hdr-in img{height:38px;}}
.hdr-in{position:relative;}
.logo-row{position:relative;}
.hdr-in::before,.hdr-in::after,.logo-row::before,.logo-row::after{content:"✦";position:absolute;z-index:6;pointer-events:none;
  color:#e0483a;text-shadow:0 0 8px rgba(255,255,255,1),0 0 16px rgba(224,72,58,.8);opacity:0;
  animation:xtSpark 3.4s ease-in-out infinite;}
.hdr-in::before{left:2px;top:-2px;font-size:16px;}
.hdr-in::after{left:56px;top:30px;font-size:11px;animation-delay:1.7s;}
.logo-row::before{left:-6px;top:-8px;font-size:20px;}
.logo-row::after{left:64px;top:36px;font-size:13px;animation-delay:1.7s;}
@keyframes xtSpark{0%,100%{opacity:0;transform:scale(.2) rotate(0deg);}12%{opacity:1;transform:scale(1.15) rotate(25deg);}26%{opacity:0;transform:scale(.25) rotate(55deg);}}
body.dark .hdr-in::before,body.dark .hdr-in::after,body.dark .logo-row::before,body.dark .logo-row::after{
  color:#fff;text-shadow:0 0 8px rgba(255,255,255,1),0 0 16px rgba(224,72,58,.9);}
/* levendiger zweven (grotere beweging + kanteling) — overschrijft eerdere xtFloat */
@keyframes xtFloat{0%,100%{transform:translateY(0) rotate(0deg);}25%{transform:translateY(-3px) rotate(-2.2deg);}50%{transform:translateY(-8px) rotate(0deg);}75%{transform:translateY(-3px) rotate(2.2deg);}}
/* header-logo licht periodiek duidelijk op */
.hdr-in img{animation:xtFloat 5s ease-in-out infinite,xtGlint 6s ease-in-out infinite 1.4s;}
@keyframes xtGlint{0%,80%,98%,100%{filter:brightness(1);}88%{filter:brightness(2) drop-shadow(0 0 16px rgba(255,140,115,.95));}}
/* login-logo: gloed-puls + duidelijke periodieke glinster gecombineerd (één filter-animatie) */
.logo-row img{animation:xtFloat 5s ease-in-out infinite,xtLogoGlow2 6s ease-in-out infinite;}
@keyframes xtLogoGlow2{
  0%,100%{filter:drop-shadow(0 5px 14px rgba(192,57,43,.14)) brightness(1);}
  40%{filter:drop-shadow(0 6px 22px rgba(192,57,43,.32)) brightness(1);}
  86%{filter:drop-shadow(0 0 18px rgba(255,140,115,.9)) brightness(1.9);}
  94%{filter:drop-shadow(0 5px 14px rgba(192,57,43,.2)) brightness(1);}
}
/* — tab-koppen veel duidelijker: groter en vetter, bewust ZONDER kaders — */
.tabs{gap:6px;border-bottom:2px solid var(--line);}
.ptab{font-size:15.5px;padding:13px 16px;font-weight:800;letter-spacing:.045em;color:var(--muted);}
.ptab:hover{color:var(--ink);}
.ptab.active{color:var(--red);}
.ptab::after{height:3.5px;bottom:-2px;left:9px;right:9px;}
@media(max-width:640px){
  .ptab{font-size:13.5px;padding:11px 13px;}
}

/* — gedeeltes verschijnen gefaseerd: elk blok binnen een tabblad glijdt na elkaar in — */
.tc>*{animation:fxUp .45s cubic-bezier(.2,.7,.3,1) both;}
.tc>:nth-child(1){animation-delay:.03s;} .tc>:nth-child(2){animation-delay:.10s;}
.tc>:nth-child(3){animation-delay:.17s;} .tc>:nth-child(4){animation-delay:.24s;}
.tc>:nth-child(5){animation-delay:.31s;} .tc>:nth-child(n+6){animation-delay:.38s;}
@media(prefers-reduced-motion:reduce){.hdr-in::before,.hdr-in::after,.logo-row::before,.logo-row::after,.tc>*{animation:none!important;}}

/* ── Toegang-wizard (Beheer): resultaatpaneel ── */
.tg-ok{background:var(--ok-bg);border:1px solid var(--ok-br);color:var(--ok);border-radius:9px;padding:11px 14px;font-size:14px;font-weight:600;margin-bottom:10px;animation:fxUp .35s ease both;}
.tg-warn{background:var(--soon-bg);border:1px solid var(--soon-br);color:var(--soon);border-radius:9px;padding:10px 13px;font-size:13px;line-height:1.55;margin-bottom:10px;}
.tg-lbl{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:8px 0 6px;}
#tg_msg{width:100%;min-height:225px;background:#fbfcfd;border:1px solid var(--line2);border-radius:9px;padding:12px 14px;font-family:inherit;font-size:13.5px;line-height:1.55;color:var(--ink);resize:vertical;outline:none;}
#tg_msg:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(192,57,43,.1);}
body.dark #tg_msg{background:#141a24;}
.tg-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.tg-btns .btn{flex:1 1 180px;width:auto;margin:0;}
#tg_klant{width:100%;background:#fbfcfd;border:1px solid var(--line2);border-radius:9px;color:var(--ink);font-family:inherit;font-size:15px;padding:12px 14px;outline:none;}
body.dark #tg_klant{background:#141a24;}
/* uitklap-secties in Beheer: adres (wizard) + oud klant-formulier (zonder toegang) */
.tgadr{margin:2px 0 14px;}
.tgadr summary,.nkfold summary{cursor:pointer;user-select:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:13.5px;letter-spacing:.04em;color:var(--muted);padding:9px 12px;border:1px dashed var(--line2);
  border-radius:9px;transition:color .15s,border-color .15s;}
.tgadr summary:hover,.nkfold summary:hover{color:var(--ink);border-color:var(--faint);}
.tgadr[open] summary,.nkfold[open] summary{color:var(--ink);border-style:solid;margin-bottom:4px;}
.nkfold{margin-top:2px;}
.nkfold>*:not(summary){animation:fxUp .3s ease both;}

/* — toegankelijkheid: alle beweging uit bij reduced motion — */
@media(prefers-reduced-motion:reduce){
  .login-box,.hdr .rule,.login-box .rule,.hero h2,.hero h2::after,.stats .stat,.stat::after,
  .hb-track,.hb-score,.health,.tabs,.tc,.rtable tbody tr,.badge::before,.modal-bg.open{animation:none!important;}
  .ptab::after,.theme-toggle,.docrow,.fbtn,.kfbtn{transition:none!important;}
  .stat:hover,.ptab:hover,.docrow:hover,.fbtn:hover,.kfbtn:hover{transform:none!important;}
}