/* Voorraadverdeling (roadmap 24): artikelblok, voorstelkaarten (vorm ronde 7), verdeelregels, LVB-zending.
   Alleen bouwdoos-variabelen (tests/bouwdoos-waarden.test.js). */
.vv-stil { color: var(--tekst-zacht); font-size: var(--tekst-tabel); }
.vv-noot { color: var(--tekst-zacht); font-size: var(--tekst-tabel); margin: var(--a2) 0; }
.vv-leeg { color: var(--tekst-zacht); font-size: var(--tekst-basis); background: var(--vlak); border-radius: var(--radius-kaart); padding: var(--a3); margin: var(--a2) 0; }
.vv-g { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vv-loc { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tabel */
.vv-tabelkader { overflow-x: auto; }
.vv-tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-tabel); }
.vv-tabel th { color: var(--tekst-zacht); font-weight: 500; text-align: left; padding: var(--a1) var(--a2); border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.vv-tabel th.vv-g { text-align: right; }
.vv-tabel td { padding: var(--a1) var(--a2); border-bottom: 1px solid var(--lijn); vertical-align: middle; height: var(--rijhoogte); }
.vv-balk { height: 6px; border-radius: var(--radius-rond); background: var(--lijn); overflow: hidden; margin-top: 4px; min-width: 80px; }
.vv-balk > i { display: block; height: 100%; background: var(--accent); }
.vv-dekking { min-width: 140px; }

/* Artikelblok */
.vv-artikel { margin-bottom: var(--a3); }

/* Voorstelkaart */
.vv-kaart { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3) var(--a4); margin: var(--a3) 0; }
.vv-kop { display: flex; align-items: center; gap: var(--a2); }
.vv-kop .bd-mini { flex: none; }
.vv-titel { flex: 1; min-width: 0; }
.vv-titel h3 { font-size: var(--tekst-voorstel); margin: 2px 0; font-weight: 600; }
.vv-soort { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.vv-naam { min-height: var(--klikdoel); padding: 0; font-size: var(--tekst-klein); text-align: left; }
.vv-getal { text-align: right; flex: none; }
.vv-getal b { display: block; font-size: var(--tekst-kop); font-variant-numeric: tabular-nums; }
.vv-getal span { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.vv-scope { font-size: var(--tekst-klein); color: var(--tekst-zacht); margin: var(--a1) 0 var(--a2); }
.vv-besluit { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--a3); margin-top: var(--a2); }
.vv-besluit p { margin: 0; font-size: var(--tekst-basis); }
.vv-keuzes { display: flex; flex-direction: column; gap: var(--a1); }
.vv-keuze { display: flex; align-items: center; gap: var(--a1); flex-wrap: wrap; font-size: var(--tekst-tabel); padding: var(--a1) var(--a2); border-radius: var(--radius-veld); cursor: pointer; min-height: var(--klikdoel); }
.vv-keuze--aanbevolen { background: var(--accent-licht); font-weight: 700; }
.vv-keuze input[type=radio] { width: 16px; height: 16px; margin: 0; }
.vv-aantal { width: 90px; text-align: right; }
.vv-knoppen { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--a1); margin-top: var(--a1); }
.vv-knoppen .bd-knop { white-space: nowrap; }
.vv-hoe { margin-top: var(--a2); font-size: var(--tekst-tabel); }
.vv-hoe summary { cursor: pointer; color: var(--accent); min-height: var(--klikdoel); display: flex; align-items: center; }
.vv-hoe ul { margin: var(--a1) 0 0; padding-left: 18px; color: var(--tekst-zacht); }
@media (max-width: 760px) { .vv-besluit { grid-template-columns: minmax(0, 1fr); } .vv-kaart { padding: var(--a3); } }

/* Aanvullen: de laag met voorraadvoorstellen */
.vv-laag { background: linear-gradient(90deg, var(--laag-week-van), var(--laag-week-tot)); border-radius: var(--radius-laag); padding: var(--a4); }
.vv-laagkop { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a2); flex-wrap: wrap; margin-bottom: var(--a2); }
.vv-laagkop h2 { font-size: var(--tekst-titel); margin: 0; }
.vv-laagkop > span { font-size: var(--tekst-tabel); color: var(--tekst-zacht); }
.vv-tel { display: inline-block; min-width: 24px; text-align: center; background: var(--vlak); border-radius: var(--radius-rond); padding: 0 var(--a1); font-size: var(--tekst-klein); margin-left: var(--a1); }
.vv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1); }
.vv-filters .bd-chip { cursor: pointer; display: inline-flex; align-items: center; gap: var(--a1); }

