/* WMS orders in de huid (21-10-2026, klus 6): de lijst Orders (bord F2) en de orderkaart (borden E3, E4, G4) die ook Verzendklaar en Verwerken tekenen.
   Alleen indeling, 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 een klasse meer (.huid .x .y). */

.huid .wms-orders { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.huid .ok-skelet { min-height: 64px; }

/* vier tegels op een rij: drie ringen en de dag van vandaag */
.huid .ok-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.huid .ok-tegels .rr { display: flex; align-items: center; gap: 14px; }
.huid .ok-tegels .ring-svg { width: 56px; height: 56px; flex: none; }
.huid .ok-tegels .ring-svg text { font-size: 12px; font-weight: 600; fill: var(--tekst); }
.huid .ok-tegels .ring-svg .vul.a { stroke: var(--blauw-700); }
.huid .ok-tegels .ring-svg .vul.b { stroke: var(--blauw-500); }
.huid .ok-tegels .ring-svg .vul.c { stroke: var(--groen-700); }
@media (max-width: 1100px) { .huid .ok-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* tabs, filterpillen en zoekveld */
.huid .ok-filterrij { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.huid .ok-ruimte { width: 14px; }
.huid .ok-vul { flex: 1; }
.huid .ok-filterrij .ok-zoek { width: auto; min-width: 260px; }
.huid .ok-uitleg { margin-top: -6px; }

/* de lijst: een rij per order met foto, nummer en kanaal, klant en adres, artikel, status en één knop */
.huid .kaart.ok-lijst { padding: 0; }
.huid .ok-rij { display: grid; grid-template-columns: 44px minmax(150px, 190px) minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(130px, 220px) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--rand2); }
.huid .ok-rij:first-child { border-top: 0; }
.huid .ok-klik { cursor: pointer; min-width: 0; }
.huid .ok-klik:hover .ordnr { color: var(--blauw); }
.huid .ok-rij .ordnr { white-space: normal; overflow-wrap: anywhere; }
.huid .ok-stad { text-transform: uppercase; }
.huid .ok-status { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.huid .ok-actie { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.huid .ok-rij .knop.icoon { width: 30px; min-height: 30px; }
.huid .ok-formrij { grid-column: 1 / -1; }
.huid .ok-dag { display: flex; flex-direction: column; gap: 8px; }
.huid .ok-dagkop { font-weight: 600; text-transform: capitalize; }

/* foto in een vierkant vak, met een grotere versie bij hover */
.huid .mini.ok-foto { position: relative; width: 44px; height: 44px; border-radius: var(--r2); }
.huid .mini.ok-foto.klein { width: 40px; height: 40px; }
.huid .mini.ok-foto .ok-groot { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: 260px; height: 260px; padding: 8px; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--r); }
.huid .mini.ok-foto:hover .ok-groot, .huid .mini.ok-foto:focus-within .ok-groot { display: block; }
.huid .wms-notitie { color: var(--blauw); cursor: help; }

/* ---- de orderkaart ---- */
.huid .okaart { container-type: inline-size; background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--r); }
.huid .ok-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--rand2); }
.huid .ok-nr { font-size: 15px; font-weight: 600; }
.huid .ok-pillen { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.huid .ok-pil { gap: 6px; }
.huid .ok-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--grijs-500); display: inline-block; }
.huid .ok-stip.goed { background: var(--groen-900); }
.huid .ok-stip.fout { background: var(--koraal-900); }
.huid .ok-stip.bezig { background: var(--blauw-900); }
.huid .ok-sec { padding: 14px 18px; border-bottom: 1px solid var(--rand2); }
.huid .ok-sec:last-child { border-bottom: 0; }
.huid .ok-t { font-size: 12px; font-weight: 500; color: var(--grijs); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }
.huid .ok-t .knop.icoon { width: 28px; min-height: 28px; margin-left: 6px; vertical-align: middle; }
.huid .ok-meldingen { display: flex; flex-direction: column; gap: 8px; }

