/* 3D-werkplaats dashboard (plan 3DW-20261014-006, fase 7). Handgeschreven, geen CDN:
   werkt ook zonder internet op het thuisnetwerk. Donker eerst, licht via prefers-color-scheme. */

:root {
  --bg: #111316;
  --vlak: #1a1d22;
  --vlak2: #22262c;
  --rand: #2f343b;
  --tekst: #e8eaed;
  --zacht: #9aa1ab;
  --accent: #3fb68b;
  --accent-tekst: #08130e;
  --waarschuw: #e0a33a;
  --fout: #e5534b;
  --goed: #3fb68b;
  --krap: #e0a33a;
  --info: #5b9bd5;
  --straal: 10px;
  --schaduw: 0 1px 2px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f5f7;
    --vlak: #ffffff;
    --vlak2: #f0f2f5;
    --rand: #dde1e6;
    --tekst: #1b1f24;
    --zacht: #5f6773;
    --accent: #1f8f68;
    --accent-tekst: #ffffff;
    --schaduw: 0 1px 2px rgba(0, 0, 0, .08);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: inherit; }
h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .6rem; }
h3 { font-size: .95rem; margin: 0 0 .35rem; }
p { margin: .35rem 0; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.zacht { color: var(--zacht); }
.klein { font-size: .82rem; }

/* kop en navigatie */
.kop {
  position: sticky; top: 0; z-index: 10; background: var(--vlak);
  border-bottom: 1px solid var(--rand);
}
.kop-binnen { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.merk { font-weight: 700; text-decoration: none; white-space: nowrap; padding: 12px 0; }
.merk span { color: var(--accent); }
nav.hoofd { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
nav.hoofd::-webkit-scrollbar { display: none; }
nav.hoofd a {
  text-decoration: none; color: var(--zacht); padding: 14px 10px; white-space: nowrap;
  border-bottom: 2px solid transparent; font-size: .92rem;
}
nav.hoofd a:hover { color: var(--tekst); }
nav.hoofd a.actief { color: var(--tekst); border-bottom-color: var(--accent); }
.kop form { margin: 0; }

main { max-width: 1200px; margin: 0 auto; padding: 18px 16px 60px; }
.titelrij { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }

/* meldingen */
.melding { border-radius: var(--straal); padding: 10px 14px; margin: 0 0 16px; border: 1px solid var(--rand); background: var(--vlak); }
.melding.ok { border-color: var(--goed); }
.melding.fout { border-color: var(--fout); }

/* kaarten en rasters */
.raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.raster.breed { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.kaart {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--straal);
  padding: 14px; box-shadow: var(--schaduw); min-width: 0;
}
.kaart.leeg { border-style: dashed; color: var(--zacht); }
.tegels { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-bottom: 8px; }
.tegel { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--straal); padding: 12px 14px; text-decoration: none; }
.tegel b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* kleurvlak van een rol */
.vlak {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--rand);
  font-size: .72rem; font-weight: 700;
}
.vlak.groot { width: 64px; height: 64px; font-size: .85rem; }
.vlak.klein { width: 16px; height: 16px; border-width: 1px; vertical-align: -3px; }
.rolkop { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.rolkop .naam { min-width: 0; }
.rolkop .naam b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* balken */
.balk { height: 8px; background: var(--vlak2); border-radius: 4px; overflow: hidden; margin: 6px 0 4px; }
.balk > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.balk.waarschuw > i { background: var(--waarschuw); }
.balk.op > i { background: var(--fout); }

/* labels/badges */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem;
  background: var(--vlak2); border: 1px solid var(--rand); color: var(--zacht); white-space: nowrap;
}
.badge.gewogen, .badge.genoeg, .badge.opgelost, .badge.gelukt { color: var(--goed); border-color: var(--goed); }
.badge.printer, .badge.krap, .badge.waarschuw { color: var(--krap); border-color: var(--krap); }
.badge.aanname, .badge.onbekend { color: var(--zacht); }
.badge.tekort, .badge.open, .badge.mislukt, .badge.fout { color: var(--fout); border-color: var(--fout); }

/* tabellen */
.tabelvak { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--straal); background: var(--vlak); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { color: var(--zacht); font-weight: 600; font-size: .8rem; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.getal, th.getal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* formulieren */
form.rij { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0; }
form.blok { display: grid; gap: 8px; max-width: 560px; }
label { font-size: .85rem; color: var(--zacht); }
input, select, textarea, button {
  font: inherit; color: var(--tekst); background: var(--vlak2); border: 1px solid var(--rand);
  border-radius: 8px; padding: 7px 10px; min-width: 0;
}
input[type=number] { width: 7.5em; }
textarea { width: 100%; min-height: 4.5em; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button, .knop {
  cursor: pointer; background: var(--accent); color: var(--accent-tekst); border-color: transparent;
  font-weight: 600; text-decoration: none; display: inline-block;
}
button.zacht, .knop.zacht { background: var(--vlak2); color: var(--tekst); border-color: var(--rand); font-weight: 500; }
button:disabled { opacity: .55; cursor: wait; }
details { margin-top: 8px; }
details > summary { cursor: pointer; color: var(--zacht); font-size: .88rem; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; }

/* AMS */
.ams { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ams-extra { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.slot { text-align: center; }
.slot .vlak { margin: 6px auto; }
@media (max-width: 640px) {
  .ams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ams-extra { grid-template-columns: 1fr; }
}

/* wensen */
.wens { display: grid; grid-template-columns: 2.6rem 1fr; gap: 12px; align-items: start; transition: transform .25s; }
.wens .prio { font-size: 1.3rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.wens input[type=range] { width: 100%; padding: 0; accent-color: var(--accent); background: transparent; border: 0; }
.wens.bezig { opacity: .6; }
.wenslijst { display: grid; gap: 10px; }
.kleuren { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* foto's */
.fotos { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fotos img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rand); }

/* login */
.inlog { max-width: 360px; margin: 12vh auto; }

pre { white-space: pre-wrap; word-break: break-word; background: var(--vlak2); padding: 10px; border-radius: 8px; font-size: .82rem; }

/* Ronde007: rustig werkblad, mobiele hoofdhandelingen en projectbeelden. */
:root { --accent:#cd9570; --accent-tekst:#211b18; --bg:#151c23; --vlak:#1e2831; --vlak2:#25323c; --tekst:#f3eee7; --zacht:#b3bec6; --rand:#3a4852; --straal:16px; }
@media (prefers-color-scheme: light) {
 :root { --bg:#f5f2ed; --vlak:#fffdfa; --vlak2:#eee9e1; --tekst:#182c3c; --zacht:#566671; --rand:#d9d4cd; --accent:#995c37; --accent-tekst:#fff; }
}
body {font-size:16px;line-height:1.55}
main {max-width:1200px;margin:0 auto;padding:28px 24px 64px;min-width:0}
h1 {font-size:clamp(1.8rem,4vw,3rem);line-height:1.12;letter-spacing:-.035em;max-width:19ch}
h2 {font-size:1.3rem;letter-spacing:-.02em;margin:1.8rem 0 1rem}
h3 {font-size:1.1rem;line-height:1.3}
p,div,section,article {min-width:0}
p,.mono {overflow-wrap:anywhere}
button,input:not([type=hidden]),select,textarea {min-height:44px;font:inherit;max-width:100%}
input[type=radio],input[type=checkbox] {min-height:24px;min-width:24px;accent-color:var(--accent)}
button {padding:10px 18px;border-radius:9px;cursor:pointer}
button:disabled {cursor:wait;opacity:.6}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {outline:3px solid var(--accent);outline-offset:4px}
details summary {min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.intro {padding:20px 0 28px;max-width:760px}
.intro>p:last-child {margin-top:16px;max-width:62ch}
.bovenregel {font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.acties {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.actiekaart {display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--rand);border-radius:var(--straal);background:var(--vlak);text-decoration:none}
.actiekaart strong {font-size:1.2rem;line-height:1.25}
.actiekaart>span:first-child {font-size:.8rem;color:var(--accent);font-weight:650}
.actiekaart:hover {border-color:var(--accent)}
.actualiteit {font-size:.85rem;padding:12px 16px;border:1px solid var(--rand);border-radius:10px;background:var(--vlak)}
.actualiteit.achter {border-left:4px solid var(--waarschuw)}
.bladerknoppen {display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-bottom:12px}
.bladerknoppen span {font-size:.8rem;color:var(--zacht);flex:1}
.projectbaan {display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:5px 3px 20px;scroll-padding:3px;scrollbar-width:thin}
.projectkaart {flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;border:1px solid var(--rand);border-radius:16px;background:var(--vlak);overflow:hidden}
.projectbeeld {display:block;aspect-ratio:4/3;background:#e1e3e5}
.projectbeeld img {display:block;width:100%;height:100%;object-fit:contain}
.projecttekst {padding:20px}
.projecttekst h3 {margin:12px 0}
.projecttekst h3 a {text-decoration:none}
.projecttekst>p {font-size:.88rem}
.projecttekst>.klein {margin-top:12px}
.geen-beeld {height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;color:#324452;text-align:center;background:linear-gradient(135deg,#e4e7e9,#ced6db)}
.geen-beeld span {font-size:1.4rem;font-weight:650}
.geen-beeld small {font-size:.8rem}
.projectdetail {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px;margin:30px 0}
.detailbeeld {width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:16px;background:#e1e3e5}
.weegkaart {max-width:600px}
.blok {max-width:600px;width:100%}
.blok label {display:flex;flex-direction:column;gap:8px;margin:12px 0}
.blok label.bevestiging {flex-direction:row;align-items:center}
.segment {display:grid;grid-template-columns:2fr 1fr;gap:14px}
.aandacht {border-left:4px solid var(--waarschuw);padding:12px 18px;background:var(--vlak)}
.beheer {margin-top:40px;border-top:1px solid var(--rand);padding-top:16px}
.beheer nav {display:flex;flex-wrap:wrap;gap:8px 20px}
.beheer a {min-height:44px;display:flex;align-items:center;font-size:.88rem}
.kaart {padding:22px;margin-bottom:12px}
.kaart .rij {flex-wrap:wrap}
.voorraad-samenvatting {padding:20px 0}
.groepsvoorraad {display:grid;gap:10px;margin:20px 0}
.groepsvoorraad .kaart {border-left:4px solid var(--accent)}
.balk.onbekend {background:var(--vlak2)}
@media(max-width:760px) {
 .acties {grid-template-columns:1fr}
 .actiekaart {padding:18px}
 .projectkaart {flex-basis:82%}
 .projectdetail {grid-template-columns:1fr;gap:20px}
 .kop-binnen {flex-wrap:wrap;padding:0 16px;gap:0;justify-content:space-between}
 .kop nav.hoofd {order:3;flex:1 0 100%;justify-content:space-between;overflow:visible}
 .kop nav.hoofd a {font-size:.84rem;padding:12px 7px;min-height:44px}
 .merk {font-size:1rem;padding:10px 0}
 .kop form button {padding:8px 12px}
 main {padding:16px 16px 40px}
 .raster {grid-template-columns:minmax(0,1fr)}
 .filters {flex-wrap:wrap}
 .filters>* {max-width:100%;flex:1 1 130px}
 .titelrij {align-items:flex-start;flex-wrap:wrap}
 .blok,.kaart {max-width:100%}
 .segment {grid-template-columns:1fr}
 .wens {grid-template-columns:40px minmax(0,1fr)}
 .mono {word-break:break-word}
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Lange fysieke rolkeuzes mogen de mobiele gridkolom niet verbreden. */
.blok {min-width:0;grid-template-columns:minmax(0,1fr)}
.blok>* {min-width:0}
.blok select,.blok input,.blok textarea {width:100%;min-width:0}