/* Instellingen → Koppelingen */
.vv-regels { margin: var(--a4) 0; }
.vv-regelkaart { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a4); margin-bottom: var(--a3); }
.vv-regelkaart header { display: flex; justify-content: space-between; align-items: center; gap: var(--a2); }
.vv-regelkaart h3 { font-size: var(--tekst-titel); margin: 0; }
.vv-vinkjes { border: 0; padding: 0; margin: var(--a3) 0; display: flex; flex-direction: column; gap: var(--a1); }
.vv-vinkjes legend { font-weight: 600; font-size: var(--tekst-tabel); margin-bottom: var(--a1); }
.vv-vinkjes label { display: flex; gap: var(--a1); align-items: center; font-size: var(--tekst-basis); min-height: var(--klikdoel); }
.vv-vinkjes small, .vv-veld small { color: var(--tekst-zacht); font-size: var(--tekst-klein); }
.vv-velden { display: flex; flex-wrap: wrap; gap: var(--a3); margin: var(--a2) 0; }
.vv-veld { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.vv-veld span { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.vv-veld .bd-veld { min-width: 120px; }

/* LVB-zending */
.vv-zending { max-width: var(--inhoud-max); }
.vv-h1 { font-size: var(--tekst-kop); margin: 0; }
.vv-zendingkop { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--a3); flex-wrap: wrap; margin-bottom: var(--a3); }
.vv-stappen { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a2); padding: 0; margin: 0 0 var(--a1); }
.vv-stappen li { display: flex; align-items: center; gap: var(--a1); background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a2); font-size: var(--tekst-tabel); }
.vv-stapnr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-rond); background: var(--achtergrond); font-weight: 600; flex: none; }
.vv-stap--nu { outline: 2px solid var(--accent); }
.vv-stap--nu .vv-stapnr { background: var(--accent); color: var(--vlak); }
.vv-stap--klaar { color: var(--goed-tekst); }
.vv-stap--klaar .vv-stapnr { background: var(--goed-vlak); }
.vv-blok { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a4); }
.vv-blok h2 { font-size: var(--tekst-titel); margin: 0 0 var(--a1); }
.vv-code { font-family: ui-monospace, Menlo, monospace; font-size: var(--tekst-klein); background: var(--achtergrond); border-radius: var(--radius-veld); padding: var(--a2); white-space: pre-wrap; word-break: break-all; max-height: 360px; overflow: auto; }
.vv-art { display: flex; align-items: center; gap: var(--a2); min-width: 0; }
.vv-art-naam { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vv-vink { width: 22px; height: 22px; }
@media (max-width: 1000px) { .vv-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vv-bloktop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--a3); margin-bottom: var(--a2); }
.vv-bloktop .vv-velden { margin: 0; }
/* Pil op 12 px (de bouwdoospil is 11 px; kijk:beeld eist 12 px in een kaart). Betekenis staat altijd in het woord. */
.vv-pil { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tekst-klein); border-radius: var(--radius-veld); padding: 2px var(--a1); white-space: nowrap; }
.vv-pil--goed { background: var(--goed-vlak); color: var(--goed-tekst); }
.vv-pil--letop { background: var(--letop-vlak); color: var(--letop-tekst); }
.vv-pil--fout { background: var(--fout-vlak); color: var(--fout-tekst); }
.vv-pil--stil { background: var(--achtergrond); color: var(--tekst-zacht); }

/* ---- v2 (01-10-2026) ---------------------------------------------------- */
/* Dekkingsbalk met kleur én woord: ruim (groen), krap (geel), leeg (rood). */
.vv-balk--ruim > i { background: var(--goed-tekst); }
.vv-balk--krap > i { background: var(--letop-tekst); }
.vv-balk--leeg { background: var(--fout-vlak); }
.vv-balk--leeg > i { background: var(--fout-tekst); }
.vv-rij--anders td { background: var(--accent-licht); }
.vv-rij--markeer td { background: var(--letop-vlak); }
.vv-rest { margin: var(--a1) 0; }

