/* Stijl in de geest van FiveX: wit op lichtgrijs, zijbalk, ronde kaarten, blauw accent. */
:root{--bg:#f6f8fb;--surface:#fff;--fg:#0f172a;--muted:#64748b;--line:#e5e9f0;--band:#f8fafc;--accent:#2563eb;--accent-soft:#eaf1ff;
  --pos:#16a34a;--neg:#dc2626;--c-cogs:#2a78d6;--c-winst:#1baf7a;--c-ads:#e34948;--c-var:#eda100;--c-omzet:#2a78d6;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root:not(.licht){--bg:#0f1218;--surface:#171b23;--fg:#e9ecf2;--muted:#9aa3b2;--line:#252b36;--band:#1d222c;--accent:#60a5fa;--accent-soft:#16233d;
  --pos:#4ade80;--neg:#f87171;--c-cogs:#3987e5;--c-winst:#199e70;--c-ads:#e66767;--c-var:#c98500;--c-omzet:#3987e5;color-scheme:dark}}:root.donker{--bg:#0f1218;--surface:#171b23;--fg:#e9ecf2;--muted:#9aa3b2;--line:#252b36;--band:#1d222c;--accent:#60a5fa;--accent-soft:#16233d;
  --pos:#4ade80;--neg:#f87171;--c-cogs:#3987e5;--c-winst:#199e70;--c-ads:#e66767;--c-var:#c98500;--c-omzet:#3987e5;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f);font-size:14px;line-height:1.45}
[hidden]{display:none!important}
.muted{color:var(--muted);margin:0}
input,select,button{font:inherit}
input,select{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:10px;padding:9px 12px}
button.primary{border:0;border-radius:10px;padding:10px 14px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
button.link{border:0;background:none;color:var(--muted);cursor:pointer;padding:8px 12px;text-align:left}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.05rem}
.logo{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:inline-grid;place-items:center;font-size:.9rem}
#login{max-width:380px;margin:0 auto;padding-inline:16px;padding-block:14vh 32px}
.logincard{padding:28px;display:flex;flex-direction:column;gap:14px}
.logincard input{width:100%}
#fout{color:var(--neg);font-size:.85rem;min-height:1.2em;margin:0}
.app{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100%}
.side{background:var(--surface);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}
.side .brand{padding:4px 10px 18px}
.side a{color:var(--fg);text-decoration:none;padding:9px 12px;border-radius:10px;font-size:.92rem}
.side a.act{background:var(--band);font-weight:600}
.side a.dis{color:var(--muted);pointer-events:none}
.side .grp{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:16px 12px 6px}
.side .spacer{flex:1}
.main{padding-inline:28px;padding-block:24px 48px;display:flex;flex-direction:column;gap:18px;min-width:0}
@media (max-width:860px){.app{grid-template-columns:minmax(0,1fr)}.side{position:static;height:auto;flex-direction:row;align-items:center;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 12px}.side .brand{padding:4px 10px 4px 0}.main{padding-inline:16px}}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
h1{font-size:1.45rem;font-weight:600;margin:0}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filters label{color:var(--muted);font-size:.85rem;display:flex;gap:8px;align-items:center}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.kpi{padding:18px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.kpi .ico{width:44px;height:44px;border-radius:10px;background:var(--band);display:grid;place-items:center;color:var(--muted);font-weight:600}
.kpi .l{font-size:.78rem;color:var(--muted)}
.kpi .n{font-size:1.45rem;font-weight:600;font-variant-numeric:tabular-nums;margin:2px 0}
.kpi .d{font-size:.78rem}
.up{color:var(--pos)} .down{color:var(--neg)}
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:1100px){.split{grid-template-columns:minmax(0,1fr)}}
.chartcard{padding:16px}
.charthead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tabs{display:flex;background:var(--band);border-radius:10px;padding:3px;gap:2px}
.tabs button{border:0;background:transparent;color:var(--muted);padding:7px 16px;border-radius:8px;cursor:pointer}
.tabs.vol{margin:0 16px 10px}
#best{width:100%}
.cardhead.links{justify-content:flex-start;align-items:center;gap:24px}
.bestfilter{display:flex;gap:8px;flex-wrap:wrap}
#bestzoek{width:260px;max-width:100%}
#best th,#best td{padding:9px 12px}
#best th:first-child,#best td:first-child{padding-left:16px}
#best td.naam{width:100%;max-width:0;min-width:240px;text-align:left}
#best th.naam{text-align:left}
.tabs.vol button{flex:1}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--accent);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin:0 0 6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.cw{position:relative}
svg text{fill:var(--muted);font-family:var(--f);font-size:10.5px}
.tip{position:absolute;pointer-events:none;background:var(--fg);color:var(--bg);font-size:.76rem;padding:8px 10px;border-radius:8px;white-space:nowrap;transform:translate(-50%,-100%);display:none;font-variant-numeric:tabular-nums;z-index:3}
.tip b{display:block;margin-bottom:2px}
.tablecard{overflow:hidden}
table{border-collapse:collapse;width:100%;font-size:.86rem}
th,td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
th{font-weight:500;color:var(--muted);background:var(--band)}
th:first-child,td:first-child{text-align:left}
tr.kop td{background:var(--band);font-weight:600}
tr.sub td:first-child{padding-left:30px;color:var(--muted)}
tr.sub2 td:first-child{padding-left:56px;color:var(--muted)}
tr.sub.tog td:first-child::before{margin-left:-14px}
tr.res td{font-weight:600;color:var(--pos);background:var(--band)}
tr.res.neg td{color:var(--neg)}
tr.tog td:first-child{cursor:pointer}
tr.tog td:first-child::before{content:"› ";color:var(--muted);display:inline-block;width:12px}
tr.tog.open td:first-child::before{content:"⌄ "}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;border:2px solid;margin-right:8px;vertical-align:0}
.note{font-size:.75rem;color:var(--muted);margin:0}
.waarsch{margin:0;background:#fff7e6;color:#8a5a00;border:1px solid #f3dfb5;border-radius:10px;padding:8px 12px;font-size:.82rem}
@media (prefers-color-scheme:dark){html:not(.licht) .waarsch{background:#2e2412;color:#e8b35a;border-color:#4a3a1c}}html.donker .waarsch{background:#2e2412;color:#e8b35a;border-color:#4a3a1c}
.kop2{font-size:.95rem;font-weight:600;margin:6px 0 -6px}
.groei{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.gt{padding:14px 16px}
.gt .l{font-size:.78rem;color:var(--muted)}
.gt .g{font-size:1.35rem;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.vrd{padding:18px;display:flex;flex-direction:column;gap:4px}
.vrd .l{font-size:.78rem;color:var(--muted)}
.vrd .n{font-size:1.6rem;font-weight:600;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}
[data-pagina]{display:flex;flex-direction:column;gap:18px}
[data-pagina][hidden]{display:none!important}
/* Inkooppagina */
.cardhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:14px 16px 10px}
.kop3{font-size:.98rem;font-weight:600;margin:0 0 2px}
td.naam{max-width:340px;overflow:hidden;text-overflow:ellipsis}
.tag{font-size:.68rem;background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:1px 6px;margin-left:4px}
.pill{display:inline-block;font-size:.74rem;font-weight:500;border-radius:999px;padding:2px 10px}
.pill.rood{background:#fde8e8;color:#b42318}.pill.oranje{background:#fff1e0;color:#a14a00}.pill.geel{background:#fdf7d8;color:#7a5d00}
.pill.ok{background:#e7f6ec;color:#11703b}.pill.blauw{background:var(--accent-soft);color:var(--accent)}.pill.grijs{background:var(--band);color:var(--muted)}
@media (prefers-color-scheme:dark){html:not(.licht) .pill.rood{background:#3b1717;color:#f8a5a5}html:not(.licht) .pill.oranje{background:#3a2610;color:#f5b971}html:not(.licht) .pill.geel{background:#332c10;color:#e6cf6a}html:not(.licht) .pill.ok{background:#12301f;color:#7ddca0}}html.donker .pill.rood{background:#3b1717;color:#f8a5a5}html.donker .pill.oranje{background:#3a2610;color:#f5b971}html.donker .pill.geel{background:#332c10;color:#e6cf6a}html.donker .pill.ok{background:#12301f;color:#7ddca0}
.mapcard{overflow:hidden}
.mapwrap{position:relative;padding:0 16px 8px}
#kaart.lmap{width:100%;height:460px;border-radius:10px;background:#dde9f5;z-index:0}
.leaflet-tooltip.lbl{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:6px;box-shadow:none;font-weight:600;font-size:12px;padding:2px 6px;color:var(--fg)}
.leaflet-tooltip.lbl.haven{font-weight:400;color:var(--muted)}
.leaflet-tooltip.lbl:before{display:none}
.leaflet-container{font-family:inherit}
.schiplijst{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px}
.schiplijst li{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:.9rem}
.schiplijst .dot{width:12px;height:12px;border-radius:50%;flex:none;margin-top:4px}
#kaart .land{fill:var(--surface);stroke:var(--line);stroke-width:.5}
#kaart .haven{fill:var(--muted)}
#kaart text{font-size:7px}
#kaart .havenl{fill:var(--muted)}
#kaart .schipl{fill:var(--fg);font-weight:600}
#kaart .stip{fill:var(--accent);stroke:var(--surface);stroke-width:1.2}
#kaart .halo{fill:var(--accent);opacity:.18}
#kaart .schip{cursor:pointer;outline:none}
#kaart .spoor{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:3 2;opacity:.7}
tfoot td{border-bottom:0}
#bestel,#orders,#vessels{font-size:.8rem}
#bestel th,#bestel td,#orders th,#orders td,#vessels th,#vessels td{padding:8px 9px}
#bestel td.naam{max-width:250px}
.schakel{gap:6px!important;cursor:pointer;user-select:none}
.schakel input{width:16px;height:16px;padding:0;accent-color:var(--accent);cursor:pointer}
tr.klik{cursor:pointer}
tr.klik:hover td{background:var(--band)}
dialog#grafiek{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);padding:16px 18px;width:min(860px,calc(100vw - 32px));max-width:none}
dialog#grafiek::backdrop{background:rgba(15,18,24,.45)}
.dlghead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}
.dlghead .link{font-size:1.1rem;padding:2px 8px}
#gsvg{width:100%;height:auto;display:block}
#gsvg .grid{stroke:var(--line);stroke-width:1}
#gsvg .grid.nul{stroke:var(--muted);stroke-width:1.2}
#gsvg text.sub{font-size:9.5px;opacity:.8}
#gsvg .lijn{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
#gsvg .lijn2{fill:none;stroke:var(--c-winst);stroke-width:2;stroke-dasharray:6 4}
#gsvg .tekort{fill:var(--neg);opacity:.08}
#gsvg .tekortl{fill:var(--neg)}
#gsvg .mark{stroke:var(--c-var);stroke-width:1.5;stroke-dasharray:4 3}
#gsvg .markl{fill:var(--fg)}
#gsvg .lev{fill:var(--accent);stroke:var(--surface);stroke-width:2}
#gsvg .levl{fill:var(--fg);font-weight:600}
#gsvg .kruis{stroke:var(--muted);stroke-width:1}
#gsvg .kp{fill:var(--accent);stroke:var(--surface);stroke-width:2}
#gsvg .hit{fill:transparent}
.tag.warn{background:#fff1e0;color:#a14a00}
@media (prefers-color-scheme:dark){html:not(.licht) .tag.warn{background:#3a2610;color:#f5b971}}html.donker .tag.warn{background:#3a2610;color:#f5b971}
.gprogkop{margin:14px 0 6px}
#gprog{font-size:.78rem}
#gprog th,#gprog td{padding:6px 8px}
#gprog td.meth{white-space:normal;text-align:left;min-width:320px;color:var(--muted)}
#gprog tr.warnrij td{background:#fff7e6}
@media (prefers-color-scheme:dark){html:not(.licht) #gprog tr.warnrij td{background:#2e2412}}html.donker #gprog tr.warnrij td{background:#2e2412}
dialog#grafiek{max-height:calc(100vh - 32px);overflow:auto}
#leerlog{font-size:.78rem}
#leerlog th,#leerlog td{padding:7px 9px;vertical-align:top}
#leerlog td.tekst{white-space:normal;text-align:left;min-width:220px;max-width:340px}
#versnel{font-size:.78rem}
#versnel th,#versnel td{padding:7px 9px;vertical-align:top}
#versnel td.tekst{white-space:normal;text-align:left;min-width:180px}
#best{font-size:.8rem}
#best th,#best td{padding:8px 9px}
#best td.naam{max-width:300px;overflow:hidden;text-overflow:ellipsis}
#todo{font-size:.8rem}
#todo th,#todo td{padding:8px 9px;vertical-align:top}
#todo td.tekst{white-space:normal;text-align:left;min-width:240px;max-width:420px}
#todo td.naam{white-space:normal;min-width:160px}
/* Telefoon (6 okt 2026): tabellen nooit afknippen. Lange regelnamen mogen afbreken, kleinere marges, en als het
   dan nog niet past kun je de kaart horizontaal schuiven. */
@media (max-width:860px){
  .tablecard{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{font-size:.8rem}
  th,td{padding:8px 8px}
  #rr td:first-child,#rr2 td:first-child,#rr th:first-child,#rr2 th:first-child{white-space:normal;min-width:110px;max-width:160px}
  #rr th,#rr td,#rr2 th,#rr2 td{padding:8px 6px}
  tr.sub td:first-child{padding-left:18px}
  tr.sub2 td:first-child{padding-left:30px}
}
.side .navkop{color:var(--fg);padding:9px 12px 4px;font-size:.92rem}
.side a.sub{padding-left:26px}
@media (max-width:860px){.side .navkop{padding:9px 6px 9px 12px;color:var(--muted)}.side a.sub{padding-left:10px}}
.rmnd{font-size:.8rem}
.rmnd th,.rmnd td{padding:7px 10px}
.rmnd td.neg{color:var(--neg)}
/* ---- Telefoon (17 okt 2026): menuknop, compacte kerncijfers, brede tabellen als kaartjes (zie mobiel.js) ---- */
.menuknop{display:none}
a.brand{color:var(--fg);text-decoration:none}
@media (max-width:640px){
  body{font-size:14px}
  #kaart.lmap{height:320px}
  /* iPhone zoomt in bij invoervelden kleiner dan 16px en zoomt niet terug (17 okt 2026) */
  input,select,textarea{font-size:16px}
  .side{padding-top:max(8px,env(safe-area-inset-top))}
  .side{position:sticky;top:0;z-index:20;flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;padding:8px 12px;overflow:visible}
  .side .brand{padding:0;flex:1;font-size:1rem}
  .side .brand .logo{width:28px;height:28px}
  .menuknop{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:42px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:0 11px;cursor:pointer}
  .menuknop span{display:block;height:2px;border-radius:2px;background:var(--fg)}
  .side>a:not(.brand),.side>.navkop,.side>button.link,.side>.spacer,.side>.grp{display:none}
  .side.open>a:not(.brand),.side.open>.navkop,.side.open>button.link{display:block;flex-basis:100%;padding:11px 12px;font-size:1rem}
  .side .brand{display:flex}
  .side.open{box-shadow:0 8px 24px rgba(0,0,0,.12)}
  .side.open>.navkop{padding-bottom:2px;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
  .side.open>a.sub:not(.brand){padding-left:24px}
  .side.open>button.link{text-align:left}
  .main{padding-inline:12px;padding-block:14px 40px;gap:14px}
  h1{font-size:1.25rem}
  .top{align-items:stretch}
  .filters{width:100%}
  .filters label{flex:1}
  .filters select{flex:1;min-width:0}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:12px;grid-template-columns:minmax(0,1fr);gap:0}
  .kpi .ico{display:none}
  .kpi .n{font-size:1.15rem}
  .kpi .l,.kpi .d{font-size:.72rem}
  .chartcard{padding:12px}
  /* brede tabellen: elke rij een kaartje */
  table.stapel,table.stapel tbody,table.stapel tr,table.stapel td{display:block;width:100%}
  table.stapel thead{display:none}
  table.stapel tr{border-bottom:1px solid var(--line);padding:8px 4px}
  table.stapel td{display:flex;justify-content:space-between;gap:12px;padding:3px 8px!important;border:0!important;text-align:right!important;white-space:normal!important;max-width:none!important;min-width:0!important}
  table.stapel td::before{content:attr(data-l);color:var(--muted);text-align:left;flex:0 0 40%;font-weight:400}
  table.stapel td[data-l=""]::before{display:none}
  table.stapel td:first-child{font-weight:600}
  table.stapel td>*{max-width:60%}
  table.stapel td.lang{display:block;text-align:left!important}
  table.stapel td.lang::before{display:block;margin-bottom:1px;font-size:.75rem}
  table.stapel td.lang>*{max-width:none}
  .scroll,.tablecard{overflow-x:auto}
}
/* ---- WMS-ontwerp (17 okt 2026) ---- */
.wpad{padding:0 16px 14px}
.wpadb{margin-bottom:-4px}
.scanveld{width:100%;font-size:1.25rem!important;padding:14px 16px;border:2px solid var(--accent);border-radius:12px}
.wok{margin:0;background:#e7f6ec;color:#11703b;border:1px solid #bfe5cc;border-radius:10px;padding:8px 12px;font-size:.85rem}
@media (prefers-color-scheme:dark){html:not(.licht) .wok{background:#12301f;color:#7ddca0;border-color:#1f4d33}}html.donker .wok{background:#12301f;color:#7ddca0;border-color:#1f4d33}
.wordkop{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.wregels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wregels li{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.wregels li.ok{background:var(--band)}
.vink{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:#fff;font-size:.8rem}
.wregels li.ok .vink{background:var(--pos);border-color:var(--pos)}
.waantal{font-variant-numeric:tabular-nums;font-weight:600}
.wknoppen{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
button.primary.groot{padding:14px 20px;font-size:1rem}
button.primary:disabled{opacity:.45;cursor:not-allowed}
tr.act td{background:var(--accent-soft)}
.wtegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;padding:0 16px 16px}
.wtegel{border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:2px;font-size:.8rem;border:1px solid var(--line)}
.wtegel.groen{background:#e7f6ec}.wtegel.oranje{background:#fff1e0}.wtegel.rood{background:#fde8e8}
@media (prefers-color-scheme:dark){html:not(.licht) .wtegel.groen{background:#12301f}html:not(.licht) .wtegel.oranje{background:#3a2610}html:not(.licht) .wtegel.rood{background:#3b1717}}html.donker .wtegel.groen{background:#12301f}html.donker .wtegel.oranje{background:#3a2610}html.donker .wtegel.rood{background:#3b1717}
.wform{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;align-items:end}
.wform label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}
.neg{color:var(--neg)}
.wrij{list-style:none;margin:0;padding:0 8px 8px}
.wrij li{padding:10px 8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.wrij li.act{background:var(--accent-soft);border-radius:10px}
.wrijkop{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wrijprod{font-size:.85rem}
.wrijprod button.link{padding:2px 6px;font-size:.78rem}
.wzoek{display:flex;gap:10px;align-items:center}
.wzoek .scanveld{flex:1}
.wbalk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px}
.wbalk .primary{flex:1;min-width:150px;padding:12px 16px}
button.primary.groen{background:var(--pos)}
.walles{display:flex;gap:8px;align-items:center;font-weight:500;min-width:150px}
.walles input,.wsel{width:20px;height:20px;accent-color:var(--accent)}
.wgroep{padding:12px 16px}
.wgroepkop{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.wbeeld{width:44px;height:44px;border-radius:10px;background:var(--band);display:grid;place-items:center;font-weight:600;color:var(--muted)}
.waantalrond{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.8rem}
.wgroen{color:var(--pos);font-size:.85rem}
.wrijo{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.wrijo button.link{padding:4px 2px;color:var(--fg)}
.wbalk2{margin-bottom:-6px}
.wgegevens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wgroenbalk{background:var(--pos);color:#fff;border-radius:10px;padding:10px 14px;font-weight:600}

/* ===== Thema 18 okt 2026 (ontwerp Retouren, Gerwin: "exact dit, ook de font en de kleuren") — geldt voor het hele dashboard ===== */
body{font-size:14px;letter-spacing:-.003em;-webkit-font-smoothing:antialiased}
h1{font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.sub-titel{color:var(--muted);margin:4px 0 0;font-size:.95rem}
.card{border-radius:12px;border-color:var(--line);box-shadow:0 1px 2px rgba(15,23,42,.03)}
input,select{border-radius:8px;border-color:var(--line)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
button.primary{border-radius:8px}
.logo{border-radius:9px;background:var(--accent);font-weight:700}
/* zijbalk */
.side{padding:20px 14px;gap:4px;background:var(--surface)}
.side .brand{padding:4px 10px 22px;font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.side a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:.95rem;color:#1e293b;font-weight:500}
.side a:hover{background:var(--band)}
.side a.act{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side a.act .ico svg{stroke:var(--accent)}
.side .ico{width:22px;height:22px;display:inline-grid;place-items:center;flex:none}
.side .ico svg{width:20px;height:20px;stroke:#334155;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side .navkop{display:flex;align-items:center;gap:12px;font-weight:500;font-size:.95rem;color:#1e293b;padding:10px 12px 4px}
.side a.sub{padding-left:46px;font-weight:400;font-size:.9rem;color:#334155}
.side .teller{margin-left:auto;background:var(--accent-soft);color:var(--accent);font-size:.78rem;font-weight:600;border-radius:999px;padding:1px 9px}
.side a.act .teller{background:#fff}
.side .gebruiker{display:flex;align-items:center;gap:12px;padding:12px 8px 4px;border-top:1px solid var(--line);margin-top:8px}
.side .avatar{width:40px;height:40px;border-radius:50%;background:#1e293b;color:#fff;display:grid;place-items:center;font-weight:600;font-size:.9rem;flex:none}
.side .gebruiker b{display:block;font-weight:600;font-size:.92rem}
.side .gebruiker button.link{padding:0;font-size:.85rem}
@media (prefers-color-scheme:dark){html:not(.licht) .side a,html:not(.licht) .side .navkop{color:var(--fg)}html:not(.licht) .side a.sub{color:var(--muted)}html:not(.licht) .side .ico svg{stroke:var(--muted)}html:not(.licht) .side .avatar{background:#334155}}html.donker .side a,html.donker .side .navkop{color:var(--fg)}html.donker .side a.sub{color:var(--muted)}html.donker .side .ico svg{stroke:var(--muted)}html.donker .side .avatar{background:#334155}
/* filterknoppen (chips) */
.tabs{background:none;padding:0;gap:8px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:var(--surface);color:#1e293b;padding:8px 16px;border-radius:10px;font-weight:500;box-shadow:0 1px 2px rgba(15,23,42,.03)}
.tabs button[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:none;font-weight:600}
.tabs.vol button{flex:none}
@media (prefers-color-scheme:dark){html:not(.licht) .tabs button{color:var(--fg)}}html.donker .tabs button{color:var(--fg)}
/* tabellen */
th{background:var(--band);color:#1e293b;font-weight:600;font-size:.8rem}
th,td{padding:12px 14px}
@media (prefers-color-scheme:dark){html:not(.licht) th{color:var(--fg)}}html.donker th{color:var(--fg)}
/* statuslabels */
.pill{font-size:.78rem;font-weight:500;border-radius:6px;padding:3px 10px}
.pill.blauw{background:#e0ecff;color:#2563eb}.pill.ok{background:#dcfce7;color:#15803d}.pill.rood{background:#fee2e2;color:#dc2626}
.pill.oranje,.pill.geel{background:#fef3c7;color:#b45309}
@media (prefers-color-scheme:dark){html:not(.licht) .pill.blauw{background:#16233d;color:#93c5fd}html:not(.licht) .pill.ok{background:#12301f;color:#7ddca0}html:not(.licht) .pill.rood{background:#3b1717;color:#f8a5a5}html:not(.licht) .pill.oranje,html:not(.licht) .pill.geel{background:#33270f;color:#f5c26b}}html.donker .pill.blauw{background:#16233d;color:#93c5fd}html.donker .pill.ok{background:#12301f;color:#7ddca0}html.donker .pill.rood{background:#3b1717;color:#f8a5a5}html.donker .pill.oranje,html.donker .pill.geel{background:#33270f;color:#f5c26b}
@media (max-width:640px){.side>.gebruiker{display:none}.side.open>.gebruiker{display:flex;flex-basis:100%}.side.open>a:not(.brand),.side.open>.navkop{display:flex}.side.open>a.sub:not(.brand){padding-left:46px}}
/* ===== Retourmodule (18 okt 2026) volgens het ontwerp ===== */
.ret-main{gap:20px}
.ret-kop{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:24px;align-items:start}
.ret-zoek{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 14px;height:46px}
.ret-zoek svg{width:20px;height:20px;stroke:#334155;fill:none;stroke-width:2;flex:none}
.ret-zoek input{border:0;padding:0;height:100%;width:100%;background:none;font-size:.95rem;box-shadow:none}
.ret-zoek:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ret-balk{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ret-chips{display:flex;gap:10px;flex-wrap:wrap}
.ret-chip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface);color:#1e293b;border-radius:10px;padding:10px 20px;font-weight:500;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.ret-chip[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft);color:#1d4ed8;font-weight:600}
.stip{width:10px;height:10px;border-radius:50%;display:inline-block}.stip.blauw{background:#2563eb}.stip.oranje{background:#f59e0b}.stip.ok{background:#16a34a}.stip.rood{background:#ef4444}
.ret-rechts{display:flex;align-items:center;gap:12px}
.ret-scan{font-size:.78rem;color:var(--muted);background:var(--band);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.ret-scan.ok{background:#dcfce7;color:#15803d;border-color:#bbf7d0}.ret-scan.fout{background:#fee2e2;color:#dc2626;border-color:#fecaca}
.ret-sort{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 12px;height:44px}
.ret-sort svg{width:18px;height:18px;stroke:#334155;fill:none;stroke-width:2}
.ret-sort select{border:0;padding:0 4px;background:none;font-weight:500;color:var(--fg);box-shadow:none;cursor:pointer}
.ret-grid{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:24px;align-items:start}
.ret-lijst{overflow:hidden}
#rettabel{width:100%}
#rettabel th{background:var(--band);color:#1e293b;font-weight:600;font-size:.82rem;text-align:left;padding:16px 12px;border-bottom:1px solid var(--line)}
#rettabel td{text-align:left;padding:14px 8px;vertical-align:middle;border-bottom:1px solid var(--line);color:#1e293b;font-variant-numeric:normal}
#rettabel th{padding-left:8px;padding-right:8px}#rettabel .pill{white-space:nowrap}
#rettabel tr.klik{cursor:pointer}#rettabel tr.klik:hover td{background:#fafcff}#rettabel tr.act td{background:#eef4ff}
#rettabel .ret-chk{width:44px;padding-left:16px;padding-right:4px}
.ret-chk input{width:18px;height:18px;padding:0;accent-color:var(--accent);cursor:pointer;vertical-align:middle}
.ret-dat{line-height:1.35;color:#475569!important}.ret-dat span{display:block;color:#64748b}
#rettabel td.naam{width:100%;max-width:0;min-width:150px}
.ret-prod{display:flex;align-items:center;gap:12px;min-width:0}.ret-prod>div{min-width:0}
.ret-prod b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ret-prod span{display:block;color:#64748b;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ret-thumb{width:48px;height:48px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}
.ret-pijl{width:28px;padding-right:14px!important}.ret-pijl svg{width:20px;height:20px;stroke:#334155;fill:none;stroke-width:2}
.ret-leeg{padding:24px 16px!important}
.ret-logo{width:40px;height:40px;border-radius:8px;display:inline-grid;place-items:center;font-weight:800;color:#fff;font-size:.9rem;letter-spacing:-.02em;font-family:Arial,Helvetica,sans-serif}
.ret-logo.groot{width:52px;height:52px;font-size:1.1rem;border-radius:10px}
.ret-logo.bol{background:#0000a4;background:#0b4ae0}.ret-logo.woo{background:#7f54b3;font-size:.85rem}.ret-logo.dec{background:#0082c3;font-size:1.3rem}
.ret-logo.anwb{background:none;color:#0a3d91;font-style:italic;font-size:.82rem;width:auto;padding:0 2px}.ret-logo.groot.anwb{background:#ffcc00;color:#0a3d91;padding:0 6px;width:52px;font-size:.78rem}
.ret-logo.amz{background:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.ret-logo.amz .a{font:700 30px/0.8 Arial,Helvetica,sans-serif;color:#111}.ret-logo.amz svg{width:34px;height:10px;margin-top:-2px}.ret-logo.groot.amz .a{font-size:34px}.ret-logo.groot.amz{background:#fff;border:1px solid var(--line)}
.ret-bulk{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--accent-soft);border-bottom:1px solid var(--line);font-weight:500;color:#1d4ed8}
.ret-voet{margin:0;padding:12px 16px;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ret-voet .link{padding:0;color:var(--accent)}
.ret-paneel{position:sticky;top:20px;padding:22px 24px;display:flex;flex-direction:column;gap:0;max-height:calc(100vh - 40px);overflow-y:auto}
.ret-pkop{display:flex;align-items:flex-start;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.ret-ptitel{flex:1;min-width:0}.ret-ptitel h2{margin:2px 0 4px;font-size:1.3rem;font-weight:700}.ret-ptitel p{margin:0;color:#64748b}
.ret-sluit{display:none;border:0;background:none;font-size:1.1rem;color:var(--muted);cursor:pointer;padding:4px}
.ret-blok{padding:16px 0;border-bottom:1px solid var(--line)}
.ret-blok h3{margin:0 0 6px;font-size:1rem;font-weight:700;color:#0f172a}.ret-blok h3 span{font-weight:400}
.ret-blok p{margin:2px 0;color:#334155}
.ret-naam{color:#0f172a!important;font-weight:500}.ret-link{color:var(--accent)!important}
.ret-notitie{margin-top:8px!important;background:#fef3c7;color:#92400e!important;border-radius:8px;padding:6px 10px;font-size:.85rem}
.ret-klant{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.ret-pprod{display:flex;gap:14px;align-items:flex-start}.ret-pprod>div{flex:1;min-width:0}.ret-pprod b{display:block;font-weight:600;margin-bottom:4px}.ret-pprod p{color:#475569}
.ret-pimg{width:84px;height:84px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}
.ret-aantal{font-weight:500;color:#334155}
.ret-rij{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px;padding:2px 0;color:#475569}.ret-rij span:last-child{color:#334155}
.ret-fotos{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.ret-fotos img{width:124px;height:76px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.ret-tegel{width:110px;height:76px;border:1px solid var(--line);border-radius:8px;background:var(--band);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:.78rem;color:#475569;cursor:pointer;font-family:inherit}
.ret-tegel b{font-size:1.4rem;font-weight:400;color:#334155;line-height:1}.ret-tegel svg{width:20px;height:20px;stroke:#334155;fill:none;stroke-width:1.8}
.ret-tegel:hover{border-color:var(--accent)}
.ret-acties{display:flex;flex-direction:column;gap:12px;padding-top:16px}
.ret-twee{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ret-knop{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:6px;border:1px solid transparent;font:inherit;font-weight:600;font-size:1rem;cursor:pointer}
.ret-knop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ret-knop.groen{background:#15803d;color:#fff}.ret-knop.groen:hover{background:#166534}
.ret-knop.rood{background:#ef4444;color:#fff}.ret-knop.rood:hover{background:#dc2626}
.ret-knop.case{background:#fff8e1;border-color:#f5c04a;color:#e2401c}.ret-knop.case svg{stroke:#e2401c}
.ret-knop.rand{background:var(--surface);border-color:#94a3b8;color:#0f172a}.ret-knop.rand svg{stroke:#0f172a}
.ret-knop:disabled{opacity:.4;cursor:default}
.ret-mini{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:#0f172a;border-radius:8px;padding:9px 14px;font:inherit;font-weight:500;cursor:pointer;white-space:nowrap}
.ret-mini svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.ret-mini.groen{background:#15803d;border-color:#15803d;color:#fff}.ret-mini.rood{background:#ef4444;border-color:#ef4444;color:#fff}.ret-mini.blauw{background:var(--accent);border-color:var(--accent);color:#fff}
.ret-dlg{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);padding:20px 22px;width:min(440px,calc(100vw - 32px))}
.ret-dlg.breed{width:min(620px,calc(100vw - 32px))}.ret-dlg::backdrop{background:rgba(15,23,42,.45)}
.ret-dlg form{display:flex;flex-direction:column;gap:12px}.ret-dlg h2{margin:0}
.ret-veld{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--muted)}
.ret-veld input,.ret-veld textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.ret-veld textarea[readonly]{background:var(--band);font-size:.82rem}
.ret-knoppen{display:flex;justify-content:flex-end;gap:8px}
.ret-qrgroot{display:grid;place-items:center}.ret-qrgroot img{border:1px solid var(--line);border-radius:10px;background:#fff}
.ret-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 16px;border-radius:10px;font-size:.88rem;z-index:40;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.ret-toast.fout{background:#dc2626}
@media (prefers-color-scheme:dark){html:not(.licht) .ret-chip,html:not(.licht) #rettabel td,html:not(.licht) #rettabel th,html:not(.licht) .ret-blok h3,html:not(.licht) .ret-naam,html:not(.licht) .ret-mini,html:not(.licht) .ret-knop.rand{color:var(--fg)!important}html:not(.licht) .ret-blok p,html:not(.licht) .ret-rij span:last-child,html:not(.licht) .ret-pprod p,html:not(.licht) .ret-aantal{color:#cbd5e1}html:not(.licht) .ret-rij,html:not(.licht) .ret-dat{color:var(--muted)!important}html:not(.licht) #rettabel tr.act td{background:#16233d}html:not(.licht) #rettabel tr.klik:hover td{background:#1a2030}html:not(.licht) .ret-chip[aria-selected="true"]{color:#93c5fd!important}html:not(.licht) .ret-zoek svg,html:not(.licht) .ret-sort svg,html:not(.licht) .ret-pijl svg,html:not(.licht) .ret-tegel svg,html:not(.licht) .ret-knop.rand svg{stroke:var(--muted)}html:not(.licht) .ret-knop.case{background:#2e2412}html:not(.licht) .ret-notitie{background:#33270f;color:#f5c26b!important}html:not(.licht) .ret-bulk{color:#93c5fd}html:not(.licht) .ret-logo.groot.amz{background:#fff}}html.donker .ret-chip,html.donker #rettabel td,html.donker #rettabel th,html.donker .ret-blok h3,html.donker .ret-naam,html.donker .ret-mini,html.donker .ret-knop.rand{color:var(--fg)!important}html.donker .ret-blok p,html.donker .ret-rij span:last-child,html.donker .ret-pprod p,html.donker .ret-aantal{color:#cbd5e1}html.donker .ret-rij,html.donker .ret-dat{color:var(--muted)!important}html.donker #rettabel tr.act td{background:#16233d}html.donker #rettabel tr.klik:hover td{background:#1a2030}html.donker .ret-chip[aria-selected="true"]{color:#93c5fd!important}html.donker .ret-zoek svg,html.donker .ret-sort svg,html.donker .ret-pijl svg,html.donker .ret-tegel svg,html.donker .ret-knop.rand svg{stroke:var(--muted)}html.donker .ret-knop.case{background:#2e2412}html.donker .ret-notitie{background:#33270f;color:#f5c26b!important}html.donker .ret-bulk{color:#93c5fd}html.donker .ret-logo.groot.amz{background:#fff}
/* laptop/telefoon: lijst over de volle breedte, detailpaneel schuift eroverheen */
@media (max-width:1440px){
  .ret-kop,.ret-grid{grid-template-columns:minmax(0,1fr)}
  .ret-paneel{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);max-height:none;border-radius:0;z-index:30;box-shadow:-8px 0 24px rgba(0,0,0,.12);display:none}
  body.ret-open .ret-paneel{display:flex}
  .ret-sluit{display:block}
}
@media (max-width:700px){
  h1{font-size:1.6rem}
  .ret-chip{padding:8px 12px;font-size:.88rem}
  #rettabel th:nth-child(2),#rettabel td:nth-child(2),#rettabel th:nth-child(3),#rettabel td:nth-child(3),#rettabel th:nth-child(4),#rettabel td:nth-child(4),#rettabel th:nth-child(8),#rettabel td:nth-child(8),#rettabel .ret-chk{display:none}
  #rettabel td:first-child+td+td+td+td{padding-left:16px}
  #rettabel td.naam{min-width:0}
  .ret-paneel{width:100vw;padding:16px 16px 0}
  .ret-acties{position:sticky;bottom:0;background:var(--surface);margin:auto -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .ret-rij{grid-template-columns:120px minmax(0,1fr)}
  .ret-tel{display:none}
}
/* Inter: vaste cijferbreedte alleen waar cijfers onder elkaar staan, anders worden streepjes in tekst (BT-E6000) breed */
th,td{font-variant-numeric:normal}
#rr td,#rr2 td,#plat td,.kpi .n,#bal-a td,#bal-p td{font-variant-numeric:tabular-nums}
@media (max-width:640px){.side:not(.open)>.navkop{display:none}.side .brand{font-size:1.05rem;padding:0}.side .brand .logo{width:30px;height:30px}}
@media (prefers-color-scheme:dark){html:not(.licht) .ret-tegel{color:#cbd5e1;background:#1d222c}html:not(.licht) .ret-tegel b{color:#e2e8f0}html:not(.licht) .ret-logo.anwb:not(.groot){color:#93c5fd}}html.donker .ret-tegel{color:#cbd5e1;background:#1d222c}html.donker .ret-tegel b{color:#e2e8f0}html.donker .ret-logo.anwb:not(.groot){color:#93c5fd}
.ret-logo.beeld{background:none;padding:0;object-fit:contain;display:inline-block}
/* Inloggen met Microsoft (18 okt 2026) */
.msknop{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:46px;border:1px solid #8c8c8c;border-radius:8px;background:#fff;color:#2f2f2f;font:inherit;font-weight:600;cursor:pointer}
.msknop svg{width:20px;height:20px}.msknop:hover{background:#f6f6f6}
.msof{margin:0;text-align:center;color:var(--muted);font-size:.82rem}
.msterug{color:var(--accent);font-size:.9rem}
/* Retouren: Ontvangen-stap, afhandeling, historie, klanten (18 okt 2026) */
.pill.paars{background:#ede9fe;color:#6d28d9}.stip.paars{background:#7c3aed}.stip.grijs{background:#94a3b8}
.ret-knop.paars{background:#6d28d9;color:#fff}.ret-knop.paars:hover{background:#5b21b6}.ret-knop.blauw{background:var(--accent);color:#fff}
.ret-hint{margin:0;font-size:.85rem;color:#6d28d9;background:#f5f3ff;border-radius:8px;padding:8px 10px}
.ret-keuzes{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}.ret-keuzes label,.ret-vink{display:flex;align-items:center;gap:8px;color:#1e293b;cursor:pointer}
.ret-keuzes input,.ret-vink input{width:16px;height:16px;padding:0;accent-color:var(--accent)}
.ret-afh .ret-knop{margin-top:10px;width:100%}
.ret-log{list-style:none;margin:4px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:10px}
.ret-log li{position:relative}.ret-log li::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.ret-log li:not(:first-child)::before{background:#cbd5e1}
.ret-log b{display:block;font-weight:500;font-size:.88rem}.ret-log span{display:block;color:#64748b;font-size:.8rem}
.side a.ret-sub{display:flex;justify-content:space-between}.side a.ret-sub .teller{background:var(--band);color:#475569}.side a.ret-sub.act{background:none;color:var(--accent)}
.ret-aantal-tekst{color:var(--muted);padding:10px 0}
#klanttabel{width:100%}#klanttabel th,#klanttabel td{text-align:left;padding:14px 12px}#klanttabel th:first-child,#klanttabel td:first-child{padding-left:20px}
#klanttabel tr.klik{cursor:pointer}#klanttabel tr.klik:hover td{background:#fafcff}#klanttabel td.naam{width:30%}
.ret-kaart{display:flex;flex-direction:column;gap:10px}.ret-kaart h3{margin:8px 0 0;font-size:.95rem}
.ret-kaartkop{display:flex;align-items:center;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}.ret-kaartkop>div{flex:1}.ret-kaartkop p{margin:2px 0}
.ret-kaartkop .avatar{width:48px;height:48px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700}
.ret-sluit.zicht{display:block}
.ret-kaartlijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ret-kaartlijst li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ret-kaartlijst li.klik{cursor:pointer}.ret-kaartlijst li.klik:hover{border-color:var(--accent)}
.ret-kaartlijst li>div{flex:1;min-width:0}.ret-kaartlijst b{display:block;font-weight:500;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ret-kaartlijst span{color:#64748b;font-size:.82rem}
.ret-kaartlijst .ret-logo{width:32px;height:32px;font-size:.75rem}.ret-kaartlijst .ret-logo.amz svg{width:28px}.ret-kaartlijst .ret-logo.amz .a{font-size:24px}
.ret-bedrag{font-weight:600;color:#0f172a}
@media (prefers-color-scheme:dark){html:not(.licht) .pill.paars{background:#2a1f4a;color:#c4b5fd}html:not(.licht) .ret-hint{background:#2a1f4a;color:#c4b5fd}html:not(.licht) .ret-keuzes label,html:not(.licht) .ret-vink,html:not(.licht) .ret-bedrag{color:var(--fg)}html:not(.licht) .side a.ret-sub .teller{color:var(--muted)}}html.donker .pill.paars{background:#2a1f4a;color:#c4b5fd}html.donker .ret-hint{background:#2a1f4a;color:#c4b5fd}html.donker .ret-keuzes label,html.donker .ret-vink,html.donker .ret-bedrag{color:var(--fg)}html.donker .side a.ret-sub .teller{color:var(--muted)}
.ret-betaalt{border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:flex;gap:18px;flex-wrap:wrap;margin:0}
.ret-betaalt legend{font-size:.85rem;color:var(--muted);padding:0 4px}.ret-betaalt label{display:flex;align-items:center;gap:6px;cursor:pointer}
.ret-wij{color:#b45309;font-weight:600}.ret-veld select{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
/* Retourportaal voor klanten (18 okt 2026) */
.portaal{background:var(--bg)}
.rp{max-width:620px;margin:0 auto;padding:28px 16px 48px;display:flex;flex-direction:column;gap:18px}
.rp-kop{display:flex;align-items:center;gap:10px;font-size:1.1rem}
.rp-kaart{padding:26px 28px}
.rp-stappen{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;counter-reset:s}
.rp-stappen li{counter-increment:s;font-size:.8rem;color:var(--muted);border-top:3px solid var(--line);padding-top:8px}
.rp-stappen li::before{content:counter(s) ". "}.rp-stappen li.act{color:var(--accent);border-color:var(--accent);font-weight:600}.rp-stappen li.klaar{color:#15803d;border-color:#16a34a}
.rp-stap{display:flex;flex-direction:column;gap:14px}.rp-stap h1{font-size:1.5rem}
.rp-stap .ret-knop{width:100%}
.rp-fout{margin:0;color:#dc2626;font-size:.88rem;min-height:1em}
.rp-producten{display:flex;flex-direction:column;gap:8px}
.rp-product{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.rp-product:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.rp-product input{width:18px;height:18px;padding:0;accent-color:var(--accent)}
.rp-product.uit{opacity:.55;cursor:not-allowed}
.rp-fotowrap{position:relative;display:inline-block}.rp-fotowrap button{position:absolute;top:4px;right:4px;padding:2px 7px;min-height:0}
.rp-voet{text-align:center;margin-top:14px}
a.ret-knop{text-decoration:none}
.rp-product img{width:56px;height:56px;object-fit:contain;border-radius:8px;border:1px solid var(--line);background:#fff}
.rp-product span{display:flex;flex-direction:column;color:#64748b;font-size:.88rem}.rp-product b{color:var(--fg);font-weight:600;font-size:.95rem}
.rp-bedrag{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;font-size:1.05rem}
.rp-vink{width:64px;height:64px;border-radius:50%;background:#dcfce7;display:grid;place-items:center}.rp-vink svg{width:34px;height:34px;stroke:#15803d;fill:none;stroke-width:2.5}
#s4 a.ret-mini{align-self:flex-start;text-decoration:none}
.ret-rechts{margin-left:auto}.rp-stap .ret-mini{justify-content:center}
/* nieuwe melding (klant belt/appt/mailt) */
.ret-check{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.ret-check legend{font-size:.85rem;color:var(--muted);padding:0 4px}.ret-check label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.9rem}
.ret-uitkomst{flex-direction:column;gap:8px}
.ret-verschil{border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,transparent);padding:10px 12px;font-size:.9rem;line-height:1.6}
.ret-gratis{margin:0;border-radius:8px;padding:10px 12px;background:#ecfdf3;color:#067647;font-size:.9rem}
.ret-zoekres:empty{display:none}.ret-zoekres{margin-top:-6px}
.ret-ok{color:#067647;font-weight:600}
@media (max-width:640px){.ret-check{grid-template-columns:1fr}.ret-dlg .ret-twee{grid-template-columns:1fr}}
.ret-dlg .ret-veld input,.ret-dlg .ret-veld select{min-width:0;max-width:100%}
/* retourportaal: hulpstappen voordat een retour wordt aangemeld */
.rp-tipnr{font-size:.8rem;color:var(--muted);margin:0}
.rp-tip{border:1px solid var(--line);border-radius:10px;padding:14px 16px;line-height:1.55}.rp-tip ul{margin:8px 0 0;padding-left:18px}
.rp-contact{border-radius:10px;padding:14px 16px;background:#ecfdf3;color:#067647;line-height:1.55}.rp-contact b{color:#05603a}
.rp-toch{background:none;border:0;color:var(--muted);text-decoration:underline;font:inherit;font-size:.85rem;cursor:pointer;align-self:center;padding:4px}
.ret-voet.ret-echt{background:#fff7ed;color:#9a3412;border-top:1px solid #fed7aa}
.ret-bron select{font-weight:600}
/* logo E-bikeaccuspecialist.nl */
.brand.met-logo{padding:2px 10px 20px}.brand .merk{display:block;height:46px;width:auto;max-width:100%}
.logincard .brand .merk{height:56px;margin:0 auto}.logincard .brand.met-logo{justify-content:center;padding:0 0 6px}
.rp-kop .merk{height:48px;width:auto;display:block}
@media (max-width:860px){.side .brand.met-logo{padding:0}.side .brand .merk{height:34px}}
@media (max-width:640px){.side:not(.open)>a.ret-sub{display:none}}
/* zoeken boven de lijst (Gerwin 19 okt), niet boven het paneel */
.ret-kop{grid-template-columns:minmax(0,1fr)}
.ret-zoekrij{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:24px}
@media (max-width:1440px){.ret-zoekrij{grid-template-columns:minmax(0,1fr)}}
/* retourreden in de lijst + analyse (19 okt 2026) */
.ret-reden{display:grid;grid-template-columns:auto 1fr;gap:2px 6px;align-items:center;max-width:240px;font-size:.85rem}
.ret-reden span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ret-reden small{grid-column:2;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1100px){.ret-redenkol{display:none}}
.an{display:flex;flex-direction:column;gap:20px}
.an-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.an-kpi .card{display:flex;flex-direction:column;gap:4px;padding:18px 20px}.an-kpi span{color:var(--muted);font-size:.85rem}.an-kpi b{font-size:1.5rem}.an-kpi small{color:var(--muted)}
.an-twee{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px}
.an .card{padding:18px 20px}.an h3{margin:0 0 12px}
.an-tabel{width:100%;border-collapse:collapse;font-size:.9rem}.an-tabel th{text-align:left;color:var(--muted);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line)}
.an-tabel td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}.an-tabel tr.klik{cursor:pointer}.an-tabel tr.klik:hover td{background:var(--band)}
.an-tabel small{color:var(--muted)}
.an-balk{display:block;width:100%;min-width:80px;height:8px;border-radius:4px;background:var(--band)}.an-balk i{display:block;height:100%;border-radius:4px;background:#94a3b8}
.an-balk i.oranje{background:#f59e0b}.an-balk i.blauw{background:#2563eb}.an-balk i.rood{background:#ef4444}.an-balk i.paars{background:#7c3aed}
.an-kop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}.an-kop h3{margin:0 auto 0 0}
.an-red{display:inline-flex;align-items:center;gap:4px;margin:2px 10px 2px 0;font-size:.82rem;white-space:nowrap}
.an-prod td:nth-child(2),.an-prod td:nth-child(3){text-align:right}
@media (max-width:900px){.an-kpi,.an-twee{grid-template-columns:minmax(0,1fr)}}
.an .card{overflow-x:auto;min-width:0}
@media (max-width:640px){.an-balk{min-width:40px}.an-tabel td,.an-tabel th{padding:7px 5px}}
/* knoppen en filters boven de lijst (Gerwin 19 okt) */
.ret-balk{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:24px}
.ret-balklinks{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ret-balkknop{display:flex;align-items:center;gap:10px;margin-left:auto}
.ret-zoekbalk{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ret-zoekbalk .ret-zoek{flex:1 1 260px}
.ret-zoekbalk .ret-rechts{margin-left:0;display:flex;gap:10px}
@media (max-width:1440px){.ret-balk{grid-template-columns:minmax(0,1fr)}}
.ret-redenkol{min-width:150px}
.ret-zoekbalk .ret-zoek{flex:1 1 220px}
/* reden onder het product (19 okt): de lijst blijft passen naast het paneel */
.ret-prod .ret-reden{max-width:none;margin-top:2px}.ret-prod .ret-reden span{color:var(--fg);font-weight:400}
.ret-prod>div{min-width:0}
.ret-klant>div{min-width:0}.ret-klant .ret-link{overflow-wrap:anywhere}
/* kalender voor de periodekeuze (19 okt 2026) */
.kalknop{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 34px 8px 12px;cursor:pointer;text-align:left;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.kalknop:hover,.kalknop[aria-expanded=true]{border-color:var(--accent)}
.kal{position:absolute;z-index:60;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.18);padding:12px;width:300px}
.kal.kal-blad{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;border-radius:16px 16px 0 0;padding:14px 16px max(16px,env(safe-area-inset-bottom))}
.kal-boven{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--muted);font-size:.85rem}
.kal-x{background:none;border:0;color:var(--muted);font-size:1rem;cursor:pointer;padding:4px 6px}
.kal-kop{display:flex;align-items:center;gap:4px;margin-bottom:8px}.kal-kop b{flex:1;text-align:center;text-transform:capitalize}
.kal-kop button{background:none;border:1px solid var(--line);border-radius:8px;width:32px;height:30px;cursor:pointer;color:var(--fg)}
.kal-grid{width:100%;border-collapse:collapse;table-layout:fixed}.kal-grid th{font-weight:500;color:var(--muted);font-size:.75rem;padding:4px 0}
.kal-grid td{padding:1px;text-align:center}
.kal-grid button{width:100%;aspect-ratio:1;max-height:38px;border:0;border-radius:8px;background:none;color:var(--fg);cursor:pointer;font:inherit;font-size:.9rem}
.kal-grid button:hover:not([disabled]){background:var(--band)}
.kal-grid button.ander{color:var(--muted)}.kal-grid button[disabled]{color:var(--line);cursor:default}
.kal-grid button.vandaag{box-shadow:inset 0 0 0 1px var(--accent)}
.kal-grid button.sel{background:var(--accent);color:#fff}
.kal-grid.week td.wknr{color:var(--muted);font-size:.75rem;cursor:pointer}
.kal-grid.week tr.kal-wk:hover:not(.uit) button:not([disabled]){background:var(--band)}.kal-grid.week tr.sel button{background:var(--accent);color:#fff}
.kal-mnd{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kal-mnd button{border:1px solid var(--line);border-radius:8px;background:none;color:var(--fg);padding:10px 0;cursor:pointer;font:inherit;text-transform:capitalize}
.kal-mnd button.sel{background:var(--accent);border-color:var(--accent);color:#fff}.kal-mnd button[disabled]{opacity:.35;cursor:default}
.kal-snel{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.kal-snel button{border:1px solid var(--line);border-radius:999px;background:none;color:var(--fg);padding:5px 10px;font:inherit;font-size:.8rem;cursor:pointer}
.kal-snel button:hover{border-color:var(--accent)}
@media (max-width:640px){.filters .kalknop{flex:1;min-width:0}.filters>label{flex-basis:100%}}
.kal-grid th,.kal-grid td{padding:2px 0;border:0;background:none;text-align:center;white-space:normal}
.filters select{max-width:100%;min-width:0;text-overflow:ellipsis}.filters label{min-width:0}
@media (max-width:640px){.filters>label{display:flex}.filters>label select{flex:1;width:0}}
.ret-bericht{margin:4px 0 10px}.ret-bericht summary{cursor:pointer;color:var(--accent);font-size:.88rem}
.ret-bericht pre{white-space:pre-wrap;font:inherit;font-size:.86rem;background:var(--band);border-radius:8px;padding:10px 12px;margin:8px 0}
.ret-knoppen.links{justify-content:flex-start;flex-wrap:wrap;gap:6px}
/* filterpaneel Management (19 okt 2026) */
.filters{position:relative}
.filterknop{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:500;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 14px;cursor:pointer}
.filterknop svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.filterknop[aria-expanded=true]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.filterknop[aria-expanded=true] .pijl{transform:rotate(180deg)}
.filterknop.rond{padding:8px 10px}.filterknop.draait svg{animation:draai .8s linear infinite}@keyframes draai{to{transform:rotate(360deg)}}
.filterknop .teller{background:var(--accent);color:#fff;border-radius:999px;font-size:.72rem;padding:1px 7px}
.filterpaneel{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:340px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:0 12px 32px rgba(15,23,42,.16)}
.filterpaneel .fp-kop{margin:8px 0 0;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.filterpaneel .fp-kop:first-child{margin-top:0}
.filterpaneel .kalknop,.filterpaneel select{width:100%;font:inherit;padding:9px 34px 9px 12px;border:1px solid var(--line);border-radius:10px;background-color:var(--band);color:var(--fg)}
.filterpaneel select{padding-right:12px}
#filtersamenvatting{color:var(--fg)}
.kal-hint{margin:6px 0 0;color:var(--muted);font-size:.82rem}
@media (max-width:640px){.filterpaneel{position:fixed;left:12px;right:12px;top:72px;width:auto;max-height:calc(100vh - 90px);overflow:auto}}
/* brede schermen (Gerwin 19 okt): paneel groeit mee, lijst niet eindeloos breed */
@media (min-width:1441px){
  .ret-main{max-width:1760px}
  .ret-grid,.ret-zoekrij,.ret-balk{grid-template-columns:minmax(0,1fr) clamp(420px,30%,560px)}
}
/* brede schermen v2 (19 okt): volle breedte; paneel breder met de inhoud in twee kolommen */
@media (min-width:1441px){.ret-main{max-width:none}}
@media (min-width:1900px){.ret-grid,.ret-zoekrij,.ret-balk{grid-template-columns:minmax(0,1fr) clamp(620px,44%,1040px)}}
#paneel{container-type:inline-size}
@container (min-width:760px){
  .ret-pinhoud{columns:2;column-gap:32px}
  .ret-pinhoud>.ret-blok{break-inside:avoid;display:block;width:100%}
  .ret-pinhoud>.ret-blok:first-child{margin-top:0}
}
@media (max-width:640px){.ret-balkknop{flex-wrap:wrap;margin-left:0;width:100%}.ret-balkknop .ret-sort{flex:1 1 140px;min-width:0}.ret-balkknop select{min-width:0;width:100%}}
/* licht/donker-knop en logo per thema (19 okt 2026) */
:root.donker{color-scheme:dark}:root.licht{color-scheme:light}
.merk-donker{display:none!important}
@media (prefers-color-scheme:dark){html:not(.licht) .merk-licht{display:none!important}html:not(.licht) .merk-donker{display:block!important}}
html.donker .merk-licht{display:none!important}html.donker .merk-donker{display:block!important}
.side{position:relative}
.themaknop{position:absolute;top:14px;right:12px;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);cursor:pointer}
.themaknop svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.themaknop:hover{border-color:var(--accent)}
.side .brand.met-logo{padding-right:52px}
@media (max-width:640px){.themaknop{position:static;margin-right:8px;order:0}.side .brand.met-logo{padding-right:0}}
/* balk rechtsboven (19 okt 2026) */
.topbalk{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:-8px 0 4px}
.tb-houder{position:relative}
.tb-knop{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);cursor:pointer}
.tb-knop svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tb-knop:hover,.tb-vlag:hover,.tb-gebruiker:hover{border-color:var(--accent)}
.tb-badge{position:absolute;top:-7px;right:-9px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#dc2626;color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.tb-vlag{width:36px;height:36px;border:0;background:none;padding:4px;cursor:pointer;border-radius:50%}.tb-vlag svg{width:26px;height:26px}
.tb-gebruiker{display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--fg);font:inherit;font-weight:500;cursor:pointer;padding:2px 6px 2px 2px;border-radius:999px}
.tb-gebruiker .avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.85rem;border:1px solid var(--line)}
.tb-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.16);padding:6px;display:flex;flex-direction:column}
.tb-menu[hidden]{display:none}
.tb-kop{margin:6px 10px 4px;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tb-item{display:block;text-align:left;font:inherit;font-size:.9rem;color:var(--fg);background:none;border:0;border-radius:8px;padding:9px 10px;margin:0;text-decoration:none;cursor:pointer}
a.tb-item:hover,button.tb-item:hover{background:var(--band)}.tb-item.act{font-weight:600}.tb-item.uit{color:var(--muted);cursor:default}
.tb-item b{color:#dc2626;margin-right:4px}
@media (min-width:641px){nav.side .themaknop{display:none}.side .brand.met-logo{padding-right:10px}.side .gebruiker{display:none}}
@media (max-width:640px){.topbalk{display:none}}
.ret-hint.ret-waarsch{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
html.donker .ret-hint.ret-waarsch{background:#33270f;color:#f5c26b;border-color:#4a3a1c}
@media (prefers-color-scheme:dark){html:not(.licht) .ret-hint.ret-waarsch{background:#33270f;color:#f5c26b;border-color:#4a3a1c}}
.ret-chiplink{text-decoration:none;color:var(--fg);display:inline-flex;align-items:center;gap:8px}

/* ---- uitklapbaar menu (19 okt 2026) ---- */
.side button.navkop{background:none;border:0;text-align:left;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;font:inherit;color:var(--fg);padding:9px 12px;border-radius:10px;font-size:.92rem}
.side button.navkop:hover{background:var(--band)}
.side button.navkop.sub{padding-left:26px;font-size:.88rem;color:var(--muted)}
.side .caret{margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.side button[aria-expanded="true"] .caret{transform:rotate(45deg)}
.side .grpbody{display:flex;flex-direction:column;gap:2px}
.side .grpbody[hidden]{display:none}
.side a.sub2{padding-left:40px;font-size:.88rem}
@media (max-width:640px){
  .side>.grpbody,.side>button.navkop{display:none}
  .side.open>button.navkop{display:flex;flex-basis:100%;padding:11px 12px;font-size:1rem}
  .side.open>.grpbody:not([hidden]){display:flex;flex-basis:100%}
  .side.open .grpbody a,.side.open .grpbody button.navkop{display:flex;padding:10px 12px 10px 24px;font-size:.95rem}
  .side.open .grpbody .grpbody a{padding-left:40px}
}
/* ---- plattegrond Osloweg (aanvuladvies): vijf staande stellingen van boven gezien ---- */
.aanvul-kop{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;align-items:center}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.dot.groen{background:#1f9d55}.dot.oranje{background:#e07b00}.dot.rood{background:#d92d20}.dot.grijs{background:#9aa3ad}.dot.leeg{background:transparent;border:1px solid var(--line)}
.plattegrond{display:flex;gap:28px;align-items:flex-end;overflow-x:auto;padding:4px 2px 10px}
.paar{align-items:flex-end}
.paar{display:flex;gap:3px;flex:none}
.kolom{width:230px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px}
.paar .kolom:first-child:not(:last-child){border-radius:12px 0 0 12px;border-right:2px solid var(--line)}
.paar .kolom:last-child:not(:first-child){border-radius:0 12px 12px 0;border-left:0}
.kolom-kop{font-weight:700;text-align:center;padding:2px 0 4px;font-size:1rem}
.sectie{border:1px dashed var(--line);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:4px;background:var(--band)}
.sectie.leeg{min-height:160px;align-items:center;justify-content:center}
.sectie-kop{font-size:.72rem;color:var(--muted)}
.vak{border-radius:8px;padding:5px 7px;font-size:.74rem;display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);background:var(--surface);min-width:0}
.vak>b{font-size:.72rem;color:var(--muted)}
.vak.groen{background:#e7f6ec;border-color:#bfe6cc}.vak.oranje{background:#fff1e0;border-color:#f5cf9a}.vak.rood{background:#fde8e8;border-color:#f3b4b4}.vak.grijs{background:#eceff2}.vak.leeg{border-style:dashed}
.vakitem{display:flex;align-items:center;gap:4px;min-width:0}.vakitem .vnaam{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vakitem .vst{white-space:nowrap;color:var(--muted)}.vakitem .plus{color:#a14a00}
.afvink{font-size:.8rem;color:var(--muted)}
@media (prefers-color-scheme:dark){html:not(.licht) .vak.groen{background:#12301f;border-color:#1f4a30}html:not(.licht) .vak.oranje{background:#3a2610;border-color:#5a3a16}html:not(.licht) .vak.rood{background:#3b1717;border-color:#5a2323}html:not(.licht) .vak.grijs{background:#2a2e33}}
html.donker .vak.groen{background:#12301f;border-color:#1f4a30}html.donker .vak.oranje{background:#3a2610;border-color:#5a3a16}html.donker .vak.rood{background:#3b1717;border-color:#5a2323}html.donker .vak.grijs{background:#2a2e33}

/* ---- haallijst (vrijdag) en inklapbare plattegrond ---- */
.haallijst{padding-bottom:8px}
.haal{display:flex;gap:12px;align-items:flex-start;margin:0 16px 8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-size:.95rem}
.haal.oranje{background:#fff1e0;border-color:#f5cf9a}.haal.rood{background:#fde8e8;border-color:#f3b4b4}
.haal input{width:22px;height:22px;margin-top:2px;flex:none}
.haal:has(input:checked){opacity:.45;text-decoration:line-through}
.haal-naam{font-weight:600}.haal-regel{margin:3px 0}.haal-n{font-size:1.1rem}.haal-n.rood{color:#b42318}
details.plattegrond-card>summary{list-style:none;cursor:pointer;padding:16px 16px 10px;display:flex;align-items:center;justify-content:space-between}
details.plattegrond-card>summary::-webkit-details-marker{display:none}
details.plattegrond-card>summary::after{content:'';width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin-right:6px}
details.plattegrond-card[open]>summary::after{transform:rotate(45deg)}
@media (max-width:640px){.haal{margin:0 10px 8px;font-size:1rem}.haal-n{font-size:1.2rem}.kolom{width:200px;padding:6px}}
@media (prefers-color-scheme:dark){html:not(.licht) .haal.oranje{background:#3a2610;border-color:#5a3a16}html:not(.licht) .haal.rood{background:#3b1717;border-color:#5a2323}}
html.donker .haal.oranje{background:#3a2610;border-color:#5a3a16}html.donker .haal.rood{background:#3b1717;border-color:#5a2323}
.ret-indeling{margin:8px 0 0;font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.ret-foto{position:relative;display:inline-block}
.ret-fotoweg{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(15,23,42,.75);color:#fff;font-size:.75rem;cursor:pointer;display:grid;place-items:center;line-height:1}
.ret-fotoweg:hover{background:#dc2626}

/* ---- WMS orders: filters links, tabel rechts (19 okt 2026) ---- */
.wlayout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:start}
.filterkaart{padding:14px;display:flex;flex-direction:column;gap:12px;position:sticky;top:12px}
.filterkaart .fl{display:flex;flex-direction:column;gap:5px;font-size:.85rem}.filterkaart .fl>span{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.filterkaart .fl2{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--muted)}
.filterkaart input,.filterkaart select{width:100%;font-size:.9rem}
.snel{display:flex;flex-wrap:wrap;gap:5px}.snelk{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 9px;font-size:.78rem;cursor:pointer;color:var(--fg)}.snelk.act{background:var(--accent);color:#fff;border-color:var(--accent)}
.wbalk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px;font-size:.88rem;color:var(--muted)}.wbalk .spacer{flex:1}
.chip{display:inline-block;background:#e0ecff;color:#1d4ed8;border-radius:6px;padding:1px 6px;font-size:.75rem;margin:1px 2px 1px 0;white-space:nowrap}
.vlag-svg{width:24px;height:16px;border-radius:3px;box-shadow:0 0 0 1px var(--line);vertical-align:middle}
.pill.geel{background:#fdf7d8;color:#7a5d00}
@media (max-width:860px){.wlayout{grid-template-columns:1fr}.filterkaart{position:static}}
@media (prefers-color-scheme:dark){html:not(.licht) .chip{background:#1e2a44;color:#9ec1ff}}html.donker .chip{background:#1e2a44;color:#9ec1ff}

/* ---- Pick & Pack zoals Channeldock (19 okt 2026) ---- */
.wknoppen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px}
.wknoppen button{width:100%;padding:12px;font-size:.95rem}
.worder{padding:12px 14px;margin-bottom:10px}
.wprods{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.wprod{display:flex;gap:8px;align-items:flex-start;font-size:.8rem}
.wprod .wbeeld{width:34px;height:34px;border-radius:8px;background:var(--band);display:grid;place-items:center;font-weight:700;color:var(--muted);flex:none}
.wprod .waantalrond{width:18px;height:18px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.7rem;flex:none;margin-top:8px}
.wprod .wloc{color:#1f9d55;font-weight:600}.wprod .wsku{color:#1f9d55;font-size:.75rem}
.wrijo{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.88rem}.wrijo .spacer{flex:1}
.wtop{display:flex;justify-content:center;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px}
.wturbo{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600}.wturbo input{position:absolute;opacity:0}.wturbo .schuif{width:40px;height:22px;border-radius:999px;background:#cbd5e1;position:relative;transition:.15s}.wturbo .schuif::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}.wturbo input:checked+.schuif{background:var(--accent)}.wturbo input:checked+.schuif::after{left:21px}
.wprinter{font-size:.8rem}
.wnav{display:grid;grid-template-columns:1fr 2fr 1fr;gap:10px;align-items:center;margin-bottom:10px}.wnav .wzoek{display:flex;gap:6px}.wzoek-groot{width:min(900px,100%);display:flex;gap:6px}.wnav .scanveld{flex:1}
.wteller{display:inline-flex;align-items:center;gap:6px}.wteller .link{border:1px solid var(--line);border-radius:6px;padding:0 8px;background:#fde8e8;color:#b42318;font-weight:700}
.wordinfo .wgegevens{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.wscan{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px;text-align:center}
.wteller-groot{font-size:1.3rem;font-weight:700;padding:4px 14px;border-radius:999px;color:#fff;background:#d92d20}.wteller-groot.ok{background:#1f9d55}
@media (max-width:860px){.wknoppen{grid-template-columns:1fr}.wnav{grid-template-columns:1fr}.wordinfo .wgegevens{grid-template-columns:1fr 1fr}}

/* afspraak met de klant in de retourlijst (20 okt 2026) */
.ret-afspraak{display:block;font-size:12px;font-weight:600;color:#1d4ed8;background:#eff6ff;border-radius:6px;padding:2px 6px;margin-bottom:3px;width:max-content;max-width:100%;white-space:normal}
.ret-afspraak.ruil{color:#7c2d12;background:#fff7ed}
.ret-afspraak.kantoor{color:#b91c1c;background:#fef2f2}
.ret-tt{display:block;color:#64748b;font-size:12px;margin-top:2px}

/* Reparatie / retour op onze kosten aanmelden (22 okt 2026) */
.ret-kopknoppen{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;padding-top:10px}
.ret-kopknoppen[hidden]{display:none}
.ret-amregels{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:6px}
.ret-amregels label{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer}
.ret-amregels label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ret-amregels small{margin-left:auto;white-space:nowrap}
.ret-garantie{font-weight:600}.ret-garantie.ok{color:#15803d}.ret-garantie.nee{color:#dc2626}
.ret-soortlabel{display:inline-block;font-size:.78rem;font-weight:600;border-radius:999px;padding:2px 9px;margin-left:6px;background:#eef2ff;color:#3730a3;vertical-align:middle}
.ret-soortlabel.proef{background:#fff7ed;color:#c2410c}

/* 22 okt 2026 (Gerwin: "staat niet lekker"): titel en knoppen op één regel; zoeken + alle filters in één balk; statuschips eronder */
.ret-kop{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ret-kopknoppen{padding-top:0}
.ret-zoekbalk{flex-wrap:wrap}.ret-zoekbalk .ret-zoek{flex:1 1 240px}
.ret-zoekbalk .ret-rechts{flex-wrap:wrap;gap:8px}
.ret-zoekbalk .ret-sort{height:44px;padding:0 10px}
.ret-zoekbalk .ret-sort select{max-width:150px}
.ret-chips{gap:8px}.ret-chip{padding:8px 14px}
.ret-zoekbalk .ret-sort select{width:auto;min-width:0}
.ret-zoekbalk .ret-rechts{flex:0 1 auto}
.ret-zoekbalk .ret-scan{padding:4px 8px;font-size:.75rem}
.ret-zoekbalk .ret-scan{order:9}

/* soort in de lijst: retour of reparatie (22 okt 2026) */
.ret-type{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;border-radius:999px;padding:4px 10px;background:#f1f5f9;color:#334155;white-space:nowrap}
.ret-type svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ret-type.rep{background:#fff7ed;color:#c2410c;border:1px solid #fdba74}
@media (prefers-color-scheme:dark){html:not(.licht) .ret-type{background:#1e293b;color:#cbd5e1}html:not(.licht) .ret-type.rep{background:#431407;color:#fdba74}}
.ret-amklant{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:8px 0;background:var(--bg,#f8fafc)}
.ret-amklant b{font-size:1rem}
.ret-zoek .ret-scan{margin-left:auto;flex:0 0 auto;white-space:nowrap}
/* 22 okt 2026 (klein scherm Gerwin): soort onder de status in plaats van een eigen kolom; lijst krijgt meer ruimte */
.ret-stcel{white-space:nowrap}.ret-stcel .ret-type{display:flex;width:max-content;margin-top:6px;font-size:.74rem;padding:2px 8px}
.ret-stcel .ret-type svg{width:12px;height:12px}
/* aanmeldvenster groter (Gerwin 22 okt 2026) */
#aanmelddlg{width:min(820px,calc(100vw - 32px));padding:28px 32px;font-size:1.05rem}
#aanmelddlg .kop3{font-size:1.4rem}
#aanmelddlg .ret-veld{font-size:.95rem}
#aanmelddlg .ret-veld input,#aanmelddlg .ret-veld textarea,#aanmelddlg .ret-veld select{font-size:1.05rem;padding:12px 14px}
#aanmelddlg .ret-amklant{padding:14px 16px;font-size:1.05rem}#aanmelddlg .ret-amklant b{font-size:1.15rem}
#aanmelddlg .ret-amregels label{padding:12px 14px}
#aanmelddlg .ret-knoppen .ret-mini{padding:12px 20px;font-size:1rem}
/* 22 okt 2026 (Gerwin, groot scherm: 'staat nog steeds niet lekker'): lijst krijgt de ruimte, paneel max. 640px; reden netjes onder elkaar */
@media (min-width:1900px){.ret-grid,.ret-zoekrij,.ret-balk{grid-template-columns:minmax(0,1fr) clamp(480px,32%,640px)}}
.ret-reden .ret-afspraak{grid-column:1/-1}
.ret-reden .ret-tt{grid-column:2}
.ret-zoekbalk .ret-zoek{flex:1 1 380px}
.ret-amregels small{font-size:inherit;color:var(--fg)}
/* knoppen naast de statusfilters, boven de lijst (Gerwin 22 okt 2026) */
.ret-balklinks{justify-content:space-between}.ret-balklinks .ret-kopknoppen{margin-left:auto}
.ret-balk .ret-chip{padding:7px 12px;font-size:.92rem;gap:8px}
.ret-balk .ret-kopknoppen .ret-mini{padding:8px 12px;font-size:.92rem}
.ret-balklinks{flex-wrap:wrap;row-gap:10px}
/* knoppen rechts in de filterregel, boven de lijst (22 okt 2026) */
.ret-zoekbalk .ret-rechts{flex:1 1 auto}.ret-rechts .ret-kopknoppen{margin-left:auto}
/* knoppen direct achter de statusfilters (Gerwin 22 okt 2026) */
.ret-balklinks{justify-content:flex-start}.ret-balklinks .ret-kopknoppen{margin-left:12px}
.ret-mini.rood svg{stroke:#fff}
/* 23 okt 2026 (Gerwin: knoppen ook op kleine schermen naast 'Afgehandeld'): alles op één regel, filters schuiven zo nodig opzij */
.ret-balklinks{flex-wrap:nowrap;min-width:0}
.ret-balklinks .ret-chips{flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:none}
.ret-balklinks .ret-chips::-webkit-scrollbar{display:none}
.ret-balk .ret-chip{white-space:nowrap;flex:0 0 auto}
.ret-balklinks .ret-kopknoppen{flex:0 0 auto;flex-wrap:nowrap}
@media (max-width:1700px){.ret-balk .ret-chip{padding:6px 10px;font-size:.86rem;gap:6px}.ret-balk .ret-kopknoppen .ret-mini{padding:7px 10px;font-size:.86rem}}
@media (max-width:640px){.ret-balklinks{flex-wrap:wrap}.ret-balklinks .ret-kopknoppen{margin-left:0}}
@media (max-width:1700px){.ret-balk .ret-lang{display:none}}
/* niets geopend: lijst over de volle breedte, geen leeg paneel (23 okt 2026) */
.ret-grid.zonder-paneel{grid-template-columns:minmax(0,1fr)!important}.ret-grid.zonder-paneel .ret-paneel{display:none}
.ret-pkop .ret-sluit{display:block}
body.ret-geenpaneel .ret-zoekrij,body.ret-geenpaneel .ret-balk{grid-template-columns:minmax(0,1fr)!important}
/* klantenservice: alleen retouren/reparaties in het menu (23 okt 2026) */
body.rol-ks nav.side a:not(.brand):not([href^="retouren"]):not([href^="#"]),body.rol-ks #tbmeld,body.rol-ks nav.side .navkop,body.rol-ks nav.side .grp-knop:not(.ret-grp){display:none!important}
#codedeel input{width:100%;margin-bottom:8px}
.ret-locatie{margin-top:6px;color:var(--fg)}.ret-locatie b{font-size:1.05rem}
.ret-locatie .ret-vak{font-weight:700;font-size:1.05rem}
/* locatie in dezelfde maat als artikelnummer/EAN (Gerwin 23 okt 2026) */
.ret-pprod p.ret-locatie{margin-top:0;color:#475569;font-size:inherit}.ret-pprod .ret-locatie .ret-vak{font-size:inherit;font-weight:600}
/* fotoscherm telefoon via QR (23 okt 2026) */
body.ret-fotomodus #app,body.ret-fotomodus #login{display:none!important}
#fotomodus{display:none}body.ret-fotomodus #fotomodus{display:flex;flex-direction:column;gap:16px;padding:24px 18px;min-height:100vh;background:var(--bg,#f6f8fb)}
.fm-kop{display:flex;flex-direction:column;gap:4px}.fm-kop b{font-size:1.4rem}.fm-kop span{color:#475569}
.fm-knop{display:flex;align-items:center;justify-content:center;height:120px;border-radius:16px;background:var(--accent,#2563eb);color:#fff;font-size:1.5rem;font-weight:700;cursor:pointer}
.fm-info{color:#475569;text-align:center}.fm-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.fm-fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}