/* AANVULLEN › INKOPEN: DE BESTELRONDE PER LEVERANCIER (module 3, fase B klus 6). Alleen tokens uit bouwdoos.css.
   Wat hier staat en nog niet in de bouwdoos zit (bestelronde-tabel met tussenkoppen, dekkingsbalk met levertijdstreep)
   staat in de oplevering onder "Voor de harmonie-ronde". */
.vp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); margin: 0 0 var(--a3); }
.vp-stat { text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; }
.vp-stat:focus-visible, .vp-tab:focus-visible, .vp-filter:focus-visible, .vp-artknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vp-stat--urgent .bd-stat-getal { color: var(--urgent); }
.vp-goed { color: var(--goed-tekst); }
.vp-stat--urgent .vv-balk > i { background: var(--urgent); }
.vp-melding { background: var(--letop-vlak); color: var(--letop-tekst); border-radius: var(--radius-kaart); padding: var(--a2) var(--a3); margin: 0 0 var(--a3); font-size: var(--tekst-tabel); line-height: 1.45; }
.vp-melding summary { cursor: pointer; }
.vp-melding p { margin: var(--a1) 0 0; }
.vp-lijstkeuze { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: center; justify-content: space-between; margin: 0 0 var(--a3); }
.vp-tabs { display: inline-flex; gap: 2px; background: var(--vlak); border-radius: var(--radius-veld); padding: 2px; box-shadow: var(--schaduw); }
.vp-tab { border: 0; background: transparent; font: inherit; font-size: var(--tekst-tabel); padding: var(--a1) var(--a2); border-radius: var(--radius-veld); color: var(--tekst); cursor: pointer; min-height: var(--klikdoel); }
.vp-tab[aria-selected="true"] { background: var(--accent); color: var(--vlak); }
.vp-tel { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: var(--radius-rond); background: var(--accent-licht); color: var(--accent); font-size: var(--tekst-bijschrift); font-weight: 700; }
.vp-filters { display: flex; gap: var(--a1); align-items: center; flex-wrap: wrap; }
.vp-filter { border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); border-radius: var(--radius-rond); padding: 0 var(--a2); min-height: var(--klikdoel); font: inherit; font-size: var(--tekst-tabel); cursor: pointer; }
.vp-filter[aria-pressed="true"] { background: var(--accent-licht); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.vp-zacht { color: var(--tekst-zacht); font-size: var(--tekst-klein); }
.vp-urgent { color: var(--urgent); }
.vp-groep { padding: var(--a3) var(--a4); }
.vp-groep-kop { display: flex; justify-content: space-between; gap: var(--a3); align-items: flex-start; flex-wrap: wrap; }
.vp-groep-kop h3 { margin: 0; font-size: var(--tekst-titel); }
.vp-groep-kop p { margin: 2px 0 0; }
.vp-groep-getal { text-align: right; }
.vp-groep-getal b { display: block; font-size: var(--tekst-titel); font-variant-numeric: tabular-nums; }
.vp-groep-getal span { color: var(--tekst-zacht); font-size: var(--tekst-klein); }
.vp-drie { display: flex; gap: var(--a4); flex-wrap: wrap; text-align: right; font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.vp-drie b { display: block; font-size: var(--tekst-titel); color: var(--tekst); font-variant-numeric: tabular-nums; }
.vp-drie b.vp-urgent { color: var(--urgent); }
.vp-drie small { display: block; font-size: var(--tekst-klein); }
.vp-tabelkader { overflow-x: auto; margin-top: var(--a2); }
.vp-tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-tabel); }
.vp-tabel th { text-align: left; color: var(--tekst-zacht); font-weight: 600; font-size: var(--tekst-klein); padding: var(--a1) var(--a2); border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.vp-tabel td { padding: var(--a1) var(--a2); border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.vp-tabel small { display: block; color: var(--tekst-zacht); font-size: var(--tekst-klein); }
.vp-tussenkop th { color: var(--tekst); font-size: var(--tekst-klein); font-weight: 700; padding-top: var(--a3); }
.vp-rij--gekozen td { background: var(--achtergrond); }
.vp-rij--gekozen td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.vp-rij--markeer td { background: var(--accent-licht); }
.vp-rij-detail td { background: var(--achtergrond); }
.vp-c-vink { width: 28px; }
.vp-c-vink input { width: 18px; height: 18px; }
.vp-c-art { min-width: 260px; }
.vp-artknop { display: flex; gap: var(--a2); align-items: center; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.vp-artknop b { display: block; font-weight: 600; color: var(--tekst); }
.vp-artknop:hover b { color: var(--accent); }
.vp-artknop small { display: flex; gap: var(--a1); align-items: center; flex-wrap: wrap; }
.vp-artknop small.vp-voorsets { display: block; color: var(--tekst-zacht); }
.vp-chip-klein { display: inline-block; border-radius: var(--radius-rond); padding: 0 var(--a1); background: var(--achtergrond); color: var(--tekst); font-size: var(--tekst-klein); }
.vp-chip-klein--blauw { background: var(--accent-licht); color: var(--accent); font-weight: 600; }
.vp-chip-klein--groen { background: var(--goed-vlak); color: var(--goed-tekst); }
.vp-chip-klein--rood { background: var(--fout-vlak); color: var(--fout-tekst); }
.vp-levkeuze { display: block; margin-top: var(--a1); }
.vp-levkeuze select { min-height: var(--klikdoel); font-size: var(--tekst-klein); }
.vp-c-dek { min-width: 110px; }
.vp-num { font-variant-numeric: tabular-nums; font-weight: 600; display: block; }
.vp-dekbalk { position: relative; display: block; height: 8px; background: var(--ring-baan); border-radius: var(--radius-rond); margin-top: 4px; min-width: 80px; }
.vp-dekbalk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-rond); background: var(--accent); }
.vp-dekbalk i.vp-krap { background: var(--urgent); }
.vp-dekbalk em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tekst); }
.vp-aantal { width: 84px; text-align: right; }
.vp-c-meer { white-space: nowrap; text-align: right; }
.vp-detail { padding: var(--a2) 0; }
.vp-detail-zin { margin: 0 0 var(--a2); font-size: var(--tekst-basis); line-height: 1.5; max-width: 860px; }
.vp-detail-verloop { margin-bottom: var(--a2); }
.vp-skelet-verloop { height: 220px; }
.vp-skelet-stat { height: 110px; }
.vp-skelet-kaart { height: 320px; margin-top: var(--a3); }
.vp-groep-voet { display: flex; gap: var(--a3); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: var(--a2); }
.vp-besteld { display: inline-flex; gap: var(--a2); align-items: center; flex-wrap: wrap; font-size: var(--tekst-tabel); }
.vp-besteld input { width: 170px; }
.vp-voetregel { margin: var(--a2) 0 var(--a4); }
.vp-twveld { display: inline-flex; gap: var(--a1); align-items: center; font-size: var(--tekst-tabel); }
.vp-twveld input { width: 80px; }
@media (max-width: 760px) {
  .vp-stats { grid-template-columns: minmax(0, 1fr); }
  .vp-groep { padding: var(--a3); }
  .vp-drie { text-align: left; }
}
/* Voorraadstip en voorraadbalk in het blok Inkoopadvies van het tandwiel (03-10): de grenzen en kleuren van settings.lowStock. */
[data-vp-tandwiel] h4 { margin: var(--a3) 0 0; font-size: var(--tekst-tabel); }
.vp-twveld input[type="color"] { width: 56px; height: 32px; padding: 2px; }