/* Wat nu: bovenaan het tabblad Voorraad */
/* Tabblad Voorraad (nawerk 2, BESLISSINGEN 01-10: één kaartstijl per tabblad): elk deel dezelfde witte kaart op de
   lichte achtergrond; binnen een deel alleen een dunne rand, nooit een eigen vlak, verloop of schaduw. */
.vv-deel { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3) var(--a4); margin: 0 0 var(--a3); }
.vv-deel > .vv-bloktitel:first-child { margin-top: 0; }
.vv-deel > :last-child { margin-bottom: 0; }
@media (max-width: 760px) { .vv-deel { padding: var(--a3); } }
.vv-deel .vv-tegel, .vv-deel .vv-invoer { background: var(--vlak); box-shadow: none; border: 1px solid var(--lijn); }
.vv-deel .vv-tegel--stil { border-style: dashed; }
.vv-deel .vv-samenbalk, .vv-deel .vv-verloop { background: none; box-shadow: none; padding: var(--a2) 0 0; margin: 0; }
.vv-deel .vv-waar-foto { box-shadow: none; border: 1px solid var(--lijn); }
/* Handelingen (nawerk 4): één rij met alleen wat nu nodig is, elk met één korte zin; de rest ingeklapt. */
.vv-handelrij { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a3) var(--a4); }
.vv-handelrij li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: 100%; }
.vv-handelrij .bd-knop { white-space: normal; text-align: left; }
.vv-handelzin { font-size: var(--tekst-tabel); color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
.vv-handelleeg { margin: 0; font-size: var(--tekst-basis); }
.vv-nietnodig { margin-top: var(--a3); font-size: var(--tekst-tabel); }
.vv-nietnodig summary { cursor: pointer; color: var(--tekst-zacht); min-height: var(--klikdoel); display: inline-flex; align-items: center; }
.vv-nietnodig summary { list-style: none; gap: 6px; }
.vv-nietnodig summary::-webkit-details-marker { display: none; }
.vv-nietnodig .vv-pijl::before { content: '▸'; }
.vv-nietnodig[open] .vv-pijl::before { content: '▾'; }
.vv-nietnodig li:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-kaart); }
.vv-nietnodig ul { list-style: none; margin: var(--a1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--a1); }
.vv-nietnodig li { display: flex; flex-direction: column; gap: 2px; padding: var(--a1) 0; border-top: 1px solid var(--lijn); }
.vv-nietnodig li span { color: var(--tekst-zacht); }
@media (max-width: 760px) { .vv-handelrij { flex-direction: column; } .vv-handelrij .bd-knop { width: 100%; text-align: center; } }

/* De regelkaart in het gedeelde tandwielpaneel van de bouwdoos (.bd-tw-*, nacht 2). */
.bd-tw-paneel .vv-regelkaart { box-shadow: none; padding: 0; margin: 0; }

/* Aanvullen: tellers en groepen */
.vv-tellers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); margin-bottom: var(--a3); }
.vv-teller { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: var(--vlak); border: 0; border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a3); cursor: pointer; font-family: var(--font); font-size: var(--tekst-tabel); color: var(--tekst); }
.vv-teller b { font-size: var(--tekst-kaartgetal); font-variant-numeric: tabular-nums; }
.vv-teller-naam { font-weight: 600; font-size: var(--tekst-basis); }
.vv-teller--rood { background: linear-gradient(120deg, var(--fout-vlak), var(--vlak)); }
.vv-teller--rood b, .vv-teller-geld { color: var(--fout-tekst); font-weight: 600; }
.vv-teller--rood .vv-teller-balk > i { background: var(--fout-tekst); }
.vv-teller--geel { background: linear-gradient(120deg, var(--letop-vlak), var(--vlak)); }
.vv-teller--geel .vv-teller-balk > i { background: var(--letop-tekst); }
.vv-teller--blauw { background: linear-gradient(120deg, var(--laag-week-van), var(--vlak)); }
.vv-teller--rustig { background: var(--achtergrond); box-shadow: none; }
.vv-teller-balk { width: 100%; }
.vv-tabtel { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-rond); background: var(--lijn); color: var(--tekst); font-size: var(--tekst-klein); font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.vv-tabtel--rood { background: var(--fout-vlak); color: var(--fout-tekst); }
.vv-tussenkop { font-size: var(--tekst-titel); margin: var(--a3) 0 var(--a1); }
.vv-groep { margin-bottom: var(--a3); }
.vv-groep .vv-laagkop > span { display: flex; align-items: center; gap: var(--a2); }
.vv-markeer { background: var(--letop-vlak); color: var(--letop-tekst); border-radius: var(--radius-kaart); padding: var(--a2) var(--a3); margin: 0 0 var(--a2); font-size: var(--tekst-basis); }
@media (max-width: 760px) { .vv-tellers { grid-template-columns: minmax(0, 1fr); } }

