:root{
  color-scheme:light dark;
  --green:#E3521E;--green2:#CA431B;--accent2:#ef6a3a;
  --brandsoft:#fbece4;--leaf:#fbede5;
  --bg:#faf7f3;--bg2:#fceee5;--card:#fff;--surface2:#f8f4f1;--hover:#fbf7f3;
  --line:#e9e7e7;--ink:#20242b;--muted:#6f7681;--warn:#ea580c;--bad:#dc2626;--ok:#16a34a;
  --chip:#f1f0f1;--field:#fff;--fieldbd:#e0dcdc;
  --shadow:0 1px 2px rgba(24,30,48,.05),0 10px 28px rgba(24,30,48,.06);
  --shadow-lg:0 2px 6px rgba(24,30,48,.06),0 18px 42px rgba(24,30,48,.12);
  --spring:cubic-bezier(.2,.7,.3,1);
  --serif:'Iowan Old Style','Palatino Linotype','Book Antiqua',Georgia,'Times New Roman',serif;
}
@media (prefers-color-scheme:dark){:root{
  --brandsoft:rgba(227,82,30,.15);--leaf:rgba(227,82,30,.16);
  --bg:#0e1117;--bg2:#141925;--card:#161b25;--surface2:#1b2230;--hover:#1b2230;
  --line:rgba(255,255,255,.10);--ink:#e7ebf3;--muted:#94a0b4;
  --chip:#1d2433;--field:#1d2433;--fieldbd:rgba(255,255,255,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.34);
  --shadow-lg:0 2px 8px rgba(0,0,0,.45),0 22px 50px rgba(0,0,0,.48);
}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;color:var(--ink);background:radial-gradient(1100px 360px at 100% -10%,var(--bg2),transparent 70%),var(--bg);font-size:14px;padding-bottom:calc(86px + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
svg.ic{width:17px;height:17px;flex-shrink:0;stroke:currentColor}
header{position:sticky;top:0;z-index:20;background:linear-gradient(125deg,#20242b 0%,#2b3038 70%,#343a44 100%);color:#fff;padding:calc(env(safe-area-inset-top) + 13px) 24px 13px;display:flex;align-items:center;gap:16px;box-shadow:0 4px 22px rgba(20,22,28,.2);border-bottom:2px solid var(--green);flex-wrap:wrap}
header .logobadge img{height:42px;width:auto;display:block}
header h1{font-family:var(--serif);font-size:20.5px;margin:0;font-weight:700;letter-spacing:0;color:#fff}
header .sub{font-size:12px;color:#aab2bd;margin-top:2px;letter-spacing:.1px}
header .spacer{flex:1}
header .right{display:flex;align-items:center;gap:18px}
header .right a{color:#c4ccd6;font-size:12.5px;text-decoration:none;cursor:pointer;transition:color .2s;display:inline-flex;align-items:center;gap:5px}
header .right a:hover{color:#fff}
header .right a:active{transform:translateY(1px)}
header .right a svg.ic{width:14px;height:14px}
#saveState{font-size:12px;color:#56d98a;opacity:0;transition:opacity .3s}
.seasonbox{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:8px 13px}
.seasonbox label{font-size:10.5px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.6px;opacity:.75}
.seasonbox select{font-weight:650;color:var(--ink);border:1px solid var(--fieldbd);border-radius:9px;padding:7px 10px;background:var(--field);width:auto;min-width:128px;cursor:pointer}
.wrap{max-width:1520px;margin:0 auto;padding:24px 24px 30px}
.viewhead{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:2px 0 20px}
.viewhead h2{font-family:var(--serif);font-size:19.5px;margin:0;color:var(--ink);font-weight:700;letter-spacing:0;display:flex;align-items:center;gap:9px}
.viewhead h2 svg.ic{width:20px;height:20px;color:var(--green)}
.viewhead .desc{font-size:12.5px;color:var(--muted)}
.spacer{flex:1}
.tabs{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.tab{padding:8px 15px;border-radius:999px;background:var(--card);border:1px solid var(--line);cursor:pointer;font-weight:600;color:var(--muted);font-size:13px;box-shadow:0 1px 2px rgba(24,30,48,.04);transition:transform .12s,background .15s,color .15s,box-shadow .16s}
.tab:hover{color:var(--green)}
.tab:active{transform:translateY(1px) scale(.99)}
.tab.active{background:linear-gradient(180deg,var(--accent2),var(--green));color:#fff;border-color:transparent;box-shadow:0 4px 12px color-mix(in srgb,var(--green) 34%,transparent)}
.tab .cnt{opacity:.7;font-weight:500;font-size:11px;margin-left:4px}
button.act{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(180deg,var(--accent2),var(--green));color:#fff;border:none;padding:11px 19px;border-radius:13px;font-weight:650;cursor:pointer;font-size:13.5px;box-shadow:0 3px 11px color-mix(in srgb,var(--green) 34%,transparent);transition:transform .08s,box-shadow .16s,filter .16s}
button.act:hover{box-shadow:0 6px 16px color-mix(in srgb,var(--green) 40%,transparent);filter:brightness(1.03)}
button.act:active{transform:translateY(1px) scale(.99)}
button.ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--card);color:var(--green);border:1px solid var(--green);padding:8px 15px;border-radius:13px;font-weight:600;cursor:pointer;font-size:13px;box-shadow:0 1px 2px rgba(24,30,48,.05);transition:transform .08s,background .15s,box-shadow .16s}
button.ghost:hover{background:var(--leaf)}
button.ghost:active{transform:translateY(1px) scale(.99)}
button.ghost svg.ic{width:15px;height:15px}
button.ghost.sm{padding:7px 12px;font-size:12px}
button.ghost.sm svg.ic{width:14px;height:14px}
button.ghost.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
button.ghost.danger:hover{background:color-mix(in srgb,var(--bad) 12%,var(--card))}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
.card h2{margin:0;padding:15px 19px;font-size:15.5px;border-bottom:1px solid var(--line);background:var(--surface2);display:flex;align-items:center;gap:9px;font-weight:700;font-family:var(--serif)}
.card h2 svg.ic{width:17px;height:17px;color:var(--green)}
.card h2 .pill{font-size:11px;font-weight:600;color:var(--muted);background:var(--chip);padding:3px 10px;border-radius:999px}
.body{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{padding:9px 13px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{position:sticky;top:0;background:var(--surface2);font-weight:700;color:var(--muted);z-index:2;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
tbody tr:hover{background:var(--hover)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
input,select{font:inherit;border:1px solid var(--fieldbd);border-radius:9px;padding:6px 8px;background:var(--field);color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
input.num{text-align:right}
td input,td select{border-color:transparent;background:transparent}
input:focus,select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 24%,transparent)}
input[type=checkbox]{width:auto;accent-color:var(--green)}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600}
.tag.bio{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}
.tag.q{background:var(--chip);color:var(--muted)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0 0 18px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .16s var(--spring),box-shadow .16s}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)}
.stat.warn::before{background:var(--warn)}.stat.bad::before{background:var(--bad)}
.stat .v{font-family:var(--serif);font-size:27px;font-weight:600;color:var(--ink);letter-spacing:0}
.stat .l{font-size:11.5px;color:var(--muted);margin-top:4px}
.stat.warn .v{color:var(--warn)}.stat.bad .v{color:var(--bad)}
.legend{font-size:11.5px;color:var(--muted);margin:9px 19px;display:flex;align-items:center;gap:6px}
.matrix td.alloc{background:color-mix(in srgb,var(--green) 9%,var(--card));font-weight:600}
.matrix td.zero{color:color-mix(in srgb,var(--muted) 45%,transparent);text-align:center}
.flag{color:var(--warn);font-weight:700}.ok{color:var(--ok);font-weight:700}.bad{color:var(--bad);font-weight:700}
.addrow{padding:10px 15px;border-top:1px solid var(--line);background:var(--surface2)}
.small{font-size:11.5px;color:var(--muted)}
.rowdel{color:var(--bad);cursor:pointer;font-weight:700;text-align:center;opacity:.55;transition:opacity .15s}
.rowdel:hover{opacity:1}
.hint{background:var(--brandsoft);border:1px solid color-mix(in srgb,var(--green) 20%,var(--line));border-radius:13px;padding:12px 15px;font-size:12.5px;color:color-mix(in srgb,var(--green) 60%,var(--ink));margin:0 0 18px}
.view{display:none}.view.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view.active>*{animation:fadeUp .42s both}
.view.active>*:nth-child(2){animation-delay:.05s}
.view.active>*:nth-child(3){animation-delay:.1s}
.view.active>*:nth-child(4){animation-delay:.15s}
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(204px,1fr));gap:15px;margin:0 0 22px}
.hero .kpi{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .16s var(--spring),box-shadow .16s;animation:fadeUp .42s both}
.hero .kpi:nth-child(2){animation-delay:.05s}.hero .kpi:nth-child(3){animation-delay:.1s}.hero .kpi:nth-child(4){animation-delay:.15s}.hero .kpi:nth-child(5){animation-delay:.2s}
.hero .kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.hero .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--green)}
.hero .kpi.green{background:linear-gradient(165deg,color-mix(in srgb,var(--ok) 12%,var(--card)),var(--card) 62%)}.hero .kpi.green::before{background:var(--ok)}
.hero .kpi.open{background:linear-gradient(165deg,color-mix(in srgb,var(--warn) 13%,var(--card)),var(--card) 62%)}.hero .kpi.open::before{background:var(--warn)}
.hero .kpi.rest{background:var(--card)}.hero .kpi.rest::before{background:#aeb4bd}
.hero .kpi .v{font-family:var(--serif);font-size:33px;font-weight:600;letter-spacing:0;color:var(--ink);line-height:1.05}
.hero .kpi.green .v{color:var(--ok)}.hero .kpi.open .v{color:var(--warn)}
.hero .kpi .l{font-size:12.5px;color:var(--ink);opacity:.8;margin-top:6px;font-weight:650}
.kpibadge{position:absolute;top:15px;right:15px;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--green) 12%,#fff);color:var(--green)}
.kpibadge svg.ic{width:19px;height:19px}
.hero .kpi .v,.hero .kpi .l,.hero .kpi .sub2{padding-right:46px}
.hero .kpi.green .kpibadge{background:color-mix(in srgb,var(--ok) 15%,#fff);color:var(--ok)}
.hero .kpi.open .kpibadge{background:color-mix(in srgb,var(--warn) 15%,#fff);color:var(--warn)}
.hero .kpi.rest .kpibadge{background:#eef0f2;color:#6f7681}
.hero .kpi.tw .kpibadge{background:#fbf1da;color:#b07d00}
.hero .kpi .sub2{font-size:11px;color:var(--muted);margin-top:5px}
.bar{height:9px;border-radius:6px;background:color-mix(in srgb,var(--muted) 22%,transparent);overflow:hidden;min-width:96px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--accent2));border-radius:6px}
.barcell{display:flex;align-items:center;gap:9px;justify-content:flex-end}
.barcell .pc{font-size:11.5px;color:var(--muted);min-width:36px;text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
tr.totrow{font-weight:780;background:var(--surface2)}
tr.totrow td{border-top:2px solid var(--line)}
tr.rasrow{cursor:pointer}tr.rasrow:hover{background:var(--leaf)}tr.rasrow:active{transform:translateY(1px)}
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(70px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--nav,rgba(255,255,255,.86));backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-top:1px solid var(--line);box-shadow:0 -4px 22px rgba(24,30,48,.07);display:flex;justify-content:center;gap:10px;padding-top:9px;align-items:flex-start;flex-wrap:nowrap}
@media (prefers-color-scheme:dark){.bottomnav{background:rgba(14,17,23,.82)}}
.bottomnav .navbtn{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:104px;padding:7px 16px;border-radius:14px;cursor:pointer;border:1px solid transparent;color:var(--muted);font-weight:650;font-size:12px;background:transparent;transition:color .15s,transform .12s,background .15s}
.bottomnav .navbtn svg.ic{width:23px;height:23px;transition:transform .16s}
.bottomnav .navbtn.active{color:var(--green)}
.bottomnav .navbtn.active svg.ic{transform:translateY(-1px) scale(1.06)}
.bottomnav .navbtn:not(.active):hover{color:var(--green)}
.bottomnav .navbtn:active{transform:scale(.94)}
.bottomnav .sep{width:1px;height:34px;background:var(--line);margin:0 6px;align-self:center}
.bottomnav .mini{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:66px;padding:7px 10px;border-radius:14px;cursor:pointer;color:var(--muted);font-size:11px;font-weight:600;transition:color .15s,transform .12s}
.bottomnav .mini svg.ic{width:19px;height:19px}
.bottomnav .mini:hover{color:var(--green)}.bottomnav .mini:active{transform:scale(.94)}
.loginwrap{background:radial-gradient(120% 95% at 50% -8%,#fff4ec 0%,#f8efe8 52%,#f1ebe6 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login{max-width:382px;width:100%;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 60px rgba(60,30,15,.14);padding:40px 36px;text-align:center;animation:fadeUp .5s both}
.login .logowrap{width:78px;height:78px;margin:0 auto 14px;border-radius:20px;background:#23272f;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.login .logowrap img{height:46px}
.login h1{font-family:var(--serif);font-size:25px;margin:8px 0 3px;color:#20242b;font-weight:700;letter-spacing:0}
.login p{color:#8a7d74;font-size:13px;margin:0 0 22px}
.login input{margin:6px 0 14px;padding:12px 14px;text-align:center;border-radius:12px;font-size:14px;background:#fff;color:#20242b}
.login .err{color:var(--bad);font-size:12.5px;margin-top:12px}
.modal{position:fixed;inset:0;background:rgba(15,17,23,.6);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px;backdrop-filter:blur(3px)}
.modalbox{background:var(--card);border-radius:20px;box-shadow:var(--shadow-lg);width:100%;max-width:470px;overflow:hidden;animation:fadeUp .3s both}
.modalhead{display:flex;align-items:center;justify-content:space-between;padding:16px 19px;border-bottom:1px solid var(--line);background:var(--surface2);font-size:14.5px;font-weight:700}
.modalhead .htitle{display:flex;align-items:center;gap:8px}
.modalhead svg.ic{width:18px;height:18px;color:var(--green)}
.modalx{cursor:pointer;color:var(--muted);font-weight:700;font-size:16px}
.modalbody{padding:8px 15px;max-height:60vh;overflow:auto}
.histrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 6px;border-bottom:1px solid var(--line)}
.histrow:last-child{border-bottom:none}
@media(max-width:820px){header{justify-content:flex-start}}
@media(max-width:620px){
  body{font-size:13.5px}
  header{padding:calc(env(safe-area-inset-top) + 11px) 16px 11px;gap:12px;row-gap:10px}
  header .logobadge img{height:36px}
  header h1{font-size:16px}
  header .sub{display:none}
  header .spacer{display:none}
  header .right{width:100%;justify-content:flex-end;gap:20px;order:3}
  .seasonbox{width:100%;justify-content:space-between;padding:9px 12px;gap:8px;order:2}
  .seasonbox select{flex:1;min-width:0}
  .seasonbox label{display:none}
  .wrap{padding:16px 14px 26px}
  .viewhead{margin-bottom:15px}
  .viewhead h2{font-size:16.5px}
  .viewhead .desc{display:none}
  .hero{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
  .hero .kpi{padding:14px 15px;border-radius:16px}
  .hero .kpi .v{font-size:23px}
  .hero .kpi .l{font-size:11.5px}
  .statgrid{grid-template-columns:1fr 1fr;gap:12px}
  .stat{padding:14px 15px}.stat .v{font-size:21px}
  .card{border-radius:16px;margin-bottom:15px}
  .card h2{font-size:13.5px;padding:13px 15px;flex-wrap:wrap;gap:7px}
  .legend{margin:8px 15px}
  th,td{padding:8px 10px}
  .bottomnav{gap:4px;padding-top:8px}
  .bottomnav .navbtn{min-width:0;flex:1;padding:7px 4px;font-size:11px;gap:3px}
  .bottomnav .navbtn svg.ic{width:21px;height:21px}
  .bottomnav .sep{display:none}
  .bottomnav .mini{min-width:0;padding:7px 8px;font-size:10px}
}
@media(max-width:620px){.kpibadge{display:none}.hero .kpi .v,.hero .kpi .l,.hero .kpi .sub2{padding-right:0}}
@media(max-width:400px){.hero{grid-template-columns:1fr}.statgrid{grid-template-columns:1fr}}
/* leverancier-groepen in de indeling */
tr.levhead td{background:var(--surface2);font-weight:750;color:var(--ink);border-top:2px solid var(--line);font-size:12px}
tr.levhead td:first-child{letter-spacing:-.01em}
.levdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px;vertical-align:middle}
tr.levsep td{border-top:2px solid color-mix(in srgb,var(--green) 35%,var(--line))}
/* twijfelaars */
.hero .kpi.tw::before{background:#d9a400}
.hero .kpi.tw .v{color:#b07d00}
tr.twijfel td{box-shadow:inset 3px 0 0 #d9a400}
.statsel{min-width:104px}
.twijfelcol{color:#b07d00 !important}
.twq{color:#d9a400;font-weight:800}
/* klikbare KPI-tegels */
.hero .kpi.clickable{cursor:pointer}
.hero .kpi .khint{position:absolute;right:14px;bottom:13px;font-size:10.5px;font-weight:700;color:var(--green);opacity:0;transition:opacity .15s;letter-spacing:.02em;text-transform:uppercase}
.hero .kpi.clickable:hover .khint{opacity:.85}
/* drill-down tabel in modal */
.dtable{width:100%;font-size:12.5px;border-collapse:collapse}
.dtable th{position:static;background:var(--surface2);text-align:left;padding:9px 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dtable td{padding:9px 10px;border-bottom:1px solid var(--line)}
.dtable tr:last-child td{border-bottom:none}
.dtable td.num,.dtable th.num{text-align:right;font-variant-numeric:tabular-nums}
.dtable button.ghost.sm{padding:5px 11px}
.whoami{font-size:12px;color:#fff;background:rgba(255,255,255,.14);padding:3px 11px;border-radius:999px;font-weight:600}
.empty{text-align:center;color:var(--muted);padding:22px 12px;font-size:13px}
.levchecks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px 12px;max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:11px;padding:11px;background:var(--surface2)}
.lchk{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--ink)}
.lchk input{width:auto;flex:0 0 auto}
#userBody label{display:block;font-size:12.5px;font-weight:650;color:var(--ink)}
#userBody label input,#userBody label select{margin-top:6px}
.adminonly{}