/* Inhoud · pick: foto, artikel, locatiechip, pickteller */
.huid .ok-art { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 6px 0; }
.huid .ok-titel { font-weight: 600; }
.huid .ok-teller { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.huid .ok-stepper { display: inline-flex; align-items: center; border: 1px solid var(--rand); border-radius: var(--r2); overflow: hidden; background: var(--vlak); }
.huid .ok-stepper .ok-m, .huid .ok-stepper .ok-p { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; font: inherit; font-size: 16px; color: var(--tekst); cursor: pointer; }
.huid .ok-stepper .ok-m { border-right: 1px solid var(--rand); }
.huid .ok-stepper .ok-p { border-left: 1px solid var(--rand); }
.huid .ok-stepper .ok-m:hover:not(:disabled), .huid .ok-stepper .ok-p:hover:not(.uit) { background: var(--bg); }
.huid .ok-stepper .ok-m:disabled, .huid .ok-stepper .ok-p.uit { color: var(--grijs-500); cursor: not-allowed; }
.huid .ok-stepper .ok-v { font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 12px; white-space: nowrap; }
.huid .ok-stepper .ok-v.goed { color: var(--groen); }

/* afleveradres en klant */
.huid .ok-tweekol { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.huid .ok-adres { font-size: 14px; line-height: 1.5; }
.huid .ok-klant { line-height: 1.5; }

/* Verzenden & pakbon: drie genummerde stappen */
.huid .ok-verzendkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.huid .ok-verzendkop .kop { font-size: 14px; }
.huid .ok-stappen { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 16px; }
.huid .ok-stap { min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.huid .ok-stapkop { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.huid .ok-nummer { width: 20px; height: 20px; border-radius: 50%; background: var(--blauw-900); color: var(--wit); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; }
.huid .ok-acties { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.huid .ok-acties .veld { width: auto; min-width: 200px; }
.huid .ok-labelregel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.huid .okaart .knop { min-height: 32px; }
.huid .okaart .knop.klein { min-height: 28px; }
.huid .ok-stap .melding { padding: 8px 10px; font-size: 12.5px; }
.huid .ok-stap select.veld { width: 100%; }
.huid .ok-stap .vinkje { display: flex; width: 100%; }
.huid .ok-stap .vinkje > span:nth-of-type(1) { flex: 1; }
.huid .ok-gedeeld { display: flex; flex-direction: column; gap: 4px; }
@container (max-width: 760px) {
  .ok-stappen, .ok-tweekol { grid-template-columns: 1fr; }
  .ok-art { grid-template-columns: 44px minmax(0, 1fr); }
  .ok-art > .ok-loc, .ok-art > .ok-teller { grid-column: 2; justify-content: flex-start; }
}

/* voortgang: een balk, met "onbepaald" zolang het totaal onbekend is */
.huid .vgblok { display: flex; flex-direction: column; gap: 6px; }
.huid .vg-kop { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.huid .vg { height: 6px; border-radius: 3px; background: var(--grijs-300); overflow: hidden; }
.huid .vg i { display: block; height: 100%; background: var(--blauw-700); border-radius: 3px; transition: width .6s; }
.huid .vg i.onbepaald { width: 40%; animation: okonbepaald 1.2s ease-in-out infinite; }
.huid .vgblok .goed { color: var(--groen); font-weight: 600; }
@keyframes okonbepaald { from { margin-left: -40%; } to { margin-left: 100%; } }

/* de balk boven een geopende order: terug, hoeveelste, Vorige en Volgende */
.huid .ok-runbalk { padding: 10px 14px; }
.huid .ok-runbalk .vg { flex: 1; min-width: 120px; }

/* adres en notitie bewerken */
.huid .ok-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 12px; border: 1px solid var(--rand); border-radius: var(--r2); background: var(--bg); }
.huid .ok-formregel { display: flex; gap: 8px; flex-wrap: wrap; }
.huid .ok-veld { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px; font-size: 12px; color: var(--grijs); }
.huid .ok-veld.ok-breed { flex: 2; min-width: 180px; }
.huid .ok-veld.ok-smal { flex: 0 0 130px; }
.huid .ok-veld textarea.veld { min-height: 70px; resize: vertical; }

@media (prefers-reduced-motion: reduce) { .huid .vg i.onbepaald { animation: none; width: 100%; } }
.huid .ok-klantkoos { margin-top: 8px; }
.huid .ok-let { margin-left: 8px; cursor: help; display: inline-flex; justify-content: center; min-width: 22px; }
/* Het kanaal als chip met logo: logo en naam op één regel. */
.huid .chip.kanaal-naam { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.huid .chip.kanaal-naam img { display: block; }