/* LVB-zendingen */
.vz-zending { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); margin: 0 0 var(--a2); padding: var(--a2) var(--a3); }
.vz-zending--eigen { background: linear-gradient(90deg, var(--laag-week-van), var(--laag-week-tot)); padding: var(--a3); }
.vz-kop { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(130px, 0.9fr) 100px 230px minmax(170px, 1.2fr) 20px; gap: var(--a2); align-items: center; width: 100%; background: transparent; border: 0; padding: var(--a1) 0; text-align: left; font-family: var(--font); font-size: var(--tekst-tabel); color: var(--tekst); cursor: pointer; min-height: var(--klikdoel); }
.vz-kop--vast { cursor: default; grid-template-columns: minmax(180px, 1.3fr) minmax(130px, 0.9fr) 100px 230px minmax(170px, 1.2fr); }
.vz-status { align-items: flex-start; }
.vz-kop > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vz-kop .vv-g { align-items: flex-end; }
.vz-pijl { color: var(--tekst-zacht); }
.vz-stapper { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 0; margin: var(--a1) 0; }
.vz-stapper li { display: flex; align-items: center; gap: 4px; font-size: var(--tekst-klein); color: var(--tekst-zacht); border-top: 3px solid var(--lijn); padding-top: 4px; }
.vz-stapper .vz-stap--klaar { border-top-color: var(--goed-tekst); color: var(--goed-tekst); }
.vz-stapper .vz-stap--nu { border-top-color: var(--accent); color: var(--tekst); font-weight: 600; }
.vz-stapper .vz-stap--weg { text-decoration: line-through; }
.vz-punt { font-size: var(--tekst-klein); }
.vz-detail { border-top: 1px solid var(--lijn); margin-top: var(--a1); padding-top: var(--a2); }
.vz-lijstfilters { margin: var(--a3) 0 var(--a2); }
.vz-fout { display: block; color: var(--fout-tekst); font-size: var(--tekst-klein); margin-top: 2px; }
.vz-keuzes { margin: var(--a2) 0; }
.vv-stappen--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--a2) 0; }
@media (max-width: 1000px) { .vz-kop, .vz-kop--vast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .vz-stapper { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.vz-nummer { flex-direction: row !important; align-items: center; gap: var(--a2) !important; }
.vz-nummer > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vz-minis { display: inline-flex; align-items: center; flex: none; }
.vz-minis .bd-mini { width: 28px; height: 28px; margin-right: -6px; border: 2px solid var(--vlak); border-radius: var(--radius-veld); background: var(--vlak); }
.vz-meer { font-size: var(--tekst-klein); color: var(--tekst-zacht); margin-left: 10px; }
.vz-barcode { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--a2); background: var(--achtergrond); border-radius: var(--radius-kaart); padding: var(--a2) var(--a3); margin: var(--a2) 0; }
.vz-barcode p { margin: 0; font-size: var(--tekst-basis); }

/* ---- v3: verloopgrafiek (verloop-grafiek.js) ---------------------------- */
.vg { width: 100%; height: auto; display: block; }
.vg-lijn { fill: none; stroke-width: 2; }
/* Totaal dik, delen dun (BESLISSINGEN 01-10: verloop is het totaal, de delen eronder). */
.vg-totaal { stroke: var(--tekst); stroke-width: 3; }
.vg-deel { stroke-width: 1.25; opacity: 0.85; }
.vg-onderweg { stroke: var(--goed-tekst); }
/* LVB per koppeling: zelfde kleur, lichter per koppeling (gestippeld blijft 'teruggerekend'). */
.vg-deel.vg-lvb--1 { opacity: 0.6; } .vg-deel.vg-lvb--2 { opacity: 0.35; }
.vg-verwacht { stroke: var(--tekst); stroke-width: 2; stroke-dasharray: 2 5; fill: none; }
.vg-eigen { stroke: var(--accent); }
.vg-lvb { stroke: var(--letop-tekst); }
.vg-lijn--terug { stroke-dasharray: 5 4; }
.vg-lijn--verwacht { stroke-dasharray: 2 5; }
.vg-band { fill: var(--achtergrond); }
.vg-rooster { stroke: var(--lijn); stroke-width: 1; }
.vg-as, .vg-tekst { font-size: var(--tekst-klein); fill: var(--tekst-zacht); font-family: var(--font); }
.vg-vert { stroke: var(--tekst-zacht); stroke-width: 1; stroke-dasharray: 3 3; }
.vg-vert.vg-leeg, .vg-tekst.vg-leeg { stroke: var(--fout-tekst); fill: var(--fout-tekst); }
.vg-vert.vg-mark, .vg-tekst.vg-mark { stroke: var(--goed-tekst); fill: var(--goed-tekst); }
.vg-vert.vg-mark--besteld, .vg-tekst.vg-mark--besteld { stroke: var(--tekst-zacht); fill: var(--tekst-zacht); }
.vg-tekst.vg-leeg, .vg-tekst.vg-mark, .vg-tekst.vg-vandaag { stroke: none; }
.vg-staaf--eigen { fill: var(--accent); opacity: 0.35; }
.vg-staaf--lvb { fill: var(--letop-tekst); opacity: 0.75; }
.vg-stip { fill: var(--vlak); stroke: var(--accent); stroke-width: 2; }
.vg-punt { font-size: var(--tekst-klein); fill: var(--tekst-zacht); font-family: var(--font); }
.vg-punt--route { fill: var(--letop-tekst); }
.vg-punt--telling { fill: var(--accent); }
.vg-punt--zending, .vg-punt--inkoop { fill: var(--goed-tekst); }
.vg-legenda { font-size: var(--tekst-klein); color: var(--tekst-zacht); margin: var(--a1) 0 0; display: flex; flex-wrap: wrap; gap: var(--a1); align-items: center; }
.vg-sleutel { display: inline-block; width: 16px; height: 3px; border-radius: var(--radius-rond); }
.vg-sleutel--lvb.vg-lvb--1 { opacity: 0.6; } .vg-sleutel--lvb.vg-lvb--2 { opacity: 0.35; }
.vg-sleutel--verwacht { background: repeating-linear-gradient(90deg, var(--tekst) 0 2px, transparent 2px 6px); }
.vg-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-right: var(--a2); }
.vg-sleutel--totaal { background: var(--tekst); height: 4px; } .vg-sleutel--onderweg { background: var(--goed-tekst); } .vg-sleutel--eigen { background: var(--accent); } .vg-sleutel--lvb { background: var(--letop-tekst); }

