/* RETOUREN (roadmap 16 en 6, klikbaar ontwerp v2 01-10-2026): Verkoop → Retouren, WMS → Retouren (ontvangen) en de
   blokken op de productpagina en in Aanvullen. Alleen variabelen uit de bouwdoos; geen letterlijke kleuren. */

.rt-scherm { display: grid; gap: var(--a3); max-width: var(--inhoud-max); position: relative; }
.rt-klein { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.rt-zacht { margin: 0; font-size: var(--tekst-klein); color: var(--tekst-zacht); }

/* "Wat nu": drie getallen en de acties als knoppen. */
.rt-watnu { display: grid; gap: var(--a3); }
.rt-watnu h2 { margin: 0; font-size: var(--tekst-titel); }
.rt-watnu-getallen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); }
.rt-watnu-acties { display: flex; gap: var(--a2); flex-wrap: wrap; }

/* Filters in lagen: werkfilters als tabbalk, bronnen kleiner eronder. */
.rt-filters { display: grid; gap: var(--a2); }
.rt-bronnen { display: flex; gap: var(--a1); align-items: center; flex-wrap: wrap; }
.rt-bronchip { font-size: var(--tekst-klein); min-height: 28px; height: 28px; }
.rt-zoek { margin-left: auto; }
.rt-scope { margin: 0; font-size: var(--tekst-klein); color: var(--tekst-zacht); }

.rt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--a4); align-items: start; }
.rt-raster > .bd-kolom { width: auto; }
.rt-links { display: grid; gap: var(--a3); min-width: 0; align-content: start; }
.rt-lijst { display: grid; gap: var(--a3); }
.rt-meer { justify-self: start; }

