/* Layout: lichte zijbalk + glazen topbar met ⌘K-zoek, ruime kaarten. Merk: navy (inkt) + oranje (accent) uit het logo. */
:root{
  --bg:#f5f6f8; --surface:#ffffff; --raised:#fbfbfc; --line:#e7e9ee; --line-2:#d9dde5;
  --fg:#0e1726; --muted:#5f6b7d; --chip:#f0f2f5;
  --ink:#0b1f33; --ink-fg:#ffffff;               /* primaire knoppen */
  --accent:#c4570b; --accent-soft:#fff2e8; --brand:#E08B0B;
  --sea:#1f4f86; --air:#f08a24; --road:#3f8f6b;
  --ok:#23824a; --ok-soft:#e8f6ee; --warn:#a96410; --warn-soft:#fdf3e2; --bad:#c9353d; --bad-soft:#fdeced; --idle:#6b7587;
  --nav-bg:#fbfbfc; --nav-fg:#004653; --nav-on:#00333d; --nav-sel:#ebeded;   /* menu in petrol zoals E-freight Flow */
  --shadow:0 1px 2px rgb(16 24 40 / .04),0 1px 3px rgb(16 24 40 / .06);
  --shadow-lg:0 12px 32px -8px rgb(16 24 40 / .18);
  --radius:14px; --r-sm:9px;
  --font:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;   /* zelfde als E-freight Flow (systeemletter) */
  --mono:ui-monospace,"Cascadia Mono",Consolas,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0f18; --surface:#111827; --raised:#151d2c; --line:#212b3b; --line-2:#2c384b; --fg:#e8edf4; --muted:#93a0b4; --chip:#1a2333;
  --ink:#f08a24; --ink-fg:#1a0d00; --accent:#ff9d45; --accent-soft:#2a1a0c; --sea:#6aa3e8; --air:#f5a04d; --road:#5cbf8f;
  --ok:#57c27e; --ok-soft:#13291c; --warn:#f0b54a; --warn-soft:#2e2412; --bad:#f2737a; --bad-soft:#341a1d; --idle:#8994a7;
  --nav-bg:#0d1420; --nav-fg:#a9b4c6; --nav-on:#ffffff; --nav-sel:#1c2635; --shadow:0 1px 2px rgb(0 0 0 / .3); --shadow-lg:0 16px 40px -8px rgb(0 0 0 / .6); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0a0f18; --surface:#111827; --raised:#151d2c; --line:#212b3b; --line-2:#2c384b; --fg:#e8edf4; --muted:#93a0b4; --chip:#1a2333;
  --ink:#f08a24; --ink-fg:#1a0d00; --accent:#ff9d45; --accent-soft:#2a1a0c; --sea:#6aa3e8; --air:#f5a04d; --road:#5cbf8f;
  --ok:#57c27e; --ok-soft:#13291c; --warn:#f0b54a; --warn-soft:#2e2412; --bad:#f2737a; --bad-soft:#341a1d; --idle:#8994a7;
  --nav-bg:#0d1420; --nav-fg:#a9b4c6; --nav-on:#ffffff; --nav-sel:#1c2635; --shadow:0 1px 2px rgb(0 0 0 / .3); --shadow-lg:0 16px 40px -8px rgb(0 0 0 / .6); color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{font-size:32px;margin:0;letter-spacing:-.3px;font-weight:700;text-wrap:balance}
h2{font-size:16px;margin:0;display:flex;align-items:center;gap:8px;font-weight:600;letter-spacing:-.1px}
h3{font-size:11.5px;margin:20px 0 8px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:600}
.muted{color:var(--muted)} .small{font-size:12.5px}
.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
.c-acc{color:var(--fg)} .c-bad{color:var(--bad)} .c-idle{color:var(--idle)} .c-ok{color:var(--ok)} .c-warn{color:var(--warn)}
svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
code{font:12px var(--mono);background:var(--chip);padding:1px 6px;border-radius:5px}
/* shell */
.app{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100%}
.scrim{display:none}
.side{background:var(--nav-bg);border-right:1px solid var(--line);color:var(--nav-fg);display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;padding:2px 8px 18px;font-weight:700;font-size:17px;color:var(--fg);letter-spacing:-.3px;line-height:1.1}
.logo .mark{width:30px;height:30px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;flex:none}
.logo small{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.2px}
.role{display:grid;grid-template-columns:1fr 1fr;background:var(--chip);border-radius:10px;padding:3px;margin:0 2px 18px}
.role button{border:0;background:none;color:var(--muted);padding:6px;border-radius:8px;cursor:pointer;font-weight:600;font-size:12.5px}
.role button.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
.nav{display:flex;flex-direction:column;gap:1px}
.nav a{display:flex;align-items:center;gap:12px;padding:3px 10px;line-height:1.4;border-radius:7px;color:var(--nav-fg);text-decoration:none;cursor:pointer;font-size:12px;font-weight:400;position:relative}
.nav a svg{color:var(--nav-fg);opacity:.85}
.nav a:hover{background:var(--nav-sel);color:var(--nav-on)}
.nav a.on{background:var(--nav-sel);color:var(--nav-on);font-weight:500}
.nav a.on svg{color:var(--nav-on);opacity:1}
.nav-h{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--nav-fg);opacity:.7;padding:12px 12px 4px}
.side-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:1px}
.side-foot a.out{color:var(--bad)} .side-foot a.out svg{color:var(--bad)}
body[data-area="admin"] .nav.portal, body[data-area="portal"] .nav.adm{display:none}
.top{display:flex;align-items:center;gap:12px;padding:12px 32px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.menu-btn{display:none;background:none;border:0;padding:6px;cursor:pointer}
.top .sp,.toolbar .sp{flex:1}
.cmdk{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 380px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 10px;color:var(--muted);cursor:pointer;text-align:left;box-shadow:var(--shadow)}
.cmdk span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
kbd{font:11px var(--mono);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--muted);background:var(--raised)}
.demo{font-size:11.5px;color:var(--warn);background:var(--warn-soft);padding:3px 10px;border-radius:999px;font-weight:600;white-space:nowrap}
.bell,.top-btn{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:10px;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;box-shadow:var(--shadow)}
.bell::after{content:"";position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--surface)}
.top select.inp{width:auto}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--ink-fg);display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:none}
.banner{display:flex;gap:12px;align-items:center;margin:16px 32px 0;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.banner .dot{width:28px;height:28px;border-radius:9px;color:#fff;display:grid;place-items:center;flex:none;font-size:13px;font-weight:700}
.banner.ok .dot{background:var(--ok)} .banner.acc .dot{background:var(--sea)} .banner.bad .dot{background:var(--bad)}
.banner strong{margin-right:6px}
.adminbar{display:flex;gap:6px;padding:14px 32px 0;overflow-x:auto;scrollbar-width:none}
.adminbar a{font-size:12.5px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--muted);cursor:pointer;white-space:nowrap;font-weight:500}
.adminbar a:hover{color:var(--fg);border-color:var(--line-2)}
.adminbar a.on{background:var(--ink);border-color:var(--ink);color:var(--ink-fg)}
.adminwarn{position:sticky;bottom:0;background:var(--warn-soft);color:var(--warn);padding:8px 32px;font-size:12.5px;border-top:1px solid var(--line);padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));font-weight:500}
body[data-area="portal"] .adminwarn{display:none}
main{padding-block:28px 56px;padding-inline:32px;max-width:1440px;width:100%;margin:0 auto;outline:none}
footer{text-align:center;color:var(--muted);font-size:12px;padding:20px}
/* building blocks */
.head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:24px}
.head p{margin:4px 0 0}
.eyebrow{font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:2px}
.head .acts,.acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:10px;padding:8px 14px;background:var(--ink);color:var(--ink-fg);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;box-shadow:var(--shadow);transition:transform .08s,filter .12s}
.btn:hover:not(:disabled){filter:brightness(1.12)} .btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.sec{background:var(--surface);border-color:var(--line);color:var(--fg)}
.btn.sec:hover:not(:disabled){filter:none;border-color:var(--line-2);background:var(--raised)}
.btn.ghost{background:transparent;color:var(--accent);padding:5px 8px;box-shadow:none}
.btn.ghost:hover:not(:disabled){filter:none;background:var(--accent-soft)}
.btn.line{background:var(--surface);border-color:var(--line);color:var(--fg);width:100%;justify-content:center;margin-top:4px}
.btn.danger{background:var(--bad);color:#fff} .btn.ghost.danger{background:transparent;color:var(--bad)} .btn.ghost.danger:hover{background:var(--bad-soft)}
.btn.ok{background:var(--ok);color:#fff}
.btn.sm{padding:3px 10px;font-size:12.5px;border-radius:8px}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;box-shadow:var(--shadow)}
.icon-btn:hover{border-color:var(--line-2);background:var(--raised)}
.grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:24px;align-items:start;margin-bottom:24px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.col{display:flex;flex-direction:column;gap:24px;min-width:0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-width:0;margin-bottom:24px;box-shadow:var(--shadow);overflow:hidden}
.col>.card,.grid>.card{margin-bottom:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px 12px;flex-wrap:wrap}
.card-h h2 svg{color:var(--muted)}
.card-b{padding:6px 20px 20px}
.card-h+.card-b{padding-top:4px}
.card>.card-b:first-child{padding-top:20px}
.card>.tbl-wrap{border-top:1px solid var(--line)}
.card.narrow{max-width:680px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}
.kpis.five{grid-template-columns:repeat(5,minmax(0,1fr))} .kpis.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.col>.kpis{margin-bottom:0}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;min-width:0;box-shadow:var(--shadow)}
.kpi span{color:var(--muted);font-size:12.5px;display:block;font-weight:500} .kpi small{color:var(--muted);font-size:11.5px;display:block;margin-top:2px}
.kpi b{font:600 28px/1.1 var(--font);letter-spacing:-.4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.card-b.kpis{margin:0} .card-b.kpis .kpi{box-shadow:none;background:var(--raised)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:22px}
.mini{--sc:var(--ink);--p:0;position:relative;display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 14px 14px 14px;cursor:pointer;text-align:left;overflow:hidden;font:inherit;color:var(--fg);
  background-image:linear-gradient(135deg,color-mix(in srgb,var(--sc) 6%,transparent),transparent 60%);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.mini-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--sc);background:color-mix(in srgb,var(--sc) 13%,transparent)}