/* ---- v3: tabblad Voorraad ---------------------------------------------- */
.vv-waar { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--a3); align-items: stretch; }
.vv-waar-foto { width: 120px; height: 120px; object-fit: contain; background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); }
.vv-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--a2); }
.vv-tegel { display: flex; flex-direction: column; gap: 2px; background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a2) var(--a3); font-size: var(--tekst-tabel); min-width: 0; }
.vv-tegel b { font-size: var(--tekst-kaartgetal); font-variant-numeric: tabular-nums; }
.vv-tegel-kop { font-weight: 600; font-size: var(--tekst-tabel); }
.vv-tegel--stil { background: var(--achtergrond); box-shadow: none; }
.vv-tegel .vv-minis { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.vv-samenbalk { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a2) var(--a3); margin: var(--a2) 0; }
.vv-samenbalk p { margin: var(--a1) 0 0; font-size: var(--tekst-basis); }
.vv-samenbalk .vv-balk { height: 10px; }
.vv-handelknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1); margin: var(--a2) 0 var(--a4); }
.vv-kanalen select.bd-veld { min-height: var(--klikdoel); font-size: var(--tekst-tabel); }
.vv-kanalen .vv-keuze { padding: 2px var(--a1); }
.vv-verloop { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a3); }
.vv-logboek { list-style: none; margin: var(--a1) 0 0; padding: 0; font-size: var(--tekst-tabel); display: flex; flex-direction: column; gap: 4px; }
.vv-bloktitel { font-size: var(--tekst-titel); margin: var(--a4) 0 var(--a2); display: flex; align-items: baseline; gap: var(--a2); }
.vv-bloktitel small { font-size: var(--tekst-klein); color: var(--tekst-zacht); font-weight: 400; }
.vv-invoer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a2); background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a2) var(--a3); margin-bottom: var(--a3); }
@media (max-width: 760px) { .vv-waar { grid-template-columns: minmax(0, 1fr); } .vv-waar-foto { width: 72px; height: 72px; } }
.vv-actief { margin: var(--a1) 0; font-size: var(--tekst-tabel); display: flex; align-items: center; gap: var(--a1); flex-wrap: wrap; }
/* De vijf urgentste in Aanvullen: de productfoto groot genoeg om het artikel te herkennen (Twan 01-10). */
.vv-kaart--groot .vv-kop .bd-mini { width: 72px; height: 72px; flex: 0 0 72px; border-radius: var(--radius-kaart); object-fit: contain; }
/* Werkbalk bovenaan een tabblad (Naar LVB → Alle LVB-zendingen; tandwiel van de regels). */
.vv-werkbalk { display: flex; align-items: center; gap: var(--a2); margin: 0 0 var(--a3); flex-wrap: wrap; }
.vv-tandwiel { margin-left: auto; }   /* rechtsboven in de kop van Aanvullen */