/* De kaartvorm uit BESLISSINGEN.md: kop, tabelregel, twee zinnen links, keuzes rechts, "hoe berekend". */
.rt-kaart { display: grid; gap: var(--a2); background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3); cursor: pointer; }
.rt-kaart:focus-visible, .rt-info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rt-kaart--gekozen { box-shadow: 0 0 0 2px var(--accent), var(--schaduw); }
.rt-kaart--voorbeeld { background: repeating-linear-gradient(135deg, var(--vlak), var(--vlak) 12px, var(--achtergrond) 12px, var(--achtergrond) 24px); }
.rt-kaart-kop { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--a2); align-items: center; }
.rt-kaart-naam h3 { margin: 0; font-size: var(--tekst-voorstel); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-kaart-sub { margin: 2px 0 0; font-size: var(--tekst-tabel); color: var(--tekst-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-kaart-getal { text-align: right; display: grid; }
.rt-kaart-getal b { font-size: var(--tekst-kaartgetal); font-variant-numeric: tabular-nums; }
.rt-kaart-getal span { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.rt-regel-tabel { overflow-x: auto; }
.rt-cijfers { width: 100%; font-size: var(--tekst-tabel); }
.rt-cijfers th { font-size: var(--tekst-klein); font-weight: 500; color: var(--tekst-zacht); }
.rt-cijfers .artikel-link { font-size: var(--tekst-klein); }
.rt-ringcel { white-space: nowrap; }
.rt-ringcel .bd-ring { vertical-align: middle; }
.rt-kaart-onder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, auto); gap: var(--a3); align-items: start; }
.rt-zin { margin: 0 0 4px; font-size: var(--tekst-tabel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ra-kaart-vp .rt-zin:last-child { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rt-zin .artikel-link { font-size: var(--tekst-tabel); }
.rt-keuzes { display: grid; gap: var(--a1); justify-items: start; }
.rt-keuze-optie { display: flex; gap: var(--a1); align-items: center; font-size: var(--tekst-tabel); min-height: 28px; cursor: pointer; }
.rt-reden, .rt-notitie { width: 100%; }
.rt-hoe summary { font-size: var(--tekst-klein); color: var(--tekst-zacht); cursor: pointer; }
.rt-voorbeeld { margin: 0; padding: var(--a1) var(--a2); border-radius: var(--radius-veld); background: var(--letop-vlak); color: var(--letop-tekst); font-size: var(--tekst-klein); }

/* Informatieregel: een retour zonder keuze. */
.rt-infolijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); overflow: hidden; }
.rt-info, .rt-info-rij { display: grid; grid-template-columns: 32px minmax(150px, auto) minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: var(--a2); align-items: center;
  padding: var(--a1) var(--a3); min-height: 44px; font-size: var(--tekst-tabel); cursor: pointer; border-bottom: 1px solid var(--lijn); }
.rt-info:last-child, .rt-info-rij:last-child { border-bottom: 0; }
.rt-info:hover, .rt-info-rij:hover, .rt-info--gekozen { background: var(--accent-licht); }
.rt-info-rij:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rt-info .bd-mini { width: 32px; height: 32px; }
.rt-info-naam, .rt-info-wacht { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-info-wacht { color: var(--tekst-zacht); }
.rt-info-bedrag { font-variant-numeric: tabular-nums; text-align: right; }
.rt-daarna summary { font-size: var(--tekst-tabel); color: var(--tekst-zacht); cursor: pointer; margin-bottom: var(--a2); }

.rt-rij { display: grid; grid-template-columns: minmax(0, 1fr) 90px 32px; gap: var(--a2); align-items: center; font-size: var(--tekst-tabel); }
.rt-rij--kort { grid-template-columns: minmax(0, 1fr) auto; }
.rt-rij b { text-align: right; font-variant-numeric: tabular-nums; }
.rt-baan { display: block; height: 8px; border-radius: var(--radius-rond); background: var(--ring-baan); overflow: hidden; }
.rt-baan i { display: block; height: 100%; background: var(--vn-na); }
.rt-baan--hoofd i { background: var(--urgent); }

/* Detail rechts, naast de lijst. */
.rt-detail { width: 400px; position: sticky; top: var(--a3); max-height: calc(100vh - 2 * var(--a3)); overflow: auto; }
.rt-detail:focus { outline: none; }
.rt-detail-kop { display: flex; justify-content: space-between; align-items: center; }
.rt-regels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a2); }
.rt-regel { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--a2); align-items: start; }
.rt-regel-naam { font-size: var(--tekst-tabel); font-weight: 600; }
.rt-feiten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--a2); margin: 0; font-size: var(--tekst-tabel); }
.rt-feiten dt { color: var(--tekst-zacht); }
.rt-feiten dd { margin: 0; overflow-wrap: anywhere; }
.rt-droog { display: grid; gap: var(--a2); padding: var(--a2); border-radius: var(--radius-veld); background: var(--achtergrond); font-size: var(--tekst-tabel); }
.rt-droog p { margin: 0; }
.rt-stap { display: grid; gap: 4px; }
.rt-stap-kop code { font-size: var(--tekst-klein); }
.rt-velden, .rt-mail { margin: 0; padding: var(--a2); border-radius: var(--radius-veld); background: var(--vlak); font-size: var(--tekst-klein);
  white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font); }

/* Instellingen: het gedeelde tandwielpaneel van de bouwdoos (.bd-tw-*, nacht 2). */
.rt-inst-shop { display: grid; gap: var(--a2); }
.rt-inst-shop h3 { margin: 0; font-size: var(--tekst-basis); }
.rt-inst-veld { display: grid; gap: 4px; font-size: var(--tekst-tabel); }
.rt-inst-veld > span { color: var(--tekst-zacht); }
.rt-inst-twee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a2); }