.mini-ic svg{color:var(--sc)}
.mini-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.mini-l{font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini b{font-size:24px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg);letter-spacing:-.02em}
.mini-ring{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--sc) calc(var(--p) * 1%),color-mix(in srgb,var(--sc) 14%,transparent) 0)}
.mini-ring em{width:30px;height:30px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.mini:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.08);border-color:color-mix(in srgb,var(--sc) 40%,var(--line))}
.mini.on{border-color:var(--sc);box-shadow:0 0 0 1px var(--sc),0 8px 20px rgba(15,23,42,.07);background-color:color-mix(in srgb,var(--sc) 6%,var(--surface))}
.mini.on .mini-l{color:var(--fg)}
.mini:focus-visible{outline:2px solid var(--sc);outline-offset:2px}
.statuses{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.st{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--raised);cursor:pointer;text-align:left}
.st:hover{border-color:var(--line-2);background:var(--surface)} .st.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:var(--surface)}
.st .lbl{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500} .sw{width:8px;height:8px;border-radius:50%;flex:none}
.st b{font-variant-numeric:tabular-nums;font-weight:600}
.toggle{margin-top:10px;width:100%;border:0;background:transparent;border-radius:8px;padding:8px;font-weight:600;cursor:pointer;color:var(--muted)}
.toggle:hover{background:var(--chip);color:var(--fg)}
.tabs{display:inline-flex;gap:2px;overflow-x:auto;background:var(--chip);border-radius:11px;padding:3px;margin-bottom:18px;max-width:100%;scrollbar-width:none}
.tabs button{flex:none;border:0;background:none;padding:6px 12px;cursor:pointer;color:var(--muted);border-radius:8px;white-space:nowrap;font-weight:500;font-size:13px}
.tabs button.on{color:var(--fg);background:var(--surface);box-shadow:var(--shadow);font-weight:600}
.tabs button:hover:not(.on){color:var(--fg)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.inp{border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:var(--surface);min-width:0;max-width:100%;transition:border-color .12s,box-shadow .12s}
.inp:hover{border-color:var(--line-2)}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.inp{width:100%;resize:vertical}
.search{flex:1;min-width:220px;padding-left:34px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238390a3' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3 3'/%3E%3C/svg%3E") 11px 50%/15px no-repeat}
.toolbar select.inp{max-width:210px}
.inp:disabled{background:var(--chip);color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.field>label{font-size:12.5px;font-weight:600;color:var(--fg)}
.field .inp{width:100%}
.field small{font-size:12px}
.req{color:var(--bad)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.form-grid .span2{grid-column:1/-1}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.check{display:flex;align-items:center;gap:9px;margin:5px 0;cursor:pointer}
.check input,.colrow input[type=checkbox],td input[type=checkbox],th input[type=checkbox]{accent-color:var(--ink);width:16px;height:16px}
.inline{display:inline-flex;align-items:center;gap:6px}
.switch{display:flex;align-items:center;gap:10px;margin:7px 0;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch span{width:36px;height:21px;border-radius:999px;background:var(--line-2);position:relative;flex:none;transition:background .15s}
.switch span::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgb(0 0 0 / .25)}
.switch input:checked+span{background:var(--ok)} .switch input:checked+span::after{left:17.5px}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.switch input:disabled+span{opacity:.45}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--chip);border-radius:10px;padding:3px;gap:2px}
.field .seg{display:grid}
.seg button{border:0;background:transparent;padding:6px 12px;cursor:pointer;font-weight:600;color:var(--muted);white-space:nowrap;border-radius:8px}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
.alert{border-radius:12px;padding:11px 14px;margin-bottom:16px;border:1px solid var(--line);background:var(--raised)}
.alert.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 22%,transparent)}
.alert.info{background:var(--raised)}
.alert strong{margin-right:4px}
.err{color:var(--bad);font-size:13px;margin:6px 0}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.mode{display:inline-flex;align-items:center;gap:7px;color:var(--muted);white-space:nowrap}
.ref{font:600 13px var(--font);color:var(--fg);letter-spacing:0;font-variant-numeric:tabular-nums}
.period{display:inline-block;font-size:12px;font-weight:600;color:var(--ok);background:var(--ok-soft);padding:2px 9px;border-radius:999px;white-space:nowrap}
/* tables */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font-size:11.5px;color:var(--muted);font-weight:600;text-align:left;padding:10px 16px;background:var(--raised);white-space:nowrap;border-bottom:1px solid var(--line);letter-spacing:.2px}
th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--fg)}
td{padding:11px 16px;border-top:1px solid var(--line);white-space:nowrap;vertical-align:middle}
tbody tr:first-child td{border-top:0}
td.wrap{white-space:normal;min-width:180px}
tr.click{cursor:pointer} tr.click:hover td{background:var(--raised)}
td.empty{padding:32px 16px;color:var(--muted);text-align:center;white-space:normal}
.tariff td{white-space:normal}
.card-b .tbl-wrap{border:1px solid var(--line);border-radius:10px}
.pager{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:10px 16px;border-top:1px solid var(--line)}
.pager .muted{margin-right:auto}
/* dashboard bits */
.tt{display:flex;flex-direction:column;gap:14px}
.tt-row{display:grid;grid-template-columns:120px 1fr 36px;gap:12px;align-items:center}
.bar{height:8px;border-radius:99px;background:var(--chip);overflow:hidden} .bar i{display:block;height:100%;border-radius:99px}
.tt-row b{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.total{text-align:center;padding:14px 0 18px;margin-bottom:12px;border-radius:12px;background:var(--raised);border:1px solid var(--line)}
.total small{color:var(--muted);font-size:12px;font-weight:500} .total div{font:650 32px/1.2 var(--font);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.breakdown{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:14px;display:flex;flex-direction:column;gap:10px;background:var(--raised)}
.breakdown h3{margin:0}
.breakdown .bl>div{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.breakdown .bl b{font-weight:600}
.breakdown .bl small{color:var(--muted);font-size:11.5px;display:block;overflow-wrap:anywhere;margin-top:1px}
.breakdown .hint{color:var(--muted);text-align:center;display:block;font-size:13px}
.breakdown .sum{border-top:1px dashed var(--line-2);padding-top:10px;font-weight:700;display:flex;justify-content:space-between;font-size:15px}
.list{display:flex;flex-direction:column}
.list a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;text-decoration:none;border-top:1px solid var(--line);color:var(--fg);font-weight:500}
.list a:first-child{border-top:0} .list a:hover span{color:var(--accent)}
.list time{color:var(--muted);font-size:12px;white-space:nowrap;flex:none;font-weight:400}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;color:var(--fg);box-shadow:var(--shadow);transition:border-color .12s,transform .12s}
.tile svg{color:var(--brand);margin-bottom:6px} .tile:hover{border-color:var(--line-2);transform:translateY(-1px)} .tile b{font-size:15px} .tile span{color:var(--muted);font-size:13px}
.tile .btn{margin-top:auto;padding-top:10px;color:var(--accent);background:none;box-shadow:none;padding-left:0}
.help{box-shadow:none} .help summary{padding:14px 20px;cursor:pointer;font-weight:600}
.help ol{margin:0 0 8px;padding-left:20px}
.specs{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.sumbar{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 0;font-weight:600;font-variant-numeric:tabular-nums}
.stepper{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 20px;overflow-x:auto}
.stepper li{flex:1;min-width:130px}
.stepper button{width:100%;display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface);padding:9px 12px;border-radius:12px;cursor:pointer;color:var(--muted);font-weight:600}
.stepper button:disabled{cursor:default;opacity:.7}
.stepper b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--chip);font-size:12px;flex:none}
.stepper .cur button{border-color:var(--ink);color:var(--fg);box-shadow:0 0 0 1px var(--ink)} .stepper .cur b{background:var(--ink);color:var(--ink-fg)}
.stepper .done b{background:var(--ok);color:#fff}
.colrow{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:var(--surface)}
.colrow label{flex:1;display:flex;gap:9px;align-items:center;cursor:pointer}
.colrow button{border:0;background:none;cursor:pointer;color:var(--muted);padding:2px 7px;border-radius:6px}
.colrow button:hover:not(:disabled){background:var(--chip);color:var(--fg)} .colrow button:disabled{opacity:.3;cursor:default}
.setrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.setrow:first-child{border-top:0} .setrow small{display:block}
/* overlays */
.overlay{position:fixed;inset:0;background:rgb(10 15 24 / .38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:30;display:grid;place-items:center;padding:16px;animation:fade .14s ease-out}
.modal{background:var(--surface);border-radius:16px;width:min(560px,100%);max-height:90vh;display:flex;flex-direction:column;border:1px solid var(--line);box-shadow:var(--shadow-lg);animation:pop .16s ease-out}
.modal.wide{width:min(840px,100%)}
.modal.xwide{width:min(1280px,100%)}
.cf-items td{white-space:normal} .cf-items td.num,.cf-items td:first-child{white-space:nowrap}
.modal .card-h{padding-bottom:14px;border-bottom:1px solid var(--line)}
.modal .card-b{overflow:auto;padding-top:18px}
.modal-f{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line);background:var(--raised)}
.modal-f .r{display:flex;gap:8px;flex-wrap:wrap}
.x{border:0;background:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1;width:32px;height:32px;border-radius:8px}
.x:hover{background:var(--chip);color:var(--fg)}
.dscrim{z-index:30}
.drawer{position:fixed;top:10px;right:10px;bottom:10px;width:min(500px,calc(100% - 20px));background:var(--surface);z-index:31;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;animation:slide .18s ease-out}
.drawer .card-h{border-bottom:1px solid var(--line);padding-bottom:14px}
.drawer .card-b{overflow:auto;flex:1;padding-top:12px}
.dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 16px;font-size:13px;margin:0}
.dl dt{color:var(--muted)} .dl dd{margin:0;overflow-wrap:anywhere;font-weight:500}
.steps{display:flex;flex-direction:column;margin:0 0 6px;position:relative}
.step{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted);padding:3px 0;position:relative}
.step i{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);flex:none;background:var(--surface);z-index:1}
.step:not(:last-child)::before{content:"";position:absolute;left:5px;top:14px;height:calc(100% - 4px);width:2px;background:var(--line)}
.step.done{color:var(--fg)} .step.done i{background:var(--ok);border-color:var(--ok)} .step.done::before{background:var(--ok)}
.step .sd{margin-left:auto;padding-left:12px;font-size:12px;font-weight:400;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums} .step .sd em{font-style:normal;color:var(--sea, var(--muted))} .step .sd b{color:var(--brand);font-weight:600}
.step.cur{color:var(--fg);font-weight:700} .step.cur i{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px var(--accent-soft)}
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--fg);color:var(--surface);padding:10px 16px;border-radius:12px;z-index:40;font-weight:600;max-width:calc(100% - 32px);box-shadow:var(--shadow-lg);animation:up .18s ease-out}
.toast.bad{background:var(--bad);color:#fff} .toast.warn{background:var(--warn);color:#fff}
@keyframes fade{from{opacity:0}} @keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}} @keyframes slide{from{opacity:0;transform:translateX(16px)}} @keyframes up{from{opacity:0;transform:translate(-50%,8px)}}
/* command palette */
.palette{width:min(600px,100%);align-self:start;margin-top:10vh;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .14s ease-out}
.palette input{width:100%;border:0;border-bottom:1px solid var(--line);padding:16px 18px;font-size:16px;background:transparent;outline:none}
.palette ul{list-style:none;margin:0;padding:6px;max-height:min(420px,60vh);overflow:auto}
.palette li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer}
.palette li small{margin-left:auto;color:var(--muted)}
.palette li.on{background:var(--chip)}
.palette .grp{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);padding:10px 12px 4px;cursor:default}
/* charts */
.chart svg{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)} .legend.col{flex-direction:column}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.donut-wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .donut{width:150px;height:150px;transform:rotate(-90deg)}
.timeline{position:relative;min-width:640px}
.tl-axis{position:relative;height:26px;margin-left:220px;border-bottom:1px solid var(--line)}
.tl-axis span{position:absolute;font-size:11px;color:var(--muted);transform:translateX(-50%)}
.tl-axis .today b{position:absolute;top:-2px;left:4px;font-size:10px;color:var(--brand);font-weight:600}
.today{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--brand)}
.tl-row{display:grid;grid-template-columns:220px 1fr;align-items:center;min-height:32px}
.tl-l{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
.tl-track{position:relative;height:22px}
.tl-bar{position:absolute;top:3px;height:18px;border-radius:6px;background:var(--line-2);color:var(--fg);font-size:10.5px;padding:0 7px;white-space:nowrap;overflow:hidden;line-height:18px;font-weight:600}
.tl-bar.on{background:var(--sea);color:#fff}
.pallet{margin:0 12px 12px 0;display:inline-block;width:min(240px,100%);vertical-align:top}
.pallet svg{width:100%;height:auto;border-bottom:1px solid var(--line)} .pallet figcaption{font-size:12px;color:var(--muted)}
.pipe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.pstep{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)}
.chat{display:flex;flex-direction:column;gap:8px}
.msg{max-width:75%;padding:9px 13px;border-radius:14px 14px 14px 4px;background:var(--chip)} .msg.out{align-self:flex-end;background:var(--ink);color:var(--ink-fg);border-radius:14px 14px 4px 14px}
.chatbubble{margin-top:10px;padding:11px 14px;border-radius:12px;background:var(--accent-soft)}
/* responsive */
@media (max-width:1100px){.grid,.grid2{grid-template-columns:minmax(0,1fr)} .kpis.five{grid-template-columns:repeat(3,minmax(0,1fr))} .cmdk{flex-basis:260px}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:270px;z-index:20;transform:translateX(-100%);transition:transform .2s;height:100%;box-shadow:var(--shadow-lg)}
  .app.open .side{transform:none}
  .app.open .scrim{display:block;position:fixed;inset:0;background:rgb(10 15 24 / .4);z-index:15}
  .menu-btn{display:block}
  .kpis,.kpis.five,.kpis.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  main,.top,.adminbar,.adminwarn{padding-inline:16px}
  .banner{margin-inline:16px}
  .form-grid,.pipe{grid-template-columns:minmax(0,1fr)}
  .setrow{grid-template-columns:1fr}
  .toolbar select.inp{max-width:none;flex:1 1 140px}
  .cmdk span,.cmdk kbd,.demo,.top select.inp{display:none}
  .cmdk{flex:0 0 auto;padding:8px}
  .top .sp{display:block}
}
@media (max-width:480px){.row3{grid-template-columns:1fr 1fr} .kpi b{font-size:22px} h1{font-size:24px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---------- app-specifiek ---------- */
.authwrap{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.authside{background:var(--ink);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.authside h2{font-size:30px;line-height:1.15;letter-spacing:-.4px;display:block;max-width:420px;font-weight:650;color:#fff}
.authside p{color:#c3cfdd;max-width:420px}
.authside .logo{color:#fff} .authside .logo small{color:#9fb0c6}
.authside ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:10px;color:#dbe4ef}
.authside li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:10px}
.authmain{display:grid;place-items:center;padding:32px 16px;background:var(--bg)}
.authcard{width:min(420px,100%)}
.authcard h1{margin-bottom:6px}
.authcard form{display:flex;flex-direction:column;margin-top:22px}
.authcard .btn{justify-content:center;width:100%;margin-top:6px;padding:10px 14px}
.authlinks{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:13px;flex-wrap:wrap}
.authlinks a{cursor:pointer}
.notice{border-radius:12px;padding:12px 14px;margin:14px 0 0;background:var(--ok-soft);color:var(--ok);font-weight:500}
.notice.bad{background:var(--bad-soft);color:var(--bad)}
.loading{display:grid;place-items:center;min-height:50vh;color:var(--muted)}
.spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--brand);animation:spin .7s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}
.co-switch{margin:0 2px 14px}
.co-switch select{width:100%}
.empty-state{text-align:center;padding:40px 20px;color:var(--muted)}
.empty-state b{display:block;color:var(--fg);font-size:16px;margin-bottom:4px}
.empty-state .btn{margin-top:14px}
.hist{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.hist div{display:flex;justify-content:space-between;gap:10px;color:var(--muted)}
@media (max-width:860px){.authwrap{grid-template-columns:1fr}.authside{display:none}}
#root{min-height:100%}
.authwrap{min-height:100vh;min-height:100dvh}

/* Klantweergave (admin bekijkt een klantomgeving) en agentlabel */
.custview{display:flex;align-items:center;gap:8px;padding:8px 32px;font-size:12.5px;font-weight:500;color:var(--sea);background:color-mix(in srgb,var(--sea) 10%,transparent);border-bottom:1px solid var(--line)}
.custview[hidden]{display:none}
.agentrole{display:block;text-align:center;padding:7px;font-weight:600;font-size:12.5px;color:var(--sea)}
.co-switch label{display:block;margin:0 0 4px 2px}
@media (max-width:760px){.custview{padding-inline:16px}}
#modal{z-index:40} /* dialogen altijd boven het zijpaneel */
.role.three{grid-template-columns:repeat(3,1fr)}

.row-line{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--line)}
.row-line:first-child{border-top:0}
details.alert summary{cursor:pointer}
.kpi-link{display:block;color:inherit;text-decoration:none;border-radius:var(--radius)} .kpi-link>.kpi{height:100%;transition:border-color .15s,transform .15s} .kpi-link:hover>.kpi{border-color:var(--accent);transform:translateY(-1px)} .kpi-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.logo img{height:38px;width:auto;display:block} a.logo{text-decoration:none}
.logo .logo-d{display:none}
:root[data-theme="dark"] .logo .logo-l{display:none} :root[data-theme="dark"] .logo .logo-d{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .logo-l{display:none} :root:not([data-theme="light"]) .logo .logo-d{display:block}}
.authside .logo img{height:46px}
/* Zoals het E-freight Flow-logo: ons logo | oranje streepje | woord (hier 'Dashboard'), petrol en dikgedrukt (14-10-2026, verzoek Jason) */
.logo .logo-sub{display:flex;flex-direction:column;justify-content:center;align-self:center;min-height:36px;padding-left:10px;border-left:2px solid #E08B0B;font-size:20px;font-weight:900;letter-spacing:-.5px;color:#004653;line-height:1;white-space:nowrap}
:root[data-theme="dark"] .logo .logo-sub{color:#eef3f4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .logo-sub{color:#eef3f4}}
.logo .logo-sub b{display:block;font-weight:900;letter-spacing:-.6px;line-height:.92} /* 'Dash' en 'board' onder elkaar (14-10, verzoek Jason); samen even hoog als het logo */
.logo:has(.logo-sub){gap:9px} aside .logo:has(.logo-sub) img{height:38px} /* 14-10: zelfde maat als het logo + woordmerk in E-freight Flow; Dash/board onder elkaar → menu weer 256px */
.top-logo .logo-sub{font-size:14px;min-height:26px;padding-left:7px}

.spend .kpis{margin:0 0 16px}
.bars{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:170px;padding-top:6px}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-width:0}
.bar-stack{flex:1;width:100%;max-width:34px;display:flex;flex-direction:column-reverse;justify-content:flex-start;border-radius:6px;overflow:hidden;background:var(--raised)}
.bar-stack i{display:block;width:100%}
.bar-col span{font-size:11px;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
@media (max-width:480px){.bars{gap:3px;height:140px} .bar-col span{font-size:9.5px}}
.vessel{margin-top:10px} .vessel-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.vessel iframe{width:100%;border:1px solid var(--line);border-radius:10px;display:block;background:var(--raised)} .vessel p{margin:6px 0 0}
details.reorder>summary{cursor:pointer;list-style:none} details.reorder>summary::-webkit-details-marker{display:none}
details.reorder>summary .r{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
details.reorder .chev{color:var(--muted);transition:transform .15s;margin-left:4px} details.reorder[open] .chev{transform:rotate(180deg)}
details.reorder:not([open])>summary{border-bottom:0}
.ro-item{border-top:1px solid var(--line)} .ro-item:first-child{border-top:0}
.ro-item>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;cursor:pointer;list-style:none}
.ro-item>summary::-webkit-details-marker{display:none}
.ro-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ro-item>summary .pill{flex:none} .ro-item p{margin:0 0 10px}
.inp.ro{background:var(--raised);color:var(--fg);display:flex;align-items:center;cursor:default}
.track{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:8px;background:var(--surface)}
.track-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.track-bar{height:6px;border-radius:99px;background:var(--raised);margin-top:10px;overflow:hidden} .track-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.track-ev{list-style:none;margin:10px 0 0;padding:0;font-size:13px} .track-ev li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--line)} .track-ev time{color:var(--muted);white-space:nowrap}

/* Statuskleuren: elke status een eigen kleur langs de reis (licht / donker) */
:root{--st-concept:#64748b;--st-submitted:#4f46e5;--st-approved:#0f766e;--st-waiting_for_goods:#b45309;--st-goods_received:#7c3aed;--st-in_transit:#1d4ed8;--st-customs_pending:#c2410c;--st-customs_cleared:#0e7490;--st-fyco:#be123c;--st-delivery_planned:#a21caf;--st-out_for_delivery:#0369a1;--st-delivered:#15803d;--st-in_stock:#4d7c0f;--st-completed:#166534;--st-rejected:#b91c1c;--st-cancelled:#6b7280;--st-archived:#57534e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--st-concept:#94a3b8;--st-submitted:#a5b4fc;--st-approved:#5eead4;--st-waiting_for_goods:#fbbf24;--st-goods_received:#c4b5fd;--st-in_transit:#93c5fd;--st-customs_pending:#fdba74;--st-customs_cleared:#67e8f9;--st-fyco:#fda4af;--st-delivery_planned:#f0abfc;--st-out_for_delivery:#7dd3fc;--st-delivered:#86efac;--st-in_stock:#bef264;--st-completed:#4ade80;--st-rejected:#fca5a5;--st-cancelled:#9ca3af;--st-archived:#a8a29e}}
:root[data-theme="dark"]{--st-concept:#94a3b8;--st-submitted:#a5b4fc;--st-approved:#5eead4;--st-waiting_for_goods:#fbbf24;--st-goods_received:#c4b5fd;--st-in_transit:#93c5fd;--st-customs_pending:#fdba74;--st-customs_cleared:#67e8f9;--st-fyco:#fda4af;--st-delivery_planned:#f0abfc;--st-out_for_delivery:#7dd3fc;--st-delivered:#86efac;--st-in_stock:#bef264;--st-completed:#4ade80;--st-rejected:#fca5a5;--st-cancelled:#9ca3af;--st-archived:#a8a29e}
.pill.sp{color:var(--sc);background:color-mix(in srgb,var(--sc) 13%,transparent)}

/* Inklaring */
.cust-decl{padding:8px 0;border-top:1px solid var(--line)} .cust-decl:first-child{border-top:0;padding-top:0}
.dragging{outline:2px dashed var(--brand);outline-offset:6px;border-radius:12px}
.pick{display:flex;flex-direction:column;max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:12px}
.pick-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--line);cursor:pointer;font-size:13px}
.pick-row:first-child{border-top:0} .pick-row:hover{background:var(--chip)} .pick-row:has(input:checked){background:var(--accent-soft)} .pick-row[hidden]{display:none}
.pick-r{text-align:right;white-space:nowrap}
/* Container laden (volledig scherm) */
.cl-grid{display:grid;grid-template-columns:1fr;gap:16px}
.cl-filters{flex-wrap:wrap;padding:0 18px 12px} .cl-filters .search{flex:1 1 260px} .cl-ready{display:flex;align-items:center;gap:6px;white-space:nowrap}
.cl-tbl{max-height:60vh;overflow:auto} .cl-tbl thead th{position:sticky;top:0;background:var(--surface);z-index:1}
.cl-row{cursor:pointer} .cl-row:hover{background:var(--chip)} .cl-row.on{background:var(--accent-soft)}
.cl-fill-row{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:14px 18px} .cl-meter{min-width:260px;flex:0 1 360px;display:grid;gap:4px}
.cl-bar{position:sticky;bottom:12px;z-index:5;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;padding:12px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.12)} .cl-bar .sp{flex:1}
/* Flow · losplanning */
.flow-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .flow-nav .inp{width:auto}
.flow-day.today{border-color:var(--brand)} .flow-time{font-size:20px;font-variant-numeric:tabular-nums}
.flow-edit{display:flex;gap:4px;margin-top:6px} .flow-edit .inp{width:178px;padding:4px 6px;font-size:12px}
.flow-bk{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:5px 0;border-top:1px dashed var(--line)} .flow-bk:first-child{border-top:0}
.flow-inb{white-space:nowrap;text-align:right}
@media print{.side,.top,.banner,.custview,.adminwarn,footer,.flow-nav,.flow-edit,[data-inb],.menu-btn{display:none!important}.app{display:block}.card{break-inside:avoid;box-shadow:none}}
.fill{display:grid;gap:3px;min-width:120px} .fill.wide{min-width:220px} .fill small{white-space:nowrap;color:var(--muted)} .fill small b{color:var(--fg)}
.kpi-link{position:relative;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.kpi-link:hover{transform:translateY(-1px);border-color:var(--line-2);box-shadow:0 8px 22px rgba(15,23,42,.08)} .kpi-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kpi-go{position:absolute;top:14px;right:16px;font-style:normal;color:var(--muted);opacity:0;transition:opacity .12s ease,transform .12s ease} .kpi-link:hover .kpi-go{opacity:1;transform:translateX(2px)}
/* Correcties boekingsregels */
.items-tbl td small.was,.items-tbl small.was{display:block;color:#b45309;font-size:11px;font-weight:500}
details.chg{margin-top:8px}details.chg summary{cursor:pointer;font-weight:600;font-size:13px;padding:4px 0}
details.chg .hist>div{gap:12px}details.chg s{color:var(--muted,#6b7280)}
.edit-tbl td{padding:4px 6px;vertical-align:middle}.edit-tbl th{font-size:12px;white-space:nowrap}
.inp.sm{padding:5px 7px;font-size:13px;min-height:0}
.nowrap{white-space:nowrap}
/* Boeking uit documenten (AI) */
.ai-import{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;margin:0 0 16px;border:1px dashed var(--brand,#1d4ed8);border-radius:10px;background:rgba(29,78,216,.04)}
.ai-import>div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:220px}
.ai-tbl td{vertical-align:top}.ai-tbl select{max-width:240px}.ai-tbl small{display:block;margin-top:3px}
.ai-diff{color:#b45309}
.ai-new td{background:rgba(29,78,216,.03);border-top:0}
.ai-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.ai-grid label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600}
.ai-grid .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.items-tbl td small.muted{display:block;font-size:11px}
/* Evi — AI-assistent */
.evi-fab{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;color:#fff;font-weight:700;font-size:15px;
  background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 8px 24px rgba(234,88,12,.35);transition:transform .15s}
.evi-fab:hover{transform:scale(1.06)}
.evi-panel{position:fixed;right:20px;bottom:20px;z-index:61;width:390px;max-width:calc(100vw - 32px);height:min(620px,calc(100vh - 40px));display:flex;flex-direction:column;
  background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:16px;box-shadow:0 20px 50px rgba(15,23,42,.22);overflow:hidden}
.evi-panel[hidden]{display:none}
.evi-panel header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line,#e5e7eb)}
.evi-panel header>div:nth-child(2){flex:1;display:flex;flex-direction:column;line-height:1.2}.evi-panel header small{color:var(--muted,#6b7280);font-size:12px}
.evi-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(135deg,#f97316,#ea580c)}
.evi-x{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--muted,#6b7280);padding:4px 6px;border-radius:6px}.evi-x:hover{background:rgba(0,0,0,.05)}
.evi-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.evi-msg{max-width:88%;padding:9px 12px;border-radius:14px 14px 14px 4px;background:rgba(15,23,42,.05);font-size:14px;line-height:1.45;align-self:flex-start;overflow-wrap:anywhere}
.evi-msg p{margin:0 0 6px}.evi-msg p:last-child{margin:0}.evi-msg ul{margin:4px 0;padding-left:18px}
.evi-msg.me{align-self:flex-end;background:#0f172a;color:#fff;border-radius:14px 14px 4px 14px}
.evi-typing{display:flex;gap:4px;align-items:center}.evi-typing i{width:6px;height:6px;border-radius:50%;background:#94a3b8;animation:evi-b 1s infinite}
.evi-typing i:nth-child(2){animation-delay:.15s}.evi-typing i:nth-child(3){animation-delay:.3s}.evi-typing small{margin-left:6px;color:var(--muted,#6b7280)}
@keyframes evi-b{0%,80%,100%{opacity:.3}40%{opacity:1}}
.evi-sugg{display:flex;flex-wrap:wrap;gap:6px}.evi-sugg button{border:1px solid var(--line,#e5e7eb);background:none;border-radius:999px;padding:5px 10px;font-size:12.5px;cursor:pointer}
.evi-sugg button:hover{border-color:#ea580c;color:#ea580c}
.evi-act{align-self:stretch;border:1px solid #fdba74;background:#fff7ed;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.evi-act small{display:block;color:var(--muted,#6b7280)}.evi-act .r{display:flex;gap:6px;justify-content:flex-end}.evi-act.done{opacity:.7;border-color:var(--line,#e5e7eb);background:none}
.evi-in{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line,#e5e7eb)}.evi-in textarea{flex:1;resize:none;border:1px solid var(--line,#e5e7eb);border-radius:10px;padding:9px 10px;font:inherit;font-size:14px;max-height:120px}
.evi-in .btn{padding:0 14px}
.evi-note{margin:0;padding:0 12px 8px;font-size:11px;color:var(--muted,#6b7280)}
@media (max-width:600px){.evi-panel{right:0;bottom:0;width:100vw;max-width:100vw;height:100dvh;border-radius:0}.evi-fab{right:14px;bottom:14px}}
@media print{.evi{display:none}}
/* Favorieten in het menu */
.nav-row{position:relative}
.nav-row>a{padding-right:30px}
.fav-star{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;font-size:13px;line-height:1;padding:3px 5px;border-radius:6px;color:var(--muted);opacity:0;transition:opacity .12s}
.nav-row:hover .fav-star,.fav-star:focus-visible,.fav-star.on{opacity:1}
.fav-star.on{color:#f59e0b}.fav-star:hover{background:var(--chip);color:#f59e0b}
.nav-row:not(:hover) .fav-star.on{opacity:1}
.nav.fav{margin-bottom:2px}
.nav.fav .nav-h{padding-top:2px}
body[data-area="admin"] .nav.fav.portal, body[data-area="portal"] .nav.fav.adm{display:none}
@media (hover:none){.fav-star{opacity:.45}}
/* Loslijst */
.flow-ul{margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ul-bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 14px;margin:0 0 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);font-size:14px}
.ul-bk .card-h .r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ul-tbl td{vertical-align:middle}.ul-tbl .ul-in input{width:72px}.ul-tbl .ul-note input{min-width:140px;width:100%}
.ul-tbl .ul-exp{font-size:15px}.ul-tbl .ul-st{white-space:nowrap;text-align:center}.ul-tbl .ul-st small{display:block;font-size:10.5px}
.ul-tbl tr.ul-ok td{background:color-mix(in srgb,var(--ok) 7%,transparent)}.ul-tbl tr.ul-bad td{background:color-mix(in srgb,var(--bad) 8%,transparent)}
.ul-print-head,.ul-sign{display:none}
@media print{
  @page{size:A4 landscape;margin:10mm}
  .ul-head .r,.ul-bar,[data-allok],.eyebrow{display:none!important}
  .ul-print-head{display:block;font-size:12px;margin:0 0 8px}.ul-sign{display:block;margin-top:18px;font-size:12px}
  .ul-tbl{font-size:11px}.ul-tbl input{border:1px solid #999!important;background:none!important;height:22px}
  .ul-tbl tr.ul-ok td,.ul-tbl tr.ul-bad td{background:none}
  .ul-bk{margin-bottom:8px}
}
/* Mobiel: klikbare lijsten als kaarten */
@media (max-width:600px){
  table.cards thead{display:none}
  table.cards,table.cards tbody{display:block;width:100%}
  table.cards tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  table.cards td{display:block;padding:0!important;border:0!important;text-align:left!important;min-width:0;white-space:normal}
  table.cards td::before{content:attr(data-l);display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:1px}
  table.cards td:first-child{grid-column:1/-1}table.cards td:first-child::before{display:none}
  table.cards td[data-l=""]::before{display:none}
  table.cards td.empty{grid-column:1/-1}
}
.cost-add{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.cost-add #cl-l{flex:1;min-width:160px}.cost-add #cl-s{width:130px}
/* Klant kiezen (admin) */
body[data-area="admin"] .co-adm{display:none}
.co-btn{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;cursor:pointer;font:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.co-btn span{color:var(--muted);margin-left:6px}
.co-list{margin-top:10px;max-height:min(60vh,460px);overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.co-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;border:0;background:none;padding:8px 10px;border-radius:9px;cursor:pointer;font:inherit;color:var(--fg)}
.co-item:hover,.co-item:focus-visible{background:var(--chip)}.co-item.on{background:var(--chip);box-shadow:inset 3px 0 0 var(--brand)}
.co-list .nav-h{padding:8px 10px 2px}
/* Loslijst: opslag of uitleveren */
.ul-dest{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.6px;padding:4px 9px;border-radius:7px;margin-right:10px;vertical-align:middle;color:#fff}
.ul-storage .ul-dest{background:#1d4ed8}.ul-delivery .ul-dest{background:#ea580c}
.ul-storage{border-left:5px solid #1d4ed8}.ul-delivery{border-left:5px solid #ea580c}
.ul-where{font-size:13px}.ul-sum-s{color:#1d4ed8}.ul-sum-d{color:#ea580c}
@media print{.ul-dest{border:2px solid #000;color:#000!important;background:none!important;font-size:13px}.ul-storage,.ul-delivery{border-left:4px solid #000}}
/* Foto's bij lossen */
.ul-cam{cursor:pointer;white-space:nowrap}.ul-cam.busy{opacity:.6;pointer-events:none}
.ph-row{display:flex;flex-wrap:wrap;gap:6px}
.ph-thumb{width:64px;height:64px;border:1px solid var(--line);border-radius:8px;padding:0;overflow:hidden;background:var(--chip);cursor:zoom-in}
.ph-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ul-tbl .ul-ph{white-space:nowrap}
@media print{.ul-ph .btn,.ul-loading .toolbar{display:none}}
.ui-item{padding:12px 18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.ui-reply{background:var(--chip);border-radius:9px;padding:8px 10px;font-size:13.5px}
.ui-act{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}.ui-act textarea{flex:1;min-width:220px}
/* Loslijst compact: één tabel, boeking alleen op de eerste regel */
.ul-filter{gap:10px;flex-wrap:wrap;margin-bottom:10px}.ul-filter .search{flex:1;min-width:200px}
.ul-tbl{font-size:13px}.ul-tbl td{padding:5px 8px!important;vertical-align:middle}.ul-tbl th{padding:7px 8px!important;font-size:11.5px}
.ul-tbl tr.ul-first td{border-top:2px solid var(--line)}
.ul-tbl td.ul-bkc{width:230px;max-width:260px;vertical-align:top;line-height:1.3}
.ul-tbl tr.ul-rs td.ul-bkc{box-shadow:inset 4px 0 0 #1d4ed8}.ul-tbl tr.ul-rd td.ul-bkc{box-shadow:inset 4px 0 0 #ea580c}
.ul-tbl .ul-dest{font-size:9.5px;padding:2px 6px;border-radius:5px;margin:0 6px 0 0;letter-spacing:.4px}
.ul-tbl tr.ul-rs .ul-dest{background:#1d4ed8}.ul-tbl tr.ul-rd .ul-dest{background:#ea580c}
.ul-co{font-weight:600}.ul-wh{display:block;font-size:11px}.ul-ean{display:block;font-size:11px}
.ul-ok{margin-top:3px;padding:2px 8px;font-size:11.5px}
.ul-tbl .ul-in input{width:58px}.ul-tbl .ul-note input{min-width:110px}.ul-tbl .ul-exp{font-size:14px}
.ul-tbl .ul-ph .btn{padding:3px 7px}
@media print{.ul-filter,.ul-ok{display:none!important}.ul-tbl{font-size:10px}.ul-tbl td{padding:3px 5px!important}.ul-tbl tr.ul-rs .ul-dest,.ul-tbl tr.ul-rd .ul-dest{background:none!important;color:#000!important;border:1px solid #000}.ul-tbl td.ul-bkc{box-shadow:none!important;border-left:3px solid #000}}
.pt-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Logo in de bovenbalk en boven het inlogformulier: alleen als het zijmenu/de donkere zijkant verborgen is (mobiel/tablet). */
.top-logo,.auth-logo{display:none}
@media (max-width:860px){
  .top .top-logo{display:flex;padding:0;margin-left:-4px}
  .top .top-logo img{height:32px}
  .auth-logo{display:flex;justify-content:center;padding:0 0 22px}
  .auth-logo img{height:44px}
}
/* Pre-inklaringscheck */
.pc-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.pc-tbl{width:100%;border-collapse:collapse;font-size:13px}
.pc-tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;padding:6px 8px;border-bottom:1px solid var(--line)}
.pc-tbl td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.pc-tbl th.num,.pc-tbl td:nth-child(4),.pc-tbl td:nth-child(5){text-align:right}
.pc-tbl td.pc-bad{background:var(--bad-soft);color:var(--bad);font-weight:600}
.pc-tbl td.pc-warn{background:var(--warn-soft);color:var(--warn);font-weight:600}
.pc-tbl td.pc-bad small,.pc-tbl td.pc-warn small{font-weight:400}
.pc-list{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px;font-size:13px}
.pc-list li{display:flex;gap:8px;align-items:flex-start;padding:7px 10px;border-radius:10px;background:var(--warn-soft);color:var(--warn)}
.pc-list li.error{background:var(--bad-soft);color:var(--bad)}
.pc-list li i{font-style:normal;font-weight:800;font-size:11px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--warn);color:var(--surface)}
.pc-list li.error i{background:var(--bad)}
.pc-ans{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;margin-top:8px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:13px}
.pc-q{display:block;padding:10px 0;border-top:1px solid var(--line)}
.pc-q:first-of-type{border-top:0}
.pc-topics{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0}
.pc-cust{border:1px solid var(--warn);background:var(--warn-soft);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.pc-cust.done{border-color:var(--line);background:var(--surface)}
.pc-ready{border:1px solid var(--accent);background:var(--accent-soft);border-radius:12px;padding:12px 14px;margin:10px 0;font-size:13px} .pc-ready ul{margin:8px 0 0;padding-left:18px} .pc-ready li{margin:4px 0}
.pc-cust h3{display:flex;gap:6px;align-items:center}
.pc-cust .pc-q{border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
/* Admin-dashboard: boekingen en volume */
#stats .card-h{flex-wrap:wrap;gap:8px}
.st-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:6px}
.st-kpis>div{background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;min-width:0}
.st-kpis span{font-size:12px;color:var(--muted)} .st-kpis b{font-size:20px;letter-spacing:-.3px;line-height:1.3} .st-kpis small{font-size:11.5px;color:var(--muted)}
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:860px){.st-grid{grid-template-columns:minmax(0,1fr);gap:4px}}
.cc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;height:200px;padding-top:12px}
.cc-y{position:relative;font-size:11px;color:var(--muted);text-align:right;min-width:24px}
.cc-y span{position:absolute;right:0;transform:translateY(50%);line-height:1}
.cc-plot{position:relative;display:flex;flex-direction:column;min-width:0}
.cc-g{position:absolute;left:0;right:0;height:0;border-top:1px dashed var(--line)}
.cc-g.base{border-top:1px solid var(--line-2)}
.cc-cols{flex:1;display:flex;align-items:flex-end;gap:2px;position:relative}
.cc-c{flex:1;height:100%;display:flex;align-items:flex-end;border:0;background:transparent;padding:0;cursor:default;min-width:0}
.cc-c i{display:block;width:100%;max-width:28px;margin:0 auto;background:var(--cc);border-radius:4px 4px 0 0}
.cc-c:hover i,.cc-c:focus i{filter:brightness(1.15)} .cc-c:focus{outline:0} .cc-c:focus-visible i{outline:2px solid var(--fg);outline-offset:1px}
.cc-x{display:flex;gap:2px;height:20px;font-size:10.5px;color:var(--muted)}
.cc-x span{flex:1;min-width:0;white-space:nowrap;overflow:visible;padding-top:4px}
.cc-tip{position:absolute;top:-6px;background:var(--fg);color:var(--surface);font-size:12px;padding:4px 8px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:2}
.hb{display:grid;gap:8px}
.hb-r{display:grid;grid-template-columns:minmax(90px,38%) minmax(0,1fr) auto 38px;align-items:center;gap:10px;font-size:13px;width:100%;background:none;border:0;padding:0;text-align:left;color:inherit}
.hb-r span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-t{height:10px;background:var(--chip);border-radius:6px;overflow:hidden}
.hb-t i{display:block;height:100%;background:var(--sea);border-radius:6px}
.hb-r b{font-variant-numeric:tabular-nums;text-align:right} .hb-r small{color:var(--muted);text-align:right}
#stats details{margin-top:14px}
/* Vragen ISCM ↔ E-Freight */
.ar-item{padding:12px 18px;border-top:1px solid var(--line)} .ar-item:first-child{border-top:0} .ar-item.closed{opacity:.7}
.ar-h{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.ar-thread{display:grid;gap:6px}
.ar-msg{padding:8px 12px;border-radius:12px;background:var(--chip);max-width:min(640px,92%);font-size:13.5px}
.ar-msg.ef{background:var(--accent-soft);justify-self:end}
.ar-files{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:12.5px}
.ar-act{display:flex;gap:8px;align-items:flex-end;margin-top:8px;flex-wrap:wrap} .ar-act textarea{flex:1 1 260px}
.ar-btns{display:flex;gap:6px}
.idchk{margin-top:6px;font-size:12.5px;min-height:0} .idchk:empty{display:none}
.idchk-adm{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .idchk-adm>div{min-width:180px} .idchk-adm .btn{margin-left:auto}
/* Voorwaarden accepteren bij indienen */
.terms-box{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--raised);cursor:pointer;font-size:14px;line-height:1.45}
.terms-box input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--ok)}
.terms-box.bad{border-color:var(--bad);background:var(--bad-soft)}
.terms-line{margin:4px 0 0}
/* Open acties (klantdashboard) */
.act-list{display:flex;flex-direction:column;gap:6px}
.act-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:inherit;text-decoration:none;font-size:14px;line-height:1.4}
.act-row:hover{border-color:var(--line-2);background:var(--raised)}
.act-row .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--idle)}
.act-row.bad .dot{background:var(--bad)} .act-row.warn .dot{background:var(--warn)}
.act-row.bad{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.act-row>span:nth-child(2){flex:1;min-width:0} .act-row .go{color:var(--muted)}
.act-row[hidden]{display:none}
/* Evi: feedback onder een antwoord */
.evi-fb{display:flex;gap:4px;align-items:center;margin:-4px 0 6px 2px;font-size:12px;color:var(--muted)}
.evi-fb button{border:1px solid transparent;background:none;border-radius:8px;padding:2px 6px;cursor:pointer;font-size:14px;opacity:.65}
.evi-fb button:hover{opacity:1;border-color:var(--line)}
.evi-fb.open{gap:6px} .evi-fb.open .inp{flex:1;min-width:0;font-size:13px} .evi-fb.open .btn{opacity:1;font-size:12px}
/* Klantdashboard: tegels (jong, e-commerce) — kleur per tegel via --sc */
.dash-tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:24px}
:is(.dash-tiles,.kpis) .mini{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 18px 16px;border-radius:20px;min-height:150px;text-decoration:none;
  background-image:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--sc) 16%,transparent),transparent 60%)}
:is(.dash-tiles,.kpis) .mini-ic{width:42px;height:42px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--sc),color-mix(in srgb,var(--sc) 70%,#000));box-shadow:0 6px 14px color-mix(in srgb,var(--sc) 30%,transparent)}
:is(.dash-tiles,.kpis) .mini-ic svg{color:#fff;width:20px;height:20px}
:is(.dash-tiles,.kpis) .mini-t{gap:2px;width:100%}
:is(.dash-tiles,.kpis) .mini-l{font-size:13px;font-weight:600;color:var(--muted);text-transform:none}
:is(.dash-tiles,.kpis) .mini b{font-size:36px;font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--fg)}
:is(.dash-tiles,.kpis) .mini-s{font-size:12px;color:var(--muted);line-height:1.3;margin-top:2px}
:is(.dash-tiles,.kpis) .mini-go{position:absolute;top:18px;right:18px;font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--sc);background:color-mix(in srgb,var(--sc) 12%,transparent);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
:is(.dash-tiles,.kpis) .mini:hover .mini-go{opacity:1;transform:none}
:is(.dash-tiles,.kpis) .mini.hot{border-color:color-mix(in srgb,var(--sc) 45%,var(--line));background-color:color-mix(in srgb,var(--sc) 7%,var(--surface))}
:is(.dash-tiles,.kpis) .mini.hot b{color:var(--sc)}
:is(.dash-tiles,.kpis) .mini.hot .mini-ic{animation:pulse-ic 2.4s ease-in-out infinite}
@keyframes pulse-ic{0%,100%{box-shadow:0 6px 14px color-mix(in srgb,var(--sc) 30%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--sc) 14%,transparent),0 6px 14px color-mix(in srgb,var(--sc) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){:is(.dash-tiles,.kpis) .mini.hot .mini-ic{animation:none}}
@media (max-width:1100px){.dash-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.dash-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} :is(.dash-tiles,.kpis) .mini{min-height:128px;padding:14px} :is(.dash-tiles,.kpis) .mini b{font-size:28px} :is(.dash-tiles,.kpis) .mini:first-child{grid-column:1 / -1;flex-direction:row;align-items:center;min-height:0}}
.pl-gen{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:10px 0 0;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--brand) 45%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--brand) 6%,var(--surface));font-size:13px}
.pl-gen svg{color:var(--brand);vertical-align:-3px}
.dash-tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.dash-tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Admin-navigatietegels in dezelfde stijl: icoon in een gekleurd blokje */
.tiles .tile{border-radius:20px;gap:4px;background-image:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 60%)}
.tiles .tile>svg{box-sizing:content-box;width:20px;height:20px;padding:11px;border-radius:14px;color:#fff;background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 70%,#000));box-shadow:0 6px 14px color-mix(in srgb,var(--brand) 28%,transparent);margin-bottom:10px}
.tiles .tile:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.08);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.seg-sm button{font-size:12.5px;padding:6px 10px}
.calc-vol{display:flex;align-items:center;background:var(--chip);color:var(--fg);font-variant-numeric:tabular-nums}
/* Boekingsdetails: wanneer komt mijn zending */
.eta-card{border:1px solid color-mix(in srgb,var(--sea) 25%,var(--line));border-radius:18px;padding:14px 16px;margin:0 0 14px;background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--sea) 10%,transparent),transparent 60%),var(--surface)}
.eta-h{font-size:14.5px;margin-bottom:10px} .eta-h b{font-size:16px}
.eta-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--sea) 12%,transparent);overflow:hidden;margin-bottom:12px}
.eta-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--sea),var(--brand))}
.eta-stops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.eta-stop{display:flex;flex-direction:column;gap:2px;min-width:0}
.eta-dot{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:13px;background:var(--chip);color:var(--muted);margin-bottom:4px}
.eta-stop.ok .eta-dot{background:var(--sea);color:#fff}
.eta-l{font-size:12px;color:var(--muted)} .eta-stop b{font-size:14px} .eta-stop small{font-size:11.5px;color:var(--muted);line-height:1.3}
@media (max-width:480px){.eta-stops{grid-template-columns:1fr}}

/* Tegels (stat/statLink) in .kpis: precies dezelfde look als de dashboardtegels; lange waarden (bedragen) iets kleiner */
:is(.dash-tiles,.kpis) .mini b.long{font-size:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mini.static{cursor:default} .mini.static:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line)} .mini.static.hot:hover{border-color:color-mix(in srgb,var(--sc) 45%,var(--line))}
.card-b.kpis .mini{box-shadow:none;background-color:var(--raised)}
.lang-sw{display:inline-flex;background:var(--chip);border-radius:10px;padding:3px;gap:2px;margin-right:8px}
.lang-sw button{border:0;background:none;font:600 12px/1 var(--font);padding:7px 9px;border-radius:8px;color:var(--muted);cursor:pointer}
.lang-sw button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(15,23,42,.12)}
/* Boekingen (admin/agent): statustegels als filter, zelfde look als het dashboard */
.dash-tiles.st-filter{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.dash-tiles.st-filter .mini{min-height:132px}
.dash-tiles.st-filter .mini-ring{position:absolute;top:16px;right:16px;width:38px;height:38px}
.dash-tiles.st-filter .mini-ring em{width:28px;height:28px;font-size:9.5px}
.dash-tiles.st-filter .mini.on{border-color:var(--sc);box-shadow:0 0 0 1px var(--sc),0 10px 24px rgba(15,23,42,.08);background-color:color-mix(in srgb,var(--sc) 7%,var(--surface))}
.dash-tiles.st-filter .mini.on b{color:var(--sc)}

/* Menugroepen zoals E-freight Flow: kop met icoon + pijltje, items ingesprongen met lijn ervoor */
.ngrp{display:flex;flex-direction:column}
.ngrp-h{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:4px 10px;margin-top:2px;border-radius:7px;color:var(--nav-fg);font:inherit;font-size:13px;font-weight:700;line-height:1.4;cursor:pointer;text-align:left}
.ngrp-h:hover{background:var(--nav-sel)} .ngrp-h svg{color:var(--nav-fg);flex:none}
.ngrp-h .chev{margin-left:auto;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.45;transition:transform .15s}
.ngrp.closed .chev{transform:rotate(-45deg)} .ngrp.closed .ngrp-b{display:none}
.ngrp-star{width:18px;text-align:center;color:#f59e0b;font-size:15px;line-height:1}
.ngrp-b{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px 19px;padding-left:9px;border-left:1px solid var(--line)}
.ngrp-b .nav-row a svg{display:none}
/* Vervoerdersmeldingen */
.cn-row{border-top:1px solid var(--line);padding:8px 0;display:flex;flex-direction:column;gap:3px} .cn-row:first-of-type{border-top:0}
.cn-text{white-space:normal;line-height:1.5}
.cn-mail{margin-top:6px} .cn-mail summary{cursor:pointer;color:var(--muted);font-size:13px}
.cn-mail pre{white-space:pre-wrap;word-break:break-word;font:13px/1.5 var(--font);background:var(--chip);border-radius:9px;padding:10px 12px;max-height:280px;overflow:auto}
.cn-card textarea{resize:vertical;min-height:120px}
/* Vervoerdersmeldingen compact (31-10-2026) */
#cm-list{padding:0;overflow:hidden}
.cn-li{border-top:1px solid var(--line);padding:8px 14px} .cn-li:first-child{border-top:0}
.cn-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px}
.cn-who{min-width:0} .cn-at{margin-left:auto} .cn-a{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cn-b{display:none;margin:8px 0 4px} .cn-li.open .cn-b{display:block} .cn-li.open{background:var(--chip)}
.cn-b textarea{resize:vertical;min-height:70px} .cn-b .field{margin-bottom:4px}
.inp.sm{padding:4px 8px;font-size:13px;height:auto}
@media (max-width:600px){.cn-at{margin-left:0} .cn-a{width:100%}}
.nav a .ext{margin-left:auto;opacity:.5;font-size:11px}

/* ---------- Magazijn (WMS): grote scanvelden voor de handscanner ---------- */
.wms-scan{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.wms-scan label{font-weight:600;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.wms-scan .inp{font:600 22px/1.2 var(--mono);padding:14px 16px;letter-spacing:.5px;border-width:2px}
.wms-scan .inp:focus{border-color:var(--sea);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--sea) 18%,transparent)}
.wms-flash{font-weight:600}
.wms-flash.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent);color:var(--ok)}
.wms-flash.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,transparent);color:var(--bad)}
.wms-count{display:inline-block;min-width:18px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--brand);color:#fff;font-size:11px;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}
.wms-prog{height:6px;background:var(--chip);border-radius:999px;overflow:hidden;min-width:90px}
.wms-prog i{display:block;height:100%;background:var(--ok);border-radius:999px;transition:width .2s}
.wms-prog.big{height:10px;margin:4px 0 16px}
.wms-pick-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:8px}
.wms-pick-head h2{margin:4px 0 2px}
.wms-now{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:18px 20px;border:2px solid var(--sea)}
.wms-now-loc{font:700 34px/1 var(--mono);letter-spacing:-.5px;color:var(--sea)}
.wms-now-p{display:flex;flex-direction:column;gap:2px;min-width:0}
.wms-now-p b{font-size:17px}
.wms-now-q{text-align:center}
.wms-now-q b{display:block;font:700 34px/1 var(--font);font-variant-numeric:tabular-nums}
.wms-now-q small{color:var(--muted)}
.wms-tbl tr.cur td{background:color-mix(in srgb,var(--sea) 8%,transparent)}
.pick-tbl tr.done td{color:var(--muted)}
.pick-tbl tr.done td b.ref{text-decoration:line-through}
.wms-n{width:76px}
.print-box{display:none}
@media (max-width:600px){.wms-now{grid-template-columns:1fr auto}.wms-now-loc{font-size:28px;grid-column:1/-1}.wms-scan .inp{font-size:19px}}
@media print{.no-print,.tabs,.wms-flash{display:none!important}.print-box{display:inline-block;width:26px;height:18px;border:1.5px solid #000;border-radius:3px}}
.wms-segs{max-width:100%;overflow-x:auto;scrollbar-width:none}

/* E-freight Flow: losse knop bovenin het menu */
.flow-app{display:flex;align-items:center;gap:10px;margin:0 2px 16px;padding:10px 12px;border-radius:12px;background:#004653;color:#fff;text-decoration:none;box-shadow:0 6px 16px -6px rgb(0 70 83 / .55);transition:transform .12s ease,box-shadow .12s ease}
.flow-app:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgb(0 70 83 / .6)}
.flow-app-ic{flex:none;width:30px;height:30px;border-radius:9px;background:#E08B0B;display:grid;place-items:center;color:#fff}
.flow-app b{display:block;font-size:13px;font-weight:600;line-height:1.2} .flow-app small{display:block;font-size:11px;opacity:.75;line-height:1.2}
.flow-app-go{margin-left:auto;font-size:13px;opacity:.8}
/* Tegels zelf samenstellen */
.tb-bar{display:flex;justify-content:flex-end;margin:-8px 0 4px} .tb-bar.tb-top{margin-top:-18px}
.tb-bar .btn{font-size:12px;padding:4px 10px;color:var(--muted)}
.dash-tiles.tb-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
@media (max-width:640px){.dash-tiles.tb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Taken: tegels per medewerker; taak slepen naar een persoon = toewijzen */
.who-h{margin:18px 0 8px;font-size:14px} .who-h .muted{font-weight:400}
tr.drag-task{cursor:grab} tr.drag-task.dragging{opacity:.45}
.drag-on .who-tiles .mini{outline:2px dashed color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:2px}
.who-tiles .mini.drop{outline:2px solid var(--brand)!important;transform:scale(1.03);background:color-mix(in srgb,var(--brand) 8%,var(--card))}
select.asg{min-width:130px;padding:5px 8px;font-size:13px}
/* 14-10-2026 (verzoek Jason): alle tegels compacter — kleiner icoon, minder hoogte, kleinere cijfers */
:is(.dash-tiles,.kpis) .mini{gap:8px;padding:12px 14px;border-radius:16px;min-height:0}
:is(.dash-tiles,.kpis) .mini-ic{width:32px;height:32px;border-radius:10px}
:is(.dash-tiles,.kpis) .mini-ic svg{width:16px;height:16px}
:is(.dash-tiles,.kpis) .mini-l{font-size:12.5px}
:is(.dash-tiles,.kpis) .mini b{font-size:26px}
:is(.dash-tiles,.kpis) .mini b.long{font-size:20px}
:is(.dash-tiles,.kpis) .mini-s{font-size:11.5px}
:is(.dash-tiles,.kpis) .mini-go{top:12px;right:12px;width:24px;height:24px}
.dash-tiles{gap:10px;margin-bottom:18px}
.dash-tiles.st-filter{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.dash-tiles.st-filter .mini{min-height:0}
.dash-tiles.st-filter .mini-ring{top:10px;right:10px;width:32px;height:32px}
.dash-tiles.st-filter .mini-ring em{width:24px;height:24px;font-size:8.5px}
@media (max-width:640px){:is(.dash-tiles,.kpis) .mini{min-height:0;padding:11px 12px} :is(.dash-tiles,.kpis) .mini b{font-size:22px}}

/* Inkooptarief ISCM als voorstel bij de inkoopkosten van een container */
.cost-rate{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 10px;margin:8px 0;border-radius:10px;background:color-mix(in srgb,var(--brand) 6%,var(--surface));border:1px solid var(--line)}
.cost-rate>small{flex-basis:100%}
/* Loslijst: boeking op één regel (verzoek Jason 15-10-2026; overzichtelijk bij 60 boekingen) */
.ul-tbl td.ul-bkc{white-space:nowrap;width:auto;max-width:none;vertical-align:middle}
.ul-tbl td.ul-bkc .ul-wh{display:inline;margin-left:6px}
.ul-tbl td.ul-bkc .ul-ok{margin:0 0 0 8px;vertical-align:middle}
/* Lossen met de handscanner (TC21) + pallets (15-10-2026) */
.ul-scan{position:sticky;top:0;z-index:6;padding:12px 14px;margin-bottom:12px;border:2px solid var(--acc,#004653)}
.ul-scan-top{display:flex;gap:8px;align-items:center}.ul-scan-in{flex:1;font-size:20px;height:48px;font-weight:600}
.ul-scan-msg{margin:10px 0 6px;font-size:16px;padding:8px 10px;border-radius:8px;background:var(--bg2,#f3f5f6)}
.ul-scan-msg.ok{background:color-mix(in srgb,var(--ok) 14%,transparent)}.ul-scan-msg.warn{background:color-mix(in srgb,#f59e0b 18%,transparent)}.ul-scan-msg.bad{background:color-mix(in srgb,var(--bad) 15%,transparent);font-weight:600}
.ul-pal{border-top:1px solid var(--line);padding-top:8px;margin-top:6px}.ul-pal-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:15px}
.ul-pal-h .ul-dest{font-size:10px;padding:2px 6px;border-radius:5px;color:#fff;margin:0}.ul-pal-n{font-size:15px}
.ul-pal .toolbar{margin-top:8px}.ul-pal .toolbar .btn{min-height:44px;font-size:15px}.ul-prn{margin-top:6px}
.ul-tbl td.ul-bkc .ul-pl{margin-left:6px;padding:1px 7px;font-size:11.5px;vertical-align:middle}
@media print{.ul-scan,#ul-scan-on,.ul-pl{display:none!important}}
@media (max-width:600px){.ul-scan{top:56px}.ul-scan-in{font-size:18px}}

/* Compacte tabel (Inklaring → Pre-inklaringscheck): één regel per rij, bevindingen afgekapt (volledig in de tooltip) */
.tbl-compact td { padding-top: 6px; padding-bottom: 6px; font-size: 13px; white-space: nowrap; }
.tbl-compact th { padding-top: 7px; padding-bottom: 7px; font-size: 12px; }
.tbl-compact .pill { font-size: 11px; padding: 1px 8px; }
.tbl-compact .pre-f { display: inline-block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
@media (max-width: 600px) { .tbl-compact td { white-space: normal; } .tbl-compact .pre-f { max-width: none; } }
.kpis .mini.on, .kpis [data-urg].on { outline: 2px solid var(--bad); outline-offset: 1px; }
/* Retourportaal klant (17-10-2026): foto's van de consument + beoordelen */
.rp-photos{display:flex;flex-wrap:wrap;gap:8px}
.rp-ph{display:flex;align-items:center;justify-content:center;width:110px;height:110px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.rp-ph img{width:100%;height:100%;object-fit:cover}
/* 23-10-2026: foto met productnaam eronder (verplichte foto per product) */
.rp-phw{display:flex;flex-direction:column;gap:2px;width:110px}
.rp-phw .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-decide{margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.rp-decide h3{margin:0 0 4px}
.rp-time{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}.rp-time li{display:flex;justify-content:space-between;gap:12px;padding:6px 0 6px 12px;position:relative}.rp-time li::before{content:"";position:absolute;left:-6px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--line)}
/* Kostprijs per stuk (landed-ui.js) */
.lc-tbl th.num{text-align:right}
.lc-tbl td{white-space:normal}
.lc-tbl tr.tot td{border-top:2px solid var(--line-2,var(--line))}
.row-inline{display:flex;gap:8px;align-items:center}.row-inline .inp{flex:1}
.lc-tbl td.num{white-space:nowrap;vertical-align:top}.lc-tbl td small.muted{display:block;margin-top:2px}
/* Inkooporders (18-10-2026) */
.po-pick{display:grid;gap:8px}
.po-pick .po-sup{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;height:auto;padding:10px 14px;width:100%}
.po-tbl td{vertical-align:top}.po-tbl td .inp{min-width:0}.po-tbl td>.inp+small{display:block;margin:3px 0}
.po-tbl input[data-f=note]{font-size:12px;padding:4px 8px;margin-top:2px}
.po-tbl tfoot th{border-top:2px solid var(--line);text-align:left}.po-tbl tfoot th.num{text-align:right}
.po-tbl th.num{text-align:right}
.po-tbl input[readonly]{background:transparent;border-color:transparent;box-shadow:none}
@media (max-width:600px){.po-tbl thead{display:none}.po-tbl tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:10px 0;border-top:1px solid var(--line)}
  .po-tbl tbody td{display:block;border:0;padding:0}.po-tbl tbody td:first-child{grid-column:1/-1}.po-tbl tbody td[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--muted)}
  .po-tbl tbody td.num{text-align:left}.po-tbl tbody td .inp{width:100%!important}.po-tbl tfoot tr{display:flex;flex-wrap:wrap;gap:12px}.po-tbl tfoot th:empty{display:none}}
/* Verkoopanalyse (18-10-2026): mini-chart.js */
.mc{position:relative;overflow:hidden}.mc svg{display:block}
.mc-grid{stroke:var(--line);stroke-width:1}.mc-base{stroke:var(--line-2);stroke-width:1}
.mc-ax{fill:var(--muted);font-size:11px;font-family:var(--font)}.mc-val{fill:var(--fg);font-size:11px;font-weight:600;font-family:var(--font)}
.mc-b path{fill:var(--sea)}.mc-b.dim path{opacity:.35}.mc-b.sel path{fill:var(--orange,#E08B0B)}.mc-b.ghost path{fill:url(#mc-hatch);stroke:var(--sea);stroke-width:1;stroke-dasharray:3 2}
.mc-hatch-bg{fill:color-mix(in srgb,var(--sea) 14%,transparent)}.mc-hatch-ln{stroke:var(--sea);stroke-width:2}
.mc-hit{fill:transparent}.mc-b.on .mc-hit{fill:color-mix(in srgb,var(--fg) 5%,transparent)}
.mc-tip{position:absolute;top:0;background:var(--surface);color:var(--fg);border:1px solid var(--line-2);border-radius:8px;padding:4px 8px;font-size:12px;box-shadow:var(--shadow);pointer-events:none;white-space:nowrap}
.spark polyline{stroke:var(--sea)}.spark circle{fill:var(--sea)}
.lg-ghost{display:inline-block;width:12px;height:10px;border:1px dashed var(--sea);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--sea) 40%,transparent) 0 2px,transparent 2px 5px);vertical-align:-1px}
.an-adv{margin:0 0 12px;padding-left:18px;line-height:1.6}

/* Analyse · per product per maand */
.an-grid td,.an-grid th{white-space:nowrap}.an-grid td:first-child{white-space:normal;min-width:220px;max-width:340px}
.an-top{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.an-top-m{border:1px solid var(--line);border-radius:10px;padding:10px 12px}.an-top-m ol{margin:6px 0 0;padding-left:18px}
.an-top-m li{display:flex;justify-content:space-between;gap:8px;font-size:13px}.an-top-m li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-title{display:inline-block;max-width:min(380px,36vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.an-grid .an-title{max-width:300px}
@media (max-width:600px){.an-title{max-width:100%;white-space:normal}}
/* Tegels slepen */
.statgrid>.mini[draggable=true]{cursor:grab}.statgrid>.mini.tb-dragging{opacity:.45;outline:2px dashed var(--sea);outline-offset:2px}
/* Analyse compact (18-10, verzoek Jason: 'compacter, zodat het op één scherm valt') */
#an-tbl .tbl td,#an-tbl .tbl th{padding:5px 10px;vertical-align:middle}#an-tbl .tbl td{line-height:1.25}
.an-prod{display:flex;align-items:center;gap:6px;min-width:0}.an-prod .pill{flex:none;font-size:11px;padding:1px 7px}
.an-meta{font-size:11px;display:block}
.an-abc{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:11px;font-weight:700;background:var(--line);color:var(--fg)}
.an-abc-A{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}.an-abc-B{background:color-mix(in srgb,var(--sea) 15%,transparent);color:var(--sea)}
/* Tarieven op het klantdashboard als prijskaartjes */
.rates{display:grid;gap:14px;margin-top:12px}.rate-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px;display:flex;gap:6px;align-items:center}
.rate-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.rate{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;background:color-mix(in srgb,var(--sea) 4%,transparent)}
.rate-l{font-size:12px;color:var(--muted);white-space:nowrap}.rate-p{font-size:20px;line-height:1.2;white-space:nowrap}
.rate-d{display:block;color:var(--muted);font-size:11px;margin-top:4px}.rate .rate-d{margin-top:0}
.an-ch-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.an-ch-tools .inp{width:260px;max-width:60vw}

/* Cockpit klant (18-10-2026) */
.ck-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0 0 14px}
.ck-top>:last-child{justify-self:end}
.ck-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:1px}.ck-dot.old{background:var(--warn)}
.ck-day{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 10px}
.ck-day>div{display:flex;flex-direction:column;min-width:150px;text-align:center}.ck-day small{text-transform:capitalize}
.ck-bar{position:relative;height:8px;border-radius:4px;background:var(--line)}
.ck-bar i{position:absolute;left:0;top:0;height:8px;border-radius:4px;background:var(--brand)}.ck-bar i.op{top:auto;bottom:-6px;height:3px;background:var(--warn)}
.ck-sw{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--brand);margin:0 4px 0 8px;vertical-align:-1px}.ck-sw.op{background:var(--warn)}
.ck-share{display:flex;flex-wrap:wrap;gap:6px}.ck-share span{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:13px}
.ck-legend{margin-bottom:4px}
@media (max-width:700px){.ck-top{grid-template-columns:1fr}.ck-top>:last-child{justify-self:start}}
.ck-rp{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 12px}.ck-rp>div{display:flex;flex-direction:column}.ck-rp b{font-size:22px;line-height:1.1}
.fb-btn{display:inline-flex;align-items:center;gap:6px} @media (max-width:600px){.fb-btn span{display:none}}
@media (max-width:420px){.top{gap:8px}.top .top-logo .logo-sub{display:none}.fb-btn{padding:6px 8px}}
/* Bijzondere afleveradressen in de loslijst (20-10-2026): LVB bol / fulfilmentcenter met max. palleshoogte */
.ul-site{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:7px;margin:0 8px 0 0;vertical-align:middle;color:#fff;background:#7c3aed}
.ul-site-lvb{background:#0057b8}.ul-site-fc{background:#b45309}
@media print{.ul-site{border:2px solid #000;color:#000!important;background:none!important}}
.ul-site-note{display:block;margin-top:4px;padding:4px 8px;border-radius:6px;background:var(--warn-soft);color:var(--ink);font-size:12px;line-height:1.35;white-space:normal}
@media print{.ul-site-note{border:1px solid #000;background:none}}
/* Vervoerders & zendingen (22-10-2026): balkje bij % geleverd binnen 48 uur */
.cp-bar{display:block;height:4px;border-radius:2px;background:var(--line);margin-top:3px;min-width:60px}
.cp-bar i{display:block;height:100%;border-radius:2px}
.cp-tbl td.cp-48{min-width:80px}
/* Algemeen zoekveld in de bovenbalk (22-10-2026) */
.gs{position:relative;flex:0 1 420px;min-width:160px}
.gs input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px}
.gs input:focus{outline:2px solid color-mix(in srgb,var(--brand) 40%,transparent);outline-offset:0}
.gs-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex}
.gs-box{position:absolute;left:0;right:0;top:calc(100% + 6px);min-width:min(520px,92vw);max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:30}
.gs-g{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:8px 10px 4px}
.gs-it{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--fg);padding:7px 10px;border-radius:8px;cursor:pointer;font:inherit}
.gs-it b{display:block;font-weight:600;font-size:14px}.gs-it small{display:block;color:var(--muted);font-size:12px}
.gs-it.on,.gs-it:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
.gs-msg{margin:8px 10px;color:var(--muted);font-size:13px}
.cp-search .card-b{padding-top:14px;padding-bottom:14px}
@media (max-width:700px){.gs{flex:1 1 auto;min-width:0}.gs input{padding-left:30px}}
/* Resultaat per maand (pnl-ui.js) */
.pnl-legend{display:flex;gap:16px;margin:0 0 6px;color:var(--muted)} .pnl-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.pnl-legend i.ln{height:2px;width:16px;background:var(--fg);border-radius:0;vertical-align:3px}
.pnl-tbl td,.pnl-tbl th{white-space:nowrap} .pnl-tbl td:first-child{white-space:normal;min-width:220px}
.pnl-tbl .pnl-low{background:var(--warn-soft);color:var(--warn);font-weight:600} .pnl-tbl .pnl-high{background:var(--bad-soft);color:var(--bad);font-weight:600}
.pnl-tbl .pnl-tot td{border-top:2px solid var(--line-2)} .pnl-tbl .pnl-acc td{background:var(--raised)}

/* Productinformatie (PIM) · 26-10-2026 */
.pim-th{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:var(--chip);display:block}
.pim-noimg{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:8px;background:var(--chip);color:var(--muted)}
.pim-langs{display:inline-flex;gap:3px}
.pim-lang{display:inline-block;font-size:10px;font-weight:700;padding:1px 5px;border-radius:5px;background:var(--chip);color:var(--muted);border:1px solid var(--line)}
.pim-lang.full{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,var(--line))}
.pim-lang.part{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,var(--line))}
.pim-bar{display:inline-block;width:80px;height:7px;border-radius:4px;background:var(--chip);vertical-align:middle;margin-right:6px;overflow:hidden}
.pim-bar i{display:block;height:100%;background:var(--bc)}
.pim-tabs{margin-bottom:14px}
.pim-langtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pim-langtabs button{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:9px;padding:5px 10px;cursor:pointer;font:inherit;font-size:13px;display:inline-flex;gap:6px;align-items:center}
.pim-langtabs button.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,var(--surface))}
.pim-bl{margin-bottom:6px}
.pim-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.pim-img{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.pim-img.main{border-color:var(--ok)}
.pim-img img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;display:block}
.pim-img-b{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:6px;flex-wrap:wrap}
.pim-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;border:2px dashed var(--line-2);border-radius:12px;cursor:pointer;color:var(--muted);font-weight:600}
.pim-add:hover{border-color:var(--brand);color:var(--fg)}
.pim-add svg{width:22px;height:22px}
.pim-attr{display:grid;grid-template-columns:1fr 2fr auto;gap:6px;margin-bottom:6px}
.pim-chk{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pim-ch{margin:0}
.pim-ch ul{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.8}
.pim-ch li.miss{color:var(--muted)}
.pim-ch li.ok{color:var(--ok)}
@media (max-width:600px){.pim-attr{grid-template-columns:1fr}}
/* Returnflow retourscherm (26-10-2026) */
.rd-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 12px}
.rd-top h1{font-size:22px}
.rd-nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.rd-tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.rd-tag button{border:0;background:none;padding:0 0 0 2px;cursor:pointer;color:inherit;font-size:13px;line-height:1}
.rd-taginp{width:180px;padding:4px 8px;font-size:13px}
.rd-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;align-items:start}
.rd-main,.rd-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.rd-main .card,.rd-side .card{margin:0}
.rd-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 16px}
.rd-items td{vertical-align:top}
.rd-n{display:inline-block;min-width:34px;padding:3px 8px;border:1px solid var(--line);border-radius:8px;text-align:center;font-weight:600;background:var(--bg)}
.rd-n small{font-weight:400;opacity:.6}
.rd-n.ok{border-color:var(--ok);color:var(--ok)}
.rd-ov{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rd-ov>div{display:flex;flex-direction:column;gap:2px}
.rd-bar{display:flex;height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:10px}
.rd-bar span{background:var(--ok)}
.rd-bar span.mid{background:var(--warn)}
.chat .msg.note{background:var(--warn-soft);border:1px solid var(--line);color:inherit;align-self:stretch;max-width:none}
@media (max-width:1000px){.rd-grid{grid-template-columns:1fr}}
/* PIM: AI-blok (26-10-2026) */
.pim-ai{border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin:0 0 6px;background:var(--raised)}
.pim-ai summary{cursor:pointer;font-weight:600;font-size:13.5px}
.pim-ai-b{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pim-ai-row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.pim-ai .chk{display:inline-flex;gap:4px;align-items:center;font-size:13px}

/* 26-10-2026 (verzoek Jason: 'minder lege witte vlakken, alles kan compacter'): dichtere opmaak op alle pagina's.
   Tegels: icoon naast de tekst i.p.v. erboven; kleinere koppen, marges en celpadding. */
main{padding-block:16px 36px;padding-inline:24px}
.banner{margin:10px 24px 0;padding:8px 12px}
h1{font-size:24px}
.head{margin-bottom:12px;gap:8px;align-items:center}
.head p{margin:2px 0 0;font-size:13.5px}
.eyebrow{font-size:12px;margin-bottom:0}
.card{margin-bottom:12px}
.card-h{padding:10px 14px 6px}
.card-b{padding:4px 14px 12px}
.card-h+.card-b{padding-top:2px}
.grid2{gap:12px}
.kpis,.dash-tiles{gap:8px;margin-bottom:12px}
th{padding:7px 12px}
td{padding:7px 12px}
td.empty{padding:20px 12px}
.seg button{padding:5px 10px}
.tb-bar{margin:-4px 0 2px} .tb-bar.tb-top{margin-top:-10px}
.tb-bar .btn{padding:2px 8px;box-shadow:none}
:is(.dash-tiles,.kpis) .mini{flex-direction:row;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px}
:is(.dash-tiles,.kpis) .mini-ic{width:30px;height:30px;border-radius:9px;margin-top:1px}
:is(.dash-tiles,.kpis) .mini-ic svg{width:15px;height:15px}
:is(.dash-tiles,.kpis) .mini-l{font-size:12px;-webkit-line-clamp:1}
:is(.dash-tiles,.kpis) .mini b{font-size:22px}
:is(.dash-tiles,.kpis) .mini b.long{font-size:18px}
:is(.dash-tiles,.kpis) .mini-s{font-size:11px;margin-top:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
:is(.dash-tiles,.kpis) .mini-go{top:8px;right:8px;width:22px;height:22px}
.dash-tiles.st-filter{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.dash-tiles.tb-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.dash-tiles.st-filter .mini-ring{top:8px;right:8px;width:28px;height:28px}
.dash-tiles.st-filter .mini-ring em{width:21px;height:21px;font-size:8px}
.ck-top{margin:0 0 10px}
@media (max-width:640px){main{padding-inline:12px} .banner{margin:8px 12px 0} :is(.dash-tiles,.kpis) .mini:first-child{flex-direction:row}}
:is(.dash-tiles,.kpis) .mini-l{-webkit-line-clamp:2}
.dash-tiles.st-filter .mini-l{padding-right:26px}
td{font-size:14px}
.inp{padding:6px 10px}
.btn{padding:7px 12px}
.card :is(.kpis,.dash-tiles) .mini{flex-direction:column;gap:6px}
/* Voorraadcontrole: lange productnamen afkappen zodat alle kolommen passen (27-10-2026) */
.sc-title{display:block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-cut{display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* Takenlijst compact (27-10-2026) */
.task-tbl td.wrap { white-space: normal; min-width: 280px; }
.task-tbl .task-name { font-weight: 600; }
.task-tbl td:first-child { width: 28px; }
.task-tbl .tk-done { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); background: transparent; color: transparent; font-weight: 700; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, color .2s; }
.task-tbl .tk-done:hover { border-color: var(--ok, #2e7d32); color: var(--ok, #2e7d32); }
.task-tbl .tk-done.on { background: var(--ok, #2e7d32); border-color: var(--ok, #2e7d32); color: #fff; }
.task-tbl .tk-done:focus-visible { outline: 2px solid var(--acc, #E08B0B); outline-offset: 2px; }
.task-tbl tr.tk-gone { opacity: 0; transition: opacity .4s; }
.task-tbl .asg { max-width: 170px; }

/* Cockpit-tabbladen (28-10-2026) */
.ck-perbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.ck-hm{display:grid;grid-template-columns:28px repeat(24,minmax(0,1fr));gap:2px;align-items:center;font-size:11px}
.ck-hm small{color:var(--muted);text-align:left}
.ck-hm i{display:block;height:16px;border-radius:3px;background:color-mix(in srgb,var(--air) calc(var(--a) * 100%),var(--chip))}
.ck-stack{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--line);gap:2px}
.ck-stack i{display:block;height:100%}

/* Leveringen met eigen transport compact (28-10-2026) */
.in-tbl .tbl-wrap{overflow-x:visible}
.in-tbl td{vertical-align:top;padding-top:8px;padding-bottom:8px}
.in-tbl td small{line-height:1.35}
.in-act{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:240px;margin-left:auto}
/* Customer service per team (29-10-2026) */
.cs-team { margin: 10px 12px 0; padding: 8px 10px; border-top: 1px solid var(--line); line-height: 1.4; }
.cs-team span { display: block; color: var(--nav-fg, inherit); font-weight: 600; }
.cs-team a { color: var(--muted, inherit); text-decoration: underline; }
/* ===== Calculator (29-10-2026, verzoek Jason: stijl zoals voorbeeld; eigen kleuren/tekeningen) ===== */
.cx{container-type:inline-size;--cx-acc:#E08B0B;--cx-acc-2:#c4570b;--cx-dark:#0f2a30;--cx-dark-2:#163a42;--cx-soft:var(--accent-soft)}
.cx-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.cx-mode{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:0;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;overflow:hidden;position:relative;color:var(--fg);font:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.cx-mode:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.cx-mode.on{border-color:var(--cx-acc-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--cx-acc) 22%,transparent)}
.cx-art{display:block;background:var(--cx-soft);color:#004653;height:118px}.cx-art svg{display:block;width:100%;height:100%}
.cx-mode-t{display:flex;flex-direction:column;gap:2px;padding:12px 48px 12px 16px}.cx-mode-t b{font-size:19px}.cx-mode.on .cx-mode-t b{color:var(--cx-acc-2)}.cx-mode-t small{color:var(--muted)}
.cx-radio{position:absolute;right:16px;bottom:18px;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface)}
.cx-mode.on .cx-radio{border-color:var(--cx-acc-2);background:radial-gradient(circle,#fff 0 4px,var(--cx-acc-2) 5px)}
.cx-compact .cx-mode{flex-direction:row;align-items:center}.cx-ic{display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;margin-left:8px;border-radius:10px;background:var(--cx-soft,#fdf1e4)}.cx-compact .cx-mode-t{padding:8px 10px 8px 8px;min-width:0}.cx-compact .cx-mode-t b{font-size:15px}.cx-compact .cx-radio{display:none}
.cx-grid{display:grid;gap:16px;grid-template-columns:1fr}
@container (min-width:860px){.cx-grid{grid-template-columns:minmax(0,1fr) minmax(320px,400px);align-items:start}.cx-side{position:sticky;top:12px}}
.cx-form{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px}
.cx-compact .cx-form{border:0;padding:0;background:none}
.cx-form .field{margin:0}.cx-row,.cx-row3{display:grid;gap:12px;grid-template-columns:1fr}
@container (min-width:520px){.cx-row{grid-template-columns:1fr 1fr}.cx-row3{grid-template-columns:repeat(3,1fr)}.cx-row-inco{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.cx-seg{display:flex;gap:4px;padding:4px;background:var(--chip);border-radius:12px}
.cx-seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:8px 10px;font:inherit;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.2;min-height:40px;justify-content:center}
.cx-seg button b{font-size:14px;color:var(--fg)}.cx-seg button small{font-size:11.5px;font-weight:600}
.cx-seg button.on{background:linear-gradient(135deg,var(--cx-acc),var(--cx-acc-2));color:#fff;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--cx-acc-2) 70%,transparent)}.cx-seg button.on b,.cx-seg button.on small{color:#fff}
.cx-seg-wide{background:none;padding:0;gap:10px}.cx-seg-wide button{border:1.5px solid var(--line);background:var(--surface);padding:12px;font-weight:700}
.cx-seg-wide button.on{background:var(--cx-soft);color:var(--cx-acc-2);border-color:var(--cx-acc-2);box-shadow:none}.cx-seg-wide button.on b{color:var(--cx-acc-2)}
.cx-note{margin:-4px 0 0;color:var(--muted);font-size:13px}
.cx-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.cx-tier{border:1.5px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;display:flex;flex-direction:column;gap:2px;background:var(--surface)}
.cx-tier small{color:var(--muted);font-weight:600}.cx-tier b{font-size:22px;letter-spacing:-.01em}
.cx-tier.on{border-color:var(--cx-acc-2);background:var(--cx-soft)}.cx-tier.on b,.cx-tier.on small:first-child{color:var(--cx-acc-2)}
.cx-prog{display:flex;gap:4px;margin-top:-2px}.cx-prog i{flex:1;height:7px;border-radius:9px;background:var(--chip);overflow:hidden}.cx-prog b{display:block;height:100%;background:var(--cx-acc-2);border-radius:9px}
.cx-hint{margin:-6px 0 0;text-align:right;color:var(--muted);font-size:13px}
.cx-boxes{border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--raised)}
.cx-boxes-h{display:flex;justify-content:space-between;align-items:center}
.cx-box{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface);position:relative;display:flex;flex-direction:column;gap:8px}
.cx-box-h{display:flex;align-items:center;gap:8px}.cx-no{width:24px;height:24px;border-radius:7px;background:#c9a46a;color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.cx-x{margin-left:auto;border:1px solid var(--line);background:var(--raised);border-radius:8px;width:28px;height:28px;cursor:pointer;color:var(--muted);font-size:16px}
.cx-box-g{display:grid;gap:10px;grid-template-columns:1fr}
@container (min-width:600px){.cx-box-g{grid-template-columns:minmax(80px,.8fr) minmax(0,2fr) minmax(90px,1fr)}}
.cx-dims{display:flex;align-items:center;gap:6px}.cx-dims .inp{min-width:0}.cx-dims span{color:var(--muted)}
.cx-chip{align-self:flex-end;font-size:12.5px;color:var(--muted);background:var(--chip);border-radius:20px;padding:3px 10px}
.cx-add{border:1.5px dashed color-mix(in srgb,var(--cx-acc-2) 45%,transparent);background:var(--cx-soft);color:var(--cx-acc-2);border-radius:12px;padding:11px;font:inherit;font-weight:700;cursor:pointer}
.cx-sumbox{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:var(--raised)}
.cx-sumbox div{display:flex;flex-direction:column}.cx-sumbox .r{text-align:right}.cx-sumbox small{color:var(--muted)}.cx-sumbox b{font-size:24px;letter-spacing:-.01em}.cx-acc{color:var(--cx-acc-2)}
.cx-inline{display:flex;gap:8px;align-items:center}.cx-inline .inp{max-width:120px}
.cx-side{display:flex;flex-direction:column;gap:14px}
.cx-dark{background:linear-gradient(180deg,var(--cx-dark-2),var(--cx-dark));color:#e9f1f2;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-lg)}
.cx-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--cx-acc)}.cx-gap{margin-top:6px}
.cx-dark .total{background:none;padding:0;margin:0;color:inherit;text-align:left;border:0}.cx-dark .total small{color:#a9c0c4;font-size:14px}.cx-dark .total div{font-size:38px;font-weight:800;letter-spacing:-.02em;color:#fff}
.cx-muted{margin:0;color:#a9c0c4}.cx-warn{background:rgb(224 139 11 / .15);border:1px solid rgb(224 139 11 / .4);border-radius:10px;padding:8px 10px;font-size:13px;color:#ffd9a3}
.cx-lines{border-top:1px solid rgb(255 255 255 / .1);padding-top:8px}.cx-lines summary{cursor:pointer;color:#a9c0c4;font-size:13px;font-weight:600}
.cx-line{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed rgb(255 255 255 / .08);font-size:14px}.cx-line span{display:flex;flex-direction:column}.cx-line small{color:#8fa8ad;font-size:11.5px}.cx-line b{white-space:nowrap;color:#fff}
.cx-lead{display:flex;gap:12px;align-items:center;background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .08);border-radius:14px;padding:12px}
.cx-lead div{display:flex;flex-direction:column}.cx-lead small{color:#a9c0c4;font-size:12px}.cx-lead b{font-size:22px;color:#fff}
.cx-lead-ic,.cx-dot{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--cx-acc),var(--cx-acc-2));box-shadow:0 0 0 4px rgb(224 139 11 / .18)}
.cx-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cx-steps li{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:start;position:relative;padding-bottom:14px}
.cx-steps li:not(:last-child)::before{content:"";position:absolute;left:18px;top:40px;bottom:2px;width:2px;background:rgb(224 139 11 / .45)}
.cx-dot{width:32px;height:32px;margin:3px}.cx-steps div{display:flex;flex-direction:column;padding-top:4px}.cx-steps b{color:#fff}.cx-steps small{color:#a9c0c4}
.cx-steps em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cx-acc);padding-top:7px}
.cx-cta{border:0;border-radius:14px;padding:14px 16px;font:inherit;font-size:16px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--cx-acc),var(--cx-acc-2));box-shadow:0 10px 24px -10px var(--cx-acc-2)}
.cx-cta:hover{filter:brightness(1.05)}.cx-cta:focus-visible{outline:3px solid #fff;outline-offset:2px}
.cx-foot{margin:0;color:#8fa8ad;font-size:12px;text-align:center}
.cx-pallet{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px}.cx-pallet p{margin:4px 0}.cx-pallet svg{display:block;width:100%;max-height:220px;margin:6px 0}
.cx-pstat{text-align:center;color:var(--muted);font-size:13px}.cx-pstat b{color:var(--fg)}
.cx-compact .cx-dark{padding:16px}.cx-compact .cx-dark .total div{font-size:30px}
.calc-page-hero{background:linear-gradient(180deg,var(--cx-soft,var(--accent-soft)),transparent);border-radius:20px;padding:22px 20px 8px;text-align:center;margin-bottom:8px}
.calc-page-hero h1{font-size:30px;margin:0 0 6px;letter-spacing:-.02em}.calc-page-hero p{margin:0 auto;max-width:620px;color:var(--muted)}
@media (max-width:600px){.cx-modes{grid-template-columns:1fr 1fr}.cx-art{height:84px}.cx-mode-t b{font-size:15px}.cx-tier b{font-size:18px}.cx-dark .total div{font-size:30px}}
/* Calculator-extra's (29-10-2026): kostprijs per stuk, Premium/Budget, advies, planner, CO₂, opslaan/PDF */
.cx-prod{margin-left:auto;max-width:380px;min-width:0;font-size:13px;padding:5px 8px}
.cx-acts{display:flex;gap:6px}.cx-acts button{flex:1;border:1px solid rgb(255 255 255 / .2);background:rgb(255 255 255 / .06);color:#fff;border-radius:10px;padding:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.cx-acts button:hover:not(:disabled){background:rgb(255 255 255 / .14)}.cx-acts button:disabled{opacity:.45;cursor:default}
.cx-more{margin-top:18px}.cx-more h2{font-size:18px;margin:0 0 10px}
.cx-more-grid{display:grid;gap:12px;grid-template-columns:1fr}
@container (min-width:860px){.cx-more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cx-mc-wide{grid-column:1/-1}}
@container (min-width:560px) and (max-width:859px){.cx-more-grid{grid-template-columns:1fr 1fr}.cx-mc-wide{grid-column:1/-1}}
.cx-mc{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;border-top:3px solid var(--cx-acc)}
.cx-mc h3{margin:0;font-size:15px}.cx-mc p{margin:0}.cx-mc .field{margin:0}.cx-small{font-size:12.5px;color:var(--muted)}
.cx-uc{overflow-x:auto}.cx-uc table{width:100%;border-collapse:collapse;font-size:13.5px}.cx-uc th,.cx-uc td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.cx-uc th{font-size:12px;color:var(--muted);font-weight:600}.cx-uc .r{text-align:right}
.cx-tips{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}.cx-tips .btn{margin-left:4px}
.cx-warn2{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:7px 10px;font-size:13px}.cx-bad{color:var(--bad);font-weight:600}
.cx-saved{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cx-sv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 12px;border-top:1px solid var(--line);align-items:center}.cx-sv:first-child{border-top:0}
.cx-sv>span.muted{grid-column:1}.cx-sv>b{grid-row:1;grid-column:2;text-align:right}.cx-sv-a{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
#cq-cmp{margin-top:12px}.cx-best{color:var(--ok)}
/* ===== Kennisbank (29-10-2026) — portaal en openbare pagina ===== */
.kb-hero{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius);padding:18px 20px;margin-bottom:12px;box-shadow:var(--shadow)}
.kb-hero h1{margin:0 0 4px;color:var(--nav-fg)}.kb-hero p{margin:0 0 12px;color:var(--muted)}
.kb-search .inp{width:100%;font-size:16px;padding:11px 14px}
.kb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kb-chip{border:1px solid var(--line-2);background:var(--surface);color:var(--fg);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.kb-chip.on{background:#004653;border-color:#004653;color:#fff}
.kb-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:16px}
.kb-tool{display:flex;gap:10px;align-items:center;text-align:left;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--fg);text-decoration:none;font:inherit;cursor:pointer;box-shadow:var(--shadow)}
.kb-tool:hover{border-color:#004653}.kb-tool span:last-child{display:flex;flex-direction:column}.kb-tool small{color:var(--muted)}
.kb-tool-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#e9f2f3;color:#004653}
.kb-evi-ic{background:var(--brand);color:#fff;font-weight:800}
.kb-sec{margin-bottom:18px}.kb-sec h2{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 8px;color:var(--nav-fg)}
.kb-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:#e9f2f3;color:#004653;font-size:14px}
.kb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.kb-card{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--fg);text-decoration:none}
.kb-card:hover{border-color:#004653;box-shadow:var(--shadow)}.kb-card b{color:var(--nav-fg)}.kb-card span{color:var(--muted);font-size:13px}
.kb-count,.kb-empty{color:var(--muted)}
.kb-page{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.kb-page{grid-template-columns:minmax(0,760px) 260px;align-items:start}.kb-rel{position:sticky;top:12px}}
.kb-art{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);min-width:0}
.kb-art h1{margin:0 0 6px;color:var(--nav-fg)}.kb-crumb{margin:0;color:var(--brand);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.kb-lead{font-size:16px;color:var(--muted);margin:0 0 12px}
.kb-toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}.kb-toc a{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;color:var(--fg);text-decoration:none}
.kb-body{line-height:1.6}.kb-body h3{margin:18px 0 6px;color:var(--nav-fg)}.kb-body ul,.kb-body ol{padding-left:22px}.kb-body li{margin:3px 0}
.kb-body code{background:var(--chip);padding:1px 5px;border-radius:5px;font-size:.92em}
.kb-tbl{overflow-x:auto;margin:10px 0}.kb-tbl table{border-collapse:collapse;width:100%;font-size:14px}.kb-tbl th,.kb-tbl td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}.kb-tbl th{background:var(--raised);font-weight:600}
.kb-tip{border-left:4px solid var(--brand);background:var(--accent-soft);padding:9px 12px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:12px 0}
.kb-fig{margin:12px 0}.kb-fig img{max-width:100%;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow)}.kb-fig figcaption{font-size:12.5px;color:var(--muted);margin-top:4px}
.kb-upd{color:var(--muted);font-size:12px;margin:14px 0 0}
.kb-rel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:6px}.kb-rel h3{margin:0 0 4px;font-size:14px}.kb-rel a{color:var(--fg);font-size:13.5px}
.kb-ask{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#004653;color:#fff;border-radius:var(--radius);padding:12px 16px}
@media (min-width:1000px){.kb-ask{grid-column:1}}
.kb-hs{display:flex;flex-direction:column;gap:10px;margin:8px 0}.kb-hsres{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.kb-hsc{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}.kb-hsc.first{border-color:#004653;box-shadow:inset 4px 0 0 var(--brand)}.kb-hsc p{margin:4px 0}
.kb-hsc-h{display:flex;align-items:center;gap:10px}.kb-code{font-family:var(--mono);font-size:18px;letter-spacing:.04em;color:var(--nav-fg)}
.kb-watch{color:var(--warn)}.kb-hsq{background:var(--raised);border-radius:var(--r-sm);padding:8px 12px}.kb-hsq ul{margin:4px 0 0;padding-left:20px}
.kb-ta{width:100%;font-family:var(--mono);font-size:13px;line-height:1.5}.kb-prev{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;max-height:60vh;overflow:auto}
/* openbare pagina */
.kbp{min-height:100vh;background:var(--bg)}.kbp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.kbp-top img{height:34px}.kbp-top nav{display:flex;gap:8px;align-items:center}.kbp-main{max-width:1120px;margin:0 auto;padding:18px 16px 40px}
.kbp-foot{text-align:center;color:var(--muted);font-size:13px;padding:20px}

/* Rondleiding (tour.js, 29-10-2026): ring om het element + uitlegkaart; telefoon = balk onderaan */
.w-hd-r{display:flex;gap:8px;align-items:center}
.tour-ring{position:fixed;z-index:9998;pointer-events:none;border-radius:12px;box-shadow:0 0 0 3px var(--brand),0 0 0 9999px rgba(0,30,36,.28);transition:top .2s,left .2s,width .2s,height .2s}
.tour-tip{position:fixed;z-index:9999;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:14px 16px 12px;font-size:14px;line-height:1.45}
.tour-tip::before{content:'';position:absolute;top:-7px;left:22px;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.tour-tip.tour-up::before{top:auto;bottom:-7px;transform:rotate(225deg)}
.tour-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.tour-n{font-size:12px;color:var(--muted);font-weight:600}
.tour-x{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.tour-t{display:block;font-size:15px;margin-bottom:2px;color:var(--accent)}
.tour-p{margin:0 0 10px}
.tour-f{display:flex;align-items:center;gap:8px}.tour-sp{flex:1}
.tour-wait{font-size:12px;color:var(--muted)}
.tour-tip.tour-sheet{left:12px!important;right:12px;bottom:12px;top:auto!important;width:auto!important}
.tour-tip.tour-sheet::before{display:none}
.tour-tip.tour-sheet.tour-sheet-top{top:12px!important;bottom:auto}
@media (prefers-reduced-motion:reduce){.tour-ring{transition:none}}

/* Inkoopfacturen (30-10-2026): factuur links, gegevens rechts */
.ap-ed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start}
.ap-prev{position:sticky;top:0;display:flex;flex-direction:column;gap:4px}
.ap-prev iframe,.ap-prev img{width:100%;height:72vh;border:1px solid var(--line);border-radius:8px;background:#fff;object-fit:contain}
.ap-lines td{padding:3px 4px;vertical-align:middle}.ap-lines .inp{min-width:0;width:100%}.ap-lines td:nth-child(2){width:110px}.ap-lines td:nth-child(3){width:130px}
.ap-sum{margin:8px 0;font-size:13px}.ok-t{color:var(--ok)}.bad-t{color:var(--bad)}
@media (max-width:900px){.ap-ed{grid-template-columns:1fr}.ap-prev iframe,.ap-prev img{height:50vh}}
.alert.ok{background:var(--ok-soft, color-mix(in srgb,var(--ok) 10%,transparent));border-color:color-mix(in srgb,var(--ok) 22%,transparent)}
.alert.bad{background:color-mix(in srgb,var(--bad) 8%,transparent);border-color:color-mix(in srgb,var(--bad) 22%,transparent)}
.ap-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px}
.ap-drop{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;padding:16px 18px;border:2px dashed color-mix(in srgb,var(--brand) 35%,var(--line));border-radius:12px;background:var(--surface);color:var(--fg);text-align:left;cursor:pointer;font:inherit}
.ap-drop:hover,.ap-dragging .ap-drop{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.ap-dragging{outline:3px dashed var(--brand);outline-offset:-6px;border-radius:12px}
.ap-drop .spinner{width:18px;height:18px}
.ap-page{min-height:70vh}

/* Takenpagina compact (31-10-2026, verzoek Jason 'minder wit, meer in elkaar schuiven'): tegels klein en op één rij, kop/zoeken/tabel dichter op elkaar */
.task-page .head{margin-bottom:8px}.task-page .head h1{font-size:22px;margin:0}
.task-page .tab-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:8px}
.task-page .dash-tiles.tab-tiles .mini{min-height:0;padding:7px 34px 7px 10px;gap:8px;align-items:center;border-radius:10px}
.task-page .tab-tiles .mini-t{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline}
.task-page .tab-tiles .mini-l{grid-column:1 / -1}
.task-page .tab-tiles .mini-s{margin:0;align-self:baseline}
.task-page .tab-tiles .mini-ic{width:26px;height:26px;border-radius:8px}
.task-page .tab-tiles .mini-ic svg{width:15px;height:15px}
.task-page .tab-tiles .mini-l{font-size:12px;line-height:1.2}
.task-page .tab-tiles .mini b{font-size:18px;line-height:1.15}
.task-page .tab-tiles .mini-s{font-size:11px;line-height:1.2}
.task-page .dash-tiles.st-filter .mini-ring{top:6px;right:6px;width:24px;height:24px}
.task-page .dash-tiles.st-filter .mini-ring em{width:18px;height:18px;font-size:7px}
.task-page .tb-bar{margin:-4px 0 2px}.task-page .tb-bar .btn{padding:2px 8px;font-size:11.5px}
.task-page .who-h{margin:6px 0 4px;font-size:12px;text-transform:none;letter-spacing:0}
.task-page .toolbar{margin:6px 0 8px}.task-page .toolbar .search{padding-top:6px;padding-bottom:6px}
.task-page .task-tbl td,.task-page .task-tbl th{padding-top:6px;padding-bottom:6px}
/* zoekveld: placeholder niet onder het vergrootglas (31-10-2026) */
.inp.search{padding-left:34px}
.task-page .who-h + .tb-bar{margin-top:-21px}.task-page .head + .tb-bar{margin-top:-8px}
.task-page .task-tbl .asg{padding-top:3px;padding-bottom:3px;min-height:0;height:auto;font-size:13px}
.task-page .task-tbl .btn.sm{padding:3px 9px;font-size:12px}

/* Banner bovenaan het klantdashboard (31-10-2026, verzoek Jason) */
.dash-banner{display:block;width:100%;max-width:980px;height:auto;border-radius:12px;margin:0 0 12px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.dash-strip{display:block;width:100%;height:auto;border-radius:12px;margin:0 0 10px}
.dash-strip-end{margin:16px 0 0}

/* Logo ISCM (China agent; 31-10-2026, verzoek Jason): in de agentomgeving onder ons logo en op Action required */
.agent-brand{display:flex;align-items:center;gap:10px;margin:2px 0 10px;padding:6px 10px;background:#fff;border:1px solid var(--line);border-radius:10px}
.agent-brand img{height:34px;width:auto}.agent-brand span{font-size:12px;color:#004653;font-weight:600}
.h-iscm{display:flex;align-items:center;gap:12px}.h-iscm img{height:34px;width:auto;background:#fff;border-radius:6px;padding:2px 4px}
.cust-brand{justify-content:center}.cust-brand img{height:46px;width:auto;max-width:100%}

/* Returnflow · Aan de slag (31-10-2026) */
.rf-prog{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}.rf-bar{flex:1;min-width:160px;height:8px;background:var(--line);border-radius:6px;overflow:hidden}.rf-bar span{display:block;height:100%;background:var(--ok)}
.rf-steps{list-style:none;margin:0;padding:0}.rf-steps li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.rf-n{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted)}
.rf-steps li.done .rf-n{background:var(--ok);border-color:var(--ok);color:#fff}.rf-steps li.next .rf-n{border-color:#E08B0B;color:#E08B0B}.rf-steps li.skip{opacity:.55}
.rf-url{margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.rf-url code{font-size:12px;background:var(--raised);padding:2px 6px;border-radius:6px}
@media (max-width:600px){.rf-steps li{grid-template-columns:30px 1fr}.rf-a{grid-column:2}}
/* Tarieven: Verkoop | Inkoop + leverancier kiezen (31-10-2026) */
.rate-hub{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.rate-hub .rh-sup{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;color:var(--muted)}.rate-hub .rh-sup select{min-width:300px;max-width:100%}
@media (max-width:600px){.rate-hub .rh-sup{width:100%}.rate-hub .rh-sup select{min-width:0;flex:1}.rate-hub .seg-sm{overflow-x:auto;max-width:100%}}

/* Links naar E-freight Flow per menugroep (31-10-2026) */
.nav-flow{margin:4px 0 6px;padding-top:4px;border-top:1px dashed var(--line)}
.nav-flow-h{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:2px 10px 2px 30px}
.nav-ext{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 10px 4px 30px;font-size:12px;color:var(--nav-fg,#004653);text-decoration:none;border-radius:8px}
.nav-ext:hover{background:var(--nav-sel,#eef2f4)} .nav-ext i{font-style:normal;color:#E08B0B;font-weight:700}
/* Voorraadcontrole: selectiebalk (31-10-2026) */
.sc-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px;padding:8px 12px;border-radius:10px;background:var(--chip)}

/* Opslagplekken: product per plek (31-10-2026) */
.sp-tbl .sp-prod{max-width:520px}
.sp-tbl .sp-prod>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
/* Winst per product, Verzendvergelijking, Inkoopkalender (01-11-2026; pages/profit.js) */
.pf-split{display:flex;gap:2px;height:30px;border-radius:8px;overflow:hidden;background:var(--surface)}
.pf-split span{display:block;min-width:3px}
.pf-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:13px}
.pf-legend span{display:inline-flex;align-items:center;gap:6px}.pf-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.pf-sigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin:0 0 14px}
.pf-sig{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;display:flex;flex-direction:column;gap:3px;font-size:14px;background:var(--surface)}
.pf-sig.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}.pf-sig.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.pf-fall{display:flex;flex-direction:column;gap:8px}
.pf-fr{display:grid;grid-template-columns:190px minmax(0,1fr) 90px;gap:12px;align-items:center;font-size:14px}
.pf-fb{position:relative;height:20px;background:var(--chip);border-radius:4px}.pf-fb i{position:absolute;top:0;bottom:0;border-radius:4px}
.pf-tot{border-top:2px solid var(--nav-fg);padding-top:10px;font-weight:700}
.pf-whatif{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:16px;padding:12px 14px;background:var(--chip);border-radius:var(--r-sm)}
.pf-whatif label{font-size:13px;font-weight:600}
.pf-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:14px}
.pf-route{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.pf-route.best{border:2px solid var(--ok)}
.pf-rh{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.pf-rh b{font-size:17px;display:block}.pf-rh small{display:block}
.pf-rl>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.pf-rl>div span{display:flex;flex-direction:column}.pf-rl small{font-size:12px}
.pf-rt{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto}.pf-rt b{font-size:26px;font-variant-numeric:tabular-nums}
.pf-ry{display:flex;justify-content:space-between}
.pf-save .card-b{display:flex;flex-direction:column;gap:4px;border-left:0}.pf-save b{font-size:18px;color:var(--nav-fg)}
.pf-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.pf-ul{margin:0;padding-left:18px;line-height:1.6;font-size:14px}
tr.pf-hl td{background:var(--warn-soft);font-weight:600}
.seg{display:inline-flex;gap:4px}
.ik-lg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px}.ik-lg span{display:inline-flex;align-items:center;gap:6px}
.ik-lg i{display:inline-block;width:14px;height:10px;border-radius:3px}
.ik-list{min-width:900px}
.ik-row{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;gap:16px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.ik-row>span:first-child{display:flex;flex-direction:column;gap:2px}
.ik-head{font-size:12px;font-weight:700;color:var(--muted);padding-top:8px;padding-bottom:6px}
.ik-axis{position:relative;height:18px}.ik-axis span{position:absolute;bottom:0;padding-left:5px;border-left:1px solid var(--line-2)}
.ik-g{position:relative;height:40px;background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/25% 100%;border-left:2px solid var(--fg)}
.ik-g i,.ik-lg i{position:absolute}.ik-lg i{position:static}
.ik-g i{top:6px;height:14px;border-radius:4px}
.ik-g .pr,.ik-g .tr{top:24px;height:10px}
.st{background:#cfe0e4}.pr{background:#8a94a6}.tr{background:#004653}.gap{background:repeating-linear-gradient(45deg,#f2b8b2 0 3px,#fde8e6 3px 6px)}
.ik-g .dl,.ik-lg .dl{background:var(--brand)}.ik-g .dl{top:2px;height:36px;width:3px;border-radius:2px}.ik-lg .dl{width:3px;height:14px}
.ik-adv{display:flex;flex-direction:column;gap:5px;align-items:flex-start}.ik-b{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:600px){.pf-fr{grid-template-columns:120px minmax(0,1fr) 76px}}
.pf-rl b,.pf-ry b{white-space:nowrap}
@media (max-width:700px){.ik-list{min-width:0}.ik-row{grid-template-columns:1fr;gap:8px}.ik-head>span:last-child{display:none}.ik-head>span:first-child{display:none}}
/* Inkoopkalender: zoeken + EAN (01-11-2026) */
.ik-q{max-width:260px;margin-left:auto;margin-right:12px}
.ik-ean{font-variant-numeric:tabular-nums}
@media (max-width:700px){.ik-q{max-width:none;width:100%;margin:8px 0 0}}
.ik-fb{padding:8px 14px;background:var(--bg2,#f4f6f8);border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.ik-fb[hidden]{display:none}
.dash-tiles .mini[data-ikf].on{outline:2px solid var(--sc);outline-offset:-2px}
.ik-abcf{max-width:170px;margin-left:auto}
.ik-abcf+.ik-q{margin-left:8px}
.ik-abc{display:inline-block;min-width:18px;padding:0 4px;border-radius:4px;font-size:11px;text-align:center;background:var(--line);color:var(--muted);vertical-align:1px}
.ik-abc-A{background:#e6f2ee;color:#0b6b4d}
@media (max-width:700px){.ik-abcf{max-width:none;width:100%;margin:8px 0 0}}
/* Inkoopkalender compacter (01-11-2026, verzoek Jason 'regels ook compacter maken') */
.ik-row{padding:6px 14px;gap:12px;grid-template-columns:240px minmax(0,1fr) 270px}
.ik-row>span:first-child{gap:0}.ik-row>span:first-child b{font-size:13.5px;line-height:1.3}.ik-row small{font-size:12px;line-height:1.35}
.ik-g{height:26px}.ik-g i{top:3px;height:9px}.ik-g .pr,.ik-g .tr{top:15px;height:7px}.ik-g .dl{top:1px;height:24px}
.ik-adv{flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px 8px}.ik-adv>small{flex-basis:100%}
.ik-adv .pill{font-size:11.5px;padding:1px 8px}.ik-b .btn.sm{padding:2px 9px;font-size:12px;min-height:0}
.ik-adv>.ik-b{order:0}.ik-adv>small{order:1}
/* Inkoopkalender: aankomst van wat onderweg is (boeking / inkooporder) — 01-11-2026 */
.ik-g .ar,.ik-lg .ar{background:var(--ok,#2e7d32)}.ik-g .ar{top:0!important;height:12px!important;width:12px;border-radius:50%!important;margin-left:-6px;border:2px solid #fff;box-shadow:0 0 0 1px var(--ok,#2e7d32)}.ik-lg .ar{width:10px;height:10px;border-radius:50%}
/* Verwachte groei (Analyse) — 01-11-2026 */
.gr-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}.gr-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;border:1px solid var(--line);border-radius:8px}
.gr-list li button{margin-left:auto}.gr-up{color:var(--ok)}.gr-down{color:var(--bad)}
.gr-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.gr-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mut,#667)}
.gr-form .inp{min-width:0}.gr-form #gr-pct{width:80px}.gr-pct{display:inline-flex;align-items:center;gap:4px}.gr-form #gr-ean{width:220px}.gr-form #gr-note{width:220px}
@media (max-width:600px){.gr-form label,.gr-form #gr-ean,.gr-form #gr-note{width:100%}}
/* Cashflowplanning klant — 01-11-2026 */
.cf-tbl td,.cf-tbl th{padding:7px 12px}.cf-tbl .num{text-align:right;white-space:nowrap}.cf-tbl tfoot th{border-top:2px solid var(--line)}
.cf-pos{color:var(--ok)}.cf-neg{color:var(--bad)}.cf-dep{display:inline-flex;align-items:center;gap:4px}.cf-dep input{width:72px}

/* 03-11-2026: velden ingevuld uit eerdere boekingen (productformulier) */
.inp.prefill { background: #fff8e6; }

/* 03-11-2026: knop Uitleg in de paginakop */
.head .pg-tour { white-space: nowrap; }

/* V-SEO (03-11-2026, verzoek Jason: Gratis SEO-onderzoek). Zoekwoorden als pillen, eigen producten als rijen. Alleen uiterlijk. */
.seo-terms{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.seo-term{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e3e8ea;border-radius:999px;padding:6px 12px;cursor:pointer;font-size:14px;color:#1a2b30}
.seo-term:hover{border-color:#0b6b7a;background:#f3f8f8}
.seo-term-t{font-weight:600}
.seo-prods{display:flex;flex-direction:column;gap:8px}
.seo-prod{display:grid;grid-template-columns:1fr 110px auto auto;align-items:center;gap:12px;background:#fff;border:1px solid #eceff2;border-radius:12px;padding:10px 12px}
.seo-prod-main b{display:block}
.seo-prod-spark{opacity:.9}
.seo-prod-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
@media(max-width:700px){.seo-prod{grid-template-columns:1fr auto;grid-auto-rows:min-content}.seo-prod-spark{display:none}.seo-prod-meta{align-items:flex-start;text-align:left}.seo-prod-act{grid-column:1/-1}}

/* 03-11-2026 Verzendvergelijking: eigen productkeuzelijst (alle producten van de klant; datalist toonde bij een ingevuld veld maar 1 optie) */
.vv-pick{position:relative;width:420px;max-width:100%}
.vv-pick .inp{width:100%;padding-right:34px}
.vv-arrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:16px;color:var(--muted,#6b7280);cursor:pointer;padding:4px 8px}
.vv-dd{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:50;max-height:380px;overflow:auto;background:var(--card,#fff);border:1px solid var(--line,#e2e8f0);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.vv-opt{padding:7px 12px;cursor:pointer;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid var(--line,#eef2f6)}
.vv-opt b{font-size:13px;font-weight:600}
.vv-opt small{font-size:11.5px;color:var(--muted,#6b7280)}
.vv-opt.on,.vv-opt:hover{background:var(--sel,#eef6f7)}
.vv-opt.cur b{color:var(--accent,#004653)}
.vv-more{padding:8px 12px}
/* 03-11-2026 Verzendvergelijking per order: per stuk eronder */
.pf-rt span small{display:block;font-size:11.5px;font-weight:400;margin-top:1px}

/* V-BENCH (04-11-2026, E-Freight Benchmark): kaarten per kerncijfer, positiebalk (vlak = middelste helft van de groep, stip = jouw plek), trajecten. */
.bm-rules{margin:2px 0 12px}
.bm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.bm-card{background:var(--card,#fff);border:1px solid var(--line,#e3e8ea);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.bm-card.kans{border-color:#E08B0B;box-shadow:inset 3px 0 0 #E08B0B}
.bm-card-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bm-t{font-weight:600;font-size:14px}
.bm-v{font-size:28px;font-weight:700;color:var(--accent,#004653);display:flex;align-items:center;gap:10px;line-height:1.1}
.bm-spark{opacity:.85}.bm-spark polyline{stroke:var(--accent,#004653)}.bm-spark circle{fill:var(--accent,#004653)}
.bm-cmp{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted,#5b6b70)}.bm-cmp b{color:var(--text,#1a2b30)}
.bm-bar{position:relative;height:8px;border-radius:999px;background:var(--line,#e8edef);margin-top:4px}
.bm-band{position:absolute;left:25%;width:50%;top:0;bottom:0;background:rgba(0,70,83,.18);border-radius:999px}
.bm-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--card,#fff);background:#5b6b70;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.bm-dot.ok{background:#1f8a4c}.bm-dot.warn{background:#E08B0B}.bm-dot.idle{background:#004653}
.bm-bar-l{display:flex;justify-content:space-between;margin-top:-4px}
.bm-none{margin:0}
.bm-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.bm-tr{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line,#eef2f4);cursor:pointer}
.bm-tr:last-child{border-bottom:0}.bm-tr:hover{background:var(--sel,#f3f8f8)}
.bm-tr-r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.bm-done summary{cursor:pointer;padding:8px 0}
.bm-steps{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 10px;flex-wrap:wrap}
.bm-steps li{flex:1;min-width:120px;font-size:12px;padding:6px 8px;border-radius:8px;background:var(--line,#eef2f4);color:var(--muted,#5b6b70)}
.bm-steps li.on{background:#fdf0dc;color:#7a4a00;font-weight:600}.bm-steps li.done{background:#e3f1ea;color:#1f6b3e}
.bm-h3{font-size:14px;margin:12px 0 4px}
.bm-adv-v{display:flex;gap:16px;margin:8px 0}.bm-adv-v span{display:flex;flex-direction:column;font-size:12px;color:var(--muted,#5b6b70)}.bm-adv-v b{font-size:20px;color:var(--accent,#004653)}
.bm-help{background:var(--sel,#f3f8f8);border-radius:12px;padding:12px;margin-top:12px}
.bm-act-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}.bm-act-row .inp{flex:1}
@media(max-width:600px){.bm-tr{flex-direction:column}.bm-tr-r{align-items:flex-start;text-align:left}.bm-v{font-size:24px}}

/* 04-11-2026: Returnflow uitleg per tabblad (rfInfo in returnflow-tour.js) */
.rf-info{display:flex;gap:10px;align-items:flex-start;background:#eef5f6;border:1px solid #cfe2e5;border-radius:10px;padding:10px 12px;margin:0 0 14px;color:#173b42;font-size:14px;line-height:1.45}
.rf-info-i{color:#004653;font-weight:700}.rf-info-t{flex:1}.rf-info-x{border:0;background:none;font-size:18px;line-height:1;color:#5c7479;cursor:pointer;padding:0 2px}
.rf-info.closed{background:none;border:0;padding:0;margin:0 0 10px}.rf-info .linklike{border:0;background:none;color:#004653;cursor:pointer;padding:0;font-size:13px}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .rf-info:not(.closed){background:#12313a;border-color:#22505a;color:#d9ecef}}
:root[data-theme=dark] .rf-info:not(.closed){background:#12313a;border-color:#22505a;color:#d9ecef}

/* 04-11-2026: klantlogo beheren (company-logo.js) */
.clogo{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.clogo-prev{background:#fff;border:1px solid var(--line,#e3e8ea);border-radius:8px;padding:6px 10px}
.clogo-prev img{display:block;max-height:46px;max-width:200px}.clogo-act{display:flex;gap:8px}
.cust-brand:empty{display:none}

/* 04-11-2026: Returnflow · verwerkte stukken met foto's (itemsDialog in pages/returns.js) */
.ri-lines{display:flex;flex-direction:column;gap:10px;max-height:65vh;overflow:auto}.ri-line{border:1px solid var(--line,#e3e8ea);border-radius:10px;padding:10px 12px}
.ri-line-h{margin-bottom:4px}
/* 05-11-2026: gebruikersmenu onder je initialen (snelle paginanavigatie, compatibiliteitsmodus, app-cache resetten) */
.um-wrap{position:relative;flex:none}.um-wrap .avatar{border:0;cursor:pointer;font-family:inherit}
.um{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:300px;max-width:calc(100vw - 24px);background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14);padding:6px}
.um-h{padding:8px 10px 10px;border-bottom:1px solid var(--line,#e3e8ea);margin-bottom:4px;display:flex;flex-direction:column;min-width:0}.um-h span{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.um-i{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;background:none;border:0;color:inherit;text-decoration:none;font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.um-i:hover{background:var(--soft,rgba(0,70,83,.06))}.um-t{justify-content:space-between}.um-t span{display:flex;flex-direction:column}.um-t small{color:var(--muted);font-size:11.5px}
.um-t input{width:18px;height:18px;flex:none;accent-color:#004653}
/* snelle paginanavigatie: oude versie van de pagina tot de verse er is */
#view>.stale{opacity:.55;pointer-events:none;filter:saturate(.6)}
/* compatibiliteitsmodus: geen animaties, overgangen, schaduwen of vervaging */
html.lite *,html.lite *::before,html.lite *::after{animation:none!important;transition:none!important;box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;scroll-behavior:auto!important}
html.lite #view>.stale{filter:none}
/* Vervoerders-API's (05-11-2026): kaarten per vervoerder */
.ca-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.ca-card{margin:0;display:flex;flex-direction:column;gap:4px}
.ca-card p{margin:0}
.ca-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ca-name{font-size:16px}
.ca-creds{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.ca-f{font-size:12px;padding:2px 8px;border-radius:10px;background:var(--bg2,#f1f4f6);color:var(--muted,#667)}
.ca-f.on{background:#e6f4ec;color:#1d6b3e}
.ca-notes{white-space:pre-wrap;color:var(--muted,#556)}
.ca-btns{margin-top:auto;padding-top:8px;flex-wrap:wrap;gap:6px}

/* 07-11-2026 (verzoek Jason 'incl. toeslagen bedragen meer in het midden'): Packs → Tarief per collo, kolommen NL/BE incl. toeslagen gecentreerd */
@media (min-width:601px){.pc-rates th:nth-child(5),.pc-rates td:nth-child(5),.pc-rates th:nth-child(7),.pc-rates td:nth-child(7){text-align:center!important}}
/* 07-11-2026: Pakketprijs op volume, NL en BE naast elkaar: advies vet in het midden, kolommen per land gescheiden */
@media (min-width:601px){.pp-adv th:nth-child(n+7),.pp-adv td:nth-child(n+7){text-align:center!important}.pp-adv th:nth-child(9),.pp-adv td:nth-child(9){border-left:2px solid var(--line,#e5e7eb)}.pp-adv th:nth-child(7),.pp-adv td:nth-child(7){border-left:2px solid var(--line,#e5e7eb)}}

/* 08-11-2026: fulfilment-items met slotje voor klanten zonder fulfilment (fulfil-promo.js) */
.nav-row.nav-lock a{opacity:.62}
.nav-row.nav-lock a:hover{opacity:1}

/* 09-11-2026 (Jason: offerte luchtvracht 'overzichtelijker, dikgedrukt voor de hoofdlijnen'): kop van de offerte in blokken met vette kop, hoofdvelden vet */
.aq-head .card-b { display: grid; gap: 14px; }
.aq-grp { border-left: 3px solid var(--brand, #E08B0B); padding: 2px 0 2px 12px; }
.aq-grp h3 { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--nav-fg, #004653); }
.aq-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 12px; align-items: end; }
.aq-row > label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted, #5b6b73); margin: 0; }
.aq-row > label.aq-wide { grid-column: span 2; }
.aq-head .aq-key, .aq-head #q-co { font-weight: 700; color: var(--fg, #1a2b33); }
.aq-head .aq-iata { text-transform: uppercase; letter-spacing: .05em; }
.aq-cw { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--nav-fg, #004653); }
@media (max-width: 600px) { .aq-row > label.aq-wide { grid-column: auto; } }
/* 09-11-2026: openbare luchtvrachtofferte (/offerte/<token>) met opties en 'Direct boeken' */
.qp{max-width:860px}.qp h1{margin:6px 0 14px}.qp-info{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.qp-info>div{display:flex;flex-direction:column;gap:2px}
.qp-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.qp-opt{display:flex;flex-direction:column;gap:4px;border:2px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer}
.qp-opt.on{border-color:var(--accent,#E08B0B);background:var(--surface)}.qp-opt.booked{border-color:var(--ok,#1a7f37)}.qp-opt input{position:absolute;opacity:0;pointer-events:none}
.qp-k{font-weight:800;font-size:15px}.qp-a{font-weight:600}.qp-t{margin-top:6px;font-size:15px}.qp .num{text-align:right;white-space:nowrap}
/* 09-11-2026: milestones luchtvrachtofferte (air-timeline.js) */
.aq-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.aq-tl li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 6px 0; position: relative; }
.aq-tl li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: -6px; border-left: 2px solid var(--line, #e3e7ea); }
.aq-tl-ic { width: 28px; height: 28px; border-radius: 50%; background: #eef4f5; display: grid; place-items: center; font-size: 14px; }
.aq-tl-next .aq-tl-ic { background: transparent; border: 2px dashed var(--line, #cfd6da); color: #9aa5ab; }
.aq-tl-agent_answer .aq-tl-ic, .aq-tl-iscm_answer .aq-tl-ic { background: #e6f4ea; }
.aq-tl-agent_review .aq-tl-ic { background: #fff4e0; }
/* 09-11-2026: bewaarde offerte-PDF's (air-quote-files.js) */
.aq-files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.aq-files li{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.aq-file{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line,#d8dee4);border-radius:8px;background:#fff;cursor:grab;font-weight:600;text-decoration:none}
.aq-file:active{cursor:grabbing}

/* 10-11-2026 (Jason: 'te onoverzichtelijk'): luchtvrachtofferte in drie stappen; uitleg ingeklapt; regels per groep; samenvatting als balk */
.aq-step .card-h { gap: 10px; flex-wrap: wrap; }
.aq-step .card-h h2 { display: flex; align-items: center; gap: 10px; }
.aq-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nav-fg, #004653); color: #fff; font-size: 13px; font-weight: 800; flex: none; }
.aq-hint { margin: 0 0 8px; }
.aq-res { border-left: 3px solid var(--ok, #1f8a4c); background: #f3faf5; border-radius: 8px; padding: 10px 12px; }
.aq-res-v { font-size: 15px; font-weight: 700; color: var(--nav-fg, #004653); margin: 3px 0; }
.aq-more { margin-top: 8px; }
.aq-more > summary, .aq-notes > summary { cursor: pointer; font-size: 12.5px; color: var(--muted, #5b6b73); padding: 4px 0; }
.aq-more[open] > summary { margin-bottom: 6px; }
.aq-calc { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.aq-calc > label { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 12.5px; }
.aq-calc > label.chk { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; font-size: 13.5px; white-space: nowrap; }
.aq-calc #q-rate { min-width: 200px; }
.aq-calc #q-mg { width: 80px; }
.aq-notes { margin-top: 8px; }
.aq-notes > div { background: var(--soft, #f6f8f9); border-radius: 8px; padding: 8px 12px; margin-top: 4px; line-height: 1.6; }
#q-warn .alert { margin-top: 8px; }
.aq-lines .aq-gh td { background: var(--soft, #f3f6f7); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--nav-fg, #004653); padding-top: 6px; padding-bottom: 6px; }
.aq-lines .aq-zero input { color: var(--muted, #8a979d); background: #fbfbfb; }
.aq-lines .aq-tot td { border-top: 2px solid var(--line, #dfe5e8); }
.aq-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 10px; border: 1px solid var(--line, #dfe5e8); border-radius: 10px; overflow: hidden; }
.aq-sum > div { padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.aq-sum > div + div { border-left: 1px solid var(--line, #dfe5e8); }
.aq-sum span { font-size: 12px; color: var(--muted, #5b6b73); }
.aq-sum b { font-size: 18px; }
.aq-sum em { font-style: normal; font-size: 12px; color: var(--muted, #5b6b73); }
.aq-sum .ok b { color: var(--ok, #1f8a4c); } .aq-sum .bad b { color: var(--bad, #c0392b); }
.aq-bottom { margin-top: 0; }
@media (max-width: 600px) { .aq-sum { grid-template-columns: 1fr; } .aq-sum > div + div { border-left: 0; border-top: 1px solid var(--line, #dfe5e8); } }
/* 10-11-2026: valuta bij de inkoop in de luchtvrachtofferte */
.aq-lines .aq-cur { width: auto; min-width: 64px; padding-left: 6px; padding-right: 2px; margin-right: 4px; font-size: 12.5px; }
.aq-lines .aq-eur { font-size: 11.5px; color: var(--muted, #5b6b73); margin-top: 2px; }
.aq-lines .aq-eur span { opacity: .8; }
/* 11-11-2026: sleepvak tarief van de agent (luchtvrachtofferte stap 1) */
.aq-drop { margin: 0 0 10px; }
.aq-drop-z { border: 2px dashed var(--line, #d5dde2); border-radius: 10px; padding: 14px; text-align: center; font-size: 13.5px; background: var(--card, #fff); }
.aq-drop-z.on { border-color: #E08B0B; background: #fff6ea; }
.aq-drop textarea { width: 100%; margin: 4px 0 6px; }

/* 12-11-2026: Inkoopkalender-regel aanklikbaar (productkaart) */
.ik-row.ik-click{cursor:pointer}.ik-row.ik-click:hover{background:var(--soft,#f6f8f9)}
.sp-tbl .sp-ean>div{white-space:nowrap;line-height:1.35;font-variant-numeric:tabular-nums}
/* 12-11-2026 (Jason: offerte luchtvracht 'nog niet overzichtelijk genoeg, kan je iets met lichte kleuren?'): blokken Klant/Planning/Route/Zending als lichte gekleurde vakken met icoon; route Ophalen → Aflevering */
.aq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aq-grid > .aq-full { grid-column: 1 / -1; }
@media (max-width: 1100px) { .aq-grid { grid-template-columns: 1fr; } }
.aq-head .aq-grp { --aq-bg: #f3f7f8; --aq-bd: #d5e2e5; --aq-fg: #004653; border: 1px solid var(--aq-bd); border-left: 4px solid var(--aq-fg); background: var(--aq-bg); border-radius: 10px; padding: 10px 14px 12px; }
.aq-head .aq-grp h3 { display: flex; align-items: center; gap: 8px; color: var(--aq-fg); margin-bottom: 8px; }
.aq-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--aq-bd); font-size: 13px; letter-spacing: 0; }
.aq-c-klant { --aq-bg: #eef5fc !important; --aq-bd: #cfe0f2 !important; --aq-fg: #2a6496 !important; }
.aq-c-plan  { --aq-bg: #f5f1fb !important; --aq-bd: #e0d5f0 !important; --aq-fg: #6a4a9c !important; }
.aq-c-route { --aq-bg: #eef8f2 !important; --aq-bd: #cfe8d9 !important; --aq-fg: #237a4b !important; }
.aq-c-zend  { --aq-bg: #fdf5ea !important; --aq-bd: #f0dcc0 !important; --aq-fg: #a8620a !important; }
.aq-head .aq-grp .inp { background: #fff; }
.aq-route { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 10px; align-items: stretch; }
.aq-leg { background: #fff; border: 1px solid var(--aq-bd); border-radius: 8px; padding: 8px 10px 10px; }
.aq-leg-h { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--aq-fg); margin-bottom: 4px; }
.aq-leg .aq-row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.aq-arrow { display: grid; place-items: center; font-size: 22px; font-weight: 800; color: var(--aq-fg); }
@media (max-width: 800px) { .aq-route { grid-template-columns: 1fr; } .aq-arrow { transform: rotate(90deg); height: 20px; } }
.aq-c-zend .aq-cw { color: var(--aq-fg); }
.aq-c-zend .tbl-wrap { background: #fff; border-radius: 8px; }
.aq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.aq-grid > *, .aq-route > *, .aq-row > label { min-width: 0; }
.aq-route { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); }
.aq-c-klant .aq-row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 1100px) { .aq-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) { .aq-route { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .aq-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .aq-leg .aq-row, .aq-c-klant .aq-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .aq-head .aq-grp { padding: 8px 10px 10px; } }