/* WMS › Magazijn (bord F1 WmsMagazijn): alleen de indeling die niet in basis.css staat, en alleen tokens uit basis.css.
   Dit bestand laadt VÓÓR basis.css; elke regel heeft daarom .huid (en het schermklasse) vooraan voor meer specificiteit.
   Het eerste blok (tegels, ring, staafjes, hangende labels) is gedeeld: ook Verwerken, Verzendklaar, Orders, Retouren en de
   Natellijst tekenen hun tegels met wmsHuidStatsHtml uit _gedeeld.js. Zodra basis.css dit overneemt kan het blok hier weg. */

/* ---------- gedeeld: een rij van vier tegels, ring, staafjes, vastgelopen labels ---------- */
.huid .wms-tegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 16px}
.huid .wms-tegels .wms-breed{grid-column:span 2}
.huid .wms-tegels .tegel2 .spark{position:absolute;right:14px;bottom:12px;width:96px;height:30px;margin:0}
.huid .wms-tegels .tegel2:has(.spark) .k:last-of-type{max-width:calc(100% - 100px)}
.huid .wms-tegels .tegel2.wms-let{background:var(--rood-l);border-color:var(--koraal-300)}
.huid .wms-tegel-knop{appearance:none;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer}
.huid .wms-ring{position:absolute;right:14px;bottom:12px;width:48px;height:48px;display:grid;place-items:center}
.huid .wms-ring .ring-svg{position:absolute;inset:0;width:100%;height:100%}
.huid .wms-ring .ring-svg .vul{stroke:var(--blauw)}
.huid .wms-ring b{position:relative;font-size:11px;font-weight:600}
.huid .wms-staafjes{display:grid;gap:6px;margin-top:6px}
.huid .wms-staaf{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,1.2fr) auto;gap:8px;align-items:center;font-size:12px}
.huid .wms-staaf-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.huid .wms-staaf-baan{display:block;height:8px;border-radius:4px;background:var(--lijn);overflow:hidden}
.huid .wms-staaf-baan i{display:block;height:100%;border-radius:4px;background:var(--blauw-700)}
.huid .wms-staaf-baan i.st-2{background:var(--blauw-500)}
.huid .wms-staaf-baan i.st-3{background:var(--blauw-300)}
.huid .wms-staaf-baan i.st-fout{background:var(--rood-vlak)}
.huid .wms-staaf-baan i.st-let{background:var(--blauw-500)}
.huid .wms-staaf-baan i.st-goed{background:var(--groen-vlak)}
.huid .wms-staaf b{font-variant-numeric:tabular-nums}
.huid .wms-hangt{background:var(--rood-l);border:1px solid var(--koraal-300);border-radius:var(--r);padding:16px 18px;margin:0 0 16px}
.huid .wms-hangt .kop{color:var(--rood);margin-bottom:10px}
.huid .wms-hangt-kaarten{display:grid;gap:10px}
.huid .wms-hangt .wms-hangt-order{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px}
.huid .wms-hangt-minis{display:flex;gap:6px}
.huid .wms-hangt .mini{width:44px;height:44px}
.huid .wms-hangt-tekst{display:grid;gap:2px;min-width:0}
.huid .wms-hangt-tekst .kop{font-size:14px}
.huid .wms-hangt-chips{display:flex;gap:6px;margin-top:4px}

/* ---------- Magazijn ---------- */
.huid .wms-magazijn{display:flex;flex-direction:column;gap:16px;min-width:0}
.huid .wms-magazijn .wms-tegels,.huid .wms-magazijn .wms-hangt{margin:0}