/* De stap Ontvangen: vier snelle keuzes, klikdoelen 44 px (ook in het WMS). */
.ro-stap { display: grid; gap: var(--a2); }
.ro-groep { display: grid; gap: 4px; }
.ro-label { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.ro-knoppen { display: flex; flex-wrap: wrap; gap: var(--a1); align-items: center; }
.ro-keus { min-height: 44px; padding: 0 var(--a3); border-radius: var(--radius-veld); border: 1px solid var(--lijn); background: var(--vlak); font-size: var(--tekst-tabel); cursor: pointer; }
.ro-keus--aanbevolen { font-weight: 700; }
.ro-keus[aria-pressed="true"] { background: var(--accent-licht); border-color: var(--accent); font-weight: 600; }
.ro-keus:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ro-euro { display: inline-flex; gap: 4px; align-items: center; font-size: var(--tekst-tabel); }
.ro-euro input { width: 90px; min-height: 44px; }
.ro-klant summary { font-size: var(--tekst-tabel); cursor: pointer; }
.ro-onder { display: flex; justify-content: flex-end; }
.ro-verwerk { min-height: 44px; }

/* WMS → Retouren: scanner, ontvangen, onderweg. */
.ro-scherm { display: grid; gap: var(--a3); }
.ro-kop { display: flex; gap: var(--a3); align-items: center; flex-wrap: wrap; }
.ro-kop h2 { margin: 0; font-size: var(--tekst-titel); }
.ro-scan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--a2); align-items: center; background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3); }
.ro-scan label { font-weight: 600; }
.ro-scanveld { min-height: 44px; font-size: var(--tekst-basis); }
.ro-binnen { min-height: 44px; }
.ro-sectie { display: grid; gap: var(--a2); }
.ro-sectie h3 { margin: 0; font-size: var(--tekst-basis); display: flex; gap: var(--a1); align-items: center; }
.ro-lijst { display: grid; gap: var(--a3); }
.ro-kaart { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--a3); background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3); }
.ro-kaart .bd-mini { width: 64px; height: 64px; }
.ro-kaart-stap { grid-column: 1 / -1; }
.ro-naam { margin: 0; font-size: var(--tekst-voorstel); font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ro-sub { margin: 2px 0 0; font-size: var(--tekst-tabel); color: var(--tekst-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-rijen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a1); }
.ro-rij { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--a2); align-items: center; background: var(--vlak); border-radius: var(--radius-kaart); box-shadow: var(--schaduw); padding: var(--a1) var(--a2); }
.ro-rij-tekst { font-size: var(--tekst-tabel); overflow: hidden; }

/* Productpagina → Reviews & retouren. De oude retourtabel staat direct na dit blok en verdwijnt in fase B. */
.ra-blok { display: grid; gap: var(--a3); margin-bottom: 12px; }
.ra-blok + .content-card--table { display: none; }
.ra-twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--a3); align-items: start; }
.ra-kaart { min-width: 0; background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3); display: grid; gap: var(--a2); }
.ra-kaart h3 { margin: 0; font-size: var(--tekst-basis); }
.ra-kaart-vp { cursor: default; }
.ra-balken { display: grid; gap: 2px; }
.ra-balk { display: grid; grid-template-columns: minmax(0, 1fr) 90px 32px; gap: var(--a2); align-items: center; min-height: 36px; padding: 0 var(--a1);
  border: 0; border-radius: var(--radius-veld); background: none; font: inherit; font-size: var(--tekst-tabel); text-align: left; cursor: pointer; }
.ra-balk b { text-align: right; }
.ra-balk:hover, .ra-balk--aan { background: var(--accent-licht); }
.ra-balk:focus-visible { outline: 2px solid var(--accent); }
.ra-lijst { gap: 0; }

/* Aanvullen → Leveranciers: drie tabbladen; de blokken dragen data-lev-sectie. */
.ra-levtabs { margin-bottom: var(--a3); }
.ra-levtabs[data-actief="leveranciers"] ~ [data-lev-sectie]:not([data-lev-sectie="leveranciers"]),
.ra-levtabs[data-actief="artikelen"] ~ [data-lev-sectie]:not([data-lev-sectie="artikelen"]),
.ra-levtabs[data-actief="defect"] ~ [data-lev-sectie]:not([data-lev-sectie="defect"]) { display: none; }
.ra-lev { display: grid; gap: var(--a3); }
.ra-levkaart { cursor: default; }
.ra-levkaart > .bd-knop { justify-self: start; }