/* Controlelijst ontwerpprincipes sectie 11 (nawerk 2, 01-10): contrast in een gemarkeerde rij, klikdoelen van de
   EAN-links op kaarten (≥ 28 px), velden en kleine tekst in het paneel, en geen horizontaal scrollen op 375 px of bij
   200 % zoom (de tabbladen van Aanvullen en lange EAN-links breken af). */
.vv-rij--anders td, .vv-rij--anders .vv-stil { color: var(--tekst); }
.vv-kaart .artikel-link, .vz-zending .artikel-link { display: inline-flex; align-items: center; min-height: 28px; }
.vv-paneel input:not([type=checkbox]):not([type=radio]), .vv-paneel select { min-height: 28px; }
.vv-paneel .tag-muted, .vv-paneel .row-sub { font-size: var(--tekst-klein); }
.btw-toggle.vv-tabrij { flex-wrap: wrap; max-width: 100%; }
.vv-naam, .vv-kaart .artikel-link { overflow-wrap: anywhere; }
/* Maximale inhoudsbreedte (sectie 11): op 3440 px geen kaarten over de volle breedte van het paneel (2142 px). */
.vv-tab, #vvTab, .vv-zending { max-width: 1400px; }
/* Skelet van het tabblad Voorraad (nawerk 3): dezelfde kaarten, grijze balkjes (bd-skelet-rij) op de plek van de inhoud. */
.vv-skelet { display: block; }
.vv-sk { display: block; }
.vv-sk--foto-groot { width: 120px; height: 120px; margin: 0; flex: 0 0 120px; }
.vv-sk--klein { width: 80px; }
.vv-sk--getal { width: 64px; height: var(--a4); }
.vv-sk--regel { width: 100%; }
.vv-sk--grafiek { width: 100%; height: 300px; }
.vv-sk--knop { width: 120px; height: 28px; margin: 0; }
.vv-sk-rij { display: flex; gap: var(--a3); align-items: flex-start; margin-bottom: var(--a3); }
.vv-sk-tegel { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vv-sk-tegel { border: 1px solid var(--lijn); border-radius: var(--radius-kaart); padding: var(--a2) var(--a3); }
/* De dagkaart van het verloop (nawerk 3): dezelfde cijfers als de lijnen, per dag. */
.vg-dk-kop { font-weight: 600; margin-bottom: var(--a1); }
.vg-dk-regel { display: flex; justify-content: space-between; gap: var(--a2); font-variant-numeric: tabular-nums; }
.vg-dk-regel > span { color: var(--tekst-zacht); }
.vg-dk-totaal { border-top: 1px solid var(--lijn); margin-top: 4px; padding-top: 4px; }
.vg-dk-gebeurd { margin: var(--a1) 0 0; padding-left: var(--a3); color: var(--tekst); }