/* ==========================================================================
   sections.css — Feature-specific styles for Home, Orders, Analytics, Inventory, Retailers
   Shared SPA shell styles (sidebar, topbar, main, body, etc.) are NOT included here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED / COMMON UTILITIES
   -------------------------------------------------------------------------- */

.link{font-size:10.5px;color:var(--primary);font-weight:500;cursor:pointer}.link:hover{text-decoration:underline}

.toolbar{display:flex;align-items:center;gap:10px;margin-top:14px;justify-content:flex-end}
.toolbar{flex-wrap:wrap}

.btn-ghost{height:34px;border-radius:17px;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;gap:7px;padding:0 14px;font-size:10.5px;font-weight:500;color:var(--label);cursor:pointer;border:none;font-family:inherit}
.btn-primary{height:34px;border-radius:17px;background:var(--primary);color:#fff;display:flex;align-items:center;gap:7px;padding:0 16px;font-size:10.5px;font-weight:600;cursor:pointer;border:none;font-family:inherit;box-shadow:0 2px 8px rgba(34,197,94,.25)}
.btn-solid{height:34px;padding:0 16px;border-radius:8px;background:var(--primary);color:#fff;font-size:11px;font-weight:600;cursor:pointer;border:none;display:flex;align-items:center;gap:6px;font-family:inherit}
.btn-solid:hover{opacity:.9}
.btn-sm{height:30px;padding:0 12px;border-radius:6px;font-size:10.5px;font-weight:500;cursor:pointer;border:none;display:flex;align-items:center;gap:5px;font-family:inherit}
.btn-sm.solid{background:var(--primary);color:#fff}
.btn-sm.solid:hover{opacity:.9}
.btn-sm.ghost{background:var(--elev);color:var(--label)}
.btn-sm.ghost:hover{background:var(--border)}
.btn-sm.danger{background:var(--danger-soft);color:var(--danger)}
.btn-sm.danger:hover{opacity:.8}

.search-box{flex:1;height:36px;border-radius:18px;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:10.5px}
.search-box input{flex:1;border:none;background:none;outline:none;font-size:10.5px;font-family:inherit;color:var(--text)}
.search-box .i{color:var(--icon)}

.g-green{background:var(--primary-soft);color:var(--primary)}.g-red{background:var(--danger-soft);color:var(--danger)}
.g-blue{background:var(--info-soft);color:var(--info)}.g-amber{background:var(--warn-soft);color:var(--warn)}
.g-purple{background:var(--purple-soft);color:var(--purple)}

.panel{padding:18px 20px 14px}
.ph{display:flex;align-items:center;justify-content:space-between}
.ph .sub{font-size:10px;color:var(--muted);margin-top:2px}
.ph .right{display:flex;align-items:center;gap:8px}

.pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:9px;font-weight:500;white-space:nowrap}
.pill-green{background:var(--success-soft);color:var(--success-dark)}.pill-red{background:var(--danger-soft);color:var(--danger)}
.pill-blue{background:var(--info-soft);color:var(--info)}.pill-yellow{background:var(--warn-soft);color:#B8760F}
.pill-purple{background:var(--purple-soft);color:var(--purple)}
.pill-gray{background:var(--elev);color:var(--label)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.section-t{font-size:10px;font-weight:600;color:var(--label);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:center;justify-content:center}
.overlay.open{display:flex}
.modal{background:var(--card);border-radius:14px;max-width:540px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-pop)}
.modal.wide{max-width:860px}
.mh{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border)}
.mh b{display:block;font-size:14px;font-weight:700;color:var(--text)}
.mh span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.mh .mi{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 36px}
.mh .mi .i{width:16px;height:16px}
.mh .x{margin-left:auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);border:none;background:none;cursor:pointer}
.mh .x:hover{background:var(--elev);color:var(--text)}
.mb{padding:18px 20px}
.mf{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--border)}
.mf .hint{font-size:10px;color:var(--muted)}
.mf .spacer{flex:1}

.field{margin-bottom:12px}
.field label{display:block;font-size:10px;font-weight:600;color:var(--label);margin-bottom:4px}
.field label small{color:var(--muted);font-weight:400}
.field .input{width:100%;height:34px;border-radius:8px;border:1px solid var(--border);padding:0 10px;font-size:11px;color:var(--text);background:var(--bg);font-family:inherit}
.field .input:focus{border-color:var(--primary);outline:none}
.field textarea.input{height:70px;padding:8px 10px;resize:vertical}
.field select.input{appearance:auto}

/* --------------------------------------------------------------------------
   DATE DROPDOWN (shared across Home, Orders, Analytics)
   -------------------------------------------------------------------------- */
.date-dropdown{position:relative}
.date-dropdown-trigger{height:34px;border-radius:17px;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:10.5px;font-weight:500;color:var(--label);cursor:pointer;user-select:none;border:none;font-family:inherit}
.date-dropdown-trigger .i{width:13px;height:13px;color:var(--icon)}
.date-dropdown-trigger .chev{width:10px;height:10px;color:var(--muted);transition:transform .2s}
.date-dropdown.open .date-dropdown-trigger .chev{transform:rotate(180deg)}
.date-dropdown-panel{position:absolute;top:40px;right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-pop);padding:6px;min-width:220px;display:none;z-index:20}
.date-dropdown.open .date-dropdown-panel{display:block}
.date-dropdown-panel .dd-section{padding:4px 6px;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-weight:600;margin-top:4px}
.date-dropdown-panel .dd-section:first-child{margin-top:0}
.date-dropdown-panel .dd-opt{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:6px;border:none;background:none;font-size:11px;font-weight:500;color:var(--label);cursor:pointer;font-family:inherit;text-align:left}
.date-dropdown-panel .dd-opt:hover{background:var(--elev)}
.date-dropdown-panel .dd-opt.active{background:var(--primary-soft);color:var(--primary)}
.date-dropdown-panel .dd-opt .check{width:14px;color:var(--primary);opacity:0}
.date-dropdown-panel .dd-opt.active .check{opacity:1}
.date-dropdown-panel .dd-divider{height:1px;background:var(--border);margin:4px 6px}
.date-dropdown-panel .dd-custom{padding:6px 10px}
.date-dropdown-panel .dd-custom label{display:block;font-size:9.5px;color:var(--muted);margin-bottom:3px;font-weight:500}
.date-dropdown-panel .dd-custom input[type="date"]{width:100%;height:30px;border:1px solid var(--border);border-radius:6px;padding:0 8px;font-size:10.5px;font-family:inherit;color:var(--text);background:var(--elev);outline:none}
.date-dropdown-panel .dd-custom input[type="date"]:focus{border-color:var(--primary)}
.date-dropdown-panel .dd-custom .dd-custom-row{display:flex;gap:6px}
.date-dropdown-panel .dd-custom .dd-custom-row > div{flex:1}
.date-dropdown-panel .dd-apply{width:calc(100% - 12px);margin:6px;padding:7px;border-radius:6px;border:none;background:var(--primary);color:#fff;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.date-dropdown-panel .dd-apply:hover{opacity:.9}

/* --------------------------------------------------------------------------
   KPIs (shared across all sections — grid columns vary by section)
   -------------------------------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:14px}
.kpi{padding:14px 14px 12px;height:118px;display:flex;flex-direction:column;cursor:pointer;transition:transform .15s,box-shadow .15s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.kpi .top{display:flex;align-items:center;gap:8px}
.kpi .ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.kpi .ic .i{width:14px;height:14px}
.kpi .lbl{font-size:9px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;margin-top:10px;color:var(--label)}
.kpi .num{font-size:19px;font-weight:700;color:var(--text);margin-top:2px;letter-spacing:-.3px;line-height:1.2;white-space:nowrap}
.kpi .num.money{font-size:16px}
.kpi .foot{margin-top:auto;font-size:9.5px;color:var(--muted);display:flex;align-items:center;gap:4px;white-space:nowrap}
.kpi .foot .up{color:var(--primary)}.kpi .foot .dn{color:var(--danger)}
.kpi .foot .bl{color:var(--info)}.kpi .foot .am{color:var(--warn)}
.kpi .foot .up{color:var(--primary);font-weight:600}
.kpi .foot .dn{color:var(--danger);font-weight:600}

/* ==========================================================================
   HOME SECTION
   ========================================================================== */

/* Circ button */
.circ-btn{width:36px;height:36px;border-radius:50%;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:var(--icon);flex:0 0 36px;position:relative;cursor:pointer}
.circ-btn .dot{position:absolute;top:6px;right:7px;width:14px;height:14px;border-radius:50%;background:var(--danger);color:#fff;font-size:8px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2px solid #fff}

/* Actions dropdown */
.actions-wrap{position:relative}
.btn-actions{height:34px;border-radius:17px;background:var(--primary);color:#fff;display:flex;align-items:center;gap:8px;padding:0 16px;font-size:11px;font-weight:600;box-shadow:0 4px 12px rgba(34,197,94,.28);cursor:pointer;border:none;font-family:inherit}
.btn-actions .i{width:13px;height:13px}.btn-actions .sep{width:1px;height:16px;background:rgba(255,255,255,.35)}
.actions-menu{position:absolute;top:40px;right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-pop);padding:6px;min-width:200px;display:none;z-index:20}
.actions-menu.open{display:block}
.actions-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border-radius:6px;border:none;background:none;font-size:11px;font-weight:500;color:var(--label);cursor:pointer;font-family:inherit;text-align:left}
.actions-menu button:hover{background:var(--elev)}
.actions-menu button .i{width:13px;height:13px;color:var(--icon)}

/* Home mid grid */
.mid{display:grid;grid-template-columns:1.8fr 1fr;gap:14px;margin-top:14px;overflow:hidden}
.mid>.card{min-width:0;overflow:hidden}

/* Chart */
.chart{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.chart svg{min-width:700px;height:220px}

/* Donut */
.donut{display:flex;align-items:center;gap:18px;margin-top:14px}.donut svg{width:150px;height:150px;flex:0 0 150px}
.lg{flex:1}.lg .r{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--label);padding:5px 0}
.lg .r b{width:8px;height:8px;border-radius:50%;flex:0 0 8px}.lg .r .v{margin-left:auto;font-weight:600;color:var(--text)}
.lg .r .p{color:var(--muted);width:48px;text-align:right}

/* Integrations list */
.ilist{margin-top:10px}.irow{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--border);border-radius:6px;cursor:pointer;transition:background .12s}
.irow:hover{background:var(--elev)}
.irow:last-child{border-bottom:0}.irow .lg-i{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex:0 0 26px}
.irow .nm{font-size:11px;font-weight:600;color:var(--text);width:64px}
.irow .sync{margin-left:auto;font-size:9px;color:var(--muted);white-space:nowrap}
.irow .chev{width:13px;height:13px;color:var(--icon);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s;flex:none}
.irow:hover .chev{opacity:1;transform:translateX(0)}
.irow .lg-i img{width:18px;height:18px;object-fit:contain;border-radius:4px}
.irow .lg-i{overflow:hidden}