/* de held-tegel: het verzenden van vandaag (alleen tokens: verzonden wit, daarna blauw 100, 300 en op de baan blauw 500) */
.huid .wms-magazijn .wms-held{display:grid;grid-template-columns:200px minmax(0,1fr) 260px;gap:24px;align-items:center;padding:20px 22px}
.huid .wms-held b{color:var(--vlak)}
.huid .wms-held-midden{display:grid;gap:6px;min-width:0}
.huid .wms-held .stapel{width:100%;height:8px;margin:0;border-radius:4px;background:var(--blauw-500)}
.huid .wms-held .stapel .e{background:var(--vlak)}
.huid .wms-held .stapel .l{background:var(--blauw-100)}
.huid .wms-held .stapel .x{background:var(--blauw-300)}
.huid .wms-held .leg{justify-content:flex-start;gap:14px;color:var(--blauw-100)}
.huid .wms-held .leg i{border-radius:2px}
.huid .wms-held .leg .e{background:var(--vlak)}
.huid .wms-held .leg .l{background:var(--blauw-100)}
.huid .wms-held .leg .x{background:var(--blauw-300)}
.huid .wms-held .leg .n{background:var(--blauw-500)}
.huid .wms-held-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.huid .wms-held .chip{background:var(--blauw-100);color:var(--blauw-900)}
.huid .wms-held-actie{display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right}
.huid .wms-held .knop{background:var(--vlak);color:var(--blauw-900);box-shadow:none}
.huid .wms-held .knop:hover{background:var(--blauw-100);color:var(--blauw-900);box-shadow:none}
.huid .wms-held .knop.link{background:transparent;color:var(--vlak)}
.huid .wms-held .knop.link:hover{background:var(--blauw-700);color:var(--vlak)}
.huid .wms-held .knop:disabled{background:var(--blauw-500);color:var(--blauw-100)}
.huid .wms-held .knop.link:disabled{background:transparent;color:var(--blauw-300)}

/* Blokkeert vandaag en Voorraad in één oogopslag, naast elkaar */
.huid .wms-mag-kolommen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.huid .wms-blokkeert,.huid .wms-voorraad-oog{display:flex;flex-direction:column;gap:10px}
.huid .wms-blok{display:grid;gap:10px;padding-top:10px;border-top:1px solid var(--rand2)}
.huid .wms-blokkeert .kop + .wms-blok{border-top:0;padding-top:0}
.huid .wms-blok-kop{display:flex;align-items:center;gap:12px}
.huid .wms-blok-kop>div{flex:1;min-width:0}
.huid .wms-blok-items{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.huid .wms-blok-item{max-width:230px}
.huid .wms-dekrijen{display:grid;gap:2px}
.huid .wms-dekrij{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) 100px;gap:12px;align-items:center;padding:7px 0}
.huid .wms-dekrij i{display:block;height:6px;border-radius:3px;background:var(--lijn);position:relative;overflow:hidden}
.huid .wms-dekrij i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:3px;background:var(--blauw-700)}
.huid .wms-dekrij i.rood::after{background:var(--rood)}
.huid .wms-dekrij-getal{text-align:right;font-variant-numeric:tabular-nums}
.huid .wms-oog-voet{display:flex;align-items:center;gap:10px;margin-top:6px}

/* Verzenden: de periode en de drie routes */
.huid .wms-verzenden{display:flex;flex-direction:column;gap:12px}
.huid .wms-verz-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.huid .wms-spacer{flex:1}
.huid .wms-verz-let{display:flex}
.huid .wms-verz-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.huid .verz-lijn{display:block;margin-top:10px;color:var(--grijs)}
.huid .verz-lijn.op{color:var(--rood)}
.huid .verz-lijn.neer{color:var(--groen)}
.huid .verz-lijn.leeg{font-size:12px;padding:6px 0}
.huid .verz-weekbalk{fill:currentColor;opacity:.75}
.huid .verz-buiten-uitleg{font-size:12px;line-height:1.4;color:var(--grijs);margin-top:4px}

@media (max-width:1100px){
  .huid .wms-magazijn .wms-held{grid-template-columns:minmax(0,1fr)}
  .huid .wms-held-actie{align-items:flex-start;text-align:left}
  .huid .wms-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .huid .wms-mag-kolommen,.huid .wms-verz-tegels{grid-template-columns:minmax(0,1fr)}
}