/* WMS retouren in de huid (21-10-2026, bord WmsRetouren): alleen de indeling van dit scherm, met de tokens uit basis.css;
   geen hexwaarden, geen eigen lettergroottes buiten de basis (11, 12, 12.5, 13, 14, 15, 16, 18, 20, 22, 24 px). */

.huid.ro-scherm { display: flex; flex-direction: column; gap: 18px; background: transparent; }
.ro-skelet { height: 96px; }
.ro-spatie { flex: 1; }

/* Scanveld: label, veld, de ene primaire knop. */
.ro-scan { display: flex; gap: 12px; align-items: center; padding: 18px 22px; }
.ro-scan-label { font-weight: 500; }
.ro-scanveld { flex: 1; min-width: 0; }

/* Vier tegels op een rij; de laatste met een ring. */
.ro-tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ro-pct { display: flex; align-items: center; gap: 14px; }
.ro-pct svg { width: 56px; height: 56px; flex: none; }
.huid .ro-pct-vul { stroke: var(--koraal-700); }

/* Blokken: Nog niet binnen, Eerder afgekeurd, Verwerkt. */
.ro-blok { border: 1px solid var(--rand); border-radius: var(--r); background: var(--vlak); overflow: hidden; }
.ro-blokkop { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--lijn); }
.ro-leeg { padding: 28px; text-align: center; }
.ro-meer { padding: 10px 18px 10px 76px; }
.ro-rij { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--lijn); }
.ro-rij:first-of-type { border-top: 0; }
.ro-rij--open { grid-template-columns: 44px minmax(0, 1fr); }
.ro-rij--kaart { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
.huid .mini.ro-mini { width: 44px; height: 44px; font-size: 13px; }
.ro-overrule { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.ro-ov-tekst { max-width: 420px; }
.ro-knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ro-onder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ro-melding-sluit { margin-left: auto; }
.ro-alsnog { padding: 4px 0; }
.ro-alsnog > summary { padding: 10px 18px; min-height: 44px; }
.ro-toelicht { margin: 0; }
.ro-alsnog > .ro-toelicht { padding: 0 18px 8px; }

/* De verwerkkaart. */
.ro-kaarten { display: flex; flex-direction: column; gap: 12px; }
.ro-okaart { border: 1px solid var(--rand); border-radius: var(--r); background: var(--vlak); overflow: hidden; }
.ro-okop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--lijn); }
.ro-okop-nr { font-size: 15px; }
.ro-osec { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--lijn); }
.ro-osec:last-child { border-bottom: 0; }
.ro-osec.ro-onder { flex-direction: row; }
.ro-t { font-size: 12px; font-weight: 500; color: var(--grijs); text-transform: uppercase; letter-spacing: .03em; }
.ro-artikel { display: grid; grid-template-columns: 44px minmax(0, 1fr) 200px 150px; gap: 12px; align-items: center; }
.ro-naam { font-weight: 600; }
.ro-conflict { color: var(--koraal-900); }
.ro-lok { display: inline-flex; align-items: center; gap: 6px; background: var(--blauw-100); color: var(--blauw-900); border-radius: var(--r2); padding: 4px 10px; font-weight: 600; font-size: 12.5px; justify-self: start; }
.ro-prijs { text-align: right; }
.ro-uitkomsten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.huid button.ro-uitkomst { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 12px 14px; text-align: left; font: inherit; color: var(--tekst); cursor: pointer; }
.huid button.ro-uitkomst[aria-pressed="true"] { border: 1.5px solid var(--blauw-900); padding: 11.5px 13.5px; }
.huid .ro-uitkomst .k { overflow-wrap: anywhere; }
.ro-groep { display: flex; flex-direction: column; gap: 6px; }
.huid .sub.ro-aanbevolen { font-weight: 600; }
.ro-euro { display: inline-flex; align-items: center; gap: 6px; }
.ro-eurovak { width: 90px; }
.ro-locatie { width: 220px; }
.ro-reden { max-width: 420px; }
.ro-tekst { color: var(--tekst); }
.ro-onder-rest { margin-left: auto; }

@media (max-width: 1400px) { .ro-uitkomsten { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ro-artikel { grid-template-columns: 44px minmax(0, 1fr) auto; } .ro-prijs { display: none; } }
@media (max-width: 900px) { .ro-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ro-uitkomsten { grid-template-columns: minmax(0, 1fr); } }
.ro-stap { display: block; }