/* WMS › Voorraad en Natellijst in de huid (21-10-2026, borden F4 WmsVoorraadC en G1 WmsNatellijst).
   Alleen indeling van deze twee schermen, met de tokens uit basis.css; geen hexwaarden, geen eigen lettergroottes buiten de basis.
   Dit bestand laadt vóór basis.css: een regel die een basisregel moet overschrijven heeft daarom het schermklasse als voorvoegsel. */

/* de wortel: de WMS-omlijsting (wms-wortel) geeft de achtergrond al, dit scherm voegt er niets aan toe */
.huid.wms-voorraad, .huid.wms-natel { background: transparent; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* paginakop met de knoppen rechts (Voorraad, Natellijst) */
.wms-voorraad .ps-kop, .wms-natel .ps-kop { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.wms-voorraad .ps-titel, .wms-natel .ps-titel { min-width: 0; flex: 1 1 320px; }
.wms-voorraad .ps-knoppen, .wms-natel .ps-knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.huid .wms-voorraad .wv-peil { width: 150px; }

/* ---------- Voorraad: de vijf tegels (waarde, onderweg, zonder inkoopprijs, inactief, laatste momentopname) ---------- */
.huid .wms-voorraad .vv-tegels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 0; }
.wms-voorraad .vv-tegels .tegel2 { min-width: 0; }
.wms-voorraad .vv-tegels .tegel2 .k { overflow-wrap: anywhere; }
.wms-voorraad .wv-skelet { min-height: 48px; }
@media (max-width: 1100px) { .huid .wms-voorraad .vv-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* filters: pillen, keuzelijsten en het zoekveld op één regel */
.wms-voorraad .wv-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.huid .wms-voorraad .wv-filters select.veld { width: auto; }
.huid .wms-voorraad .wv-filters .wv-zoek { width: 220px; }
.wms-voorraad .wv-vul { flex: 1; }

/* de tabel met de locatiechip en de LVB-kolom */
.huid .wms-voorraad .wv-tabelkaart { padding: 0 18px; }
/* DE TABEL PAST ALTIJD IN DE BREEDTE (Twan, 22-10, ± 1.280 px: Extern, LVB en Totaal vielen rechts weg terwijl de titel alle ruimte pakte): vaste breedtes voor de cijferkolommen
   (<colgroup> in voorraad.js), de artikelkolom krijgt wat overblijft en kort de titel af op één regel; nooit horizontaal scrollen. */
.huid .wms-voorraad .wv-tabelkaart .scrol { overflow-x: visible; }
.huid .wms-voorraad .wv-tabel { table-layout: fixed; width: 100%; }
.huid .wms-voorraad .wv-tabel th, .huid .wms-voorraad .wv-tabel td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.huid .wms-voorraad .wv-tabel td.wv-uitklap { overflow: visible; white-space: normal; }
/* de Locatie-cel mag met de knop 'Ongedaan maken' naar een tweede regel (tests/voorraad-locatie-popup.test.js) */
.huid .wms-voorraad .wv-tabel td:nth-child(2) { overflow: visible; white-space: normal; }
/* de locatiecel kan na een verhuizing "Ongedaan maken" tonen: die knop wordt niet afgekapt en dus niet afgedekt door de volgende cel (tests/voorraad-locatie-popup) */
.huid .wms-voorraad .wv-tabel td.wv-loc { overflow: visible; white-space: normal; }
.huid .wms-voorraad .wv-tabelkaart .artikel .naam { font-weight: 600; }
.huid .wms-voorraad .wv-tabelkaart .artikel .tekst { min-width: 0; flex: 1 1 auto; }
.huid .wms-voorraad .wv-tabelkaart .artikel .ean { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wms-voorraad .wms-row-click { cursor: pointer; }
.huid .wms-voorraad td.wv-uitklap { text-align: left; white-space: normal; background: var(--bg); }
.wms-voorraad .wv-uitklap-in { padding: 12px 6px; display: flex; flex-direction: column; gap: 14px; }
.wms-voorraad .wv-min { color: var(--rood); font-weight: 600; }
.wms-voorraad .wv-ok { color: var(--groen); font-weight: 600; }
.wms-voorraad .wv-leeg { border: 0; }
.huid .wms-voorraad .loc-chip { background: var(--lijn); color: var(--tekst); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 500; }
.huid .wms-voorraad .loc-chip:hover { border-color: var(--rand); }
.huid .wms-voorraad .loc-chip.none { background: var(--rood-l); color: var(--rood); }
.wms-voorraad .ps-naast { margin-left: 8px; }

/* de lijst met momentopnames en de lijst met locaties zonder voorraad */
.wms-voorraad .wv-kaartkop { display: flex; align-items: center; gap: 8px; }
.huid .wms-voorraad .wv-moment { grid-template-columns: 200px minmax(0, 1fr) 140px; }
.huid .wms-voorraad .wv-moment > :last-child { text-align: right; }
.huid .wms-voorraad .wv-zonder { padding: 0 18px 8px; }
.wms-voorraad .wv-zonder .kop { padding-top: 14px; }
.huid .wms-voorraad .wv-melding-rij { align-items: center; flex-wrap: wrap; }

/* uitklap per rij: hoeveelheid bijwerken (zelfde vorm als de pop-up), LVB per koppeling, push, historie */
.huid .wms-voorraad .bijwerk-blok { background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--r); padding: 14px 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.wms-voorraad .bijwerk-titel { font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.wms-voorraad .bw-modus, .wms-voorraad .bw-redenen > div { display: flex; gap: 6px; flex-wrap: wrap; }
.wms-voorraad .bw-invoer, .wms-voorraad .bw-onder { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.huid .wms-voorraad .bw-invoer .veld { width: 130px; }
.huid .wms-voorraad .bijwerk-uitkomst { font-size: 13px; color: var(--grijs); }
.huid .wms-voorraad .bijwerk-uitkomst.op { color: var(--groen); }
.huid .wms-voorraad .bijwerk-uitkomst.af { color: var(--rood); }
.wms-voorraad .bw-redenen { display: flex; flex-direction: column; gap: 6px; }
.wms-voorraad .wv-lvbkoppeling { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--rand2); }
.huid .wms-voorraad .wv-lvbkoppeling select.veld { width: auto; min-width: 150px; }
.wms-voorraad .wv-boven { margin-top: 8px; }
.wms-voorraad .wv-hist { display: flex; flex-direction: column; gap: 4px; max-height: 170px; overflow: auto; margin-top: 8px; }
.wms-voorraad .wv-hist .pos { color: var(--groen); font-weight: 600; }
.wms-voorraad .wv-hist .neg { color: var(--rood); font-weight: 600; }

/* wat er naar de kanalen gaat (droge run) */
.wms-voorraad .wv-push { display: flex; flex-direction: column; gap: 10px; }
.wms-voorraad .wv-push-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.wms-voorraad .wv-push .wv-scrol { max-height: 260px; overflow: auto; }
.wms-voorraad .artikel .tekst, .wms-voorraad .artikel .naam { min-width: 0; }

/* de pop-up van locatiepopup.js (vorm .pop uit basis.css): de foutregel */
.huid.pop .lp-fout { color: var(--rood); font-size: 12.5px; line-height: 1.5; }
.huid.pop .lp-fout:empty { display: none; }

/* ---------- Natellijst (G1): vier tegels met ring, de lijst van deze week, Tellen primair en Overslaan als link ---------- */
.wms-natel .wn-tegels { display: grid; gap: 14px; }
.wms-natel .wn-ring { width: 56px; height: 56px; flex: none; }
.wms-natel .wn-ring .spoor { fill: none; stroke: var(--lijn); stroke-width: 6; }
.wms-natel .wn-ring .vul { fill: none; stroke: var(--blauw); stroke-width: 6; stroke-linecap: round; }
.wms-natel .wn-ring .vul.licht { stroke: var(--blauw-500); }
.wms-natel .wn-ring .vul.goed { stroke: var(--groen-vlak); }
.wms-natel .wn-ring .pct { font-size: 12px; font-weight: 600; fill: var(--tekst); }
.huid .wms-natel .wn-groep, .huid .wms-natel .wn-zonderloc { padding: 0; }
.wms-natel .wn-kop { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--rand2); flex-wrap: wrap; }
.wms-natel .wn-vul { flex: 1; }
.wms-natel .wn-melding { margin: 14px 18px 0; }
.wms-natel .nrij { display: grid; grid-template-columns: 110px minmax(0, 1fr) 70px minmax(0, 260px) 170px; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--rand2); font-size: 13px; }
.wms-natel .nrij.tel { grid-template-columns: 110px minmax(0, 1fr) 90px 110px 80px 190px; }
.wms-natel .nrij.nkop { color: var(--grijs); font-size: 12px; padding: 8px 16px; border-top: 0; }
.wms-natel .nrij .num { text-align: right; font-variant-numeric: tabular-nums; }
.wms-natel .nrij .stand { font-size: 15px; font-weight: 600; }
.wms-natel .nrij .naam { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.wms-natel .nrij .acties { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.wms-natel .nrij.overgeslagen { opacity: .55; }
.huid .wms-natel .nrij .loc-chip { cursor: default; justify-self: start; }
.huid .wms-natel .nrij .loc-chip:hover { border-color: transparent; }
.huid .wms-natel .nrij .veld { width: 90px; text-align: right; }
.wms-natel .wn-voet { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 18px; border-top: 1px solid var(--rand2); }
.huid .wms-natel .wn-voet .veld { width: auto; min-width: 260px; }
.wms-natel .wn-voet .wn-rechts { margin-left: auto; }
.wms-natel .wn-eigen { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.wms-natel .wn-eerder { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 1100px) {
  .huid .wms-natel .wn-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .wms-natel .nrij { grid-template-columns: 100px minmax(0, 1fr) 60px minmax(0, 180px) 160px; }
}
.huid .wms-natel .nrij .artikel.prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.huid .wms-natel .nrij .artikel .tekst { min-width: 0; }