:root { --ink:#1d1d1f; --zacht:#6e6e73; --lijn:#e3e3e8; --vlak:#f6f6f8; --accent:#0b6e4f; --fout:#b42318; --let:#fff4e5; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:#fff; }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; border-bottom:1px solid var(--lijn); }
.logo { font-weight:700; color:var(--ink); text-decoration:none; }
.uit { display:flex; gap:10px; align-items:center; color:var(--zacht); }
main { max-width:1100px; margin:0 auto; padding:16px 24px 48px; }
footer { text-align:center; color:var(--zacht); font-size:12px; padding:24px; }
h1 small, h2 small, h3 small { color:var(--zacht); font-weight:400; font-size:.7em; }
h2 { margin-top:32px; border-bottom:1px solid var(--lijn); padding-bottom:6px; }
.uitleg { color:var(--zacht); }
table { width:100%; border-collapse:collapse; margin:8px 0 12px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--lijn); vertical-align:top; }
th { font-size:12px; color:var(--zacht); font-weight:600; }
td small { color:var(--zacht); }
tr.beheerd { background:#eef8f3; }
tr.stil td { color:var(--fout); }
tr.geweigerd td { color:var(--fout); }
.log td { font-size:13px; }
form.regel { display:flex; gap:6px; flex-wrap:wrap; margin:0; }
input { font:inherit; padding:4px 6px; border:1px solid var(--lijn); border-radius:6px; }
button { font:inherit; padding:4px 10px; border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:6px; cursor:pointer; }
button.licht { background:#fff; color:var(--ink); border-color:var(--lijn); }
button.aan { background:var(--accent); }
.melding { background:#eef8f3; border-left:4px solid var(--accent); padding:8px 12px; }
.fout { background:var(--let); border-left:4px solid var(--fout); padding:8px 12px; }
form.inlog { display:grid; gap:12px; max-width:340px; }
form.inlog label { display:grid; gap:4px; }
@media (max-width:700px) { main { padding:12px 16px; } th:nth-child(3), td:nth-child(3) { display:none; } }
.status { font-size:12px; padding:2px 8px; border-radius:10px; background:var(--vlak); color:var(--zacht); vertical-align:middle; }
.status.loopt { background:#eef8f3; color:var(--accent); font-weight:600; }
.status.besloten { background:#e8f0fe; color:#1a56db; }
th.hoofd, td.hoofd { background:#fffbea; font-weight:600; }
details { margin:8px 0 16px; }
summary { cursor:pointer; color:var(--accent); margin-bottom:8px; }
pre { background:var(--vlak); padding:8px 12px; border-radius:6px; overflow-x:auto; }
select { font:inherit; padding:4px 6px; border:1px solid var(--lijn); border-radius:6px; }
tr.hoofd td { background:#fffbea; font-weight:600; }
.kaart { border:1px solid var(--lijn); border-radius:8px; padding:12px 16px; margin:12px 0; }
.kaart h3 { margin:0 0 8px; }
.kaart form.regel { display:inline-flex; margin:4px 8px 0 0; }
.wissel { font-size:1.1em; }
/* Inhoud */
table.inhoud td:first-child { width: 30%; }
form.inhoudveld { display:flex; flex-direction:column; gap:6px; margin:0; }
form.inhoudveld textarea, form.inhoudveld input[name=waarde] { width:100%; box-sizing:border-box; font:inherit; padding:6px 8px; }
form.inhoudveld .regel { display:flex; gap:6px; flex-wrap:wrap; }
.status.gestopt { background:#f1f1f1; color:#333; }
.kader { border:2px solid var(--accent); border-radius:8px; padding:12px 16px; margin:16px 0; }
.kader h2 { margin-top:0; }
label.vink { display:block; margin:2px 0; }
/* ── 0.7: dashboard met zijbalk ── */
header { position:sticky; top:0; z-index:5; background:#fff; }
.app { display:grid; grid-template-columns:216px minmax(0,1fr); min-height:calc(100vh - 53px); }
.app main { max-width:1240px; margin:0; padding:20px 32px 56px; width:100%; }
nav.zij { background:var(--vlak); border-right:1px solid var(--lijn); padding:16px 10px; display:flex; flex-direction:column; gap:2px; position:sticky; top:53px; align-self:start; height:calc(100vh - 53px); overflow-y:auto; }
nav.zij a { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 10px; border-radius:7px; color:var(--ink); text-decoration:none; }
nav.zij a:hover { background:#ebebef; }
nav.zij a.actief { background:#fff; box-shadow:0 0 0 1px var(--lijn); color:var(--accent); font-weight:600; }
nav.zij a.klein { margin-top:auto; color:var(--zacht); font-size:13px; }
.merknaam { font-weight:700; font-size:16px; padding:2px 10px 14px; }
.merknaam small { display:block; font-weight:400; font-size:12px; color:var(--zacht); }
.teller { font-size:11px; line-height:18px; min-width:20px; text-align:center; padding:0 6px; border-radius:9px; background:var(--accent); color:#fff; font-weight:600; }
.teller.let { background:var(--fout); }
.app h1 { margin:4px 0 12px; }
.klein { font-size:13px; } .zacht { color:var(--zacht); }
.status.let { background:var(--let); color:var(--fout); font-weight:600; }
a.status { text-decoration:none; }
/* tabbladen */
nav.tabs { display:flex; gap:2px; border-bottom:1px solid var(--lijn); margin:16px 0 20px; overflow-x:auto; }
nav.tabs a { display:flex; align-items:center; gap:6px; padding:9px 14px; color:var(--zacht); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
nav.tabs a:hover { color:var(--ink); }
nav.tabs a.actief { color:var(--ink); font-weight:600; border-bottom-color:var(--accent); }
/* inhoud */
.inhoudraster { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:28px; align-items:start; }
.inhoudraster aside { position:sticky; top:73px; display:grid; gap:12px; }
.inhoudraster aside .kader { margin:0; }
.inhoudraster aside h3 { margin:0 0 8px; font-size:15px; }
.inhoudraster aside form { display:grid; gap:4px; }
.inhoudraster aside form p { margin:8px 0 0; }
.inhoudraster aside form button { margin-top:6px; }
.inhoudraster aside label.vink { margin:0; }
.inhoudraster aside input[name=reden] { width:100%; }
.kader.rustig { border:1px solid var(--lijn); background:var(--vlak); }
a.knop { display:inline-block; padding:6px 12px; border-radius:6px; border:1px solid var(--accent); color:var(--accent); text-decoration:none; font-weight:600; }
a.knop:hover { background:#eef8f3; }
h2.groep { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--zacht); border:0; margin:24px 0 10px; padding:0; }
h2.groep:first-child { margin-top:0; }
.veld { border:1px solid var(--lijn); border-radius:10px; padding:12px 14px; margin:0 0 10px; background:#fff; }
.veld.gewijzigd { border-color:#b7dcc9; box-shadow:inset 3px 0 0 var(--accent); }
.veldkop { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px; }
.veldkop code { margin-left:auto; font-size:12px; color:var(--zacht); }
.veldvoet { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.veldvoet .regel input { width:200px; }
.nulive { margin:0; font-size:13px; color:var(--zacht); }
.veld > form.regel { margin-top:8px; }
textarea { font:inherit; border:1px solid var(--lijn); border-radius:6px; resize:vertical; }
/* dashboard */
.tegels { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:12px; margin:8px 0 24px; }
.tegel { border:1px solid var(--lijn); border-radius:12px; padding:14px 16px; }
.tegel .label { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--zacht); }
.tegel .getal { font-size:28px; font-weight:700; letter-spacing:-.02em; margin:2px 0; }
.verschil { font-size:12px; } .verschil.op { color:var(--accent); } .verschil.neer { color:var(--fout); }
.tegel svg { display:block; width:100%; height:32px; margin-top:10px; }
.staaf { fill:#cfe6da; } .staaf.nu { fill:var(--accent); }
.dashraster { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px; }
.paneel { border:1px solid var(--lijn); border-radius:12px; padding:14px 16px; margin-bottom:20px; }
.paneel h3 { margin:0 0 6px; font-size:15px; display:flex; justify-content:space-between; align-items:baseline; }
ul.taken { list-style:none; margin:0; padding:0; }
ul.taken li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--lijn); }
ul.taken li:last-child { border-bottom:0; }
ul.taken a { color:var(--ink); }
.stip { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:8px; vertical-align:middle; }
.stip.stil { background:var(--fout); }
@media (max-width:1100px) { .inhoudraster { grid-template-columns:1fr; } .inhoudraster aside { position:static; order:-1; } .dashraster { grid-template-columns:1fr; } }
@media (max-width:860px) {
  .app { display:block; }
  nav.zij { flex-direction:row; height:auto; position:sticky; top:53px; z-index:4; overflow-x:auto; border-right:0; border-bottom:1px solid var(--lijn); padding:8px 12px; }
  nav.zij a { white-space:nowrap; } .merknaam, nav.zij a.klein { display:none; }
  .app main { padding:16px; }
  .veldkop code { margin-left:0; }
}
/* ── 0.8: beeldbank en dia's ── */
form.upload { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:16px 0 20px; }
form.upload label { display:grid; gap:4px; font-size:13px; color:var(--zacht); }
.beeldraster { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; }
.beeldkaart { margin:0; border:1px solid var(--lijn); border-radius:10px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.beeldkaart img { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:repeating-conic-gradient(#f2f2f4 0 25%, #fff 0 50%) 0 0/16px 16px; }
.beeldkaart figcaption { padding:10px 12px; display:grid; gap:4px; }
.beeldkaart form.regel input { flex:1; min-width:0; }
fieldset.dia { border:1px solid var(--lijn); border-radius:10px; margin:0 0 12px; padding:10px 14px 14px; box-shadow:inset 4px 0 0 var(--dia, #e9e6df); }
fieldset.dia legend { font-weight:600; padding:0 6px; }
.dia--drukwerk { --dia:#e8999c; } .dia--grootformaat { --dia:#ead38c; } .dia--kleding { --dia:#82afa3; } .dia--disposables { --dia:#93c9c8; } .dia--neutraal { --dia:#e9e6df; }
.diaraster { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:16px; }
.diavelden { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 12px; }
.diavelden label, .diakant label { display:grid; gap:3px; font-size:12px; color:var(--zacht); }
.diavelden label.breed { grid-column:1 / -1; }
.diavelden input, .diavelden textarea, .diavelden select, .diakant select { width:100%; color:var(--ink); font-size:14px; padding:5px 7px; }
.diakant { display:grid; gap:8px; align-content:start; }
.diabeeld { width:100%; aspect-ratio:1; object-fit:contain; border-radius:8px; background:var(--vlak); }
.diabeeld.leeg { display:grid; place-items:center; color:var(--zacht); font-size:12px; }
@media (max-width:700px) { .diaraster, .diavelden { grid-template-columns:1fr; } }
/* ── merkregels ── */
.merkregels h2 { font-size: 15px; text-transform: lowercase; letter-spacing: .02em; color: var(--accent); border: 0; margin: 22px 0 6px; }
.merkregels h2:first-child { margin-top: 0; }
.merkregels ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.merkregels li::marker { content: "▪  "; color: var(--ink); }
form.inhoudveld textarea[name=tekst] { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }