:root{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#172033;background:#f5f7fa;font-synthesis:none;text-rendering:optimizeLegibility;
  --bg:#f5f7fa;--surface:#fff;--surface-2:#f8fafc;--ink:#172033;--muted:#5f6f86;--line:#e4e7ec;
  --accent:#1769e0;--accent-dark:#0f55bd;--accent-soft:#eaf2ff;--ok:#079455;--danger:#d92d20;
  --shadow:0 1px 2px rgba(16,24,40,.03);--radius:14px;
}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-width:320px;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}svg{flex:0 0 auto}h1,h2,h3,p{margin-top:0}code{font-family:"SFMono-Regular",Consolas,monospace;overflow-wrap:anywhere}
select:not([multiple]):not([size]){height:44px}
input,select,textarea{width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);padding:10px 12px;outline:none;font-size:16px;transition:border-color .15s,box-shadow .15s}textarea{resize:vertical;line-height:1.45}input:focus,select:focus,textarea:focus{border-color:#84adff;box-shadow:0 0 0 4px rgba(23,105,224,.1)}
button{min-height:44px;border-radius:10px;border:1px solid transparent;padding:9px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;color:inherit}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.primary:hover{background:var(--accent-dark)}.secondary{background:#fff;border-color:var(--line);color:var(--text-strong)}.secondary:hover{background:#f8fafc}.secondary.small{min-height:38px;padding:7px 10px;font-size:13px}.secondary.danger,.icon-button.danger{color:var(--danger)}.full{width:100%}.square,.icon-button,.secondary.icon{width:44px;padding:0}.icon-button{border:1px solid var(--line);background:#fff}.grow{min-width:0;flex:1}
.app-shell{min-height:100vh;min-height:100dvh}.topbar{height:72px;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 max(24px,calc((100vw - 1180px)/2));position:sticky;top:0;z-index:40}.brand{display:flex;align-items:center;gap:11px;min-width:0}.brand-mark{width:40px;height:40px;border-radius:12px;background:#172033;color:#fff;display:grid;place-items:center}.brand strong,.brand span{display:block}.brand strong{font-size:16px}.brand span{font-size:12px;color:var(--muted);margin-top:2px}.session-state{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;min-width:0}.session-state b{color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}.dot{width:9px;height:9px;border-radius:50%;background:#98a2b3;display:inline-block}.dot.live{background:var(--ok);box-shadow:0 0 0 4px rgba(7,148,85,.1)}
.desktop-tabs{height:54px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:center;gap:4px;padding:6px 20px;position:sticky;top:72px;z-index:35}.desktop-tabs button{min-height:40px;border:0;background:transparent;color:#667085;padding:8px 14px}.desktop-tabs button.active{background:#f2f4f7;color:#101828}.content{max-width:1760px;margin:0 auto;padding:28px 24px 90px}.bottom-tabs{display:none}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}.page-head h1{font-size:26px;line-height:1.15;margin-bottom:4px;letter-spacing:-.02em;font-weight:900}.page-head p{color:var(--muted);margin:0;max-width:700px;line-height:1.55}.search-field{display:flex;align-items:center;gap:8px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;padding:0 11px;min-height:46px}.search-field:focus-within{border-color:#84adff;box-shadow:0 0 0 4px rgba(23,105,224,.1)}.search-field svg{color:var(--muted);width:18px}.search-field input{border:0!important;box-shadow:none!important;background:transparent;padding:8px 2px;min-height:42px}
.scanner-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.75fr);gap:20px;align-items:start}.scanner-primary,.side-card,.data-card,.product-card,.manage-card,.summary-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.scanner-primary{padding:22px}.scanner-primary .page-head{margin-bottom:16px}.camera-button.stop{background:#fee4e2;color:#b42318}.scanner-status{font-size:13px;color:var(--muted);padding:10px 2px 4px}.scanner-side{display:flex;flex-direction:column;gap:14px}.eyebrow{font-size:11px;letter-spacing:.09em;font-weight:800;color:var(--muted)}.empty-mini{padding:12px;color:var(--muted);font-size:13px}.metric{margin-top:7px}.metric strong{font-size:34px;letter-spacing:-.03em}.metric span{color:var(--muted);margin-left:7px}.metric-row{display:flex;gap:14px;color:#667085;font-size:12px;margin-top:8px}.export-button{width:100%;background:#172033;color:#fff;border:0;box-shadow:var(--shadow)}
.data-card{overflow:hidden}.table-scroll{overflow:auto}.data-card table{width:100%;border-collapse:collapse;min-width:760px}.data-card th{background:#fff;color:var(--text-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}.data-card td{padding:8px 14px;height:48px;border-bottom:1px solid #eef2f7;font-size:13.5px;vertical-align:middle;font-variant-numeric:tabular-nums}.data-card th.num,.data-card td.num,.data-card th.numeric,.data-card td.numeric{text-align:right}.data-card tbody tr:last-child td{border-bottom:0}.data-card td strong,.data-card td small{display:block}.data-card td small{color:var(--muted);margin-top:3px}.data-card code{font-size:12px;color:#344054}.empty-state{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--muted);padding:34px 20px;text-align:center}.empty-state svg{width:22px}
.product-icon{width:40px;height:40px;border-radius:12px;background:#f2f4f7;display:grid;place-items:center;color:#475467}.card-actions .secondary:first-child{flex:1}
.session-strip{display:flex;gap:8px;overflow:auto;padding-bottom:8px;margin-bottom:12px}.session-strip button{min-width:220px;background:#fff;border:1px solid var(--line);justify-content:flex-start;text-align:left}.session-strip button.active{border-color:#84adff;background:var(--accent-soft)}.session-strip button div b,.session-strip button div small{display:block}.session-strip button div small{color:var(--muted);margin-top:3px}.summary-row{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:10px;align-items:center;padding:14px;margin-bottom:14px}.summary-row>div{padding:4px 8px}.summary-row span,.summary-row strong{display:block}.summary-row span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.summary-row strong{font-size:20px;margin-top:3px}
.manage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}.manage-card{padding:17px;display:flex;flex-direction:column;gap:9px}.manage-card>svg{width:24px;color:#475467}.manage-card h3{margin:0;font-size:17px}.manage-card p{margin:2px 0 0;color:var(--muted);font-size:13px}.manage-list{margin-top:5px;border-top:1px solid #f0f2f5}.manage-list>div{display:flex;justify-content:space-between;gap:9px;padding:9px 1px;border-bottom:1px solid #f0f2f5;font-size:12px}.manage-list>div:last-child{border-bottom:0}.manage-list small{color:var(--muted)}
.modal-backdrop{position:fixed;z-index:100;inset:0;background:rgba(15,23,42,.52);display:flex;align-items:center;justify-content:center;padding:18px}.modal-sheet{width:min(680px,100%);max-height:90vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 64px rgba(15,23,42,.22)}.modal-sheet.wide{width:min(920px,100%)}.modal-header{position:sticky;top:0;z-index:4;background:#fff;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}.modal-header h2{font-size:20px;margin:0}.modal-header p{font-size:13px;color:var(--muted);margin:4px 0 0}.modal-body{padding:0}.editor-form{padding:18px 20px}.editor-form label{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.editor-form label>span,.form-grid label>span{font-size:12px;font-weight:800;color:#475467}.editor-form label small,.form-grid label small{font-weight:500;color:var(--muted)}.form-grid{display:grid;gap:11px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:14px 0 0;margin-top:18px;display:flex;justify-content:flex-end;gap:8px}.subsection-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 10px}.subsection-heading>div{display:flex;align-items:center;gap:9px}.subsection-heading h3{font-size:16px;margin:0}.subsection-heading p{font-size:12px;color:var(--muted);margin:3px 0 0}.hint-box,.conversion-preview,.count-equation{background:#f8fafc;border:1px solid #eef1f4;border-radius:11px;padding:10px 11px;color:#475467;font-size:12px}.package-editor-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}.package-editor{border:1px solid var(--line);border-radius:15px;padding:13px}.package-editor-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.check-label{flex-direction:row!important;align-items:center!important;gap:8px!important;padding-top:21px}.check-label input{width:auto;min-height:auto}.conversion-preview{margin-top:2px}.form-error{background:#fff1f2;border:1px solid #fecdca;color:#b42318;border-radius:11px;padding:10px 12px;font-size:13px;margin-top:11px}.scanned-code-line{display:flex;justify-content:space-between;gap:12px;background:#f8fafc;border-radius:10px;padding:9px 10px;margin-bottom:12px;color:#667085;font-size:12px}.total-preview{background:#172033;color:#fff;border-radius:15px;padding:14px 15px;margin:10px 0 13px}.total-preview span,.total-preview strong,.total-preview small{display:block}.total-preview span{font-size:12px;color:#d0d5dd}.total-preview strong{font-size:25px;margin:4px 0}.total-preview small{color:#d0d5dd}.count-equation{margin-bottom:10px}
@media(max-width:900px){.scanner-layout{grid-template-columns:1fr}.scanner-side{display:grid;grid-template-columns:1fr 1fr}.scanner-side .export-button{grid-column:1/-1}.manage-grid{grid-template-columns:1fr 1fr}.manage-card:last-child{grid-column:1/-1}.summary-row{grid-template-columns:repeat(3,1fr)}.summary-row .primary{grid-column:1/-1}}
@media(max-width:720px){.topbar{height:64px;padding:0 14px}.brand span{display:none}.session-state b{max-width:130px}.desktop-tabs{display:none}.content{padding:18px 13px 92px}.bottom-tabs{position:fixed;z-index:60;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding:6px 5px calc(6px + env(safe-area-inset-bottom))}.bottom-tabs button{border:0;background:transparent;color:var(--muted);min-height:58px;padding:5px 2px;display:flex;flex-direction:column;gap:3px;font-size:11px}.bottom-tabs button.active{background:#f2f4f7;color:#172033}.page-head{align-items:stretch}.page-head h1{font-size:26px}.page-head>.primary,.page-head>.secondary{align-self:flex-start}.scanner-primary{padding:14px;border-radius:16px}.scanner-side{display:flex}.manage-grid{grid-template-columns:1fr}.manage-card:last-child{grid-column:auto}.summary-row{grid-template-columns:1fr 1fr}.summary-row>div:nth-child(3){grid-column:1/-1}.modal-backdrop{padding:0;align-items:flex-end}.modal-sheet,.modal-sheet.wide{width:100%;border-radius:20px 20px 0 0;max-height:93vh}.form-grid.two,.form-grid.three{grid-template-columns:1fr}.check-label{padding-top:0}.form-actions{bottom:0}.session-state>span:last-child{display:none}}
@media(max-width:430px){.content{padding-left:10px;padding-right:10px}.page-head{flex-direction:column}.scanner-primary{padding:12px}.summary-row{grid-template-columns:1fr 1fr}.metric-row{flex-direction:column;gap:3px}.modal-header,.editor-form{padding-left:15px;padding-right:15px}}

/* React centrale v5 additions */
.sync-chip{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:12px;font-weight:750;white-space:nowrap}.sync-chip.ok{background:#ecfdf3;color:#067647}.sync-chip.busy{background:#eff8ff;color:#175cd3}.sync-chip.offline{background:#fff6ed;color:#b54708}.sync-chip .sync-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.topbar-right{display:flex;align-items:center;gap:10px;min-width:0}.feedback-banner{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:13px;margin:12px 0;background:#ecfdf3;border:1px solid #abefc6;color:#067647}.feedback-banner.warn{background:#fff6ed;border-color:#fedf89;color:#b54708}.feedback-banner strong,.feedback-banner small{display:block}.feedback-banner small{margin-top:2px;opacity:.82}.quick-count{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:7px 0 12px}.quick-count button{min-height:40px;padding:6px 4px;background:#f8fafc;border:1px solid var(--line);font-size:13px}.quick-count button.plus{background:#ecfdf3;color:#067647;border-color:#abefc6}.quick-count button.minus{background:#fff1f3;color:#c01048;border-color:#fecdd6}.status-stack{display:flex;flex-direction:column;gap:8px}.camera-layer{position:fixed;inset:0;z-index:160;background:#020617;color:#fff}.camera-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.camera-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(2,6,23,.66),transparent 27%,transparent 68%,rgba(2,6,23,.78));pointer-events:none}.camera-top{position:absolute;z-index:2;top:0;left:0;right:0;padding:calc(14px + env(safe-area-inset-top)) 16px 10px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.camera-title strong,.camera-title small{display:block}.camera-title small{color:#cbd5e1;margin-top:3px}.camera-round{width:44px;height:44px;border-radius:50%;background:rgba(15,23,42,.62);border:1px solid rgba(255,255,255,.18);color:#fff;padding:0}.camera-frame{position:absolute;z-index:2;width:min(82vw,520px);aspect-ratio:1.6/1;left:50%;top:48%;transform:translate(-50%,-50%)}.camera-frame i{position:absolute;width:42px;height:42px;border-color:#fff;border-style:solid}.camera-frame i:nth-child(1){left:0;top:0;border-width:4px 0 0 4px;border-radius:12px 0 0}.camera-frame i:nth-child(2){right:0;top:0;border-width:4px 4px 0 0;border-radius:0 12px 0 0}.camera-frame i:nth-child(3){left:0;bottom:0;border-width:0 0 4px 4px;border-radius:0 0 0 12px}.camera-frame i:nth-child(4){right:0;bottom:0;border-width:0 4px 4px 0;border-radius:0 0 12px}.camera-laser{position:absolute;left:8%;right:8%;top:50%;height:2px;background:#ff4d4f;box-shadow:0 0 14px #ff4d4f}.camera-bottom-fixed{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:12px 16px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px}.camera-message{max-width:580px;text-align:center;background:rgba(15,23,42,.7);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:9px 12px;font-size:12px;color:#e2e8f0}.camera-controls{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.camera-controls button{background:rgba(15,23,42,.72);border:1px solid rgba(255,255,255,.2);color:#fff}.camera-controls button.light{background:#fff;color:#172033}.compact-product-form .advanced-fields{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}.section-toggle{width:100%;justify-content:space-between;background:#f8fafc;border:1px solid var(--line);margin:6px 0 10px}.default-note{font-size:11px;color:#667085;background:#f8fafc;border-radius:10px;padding:8px 10px;margin-bottom:11px}.package-line{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}.package-line-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px}.package-line-head strong{font-size:14px}.tiny{font-size:11px;color:#667085}.pending-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#fff6ed;color:#b54708;font-size:11px;font-weight:800}.toast-stack{position:fixed;z-index:220;right:14px;bottom:86px;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast-item{background:#172033;color:#fff;border-radius:12px;padding:10px 13px;box-shadow:0 12px 30px rgba(0,0,0,.2);font-size:13px;max-width:min(360px,calc(100vw - 28px));animation:toast-in .16s ease-out}.toast-item.ok{background:#067647}.toast-item.warn{background:#b54708}.toast-item.error{background:#b42318}@keyframes toast-in{from{transform:translateY(5px);opacity:0}to{transform:none;opacity:1}}.empty-inline{padding:16px;border:1px dashed #d0d5dd;border-radius:12px;color:#667085;text-align:center;font-size:13px}.location-chip-row{display:flex;gap:7px;overflow:auto;padding-bottom:4px}.location-chip-row button{white-space:nowrap;background:#fff;border:1px solid var(--line);min-height:38px;padding:7px 10px}.location-chip-row button.active{background:#172033;color:#fff;border-color:#172033}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #f0f2f5}.switch-row:last-child{border-bottom:0}.switch-row div strong,.switch-row div small{display:block}.switch-row div small{color:#667085;margin-top:2px}.switch-row input{width:22px;min-height:22px}.migration-note{background:#eff8ff;border:1px solid #b2ddff;color:#175cd3;border-radius:12px;padding:10px 12px;font-size:12px;margin-bottom:12px}
@media(max-width:720px){.topbar-right .session-state{display:none}.sync-chip{padding:6px 8px;font-size:11px}.quick-count{grid-template-columns:repeat(5,1fr)}.camera-frame{width:86vw;top:46%}.toast-stack{bottom:82px;right:10px;left:10px}.toast-item{max-width:none}.page-head{gap:10px}.scanner-primary,.side-card,.data-card,.manage-card,.summary-row{box-shadow:none}}
@media(max-width:720px){
  .content{padding-bottom:155px}
  .scanner-side{padding-bottom:22px}
  .scanner-side>.export-button,.scanner-side>.secondary.full{min-height:48px}
}
.form-actions{z-index:12;isolation:isolate}
@media(max-width:720px){.form-actions{bottom:-18px;padding:14px 0 4px}}
.server-hint{display:block;color:#667085;font-size:12px;line-height:1.35;margin:-4px 0 12px;word-break:break-all}

.stock-recalc-preview{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px;border:1px solid var(--border,#e4e7ec);border-radius:12px;background:#f8fafc;margin:10px 0 4px}.stock-recalc-preview>div{display:flex;flex-direction:column;gap:3px}.stock-recalc-preview span{font-size:12px;color:#667085}.stock-recalc-preview strong{font-size:16px;color:#101828}.stock-recalc-preview small{grid-column:1/-1;color:#667085}.stock-recalc-preview.changed{border-color:#f59e0b;background:#fffbeb}.stock-recalc-preview.changed strong{color:#92400e}@media(max-width:560px){.stock-recalc-preview{grid-template-columns:1fr}.stock-recalc-preview small{grid-column:1}}

/* v1.2.0 — tel-flow */
.count-context{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:15px;background:var(--soft);margin-bottom:4px}.count-context>div{display:flex;flex-direction:column;gap:3px;min-width:0}.count-context span{font-size:12px;color:var(--muted)}.count-context strong{font-size:16px;overflow-wrap:anywhere}.count-context small{grid-column:1/-1;color:var(--muted);line-height:1.35}.scan-context-code{font-size:12px;color:var(--muted);padding:0 2px;overflow-wrap:anywhere}@media(max-width:520px){.count-context{grid-template-columns:1fr}.count-context small{grid-column:1}}

/* v1.2.0 — slimme maandtelling */
.progress-track{height:8px;background:#e4e7ec;border-radius:999px;overflow:hidden}.progress-track>span{display:block;height:100%;min-width:0;background:var(--ok);border-radius:999px;transition:width .2s ease}.section-mini-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.section-mini-head>div strong,.section-mini-head>div small{display:block}.section-mini-head>div small{color:var(--muted);margin-top:2px;font-size:11px}.section-mini-head>span{font-size:11px;color:#667085;background:#f2f4f7;border-radius:999px;padding:4px 7px;white-space:nowrap}.blind-count strong{color:#175cd3}.count-context{background:var(--surface-2)}
.location-progress-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}.location-progress-card{display:block;text-align:left;background:#fff;border:1px solid var(--line);padding:12px;min-height:96px}.location-progress-card.active{border-color:#84adff;box-shadow:0 0 0 3px rgba(23,105,224,.08)}.location-progress-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}.location-progress-title strong{font-size:15px}.location-progress-title span{font-size:11px;color:#667085}.location-progress-card small{display:block;color:#667085;font-size:11px;margin-top:8px}.count-review-section{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px}.uncounted-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:300px;overflow:auto}.uncounted-grid button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:#fff;border:1px solid var(--line);padding:9px 10px;min-height:58px}.uncounted-grid button strong{font-size:12px}.uncounted-grid button span{font-size:11px;color:var(--muted);margin-top:3px}.all-complete-banner{padding:12px 14px;background:#ecfdf3;border:1px solid #abefc6;border-radius:12px;color:#067647;font-size:13px}.diff-ok{color:#067647;font-weight:800}.diff-warn{color:#b54708;font-weight:800}.count-summary{grid-template-columns:repeat(3,1fr) auto}
.quality-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}.quality-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.quality-head h2{font-size:20px;margin:3px 0 5px}.quality-head p{color:var(--muted);font-size:12px;margin:0}.version-badge{font-size:11px;font-weight:800;color:#344054;background:#f2f4f7;border-radius:999px;padding:6px 9px;white-space:nowrap}.quality-filters{display:flex;gap:7px;overflow:auto;padding:13px 0 10px}.quality-filters button{white-space:nowrap;min-height:36px;padding:6px 9px;background:#fff;border:1px solid var(--line);font-size:11px}.quality-filters button.active{background:#172033;color:#fff;border-color:#172033}.quality-filters button span{min-width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#f2f4f7;color:#475467;font-size:11px}.quality-filters button.active span{background:rgba(255,255,255,.16);color:#fff}.quality-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:330px;overflow:auto}.quality-list>button{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;background:#fff;border:1px solid var(--line);padding:9px 10px}.quality-list>button>div:first-child{min-width:0}.quality-list strong,.quality-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quality-list strong{font-size:12px}.quality-list small{font-size:11px;color:var(--muted);margin-top:2px}.quality-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px}.quality-tags span{font-size:11px;color:#b54708;background:#fff6ed;border:1px solid #fedf89;border-radius:999px;padding:3px 5px;white-space:nowrap}
@media(max-width:900px){.location-progress-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.uncounted-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.location-progress-grid{grid-template-columns:1fr 1fr}.count-summary{grid-template-columns:1fr 1fr}.count-summary>div:nth-child(3){grid-column:auto}.quality-panel{box-shadow:none;padding:14px}.quality-list{grid-template-columns:1fr}.uncounted-grid{grid-template-columns:1fr}}
@media(max-width:430px){.location-progress-grid{grid-template-columns:1fr}.count-summary{grid-template-columns:1fr 1fr}.quality-head{flex-direction:column}.quality-filters{margin-left:-2px;margin-right:-2px}}

/* v1.3.0 — multi-code, pairing en systeemcontrole */
.code-editor-list{display:flex;flex-direction:column;gap:8px;margin:8px 0 14px}.code-line{display:grid;grid-template-columns:150px minmax(150px,1fr) minmax(150px,1fr) 44px;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff}.code-line select{height:40px}
.code-line input,.code-line select{min-height:40px}.code-empty-hint{color:var(--muted);font-size:12px;border:1px dashed #d0d5dd;border-radius:12px;padding:10px 12px}.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px auto 12px}.qr-svg{max-width:100%;height:auto;border:8px solid #fff;border-radius:10px;box-shadow:0 0 0 1px var(--line)}.qr-wrap small{font-size:11px;color:var(--muted);text-align:center}.qr-fallback{padding:14px;border:1px dashed #d0d5dd;border-radius:12px;color:var(--muted);font-size:12px;overflow-wrap:anywhere}.pair-url{display:block;text-align:center;font-size:11px;color:#475467;background:#f8fafc;padding:8px;border-radius:9px;margin-bottom:12px}.system-card.ok{border-color:#abefc6}.system-card.warn{border-color:#fedf89}.system-card.error{border-color:#fecdca}.system-check-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}.system-check-row{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:center;padding:7px 8px;border-radius:10px;background:#f8fafc}.system-check-row strong,.system-check-row small{display:block}.system-check-row strong{font-size:12px}.system-check-row small{font-size:11px;color:var(--muted);margin-top:2px}.system-check-dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900}.system-check-row.ok .system-check-dot{background:#dcfae6;color:#067647}.system-check-row.warn .system-check-dot{background:#fef0c7;color:#b54708}.system-check-row.error .system-check-dot{background:#fee4e2;color:#b42318}.review-badge{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}.review-badge.ok{background:#ecfdf3;color:#067647}.review-badge.warn{background:#fff6ed;color:#b54708}.count-summary{grid-template-columns:repeat(4,1fr) auto}
@media(max-width:720px){.code-line{grid-template-columns:1fr 1fr}.code-line input{grid-column:1/-1}.code-line .icon-button{justify-self:end}.count-summary{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.code-line{grid-template-columns:1fr}.code-line input{grid-column:auto}.code-line .icon-button{justify-self:stretch;width:100%}}

/* v1.3.0 — eenvoudige telefoonmodus */
.mobile-more-list{padding:12px 14px 18px;display:flex;flex-direction:column;gap:8px}.mobile-more-item{width:100%;display:grid;grid-template-columns:42px 1fr 20px;align-items:center;gap:10px;text-align:left;background:#fff;border:1px solid var(--line);padding:10px 11px}.mobile-more-item.active{border-color:#84adff;background:#f5f9ff}.mobile-more-icon{width:38px;height:38px;border-radius:11px;background:#f2f4f7;display:grid;place-items:center;color:#475467}.mobile-more-item strong,.mobile-more-item small{display:block}.mobile-more-item strong{font-size:14px}.mobile-more-item small{font-size:11px;color:var(--muted);margin-top:2px}.mobile-more-chevron{font-size:24px;color:var(--muted);line-height:1}
@media(max-width:720px){
  .bottom-tabs{grid-template-columns:repeat(3,1fr)}
  .scanner-side>.export-button{display:none}
  .scanner-side.idle .side-card{display:none}
  .scanner-side.idle{gap:8px;padding-bottom:10px}
  .scanner-side.idle>.secondary.full{margin-top:0}
  .scanner-primary .page-head p{font-size:13px;line-height:1.4}
}

/* v1.3.2 — mobile visual viewport hardening.
   iOS/Chromium can keep the layout viewport taller than the visible viewport
   after a software keyboard closes. Fixed controls must stay inside 100dvh. */
@media(max-width:720px){
  .bottom-tabs{
    bottom:0;
    bottom:max(0px,calc(100% - 100dvh));
  }
  .modal-backdrop,.camera-layer{
    bottom:auto;
    height:100vh;
    height:100dvh;
  }
}

/* v1.3.10 — mobile-first scanner UX */

.mobile-secondary-stack{display:flex;flex-direction:column;gap:12px}

.mobile-scanner-primary{padding:16px}
.mobile-scanner-primary .page-head{gap:10px;margin-bottom:12px}
.mobile-scanner-primary .page-head h1{font-size:22px;line-height:1.15}
.mobile-scanner-primary .page-head p{font-size:13px;line-height:1.4}
.mobile-scanner-primary .page-head>.primary{width:100%}
.mobile-scanner-primary .manual-row{margin-top:10px}
.mobile-scanner-primary .quick-results{margin-top:10px}

@media(max-width:720px){
  .app-shell{min-height:100dvh}
  .content{padding:12px 12px calc(104px + env(safe-area-inset-bottom,0px))}
  .topbar{height:58px;padding:0 10px;gap:10px}
  .brand{min-width:0;gap:10px}
  .brand-mark{width:34px;height:34px;border-radius:10px}
  .brand strong{font-size:15px}
  .brand span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:35vw}
  .topbar-right{gap:6px;min-width:0}
  .session-state{display:none}
  .sync-chip{max-width:48vw;overflow:hidden;white-space:nowrap}
  .sync-chip>span:nth-child(2){overflow:hidden;text-overflow:ellipsis}
  .mobile-scanner-primary,.side-card{border-radius:14px}
  .mobile-manual-row{grid-template-columns:minmax(0,1fr) 46px;align-items:stretch}
  .mobile-camera-box{height:clamp(220px,38dvh,320px);aspect-ratio:auto}
  .mobile-camera-box .camera-off{padding:16px}
  .mobile-camera-box .camera-off strong{font-size:16px}
  .mobile-camera-box .camera-off span{font-size:12px;max-width:260px}
  .mobile-camera-box .scan-frame{inset:18% 12%}
  .mobile-camera-box .camera-actions:not(:has(button)){display:none}
  .location-chip-row{padding-bottom:2px}
  .location-chip-row button{min-height:34px;padding:6px 9px;font-size:12px}
  .bottom-tabs{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .bottom-tabs button{min-height:58px;font-size:12px}
}
@media(max-width:430px){
  .mobile-camera-box{height:clamp(210px,34dvh,280px)}
  .scanner-primary{padding:14px}
  .page-head{align-items:flex-start}
}

/* v1.3.11 — iPhone width containment for dense location rows */
html,body,#root,.app-shell,.content,.mobile-scanner-page,.scanner-primary,.count-session-panel{min-width:0;max-width:100%}
html,body{overflow-x:hidden}
.scanner-layout,.mobile-scanner-page,.mobile-secondary-stack,.count-session-panel{min-width:0}

.location-chip-row{
  display:flex;
  flex-wrap:nowrap;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x;
}
.location-chip-row::-webkit-scrollbar{display:none}
.location-chip-row>button{flex:0 0 auto;max-width:none}
@media(max-width:720px){
  .scanner-primary,.count-session-panel,.mobile-scanner-page{width:100%}
  .location-chip-row{padding-right:8px}
}

/* v1.3.12 — telmodus per sessie + veilige multi-barcode workflow */
.barcode-link-box{border:1px solid #b2ddff;background:#f5faff;border-radius:14px;padding:12px;margin:0 0 14px}.barcode-link-head{display:flex;gap:10px;align-items:flex-start;color:#175cd3}.barcode-link-head>svg{margin-top:2px}.barcode-link-head strong,.barcode-link-head small{display:block}.barcode-link-head small{font-size:11px;line-height:1.4;margin-top:3px;color:#475467}.barcode-link-search{margin-top:10px}.barcode-link-results{display:flex;flex-direction:column;gap:6px;margin-top:8px}.barcode-link-results button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;background:#fff;border:1px solid #d0d5dd;padding:9px 10px}.barcode-link-results button span{min-width:0}.barcode-link-results button strong,.barcode-link-results button small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.barcode-link-results button small{font-size:11px;color:#667085;margin-top:2px}.barcode-link-results button b{color:#175cd3;font-size:12px}.barcode-link-empty{display:block;margin-top:8px;color:#667085;font-size:11px}.count-mode-block{display:flex;flex-direction:column;gap:7px}.field-title{font-size:12px;font-weight:760;color:#475467}.count-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.count-mode-option{display:flex;align-items:flex-start;gap:9px;border:1px solid #d0d5dd;border-radius:12px;padding:11px;background:#fff;cursor:pointer}.count-mode-option.active{border-color:var(--theme-accent,#0e9384);background:var(--theme-accent-soft,#e9faf7);box-shadow:0 0 0 3px rgba(var(--theme-rgb,14,147,132),.12)}.count-mode-option input{width:18px;min-height:18px;margin:2px 0 0}.count-mode-option span{min-width:0}.count-mode-option strong,.count-mode-option small{display:block}.count-mode-option strong{font-size:13px}.count-mode-option small{font-size:11px;color:#667085;line-height:1.35;margin-top:2px}.visible-count-note{background:#ecfdf3;border-color:#abefc6;color:#067647}.code-section-head{margin-top:14px}
@media(max-width:720px){.count-mode-options{grid-template-columns:1fr}.barcode-link-box{padding:10px}.code-editor-list{margin-top:6px}.code-line{grid-template-columns:1fr}.code-line .icon-button{width:100%}.simple-new-product .code-section-head{display:flex}.simple-new-product .code-empty-hint{display:block}.simple-new-product .code-editor-list{display:flex}}

/* v1.3.13 — productstatus, inactive beheer en verpakkingsbeheer */
.product-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;min-width:0}.product-toolbar>.search-field{min-width:0}.status-filter{display:flex;gap:6px;flex:0 0 auto;background:#f2f4f7;border-radius:12px;padding:4px}.status-filter button{min-height:38px;padding:7px 10px;background:transparent;border:0;color:#667085;font-size:12px;white-space:nowrap}.status-filter button.active{background:#fff;color:#172033;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.product-card.inactive{background:#fafafa;border-style:dashed;opacity:.88}.product-card.inactive .product-icon{background:#f2f4f7;color:var(--muted)}.status-badge.active{background:#ecfdf3;color:#067647}.status-badge.inactive{background:#f2f4f7;color:#667085}.product-card-actions .danger{flex:0 1 auto}
.product-status-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #abefc6;background:#ecfdf3;border-radius:13px;padding:11px 13px;margin:2px 0 14px}.product-status-panel.inactive{border-color:#d0d5dd;background:#f8fafc}.product-status-panel>div strong,.product-status-panel>div small{display:block}.product-status-panel>div strong{font-size:13px}.product-status-panel>div small{font-size:11px;color:#667085;margin-top:3px;line-height:1.35}.status-toggle{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;margin:0!important;white-space:nowrap}.status-toggle input{width:22px;min-height:22px}.status-toggle span{font-size:12px!important}.package-editor-list{scroll-margin-top:82px}
@media(max-width:720px){.product-toolbar{flex-direction:column;align-items:stretch}.status-filter{width:100%;overflow-x:auto;justify-content:flex-start}.status-filter button{flex:1 0 auto}.product-status-panel{align-items:flex-start}.product-card-actions .danger{grid-column:1/-1}.form-actions{flex-wrap:wrap}.form-actions .danger{margin-right:auto}}
@media(max-width:430px){.product-card-actions .danger{grid-column:auto}.product-status-panel{flex-direction:column}.status-toggle{width:100%;justify-content:space-between!important}}

/* v1.3.14 — sync/mobile manage hardening + camera-filled extra barcodes */
.scan-input-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:7px;align-items:center;min-width:0;max-width:100%}.scan-input-row>input{min-width:0}.scan-field-button{width:44px;min-width:44px;padding:0}.code-heading-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;min-width:0}.code-heading-actions button{white-space:nowrap}
.manage-grid,.manage-card,.manage-card>*,.quality-panel,.quality-panel>*,.system-check-list,.system-check-row,.system-check-row>div,.manage-list,.manage-list>div,.switch-row,.switch-row>div,.pairing-card,.qr-wrap{min-width:0;max-width:100%}.manage-card{width:100%;overflow:hidden}.manage-card p,.manage-card small,.manage-card code,.server-hint,.pair-url,.system-check-row strong,.system-check-row small,.manage-list span,.manage-list small,.switch-row strong,.switch-row small{overflow-wrap:anywhere;word-break:break-word}.pair-url,.server-hint{white-space:normal}.qr-wrap{width:100%;overflow:hidden}.qr-wrap svg,.qr-svg{max-width:100%;height:auto}.system-check-row{grid-template-columns:24px minmax(0,1fr)}.manage-list>div{align-items:flex-start;flex-wrap:wrap}.manage-list>div>span,.manage-list>div>small{min-width:0;max-width:100%}.switch-row>div{flex:1 1 auto}.switch-row>input{flex:0 0 22px}.metric-row{min-width:0;flex-wrap:wrap}.manage-card .location-chip-row{width:100%;max-width:100%;min-width:0}.manage-card>.full{max-width:100%}
@media(max-width:720px){
  .manage-grid{width:100%;max-width:100%;min-width:0;overflow:hidden}
  .manage-card{padding:14px;border-radius:14px}
  .quality-panel{width:100%;max-width:100%;overflow:hidden}
  .quality-head,.quality-list,.quality-filters{min-width:0;max-width:100%}
  .quality-filters{overflow-x:auto;overflow-y:hidden}
  .switch-row{align-items:flex-start}
  .switch-row>input{margin-top:2px}
  .code-heading-actions{width:100%;justify-content:stretch}
  .code-heading-actions button{flex:1 1 145px}
  .scan-input-row{grid-template-columns:minmax(0,1fr) 46px}
}
@media(max-width:430px){
  .code-heading-actions{display:grid;grid-template-columns:1fr}
  .code-heading-actions button{width:100%}
  .manage-card{padding:13px}
  .system-check-row{padding:8px}
}

/* v1.3.17 smart database backup management */
.backup-card{min-width:0;overflow:hidden}.backup-card.needs-baseline{border-color:#fedf89;background:linear-gradient(180deg,#fffdf8 0%,#fff 46%)}
.backup-status-list{display:flex;flex-direction:column;gap:7px;margin:4px 0 2px;min-width:0}.backup-status-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:center;padding:8px 9px;border-radius:10px;background:#f8fafc;min-width:0}.backup-status-row>span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900}.backup-status-row strong,.backup-status-row small{display:block;min-width:0;overflow-wrap:anywhere}.backup-status-row strong{font-size:12px}.backup-status-row small{font-size:11px;color:var(--muted);margin-top:2px}.backup-status-row.ok>span{background:#dcfae6;color:#067647}.backup-status-row.warn>span{background:#fef0c7;color:#b54708}.backup-status-row.error>span{background:#fee4e2;color:#b42318}
.backup-points{display:flex;flex-direction:column;gap:7px;border-top:1px solid #eaecf0;padding-top:10px;margin-top:2px;min-width:0}.backup-point-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #f0f2f5;min-width:0}.backup-point-row:last-child{border-bottom:0}.backup-point-row strong,.backup-point-row small{display:block;min-width:0;overflow-wrap:anywhere}.backup-point-row strong{font-size:12px}.backup-point-row small{font-size:11px;color:var(--muted);margin-top:2px}.backup-point-row .button,.backup-point-row button{max-width:100%}
@media(max-width:720px){.backup-point-row{grid-template-columns:minmax(0,1fr) auto}.backup-card .server-hint{margin-bottom:7px}.backup-status-row{padding:8px}.backup-point-row .small{min-height:38px;padding:7px 10px}}
@media(max-width:360px){.backup-point-row{grid-template-columns:1fr}.backup-point-row .small{width:100%}}

/* v1.3.20: expliciet beheer van actuele voorraad per productlocatie */
.stock-location-editor{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fafc;min-width:0}.stock-location-head{margin-bottom:10px}.stock-location-list{display:flex;flex-direction:column;gap:8px}.stock-location-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;background:#fff;border:1px solid var(--line);border-radius:12px;min-width:0}.stock-location-row.ghost{border-color:#fedf89;background:#fffcf5}.stock-location-info{display:flex;flex-direction:column;gap:2px;min-width:0}.stock-location-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.stock-location-info>span{font-size:13px;font-weight:800}.stock-location-info>small{font-size:11px;color:var(--muted)}.stock-location-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 7px;font-size:11px;font-weight:800}.stock-location-badge.main{background:#ecfdf3;color:#067647}.stock-location-badge.ghost{background:#fff6ed;color:#b54708}.stock-location-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;min-width:0}.stock-location-actions .small{white-space:nowrap}@media(max-width:640px){.stock-location-editor{padding:11px}.stock-location-row{align-items:stretch;flex-direction:column}.stock-location-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.stock-location-actions .small{width:100%;min-width:0;white-space:normal}.stock-location-actions .danger:last-child:nth-child(3){grid-column:1/-1}}

/* v1.3.21 — inkoopprijs, magazijnwaarde en blijvende maandtelling */
.price-editor{margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fafc;min-width:0}.price-editor-head{margin:0 0 10px}.price-editor-head>div{display:block}.price-preview{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:2px;padding:10px 12px;border:1px solid #b2ddff;border-radius:11px;background:#eff8ff;color:#175cd3}.price-preview span,.price-preview strong,.price-preview small{display:block}.price-preview span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.price-preview strong{font-size:17px}.price-preview small{width:100%;font-size:11px;color:#475467}.price-preview.empty{border-color:#e4e7ec;background:#fff;color:#667085}.stock-value-summary{grid-template-columns:2fr 1fr 1fr}.stock-value-summary>div:first-child strong{font-size:24px}.count-window-setting select{width:auto;min-width:112px;min-height:38px;height:38px;margin-left:auto}.count-window-setting>div{min-width:0}.count-window-setting select{flex:0 0 auto}
@media(max-width:720px){.price-editor{padding:11px}.stock-value-summary{grid-template-columns:1fr 1fr}.stock-value-summary>div:first-child{grid-column:1/-1}.count-window-setting{align-items:center}.count-window-setting select{max-width:42%;min-width:108px}}
@media(max-width:430px){.stock-value-summary{grid-template-columns:1fr 1fr}.price-preview{align-items:flex-start;flex-direction:column}.count-window-setting{gap:8px}.count-window-setting select{max-width:46%;font-size:12px}}

/* v1.4.1 — archived count drill-down + location inventory drill-down */
.stock-location-overview,.archived-location-section{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:0 0 14px}.stock-location-chips button small,.manage-card .location-chip-row button small{display:block;font-size:11px;color:var(--muted);font-weight:600}.manage-card .location-chip-row button{display:flex;flex-direction:column;align-items:center;gap:1px}.manage-card .location-chip-row button.active small{color:#d0d5dd}.archived-session-view{display:flex;flex-direction:column;gap:14px}.archived-session-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}.archived-session-head h2{font-size:21px;margin:3px 0 5px}.archived-session-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.archived-count-summary{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}.archived-location-section{margin:0}.archived-location-grid{margin-bottom:0}.archived-count-table{margin-top:0}
@media(max-width:720px){.archived-session-head{flex-direction:column}.archived-session-head>.secondary{width:100%}.archived-count-summary{grid-template-columns:1fr 1fr}.location-inventory-row>.secondary{grid-column:1/-1;width:100%}.stock-location-overview,.archived-location-section{box-shadow:none}}
@media(max-width:430px){.archived-count-summary{grid-template-columns:1fr 1fr}}

/* v1.4.1 — hierarchical locations / sublocations */
.location-hierarchy-chips>button{align-items:flex-start!important;text-align:left}.location-hierarchy-chips>button span{font-weight:800}

/* v1.4.1 — desktop operations dashboard + refined counting workspace */
.dashboard-page,.counts-page{min-width:0}

.dashboard-kpi.primary-kpi{background:linear-gradient(135deg,#172033 0%,#25334d 100%);color:#fff;border-color:#172033}
.dashboard-kpi.attention{border-color:#fedf89;background:#fffcf5}

.primary-kpi .kpi-label,.primary-kpi small{color:#d0d5dd}

.live-ring{width:9px;height:9px;border-radius:50%;display:inline-block;background:#98a2b3;flex:0 0 auto}.live-ring.active{background:#12b76a;box-shadow:0 0 0 5px rgba(18,183,106,.11)}
.dashboard-two-col{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:14px;margin-bottom:14px}

.presence-row.scanning{border-color:#abefc6;background:#f6fef9}.presence-row.scanning .presence-avatar{background:#dcfae6;color:#067647}.presence-row.scanning .presence-state{color:#067647}
.dashboard-empty{padding:18px;border:1px dashed #d0d5dd;border-radius:12px;color:#667085;font-size:12px;text-align:center;background:#fcfcfd}
.progress-track.large{height:8px}
.mini-progress{height:4px;background:#eaecf0;border-radius:99px;overflow:hidden}.mini-progress i{display:block;height:100%;background:var(--accent);border-radius:inherit}.movement-delta{display:inline-flex;justify-content:center;border-radius:8px;background:#f2f4f7;color:#475467;padding:5px 6px;font-size:11px;font-weight:900}.movement-delta.positive{background:#ecfdf3;color:#067647}.movement-delta.negative{background:#fff1f0;color:#b42318}
.topbar-live-scanners{min-height:34px;padding:5px 9px;border:1px solid #abefc6;background:#f6fef9;color:#067647;border-radius:999px;font-size:11px;white-space:nowrap}.topbar-live-scanners .live-ring{margin-right:2px}

.count-session-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.count-session-tile{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:104px;padding:12px;background:#fff;border:1px solid #e4e7ec;border-radius:14px;text-align:left;min-width:0}.count-session-tile:hover{background:#f8fafc}.count-session-tile.active{border-color:#84adff;box-shadow:0 0 0 3px rgba(23,105,224,.07)}.count-session-tile.open{background:linear-gradient(180deg,#f8fffb 0%,#fff 100%)}.count-session-title{display:flex;align-items:flex-start;gap:8px;min-width:0}.count-session-title>div{min-width:0}.count-session-title strong,.count-session-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.count-session-title strong{font-size:13px}.count-session-title small{font-size:11px;color:#667085;margin-top:3px}.session-dot{width:8px;height:8px;margin-top:5px;border-radius:50%;background:#98a2b3;flex:0 0 auto}.session-dot.live{background:#12b76a;box-shadow:0 0 0 4px rgba(18,183,106,.1)}.count-session-meta{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:11px;color:#667085}.count-session-meta b{font-size:11px;color:#344054}.session-mini{margin-top:auto}
.active-count-workspace,.archived-session-view{display:flex;flex-direction:column;gap:12px}.count-overview-card,.count-location-workspace{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px;min-width:0}.count-overview-main{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}.count-overview-main h2{font-size:20px;margin:3px 0 4px}.count-overview-main small{color:#667085;font-size:11px}.count-big-progress{font-size:32px;letter-spacing:-.04em}.count-overview-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.count-overview-metrics>div{background:#f8fafc;border-radius:11px;padding:9px 10px}.count-overview-metrics span,.count-overview-metrics strong{display:block}.count-overview-metrics span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800}.count-overview-metrics strong{font-size:17px;margin-top:3px}.count-apply-button{width:100%;margin-top:11px}
.count-location-head{margin-bottom:10px}.count-location-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.count-location-tile{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-height:91px;padding:10px;background:#fff;border:1px solid #e4e7ec;border-radius:12px;text-align:left;min-width:0}.count-location-tile.active{border-color:#84adff;background:#f7faff;box-shadow:0 0 0 2px rgba(23,105,224,.06)}.count-location-tile-top{display:flex;justify-content:space-between;gap:8px;min-width:0}.count-location-tile-top>div{min-width:0}.count-location-tile strong,.count-location-tile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.count-location-tile strong{font-size:14px}.count-location-tile small{font-size:11px;color:#667085;margin-top:2px}.count-location-tile b{font-size:12px;color:#344054}.count-location-tile>span{font-size:11px;color:#667085;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.count-location-products{border-top:1px solid #f0f2f5;margin-top:14px;padding-top:14px}.count-location-product-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.count-location-product-head h2{font-size:18px;margin:2px 0 2px}.count-location-product-head small{display:block;color:#667085;font-size:11px}.location-product-count{display:inline-flex;align-items:center;justify-content:center;min-width:31px;height:31px;padding:0 8px;border-radius:999px;background:#f2f4f7;color:#344054;font-size:12px;font-weight:900}
.count-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.count-product-tile{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-height:126px;padding:11px;border:1px solid #e4e7ec;border-radius:13px;background:#fff;text-align:left;min-width:0}.count-product-tile.pending:hover{border-color:#84adff;background:#f8fbff}.count-product-tile.counted,.count-product-tile.fresh{border-color:#abefc6;background:#f8fefa}.count-product-tile.review{border-color:#fedf89;background:#fffcf5}.count-product-head{display:flex;justify-content:space-between;align-items:center;gap:7px;min-width:0}.count-product-head code{font-size:11px;color:#667085;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.count-product-status{display:inline-flex;align-items:center;border-radius:999px;padding:3px 6px;background:#f2f4f7;color:#475467;font-size:11px;font-weight:900;white-space:nowrap}.count-product-tile.counted .count-product-status,.count-product-tile.fresh .count-product-status{background:#dcfae6;color:#067647}.count-product-tile.review .count-product-status{background:#fef0c7;color:#b54708}.count-product-name{font-size:13px;line-height:1.35;overflow-wrap:anywhere}.count-product-tile>small{font-size:11px;color:#667085;line-height:1.4}.count-product-action,.count-product-diff{margin-top:auto;font-size:11px;font-weight:800;color:var(--accent)}.count-product-diff{color:#b54708}.count-product-diff.ok{color:#067647}.count-product-tile.archived{cursor:default}.archived-count-locations{margin:0}.archived-session-head.refined{box-shadow:none}
.count-detail-disclosure{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.count-detail-disclosure>summary{cursor:pointer;list-style:none;padding:12px 14px;font-size:12px;font-weight:800;color:#475467}.count-detail-disclosure>summary::-webkit-details-marker{display:none}.count-detail-disclosure>summary:after{content:'›';float:right;color:var(--muted);transform:rotate(90deg)}.count-detail-disclosure[open]>summary{border-bottom:1px solid var(--line)}.count-detail-disclosure[open]>summary:after{transform:rotate(-90deg)}.count-detail-disclosure .data-card{border:0;border-radius:0;box-shadow:none}

@media(max-width:980px){.dashboard-two-col{grid-template-columns:1fr}.count-session-tiles{grid-template-columns:1fr 1fr}.count-location-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.count-product-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.dashboard-page .page-head{margin:0!important;gap:0;min-height:0}.dashboard-page .page-head p,.dashboard-page .page-head>.secondary,.dashboard-page .page-head>.primary{display:none}.dashboard-page .page-head h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dashboard-two-col{gap:10px}.topbar-live-scanners{display:none}.count-session-tiles{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;padding:0 1px 4px;scrollbar-width:none}.count-session-tiles::-webkit-scrollbar{display:none}.count-session-tile{flex:0 0 min(260px,82vw)}.count-overview-card,.count-location-workspace{padding:12px;border-radius:14px}.count-overview-metrics{grid-template-columns:1fr 1fr}.count-location-tiles{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:3px;scrollbar-width:none}.count-location-tiles::-webkit-scrollbar{display:none}.count-location-tile{flex:0 0 150px}.count-product-grid{grid-template-columns:1fr 1fr}.count-product-tile{min-height:120px}.archived-session-head.refined{padding:13px}}
@media(max-width:430px){.count-overview-main{align-items:center}.count-overview-main h2{font-size:17px}.count-big-progress{font-size:26px}.count-product-grid{grid-template-columns:1fr}.count-product-tile{min-height:104px}.count-location-product-head{align-items:center}.count-location-product-head h2{font-size:16px}.archived-count-summary{box-shadow:none}}
@media(max-width:350px){.count-overview-metrics{grid-template-columns:1fr 1fr}}
.count-detail-disclosure:not([open]) > :not(summary){display:none!important}
.operator-setting{display:grid;gap:6px;padding:10px 0 14px;border-bottom:1px solid var(--line);margin-bottom:4px}.operator-setting label{font-size:12px;font-weight:800;color:#344054}.operator-setting input{width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;background:#fff;color:var(--ink)}.operator-setting small{font-size:11px;color:#667085;line-height:1.35}

/* v1.4.7 — requested navigation + compact operational UI */
.desktop-sidebar,.desktop-current-page{display:none}
.mobile-stock-list{display:none}

.stock-kpi-value{background:#172033;border-color:#172033;color:#fff}.stock-kpi-value span,.stock-kpi-value small{color:#cbd5e1}
.stock-search-toolbar .search-field{width:100%}

.count-session-tiles{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.count-location-tiles{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.count-product-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

@media(min-width:900px){
  /* Desktop-shell (5 sep 2026, kit): zijbalk 232px vlak navy met 44px-navigatie (actief = zachte accentpil), bovenbalk 56px wit met
     de paginatitel links en sync-chip + acties rechts, contentkolom max 1180px met 24px padding. Kleuren via thema-variabelen. */
  :root{--sidebar-width:232px}
  .app-shell{padding-left:var(--sidebar-width)}
  .desktop-sidebar{display:flex;position:fixed;z-index:70;left:0;top:0;bottom:0;width:var(--sidebar-width);flex-direction:column;background:var(--theme-navy,#0b1724);color:#fff;border-right:0;padding:18px 12px 16px}
  .desktop-sidebar-brand{padding:0 6px 18px;border-bottom:0;margin-bottom:8px}.desktop-sidebar .brand{gap:11px}.desktop-sidebar .brand-mark{background:var(--theme-accent,#0e9384);color:#fff;width:38px;height:38px;border-radius:10px}.desktop-sidebar .brand strong{font-size:14px;font-weight:800;color:#fff}.desktop-sidebar .brand span{font-size:11px;color:rgba(255,255,255,.55);max-width:145px}
  .desktop-sidebar-nav{display:flex;flex-direction:column;gap:3px}.desktop-sidebar-nav button{width:100%;justify-content:flex-start;min-height:44px;border:0;background:transparent;color:rgba(255,255,255,.78);padding:0 13px;border-radius:10px;font-size:14px;font-weight:600;gap:11px}.desktop-sidebar-nav button:hover{background:rgba(255,255,255,.07);color:#fff}.desktop-sidebar-nav button.active{background:rgba(var(--theme-rgb,23,105,224),.32);color:#fff;box-shadow:none}.desktop-sidebar-icon{width:22px;display:grid;place-items:center}
  .desktop-sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:8px}.sidebar-sync{display:grid;grid-template-columns:8px 1fr;gap:8px;align-items:start;padding:12px 13px;border:0;background:rgba(255,255,255,.07);border-radius:12px}.sidebar-sync .sync-dot{width:8px;height:8px;border-radius:999px;background:#98a2b3;margin-top:4px;display:block}.sidebar-sync strong,.sidebar-sync small{display:block}.sidebar-sync strong{font-size:12px;font-weight:700;color:#fff}.sidebar-sync small{font-size:11px;color:rgba(255,255,255,.55);margin-top:2px;line-height:1.35}.sidebar-sync.ok .sync-dot{background:#16a36d}.sidebar-sync.busy .sync-dot{background:#f79009}.sidebar-sync.offline .sync-dot{background:#f04438}.sidebar-export{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff;min-height:44px;font-size:13px;box-shadow:none}.sidebar-export:hover{background:rgba(255,255,255,.1)}
  .topbar{height:56px;margin-left:0;padding:0 24px;position:sticky;top:0;justify-content:flex-start;gap:12px;background:#fff;backdrop-filter:none;border-bottom:1px solid var(--line)}.topbar>.brand{display:none}.app-shell>.topbar .topbar-menu{display:none}.app-shell>.topbar .topbar-title{display:block;margin-right:auto;color:var(--text-primary);font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-shell>.topbar>.topbar-right{display:flex;align-items:center;gap:8px}.desktop-current-page{display:flex;align-items:center;gap:9px;color:#344054}.desktop-current-page strong{font-size:14px}.desktop-current-page svg{color:#667085}.desktop-tabs{display:none!important}.content{max-width:1760px;margin:0 auto;padding:24px 24px 64px;min-height:calc(100vh - 56px);min-height:calc(100dvh - 56px)}
  .page-head{margin-bottom:18px}.page-head h1{font-size:26px}.page-head p{font-size:13px;max-width:760px}.scanner-layout{grid-template-columns:minmax(0,1.7fr) minmax(300px,.72fr)}
  .data-card table{min-width:900px}
}

@media(max-width:720px){
  .bottom-tabs{grid-template-columns:repeat(4,1fr)!important;padding-left:5px;padding-right:5px}.bottom-tabs button{font-size:11px;min-width:0}.bottom-tabs button.active{background:#f3f7ff;color:#1769e0}
  .stock-page .page-head{margin-bottom:10px}.stock-page .page-head h1{font-size:23px}.stock-page .page-head p{display:none}.stock-page .page-head>.secondary{min-height:38px;padding:7px 10px}.stock-kpi-value{grid-column:1/-1}.stock-location-overview .section-mini-head small{display:none}.mobile-stock-list{display:flex;flex-direction:column;gap:8px}.stock-location-pill.muted{display:inline-flex;align-items:center;background:#f2f4f7;border-color:#e4e7ec;color:#667085}
  .product-toolbar{gap:8px}.status-filter{overflow-x:auto;max-width:100%}.product-icon{width:35px;height:35px;border-radius:10px}
  .scanner-dark-mobile{gap:10px}.scanner-dark-mobile .mobile-scanner-primary{background:linear-gradient(180deg,#081520 0%,#0b1b29 100%);border-color:#14293b;color:#fff;box-shadow:0 12px 28px rgba(8,21,32,.16)}.scanner-dark-mobile .mobile-scanner-primary .page-head h1{color:#fff}.scanner-dark-mobile .mobile-scanner-primary .page-head p{color:#a8b7c7}.scanner-dark-mobile .mobile-scanner-primary .active-session-card{background:rgba(13,148,86,.13);border-color:rgba(75,220,147,.35);color:#6ce0a5}.scanner-dark-mobile .mobile-scanner-primary .count-session-panel{background:rgba(255,255,255,.035);border-color:#1d3447}.scanner-dark-mobile .mobile-scanner-primary .location-picker-head span,.scanner-dark-mobile .mobile-scanner-primary .location-scan-hint{color:#95a8b9}.scanner-dark-mobile .mobile-scanner-primary .location-picker-head strong{color:#fff}.scanner-dark-mobile .mobile-scanner-primary .location-chip-row button{background:#102435;border-color:#274056;color:#cbd6e0}.scanner-dark-mobile .mobile-scanner-primary .location-chip-row button.active{background:#1769e0;border-color:#4b8cf1;color:#fff}.scanner-dark-mobile .mobile-camera-box{order:0;background:#07111b;border:1px solid #24384a}.scanner-dark-mobile .mobile-camera-box .scan-frame span{border-color:#8bd31b}.scanner-dark-mobile .mobile-camera-box .camera-off{color:#9db0c2}.scanner-dark-mobile .mobile-camera-box .camera-off strong{color:#fff}.scanner-dark-mobile .mobile-scan-actions .secondary{background:#102435;border-color:#2b4357;color:#e7edf4}.scanner-dark-mobile .mobile-manual-row input{background:#0f2231;border-color:#30495d;color:#fff}.scanner-dark-mobile .mobile-manual-row input::placeholder{color:#7890a4}.scanner-dark-mobile .quick-results{border-color:#274056}.scanner-dark-mobile .quick-results button{background:#102435;border-color:#274056;color:#fff}.scanner-dark-mobile .quick-results button div span,.scanner-dark-mobile .quick-results>button>span{color:#9db0c2}.scanner-dark-mobile .undo-bar{background:#102435;border-color:#274056;color:#d8e2eb}.scanner-dark-mobile .last-scan,.scanner-dark-mobile .last-product-card{background:#102435;border:1px solid #274056;color:#aebdca}.scanner-dark-mobile .last-scan b,.scanner-dark-mobile .last-scan code,.scanner-dark-mobile .last-product-card strong{color:#fff}
  .count-session-tile{flex-basis:min(240px,78vw)}.count-location-tile{flex-basis:142px}.count-product-grid{grid-template-columns:1fr}.count-product-tile{min-height:100px}.count-overview-card,.count-location-workspace{box-shadow:0 4px 14px rgba(16,24,40,.025)}
}

/* v1.4.8 — focused UI/UX refinement pass */
:root{
  --bg:#f3f6fa;
  --surface-2:#f7f9fc;
  --line:#dfe5ec;
  --shadow:0 8px 24px rgba(16,24,40,.055);
  --shadow-soft:0 2px 8px rgba(16,24,40,.045);
}
body{-webkit-tap-highlight-color:transparent}
button{transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .08s ease}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(23,105,224,.28);outline-offset:2px}
.primary{box-shadow:none}
.secondary{box-shadow:0 1px 2px rgba(16,24,40,.025)}
.sync-text-compact{display:none}
.sync-chip{min-width:0;max-width:min(420px,42vw);border:1px solid transparent;box-shadow:0 1px 2px rgba(16,24,40,.025)}
.sync-chip.ok{border-color:#abefc6}.sync-chip.busy{border-color:#b2ddff}.sync-chip.offline{border-color:#fedf89}
.sync-chip.busy .sync-dot{animation:sync-pulse 1.1s ease-in-out infinite}
@keyframes sync-pulse{0%,100%{opacity:.45;transform:scale(.82)}50%{opacity:1;transform:scale(1.15)}}
.pending-badge{border:1px solid rgba(181,71,8,.12);box-shadow:none}
.page-head h1{font-weight:900}.page-head p{font-size:13px}
.scanner-primary,.side-card,.data-card,.product-card,.manage-card,.summary-row,.quality-panel,.dashboard-panel,.count-overview-card,.count-location-workspace{border-color:var(--line)}
.product-card.inactive{opacity:1;background:#fcfdff;border-style:solid;border-color:#d7dee7;box-shadow:none}
.product-card.inactive .product-card-top,.product-card.inactive .stock-line{opacity:.82}
.product-card-actions .danger{background:#fffafa;border-color:#fecdca}
.manage-card>svg{width:34px;height:34px;padding:8px;border-radius:10px;background:#f2f4f7;color:#475467;margin-bottom:2px}
.manage-card h3{letter-spacing:-.01em}
.quality-panel,.manage-card{box-shadow:var(--shadow-soft)}
.status-filter{border:1px solid #eaecf0;background:#f3f5f8}
.status-filter button.active{box-shadow:0 1px 4px rgba(16,24,40,.09)}
.location-chip-row button{transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.location-chip-row button.active{box-shadow:0 2px 7px rgba(16,24,40,.12)}
.switch-row input[type="checkbox"],.status-toggle input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;width:44px!important;height:26px!important;min-height:26px!important;padding:0!important;margin:0;border:0!important;border-radius:999px!important;background:#d0d5dd!important;box-shadow:inset 0 0 0 1px rgba(16,24,40,.06)!important;cursor:pointer;transition:background-color .16s ease,box-shadow .16s ease
}
.switch-row input[type="checkbox"]::after,.status-toggle input[type="checkbox"]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.28);transition:transform .16s ease}
.switch-row input[type="checkbox"]:checked,.status-toggle input[type="checkbox"]:checked{background:var(--accent)!important}
.switch-row input[type="checkbox"]:checked::after,.status-toggle input[type="checkbox"]:checked::after{transform:translateX(18px)}
.switch-row input[type="checkbox"]:focus-visible,.status-toggle input[type="checkbox"]:focus-visible{outline:none!important;box-shadow:0 0 0 4px rgba(23,105,224,.14)!important}
.toast-stack{right:18px;bottom:22px;align-items:flex-end;pointer-events:none}
.toast-item{display:grid;grid-template-columns:10px minmax(0,1fr);align-items:start;gap:10px;min-width:min(300px,calc(100vw - 28px));max-width:420px;padding:12px 14px;background:#172033;border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 18px 44px rgba(16,24,40,.22);line-height:1.35;font-weight:650}
.toast-mark{width:8px;height:8px;border-radius:50%;margin-top:5px;background:#84adff;box-shadow:0 0 0 4px rgba(132,173,255,.14)}
.toast-item.ok{background:#075e45}.toast-item.ok .toast-mark{background:#6ce9a6}
.toast-item.warn{background:#8f3d08}.toast-item.warn .toast-mark{background:#fec84b}
.toast-item.error{background:#8e1c14}.toast-item.error .toast-mark{background:#fda29b}
.toast-message{min-width:0;overflow-wrap:anywhere}
.bottom-tabs{box-shadow:0 -10px 28px rgba(16,24,40,.055)}
.bottom-tabs button{position:relative;border-radius:12px}
.bottom-tabs button.active::after{content:"";position:absolute;left:50%;bottom:4px;width:18px;height:2px;border-radius:999px;background:currentColor;transform:translateX(-50%)}
.desktop-sidebar-nav button.active{box-shadow:none}
.desktop-sidebar-nav button[aria-current="page"]{font-weight:700}

/* Design tokens (frontend-architectuurronde 1, 3 sep 2026). Additief: bestaande variabelen in 00-styles.css blijven
   werken; nieuwe/omgebouwde regels gebruiken bij voorkeur deze namen. Waarden komen uit de bestaande, meest gebruikte
   literals (zie AUDIT-2026-09-02/FRONTEND-ARCHITECTURE-ROUND-1.md) en zijn AA-contrastveilig op wit. */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-pill:999px;
  --text-primary:#172033;--text-secondary:#475467;--text-muted:#5f6f86;--text-strong:#344054;
  --surface:#ffffff;--surface-raised:#f8fafc;--surface-sunken:#f2f4f7;--surface-info:#eaf3ff;--surface-ok:#ecfdf3;--surface-warn:#fff6ed;
  --border-default:#dce3ed;--border-strong:#d0d5dd;--border-ok:#abefc6;--border-info:#b2ddff;
  --status-ok:#067647;--status-warn:#b54708;--status-error:#b42318;--status-info:#175cd3;
  --control-height:44px;--control-height-compact:36px;
  --font-size-badge:11px;--font-size-meta:12px;--font-size-body:14px;--font-size-title:16px;
  /* Ronde 3 (3 sep 2026): aanvullingen — additief. Gewichten: 600/700/800/900 zijn de canonieke waarden; 650/750/780/850 in
     legacy-regels worden per feature genormaliseerd. Lagen: gebruik --z-* i.p.v. losse getallen. Hoogtes: touch = minimale
     tikhoogte voor secundaire mobiele bediening (tabs, pager, chips), control = primaire knoppen/velden. */
  --weight-medium:600;--weight-semibold:700;--weight-bold:800;--weight-black:900;
  --z-raised:4;--z-sticky:12;--z-nav:35;--z-sheet:52;--z-modal:60;--z-toast:70;--z-overlay:90;--z-top:9999;
  --control-height-touch:40px;--control-height-input:42px;
  /* DESIGN-SYSTEM.md-aliassen (§tokens): sm/md/touch */
  --control-sm:32px;--control-md:40px;--control-touch:48px;
  --safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);
  /* Breakpoints (documentatie; CSS-variabelen werken niet in @media): phone ≤430, tablet ≤720 (mobiel-layout), desktop ≥721,
     wide ≥900; 899/900 en 720/721 zijn dezelfde grens (max-width:899 == min-width:900). */
  /* ── Glaslaag (8 sep 2026, #135). Alleen voor vlakken waar inhoud ONDERDOOR schuift: de tabbalk en de
     plakkende kopregels. Nooit voor lijstregels, kaarten of invoervelden — daar kost doorschijnendheid
     leesbaarheid en levert het niets op.
     Terughoudend afgesteld, na twee correcties op het toestel. Eerst stond het op .72 met
     `saturate(180%) blur(18px)`: dan bleef een koptekst dwars door de tabbalk leesbaar en concurreerde die
     met de tablabels. Daarna .82/blur(24px), en toen was het andersom — het effect zelf werd het onderwerp.
     De stand hieronder is bewust bijna dekkend en zonder verzadigingsboost: je ziet dát er iets onder
     doorschuift, je leest het niet, en het vlak vraagt geen aandacht. Glas hoort een oppervlak te zijn, geen
     effect. Zonder `backdrop-filter` valt alles terug op --glass-solid; dat is geen degradatie maar de stand
     van vóór deze ronde. */
  --glass-bg:rgba(255,255,255,.9);
  --glass-bg-strong:rgba(255,255,255,.95);
  --glass-solid:#ffffff;
  --glass-line:rgba(16,24,40,.08);
  --glass-blur:blur(14px);
  --glass-blur-soft:blur(8px);
  --glass-shadow:0 -1px 0 rgba(16,24,40,.05);
}

/* ── Overhaul 7 sep 2026: het design system volgt nu de aangeleverde artboards (UI-OVERHAUL-2026-09-07/AUDIT.md).
   Deze laag is de enige plek waar maten, kleuren en typografie worden vastgesteld. Componentmodules verwijzen
   ernaar; ze bepalen zelf geen hoogtes, radii of schaalstappen meer. ───────────────────────────────────────── */
:root{
  /* Typografische schaal (mobiel → desktop identiek; alleen paginakoppen groeien mee) */
  --fs-display:30px;   /* het ene grote getal op een kaart */
  --fs-h1:26px;        /* paginatitel mobiel (desktop 30px, zie --fs-h1-lg) */
  --fs-h1-lg:30px;
  --fs-h2:19px;        /* kaarttitel, productnaam in een detailkop */
  --fs-h3:16px;        /* regeltitel, sectiekaartkop */
  --fs-body:14px;      /* lopende tekst */
  --fs-meta:13px;      /* onderregel bij een titel */
  --fs-label:12px;     /* label onder een getal, chiptekst */
  --fs-eyebrow:11px;   /* KAPITALE SECTIEKOP, letterspatie .08em */
  --lh-tight:1.15;--lh-snug:1.3;--lh-body:1.45;
  /* Ritme: één schaal, geen tussenwaarden */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;
  --gap-list:10px;          /* tussen twee lijstkaarten (mobiel) */
  --gap-section:20px;       /* tussen twee secties */
  --page-pad:14px;          /* horizontale marge mobiel */
  --page-pad-lg:24px;       /* horizontale marge desktop */
  /* Radii: drie stappen, meer niet */
  --r-chip:999px;--r-control:12px;--r-card:16px;
  /* Controlehoogtes per functieklasse */
  --h-primary:56px;         /* vaste hoofdactie onderaan (mobiel) */
  --h-control:44px;         /* knop, invoer, select, chip met tikdoel */
  --h-chip:40px;            /* filterchip */
  --h-row:66px;             /* lijstregel mobiel */
  --h-topbar:52px;          /* donkere kop mobiel */
  --h-tabbar:72px;          /* tabbalk mobiel */
  --h-desk-topbar:72px;     /* witte bovenbalk desktop */
  --w-sidebar:284px;        /* zijbalk desktop */
  /* Oppervlakken en randen uit de artboards */
  --app-bg:#f4f6f9;         /* paginagrond */
  --card-bg:#ffffff;
  --card-border:#e6ebf2;
  --card-shadow:0 1px 2px rgba(16,24,40,.04);
  --ink-dark:#0f2a24;       /* donkere kaart (voorraadwaarde, camera, totalen) */
  --ink-dark-soft:#16362f;
  --badge-bg:#eef1f6;       /* locatiecode-badge */
  /* Semantiek: groen = onder controle, amber = vraagt aandacht, rood = fout */
  --accent:#0e9384;--accent-dark:#0b6e63;--accent-soft:#e9faf7;
  --attention:#b54708;--attention-soft:#fff6ed;--attention-border:#f0c9a0;
  --danger:#b42318;--danger-soft:#fef3f2;
  --icon-sm:16px;--icon-md:19px;--icon-lg:22px;--icon-tile:44px;
}
@media(min-width:721px){:root{--page-pad:var(--page-pad-lg);--gap-list:12px}}
@media(max-width:720px){
  .topbar{height:58px;padding:0 10px;gap:8px;background:rgba(255,255,255,.975)}
  .brand{gap:8px;flex:1 1 auto;overflow:hidden}.brand-mark{width:36px;height:36px;border-radius:10px;flex:0 0 36px}.brand strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-right{flex:0 0 auto;gap:6px;max-width:46vw}
  .sync-chip{max-width:100%;padding:6px 7px;gap:5px;font-size:11px}
  .sync-text-full{display:none}.sync-text-compact{display:inline;overflow:hidden;text-overflow:ellipsis}
  .pending-badge{min-width:19px;height:19px;padding:0 5px;font-size:11px}
  .content{padding-top:14px;padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .page-head{margin-bottom:14px}.page-head h1{font-size:26px;line-height:1.12}.page-head p{font-size:13px;line-height:1.5}
  .product-toolbar{margin-bottom:12px}.search-field{border-radius:13px;min-height:48px}
  .manage-grid{gap:10px}.manage-card,.quality-panel{border-radius:16px;box-shadow:none}.manage-card{padding:14px}.manage-card>svg{width:32px;height:32px}
  .switch-row{min-height:58px;align-items:center;padding:10px 0}.switch-row>input{margin-top:0}
  .bottom-tabs{padding-top:7px;background:rgba(255,255,255,.985);border-top-color:#e4e7ec}
  .bottom-tabs button{min-height:57px;font-size:11px;gap:4px}
  .bottom-tabs button.active{background:#edf4ff;color:#175cd3}
  .toast-stack{left:10px;right:10px;bottom:calc(80px + env(safe-area-inset-bottom,0px));align-items:stretch}
  .toast-item{min-width:0;max-width:none;border-radius:13px;padding:11px 13px;font-size:12px;box-shadow:0 12px 30px rgba(16,24,40,.2)}
}

@media(max-width:390px){
  .topbar-right{max-width:43vw}.sync-chip{padding-left:6px;padding-right:6px}.sync-chip .sync-dot{width:7px;height:7px}
  .content{padding-left:10px;padding-right:10px}.page-head h1{font-size:25px}
  .status-filter button{font-size:11px;padding:7px 9px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* v1.4.8 visual polish follow-up */
.toast-item{animation:toast-pop .14s ease-out}
@keyframes toast-pop{from{transform:translateY(4px) scale(.99)}to{transform:none}}
@media(max-width:720px){
  .quality-filters{flex-wrap:wrap;overflow:visible;padding:10px 0 7px;gap:6px}
  .quality-filters button{flex:0 0 auto}
}

/* v1.4.9 — fullscreen/mobile ProductEditor containment hardening */
.code-section-head>div:first-child{display:block;min-width:0}.code-section-head>div:first-child h3,.code-section-head>div:first-child p{display:block}
@media(max-width:430px){.code-section-head{align-items:stretch;flex-direction:column}.code-section-head>div:first-child{width:100%}.code-section-head>div:first-child p{max-width:100%;line-height:1.45}.code-heading-actions{width:100%}}

/* v1.6.0 — compacte telcockpit: minder scrollen, hogere informatiedichtheid */

.count-editor-form .count-quantity-control{display:grid;grid-template-columns:minmax(92px,1fr) auto;gap:8px;align-items:end;margin:3px 0 8px}
.count-editor-form .count-quantity-control>label{margin:0;min-width:0}
.count-editor-form .count-quantity-control input{min-height:42px;font-size:17px;font-weight:800;text-align:center;padding:7px 8px}
.count-editor-form .compact-quick-count{display:grid;grid-template-columns:repeat(5,32px);gap:4px;margin:0}
.count-editor-form .compact-quick-count button{min-width:0;width:32px;min-height:42px;padding:4px 1px;border-radius:9px;font-size:11px;font-weight:850}
.count-editor-form .count-note-disclosure{border:1px solid var(--line);border-radius:11px;background:#fff;margin:5px 0 2px;overflow:hidden}
.count-editor-form .count-note-disclosure>summary{list-style:none;cursor:pointer;padding:8px 10px;color:#667085;font-size:11px;font-weight:800}
.count-editor-form .count-note-disclosure>summary::-webkit-details-marker{display:none}
.count-editor-form .count-note-disclosure>summary:after{content:'+';float:right;color:var(--muted);font-size:16px;line-height:1}
.count-editor-form .count-note-disclosure[open]>summary:after{content:'−'}
.count-editor-form .count-note-disclosure label{padding:0 10px 9px;margin:0}
.count-editor-form .total-preview{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:9px 11px;margin:6px 0 7px;border-radius:12px}
.count-editor-form .total-preview span{font-size:11px}
.count-editor-form .total-preview strong{font-size:19px;margin:0;text-align:right}
.count-editor-form .total-preview small{grid-column:1/-1;margin-top:3px;font-size:11px;line-height:1.3}

@media(max-width:720px){
  .active-count-mobile{gap:7px}
  .counting-mode{padding:10px!important}
  .counting-mode .page-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:5px!important}
  .counting-mode .page-head>div{min-width:0}
  .counting-mode .page-head h1{font-size:19px;line-height:1.05}
  .counting-mode .page-head p{display:none}
  .counting-mode .page-head>.primary{width:auto!important;min-height:34px;padding:5px 9px;font-size:11px;white-space:nowrap}
  .counting-mode .count-session-panel{gap:5px;margin:3px 0 7px;padding:7px 8px;border-radius:11px}
  .counting-mode .active-session-card{gap:5px;padding:5px 7px;border-radius:9px;font-size:11px;min-width:0}
  .counting-mode .active-session-card svg{width:14px;height:14px}
  .counting-mode .active-session-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .counting-mode .active-session-card span{margin-left:auto;white-space:nowrap;font-size:11px}
  .counting-mode .location-picker-head{align-items:center;gap:7px}
  .counting-mode .location-picker-head>div:first-child span{display:none}
  .counting-mode .location-picker-head>div:first-child strong{font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .counting-mode .progress-number{font-size:11px;padding:3px 6px}
  .counting-mode .location-chip-row{gap:5px;padding:0 4px 1px 0}
  .counting-mode .location-chip-row button{min-height:28px;padding:3px 7px;font-size:11px;border-radius:8px}
  .counting-mode .progress-track{height:4px}
  .compact-count-camera{height:184px!important;min-height:184px!important}
  .compact-count-camera .camera-off{gap:4px;padding:10px}
  .compact-count-camera .camera-off svg{width:23px;height:23px}
  .compact-count-camera .camera-off strong{font-size:14px}
  .compact-count-camera .camera-off span{font-size:11px}
  .compact-count-camera .scan-frame{inset:17% 10%}
  .compact-count-camera .scan-frame span{width:28px;height:28px}
  .counting-mode .compact-scan-actions{grid-template-columns:1fr 1fr!important;gap:6px;margin:6px 0 1px}
  .counting-mode .compact-scan-actions button{min-height:39px;padding:6px 7px;font-size:11px}
  .counting-mode .mobile-manual-row{margin-top:6px;grid-template-columns:minmax(0,1fr) 40px}
  .counting-mode .mobile-manual-row input,.counting-mode .mobile-manual-row button{min-height:40px}
  .counting-mode .last-scan,.counting-mode .last-product-card{margin-top:6px;padding:8px 9px}

  .count-editor-form{padding-top:11px;padding-bottom:10px}
  .count-editor-form .feedback-banner{margin:5px 0 8px;padding:8px 9px;border-radius:10px}
  .count-editor-form .feedback-banner small{font-size:11px;line-height:1.3}
  .count-editor-form .count-context{grid-template-columns:1fr 1fr!important;gap:7px;padding:8px 9px;border-radius:11px;margin-bottom:6px}
  .count-editor-form .count-context span{font-size:11px}
  .count-editor-form .count-context strong{font-size:14px}
  .count-editor-form .count-context small{grid-column:1/-1;font-size:11px;line-height:1.25}
  .count-editor-form>label{margin-bottom:7px}
  .count-editor-form>label>span{font-size:11px}
  .count-editor-form select{min-height:40px;height:40px;padding-top:6px;padding-bottom:6px}
  .count-editor-form .form-actions{margin-top:8px;padding-top:8px}
  .count-editor-form .form-actions button{min-height:42px}
}
@media(max-width:350px){
  .counting-mode .page-head{grid-template-columns:minmax(0,1fr) auto}
  .counting-mode .page-head>.primary{justify-self:end;font-size:11px;padding-left:7px;padding-right:7px}
  .compact-count-camera{height:180px!important;min-height:180px!important}
  .count-editor-form .count-quantity-control{grid-template-columns:minmax(82px,1fr) auto;gap:5px}
  .count-editor-form .compact-quick-count{grid-template-columns:repeat(5,29px);gap:3px}
  .count-editor-form .compact-quick-count button{width:29px;min-height:40px;font-size:11px}
  .count-editor-form .count-quantity-control input{min-height:40px;font-size:16px}
}
@media(max-width:720px){
  @supports selector(body:has(*)){
    body:has(.count-editor-form) .toast-stack{top:64px;bottom:auto}
  }
}

/* v1.6.0 — approved modern UI system: calm, dense, operational */
:root{
  --bg:#f7f9fc;--surface:#fff;--surface-2:#f8fafc;--ink:#111c35;--muted:#66758d;--line:#e2e8f0;
  --accent:#1267e8;--accent-dark:#0b55c6;--accent-soft:#eef5ff;--navy:#061b36;--navy-2:#082747;
  --ok:#16a36d;--shadow:0 8px 28px rgba(31,48,76,.055);--radius:16px;
}
body{background:var(--bg);color:var(--ink)}
.content{background:var(--bg)}
.page-head{margin-bottom:18px}.page-head h1{font-size:26px;font-weight:900;letter-spacing:-.02em;color:var(--text-primary)}.page-head p{font-size:13px;color:var(--text-muted);line-height:1.45}.page-head>.primary,.page-head>.secondary{min-height:44px;border-radius:10px;padding:9px 16px}
.primary{background:var(--accent);border-color:var(--accent);box-shadow:none}
.secondary{border-color:var(--line);color:var(--text-strong)}

/* shell */
.desktop-tools{display:none}.desktop-tool-icon{width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;border-radius:10px;color:var(--text-strong)}.desktop-tool-icon:hover{background:#f2f6fb}.admin-chip{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--text-primary);font-size:13px;font-weight:700}.admin-chip>span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--theme-accent,#1769e8);color:#fff;font-weight:800;font-size:12px}.admin-chip>b{color:#8491a5;font-size:12px}
@media(min-width:900px){
  :root{--sidebar-width:232px}
  .desktop-sidebar{background:var(--theme-navy,#06192f);padding:18px 12px 16px;border-right:0}
  .desktop-sidebar-brand{padding:0 6px 18px;border-bottom:0;margin-bottom:8px}.desktop-sidebar .brand-mark{width:38px;height:38px;border-radius:10px}.desktop-sidebar .brand strong{font-size:14px}.desktop-sidebar .brand span{font-size:11px;color:rgba(255,255,255,.55)}
  .desktop-sidebar-nav{gap:3px}.desktop-sidebar-nav button{min-height:44px;border-radius:10px;padding:0 13px;color:rgba(255,255,255,.78);font-size:14px;font-weight:600}.desktop-sidebar-nav button.active{background:rgba(var(--theme-rgb,18,103,232),.32);box-shadow:none}.desktop-sidebar-icon{width:22px}
  .desktop-sidebar-footer{gap:8px}.sidebar-sync{padding:12px 13px;border-radius:12px;background:rgba(255,255,255,.07);border-color:transparent}.sidebar-sync strong{font-size:12px}.sidebar-sync small{font-size:11px}.sidebar-export{min-height:44px;border-radius:10px;background:rgba(255,255,255,.06);font-weight:700}
  .topbar{height:56px;background:#fff;border-bottom:1px solid var(--line);padding:0 24px;justify-content:flex-start}.topbar>.brand{display:none}.desktop-tools{display:flex;align-items:center;gap:8px}.content{padding:24px 24px 64px;min-height:calc(100vh - 56px);min-height:calc(100dvh - 56px)}
}

/* inventory concept */
.modern-stock-page{max-width:1400px;margin:0 auto}.modern-export{padding-inline:17px}.modern-search .search-field{min-height:48px;border-radius:11px;border-color:#dce3ed;box-shadow:0 1px 2px rgba(31,48,76,.02)}
.stock-kpi.green .stock-kpi-icon{background:#e9faf2;color:#15966a}.stock-kpi.purple .stock-kpi-icon{background:#f3eaff;color:#8b4ce8}.stock-kpi.value .stock-kpi-icon{background:#eaf3ff;color:#1267e8}
.modern-location-strip .section-mini-head{margin-bottom:10px}.modern-location-strip .section-mini-head strong{font-size:14px}.modern-location-strip .section-mini-head small{font-size:11px;color:#7b879b}.modern-location-strip .section-mini-head>span{display:none}.modern-location-strip .stock-location-chips button.featured{border-color:#4e8df2;box-shadow:inset 0 0 0 1px #4e8df2;background:#fbfdff}
.stock-product-cell{display:flex;align-items:center;gap:10px;min-width:190px}.stock-product-thumb{width:36px;height:36px;border:1px solid #e0e6ef;border-radius:9px;display:grid;place-items:center;background:linear-gradient(180deg,#fff,#f4f6f9);color:#3e4c61;flex:0 0 36px}.stock-product-cell strong{font-size:12px;color:#17233a}.stock-product-cell small{font-size:11px}.table-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#7a879b;font-size:11px;padding:2px 0}.table-pagination{display:flex;align-items:center;gap:8px}.table-pagination button{min-height:30px;height:30px;padding:4px 9px;border:1px solid #e0e6ef;background:#fff;border-radius:8px;font-size:11px}.table-pagination button.active{background:#edf4ff;color:#1267e8;border-color:#d5e4fb}

/* counts master-detail concept */
.modern-counts-page{max-width:1400px;margin:0 auto}.modern-new-count{min-width:146px}.counts-master-detail{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.95fr);gap:14px;align-items:stretch}.counts-list-card,.counts-detail-card{background:#fff;border:1px solid #e1e7ef;border-radius:15px;box-shadow:0 5px 20px rgba(31,48,76,.035);overflow:hidden}.counts-list-toolbar{display:flex;gap:10px;padding:13px 14px;border-bottom:1px solid #edf0f4}.counts-list-toolbar .search-field{min-height:42px;border-radius:9px}.counts-filter-control{display:flex;align-items:center;gap:7px;min-width:108px;padding:0 9px;border:1px solid #dce3ed;border-radius:9px;background:#fff;color:#41516a}.counts-filter-control select{border:0;box-shadow:none!important;min-height:40px;height:40px;padding:5px 18px 5px 0;font-size:11px;background:transparent}.counts-list-head,.counts-session-row{display:grid;grid-template-columns:92px minmax(170px,1.65fr) 86px minmax(110px,1fr) 72px 100px 22px;align-items:center;gap:8px}.counts-list-head{min-height:42px;padding:0 14px;background:#fafbfd;color:#65738a;font-size:11px;text-transform:uppercase;letter-spacing:.055em;font-weight:800;border-bottom:1px solid #e7ecf2}.counts-session-row{width:100%;min-height:63px;padding:8px 14px;border:0;border-bottom:1px solid #edf0f4;border-radius:0;background:#fff;text-align:left;font-size:11px;color:#2d3b50}.counts-session-row:hover{background:#f8fbff}.counts-session-row.selected{background:#f5f9ff;box-shadow:inset 3px 0 #1267e8}.session-row-name{font-size:11px;color:#17233a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.count-status-chip{display:inline-flex;width:max-content;align-items:center;gap:6px;border-radius:999px;padding:5px 8px;background:#f1f4f7;color:#536174;font-size:11px;font-weight:800}.count-status-chip i{width:7px;height:7px;border-radius:50%;background:#93a0b2}.count-status-chip.active{background:#eaf9f1;color:#147d59}.count-status-chip.active i{background:#24b77b}.count-status-chip.history{background:#f5efff;color:#7b45c7}.count-status-chip.history i{background:#9c5ce8}.session-row-progress{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:6px}.session-row-progress>b{font-size:11px}.session-row-progress>i{height:4px;border-radius:99px;background:#e7edf5;overflow:hidden}.session-row-progress>i em{display:block;height:100%;background:#1267e8;border-radius:99px}.session-scope{line-height:1.25}.counts-list-footer{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;color:#8190a4;font-size:11px}.counts-list-footer>div{display:flex;gap:5px}.counts-list-footer button{min-height:28px;height:28px;padding:3px 9px;border:1px solid #e2e8f0;background:#fff;border-radius:8px;font-size:11px}.counts-list-footer button.active{background:#edf4ff;color:#1267e8}
.counts-detail-card{padding:20px 22px;display:flex;flex-direction:column;min-height:615px}.counts-detail-card>h2{font-size:20px;margin:14px 0 5px;letter-spacing:-.025em}.count-detail-created{font-size:11px;color:#77859a;margin:0 0 22px}.count-detail-progress-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:9px}.count-detail-progress-head b{font-size:13px}.count-detail-progress{height:5px;border-radius:99px;background:#e8edf4;overflow:hidden}.count-detail-progress i{display:block;height:100%;background:#1267e8;border-radius:99px}.count-detail-progress-copy{font-size:11px;color:var(--muted);margin-top:8px}.count-detail-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.count-detail-metrics>div{position:relative;padding:13px 13px 12px;border:1px solid #e4e9f0;border-radius:12px;box-shadow:0 2px 8px rgba(31,48,76,.025)}.count-detail-metrics>div:before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:2px;border-radius:4px;background:#4d8cf4}.count-detail-metrics>.green:before{background:#39b77f}.count-detail-metrics>.orange:before{background:#f38b3d}.count-detail-metrics>.purple:before{background:#8f5ee8}.count-detail-metrics span,.count-detail-metrics strong,.count-detail-metrics small{display:block}.count-detail-metrics span{font-size:11px;color:#738198}.count-detail-metrics strong{font-size:20px;margin:6px 0 3px;color:#17233a}.count-detail-metrics small{font-size:11px;color:var(--muted)}.count-detail-meta{display:flex;flex-direction:column;gap:0;margin:2px 0 18px}.count-detail-meta>div{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center;padding:7px 0}.count-detail-meta dt{font-size:11px;color:#7c8a9f}.count-detail-meta dd{margin:0;font-size:11px;color:#26354c}.count-detail-actions{display:grid;grid-template-columns:1fr 1.1fr 1.2fr;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid #edf0f4}.count-detail-actions button{font-size:11px;min-height:43px}.counts-expanded-workspace{margin-top:14px}.counts-workspace-modern{gap:12px}.counts-workspace-modern .count-location-workspace{box-shadow:none}

/* approved mobile scanner concept */
@media(max-width:720px){.mobile-scanner-hero span.ok i{background:#39c68b;box-shadow:0 0 0 4px rgba(57,198,139,.16)}.mobile-hero-icon{width:42px;height:42px;min-height:42px;padding:0;border:0;background:transparent;color:#fff;font-size:27px;border-radius:12px;align-self:center}.mobile-hero-icon:hover{background:rgba(255,255,255,.08)}.scanner-camera-modern{height:310px!important;min-height:310px!important;border-radius:18px!important;background:linear-gradient(135deg,#18212b,#05080d)!important;border:0!important;box-shadow:0 10px 28px rgba(6,27,52,.12)}.scanner-camera-modern:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 55% 50%,rgba(255,255,255,.08),transparent 48%)}.scanner-camera-modern .camera-off{color:#b8c5d1}.scanner-camera-modern .camera-off strong{font-size:15px}.scanner-camera-modern .camera-off span{font-size:11px}.scanner-camera-modern .scan-frame{inset:22% 17%}.scanner-camera-modern .scan-frame span{width:33px;height:33px;border-color:#fff}.scanner-modern-mobile .mobile-manual-row{margin:0;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:7px}.scanner-modern-mobile .mobile-manual-row input{min-height:46px;border-radius:999px;text-align:center;background:#fff;border:1px solid #dce3ed;color:#25354d}.scanner-modern-mobile .mobile-manual-row .primary{border-radius:50%;box-shadow:none}.scanner-result-thumb{width:58px;height:58px;display:grid;place-items:center;border:1px solid #dfe5ed;border-radius:12px;background:linear-gradient(180deg,#fff,#f5f7fa);color:#26354c}.fact-icon.purple{background:#f1eafe;color:#8248dc}.fact-icon.blue{background:#eaf3ff;color:#1769e8}.scanner-modern-mobile.active-count-mobile .scanner-camera-modern{height:190px!important;min-height:190px!important}
  .bottom-tabs{grid-template-columns:repeat(5,1fr);padding:7px 4px calc(7px + env(safe-area-inset-bottom));background:rgba(255,255,255,.985);box-shadow:0 -6px 24px rgba(31,48,76,.08)}.bottom-tabs button{min-height:58px;color:#53637a;font-size:11px}.bottom-tabs button.active{background:transparent;color:#1267e8}.bottom-tabs button.active::after{display:none}
}

@media(max-width:1100px) and (min-width:900px){.counts-master-detail{grid-template-columns:1fr}.counts-detail-card{min-height:0}.counts-detail-actions{margin-top:10px}}
@media(max-width:899px){.counts-master-detail{grid-template-columns:1fr}.counts-list-card{overflow-x:auto}.counts-list-head,.counts-session-row{min-width:760px}.counts-detail-card{min-height:0}.modern-stock-page,.modern-counts-page{max-width:none}}
@media(max-width:720px){.counts-list-head{display:none}.counts-session-row{min-width:0;grid-template-columns:88px minmax(0,1fr) 56px 22px;min-height:58px}.counts-session-row>span:nth-of-type(2),.counts-session-row>.session-row-progress,.counts-session-row>.session-scope{display:none}.counts-session-row>.session-row-name{display:block}.counts-session-row>span:nth-of-type(1){display:inline-flex}.counts-session-row>span:nth-of-type(3){display:block}.counts-list-toolbar{padding:10px}.counts-filter-control{min-width:90px}.counts-detail-card{padding:16px;min-height:0}.count-detail-meta>div{grid-template-columns:115px 1fr}.count-detail-actions{grid-template-columns:1fr 1fr}.count-detail-actions>.primary{grid-column:1/-1}.modern-counts-page .page-head{align-items:flex-start}.modern-counts-page .page-head>.primary{width:auto}}
@media(max-width:430px){.scanner-camera-modern{height:270px!important;min-height:270px!important}.counts-list-toolbar{flex-direction:column}.counts-filter-control{width:100%}.count-detail-metrics{gap:7px}.count-detail-metrics>div{padding:11px}.count-detail-meta>div{grid-template-columns:100px 1fr}}

/* v1.6.0 fidelity corrections */
@media(min-width:900px){
  .counts-list-card,.counts-detail-card{height:min(760px,calc(100vh - 205px));height:min(760px,calc(100dvh - 205px));min-height:610px}
  .counts-session-list{overflow:auto;min-height:0;flex:1}
  .counts-list-card{display:flex;flex-direction:column}
  .counts-detail-card{overflow:hidden}
  .count-detail-created{margin-bottom:14px}.count-detail-metrics{margin:14px 0}.count-detail-meta{margin-bottom:10px}.count-detail-meta>div{padding:5px 0}
  .sidebar-export{color:#eef5ff!important;border-color:rgba(255,255,255,.16)!important}.sidebar-export svg{color:#eef5ff}
}
@media(max-width:720px){
  .bottom-tabs{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-flow:column!important}
  .bottom-tabs button{min-width:0!important;max-width:none!important;padding-left:0!important;padding-right:0!important}
}
@media(max-width:430px){.scanner-camera-modern{height:248px!important;min-height:248px!important}}

/* v1.6.0 final concept alignment */
@media(min-width:900px){
  .counts-detail-card{position:relative;padding-bottom:76px!important}
  .count-detail-actions{position:absolute;left:22px;right:22px;bottom:18px;margin:0;background:#fff;padding-top:12px}
}

@media(max-width:720px){.scanner-modern-mobile .mobile-manual-row.with-add-product{grid-template-columns:minmax(0,1fr) 44px 44px}}
/* v1.6.0 scanner concept fidelity: camera actions live inside the preview. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* v1.6.0 final mobile scanner viewport fit */
@media(max-width:720px){
  .scanner-result-thumb{width:46px;height:46px;flex-basis:46px;border-radius:10px}
}

/* v1.6.1 mobile chrome compaction: dashboard stays desktop-only. */
@media(max-width:720px){
  .topbar .brand{gap:8px}.topbar .brand-mark{width:31px;height:31px;border-radius:9px}.topbar .brand strong{font-size:13px;line-height:1.05}.topbar .brand span{display:none!important}
  .topbar-right{gap:5px!important;max-width:52vw!important}.sync-chip{padding:4px 7px!important;font-size:11px!important;min-height:28px}.sync-chip .sync-dot{width:7px;height:7px}.pending-badge{height:17px;min-width:17px;font-size:11px;padding:0 4px}
  .mobile-presence{min-height:28px!important;padding:4px 7px!important;border-radius:999px!important}.mobile-presence-text{font-size:11px!important;white-space:nowrap}.live-ring{width:7px!important;height:7px!important}
  .content{padding-top:12px}
  .bottom-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-flow:column!important}
  .bottom-tabs button{min-height:54px!important;font-size:11px!important}
  .mobile-hero-icon{width:36px!important;height:36px!important;min-height:36px!important;font-size:23px!important}
}
@media(max-width:390px){.topbar-right{max-width:49vw!important}.sync-chip{padding-left:6px!important;padding-right:6px!important}}
/* v1.7 account, login, users, roles & permissions */
.login-shell{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 0,#eef5ff 0,transparent 38%),#f6f8fb;color:#172033}.login-card{width:min(430px,100%);background:#fff;border:1px solid #e2e7ee;border-radius:22px;box-shadow:0 24px 70px rgba(24,39,61,.12);padding:30px}.login-card.loading{width:min(340px,100%);text-align:center}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:30px}.login-brand .brand-mark{width:44px;height:44px}.login-brand strong,.login-brand span{display:block}.login-brand strong{font-size:17px}.login-brand span{font-size:11px;color:var(--muted);margin-top:3px}.login-copy h1{font-size:28px;letter-spacing:-.03em;margin:0 0 7px}.login-copy p{font-size:13px;color:#6c7a90;margin:0 0 22px;line-height:1.5}.login-card form label{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.login-card form label>span{font-size:11px;font-weight:800;color:#49586e}.login-card input{min-height:46px}.login-help{display:block;text-align:center;color:var(--muted);font-size:11px;margin-top:14px}
.account-menu-wrap{position:relative}.admin-chip{border:0;background:transparent;cursor:pointer;padding:3px 5px;border-radius:11px}.admin-chip:hover,.admin-chip[aria-expanded="true"]{background:#f2f6fb}.account-dropdown{position:absolute;right:0;top:45px;width:235px;background:#fff;border:1px solid #dfe5ed;border-radius:14px;box-shadow:0 18px 45px rgba(26,39,60,.16);padding:7px;z-index:90}.account-dropdown-head{padding:9px 10px 10px;border-bottom:1px solid #edf0f4;margin-bottom:5px}.account-dropdown-head strong,.account-dropdown-head small{display:block}.account-dropdown-head strong{font-size:12px}.account-dropdown-head small{font-size:11px;color:var(--muted);margin-top:2px}.account-dropdown>button{width:100%;min-height:38px;border:0;background:transparent;display:flex;align-items:center;gap:9px;border-radius:9px;padding:8px 10px;text-align:left;font-size:11px;color:#334155}.account-dropdown>button:hover{background:#f5f8fc}.account-dropdown>button.danger{color:#b42318}
.auth-manage-panel{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:none;padding:20px;margin-bottom:16px}.auth-manage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.auth-manage-head h2{font-size:18px;font-weight:800;margin:4px 0 4px;letter-spacing:-.01em}.auth-manage-head p{margin:0;color:var(--text-muted);font-size:13px}.auth-head-actions{display:flex;gap:8px;flex-wrap:wrap}.auth-manage-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:16px;align-items:start}.auth-manage-grid>.auth-users-card{grid-column:1;grid-row:1/span 2}.auth-manage-grid>.auth-devices-card,.auth-manage-grid>.auth-roles-card{grid-column:2}.auth-users-card,.auth-roles-card,.auth-devices-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.auth-card-title{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);background:#fff}.auth-card-title strong{font-size:15px;font-weight:800}.auth-card-title span{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--surface-sunken);color:var(--text-secondary);padding:3px 9px;border-radius:999px}.auth-user-list,.auth-role-list{display:flex;flex-direction:column}.auth-user-row,.auth-role-row{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 16px;border-bottom:1px solid #eef2f7}.auth-user-row>.secondary.small,.auth-role-row>.secondary.small{min-height:36px;padding:0 10px}.auth-role-row>.icon-button{min-height:36px;min-width:36px}.auth-user-row:last-child,.auth-role-row:last-child{border-bottom:0}.auth-user-row.inactive{opacity:.62}.auth-avatar{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:var(--theme-accent-soft);color:var(--theme-accent-dark);font-size:12px;font-weight:800;flex:0 0 auto}.auth-user-row .grow strong,.auth-user-row .grow small,.auth-role-row .grow strong,.auth-role-row .grow small{display:block}.auth-user-row .grow strong,.auth-role-row .grow strong{font-size:13.5px;font-weight:700;color:var(--text-primary)}.auth-user-row .grow small,.auth-role-row .grow small{font-size:12px;color:var(--text-muted);margin-top:2px}.user-status{font-size:12px;font-weight:700;border-radius:999px;padding:0 10px;height:24px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.user-status::before{content:'';width:7px;height:7px;border-radius:999px;background:currentColor;flex-shrink:0}.user-status.on{background:var(--surface-ok);color:var(--status-ok)}.user-status.off{background:var(--surface-sunken);color:var(--text-muted)}.role-permission-preview{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}.role-permission-preview span{font-size:11px;font-weight:700;color:var(--theme-accent-dark);background:var(--theme-accent-soft);border-radius:999px;padding:3px 9px}.account-limited-banner{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e3e8ef;border-radius:14px;padding:12px 14px;margin-bottom:14px}.account-limited-banner svg{color:#1267e8}.account-limited-banner strong,.account-limited-banner small{display:block}.account-limited-banner strong{font-size:12px}.account-limited-banner small{font-size:11px;color:#7e8ba0;margin-top:2px}
.permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 2px}.permission-option{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:9px!important;margin:0!important;padding:11px;border:1px solid #e2e7ee;border-radius:12px;background:#fff;cursor:pointer}.permission-option.selected{border-color:#a9c8f8;background:#f5f9ff}.permission-option input{width:auto;min-height:auto;margin-top:2px}.permission-option span strong,.permission-option span small{display:block}.permission-option span strong{font-size:11px;color:#27364b}.permission-option span small{font-size:11px;color:var(--muted);margin-top:3px}.account-check{padding-top:4px!important}.mobile-account-card{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:13px;border:1px solid #e2e8f0;border-radius:14px;margin-top:8px;background:#f8fafc}.mobile-account-card>.secondary{grid-column:auto}.mobile-account-card>.grow strong,.mobile-account-card>.grow small{display:block}.mobile-account-card>.grow strong{font-size:12px}.mobile-account-card>.grow small{font-size:11px;color:var(--muted);margin-top:2px}.mobile-account-card button{grid-column:1/-1;width:100%}
@media(max-width:900px){.auth-manage-grid{grid-template-columns:1fr}.auth-manage-grid>.auth-users-card,.auth-manage-grid>.auth-devices-card,.auth-manage-grid>.auth-roles-card{grid-column:auto;grid-row:auto}.auth-manage-head{flex-direction:column}.auth-head-actions{width:100%}.auth-head-actions button{flex:1}.auth-user-row{display:grid;grid-template-columns:34px 1fr auto}.auth-user-row>button{grid-column:auto}.auth-user-row>.secondary.small{font-size:11px;padding:5px 7px}.permission-grid{grid-template-columns:1fr}.login-card{padding:24px 20px;border-radius:18px}.login-shell{padding:16px}}
@media(max-width:520px){.auth-user-row{grid-template-columns:34px 1fr}.auth-user-row .user-status{grid-column:2}.auth-user-row>button{grid-column:1/-1;width:100%}.auth-role-row{flex-wrap:wrap}.auth-role-row>.grow{width:100%;flex-basis:100%}}

/* v1.7.1 account/help/notifications/scanner/product image hardening */
.desktop-tool-icon{position:relative}
.tool-badge{position:absolute;top:-4px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
.notification-list{display:grid;gap:10px}
.notification-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border,#d8dee9);border-radius:12px;background:#fff}
.notification-row strong,.notification-row small{display:block}.notification-row small{margin-top:3px;color:var(--muted,#667085)}
.notification-dot{width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--status-info,#175cd3);flex:none}.notification-row.warn .notification-dot{background:#f59e0b}.notification-row.error .notification-dot{background:#ef4444}.notification-row.ok .notification-dot{background:#10b981}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.help-grid section{border:1px solid var(--border,#d8dee9);border-radius:14px;padding:16px;background:#fff}.help-grid h3{margin:8px 0 5px}.help-grid p{margin:0;color:var(--muted,#667085);line-height:1.45}
.account-security-card .primary{margin-top:8px}.account-security-card .danger{margin-top:8px}
.product-image-editor{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid var(--border,#d8dee9);border-radius:14px;background:#f8fafc}.product-image-editor h3{margin:0 0 3px}.product-image-editor p{margin:0;color:var(--muted,#667085);font-size:13px}.product-image-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.product-image-thumb{display:inline-grid;place-items:center;overflow:hidden;border-radius:10px;background:#f1f5f9;border:1px solid #dbe3ee;flex:none}.product-image-thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}.product-image-thumb.placeholder{color:#64748b}.product-image-thumb.editor-preview{border-radius:14px;background:#fff}.stock-product-thumb.product-image-thumb{vertical-align:middle}
.camera-box.camera-live{background:#080d16}.camera-box.camera-live .scan-frame{z-index:3}.camera-box.camera-live .scanner-camera-overlay{z-index:4}
@media(max-width:700px){.help-grid{grid-template-columns:1fr}.product-image-editor{align-items:flex-start}}

/* v1.7.4 desktop voorraad/scanner density redesign */
@media(min-width:721px){
  .modern-stock-page .page-head{margin-bottom:12px}.modern-stock-page .page-head>button{display:none}
  .modern-stock-page .stock-kpi-grid{margin-bottom:12px}.table-search-position .search-field{min-height:43px}
  .stock-product-identity{display:grid;grid-template-columns:34px minmax(100px,120px) 110px;align-items:center;gap:7px;min-width:275px}
  .stock-product-name{min-width:0}.stock-product-name strong,.stock-product-name small{display:block}.stock-product-name strong{font-size:12px;color:#17233a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stock-product-name small{font-size:11px;color:#7d899a;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stock-barcode-block{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}.mini-barcode{display:block;max-width:104px;height:24px;fill:#172033}.stock-barcode-block span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#65748a;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .scanner-desktop-page>.page-head{margin-bottom:12px}
  .scanner-desktop-camera-meta{margin-top:12px}.scanner-desktop-camera-meta .side-card{margin:0}.scanner-desktop-count-locations .location-chip-row{display:flex;flex-wrap:wrap;gap:8px}.scanner-desktop-count-locations .location-chip-row button{min-width:110px;flex:0 0 auto}
}

/* v1.7.4 — desktop telling + beheerconsolidatie */
@media(min-width:721px){
  /* Voorraad tellen: ruimere desktopdialoog en grotere bedieningsvlakken. */
  .modal-sheet.count-modal-sheet{width:min(900px,calc(100vw - 64px));max-height:92vh}
  .count-modal-sheet .modal-header{padding:22px 26px}
  .count-modal-sheet .modal-header h2{font-size:23px}
  .count-modal-sheet .modal-header p{font-size:14px;margin-top:5px}
  .count-modal-sheet .editor-form{padding:22px 26px 24px}
  .count-modal-sheet .count-context{padding:16px 18px;gap:16px;margin-bottom:12px;border-radius:16px}
  .count-modal-sheet .count-context span{font-size:13px}
  .count-modal-sheet .count-context strong{font-size:19px}
  .count-modal-sheet .count-context small{font-size:12px;margin-top:2px}
  .count-modal-sheet .count-editor-form>label{margin-bottom:14px}
  .count-modal-sheet .count-editor-form>label>span{font-size:13px}
  .count-modal-sheet .count-editor-form select{min-height:52px;height:52px;font-size:15px;padding:10px 13px}
  .count-modal-sheet .count-quantity-control{grid-template-columns:minmax(260px,1fr) auto;gap:14px;margin:8px 0 14px}
  .count-modal-sheet .count-quantity-control input{min-height:56px;font-size:22px;padding:10px 12px;border-radius:12px}
  .count-modal-sheet .compact-quick-count{grid-template-columns:repeat(5,50px);gap:7px}
  .count-modal-sheet .compact-quick-count button{width:50px;min-height:56px;border-radius:11px;font-size:13px;padding:6px 2px}
  .count-modal-sheet .total-preview{padding:14px 16px;margin:12px 0 11px;border-radius:14px}
  .count-modal-sheet .total-preview span{font-size:12px}
  .count-modal-sheet .total-preview strong{font-size:24px}
  .count-modal-sheet .total-preview small{font-size:12px;margin-top:5px}
  .count-modal-sheet .count-note-disclosure>summary{min-height:42px;padding:11px 13px;font-size:12px}
  .count-modal-sheet .form-actions{margin-top:16px;padding-top:15px;gap:10px}
  .count-modal-sheet .form-actions button{min-height:50px;padding:10px 18px;font-size:14px;border-radius:11px}
}
/* UI-043 (2 sep 2026): the @media(min-width:721px) block opened above was never closed; every rule after it — and the
   first 47 lines of 20-styles.css — silently became desktop-only. Closed here; 20-styles.css now opens its own block. */
/* §6.8 rapportagebereik — gedeeld door Dashboard en Operaties › Rapportages. Bewust hier en niet in
   een feature-CSS: één klassenset, zodat de balk op beide plekken identiek leest. */
.warehouse-scope-bar{display:grid;gap:10px;border:1px solid var(--line,#dce3ec);border-radius:16px;background:var(--surface,#fff);padding:12px 14px}
.warehouse-scope-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.warehouse-scope-select{display:flex;align-items:center;gap:9px;margin:0;color:var(--muted,#5f6f86);font-size:13px;font-weight:750}
.warehouse-scope-select select{min-height:40px;height:40px;border:1px solid var(--line,#d6deea);border-radius:11px;background:#fff;padding:0 12px;font-weight:700}
.warehouse-scope-note{margin:0;color:var(--muted,#5f6f86);font-size:13px}
.warehouse-scope-note strong{color:var(--ink,#132039)}
.warehouse-scope-split{list-style:none;margin:0;padding:0;display:grid;gap:6px;border-top:1px solid var(--line,#e8edf3);padding-top:10px}
.warehouse-scope-split li{display:grid;grid-template-columns:minmax(140px,1.4fr) auto;grid-template-areas:'name units' 'detail detail';gap:2px 12px;align-items:baseline;padding:7px 9px;border-radius:11px;background:var(--surface-2,#f4f7fb)}
.warehouse-scope-split .scope-split-name{grid-area:name;font-weight:750;color:var(--ink,#132039)}
.warehouse-scope-split .scope-split-units{grid-area:units;font-size:18px}
.warehouse-scope-split small{grid-area:detail;color:var(--muted,#5f6f86)}
.warehouse-scope-split .scope-split-total{background:#eaf2ff;border:1px solid #c3d9fb}
.warehouse-scope-split .scope-split-orphan{background:#fff8e8;border:1px solid #f1ce7c}
@media(max-width:720px){.warehouse-scope-head{align-items:flex-start;flex-direction:column;gap:8px}.warehouse-scope-select{width:100%}.warehouse-scope-select select{flex:1}}
/* Gebruikers & rechten (kit 6 sep 2026): rol als tag, magazijntoegang als chips — de belangrijkste eigenschap van een account in een tweemagazijnbedrijf */
.auth-role-tag{flex-shrink:0}
.auth-wh-chips{display:inline-flex;gap:5px;flex-shrink:0;align-items:center}
.auth-wh-chip{height:24px;padding:0 9px;border-radius:999px;border:1px solid var(--line,#e2e8f0);background:var(--surface-sunken,#eef2f7);color:var(--text-muted,#98a5b8);font-size:11px;font-weight:800;display:inline-flex;align-items:center}
.auth-wh-chip.on{background:var(--theme-accent-soft,#e9faf7);border-color:rgba(var(--theme-rgb,14,147,132),.35);color:var(--theme-accent-dark,#08766a)}
.auth-wh-all{color:var(--text-muted,#98a5b8);font-size:12px}
.auth-pw-flag{height:26px;min-height:26px;font-size:11px;padding:0 9px}
.auth-user-row{gap:10px;flex-wrap:wrap}
/* UI/UX-audit modules (items #42/#43/#44+): additive rules that used to live at the end of 10-styles.css.
   Cascade position is unchanged (loaded directly after 10-styles.css, before the 20/30 override layers). */
/* ===== UI/UX-audit 2 sep 2026 (item #42) — top-level, applies to every breakpoint ===== */
/* UI-007: tablet (721–899 px) still renders the desktop scanner layout while the grid needs ≥840 px. */
@media(max-width:1120px){.scanner-desktop-workspace{grid-template-columns:1fr}}
/* UI-010: long product names must truncate inside the quality row instead of widening the list. */
.quality-row-main>div{min-width:0;flex:1 1 0;overflow:hidden}
.quality-row-main strong,.quality-row-main small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* UI-002: the idle camera surface is a real button ("Tik om … te starten"). */
button.camera-off-start{width:100%;height:100%;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
button.camera-off-start:focus-visible{outline:3px solid rgba(255,255,255,.7);outline-offset:-6px}
/* UI-003/004: pager under the mobile stock list and the product card grid. */
.mobile-stock-footer,.product-grid-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 4px 4px;font-size:12px;color:#667085}
.mobile-stock-footer .table-pagination,.product-grid-footer .table-pagination{flex-wrap:wrap}
/* UI-005: quantity + reason modal. */
.quantity-reason-modal .quantity-field{display:flex;align-items:center;gap:8px}
.quantity-reason-modal .quantity-field input{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.quantity-reason-modal .quantity-unit{font-size:13px;color:#667085;white-space:nowrap}
.quantity-reason-modal label.has-error input,.quantity-reason-modal label.has-error select{border-color:#d92d20;box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.quantity-reason-modal .field-error{display:block;margin-top:4px;color:var(--status-error);font-size:12px}
.quantity-reason-modal label>small{display:block;margin-top:4px;color:#667085;font-size:12px}
.quantity-reason-modal .migration-note{margin-bottom:4px}
.discard-summary{display:grid;gap:7px}
.discard-summary strong{font-weight:750}.scanner-desktop-camera-column .camera-box{min-height:430px;height:min(56vh,560px);margin:0}.scanner-desktop-camera-column .camera-off{height:100%;display:grid;place-items:center;align-content:center;gap:8px}.scanner-desktop-camera-column .scan-frame{transform:scale(1.08)}
/* UI-019: unsaved-changes guard inside Modal (shared). */
.modal-close-guard{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:#fffaeb;border:1px solid #fedf89;color:#93370d;border-radius:12px;padding:10px 12px;margin-bottom:12px}
.modal-close-guard strong{display:block;font-size:13px}.modal-close-guard small{display:block;font-size:12px;color:var(--status-warn)}
.modal-close-guard-actions{display:flex;gap:8px;flex-wrap:wrap}.modal-close-guard-actions button{min-height:38px}
/* UI-044: popover may be viewport-wide on phones. */
.ui-select-popover{max-width:none}
/* UI-012 ProductPicker · UI-013 count-line cards · UI-052 toast stack · UI-053 icon chevron · UI-054 empty-state action */
.product-picker{position:relative;min-width:0}.product-picker-input{width:100%}.product-picker-option{display:flex;flex-direction:column;min-width:0;text-align:left}.product-picker-option strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-picker-option small{color:var(--text-muted);font-size:12px}.product-picker-popover button.highlighted{background:#f4f7fb}.product-picker-empty{padding:10px;color:var(--text-muted);font-size:13px}
.count-line-list{display:flex;flex-direction:column;gap:8px}.count-line-card{background:#fff;border:1px solid var(--border-default);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}.count-line-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.count-line-card-head strong{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.count-line-card>small{color:var(--text-muted);font-size:12px}.count-line-card-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.count-line-card-figures span{display:flex;flex-direction:column}.count-line-card-figures small{font-size:11px;color:var(--text-muted)}.count-line-card-figures strong{font-size:15px;font-variant-numeric:tabular-nums}.count-line-card-figures .diff-warn strong{color:var(--status-warn)}.count-line-card-figures .diff-ok strong{color:var(--status-ok)}.count-line-note{margin:0;font-size:12px;color:var(--text-muted)}
.toast-stack{display:flex;flex-direction:column;gap:8px;align-items:center}
.ui-select-chevron svg{transform:rotate(90deg)}
.empty-state-action,.op-empty-action{margin-top:10px;display:flex;justify-content:center}
/* UI-015: relative-size code chip stayed below 11 px. */
.pair-url{font-size:11px}
.admin-chip b svg{transform:rotate(90deg);vertical-align:middle}
/* UI-020: Beheer categories */
.manage-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.manage-nav-item{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text-secondary);font-weight:700;font-size:13px;cursor:pointer}.manage-nav-item:hover{background:var(--surface-raised)}.manage-nav-item.active{background:var(--theme-navy);border-color:var(--theme-navy);color:#fff}.manage-nav-item.active .manage-nav-badge{background:rgba(255,255,255,.18);color:#fff}.manage-nav-badge{min-width:20px;padding:0 6px;border-radius:999px;background:#eef2f6;color:var(--text-strong);font-size:11px;font-weight:700;line-height:20px;text-align:center}.manage-nav-badge.warn{background:#fff3e8;color:var(--status-warn)}.manage-nav-badge.error{background:#fee4e2;color:var(--status-error)}
.manage-grid.manage-columns-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.manage-nav{gap:6px}.manage-nav-item{flex:1 1 calc(50% - 6px);justify-content:center;padding:8px 10px;font-size:12px}.manage-grid.manage-columns-grid.two{grid-template-columns:1fr}}
@media(min-width:721px) and (max-width:1100px){.manage-grid.manage-columns-grid.two{grid-template-columns:1fr}}
.quality-list-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 2px 0;color:var(--text-muted);font-size:12px}
/* UI-008/009: scroll-affordance for horizontal strips (fade at the overflowing edge + thin visible scrollbar). */
/* The fade only where the strip can actually overflow (phones/tablets); on wide screens everything fits and a fade would suggest hidden content. */
@media(max-width:1024px){.operations-tabs{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),rgba(0,0,0,.15));mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),rgba(0,0,0,.15))}}
@media(max-width:720px){.stock-kpi-grid,.location-chip-row{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),rgba(0,0,0,.15));mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),rgba(0,0,0,.15))}}
.stock-kpi-grid,.operations-tabs,.location-chip-row{scrollbar-width:thin;scrollbar-color:#c7d0dc transparent}
.stock-kpi-grid::-webkit-scrollbar,.operations-tabs::-webkit-scrollbar,.location-chip-row::-webkit-scrollbar{height:4px}.stock-kpi-grid::-webkit-scrollbar-thumb,.operations-tabs::-webkit-scrollbar-thumb,.location-chip-row::-webkit-scrollbar-thumb{background:#c7d0dc;border-radius:999px}
/* UI-056 feature boundary · notification actions · keyboard-focusable rows */
.feature-boundary{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid #fedf89;background:#fffaeb;color:#93370d;border-radius:12px}.feature-boundary small{display:block;color:var(--status-warn);font-size:12px}
.notification-action{margin-top:6px}
tr[role=button]:focus-visible,.mobile-stock-card[role=button]:focus-visible{outline:2px solid var(--theme-accent);outline-offset:2px}
/* Shared Tabs */
.ui-tabs{display:flex;gap:var(--space-2);flex-wrap:wrap;min-width:0}.ui-tabs>button{min-height:var(--control-height-compact)}
.ui-tabs.operations-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ui-tabs>button:focus-visible{outline:2px solid var(--theme-accent);outline-offset:2px}
.ui-tabs-badge{min-width:20px;padding:0 6px;border-radius:var(--radius-pill);background:var(--surface-sunken);font-size:var(--font-size-badge);font-weight:700;line-height:20px;text-align:center}
/* Scanner failure workflow + ontvangst/OCR-flow */
.barcode-link-actions{margin-top:var(--space-2)}.scan-failure-filters{margin:0 0 var(--space-2)}.scan-failure-location-filter{display:block;max-width:360px;margin:0 0 var(--space-3)}.scan-failure-location-filter>span{display:block;font-size:var(--font-size-meta);color:var(--text-muted);margin-bottom:4px}
.scan-failure-note{display:block;color:var(--text-secondary);font-style:italic}.scan-failure-link{min-width:220px}
.ocr-line-head{font-size:var(--font-size-meta);color:var(--text-muted);font-weight:600}.ocr-diff{font-variant-numeric:tabular-nums;white-space:nowrap}.ocr-diff.warn{color:var(--status-warn)}.ocr-diff.ok{color:var(--status-ok)}.ocr-in-receipt{align-self:end}
/* Ronde 3 shared primitives */
.unit-segment-field{display:grid;gap:6px;margin-bottom:var(--space-2)}.unit-segment-label{font-size:var(--font-size-meta);font-weight:var(--weight-semibold);color:var(--text-strong)}
.unit-segment{display:flex;flex-wrap:wrap;gap:6px}.unit-segment-item{min-height:var(--control-height-touch);padding:6px 12px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-strong);font-weight:var(--weight-semibold);font-size:var(--font-size-meta)}
.unit-segment-item.active{background:var(--surface-info);border-color:var(--border-info);color:var(--status-info)}.unit-segment-item:focus-visible{outline:2px solid var(--status-info);outline-offset:2px}
.field-hint{display:block;color:var(--text-muted);font-size:var(--font-size-meta);margin-top:2px}
.loading-state{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text-secondary);font-size:var(--font-size-body);padding:var(--space-3) 0}.loading-state.compact{padding:0}
.loading-spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--border-default);border-top-color:var(--status-info);animation:vs-spin .8s linear infinite}
@keyframes vs-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Item #59: Location/Supplier/OrderPicker-popovers zijn position:fixed en erfden .ui-select-popover{min-width:100%;right:0} (bedoeld voor de
   absolute SelectMenu-popover) → 100% van de viewport. Eigen breedte: inline width van de picker, gecapt op 480px / viewport. */
.ui-select-popover.product-picker-popover{min-width:0;right:auto;max-width:min(480px,calc(100vw - 16px))}
/* Ronde 17 runtime-metrics (Beheer › Systeem) */
.runtime-metrics{margin-top:var(--space-2)}.runtime-metrics summary{cursor:pointer;font-weight:var(--weight-semibold);font-size:var(--font-size-meta)}.runtime-metrics-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 12px;margin-top:6px}.runtime-metrics-list>div{display:flex;justify-content:space-between;gap:8px;font-size:var(--font-size-meta)}.runtime-metrics-list code{color:var(--text-secondary)}

/* Magazijntoegang in de gebruikersbewerker (BUGFIX-LOG #88). `.check-label` is gemaakt om náást een
   form-grid-veld uit te lijnen (padding-top:21px); in een verticale lijst geeft dat gaten. */
.warehouse-access-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.warehouse-access-field .field-label{font-size:12px;font-weight:800;color:#475467}
.warehouse-access-field .field-hint{margin:0 0 2px}
.check-row-group{display:flex;flex-direction:column;gap:4px}
.check-row-group .check-label{padding-top:0;margin-bottom:0;min-height:var(--touch-target,44px)}

/* Toestellenkaart in Beheer (#90, M-01). Zelfde ritme als .auth-user-row, zodat de drie kaarten
   in het beheergrid als één geheel lezen. */
.auth-devices-card{display:flex;flex-direction:column;gap:0}.auth-devices-card>.field-hint{margin:10px 16px 8px}
.auth-device-list{display:flex;flex-direction:column;gap:6px;padding:0 12px 12px}
.auth-device-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:11px}
.auth-device-row .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.auth-device-row strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-device-row small{font-size:11.5px;color:var(--muted)}
/* UI-043: desktop-only stock-table tuning (was implicitly inside the unclosed @media of 10-styles.css). */
@media(min-width:721px){
  .stock-product-identity{grid-template-columns:38px minmax(185px,1fr) 128px;gap:10px;min-width:360px}
  .stock-product-name strong{font-size:12.5px}
  .stock-barcode-block{justify-self:end;width:128px}
  .stock-barcode-block .mini-barcode{max-width:122px;width:122px}
  .stock-barcode-block span{max-width:126px}

  /* Gecombineerde beheertegels. */
  .sync-phone-card{grid-column:auto}
  .sync-phone-grid{display:flex;flex-direction:column;gap:12px;align-items:stretch}
  .sync-phone-pairing,.sync-phone-status{min-width:0}
  .sync-phone-pairing{display:flex;flex-direction:column;gap:9px}
  .sync-phone-pairing p{margin:0}
  .sync-phone-pairing .qr-wrap{max-width:176px;margin:8px auto 10px}
  .sync-phone-status{display:flex;flex-direction:column;gap:12px}
  .sync-main-switch{margin:0;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}
  .sync-queue-embedded{border:1px solid var(--line);border-radius:13px;padding:12px;background:#fbfcfe}
  .manage-subsection{margin-top:10px;padding-top:13px;border-top:1px solid var(--line)}
  .manage-subsection-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
  .manage-subsection-head strong,.manage-subsection-head small{display:block}
  .manage-subsection-head strong{font-size:13px;color:#243247}
  .manage-subsection-head small{font-size:11px;color:var(--muted);margin-top:2px}
  .subsection-count,.sync-state-pill{flex:0 0 auto;font-size:11px;font-weight:850;border-radius:999px;padding:4px 7px;background:#eef2f7;color:#58677b}
  .sync-state-pill.ok{background:#eaf8f1;color:#087952}
  .sync-state-pill.warn{background:#fff4e5;color:#b54708}
  .compact-supplier-list{max-height:188px;overflow:auto}
  .backup-security-box{margin-top:11px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#f8fafc;display:flex;flex-direction:column;gap:10px}
  .backup-security-copy{display:flex;align-items:flex-start;gap:9px}
  .backup-security-copy strong,.backup-security-copy small{display:block}
  .backup-security-copy strong{font-size:12px;color:#27364b}
  .backup-security-copy small{font-size:11px;line-height:1.4;color:var(--muted);margin-top:2px}
  .backup-security-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:#eef2f7;color:#475467}
  .import-export-subsection{display:flex;flex-direction:column;gap:8px}
  .import-export-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .import-export-actions button{min-width:0}
  .sync-activity-card{align-self:start}
  .sync-activity-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fbfcfe;margin-top:2px}
  .sync-activity-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 12px;border-bottom:1px solid #edf1f5;min-width:0}
  .sync-activity-row:last-of-type{border-bottom:0}
  .sync-activity-row>div{min-width:0;flex:1}
  .sync-activity-row strong,.sync-activity-row small{display:block}
  .sync-activity-row strong{font-size:12px;color:#26354a}
  .sync-activity-row small{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35;overflow-wrap:anywhere}
  .sync-activity-row.attention{background:#fffaf3}
  .sync-activity-endpoint{display:block;padding:9px 12px;background:#f8fafc;color:#667085;font-size:11px;overflow-wrap:anywhere}
}

@media(max-width:900px){
  .sync-phone-card{grid-column:auto}
  .sync-phone-grid{display:flex;flex-direction:column;gap:12px}
  .import-export-actions{grid-template-columns:1fr}
}
@media(max-width:720px){
  .sync-phone-card{grid-column:auto}
  .sync-phone-grid{display:flex;flex-direction:column;gap:12px}
  .manage-subsection{margin-top:8px;padding-top:11px}
  .backup-security-box{padding:10px}
}

/* v1.7.5 — compactere desktopscanner en echte beheer-kolommen */
.manage-columns-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.manage-column{display:flex;flex-direction:column;gap:14px;min-width:0}
.manage-column>.manage-card{margin:0;min-width:0}
.locations-master-card .import-export-subsection{padding:12px;border:1px solid var(--line);border-radius:13px;background:#f8fafc}
.locations-master-card .import-export-subsection .manage-subsection-head{margin-bottom:2px}

@media(min-width:721px){
  .scanner-desktop-count-locations-inline .location-chip-row{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:5px!important;overflow:visible;padding:0!important}
  .scanner-desktop-count-locations-inline .location-chip-row button{width:100%;min-width:0!important;min-height:var(--control-height-touch)!important;padding:6px 10px!important;font-size:12px;border-radius:9px;overflow:hidden;text-overflow:ellipsis}
  .scanner-desktop-count-locations-inline .progress-track{height:5px}

  /* Beheer: elke hoofdkolom stapelt zelfstandig, zodat geen lege grid-rijen ontstaan. */
  .manage-columns-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sync-phone-card{width:100%;grid-column:auto!important}
  .sync-phone-pairing .qr-wrap{max-width:154px}
  .sync-phone-pairing .qr-svg{border-width:6px}
  .sync-phone-card .pair-url{font-size:11px;padding:7px}
}

@media(min-width:721px) and (max-width:1100px){
  .manage-columns-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .manage-columns-grid{grid-template-columns:1fr;gap:10px}
  .manage-column{gap:10px}
  .locations-master-card .import-export-subsection{padding:10px}
}

/* v1.7.8 — desktop full-sweep polish and responsive hardening */
@media(min-width:721px){
  /* Alle kwaliteitsfilters blijven direct zichtbaar; geen verborgen horizontale filterstrip. */
  .quality-filters{flex-wrap:wrap;overflow:visible;align-items:center}
  .quality-filters button{flex:0 0 auto}
  .table-pagination button{min-width:34px;min-height:34px;height:34px;padding:5px 10px;font-size:11px}
  .counts-list-footer button{min-width:34px;min-height:34px;height:34px;padding:5px 10px;font-size:11px}
  .counts-list-footer{min-height:48px}

  /* Tellingen zijn op desktop beter leesbaar zonder de master-detailverhouding te verliezen. */
  .counts-list-head{font-size:11px}
  .counts-session-row{font-size:11px;min-height:66px}
  .session-row-name{font-size:11px}

  /* Icon-only zoekknop houdt hetzelfde royale klikvlak als het invoerveld. */
  .scanner-desktop-search .primary.square{min-width:46px;min-height:46px}
}

/* 1280px laptops: voorkom horizontaal wegvallende voorraadbediening. */
@media(min-width:721px) and (max-width:1340px){
  .stock-product-identity{grid-template-columns:36px minmax(150px,1fr) 112px;gap:8px;min-width:300px}
  .stock-barcode-block{width:112px}
  .stock-barcode-block .mini-barcode{width:108px;max-width:108px}
  .stock-barcode-block span{max-width:110px}
  .table-footer{gap:8px}
  .table-pagination{gap:5px}
}

/* Focusweergave is overal zichtbaar en consistent op desktop. */
@media(min-width:721px){
  button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(18,103,232,.28);outline-offset:2px}
  .desktop-sidebar-nav button:focus-visible{outline-color:rgba(255,255,255,.55)}
}

/* v1.7.8 desktop polish, privacy states and activity audit */

.stock-kpi.modern.restricted .stock-kpi-icon{background:#f2f4f7;color:#667085}
.stock-product-identity .missing-code-status,.mobile-stock-card .missing-code-status{display:inline-flex;align-items:center;justify-content:center;min-width:112px;min-height:27px;padding:5px 9px;border:1px solid #f04438;background:#fff1f2;color:#b42318;border-radius:6px;font-size:11px;font-weight:850;letter-spacing:.035em;line-height:1;text-transform:uppercase;white-space:nowrap}
.stock-barcode-block .stock-code-only{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#475467;font-weight:650;letter-spacing:.015em;text-align:center;max-width:138px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.counts-pagination{display:flex!important;align-items:center;gap:6px!important}
.counts-pagination label{display:flex;align-items:center;gap:5px;color:#667085;font-size:11px}
.counts-pagination select{height:34px;min-width:54px;border:1px solid #d8e0eb;border-radius:8px;background:#fff;padding:4px 21px 4px 8px;font-size:11px;color:#344054}
.counts-pagination .page-indicator{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:34px;color:#344054;font-weight:750;font-size:11px}
.counts-pagination button:disabled{opacity:.4;cursor:not-allowed}
.modal-sheet.help-modal-sheet{width:min(780px,calc(100vw - 48px));max-height:min(720px,88vh)}
.help-modal-sheet .modal-header{padding:15px 18px 12px}
.help-modal-sheet .modal-body{padding:12px 16px 16px;overflow:auto}
.help-modal-sheet .help-grid{gap:10px}
.help-modal-sheet .help-grid section{padding:13px 14px;min-height:0}
.help-modal-sheet .help-grid section>svg{width:20px;height:20px}
.help-modal-sheet .help-grid h3{font-size:14px;margin:6px 0 3px}
.help-modal-sheet .help-grid p{font-size:11px;line-height:1.42;margin:0;color:#667085}
.manage-card-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.manage-card-title-row h3{margin-top:0}
.manage-card-title-row p{margin-bottom:0}
.active-user-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}
.active-user-summary>div{padding:9px 8px;border:1px solid #e5eaf1;border-radius:10px;background:#f8fafc;text-align:center}
.active-user-summary span{display:block;font-size:11px;color:#667085}
.active-user-summary strong{display:block;margin-top:3px;font-size:18px;color:#17233a}
.active-user-list{display:grid;gap:6px;margin:8px 0 12px}
.active-user-row{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid #e7ecf2;border-radius:9px;background:#fff}
.active-user-dot{width:8px;height:8px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 3px #e8f8f0}
.active-user-row strong{display:block;font-size:11px;color:#17233a}.active-user-row small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.activity-log-head{display:flex;justify-content:space-between;align-items:center;padding-top:10px;margin-top:6px;border-top:1px solid #edf0f4;font-size:11px}.activity-log-head span{color:var(--muted)}
.activity-log-list{display:grid;gap:0;max-height:330px;overflow:auto;margin-top:6px;border:1px solid #e7ecf2;border-radius:9px;background:#fff}
.activity-log-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:8px 9px;border-bottom:1px solid #eef1f5}.activity-log-row:last-child{border-bottom:0}
.activity-log-time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted);padding-top:1px}.activity-log-row strong{display:block;font-size:11px;color:#344054}.activity-log-row small{display:block;font-size:11px;color:var(--muted);margin-top:2px;white-space:normal;word-break:break-word}.activity-log-empty{padding:10px;border:1px dashed #d8e0eb;border-radius:9px;color:var(--muted);font-size:11px}
@media(max-width:720px){.modal-sheet.help-modal-sheet{width:calc(100vw - 20px);max-height:92vh}.help-modal-sheet .help-grid{grid-template-columns:1fr}.active-user-summary{grid-template-columns:repeat(3,1fr)}}

.active-user-dot.scanning{background:#1570ef;box-shadow:0 0 0 3px #eaf2ff}.active-user-row.scanning{border-color:#c9dcff;background:#f8fbff}.user-status.scan{background:#eaf2ff;color:#175cd3}
.manage-column-system .system-card{order:1}.manage-column-system .scanner-settings-card{order:2}.manage-column-system .user-activity-card{order:3}

/* v1.7.9 — cohesive UI, theme templates, interactive audit and field workflow */
.app-shell{--theme-accent:#1267e8;--theme-accent-dark:#0b55c6;--theme-accent-soft:#eef5ff;--theme-rgb:18,103,232;--theme-navy:#061b36;--theme-navy-2:#082747;--accent:var(--theme-accent);--accent-dark:var(--theme-accent-dark);--accent-soft:var(--theme-accent-soft)}
/* Vier extra thema's (7 sep 2026): meer keuze en meer kleur in de app; zelfde tokenvorm, dus alles kleurt mee. */
/* "blue" is de basisstand van .app-shell zonder attribuut; de themategel heeft daarom een eigen blok
   nodig, anders toont die tegel het ACTIEVE thema in plaats van blauw. */
.theme-template[data-theme="blue"]{--theme-accent:#1267e8;--theme-accent-dark:#0b55c6;--theme-accent-soft:#eef5ff;--theme-rgb:18,103,232;--theme-navy:#061b36;--theme-navy-2:#082747}
.app-shell[data-theme="ocean"],.theme-template[data-theme="ocean"],[data-theme="ocean"]{--theme-accent:#0b7fc4;--theme-accent-dark:#0a639b;--theme-accent-soft:#e8f4fd;--theme-rgb:11,127,196;--theme-navy:#08283d;--theme-navy-2:#0d3d5c}
.app-shell[data-theme="forest"],.theme-template[data-theme="forest"],[data-theme="forest"]{--theme-accent:#2f8f4e;--theme-accent-dark:#22703c;--theme-accent-soft:#eaf8ee;--theme-rgb:47,143,78;--theme-navy:#102b19;--theme-navy-2:#1a4327}
.app-shell[data-theme="amber"],.theme-template[data-theme="amber"],[data-theme="amber"]{--theme-accent:#b7791f;--theme-accent-dark:#8f5c12;--theme-accent-soft:#fdf6e7;--theme-rgb:183,121,31;--theme-navy:#33260d;--theme-navy-2:#4d3a14}
.app-shell[data-theme="plum"],.theme-template[data-theme="plum"],[data-theme="plum"]{--theme-accent:#a2317c;--theme-accent-dark:#7d2560;--theme-accent-soft:#fdeef7;--theme-rgb:162,49,124;--theme-navy:#2f1027;--theme-navy-2:#48193c}
.app-shell[data-theme="green"],.theme-template[data-theme="green"]{--theme-accent:#0f9f6e;--theme-accent-dark:#087a54;--theme-accent-soft:#eafaf4;--theme-rgb:15,159,110;--theme-navy:#062d29;--theme-navy-2:#08423a}
.app-shell[data-theme="purple"],.theme-template[data-theme="purple"]{--theme-accent:#7c3aed;--theme-accent-dark:#6425d0;--theme-accent-soft:#f3edff;--theme-rgb:124,58,237;--theme-navy:#21123b;--theme-navy-2:#301758}
.app-shell[data-theme="orange"],.theme-template[data-theme="orange"]{--theme-accent:#e66a16;--theme-accent-dark:#bd4e08;--theme-accent-soft:#fff3e8;--theme-rgb:230,106,22;--theme-navy:#34200e;--theme-navy-2:#4a2b0d}
.app-shell[data-theme="slate"],.theme-template[data-theme="slate"]{--theme-accent:#475569;--theme-accent-dark:#334155;--theme-accent-soft:#eef2f6;--theme-rgb:71,85,105;--theme-navy:#101827;--theme-navy-2:#172235}
.app-shell .primary{background:var(--theme-accent);border-color:var(--theme-accent)}.app-shell .desktop-sidebar-nav button.active{background:rgba(var(--theme-rgb),.32);border-color:transparent}
.app-shell .primary:hover{background:var(--theme-accent-dark)}
.app-shell .desktop-sidebar{background:var(--theme-navy)}
.app-shell .bottom-tabs button.active,.app-shell .text-action,.app-shell .scanner-qty-control button{color:var(--theme-accent)}
.app-shell .progress-track>span,.app-shell .session-row-progress>i em,.app-shell .mini-progress>i{background:var(--theme-accent)}
.app-shell .counts-session-row.selected{box-shadow:inset 3px 0 var(--theme-accent)}
.app-shell .location-chip-row button.active,.app-shell .theme-template.active{border-color:var(--theme-accent);box-shadow:0 0 0 2px rgba(var(--theme-rgb),.12)}
.app-shell input:focus,.app-shell select:focus,.app-shell textarea:focus,.app-shell .search-field:focus-within{border-color:rgba(var(--theme-rgb),.52);box-shadow:0 0 0 4px rgba(var(--theme-rgb),.1)}
.app-shell button:focus-visible,.app-shell a:focus-visible,.app-shell input:focus-visible,.app-shell select:focus-visible,.app-shell textarea:focus-visible{outline-color:rgba(var(--theme-rgb),.3)}

/* Configurable brand */
.desktop-sidebar .brand-mark img,.topbar .brand-mark img,.brand-logo-preview img{width:100%;height:100%;object-fit:contain;display:block}
.desktop-sidebar .brand-mark img,.topbar .brand-mark img{padding:4px;border-radius:8px}
.brand-theme-card{overflow:visible}.theme-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 14px}.theme-template{min-height:54px;justify-content:flex-start;text-align:left;padding:8px 9px;border:1px solid #dce3ed;background:#fff;border-radius:11px;box-shadow:none}.theme-template>span:nth-child(2){min-width:0;flex:1}.theme-template strong,.theme-template small{display:block}.theme-template strong{font-size:11px}.theme-template small{font-size:11px;color:var(--muted);margin-top:2px}.theme-swatch{width:28px;height:28px;flex:0 0 28px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(16,24,40,.06)}.theme-blue{background:#1267e8}.theme-green{background:#0f9f6e}.theme-purple{background:#7c3aed}.theme-orange{background:#e66a16}.theme-slate{background:#475569}.brand-name-field{display:block;margin:4px 0 12px}.brand-name-field>span{display:block;font-size:11px;font-weight:750;color:#667085;margin-bottom:5px}.brand-logo-row{display:flex;align-items:center;gap:9px;padding-top:10px;border-top:1px solid #edf0f4}.brand-logo-preview{width:48px;height:48px;flex:0 0 48px;border:1px solid #dce3ed;border-radius:12px;background:#f8fafc;display:grid;place-items:center;overflow:hidden;color:#536174}.brand-logo-row strong,.brand-logo-row small{display:block}.brand-logo-row strong{font-size:11px}.brand-logo-row small{font-size:11px;color:var(--muted);margin-top:2px}.brand-upload-button{position:relative;overflow:hidden;white-space:nowrap;min-height:38px;font-size:11px}.brand-upload-button input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* Uniform custom menus and pagination */
.ui-select-menu{position:relative;display:inline-block;min-width:108px;z-index:8}.ui-select-trigger{width:100%;min-height:38px;padding:7px 9px 7px 11px;border:1px solid #d8e0eb;background:#fff;border-radius:10px;color:#344054;font-size:11px;font-weight:650;justify-content:space-between;box-shadow:0 1px 2px rgba(31,48,76,.02)}.ui-select-trigger:hover{background:#f8fafc}.ui-select-chevron{font-size:15px;color:#667085;line-height:1;transform:translateY(-1px)}.ui-select-popover{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;width:max-content;max-width:230px;padding:5px;background:#fff;border:1px solid #dce3ed;border-radius:12px;box-shadow:0 14px 35px rgba(16,24,40,.16);z-index:120}.ui-select-popover button{width:100%;min-height:36px;border:0;background:transparent;border-radius:8px;padding:7px 10px;text-align:left;justify-content:flex-start;font-size:11px;font-weight:650;color:#344054}.ui-select-popover button:hover{background:#f4f7fb}.ui-select-popover button.selected{background:var(--theme-accent-soft);color:var(--theme-accent)}.ui-select-check{width:14px;flex:0 0 14px;font-weight:900}.counts-filter-control{padding:0 7px}.counts-filter-control>.ui-select-menu{min-width:105px}.counts-filter-control .ui-select-trigger{border:0;box-shadow:none;background:transparent;min-height:40px;padding:5px 3px}.counts-filter-control .ui-select-popover{right:-7px;min-width:150px}
.counts-pagination,.table-pagination{display:flex!important;align-items:center!important;justify-content:flex-end;gap:8px!important}.rows-label{font-size:11px;color:#667085}.counts-pagination .ui-select-menu,.table-pagination .ui-select-menu{min-width:72px}.counts-pagination .ui-select-trigger,.table-pagination .ui-select-trigger{min-height:36px;height:36px;padding:5px 9px}.pager-button{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;border:1px solid #dce3ed!important;background:#fff!important;border-radius:10px!important;color:#526177!important;box-shadow:0 1px 2px rgba(31,48,76,.02)}.pager-button:not(:disabled):hover{background:var(--theme-accent-soft)!important;color:var(--theme-accent)!important;border-color:rgba(var(--theme-rgb),.3)!important}.page-indicator{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:36px;padding:0 7px;border-radius:9px;background:#f8fafc;color:#344054;font-weight:800;font-size:11px}.counts-list-footer{gap:10px}.table-footer{padding:8px 12px!important}.counts-pagination button:disabled,.pager-button:disabled{opacity:.35!important}

/* Better notifications dialog */
.modal-sheet.notifications-modal-sheet{width:min(720px,calc(100vw - 40px));max-height:min(620px,88vh)}.notifications-modal-sheet .modal-header{padding:18px 20px 14px}.notifications-modal-sheet .modal-body{padding:12px 18px 18px}.notification-list.polished{gap:8px}.notification-row{align-items:center;padding:12px 13px;border-color:#e3e8ef;border-radius:12px;background:#fff}.notification-symbol{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:900;background:#eef5ff;color:#1769e8}.notification-row.warn .notification-symbol{background:#fff7e6;color:#b54708}.notification-row.error .notification-symbol{background:#fff0ef;color:#b42318}.notification-row.ok .notification-symbol{background:#ecfdf3;color:#067647}.notification-row strong{font-size:12px;color:#17233a}.notification-row small{font-size:11px;line-height:1.4}.notification-kind{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#f4f6f8;border-radius:999px;padding:5px 7px}

/* Header icon alignment */
.desktop-tools{min-height:44px;align-items:center!important}.desktop-tool-icon{position:relative;display:inline-grid!important;place-items:center;align-self:center;margin:0;line-height:1}.desktop-tool-icon>svg{display:block;margin:0}.tool-badge{position:absolute;right:0;top:-2px;min-width:16px;height:16px;padding:0 4px;border:2px solid #fff;border-radius:999px;background:#f04438;color:#fff;font-size:11px;line-height:12px;display:grid;place-items:center;font-weight:850}.admin-chip{min-height:44px;align-items:center!important}

/* QR pairing block */
.qr-wrap.polished{margin:8px auto 10px;display:flex;flex-direction:column;align-items:center;gap:7px;max-width:184px}.qr-frame{padding:10px;border:1px solid #dce3ed;border-radius:14px;background:#fff;box-shadow:0 3px 12px rgba(31,48,76,.04);line-height:0}.qr-frame .qr-svg{display:block;border:0!important;padding:0!important;background:#fff}.qr-wrap figcaption{font-size:11px;color:#667085;text-align:center;line-height:1.3}.sync-phone-card .pair-url{display:block;width:100%;margin:10px 0;padding:9px 11px!important;border-radius:10px!important;background:#f7f9fc!important;border:1px solid #edf0f4;font:600 11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;color:#526177;overflow-wrap:anywhere;text-align:center}

/* Broad activity audit and actionable rows */
.wide-manage-card{margin-top:14px;width:100%;padding:18px 20px}.wide-manage-card>.manage-card-title-row{align-items:center}.active-user-list.wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:7px}.activity-log-list.wide{max-height:470px}.activity-log-button{width:100%;border:0;border-bottom:1px solid #eef1f5;border-radius:0;background:#fff;text-align:left;min-height:54px;align-items:center}.activity-log-button:hover{background:#f8fbff}.activity-open,.row-open,.kpi-open{margin-left:auto;color:var(--muted);font-size:18px;font-weight:500}.detail-modal-sheet{width:min(720px,calc(100vw - 36px))}.detail-modal-badge{display:inline-flex;margin-bottom:10px;padding:5px 8px;border-radius:999px;background:var(--theme-accent-soft);color:var(--theme-accent);font-size:11px;font-weight:850}.detail-modal-grid{display:grid;gap:0;margin:0;border:1px solid #e3e8ef;border-radius:12px;overflow:hidden}.detail-modal-grid>div{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(0,1.8fr);gap:12px;padding:10px 12px;border-bottom:1px solid #eef1f5;background:#fff}.detail-modal-grid>div:last-child{border-bottom:0}.detail-modal-grid dt{font-size:11px;color:var(--muted)}.detail-modal-grid dd{margin:0;font-size:11px;color:#26354c;overflow-wrap:anywhere}

/* Supplier/location management */
.supplier-edit-list{border:1px solid #e5eaf1;border-radius:11px;overflow:hidden;margin:8px 0}.supplier-edit-row{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:stretch;border-bottom:1px solid #edf0f4;background:#fff}.supplier-edit-row:last-child{border-bottom:0}.supplier-main-button{border:0;border-radius:0;background:#fff;justify-content:flex-start;text-align:left;padding:8px 10px;min-height:44px}.supplier-main-button:hover,.supplier-edit-icon:hover{background:#f8fbff}.supplier-main-button span,.supplier-main-button small{display:block}.supplier-main-button span{font-size:11px;font-weight:750}.supplier-main-button small{font-size:11px;color:var(--muted);margin-top:2px}.supplier-edit-icon{width:38px;min-height:44px;border:0;border-left:1px solid #edf0f4;border-radius:0;background:#fff;color:#526177;padding:0}.location-manage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:340px;overflow:auto;padding:1px;margin:10px 0 12px}.location-manage-item{display:grid;grid-template-columns:minmax(0,1fr) 36px;border:1px solid #dfe6ef;border-radius:10px;overflow:hidden;background:#fff}.location-manage-item.active{border-color:rgba(var(--theme-rgb),.4);background:var(--theme-accent-soft)}.location-manage-item.inactive{opacity:.65}.location-manage-open{border:0;background:transparent;border-radius:0;text-align:left;justify-content:flex-start;min-height:48px;padding:7px 9px}.location-manage-open span,.location-manage-open small{display:block}.location-manage-open span{font-size:11px;font-weight:800}.location-manage-open small{font-size:11px;color:var(--muted);margin-top:2px}.location-manage-edit{width:36px;border:0;border-left:1px solid #e6ebf1;border-radius:0;background:transparent;padding:0;color:#526177}.location-manage-open:hover,.location-manage-edit:hover{background:#f7faff}

/* Fast data-quality correction */
.quality-list{gap:7px}.quality-row-v179{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.1fr);gap:10px;align-items:center;padding:8px 10px;border:1px solid #e5eaf1;border-radius:11px;background:#fff}.quality-row-main{min-width:0;min-height:40px;border:0;background:transparent;border-radius:8px;padding:4px 6px;justify-content:space-between;text-align:left}.quality-row-main:hover{background:#f8fafc}.quality-row-main strong,.quality-row-main small{display:block}.quality-row-main strong{font-size:11px}.quality-row-main small{font-size:11px;color:var(--muted);margin-top:2px}.quality-row-open{font-size:11px;color:var(--muted)}.quality-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}.quality-tag-action{min-height:27px;padding:4px 8px;border-radius:999px;border:1px solid #f5bd54;background:#fff9ed;color:#b54708;font-size:11px;font-weight:800}.quality-tag-action.quick:hover{background:#ffefd0;border-color:#e9a52b}.compact-form-modal{width:min(620px,calc(100vw - 36px))}.form-stack{display:flex;flex-direction:column;gap:11px}.quickfix-option-list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow-y:auto;border:1px solid #dce3ed;border-radius:12px;padding:5px;background:#fff}.quickfix-option-list button{width:100%;min-height:38px;border:0;background:transparent;border-radius:8px;padding:7px 10px;display:flex;align-items:center;justify-content:flex-start;gap:8px;text-align:left;font-size:12px;font-weight:650;color:#344054}.quickfix-option-list button:hover{background:#f4f7fb}.quickfix-option-list button.selected{background:var(--theme-accent-soft);color:var(--theme-accent)}.quickfix-option-list .ui-select-check{width:14px;flex:0 0 14px;font-weight:900}.form-stack label>span,.two-col-fields label>span{display:block;font-size:11px;color:#667085;font-weight:700;margin-bottom:5px}.two-col-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Requests, ideas and archive */
.manage-inbox-grid{display:grid;grid-template-columns:1fr 1fr minmax(220px,.55fr);gap:14px;margin-top:14px;align-items:start}.manage-inbox-grid>.manage-card{margin:0;min-width:0}.inbox-list{display:grid;gap:6px;margin-top:10px;max-height:370px;overflow:auto}.inbox-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 9px;align-items:center;padding:9px;border:1px solid #e5eaf1;border-radius:10px;background:#fff}.inbox-row strong,.inbox-row small{display:block}.inbox-row strong{font-size:11px}.inbox-row small{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35}.inbox-status{font-size:11px;font-weight:850;border-radius:999px;padding:4px 6px;background:#f2f4f7;color:#667085}.inbox-status.open{background:#fff7e6;color:#b54708}.inbox-status.busy{background:#eef5ff;color:#175cd3}.inbox-status.done{background:#ecfdf3;color:#067647}.inbox-actions{grid-column:1/-1;display:flex;gap:5px;justify-content:flex-end}.inbox-actions button{min-height:28px;padding:4px 7px;border:1px solid #dce3ed;background:#fff;border-radius:7px;font-size:11px}.archive-count-large{display:block;font-size:32px;margin:10px 0;color:#17233a}.product-card.archived{background:#fbfcfd;border-style:dashed}.status-badge.archived{background:#f2f4f7;color:#475467}

/* Worker / material issue mobile-first screen */
/* Uitgifte in het kit (5 sep 2026): mobiel één kolom .rd-page — werkbon → zoeken/scannen → regels met stepper → "Meenemen"
   in de duimzone; desktop kaart + tabel. De legacy .pickup-page/.pickup-card/.pickup-line/.pickup-stepper-regels zijn 5 sep 2026 verwijderd:
   geen enkele module rendert die klassen nog en de legacy  + ≤720px 
   overschreef de kit-knop (label stak buiten de kaartrand). */
.pickup-job{margin-top:10px}
.pickup-job input{font-weight:700;text-transform:uppercase}
.pickup-job input::placeholder{text-transform:none;font-weight:500}
.pickup-search-row{display:flex;align-items:center;gap:8px;padding-right:12px}
.pickup-search-row .rd-search{flex-grow:1;margin-right:0}
.pickup-search-row>button.rd-pill{margin-top:6px;gap:7px;color:var(--theme-accent-dark,#08766a);border-color:rgba(var(--theme-rgb,14,147,132),.32);background:var(--theme-accent-soft,#e9faf7);cursor:pointer}
.pickup-item.rd-row.live{border-color:var(--line,#e2e8f0);box-shadow:none}
.pickup-secondary .rd-row-sub{white-space:normal}
.pickup-idea{margin:0 12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.pickup-idea textarea{min-height:84px;border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical;background:var(--bg,#f7f9fc)}
.pickup-idea .rd-row-title{font-size:14px}
.pickup-idea .rd-row-sub{white-space:normal}
@media(min-width:721px){
  .pickup-desktop-grid .rd-primary-wrap{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:4px}
  .pickup-desktop-grid .rd-primary{display:inline-flex}
  .pickup-desktop-grid .rd-primary-hint{margin:0}
  .pickup-desktop-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:start}
  .pickup-desktop-grid>.rd-card{padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
  .pickup-desktop-grid .rd-scope{border:0;padding:0;background:transparent;flex-wrap:wrap}
  .pickup-desktop-grid .rd-search,.pickup-desktop-grid .pickup-job{margin:0;max-width:none}
  .pickup-desktop-grid .pickup-search-row{padding:0}
  .pickup-desktop-grid .pickup-search-row>button.rd-pill{margin:0}
  .pickup-desktop-grid .rd-list,.pickup-desktop-grid .rd-section{padding:0}
  .pickup-desktop-grid .rd-empty{padding:0}
  .pickup-idea{margin:0}
  .pickup-table{width:100%;border-collapse:collapse;table-layout:fixed} /* 11 sep 2026: vaste kolommen, anders liep de tabel bij ~1000px uit de kaart */
  .pickup-table th:nth-child(2),.pickup-table td:nth-child(2){width:96px}
  .pickup-table th:nth-child(3),.pickup-table td:nth-child(3){width:176px}
  .pickup-table td:first-child{overflow:hidden}
  .pickup-table th{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted,#98a5b8);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line,#e2e8f0)}
  .pickup-table td{padding:6px 10px;border-bottom:1px solid var(--line,#e2e8f0);font-size:13.5px;vertical-align:middle;height:48px}
  .pickup-table th.num,.pickup-table td.num{text-align:right;font-variant-numeric:tabular-nums}
  .pickup-table .pickup-table-product{display:flex;align-items:center;gap:10px;min-width:0}
  .pickup-table .pickup-table-product strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pickup-table .pickup-table-product small{color:var(--text-muted,#98a5b8);font-size:11.5px}
  .pickup-table .rd-stepper{justify-content:flex-end}
  .pickup-table .rd-stepper>button{width:44px;height:44px}
  .pickup-table .rd-stepper-value{flex-grow:0;min-width:72px;height:44px}
  .pickup-table .rd-stepper-value strong{font-size:17px}
  .pickup-secondary-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .pickup-secondary-grid .rd-list{padding:0}
}

/* Interactive dashboard and count cards */
.count-detail-metrics.interactive>button{position:relative;width:100%;text-align:left;border:1px solid #e1e7ef;background:#fff;border-radius:13px;padding:13px 14px;min-height:105px;display:block}.count-detail-metrics.interactive>button:hover{border-color:rgba(var(--theme-rgb),.3);background:#fbfdff}.count-detail-metrics.interactive>button.blue{box-shadow:inset 3px 0 #4e8df2}.count-detail-metrics.interactive>button.green{box-shadow:inset 3px 0 #32bf8b}.count-detail-metrics.interactive>button.orange{box-shadow:inset 3px 0 #f79043}.count-detail-metrics.interactive>button.purple{box-shadow:inset 3px 0 #8b5cf6}

/* Remaining-count expander */
.remaining-box.expanded .mini-product-list{max-height:360px;overflow:auto;padding-right:2px}

/* Larger product photography */

/* Tablet/narrow-desktop hardening */
@media(min-width:900px) and (max-width:1120px){:root{--sidebar-width:210px}.desktop-sidebar{padding-left:10px;padding-right:10px}.desktop-sidebar-nav button{font-size:12px;padding-left:9px}.content{padding-left:18px;padding-right:18px}.page-head h1{font-size:26px}.manage-columns-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.manage-inbox-grid{grid-template-columns:1fr 1fr}.archive-manage-card{grid-column:1/-1}.quality-row-v179{grid-template-columns:1fr}.quality-tags{justify-content:flex-start}}
@media(max-width:899px){.desktop-sidebar,.desktop-tools{display:none!important}.app-shell{padding-left:0!important}.topbar{display:flex!important;padding:0 16px;height:56px;justify-content:space-between}.topbar>.brand,.topbar>.topbar-right{display:flex}.content{padding:18px 16px 84px}.bottom-tabs{display:grid}.counts-list-head,.counts-session-row{min-width:0}.counts-list-card{overflow:visible}.manage-columns-grid{grid-template-columns:1fr}.manage-inbox-grid{grid-template-columns:1fr}.location-manage-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.theme-template-grid{grid-template-columns:1fr 1fr}.brand-logo-row{flex-wrap:wrap}.wide-manage-card{padding:14px}.active-user-list.wide{grid-template-columns:1fr}.manage-inbox-grid{grid-template-columns:1fr}.quality-row-v179{grid-template-columns:1fr}.quality-tags{justify-content:flex-start}.location-manage-grid{grid-template-columns:1fr}.pickup-secondary-grid{grid-template-columns:1fr}.detail-modal-grid>div{grid-template-columns:100px minmax(0,1fr)}.counts-pagination,.table-pagination{gap:5px!important}.rows-label{display:none}.page-indicator{min-width:42px}.notifications-modal-sheet .modal-header{padding:14px 15px 11px}.notifications-modal-sheet .modal-body{padding:10px 12px 14px}}
@media(max-width:430px){.theme-template-grid{grid-template-columns:1fr}.two-col-fields{grid-template-columns:1fr}.ui-select-popover{max-width:calc(100vw - 32px)}}

/* v1.7.9 final polish — richer themes, denser beheer and clearer maintenance actions */
.app-shell[data-theme="teal"],.theme-template[data-theme="teal"]{--theme-accent:#0e9384;--theme-accent-dark:#08766a;--theme-accent-soft:#e9faf7;--theme-rgb:14,147,132;--theme-navy:#082f2d;--theme-navy-2:#0b4742}
.app-shell[data-theme="indigo"],.theme-template[data-theme="indigo"]{--theme-accent:#4f46e5;--theme-accent-dark:#3730a3;--theme-accent-soft:#eef2ff;--theme-rgb:79,70,229;--theme-navy:#17163f;--theme-navy-2:#23215d}
.app-shell[data-theme="rose"],.theme-template[data-theme="rose"]{--theme-accent:#d94f70;--theme-accent-dark:#b73758;--theme-accent-soft:#fff0f4;--theme-rgb:217,79,112;--theme-navy:#3b1722;--theme-navy-2:#562030}
.app-shell[data-theme="graphite"],.theme-template[data-theme="graphite"]{--theme-accent:#344054;--theme-accent-dark:#1d2939;--theme-accent-soft:#f2f4f7;--theme-rgb:52,64,84;--theme-navy:#111827;--theme-navy-2:#1f2937}
.theme-teal{background:#0e9384}.theme-indigo{background:#4f46e5}.theme-rose{background:#d94f70}.theme-graphite{background:#344054}

.manage-columns-grid{align-items:stretch}.manage-columns-grid>.manage-column{height:100%}.manage-column-data>.sync-activity-card,.manage-column-protection>.sync-phone-card,.manage-column-system>.scanner-settings-card{flex:1}
.supplier-edit-row{grid-template-columns:minmax(0,1fr) 38px 38px}.supplier-delete-icon{width:38px;min-height:44px;border:0;border-left:1px solid #edf0f4;border-radius:0;background:#fff;color:#b42318;padding:0}.supplier-delete-icon:not(:disabled):hover{background:#fff4f2}.supplier-delete-icon:disabled{color:#c7ced8;background:#fafbfc;cursor:not-allowed}
.quality-new-supplier{display:grid;gap:7px}.quality-new-supplier>small{font-size:11px;line-height:1.4;color:var(--muted)}.quality-or-line{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px}.quality-or-line:before,.quality-or-line:after{content:"";height:1px;background:#e5eaf1;flex:1}.quality-or-line span{padding:0 3px}

.field-mobile-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important}

@media(max-width:720px){.manage-columns-grid>.manage-column{height:auto}.manage-column-data>.sync-activity-card,.manage-column-protection>.sync-phone-card,.manage-column-system>.scanner-settings-card{flex:0 0 auto}}

.pager-edge{font-size:16px!important;font-weight:800!important;line-height:1!important}.pager-button[title="Eerste pagina"],.pager-button[title="Laatste pagina"]{color:#667085!important}
@media(max-width:520px){.pager-edge{display:none!important}}
/* v1.7.9 beheer balance correction — independent card heights, no artificial blank space */
.manage-columns-grid{align-items:start}
.manage-columns-grid>.manage-column{height:auto}
.manage-column-data>.sync-activity-card,.manage-column-protection>.sync-phone-card,.manage-column-system>.scanner-settings-card{flex:0 0 auto}
/* v1.7.9 mobile viewport polish: keep operational controls clear of the fixed tab bar. */

/* v1.8 dashboard detail workspaces */
.modal-sheet.dashboard-detail-sheet{width:min(960px,calc(100vw - 44px));max-height:min(820px,92vh)}
.dashboard-detail-sheet .modal-body{padding:16px 18px 20px}
.dashboard-detail-controls{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:10px;align-items:center;margin-bottom:14px}
.dashboard-detail-controls .search-field{margin:0}.dashboard-detail-controls .ui-select-menu{width:100%}
.dashboard-detail-list{display:flex;flex-direction:column;border:1px solid #e3e8ef;border-radius:14px;overflow:hidden;background:#fff}
.dashboard-detail-row{width:100%;border:0;border-bottom:1px solid #edf1f5;background:#fff;display:flex;align-items:center;gap:12px;min-height:68px;padding:10px 12px;text-align:left;color:#17233a}
.dashboard-detail-row:last-child{border-bottom:0}.dashboard-detail-row:hover{background:#f8fbff}.dashboard-detail-row:focus-visible{outline:2px solid var(--theme-accent);outline-offset:-2px}
.dashboard-detail-row strong{display:block;font-size:12.5px;line-height:1.35}.dashboard-detail-row small{display:block;color:#5b6b82;font-size:11px;line-height:1.4;margin-top:3px}
.dashboard-detail-row>svg{flex:0 0 auto;color:var(--muted)}.dashboard-detail-value{min-width:104px;text-align:right}.dashboard-detail-value span,.dashboard-detail-value b{display:block}.dashboard-detail-value span{font-size:11px;color:var(--muted)}.dashboard-detail-value b{font-size:12px;margin-top:3px}
.dashboard-detail-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#f2f4f7;color:#667085;flex:0 0 38px}.dashboard-detail-icon.active{background:#eaf8ef;color:#067647}
.detail-progress{width:110px;height:6px;background:#eef2f6;border-radius:999px;overflow:hidden;flex:0 0 auto}.detail-progress span{display:block;height:100%;background:var(--theme-accent);border-radius:inherit}
.dashboard-context-chip{max-width:135px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#f2f4f7;color:#526174;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:750}
.dashboard-value-summary{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:12px}.dashboard-value-summary>div{border:1px solid #e3e8ef;border-radius:12px;padding:12px;background:#f9fbfd}.dashboard-value-summary span,.dashboard-value-summary strong{display:block}.dashboard-value-summary span{font-size:11px;color:var(--muted)}.dashboard-value-summary strong{font-size:18px;margin-top:4px}
.dashboard-permission-empty{min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;color:#65748a;padding:30px}.dashboard-permission-empty strong{font-size:16px;color:#17233a}.dashboard-permission-empty p{max-width:470px;font-size:11px;line-height:1.5;margin:0}.dashboard-permission-empty svg{color:var(--muted)}
.dashboard-data-kpis .dashboard-kpi-button{cursor:pointer}.dashboard-data-kpis .dashboard-kpi-button:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(16,24,40,.08)}
@media(max-width:720px){.modal-sheet.dashboard-detail-sheet{width:100%;max-height:94vh}.dashboard-detail-sheet .modal-body{padding:12px}.dashboard-detail-controls{grid-template-columns:1fr}.dashboard-detail-row{padding:10px;gap:9px}.dashboard-detail-value{min-width:78px}.dashboard-context-chip,.detail-progress{display:none}.dashboard-value-summary{grid-template-columns:1fr 1fr}.dashboard-value-summary>div:first-child{grid-column:1/-1}}

/* v1.8 desktop widget dashboard */

.dashboard-widget{position:relative;min-width:0;min-height:0;grid-column:span 3;grid-row:span 1}
.dashboard-widget-w1{grid-column:span 3}.dashboard-widget-w2{grid-column:span 6}.dashboard-widget-w3{grid-column:span 9}.dashboard-widget-w4{grid-column:span 12}
.dashboard-widget-h1{grid-row:span 1}.dashboard-widget-h2{grid-row:span 2}.dashboard-widget-h3{grid-row:span 3}.dashboard-widget-h4{grid-row:span 4}

.presence-row-button.scanning:hover{background:#eefcf4}

.dashboard-edit-bar{position:relative;z-index:10;border:1px solid #c7d7f2;background:#f7faff;border-radius:16px;padding:12px 14px;margin-bottom:14px;box-shadow:0 6px 18px rgba(31,111,235,.06)}
.dashboard-edit-copy{display:flex;align-items:center;gap:10px;margin-bottom:10px}.dashboard-edit-copy>svg{color:var(--theme-accent)}.dashboard-edit-copy strong,.dashboard-edit-copy small{display:block}.dashboard-edit-copy strong{font-size:12px}.dashboard-edit-copy small{font-size:11px;color:#667085;margin-top:2px}
.dashboard-widget-picker{display:flex;gap:6px;flex-wrap:wrap;padding:9px 0;border-top:1px solid #dce6f5;border-bottom:1px solid #dce6f5}.dashboard-widget-picker button{border:1px solid #d5dce6;background:#fff;color:#667085;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:800}.dashboard-widget-picker button.active{border-color:#a8c7f5;background:#eaf3ff;color:#1559bb}
.dashboard-edit-actions{display:flex;justify-content:flex-end;gap:7px;padding-top:10px}
.dashboard-widget.editing{border-radius:17px;outline:1.5px dashed #a8b6c9;outline-offset:3px;transition:outline-color .14s,box-shadow .14s}.dashboard-widget.editing.selected{outline:2px solid var(--theme-accent);box-shadow:0 0 0 5px rgba(31,111,235,.10)}
.dashboard-widget.editing .dashboard-widget-content{user-select:none}.dashboard-widget-hold-hint{position:absolute;z-index:4;right:8px;top:8px;background:rgba(23,32,51,.82);color:#fff;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:800;pointer-events:none;opacity:.75}
.dashboard-widget-editor{position:absolute;z-index:8;left:10px;right:10px;top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(255,255,255,.97);border:1px solid #ccd8e8;border-radius:12px;padding:7px 8px;box-shadow:0 10px 28px rgba(15,23,42,.18)}
.widget-editor-group{display:flex;align-items:center;gap:4px}.widget-editor-group>span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:850;margin-right:2px}.widget-editor-group button{width:27px;height:27px;border:1px solid #d7dee8;background:#fff;border-radius:8px;font-size:11px;font-weight:850;color:#536176}.widget-editor-group button.active{background:var(--theme-accent);border-color:var(--theme-accent);color:#fff}
.widget-order-group select{max-width:150px;height:29px;border:1px solid #d7dee8;border-radius:8px;background:#fff;color:#42516a;font-size:11px;font-weight:750;padding:0 23px 0 7px}
.widget-drag-handle{margin-left:auto;border:1px solid #b8c7da;background:#f8fbff;color:#32445d;border-radius:9px;min-height:30px;padding:5px 9px;font-size:11px;font-weight:850;cursor:grab}.widget-drag-handle:active{cursor:grabbing}

.metric-viz-track>i.good,.metric-viz-legend i.good{background:#19a974}.metric-viz-track>i.warn,.metric-viz-legend i.warn{background:#f59e0b}.metric-viz-track>i.info,.metric-viz-legend i.info{background:var(--status-info,#175cd3)}
.dashboard-widget.editing::before{content:attr(data-position-label);position:absolute;z-index:7;left:8px;top:8px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:8px;background:#17233a;color:#fff;font-size:11px;font-weight:850;pointer-events:none;box-shadow:0 5px 12px rgba(15,23,42,.18)}
.dashboard-widget.editing.drop-target::after{content:'Hier plaatsen';position:absolute;z-index:12;left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap;border-radius:999px;background:var(--theme-accent);color:#fff;padding:6px 10px;font-size:11px;font-weight:850;box-shadow:0 7px 18px rgba(var(--theme-rgb),.26);pointer-events:none}
.dashboard-layout-manage{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid #e7ebf0}.dashboard-layout-manage strong,.dashboard-layout-manage small{display:block}.dashboard-layout-manage strong{font-size:11px}.dashboard-layout-manage small{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4}
@media(min-width:900px) and (max-width:1120px){.dashboard-widget-w1{grid-column:span 3}.dashboard-widget-w2,.dashboard-widget-w3,.dashboard-widget-w4{grid-column:span 6}}
@media(max-width:899px){.dashboard-widget{min-height:0;grid-column:auto!important;grid-row:auto!important}.dashboard-edit-bar,.dashboard-widget-editor,.dashboard-widget-hold-hint{display:none!important}}
@media(max-width:720px){.dashboard-layout-manage{align-items:flex-start;flex-direction:column}.dashboard-layout-manage>.button{width:100%}}

/* v1.8.3 protected temporary developer access */
.button.danger,.secondary.danger{color:#b42318;border-color:#fac9c5;background:#fff}

/* v1.8.4 — mobile UI refresh: clearer hierarchy, thumb-friendly navigation and denser operational cards */
@media(max-width:720px){
  html{background:#f4f7fb}
  body{background:#f4f7fb}
  .app-shell{background:#f4f7fb;min-height:100dvh}
  .topbar .brand{gap:8px;min-width:0}.topbar .brand-mark{width:34px!important;height:34px!important;border-radius:10px!important;box-shadow:0 1px 3px rgba(16,24,40,.08)}
  .topbar .brand strong{font-size:13px!important;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .topbar-right{gap:5px!important;max-width:47vw!important}.sync-chip{min-height:30px!important;padding:5px 8px!important;border-radius:999px!important;font-size:11px!important;box-shadow:none!important}
  .mobile-presence{min-height:30px!important;padding:5px 8px!important}.mobile-presence-text{font-size:11px!important}

  .content{padding:14px 12px calc(96px + env(safe-area-inset-bottom,0px))!important;background:var(--bg)}
  .page-head{gap:8px;margin-bottom:13px!important}.page-head h1{font-size:25px!important;line-height:1.08;letter-spacing:-.035em}.page-head p{font-size:11px!important;line-height:1.42;color:var(--muted)}
  .page-head>.primary,.page-head>.secondary{min-height:42px;border-radius:11px;padding:8px 13px}
  .bottom-tabs button{min-height:52px!important;border-radius:13px!important;gap:3px!important;font-size:11px!important;font-weight:760;color:#5b6b82!important;transition:background .15s ease,color .15s ease,transform .08s ease!important}
  .bottom-tabs button svg{width:19px;height:19px}.bottom-tabs button.active{background:#edf4ff!important;color:var(--theme-accent)!important;box-shadow:inset 0 0 0 1px rgba(30,108,229,.07)}
  .bottom-tabs button:active{transform:scale(.97)!important}
}
/* UI-043: this @media(max-width:720px) block (opened at the 'html{background…}' line above) used to run on into
   30-styles.css; it is closed here and 30-styles.css opens its own. */
/* 20b-styles-tail.css — de STAART van 20-styles.css (#112, 7 sep 2026), afgesplitst voor de
   400-regelgrens. Direct ná 20 geladen; de volgorde van de regels is exact ongewijzigd. */
/* Compacte 31px-locatiechips in de scannerwerkbank zijn een muis-dichtheid: op touch (≤1024px) gelden 40px-tikdoelen. */
@media(min-width:1025px){.scanner-desktop-count-locations-inline .location-chip-row button{min-height:31px!important;padding:4px 6px!important;font-size:11px}}
/* UI-043: mobile overrides — explicitly scoped (they were implicitly inside the unclosed @media of 20-styles.css). */
@media(max-width:720px){
  .toast-stack{bottom:calc(78px + env(safe-area-inset-bottom,0px));left:12px;right:12px;gap:7px}.toast-item{border-radius:14px;padding:10px 12px;font-size:11px}

  /* Stock: quick scan/search first, then compact cards. */
  .stock-page .page-head{margin-bottom:9px}.stock-page .page-head p{display:block;max-width:330px}.modern-location-strip .section-mini-head{margin-bottom:7px}.modern-location-strip .section-mini-head strong{font-size:12px}
  .stock-search-toolbar .search-field{min-height:45px;border-radius:13px;box-shadow:0 4px 14px rgba(31,48,76,.055)}
  .mobile-stock-list{gap:8px}.mobile-stock-card:active{background:#fbfdff}.mobile-stock-card-head .grow{min-width:0}.mobile-stock-card-head .grow strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-stock-card-head .grow code{font-size:11px;margin-top:2px;color:var(--muted)}.mobile-stock-card-head .stock-product-thumb{width:40px;height:40px;border-radius:11px}

  /* Product cards: identity first, facts become scannable mini rows, actions stay thumb-sized. */
  .product-toolbar{gap:8px;margin-bottom:10px}.product-toolbar>.search-field{min-height:46px;border-radius:13px;box-shadow:0 3px 12px rgba(31,48,76,.04)}
  .status-filter{padding:3px;border-radius:12px;gap:3px;scroll-snap-type:x proximity}.status-filter button{min-height:36px;padding:6px 9px;font-size:11px;scroll-snap-align:start}.product-card-actions .danger{grid-column:1/-1}

  /* Manage/More: less visual noise and clear grouping. */
  .manage-columns-grid{gap:9px}.manage-column{gap:9px}.manage-card,.quality-panel,.auth-manage-panel{border-radius:14px;box-shadow:none}.wide-manage-card{padding:13px}.manage-card h3{font-size:16px}.manage-card p{font-size:11px;line-height:1.4}.switch-row{min-height:54px}.switch-row strong{font-size:11px}.switch-row small{font-size:11px}
  .modal-sheet.mobile-more-sheet{width:calc(100vw - 16px);margin:0 8px 8px;border-radius:22px;max-height:min(84dvh,720px);box-shadow:0 24px 70px rgba(15,23,42,.22)}.mobile-more-sheet:before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:#d5dde8;margin:8px auto -2px}.mobile-more-sheet .modal-header{padding:12px 15px 10px}.mobile-more-sheet .modal-header h2{font-size:20px}.mobile-more-sheet .modal-header p{font-size:11px}.mobile-more-sheet .modal-body{padding:6px 10px 12px}
  .mobile-more-list{padding:4px 0 0;gap:6px}.mobile-more-item{grid-template-columns:40px minmax(0,1fr) auto;min-height:62px;padding:9px 10px;border-radius:13px;border-color:#e1e7ef}.mobile-more-item.active{background:#eff5ff;border-color:#bfd4f6}.mobile-more-icon{width:38px;height:38px;border-radius:11px;background:#f2f5f9!important}.mobile-more-item.active .mobile-more-icon{background:#dfeaff!important;color:var(--theme-accent)!important}.mobile-more-item strong{font-size:12px!important}.mobile-more-item small{font-size:11px!important;line-height:1.35}.mobile-more-chevron{display:grid;place-items:center;color:#91a0b4!important}.mobile-more-badge{min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:grid;place-items:center;background:#fff1f1;color:#b42318;font-size:11px;font-weight:850}
  .mobile-account-card{margin-top:4px!important;border-radius:14px!important;background:#f7f9fc!important}.mobile-account-card button{min-height:39px!important;border-radius:10px!important}
}

@media(max-width:390px){
  .content{padding-left:10px!important;padding-right:10px!important}.page-head h1{font-size:23px!important}.page-head p{font-size:11px!important}
  .bottom-tabs button{font-size:11px!important}
}
@media(max-width:720px){
}
@media(max-width:720px){
}
@media(max-width:720px){
}

/* v1.8.5 — mobile ergonomic hardening after full 320/390/430 audit */
@media(max-width:720px){
  /* All primary touch controls meet a 44px interaction floor. */
  .bottom-tabs button,.mobile-hero-icon,.scanner-overlay-action,.stock-location-pill,
  .stock-location-chips button,.status-filter button,.counts-filter-control,
  .counts-pagination button,.table-pagination button,.product-card-actions button,
  .mobile-more-item,.mobile-account-card button,.remaining-toggle,.inbox-actions button,
  .supplier-delete-icon{min-height:44px!important}
  .table-search-position .search-field{min-height:44px!important}
  .mobile-hero-icon,.scanner-overlay-action{min-width:44px!important;width:44px!important;height:44px!important;padding:0!important}

  /* Floating navigation: stronger active state, safe-area spacing, less accidental overlap. */
  .bottom-tabs button{border-radius:14px!important;gap:3px!important;font-size:11px!important;font-weight:720!important}.bottom-tabs button.active{background:var(--theme-accent-soft)!important;color:var(--theme-accent)!important;box-shadow:inset 0 0 0 1px rgba(var(--theme-rgb),.10)!important}.bottom-tabs button.active::after{display:none!important}
  .content{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))!important}.stock-kpi-value{grid-column:auto!important}

  /* Manage: readable type and comfortable controls. */
  .manage-card p,.manage-card small,.switch-row small,.inbox-row small,.quality-panel small{font-size:11px!important;line-height:1.45!important}.switch-row strong{font-size:12px!important}.manage-card button,.quality-panel button,.auth-manage-panel button{min-height:44px}.manage-card input,.manage-card select,.quality-panel input,.quality-panel select{min-height:44px!important;font-size:16px!important}
.manage-card select,.quality-panel select{height:44px}

  /* Sheets and dialogs: thumb-safe close/actions and clearer information grouping. */
  .modal-header button,.modal-close{min-width:44px!important;min-height:44px!important}.modal-sheet .form-actions button{min-height:48px!important}.detail-modal-grid>div{padding:9px 0!important;line-height:1.4}.mobile-more-sheet .modal-header p{font-size:11px!important}.mobile-more-item small{font-size:11px!important}.mobile-account-card{padding:11px!important}

  /* Scanner: camera remains dominant; supporting controls are comfortably tappable. */
  .mobile-manual-row input{min-height:48px!important;font-size:16px!important}.mobile-manual-row button{min-width:48px!important;min-height:48px!important}.location-chip-row button{min-height:44px!important;padding:8px 11px!important}
}
@media(max-width:390px){
  .mobile-more-item{min-height:64px!important}
}

/* v1.8.6 interaction hardening: long-press and drag feedback */
.dashboard-widget.editing.pressing{outline-color:var(--theme-accent);box-shadow:0 0 0 4px rgba(31,111,235,.08),0 14px 34px rgba(15,23,42,.13);transform:scale(.997)}
.dashboard-widget.editing.dragging{opacity:.46;transform:scale(.985);filter:saturate(.75)}
.dashboard-widget.editing.drop-target{outline:2px solid var(--theme-accent);outline-offset:5px;box-shadow:0 0 0 7px rgba(31,111,235,.12)}
.dashboard-widget-hold-hint.active{opacity:1;background:var(--theme-accent);box-shadow:0 6px 18px rgba(31,111,235,.22)}
.dashboard-hold-progress{position:absolute;z-index:7;inset:0;border-radius:17px;pointer-events:none;overflow:hidden;background:linear-gradient(90deg,rgba(31,111,235,.045),transparent 38%)}
.dashboard-hold-progress>span{position:absolute;left:0;right:auto;bottom:0;height:4px;width:0;background:var(--theme-accent);border-radius:0 4px 4px 0;animation:dashboard-hold-fill 3s linear forwards}
@keyframes dashboard-hold-fill{from{width:0}to{width:100%}}
.widget-drag-handle{display:inline-flex;align-items:center;gap:6px}
@media(prefers-reduced-motion:reduce){.dashboard-hold-progress>span{animation-duration:3s}.dashboard-widget.editing{transition:none}}

/* v1.8.6 generic per-page desktop layout editor */
.desktop-tool-icon.active{background:#eaf3ff;color:var(--theme-accent);border-color:#a8c7f5;box-shadow:0 0 0 3px rgba(31,111,235,.08)}
.page-layout-editor-shell{min-width:0}
.page-layout-edit-bar{position:sticky;top:8px;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #c7d7f2;background:rgba(247,250,255,.97);backdrop-filter:blur(12px);border-radius:16px;padding:10px 12px;margin:0 0 14px;box-shadow:0 10px 26px rgba(15,23,42,.10)}
.page-layout-edit-copy{display:flex;align-items:center;gap:10px;min-width:0}.page-layout-edit-copy>svg{color:var(--theme-accent)}.page-layout-edit-copy strong,.page-layout-edit-copy small{display:block}.page-layout-edit-copy strong{font-size:12px}.page-layout-edit-copy small{font-size:11px;color:#667085;margin-top:2px}
.page-layout-edit-actions{display:flex;gap:7px;flex-shrink:0}
.page-layout-editing .page-layout-block{position:relative;outline:1.5px dashed #a8b6c9;outline-offset:3px;border-radius:14px;transition:opacity .14s,transform .14s,outline-color .14s,box-shadow .14s}
.page-layout-editing .page-layout-block:hover{outline-color:#7faef0}
.page-layout-editing .page-layout-dragging{opacity:.42;transform:scale(.992)}
.page-layout-editing .page-layout-drop-target{outline:2px solid var(--theme-accent);outline-offset:5px;box-shadow:0 0 0 7px rgba(31,111,235,.12)}
.page-layout-drag-handle{position:absolute;z-index:30;right:8px;top:8px;display:inline-flex;align-items:center;gap:6px;border:1px solid #b8c7da;background:rgba(255,255,255,.96);color:#32445d;border-radius:9px;min-height:30px;padding:5px 9px;font:850 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 7px 18px rgba(15,23,42,.12);cursor:grab;user-select:none}
.page-layout-drag-handle:active{cursor:grabbing}.page-layout-drag-handle:hover{border-color:#8eb5ea;color:var(--theme-accent)}
.page-layout-editing .scanner-desktop-workspace,.page-layout-editing .counts-master-detail,.page-layout-editing .manage-columns-grid{overflow:visible}
@media(max-width:899px){.page-layout-edit-bar,.page-layout-drag-handle{display:none!important}.page-layout-editing .page-layout-block{outline:none!important;transform:none!important;box-shadow:none!important}}

/* v1.8.6 mobile count detail: explicit exit + safe finish action */
.count-detail-mobile-nav,.count-detail-close{display:none}
.count-detail-status-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
@media(max-width:720px){
}

/* Symmetry and stronger color emphasis for supplier + theme management */
.supplier-subsection-head{align-items:center;gap:12px}
.manage-subsection-copy{min-width:0;flex:1}
.supplier-subsection-head .subsection-count{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:var(--theme-accent-soft);border:1px solid rgba(var(--theme-rgb),.18);font-size:12px;font-weight:800;color:var(--theme-accent)}
.supplier-edit-list{border:1px solid #dfe6ef;border-radius:14px;overflow:hidden;margin:10px 0 12px;background:#fff}
.supplier-edit-row{display:grid;grid-template-columns:minmax(0,1fr) 52px 52px;align-items:stretch;border-bottom:1px solid #edf0f4;background:#fff}
.supplier-edit-row:last-child{border-bottom:0}
.supplier-main-button{border:0;border-radius:0;background:#fff;justify-content:flex-start;text-align:left;padding:12px 14px;min-height:60px;gap:6px}
.supplier-main-button:hover,.supplier-edit-icon:hover,.supplier-delete-icon:not(:disabled):hover{background:#f8fbff}
.supplier-main-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.supplier-name{display:block;min-width:0;font-size:15px;font-weight:800;color:#16233b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.supplier-usage-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(var(--theme-rgb),.10);color:var(--theme-accent);font-size:11px;font-weight:800;border:1px solid rgba(var(--theme-rgb),.16)}
.supplier-usage-badge.unused{background:#f5f7fb;color:#667085;border-color:#e5eaf1}
.supplier-meta{display:block;font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.supplier-edit-icon,.supplier-delete-icon{width:52px;min-height:60px;border:0;border-left:1px solid #edf0f4;border-radius:0;background:#fff;padding:0;display:grid;place-items:center}
.supplier-edit-icon{color:#526177}
.supplier-delete-icon{color:#b42318}
.supplier-delete-icon:disabled{color:#c7ced8;background:#fafbfc;cursor:not-allowed}

.brand-theme-card{overflow:visible}
.theme-template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 16px}
.theme-template{position:relative;min-height:76px;justify-content:flex-start;text-align:left;padding:12px 14px 12px 16px;border:1px solid #dce3ed;background:#fff;border-radius:16px;box-shadow:none;overflow:hidden;gap:12px}
.theme-template::before{content:'';position:absolute;inset:0;opacity:.96;pointer-events:none}
.theme-template .theme-template-accent{position:absolute;left:0;top:0;bottom:0;width:7px;border-radius:16px 0 0 16px;background:currentColor;opacity:.95}
.theme-template .theme-copy{position:relative;z-index:1;min-width:0;flex:1}
.theme-template strong,.theme-template small{display:block}
.theme-template strong{font-size:15px;line-height:1.1;color:#17253d}
.theme-template small{font-size:11px;color:#667085;margin-top:5px;font-weight:700}
.theme-swatch{position:relative;z-index:1;width:42px;height:42px;flex:0 0 42px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 10px 20px rgba(16,24,40,.08)}
.theme-check-wrap{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 4px 10px rgba(16,24,40,.08);color:#16233b}
.theme-template.active{border-color:currentColor;box-shadow:0 0 0 2px color-mix(in srgb, currentColor 14%, white)}
.theme-template.active .theme-swatch{transform:scale(1.05)}
.theme-option-blue{color:#1267e8;background:linear-gradient(90deg,rgba(18,103,232,.12),rgba(18,103,232,.04) 42%,#fff 100%)}
.theme-option-green{color:#067647;background:linear-gradient(90deg,rgba(15,159,110,.12),rgba(15,159,110,.04) 42%,#fff 100%)}
.theme-option-purple{color:#7c3aed;background:linear-gradient(90deg,rgba(124,58,237,.13),rgba(124,58,237,.04) 42%,#fff 100%)}
.theme-option-orange{color:#e66a16;background:linear-gradient(90deg,rgba(230,106,22,.13),rgba(230,106,22,.04) 42%,#fff 100%)}
.theme-option-slate{color:#475569;background:linear-gradient(90deg,rgba(71,85,105,.12),rgba(71,85,105,.04) 42%,#fff 100%)}
.theme-option-teal{color:#0f8b7b;background:linear-gradient(90deg,rgba(15,139,123,.12),rgba(15,139,123,.04) 42%,#fff 100%)}
.theme-option-indigo{color:#4f46e5;background:linear-gradient(90deg,rgba(79,70,229,.12),rgba(79,70,229,.04) 42%,#fff 100%)}
.theme-option-rose{color:#d14b72;background:linear-gradient(90deg,rgba(209,75,114,.12),rgba(209,75,114,.04) 42%,#fff 100%)}
.theme-option-graphite{color:#344054;background:linear-gradient(90deg,rgba(52,64,84,.12),rgba(52,64,84,.04) 42%,#fff 100%)}
@media(max-width:720px){
  .supplier-edit-row{grid-template-columns:minmax(0,1fr) 50px 50px}
  .supplier-main-button{padding:11px 12px;min-height:58px}
  .supplier-edit-icon,.supplier-delete-icon{width:50px;min-height:58px}
  .theme-template-grid{grid-template-columns:1fr;gap:10px}
  .theme-template{min-height:72px}
}

/* v1.8.6 mobile layout editing + visible touch drag */
.drag-follow-ghost{position:fixed;z-index:9999;transform:translate(-50%,-125%);pointer-events:none;display:flex;align-items:center;gap:8px;max-width:min(260px,calc(100vw - 28px));min-height:42px;padding:9px 12px;border-radius:13px;background:rgba(18,32,54,.94);color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:0 14px 34px rgba(15,23,42,.28);font-size:11px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.drag-follow-ghost svg{flex:0 0 auto}.drag-follow-ghost span{min-width:0;overflow:hidden;text-overflow:ellipsis}.drag-follow-ghost.dashboard{background:color-mix(in srgb,var(--theme-accent) 88%,#172033)}
.page-layout-drag-handle,.widget-drag-handle{touch-action:none;-webkit-user-select:none;user-select:none}

@media(max-width:899px){
  .page-layout-editor-shell{padding-bottom:6px}
  .page-layout-edit-bar{display:flex!important;position:sticky;top:6px;z-index:52;align-items:flex-start;flex-direction:column;gap:8px;padding:10px 11px;margin:0 0 12px;border-radius:14px;background:rgba(248,251,255,.98);box-shadow:0 8px 24px rgba(15,23,42,.13)}
  .page-layout-edit-copy{width:100%;align-items:flex-start}.page-layout-edit-copy strong{font-size:12px}.page-layout-edit-copy small{font-size:11px;line-height:1.35}
  .page-layout-edit-actions{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.page-layout-edit-actions .button{min-height:40px!important;width:100%;padding-left:7px;padding-right:7px}
  .page-layout-editing .page-layout-block{outline:2px dashed #9fb3cc!important;outline-offset:3px!important;border-radius:14px!important;box-shadow:0 4px 16px rgba(15,23,42,.04)!important;transition:opacity .12s,transform .12s,outline-color .12s,box-shadow .12s!important}
  .page-layout-editing .page-layout-dragging{opacity:.48!important;transform:scale(.985)!important;filter:saturate(.82)}
  .page-layout-editing .page-layout-drop-target{outline:3px solid var(--theme-accent)!important;outline-offset:5px!important;box-shadow:0 0 0 8px rgba(var(--theme-rgb),.12)!important}
  .page-layout-drag-handle{display:inline-flex!important;right:8px;top:8px;min-width:44px;min-height:44px;padding:0 11px;border-radius:12px;background:rgba(255,255,255,.98);border-color:#aebfd4;box-shadow:0 8px 20px rgba(15,23,42,.16);font-size:11px;touch-action:none}
  .page-layout-drag-handle svg{width:17px;height:17px}.page-layout-drag-handle span{display:none}

  .dashboard-edit-bar{display:block!important;position:sticky;top:6px;z-index:52;padding:10px 11px;margin-bottom:12px;border-radius:14px;background:rgba(248,251,255,.98);box-shadow:0 8px 24px rgba(15,23,42,.13)}
  .dashboard-edit-copy{display:flex!important;margin-bottom:8px;align-items:flex-start}.dashboard-edit-copy strong{font-size:12px}.dashboard-edit-copy small{font-size:11px;line-height:1.35}
  .dashboard-widget-picker{display:flex!important;gap:5px;padding:7px 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.dashboard-widget-picker::-webkit-scrollbar{display:none}.dashboard-widget-picker button{flex:0 0 auto;min-height:34px;padding:6px 9px;font-size:11px}
  .dashboard-edit-actions{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:6px;padding-top:8px}.dashboard-edit-actions .button{width:100%;min-height:40px!important;padding-left:7px;padding-right:7px}
  .dashboard-widget.editing{outline:2px dashed #9fb3cc;outline-offset:3px}.dashboard-widget.editing.selected{outline:3px solid var(--theme-accent);outline-offset:3px;box-shadow:0 0 0 7px rgba(var(--theme-rgb),.11)}
  .dashboard-widget-hold-hint{display:block!important;right:8px;top:8px;min-height:28px;padding:7px 9px;font-size:11px}
  .dashboard-widget-editor{display:flex!important;left:8px;right:8px;top:8px;gap:6px;padding:7px;border-radius:12px;align-items:center;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .widget-editor-group{flex:0 0 auto}.widget-editor-group>span{font-size:11px}.widget-editor-group button{width:34px;height:34px}
  .widget-drag-handle{flex:0 0 auto;min-width:112px;min-height:40px!important;margin-left:auto;padding:7px 10px;font-size:11px;touch-action:none}
  .dashboard-widget.editing.dragging{opacity:.45;transform:scale(.985)}
  .dashboard-widget.editing.drop-target{outline:3px solid var(--theme-accent);outline-offset:5px;box-shadow:0 0 0 8px rgba(var(--theme-rgb),.12)}
}

@media(max-width:430px){
  .page-layout-edit-bar,.dashboard-edit-bar{left:0;right:0}
  .page-layout-edit-actions .button,.dashboard-edit-actions .button{font-size:11px!important}
  .dashboard-widget-editor{padding:6px}.widget-editor-group>span{display:none}.widget-drag-handle{min-width:94px}
  .drag-follow-ghost{max-width:calc(100vw - 22px);font-size:11px;min-height:40px}
}

/* v1.8.6 Phase B — Drag 2.0, mobile safe areas, accessible dialogs */
:root{--mobile-nav-base:76px;--mobile-safe-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-bottom:calc(var(--mobile-nav-base) + var(--mobile-safe-bottom) + 28px)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(var(--theme-rgb),.34);outline-offset:2px}
.modal-sheet:focus{outline:none}

.drag-clone-preview{position:fixed!important;left:0!important;top:0!important;z-index:10050!important;pointer-events:none!important;margin:0!important;overflow:hidden!important;opacity:.96!important;transform-origin:top left!important;transition:none!important;animation:none!important;filter:saturate(.96)!important;box-shadow:0 22px 60px rgba(15,23,42,.30),0 0 0 2px rgba(var(--theme-rgb),.26)!important;border-radius:16px!important;contain:paint;will-change:transform}
.drag-clone-preview.dashboard{background:#fff!important;grid-column:auto!important;grid-row:auto!important}
.drag-clone-preview.page{background:#fff!important}
.drag-clone-preview *{pointer-events:none!important;animation:none!important;transition:none!important}
.drag-follow-ghost{display:none!important}

.dashboard-widget.editing{transition:opacity .14s ease,transform .14s ease,outline-color .14s ease,box-shadow .14s ease}
.dashboard-widget.editing.dragging{opacity:1!important;transition-property:transform,outline-color,box-shadow!important;transform:scale(.985)!important;outline:2px dashed var(--theme-accent)!important;outline-offset:4px!important;background:#f8fafc!important;box-shadow:inset 0 0 0 1px rgba(var(--theme-rgb),.10)!important}
.dashboard-widget.editing.dragging>.dashboard-widget-content,.dashboard-widget.editing.dragging>.dashboard-widget-quick-handle,.dashboard-widget.editing.dragging>.dashboard-widget-editor{visibility:hidden!important}
.dashboard-widget.editing.dragging::before{display:none!important}
.dashboard-widget.editing.dragging::after{content:'Tegel wordt verplaatst';position:absolute;z-index:12;inset:0;display:grid;place-items:center;padding:18px;color:var(--theme-accent);font-size:11px;font-weight:850;letter-spacing:.01em;text-align:center;pointer-events:none}
.dashboard-widget.editing.drop-target{outline:3px solid var(--theme-accent)!important;outline-offset:6px!important;box-shadow:0 0 0 9px rgba(var(--theme-rgb),.13),0 12px 30px rgba(15,23,42,.10)!important;transform:translateY(2px)}
.dashboard-widget-quick-handle{position:absolute;z-index:18;right:9px;top:9px;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:88px;min-height:42px;padding:8px 10px;border:1px solid #aec0d6;border-radius:11px;background:rgba(255,255,255,.98);color:#34465f;font:850 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 8px 20px rgba(15,23,42,.14);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.dashboard-widget-quick-handle:active,.widget-drag-handle:active,.page-layout-drag-handle:active{cursor:grabbing}
.dashboard-widget-quick-handle:hover{border-color:var(--theme-accent);color:var(--theme-accent)}
.widget-order-group{gap:5px!important}.widget-order-button{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;display:grid!important;place-items:center!important}.widget-order-button:disabled,.page-layout-order-button:disabled{opacity:.32;cursor:not-allowed}.move-up svg{transform:rotate(180deg)}

.page-layout-editing .page-layout-block{transition:opacity .14s ease,transform .14s ease,outline-color .14s ease,box-shadow .14s ease}
.page-layout-editing .page-layout-dragging{opacity:1!important;transition-property:transform,outline-color,box-shadow!important;transform:scale(.99)!important;outline:2px dashed var(--theme-accent)!important;background:#f8fafc!important;box-shadow:inset 0 0 0 1px rgba(var(--theme-rgb),.10)!important}
.page-layout-editing .page-layout-dragging>:not(.page-layout-move-controls){visibility:hidden!important}
.page-layout-editing .page-layout-dragging>.page-layout-move-controls{visibility:hidden!important}
.page-layout-editing .page-layout-dragging::after{content:'Onderdeel wordt verplaatst';position:absolute;z-index:32;inset:0;display:grid;place-items:center;padding:18px;color:var(--theme-accent);font-size:11px;font-weight:850;letter-spacing:.01em;text-align:center;pointer-events:none}
.page-layout-editing .page-layout-drop-target{outline:3px solid var(--theme-accent)!important;outline-offset:6px!important;box-shadow:0 0 0 9px rgba(var(--theme-rgb),.12)!important;transform:translateY(2px)}
.page-layout-move-controls{position:absolute;z-index:34;right:8px;top:8px;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #b8c7da;border-radius:13px;background:rgba(255,255,255,.98);box-shadow:0 8px 22px rgba(15,23,42,.15);touch-action:none}
.page-layout-move-controls .page-layout-drag-handle,.page-layout-order-button{position:static!important;right:auto!important;top:auto!important;width:40px;min-width:40px;min-height:40px;height:40px;padding:0!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#42546d;box-shadow:none!important;display:grid!important;place-items:center!important;cursor:grab}
.page-layout-order-button:hover,.page-layout-move-controls .page-layout-drag-handle:hover{background:#f0f5fb!important;color:var(--theme-accent)}
.page-layout-move-controls .page-layout-drag-handle span{display:none!important}

@media(max-width:899px){
  .dashboard-widget-quick-handle{display:inline-flex!important;min-width:48px;min-height:48px;width:48px;padding:0;border-radius:13px}.dashboard-widget-quick-handle span{display:none}
  .dashboard-widget-editor{padding-right:7px!important}.widget-order-group{display:flex!important}.widget-order-group>span{display:none!important}.widget-order-button{width:38px!important;height:38px!important;min-height:38px!important}
  .page-layout-move-controls{right:7px;top:7px}.page-layout-move-controls .page-layout-drag-handle,.page-layout-order-button{width:44px;min-width:44px;min-height:44px;height:44px}
}

@media(max-width:720px){
  html,body,#root{min-height:100%;min-height:100dvh}
  body{overscroll-behavior-y:none}
  .content{padding-bottom:calc(var(--mobile-nav-base) + var(--mobile-safe-bottom) + 34px)!important}
  .bottom-tabs{left:0;right:0;bottom:0;min-height:var(--mobile-nav-base);padding-left:max(5px,env(safe-area-inset-left,0px));padding-right:max(5px,env(safe-area-inset-right,0px));padding-bottom:calc(7px + var(--mobile-safe-bottom))!important;transform:translateZ(0)}
  .bottom-tabs button{min-width:44px;min-height:56px}
  .modal-backdrop{padding-top:env(safe-area-inset-top,0px)!important;padding-left:env(safe-area-inset-left,0px)!important;padding-right:env(safe-area-inset-right,0px)!important;align-items:flex-end!important}
  .modal-sheet,.modal-sheet.wide{width:100%!important;max-width:100%!important;max-height:calc(100dvh - env(safe-area-inset-top,0px))!important;border-radius:20px 20px 0 0!important;padding-bottom:var(--mobile-safe-bottom);overscroll-behavior:contain}
  .modal-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .modal-header{padding-top:max(14px,env(safe-area-inset-top,0px))}
  .form-actions,.modal-actions{padding-bottom:max(8px,var(--mobile-safe-bottom))}
  .page-layout-editor-shell,.dashboard-page.dashboard-editing{padding-bottom:calc(var(--mobile-nav-base) + var(--mobile-safe-bottom) + 20px)}
  .page-layout-edit-bar,.dashboard-edit-bar{max-height:calc(100dvh - var(--mobile-nav-base) - var(--mobile-safe-bottom) - 18px);overflow:auto;overscroll-behavior:contain}
}

@media(max-width:720px) and (orientation:landscape){
  .bottom-tabs button{min-height:46px;font-size:11px}.bottom-tabs svg{width:18px;height:18px}
  .content{padding-bottom:calc(var(--mobile-nav-base) + var(--mobile-safe-bottom) + 24px)!important}
  .modal-sheet,.modal-sheet.wide{max-height:calc(100dvh - env(safe-area-inset-top,0px))!important;border-radius:16px 16px 0 0!important}
  .page-layout-edit-bar,.dashboard-edit-bar{position:relative!important;top:auto!important}
}

@supports (height:100dvh){.modal-sheet{max-height:min(92dvh,920px)}}
@media(max-width:720px){.app-shell>.content{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))!important}}
@media(max-width:720px) and (orientation:landscape){.app-shell>.content{padding-bottom:calc(106px + env(safe-area-inset-bottom,0px))!important}}

/* Audit QoL: comfortabele magazijn-touchdoelen zonder desktopdichtheid te wijzigen. */
@media(max-width:720px){
  .secondary.small,.location-manage-edit,.backup-points .button{min-width:44px!important;min-height:44px!important;height:auto!important}
  .location-manage-edit{width:44px!important}
  input[type="checkbox"]{min-width:44px!important;min-height:44px!important}
}

/* Phase C — controlled PWA updates and storage diagnostics */
.pwa-update-banner{position:sticky;top:var(--topbar-height,72px);z-index:54;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 18px 10px;padding:11px 13px;border:1px solid rgba(var(--theme-rgb),.24);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 10px 28px rgba(16,24,40,.08);backdrop-filter:blur(14px)}
.pwa-update-banner.ready{border-color:rgba(var(--theme-rgb),.38);background:linear-gradient(90deg,rgba(var(--theme-rgb),.10),rgba(255,255,255,.96) 48%)}
.pwa-update-banner.blocked{border-color:#e4c45d;background:linear-gradient(90deg,#fff8db,#fff 52%)}
.pwa-update-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.pwa-update-copy strong{font-size:13px;color:#17253d}.pwa-update-copy small{font-size:11px;color:#667085;line-height:1.35}
@media(max-width:899px){.pwa-update-banner{top:calc(env(safe-area-inset-top,0px) + 70px);margin:8px 12px 10px;padding:10px 11px;gap:10px}.pwa-update-copy strong{font-size:12px}.pwa-update-copy small{font-size:11px}.pwa-update-banner .button{flex:0 0 auto;min-height:40px}}
@media(max-width:430px){.pwa-update-banner{align-items:flex-start}.pwa-update-banner .button{margin-top:1px}}
/* UI-050: pager buttons are 44 px touch targets on phones (desktop keeps the compact 36 px). */
/* Ronde 3 §35: pager-tikdoel 44px geldt voor alle touch-layouts (telefoon én tablet ≤1024), niet alleen ≤720. */
@media(max-width:1024px){.pager-button{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}}

/* 11 sep 2026: compacte themakiezer voor elke rol (Account-blad en zijbalk-accountmenu). Kleur komt uit .theme-option-<id>. */
.theme-quick-picker{display:flex;flex-wrap:wrap;gap:10px;padding:4px 0}
.theme-quick-picker .theme-quick-dot{width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border-radius:50%;border:2px solid #fff;background:currentColor;box-shadow:0 0 0 1px rgba(23,37,61,.18);cursor:pointer;transition:transform .12s ease}
.theme-quick-picker .theme-quick-dot:hover{transform:scale(1.08)}
.theme-quick-picker .theme-quick-dot.active{box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}
.theme-quick-picker .theme-quick-dot:focus-visible{outline:2px solid #17253d;outline-offset:3px}
.theme-quick-row{flex-direction:column;align-items:stretch;gap:8px;cursor:default}
.sidebar-menu-theme{padding:10px 14px 12px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-menu-theme strong{display:block;font-size:12px;margin-bottom:8px}
.sidebar-menu-theme .theme-quick-dot{border-color:rgba(255,255,255,.35)}
/* Feature-CSS Tellingen (architectuurronde 2). Verplaatst uit 30-styles.css (override-laag) — cascadepositie direct ná 30,
   dus identiek gedrag; literals zijn omgezet naar tokens waar de waarde overeenkomt.!important-declaraties worden per
   regel afgebouwd na bewijs (zie AUDIT-2026-09-02/FRONTEND-ARCHITECTURE-ROUND-2.md). */
/* Tellingen: list and detail read as native mobile cards rather than a squeezed desktop table. */
@media(max-width:720px){
  /* Deze hele reeks was bedoeld voor smalle schermen (zie de kop hierboven) maar stond ongescoped, en kneep dus ook
     de desktop: paginakop op 260px, knoptekst 11px, telregels in vier kolommen terwijl de kop er zeven telt.
     Gemeten op 1440px, 7 sep 2026 — de kolomkoppen stonden los van de rijen. */
  .modern-counts-page .page-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  .modern-counts-page .page-head>div{min-width:0}
  .modern-counts-page .page-head p{max-width:260px}
  .modern-new-count{min-width:0!important;white-space:nowrap;font-size:11px;padding:7px 10px!important}
  .counts-master-detail{gap:9px}
  .counts-list-card,.counts-detail-card{border-radius:15px;box-shadow:0 3px 12px rgba(31,48,76,.035)}
  .counts-list-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:7px;padding:9px}
  .counts-list-toolbar .search-field{min-height:42px}
  .counts-filter-control{min-width:0;padding:0 7px}
  .counts-session-row{grid-template-columns:76px minmax(0,1fr) 46px 18px;min-height:64px;padding:8px 10px;gap:6px}
  .count-status-chip{font-size:11px;padding:4px 6px}
  .session-row-name{font-size:11px}
  .counts-session-row>span:nth-of-type(3){font-size:11px;color:#5b6b82}
  .counts-list-footer{padding:8px 10px}
  .counts-detail-card{padding:13px!important}
  .counts-detail-card>h2{font-size:18px;margin:10px 0 3px}
  .count-detail-created{margin-bottom:13px}
  .count-detail-metrics{gap:6px;margin:12px 0}
  .count-detail-metrics>div{padding:10px!important}
  .count-detail-metrics strong{font-size:17px;margin:4px 0 2px}
  .count-detail-meta{margin-bottom:10px}
  .count-detail-meta>div{grid-template-columns:96px minmax(0,1fr);padding:5px 0;gap:6px}
  .count-detail-actions{gap:6px;padding-top:10px}
  .count-detail-actions button{min-height:42px;border-radius:10px}
  .modern-counts-page .page-head{grid-template-columns:1fr}
  .modern-new-count{width:100%!important}
  .counts-list-toolbar{grid-template-columns:1fr}
  .counts-filter-control{min-height:40px!important}
  .counts-filter-control{box-sizing:border-box;overflow:hidden}
  .counts-filter-control .ui-select-menu,.counts-filter-control .ui-select-trigger{width:100%;max-width:100%;min-width:0}
}
/* Counts: session rows become clear task cards rather than compressed table rows. */
@media(max-width:720px){
  /* Alleen op smalle schermen zijn telregels taakkaarten. Ongescoped braken deze regels de tabeluitlijning op
     desktop: de kolomkop telde zeven kolommen, de rij drie (gemeten 7 sep 2026). */
  .counts-session-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;min-height:76px;border-radius:12px;margin:5px 7px;padding:10px;border:1px solid #e6ebf2;background:#fff!important}
  .counts-session-row>*{min-width:0}
  .counts-session-row .count-status-chip{grid-row:1/3;align-self:center}
  .counts-session-row .session-row-name{font-size:12px;line-height:1.3}
  .counts-session-row>span:nth-of-type(3){grid-column:2;font-size:11px}
  .counts-session-row>svg,.counts-session-row>.chevron{grid-column:3;grid-row:1/3;align-self:center}
  .counts-session-row{margin-left:5px;margin-right:5px}
}
/* Root cause Notities-overlap (5 sep 2026): position:sticky;bottom:… trok de actiebalk bij een korte kaart omhoog over
   het notitieveld. De balk staat weer gewoon in de flow; de hoofdactie is een RdPrimary onderaan de kaart. */
.count-detail-actions{padding:9px 0 2px}
.count-detail-actions button{min-height:46px}
.mobile-count-detail-mode>.page-head{display:none!important}
.mobile-count-detail-mode .counts-master-detail.mobile-detail-open{display:block!important}
.mobile-count-detail-mode .counts-detail-card{min-height:0!important;padding:13px!important;border-radius:15px!important}
.count-detail-mobile-nav{display:flex;position:sticky;top:0;z-index:35;align-items:center;justify-content:space-between;gap:8px;margin:-2px -2px 10px;padding:8px 2px;background:rgba(247,249,252,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.count-mobile-back,.count-mobile-finish{min-height:44px;border-radius:12px;border:1px solid var(--border-default);background:#fff;color:#1d2b40;font:inherit;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;box-shadow:0 2px 8px rgba(31,48,76,.04)}
.count-mobile-back{flex:1;justify-content:flex-start}
.count-mobile-finish{border-color:#bce7d4;background:#ebf9f3;color:#117a55}
.count-detail-close{display:grid;width:38px;height:38px;min-height:38px;padding:0;place-items:center;border:1px solid #e0e6ee;border-radius:11px;background:#fff;color:#41516a;font-size:24px;line-height:1}
.mobile-count-detail-mode .count-detail-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 2px!important}
.mobile-count-detail-mode .count-detail-actions>.primary{grid-column:1/-1}
.mobile-count-detail-mode .counts-expanded-workspace{margin-top:10px;padding-bottom:20px}
.page-layout-editing .scanner-desktop-workspace,.page-layout-editing .counts-master-detail,.page-layout-editing .manage-columns-grid{overflow:visible!important}


/* ── Tellingen in het kit (5 sep 2026) ── */
@media(max-width:720px){
  .rd-list>.counts-session-row{margin:0}
  .counts-session-row.rd-row>.rd-row-body{display:flex}   /* legacy verbergt de datumkolom (span:nth-of-type) op mobiel; in het kit is dit de titel */
  .counts-session-row.rd-row>span:nth-of-type(3){grid-column:auto;font-size:inherit}
  .count-detail-mobile-nav.rd-scope{position:sticky;top:56px;z-index:35;margin:0;padding:8px 12px;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;display:flex}
  .count-mobile-back.rd-chip,.count-mobile-finish.rd-chip{box-shadow:none;font-size:14px}
  .mobile-count-detail-mode .counts-detail-card.rd-detail{margin:10px 12px 0;padding:14px!important;border-radius:14px!important;box-shadow:none;border:1px solid var(--line,#e2e8f0)}
  .rd-detail .rd-summary.flush{margin:12px 0 0}
  .rd-detail .rd-section{padding:16px 2px 8px}
  .rd-detail .rd-list{padding:0}
  .rd-detail .count-detail-meta{margin:12px 0 0}
  .rd-detail .rd-primary-wrap{padding:12px 0 2px}
  .rd-note{margin:0;padding:12px 14px;background:var(--bg,#f7f9fc);border:1px solid var(--line,#e2e8f0);border-radius:12px;font-size:13px;line-height:1.45;color:var(--text-secondary,#475467);white-space:pre-wrap}
  .rd-pager{padding:8px 12px 0}
  .rd-pager .counts-pagination{justify-content:center}
  /* Telling uitvoeren: grote invoer en raakvlakken, hoofdactie 58px */
  .count-modal-sheet .count-quantity-control input{height:56px;font-size:26px;font-weight:900;text-align:center;font-variant-numeric:tabular-nums}
  .count-modal-sheet .quick-count button{min-height:44px;flex:1 1 0}
  .count-modal-sheet .total-preview strong{font-size:22px;font-variant-numeric:tabular-nums}
  .count-modal-sheet .form-actions .primary{height:58px;min-height:58px;font-size:16px;border-radius:14px;flex:1 1 auto}
  .rd-count-product{display:flex;flex-direction:column;gap:1px;margin:0}
  .rd-count-product strong{font-size:17px;font-weight:800;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rd-count-product span{color:var(--text-muted,#66758d);font-size:12px;font-variant-numeric:tabular-nums}
}
/* Tellingen desktop (kit 6 sep 2026): geen vier betekenisloze kleurranden op de metrics, en 'Nieuwe telling' als gewone knop */
@media(min-width:721px){
  .count-detail-metrics.interactive>button.blue,.count-detail-metrics.interactive>button.green,.count-detail-metrics.interactive>button.orange,.count-detail-metrics.interactive>button.purple{box-shadow:none;border:1px solid var(--line,#e2e8f0);border-radius:12px}
  .count-detail-metrics.interactive>button:hover{border-color:rgba(var(--theme-rgb,14,147,132),.4)}
  .modern-counts-page .page-head{grid-template-columns:minmax(0,1fr) auto}
  .modern-new-count{width:auto!important;min-width:0!important;padding:0 16px!important;height:40px;font-size:13px;white-space:nowrap}   /* legacy: .modern-new-count{width:100%!important} (mobiel) */
  .counts-list-card,.counts-detail-card{border-radius:14px;box-shadow:none}
  .counts-session-row{min-height:56px}
}
/* Tellingen-detail: metrics als strook (kit 6 sep 2026) — vier getallen naast elkaar, niet vier hoge tegels met vier kleuren */
@media(min-width:721px){
  .count-detail-metrics.interactive{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line,#e2e8f0);border-radius:12px;overflow:hidden;margin:12px 0}
  .count-detail-metrics.interactive>button{min-height:0;padding:10px 12px!important;border:0;border-left:1px solid var(--line,#e2e8f0);border-radius:0;box-shadow:none;background:#fff}
  .count-detail-metrics.interactive>button:first-child{border-left:0}
  .count-detail-metrics.interactive>button:hover{background:var(--theme-accent-soft,#e9faf7);border-color:var(--line,#e2e8f0)}
  .count-detail-metrics.interactive>button span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted,#66758d);font-weight:700}
  .count-detail-metrics.interactive>button strong{font-size:20px;margin:2px 0 0;display:block;font-variant-numeric:tabular-nums}
  .count-detail-metrics.interactive>button small{display:none}
}
/* Metriektegel met een tekstwaarde (locatiescope): kleiner en over twee regels in plaats van afgekapt. */
.count-detail-metrics.interactive>button.purple strong{font-size:14px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
/* Het label van een metriektegel mag afbreken: "Locatiescope" paste niet in een kolom van vier en werd afgekapt. */
.count-detail-metrics.interactive>button>span:first-child{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
/* ── Tellingen op desktop, herontworpen 7 sep 2026 ────────────────────────────────────────────────────
   Vijf kolommen in plaats van zeven: ring, telling met statuszin, scope als chip, datum, chevron. Een lopende
   telling is amber — dat is de enige rij waar iemand iets mee moet. */
@media(min-width:721px){
  .counts-list-head,.counts-session-row{grid-template-columns:64px minmax(0,1fr) 150px 110px 24px;grid-template-rows:auto;gap:12px;align-items:center}
  .counts-session-row{min-height:72px;padding:10px 16px}
  .counts-list-head{padding:0 16px;min-height:40px}
  .counts-row-ring .rd-ring{width:44px;height:44px}
  .counts-row-ring .rd-ring>span{width:36px;height:36px;font-size:11px}
  .counts-row-main{display:flex;flex-direction:column;gap:3px;min-width:0}
  .counts-session-row .session-row-name{font-size:15px;font-weight:800;color:var(--text-primary,#172033);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .counts-row-status{font-size:12.5px;font-weight:700;color:var(--text-muted,#66758d)}
  .counts-row-status.busy{color:var(--attention,#b54708)}
  .counts-row-status.done{color:var(--accent-dark,#0b6e63)}
  .counts-session-row .session-scope{justify-self:start}
  .counts-session-row .session-scope .rd-tag{background:var(--surface-sunken,#eef1f6);color:var(--text-secondary,#475467);font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;white-space:nowrap}
  .counts-row-date{color:var(--text-muted,#66758d);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
  .counts-session-row.busy{background:var(--attention-soft,#fff6ed)}
  .counts-session-row.busy:hover{background:#fdf0e2}
  .counts-session-row.selected{box-shadow:inset 3px 0 var(--theme-accent,#0e9384)}
}
/* Basisregel buiten de desktopquery: op tablet erfde de statuszin een 9px-maat uit de compacte telefoonregels. */
.counts-row-status{font-size:12.5px;font-weight:700;color:var(--text-muted,#66758d);line-height:1.35}
.counts-row-status.busy{color:var(--attention,#b54708)}
.counts-row-status.done{color:var(--accent-dark,#0b6e63)}
.counts-row-ring{display:flex;align-items:center}
/* Tellingdetail: de voortgangsbalk droeg nog het oude blauw uit de legacy-tokens; hij hoort het thema te volgen.
   De metriektegels zijn drie getallen — de locatiescope is geen getal en staat als chip in de kop (7 sep 2026). */
.counts-detail-card .progress-track>span{background:var(--theme-accent,#0e9384)}
.counts-detail-card .count-detail-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.counts-detail-card .count-detail-metrics>button:nth-child(4),
.counts-detail-card .count-detail-metrics>div:nth-child(4){display:none}
.counts-detail-card .count-detail-metrics>*{background:var(--surface-raised,#f8fafc);border:1px solid var(--card-border,#e6ebf2);border-radius:12px}
.counts-detail-card .count-detail-scope-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;background:var(--surface-sunken,#eef1f6);color:var(--text-secondary,#475467);font-size:12.5px;font-weight:700;margin-top:8px}
.counts-detail-card .count-detail-meta>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid #f1f4f8}
.counts-detail-card .count-detail-meta>div:last-child{border-bottom:0}
.counts-detail-card .count-detail-actions{display:flex;justify-content:flex-end;gap:10px}

/* §108 — één besturingselement per functie. Op de telefoon staat de terugchip er al ('‹ Tellingen')
   en deed het kruisje ernaast precies hetzelfde: terug naar de lijst. Twee uitgangen naast elkaar
   laten je twijfelen welke wat doet. Op desktop is er geen chip, dus daar blijft het kruisje staan. */
@media(max-width:720px){.count-detail-close{display:none}}
/* Feature-CSS scanner (architectuurronde 3, 3 sep 2026): regels verplaatst uit 00/10/20/30-styles.css waarvan élke class exclusief
   in 43-app-scanner-camera-import.js wordt gebruikt (in-place verwijderd, bronvolgorde behouden, media-blokken per herkomst gegroepeerd). */
.active-session-card{display:flex;align-items:center;gap:8px;background:#ecfdf3;color:#067647;border:1px solid #abefc6;border-radius:12px;padding:9px 11px;font-size:13px}
.camera-box{position:relative;aspect-ratio:16/9;background:#101828;border-radius:18px;overflow:hidden;color:#fff}
/* Item #59: de mobiele override stond vóór de split ná de basisregel (00 → later); na de verhuizing van .camera-box naar deze module won 16/9 weer
   en rekende WebKit de breedte uit de hoogte (441px op een 390px-scherm). Override hier herhaald + harde breedtegrens. */
@media(max-width:720px){.mobile-camera-box{aspect-ratio:auto;width:100%;min-width:0;max-width:100%}}
.camera-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.camera-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:20px;color:#d0d5dd}
.camera-off strong{color:#fff;font-size:18px}
.camera-off span{font-size:13px}
.scan-frame{position:absolute;inset:20% 17%;pointer-events:none}
.scan-frame span{position:absolute;width:36px;height:36px;border-color:#fff;border-style:solid}
.scan-frame span:nth-child(1){left:0;top:0;border-width:3px 0 0 3px;border-radius:10px 0 0}
.scan-frame span:nth-child(2){right:0;top:0;border-width:3px 3px 0 0;border-radius:0 10px 0 0}
.scan-frame span:nth-child(3){left:0;bottom:0;border-width:0 0 3px 3px;border-radius:0 0 0 10px}
.scan-frame span:nth-child(4){right:0;bottom:0;border-width:0 3px 3px 0;border-radius:0 0 10px}
.camera-actions{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center}
.camera-button{background:#fff;color:#101828;border:0;box-shadow:0 8px 28px rgba(0,0,0,.28);padding:10px 16px}
.manual-row{display:grid;grid-template-columns:1fr 46px;gap:9px;margin-top:8px}
.last-scan{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;margin-top:11px;border-radius:12px;background:var(--surface-2);padding:10px 12px;font-size:12px;color:var(--muted)}
.last-scan code{color:#344054;font-size:13px}
.last-scan b{color:#475467}
.side-card{padding:18px}
.side-card h2{font-size:18px;margin:3px 0 13px}
.quick-results{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:9px;margin-bottom:9px}
.quick-results button{border:0;border-radius:0;background:#fff;justify-content:space-between;text-align:left;min-height:55px;padding:9px 11px;border-bottom:1px solid var(--line)}
.quick-results button:last-child{border-bottom:0}
.quick-results button:hover{background:#f8fafc}
.quick-results button div strong,.quick-results button div span{display:block}
.quick-results button div span{font-size:12px;color:var(--muted);margin-top:2px}
.quick-results>button>span{font-size:12px;color:#475467}
@media(max-width:720px){.camera-box{border-radius:15px}.last-scan{grid-template-columns:1fr auto}.last-scan span{grid-column:1/-1}}
@media(max-width:430px){.manual-row{grid-template-columns:1fr 44px}}
.undo-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #dbeafe;background:#eff6ff;border-radius:12px;margin:12px 0}
.undo-bar span{font-size:12px;color:#475467}
.undo-bar b{color:var(--status-info,#175cd3)}
.last-product-card{padding:14px;background:#f8fafc;border:1px solid var(--line);border-radius:14px;margin-top:12px}
.last-product-card strong,.last-product-card span,.last-product-card small{display:block}
.last-product-card span{font-size:12px;color:#667085;margin-top:3px}
.last-product-card small{margin-top:7px;color:#475467}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.info-tile{padding:11px;background:#f8fafc;border-radius:11px}
.info-tile span,.info-tile strong{display:block}
.info-tile span{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:800;letter-spacing:.04em}
.info-tile strong{font-size:16px;margin-top:4px}
@media(max-width:720px){.undo-bar{align-items:flex-start}.info-grid{grid-template-columns:1fr 1fr}.info-grid .info-tile:last-child{grid-column:1/-1}}
.count-session-panel{display:flex;flex-direction:column;gap:10px;margin:12px 0 14px;padding:12px;border:1px solid #b2ddff;border-radius:14px;background:#f5f9ff}
.count-session-panel .active-session-card{margin:0}
.location-picker-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.location-picker-head>div:first-child span,.location-picker-head>div:first-child strong{display:block}
.location-picker-head>div:first-child span{font-size:11px;color:var(--muted);margin-bottom:2px}
.location-picker-head>div:first-child strong{font-size:16px}
.progress-number{font-size:13px;font-weight:800;color:#175cd3;background:#eff8ff;border:1px solid #b2ddff;padding:5px 8px;border-radius:999px}
.location-scan-hint{color:#667085;font-size:11px;line-height:1.35}
.big-progress{display:flex;align-items:baseline;gap:8px;margin:6px 0 12px}
.big-progress strong{font-size:34px;letter-spacing:-.04em}
.big-progress span{font-size:12px;color:var(--muted)}
.remaining-box{border-top:1px solid var(--line);padding-top:12px;margin-top:10px}
.mini-product-list,.recent-count-list{display:flex;flex-direction:column;gap:6px}
.mini-product-list button,.recent-count-list button{width:100%;min-height:42px;background:#fff;border:1px solid var(--line);padding:8px 9px;text-align:left;justify-content:space-between}
.mini-product-list button span,.mini-product-list button small,.recent-count-list button strong,.recent-count-list button small{display:block}
.mini-product-list button span,.recent-count-list button strong{font-size:12px}
.mini-product-list button small,.recent-count-list button small{font-size:11px;color:var(--muted);margin-top:2px}
.recent-count-list button>div{min-width:0}
.recent-count-list button>b{font-size:13px;color:#344054}
.all-done{display:block;color:#067647;background:#ecfdf3;border:1px solid #abefc6;border-radius:10px;padding:8px 9px;font-size:11px}
@media(max-width:720px){.count-session-panel{margin-top:8px;padding:10px}.location-picker-head{align-items:center}.big-progress strong{font-size:30px}}
.mobile-scanner-page{display:flex;flex-direction:column;gap:12px}
.mobile-scan-actions,.mobile-action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-context-card h2{font-size:20px;margin-bottom:10px}
.mobile-context-card .info-grid{grid-template-columns:repeat(3,1fr)}
.scanner-action-card .mobile-action-row{margin-top:8px}
@media(max-width:720px){.mobile-scan-actions{margin:10px 0 2px}.mobile-scan-actions button,.mobile-action-row button{min-height:46px}.count-session-panel{padding:12px}.location-picker-head{gap:8px;align-items:flex-start}.progress-number{font-size:12px}.big-progress{margin:2px 0 8px}.big-progress strong{font-size:28px}.remaining-box{padding-top:10px;margin-top:8px}.mini-product-list button,.recent-count-list button{min-height:40px}.last-scan{grid-template-columns:auto 1fr;gap:8px}.last-scan>span:last-child{grid-column:2;justify-self:start}.last-product-card{padding:12px}}
@media(max-width:430px){.mobile-scan-actions,.mobile-action-row{grid-template-columns:1fr}.mobile-context-card .info-grid{grid-template-columns:repeat(3,1fr)}}
.location-picker-head,.location-picker-head>div{min-width:0;max-width:100%}
.count-mobile-details{border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden}
.count-mobile-details>summary{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:44px;padding:8px 11px;list-style:none;cursor:pointer;color:#344054;font-size:12px;font-weight:850}
.count-mobile-details>summary::-webkit-details-marker{display:none}
.count-mobile-details>summary b{font-size:11px;color:#667085;background:#f2f4f7;padding:4px 7px;border-radius:999px;white-space:nowrap}
.count-mobile-details[open]>summary{border-bottom:1px solid var(--line)}
.count-mobile-details-body{display:flex;flex-direction:column;gap:8px;padding:8px;background:#f8fafc}
.count-mobile-details-body .side-card{box-shadow:none;padding:12px}
@media(max-width:720px){.scanner-modern-mobile{min-height:100vh;min-height:100dvh;background:#fff}.mobile-scanner-hero{min-height:198px;background:linear-gradient(135deg,#061a32,#062543);color:#fff;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;padding:calc(18px + env(safe-area-inset-top)) 18px 18px;text-align:center}.mobile-scanner-hero>div{align-self:end;padding-bottom:2px}.mobile-scanner-hero h1{font-size:25px;margin:0 0 12px;letter-spacing:-.02em}.mobile-scanner-hero span{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:750;color:#d9e5f1}.mobile-scanner-hero span i{width:10px;height:10px;border-radius:50%;background:#8ca0b5}.mobile-scanner-hero small{display:block;margin-top:6px;color:#b9c8d8;font-size:11px}.scanner-mobile-body{padding:16px 14px 14px;background:#fff;display:flex;flex-direction:column;gap:12px}.scan-laser{position:absolute;left:4%;right:4%;top:50%;height:3px;background:#1d78f4;box-shadow:0 0 10px rgba(29,120,244,.85);border-radius:9px}.scanner-modern-mobile .mobile-scan-actions{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.scanner-modern-mobile .mobile-scan-actions button{min-height:44px;border-radius:12px;font-size:11px}.scanner-result-card{background:#fff;border:1px solid #e3e9f0;border-radius:18px;padding:15px;box-shadow:0 10px 28px rgba(31,48,76,.075)}.scanner-result-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.scanner-result-head>strong{font-size:14px}.recognized-chip{display:inline-flex;align-items:center;gap:5px;background:#e9faf1;color:#119463;border-radius:9px;padding:6px 8px;font-size:11px;font-weight:800}.scanner-result-product{display:flex;align-items:center;gap:12px}.scanner-result-product h2{font-size:18px;margin:0 0 3px}.scanner-result-product b{font-size:11px;color:#41516a}.scanner-result-product small{display:block;font-size:11px;color:#758399;margin-top:3px}.scanner-result-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0}.scanner-result-facts>div{display:flex;align-items:center;gap:9px;border:1px solid #e3e8ef;border-radius:12px;padding:10px}.fact-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}.scanner-result-facts p{font-size:11px;color:#7b899d;margin:0}.scanner-result-facts strong{display:block;font-size:13px;color:#18253d;margin-top:2px}.scanner-qty-control{display:grid;grid-template-columns:54px 1fr 54px;align-items:center;border:1px solid #e0e6ee;border-radius:12px;overflow:hidden;margin:4px 0 10px;background:#fbfcfe}.scanner-qty-control button{border:0;background:transparent;min-height:54px;color:#1769e8;font-size:26px;font-weight:400}.scanner-qty-control>div{text-align:center}.scanner-qty-control strong,.scanner-qty-control span{display:block}.scanner-qty-control strong{font-size:21px}.scanner-qty-control span{font-size:11px;color:#7d8b9f}.scanner-result-actions{display:grid;grid-template-columns:1.15fr 1fr 1.15fr!important;gap:7px}.scanner-result-actions button{min-height:46px;padding:8px 7px;font-size:11px;border-radius:11px}.scanner-result-actions svg{width:16px;height:16px}.scanner-modern-mobile .count-session-panel{margin:0}.scanner-modern-mobile .count-mobile-details{margin:0 14px 14px}.scanner-modern-mobile .undo-bar{margin:0}.scanner-modern-mobile .quick-results{margin:0}}
@media(max-width:430px){.scanner-mobile-body{padding-left:10px;padding-right:10px}.mobile-scanner-hero{padding-left:12px;padding-right:12px}.scanner-result-actions{grid-template-columns:1fr 1fr!important}.scanner-result-actions>button:last-child{grid-column:1/-1!important}}
@media(max-width:720px){.mobile-scanner-hero{min-height:154px;padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px}.mobile-scanner-hero>div{align-self:center}.mobile-scanner-hero h1{font-size:24px;margin-bottom:8px}.mobile-scanner-hero small{margin-top:4px}}
@media(max-width:720px){.scanner-result-hint{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:11px;background:#eef6ff;color:#48627f;font-size:11px}.scanner-result-hint svg{color:#1267e8;flex:0 0 auto}}
@media(min-width:351px) and (max-width:720px){.scanner-result-actions{grid-template-columns:1.15fr 1fr 1.15fr!important}.scanner-result-actions>button:last-child{grid-column:auto!important}}
@media(max-width:350px){.scanner-result-actions{grid-template-columns:1fr 1fr!important}.scanner-result-actions>button:last-child{grid-column:1/-1!important}}
@media(max-width:720px){.count-add-product-mini{width:44px;height:44px;min-height:44px;padding:0;border:1px solid #dce3ed;border-radius:50%;background:#fff;color:#1267e8;display:grid;place-items:center}}
@media(max-width:720px){.scanner-camera-overlay{position:absolute;left:14px;right:14px;top:14px;display:flex;align-items:center;justify-content:space-between;z-index:4;pointer-events:none}.scanner-overlay-action{pointer-events:auto;width:42px;height:42px;min-height:42px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(5,9,14,.66);color:#fff;backdrop-filter:blur(4px);box-shadow:0 3px 12px rgba(0,0,0,.16)}.scanner-overlay-action:active{transform:scale(.96)}}
@media(max-width:720px){.mobile-scanner-hero{min-height:128px;padding-top:calc(9px + env(safe-area-inset-top));padding-bottom:9px}.mobile-scanner-hero h1{font-size:22px;margin-bottom:5px}.mobile-scanner-hero span{font-size:12px;gap:6px}.mobile-scanner-hero small{font-size:11px;margin-top:2px}.scanner-mobile-body{padding-top:12px;padding-bottom:10px;gap:9px}.scanner-result-card{padding:11px 12px;border-radius:16px}.scanner-result-head{margin-bottom:7px}.scanner-result-head>strong{font-size:13px}.recognized-chip{padding:5px 7px}.scanner-result-product{gap:9px}.scanner-result-product h2{font-size:16px;margin-bottom:1px}.scanner-result-product b{font-size:11px}.scanner-result-product small{font-size:11px;margin-top:1px}.scanner-result-facts{gap:7px;margin:8px 0}.scanner-result-facts>div{gap:7px;padding:7px 8px;border-radius:10px}.fact-icon{width:29px;height:29px;border-radius:8px}.scanner-result-facts p{font-size:11px}.scanner-result-facts strong{font-size:12px;margin-top:1px}.scanner-qty-control{grid-template-columns:46px 1fr 46px;margin:2px 0 7px;border-radius:10px}.scanner-qty-control button{min-height:43px;font-size:23px}.scanner-qty-control strong{font-size:18px;line-height:1}.scanner-qty-control span{font-size:11px;margin-top:2px}.scanner-result-actions{gap:6px}.scanner-result-actions button{min-height:40px;padding:6px 5px;font-size:11px;border-radius:10px}.scanner-result-actions svg{width:14px;height:14px}.scanner-result-hint{padding:8px 10px;font-size:11px}}
@media(max-width:720px){.scanner-result-hint{padding:6px 10px;font-size:11px;line-height:1.2}}
@media(max-width:720px){.mobile-scanner-hero{min-height:92px;padding-top:calc(7px + env(safe-area-inset-top));padding-bottom:7px;grid-template-columns:38px minmax(0,1fr) 38px}.mobile-scanner-hero h1{font-size:20px;margin-bottom:3px;line-height:1.05}.mobile-scanner-hero span{font-size:11px;gap:5px;line-height:1.1}.mobile-scanner-hero span i{width:8px;height:8px}.mobile-scanner-hero small{display:none}.scanner-mobile-body{padding-top:9px;gap:8px}}
.scanner-result-thumb-image{border-radius:12px!important}
.inline-scanner-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b1220}
.inline-scanner-status{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);max-width:82%;padding:5px 9px;border-radius:999px;background:rgba(2,6,23,.72);color:#fff;font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:4;backdrop-filter:blur(6px)}
@media(min-width:721px){.scanner-desktop-workspace{display:grid;grid-template-columns:minmax(480px,1.35fr) minmax(360px,.9fr);gap:14px;align-items:start}.scanner-desktop-camera-column,.scanner-desktop-result-column{min-width:0}.scanner-desktop-result-column{display:flex;flex-direction:column;gap:10px}.scanner-desktop-search{position:sticky;top:8px;z-index:2;background:var(--bg,#f5f7fb);padding-bottom:2px}.scanner-desktop-search .manual-row{margin:0}.scanner-desktop-search .quick-results{margin-top:8px;max-height:240px;overflow:auto}.scanner-desktop-result-column .last-scan,.scanner-desktop-result-column .last-product-card,.scanner-desktop-result-column .side-card{margin:0}.scanner-desktop-result-column .last-product-card{padding:16px;border-radius:14px;border:1px solid #e3e9f1;background:#fff;box-shadow:0 4px 16px rgba(16,24,40,.04)}.scanner-desktop-result-column .last-product-card strong{font-size:17px}.scanner-desktop-result-column .last-product-card span,.scanner-desktop-result-column .last-product-card small{display:block;margin-top:4px}.scanner-desktop-result-column>.mobile-context-card{padding:14px;border-radius:14px;box-shadow:0 4px 16px rgba(16,24,40,.04)}.scanner-desktop-result-column>.mobile-context-card .big-progress{margin:4px 0 8px}.scanner-desktop-result-column>.mobile-context-card .big-progress strong{font-size:28px}.scanner-desktop-result-column>.mobile-context-card .remaining-box{margin-top:8px;padding-top:9px}.scanner-desktop-count-locations{grid-column:1/-1;margin-top:14px}.scanner-desktop-count-locations .count-session-panel{margin:0;padding:12px 14px}}
@media(min-width:721px){.scanner-desktop-camera-column .camera-box{width:100%;height:auto;min-height:0;aspect-ratio:16/9;max-width:100%;}.scanner-desktop-side-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:2px 2px 0}.scanner-desktop-side-title strong{font-size:14px;color:#17233a}.scanner-desktop-side-title small{font-size:11px;color:#7b889a;text-align:right}}
@media(min-width:721px){.scanner-desktop-result-column .last-scan>div b,.scanner-desktop-result-column .last-scan>div code{display:block}.scanner-desktop-result-column .last-scan>div code{margin-top:3px}}
@media(min-width:721px){/* Scanner: zoeken/gescande artikelen eerst, voortgang daarna. Tellocaties staan direct onder de camera. */
  .scanner-desktop-camera-column{display:flex;flex-direction:column;gap:10px}.scanner-desktop-count-locations-inline{margin:0!important;grid-column:auto!important}.scanner-desktop-count-locations-inline .count-session-panel{margin:0!important;padding:10px 11px!important;gap:7px;border-radius:13px}.scanner-desktop-count-locations-inline .active-session-card{min-height:34px;padding:6px 8px;font-size:11px;border-radius:10px}.scanner-desktop-count-locations-inline .active-session-card svg{width:15px;height:15px}.scanner-desktop-count-locations-inline .location-picker-head{align-items:center;gap:8px}.scanner-desktop-count-locations-inline .location-picker-head>div:first-child span{font-size:11px;margin-bottom:1px}.scanner-desktop-count-locations-inline .location-picker-head>div:first-child strong{font-size:13px;line-height:1.2}.scanner-desktop-count-locations-inline .progress-number{font-size:11px;padding:3px 6px}.scanner-desktop-count-locations-inline .location-scan-hint{display:none}.scanner-desktop-result-column>.mobile-context-card{margin-top:0}}
.remaining-toggle{width:100%;min-height:34px;margin-top:7px;border:1px solid #dce3ed;background:#fff;border-radius:9px;color:#475467;font-size:11px}
.remaining-toggle:hover{background:#f8fafc}
@media (max-width:720px) and (max-height:860px){.scanner-modern-mobile .scanner-result-hint{display:none!important}}
@media(max-width:720px){.scanner-modern-mobile{min-height:100dvh;background:#fff}.scanner-modern-mobile .mobile-scanner-hero{border-radius:0}}
@media(max-width:720px){.remaining-toggle{font-size:11px!important}}
/* Desktop-scanner in het kit (6 sep 2026): 44px-zoekveld, kaarten zonder schaduw, feiten als strook */
@media(min-width:721px){
  .scanner-desktop-page .side-card{border-radius:14px;box-shadow:none;border:1px solid var(--line,#e2e8f0)}
  .scanner-desktop-side-title strong{font-size:15px;font-weight:800}
  .scanner-desktop-side-title small{font-size:12.5px;color:var(--text-muted,#66758d)}
  .scanner-desktop-search .manual-row input{min-height:44px;border-radius:10px;font-size:14px}
  .scanner-desktop-search .manual-row .button.square{width:44px;height:44px;border-radius:10px}
  .scanner-desktop-page .info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line,#e2e8f0);border-radius:12px;overflow:hidden}
  .scanner-desktop-page .info-tile{border:0;border-left:1px solid var(--line,#e2e8f0);border-radius:0;background:var(--bg,#f7f9fc);padding:10px 12px}
  .scanner-desktop-page .info-tile:first-child{border-left:0}
  .scanner-desktop-page .info-tile strong{font-size:18px;font-variant-numeric:tabular-nums}
  .scanner-desktop-page .camera-box{border-radius:16px}
  .scanner-desktop-page .camera-button{min-height:44px;border-radius:10px;font-weight:700}
  .scanner-desktop-page .side-card .button.full{min-height:44px;border-radius:10px}
}
@media(min-width:721px) and (max-width:1023px){.scanner-desktop-workspace{grid-template-columns:1fr}.scanner-desktop-result-column{max-width:none}}
/* Onder 1180px past de twee-koloms scannerwerkbank niet meer naast de zijbalk: één kolom (gemeten op 1024×768). */
@media(max-width:1180px){.scanner-desktop-workspace{grid-template-columns:minmax(0,1fr)}.scanner-desktop-result-column,.scanner-desktop-camera-column{min-width:0}}
/* Laatste scans onder de camera (desktop, geen actieve telling): dezelfde kit-rijen als op de telefoon. */
.scanner-desktop-feed{margin-top:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.scanner-desktop-feed .rd-list{gap:8px}
.scanner-desktop-feed .rd-row{min-height:56px}

/* #150 (9 sep 2026): "Start scanner" en "Foto scannen" stonden op de desktop tegen elkaar aan — gemeten
   op 1440px: de eerste eindigde op 601px en de tweede begon op 601px. `.camera-actions` is een flexrij
   zonder `gap`, dus de twee knoppen vormden één blok met een naad in het midden. */
.camera-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* 10 sep 2026: vanaf 721px tekent de scanner "Stop scanner" en "Foto scannen" ONDERIN het
   camerakader (op de telefoon niet: daar is isPhone waar en vallen die knoppen weg). De statusregel
   stond ook op bottom:10px en lag daardoor over allebei die knoppen heen — gemeten 17px overlap op
   knoppen van 44px. Til hem daar boven de knoprij. */
@media(min-width:721px){.camera-box .inline-scanner-status{bottom:68px}}
/* Feature-CSS dashboard (architectuurronde 3, 3 sep 2026): regels verplaatst uit 00/10/20/30-styles.css waarvan élke class exclusief
   in 45-app-dashboard.js wordt gebruikt (in-place verwijderd, bronvolgorde behouden, media-blokken per herkomst gegroepeerd). */
.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.dashboard-kpi{position:relative;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(16,24,40,.03);overflow:hidden}
.kpi-label{display:block;font-size:11px;line-height:1.2;letter-spacing:.07em;text-transform:uppercase;font-weight:800;color:var(--muted);margin-bottom:9px}
.dashboard-kpi>strong,.kpi-inline strong{display:block;font-size:28px;line-height:1.05;letter-spacing:-.035em;overflow-wrap:anywhere}
.dashboard-kpi>small{display:block;color:#667085;font-size:11px;line-height:1.45;margin-top:8px;min-height:30px}
.kpi-inline{display:flex;align-items:center;gap:10px}
.dashboard-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0;box-shadow:0 1px 2px rgba(16,24,40,.025)}
.dashboard-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:13px;min-width:0}
.dashboard-panel-head>div{min-width:0}
.dashboard-panel-head h2{font-size:18px;line-height:1.25;margin:2px 0 0;letter-spacing:-.015em;overflow-wrap:anywhere;word-break:break-word}
.dashboard-panel-head small{font-size:11px;color:var(--muted);line-height:1.4}
.dashboard-panel-head>.text-action{margin-left:auto}
.dashboard-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dashboard-action-tile{display:grid;grid-template-columns:36px minmax(0,1fr) auto 14px;align-items:center;gap:9px;min-height:70px;padding:10px 11px;background:#fff;border:1px solid #e4e7ec;border-radius:13px;text-align:left;min-width:0}
.dashboard-action-tile:hover{background:#f8fafc;border-color:#d0d5dd}
.dashboard-action-icon{width:36px;height:36px;border-radius:10px;background:#f2f4f7;color:#475467;display:grid;place-items:center}
.dashboard-action-copy{min-width:0}
.dashboard-action-copy strong,.dashboard-action-copy small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-action-copy strong{font-size:13px}
.dashboard-action-copy small{font-size:11px;color:#667085;margin-top:2px}
.dashboard-action-tile>b{font-size:11px;color:#344054;white-space:nowrap}
.tile-chevron{font-size:20px;color:var(--muted)}
.presence-count{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;max-width:100%;font-size:11px;font-weight:800;color:#475467;white-space:normal;text-align:right;overflow-wrap:anywhere}
.presence-list{display:flex;flex-direction:column;gap:6px}
.presence-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px 9px;border:1px solid #eaecf0;border-radius:12px;min-width:0}
.presence-avatar{width:34px;height:34px;border-radius:10px;background:#f2f4f7;color:#475467;display:grid;place-items:center}
.presence-row strong,.presence-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.presence-row strong{font-size:12px}
.presence-row small{font-size:11px;color:#667085;margin-top:2px}
.presence-state{font-size:11px;font-weight:900;letter-spacing:.05em;color:#667085}
.dashboard-count-panel{margin-bottom:14px}
.dashboard-progress-copy{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}
.dashboard-progress-copy strong{font-size:26px;letter-spacing:-.03em}
.dashboard-progress-copy span{font-size:12px;color:#667085}
.dashboard-location-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:13px}
.dashboard-location-tile{display:flex;flex-direction:column;align-items:stretch;gap:8px;background:#fff;border:1px solid #e4e7ec;border-radius:12px;padding:10px;text-align:left;min-width:0}
.dashboard-location-tile>div:first-child{display:flex;justify-content:space-between;gap:6px}
.dashboard-location-tile strong,.dashboard-location-tile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-location-tile strong{font-size:13px}
.dashboard-location-tile small{font-size:11px;color:#667085;margin-top:2px}
.dashboard-location-tile>span{font-size:11px;font-weight:800;color:#475467}
.movement-list{display:flex;flex-direction:column}
.movement-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto 20px;gap:10px;align-items:center;padding:9px 2px;border-top:1px solid #f0f2f5;min-width:0}
.movement-row:first-child{border-top:0}
.movement-row strong,.movement-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.movement-row strong{font-size:12px}
.movement-row small{font-size:11px;color:#667085;margin-top:2px}
.movement-row time{font-size:11px;color:var(--muted)}
.text-action{min-height:34px;padding:4px 6px;border:0;background:transparent;color:var(--accent);font-size:12px;font-weight:800}
@media(max-width:980px){.dashboard-kpi-grid{grid-template-columns:1fr 1fr}.dashboard-location-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.dashboard-kpi-grid{grid-template-columns:1fr 1fr;gap:8px}.dashboard-kpi{padding:12px;border-radius:14px}.dashboard-kpi>strong,.kpi-inline strong{font-size:22px}.dashboard-panel{padding:13px;border-radius:14px}.dashboard-action-grid{grid-template-columns:1fr}.dashboard-location-grid{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.dashboard-panel-head{gap:8px}.dashboard-panel-head>small,.dashboard-panel-head>.presence-count{max-width:48%;flex:0 1 48%;overflow-wrap:anywhere}.dashboard-panel-head>div{flex:1 1 auto;min-width:0}.dashboard-kpi-grid{grid-template-columns:1fr 1fr}.dashboard-kpi>small{min-height:0}.dashboard-location-grid{grid-template-columns:1fr 1fr}.movement-row{grid-template-columns:48px minmax(0,1fr) 18px}.movement-row time{display:none}.movement-row .row-open{grid-column:3;grid-row:1}}
@media(max-width:350px){.dashboard-kpi-grid{grid-template-columns:1fr}.dashboard-location-grid{grid-template-columns:1fr}}
.dashboard-kpi-button{position:relative;width:100%;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;border:1px solid #e1e7ef;transition:transform .12s,border-color .12s,box-shadow .12s}
.dashboard-kpi-button:hover{transform:translateY(-1px);border-color:rgba(var(--theme-rgb),.28);box-shadow:0 9px 24px rgba(31,48,76,.08)}
.dashboard-kpi-button .kpi-open{position:absolute;right:14px;bottom:11px;opacity:0;transition:opacity .12s}
.dashboard-kpi-button:hover .kpi-open{opacity:1}
.movement-row-button{width:100%;border-left:0;border-right:0;border-top:0;border-radius:0;background:#fff;text-align:left}
.movement-row-button:hover{background:#f8fbff}
.dashboard-widget-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:142px;gap:14px;align-items:stretch}
.dashboard-widget-content{height:100%;min-height:0;min-width:0}
.dashboard-widget-content>.dashboard-kpi,.dashboard-widget-content>.dashboard-panel{height:100%;margin:0;box-sizing:border-box}
.dashboard-widget-content>.dashboard-kpi{width:100%}
.dashboard-widget-content>.dashboard-panel{overflow:auto;overscroll-behavior:contain}
.dashboard-widget-panel .movement-list{margin-bottom:0}
.dashboard-widget-panel .presence-list{padding-bottom:1px}
.presence-row-button{appearance:none;width:100%;background:#fff;color:inherit;text-align:left;cursor:pointer}
.presence-row-button:hover{background:#f8fbff}
.dashboard-empty-widget{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px}
.dashboard-empty-widget h2{font-size:17px;margin:0}
.dashboard-empty-widget p{font-size:11px;color:#667085;max-width:560px;margin:0 0 4px}
.dashboard-grid-guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 8px}
.dashboard-grid-guide span{text-align:center;border:1px dashed #b9c9dd;border-radius:9px;background:linear-gradient(180deg,#f8fbff,#fff);color:#6b7d94;padding:6px;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.dashboard-metric-viz{width:100%;margin-top:auto;padding-top:9px}
.metric-viz-track{height:7px;display:flex;overflow:hidden;border-radius:999px;background:#edf1f6}
.metric-viz-track>i{display:block;height:100%;min-width:3px;background:#9aa8ba}
.metric-viz-legend{display:flex;gap:9px;flex-wrap:wrap;margin-top:5px;color:var(--muted);font-size:11px;font-weight:750}
.metric-viz-legend span{display:inline-flex;align-items:center;gap:4px}
.metric-viz-legend i{width:6px;height:6px;border-radius:50%;background:#9aa8ba}
@media(min-width:900px) and (max-width:1120px){.dashboard-widget-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:899px){.dashboard-widget-grid{display:flex;flex-direction:column;gap:10px}.dashboard-widget-content>.dashboard-kpi,.dashboard-widget-content>.dashboard-panel{height:auto;max-height:none;overflow:visible}.dashboard-widget-grid .dashboard-kpi{min-height:114px}}

/* Herontwerp (5 sep 2026): telefoonweergave van het dashboard in het rd-kit — actiekaarten voor wat aandacht vraagt,
   een samenvattingsstrook voor de neutrale feiten en één rustige regel voor alles wat nul is. Alleen ≤720px; de
   widgetweergave (desktop én bewerkmodus) blijft zoals hij was. Kleuren uitsluitend via thema-variabelen. */
@media(max-width:720px){
.dashboard-phone .dashboard-scope{display:block;padding:8px 12px}
.dashboard-phone .dashboard-scope .warehouse-scope-bar{border:0;padding:0;border-radius:0;box-shadow:none;margin:0}
.dashboard-phone .dashboard-headline{padding-bottom:0}
.dashboard-phone .dashboard-headline-text{padding:2px 16px 8px;color:var(--text-primary,#172033);font-size:15px;font-weight:700;line-height:1.3}
.dashboard-phone .dashboard-kpi-grid{display:flex;flex-direction:column;gap:8px;padding:0 12px;margin:0}
.dashboard-phone .rd-action-card{flex-direction:row;align-items:center;gap:14px;width:100%;padding:14px 16px;min-height:66px;box-shadow:none;border-radius:14px;color:inherit;cursor:pointer;transform:none}
.dashboard-phone .rd-action-card .rd-big{min-width:54px;font-size:30px;color:var(--theme-accent-dark,#08766a);display:block;letter-spacing:-.02em;line-height:1}
.dashboard-phone .rd-action-card.warn .rd-big{color:var(--status-warn,#b54708)}
.dashboard-phone .rd-action-card .rd-row-body{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dashboard-phone .rd-action-card .kpi-label{margin:0;font-size:14px;letter-spacing:0;text-transform:none;color:var(--text-primary,#172033);font-weight:800;white-space:normal;line-height:1.25}
.dashboard-phone .rd-action-card small{display:block;margin:0;min-height:0;font-size:12px;line-height:1.35;color:var(--text-muted,#5f6f86)}
.dashboard-phone .rd-action-card .rd-pill{max-width:38%;white-space:normal;text-align:center;line-height:1.15;height:auto;min-height:var(--h-chip,40px);padding:8px 12px;color:var(--theme-accent-dark,#08766a);border-color:rgba(var(--theme-rgb,14,147,132),.32)}
.dashboard-phone .rd-action-card.warn .rd-pill{color:var(--status-warn,#b54708);border-color:#e0b483}
.dashboard-phone .dashboard-scope-total{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.dashboard-phone .rd-total-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dashboard-phone .rd-total-row .rd-big{font-size:34px;color:#fff}
.dashboard-phone .dashboard-scope-total small{color:#cfe3e0;font-size:12px;line-height:1.35}
.dashboard-phone .rd-total-transit{color:#9fc4bf;font-weight:700}
.dashboard-phone .dashboard-facts{margin:0}
.dashboard-phone .rd-summary-cell{flex:1 1 0;min-width:0;padding:10px 12px;display:flex;flex-direction:column;gap:2px;border:0;border-left:1px solid var(--line,#e2e8f0);border-radius:0;background:#fff;font:inherit;text-align:left;min-height:56px;color:inherit;box-shadow:none;align-items:flex-start;transform:none}
.dashboard-phone .rd-summary-cell:first-child{border-left:0}
.dashboard-phone .rd-summary-cell strong{font-size:18px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--text-primary,#172033);overflow-wrap:anywhere}
.dashboard-phone .rd-summary-cell .kpi-label{margin:0;font-size:11px;letter-spacing:0;text-transform:none;color:var(--text-muted,#5f6f86);font-weight:600;white-space:normal;overflow:visible;line-height:1.25}
.dashboard-phone .dashboard-quiet{flex-wrap:nowrap;align-items:flex-start;padding:12px 4px 4px}
.dashboard-phone .rd-quiet-body{min-width:0;display:flex;flex-direction:column;gap:8px}
.dashboard-phone .rd-quiet-body>strong{font-size:13px;font-weight:800;color:var(--text-primary,#172033);padding-top:6px}
.dashboard-phone .rd-quiet-items{display:flex;flex-wrap:wrap;gap:6px}
.dashboard-phone .rd-quiet-item{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line,#e2e8f0);border-radius:999px;background:#fff;font:inherit;font-size:12px;font-weight:700;color:var(--text-secondary,#475467);box-shadow:none;width:auto;margin:0;transform:none;overflow:visible}
.dashboard-phone .rd-quiet-item.accent{border-color:rgba(var(--theme-rgb,14,147,132),.32);color:var(--theme-accent-dark,#08766a);background:var(--theme-accent-soft,#e9faf7)}
.dashboard-phone .rd-quiet-item .kpi-label{margin:0;font-size:12px;letter-spacing:0;text-transform:none;color:inherit;font-weight:700;white-space:normal}
.dashboard-phone .rd-pill.live{border-color:var(--theme-accent,#0e9384);color:var(--theme-accent-dark,#08766a);background:var(--theme-accent-soft,#e9faf7)}
.dashboard-phone .dashboard-edit-bar{margin:12px 12px 0}
}
/* Desktop (≥721px): gepinde widgetstructuur blijft, kit-tokens erop — straal 14, lijnkleur en tekstkleuren uit het thema. */
@media(min-width:721px){
.dashboard-kpi,.dashboard-panel{border-radius:14px;border-color:var(--line,#e2e8f0);box-shadow:none}
.dashboard-kpi>strong,.kpi-inline strong{font-variant-numeric:tabular-nums}
.dashboard-kpi>small,.dashboard-panel-head small,.dashboard-action-copy small,.presence-row small,.movement-row small{color:var(--text-muted,#5f6f86)}
.dashboard-action-tile,.presence-row,.dashboard-location-tile{border-color:var(--line,#e2e8f0);border-radius:12px}
.dashboard-action-icon,.presence-avatar{background:var(--surface-sunken,#eef2f7);color:var(--text-secondary,#475467)}
.text-action{color:var(--theme-accent,#0e9384)}
}
/* Herontwerp (5 sep 2026): dashboard-detail (Producten/Tellingen/Mutaties/Waarde) in het rd-kit — RdSearch + RdChips als
   filter, RdRow-lijst (getal rechts), RdRing voor telvoortgang, RdSummary voor de waarde. De legacy .dashboard-detail-*-regels
   in 20-styles.css blijven staan voor de klassecontracten; hieronder alleen wat het kit erop nodig heeft. */
.dashboard-detail-sheet .dashboard-detail-controls{display:flex;flex-direction:column;gap:6px;margin:0 0 6px}
.dashboard-detail-sheet .rd-search{margin:0;max-width:none}
.dashboard-detail-sheet .rd-chips{padding:0}
.dashboard-detail-sheet .rd-list.dashboard-detail-list{border:0;border-radius:0;overflow:visible;background:transparent;padding:0;gap:7px}
.dashboard-detail-sheet .rd-row.dashboard-detail-row{border:1px solid var(--line,#e2e8f0);border-radius:12px;min-height:62px;padding:11px 13px;gap:11px;color:inherit}
.dashboard-detail-sheet .rd-row.dashboard-detail-row.warn{border-color:#f5d3ad}
.dashboard-detail-sheet .rd-row.dashboard-detail-row:hover{background:var(--surface-raised,#f8fafc)}
.dashboard-detail-sheet .dashboard-detail-row strong{display:block;font-size:inherit;line-height:inherit}
.dashboard-detail-sheet .dashboard-detail-row .rd-row-value strong{font-size:18px;line-height:1}
.dashboard-detail-sheet .dashboard-detail-row .rd-row-delta strong{font-size:17px;line-height:1}
.dashboard-detail-sheet .rd-section{padding:10px 4px 6px}
.dashboard-detail-sheet .rd-summary.flush{margin:0 0 10px;max-width:none}
.dashboard-detail-sheet .rd-empty{padding:12px 4px}
.dashboard-detail-sheet .dashboard-context-chip{max-width:34%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px){.dashboard-detail-sheet .rd-chips{margin:0 -4px;padding:0 4px}}

/* Desktop-dashboard (kit 6 sep 2026): niet-nul = actiekaart met accentrand en groot getal; nul = rustige, compacte tegel.
   De DOM blijft .dashboard-kpi/.kpi-label (contract v214/v179) en de indelingseditor blijft de eigenaar van de volgorde. */
@media(min-width:900px){
  .dashboard-kpi.attention{border-left:4px solid var(--status-warn,#b54708);background:#fff}
  .dashboard-kpi.attention>strong{font-size:34px;color:var(--status-warn,#b54708);font-variant-numeric:tabular-nums}
  .dashboard-kpi.attention .kpi-open{color:var(--status-warn,#b54708);font-weight:800}
  .dashboard-kpi.quiet{min-height:0;padding:10px 14px;background:var(--bg,#f7f9fc);border-style:dashed;box-shadow:none}
  .dashboard-kpi.quiet>strong{font-size:18px;color:var(--text-muted,#66758d)}
  .dashboard-kpi.quiet>small{color:var(--text-muted,#98a5b8)}
  .dashboard-kpi.quiet .kpi-label{color:var(--text-muted,#98a5b8)}
  .dashboard-kpi.quiet .kpi-open{opacity:.5}
}
@media(max-width:360px){.dashboard-phone .dashboard-kpi strong{font-size:clamp(14px,5vw,18px);white-space:nowrap;min-width:0;display:block}.dashboard-phone .rd-big{white-space:nowrap;min-width:0}}

/* ── Desktop-dashboard (mockup Dashboard.dc.html, 6 sep 2026) ── */
@media(min-width:721px){
  /* #126: het dashboard was gekapt op 1180px terwijl de contentkolom 1688px breed is, en stond niet
     gecentreerd — alle overruimte viel aan één kant. Voorraad en Tellingen staan al op 1400px met
     `margin:0 auto`; dit was de enige pagina die daarvan afweek. Op een hoog scherm vult de onderste
     rij de resthoogte, met de mutatielijst scrollend erin (was 301px leeg onderaan, nu 126px). */
  .dashboard-desktop{gap:18px;max-width:1400px;margin:0 auto}
  @media(min-height:900px){
    .dashboard-desktop{min-height:calc(100vh - 150px);min-height:calc(100dvh - 150px)}
    .dashboard-desktop .rd-desk-bottom{flex:1 1 auto;min-height:0}
    .dashboard-desktop .rd-desk-bottom>.rd-desk-panel{max-height:100%;overflow:auto}
  }
  .rd-desk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
  .rd-desk-head h1,.rd-desk-head h2{margin:0;font-size:26px;font-weight:900;letter-spacing:-.02em;color:var(--text-primary,#172033)}
  .rd-desk-head p{margin:4px 0 0;color:var(--text-muted,#66758d);font-size:13px}
  .rd-desk-scope .warehouse-scope-bar{border:0;background:transparent;padding:0;border-radius:0}
  .rd-desk-grid{display:flex;flex-direction:column;gap:16px}
  .rd-desk-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .rd-desk-actions .rd-action-card{padding:20px 22px;gap:20px;cursor:pointer;font:inherit;text-align:left;color:inherit}
  .rd-desk-actions .rd-action-card .rd-big{font-size:32px;min-width:72px}
  .rd-desk-actions .rd-action-card .kpi-label{display:block;font-size:15px;font-weight:700;color:var(--text-primary,#172033)}
  .rd-desk-actions .rd-action-card small{display:block;color:var(--text-secondary,#475467);font-size:13px;margin-top:4px}
  .rd-desk-actions .rd-action-card .rd-pill{height:44px;padding:0 20px;font-size:14px}
  .rd-desk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
  .rd-fact-card{padding:20px 22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;font:inherit;color:inherit;cursor:pointer;min-width:0}
  .rd-fact-card .rd-eyebrow{font-size:12px}
  .rd-fact-card .rd-big{font-size:30px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .rd-fact-card small{color:var(--text-muted,#66758d);font-size:12px;line-height:1.4}
  .rd-fact-card.navy small{color:#9fc4bf}
  .rd-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:2px}
  .rd-legend span{display:inline-flex;align-items:center;gap:6px;color:var(--text-secondary,#475467);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
  .rd-legend span.muted{color:var(--text-muted,#98a5b8);font-weight:500}
  .rd-legend i{width:8px;height:8px;border-radius:2px;background:var(--theme-accent,#0e9384)}
  .rd-legend i.b{background:rgba(var(--theme-rgb,14,147,132),.35)}.rd-legend i.c{background:var(--line,#e2e8f0)}
  .dashboard-desktop .dashboard-quiet{padding:15px 22px}
  .rd-desk-bottom{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
  .rd-desk-panel{padding:18px 22px;display:flex;flex-direction:column;gap:12px;min-width:0}
  .rd-desk-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .rd-desk-panel-head strong{font-size:15px;font-weight:800;color:var(--text-primary,#172033)}
  .rd-desk-panel-head .muted{color:var(--text-muted,#66758d);font-size:12.5px}
  .rd-desk-panel .rd-list{gap:0;padding:0}
  .rd-desk-panel .rd-row{border:0;border-top:1px solid var(--line-soft,#eef2f7);border-radius:0;padding:9px 0;min-height:0;background:transparent}
  .rd-desk-panel .rd-row:first-child{border-top:0}
  .rd-kv-list{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line,#e2e8f0);padding-top:12px}
  .rd-kv{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
  .rd-kv span{color:var(--text-muted,#66758d)}.rd-kv strong{color:var(--text-primary,#172033);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
  .rd-kv .text-action{font:inherit;font-weight:700;padding:0;border:0;background:transparent;color:var(--theme-accent,#0e9384);cursor:pointer}
  .rd-desk-quick{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line,#e2e8f0);padding-top:10px}
  .rd-desk-quick .rd-row{border:0;padding:8px 0}
}
@media(min-width:721px) and (max-width:1100px){.rd-desk-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.rd-desk-bottom{grid-template-columns:1fr}.rd-desk-actions{grid-template-columns:1fr}}
@media(min-width:721px){
  /* legacy .dashboard-kpi-button is een kolom met uppercase 11px-label; in de kit-actiekaart is het een rij met gewone titel */
  .rd-desk-actions .rd-action-card{flex-direction:row;align-items:center;justify-content:flex-start}
  .rd-desk-actions .rd-action-card .rd-row-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
  .rd-desk-actions .rd-action-card .kpi-label{text-transform:none;letter-spacing:0;font-size:15px;font-weight:700;margin:0}
  .rd-desk-actions .rd-action-card .kpi-open{display:none}
  .rd-desk-facts{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .rd-fact-card .kpi-label{text-transform:uppercase;letter-spacing:.05em;font-size:12px;margin:0}
  .dashboard-desktop .dashboard-quiet{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:14px;padding:14px 22px;width:auto}
  .dashboard-desktop .rd-quiet-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
  .dashboard-desktop .rd-quiet-body>strong{font-size:14px;font-weight:700;color:var(--text-primary,#172033)}
  .dashboard-desktop .rd-quiet-items{display:flex;flex-wrap:wrap;gap:6px}
  .dashboard-desktop .rd-quiet-item{display:inline-flex;align-items:center;height:30px;min-height:30px;padding:0 11px;border:1px solid var(--line,#e2e8f0);border-radius:999px;background:var(--bg,#f7f9fc);font:inherit;font-size:12px;font-weight:600;color:var(--text-secondary,#475467);width:auto;min-width:0;box-shadow:none;cursor:pointer}
  .dashboard-desktop .rd-quiet-item .kpi-label{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:inherit;margin:0}
  .dashboard-desktop .rd-quiet-item.accent{border-color:rgba(var(--theme-rgb,14,147,132),.4);color:var(--theme-accent-dark,#08766a);background:var(--theme-accent-soft,#e9faf7)}
}
@media(min-width:721px){
  .rd-desk-count .rd-desk-count-name{display:block;font-size:15px;font-weight:800;margin-top:2px}
  .rd-desk-count-progress{display:flex;align-items:center;gap:12px;color:var(--text-secondary,#475467);font-size:13px}
  .rd-desk-location-grid{display:flex;flex-wrap:wrap;gap:8px}
  .rd-desk-location-grid .dashboard-location-tile{height:auto;min-height:44px;padding:6px 12px;flex-direction:column;align-items:flex-start;gap:1px;border-radius:10px;cursor:pointer}
  .rd-desk-location-grid .dashboard-location-tile strong{font-size:13px}
  .rd-desk-location-grid .dashboard-location-tile span{font-size:11px;color:var(--text-muted,#66758d);font-weight:500}
  .rd-desk-location-grid .dashboard-location-tile.ok{border-color:#bce7d4;background:#ebf9f3}
}
/* Brede schermen (≥1700px): de inhoud mag tot 1760px groeien (00-styles .content); mutaties in twee kolommen, grotere kop. */
.rd-desk-panel .rd-list.rd-two-col>:nth-child(n+9){display:none}
@media(min-width:1700px){.rd-desk-panel .rd-list.rd-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rd-desk-panel .rd-list.rd-two-col>:nth-child(n+9){display:flex}.rd-desk-head h1,.rd-desk-head h2{font-size:32px}.rd-desk-actions .rd-action-card .rd-big{font-size:40px}.rd-fact-card .rd-big{font-size:36px}}
/* Telefoon: het bedrag in de derde feitcel mag nooit afgekapt worden; de rustige onderwerpen zijn labels, geen knoppen. */
@media(max-width:720px){.dashboard-facts strong{font-size:clamp(14px,4.6vw,18px);letter-spacing:-.01em}}
@media(max-width:430px){
  /* Drie cellen op 375px laten een bedrag als "€ 11.734,06" altijd afkappen: het bedrag krijgt een eigen regel. */
  .dashboard-facts{flex-wrap:wrap}
  .dashboard-facts>*{flex:1 1 50%;min-width:0}
  .dashboard-facts>:nth-child(3){flex:1 1 100%;border-left:0;border-top:1px solid var(--line,#e2e8f0)}
  .dashboard-facts strong{font-size:clamp(14px,4.6vw,19px)}
}
/* Telefoon: "niets open" is goed nieuws en hoeft geen half scherm. De onderwerpen blijven bereikbaar, één tik verder. */
.rd-quiet-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.rd-quiet-toggle svg{transition:transform .18s ease;color:var(--text-muted,#66758d);flex-shrink:0}
.rd-quiet-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.rd-quiet-items.collapsed{display:none}
/* ── UI-overhaul 7 sep 2026 · dashboard desktop (artboard desktop-01) ─────────────────────────────────
   Twee aandachtkaarten met gekleurde linkerrand, drie cijferkaarten (waarde donker met sparkline en trend),
   één rustige strook, en onderin twee panelen. Geen losse grafiekkaarten meer: elke grafiek hoort bij haar getal. */
.dashboard-desktop .rd-desk-actions{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.dashboard-desktop .rd-action-card{border-left-width:5px;border-radius:var(--r-card,16px);padding:20px 22px;gap:18px;align-items:center}
.dashboard-desktop .rd-desk-facts{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rd-fact-card{border-radius:var(--r-card,16px);min-height:168px;justify-content:flex-start;gap:6px;padding:20px 22px}
.rd-fact-card .rd-eyebrow{font-size:var(--fs-eyebrow,11px);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#66758d)}
.rd-fact-card.navy{background:var(--ink-dark,#0f2a24);border-color:transparent;color:#fff}
.rd-fact-card.navy .rd-eyebrow{color:rgba(255,255,255,.62)}
.rd-fact-card.navy .rd-big{color:#fff}
.rd-fact-card .rd-big{font-size:var(--fs-display,30px);line-height:1.05}
.rd-trend{font-size:12px;font-weight:800;color:var(--accent,#0e9384)}
.rd-fact-card.navy .rd-trend{color:#5fd4a8}
.rd-trend.down{color:var(--attention,#b54708)}
.rd-fact-chart{margin-top:auto;align-self:stretch;display:flex;justify-content:flex-end;padding-top:10px}
.rd-fact-chart .rd-bars{width:132px}
.rd-fact-card .rd-legend{margin-top:auto;padding-top:10px}
/* Eén aandachtkaart mag niet over de volle breedte uitrekken: het artboard toont twee kaarten naast elkaar,
   met één kaart houdt die de halve breedte zodat de compositie niet kantelt. */
@media(min-width:721px){.dashboard-desktop .rd-desk-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:721px) and (max-width:1100px){.dashboard-desktop .rd-desk-actions{grid-template-columns:minmax(0,1fr)}}
/* Rustige strook: icoon, één regel tekst, één link. De onderwerpen verschijnen pas als iemand erom vraagt. */
.rd-quiet{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px}
.rd-quiet-body{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rd-quiet-body strong{font-size:15px;font-weight:800;color:var(--text-primary,#172033)}
.rd-quiet-list{color:var(--text-secondary,#475467);font-size:13.5px;line-height:1.5}
.rd-quiet-toggle-link{flex-shrink:0}
.rd-quiet .rd-quiet-items{flex:1 1 100%;margin-top:4px}
/* Feature-CSS inventory (architectuurronde 3, 3 sep 2026): regels verplaatst uit 00/10/20/30-styles.css waarvan élke class exclusief
   in 44-app-locations-stock-products.js wordt gebruikt (in-place verwijderd, bronvolgorde behouden, media-blokken per herkomst gegroepeerd). */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.stock-line{display:flex;justify-content:space-between;gap:10px;align-items:flex-end}
.stock-line span,.stock-line strong{display:block}
.stock-line span{font-size:11px;color:var(--muted)}
.stock-line strong{font-size:20px;margin-top:2px}
.stock-line small{color:#667085;text-align:right;max-width:50%}
@media(max-width:430px){.stock-line{align-items:flex-start;flex-direction:column}.stock-line small{text-align:left;max-width:100%}}
.status-badge{display:inline-flex;align-items:center;min-height:22px;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.location-text-link{min-height:32px;padding:3px 7px;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:var(--accent);font-weight:800}
.location-text-link:hover{background:var(--accent-soft);border-color:#84adff}
.stock-location-chips button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-width:92px}
.stock-location-chips button strong{font-size:13px}
.location-inventory-list{display:flex;flex-direction:column;gap:8px}
.location-detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
@media(max-width:720px){.location-detail-actions{display:grid;grid-template-columns:1fr 1fr}.location-detail-actions>*{min-height:44px}}
.stock-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.stock-kpi{background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px 15px;min-width:0;box-shadow:0 5px 18px rgba(16,24,40,.035)}
.stock-kpi span,.stock-kpi strong,.stock-kpi small{display:block}
.stock-kpi span{font-size:11px;letter-spacing:.055em;text-transform:uppercase;color:var(--muted);font-weight:800}
.stock-kpi strong{font-size:24px;letter-spacing:-.035em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stock-kpi small{font-size:11px;color:#667085;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stock-search-toolbar{margin-bottom:12px}
@media(min-width:900px){.stock-location-overview{margin-bottom:12px}}
@media(max-width:899px) and (min-width:721px){.stock-kpi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.stock-kpi-grid{grid-template-columns:1fr 1fr;gap:8px}.stock-kpi{padding:11px 12px;border-radius:13px}.stock-kpi strong{font-size:20px}.stock-kpi small{font-size:11px}.stock-search-toolbar{margin-bottom:9px}.stock-location-overview{padding:11px;margin-bottom:10px}.desktop-stock-table{display:none}.stock-line strong{font-size:18px}}
.modern-search{position:relative;margin-bottom:14px}
.modern-search kbd{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:600 11px/1 ui-sans-serif;color:#8a98ad;background:transparent;border:0}
.modern-search input{padding-right:50px}
.stock-kpi-grid{gap:12px;margin-bottom:14px}
.stock-kpi.modern{display:flex;align-items:center;gap:14px;min-height:105px;padding:17px 18px;background:#fff;border:1px solid #e1e7ef;border-radius:16px;box-shadow:0 4px 16px rgba(31,48,76,.035)}
.stock-kpi-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#eaf3ff;color:#1267e8}
.stock-kpi-copy{min-width:0}
.stock-kpi.modern span:not(.stock-kpi-icon){font-size:11px;text-transform:none;letter-spacing:.01em;color:#61708a;font-weight:750}
.stock-kpi.modern strong{display:block;font-size:25px;line-height:1.1;margin:5px 0 4px;letter-spacing:-.035em;color:#14203a}
.stock-kpi.modern small{font-size:11px;color:var(--muted)}
.modern-location-strip{padding:14px 15px;border-radius:15px;margin-bottom:14px;box-shadow:0 3px 14px rgba(31,48,76,.025)}
.modern-location-strip .stock-location-chips{gap:7px;padding-bottom:0}
.modern-location-strip .stock-location-chips button{min-width:92px;min-height:51px;border-radius:10px;padding:7px 10px;border-color:#dde5ef;box-shadow:0 1px 2px rgba(31,48,76,.02)}
.modern-location-strip .stock-location-chips button strong{font-size:13px;color:#192641}
.modern-location-strip .stock-location-chips button small{font-size:11px}
.modern-stock-table{border-radius:15px;box-shadow:0 5px 20px rgba(31,48,76,.035);overflow-x:auto} /* 11 sep 2026: de tabel is 980px; smaller scrolt de kaart in plaats van uit beeld te lopen */
.modern-stock-table table{min-width:980px}
.modern-stock-table th{height:42px;padding:10px 14px;background:#fafbfd;font-size:11px;color:#51617a;letter-spacing:.03em}
.modern-stock-table td{padding:10px 14px;font-size:12px;vertical-align:middle;color:#26354c}
.modern-stock-table tbody tr{cursor:pointer}
.modern-stock-table tbody tr:hover{background:#f8fbff}
.modern-stock-table .location-text-link{min-height:29px;border-radius:8px;background:#f7faff;border-color:#d7e4f7;font-size:11px;padding:3px 8px}
.row-menu{width:36px;color:#8794a8}
@media(max-width:1100px) and (min-width:900px){.stock-kpi-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.modern-search kbd{display:none}.stock-kpi.modern{min-height:88px;padding:13px}.stock-kpi-icon{width:38px;height:38px}.stock-kpi.modern strong{font-size:21px}}
@media(max-width:430px){.stock-kpi-grid{grid-template-columns:1fr 1fr}}
@media(min-width:721px){.two-row-locations{padding:13px 14px 14px;margin-bottom:10px}.two-row-locations .stock-location-chips{display:grid;grid-template-rows:repeat(2,52px);grid-auto-flow:column;grid-auto-columns:minmax(104px,118px);gap:8px;overflow-x:auto;overflow-y:hidden;padding-bottom:3px;scrollbar-width:thin}.two-row-locations .stock-location-chips button{height:52px;min-width:0;padding:7px 10px;border-radius:11px;text-align:left}.two-row-locations .stock-location-chips button strong{font-size:12px}.two-row-locations .stock-location-chips button small{font-size:11px;white-space:nowrap}.table-search-position{margin:0 0 10px!important}.table-search-position input{font-size:12px}.redesigned-stock-table table{min-width:980px}.redesigned-stock-table th:first-child{width:88px}.redesigned-stock-table th:nth-child(2){min-width:292px}.stock-location-first{vertical-align:middle;padding-left:10px!important;padding-right:6px!important}.stock-location-code{display:inline-flex!important;align-items:center;gap:4px;font-weight:850;min-width:54px;justify-content:flex-start}.stock-number{font-weight:800;color:#17233a}}
@media(min-width:721px){/* Voorraad: productnaam krijgt duidelijk meer horizontale ruimte; barcode schuift naar rechts. */
  .redesigned-stock-table table{min-width:1080px}.redesigned-stock-table th:nth-child(2){min-width:390px}}
@media(min-width:721px){/* Desktopbediening: minimaal comfortabel klikvlak voor locatie- en paginaknoppen. */
  .modern-stock-table .location-text-link{min-height:34px;padding:5px 9px;font-size:11px}}
@media(min-width:721px) and (max-width:1340px){.redesigned-stock-table table{min-width:960px}.redesigned-stock-table th:nth-child(2){min-width:320px}.modern-stock-table th,.modern-stock-table td{padding-left:10px;padding-right:10px}}
.stock-kpi.modern{align-items:center}
.stock-kpi.modern .stock-kpi-icon{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;margin:0;box-sizing:border-box}
.stock-kpi.modern .stock-kpi-icon svg{width:19px!important;height:19px!important;display:block;stroke-width:2;overflow:visible}
.stock-code-present{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:126px}
.archive-meta{font-size:11px;color:var(--muted);margin:8px 0}
@media(max-width:720px){.stock-kpi-grid{gap:7px!important;margin-bottom:10px!important}.stock-kpi.modern{min-height:78px!important;padding:10px 11px!important;border-radius:14px!important;gap:9px!important;box-shadow:none!important}.stock-kpi-icon{width:34px!important;height:34px!important;border-radius:10px!important;flex:0 0 34px}.stock-kpi.modern strong{font-size:18px!important;margin:3px 0 1px!important}.stock-kpi.modern span:not(.stock-kpi-icon),.stock-kpi.modern small{font-size:11px!important}.modern-location-strip{padding:10px!important;border-radius:14px!important;margin-bottom:9px!important}.modern-location-strip .stock-location-chips button{min-width:78px!important;min-height:44px!important;border-radius:10px!important;padding:6px 8px!important}.stock-search-toolbar{position:sticky;top:61px;z-index:22;margin:0 -2px 10px!important;padding:6px 2px;background:linear-gradient(180deg,rgba(248,250,253,.98) 75%,rgba(248,250,253,0));backdrop-filter:blur(8px)}.status-badge{font-size:11px!important;min-height:20px!important;padding:3px 6px!important}.stock-line{align-items:center!important;flex-direction:row!important}.stock-line strong{font-size:18px!important}.stock-line small{max-width:56%!important;text-align:right!important;font-size:11px!important}}
@media(max-width:390px){.stock-kpi.modern{padding:9px!important}.stock-kpi-icon{width:31px!important;height:31px!important;flex-basis:31px}.stock-kpi.modern strong{font-size:16px!important}}
@media(max-width:720px){/* Stock: KPI information remains useful without delaying the product list. */
  .stock-kpi-grid{display:flex!important;overflow-x:auto!important;gap:7px!important;margin:0 -10px 9px!important;padding:0 10px 3px!important;scroll-snap-type:x proximity;scrollbar-width:none}.stock-kpi-grid::-webkit-scrollbar{display:none}.stock-kpi.modern{flex:0 0 142px!important;min-height:72px!important;scroll-snap-align:start}.modern-location-strip .stock-location-chips button{min-height:44px!important}}
@media(max-width:390px){.stock-kpi.modern{flex-basis:132px!important}}
/* Herontwerp (5 sep 2026): Voorraad in het kit — mobiel één verticale lijst van 66px-rijen (.rd-stock-list) en een rij per
   locatie (.rd-location-list); desktop houdt kpi-grid, locatiestrook en tabel en krijgt thema-tokens plus dezelfde filterchips.
   Locatiedetail (modal) gebruikt RdSummary/RdRow; de oude .location-detail-summary/.location-inventory-row/.location-child-*
   regels zijn hierboven verwijderd omdat die markup niet meer bestaat. */
@media(max-width:720px){
  .mobile-stock-page .rd-summary-secondary{margin-top:7px}
  /* 8 sep 2026: kengetallen ingeklapt tot een regel (44px i.p.v. ~200px). De chevron draait; de knop is
     zelf de discloser, dus geen tweede bedieningselement ernaast (DESIGN-SYSTEM 108). */
  .mobile-stock-page .rd-summary-fold{display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:calc(100% - 24px);margin:10px 12px 0;min-height:44px;padding:0 13px;border:1px solid var(--line,#e2e8f0);
    border-radius:12px;background:#fff;color:var(--text-secondary,#475467);font:inherit;font-size:13px;font-weight:700;
    text-align:left;font-variant-numeric:tabular-nums;box-shadow:none}
  .mobile-stock-page .rd-summary-fold>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-stock-page .rd-summary-fold svg{flex:0 0 auto;transform:rotate(90deg);transition:transform .16s ease;color:var(--text-muted,#5f6f86)}
  .mobile-stock-page .rd-summary-fold.open svg{transform:rotate(-90deg)}
  .mobile-stock-page .rd-summary-fold.open{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
  .mobile-stock-page .rd-summary-fold.open+.rd-summary{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
  @media(prefers-reduced-motion:reduce){.mobile-stock-page .rd-summary-fold svg{transition:none}}
  .mobile-stock-page .rd-summary span,.rd-location-summary span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .mobile-stock-page .mobile-stock-footer{padding:10px 12px 4px}
  .rd-stock-row .rd-row-badge,.rd-location-list .rd-row-badge{font-size:11px;letter-spacing:-.01em;padding:0 2px;text-align:center;line-height:1.1}
  /* Filterchips wikkelen i.p.v. horizontaal scrollen: één scroll-as per scherm en geen knop buiten beeld (test_v184-audit). */
  .mobile-stock-page .rd-chips{flex-wrap:wrap;overflow:visible}
  .mobile-stock-page .rd-chips button{padding:0 12px}
}
.stock-desktop-filters{margin:-4px 0 12px}
.modern-stock-page .rd-location-list{max-width:760px}
.stock-kpi-icon{background:var(--theme-accent-soft,#eaf3ff);color:var(--theme-accent,#1267e8)}
.stock-kpi.modern.warn .stock-kpi-icon{background:var(--surface-warn,#fff6ed);color:var(--status-warn,#b54708)}
.stock-kpi.modern strong{color:var(--text-primary,#14203a)}
.modern-stock-table tbody tr:hover{background:var(--theme-accent-soft,#f8fbff)}
.modern-stock-table .location-text-link{color:var(--theme-accent-dark,#08766a);border-color:rgba(var(--theme-rgb,14,147,132),.32);background:var(--theme-accent-soft,#f7faff)}
.rd-location-summary{margin:0 0 12px;max-width:none}
.location-parent-link{margin:0 0 12px}
.location-child-list,.location-inventory-list{margin-bottom:12px}
/* Desktop-KPI's (kit 6 sep 2026): hele woorden — labels lopen om, het getal breekt nooit af. */
@media(min-width:721px){
  .stock-kpi.modern small,.stock-kpi.modern span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
  .stock-kpi.modern strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
  .stock-kpi.modern strong.money,.stock-kpi.modern.value strong{font-size:20px}
}
/* Voorraad desktop compact (kit 6 sep 2026): vijf KPI's als één strook, locaties als kleine chips — de lijst is het scherm */
@media(min-width:721px){
  .modern-stock-page .stock-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;border:1px solid var(--line,#e2e8f0);border-radius:14px;background:#fff;overflow:hidden}
  .modern-stock-page .stock-kpi.modern{display:flex;flex-direction:column;gap:2px;padding:12px 16px;min-height:0;border:0;border-left:1px solid var(--line,#e2e8f0);border-radius:0;box-shadow:none;background:transparent}
  .modern-stock-page .stock-kpi.modern:first-child{border-left:0}
  .modern-stock-page .stock-kpi.modern strong{font-size:22px;margin:0}
  .modern-stock-page .stock-kpi.modern span{font-size:11px}
  .modern-stock-page .stock-kpi.modern small{font-size:11px;margin-top:0}
  .modern-stock-page .stock-kpi.modern .stock-kpi-icon,.modern-stock-page .stock-kpi.modern svg{display:none}
  .modern-location-strip{padding:12px 16px}
  .modern-location-strip h3,.modern-location-strip strong.strip-title{font-size:13px;font-weight:800}
  .modern-location-strip p,.modern-location-strip small.strip-copy{display:none}
  /* Een vervagende tweede rij liegt: hij suggereert dat je kunt scrollen terwijl er niets beweegt. Twee volle rijen,
     en wie meer wil ziet een echte knop met het aantal (7 sep 2026). */
  .modern-location-strip .stock-location-chips{display:flex;flex-wrap:wrap;gap:6px}   /* twee rijen; de volledige lijst zit achter de chip 'Locaties' */
  .modern-location-strip .stock-location-chips button{height:32px;min-height:32px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--line,#e2e8f0);background:var(--bg,#f7f9fc)}
  .modern-location-strip .stock-location-chips button strong{font-size:12px}
  .modern-location-strip .stock-location-chips button small,.modern-location-strip .stock-location-chips button span{font-size:11px;color:var(--text-muted,#66758d)}
  .modern-location-strip .stock-location-chips button.active{background:var(--theme-navy,#082f2d);border-color:var(--theme-navy,#082f2d);color:#fff}
  .modern-location-strip .stock-location-chips button.active small,.modern-location-strip .stock-location-chips button.active span{color:#cfe3e0}
}
/* Tablet (721–1100px): de voorraadtabel is 960px breed en dwingt horizontaal schuiven binnen de tabel, waardoor
   productnamen op 162px worden afgekapt en Kostprijs/Waarde buiten beeld vallen. Twee secundaire kolommen gaan weg —
   "Eenheid" staat al in de voorraadcel ("2.200 stuk") en de verpakkingsweergave staat in het productdetail.
   Vanaf 1101px staan alle kolommen er weer; er verdwijnt dus geen informatie, alleen herhaling op een smal scherm. */
@media(min-width:721px) and (max-width:1100px){
  .modern-stock-table thead th:nth-child(5),.modern-stock-table tbody td:nth-child(5){display:none}
  .modern-stock-table td strong{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .modern-stock-table{min-width:0}
}
/* Locaties (artboard mobiel-09): lijstregels met codebadge; sublocaties springen in. */
.location-manage-grid{display:flex;flex-direction:column;gap:var(--gap-list,10px)}
.location-manage-item{align-items:stretch}
.location-manage-open.is-child{margin-left:18px}
.location-manage-item.inactive{opacity:.72}
.location-manage-open .rd-row-badge{font-weight:800;letter-spacing:-.01em}
/* UI-overhaul 7 sep 2026: de eenheid stond drie keer in één rij (onder de naam, in EENHEID en in het getal).
   De kolom EENHEID vervalt; de barcode is vakwerk voor brede schermen en verdwijnt onder 1500px. */
@media(min-width:721px){
  /* Kolom 3 is EENHEID; die staat al in het voorraadgetal ("2.200 stuk"). Kolom 4 is VOORRAAD en blijft altijd staan:
     dat is het getal waarvoor iemand deze pagina opent. */
  .modern-stock-table thead th:nth-child(3),.modern-stock-table tbody td:nth-child(3){display:none}
}
@media(min-width:721px) and (max-width:1499px){
  .modern-stock-table thead th:nth-child(2) .stock-barcode-block,.modern-stock-table tbody td .stock-barcode-block{display:none}
}
/* Locatiestrook: standaard twee rijen, uitklapbaar met een chip die zegt hoeveel er nog is. Geen mask, geen afkapping. */
.stock-location-chips.collapsed{max-height:112px;overflow:hidden}
@media(min-width:721px){.stock-location-chips.collapsed{max-height:118px}}
.stock-location-more{border-style:dashed!important;color:var(--accent-dark,#0b6e63)!important;font-weight:800}
/* ── Locaties met voorraad: een raster van gelijke tegels (7 sep 2026) ────────────────────────────────
   Waren ovale pillen met wisselende breedte — twee regels tekst in een bolletje leest slecht en lijnt nergens op uit.
   Nu vaste tegels van 108px in een raster: code groot en tabulair, inhoud klein eronder, alles op één lijn. */
@media(min-width:721px){
  .two-row-locations .stock-location-chips,
  .modern-location-strip .stock-location-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;grid-auto-flow:row;grid-auto-columns:auto}
  .modern-location-strip .stock-location-chips button{width:auto;min-width:0;height:60px;min-height:60px;border-radius:12px;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:0 12px;
    border:1px solid var(--card-border,#e6ebf2);background:#fff;box-shadow:none;transition:border-color .14s ease,background-color .14s ease}
  .modern-location-strip .stock-location-chips button:hover{border-color:var(--accent,#0e9384);background:var(--accent-soft,#e9faf7)}
  .modern-location-strip .stock-location-chips button strong{font-size:15px;font-weight:800;color:var(--text-primary,#172033);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .modern-location-strip .stock-location-chips button small{font-size:11.5px;color:var(--text-muted,#66758d);white-space:nowrap}
  .modern-location-strip .stock-location-chips .stock-location-more{border-style:solid!important;background:var(--surface-raised,#f8fafc);align-items:center;justify-content:center;text-align:center}
  .modern-location-strip .stock-location-chips .stock-location-more strong{color:var(--accent-dark,#0b6e63)}
  .stock-location-chips.collapsed{max-height:none;overflow:visible}
}
/* ── Compositie Voorraad op desktop (7 sep 2026) ──────────────────────────────────────────────────────
   Volgorde op het scherm: kop → één rij kengetallen → zoeken en filters → de tabel → pas daarna de
   locatietegels. De tegels zijn een navigatiehulp; ze aten een derde van het scherm vóórdat je één
   voorraadregel zag. Met `order` verhuizen ze zonder de markup (en dus de tests) te breken. */
/* Vanaf 721px rendert de voorraadpagina de DESKTOP-markup (isPhone is <=720). De volgorde hoorde bij
   die markup, niet bij 900px — tussen 721 en 899 stonden de locatietegels daardoor nog boven de
   zoekbalk, precies het beeld dat de gebruiker aanwees. */
@media(min-width:721px){
  .stock-page.modern-stock-page{display:flex;flex-direction:column}
  /* Basisvolgorde voor ALLES wat hier direct in staat. Zonder deze regel kreeg een blok zonder eigen
     `order` de waarde 0 en sprong het vóór de zoekbalk — precies wat er gebeurde met de locatielijst
     van het filter 'Locaties': die stond ineens bovenaan zonder zoekveld of filters erboven. */
  .stock-page.modern-stock-page>*{order:6}
  .stock-page.modern-stock-page>.page-head{order:0}
  .stock-page.modern-stock-page>.warehouse-scope-bar{order:1}
  .stock-page.modern-stock-page>.stock-kpi-grid{order:2}
  .stock-page.modern-stock-page>.replenishment-overview{order:3}
  .stock-page.modern-stock-page>.stock-search-toolbar{order:4}
  .stock-page.modern-stock-page>.stock-desktop-filters{order:5}
  .stock-page.modern-stock-page>.rd-result-bar{order:5}
  .stock-page.modern-stock-page>.data-card,
  .stock-page.modern-stock-page>.modern-stock-table-wrap,
  .stock-page.modern-stock-page>.table-card,
  .stock-page.modern-stock-page>.stock-table-card{order:6}
  .stock-page.modern-stock-page>.two-row-locations{order:8;margin-top:6px}
  .stock-page.modern-stock-page>.rd-location-list{order:6}
  .stock-page.modern-stock-page>.pager,
  .stock-page.modern-stock-page>.stock-pager{order:7}
  /* Kengetallen compacter: één rij van 76px in plaats van een blok van 110px. */
  .modern-stock-page .stock-kpi-grid{gap:0}
  .modern-stock-page .stock-kpi{min-height:76px;padding:12px 18px}
  .modern-stock-page .stock-kpi .stock-kpi-icon{display:none}
  .modern-stock-page .stock-kpi-copy strong{font-size:22px}
}

/* #107: weergave (Producten | Locaties) is géén filter. Twee brede knoppen met een subregel die het aantal
   noemt, zodat je vóór het klikken weet hoeveel er is — dat was precies wat ontbrak. */
.stock-view-switch{display:flex;gap:8px;margin:0 0 10px}
.stock-view-switch button{flex:0 0 auto;min-width:168px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  height:52px;padding:0 16px;justify-content:center;border:1px solid var(--line,#e2e8f0);border-radius:var(--radius-md,12px);
  background:var(--surface,#fff);font:inherit;cursor:pointer;color:var(--ink-dark,#101828)}
.stock-view-switch button strong{font-size:14px;font-weight:700}
.stock-view-switch button small{font-size:12px;color:var(--text-muted,#66758d);font-variant-numeric:tabular-nums}
.stock-view-switch button.active{border-color:var(--theme-accent,#0f766e);background:var(--theme-accent-soft,#e8f5f1)}
.stock-view-switch button.active strong,.stock-view-switch button.active small{color:var(--theme-accent,#0f766e)}
.location-table-card{overflow:hidden}
.location-table{width:100%;border-collapse:collapse}
.location-table th{padding:11px 14px;text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#66758d);background:var(--surface-quiet,#f7f9fc);border-bottom:1px solid var(--line,#e6eaf1)}
.location-table th.num,.location-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.location-table td{padding:11px 14px;border-bottom:1px solid var(--line,#eef1f6);font-size:14px;vertical-align:middle}
.location-table tbody tr{cursor:pointer}
.location-table tbody tr:hover{background:var(--surface-quiet,#f7f9fc)}
.location-table td strong{display:block;font-weight:650}
.location-table td small{display:block;margin-top:1px;font-size:11.5px;color:var(--text-muted,#66758d)}
.location-table .location-code-badge{display:inline-grid;place-items:center;min-width:46px;height:30px;padding:0 9px;border-radius:9px;background:var(--theme-accent-soft,#e8f5f1);color:var(--theme-accent,#0f766e);font-weight:750;font-size:12.5px;font-variant-numeric:tabular-nums}
.location-table .row-chevron{width:34px;text-align:right;color:var(--text-muted,#9aa6b8)}
@media(min-width:721px){.stock-page.modern-stock-page>.stock-view-switch{order:3}}
@media(max-width:720px){
  .stock-view-switch{margin:0 var(--page-pad,14px) 10px}
  .stock-view-switch button{flex:1 1 0;min-width:0}
  .location-table th:nth-child(3),.location-table td:nth-child(3){display:none}
}


/* #120: locatiedetail als rechterpaneel náást de tabel. Je kiest in deze weergave locaties na elkaar;
   een modal dwingt telkens sluiten-kiezen-openen en verbergt juist de lijst waar je uit kiest. Onder
   1100px blijft het een modal — daar is geen ruimte om naast te staan. */
.location-view-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:16px;align-items:start}
.location-view-single{display:block}
.location-side-panel{position:sticky;top:14px;padding:0;overflow:hidden;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto}
.location-side-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line,#e6eaf1)}
.location-side-head strong{display:block;font-size:15px;font-weight:750;color:var(--ink-dark,#101828)}
.location-side-head small{display:block;margin-top:2px;font-size:12px;color:var(--text-muted,#66758d)}
.location-side-close{flex:0 0 auto;width:32px;height:32px;min-height:0;display:grid;place-items:center;border-radius:9px}
.location-side-panel>*:not(.location-side-head){padding-left:16px;padding-right:16px}
.location-side-panel>*:last-child{padding-bottom:16px}
/* In het smalle paneel passen vier kengetallen niet naast elkaar: ze kapten af tot "directe p…". */
.location-side-panel .rd-summary{grid-template-columns:1fr 1fr;gap:8px}
.location-side-panel .rd-summary>*{min-width:0}
.location-side-panel .rd-summary small,.location-side-panel .rd-summary span{white-space:normal}
/* Feature-CSS products (architectuurronde 3, 3 sep 2026): regels verplaatst uit 00/10/20/30-styles.css waarvan élke class exclusief
   in 44-app-locations-stock-products.js wordt gebruikt (in-place verwijderd, bronvolgorde behouden, media-blokken per herkomst gegroepeerd). */
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.product-card{padding:16px;min-width:0}
.product-card-top{display:flex;align-items:flex-start;gap:11px}
.product-card code{font-size:11px;color:#667085}
.product-card h2{font-size:17px;margin:4px 0 4px}
.product-card p{font-size:12px;line-height:1.45;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.product-facts{display:flex;flex-wrap:wrap;gap:7px 12px;border-top:1px solid #f0f2f5;border-bottom:1px solid #f0f2f5;padding:11px 0;margin:13px 0;color:#667085;font-size:12px}
.product-facts span{display:flex;align-items:center;gap:5px}
.product-facts svg{width:15px}
.card-actions{display:flex;gap:7px;margin-top:14px}
@media(max-width:900px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.product-grid{grid-template-columns:1fr}}
@media(max-width:430px){.product-facts{flex-direction:column;gap:6px}}
@media(max-width:720px){.product-card{box-shadow:none}}
.product-card-status{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.product-card-actions{flex-wrap:wrap}
.product-card-actions button{flex:1 1 105px}
@media(max-width:720px){.product-card-actions{display:grid;grid-template-columns:1fr 1fr}.product-card-actions button{width:100%}}
@media(max-width:430px){.product-card-actions{grid-template-columns:1fr}}
.product-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.product-card{border-radius:15px;box-shadow:0 5px 18px rgba(16,24,40,.035);padding:14px}
.product-card h2{font-size:15px}
.product-card p{min-height:0;-webkit-line-clamp:1}
.product-facts{margin:10px 0;padding:9px 0;gap:6px 10px}
.card-actions{margin-top:10px}
@media(max-width:899px) and (min-width:721px){.product-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.product-grid{grid-template-columns:1fr;gap:8px}.product-card{padding:12px;border-radius:14px}.product-card-top{gap:9px}.product-card h2{font-size:15px}.product-card p{font-size:11px}.product-facts{font-size:11px}.product-card-actions button{min-height:39px;padding:7px 9px;font-size:11px}}
@media(max-width:720px){.product-card{border-radius:15px;padding:13px}.product-card-actions{gap:7px}.product-card-actions button{font-size:12px;min-height:42px}}
.product-card-image img{object-fit:contain}
.product-card-top{gap:13px}
.product-card-top{gap:15px}
.product-card-image img{object-fit:contain}
@media(max-width:720px){.product-grid{gap:9px!important}.product-card{padding:12px!important;border-radius:16px!important;box-shadow:0 3px 12px rgba(31,48,76,.035)!important}.product-card-top{align-items:center!important;gap:11px!important}.product-card h2{font-size:15px!important;margin:3px 0 2px!important}.product-card p{font-size:11px!important;color:var(--muted)!important}.product-card-status code{font-size:11px!important}.product-facts{display:grid!important;grid-template-columns:1fr 1fr;gap:5px!important;margin:9px 0!important;padding:8px 0!important;font-size:11px!important}.product-facts span{min-width:0;padding:5px 6px;border-radius:8px;background:#f7f9fc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-facts span:nth-child(3),.product-facts span:nth-child(4){display:block}.product-card-actions{grid-template-columns:1fr 1fr!important;gap:6px!important}.product-card-actions button{min-height:42px!important;border-radius:10px!important;font-size:11px!important}}
@media(max-width:720px){/* Product cards: keep daily actions visible; secondary metadata is visually subordinate. */
  .product-facts{grid-template-columns:1fr 1fr!important}.product-facts span{font-size:11px!important;line-height:1.3!important;min-height:30px;display:flex!important;align-items:center}.product-card-actions button{min-height:46px!important;font-size:11px!important}.product-card h2{line-height:1.25!important}.product-card p{line-height:1.4!important}}
/* Herontwerp (5 sep 2026): Producten mobiel in het kit — 66px-rijen (.rd-product-row), losse 44px-actiepil naast de rij
   (.rd-split: nooit een knop in een knop), hoofdknop onderaan. Desktopkaarten krijgen de kit-kaartrand (.rd-card). */
.rd-split{display:flex;align-items:center;gap:8px}
.rd-split>.rd-row{flex:1 1 auto;min-width:0}
.rd-split>.rd-pill{padding:0 12px}
.product-card.rd-card{box-shadow:none;border-color:var(--line,#e2e8f0)}
.product-card.rd-card h2{color:var(--text-primary,#172033)}
@media(max-width:720px){.mobile-products-page .product-grid-footer{padding:10px 12px 4px}
  /* Vijf statuschips passen niet op één regel van 390px: wikkelen i.p.v. horizontaal scrollen (één scroll-as, geen knop buiten beeld). */
  .mobile-products-page .rd-chips{flex-wrap:wrap;overflow:visible}.mobile-products-page .rd-chips button{padding:0 12px}}
/* Producten desktop (kit 6 sep 2026): geen kaartenraster van 150px per product meer, maar compacte rijen in het tabelritme */
@media(min-width:721px){
  .product-grid{grid-template-columns:1fr;gap:6px}
  .product-card.rd-card{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) 150px auto;align-items:center;gap:14px 18px;padding:8px 14px;min-height:56px;border-radius:12px}
  .product-card .product-card-top{display:flex;align-items:center;gap:12px;min-width:0;margin:0}
  .product-card .product-card-image{width:56px;height:56px;flex-shrink:0;border-radius:12px}
  .product-card .product-card-top strong,.product-card .product-card-top h3{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
  .product-card .product-card-top small,.product-card .product-card-top p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:12px}
  .product-card .product-facts{font-size:12px;color:var(--text-muted,#66758d);margin:0;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center;min-width:0;line-height:1.3}
  .product-card .product-facts>*{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
  .product-card .stock-line>small,.product-card .stock-line>span+span{display:none}   /* dubbele eenheidsregel onder het getal */
  .product-card .stock-line{margin:0;text-align:right;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:flex-end;gap:0}
  .product-card .stock-line strong{font-size:16px;font-weight:900}
  .product-card .stock-line span,.product-card .stock-line small{font-size:11px;color:var(--text-muted,#98a5b8)}
  .product-card .product-card-actions{margin:0;display:flex;gap:6px;flex-wrap:nowrap}
  .product-card .product-card-actions button{height:36px;min-height:36px;padding:0 12px;font-size:12.5px;white-space:nowrap}
  .product-card .product-card-status{margin-left:8px}
}
@media(min-width:721px) and (max-width:1100px){.product-card.rd-card{grid-template-columns:minmax(0,1.6fr) 120px auto}.product-card .product-facts{display:none}}
@media(min-width:721px){.product-grid .product-card .product-card-image.product-image-thumb,.product-grid .product-card .product-card-image{width:56px!important;height:56px!important;flex:0 0 56px!important;min-width:56px;min-height:56px;border-radius:12px}.product-grid .product-card .product-card-image svg{width:26px;height:26px}}
@media(min-width:721px){.product-grid .product-card{min-height:76px}}
/* ── Productdetail (artboard mobiel-06) ───────────────────────────────────────────────────────────────
   Kopkaart met beeld en herkomst, donkere totaalkaart met dit magazijn groot en de andere klein ernaast,
   daarna de locaties als lijst, en onderaan twee gelijkwaardige acties. */
/* ── Productdetail (artboard, 7 sep 2026) ─────────────────────────────────────────────────────────
   Leeskolom links (per locatie, laatste mutaties), feitenkolom rechts (totalen donker, verpakkingen,
   codes). Eén kaartsoort. Getallen tabulair en rechts uitgelijnd; de code links is een monogram met
   vaste breedte, zodat de namen onder elkaar op één lijn beginnen. */
.product-detail-page{display:flex;flex-direction:column;gap:14px;padding:0 var(--page-pad,14px)}
.pd-head{display:flex;align-items:flex-start;gap:12px;padding-top:4px}
.pd-back{flex:0 0 auto;transform:rotate(180deg)}
.pd-crumb{display:none;align-items:center;gap:4px;margin:0 0 6px;padding:0;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--text-muted,#66758d);cursor:pointer}
.pd-crumb:hover{color:var(--theme-accent,#0f766e)}
.pd-crumb svg{transform:rotate(180deg)}
.pd-title{margin:0;font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.015em;color:var(--ink-dark,#101828)}
.pd-sub{margin:4px 0 0;font-size:13px;color:var(--text-muted,#66758d)}
.pd-head-actions{display:flex;gap:8px;flex:0 0 auto}
.pd-grid{display:flex;flex-direction:column;gap:14px}
.pd-main,.pd-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.rd-card.pd-card{padding:0;overflow:hidden}
.pd-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 10px}
.pd-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#66758d)}
.pd-card-action{border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:650;color:var(--theme-accent,#0f766e);cursor:pointer}
.pd-card-action:hover{text-decoration:underline}
.pd-rows{display:flex;flex-direction:column}
.pd-loc-row,.pd-mut-row,.pd-fact-row{display:grid;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line,#e6eaf1);text-align:left}
.pd-loc-row{grid-template-columns:44px minmax(0,1fr) auto auto 18px;width:100%;border-left:0;border-right:0;border-bottom:0;background:none;font:inherit;cursor:pointer}
.pd-loc-row:hover{background:var(--surface-quiet,#f7f9fc)}
.pd-code{display:grid;place-items:center;width:44px;height:34px;border-radius:9px;background:var(--theme-accent-soft,#e8f5f1);color:var(--theme-accent,#0f766e);font-size:12px;font-weight:800}
.pd-loc-name{font-size:15px;font-weight:700;color:var(--ink-dark,#101828);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-loc-meta{font-size:12.5px;color:var(--text-muted,#66758d);white-space:nowrap}
.pd-num{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;font-size:19px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--ink-dark,#101828)}
.pd-num small{font-size:11px;font-weight:600;color:var(--text-muted,#66758d)}
.pd-loc-row svg{color:var(--text-muted,#9aa6b8)}
.pd-mut-row{grid-template-columns:64px minmax(0,1fr) auto}
.pd-delta{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.pd-delta.pos{color:var(--ok,#0f7b52)}
.pd-delta.neg{color:var(--danger,#b42318)}
.pd-mut-row strong{display:block;font-size:14px;font-weight:700;color:var(--ink-dark,#101828);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-mut-row small{display:block;margin-top:2px;font-size:12px;color:var(--text-muted,#66758d)}
.pd-mut-time{font-size:12.5px;color:var(--text-muted,#66758d);white-space:nowrap}
.pd-fact-row{grid-template-columns:minmax(0,1fr) auto}
.pd-fact-name{font-size:14px;font-weight:650;color:var(--ink-dark,#101828)}
.pd-fact-value{font-size:13px;color:var(--text-muted,#66758d);font-variant-numeric:tabular-nums}
.pd-quiet{margin:0;padding:0 16px 14px;font-size:12.5px;color:var(--text-muted,#66758d)}
.pd-loading{padding:14px 16px;font-size:13px;color:var(--text-muted,#66758d)}
.pd-code-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.pd-code-chip{padding:6px 10px;border-radius:8px;background:var(--surface-quiet,#f3f6fa);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ink-dark,#101828)}
/* Prijstegel (10 sep 2026): de prijs stond als grijze voetnoot onder de barcodes en verdween helemaal
   als er geen prijs was. Nu een eigen tegel, met dezelfde ritmiek als de andere feitenkaarten: één groot
   getal met zijn eenheid eronder, daarna feitenregels. */
.pd-price .pd-price-main{display:flex;align-items:baseline;gap:8px;padding:2px 16px 14px}
.pd-price .pd-price-main strong{font-size:30px;font-weight:900;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pd-price .pd-price-main small{font-size:13px;color:var(--text-muted,#66758d)}
.pd-price .pd-price-review{display:flex;align-items:flex-start;gap:8px;margin:0 16px 12px;padding:9px 11px;
  border-radius:10px;background:var(--attention-soft,#fff6ed);color:var(--attention,#b54708);
  font-size:12.5px;font-weight:600;line-height:1.35}
.pd-price .pd-price-review svg{flex:none;margin-top:1px}
.pd-price .rd-empty-state{padding:6px 16px 16px}
.rd-card.pd-total-card{background:var(--ink-dark,#0f2a24);border:0;color:#fff;padding:18px 20px}
.pd-total-card .pd-eyebrow{color:rgba(255,255,255,.62)}
.pd-total-main{display:flex;align-items:baseline;gap:8px;margin:6px 0 14px}
.pd-total-main strong{font-size:38px;font-weight:900;line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.pd-total-main small{font-size:14px;color:rgba(255,255,255,.72)}
.pd-total-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.pd-total-split div{display:flex;flex-direction:column;gap:3px;min-width:0}
.pd-total-split span{font-size:11px;color:rgba(255,255,255,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-total-split strong{font-size:17px;font-weight:750;font-variant-numeric:tabular-nums}
/* Onder 900px stapelt alles in ÉÉN kolom, en dan is de volgorde van de twee kolommen niet meer de
   leesvolgorde: "hoeveel ligt hier" is de eerste vraag, het grootboek de laatste. `display:contents`
   haalt de kolomwikkels weg zodat de kaarten zelf geordend kunnen worden. */
@media(max-width:899px){
  .pd-grid{display:flex;flex-direction:column}
  .pd-main,.pd-side{display:contents}
  .pd-total-card{order:1}
  .pd-locations{order:2}
  .pd-packaging{order:3}
  .pd-codes{order:4}
  .pd-movements{order:5}
}
/* De weg terug moet op ELKE breedte zichtbaar zijn. Boven 720px staat er geen ronde terugknop meer
   (die hoort bij de telefoonkop), dus daar draagt de kruimel het. */
@media(min-width:721px){.pd-back{display:none}.pd-crumb{display:inline-flex}}
@media(min-width:900px){
  .product-detail-page{padding:0}
  .pd-back{display:none}
  .pd-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);align-items:start}
  .pd-side{position:sticky;top:14px}
}
@media(max-width:720px){
  /* Op de telefoon staan de acties ONDER de titel: naast elkaar kneep de knoppenkolom de productnaam
     tot vier regels van één woord. */
  .pd-head{flex-wrap:wrap}
  .pd-head>.grow{flex:1 1 100%;order:1}
  .pd-back{order:0}
  .pd-head-actions{order:2;flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
  .pd-head-actions button{width:100%}
  .pd-title{font-size:21px}
  .pd-loc-row{grid-template-columns:40px minmax(0,1fr) auto 16px}
  .pd-loc-meta{display:none}
  .pd-code{width:40px}
  /* Elke mutatie op deze pagina gaat over hetzelfde product; op de smalle kolom is die naam alleen
     ruis die afkapt. De context (locatie · bron · wie) is wat je hier komt lezen. */
  .pd-mut-row{grid-template-columns:56px minmax(0,1fr) auto;gap:10px}
  .pd-mut-row strong{display:none}
  .pd-mut-row small{margin-top:0;font-size:13px;color:var(--ink-dark,#101828);font-weight:600}
  .pd-mut-time{font-size:11.5px}
}
/* ── Producten op desktop: één kaart, één tabel (UI-overhaul 7 sep 2026) ──────────────────────────────
   Vóór deze ronde was elke productregel een eigen kaart met rand, schaduw en twee tekstknoppen: 24 kaarten
   onder elkaar. Nu dezelfde gegevens in kolommen met kleine hoofdletterkoppen, één rand om het geheel. */
@media(min-width:721px){
  /* #129: `overflow:hidden` sneed de kolom Acties eraf op 1024px (iPad liggend, split view): tabel 796px
     in een kaart van 776px, en de knoppen Bewerken/Openen waren daardoor niet meer te bereiken — geen
     schoonheidsfoutje maar verlies van functie. Breed hoort te SCROLLEN binnen de kaart, nooit te worden
     afgesneden. Verticaal blijft verborgen, want daar staat niets buiten. */
  .product-table-card{padding:6px 8px 8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .product-table{width:100%;border-collapse:collapse}
  .product-table th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted,#66758d);font-weight:700;padding:12px;border-bottom:1px solid var(--card-border,#e6ebf2);white-space:nowrap}
  .product-table th.num,.product-table td.num{text-align:right}
  .product-table th.row-actions-head{text-align:right}
  .product-table td{padding:10px 12px;border-bottom:1px solid #f1f4f8;font-size:14px;color:var(--text-secondary,#475467);vertical-align:middle}
  .product-table tbody tr:last-child td{border-bottom:0}
  .product-table tbody tr{cursor:pointer}
  .product-table tbody tr:hover td{background:var(--surface-raised,#f8fafc)}
  .product-table .product-cell{min-width:280px}
  .product-table .product-card-top{display:flex;align-items:center;gap:12px;margin:0}
  .product-table .product-card-top h2{margin:0;font-size:15px;font-weight:800;color:var(--text-primary,#172033);line-height:1.25}
  .product-table .product-card-status{display:flex;align-items:center;gap:8px;margin-top:3px}
  .product-table .product-card-status code{font-size:12px;color:var(--text-muted,#66758d);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .product-table .product-card-status .muted{font-size:12px;color:var(--text-muted,#66758d)}
  .product-table td.num strong{font-size:17px;font-weight:800;color:var(--text-primary,#172033);font-variant-numeric:tabular-nums}
  .product-table td.num small{display:block;font-size:12px;color:var(--text-muted,#66758d)}
  .product-table td.row-actions{width:1%;white-space:nowrap}
  .product-table .product-card-actions{display:flex;gap:6px;justify-content:flex-end}
  .product-table .icon-button{width:40px;height:40px;border-radius:10px;border:1px solid var(--card-border,#e6ebf2);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--text-secondary,#475467)}
  .product-table .icon-button:hover{background:var(--surface-raised,#f8fafc);color:var(--text-primary,#172033)}
  .product-table .icon-button.danger:hover{color:var(--danger,#b42318);border-color:#f3c7c2}
  .product-table .icon-button.accent{color:var(--accent-dark,#0b6e63);border-color:rgba(14,147,132,.3)}
  .product-table tr.inactive td,.product-table tr.archived td{opacity:.72}
  .product-table .product-card-image{width:44px!important;height:44px!important;flex:0 0 44px!important}
}
/* Rij-acties: op een touchscreen bestaat hover niet, dus daar hoort tekst bij het icoon. Vanaf 1200px (muis, ruimte)
   volstaat het icoon met tooltip en houdt de tabel zijn rust. Na de praktijktoets van 7 sep 2026.
   #129: ondergrens van 721 naar 1080px. Tussen 721 en 1079 kostte het labelpaar 282px in de kolom Acties
   en liep de tabel de kaart uit — de knoppen waren dan juist ONbereikbaar in plaats van duidelijker.
   Daar blijft het icoon met tooltip staan, en het tikdoel blijft 44px (zie 90-touch-targets.css). */
@media(min-width:1080px) and (max-width:1199px){
  .product-table .icon-button{width:auto;min-width:var(--h-control,44px);height:var(--h-control,44px);padding:0 14px;gap:8px;display:inline-flex;align-items:center;font-weight:700;font-size:13px}
  .product-table .icon-button::after{content:attr(data-label);white-space:nowrap}
  .product-table td.row-actions{white-space:normal}
}
/* Productenrij: naam groot, daaronder één regel met artikelnummer, verpakking en leverancier. Twee kolommen minder,
   want die herhaalden op elke rij dezelfde waarde (7 sep 2026). */
@media(min-width:721px){
  .product-table .product-card-status{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap}
  .product-meta-line{font-size:12.5px;color:var(--text-muted,#66758d)}
  .product-table .product-cell{min-width:340px}
}

/* #108: het productformulier was één rol zonder oriëntatie, met een afbeeldingsblok dat een derde van het
   scherm nam voordat je één veld zag. Sprongbalk bovenaan, compacte afbeeldingsrij, rustiger kopjes. */
.product-form-jump{position:sticky;top:0;z-index:3;display:flex;gap:6px;flex-wrap:wrap;margin:-2px 0 12px;padding:8px 0;background:var(--surface,#fff)}
.product-form-jump button{height:30px;padding:0 11px;border:1px solid var(--line,#e2e8f0);border-radius:999px;background:var(--surface-quiet,#f7f9fc);font:inherit;font-size:12.5px;font-weight:600;color:var(--text-muted,#66758d);cursor:pointer}
.product-form-jump button:hover{border-color:var(--theme-accent,#0f766e);color:var(--theme-accent,#0f766e);background:var(--theme-accent-soft,#e8f5f1)}
.compact-product-form .product-image-editor{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;text-align:left;gap:14px;padding:12px 14px;border:1px solid var(--line,#e6eaf1);border-radius:var(--radius-md,12px);background:var(--surface-quiet,#f7f9fc)}
.compact-product-form .product-image-editor>*:not(.product-image-preview-wrap){grid-column:2;min-width:0}
.compact-product-form .product-image-editor .product-image-preview-wrap{display:grid;place-items:center;overflow:hidden;border-radius:10px;background:#fff;border:1px solid var(--line,#e6eaf1)}
.compact-product-form .product-image-editor .product-image-preview-wrap>*{max-width:100%;max-height:100%}
.compact-product-form .product-image-editor .product-image-preview-wrap svg{width:28px;height:28px}
.compact-product-form .product-image-editor h3,.compact-product-form .product-image-editor strong{font-size:13.5px;margin:0}
.compact-product-form .product-image-editor p,.compact-product-form .product-image-editor small{margin:1px 0 0;font-size:11.5px;color:var(--text-muted,#66758d)}
.compact-product-form .product-image-editor .product-image-preview-wrap{flex:0 0 auto;width:64px;height:64px}
.compact-product-form .product-image-editor img,.compact-product-form .product-image-editor .product-image-zoom{width:64px;height:64px;border-radius:10px;object-fit:cover}
.compact-product-form .subsection-heading h3{font-size:14px;margin:0}
.compact-product-form .subsection-heading p{margin:2px 0 0;font-size:12px;color:var(--text-muted,#66758d)}
/* Eén kolom, vaste breedte, en élk onderdeel dezelfde kaart. De tweekolomsvariant leverde een rafelige
   pagina op: de linkerkolom eindigde terwijl rechts doorliep, en de blokken hadden verschillende randen
   en padding. Een formulier moet voorspelbaar zijn, niet vernuftig. */
.modal-sheet.wide:has(.compact-product-form){width:min(760px,100%)}
.compact-product-form{display:flex;flex-direction:column;gap:14px}
.compact-product-form>section,
.compact-product-form>.product-status-panel,
.compact-product-form>.package-editor-list,
.compact-product-form>.barcode-link-box{margin:0;padding:14px 16px;border:1px solid var(--line,#e6eaf1);border-radius:var(--radius-md,12px);background:var(--surface,#fff)}
.compact-product-form>.form-grid{margin:0}
.compact-product-form>.subsection-heading{margin:2px 0 -6px;padding:0}
.compact-product-form .subsection-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.compact-product-form>.form-actions{position:sticky;bottom:0;margin:4px 0 0;padding:12px 0 0;background:var(--surface,#fff);border-top:1px solid var(--line,#e6eaf1)}

/* #123: niet kunnen ophalen is iets anders dan niets hebben — en moet er ook anders uitzien. */
.pd-error{display:flex;align-items:center;gap:8px;padding:14px 16px;font-size:13px;color:var(--attention,#b54708);background:var(--attention-soft,#fff6ed)}

/* #149 (9 sep 2026): de omrekenregel waarschuwt wanneer basiseenheid en verpakkingstype hetzelfde woord
   zijn ("1 rol = 100 rol"). Amber, niet rood: het is geen fout in de app maar een keuze in de gegevens
   die je zelf moet herstellen -- en tot die tijd blijft alles gewoon werken. */
.conversion-preview.warn{background:var(--surface-warn,#fff6ed);border-color:var(--border-warn,#fedf89);color:var(--status-warn,#b54708)}
.conversion-preview.warn small{display:block;margin-top:4px;font-weight:600;line-height:1.45;color:var(--text-secondary,#475467)}
.operations-page{display:flex;flex-direction:column;gap:18px;min-width:0}.operations-tabs{display:flex;gap:7px;overflow-x:auto;padding:4px;border-radius:16px;background:var(--surface-2,#eef3f9);scrollbar-width:none}.operations-tabs::-webkit-scrollbar{display:none}.operations-tabs button{border:0;background:transparent;color:var(--muted,#65748b);font-weight:750;white-space:nowrap;padding:10px 14px;border-radius:12px}.operations-tabs button.active{background:#fff;color:var(--ink,#132039);box-shadow:0 3px 13px #14213d12}.range-select{display:flex;align-items:center;gap:9px;color:var(--muted,#65748b);font-size:13px}.range-select select{min-height:40px;height:40px;border:1px solid var(--line,#d6deea);border-radius:11px;background:#fff;padding:0 12px}.operations-overview,.reports-grid{display:grid;gap:16px}.op-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.op-kpi,.op-panel{background:var(--surface,#fff);border:1px solid var(--line,#dce3ec);border-radius:18px;box-shadow:0 8px 28px #17223b0a}.op-kpi{display:flex;flex-direction:column;gap:6px;padding:18px;min-height:126px}.op-kpi>span{color:var(--muted,#64748b);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.op-kpi>strong{font-size:28px;line-height:1.1;color:var(--ink,#132039)}.op-kpi>small{color:var(--muted,#64748b);line-height:1.35}.op-kpi.warn{border-color:#f3cf7b;background:#fffcf4}.op-kpi.danger{border-color:#f0a7a7;background:#fff8f8}.op-panel{padding:20px;min-width:0}.op-panel h2{margin:0;font-size:20px}.op-panel h3{margin:18px 0 8px}.op-panel p{margin:5px 0;color:var(--muted,#64748b)}.op-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.op-head-actions,.op-row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.op-head-actions label.button{display:inline-flex;align-items:center;gap:7px;cursor:pointer}.op-head-actions label.button input{display:none}.op-head-actions label.disabled{opacity:.55;pointer-events:none}.op-alert-list{display:grid;gap:9px}.op-alert-list>button,.op-alert{width:100%;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:12px;border:1px solid var(--line,#dce3ec);border-radius:13px;background:#fff;padding:12px 14px;text-align:left}.op-alert-list b{font-size:22px;color:#b05d00}.op-alert-list i{font-style:normal;color:var(--accent,#176be8);font-weight:750}.op-alert.ok{display:block;background:#f2fbf6;border-color:#bde6cd;color:#176c3a}.op-alert.warn{display:block;background:#fff8e8;border-color:#f1ce7c;color:#795100}.op-table{display:grid;overflow-x:auto}.op-table-head,.op-table-row{display:grid;grid-template-columns:minmax(145px,1.2fr) minmax(130px,1fr) minmax(140px,1fr) minmax(115px,.8fr) minmax(170px,1fr);gap:14px;align-items:center;min-width:760px;padding:12px 8px}.op-table-head{color:var(--muted,#64748b);font-size:11px;font-weight:800;text-transform:uppercase;border-bottom:1px solid var(--line,#dce3ec)}.op-table-row{border-bottom:1px solid #e8edf3}.op-table-row:last-child{border-bottom:0}.op-table-row span{min-width:0}.op-table-row strong,.op-table-row small{display:block}.op-table-row small{margin-top:3px;color:var(--muted,#64748b)}.op-mini-bar{display:block;height:8px;background:var(--surface-raised,#eef2f7);border-radius:99px;overflow:hidden;min-width:70px}.op-mini-bar i{display:block;height:100%;background:var(--theme-accent,#0e9384);border-radius:inherit}.op-mini-bar.good i{background:#16a36d}.op-mini-bar.warn i{background:var(--status-warn,#b54708)}.op-status{display:inline-flex;width:max-content;align-items:center;min-height:26px;border-radius:999px;padding:4px 9px;background:#edf2f7;color:#526174;font-size:11px;font-weight:800}.status-ordered,.status-reserved,.status-approved{background:#eaf2ff;color:#1459bd}.status-part-received,.status-partial,.status-proposed,.status-review{background:#fff5da;color:#8a5a00}.status-received,.status-completed,.status-processed,.status-resolved{background:#eaf8ef;color:#16713d}.status-cancelled,.status-failed,.status-expired,.status-blocked{background:#fff0f0;color:#a52626}.operation-lines-editor{display:grid;gap:10px}.operation-lines-head{display:flex;align-items:center;justify-content:space-between}.operation-line-edit,.receipt-line-edit{display:grid;grid-template-columns:32px minmax(190px,2fr) minmax(90px,.7fr) minmax(110px,.8fr) minmax(110px,.8fr) auto;gap:10px;align-items:end;border:1px solid var(--line,#dce3ec);border-radius:14px;padding:12px}.receipt-line-edit{grid-template-columns:minmax(180px,1.5fr) repeat(5,minmax(100px,1fr));align-items:end}.operation-line-edit label,.receipt-line-edit label{margin:0}.line-index{align-self:center;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eef3f9;font-weight:800}.receipt-product{align-self:center}.receipt-product strong,.receipt-product small{display:block}.serial-input{grid-column:auto}.work-card-list{display:grid;gap:12px}.work-card{border:1px solid var(--line,#dce3ec);border-radius:15px;padding:15px}.work-card header,.work-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.work-card header small{display:block;color:var(--muted,#64748b);margin-top:3px}.work-lines{display:grid;gap:8px;margin:13px 0}.work-lines>div{display:grid;grid-template-columns:minmax(160px,1.2fr) minmax(250px,2fr) minmax(90px,.7fr) auto;align-items:center;gap:12px;padding:10px;background:#f7f9fc;border-radius:11px}.work-lines span small{display:block;color:var(--muted,#64748b)}.shortage{color:#b12b2b}.ok-text{color:#14733c}.replenishment-board{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:10px;overflow-x:auto}.replenishment-board>section{min-width:180px;background:#f6f8fb;border-radius:14px;padding:10px}.replenishment-board h3{display:flex;justify-content:space-between;margin:2px 3px 10px;font-size:14px}.replenishment-board article{display:grid;gap:7px;background:#fff;border:1px solid var(--line,#dce3ec);border-radius:11px;padding:11px;margin-bottom:8px}.replenishment-board article small{color:var(--muted,#64748b)}.operations-split,.reports-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trace-list,.scan-failure-list,.ranked-bars{display:grid}.trace-list article,.scan-failure-list article,.ranked-bars article{display:grid;gap:10px;align-items:center;border-bottom:1px solid #e8edf3;padding:11px 4px}.trace-list article{grid-template-columns:minmax(150px,1fr) auto auto auto}.trace-list article small{display:block;color:var(--muted,#64748b)}.trace-list article.expired{background:#fff5f5}.scan-failure-list article{grid-template-columns:36px minmax(180px,1fr) auto auto auto}.scan-failure-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff0dc;color:#a15d00;font-weight:900}.scan-failure-list small{display:block;color:var(--muted,#64748b);margin-top:3px}.ranked-bars article{grid-template-columns:minmax(140px,1.4fr) minmax(90px,1fr) auto;grid-template-areas:'name bar value' 'detail detail detail'}.ranked-bars article>span:first-child{grid-area:name}.ranked-bars .op-mini-bar{grid-area:bar}.ranked-bars b{grid-area:value}.ranked-bars small{grid-area:detail;color:var(--muted,#64748b)}.report-hero{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:center;padding:12px 0}.report-hero strong{grid-row:1/3;font-size:38px}.report-hero .op-mini-bar{grid-column:1/3}.chip-cloud{display:flex;flex-wrap:wrap;gap:6px}.chip-cloud span{background:#eef3f9;border-radius:999px;padding:5px 9px;font-size:11px}.op-empty{display:grid;place-items:center;gap:4px;min-height:150px;color:var(--muted,#64748b);text-align:center}.ocr-lines{display:grid;gap:7px}.ocr-line{display:grid;grid-template-columns:120px minmax(180px,1.5fr) 70px minmax(220px,1fr);gap:10px;align-items:center;border-bottom:1px solid #e8edf3;padding:8px 0}.ocr-line code{overflow:hidden;text-overflow:ellipsis}.ocr-raw textarea{width:100%;margin-top:8px}.operation-form-modal{width:min(1120px,calc(100vw - 30px))}
@media(max-width:900px){.op-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-split,.reports-grid{grid-template-columns:1fr}.receipt-line-edit{grid-template-columns:repeat(2,minmax(0,1fr))}.receipt-product{grid-column:1/3}.operation-line-edit{grid-template-columns:28px minmax(0,1fr) minmax(86px,.45fr)}.operation-line-edit label:nth-of-type(n+3){grid-column:2/4}.work-lines>div{grid-template-columns:1fr}.replenishment-board{grid-template-columns:repeat(4,220px)}}
@media(max-width:600px){.operations-page{gap:12px}.operations-page .page-head{align-items:flex-start}.operations-page .page-head .range-select{display:none}.operations-tabs{border-radius:13px}.operations-tabs button{padding:9px 11px}.op-kpi-grid{grid-template-columns:1fr 1fr;gap:8px}.op-kpi{padding:13px;min-height:112px}.op-kpi>strong{font-size:23px}.op-panel{padding:14px;border-radius:15px}.op-panel-head{align-items:flex-start;flex-direction:column}.op-head-actions{width:100%}.op-head-actions>*{flex:1}.operation-line-edit,.receipt-line-edit{grid-template-columns:1fr}.operation-line-edit .line-index,.receipt-product{grid-column:auto}.operation-line-edit label:nth-of-type(n+3){grid-column:auto}.ocr-line{grid-template-columns:1fr 70px}.ocr-line span,.ocr-line select{grid-column:1/3}.trace-list article,.scan-failure-list article{grid-template-columns:36px 1fr}.trace-list article>div{grid-column:1/3}.scan-failure-list article .grow{grid-column:2}.scan-failure-list article .op-status,.scan-failure-list article button{grid-column:auto}.work-card header,.work-card footer{align-items:flex-start;flex-wrap:wrap}.op-table{margin:0 -8px}.op-alert-list>button{grid-template-columns:42px 1fr}.op-alert-list i{grid-column:2}.operation-form-modal{width:calc(100vw - 14px)}}
.reports-with-cost{display:grid;gap:16px}.cost-event-list{display:grid}.cost-event-list article{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(180px,.8fr);gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid #e8edf3}.cost-event-list article:last-child{border-bottom:0}.cost-event-list small{display:block;color:var(--muted,#64748b);margin-top:3px}.operations-readiness .op-kpi-grid.compact{grid-template-columns:repeat(5,minmax(0,1fr))}.operations-readiness .op-kpi{min-height:112px}.replenishment-board{grid-template-columns:repeat(6,minmax(170px,1fr))}.status-transferred{background:#e9f4ff;color:#155f9e}
@media(max-width:900px){.operations-readiness .op-kpi-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.replenishment-board{grid-template-columns:repeat(6,220px)}}
@media(max-width:600px){.operations-readiness .op-kpi-grid.compact{grid-template-columns:1fr 1fr}.cost-event-list article{grid-template-columns:1fr auto}.cost-event-list article>small{grid-column:1/3}}

/* 2026-09-01 camera/manage/data-quality hardening */
.quality-result-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 2px 6px;color:var(--muted)}.quality-result-meta strong{font-size:12px;color:var(--text,#172033)}.quality-result-meta small{font-size:11px;text-align:right}.quality-row-main:focus-visible,.quality-tag-action:focus-visible,.quality-filters button:focus-visible{outline:3px solid color-mix(in srgb,var(--theme-accent,#0e9384) 28%,transparent);outline-offset:2px}.quality-tag-action{min-height:32px;font-size:11px}.quality-row-main{min-height:44px}.quality-filters button{min-height:36px}.quality-list{max-height:520px}.camera-message{max-width:min(92vw,560px);line-height:1.35}.camera-controls button{min-height:44px}
@media(max-width:720px){.quality-result-meta{align-items:flex-start;flex-direction:column}.quality-result-meta small{text-align:left}.quality-tag-action{min-height:44px;padding:8px 11px;font-size:11px}.quality-filters button{min-height:44px}.quality-list{max-height:none}.quality-row-main{min-height:48px}}


/* 2026-09-02 crash-screen (React error boundary) */
.app-crash-screen{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg,#f5f7fa)}.app-crash-card{width:min(460px,100%);background:var(--surface,#fff);border:1px solid var(--line,#e4e7ec);border-radius:var(--radius,18px);box-shadow:var(--shadow,0 10px 32px rgba(16,24,40,.07));padding:24px;text-align:center}.app-crash-card h1{font-size:20px;margin:0 0 10px}.app-crash-card p{color:var(--muted,#667085);font-size:13px;line-height:1.5;margin:0 0 16px}.app-crash-card .primary{margin-bottom:10px}.app-crash-detail{margin:0;text-align:left;max-height:120px;overflow:auto;background:var(--surface-2,#f8fafc);border:1px solid var(--line,#e4e7ec);border-radius:10px;padding:9px 10px;font-size:11px;color:var(--muted,#667085);white-space:pre-wrap;word-break:break-word}
/* Feature-CSS operations (architectuurronde 3, 3 sep 2026): regels verplaatst uit 00/10/20/30-styles.css waarvan élke class exclusief
   in 50-app-operations.js wordt gebruikt (in-place verwijderd, bronvolgorde behouden, media-blokken per herkomst gegroepeerd). */
/* Ronde 7: KPI-tegels als werkacties */
.op-kpi-action{cursor:pointer;text-align:left;align-items:stretch;width:100%;font:inherit;color:inherit;border:1px solid var(--border-default);background:var(--surface)}.op-kpi-action:hover{border-color:var(--border-strong)}.op-kpi-action:focus-visible{outline:2px solid var(--status-info);outline-offset:2px}

/* ronde 18: KPI-tegels in Rapportages — het op-panel is smaller dan de Overzicht-grid, dus geen minimale kolombreedte op telefoon (anders 385px in 340px) */
@media(max-width:600px){.reports-kpi .op-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reports-kpi .op-kpi{min-width:0;overflow-wrap:anywhere}}
/* Herontwerp (5 sep 2026): Operaties in het rd-kit. Telefoon (≤720px): contextbalk + chips met tellers, actiekaarten/rijen
   voor wat niet nul is, één rustige regel voor de rest, hoofdknop in de duimzone (overboeking). Elke tegel houdt .op-kpi,
   dus de legacy .op-kpi-regels hierboven worden hier per kit-vorm teruggezet. Desktop (≥721px): gepinde structuur, kit-tokens. */
@media(max-width:720px){
.operations-phone{gap:0}
.operations-phone .operations-scope{align-items:center;gap:8px}
.operations-phone .operations-scope .warehouse-scope-bar{border:0;padding:0;border-radius:0;box-shadow:none;margin:0}
.operations-phone .range-select{gap:6px;flex-shrink:0}
.operations-phone .range-select>span{display:none}
.operations-phone .range-select select{height:44px;min-height:44px;border-radius:10px;border:1px solid var(--line,#e2e8f0);background:var(--surface-sunken,#f2f4f7);font:inherit;font-size:13px;font-weight:700;color:var(--text-primary,#172033);padding:0 10px}
.operations-phone .operations-tabs{background:transparent;border-radius:0;padding:8px 12px 2px;margin:0}
.operations-phone .operations-tabs button{box-shadow:none}
.operations-phone .op-tab-count{font-weight:800;opacity:.85}
.operations-phone .op-panel,.operations-phone .operations-overview,.operations-phone .op-phone-list,.operations-phone .op-transfer-detail,.operations-phone .operations-split{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;display:flex;flex-direction:column;gap:0;min-width:0}
.operations-phone .op-panel-head{flex-direction:column;align-items:stretch;gap:8px;margin:0;padding:14px 16px 6px}
.operations-phone .op-panel h2,.operations-phone .op-phone-h2{margin:0;font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--text-primary,#172033);padding:15px 16px 8px}
.operations-phone .op-panel-head h2{padding:0}
.operations-phone .op-panel-head p,.operations-phone .op-panel>p{margin:0;font-size:12px;color:var(--text-muted,#5f6f86);line-height:1.35}
.operations-phone .op-panel>p{padding:0 16px 6px}
.operations-phone .op-panel h3{margin:0;padding:14px 16px 6px;font-size:13px}
.operations-phone .op-head-actions{width:auto;padding:0}
.operations-phone .op-head-actions>*{flex:0 1 auto}
.operations-phone .op-headline{padding:2px 16px 8px;color:var(--text-primary,#172033);font-size:15px;font-weight:700;line-height:1.3}
.operations-phone .op-kpi-grid,.operations-phone .op-kpi-grid.compact{display:flex;flex-direction:column;gap:8px;padding:0 12px}
.operations-phone .rd-action-card{width:100%;min-height:66px;padding:12px 14px;gap:12px;flex-direction:row;align-items:center;font:inherit;color:inherit;text-align:left;cursor:pointer;box-shadow:none;transform:none;border-radius:14px}
.operations-phone .rd-action-card>span{text-transform:none;letter-spacing:0;font-size:inherit;font-weight:inherit;color:inherit}
.operations-phone .rd-action-card .rd-big{min-width:54px;font-size:28px;color:var(--theme-accent-dark,#08766a);text-align:right;line-height:1}
.operations-phone .rd-action-card.warn .rd-big{color:var(--status-warn,#b54708)}
.operations-phone .rd-action-card .rd-row-title{white-space:normal;line-height:1.25;font-weight:800}
.operations-phone .rd-action-card .rd-row-sub{white-space:normal;line-height:1.35;font-size:12px;color:var(--text-muted,#5f6f86);font-weight:500}
.operations-phone .rd-action-card .rd-pill{max-width:38%;white-space:normal;text-align:center;line-height:1.15;height:auto;min-height:var(--h-chip,40px);padding:8px 12px;color:var(--theme-accent-dark,#08766a);border-color:rgba(var(--theme-rgb,14,147,132),.32)}
.operations-phone .rd-action-card.warn .rd-pill{color:var(--status-warn,#b54708);border-color:#e0b483}
.operations-phone .op-facts{margin:0}
.operations-phone .rd-summary-cell{flex:1 1 0;min-width:0;min-height:56px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;border:0;border-left:1px solid var(--line,#e2e8f0);border-radius:0;background:#fff;font:inherit;text-align:left;color:inherit;box-shadow:none;align-items:flex-start;transform:none}
.operations-phone .rd-summary-cell:first-child{border-left:0}
.operations-phone .rd-summary-cell strong{font-size:18px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--text-primary,#172033);overflow-wrap:anywhere}
.operations-phone .rd-summary-cell>span{white-space:normal;overflow:visible;text-transform:none;letter-spacing:0;font-size:11px;font-weight:600;color:var(--text-muted,#5f6f86)}
.operations-phone .op-quiet{align-items:flex-start;padding:12px 16px 4px;flex-wrap:nowrap}
.operations-phone .rd-quiet-body{min-width:0;display:flex;flex-direction:column;gap:8px}
.operations-phone .rd-quiet-body>strong{font-size:13px;font-weight:800;color:var(--text-primary,#172033);padding-top:6px}
.operations-phone .rd-quiet-items{display:flex;flex-wrap:wrap;gap:6px}
.operations-phone .rd-quiet-item{display:inline-flex;flex-direction:row;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line,#e2e8f0);border-radius:999px;background:#fff;font:inherit;font-size:12px;font-weight:700;color:var(--text-secondary,#475467);box-shadow:none;width:auto;margin:0;transform:none;cursor:default;text-transform:none;letter-spacing:0}
.operations-phone button.rd-quiet-item{cursor:pointer}
.operations-phone .op-inline{padding:4px 12px 8px}
.operations-phone label.button{display:inline-flex;align-items:center;gap:7px;height:44px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line,#e2e8f0);background:#fff;color:var(--text-secondary,#475467);font:inherit;font-size:12px;font-weight:800;box-shadow:none;cursor:pointer}
.operations-phone label.button input{display:none}
.operations-phone label.disabled{opacity:.55;pointer-events:none}
.operations-phone .rd-pill.accent{background:var(--theme-accent,#0e9384);border-color:var(--theme-accent,#0e9384);color:#fff}
.operations-phone .op-row-tail{display:flex;align-items:center;gap:8px;flex-shrink:0}
.operations-phone .op-row-tail .rd-row-value strong{font-size:16px}
.operations-phone .op-work-card{gap:10px}
.operations-phone .op-work-card.warn{border-color:#f0c9a0}
.operations-phone .op-work-card .rd-live-head{align-items:center}
.operations-phone .op-work-lines{display:flex;flex-direction:column;gap:6px}
.operations-phone .op-work-line{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px;border-radius:10px;background:var(--bg,#f7f9fc);border:1px solid var(--line,#e2e8f0)}
.operations-phone .op-work-line.warn{background:var(--surface-warn,#fff6ed);border-color:#f5d3ad}
.operations-phone .op-work-line .rd-row-sub{white-space:normal;line-height:1.3}
.operations-phone .op-work-line .rd-row-value strong{font-size:16px}
.operations-phone .op-work-card .rd-secondary-row .rd-pill{flex:1 1 auto;justify-content:center}
.operations-phone .op-transfer-route{display:flex;align-items:flex-end;gap:10px;padding:10px 12px 4px;color:var(--text-muted,#98a5b8)}
.operations-phone .op-route-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}
.operations-phone .op-route-side .rd-chip{width:100%;justify-content:flex-start;overflow:hidden}
.operations-phone .op-route-side .rd-chip span{overflow:hidden;text-overflow:ellipsis}
.operations-phone .op-transfer-route>svg{flex-shrink:0;margin-bottom:13px}
.operations-phone .op-steps{display:flex;gap:6px;padding:8px 12px 0}
.operations-phone .op-step{flex:1 1 0;min-width:0;text-align:center;font-size:11px;font-weight:700;color:var(--text-muted,#98a5b8);padding:8px 4px 6px;border-top:3px solid var(--line,#e2e8f0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.operations-phone .op-step.done{border-top-color:var(--theme-accent,#0e9384);color:var(--theme-accent-dark,#08766a)}
.operations-phone .op-step.current{border-top-color:var(--theme-navy,#082f2d);color:var(--theme-navy,#082f2d);font-weight:900}
.operations-phone .op-transit-card{margin:12px 12px 0;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.operations-phone .op-transit-row{display:flex;align-items:baseline;gap:8px}
.operations-phone .op-transit-row .rd-big{font-size:34px;color:#fff}
.operations-phone .op-transit-row small,.operations-phone .op-transit-card>small{color:#cfe3e0;font-size:12px;line-height:1.35}
.operations-phone .op-transit-row small{font-size:14px;font-weight:700}
/* Scan-inbox en Rapportages: bestaande markup (testcontract v187/v199/v214), kit-maat via CSS */
.operations-phone .scan-failure-filters{display:flex;gap:7px;padding:6px 12px 2px;overflow-x:auto;scrollbar-width:none;background:transparent;border-radius:0}
.operations-phone .scan-failure-filters button{height:44px;min-height:44px;border-radius:999px;background:#fff;border:1px solid var(--line,#e2e8f0);color:var(--text-secondary,#475467);font:inherit;font-size:13px;font-weight:600;padding:0 14px;white-space:nowrap;flex-shrink:0}
.operations-phone .scan-failure-filters button.active,.operations-phone .scan-failure-filters button[aria-current="page"]{background:var(--theme-navy,#082f2d);border-color:var(--theme-navy,#082f2d);color:#fff;font-weight:700}
.operations-phone .scan-failure-location-filter{display:flex;flex-direction:column;gap:4px;padding:8px 12px 0}
.operations-phone .scan-failure-list{display:flex;flex-direction:column;gap:7px;padding:8px 12px 0}
.operations-phone .scan-failure-list article{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:62px;padding:11px 13px;background:#fff;border:1px solid #f5d3ad;border-radius:12px;margin:0}
.operations-phone .scan-failure-list article .grow{flex:1 1 160px;min-width:0}
.operations-phone .scan-failure-list article .grow strong{display:block;font-size:14px;font-weight:700}
.operations-phone .scan-failure-list article .grow small{display:block;font-size:11px;color:var(--status-warn,#b54708);font-weight:700;white-space:normal}
.operations-phone .scan-failure-list article button{min-height:44px}
.operations-phone .scan-failure-link{flex:1 1 100%}
.operations-phone .reports-grid{display:flex;flex-direction:column;gap:0}
.operations-phone .reports-scope{display:none}
.operations-phone .op-kpi-row{min-height:62px;flex-direction:row;align-items:center;padding:11px 13px;border-radius:12px;font:inherit;color:inherit;text-align:left}
.operations-phone .op-kpi-row>span{text-transform:none;letter-spacing:0;font-size:inherit;font-weight:inherit;color:inherit}
.operations-phone .op-kpi-row.warn{border-color:#f5d3ad}
.operations-phone .op-kpi-row.danger{border-color:#f0a7a7}
.operations-phone .op-kpi-row .rd-row-title{white-space:normal;line-height:1.25}
.operations-phone .op-kpi-row .rd-row-sub{white-space:normal;line-height:1.3;font-size:11px;color:var(--text-muted,#5f6f86)}
.operations-phone .op-kpi-row .rd-row-value strong{font-size:18px}
.operations-phone .ranked-bars,.operations-phone .cost-event-list,.operations-phone .trace-list{padding:0 12px}
.operations-phone .report-hero{padding:4px 16px 0}
.operations-phone .chip-cloud{padding:0 12px 8px}
.operations-phone .reports-with-cost{display:flex;flex-direction:column;gap:0}
.operations-phone .op-panel .button.full{margin:8px 12px 0;width:calc(100% - 24px)}
.operations-phone .op-empty{margin:8px 12px 0}
.operations-phone .rd-primary-wrap{padding-top:14px}
}
@media(min-width:721px){
.op-kpi,.op-panel{border-radius:14px;border-color:var(--line,#e2e8f0);box-shadow:none}
.op-kpi>strong{font-variant-numeric:tabular-nums}
.op-kpi>span,.op-kpi>small,.op-panel p{color:var(--text-muted,#5f6f86)}
.op-table-head span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted,#66758d)}
.op-table-row{min-height:48px;align-items:center;border-bottom-color:var(--line,#e2e8f0)}
.op-table-row b{font-variant-numeric:tabular-nums}
.op-kpi-action:hover{border-color:var(--theme-accent,#0e9384)}
.op-kpi-action:focus-visible{outline:2px solid var(--theme-accent,#0e9384);outline-offset:2px}
.operations-tabs button.active{color:var(--theme-navy,#082f2d)}
.op-alert-list b{color:var(--status-warn,#b54708);font-variant-numeric:tabular-nums}
.op-alert-list i{color:var(--theme-accent,#0e9384)}
.op-alert-list>button,.op-alert,.work-card,.trace-list article,.scan-failure-list article{border-color:var(--line,#e2e8f0)}
.status-transferred{background:var(--theme-accent-soft,#e9faf7);color:var(--theme-accent-dark,#08766a)}
}

/* ── Operaties desktop (mockup Operaties.dc.html, 6 sep 2026): dezelfde kit-opbouw als op de telefoon, in een vierkoloms grid ── */
@media(min-width:721px){
  .operations-tabs{display:flex;gap:8px;background:transparent;border:0;box-shadow:none;padding:0;border-radius:0;flex-wrap:wrap}
  .operations-tabs button{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line,#e2e8f0);background:#fff;color:var(--text-secondary,#475467);font-size:13px;font-weight:700}
  .operations-tabs button.active{background:var(--theme-navy,#082f2d);border-color:var(--theme-navy,#082f2d);color:#fff;box-shadow:none}
  .op-phone-overview{display:flex;flex-direction:column;gap:14px}
  .op-phone-overview .rd-section{padding:0}
  .op-phone-overview .rd-section strong{font-size:26px;font-weight:900;letter-spacing:-.02em;text-transform:none}
  .op-phone-overview .op-headline{padding:0;margin:-6px 0 0;font-size:13px}
  .op-phone-overview .op-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
  .op-phone-overview .op-kpi-grid>.rd-action-card{flex-direction:column;align-items:stretch;gap:8px;padding:18px 20px;margin:0;cursor:pointer;font:inherit;text-align:left;color:inherit}
  .op-phone-overview .op-kpi-grid>.rd-action-card .rd-big{font-size:30px;min-width:0;text-align:left}
  .op-phone-overview .op-kpi-grid>.rd-action-card .rd-row-body{gap:3px}
  .op-phone-overview .op-kpi-grid>.rd-action-card .rd-row-title,.op-phone-overview .op-kpi-grid>.rd-action-card .kpi-label{font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;white-space:normal}
  .op-phone-overview .op-kpi-grid>.rd-action-card small{color:var(--text-secondary,#475467);font-size:12.5px;line-height:1.45;white-space:normal}
  .op-phone-overview .op-kpi-grid>.rd-action-card .rd-pill{height:var(--h-chip,40px);min-height:var(--h-chip,40px);justify-content:center;width:100%;border-color:transparent;background:var(--theme-accent-soft,#e9faf7);color:var(--theme-accent-dark,#08766a);margin-top:auto}
  .op-phone-overview .op-kpi-grid>.rd-action-card.warn .rd-pill{background:var(--surface-warn,#fff6ed);color:var(--status-warn,#b54708)}
  .op-phone-overview .op-kpi-grid>.rd-summary,.op-phone-overview .op-kpi-grid>.rd-quiet,.op-phone-overview .op-kpi-grid>section,.op-phone-overview .op-kpi-grid>.op-readiness{grid-column:1/-1}
  .op-phone-overview .rd-summary{margin:0;max-width:none}
  .op-phone-overview .rd-quiet{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:14px;padding:13px 20px}
  .op-phone-overview .rd-quiet-items{display:flex;flex-wrap:wrap;gap:6px}
  .op-phone-overview .rd-quiet-item{display:inline-flex;align-items:center;height:30px;min-height:30px;padding:0 11px;border:1px solid var(--line,#e2e8f0);border-radius:999px;background:var(--bg,#f7f9fc);font:inherit;font-size:12px;font-weight:600;color:var(--text-secondary,#475467);width:auto;cursor:pointer}
  .op-panel{border-radius:14px;box-shadow:none;border-color:var(--line,#e2e8f0)}
  .op-panel h2{font-size:15px;font-weight:800}
  .op-panel table th{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted,#98a5b8)}
  .op-panel table td{height:48px;font-variant-numeric:tabular-nums}
}
@media(min-width:721px) and (max-width:1100px){.op-phone-overview .op-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:721px){
  /* volgorde in het grid: actiekaarten (incl. stamdata) → feiten → rustige regel → systeem & continuïteit */
  .op-phone-overview .op-kpi-grid>.rd-action-card{order:0}
  .op-phone-overview .op-kpi-grid>.rd-summary{display:contents}
  .op-phone-overview .op-kpi-grid .rd-summary-cell{order:1;display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:18px 20px;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:14px;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
  .op-phone-overview .op-kpi-grid .rd-summary-cell strong{font-size:30px;font-weight:900;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .op-phone-overview .op-kpi-grid .rd-summary-cell .kpi-label,.op-phone-overview .op-kpi-grid .rd-summary-cell span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted,#66758d)}
  .op-phone-overview .op-kpi-grid>.rd-quiet{order:2}
  .op-phone-overview .op-kpi-grid>section,.op-phone-overview .op-kpi-grid>.op-readiness{order:3}
  .op-phone-overview .op-kpi-grid>section .op-kpi{padding:16px 18px;min-height:0;border-radius:14px}
  .op-phone-overview .op-kpi-grid>section .op-kpi strong{font-size:20px;white-space:normal;line-height:1.15}
  .op-phone-overview .op-kpi-grid>section h2{font-size:15px;font-weight:800}
}
/* Tekstwaarden in een KPI-kaart ("Aandacht", "Eerste punt nodig") zijn geen getallen: kleiner, en ze mogen afbreken. */
.op-kpi.text .rd-big,.op-kpi.text strong.rd-big,.op-phone-overview .op-kpi-grid>.rd-action-card.text .rd-big{font-size:clamp(18px,5.5vw,24px);white-space:normal;line-height:1.1;overflow-wrap:anywhere;letter-spacing:-.01em}
/* Subtabs schuiven horizontaal; op smalle schermen full-bleed met een vervagende rechterrand zodat zichtbaar is dat er meer is. */
@media(max-width:720px){.ui-tabs.operations-tabs{margin-inline:-14px;padding-inline:14px;scroll-padding-inline:14px;-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 26px),transparent 100%)}.ui-tabs.operations-tabs::-webkit-scrollbar{display:none}}
/* Telefoon: magazijnkeuze en periode staan onder elkaar op volle breedte. Naast elkaar drukte de periode de
   magazijnregel omhoog en stonden twee keuzevelden op verschillende hoogtes — dat leest als een fout. */
@media(max-width:480px){
  .operations-phone .rd-scope,.operations-phone .warehouse-scope-bar{flex-wrap:wrap;gap:8px}
  .operations-phone .range-select{flex:1 1 100%;margin:0}
  .operations-phone .range-select select{width:100%}
}
/* ── UI-overhaul 7 sep 2026 · Operaties desktop (artboard desktop-02) ─────────────────────────────────
   Vier aandachtkaarten met gekleurde linkerrand en één zachte knop, één rustige strook, en daaronder de
   werkbonnentabel met kleine hoofdletterkoppen. Getallen rechts uitgelijnd en tabulair. */
.op-desk-overview{display:flex;flex-direction:column;gap:var(--gap-section,20px)}
.op-desk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.op-desk-card{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 22px;border-left:5px solid var(--accent,#0e9384);min-height:186px;text-align:left;cursor:pointer}
.op-desk-card.warn{border-left-color:var(--attention,#b54708);border-color:var(--attention-border,#f0c9a0)}
.op-desk-card-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.op-desk-card .rd-big{font-size:34px;line-height:1}
.op-desk-card-label{font-size:15px;font-weight:700;color:var(--text-primary,#172033)}
.op-desk-card p{margin:0;color:var(--text-secondary,#475467);font-size:13.5px;line-height:1.45;flex:1 1 auto}
.op-desk-card .rd-pill{margin-top:auto;width:100%;justify-content:center;background:var(--accent-soft,#e9faf7);border-color:transparent;color:var(--accent-dark,#0b6e63);font-weight:700}
.op-desk-card .rd-pill.warn{background:var(--attention-soft,#fff6ed);color:var(--attention,#b54708)}
.op-desk-quiet{padding:16px 20px}
.op-desk-table-card{padding:18px 22px 8px}
.op-desk-table{width:100%;border-collapse:collapse}
.op-desk-table th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted,#66758d);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--card-border,#e6ebf2)}
.op-desk-table td{padding:14px 12px;border-bottom:1px solid #f1f4f8;font-size:14px;color:var(--text-primary,#172033)}
.op-desk-table tbody tr:last-child td{border-bottom:0}
.op-desk-table tbody tr{cursor:pointer}
.op-desk-table tbody tr:hover td{background:var(--surface-raised,#f8fafc)}
.op-desk-table .op-num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.op-desk-table .op-num.warn{color:var(--attention,#b54708)}
.op-desk-table .op-wo-number{font-weight:800}
.op-desk-table .op-when{text-align:right;color:var(--text-muted,#66758d);font-size:13px}
.op-status{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13px}
.op-status::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent,#0e9384)}
.op-status.warn{color:var(--attention,#b54708)}.op-status.warn::before{background:var(--attention,#b54708)}
.op-desk-quiet .rd-quiet-body strong{margin-right:6px}
.op-desk-quiet .rd-quiet-items{color:var(--text-secondary,#475467);font-size:13.5px}
@media(min-width:721px){.operations-page .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.op-head-actions{display:flex;gap:10px;flex-shrink:0}}
/* Systeem & continuïteit op desktop: kop, kaarten voor wat aandacht vraagt, één rustige regel voor de rest. */
.op-desk-continuity{display:flex;flex-direction:column;gap:12px}
.op-desk-continuity-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.op-desk-continuity-head .muted{color:var(--text-muted,#66758d);font-size:13px}
/* ── Ontvangst (artboard mobiel-07 en het desktopconcept) ─────────────────────────────────────────────
   Kopkaart met vrachticoon en de leesstatus van de pakbon; per regel "besteld N →" en een invoerkader dat
   zijn staat toont: groen als het klopt, amber bij een afwijking, grijs zolang er niets is ingevuld. */
.receipt-hero{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:12px}
.receipt-hero-icon{width:44px;height:44px;border-radius:13px;background:var(--accent-soft,#e9faf7);color:var(--accent-dark,#0b6e63);display:grid;place-items:center;flex-shrink:0}
.receipt-hero strong{display:block;font-size:15px;font-weight:800;color:var(--text-primary,#172033)}
.receipt-hero small{display:block;font-size:12.5px;color:var(--text-muted,#66758d);margin-top:2px;line-height:1.4}
.receipt-check-pill{flex-shrink:0}
.receipt-ordered{align-items:flex-end;gap:0}
.receipt-ordered small{font-size:11px;color:var(--text-muted,#66758d)}
.receipt-ordered strong{font-size:19px}
.receipt-arrow{color:var(--text-muted,#98a5b8);font-size:15px;margin-top:2px}
.receipt-stepper.ok .rd-stepper-value{border-color:var(--accent,#0e9384);color:var(--accent-dark,#0b6e63)}
.receipt-stepper.warn .rd-stepper-value{border-color:var(--attention,#b54708);background:var(--attention-soft,#fff6ed);color:var(--attention,#b54708)}
.receipt-stepper.empty .rd-stepper-value{border-color:var(--card-border,#e6ebf2);color:var(--text-muted,#98a5b8)}
/* Overboeking: route en stappen in één kaart (artboard mobiel-08). */
.op-transfer-card{padding:16px 18px;margin-bottom:12px}
.op-transfer-route{display:flex;align-items:center;justify-content:space-between;gap:14px}
.op-route-side strong{display:block;font-size:19px;font-weight:900;letter-spacing:-.01em;color:var(--text-primary,#172033);margin-top:3px}
.op-route-side.right{text-align:right}
.op-route-mid{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--accent-dark,#0b6e63)}
.op-route-mid small{font-size:11px;font-weight:800;letter-spacing:.04em}
.op-transfer-card .op-steps{margin-top:16px}
/* ── Compositie Operaties op desktop (7 sep 2026) ─────────────────────────────────────────────────────
   Een operationeel scherm begint bij wat je moet doen, niet bij wat in orde is. Volgorde: aandachtkaarten →
   werkbonnentabel → systeem & continuïteit → één rustige regel onderaan. De rustige regels stonden eerst boven
   de kaarten, waardoor het scherm opende met "niets open" terwijl er drie dingen openstonden. */
@media(min-width:900px){
  .op-desk-overview{display:flex;flex-direction:column}
  .op-desk-overview>.op-desk-cards{order:1}
  .op-desk-overview>.op-desk-table-card{order:2}
  .op-desk-overview>.op-desk-continuity{order:3;padding-top:6px;border-top:1px solid var(--card-border,#e6ebf2)}
  .op-desk-overview>.rd-quiet.op-desk-quiet{order:4}
  /* Continuïteitskaarten zijn statusmeldingen, geen alarmen: rustiger dan de operationele kaarten. */
  .op-desk-continuity .op-desk-card{min-height:0;border-left-width:4px;padding:16px 18px;gap:8px}
  .op-desk-continuity .op-desk-card .rd-big{font-size:26px}
  .op-desk-continuity .op-desk-card p{font-size:13px}
  .op-desk-continuity .op-desk-card .rd-pill{background:transparent;border:1px solid var(--card-border,#e6ebf2);color:var(--text-secondary,#475467);width:auto;padding:0 14px}
  .op-desk-continuity .op-desk-card.warn .rd-pill{border-color:var(--attention-border,#f0c9a0);color:var(--attention,#b54708)}
  .op-desk-continuity-head .muted{font-size:12px}
}

/* #110: Overboekingen is een eigen tabblad. Op desktop hoort het in dezelfde kaart als de andere
   Operaties-panelen; de lijst zelf is dezelfde als op de telefoon (één rijdefinitie, twee plekken). */
@media(min-width:721px){
  .op-transfers-view{background:var(--surface,#fff);border:1px solid var(--line,#e6eaf1);border-radius:var(--radius-lg,16px);padding:18px 20px}
  .op-transfers-view .rd-list{border:1px solid var(--line,#e6eaf1);border-radius:var(--radius-md,12px);overflow:hidden}
  .op-transfers-hint{margin:2px 0 14px;font-size:13px;color:var(--text-muted,#66758d)}
}

/* #112: Overboekingen op desktop is een tabel met dezelfde dichtheid als de werkbonnentabel ernaast. */
.op-transfers-desk{background:var(--surface,#fff);border:1px solid var(--line,#e6eaf1);border-radius:var(--radius-lg,16px);padding:18px 20px}
.op-transfers-desk .rd-desk-panel-head{align-items:flex-start;margin-bottom:12px}
.op-transfers-desk .rd-desk-panel-head small{display:block;margin-top:2px;font-size:12.5px;color:var(--text-muted,#66758d);font-weight:400}
.op-transfer-table tbody tr{cursor:pointer}
.op-transfer-table tbody tr:hover{background:var(--surface-quiet,#f7f9fc)}
.op-transfers-done-toggle{margin-top:12px}
/* Desktop-shell in het kit (6 sep 2026): zijbalk-footer (magazijnkeuze, account, sync) en Beheer-kaarten. Afgesplitst van
   20-styles.css (die zat op 400 regels). Cascadepositie ná 40-operations en vóór 45-redesign. */

/* Zijbalk-footer (kit 6 sep 2026): magazijnkeuze, account, compacte sync — zoals sidebar() in de desktop-mockup */
@media(min-width:721px){
  .desktop-sidebar-footer{display:flex;flex-direction:column;gap:8px}
  .sidebar-warehouse-wrap{position:relative}
  .sidebar-warehouse.rd-chip{width:100%;justify-content:flex-start;background:rgba(255,255,255,.08);border-color:transparent;color:#fff;height:42px}
  .sidebar-warehouse.rd-chip>span{flex:1 1 auto;text-align:left}
  .sidebar-warehouse-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.18);padding:6px;display:flex;flex-direction:column;gap:2px;z-index:70}
  .sidebar-warehouse-menu button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:transparent;font:inherit;color:var(--text-primary,#172033);text-align:left;cursor:pointer;min-height:44px}
  .sidebar-warehouse-menu button strong{font-size:13px;font-weight:800}
  .sidebar-warehouse-menu button span{font-size:11px;color:var(--text-muted,#66758d)}
  .sidebar-warehouse-menu button.active,.sidebar-warehouse-menu button:hover{background:var(--theme-accent-soft,#e9faf7)}
  .sidebar-account{display:flex;align-items:center;gap:10px;padding:8px 6px;color:#fff;min-height:44px}
  .sidebar-account .auth-avatar{width:34px;height:34px;border-radius:999px;background:var(--theme-accent,#0e9384);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900;flex-shrink:0}
  .sidebar-account .grow{min-width:0;display:flex;flex-direction:column}
  .sidebar-account strong{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar-account small{font-size:11px;color:#9fc4bf}
  .sidebar-export-icon{width:44px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;flex-shrink:0;cursor:pointer;padding:0}
  .sidebar-export-icon:hover{background:rgba(255,255,255,.14)}
  .sidebar-sync{border-radius:12px;background:rgba(255,255,255,.07);padding:10px 12px}
  .sidebar-sync strong{font-size:12px}.sidebar-sync small{font-size:11px;color:#7fa8a2}
}


/* Beheer in het kit (6 sep 2026): rustige kaarten, één titelmaat, statusrijen in het 44px-ritme, waarschuwing alleen als rand */
@media(min-width:721px){
  .manage-card,.quality-panel,.auth-manage-panel{border-radius:14px;box-shadow:none;border:1px solid var(--line,#e2e8f0);background:#fff}
  .manage-card.attention,.manage-card.warn,.manage-card.highlight{background:#fff;border-color:#f0c9a0;border-left:4px solid var(--status-warn,#b54708)}
  .manage-card-title-row h2,.manage-subsection-head h2,.manage-subsection-head strong,.auth-card-title strong{font-size:15px;font-weight:800;margin:0}
  .manage-card .eyebrow{font-size:11px;letter-spacing:.05em;color:var(--text-muted,#66758d)}
  .manage-card p,.manage-card .field-hint{font-size:13px;color:var(--text-secondary,#475467);line-height:1.5}
  .backup-status-row,.system-check-row,.sync-activity-row{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;border-radius:10px;background:var(--bg,#f7f9fc)}
  .backup-status-row.error,.system-check-row.error{background:var(--surface-warn,#fff6ed)}
  .backup-status-row strong,.system-check-row strong{font-size:13px}
  .backup-status-row small,.system-check-row small{font-size:12px;color:var(--text-muted,#66758d)}
  .manage-card .primary{min-height:44px;border-radius:10px;font-size:14px}
  .manage-card .button.full,.manage-card .primary.full{width:auto;align-self:flex-start;padding:0 18px}
  .manage-nav-item{border-radius:999px;height:36px;min-height:36px;padding:0 14px;font-size:13px}
  .manage-nav-item.active{background:var(--theme-navy,#082f2d);border-color:var(--theme-navy,#082f2d);color:#fff}
  .sync-state-pill{height:26px;border-radius:999px;font-size:11px;font-weight:800;padding:0 9px}
  .theme-template-grid{gap:10px}
}
@media(min-width:721px){.sidebar-menu-backdrop{position:fixed;inset:0;z-index:65;background:transparent}.sidebar-warehouse-menu{z-index:70}}
/* Accountmenu in de zijbalk-footer: zelfde menu-kit als het magazijnmenu, opent omhoog. */
.sidebar-account-wrap{position:relative;display:flex;align-items:center;gap:4px}
button.sidebar-account{flex:1 1 auto;min-width:0;border:0;background:none;text-align:left;cursor:pointer;font:inherit;border-radius:10px}
button.sidebar-account:hover,button.sidebar-account[aria-expanded="true"]{background:rgba(255,255,255,.08)}
button.sidebar-account>svg{color:#9fc4bf;flex-shrink:0}
.sidebar-account-menu button.danger strong{color:var(--status-danger,#b42318)}
/* ── UI-overhaul 7 sep 2026 · desktop-shell (artboard desktop-01/02/03) ────────────────────────────────
   De bovenbalk draagt links het magazijnbereik met één zin uitleg en rechts alleen bel en account. De
   paginatitel staat in de content, niet in de balk: het artboard geeft de pagina een eigen kop met subregel. */
@media(min-width:721px){
  .app-shell>.topbar{height:var(--h-desk-topbar,72px);padding:0 var(--page-pad-lg,24px);gap:16px;background:#fff;border-bottom:1px solid var(--card-border,#e6ebf2)}
  .app-shell>.topbar .topbar-title{display:none}
  .topbar-scope{flex:1 1 auto;min-width:0;display:flex;align-items:center}
  .topbar-scope .warehouse-scope-bar{border:0;background:none;padding:0;margin:0;gap:12px}
  .topbar-scope .warehouse-scope-select select{height:var(--h-control,44px);border-radius:var(--r-control,12px);font-weight:700}
  .desktop-tools{gap:8px}
  .desktop-tools .desktop-tool-icon{width:44px;height:44px;border-radius:12px}
}
/* De bovenbalk draagt op tablet drie dingen tegelijk (bereik, status, account). Het bereik krimpt als eerste,
   de statuspil verliest zijn volledige tekst; niets duwt de balk breder dan het scherm. */
@media(min-width:721px) and (max-width:1100px){
  .topbar-scope{flex:1 1 0;min-width:0;overflow:hidden}
  .topbar-scope .warehouse-scope-note,.topbar-scope .scope-note{display:none}
  .app-shell>.topbar .sync-chip .sync-text-full{display:none}
  .app-shell>.topbar .desktop-tools{flex-shrink:0}
}
@media(min-width:721px){.app-shell>.topbar{overflow:hidden}}
/* ── Gebruikers & rechten (artboard desktop-03) ───────────────────────────────────────────────────────
   Accounts als tabel: avatar + naam links, rol, magazijnchips, status en acties in vaste kolommen met
   kleine hoofdletterkoppen. Rollen staan in de rechterkolom. */
@media(min-width:1100px){
  /* Zeven cellen: avatar, naam, rol, magazijntoegang, status en twee acties. De kop telt dezelfde tracks, met een
     lege cel boven de avatar; anders wikkelen de knoppen naar een tweede regel en wordt de rij twee keer zo hoog. */
  /* Flexibele tracks: bij een smallere kaart (rollenkolom ernaast) moeten naam, rol en magazijnchips wijken, niet de
     acties. Vaste minima duwden de knoppen buiten de kaart — gemeten op 1440px, 7 sep 2026. */
  /* 9 sep 2026 (#140): de rolkolom kreeg 74px terwijl "Magazijnmedewerker" 131px nodig heeft. Een rastercel
     knipt niet vanzelf, dus de naam liep dwars door de kolom "magazijntoegang" ernaast. Meer ruimte voor de
     rol, en een vangnet dat afkapt in plaats van overloopt. */
  .auth-user-head,.auth-user-row{display:grid;grid-template-columns:36px minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,1fr) 74px auto auto;align-items:center;gap:10px}
  .auth-user-row>*{min-width:0}
  .auth-user-row .secondary.small{padding:0 12px;font-size:12.5px;white-space:nowrap}
  .auth-user-head .auth-head-actions{text-align:right}
  .auth-user-head{padding:8px 14px;border-bottom:1px solid var(--card-border,#e6ebf2)}
  .auth-user-head span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted,#66758d);font-weight:700}
  .auth-user-row{padding:8px 14px;border-bottom:1px solid #f1f4f8;min-height:56px}
  .auth-user-row:last-child{border-bottom:0}
  .auth-user-row .grow{display:flex;flex-direction:column;min-width:0}
  .auth-user-row>.auth-avatar{grid-row:span 1}
  .auth-user-row .auth-avatar+.grow{margin-left:-4px}
  .auth-user-row .rd-pill,.auth-user-row .secondary{justify-self:end}
}
.auth-user-head{display:none}
@media(min-width:1100px){.auth-user-head{display:grid}}
.auth-user-row .user-status.on{color:var(--accent-dark,#0b6e63);font-weight:700}
.auth-user-row .user-status.off{color:var(--text-muted,#66758d);font-weight:700}
@media(min-width:1100px){
  .auth-user-row .secondary.small{min-height:36px;padding:0 14px}
  .auth-user-row .rd-tag,.auth-user-row .user-status{white-space:nowrap}
  .auth-user-row .auth-wh-chips{display:flex;gap:6px;flex-wrap:wrap}
}
/* Rollen en de uitleg over magazijntoegang (artboard desktop-03). */
.auth-roles-intro{margin:2px 0 10px;color:var(--text-muted,#66758d);font-size:13px;line-height:1.5}
.auth-info-card{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid var(--card-border,#e6ebf2);border-radius:var(--r-card,16px);background:var(--surface-raised,#f8fafc);margin-top:12px}
.auth-info-icon{width:40px;height:40px;border-radius:12px;background:var(--accent-soft,#e9faf7);color:var(--accent-dark,#0b6e63);display:grid;place-items:center;flex-shrink:0}
.auth-info-card strong{display:block;font-size:14px;font-weight:800;color:var(--text-primary,#172033)}
.auth-info-card p{margin:4px 0 0;color:var(--text-secondary,#475467);font-size:13px;line-height:1.55}
/* ── Zijbalk draagt alles (7 sep 2026, keuze van de gebruiker: geen bovenbalk op desktop) ─────────────
   De pagina begint bovenaan het venster; magazijnbereik, gereedschap, account en verbinding staan links. */
@media(min-width:721px){
  .app-shell>.topbar{display:none}
  .content{padding-top:24px}
  .sidebar-tools{display:flex;gap:6px;padding:0 2px}
  .sidebar-tool{flex:1 1 0;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#dbe9e6;display:grid;place-items:center;cursor:pointer;position:relative}
  .sidebar-tool:hover,.sidebar-tool.active{background:rgba(255,255,255,.14);color:#fff}
  .sidebar-tool-badge{position:absolute;top:4px;right:6px;min-width:16px;height:16px;border-radius:999px;background:var(--attention,#b54708);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 4px}
  .desktop-sidebar-footer{gap:10px}
}
.page-scope-note{display:block;margin-top:6px;color:var(--text-muted,#66758d);font-size:13px}
.page-scope-note b{color:var(--text-secondary,#475467);font-weight:800}
/* ── Thema's kiezen: een mini-app per tegel (7 sep 2026) ──────────────────────────────────────────────
   De oude tegels waren een kleurwash met een bolletje: je zag de kleur, niet het resultaat. Elke tegel toont nu de
   donkere zijbalk, een kaart, de accentknop en een chip in dat thema — precies de vier vlakken die je straks ziet. */
.brand-theme-card .theme-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:16px 0 18px}
.brand-theme-card .theme-template{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px;min-height:0;
  border:1px solid var(--card-border,#e6ebf2);border-radius:var(--r-card,16px);background:#fff;cursor:pointer;text-align:left;transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease}
.brand-theme-card .theme-template::before{content:none}
.brand-theme-card .theme-template:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(16,24,40,.08);border-color:var(--theme-accent,#0e9384)}
.brand-theme-card .theme-template.active{border-color:var(--theme-accent,#0e9384);box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent,#0e9384) 22%,#fff)}
.theme-preview{display:flex;height:74px;border-radius:11px;overflow:hidden;border:1px solid var(--card-border,#e6ebf2);background:var(--app-bg,#f4f6f9)}
.theme-preview-side{width:34%;background:var(--theme-navy,#0f2a24);display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 8px}
.theme-preview-side i{display:block;height:5px;border-radius:999px;background:rgba(255,255,255,.28)}
.theme-preview-side i:first-child{background:var(--theme-accent,#0e9384);width:70%}
.theme-preview-side i:nth-child(2){width:88%}
.theme-preview-side i:last-child{width:60%}
.theme-preview-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 9px;background:#fff}
.theme-preview-bar{display:block;height:6px;width:76%;border-radius:999px;background:#e6ebf2}
.theme-preview-btn{display:block;height:14px;width:56%;border-radius:6px;background:var(--theme-accent,#0e9384)}
.theme-preview-chip{display:block;height:10px;width:36%;border-radius:999px;background:var(--theme-accent-soft,#e9faf7);border:1px solid color-mix(in srgb,var(--theme-accent,#0e9384) 30%,#fff)}
.brand-theme-card .theme-copy{display:flex;flex-direction:column;gap:1px}
.brand-theme-card .theme-copy strong{font-size:14px;font-weight:800;color:var(--text-primary,#172033)}
.brand-theme-card .theme-copy small{font-size:12px;color:var(--text-muted,#66758d);font-weight:600}
.brand-theme-card .theme-check-wrap{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:999px;background:var(--theme-accent,#0e9384);color:#fff;display:grid;place-items:center;box-shadow:0 4px 10px rgba(16,24,40,.18)}

/* Magazijnbeheer (7 sep 2026). Zelfde taal als de productdetailpagina die de gebruiker als referentie
   aanwees: rustige rijen in één kaart, code als monogram links, getal rechts en tabulair, status als
   pill. Geen tweede kaartsoort erbij. */
.warehouse-manage-card .warehouse-summary{display:flex;gap:20px;flex-wrap:wrap}
.warehouse-manage-card .warehouse-summary div{display:flex;flex-direction:column;gap:2px;min-width:74px}
.warehouse-manage-card .warehouse-summary span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#66758d)}
.warehouse-manage-card .warehouse-summary strong{font-size:18px;font-weight:750;color:var(--ink-dark,#101828)}
.warehouse-manage-card .warehouse-summary strong.num{font-variant-numeric:tabular-nums}
.warehouse-admin-list{display:flex;flex-direction:column;margin:14px 0 10px;border:1px solid var(--line,#e6eaf1);border-radius:var(--radius-md,12px);overflow:hidden}
.warehouse-admin-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto auto;align-items:center;gap:14px;padding:12px 14px;background:var(--surface,#fff)}
.warehouse-admin-row .grow{min-width:0}
.warehouse-admin-units{min-width:78px}
.warehouse-admin-state{justify-self:start;min-width:96px}
.warehouse-admin-row+.warehouse-admin-row{border-top:1px solid var(--line,#e6eaf1)}
.warehouse-admin-row.archived{background:var(--surface-quiet,#f7f9fc)}
.warehouse-admin-row.archived strong{color:var(--text-muted,#66758d)}
.warehouse-admin-code{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm,10px);background:var(--theme-accent-soft,#e8f5f1);color:var(--theme-accent,#0f766e);font-weight:800;font-size:12px;letter-spacing:.04em}
.warehouse-admin-row.archived .warehouse-admin-code{background:#eef1f6;color:#8a97ab}
.warehouse-admin-row strong{display:block;font-size:15px;font-weight:700;color:var(--ink-dark,#101828)}
.warehouse-admin-row small{display:block;margin-top:2px;font-size:12.5px;color:var(--text-muted,#66758d)}
.warehouse-admin-units{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-size:17px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--ink-dark,#101828)}
.warehouse-admin-units small{margin:0;font-size:11px;font-weight:600;color:var(--text-muted,#66758d)}
.warehouse-admin-actions{display:flex;gap:8px}
/* De status is een LABEL, geen knop. Als hoge pil met rand naast twee echte knoppen leek het er een
   derde — dus kleiner, zachter, en zonder knopmaat. */
.rd-pill.warehouse-admin-state{height:24px;min-height:0;padding:0 10px;font-size:11.5px;font-weight:700;letter-spacing:.02em;border:0;background:var(--surface-quiet,#f1f4f9);color:var(--text-muted,#66758d);cursor:default}
.rd-pill.warehouse-admin-state.ok{background:var(--ok-soft,#e7f6ef);color:var(--ok,#0f7b52)}
.warehouse-admin-blocker{grid-column:2/-1;margin-top:2px;font-size:12px;color:var(--attention,#b54708)}
.warehouse-manage-card{margin-bottom:14px}
@media(max-width:899px){
  .warehouse-admin-row{grid-template-columns:40px 1fr auto;row-gap:8px}
  .warehouse-admin-code{width:40px;height:40px}
  .warehouse-admin-state{grid-column:2}
  .warehouse-admin-actions{grid-column:1/-1;justify-content:stretch}
  .warehouse-admin-actions button{flex:1}
}

/* #106: vernieuwen staat bij de verbindingsstatus in de zijbalk. Derde kolom in dezelfde rij — met twee
   kolommen viel de knop eronder en zweefde hij los onder de kaart. */
.desktop-sidebar .sidebar-sync{grid-template-columns:8px 1fr auto;align-items:center}
.sidebar-sync-refresh{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:9px;background:rgba(255,255,255,.10);color:rgba(255,255,255,.78);cursor:pointer}
.sidebar-sync-refresh:hover{background:rgba(255,255,255,.18);color:#fff}
.sidebar-sync-refresh:disabled{opacity:.5;cursor:default}
.sidebar-sync-refresh.busy svg{animation:vs-spin 1.1s linear infinite}
@keyframes vs-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.sidebar-sync-refresh.busy svg{animation:none}}


/* #109: bedrijfsinstellingen in een raster van korte keuzevelden, daaronder de schakelaars. */
.company-pref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:12px 0 4px}
.company-pref-grid label{display:flex;flex-direction:column;gap:4px;min-width:0}
.company-pref-grid label>span{font-size:12px;font-weight:650;color:var(--ink-dark,#101828)}
.company-pref-grid select{height:40px;border:1px solid var(--line,#e2e8f0);border-radius:10px;padding:0 10px;background:var(--surface,#fff);font:inherit;font-size:13.5px}
.company-pref-grid small{font-size:11.5px;color:var(--text-muted,#66758d);line-height:1.35}

/* #112: de rollenlijst krijgt dezelfde kolomstructuur als de accountstabel ernaast, plus "Accounts" —
   het aantal mensen dat deze rol heeft. Zonder dat getal weet je niet welke rol je gerust aanpast. */
.auth-role-head,.auth-role-row{display:grid;grid-template-columns:minmax(0,1fr) 84px 84px auto;align-items:center;gap:12px}
.auth-role-head{padding:8px 14px;border-bottom:1px solid var(--line,#e6eaf1);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#66758d)}
.auth-role-head span:nth-child(2),.auth-role-head span:nth-child(3){text-align:right}
.auth-role-count,.auth-role-users{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;color:var(--ink-dark,#101828)}
.auth-role-users.none{color:var(--text-muted,#9aa6b8);font-weight:600}
@media(max-width:899px){
  .auth-role-head{display:none}
  .auth-role-row{grid-template-columns:minmax(0,1fr) auto auto;row-gap:6px}
  .auth-role-count{display:none}
}

/* ═══ Rollen: één tabel in plaats van losse blokjes (#140, 9 sep 2026) ═══════════════════════════════
   De kolomkop had vier cellen en een rij ook -- behalve bij een verwijderbare rol, want die kreeg er een
   vijfde bij. Een raster met vier sporen zet die vijfde op een NIEUWE rasterregel, dus ingebouwde en
   eigen rollen lijnden verschillend uit en de hoogtes liepen door elkaar. De acties zitten nu in één cel;
   deze regels houden die cel bij elkaar en geven de smalle weergave een leesbare vorm. */
/* Gemeten op een 1440px-scherm: de rollenkaart is 408px breed, en twee getalkolommen van 84px plus een
   actiekolom van 102px lieten precies 68px over voor de rolnaam. Daar past "Magazijnsupervisor" niet in,
   dus brak alles af en werden de rijen 86 tot 193px hoog -- vijf rijen, vijf hoogtes. Een kolom die een
   getal als "4" toont heeft geen 84px nodig; de naam wel. */
/* De rollenkaart staat op desktop in de SMALLE kolom van het beheerraster: gemeten 408px op een
   1440px-scherm -- telefoonbreedte. Een tabel van vier kolommen hoort niet bij die breedte, en de
   kolomkoppen ("RECHTEN ACCOUNTS ACTIES") plakten aan elkaar omdat ze breder zijn dan hun 48px-spoor.
   De vorm volgt daarom de ruimte die de KAART heeft, niet de breedte van het venster: smal = een kaart
   per rol met de aantallen als losse feiten, breed = de tabel met kolomkoppen. */
.auth-roles-card{container-type:inline-size}
.auth-roles-card .auth-role-head{display:none}
.auth-roles-card .auth-role-list{display:flex;flex-direction:column;gap:8px}
.auth-roles-card .auth-role-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px;align-items:start;
  padding:12px 14px;border:1px solid var(--line,#e2e8f0);border-radius:12px;background:var(--surface,#fff)}
.auth-roles-card .auth-role-row .auth-role-count,.auth-roles-card .auth-role-row .auth-role-users{
  grid-row:2;grid-column:1;justify-self:start;font-size:12px;font-weight:700;color:var(--text-muted,#5f6f86)}
.auth-roles-card .auth-role-row .auth-role-users{justify-self:center}
.auth-roles-card .auth-role-row .auth-role-unit{font-weight:600;margin-left:3px}
.auth-roles-card .auth-role-actions{grid-column:2;grid-row:1/span 2;align-self:center}
@container (min-width:560px){
  .auth-roles-card .auth-role-head{display:grid;grid-template-columns:minmax(110px,1fr) 64px 74px auto;gap:10px}
  .auth-roles-card .auth-role-list{display:block}
  .auth-roles-card .auth-role-row{grid-template-columns:minmax(110px,1fr) 64px 74px auto;row-gap:0;align-items:center;
    border:0;border-radius:0;padding:10px 14px;background:transparent}
  .auth-roles-card .auth-role-row .auth-role-count,.auth-roles-card .auth-role-row .auth-role-users{
    grid-row:auto;grid-column:auto;justify-self:end;font-size:14px;color:inherit}
    .auth-roles-card .auth-role-row .auth-role-unit{display:none}
  .auth-roles-card .auth-role-actions{grid-column:auto;grid-row:auto}
}
/* In de accountstabel liep de rolchip over de kolom ernaast heen: "Magazijnmedewerker" schoof dwars door
   "alle magazijnen". Een rastercel krimpt niet onder zijn inhoud tenzij je dat zegt. */
.auth-user-row>*{min-width:0}
.auth-user-row .auth-role-tag,.auth-user-row .auth-wh-chips{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* De rechtenvoorbeeldjes mochten doorlopen op meerdere regels; daardoor kreeg elke rol een eigen hoogte.
   Eén regel, en wat niet past zit al in de "+N" die er rechts van staat. */
.role-permission-preview{display:flex;flex-wrap:nowrap;gap:6px;overflow:hidden;max-width:100%}
.role-permission-preview>span{flex:0 0 auto;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%}
.auth-role-actions{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:nowrap}
.auth-role-actions>*{flex:0 0 auto}
@media(max-width:899px){
  /* Op een telefoon is een tabel van vier kolommen geen tabel meer. Naam boven, cijfers en acties eronder:
     één kaart per rol, met de aantallen als losse feiten in plaats van als kolommen die toch niet uitlijnen. */
  .auth-role-row{grid-template-columns:minmax(0,1fr) auto;row-gap:10px;align-items:start;
    padding:12px 14px;border:1px solid var(--line,#e2e8f0);border-radius:12px;background:var(--surface,#fff)}
  .auth-role-list{display:flex;flex-direction:column;gap:8px}
  .auth-role-row .auth-role-count,.auth-role-row .auth-role-users{grid-row:2;justify-self:start;
    font-size:12px;font-weight:700;color:var(--text-muted,#5f6f86)}
  .auth-role-row .auth-role-count::after{content:' rechten';font-weight:600}
  .auth-role-row .auth-role-users::after{content:' accounts';font-weight:600}
  .auth-role-row .auth-role-count{grid-column:1}
  .auth-role-row .auth-role-users{grid-column:1;justify-self:center}
  .auth-role-actions{grid-column:2;grid-row:1/span 2;align-self:center}
}
/* De twee toevoegknoppen stonden in een raster van twee kolommen waarin 'Gebruiker toevoegen' over twee
   regels brak. Een knoplabel hoort niet af te breken: laat ze over de volle breedte lopen zodra het niet past. */
@media(max-width:520px){
  .auth-manage-head .auth-head-actions{display:flex;flex-wrap:wrap;gap:8px}
  .auth-manage-head .auth-head-actions>*{flex:1 1 100%;white-space:nowrap}
}

/* #144: de bedrijfsstandaard staat onder de tegels, los van je eigen keuze. */
.theme-company-default{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line,#e2e8f0)}
.theme-company-default small{color:var(--text-muted,#5f6f86);font-size:12px}

/* ═══ Licentiekaart (#148, 9 sep 2026) ══════════════════════════════════════════════════════════════
   De stand moet in één oogopslag te lezen zijn, ook de rustige. Kleur zegt de ernst, de kop zegt wat het
   is en de regel eronder wat het betekent voor het werk -- dat laatste is de enige vraag die een
   magazijnbeheerder erover heeft. */
.license-card .license-headline{margin:2px 0 4px;font-size:16px;font-weight:800;color:var(--text-primary,#172033)}
.license-card.warn{border-color:var(--border-warn,#fedf89)}
.license-card.error{border-color:var(--border-error,#f3c7c2)}
.license-card.warn .license-headline{color:var(--status-warn,#b54708)}
.license-card.error .license-headline{color:var(--status-error,#b42318)}
.license-card .license-reason{margin:6px 0 0;font-size:12px;color:var(--text-muted,#5f6f86)}
.license-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:12px 0 0;font-size:13px}
.license-facts>div{display:contents}
.license-facts dt{color:var(--text-muted,#5f6f86)}
/* 10 sep 2026: grenzen en functies stonden ondertekend in de licentie maar nergens op het scherm.
   De grenzen krijgen een eigen blok met een lijn erboven, zodat ze niet met de klantgegevens vermengen. */
.license-limits{margin-top:10px;padding-top:10px;border-top:1px solid var(--line,#e6ebf2)}
.license-limits dd{font-variant-numeric:tabular-nums}
.license-features{margin-top:10px}
.license-feature-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.license-feature-chips .rd-tag{font-size:11.5px;padding:4px 9px}
.license-facts dd{margin:0;font-weight:700;color:var(--text-primary,#172033)}
.license-install{margin-top:12px;font-size:12px;color:var(--text-secondary,#475467)}
.license-install summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center}
.license-install p{margin:6px 0 0;line-height:1.5}
/* Herontwerp-kit (5 sep 2026). Eén ritme voor alle schermen: 56px kop, 38px contextchips, 66px lijstregels,
   58px hoofdknop in de duimzone, 74px tabbalk. Getallen rechts en tabulair. Alle kleuren via thema-variabelen zodat
   data-theme blijft werken. Prefix rd- om niet te botsen met legacy-klassen die per feature worden uitgefaseerd. */

/* ── mobiele kop: één navy balk voor élke tab (de scanner tekende voorheen zijn eigen hero) ── */
@media(max-width:720px){
  .app-shell>.topbar,.app-shell:not(.tab-scanner)>.topbar{height:56px;min-height:0;padding:0 14px;gap:8px;background:var(--theme-navy,#082f2d);border-bottom:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;position:sticky;top:0;z-index:var(--z-sticky,12)}
  .app-shell>.topbar .brand{display:none}
  .app-shell>.topbar .topbar-title{color:#fff;font-size:16px;font-weight:800;text-align:center;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-shell>.topbar .topbar-menu{width:44px;height:44px;border:0;background:transparent;color:#fff;display:grid;place-items:center;border-radius:12px;padding:0}
  .app-shell>.topbar .topbar-menu:active{background:rgba(255,255,255,.12)}
  .app-shell>.topbar .topbar-right{justify-content:flex-end}
  .app-shell>.topbar .sync-chip{background:rgba(255,255,255,.1);color:#cfe3e0;padding:6px 10px;font-size:12px;font-weight:600}
  .app-shell>.topbar .sync-chip.ok .sync-dot{background:#16a36d}
  .app-shell>.topbar .sync-chip.offline .sync-dot{background:#f97066}
  .app-shell>.topbar .sync-chip .sync-text-full{display:none}
  .app-shell>.topbar .mobile-presence{color:#cfe3e0}
  .app-shell>.topbar .pending-badge{background:#fff;color:var(--theme-navy,#082f2d)}
  .tab-scanner>.topbar{display:grid}
  .tab-scanner>.content{background:var(--bg,#f7f9fc)}
  .rd-sheet .mobile-more-list{display:flex;flex-direction:column;gap:0;padding:0 0 8px}
  .rd-sheet .mobile-account-card{margin:0 0 6px;border-radius:14px}
  .rd-sheet .mobile-account-card .rd-row-sub{white-space:normal;line-height:1.3}
  .rd-sheet .mobile-more-list .mobile-account-card>button,.rd-sheet .mobile-account-card .button{width:auto;grid-column:auto;flex:0 0 auto;height:36px;min-height:36px;padding:0 12px;font-size:13px}
  .rd-sheet .mobile-account-card>.rd-row-body{flex:1 1 auto;min-width:0}
  .rd-sheet .mobile-account-card .auth-avatar{width:44px;height:44px;border-radius:999px;background:var(--theme-accent,#0e9384);color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px;flex-shrink:0}
  .rd-sheet .rd-list{padding:0}
  .rd-sheet .rd-section{padding:14px 4px 8px}
  .rd-sheet .mobile-more-item.active{border-color:var(--theme-accent,#0e9384)}
}
@media(min-width:721px){.topbar-menu{display:none}.app-shell>.topbar .topbar-title{display:none;color:inherit;font-size:16px;font-weight:800;text-align:left;margin-left:6px}}
/* De topbar-titel is dé paginakop (role=heading, mobiel én — sinds de desktop-shell van 6 sep — desktop). Een PageHead-h1 zou
   dezelfde naam dubbel geven (strict-mode in tests, dubbele h1 voor screenreaders); PageHead houdt subtitel en actie. */
.page-head h1{display:none}
.rd-summary.flush{margin-left:0;margin-right:0}

/* ── paginawrapper: heft de standaard content-padding op zodat rijen zelf 12px bewaken ── */
@media(max-width:720px){
  .rd-page{margin:-14px calc(50% - 50vw) 0;display:flex;flex-direction:column;min-height:calc(100vh - 56px - 74px - var(--safe-bottom,0px));min-height:calc(100dvh - 56px - 74px - var(--safe-bottom,0px));background:var(--bg,#f7f9fc)}
  @supports not (margin:calc(50% - 50vw)){.rd-page{margin:-14px -12px 0}}
  .content{padding-bottom:calc(74px + var(--safe-bottom,0px) + 28px)}
}
@media(min-width:721px){.rd-page{display:flex;flex-direction:column;gap:18px}}

/* ── contextbalk + chips ── */
.rd-scope{background:#fff;border-bottom:1px solid var(--line,#e2e8f0);padding:8px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-shrink:0}
.rd-scope .grow{flex-grow:1}
.rd-chip{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 13px;max-width:100%;border-radius:10px;border:1px solid var(--line,#e2e8f0);background:var(--surface-sunken,#f2f4f7);color:var(--text-primary,#172033);font:inherit;font-size:14px;font-weight:800;white-space:nowrap;cursor:default}
.rd-chip.is-button{cursor:pointer}
.rd-chip.accent{background:var(--theme-accent-soft,#e9faf7);border-color:rgba(var(--theme-rgb,14,147,132),.32);color:var(--theme-accent-dark,#08766a)}
.rd-chip.warn{background:var(--surface-warn,#fff6ed);border-color:#f5d3ad;color:var(--status-warn,#b54708);font-size:12px}
.rd-chip .rd-dot{margin-right:-1px}
.rd-chip svg{flex-shrink:0}
.rd-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── statuspunt ── */
.rd-dot{width:7px;height:7px;border-radius:999px;background:var(--text-muted,#5f6f86);flex-shrink:0;display:inline-block}
.rd-dot.ok{background:#16a36d}.rd-dot.warn{background:var(--status-warn,#b54708)}.rd-dot.bad{background:var(--status-error,#b42318)}.rd-dot.accent{background:var(--theme-accent,#0e9384)}

/* ── samenvattingsstrook: hele woorden, nooit afgekapt ── */
.rd-summary{display:flex;align-items:stretch;border:1px solid var(--line,#e2e8f0);border-radius:12px;overflow:hidden;background:#fff;margin:10px 12px 0}
.rd-summary>*{flex:1 1 0;min-width:0;overflow:hidden;padding:10px 13px;display:flex;flex-direction:column;gap:1px;border-left:1px solid var(--line,#e2e8f0);background:transparent;border-top:0;border-right:0;border-bottom:0;border-radius:0;font:inherit;text-align:left;color:inherit}
.rd-summary>*:first-child{border-left:0}
.rd-summary strong{color:var(--text-primary,#172033);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.rd-summary span{color:var(--text-muted,#5f6f86);font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-summary>.warn{background:var(--surface-warn,#fff6ed)}
.rd-summary>.warn strong,.rd-summary>.warn span{color:var(--status-warn,#b54708)}
.rd-summary>.warn span{font-weight:700}
.rd-summary>.accent strong{color:var(--theme-accent-dark,#08766a)}
@media(min-width:721px){.rd-summary{margin:0;max-width:560px}}
/* ≤360px: drie of vijf cellen passen niet naast elkaar met hele woorden én hele getallen — wikkel naar twee per rij */
@media(max-width:360px){.rd-summary{flex-wrap:wrap}.rd-summary>*,.rd-page .rd-summary>*,.rd-summary>.rd-summary-cell{flex:1 1 40%}.rd-summary>*:nth-child(n+3){border-top:1px solid var(--line,#e2e8f0)}.rd-summary>*:nth-child(odd){border-left:0}}

/* ── sectiekop ── */
.rd-section{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:15px 16px 8px;flex-shrink:0}
.rd-section strong{color:var(--text-primary,#172033);font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.rd-section button,.rd-section span{color:var(--theme-accent,#0e9384);font:inherit;font-size:13px;font-weight:700;border:0;background:transparent;padding:0}
.rd-section button{min-height:44px;padding:0 8px;margin:-13px -8px}
.rd-section span.muted{color:var(--text-muted,#5f6f86);font-weight:600}
@media(min-width:721px){.rd-section{padding:0 0 8px}}

/* ── lijst + rijen: het 66px-ritme ── */
.rd-list{display:flex;flex-direction:column;gap:7px;padding:0 12px}
.rd-list.grow{flex-grow:1}
@media(min-width:721px){.rd-list{padding:0}}
.rd-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:11px 13px;color:inherit;font:inherit;min-height:62px}
button.rd-row{cursor:pointer;-webkit-tap-highlight-color:transparent}
button.rd-row:active{background:var(--surface-raised,#f8fafc)}
button.rd-row:focus-visible{outline:2px solid var(--theme-accent,#0e9384);outline-offset:2px}
.rd-row.warn{border-color:#f5d3ad}
.rd-row.live{border:1.5px solid var(--theme-accent,#0e9384);border-radius:14px;box-shadow:0 2px 10px rgba(8,47,45,.07);flex-direction:column;align-items:stretch;gap:11px;padding:12px 12px 12px 14px}
.rd-row-badge{width:38px;height:38px;border-radius:10px;background:var(--surface-sunken,#eef2f7);color:var(--text-secondary,#475467);display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0;overflow:hidden}
.rd-row-badge.warn{background:var(--surface-warn,#fff6ed);color:var(--status-warn,#b54708)}
.rd-row-badge.accent{background:var(--theme-accent-soft,#e9faf7);color:var(--theme-accent-dark,#08766a)}
.rd-row-badge img{width:100%;height:100%;object-fit:cover}
.rd-row-body{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rd-row-title{color:var(--text-primary,#172033);font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-row-sub{color:var(--text-muted,#98a5b8);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.rd-row.warn .rd-row-sub{color:var(--status-warn,#b54708);font-weight:700}
.rd-row-value{text-align:right;flex-shrink:0}
.rd-row-value strong{display:block;color:var(--text-primary,#172033);font-size:18px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.rd-row-value small{display:block;color:var(--text-muted,#98a5b8);font-size:11px;margin-top:3px}
.rd-row.warn .rd-row-value strong{color:var(--status-warn,#b54708)}
.rd-row-value.ok strong{color:#16a36d}.rd-row-value.bad strong{color:var(--status-error,#d92d20)}
.rd-row-chevron{color:#c3cddb;flex-shrink:0;display:grid;place-items:center}
.rd-row-delta{width:54px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end}
.rd-row-delta strong.ok,.rd-row-delta.ok strong{color:#16a36d}.rd-row-delta.bad strong{color:var(--status-error,#d92d20)}
.rd-row-time{flex-shrink:0;color:var(--text-muted,#98a5b8);font-size:11px;font-variant-numeric:tabular-nums}
.rd-row-delta strong{font-size:17px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.rd-row-delta small{color:var(--text-muted,#98a5b8);font-size:11px;margin-top:2px;font-variant-numeric:tabular-nums}
.rd-row-sep{width:1px;height:30px;background:var(--line,#e2e8f0);flex-shrink:0}
.rd-row.warn .rd-row-sep{background:#f5d3ad}
/* Terugknop van een leesscherm. Zonder eigen achtergrond valt een <button> terug op de knopkleur van de
   browser: Chromium tekent bijna-wit (#efefef), Safari zilvergrijs (#c0c0c0) — op iOS stond er dus een grijs
   blok in een wit scherm (gemeten 8 sep 2026). Elke knop hoort zijn vlak zelf te zetten. */
.rd-back{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:12px;
  border:1px solid var(--line,#e2e8f0);background:var(--surface,#fff);color:var(--text-secondary,#475467)}
.rd-back:active{background:var(--surface-sunken,#f2f4f7)}
.rd-pill{height:var(--h-chip,40px);min-height:var(--h-chip,40px);border-radius:999px;border:1px solid var(--line,#e2e8f0);background:#fff;display:inline-flex;align-items:center;padding:0 13px;color:var(--text-secondary,#475467);font:inherit;font-size:12px;font-weight:800;white-space:nowrap;flex-shrink:0}
.rd-pill.warn{border-color:#e0b483;color:var(--status-warn,#b54708)}
button.rd-pill{height:44px;min-height:44px;cursor:pointer}
.rd-tag{background:var(--theme-accent-soft,#e9faf7);border-radius:8px;padding:3px 9px;color:var(--theme-accent-dark,#08766a);font-size:11px;font-weight:800;flex-shrink:0}

/* ── stepper: −/waarde/+ met 50px raakvlakken ── */
.rd-stepper{display:flex;align-items:center;gap:10px}
.rd-stepper>button{width:50px;height:50px;border-radius:12px;background:var(--surface-sunken,#eef2f7);border:1px solid var(--line,#e2e8f0);color:var(--text-strong,#344054);display:grid;place-items:center;flex-shrink:0;padding:0;font:inherit}
.rd-stepper>button:active{background:var(--line,#e2e8f0)}
.rd-stepper-value{flex-grow:1;height:50px;border-radius:12px;background:var(--bg,#f7f9fc);border:1px solid var(--line,#e2e8f0);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.rd-stepper-value strong{color:var(--text-primary,#172033);font-size:22px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.rd-stepper-value small{color:var(--text-muted,#5f6f86);font-size:11px;font-weight:600;margin-top:2px;white-space:nowrap}
.rd-stepper>.rd-stepper-action{width:auto;height:50px;padding:0 18px;background:var(--theme-accent,#0e9384);border:0;color:#fff;font-size:14px;font-weight:800;border-radius:12px}

/* ── hoofdknop in de duimzone ── */
.rd-primary-wrap{padding:10px 12px 12px;flex-shrink:0}
.rd-primary{width:100%;height:58px;border-radius:14px;border:0;background:var(--theme-accent,#0e9384);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-size:16px;font-weight:800;box-shadow:0 4px 14px rgba(var(--theme-rgb,14,147,132),.3);cursor:pointer}
.rd-primary:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(var(--theme-rgb,14,147,132),.3)}
.rd-primary:disabled,.rd-primary.muted{background:var(--surface-sunken,#eef2f7);color:var(--text-muted,#98a5b8);box-shadow:none;border:1.5px solid var(--line,#e2e8f0);cursor:default}
@media(min-width:721px){.rd-primary-wrap{padding:0}.rd-primary{width:auto;height:44px;padding:0 18px;font-size:14px;border-radius:10px;box-shadow:none}}

/* ── voortgangsring (conic) ── */
.rd-ring{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;flex-shrink:0;background:conic-gradient(var(--rd-ring-color,var(--theme-accent,#0e9384)) calc(var(--rd-ring-pct,0)*1%),var(--line,#e2e8f0) 0)}
.rd-ring>span{width:36px;height:36px;border-radius:999px;background:#fff;display:grid;place-items:center;color:var(--rd-ring-color,var(--theme-accent,#0e9384));font-size:11px;font-weight:900;font-variant-numeric:tabular-nums}
.rd-ring.warn{--rd-ring-color:var(--status-warn,#b54708)}.rd-ring.ok{--rd-ring-color:#16a36d}.rd-ring.idle{--rd-ring-color:var(--text-muted,#98a5b8)}

/* ── compacte cameraband ── */
button.rd-camera,.rd-camera{margin:12px 12px 0;height:118px;border-radius:16px;background:linear-gradient(160deg,#16202e 0%,#0b1219 100%);position:relative;display:flex;align-items:center;gap:12px;padding:0 14px 0 18px;overflow:hidden;border:0;color:#fff;width:calc(100% - 24px);text-align:left;font:inherit}
.rd-camera-main{flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;gap:16px;background:transparent;border:0;color:#fff;text-align:left;padding:0;font:inherit;cursor:pointer;position:relative;z-index:1}
.rd-camera-photo{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;flex-shrink:0;position:relative;z-index:1;padding:0;cursor:pointer}
.rd-camera-icon{width:68px;height:68px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;flex-shrink:0}
.rd-camera strong{display:block;font-size:17px;font-weight:800}
.rd-camera span{display:block;color:#8fa0b3;font-size:12px;line-height:1.4;margin-top:4px}
.rd-camera::after{content:'';position:absolute;right:-22px;bottom:-26px;width:120px;height:120px;border-radius:999px;background:rgba(var(--theme-rgb,14,147,132),.16)}
.rd-camera.live{height:auto;aspect-ratio:4/3;padding:0;display:block}
.rd-camera.live video{width:100%;height:100%;object-fit:cover;display:block}

/* ── tabbalk: 4 kolommen, actieve tab als zachte pil ── */
@media(max-width:720px){
  .bottom-tabs{position:fixed;left:0;right:0;bottom:0;margin:0;border-radius:0;box-shadow:0 -1px 0 var(--line,#e2e8f0);height:calc(74px + var(--safe-bottom,0px));padding:0 6px calc(10px + var(--safe-bottom,0px));grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;background:#fff;border-top:1px solid var(--line,#e2e8f0);backdrop-filter:none}
  .bottom-tabs button{min-height:0;gap:5px;padding:7px 0;margin:0 4px;border-radius:12px;font-size:11px;font-weight:600;color:var(--text-muted,#5f6f86)}
  .bottom-tabs button.active{background:var(--theme-accent-soft,#e9faf7);color:var(--theme-accent,#0e9384);font-weight:700}
}

/* ── zoekveld + filterchips in het kit ── */
.rd-search{margin:10px 12px 4px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line,#e2e8f0);display:flex;align-items:center;gap:10px;padding:0 14px}
.rd-search input{border:0;background:transparent;flex-grow:1;min-width:0;font:inherit;font-size:14px;color:var(--text-primary,#172033);outline:none;padding:0;height:100%}
.rd-search input::placeholder{color:var(--text-muted,#98a5b8)}
.rd-search svg{color:var(--text-muted,#98a5b8);flex-shrink:0}
.rd-search-row{display:flex;align-items:center;gap:8px;margin:10px 12px 4px}
.rd-search-row>.rd-search{margin:0;flex:1 1 auto;min-width:0}
.rd-search-add{width:46px;height:46px;flex-shrink:0;border-radius:12px;border:1px solid rgba(var(--theme-rgb,14,147,132),.32);background:var(--theme-accent-soft,#e9faf7);color:var(--theme-accent-dark,#08766a);display:grid;place-items:center;padding:0;cursor:pointer}
.rd-chips{display:flex;flex-wrap:wrap;gap:7px;padding:6px 12px 2px;flex-shrink:0}   /* wikkelen i.p.v. een tweede scroll-as (320px: 3 chips passen niet) */
.rd-chips button{height:44px;min-height:44px;border-radius:999px;background:#fff;border:1px solid var(--line,#e2e8f0);color:var(--text-secondary,#475467);font:inherit;font-size:13px;font-weight:600;padding:0 14px;white-space:nowrap;flex-shrink:0}
.rd-chips button.active{background:var(--theme-navy,#082f2d);border-color:var(--theme-navy,#082f2d);color:#fff;font-weight:700}
@media(min-width:721px){.rd-search{margin:0;max-width:520px}.rd-chips{padding:0}}

/* ── kaarten (desktop en mobiel) ── */
.rd-card{background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:14px}
.rd-card.navy{background:var(--theme-navy,#082f2d);border-color:transparent;color:#fff}
.rd-card.navy .rd-eyebrow{color:#9fc4bf}
.rd-eyebrow{color:var(--text-muted,#66758d);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.rd-big{font-size:30px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rd-action-card{background:#fff;border:1px solid var(--line,#e2e8f0);border-left:4px solid var(--theme-accent,#0e9384);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:18px}
.rd-action-card.warn{border-color:#f0c9a0;border-left-color:var(--status-warn,#b54708)}
.rd-action-card .rd-big{font-size:clamp(22px,8.5vw,32px);white-space:nowrap;min-width:0;text-align:right}
.rd-action-card>*{min-width:0}
.rd-quiet{display:flex;align-items:center;gap:14px;padding:13px 20px}
.rd-quiet .rd-quiet-mark{width:30px;height:30px;border-radius:999px;background:var(--surface-ok,#ecfdf3);color:var(--status-ok,#067647);display:grid;place-items:center;flex-shrink:0}

/* ── scanner-specifiek in het kit ── */
/* .rd-context-drawer is per 8 sep 2026 (#135) vervangen door het bereikvel (.scope-sheet): een uitklaplade
   met het rapportageblok erin was een tweede menu bovenop het scherm, geen keuze. Regels verwijderd omdat de
   markup niet meer bestaat. */
.rd-inline-actions{display:flex;gap:8px;padding:10px 12px 0;flex-wrap:wrap}
.rd-live-head{display:flex;align-items:flex-start;gap:11px}
.rd-live-thumb{border-radius:10px;flex-shrink:0}
.rd-live-head h2.rd-row-title{margin:0;letter-spacing:0}
.rd-row-title.big{font-size:15px;font-weight:800;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
.rd-secondary-row{display:flex;gap:8px;flex-wrap:wrap}
.rd-secondary-row .rd-pill{cursor:pointer}
.rd-secondary-row .rd-pill:disabled{opacity:.5;cursor:default}
.rd-session-row .rd-row-value strong small.inline{display:inline;color:var(--text-muted,#98a5b8);font-size:13px;font-weight:600}
.rd-primary-hint{color:var(--text-muted,#5f6f86);font-size:12px;font-weight:600;text-align:center;margin:0 0 8px;font-variant-numeric:tabular-nums}
.rd-empty{margin:0;padding:6px 16px 4px;color:var(--text-muted,#98a5b8);font-size:13px}
.rd-empty.ok{color:#067647;font-weight:700}
.rd-list+.rd-list{margin-top:7px}
.rd-list.quick-results{margin-top:6px}
.rd-camera+.rd-search{margin-top:10px}
.rd-page>.rd-list{margin-top:8px}
.rd-list .remaining-toggle{align-self:center;margin-top:2px;cursor:pointer}

/* ── sheets op de telefoon: veeggebaren (omlaag = sluiten, omhoog = schermvullend) ── */
.modal-grip{display:none}
@media(max-width:720px){
  .modal-backdrop{background:rgba(15,23,42,calc(.52 * var(--sheet-fade,1)))}
  .modal-sheet{transition:transform .22s cubic-bezier(.2,.8,.2,1);will-change:transform;touch-action:pan-y}
  .modal-sheet.dragging{transition:none}
  .modal-sheet.expanded,.modal-sheet.expanded.wide{height:calc(100dvh - env(safe-area-inset-top,0px));max-height:calc(100dvh - env(safe-area-inset-top,0px))!important}
  .modal-grip{display:block;width:40px;height:5px;border-radius:99px;background:#d5dde8;margin:6px auto 0;flex-shrink:0}
  .modal-header{touch-action:none;padding-top:4px}
  .mobile-more-sheet:before{display:none}   /* legacy grip (30-styles:16) — de Modal tekent er nu zelf één */
}

/* ── modals in het kit ── */
.modal-header h2{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0}
.modal-header p{margin:3px 0 0;font-size:13px;color:var(--text-muted,#66758d)}
.modal-sheet .editor-form label>span:first-child,.modal-sheet .form-field>span:first-child{font-size:12px;font-weight:700;color:var(--text-secondary,#475467);letter-spacing:.01em}
.modal-sheet .editor-form input:not([type=checkbox]):not([type=radio]),.modal-sheet .editor-form select,.modal-sheet .editor-form textarea{min-height:44px;border-radius:10px;border:1px solid var(--line,#e2e8f0);font-size:15px;padding:0 12px}
.modal-sheet .editor-form select{height:44px}
.modal-sheet .editor-form textarea{padding:10px 12px}
.modal-sheet .editor-form input:focus,.modal-sheet .editor-form select:focus,.modal-sheet .editor-form textarea:focus{border-color:var(--theme-accent,#0e9384);box-shadow:0 0 0 3px rgba(var(--theme-rgb,14,147,132),.18);outline:none}
.modal-sheet .form-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:6px}
.modal-sheet .form-actions .button,.modal-sheet .form-actions button{min-height:44px;border-radius:10px;font-weight:700}
.modal-sheet .form-actions .primary{min-width:160px}
@media(max-width:720px){
  .modal-sheet .form-actions{flex-direction:row;position:sticky;bottom:0;background:#fff;padding:8px 0 calc(2px + var(--safe-bottom,0px));margin-top:4px;border-top:1px solid var(--line,#e2e8f0)}
  .modal-sheet .form-actions .primary{flex:1 1 auto;min-height:50px;font-size:15px;border-radius:14px}
  .modal-sheet .form-actions .secondary{min-height:50px;border-radius:14px}
}

/* ── magazijnbalk op desktop: één slanke regel (de zijbalk heeft de magazijnkeuze al) ── */
@media(min-width:721px){
  .warehouse-scope-bar{border:0;background:transparent;padding:0 0 2px;border-radius:0;gap:6px}
  .warehouse-scope-head{gap:12px}
  .warehouse-scope-note{font-size:12.5px}
}

/* ── tablet (721–899px): desktopinhoud met de kit-tabbalk als navigatie (geen zijbalk); de balk was hier een losse, verticaal
   gestapelde lijst ── */
@media(min-width:721px) and (max-width:899px){
  .bottom-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;margin:0;border-radius:0;height:calc(74px + var(--safe-bottom,0px));padding:0 6px calc(10px + var(--safe-bottom,0px));align-items:center;background:#fff;border-top:1px solid var(--line,#e2e8f0);box-shadow:0 -1px 0 var(--line,#e2e8f0);z-index:60}
  .bottom-tabs button{min-height:0;gap:5px;padding:7px 0;margin:0 4px;border-radius:12px;border:0;background:transparent;box-shadow:none;font-size:11px;font-weight:600;color:var(--text-muted,#5f6f86);display:flex;flex-direction:column;align-items:center;justify-content:center}
  .bottom-tabs button.active{background:var(--theme-accent-soft,#e9faf7);color:var(--theme-accent,#0e9384);font-weight:700}
  .content{padding-bottom:calc(74px + var(--safe-bottom,0px) + 28px)}
  .topbar-title{display:block}
}
/* Let op bij wijzigen (nagemeten 8 sep 2026): `.product-image-editor` wordt maar op één plek gerenderd en
   staat daar altijd binnen `.compact-product-form`. Die regel is specifieker (twee klassen) en wint dus van
   het blok hieronder voor `display`, `align-items`, `gap`, `padding` én `text-align`. Wat hier nog écht werkt
   is `justify-content:center` op de knoppenrij en de kleinere `h3`; `flex-direction:column` is inert omdat de
   compacte regel `display:grid` zet, en `align-self:center` valt samen met de `align-items:center` van de
   ouder. Weghalen van het hele blok schuift de twee beeldknoppen naar links — gemeten, niet aangenomen. */
/* Productafbeelding-blok op de telefoon: beeld boven, tekst en knoppen daaronder op volle breedte —
   naast elkaar bleef er een kolom van ~150px over waarin elke zin in vijven brak. */
@media(max-width:480px){
  .product-image-editor{flex-direction:column;align-items:stretch;gap:12px;text-align:center}
  .product-image-preview-wrap{align-self:center}
  .product-image-editor .editor-preview{width:min(56vw,180px);height:min(56vw,180px)}
  .product-image-editor h3{font-size:16px}
  .product-image-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .product-image-actions>*{flex:1 1 140px;justify-content:center;white-space:nowrap}
}
/* 45b-redesign-tail.css — de STAART van 45-redesign.css (#112, 7 sep 2026).
   Uit 45-redesign.css gehaald toen dat bestand de 400-regelgrens raakte. Bewust de staart en niet een
   blok uit het midden: alleen zo blijft de volgorde van de regels exact zoals hij was, en verandert de
   cascade bij gelijke specificiteit niet. Direct ná 45 geladen. */
/* ── micro-interacties: sheet glijdt in, tabs en rijen geven tikfeedback ── */
@keyframes rd-sheet-in{from{opacity:0}to{opacity:1}}   /* alleen opacity: een verschuivende instap zet knoppen tijdelijk buiten beeld (v150) */
@media(max-width:720px){.modal-sheet:not(.dragging){animation:rd-sheet-in .22s cubic-bezier(.2,.8,.2,1)}}
@media(prefers-reduced-motion:reduce){.modal-sheet{animation:none!important;transition:none!important}}
.bottom-tabs button{transition:transform .12s ease,background-color .15s ease}
.bottom-tabs button:active{transform:scale(.94)}
button.rd-row{transition:background-color .15s ease,transform .1s ease}
@media(hover:hover){button.rd-row:hover{background:var(--surface-raised,#f8fafc);border-color:#d5dde8}}
button.rd-row:active{transform:scale(.995)}
.rd-primary{transition:transform .1s ease,box-shadow .15s ease}
/* zoekveld + filterchips blijven op de telefoon onder de kop staan terwijl de lijst scrolt */
@media(max-width:720px){.rd-sticky-tools{position:sticky;top:56px;z-index:6;background:var(--bg,#f7f9fc);padding-bottom:2px;box-shadow:0 6px 8px -8px rgba(15,23,42,.18)}}
/* body{overflow-x:hidden} maakt <body> een scrollcontainer die zelf niet scrolt → position:sticky in de pagina grijpt nooit.
   `clip` knipt hetzelfde af zonder scrollcontainer te worden (Chrome 90+, Safari 16+); oudere motoren houden hidden. */
@supports (overflow-x:clip){@media(max-width:899px){html,body{overflow-x:clip}}}

/* ── inloggen in het kit: het eerste scherm dat iemand ziet ── */
.login-shell{background:var(--bg,#f7f9fc)}
.login-card{border-radius:18px;border:1px solid var(--line,#e2e8f0);box-shadow:0 12px 40px rgba(15,23,42,.08);padding:28px}
.login-brand .brand-mark{background:var(--theme-navy,#082f2d);color:#fff;border-radius:12px}
.login-brand strong{font-size:17px;font-weight:800;letter-spacing:-.01em}
.login-card h1{font-size:26px;font-weight:900;letter-spacing:-.02em;margin:0 0 6px}
.login-card form label>span{font-size:12px;font-weight:700;color:var(--text-secondary,#475467)}
.login-card input{min-height:48px;border-radius:12px;border:1px solid var(--line,#e2e8f0);font-size:16px;padding:0 14px}
.login-card input:focus{border-color:var(--theme-accent,#0e9384);box-shadow:0 0 0 3px rgba(var(--theme-rgb,14,147,132),.18);outline:none}
.login-card .primary,.login-card button[type=submit]{min-height:52px;border-radius:14px;font-size:16px;font-weight:800;background:var(--theme-accent,#0e9384);border:0;box-shadow:0 4px 14px rgba(var(--theme-rgb,14,147,132),.3)}
.login-card .primary:active,.login-card button[type=submit]:active{transform:translateY(1px)}
.login-card p,.login-card small,.login-hint{color:var(--text-muted,#66758d);font-size:13px;line-height:1.5}
@media(max-width:720px){.login-shell{align-items:flex-end;padding:0}.login-card{width:100%;border-radius:22px 22px 0 0;padding:24px 20px calc(24px + var(--safe-bottom,0px));border-bottom:0}.login-card.loading{border-radius:22px 22px 0 0}}
/* Lege staat op lijstniveau (RdEmpty): icoon, titel, één zin, optioneel één actie. */
.rd-empty-state{display:grid;justify-items:center;text-align:center;gap:6px;padding:30px 20px 26px;color:var(--text-muted,#66758d)}
.rd-empty-icon{width:46px;height:46px;border-radius:15px;background:var(--surface-raised,#f1f5f9);display:grid;place-items:center;color:var(--theme-accent,#0e9384);margin-bottom:4px}
.rd-empty-state strong{color:var(--text-primary,#172033);font-size:15px;font-weight:800}
.rd-empty-state span{font-size:13px;line-height:1.45;max-width:36ch}
.rd-empty-state .rd-pill{margin-top:8px}
/* Focus zichtbaar in kit-kleur: één ring voor elk kit-bedieningselement (toetsenbord en schakelaar). */
.rd-chip:focus-visible,.rd-pill:focus-visible,.rd-primary:focus-visible,.rd-stepper button:focus-visible,.bottom-tabs button:focus-visible,button.rd-row:focus-visible,.rd-search:focus-within{outline:2px solid var(--theme-accent,#0e9384);outline-offset:2px}
.rd-search input:focus{outline:none}
/* Productafbeeldingen in kit-rijen: 48px miniatuur, rij blijft 66px (9px verticaal), beeld volledig zichtbaar. */
.rd-row-badge:has(.product-image-thumb){width:auto;height:auto;background:none;border:0;padding:0}
.rd-row:has(.product-image-thumb){padding-top:9px;padding-bottom:9px}
.rd-row .product-image-thumb{border-radius:11px}
/* Lightbox: schermvullend, beeld volledig zichtbaar, sluitknop 44px in de hoek. */
.rd-lightbox{position:fixed;inset:0;z-index:140;background:rgba(8,18,28,.94);display:grid;place-items:center;padding:24px;animation:rd-page-in .16s ease-out both;outline:none}
.rd-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;background:#fff}
.rd-lightbox-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;width:44px;height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.product-image-zoom{border:0;background:none;padding:0;cursor:zoom-in;border-radius:14px;display:block}
.product-image-preview-wrap{flex-shrink:0}
/* Telefoon: de hoofdknop van een lijstpagina blijft boven de tabbalk staan — de duimzone is er altijd, ook na 25 regels. */
@media(max-width:720px){.rd-page>.rd-primary-wrap{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:6;background:linear-gradient(to top,var(--surface,#f5f7fa) 62%,rgba(245,247,250,0));padding-top:14px}}
/* Actiepil in een lijstregel: op de telefoon een 44px-icoonknop (de productnaam is belangrijker dan het woord),
   vanaf 481px met tekst erbij. De toegankelijke naam blijft altijd volledig ("Verpakkingen: <product>"). */
.rd-icon-pill{gap:7px}
@media(max-width:480px){.rd-icon-pill{width:44px;min-width:44px;padding:0;justify-content:center}.rd-icon-pill-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.rd-lightbox-note{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;color:rgba(255,255,255,.72);font-size:12px;margin:0;padding:0 24px}
.rd-lightbox img:not([style*="display: none"])~.rd-lightbox-note{display:none}
/* Productafbeelding in het bewerkscherm: groot genoeg om te beoordelen (was 72px op de telefoon). */
.product-image-editor .editor-preview{width:clamp(96px,28vw,140px);height:clamp(96px,28vw,140px)}
/* Keuzevelden dragen de themakleur: een blauw systeemvinkje in een groene app leest als een fout onderdeel. */
input[type="radio"],input[type="checkbox"],progress,input[type="range"]{accent-color:var(--theme-accent,#0e9384)}
/* De schakelaarrij is een label: de hele rij is het trefvlak. Cursor en tekstselectie horen daarbij. */
label.switch-row{cursor:pointer;-webkit-tap-highlight-color:transparent}
label.switch-row:active{background:var(--surface-raised,#f8fafc)}
label.switch-row input{cursor:pointer}
/* ── UI-overhaul 7 sep 2026 · scanner (artboard mobiel-01) ─────────────────────────────────────────────
   De camera is het zwaartepunt van het scherm: een donkere kaart met een icoonvlak, twee regels tekst en
   niets anders. Vóór deze ronde was het een lichtgrijze kaart die visueel gelijk stond aan een lijstregel. */
.rd-camera{background:var(--ink-dark,#0f2a24);border:0;border-radius:var(--r-card,16px);padding:22px;display:flex;align-items:center;gap:18px;min-height:150px;color:#fff;position:relative;overflow:hidden}
.rd-camera::after{content:'';position:absolute;right:-40px;bottom:-70px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.04)}
.rd-camera-main{display:flex;align-items:center;gap:18px;flex:1 1 auto;background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0;z-index:1}
.rd-camera-icon{width:78px;height:78px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;flex-shrink:0}
.rd-camera strong{display:block;font-size:22px;font-weight:800;letter-spacing:-.01em;color:#fff}
.rd-camera span span{display:block;color:rgba(255,255,255,.68);font-size:13px;line-height:1.4;margin-top:4px}
.rd-camera-photo{position:absolute;right:16px;top:16px;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:2}
/* Bevestigingskaart: groene rand, naam groot, stepper + Boeken. Dit is de enige plek waar voorraad ontstaat. */
.rd-row.live.scanner-result-card{border:1.5px solid var(--accent,#0e9384);border-radius:var(--r-card,16px);padding:16px;flex-direction:column;align-items:stretch;gap:14px;min-height:0}
.rd-row.live .rd-live-head{display:flex;align-items:flex-start;gap:12px}
.rd-row.live .rd-row-title.big{font-size:19px;font-weight:800;line-height:1.2}
.rd-row.live .rd-row-sub{font-size:13px;color:var(--text-muted,#66758d);margin-top:3px}
.rd-row.live .rd-tag{background:var(--accent-soft,#e9faf7);color:var(--accent-dark,#0b6e63);font-size:11px;font-weight:800;letter-spacing:.06em;padding:5px 10px;border-radius:999px;flex-shrink:0}
.rd-row.live .rd-secondary-row{display:flex;gap:8px}
.rd-row.live .rd-secondary-row .rd-pill{flex:1 1 0;justify-content:center}
/* Camerakaart op maat van het artboard: 168px hoog, icoonvlak 78px, titel 22px, ademruimte eromheen. */
@media(max-width:720px){
  .rd-camera{margin:0 var(--page-pad,14px)}
  .rd-camera:not(.live) .rd-camera-icon{width:78px;height:78px}
  .mobile-scanner-page .rd-search{margin-top:12px}
  /* De vaste hoofdactie zweeft boven de lijst: geef de pagina onderaan ruimte zodat de laatste regel niet verdwijnt. */
  .mobile-scanner-page,.mobile-products-page,.mobile-stock-page,.modern-counts-page{padding-bottom:calc(var(--h-primary,56px) + 26px)}
}
/* Aandacht in een lijstregel (ontwerp mobiel-04/05/09): amber tint, amber rand, amber onderregel — nooit alleen tekst. */
.rd-row.warn,.rd-row-attention{background:var(--attention-soft,#fff6ed);border-color:var(--attention-border,#f0c9a0)}
.rd-row.warn .rd-row-sub,.rd-row-attention .rd-row-sub{color:var(--attention,#b54708);font-weight:700}
.rd-row.warn .rd-row-value strong,.rd-row-attention .rd-row-value strong{color:var(--attention,#b54708)}
/* Getal rechts met eenheid eronder (ontwerp: "2.200" boven "stuk"), tabulair zodat kolommen uitlijnen. */
.rd-row-value{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0}
.rd-row-value strong{font-size:21px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rd-row-value small{font-size:12px;color:var(--text-muted,#66758d);font-weight:600}
/* ── UI-overhaul 7 sep 2026 · paginakop op desktop (artboard desktop-01/02/03) ────────────────────────
   Op de telefoon draagt de donkere bovenbalk de titel, dus daar blijft de paginakop verborgen. Op desktop
   draagt de bovenbalk het magazijnbereik en hoort de titel in de content: 30px, met één zin eronder en de
   acties rechts op dezelfde hoogte. Zonder deze regel had de desktop sinds vandaag helemaal geen titel meer. */
@media(min-width:721px){
  .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:var(--gap-section,20px)}
  .page-head h1{display:block;font-size:var(--fs-h1-lg,30px);font-weight:900;letter-spacing:-.02em;line-height:1.15;margin:0;color:var(--text-primary,#172033)}
  .page-head p{margin:6px 0 0;color:var(--text-secondary,#475467);font-size:14px;line-height:1.45;max-width:74ch}
  .page-head>div:first-child{min-width:0}
}
/* Ontbrekend artikelnummer: alleen het eerste deel van de onderregel is amber. Zo blijft de uitzondering zichtbaar
   zonder dat driekwart van de lijst oranje wordt — dan zegt de kleur niets meer. */
.rd-row-missing-number .rd-row-sub{color:var(--text-muted,#66758d)}
.rd-row-missing-number .rd-row-sub::first-line{color:inherit}
.rd-row-missing-number .rd-row-sub{background:linear-gradient(transparent,transparent)}
/* ── Meer-menu (artboard mobiel-10) ───────────────────────────────────────────────────────────────────
   Accountkaart bovenaan met de rol en de magazijnen, daaronder WERK en SYSTEEM. Elk item heeft een mint
   icoonvlak, een titel, een uitlegregel en rechts een amber telbadge als er iets openstaat. */
.mobile-more-item .rd-row-badge{width:46px;height:46px;border-radius:14px;background:var(--accent-soft,#e9faf7);color:var(--accent-dark,#0b6e63);border:0}
.mobile-more-item{min-height:76px;padding:13px 14px}
.mobile-more-item .rd-row-title{font-size:16px;font-weight:800}
.mobile-more-item .rd-row-sub{font-size:13px;line-height:1.4}
/* Specificiteit, niet volgorde: `.rd-pill.warn` (twee klassen) won hier van `.mobile-more-badge` (één) voor
   `color`, terwijl het vlak wél doorkwam. Resultaat: #b54708 op #b54708 — de teller was een oranje vlek
   zonder cijfer (gemeten 8 sep 2026 op de iPhone). Gelijke specificiteit én later = wint allebei. */
.mobile-more-badge,.rd-pill.mobile-more-badge{background:var(--attention,#b54708);color:#fff;border-color:transparent;font-weight:800;min-width:34px;justify-content:center}
.mobile-account-card{min-height:80px;padding:14px}
.mobile-account-card .auth-avatar{width:52px;height:52px;font-size:17px}
.mobile-more-sheet .rd-section,.mobile-more-sheet .rd-eyebrow{font-size:var(--fs-eyebrow,11px);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#66758d)}
/* Scanwachtrij: elke gescande regel is een kaart met stepper; onderaan één boekknop die zegt hoeveel er wacht. */
.scanner-queue{gap:10px}
.scanner-queue .rd-queue-remove{width:40px;height:40px;border-radius:11px;border:1px solid var(--card-border,#e6ebf2);background:#fff;display:grid;place-items:center;color:var(--text-muted,#66758d);flex-shrink:0;cursor:pointer}
.scanner-queue-book{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));padding-top:6px}
.scanner-queue-book .rd-primary{box-shadow:0 8px 24px rgba(16,24,40,.14)}
/* ── Meer kleur waar kleur betekenis heeft (7 sep 2026) ───────────────────────────────────────────────
   De app was grijs met accent alleen in knoppen. Nu draagt het thema ook de actieve filterchip, de locatiebadge en
   de kolomkop van een tabel. Geen decoratie: elk van de drie zegt iets (dit filter staat aan, dit is een locatie,
   hier begint een tabel). De rest blijft rustig — kleur werkt alleen als hij schaars is. */
.rd-chips button[aria-pressed="true"],.status-filter button.active,.pill.on{
  background:var(--theme-accent,#0e9384);border-color:transparent;color:#fff}
.rd-chips button[aria-pressed="true"] .rd-chip-count,.status-filter button.active .count{color:rgba(255,255,255,.82)}
.rd-row-badge:not(.warn):not(.accent){background:var(--theme-accent-soft,#e9faf7);color:var(--theme-accent-dark,#0b6e63)}
.product-table thead th,.op-desk-table thead th,.modern-stock-table thead th{background:color-mix(in srgb,var(--theme-accent,#0e9384) 5%,#fff)}
.rd-section .rd-section-action,.text-action{color:var(--theme-accent-dark,#0b6e63)}

/* #131: `QuantityReasonModal` kent een destructieve variant (`danger:true` → `.primary.danger`) en twee
   schermen geven die door, maar er stond nergens een regel voor — een definitieve verwijdering zag er
   dus uit als een gewone opslaan-knop, in de accentkleur. `.app-shell .primary` (twee klassen, later in
   de cascade) won van een kale `.primary.danger`; daarom hier, met dezelfde voorvoegselklasse erbij. */
.app-shell .primary.danger,.primary.danger{background:var(--danger,#d92d20);border-color:var(--danger,#d92d20);color:#fff;box-shadow:0 4px 14px rgba(217,45,32,.28)}
.app-shell .primary.danger:hover:not(:disabled){background:#b42318;border-color:#b42318}
.app-shell .primary.danger:active{background:#912018}

@media(max-width:720px){
/* DESIGN-SYSTEM §19 schrijft voor de Scanner een "compacte band" voor; gebouwd stond hier een
   hero-kaart van 168px = 24% van een telefoonscherm, voor een knop die je één keer per dienst
   indrukt. Gevolg (gemeten 8 sep 2026): 'Laatste scans' begon op y=731 in een venster van 714px —
   volledig onder de vouw — en de zojuist gescande regel op y=489. Nu een band van 64px; dat scheelt
   104px, en die gaan naar de lijst waar je de hele dag naar kijkt. Draait de camera (.live), dan
   houdt het beeld zijn eigen verhouding: dáár is de hoogte wél het werk. */
/* `height` erbij: de kit zet `height:118px` en daar wint een `min-height` niet van. */
.rd-camera:not(.live){height:auto;min-height:64px;padding:8px 10px;gap:10px;margin:0 var(--page-pad,14px)}
.rd-camera:not(.live) .rd-camera-icon{width:40px;height:40px;border-radius:11px}
.rd-camera:not(.live) .rd-camera-icon svg{width:20px;height:20px}
.rd-camera:not(.live) .rd-camera-main{gap:11px}
.rd-camera:not(.live) .rd-camera-main strong{font-size:15px;line-height:1.2}
/* De ondertitel zei "Of zoek hieronder op naam of code" terwijl het zoekveld er direct onder staat. */
.rd-camera:not(.live) .rd-camera-main strong+span{display:none}
.rd-camera.live{margin:0 var(--page-pad,14px)}
}

@media(max-width:720px){
  /* Statusstrook: de vervanger van de bovenbalk. Verschijnt alleen bij offline, wachtrij of fout — daarom
     mag hij opvallen. Sticky, zodat hij tijdens het scrollen zichtbaar blijft; dat is precies wanneer je
     wilt weten dat er iets níet is verstuurd. */
  /* 9 sep 2026 (#143): de strook stond `sticky` BOVEN de inhoud. Verscheen hij, dan schoof alles 43px
     omlaag en compenseerde de browser dat met een sprong in de scrollpositie -- een pagina die opspringt
     zonder dat er ergens een scrollTo staat. Een drempel haalt de flits eruit (#142), maar zolang hij in
     de layout meedoet blijft de sprong mogelijk. Daarom staat hij nu VAST boven de tabbalk: hij overlapt,
     hij duwt niet, en er kan per definitie niets meer verschuiven. Onderaan omdat dat de duimzone is en
     omdat de bovenkant al de scope-regel draagt. */
  .mobile-status-strip{position:fixed;left:0;right:0;bottom:calc(74px + env(safe-area-inset-bottom,0px));
    z-index:41;display:flex;justify-content:flex-end;align-items:center;
    gap:8px;padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px;
    background:rgba(255,255,255,.92);border-bottom:1px solid var(--line,#e2e8f0)}
  @supports (backdrop-filter:blur(1px)){.mobile-status-strip{-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)}}
  .mobile-status-strip .topbar-right{display:flex;align-items:center;gap:8px;max-width:100%}
  /* In de bovenbalk moest de tekst in 65px passen, vandaar de compacte variant ('Offline'). De strook is
     zo breed als het scherm en verschijnt alleen als er iets aan de hand is — daar hoort de hele zin. */
  .mobile-status-strip .sync-text-compact{display:none}
  .mobile-status-strip .sync-text-full{display:inline}
  /* Zonder de bovenbalk begint de inhoud bovenaan; de contextbalk plakt daar nu zelf. */
  .content>.rd-page>.rd-scope{position:sticky;top:0;z-index:30}
  /* (de scope-regel hoeft geen ruimte meer te laten: de strook staat vast en duwt niets) */
  /* De tellingkop plakte onder de verdwenen balk. */
  .count-detail-mobile-nav.rd-scope{top:0}
}

@media(max-width:720px){
  /* Zonder bovenbalk begint de inhoud écht bovenaan — en dan loopt de contextbalk onder de Dynamic Island
     of de notch door. De balk ving die veilige zone eerder op; nu doet de pagina dat zelf. */
  .app-shell .content{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .content>.rd-page>.rd-scope{padding-top:calc(8px + env(safe-area-inset-top,0px))}

  /* Een band leest van links naar rechts: icoon, dan het woord. Gecentreerd zweefde het label los. */
  .rd-camera:not(.live) .rd-camera-main{justify-content:flex-start;text-align:left}
}

/* 8 sep 2026: de synchronisatiechip in de mobiele statusstrook is nu een knop (opnieuw verbinden) i.p.v.
   alleen tekst; hij erft daarom expliciet de omliggende typografie terug van de UA-knopstijl. De live-regio
   zit binnenin, zodat de aankondiging blijft werken nu role="status" niet meer op het buitenste element staat. */
.mobile-status-strip .sync-chip{-webkit-appearance:none;appearance:none;font:inherit;font-size:11px;font-weight:750;
  cursor:pointer;min-height:32px;text-align:left}
.mobile-status-strip .sync-chip .sync-live{display:flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ═══ Glaslaag (8 sep 2026, #135) ═══════════════════════════════════════════════════════════════════
   Alleen vlakken waar inhoud ONDERDOOR schuift krijgen glas. Dat is de hele regel: glas is er om te
   laten zien dát er iets onder ligt, niet om mooi te zijn. Een lijstregel, een kaart of een invoerveld
   heeft niets onder zich behalve de pagina-achtergrond — daar kost doorschijnendheid leesbaarheid en
   levert het niets op. Elke regel hieronder zet eerst een dekkende kleur en pas daarna, binnen
   @supports, de doorschijnende variant: op een engine zonder backdrop-filter is de uitkomst exact de
   stand van vóór deze ronde. ─────────────────────────────────────────────────────────────────────── */
@media(max-width:720px){
  .bottom-tabs{background:var(--glass-solid,#fff);border-top:1px solid var(--glass-line,rgba(16,24,40,.08));box-shadow:var(--glass-shadow,0 -1px 0 rgba(16,24,40,.05))}
  /* Het verloop en het glas zitten in een ::before ACHTER de knop, niet op de omhulling zelf. Mijn eerste
     versie zette het masker op de omhulling en dat masker geldt ook voor haar kinderen: de hoofdknop werd
     zelf doorschijnend en je las de lijstregel dwars door 'Volgende scan' heen (gezien op het toestel). */
  .rd-page>.rd-primary-wrap{background:transparent;isolation:isolate}
  .rd-page>.rd-primary-wrap::before{content:'';position:absolute;inset:-16px 0 0;z-index:-1;pointer-events:none;
    background:linear-gradient(to top,var(--glass-solid,#fff) 55%,rgba(255,255,255,0))}
  .content>.rd-page>.rd-scope{background:var(--glass-solid,#fff)}
  .rd-sticky-tools{background:var(--glass-solid,#fff)}
  .mobile-status-strip{background:var(--glass-bg-strong,rgba(255,255,255,.86))}
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media(max-width:720px){
    /* De tabbalk draagt labels die altijd leesbaar moeten zijn en ligt over de drukste inhoud van het scherm;
       daar is de bijna-dekkende variant de juiste. Op .82 las je de kop van een lijstregel dwars door de
       labels heen -- gemeten op het toestel, niet geschat: headless WebKit tekent `backdrop-filter` niet mee
       in een schermafdruk, dus de doorschijnendheid moet je op de simulator beoordelen. */
    .bottom-tabs{background:var(--glass-bg-strong,rgba(255,255,255,.95));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
    .content>.rd-page>.rd-scope,.rd-sticky-tools{background:var(--glass-bg,rgba(255,255,255,.72));
      -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
  }
}
/* De plakstapel op de telefoon, van boven naar beneden: statusstrook (alleen als er iets te melden is) →
   scope-regel → gereedschapsregel (zoeken + filterchips). Elke laag plakt exact tegen de onderkant van de
   vorige; een kier laat inhoud ertussendoor schuiven en een overlap maakt bij glas een donkere band. De
   veilige zone zit in precies één laag tegelijk: is de strook er, dan draagt zij hem (en houdt de scope-regel
   een vaste 61px); is zij er niet, dan draagt de scope-regel hem — vandaar de env() in beide varianten.
   De gereedschapsregel hing tot #135 nog op 56px: de hoogte van de bovenbalk die sinds #134 niet meer bestaat. */
@media(max-width:720px){
  .rd-sticky-tools{top:calc(60px + env(safe-area-inset-top,0px))}

}

/* ═══ Bereikvel (#135) ═══════════════════════════════════════════════════════════════════════════════
   Een keuze is een lijst, geen formulier: geen label, geen systeemkeuzelijst (die op iOS zijn eigen wiel
   opent en het vel eronder verstopt) en geen uitlegzin — het scherm eronder toont het antwoord al. */
.scope-sheet .rd-list{margin:0}
.scope-sheet .rd-section{margin-top:14px}
.scope-sheet .rd-section:first-child{margin-top:2px}
.rd-choice{gap:12px}
.rd-choice .rd-row-title{font-weight:750}
/* De gekozen regel had een accentring. Die is niet te onderscheiden van de focusring die het vel bij het
   openen op de eerste regel zet — op het toestel leek het alsof er twee dingen gekozen waren. Gekozen is nu
   een vlak (tint + vinkje), focus blijft een ring. Twee verschillende dingen, twee verschillende vormen. */
.rd-choice.is-chosen{border-color:var(--accent,#1267e8);background:var(--surface-info,#eaf3ff)}
/* De tabbalk tekent over een vel heen (dat was al zo vóór deze ronde, en het houdt de balk bereikbaar).
   Het vel moet er dus onderuit kunnen: ruimte onderaan zodat de laatste regel niet half verdwijnt. */
@media(max-width:720px){.scope-sheet{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}}
.rd-choice-mark{flex:0 0 auto;width:24px;height:24px;border-radius:999px;border:1.5px solid var(--line,#e2e8f0);
  display:grid;place-items:center;color:transparent}
.rd-choice-mark.on{background:var(--accent,#1267e8);border-color:var(--accent,#1267e8);color:#fff}

/* ═══ Icoonbediening op de telefoon (#135) ═══════════════════════════════════════════════════════════
   `pager-button`, `icon-button` en `ui-select-trigger` stammen uit de tijd vóór de kit: 8/10px-radii en
   een eigen randkleur, naast kit-elementen van 12–14px. Ze doen precies wat ze moeten doen, dus ze
   blijven — ze krijgen alleen de maat en de vorm van de rest. */
@media(max-width:720px){
  .pager-button,.icon-button,.ui-select-trigger{min-height:44px;border-radius:12px;
    border:1px solid var(--line,#e2e8f0);background:var(--surface,#fff);color:var(--text-secondary,#475467)}
  .pager-button,.icon-button{width:44px;min-width:44px;padding:0;justify-content:center}
  .ui-select-trigger{padding:0 12px;font-weight:700;color:var(--text-primary,#172033)}
  .pager-button[disabled],.icon-button[disabled]{opacity:.4}
}

/* ═══ Regel met één actie erin (#135) ════════════════════════════════════════════════════════════════
   Het potlood stond als losse cirkel náást de kaart: de regel brak af op 326px, de knop zweefde ernaast
   en de productnaam werd afgekapt om ruimte te maken voor lucht. Het blijven twee losse knoppen (een knop
   in een knop mag niet), maar ze lezen nu als één kaart met een actie aan het eind. */
@media(max-width:720px){
  .rd-split{gap:0;align-items:stretch}
  .rd-split>.rd-row{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}
  .rd-split>.rd-icon-pill{width:56px;min-width:56px;height:auto;align-self:stretch;padding:0;
    border-radius:0 12px 12px 0;border:1px solid var(--line,#e2e8f0);border-left:1px solid var(--line,#e2e8f0);
    background:var(--surface,#fff);color:var(--text-secondary,#475467);justify-content:center}
}

/* ═══ Aanraakterugkoppeling (#135) ═══════════════════════════════════════════════════════════════════
   Een glasoppervlak zonder indrukgedrag voelt dood: de vinger bedekt de knop, dus de bevestiging moet
   uit de rand van het element komen. 0.98 is met opzet klein — groter leest als een animatie i.p.v. een
   reactie. Respecteert prefers-reduced-motion. */
@media(max-width:720px){
  .rd-row,.rd-chip,.rd-pill,.rd-primary,.rd-summary-fold,.pager-button,.icon-button,.bottom-tabs button{
    transition:transform .09s ease,background-color .12s ease}
  .rd-row:active,.rd-chip:active,.rd-pill:active,.rd-summary-fold:active,.pager-button:active,.icon-button:active{transform:scale(.985)}
  .rd-primary:active{transform:scale(.99)}
  .bottom-tabs button:active{transform:scale(.94)}
}
@media(prefers-reduced-motion:reduce){
  .rd-row,.rd-chip,.rd-pill,.rd-primary,.rd-summary-fold,.pager-button,.icon-button,.bottom-tabs button{transition:none}
  .rd-row:active,.rd-chip:active,.rd-pill:active,.rd-primary:active,.rd-summary-fold:active,.pager-button:active,.icon-button:active,.bottom-tabs button:active{transform:none}
}

/* ═══ Reikwijdte van een instelling (#136) ═══════════════════════════════════════════════════════════
   Een schakelaar moet zeggen wie hij raakt. "Piep bij scan" stond op een kaart die drie keer "op dit
   apparaat" zei en zette de piep uit op élke telefoon in béide vestigingen; niemand kon dat zien. Twee
   badges, twee kleuren, één regel: grijsblauw = alleen dit toestel, accent = iedereen. */
.scope-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.01em;border:1px solid transparent;white-space:nowrap;
  vertical-align:middle;margin:0 0 2px;
  /* `.manage-card` is een grid: een inline-flex kind rekt zonder dit alsnog op tot volle kolombreedte en
     leest dan als een balk in plaats van een label. */
  width:fit-content;max-width:100%;justify-self:start;align-self:start}
.scope-badge.device{background:var(--surface-sunken,#f2f4f7);color:var(--text-secondary,#475467);border-color:var(--line,#e2e8f0)}
.scope-badge.company{background:var(--surface-info,#eaf3ff);color:var(--accent-dark,#0b4fa8);border-color:rgba(18,103,232,.24)}
.card-scope-note{margin:2px 0 10px;color:var(--text-muted,#5f6f86);font-size:12px;line-height:1.4}
@media(max-width:720px){.scope-badge{margin-left:0;margin-top:2px}}

/* ═══ Drie meldingen van de gebruiker, 9 sep 2026 (#137) ═════════════════════════════════════════════

   1. "pagina is niet gecentreerd, left shifted". Gemeten op 402px: de Scannerpagina liep van 0 tot 378 en
   liet 24px dood rechts staan; elke andere tab liep netjes tot 402. `.rd-page` bloedt met
   `margin:-14px calc(50% - 50vw)` bewust uit de padding van `.content` om schermbreed te worden, maar
   `.mobile-scanner-page` zat in twee remmen in 00-styles.css: `{min-width:0;max-width:100%}` en
   `{width:100%}`. Beide 100%'s zijn de inhoudsbreedte van de OUDER (378), dus de negatieve marges trokken
   het blok wel naar links maar mochten het niet breder maken -- vandaar precies 24px dood aan de rechterkant.
   `width:auto` laat de marges hun werk doen en `max-width:100vw` houdt de overloopvanger overeind: nooit
   breder dan het scherm. Alleen voor de pagina zelf; `.scanner-primary` en `.count-session-panel` uit die
   regel blijven ongemoeid. */
@media(max-width:720px){.content>.rd-page{width:auto;max-width:100vw}}

/* 2. "is niet rond". De badge in het Meer-vel was 34 breed en 40 hoog: bij één cijfer een staande ovaal.
   Een telling van drie cijfers mag wél uitgroeien tot een pil, maar één cijfer hoort een cirkel te zijn,
   dus de minimale breedte is gelijk aan de hoogte in plaats van 34. */
.rd-pill.mobile-more-badge{height:28px;min-height:28px;min-width:28px;padding:0 9px;font-size:12px;line-height:1}

/* 3. De paginagrootte-keuzelijst tekende dwars over de plakkende hoofdknop. `.ui-select-menu` had
   `z-index:8` en de knop `z-index:6`, dus de dichte keuzelijst won. Simpelweg de knop hoger zetten lost
   het niet op: de popover van die keuzelijst zit ín `.ui-select-menu` en zou dan óók onder de knop
   verdwijnen. Met `z-index:auto` maakt de keuzelijst geen eigen stapelcontext meer: dicht valt hij terug
   in de normale volgorde (onder de knop), en open telt de `z-index:120` van de popover zelf weer op
   paginaniveau (boven de knop). */
.ui-select-menu{z-index:auto}
@media(max-width:720px){.rd-page>.rd-primary-wrap{z-index:10}}

/* De vaste strook overlapt de onderkant van de pagina; de plakkende hoofdknop schuift er daarom net
   boven zodra de strook zichtbaar is. Dit is de enige plek die iets van de strook hoeft te weten. */
@media(max-width:720px){
  .mobile-status-strip{padding:7px 12px;border-top:1px solid var(--glass-line,rgba(16,24,40,.08));border-bottom:0;
    box-shadow:0 -1px 0 rgba(16,24,40,.05)}
  body:has(.mobile-status-strip) .rd-page>.rd-primary-wrap{bottom:calc(117px + env(safe-area-inset-bottom,0px))}
}
/* 46-motion.css — Beweging met betekenis (DESIGN-SYSTEM §102). Drie doelen, niets ernaast:
   oriëntatie (waar kom ik binnen), feedback (wat heb ik zojuist gedaan) en voortgang (hoe ver ben ik).
   Alleen transform/opacity/kleur, nooit langer dan ~300ms behalve de ademende camera-uitnodiging, en
   op paginaniveau alleen opacity: een pagina die 6px verschoven binnenkomt laat knoppen en metingen
   tijdens de intrede liegen. Reduced motion: 10-styles.css zet globaal elke animatie- en
   transitieduur op ~0 — deze laag voegt daar niets aan toe en heeft dus geen eigen !important nodig. */
@keyframes rd-page-in{from{opacity:0}to{opacity:1}}
@keyframes rd-row-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes rd-tick{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes rd-flash{0%{background:var(--theme-accent-soft,#e9faf7);border-color:var(--theme-accent,#0e9384)}100%{background:#fff;border-color:var(--line,#e2e8f0)}}
@keyframes rd-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes rd-ring-in{from{--rd-ring-pct:0}}
@property --rd-ring-pct{syntax:'<number>';inherits:false;initial-value:0}
/* Oriëntatie: een pagina komt rustig binnen, lijstregels volgen elkaar op (max. acht, daarna staan ze er gewoon). */
.content>.rd-page{animation:rd-page-in .16s ease-out both}
.rd-list>.rd-row{animation:rd-row-in .22s cubic-bezier(.2,.7,.2,1) both}
.rd-list>.rd-row:nth-child(2){animation-delay:30ms}.rd-list>.rd-row:nth-child(3){animation-delay:60ms}.rd-list>.rd-row:nth-child(4){animation-delay:90ms}
.rd-list>.rd-row:nth-child(5){animation-delay:120ms}.rd-list>.rd-row:nth-child(6){animation-delay:150ms}.rd-list>.rd-row:nth-child(7){animation-delay:180ms}.rd-list>.rd-row:nth-child(8){animation-delay:210ms}
/* Feedback: een getal dat verandert tikt even aan (de cel wordt opnieuw gemount op zijn waarde), de
   live-rij licht op na een herkende scan, het actieve tabblad-icoon bevestigt de keuze. */
.rd-summary strong,.rd-big{transform-origin:right center;animation:rd-tick .26s ease-out}
.rd-stepper-value{transform-origin:center;animation:rd-tick .26s ease-out}
.rd-list>.rd-row.live{animation:rd-row-in .22s cubic-bezier(.2,.7,.2,1) both,rd-flash .9s ease-out both}
.bottom-tabs button.active svg{animation:rd-tick .24s ease-out}
/* Voortgang: ringen vullen zich vanaf nul en lopen mee bij verandering; voortgangsbalken glijden. */
.rd-ring{animation:rd-ring-in .7s cubic-bezier(.2,.7,.2,1) both;transition:--rd-ring-pct .45s ease-out}
.rd-page .progress-track>span{transition:width .45s cubic-bezier(.2,.7,.2,1)}
/* Uitnodiging: een camera die uit staat ademt heel licht — het enige dat langer duurt dan 300ms. */
.rd-camera:not(.live) .rd-camera-icon{display:inline-grid;animation:rd-breathe 3.2s ease-in-out infinite}
/* Desktop met een muis: rijen en actiekaarten komen 1px omhoog onder de cursor, nooit tijdens een klik.
   `button.rd-row` staat er expliciet bij: de legacy-regel `button.rd-row{transition}` (0,1,1) zou anders winnen. */
@media(hover:hover) and (pointer:fine){
  .rd-row,button.rd-row,.rd-desk-actions button,.dashboard-kpi-button{transition:transform .14s ease,box-shadow .14s ease,background-color .15s ease,border-color .15s ease}
  .rd-row:hover:not(:active),button.rd-row:hover:not(:active),.rd-desk-actions button:hover:not(:active){transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,24,40,.07)}
}
/* Grafieken komen op uit hun nullijn (§102 voortgang): staven groeien, horizontale balken schuiven uit, de ring
   vult vanaf nul. Alleen transform en stroke — geen layout — en de globale reduced-motion-regel zet alles stil. */
@keyframes rd-bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rd-hbar-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rd-bar i.up{transform-origin:bottom;animation:rd-bar-grow .5s cubic-bezier(.2,.7,.2,1) both}
.rd-bar i.down{transform-origin:top;animation:rd-bar-grow .5s cubic-bezier(.2,.7,.2,1) both}
.rd-bar:nth-child(2) i{animation-delay:20ms}.rd-bar:nth-child(3) i{animation-delay:40ms}.rd-bar:nth-child(4) i{animation-delay:60ms}
.rd-bar:nth-child(5) i{animation-delay:80ms}.rd-bar:nth-child(6) i{animation-delay:100ms}.rd-bar:nth-child(7) i{animation-delay:120ms}
.rd-bar:nth-child(8) i{animation-delay:140ms}.rd-bar:nth-child(9) i{animation-delay:160ms}.rd-bar:nth-child(10) i{animation-delay:180ms}
.rd-bar:nth-child(n+11) i{animation-delay:200ms}
.rd-hbar-track i,.op-mini-bar i{transform-origin:left;animation:rd-hbar-grow .55s cubic-bezier(.2,.7,.2,1) both}
.rd-hbar:nth-child(2) .rd-hbar-track i{animation-delay:60ms}.rd-hbar:nth-child(3) .rd-hbar-track i{animation-delay:120ms}
.rd-hbar:nth-child(4) .rd-hbar-track i{animation-delay:180ms}.rd-hbar:nth-child(n+5) .rd-hbar-track i{animation-delay:240ms}
.rd-spark-line,.rd-spark-area{animation:rd-page-in .5s ease-out both}
/* 47-charts.css — datavisualisaties (DESIGN-SYSTEM §104). Hoogte via custom property zodat een kaart die zelf zet;
   kleuren via de thematokens, de rode "eraf"-tint bewust zacht zodat de accentkleur "erbij" de blik leidt. */
.rd-spark{display:block;flex-shrink:0}.rd-spark-line{fill:none;stroke:var(--theme-accent,#0e9384);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.rd-spark-area{fill:rgba(var(--theme-rgb,14,147,132),.16)}
.rd-spark.warn .rd-spark-line{stroke:var(--status-warn,#b54708)}.rd-spark.warn .rd-spark-area{fill:rgba(181,71,8,.14)}
.rd-spark.plain .rd-spark-line{stroke:#98a5b8}.rd-spark.plain .rd-spark-area{fill:rgba(152,165,184,.16)}
.navy .rd-spark-line{stroke:#5fd4a8}.navy .rd-spark-area{fill:rgba(95,212,168,.22)}
.rd-bars{display:flex;flex-direction:column;gap:6px;min-width:0}
.rd-bars-plot{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;height:var(--rd-bars-h,120px)}
.rd-bar{display:grid;grid-template-rows:1fr 1fr;min-width:0;position:relative}
.rd-bar::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line,#e2e8f0)}
.rd-bar i{display:block;border-radius:3px;min-height:0;position:relative}
.rd-bar i.up{align-self:end;background:var(--theme-accent,#0e9384)}.rd-bar i.down{align-self:start;background:#f2b8b5}
.rd-bar.now i.up{background:#0b6e63}.rd-bar.now::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--theme-accent,#0e9384)}
.rd-bars-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted,#66758d)}
.rd-hbars{display:flex;flex-direction:column;gap:10px}
.rd-hbar{display:grid;gap:5px;min-width:0}
.rd-hbar-label{display:flex;justify-content:space-between;gap:8px;min-width:0;font-size:13px}
.rd-hbar-label span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary,#172033);font-weight:600}
.rd-hbar-label strong{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:800}
.rd-hbar-track{height:8px;border-radius:999px;background:var(--surface-raised,#f1f5f9);overflow:hidden}
.rd-hbar-track i{display:block;height:100%;border-radius:999px;background:var(--theme-accent,#0e9384);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.rd-hbar.navy .rd-hbar-track i{background:#0f2a3a}.rd-hbar.warn .rd-hbar-track i{background:var(--status-warn,#b54708)}.rd-hbar.plain .rd-hbar-track i{background:#98a5b8}
.rd-donut{display:flex;align-items:center;gap:16px}
.rd-donut-wrap{position:relative;display:grid;place-items:center;flex-shrink:0}
.rd-donut svg{display:block;transform:rotate(-90deg)}
.rd-donut circle{fill:none;stroke-width:10;transition:stroke-dasharray .6s cubic-bezier(.2,.7,.2,1)}.rd-donut circle.track{stroke:var(--surface-raised,#eef2f6)}
.rd-donut circle.accent{stroke:var(--theme-accent,#0e9384)}.rd-donut circle.warn{stroke:var(--status-warn,#b54708)}.rd-donut circle.plain{stroke:#98a5b8}.rd-donut circle.navy{stroke:#0f2a3a}
.rd-donut-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.rd-donut-center strong{display:block;font-size:20px;font-weight:900;line-height:1}.rd-donut-center small{font-size:11px;color:var(--text-muted,#66758d)}
.rd-donut-legend{display:flex;flex-direction:column;gap:6px;font-size:13px;min-width:0}
.rd-donut-legend span{display:flex;align-items:center;gap:8px;white-space:nowrap}.rd-donut-legend i{width:10px;height:10px;border-radius:3px;background:var(--theme-accent,#0e9384);flex-shrink:0}
.rd-donut-legend i.warn{background:var(--status-warn,#b54708)}.rd-donut-legend i.plain{background:#98a5b8}.rd-donut-legend i.navy{background:#0f2a3a}
.rd-legend i.down{background:#f2b8b5}
/* Inzicht-panelen (dashboard): vier kaarten die meegroeien; op de telefoon één compacte kaart. */
.rd-desk-insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.rd-insight{padding:18px 22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.rd-insight-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0}
.rd-insight-head strong{font-size:15px;font-weight:800}.rd-insight-head span{font-size:12px;color:var(--text-muted,#66758d);white-space:nowrap}
.rd-fact-card .rd-spark{align-self:flex-end;margin-top:auto}
.rd-phone-insight{margin:0 12px 12px;padding:14px 16px}
/* Legenda (ook op de telefoon, los van de dashboard-desktopregels) en labels die nooit hun naam verliezen. */
.rd-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--text-muted,#66758d)}
.rd-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rd-legend i{width:9px;height:9px;border-radius:2.5px;background:var(--theme-accent,#0e9384);flex-shrink:0}
.rd-hbar-label{flex-wrap:wrap}.rd-hbar-label span{flex:1 1 96px}.rd-hbar-label strong{margin-left:auto}
/* 48-result-bar.css — de resultaatregel boven elke gefilterde lijst (7 sep 2026, #105).
   Eigen module omdat 45-redesign.css de 400-regelgrens raakte; de kit blijft de kit. */
/* RdResultBar — "waarom zie je déze rijen" (7 sep 2026, #105). Zonder voorwaarden één rustige zin, met
   voorwaarden een telling plus wisbare chips. Bewust géén kaart: het is een bijschrift bij de lijst. */
.rd-result-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding:0 2px}
.rd-result-bar.quiet{margin:0 0 10px;font-size:12.5px;color:var(--text-muted,#66758d)}
.rd-result-count{margin:0;font-size:13px;color:var(--text-muted,#66758d)}
.rd-result-count strong{font-size:15px;font-weight:750;color:var(--ink-dark,#101828);font-variant-numeric:tabular-nums}
.rd-result-why{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.rd-result-label{font-size:12.5px;color:var(--text-muted,#66758d)}
.rd-result-chip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px 0 10px;border:1px solid var(--theme-accent,#0f766e);border-radius:999px;background:var(--theme-accent-soft,#e8f5f1);color:var(--theme-accent,#0f766e);font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;max-width:100%}
.rd-result-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-result-chip:hover{background:var(--theme-accent,#0f766e);color:#fff}
.rd-result-clear{border:0;background:none;padding:0 2px;font:inherit;font-size:12.5px;font-weight:650;color:var(--text-muted,#66758d);cursor:pointer;text-decoration:underline}
.rd-result-clear:hover{color:var(--ink-dark,#101828)}
@media(max-width:720px){
  .rd-result-bar{margin:0 var(--page-pad,14px) 10px;gap:8px}
  .rd-result-bar.quiet{margin:0 var(--page-pad,14px) 10px}
}
/* Tikdoelen (architectuurronde 3, DESIGN-SYSTEM §35 + ronde-3-discovery §3.7). Bewust de LAATSTE CSS-module: deze regels moeten
   legacy-overrides zoals `.text-action{min-height:34px}` en `.location-chip-row button{min-height:34px}` winnen zonder !important.
   Touch-layouts (≤1024px: telefoon én tablet) krijgen voor secundaire bediening minimaal --control-height-touch (40px); primaire
   knoppen houden 44px+ via de basisregel. Tellen-modus houdt zijn compacte locatiechips (28px) — dichtheid tijdens tellen. */
@media(max-width:1024px){
  /* Secundaire knoppen en icoonknoppen in beheer- en operatieschermen: op touch minimaal 40px (waren 32–38px). */
  .secondary.small,button.small,.quality-tag-action,.location-manage-edit,.brand-upload-button,.brand-upload-remove{min-height:var(--control-height-touch);min-width:var(--control-height-touch)}
  /* Locatiechips in het scannerpaneel staan gestapeld op volle breedte: daar is dichtheid geen argument voor 31px. */
  .scanner-desktop-count-locations .count-session-panel .location-chip-row button,.count-session-panel .location-chip-row button{min-height:var(--control-height-touch);height:auto;font-size:12px;padding:6px 10px}
  /* Tablet is een touch-apparaat: desktopdichtheid (30px rustige chips, 32px locatiechips, 36px rijknoppen) is daar te klein.
     Tellen-modus houdt bewust zijn compacte chips — daar telt dichtheid zwaarder dan trefvlak (DESIGN-SYSTEM §35). */
  .dashboard-desktop .rd-quiet-item,.op-kpi.rd-quiet-item{min-height:var(--control-height-touch);height:auto}
  .location-chip-row.stock-location-chips button,.stock-location-chips button{min-height:var(--control-height-touch)}
  .card-actions .secondary,.card-actions .primary,.product-card .product-card-actions button{min-height:var(--control-height-touch);height:auto}
  .modal-sheet .secondary,.modal-sheet .primary,.modal-sheet button.small,.count-detail-close,.modal-close{min-height:var(--control-height-touch);min-width:var(--control-height-touch)}
  .product-image-actions button,.product-code-row button,.packaging-row button{min-height:var(--control-height-touch)}
  .ui-tabs>button,.status-filter button,.text-action{min-height:var(--control-height-touch)}
  .text-action{display:inline-flex;align-items:center}
  .location-chip-row button{min-height:var(--control-height-touch)}
  .counting-mode .location-chip-row button{min-height:28px}
  .table-pagination button,.counts-pagination button,.table-pagination .ui-select-trigger,.counts-pagination .ui-select-trigger,.table-pagination .icon-button,.counts-pagination .icon-button{min-height:var(--control-height-touch);min-width:var(--control-height-touch);height:auto;width:auto}
  .location-text-link.stock-location-code,.stock-location-pill{min-height:var(--control-height-touch);display:inline-flex;align-items:center}
  .auth-user-row>.secondary.small,.auth-role-row>.secondary.small,.auth-device-row>.secondary.small,.auth-role-row>.icon-button{min-height:44px;min-width:44px}
}

/* iOS-zoom bij focus (gemeten 8 sep 2026 op iPhone 17 / iOS 18.7-UA). Safari zoomt de héle pagina in zodra een
   tekstveld met een lettergrootte onder 16px focus krijgt, en zoomt daarna niet vanzelf terug — je typt verder in
   een uitvergroot scherm en de onderbalk valt weg. Alleen tekstinvoer doet dit; een <select> opent een kiezer en
   zoomt niet. Daarom hier, in de touchlaag: op muisbreedtes blijft de kleinere maat staan. */
@media(max-width:1024px){
  .rd-search input,
  .scanner-desktop-search .manual-row input,
  .table-search-position input,
  .pickup-idea textarea,
  .modal-sheet .editor-form input:not([type=checkbox]):not([type=radio]),
  .modal-sheet .editor-form textarea{font-size:16px}
}