@media (max-width: 1200px) { .rt-raster { grid-template-columns: minmax(0, 1fr); } .rt-detail { width: auto; position: static; max-height: none; } }
@media (max-width: 900px) {
  .rt-watnu-getallen { grid-template-columns: minmax(0, 1fr); } .rt-kaart-onder, .ra-twee, .rt-inst-twee { grid-template-columns: minmax(0, 1fr); }
  .rt-info { grid-template-columns: 32px minmax(0, 1fr) auto; } .rt-info-naam, .rt-info-wacht { display: none; }
}

/* Fase B: wat loopt onder de kaarten; schakelaar en knop in het instellingenpaneel. */
.rt-lopend { display: grid; gap: var(--a2); }
.rt-lopend h3 { margin: 0; font-size: var(--tekst-basis); display: flex; gap: var(--a1); align-items: center; }
.rt-info-wacht .bd-pil { font-size: var(--tekst-klein); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; }
.rt-inst-schakel { display: flex; gap: var(--a1); align-items: center; font-size: var(--tekst-tabel); min-height: 28px; }
.rt-inst-knop { display: flex; justify-content: flex-end; }

/* WMS → Retouren (fase B): ontvangen zonder scan, met reden. */
.ro-rij--open { grid-template-columns: 44px minmax(0, 1fr); }
.ro-overrule { grid-column: 1 / -1; display: grid; gap: var(--a1); padding-top: var(--a1); border-top: 1px solid var(--lijn); }
.ro-ov-tekst { min-height: 44px; max-width: 420px; }
.ro-naam .kanaal-merk, .ro-rij-tekst .kanaal-merk { vertical-align: middle; }
.ro-conflict { color: var(--letop-tekst); }
.rt-info-wacht .bd-pil { vertical-align: middle; }

/* Reviews & retouren: elke retour een uitklaprij (nawerk retouren 2, punt 2). Kop op één regel, detail volledig. */
.ra-rij { border-bottom: 1px solid var(--lijn); }
.ra-rij:last-child { border-bottom: 0; }
.ra-rij-kop { display: grid; grid-template-columns: 14px auto 1fr auto auto auto; gap: var(--a2);
  align-items: center; padding: var(--a1) var(--a2); cursor: pointer; list-style: none; }
.ra-rij-kop::-webkit-details-marker { display: none; }
.ra-rij-kop::before { content: '▸'; color: var(--tekst-zacht); }
.ra-rij details[open] > .ra-rij-kop::before { content: '▾'; }
.ra-rij-kop:hover { background: var(--accent-licht); }
.ra-rij-kop:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ra-rij-nr { font-weight: 600; white-space: nowrap; }
.ra-rij-bron, .ra-rij-status { color: var(--tekst-zacht); }
.ra-rij-datum, .ra-rij-bedrag, .ra-rij-bron, .ra-rij-status { white-space: nowrap; }
.ra-rij-datum, .ra-rij-bedrag { font-variant-numeric: tabular-nums; }
.ra-rij-bedrag { text-align: right; }
.ra-rij-detail { padding: 0 var(--a2) var(--a2) calc(14px + 2 * var(--a2)); white-space: normal; overflow-wrap: anywhere; }
.ra-rij-detail p { margin: 0 0 var(--a1); }
@media (max-width: 640px) { .ra-rij-kop { grid-template-columns: 14px auto 1fr auto; } .ra-rij-bron, .ra-rij-status { display: none; } }

/* Verbeterpunt van de regel Defectdrempel (nawerk retouren 2, punt 4): de zinnen heel, het tegenvoorstel als invoerregel. */
.rt-zin--heel { white-space: normal; overflow: visible; }
.ra-eigen { width: 100%; margin: 2px 0 var(--a1); }