/* Home pill (legacy) */
.pill.g{background:var(--primary-soft);color:var(--primary-dark)}.pill.r{background:var(--danger-soft);color:var(--danger)}
.pill.b{background:var(--info-soft);color:var(--info)}.pill.n{background:var(--elev);color:var(--label)}

/* Home bottom grid */
.bot{display:grid;grid-template-columns:1fr 300px;gap:14px;margin-top:14px}

/* Tabs */
.tabs{display:flex;gap:22px;margin-top:14px;border-bottom:1px solid var(--border);padding:0 2px}
.tabs span{font-size:10.5px;color:var(--muted);padding:6px 0 9px;font-weight:500;cursor:pointer}.tabs span.on{color:var(--primary);border-bottom:2px solid var(--primary);font-weight:600}
.tabs{position:relative}
.tabs .tab-indicator{position:absolute;bottom:0;height:2px;background:var(--primary);transition:left .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1);border-radius:1px}

/* Home buttons */
.btn-green{margin-left:auto;height:30px;padding:0 14px;border-radius:6px;background:var(--primary);color:#fff;font-weight:500;font-size:11px;display:flex;align-items:center;gap:6px;cursor:pointer;border:none;font-family:inherit}
.btn-refresh{height:34px;padding:0 16px;border-radius:17px;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--label);cursor:pointer;border:1px solid var(--border);font-family:inherit;transition:all .2s ease}
.btn-refresh:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);box-shadow:0 2px 8px rgba(34,197,94,.15)}
.btn-refresh:active{transform:scale(.97)}
.btn-refresh.syncing{pointer-events:none;opacity:.7}
.btn-refresh.syncing svg.i{animation:spin .8s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Home table */
table{width:100%;border-collapse:separate;border-spacing:0;margin-top:10px}
thead th{text-align:left;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--label);font-weight:600;background:var(--elev);padding:9px 10px}
thead th:first-child{border-radius:5px 0 0 5px}thead th:last-child{border-radius:0 5px 5px 0;text-align:right}
tbody td{padding:9px 10px;font-size:10.5px;color:var(--label);border-bottom:1px solid var(--border);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}tbody td:last-child{text-align:right}
td .cour{font-size:8.5px;letter-spacing:.5px;color:var(--muted);font-weight:600;margin-right:4px}
td .tid{font-weight:600;color:var(--text)}td .amt{font-weight:600;color:var(--text)}

/* Products */
.prod{display:flex;align-items:center;gap:10px;padding:8px 0}.prod .th{width:30px;height:30px;border-radius:7px;flex:0 0 30px}
.prod .pn{font-size:11px;font-weight:600;color:var(--text)}.prod .po{font-size:9px;color:var(--muted)}
.prod .bar{flex:1;height:5px;border-radius:3px;background:var(--elev);position:relative;margin-left:6px}
.prod .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--primary)}
.prod .pc{font-size:10px;font-weight:600;color:var(--label);width:30px;text-align:right}

