/* WMS › Instellingen (bord G2 WmsInstellingen): 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 .wms-instellingen vooraan voor meer specificiteit.
   Schakelaars (.schakelaar), formulierregels (.vr), filterpillen (.sub), chips en knoppen komen uit de basis. Nieuw hier:
   de segmentknoppen (.wms-seg, zoals op het bord), het voorbeeld van het label en de regels van een instelling. */

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

/* de tabbalk onder de paginakop: onderstreept en plakkend onder de WMS-tabs */
.huid .wms-instellingen .wms-inst-tabs{display:flex;flex-wrap:wrap;gap:0;position:sticky;top:49px;z-index:9;background:var(--bg);border-bottom:1px solid var(--rand)}
.huid .wms-instellingen .wms-inst-tabs .ptab{background:transparent;border:0;border-bottom:2px solid transparent;font-family:inherit;cursor:pointer}

/* kaarten met onderdelen onder elkaar */
.huid .wms-instellingen .wms-inst-kaart{display:flex;flex-direction:column;gap:14px}
.huid .wms-instellingen .wms-inst-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.huid .wms-instellingen .wms-inst-uitleg{margin:0;max-width:80ch}
.huid .wms-instellingen .wms-spacer{flex:1}
.huid .wms-instellingen .wms-rechts{margin-left:auto}
.huid .wms-instellingen .wms-inst-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.huid .wms-instellingen .wms-inst-veld{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.huid .wms-instellingen .wms-inst-sub{font-size:12px;font-weight:600;color:var(--grijs)}
.huid .wms-instellingen .wms-inst-knoppen{display:flex;gap:8px;flex-wrap:wrap}
.huid .wms-instellingen .wms-inst-balk{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.huid .wms-instellingen .wms-inst-pillen{display:flex;gap:6px;flex-wrap:wrap}

/* segmentknoppen: één rand om de groep, het gekozen deel donkerblauw */
.huid .wms-instellingen .wms-seg{display:inline-flex;border:1px solid var(--rand);border-radius:var(--r2);overflow:hidden;background:var(--vlak)}
.huid .wms-instellingen .wms-seg button{appearance:none;border:0;border-right:1px solid var(--rand);background:var(--vlak);color:var(--tekst);font:inherit;padding:0 14px;min-height:34px;cursor:pointer}
.huid .wms-instellingen .wms-seg button:last-child{border-right:0}
.huid .wms-instellingen .wms-seg button:hover{background:var(--bg)}
.huid .wms-instellingen .wms-seg button.aan{background:var(--donker);color:var(--vlak);font-weight:500}

/* het voorbeeld van het label: op het formaat en in de stand van de instelling */
.huid .wms-instellingen .wms-voorbeeld{position:relative;height:254px;max-width:100%;display:flex;align-items:center;padding:24px 34px;background:var(--vlak);border:1px solid var(--rand);color:var(--tekst);font-family:Helvetica,Arial,sans-serif}
.huid .wms-instellingen .wms-voorbeeld.f-a6.s-liggend{aspect-ratio:148/105}
.huid .wms-instellingen .wms-voorbeeld.f-a6.s-staand{aspect-ratio:105/148}
.huid .wms-instellingen .wms-voorbeeld.f-a4.s-liggend{aspect-ratio:297/210}
.huid .wms-instellingen .wms-voorbeeld.f-a4.s-staand{aspect-ratio:210/297}
.huid .wms-instellingen .wms-voorbeeld.f-4x6.s-liggend{aspect-ratio:152.4/101.6}
.huid .wms-instellingen .wms-voorbeeld.f-4x6.s-staand{aspect-ratio:101.6/152.4}
.huid .wms-instellingen .wms-voorbeeld .wms-postzegelvak{position:absolute;top:14px;right:14px;width:86px;height:76px;border:1px dashed var(--grijs-700)}
.huid .wms-instellingen .wms-voorbeeld-adres{font-size:18px;line-height:1.3}

/* een instelling: titel en uitleg links, de bediening rechts */
.huid .wms-instellingen .wms-inst-rij{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--rand2)}
.huid .wms-instellingen .wms-inst-rij:first-child{border-top:0;padding-top:0}
.huid .wms-instellingen .wms-inst-tekst{flex:1 1 360px;min-width:0;max-width:78ch}
.huid .wms-instellingen .wms-inst-bediening{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.huid .wms-instellingen .wms-inst-merk{display:inline-flex;align-items:center;gap:8px}
.huid .wms-instellingen .wms-inst-lijst{display:flex;flex-direction:column}
.huid .wms-instellingen .wms-inst-lijst>.wms-inst-rij{padding:10px 0}
.huid .wms-instellingen .wms-inst-lijst>.wms-inst-rij:first-child{padding-top:10px;border-top:1px solid var(--rand2)}

/* formulierregels (.vr) in een kaart: het veld op een leesbare breedte */
.huid .wms-instellingen .vr .veld.klein{width:150px}
.huid .wms-instellingen .vr{grid-template-columns:minmax(160px,260px) minmax(0,1fr) minmax(0,220px)}

/* Verzendregels */
.huid .wms-instellingen .wms-zoek{margin-left:auto;width:260px}
.huid .wms-instellingen .wms-breed-select{width:240px}
.huid .wms-instellingen .wms-inst-tabelkaart{padding:0 18px}
.huid .wms-instellingen .wms-kol-vink{width:34px}
.huid .wms-instellingen .wms-kol-ean{width:150px}
.huid .wms-instellingen .wms-kol-methode{width:280px}
.huid .wms-instellingen .wms-regel-artikel{max-width:460px}
.huid .wms-instellingen .wms-select-onder{margin-top:6px}
.huid .wms-instellingen tr.aan td{background:var(--blauw-l)}
.huid .wms-instellingen .tabel .vinkje{min-height:0}

/* Verzendmethodes: een lijst per land, elke methode een rij */
.huid .wms-instellingen .wms-methodes{display:flex;flex-direction:column}
.huid .wms-instellingen .wms-methode{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-top:1px solid var(--rand2)}
.huid .wms-instellingen .wms-methode-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.huid .wms-instellingen .wms-methode-naam{font-weight:600}
.huid .wms-instellingen .wms-methode-regel{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px}
.huid .wms-instellingen .wms-methode-acties{display:flex;align-items:center;gap:8px}
.huid .wms-instellingen .wms-methode-extra{display:flex;flex-direction:column;gap:6px}
.huid .wms-instellingen .wms-methode-eans{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.huid .wms-instellingen .wms-methode-eans .wms-spacer{flex:1}
.huid .wms-instellingen .wms-ean-toevoegen{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.huid .wms-instellingen .wms-ean-toevoegen .veld{width:200px}
.huid .wms-instellingen .wms-inst-lijstpunten{margin:0;padding-left:18px;max-width:70ch}

/* het formulier van een methode */
.huid .wms-instellingen .wms-methode-form{display:flex;flex-direction:column;gap:12px}
.huid .wms-instellingen .wms-form-rij{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.huid .wms-instellingen .wms-form-rij>.wms-form-veld{flex:1 1 160px;min-width:140px}
.huid .wms-instellingen .wms-form-rij>.wms-form-veld.smal{flex:0 0 150px}
.huid .wms-instellingen .wms-form-veld{display:flex;flex-direction:column;gap:4px}
.huid .wms-instellingen .wms-form-veld>label{font-size:12px;font-weight:500;color:var(--grijs)}
.huid .wms-instellingen .wms-form-veld .veld{width:100%}
.huid .wms-instellingen .wms-form-veld .veld.breed{max-width:420px}
.huid .wms-instellingen .wms-form-vast{display:flex;align-items:center;background:var(--bg);color:var(--grijs)}
.huid .wms-instellingen .wms-vinkjes{display:flex;gap:6px 18px;flex-wrap:wrap}

/* artikelen koppelen aan een methode: een venster boven de pagina */
.huid .wms-instellingen .wms-inst-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.huid .wms-instellingen .wms-inst-overlay::before{content:"";position:fixed;inset:0;background:var(--grijs-900);opacity:.4}
.huid .wms-instellingen .wms-inst-dialoog{position:relative;width:min(760px,100%)}
.huid .wms-instellingen .wms-dialoog-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.huid .wms-instellingen .wms-ean-stuur{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.huid .wms-instellingen .wms-ean-stuur .veld{flex:1;min-width:200px;width:auto}
.huid .wms-instellingen .wms-ean-lijst{max-height:46vh;overflow:auto;border:1px solid var(--rand);border-radius:var(--r2)}
.huid .wms-instellingen .wms-ean-rij{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 12px;border-top:1px solid var(--rand2);cursor:pointer}
.huid .wms-instellingen .wms-ean-rij:first-child{border-top:0}
.huid .wms-instellingen .wms-ean-rij.aan{background:var(--blauw-l)}
.huid .wms-instellingen .wms-ean-rij input{width:18px;height:18px;accent-color:var(--blauw);margin:0}
.huid .wms-instellingen .wms-ean-voet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--rand2);padding-top:12px}
.huid .wms-instellingen .wms-ean-voet .wms-spacer{flex:1}
.huid .wms-instellingen .wms-ean-plak textarea{margin-top:8px}

/* LVB per koppeling */
.huid .wms-instellingen .wms-lvb-koppeling{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--rand2)}
.huid .wms-instellingen .wms-lvb-koppeling .ikoon{background:var(--blauw-l);color:var(--blauw)}
.huid .wms-instellingen .wms-lvb-velden{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.huid .wms-instellingen .wms-lvb-velden .wms-form-veld{flex:0 1 210px}
.huid .wms-instellingen .wms-lvb-velden .wms-form-veld.smal{flex:0 0 130px}
.huid .wms-instellingen .wms-lvb-schrijf{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border:1px solid var(--rand);border-radius:var(--r2)}
.huid .wms-instellingen .wms-lvb-schrijf.aan{background:var(--blauw-l);border-color:var(--blauw-300)}
.huid .wms-instellingen .wms-lvb-kop{display:flex;align-items:baseline;gap:8px;margin-top:20px}
.huid .wms-instellingen .wms-lvb-let{margin-top:10px}
.huid .wms-instellingen .wms-lvb-fout{display:flex;flex-direction:column;gap:6px;padding:12px 16px}
.huid .wms-instellingen .wms-lvb-foutkop{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.huid .wms-instellingen .wms-lvb-bakken{display:flex;flex-direction:column;gap:8px}
.huid .wms-instellingen .wms-lvb-bak{border:1px solid var(--rand);border-radius:var(--r2);overflow:hidden;background:var(--vlak)}
.huid .wms-instellingen .wms-lvb-bak.let{border-color:var(--blauw-300);background:var(--blauw-l)}
.huid .wms-instellingen .wms-lvb-bak-kop{display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px 14px;background:transparent;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.huid .wms-instellingen .wms-lvb-bak-kop>span:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1}
.huid .wms-instellingen .wms-lvb-bak-kop>.groot2{min-width:40px}
.huid .wms-instellingen .wms-lvb-bak-kop i{margin-left:auto;align-self:center;color:var(--grijs)}
.huid .wms-instellingen .wms-lvb-meer{padding:6px 12px}
.huid .wms-instellingen .scrol .tabel td.links,.huid .wms-instellingen .scrol .tabel th.links{white-space:normal}

@media (max-width:1100px){
  .huid .wms-instellingen .wms-inst-twee{grid-template-columns:minmax(0,1fr)}
  .huid .wms-instellingen .wms-zoek{margin-left:0}
}