/* WMS › Locaties in de huid (21-10-2026, bord F5 WmsLocaties): alle vier de secties onder elkaar.
   Alleen indeling van dit scherm, 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. */

.huid.wms-locaties { background: transparent; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* paginakop met de knoppen rechts */
.wms-locaties .ps-kop { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.wms-locaties .ps-titel { min-width: 0; flex: 1 1 320px; }
.wms-locaties .ps-knoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wms-locaties .ps-naast { margin-left: 8px; }

/* zoekveld en de knoppen "Spring naar" (scrollen alleen, verbergen niets) */
.wms-locaties .wl-balk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.huid .wms-locaties .wl-balk .wl-zoek { width: 320px; }

/* een sectie: kop met titel en aantal, daaronder de rijen */
.huid .wms-locaties .wl-groep { padding: 0; scroll-margin-top: 72px; }
.wms-locaties .wl-kop { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--rand2); flex-wrap: wrap; }
.wms-locaties .wl-vul { flex: 1; }
.wms-locaties .wl-rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 18px; border-top: 1px solid var(--rand2); }
.wms-locaties .wl-kop + .wl-rij, .wms-locaties .wl-kop + .wl-wrap { border-top: 0; }
.wms-locaties .wl-rij.wl-beheer { grid-template-columns: 130px minmax(0, 1fr) auto; }
.wms-locaties .wl-rij.wl-sub { padding-left: 32px; }
.wms-locaties .wl-actie { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.wms-locaties .wl-leeg { padding: 14px 18px; border-top: 1px solid var(--rand2); }
.wms-locaties .wl-kop + .wl-leeg { border-top: 0; }
.huid .wms-locaties .artikel .naam { font-weight: 600; max-width: 100%; }
.wms-locaties .artikel .tekst { min-width: 0; }
.huid .wms-locaties .loc-chip { cursor: default; justify-self: start; }
.huid .wms-locaties .loc-chip:hover { border-color: transparent; }

/* Locaties beheren: de uitklap met artikelen, het formulier en het plakveld */
.wms-locaties .wl-producten { display: none; background: var(--bg); border-top: 1px solid var(--rand2); }
.wms-locaties .wl-producten.open { display: block; }
.huid .wms-locaties .wl-toggle { padding: 0; min-height: 0; }
.wms-locaties .wl-form { display: flex; gap: 8px; padding: 14px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--rand2); }
.huid .wms-locaties .wl-form .veld { flex: 1; min-width: 160px; width: auto; }
.huid .wms-locaties .wl-form select.veld { flex: 0 0 auto; }
.wms-locaties .wl-bulk { padding: 12px 18px 14px; border-bottom: 1px solid var(--rand2); }
.huid .wms-locaties .wl-bulk .veld { font-family: ui-monospace, Menlo, monospace; resize: vertical; }
.wms-locaties .wl-bulk-knop { display: flex; justify-content: flex-end; margin-top: 8px; }

/* de zoekbare locatiekiezer (wmsLocPickerHtml in _gedeeld.js): veld met een lijst eronder */
.huid .wms-locpick { position: relative; min-width: 220px; }
.huid .wms-locpick-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--r); max-height: 220px; overflow: auto; padding: 4px; }
.huid .wms-locpick-opt { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r2); cursor: pointer; font-size: 12.5px; }
.huid .wms-locpick-opt:hover { background: var(--bg); }
.huid .wms-locpick-opt .code { font-weight: 600; background: var(--lijn); padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.huid .wms-locpick-opt .om { flex: 1; color: var(--grijs); }
.huid .wms-locpick-empty { padding: 10px; font-size: 12.5px; color: var(--grijs); text-align: center; }

@media (max-width: 1100px) {
  .huid .wms-locaties .wl-balk .wl-zoek { width: 100%; }
}