/* Activity feed */
.feed .f{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:10.5px;color:var(--label)}
.feed .f .d{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.feed .f .t{margin-left:auto;font-size:9.5px;color:var(--muted);white-space:nowrap}

/* Chart tooltip */
.chart-tooltip{position:absolute;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:10px;color:var(--text);pointer-events:none;z-index:100;box-shadow:var(--shadow-pop);white-space:nowrap;opacity:0;transition:opacity .15s}
.chart-tooltip.show{opacity:1}
.chart-tooltip .tt-date{font-weight:600;margin-bottom:2px}
.chart-tooltip .tt-val{color:var(--primary);font-weight:700}

/* City pie hover */
.city-seg{cursor:pointer;transition:opacity .15s,transform .15s}
.city-seg:hover{opacity:.85}

/* Recent orders row hover */
#recentOrdersTable tbody tr{transition:background .15s,transform .1s}
#recentOrdersTable tbody tr:hover{background:var(--elev)}
#recentOrdersTable tbody tr:active{transform:scale(.995)}

/* City overlay panels */
.city-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:200;overflow-y:auto;display:none;animation:slideIn .25s ease}
.city-overlay.open{display:block}
body.overlay-open{overflow:hidden}
@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.city-overlay .ov-topbar{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid var(--border);background:var(--card);position:sticky;top:0;z-index:10}
.city-overlay .ov-body{padding:18px 24px}
.city-overlay .back-btn{height:30px;padding:0 12px;border-radius:6px;background:var(--elev);border:1px solid var(--border);display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--label);cursor:pointer;font-family:inherit;transition:all .15s}
.city-overlay .back-btn:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.city-overlay .ov-title{font-weight:700;font-size:16px;color:var(--text)}
.city-overlay .ov-sub{font-size:10.5px;color:var(--muted);margin-top:1px}
.city-overlay .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.city-overlay .kpi{padding:14px 14px 12px;height:100px;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.city-overlay .kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.city-overlay .kpi .ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.city-overlay .kpi .ic .i{width:14px;height:14px}
.city-overlay .kpi .lbl{font-size:9px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;margin-top:8px;color:var(--label)}
.city-overlay .kpi .num{font-size:18px;font-weight:700;color:var(--text);margin-top:2px}
.city-overlay .kpi .num.money{font-size:15px}
.city-search{height:34px;border-radius:17px;background:var(--elev);display:flex;align-items:center;gap:8px;padding:0 14px;width:240px;border:1px solid var(--border)}
.city-search input{flex:1;border:none;background:none;outline:none;font-size:10.5px;font-family:inherit;color:var(--text)}
.city-search .i{color:var(--icon)}

/* Overlay table row hover */
.city-overlay tbody tr{transition:background .15s,transform .1s;cursor:pointer}
.city-overlay tbody tr:hover{background:var(--elev)}
.city-overlay tbody tr:active{transform:scale(.995)}

/* Home responsive */
@media(max-width:1100px){.home-view .kpis{grid-template-columns:repeat(4,1fr)}.home-view .mid,.home-view .bot{grid-template-columns:1fr}.city-overlay .kpis{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   ORDERS SECTION
   ========================================================================== */

/* Orders search box */
.search-box{flex:1;min-width:200px;height:36px;border-radius:18px;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;padding:0 14px;font-size:10.5px}

/* Chips */
.chips{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.chip{height:30px;padding:0 14px;border-radius:15px;background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;font-size:10.5px;font-weight:500;color:var(--label);cursor:pointer;border:none;font-family:inherit;transition:all .15s}
.chip.on{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(34,197,94,.25)}
.chip .cnt{margin-left:6px;font-size:9px;opacity:.7}

/* Orders table */
.table-wrap{margin-top:14px;background:var(--card);border-radius:8px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
/* direction:rtl used to sit here with direction:ltr on the table, the usual hack
   for moving the vertical scrollbar to the left edge. It breaks horizontal
   scrolling instead: in RTL, scrollLeft 0 is the *end* of the content and grows
   negative going backwards, so topscroll.js normalising to 0 parked the table at
   the far right on load, and scrollLeft/(scrollWidth-clientWidth) went negative
   — which is why the custom bar looked pre-scrolled and stopped short of the
   endpoint while the content had visibly run out. The vertical scrollbar is back
   on the right, where it belongs now that there is no left-hand rail. */
.table-scroll{overflow:auto;flex:1;min-height:0;max-height:calc(100vh - 340px);scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.table-scroll::-webkit-scrollbar{width:6px;height:6px}
.table-scroll::-webkit-scrollbar-track{background:transparent}
.table-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.table-scroll::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.table-scroll::-webkit-scrollbar-corner{background:transparent}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:10.5px}
thead{position:sticky;top:0;z-index:5}
thead th{text-align:left;font-size:9px;letter-spacing:.4px;text-transform:uppercase;color:var(--label);font-weight:600;background:var(--elev);padding:9px 10px;white-space:nowrap;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
thead th:first-child{padding-left:14px}
thead th:hover{color:var(--primary)}
tbody td{padding:8px 10px;color:var(--label);border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle}
tbody td:first-child{padding-left:14px}
tbody tr{cursor:pointer;transition:background .1s}
tbody tr:hover{background:rgba(34,197,94,.03)}
tbody tr:last-child td{border-bottom:0}
.td-track{font-weight:600;color:var(--text)}.td-cour{font-size:8px;color:var(--muted);letter-spacing:.5px;font-weight:600;display:block}
.td-amt{font-weight:600;color:var(--text)}
.td-prod{max-width:180px;overflow:hidden;text-overflow:ellipsis}

/* Pagination */
.pagination{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--border);font-size:10.5px;color:var(--muted)}
.pagination .info{flex:1}
.pagination .pages{display:flex;gap:4px;align-items:center}
.pagination button{height:28px;min-width:28px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--label);font-size:10px;font-weight:500;cursor:pointer;font-family:inherit;padding:0 8px;display:flex;align-items:center;justify-content:center}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
.pagination button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.pagination button:hover:not(:disabled):not(.on){background:var(--elev)}
.per-page{height:28px;border-radius:6px;border:1px solid var(--border);background:var(--card);font-size:10px;padding:0 8px;font-family:inherit;color:var(--label)}

/* Order detail modal */
.modal-bg{position:fixed;inset:0;background:rgba(23,32,52,.5);z-index:200;display:none;align-items:stretch;justify-content:flex-end;backdrop-filter:blur(2px)}
.modal-bg.show{display:flex}
.odp{width:680px;max-width:100%;background:var(--card);box-shadow:-8px 0 32px rgba(0,0,0,.15);display:flex;flex-direction:column;animation:slideInRight .25s ease}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
.odp-topbar{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.odp-topbar .back{width:32px;height:32px;border-radius:8px;background:var(--elev);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;color:var(--label)}
.odp-topbar .title{flex:1}
.odp-topbar .title h3{font-size:14px}.odp-topbar .title p{font-size:10px;color:var(--muted)}
.odp-body{flex:1;overflow-y:auto;padding:20px}
.odp-section{margin-bottom:20px}
.odp-section h4{font-size:11px;font-weight:600;color:var(--label);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.odp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.odp-field{padding:8px 10px;background:var(--elev);border-radius:6px}
.odp-field .fl{font-size:8.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.odp-field .fv{font-size:11px;color:var(--text);font-weight:500;margin-top:2px;word-break:break-word}
.odp-tracking{font-size:16px;font-weight:700;color:var(--primary);cursor:pointer}
.odp-tracking:hover{text-decoration:underline}
.odp-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.odp-actions button{height:32px;padding:0 14px;border-radius:8px;font-size:10.5px;font-weight:500;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card);color:var(--label)}
.odp-actions button:hover{background:var(--elev)}
.odp-actions button.primary{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Status Timeline */
.status-timeline{display:flex;align-items:flex-start;gap:0;padding:10px 0;overflow-x:auto}
.timeline-step{display:flex;flex-direction:column;align-items:center;min-width:90px;position:relative;flex:1}
.timeline-step .dot{width:14px;height:14px;border-radius:50%;background:var(--border);border:3px solid var(--card);box-shadow:0 0 0 2px var(--border);z-index:1;transition:all .2s}
.timeline-step.active .dot{background:var(--primary);box-shadow:0 0 0 2px var(--primary)}
.timeline-step.delivered .dot{background:#22C55E;box-shadow:0 0 0 2px #22C55E}
.timeline-step.returned .dot{background:#EF4F57;box-shadow:0 0 0 2px #EF4F57}
.timeline-step.transit .dot{background:#3B82F6;box-shadow:0 0 0 2px #3B82F6}
.timeline-step .line{position:absolute;top:6px;left:calc(50% + 7px);right:calc(-50% + 7px);height:3px;background:var(--border);z-index:0}
.timeline-step:last-child .line{display:none}
.timeline-step.active .line,.timeline-step.delivered .line{background:var(--primary)}
.timeline-step .label{font-size:9px;font-weight:600;color:var(--label);margin-top:8px;text-align:center;max-width:80px;word-break:break-word}
.timeline-step .time{font-size:8px;color:var(--muted);margin-top:2px;text-align:center}
.timeline-step.active .label,.timeline-step.delivered .label{color:var(--primary)}
.timeline-step.returned .label{color:#EF4F57}
.timeline-step.transit .label{color:#3B82F6}

/* Export select mode */
.export-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--text);color:#fff;padding:10px 20px;border-radius:12px;display:none;align-items:center;gap:16px;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:12px}
.export-bar.show{display:flex}
.export-bar button{height:30px;padding:0 14px;border-radius:8px;border:none;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.export-bar .done{background:var(--primary);color:#fff}
.export-bar .cancel{background:rgba(255,255,255,.15);color:#fff}
.export-check{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}

/* Orders responsive */
@media(max-width:1200px){.orders-view .kpis{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){.orders-view .kpis{grid-template-columns:repeat(2,1fr)}.sidebar{display:none}.main{margin-left:0}}

/* Orders view fills available space */
.orders-view{display:flex;flex-direction:column;flex:1;min-height:0}

/* ==========================================================================
   ANALYTICS SECTION
   ========================================================================== */

/* Analytics KPIs — scoped to prevent global override */
.analytics-view .kpis{grid-template-columns:repeat(6,1fr)}

/* Grid layouts */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:14px}

/* Chart SVG */
.chart svg{width:100%;height:auto;display:block}

/* Bar row */
.bar-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.bar-row .lbl{width:100px;font-size:10.5px;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .bar{flex:1;height:8px;border-radius:4px;background:var(--elev);overflow:hidden}
.bar-row .bar i{display:block;height:100%;border-radius:4px;background:var(--primary)}
.bar-row .val{width:40px;text-align:right;font-size:10px;font-weight:600;color:var(--text)}

/* Performance Overview */
#perfOverview{margin-top:14px}
.perf-tabs{display:flex;gap:4px;background:var(--elev);border-radius:8px;padding:3px}
.perf-tab{padding:6px 14px;border-radius:6px;border:none;background:none;font-size:10.5px;font-weight:500;color:var(--muted);cursor:pointer;font-family:inherit;transition:all .15s}
.perf-tab:hover{color:var(--label)}
.perf-tab.active{background:var(--card);color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.06);font-weight:600}
.perf-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:0 20px}
.perf-kpi{background:var(--elev);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.perf-kpi .pk-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:500}
.perf-kpi .pk-value{font-size:18px;font-weight:700;color:var(--text)}
.perf-kpi .pk-sub{font-size:9px;color:var(--muted)}
.perf-kpi .pk-value.money{font-size:15px}
.perf-kpi .pk-trend{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:600;margin-top:2px}
.perf-kpi .pk-trend.up{color:var(--primary)}
.perf-kpi .pk-trend.down{color:var(--danger)}

/* Bar tooltip */
.perf-chart-wrap{position:relative}
.perf-bar{cursor:pointer;transition:opacity .15s}
.perf-bar:hover{opacity:.85}
.perf-tooltip{position:absolute;background:var(--text);color:var(--card);padding:8px 12px;border-radius:6px;font-size:10px;font-weight:500;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,.2);line-height:1.5}
.perf-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--text)}
.perf-tooltip.visible{opacity:1}
.perf-tooltip .tt-date{font-weight:700;color:#fff;margin-bottom:2px}
.perf-tooltip .tt-row{display:flex;align-items:center;gap:5px}
.perf-tooltip .tt-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.perf-courier-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.perf-courier-row:last-child{border-bottom:0}
.perf-courier-name{width:90px;font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.perf-courier-bar{flex:1;height:10px;border-radius:5px;background:var(--elev);overflow:hidden}
.perf-courier-bar i{display:block;height:100%;border-radius:5px;transition:width .4s}
.perf-courier-val{width:50px;text-align:right;font-size:10px;font-weight:600;color:var(--text)}
.perf-courier-pct{width:40px;text-align:right;font-size:9px;color:var(--muted)}

/* Analytics responsive */
@media(max-width:1100px){.analytics-view .kpis{grid-template-columns:repeat(3,1fr)}.analytics-view .grid-2,.analytics-view .grid-3{grid-template-columns:1fr}}
@media(max-width:1100px){.perf-kpis{grid-template-columns:repeat(3,1fr)}}

/* ==========================================================================
   INVENTORY SECTION
   ========================================================================== */

/* Content layout */
.inventory-view .content{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;margin-top:14px;align-items:start}
.inventory-view .content > *{min-width:0}
.inventory-view .content > .card.panel{overflow:hidden}

/* Categories */
.cats{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.cats button{height:28px;padding:0 14px;border-radius:14px;background:var(--elev);font-size:10.5px;font-weight:500;color:var(--label);border:none;cursor:pointer;font-family:inherit}
.cats button.on{background:var(--primary);color:#fff}

/* Filter bar */
.filterbar{display:flex;align-items:center;gap:8px;margin-top:12px}
.filterbar .search{flex:1;height:34px;border-radius:8px;background:var(--elev);display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid transparent}
.filterbar .search:focus-within{border-color:var(--primary)}
.filterbar .search input{flex:1;border:none;background:none;font-size:11px;color:var(--text);outline:none;font-family:inherit}
.filterbar .search input::placeholder{color:var(--muted)}
.filterbar .search .i{width:13px;height:13px;color:var(--icon)}

/* Status filter (Active / Non-active) */
.status-filter{display:inline-flex;background:var(--elev);border-radius:8px;padding:3px;gap:2px}
.status-filter button{height:26px;padding:0 12px;border-radius:6px;background:none;border:none;font-size:10.5px;font-weight:500;color:var(--label);cursor:pointer;font-family:inherit}
.status-filter button.on{background:var(--card);color:var(--primary);box-shadow:var(--shadow)}

/* View toggle */
.view{display:inline-flex;background:var(--elev);border-radius:8px;padding:3px;gap:2px}
.view button{width:28px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--icon);border:none;background:none;cursor:pointer}
.view button.on{background:var(--card);color:var(--primary);box-shadow:var(--shadow)}
.view button .i{width:13px;height:13px}

/* Inventory grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;min-width:0}
.prod{background:var(--elev2);border-radius:10px;padding:12px;display:flex;gap:12px;cursor:pointer;transition:.15s;position:relative;border:1.5px solid transparent;text-decoration:none;color:inherit;min-width:0;overflow:hidden}
.prod:hover{background:var(--card);border-color:var(--primary-soft);box-shadow:var(--shadow)}
.prod .img-wrap{width:72px;height:72px;border-radius:8px;background:var(--elev);display:flex;align-items:center;justify-content:center;flex:0 0 72px;font-size:24px;font-weight:700;color:var(--primary);overflow:hidden}
.prod .img-wrap img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.prod .body{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.prod .nm{font-size:11.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:20px}
.prod .sku{font-size:9px;color:var(--muted);margin-top:1px}
.prod .pill{margin-top:6px;align-self:flex-start}
.prod .units{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;font-size:9.5px;color:var(--muted)}
.prod .bar{flex:1;height:5px;border-radius:3px;background:var(--border);overflow:hidden}
.prod .bar i{display:block;height:100%;border-radius:3px}
.prod .pct{font-size:9.5px;font-weight:600;color:var(--label);width:28px;text-align:right}
.prod .more{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;color:var(--muted);display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer}
.prod .more:hover{background:var(--elev);color:var(--text)}
.prod .more .i{width:12px;height:12px}

/* Inventory pager */
.pager{display:flex;align-items:center;margin-top:16px;font-size:10.5px;color:var(--muted)}
.pages{margin-left:auto;display:flex;gap:6px}
.pg{min-width:26px;height:26px;border-radius:6px;background:var(--elev);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;color:var(--label);padding:0 6px;cursor:pointer;border:none}
.pg.on{background:var(--primary);color:#fff}
.pg:hover:not(.on){background:var(--border)}
.pg .i{width:11px;height:11px}
.empty{grid-column:1/4;text-align:center;padding:40px;color:var(--muted);font-size:11px}

/* List view */
.grid.list{grid-template-columns:1fr;gap:6px}
.grid.list .prod{padding:8px 12px;align-items:center}
.grid.list .prod .img-wrap{width:44px;height:44px;flex:0 0 44px;font-size:16px}
.grid.list .prod .img-wrap img{border-radius:6px}
.grid.list .prod .body{flex-direction:row;align-items:center;gap:16px}
.grid.list .prod .nm{width:200px;padding:0}
.grid.list .prod .sku{margin:0;width:110px}
.grid.list .prod .pill{margin:0}
.grid.list .prod .units{margin:0;padding:0;flex:1}

/* Best performing */
.best .row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.best .row:last-child{border-bottom:0}
.best .row .img-sm{width:38px;height:38px;border-radius:8px;background:var(--elev);display:flex;align-items:center;justify-content:center;flex:0 0 38px;font-size:14px;font-weight:700;color:var(--primary);overflow:hidden}
.best .row .img-sm img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.best .nm{font-size:11px;font-weight:600;color:var(--text)}
.best .u{font-size:9px;color:var(--muted);margin-top:1px}
.best .bar{height:4px;border-radius:2px;background:var(--elev);margin-top:6px;overflow:hidden}
.best .bar i{display:block;height:100%;background:var(--primary);border-radius:2px}
.best .pc{margin-left:auto;font-size:10px;color:var(--muted);white-space:nowrap;align-self:flex-start;padding-top:2px}

/* Bulk update */
.bulk-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.bulk-tools .search{width:260px;height:32px;border-radius:8px;background:var(--elev);display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid transparent}
.bulk-tools .search input{flex:1;border:none;background:none;font-size:10.5px;color:var(--text);outline:none;font-family:inherit}
.bulk table{width:100%;border-collapse:separate;border-spacing:0;font-size:10.5px}
.bulk thead th{text-align:left;font-size:9px;letter-spacing:.4px;text-transform:uppercase;color:var(--label);font-weight:600;background:var(--elev);padding:8px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1}
.bulk td{padding:6px 8px;border-bottom:1px solid var(--border)}
.bulk .input{height:30px;font-size:10.5px;padding:0 9px;border-radius:6px;background:var(--card);border:1px solid var(--border);color:var(--text);font-family:inherit;width:100%}
.bulk .input:focus{border-color:var(--primary);outline:none}
.bulk .tbl-wrap{max-height:420px;overflow:auto;border-radius:6px;border:1px solid var(--border)}
.bulk .changed{background:#FFFBEB}
.bulk .changed .input{border-color:var(--warn)}
.apply{display:flex;align-items:center;gap:8px;background:var(--elev2);border-radius:10px;padding:10px 12px;flex-wrap:wrap;margin-bottom:10px}
.apply b{font-size:10.5px;color:var(--label)}
.apply .input{width:150px;height:30px;font-size:10.5px;background:var(--card)}
.diff{font-size:10px;color:var(--warn);font-weight:500}

/* Upload */
.upload{border:2px dashed var(--border);border-radius:10px;padding:24px;text-align:center;cursor:pointer;margin-bottom:14px}
.upload:hover{border-color:var(--primary)}
.upload .ic{margin:0 auto 8px;width:40px;height:40px;border-radius:50%;background:var(--elev);display:flex;align-items:center;justify-content:center;color:var(--icon)}
.upload b{display:block;font-size:11px;color:var(--text);margin-bottom:4px}
.upload span{font-size:10px;color:var(--muted)}

/* Radio cards */
.radio-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.radio-cards input[type="radio"]{display:none}
.radio-cards label{display:block;border:1.5px solid var(--border);border-radius:10px;padding:14px;text-align:center;cursor:pointer;transition:.15s}
.radio-cards label b{display:block;font-size:12px;color:var(--text);margin-bottom:4px}
.radio-cards label span{font-size:10px;color:var(--muted)}
.radio-cards input:checked+label{border-color:var(--primary);background:var(--primary-soft)}

/* Columns layout */
.cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* Export row */
.exp-row{display:flex;align-items:center;gap:10px;background:var(--elev2);border-radius:8px;padding:10px 12px;margin-top:12px}
.exp-row .ic{width:30px;height:30px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.exp-row .ic .i{width:13px;height:13px}
.exp-row b{font-size:11px;color:var(--text);display:block}
.exp-row span{font-size:9.5px;color:var(--muted)}
.exp-row .v{margin-left:auto;font-size:11px;font-weight:600;color:var(--text)}

/* Check */
.check{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--label);cursor:pointer}
.check input{accent-color:var(--primary)}

/* Inventory responsive */
@media(max-width:1100px){.inventory-view .kpis{grid-template-columns:repeat(3,1fr)}.inventory-view .grid{grid-template-columns:repeat(2,1fr)}.inventory-view .content{grid-template-columns:1fr}.inventory-view .content > .card.panel{overflow:visible}}
@media(max-width:768px){.inventory-view .grid{grid-template-columns:1fr}}

/* ==========================================================================
   RETAILERS SECTION
   ========================================================================== */

/* Retailers grid */
.rg{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px}
.rc{background:var(--card);border-radius:10px;padding:18px 20px;box-shadow:var(--shadow);cursor:pointer;transition:.15s;border:1.5px solid transparent;position:relative}
.rc:hover{border-color:var(--primary-soft);box-shadow:var(--shadow-pop);transform:translateY(-2px)}
.rc-name{font-size:14px;font-weight:700;color:var(--text)}
.rc-phone{font-size:10.5px;color:var(--muted);margin-top:2px}
.rc-stats{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.rc-stat{font-size:10px;color:var(--label);font-weight:500}
.rc-stat.gold{color:#B8760F;font-weight:600}
.rc-footer{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.rc-del{font-size:10px;color:var(--danger);background:none;border:none;cursor:pointer;font-family:inherit;font-weight:500;padding:0}
.rc-del:hover{text-decoration:underline}

/* Retailer summary boxes */
.rs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.rs-box{background:var(--elev);border-radius:8px;padding:12px 14px}
.rs-box.gold{background:var(--warn-soft)}
.rs-box .l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.rs-box .v{font-size:18px;font-weight:700;color:var(--text);margin-top:4px}

/* Groups */
.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}
.group-card{background:var(--card);border-radius:12px;border:1.5px solid var(--border);padding:20px;transition:.15s;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center}
.group-card:hover{border-color:var(--primary-soft);box-shadow:var(--shadow-pop);transform:translateY(-2px)}
.group-card.create{border-style:dashed;cursor:pointer;justify-content:center;min-height:120px}
.group-card.create:hover{border-color:var(--primary);background:var(--primary-soft)}
.gc-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.gc-name{font-size:13px;font-weight:700;color:var(--text)}
.gc-count{font-size:10px;color:var(--muted);margin-top:4px}
.gc-stats{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.gc-stat{font-size:9.5px;color:var(--label);font-weight:500}
.gc-stat b{color:var(--text);font-weight:700}
.gc-stat.gold b{color:#B8760F}

/* Order rows */
.order-list{position:relative;overflow:hidden}
.order-list.slide-left{animation:slideLeft .25s ease}
.order-list.slide-right{animation:slideRight .25s ease}
@keyframes slideLeft{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideRight{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
.ro{background:var(--card);border-radius:8px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:8px;cursor:pointer;transition:.15s;border:1.5px solid transparent;display:flex;align-items:center;gap:14px}
.ro:hover{border-color:var(--primary-soft);box-shadow:var(--shadow-pop)}
.ro.pending{border-left:3px solid var(--warn)}
.ro.received{border-left:3px solid var(--primary)}
.ro-main{flex:1;min-width:0}
.ro-title{font-size:12px;font-weight:600;color:var(--text)}
.ro-sub{font-size:10px;color:var(--muted);margin-top:2px}
.ro-mini{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.ro-m{font-size:10px;color:var(--label)}
.ro-m b{font-weight:700;color:var(--text)}
.ro-m.green b{color:var(--primary-dark)}
.ro-m.gold b{color:#B8760F}
.ro-badge{padding:3px 10px;border-radius:10px;font-size:9px;font-weight:600;white-space:nowrap;flex:0 0 auto}
.ro-badge.pending{background:var(--warn-soft);color:#B8760F}
.ro-badge.received{background:var(--primary-soft);color:var(--primary-dark)}

/* Page slide */
.page-slide{position:fixed;inset:0;background:var(--bg);z-index:100;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;overflow:hidden}
.page-slide.show{transform:translateX(0)}
.ps-topbar{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--border);background:var(--card);flex:0 0 auto}
.ps-topbar .back{width:32px;height:32px;border-radius:8px;background:var(--elev);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;color:var(--label)}
.ps-topbar .back:hover{background:var(--border)}
.ps-topbar .title{flex:1}
.ps-topbar .title h3{font-size:14px}.ps-topbar .title p{font-size:10px;color:var(--muted)}
.ps-body{flex:1;overflow-y:auto;padding:20px 24px}
.ps-actions{display:flex;gap:8px}
.ps-actions button{height:30px;padding:0 12px;border-radius:6px;font-size:10.5px;font-weight:500;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px;border:1px solid var(--border);background:var(--card);color:var(--label)}
.ps-actions button:hover{background:var(--elev)}
.ps-actions button.primary{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Variant editor */
.var-row{display:grid;grid-template-columns:1fr 90px 110px 34px;gap:6px;align-items:end;margin-bottom:6px}
.var-row .field{margin:0}
.var-row .input{height:32px;font-size:10.5px}
.var-draft{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.vd-item{display:grid;grid-template-columns:1fr 70px 90px 90px 28px;gap:6px;align-items:center;padding:8px 10px;background:var(--elev);border-radius:8px;font-size:10.5px}
.vd-item .vd-label{font-weight:600;color:var(--text)}
.vd-item .vd-qty,.vd-item .vd-price,.vd-item .vd-total{color:var(--label);text-align:right}
.vd-item .vd-total{font-weight:600;color:var(--text)}
.vd-item .rm{color:var(--danger);background:none;border:none;cursor:pointer;font-size:14px;font-weight:700;padding:0;text-align:center}
.var-total-bar{display:flex;justify-content:space-between;padding:8px 10px;background:var(--primary-soft);border-radius:8px;font-size:10.5px;font-weight:600;color:var(--primary-dark);margin-top:4px}

/* Detail field grid */
.df-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.df{padding:10px 12px;background:var(--elev);border-radius:8px}
.df .fl{font-size:8.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.df .fv{font-size:11px;color:var(--text);font-weight:500;margin-top:2px;word-break:break-word}

/* Size table */
.sz-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:10.5px;margin-top:10px}
.sz-tbl th{text-align:left;font-size:9px;letter-spacing:.4px;text-transform:uppercase;color:var(--label);font-weight:600;background:var(--elev);padding:8px 10px}
.sz-tbl td{padding:8px 10px;border-bottom:1px solid var(--border)}
.sz-tbl tr:last-child td{border-bottom:0}

/* Confirm dialog */
.confirm-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:none;align-items:center;justify-content:center}
.confirm-bg.open{display:flex}
.confirm-box{background:var(--card);border-radius:14px;max-width:400px;width:100%;padding:24px;box-shadow:var(--shadow-pop);text-align:center}
.confirm-box h4{font-size:14px;font-weight:700;margin-bottom:8px}
.confirm-box p{font-size:11px;color:var(--muted);margin-bottom:16px;line-height:1.5}
.confirm-box .actions{display:flex;gap:8px;justify-content:center}

/* Hidden utility */
.hidden{display:none!important}

/* Retailers responsive */
@media(max-width:1100px){.retailers-view .kpis{grid-template-columns:repeat(2,1fr)}.retailers-view .rs{grid-template-columns:repeat(2,1fr)}.retailers-view .rg{grid-template-columns:1fr}}
@media(max-width:768px){.sidebar{display:none}.main{margin-left:0}}

/* ==========================================================================
   Cancel Orders — scoped under .cancel-view
   ========================================================================== */

/* View visibility */
.cancel-view .view{display:none}.cancel-view .view.on{display:block}

/* Buttons */
.cancel-view .btn-ghost,.cancel-view .btn-solid,.cancel-view .btn-sm,.cancel-view .icon-btn,.cancel-view .seg button{border:0;cursor:pointer}
.cancel-view .btn-ghost{flex:none;white-space:nowrap}
.cancel-view .btn-solid{white-space:nowrap;flex:none}
.cancel-view .btn-solid.danger{background:var(--danger);box-shadow:0 4px 12px rgba(239,79,87,.28)}
.cancel-view .btn-solid.danger:hover{background:#D9363E}
.cancel-view .btn-solid:disabled,.cancel-view .btn-solid.danger:disabled{background:var(--elev);color:var(--muted);box-shadow:none;cursor:default}
.cancel-view .btn-ghost.danger{color:var(--danger)}.cancel-view .btn-ghost.danger .i{color:var(--danger)}.cancel-view .btn-ghost.danger:hover{background:var(--danger-soft)}

/* Sync indicator */
.cancel-view .sync{height:34px;border-radius:17px;background:var(--card);box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:8px;padding:0 14px;font-size:10.5px;color:var(--label);font-weight:500;white-space:nowrap;margin-right:auto}
.cancel-view .sync .d{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);flex:0 0 8px}
.cancel-view .sync.busy .d{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft);animation:pulse 1s infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}

/* Segmented control */
.cancel-view .seg{display:inline-flex;gap:2px;background:var(--elev);border-radius:8px;padding:3px}
.cancel-view .seg button{height:26px;padding:0 14px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:500;color:var(--label);background:transparent;cursor:pointer;border:none;font-family:inherit}
.cancel-view .seg button.on{background:var(--card);color:var(--primary-dark);font-weight:600;box-shadow:var(--shadow)}
.cancel-view .seg button:hover:not(.on){background:var(--elev2)}

/* KPI cards — 4-column layout */
.cancel-view .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.cancel-view .kpi .foot b{color:var(--label);font-weight:600}
.cancel-view .kpi .foot .up{color:var(--primary-dark);font-weight:600}
.cancel-view .kpi .foot .am{color:var(--warn-text);font-weight:600}
.cancel-view .kpi .foot .dn{color:var(--danger);font-weight:600}

/* Fix: filter row inputs and selects */
.cancel-view .cx-filters{display:flex;align-items:center;gap:10px;padding:14px 18px;flex-wrap:wrap}
.cancel-view .cx-search{display:flex;align-items:center;gap:8px;flex:1 1 220px;min-width:200px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--card);padding:0 12px}
.cancel-view .cx-search-ic{display:flex;color:var(--muted);flex:none}
.cancel-view .cx-search-ic .i{width:14px;height:14px}
.cancel-view .cx-search-input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:11px;color:var(--text)}
.cancel-view .cx-search-input::placeholder{color:var(--muted)}
.cancel-view .input,.cancel-view select.input{height:36px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:11px;padding:0 10px;font-family:inherit}
.cancel-view .cx-filters .cx-sel,.cancel-view .cx-filters .cx-date{width:auto;min-width:130px;flex:0 1 auto}
.cancel-view .cx-filters #cx-courier{min-width:140px}
.cancel-view .cx-filters #cx-status{min-width:120px}
.cancel-view .input:focus,.cancel-view select.input:focus{border-color:var(--primary);outline:none}
.cancel-view select.input{appearance:auto;cursor:pointer}
.cancel-view input[type="date"].input{padding:0 8px}
.cancel-view input[type="date"].input::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer;color:var(--icon)}
.cancel-view .btn-ghost{height:36px;border-radius:18px;background:var(--card);box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:7px;padding:0 14px;font-size:10.5px;font-weight:500;color:var(--label);border:1px solid var(--border);cursor:pointer;font-family:inherit;flex:none}
.cancel-view .btn-ghost:hover{background:var(--elev)}
.cancel-view .btn-ghost .i{width:13px;height:13px}

/* Finder section */
.cancel-view .finder{margin-top:14px;padding:16px 18px 14px}
.cancel-view .finder .fh{display:flex;align-items:flex-start;gap:10px}
.cancel-view .finder .fh .sub{font-size:10.5px;color:var(--muted);margin-top:2px}
.cancel-view .finder .fh .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.cancel-view .frow{display:grid;grid-template-columns:minmax(200px,1fr) 28px minmax(200px,1fr) minmax(220px,1.1fr) auto;gap:10px;align-items:end;margin-top:14px}
.cancel-view .frow .arrow{display:flex;align-items:center;justify-content:center;height:36px;color:var(--muted)}
.cancel-view .frow .arrow .i{width:14px;height:14px}
.cancel-view .field label small{font-weight:400;color:var(--muted)}
.cancel-view .input[type=date]{padding-right:10px;font-family:inherit}
.cancel-view .input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer;color:var(--icon)}
.cancel-view .btn-solid.fetch{height:36px;border-radius:18px;padding:0 18px}
.cancel-view .quick{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.cancel-view .quick .seg{flex-wrap:wrap}
.cancel-view .quick .range{margin-left:auto;height:28px;border-radius:14px;background:var(--elev2);padding:0 12px;font-size:10px;color:var(--label);font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cancel-view .quick .range .i{width:12px;height:12px;color:var(--icon)}
.cancel-view .quick .range b{color:var(--text);font-weight:600}

/* Multi-select courier dropdown */
.cancel-view .msel{position:relative}
.cancel-view .msel .ctl{height:36px;border-radius:8px;background:var(--elev2);padding:0 30px 0 12px;font-size:11px;color:var(--text);display:flex;align-items:center;gap:6px;cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cancel-view .msel .ctl:after{content:"";position:absolute;right:11px;top:50%;width:10px;height:10px;transform:translateY(-50%);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237C8797' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center}
.cancel-view .msel .ctl .clogo{width:18px;height:18px;border-radius:5px;font-size:6px;margin-right:-2px}
.cancel-view .msel .menu{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);border-radius:12px;box-shadow:var(--shadow-pop);padding:8px;z-index:30;display:none}
.cancel-view .msel.open .menu{display:block}
.cancel-view .msel .menu label{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:11px;color:var(--label);cursor:pointer}
.cancel-view .msel .menu label:hover{background:var(--elev2)}
.cancel-view .msel .menu label b{font-weight:500;color:var(--text)}
.cancel-view .msel .menu label small{margin-left:auto;font-size:9.5px;color:var(--muted)}
.cancel-view .msel .menu input{width:14px;height:14px;accent-color:var(--primary)}
.cancel-view .msel .menu .all{border-top:1px solid var(--border);margin-top:4px;padding-top:6px;font-size:10px;color:var(--primary-dark);font-weight:600;cursor:pointer;display:flex;gap:10px;padding-left:8px}

/* Content layout — left + right column */
.cancel-view .content{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;margin-top:14px;align-items:start}
.cancel-view .left,.cancel-view .rightcol{display:flex;flex-direction:column;gap:14px;min-width:0}

/* Results table */
.cancel-view .results{padding:16px 18px 10px}
.cancel-view .rh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cancel-view .rh .sub{font-size:10.5px;color:var(--muted);margin-top:2px}
.cancel-view .rh .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cancel-view .rh .search{height:32px;border-radius:16px;background:var(--elev2);display:flex;align-items:center;gap:8px;padding:0 12px;width:220px}
.cancel-view .rh .search .i{width:13px;height:13px;color:var(--icon)}
.cancel-view .rh .search input{background:none;border:0;outline:0;font-size:10.5px;color:var(--text);width:100%;font-family:inherit}
.cancel-view .tabs{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.cancel-view .tabs .seg button .n{min-width:18px;height:16px;border-radius:8px;background:var(--elev2);font-size:9px;font-weight:600;color:var(--label);display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.cancel-view .tabs .seg button.on .n{background:var(--primary-soft);color:var(--primary-dark)}
.cancel-view .tabs .hint{margin-left:auto;font-size:10px;color:var(--muted)}
.cancel-view .twrap{margin-top:10px;overflow:auto;max-height:calc(100vh - 330px)}
.cancel-view table.res{table-layout:auto;width:100%}
.cancel-view table.res td:last-child,table.res th:last-child{white-space:nowrap}
.cancel-view table.res thead th{position:sticky;top:0;z-index:2;white-space:nowrap}
.cancel-view table.res thead th:first-child,table.res tbody td:first-child{width:34px;padding-left:12px;padding-right:0}
.cancel-view table.res tbody td{padding:9px 8px;font-size:10.5px}
.cancel-view table.res thead th{padding:10px 8px}
.cancel-view table.res tbody tr{cursor:pointer}
.cancel-view table.res tbody tr.chosen td{background:var(--primary-soft)!important}
.cancel-view table.res tbody tr.chosen td:first-child{box-shadow:inset 3px 0 0 var(--primary)}
.cancel-view table.res tbody tr.locked{cursor:default}
.cancel-view table.res tbody tr.locked td:not(:last-child){opacity:.62}
.cancel-view table.res tbody tr.gone td{opacity:.5}

/* Checkbox */
.cancel-view .cb{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--border);background:var(--card);display:inline-flex;align-items:center;justify-content:center;transition:.12s;cursor:pointer;vertical-align:middle;color:transparent}
.cancel-view .cb .i{width:11px;height:11px;stroke-width:3}
.cancel-view .cb.on{background:var(--primary);border-color:var(--primary);color:#fff}
.cancel-view .cb.part{background:var(--primary);border-color:var(--primary);color:#fff}
.cancel-view .cb.dis{opacity:.35;cursor:not-allowed}

/* Table cell content */
.cancel-view td .cn{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.2px;font-size:11px}
.cancel-view td .ref{font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap}
.cancel-view td .name{font-weight:600;color:var(--text);font-size:11px;white-space:nowrap;max-width:125px;overflow:hidden;text-overflow:ellipsis}
.cancel-view td .ph{font-size:10px;color:var(--muted);margin-top:1px;display:block}
.cancel-view td .city{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:6px;background:var(--elev);font-size:9.5px;font-weight:600;color:var(--label);letter-spacing:.3px;text-transform:uppercase}
.cancel-view td .addr{font-size:10px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.cancel-view td .amt{font-weight:600;color:var(--text);white-space:nowrap}
.cancel-view td .amt small{display:block;font-size:9px;color:var(--muted);font-weight:500;max-width:115px;overflow:hidden;text-overflow:ellipsis}

/* Courier logos */
.cancel-view .co,.cancel-view .cx-co{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--text);white-space:nowrap}
.cancel-view .co small,.cancel-view .cx-co-name{max-width:90px;overflow:hidden;text-overflow:ellipsis}
.cancel-view .co small{display:block;font-size:9.5px;color:var(--muted);font-weight:500;margin-top:1px}
.cancel-view .cx-co-name{font-size:10.5px;font-weight:600;color:var(--text)}
.cancel-view .clogo{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:7.5px;font-weight:700;letter-spacing:.2px;flex:none;overflow:hidden;background:var(--elev)}
.cancel-view .clogo img{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}
.cancel-view .c-tcs{background:#FDECEC;color:#D8383F}.cancel-view .c-postex{background:#F1ECFE;color:#7C4DE6}.cancel-view .c-leopards,.cancel-view .c-lcs{background:#FFF4E0;color:#B8760F}.cancel-view .c-trax{background:#E8F0FE;color:#2F6FE0}.cancel-view .c-mnp{background:#E6F8ED;color:#18A54B}
[data-theme="dark"] .cancel-view .clogo{background:var(--elev)}
[data-theme="dark"] .cancel-view .c-postex{background:rgba(124,77,230,.15)}
[data-theme="dark"] .cancel-view .c-tcs{background:rgba(211,50,59,.15)}
[data-theme="dark"] .cancel-view .c-leopards,[data-theme="dark"] .cancel-view .c-lcs{background:rgba(184,118,15,.18)}
[data-theme="dark"] .cancel-view .c-trax{background:rgba(47,111,224,.18)}
[data-theme="dark"] .cancel-view .c-mnp{background:rgba(24,165,75,.15)}
.cancel-view .cx-lock{font-size:12px;color:var(--muted)}
.cancel-view .cx-cancel-btn{background:var(--danger,#dc3545);color:#fff;border:none;border-radius:4px;padding:4px 10px;cursor:pointer;font-size:11px;position:relative;z-index:2;display:inline-flex;align-items:center;gap:4px}
.cancel-view .cx-cancel-btn .i{width:12px;height:12px}
.cancel-view .cx-cancel-btn:hover{filter:brightness(1.08)}

/* Status badges */
.cancel-view .st{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cancel-view .st .dot{width:7px;height:7px;border-radius:50%;flex:none}
.cancel-view .st small{display:block;font-size:9.5px;color:var(--muted);font-weight:400;margin-top:1px;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.cancel-view .st.booked .dot{background:var(--info)}.cancel-view .st.pickup .dot{background:var(--purple)}.cancel-view .st.transit .dot{background:var(--warn)}.cancel-view .st.ofd .dot{background:var(--warn)}.cancel-view .st.delivered .dot{background:var(--primary)}.cancel-view .st.rto .dot{background:#F97316}.cancel-view .st.cancelled .dot{background:var(--danger)}

/* Cancel button */
.cancel-view .btn-x{height:28px;border-radius:14px;padding:0 12px;font-size:10.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;background:var(--danger-soft);color:var(--danger);border:0;cursor:pointer;white-space:nowrap;transition:.12s}
.cancel-view .btn-x .i{width:12px;height:12px}
.cancel-view .btn-x:hover{background:var(--danger);color:#fff}
.cancel-view .btn-x:disabled{background:var(--elev);color:var(--muted);cursor:not-allowed}
.cancel-view .btn-x.done{background:var(--elev);color:var(--muted);cursor:default}

/* Lock indicator */
.cancel-view .lock{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);white-space:nowrap}
.cancel-view .lock .i{width:12px;height:12px;color:var(--icon)}

/* Empty state */
.cancel-view .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;gap:6px;color:var(--muted);font-size:10.5px}
.cancel-view .empty .ic{width:52px;height:52px;border-radius:50%;background:var(--elev);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.cancel-view .empty .ic .i{width:22px;height:22px;color:var(--icon)}
.cancel-view .empty b{color:var(--text);font-weight:600;font-size:12.5px}
.cancel-view .empty p{max-width:420px;line-height:1.6}

/* Skeleton loader */
.cancel-view .skel{height:44px;border-radius:10px;background:linear-gradient(90deg,var(--elev) 25%,#F9FAFB 50%,var(--elev) 75%);background-size:200% 100%;animation:sh 1.1s infinite;margin-top:8px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Table footer / pagination */
.cancel-view .tfoot{display:flex;align-items:center;gap:8px;padding:10px 0 4px;border-top:1px solid var(--border);margin-top:4px;flex-wrap:wrap}
.cancel-view .tfoot .sum{font-size:10.5px;color:var(--muted)}
.cancel-view .tfoot .sum b{color:var(--text);font-weight:600}
.cancel-view .tfoot .sp{flex:1}
.cancel-view .pager{display:inline-flex;align-items:center;gap:4px}
.cancel-view .pager button{width:26px;height:26px;border-radius:50%;background:var(--elev);color:var(--label);font-size:10.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer}
.cancel-view .pager button.on{background:var(--primary);color:#fff}
.cancel-view .pager button:hover:not(:disabled){background:var(--border)}
.cancel-view .pager button:disabled{opacity:.4;cursor:default}
.cancel-view .pager button .i{width:12px;height:12px}

/* Floating selection bar */
.cancel-view .selbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(90px);background:var(--text);color:#fff;border-radius:26px;padding:8px 8px 8px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 14px 40px rgba(0,0,0,.28);z-index:90;transition:.25s;opacity:0;pointer-events:none;white-space:nowrap}
.cancel-view .selbar.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.cancel-view .selbar b{font-size:12px;font-weight:600}
.cancel-view .selbar span{font-size:10.5px;color:#C7CEDA}
.cancel-view .selbar .sep{width:1px;height:22px;background:rgba(255,255,255,.14)}
.cancel-view .selbar .lnk{font-size:10.5px;color:#fff;background:rgba(255,255,255,.12);height:30px;padding:0 12px;border-radius:15px;display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer}
.cancel-view .selbar .lnk:hover{background:rgba(255,255,255,.22)}
.cancel-view .selbar .go{height:36px;border-radius:18px;background:var(--danger);color:#fff;font-size:11px;font-weight:600;padding:0 16px;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer}
.cancel-view .selbar .go:hover{background:#D9363E}
.cancel-view .selbar .go .i{width:14px;height:14px}

/* Right column — rules, bars, history */
.cancel-view .side h3{font-size:13px}
.cancel-view .side .sub{font-size:10.5px;color:var(--muted);margin-top:2px}
.cancel-view .rules{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cancel-view .rule{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;background:var(--elev2)}
.cancel-view .rule b{display:block;font-size:11px;font-weight:600;color:var(--text)}
.cancel-view .rule span{display:block;font-size:9.5px;color:var(--muted);margin-top:1px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cancel-view .rule b small{font-weight:400;color:var(--muted);font-size:9.5px}
.cancel-view .rule .pill{justify-self:end}
.cancel-view .bars{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.cancel-view .bar{display:grid;grid-template-columns:78px 1fr auto;gap:10px;align-items:center;font-size:10.5px;color:var(--label)}
.cancel-view .bar .tr{height:6px;border-radius:3px;background:var(--elev);overflow:hidden}
.cancel-view .bar .tr b{display:block;height:100%;border-radius:3px;background:var(--primary)}
.cancel-view .bar .tr b.r{background:var(--danger)}.cancel-view .bar .tr b.a{background:var(--warn)}.cancel-view .bar .tr b.b{background:var(--info)}.cancel-view .bar .tr b.p{background:var(--purple)}
.cancel-view .bar .v{font-weight:600;color:var(--text);white-space:nowrap;font-size:10.5px}
.cancel-view .bar .v small{color:var(--muted);font-weight:500;margin-left:4px}
.cancel-view .hist .row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border)}
.cancel-view .hist .row:last-child{border-bottom:0}
.cancel-view .hist .row .ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.cancel-view .hist .row .ic .i{width:14px;height:14px}
.cancel-view .hist .row b{font-size:11px;font-weight:600;color:var(--text);display:block}
.cancel-view .hist .row span{font-size:10px;color:var(--muted);display:block;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cancel-view .hist .row>div:nth-child(2){min-width:0;flex:1}
.cancel-view .hist .row .r{text-align:right;flex:none;white-space:nowrap}

/* Cancel modal */
.cancel-view .modal{width:620px}
.cancel-view .mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cancel-view .mrow div{background:var(--elev2);border-radius:10px;padding:10px 12px;min-width:0}
.cancel-view .mrow small{display:block;font-size:8.5px;letter-spacing:.4px;text-transform:uppercase;font-weight:600;color:var(--label)}
.cancel-view .mrow b{display:block;font-size:15px;font-weight:700;color:var(--text);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cancel-view .ocard{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--elev2)}
.cancel-view .ocard .clogo{width:34px;height:34px;border-radius:10px;font-size:9px}
.cancel-view .ocard b{display:block;font-size:12.5px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.cancel-view .ocard span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.cancel-view .ocard .amt{text-align:right;font-weight:700;color:var(--text);font-size:12px;white-space:nowrap}
.cancel-view .ocard .amt small{display:block;font-size:9.5px;color:var(--muted);font-weight:500;margin-top:2px}

/* Reason cards */
.cancel-view .rcards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cancel-view .rcards label{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;background:var(--elev2);border:1.5px solid transparent;cursor:pointer;transition:.12s}
.cancel-view .rcards label b{font-size:11px;font-weight:600;color:var(--text)}
.cancel-view .rcards label span{font-size:9.5px;color:var(--muted);line-height:1.4}
.cancel-view .rcards input{display:none}
.cancel-view .rcards input:checked+label{border-color:var(--primary);background:var(--card);box-shadow:var(--shadow)}

/* Options */
.cancel-view .opts{display:flex;flex-direction:column;gap:9px}

/* Notes */
.cancel-view .note{display:flex;gap:8px;align-items:flex-start;font-size:10.5px;line-height:1.5;padding:10px 12px;border-radius:10px}
.cancel-view .note .i{width:14px;height:14px;flex:none;margin-top:1px}
.cancel-view .note.a{background:var(--warn-soft);color:var(--warn-text)}.cancel-view .note.a .i{color:var(--warn)}
.cancel-view .note.b{background:var(--info-soft);color:#2F5FBF}.cancel-view .note.b .i{color:var(--info)}
.cancel-view .note.r{background:var(--danger-soft);color:#C0323A}.cancel-view .note.r .i{color:var(--danger)}
.cancel-view .note b{font-weight:600}

/* Modal list */
.cancel-view .list{max-height:190px;overflow:auto;display:flex;flex-direction:column;gap:4px;border-radius:10px}
.cancel-view .list .li{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;font-size:10.5px;color:var(--label)}
.cancel-view .list .li .clogo{width:22px;height:22px;border-radius:6px;font-size:6.5px}
.cancel-view .list .li .cn{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.cancel-view .list .li .who{font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cancel-view .list .li .amt{font-weight:600;color:var(--text);white-space:nowrap}
.cancel-view .list .li .stt{font-size:9.5px;color:var(--muted);white-space:nowrap;min-width:92px;text-align:right}
.cancel-view .list .li.ok{background:var(--primary-soft)}.cancel-view .list .li.ok .stt{color:var(--primary-dark);font-weight:600}
.cancel-view .list .li.fail{background:var(--danger-soft)}.cancel-view .list .li.fail .stt{color:var(--danger);font-weight:600}
.cancel-view .list .li.run .stt{color:var(--warn-text);font-weight:600}

/* Progress bar */
.cancel-view .prog2{height:8px;border-radius:4px;background:var(--elev);overflow:hidden}
.cancel-view .prog2 b{display:block;height:100%;background:var(--danger);border-radius:4px;transition:width .15s}

/* Modal footer */
.cancel-view .mf .btn-solid,.cancel-view .mf .btn-ghost{height:34px}
.cancel-view .mf .btn-solid{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:0 16px;border-radius:17px;font-size:11px;font-weight:600;background:var(--primary);color:#fff;font-family:inherit;white-space:nowrap}
.cancel-view .mf .btn-solid:hover{opacity:.9}
.cancel-view .mf .btn-ghost{border:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:0 14px;border-radius:17px;font-size:10.5px;font-weight:500;background:var(--elev);color:var(--label);font-family:inherit;white-space:nowrap;box-shadow:var(--shadow)}
.cancel-view .mf .btn-ghost:hover{background:var(--elev)}
.cancel-view .mf .spacer{flex:1}
.cancel-view .mf .hint{font-size:10px;color:var(--muted)}

/* Modal header */
.cancel-view .mh .mi.g-red{background:var(--danger-soft);color:var(--danger)}
.cancel-view .g-red{background:var(--danger-soft);color:var(--danger)}
.cancel-view .mh .x{border:0;cursor:pointer}

/* Cancel Orders toast (overrides shared toast) */
.cancel-view .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--text);color:#fff;padding:10px 16px 10px 12px;border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:.22s;z-index:300;max-width:min(92vw,560px)}
.cancel-view .toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.cancel-view .toast .tic{width:28px;height:28px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;flex:none}
.cancel-view .toast .tic .i{width:14px;height:14px;stroke-width:2.6;color:#fff}
.cancel-view .toast.a .tic{background:var(--warn)}.cancel-view .toast.r .tic{background:var(--danger)}.cancel-view .toast.n .tic{background:#4B5563}
.cancel-view .toast b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cancel-view .toast span{display:block;font-size:10px;color:#C7CEDA;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cancel-view .toast .undo{margin-left:6px;height:26px;padding:0 12px;border-radius:13px;background:rgba(255,255,255,.14);color:#fff;font-size:10.5px;font-weight:600;border:0;cursor:pointer;flex:none}
.cancel-view .selbar.show~.toast.show{bottom:82px}
.cancel-view body.modal-open .selbar{opacity:0!important;pointer-events:none!important;transform:translateX(-50%) translateY(90px)!important}
.cancel-view body.modal-open .selbar.show~.toast.show{bottom:26px}

/* Responsive */
@media (max-width:1180px){.cancel-view .content{grid-template-columns:1fr}.cancel-view .rightcol{display:grid;grid-template-columns:1fr 1fr}.cancel-view .frow{grid-template-columns:1fr 28px 1fr;}.cancel-view .frow .msel,.cancel-view .frow .btn-solid.fetch{grid-column:span 3}}
@media (max-width:900px){.cancel-view .sidebar{display:none}.cancel-view .main{padding:12px 14px 100px}.cancel-view .topbar .search,.cancel-view .topbar .circ-btn:not(:first-child){display:none}.cancel-view .kpis{grid-template-columns:1fr 1fr}.cancel-view .rightcol{grid-template-columns:1fr}.cancel-view .frow{grid-template-columns:1fr}.cancel-view .frow .arrow{display:none}.cancel-view .frow .msel,.cancel-view .frow .btn-solid.fetch{grid-column:auto}.cancel-view .modal{width:100%}.cancel-view .rcards,.cancel-view .mrow{grid-template-columns:1fr}.cancel-view .twrap{max-height:none}}

/* ==========================================================================
   Settings — full-page view with own sidebar
   ========================================================================== */

.settings-view{
        position:fixed;inset:0;z-index:200;
        display:grid;grid-template-columns:260px 1fr;
        grid-template-rows:100%;
        background:var(--bg);overflow:hidden;
      }

/* Left sidebar */
.settings-sidebar{
  background:var(--card);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;
}

.settings-head{
  display:flex;align-items:center;gap:12px;
  padding:20px 20px 16px;border-bottom:1px solid var(--border);
}
.settings-head span{font-size:15px;font-weight:700;color:var(--text)}
.settings-head .i{color:var(--icon)}
/* Section heads are `h2` + `p` side by side. The h2 is a short label, so it
   must not be the flex item that gives way: without this it compressed and
   wrapped ("Control / Panel") while the paragraph took the space. */
.settings-head h2{
  flex:none;white-space:nowrap;
  font-size:15px;font-weight:700;color:var(--text);margin:0;
}
.settings-head p{
  flex:1;min-width:0;
  font-size:11px;color:var(--muted);line-height:1.5;margin:0;
}
.settings-ws-badge{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#22C55E,#0E9F6E);
  color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.settings-ws-info{flex:1;min-width:0}
.settings-ws-name{display:block;font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-ws-sub{display:block;font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-close{
  margin-left:auto;width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--icon);background:transparent;cursor:pointer;border:none;flex:none;
}
.settings-close:hover{background:var(--elev);color:var(--danger)}

/* Nav items */
.settings-nav{padding:16px 12px}
.settings-nav-label{
  font-size:9.5px;font-weight:600;color:var(--muted);
  letter-spacing:.5px;text-transform:uppercase;
  padding:0 10px;margin-bottom:6px;
}
.settings-nav-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:9px 10px;border-radius:8px;
  font-size:12px;font-weight:500;color:var(--label);
  cursor:pointer;border:none;background:none;text-align:left;
  font-family:inherit;
}
.settings-nav-item .i{width:16px;height:16px;color:var(--icon);flex:none}
.settings-nav-item:hover{background:var(--elev)}
.settings-nav-item.active{background:var(--primary-soft);color:var(--primary-dark);font-weight:600}
.settings-nav-item.active .i{color:var(--primary)}
.settings-nav-item.disabled{opacity:.45;cursor:not-allowed}
.settings-nav-item .coming-soon{
  margin-left:auto;font-size:9px;font-weight:600;
  background:var(--elev);color:var(--muted);
  padding:1px 7px;border-radius:8px;
}

/* Right content */
.settings-content{
      padding:32px 40px;overflow-y:auto;
      /* This is a grid item inside a fixed, overflow:hidden grid. Without
         min-height:0 the item's automatic minimum size is its content height,
         so it grows to fit instead of scrolling and the parent clips the
         overflow - the tab looks frozen and the wheel does nothing. */
      min-height:0;
      }
.settings-content h2{font-size:20px;font-weight:700;color:var(--text);margin-bottom:4px}
.settings-sub{font-size:12px;color:var(--muted);margin-bottom:20px}

/* Overview tab */
.overview-card{display:flex;align-items:flex-start;gap:20px;margin-top:20px}
.overview-avatar-wrap{flex:none}
.overview-avatar{
  width:64px;height:64px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#22C55E,#0E9F6E);
  color:#fff;font-size:22px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.overview-photo{
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:2px solid var(--border);
}
.overview-fields{flex:1;display:flex;flex-direction:column;gap:14px}
.overview-field{flex:1}
.overview-field label{display:block;font-size:10.5px;font-weight:600;color:var(--label);margin-bottom:5px}
.overview-account{display:flex;align-items:center;gap:10px}
.overview-account-photo{width:32px;height:32px;border-radius:50%;object-fit:cover}
.overview-account-initials{
  width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--primary-soft);color:var(--primary-dark);
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.overview-divider{height:1px;background:var(--border);margin:20px 0}
.overview-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.overview-row h4{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.overview-row p{font-size:11.5px;color:var(--muted)}
.overview-row b{color:var(--text);font-weight:600}

/* Shared input */
.settings-input{
  height:38px;border-radius:8px;background:var(--elev2);
  border:1px solid transparent;padding:0 14px;
  font-size:12px;color:var(--text);outline:0;width:100%;
  font-family:inherit;
}
.settings-input:focus{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 3px var(--primary-soft)}

/* Shared button */
.settings-btn{
  height:34px;padding:0 16px;border-radius:8px;
  font-size:11px;font-weight:600;cursor:pointer;border:none;
  display:inline-flex;align-items:center;gap:6px;font-family:inherit;
}
.settings-btn.primary{background:var(--primary);color:#fff}
.settings-btn.primary:hover{opacity:.9}
.settings-btn.ghost{background:var(--elev);color:var(--label)}
.settings-btn.ghost:hover{background:var(--border)}
.settings-btn.danger{background:var(--danger-soft);color:var(--danger)}
.settings-btn.danger:hover{opacity:.8}
/* Two actions on one integrations row (Review access + Disconnect). Both carry
   settings-btn so they match height; the wrapper keeps them on one line so the
   danger action does not wrap the ghost one. */
.settings-btn-group{display:inline-flex;align-items:center;gap:6px}

/* Team tab */
.team-list{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.team-row{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.team-row:hover{border-color:var(--primary-soft)}
.team-row.open{border-color:var(--primary);box-shadow:var(--shadow-pop)}
.team-head{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 16px;background:transparent;border:0;
  text-align:left;cursor:pointer;font-family:inherit;color:inherit;
}
.team-head:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.team-avatar{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:var(--primary-soft);color:var(--primary-dark);
  font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.team-photo{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.team-info{flex:1;min-width:0}
.team-info b{display:block;font-size:12px;font-weight:600;color:var(--text)}
.team-info span{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.team-you{
  font-style:normal;font-size:9px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--primary-dark);
  background:var(--primary-soft);border-radius:6px;padding:1px 6px;margin-left:6px;
}
.team-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.team-badge{
  font-size:10px;font-weight:600;color:var(--muted);
  background:var(--elev);padding:3px 10px;border-radius:12px;
}
.team-badge.is-admin{color:var(--primary-dark);background:var(--primary-soft)}
.team-count{font-size:10px;color:var(--muted)}
.team-chevron{flex:none;color:var(--muted);transition:transform .2s ease}
.team-row.open .team-chevron{transform:rotate(180deg)}

.team-panel{padding:14px 16px 16px 64px;border-top:1px solid var(--border);background:var(--elev)}
.team-panel-label{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.team-perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.perm-chip{
  display:flex;align-items:flex-start;gap:9px;padding:9px 11px;
  border:1px solid var(--border);border-radius:9px;background:var(--card);
  cursor:pointer;transition:border-color .15s ease, background .15s ease;
}
.perm-chip:hover{border-color:var(--primary-soft)}
.perm-chip.on{border-color:var(--primary);background:var(--primary-soft)}
.perm-chip input{
  appearance:none;-webkit-appearance:none;
  width:15px;height:15px;margin:1px 0 0;flex:none;
  border:1.5px solid var(--border);border-radius:4px;
  background:var(--card);cursor:pointer;position:relative;
  transition:background .15s ease, border-color .15s ease;
}
.perm-chip input:checked{background:var(--primary);border-color:var(--primary)}
.perm-chip input:checked::after{
  content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.perm-chip input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.perm-chip-body{display:flex;flex-direction:column;min-width:0}
.perm-chip-body b{font-size:12px;font-weight:600;color:var(--text);line-height:1.25}
.perm-chip-body small{font-size:10.5px;color:var(--muted);line-height:1.3;margin-top:1px}

.team-panel-foot{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.team-panel-foot .team-pw{max-width:220px;flex:1;min-width:160px}
.team-panel-note{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.45}
.team-panel-danger{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.team-del{
  background:none;border:0;padding:0;font-family:inherit;
  font-size:11.5px;font-weight:600;color:var(--danger);cursor:pointer;
}
.team-del:hover{text-decoration:underline}
.team-empty{font-size:12px;color:var(--muted);padding:14px 2px}

.team-invite{
  display:flex;flex-direction:column;gap:10px;padding:16px;
  border:1px dashed var(--border);border-radius:12px;background:var(--card);
}
.team-invite-title{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.team-invite-fields{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.team-invite-fields .settings-input{flex:1;min-width:180px}
.team-invite-note{font-size:11px;color:var(--muted);line-height:1.5}

/* Integrations tab */
.int-list{display:flex;flex-direction:column;gap:8px}
.int-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:10px;background:var(--card);
  box-shadow:var(--shadow);
}
.int-icon{
  width:40px;height:40px;border-radius:10px;flex:none;
  background:var(--elev);color:var(--muted);
  font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.int-icon img{width:24px;height:24px;object-fit:contain}
.int-icon.on{background:var(--primary-soft);color:var(--primary)}
.int-info{flex:1;min-width:0}
.int-info b{display:block;font-size:12px;font-weight:600;color:var(--text)}
/* Pills are inline by nature. `.int-info span` is one class more specific than
   `.pill`, so it used to force the "Connected" pill to `display:block` — which
   made it a full-width bar across the card, reading as a blank cover over the
   row. Only the plain description spans should stack. */
.int-info span:not(.pill):not(.int-consent){display:block;font-size:11px;color:var(--muted);margin-top:1px}
.int-info .pill{display:inline-block;margin-top:0}

/* Shopify connect modal */
.shp-status{font-size:11px;min-height:16px;margin-top:6px;color:var(--muted)}
.shp-status.err{color:var(--danger)}
.shp-status.ok{color:var(--primary)}
#shpConnectModal{z-index:400}
#shpConnectModal .mh .mi img{width:20px;height:20px;object-fit:contain}

/* Courier connect modal (Settings → Integrations) */
#crConnectModal{z-index:400}
#crConnectModal .mh .mi img{width:20px;height:20px;object-fit:contain}
#crConnectModal .cr-note{font-size:10.5px;color:var(--muted);margin-top:8px;line-height:1.45}
#crConnectModal .cr-fields{display:flex;flex-direction:column;gap:2px}
#crConnectModal .cr-status{font-size:11px;min-height:16px;margin-top:6px;color:var(--muted)}
#crConnectModal .cr-status.err{color:var(--danger)}
#crConnectModal .cr-status.ok{color:var(--primary)}

/* Workspace picker (multi-company login) */
.ws-picker{position:fixed;inset:0;background:rgba(15,17,23,.94);z-index:100001;display:flex;align-items:center;justify-content:center}
.ws-picker-card{background:#1a1d28;border-radius:16px;padding:32px 28px;max-width:420px;width:calc(100% - 32px);box-shadow:0 24px 64px rgba(0,0,0,.45)}
.ws-picker-card h2{color:#e4e6ed;font-size:17px;font-weight:700;margin:0 0 6px}
.ws-picker-card p{color:#99A2B7;font-size:12px;margin:0 0 18px}
.ws-list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto}
.ws-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#0f1117;border:1px solid #2a2f3a;border-radius:10px;padding:12px 14px;cursor:pointer;color:#e4e6ed;font-family:inherit;transition:border-color .15s,background .15s}
.ws-item:hover{border-color:#22C55E;background:#12151d}
.ws-avatar{width:36px;height:36px;border-radius:10px;background:#22C55E;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.ws-meta{flex:1;min-width:0}
.ws-meta b{display:block;font-size:12.5px;font-weight:600}
.ws-meta span{display:block;font-size:10.5px;color:#99A2B7;margin-top:2px}
.ws-role{font-size:10px;color:#99A2B7;background:#1e2128;padding:3px 8px;border-radius:10px;flex:none}

/* ==========================================================================
   Mark Returns — scoped under .returns-view
   ========================================================================== */

/* Scanner card */
.returns-view .scanner{padding:16px 18px 14px}
.returns-view .fh{display:flex;align-items:center;gap:10px;justify-content:space-between}
.returns-view .fh h3{font-size:13px}
.returns-view .fh .right{display:flex;align-items:center;gap:8px}
.returns-view .fh .sub{font-size:10.5px;color:var(--muted);margin-top:2px}

/* Video viewport */
.returns-view .vf{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;
  background:#111;overflow:hidden;margin-top:12px;
}
.returns-view .vf video{width:100%;height:100%;object-fit:cover;display:block}
.returns-view .vf.active .scan-line{display:block}
.returns-view .vf.hit{animation:flashHit .35s}
.returns-view .vf.dup{animation:flashDup .35s}
.returns-view .vf.bad{animation:flashBad .35s}
@keyframes flashHit{0%{box-shadow:inset 0 0 0 3px var(--primary)}100%{box-shadow:none}}
@keyframes flashDup{0%{box-shadow:inset 0 0 0 3px var(--warn)}100%{box-shadow:none}}
@keyframes flashBad{0%{box-shadow:inset 0 0 0 3px var(--danger)}100%{box-shadow:none}}

/* Reticle */
.returns-view .reticle{
  position:absolute;inset:20%;pointer-events:none;
}
.returns-view .reticle span{
  position:absolute;width:20px;height:20px;border-color:var(--primary);border-style:solid;border-width:0;
}
.returns-view .reticle span:nth-child(1){top:0;left:0;border-top-width:3px;border-left-width:3px;border-radius:4px 0 0 0}
.returns-view .reticle span:nth-child(2){top:0;right:0;border-top-width:3px;border-right-width:3px;border-radius:0 4px 0 0}
.returns-view .reticle span:nth-child(3){bottom:0;left:0;border-bottom-width:3px;border-left-width:3px;border-radius:0 0 0 4px}
.returns-view .reticle span:nth-child(4){bottom:0;right:0;border-bottom-width:3px;border-right-width:3px;border-radius:0 0 4px 0}

/* Scan line */
.returns-view .scan-line{
  display:none;position:absolute;left:20%;right:20%;height:2px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
  animation:scanMove 2s ease-in-out infinite;
}
@keyframes scanMove{0%{top:20%}50%{top:80%}100%{top:20%}}

/* Flash */
.returns-view .flash{position:absolute;inset:0;background:var(--primary);opacity:0;pointer-events:none;border-radius:12px}

/* Chips */
.returns-view .chips{
  position:absolute;top:10px;left:10px;display:flex;gap:6px;pointer-events:none;
}
.returns-view .chip{
  height:24px;padding:0 8px;border-radius:12px;font-size:9.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(8px);
}
.returns-view .chip.g{background:rgba(34,197,94,.8)}
.returns-view .chip.warn{background:rgba(245,165,36,.8)}
.returns-view .chip.n{background:rgba(255,255,255,.15)}

/* Camera off state */
.returns-view .cam-off{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;color:#999;
}
.returns-view .cam-off-ic{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.returns-view .cam-off-ic .i{width:22px;height:22px;color:#666}
.returns-view .cam-off b{font-size:13px;color:#ccc}
.returns-view .cam-off p{font-size:11px;color:#888;text-align:center;max-width:260px}

/* Camera controls */
.returns-view .cam-ctrl{
  display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;
}
.returns-view .cam-ctrl .btn-sm.active{background:var(--primary-soft);color:var(--primary)}

/* Manual input */
.returns-view .manual-row{
  display:flex;gap:8px;margin-top:10px;
}
.returns-view .tip{font-size:10px;color:var(--muted);margin-top:6px}

/* Content layout */
.returns-view .content{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;margin-top:14px;align-items:start}
.returns-view .left,.returns-view .rightcol{display:flex;flex-direction:column;gap:14px;min-width:0}

/* Expected returns */
.returns-view .expected{padding:16px 18px 10px}
.returns-view .exp-list{max-height:260px;overflow-y:auto;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.returns-view .exp-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  background:var(--elev2);font-size:10.5px;
}
.returns-view .exp-ctn{flex:none}
.returns-view .exp-info{flex:1;min-width:0}
.returns-view .exp-info b{display:block;font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.returns-view .exp-info span{display:block;font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.returns-view .exp-cod{font-weight:600;color:var(--text);white-space:nowrap}

/* Batch card */
.returns-view .batch{padding:16px 18px 14px}
.returns-view .batch-list{max-height:320px;overflow-y:auto;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.returns-view .batch-item{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
  background:var(--elev2);font-size:10.5px;
}
.returns-view .batch-item.unmatched{border-left:3px solid var(--warn)}
.returns-view .batch-ctn{flex:none}
.returns-view .batch-info{flex:1;min-width:0}
.returns-view .batch-info b{display:block;font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.returns-view .batch-info span{display:block;font-size:10px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.returns-view .batch-rm{
  width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--muted);border:none;cursor:pointer;flex:none;
}
.returns-view .batch-rm:hover{background:var(--danger-soft);color:var(--danger)}
.returns-view .batch-summary{
  display:flex;gap:12px;margin-top:8px;font-size:10px;color:var(--muted);flex-wrap:wrap;
}
.returns-view .batch-summary .warn{color:var(--warn-text);font-weight:600}
.returns-view .batch .btn-solid{width:100%;margin-top:10px;justify-content:center}
.returns-view .batch .btn-solid:disabled{opacity:.5;cursor:not-allowed}

/* History */
.returns-view .history{padding:16px 18px 10px}
.returns-view .hist-list{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.returns-view .hist-item{
  display:flex;align-items:center;gap:10px;padding:8px 4px;
  border-bottom:1px solid var(--border);
}
.returns-view .hist-item:last-child{border-bottom:0}
.returns-view .hist-ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.returns-view .hist-ic .i{width:14px;height:14px}
.returns-view .hist-info{flex:1;min-width:0}
.returns-view .hist-info b{display:block;font-size:11px;font-weight:600;color:var(--text)}
.returns-view .hist-info span{display:block;font-size:10px;color:var(--muted);margin-top:1px}

/* Done view */
.returns-view .done-view{margin-top:14px}
.returns-view .done-view .btn-ghost{margin-bottom:14px}

/* Scanner responsive */
@media(max-width:1100px){.returns-view .content{grid-template-columns:1fr}.returns-view .rightcol{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:768px){.returns-view .content{grid-template-columns:1fr}.returns-view .rightcol{grid-template-columns:1fr}}

/* Returns batch & scanner */
.returns-view .batch-row:hover{background:var(--elev)}
.returns-view .exp-row:hover{background:var(--elev)}
.returns-view .recent-row:hover{background:var(--elev)}
.returns-view .btn-ghost.spinning svg.i{animation:returns-spin .8s linear infinite}
.returns-view .btn-ghost.spinning{opacity:.7;pointer-events:none}
@keyframes returns-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.returns-view .clogo{
  width:26px;height:26px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:7px;font-weight:700;letter-spacing:.3px;flex:none;
  background:var(--elev);color:var(--label);
}
.returns-view .clogo.c-postex{background:#fff3e0;color:#e65100}
.returns-view .clogo.c-tcs{background:#e8f5e9;color:#1b5e20}
.returns-view .clogo.c-leopards{background:#e3f2fd;color:#0d47a1}
.returns-view .clogo.c-trax{background:#fce4ec;color:#b71c1c}
.returns-view .clogo.c-mnp{background:#f3e5f5;color:#4a148c}

/* Returns dark mode fixes */
[data-theme="dark"] .returns-view .clogo{background:var(--elev);color:var(--label)}
[data-theme="dark"] .returns-view .clogo.c-postex{background:rgba(124,77,230,.15);color:#a78bfa}
[data-theme="dark"] .returns-view .clogo.c-tcs{background:rgba(211,50,59,.15);color:#f87171}
[data-theme="dark"] .returns-view .clogo.c-leopards{background:rgba(37,99,235,.15);color:#60a5fa}
[data-theme="dark"] .returns-view .clogo.c-trax{background:rgba(239,68,68,.15);color:#fb923c}
[data-theme="dark"] .returns-view .clogo.c-mnp{background:rgba(15,118,110,.15);color:#2dd4bf}
[data-theme="dark"] .returns-view #ret-notFoundToast .btn-ghost{color:var(--danger);border-color:rgba(239,68,68,.3)}
[data-theme="dark"] .returns-view .vf{background:#0a0a0a}