/* WMS → HUID (26-09-2026): lagen, orderkaarten en statkaarten (_huid.js), en voor het hele WMS: geen tekst
   onder 12 px en knoppen van minstens 44 px hoog (tablet in het magazijn, skill §4/§5b). Alleen tokens.
   Het WMS-paneel heeft geen eigen klasse; het is het paneel met de WMS-subnavigatie erin (met data-wms="goto":
   PIM en de artikelpagina lenen de klasse .wms-subnav, maar niet de WMS-knoppen). */

/* ---------- Magazijn: vastgelopen labels en de voortgang van de dag ---------- */
.wmsh-voortgang { gap: var(--a3); padding: var(--a4); }
.wmsh-v-boven { display: grid; grid-template-columns: 200px minmax(0, 1fr) 260px; gap: var(--a4); align-items: center; }
.wmsh-v-getal { display: grid; gap: 2px; }
.wmsh-v-getal .bd-stat-label { font-size: var(--tekst-basis); color: var(--tekst); font-weight: 600; }
.wmsh-v-midden { display: grid; gap: var(--a2); min-width: 0; }
.wmsh-v-tekst { font-size: var(--tekst-basis); color: var(--tekst); }
.wmsh-voortgang-balk { width: 100%; height: 14px; border-radius: var(--radius-rond); overflow: hidden; display: block; }
.wmsh-v-baan { fill: var(--ring-baan); background: var(--ring-baan); }
.wmsh-v-gepickt { fill: var(--vn-voor); background: var(--vn-voor); }
.wmsh-v-gelabeld { fill: var(--vn-na); background: var(--vn-na); }
.wmsh-v-verzonden { fill: var(--vn-gemeten); background: var(--vn-gemeten); }
.wmsh-v-legenda { display: flex; flex-wrap: wrap; gap: var(--a3); font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.wmsh-v-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-veld); margin-right: 4px; vertical-align: -1px; }
.wmsh-v-cutoff { display: grid; gap: var(--a1); justify-items: start; }
.wmsh-v-haalbaar { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.wmsh-v-onder { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: center; justify-content: space-between; border-top: 1px solid var(--lijn); padding-top: var(--a3); }
.wmsh-v-chips { display: flex; flex-wrap: wrap; gap: var(--a1); }
.wmsh-v-onder .mag-knoppen { display: flex; gap: var(--a2); flex-wrap: wrap; margin-top: 0; }
@media (max-width: 1100px) { .wmsh-v-boven { grid-template-columns: minmax(0, 1fr); } }

.wmsh { display: grid; gap: var(--a4); margin: 0 0 var(--a4); }
.wmsh-kop { margin: 0 0 var(--a2); font-size: var(--tekst-titel); font-weight: 700; color: var(--fout-tekst); }
.wmsh-urgent { border-radius: var(--radius-laag); padding: var(--a4); background: linear-gradient(120deg, var(--fout-vlak), var(--vlak)); box-shadow: var(--schaduw-laag); }
.wmsh-kaarten { display: grid; gap: var(--a2); }
.wmsh-order { grid-template-columns: auto minmax(0, 1fr); box-shadow: var(--schaduw); }
.wmsh-order .bd-vk-knoppen { justify-content: stretch; }
.wmsh-order .wmsh-knop { width: 100%; justify-content: center; }
.wmsh-order .bd-vk-kop { font-size: var(--tekst-basis); }
.wmsh-order .bd-mini { width: 40px; height: 40px; }
.wmsh-stats { margin: 0 0 var(--a4); }
.wmsh-stat .bd-ring { width: 56px; height: 56px; }
.wmsh-stat .bd-spark { width: 100%; height: 32px; }

/* ---------- het hele WMS: tekst ≥ 12 px ---------- */
#panel:has(> .wms-subnav [data-wms="goto"]) :is(
  .verw-pak-l, .retour-heeft-notitie, .pick-aantal-label, .verw-loc .zet,
  .wms-subnav .cnt, .pick-orders-toggle, .pick-orders-toggle .oc, .pak-tabel th, .wms-adres-kop, .pick-loc-om, .kanaal-pil,
  .verz-lijn.leeg, .verz-bron, .verw-label, .verw-f .n, .verw-groepkop, .pak-kolommen-voet, .verw-rij-kop, .retour-keuze span,
  .verw-samen, .wms-verzoek, .wms-locpick-opt .code, .retour-pijl, .pick-chip, .mag-legenda, .mag-s,
  .verw-tijd, .pak-ean, .verw-kop-hint, .verw-direct, .wms-cutoff, .wms-order-meta .sub, .bulk-progress, .retour-detail-grid,
  .pick-loc-geen, .pick-ean, .pick-order .o-aantal, .pick-order .o-klaar, .mag-sub, .mag-item, .verz-perstuk span, .verz-klein,
  .tag-muted, .row-sub, small, .btn-xs,
  .kanaal-chip, .kanaal-chip span, .deadline-chip, .chan-badge, .status-ok, .status-warn, .status-bad, .status-info, .stat-card-label,
  .tag-chip, .versheid, .loc-chip, .uitleg-blok, .uitleg-blok b, th, .ont-merk, .aan .n
) { font-size: var(--tekst-klein) !important; }
#panel:has(> .wms-subnav [data-wms="goto"]) .verw-bulkbalk::before { font-size: var(--tekst-klein) !important; }

