:root { --bg:#f6f7f5; --kaart:#fff; --tekst:#1d2a24; --zacht:#5d6b64; --lijn:#dfe4e0; --accent:#2f5d50; --plus:#1f7a4d; --min:#a23b2a; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg:#121815; --kaart:#1b2420; --tekst:#e6ece8; --zacht:#9fb0a7; --lijn:#2d3a34; --accent:#8cc4b2; --plus:#6fcf97; --min:#ef8a7a; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--tekst); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
header { display:flex; gap:1rem; align-items:center; padding:.6rem 1rem; background:var(--kaart); border-bottom:1px solid var(--lijn); flex-wrap:wrap; }
.merk { font-weight:700; color:var(--accent); }
nav { display:flex; gap:.9rem; flex-wrap:wrap; flex:1; align-items:center; }
nav a { color:var(--tekst); text-decoration:none; padding:.2rem 0; border-bottom:2px solid transparent; }
nav a.actief { border-color:var(--accent); font-weight:600; }
nav .later { color:var(--zacht); font-size:.85em; }
.uit { color:var(--zacht); }
main { max-width:1000px; margin:0 auto; padding:1rem; }
h1 { font-size:1.5rem; margin:.5rem 0 1rem; }
h2 { font-size:1.1rem; margin:0 0 .8rem; }
.kaart { background:var(--kaart); border:1px solid var(--lijn); border-radius:10px; padding:1rem; margin-bottom:1rem; overflow-x:auto; }
.cijfers { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin-bottom:1rem; }
.cijfers div { display:flex; flex-direction:column; }
.label { font-size:.8rem; color:var(--zacht); }
.groot { font-size:1.4rem; font-weight:650; font-variant-numeric:tabular-nums; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th, td { text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--lijn); vertical-align:top; }
th { font-size:.8rem; color:var(--zacht); font-weight:600; }
.r { text-align:right; }
.nw { white-space:nowrap; }
.klein { font-size:.82rem; color:var(--zacht); font-weight:400; }
.plus { color:var(--plus); } .min { color:var(--min); }
.fout { color:var(--min); background:color-mix(in srgb, var(--min) 12%, transparent); padding:.5rem .7rem; border-radius:6px; }
.ok { color:var(--plus); }
form.raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.6rem .9rem; align-items:end; margin-top:.8rem; }
label { display:flex; flex-direction:column; font-size:.85rem; color:var(--zacht); gap:.2rem; }
input, select { font:inherit; padding:.45rem .5rem; border:1px solid var(--lijn); border-radius:6px; background:var(--bg); color:var(--tekst); }
button { font:inherit; padding:.5rem .9rem; border:0; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; }
button.klein { padding:.2rem .5rem; font-size:.8rem; background:transparent; color:var(--zacht); border:1px solid var(--lijn); }
form.inline { display:inline; }
.login { max-width:340px; margin:12vh auto; background:var(--kaart); border:1px solid var(--lijn); border-radius:12px; padding:1.5rem; }
.login form { display:flex; flex-direction:column; gap:.8rem; }
@media (max-width:600px) { main { padding:.6rem; } .groot { font-size:1.2rem; } th, td { padding:.3rem .3rem; } }
button.gevaar { background:var(--min); }
table.orders { margin-top:.3rem; font-size:.85rem; }
table.orders td { border:0; padding:.1rem .4rem; }