/* ---------- het hele WMS: knoppen ≥ 44 px ---------- */
#panel:has(> .wms-subnav [data-wms="goto"]) :is(button:not(.pik-toggle), .btn-xs, .btn-primary, .btn-outline, .btn-soft, .stepper-btn, .verw-loc, .bd-knop, .artikel-link) {
  min-height: 44px;
}
#panel:has(> .wms-subnav [data-wms="goto"]) .artikel-link { display: inline-flex; align-items: center; }
#panel:has(> .wms-subnav [data-wms="goto"]) .stepper-btn { min-width: 44px; }
#panel:has(> .wms-subnav [data-wms="goto"]) .icon-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }


/* ---------- Orderpagina: één verzendbalk (ronde 2) ---------- */
.wmsh-vb-kop { display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap; margin-bottom: var(--a3); }
.wmsh-vb-kop h4 { margin: 0; }
.wmsh-vb-staat { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--a2); border-radius: var(--radius-rond); font-size: var(--tekst-tabel); font-weight: 600; }
.wmsh-vb-staat.niet { background: var(--achtergrond); color: var(--tekst-zacht); }
.wmsh-vb-staat.klaar { background: var(--goed-vlak); color: var(--goed-tekst); }
.wmsh-vb-staat.verzonden { background: var(--accent-licht); color: var(--accent); }
.wmsh-vb-stappen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--a3); align-items: stretch; }
.wmsh-vb-stap { background: var(--achtergrond); border-radius: var(--radius-kaart); padding: var(--a3); display: grid; gap: var(--a2); align-content: start; min-width: 0; }
.wmsh-vb-stapkop { display: flex; align-items: center; gap: var(--a2); font-size: var(--tekst-tabel); font-weight: 600; color: var(--tekst); }
.wmsh-vb-nr { display: inline-flex; width: 24px; height: 24px; border-radius: var(--radius-rond); align-items: center; justify-content: center; background: var(--vlak); color: var(--accent); font-size: var(--tekst-klein); box-shadow: var(--schaduw); }
.wmsh-verzendbalk .final-ship-box { background: transparent; border: 0; padding: 0; margin: 0; display: grid; gap: var(--a2); }
.wmsh-verzendbalk .wms-select { width: 100%; }
@media (max-width: 1100px) { .wmsh-vb-stappen { grid-template-columns: minmax(0, 1fr); } }


/* ---------- Bulkorders (ronde 2): één grote rij, de orders ingeklapt ---------- */
.wmsh-bulk { display: grid; grid-template-columns: 120px minmax(0, 1fr) 220px; gap: var(--a4); align-items: center;
  background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a4); margin: 0 0 var(--a3); }
.wmsh-bulk-foto-vak .wmsh-bulk-foto, .wmsh-bulk-foto-vak img { width: 120px; height: 120px; object-fit: contain; border-radius: var(--radius-kaart); background: var(--vlak); }
.wmsh-bulk-tekst { display: grid; gap: var(--a2); min-width: 0; }
.wmsh-bulk-naam { margin: 0; font-size: var(--tekst-titel); font-weight: 700; line-height: 1.3; }
.wmsh-bulk-meta, .wmsh-bulk-orders { display: flex; flex-wrap: wrap; gap: var(--a1); align-items: center; }
.wmsh-bulk-order { display: inline-flex; gap: 4px; align-items: center; min-height: 28px; padding: 0 var(--a2); border-radius: var(--radius-rond);
  background: var(--achtergrond); font-size: var(--tekst-klein); font-variant-numeric: tabular-nums; }
.wmsh-bulk-order.af { opacity: .55; text-decoration: line-through; }
.wmsh-bulk-cijfers { text-align: right; display: grid; gap: 2px; }
.wmsh-bulk-groot { font-size: var(--tekst-groot); font-weight: 700; color: var(--tekst); line-height: 1; }
.wmsh-bulk-label { font-size: var(--tekst-tabel); color: var(--tekst-zacht); }
.wmsh-bulk-status { display: grid; gap: 2px; margin-top: var(--a2); font-size: var(--tekst-klein); color: var(--tekst-zacht); }
details.pak-compact > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
details.pak-compact > summary::-webkit-details-marker { display: none; }
details.pak-compact[open] > summary { margin-bottom: 9px; }
.wmsh-bulk-regel { margin-left: auto; display: inline-flex; gap: var(--a2); align-items: center; }
.wmsh-bulk-methode { font-size: var(--tekst-klein); color: var(--accent); }
details.pak-compact[open] .wmsh-bulk-methode { display: none; }
@media (max-width: 1100px) { .wmsh-bulk { grid-template-columns: 96px minmax(0, 1fr); } .wmsh-bulk-cijfers { grid-column: 1 / -1; text-align: left; } }

/* ---------- Staafjes en brede statkaarten (ronde 2) ---------- */
.wmsh-stats > .wmsh-stat--breed { grid-column: span 2; }
.wmsh-staafjes { display: grid; gap: var(--a1); }
.wmsh-staaf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 1.2fr) auto; gap: var(--a2); align-items: center; font-size: var(--tekst-klein); }
.wmsh-staaf-label { color: var(--tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wmsh-staaf-balk { width: 100%; height: 8px; display: block; }
.wmsh-staaf-baan { fill: var(--ring-baan); }
.wmsh-staaf-vul { fill: var(--vn-na); }
.wmsh-staaf-vul.wmsh-staaf--fout { fill: var(--fout-tekst); }
.wmsh-staaf-vul.wmsh-staaf--letop { fill: var(--letop-tekst); }
.wmsh-staaf-vul.wmsh-staaf--goed, .wmsh-staaf-vul.wmsh-route-lvb { fill: var(--vn-gemeten); }
.wmsh-staaf-vul.wmsh-route-vvb { fill: var(--vn-voor); }
.wmsh-staaf-n { font-variant-numeric: tabular-nums; color: var(--tekst); }
.wmsh-spark--vvb .bd-spark-lijn { stroke: var(--vn-gemeten); }
.wmsh-retour-af { background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a2) var(--a3); }
.wmsh-retour-af-rij { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; padding: var(--a1) 0; border-bottom: 1px solid var(--lijn); min-height: 44px; }
.wmsh-retour-af-rij:last-child { border-bottom: 0; }
.wmsh-retour-af-titel { flex: 1 1 240px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--tekst-tabel); }

/* ---------- Locaties: één zoekbalk en tabbladen (ronde 2) ---------- */
.wmsh-loc-kop { display: grid; gap: var(--a3); margin-bottom: var(--a3); }
.wmsh-loc-zoek { width: 100%; max-width: 520px; min-height: 44px; }
.wmsh-loc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3); }
.wmsh-loc-tab { text-align: left; cursor: pointer; font: inherit; border: 2px solid transparent; min-height: 44px; }
.wmsh-loc-tab.aan { border-color: var(--accent); }
.wmsh-loc-tab .bd-ring { width: 48px; height: 48px; }
@media (max-width: 1100px) { .wmsh-loc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wmsh-loc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }