/*
 * admin.css — BR E-Bikes Admin Panel Styles
 * Extracted from src/views/admin.html.
 * Section 1: Main stylesheet (head <style> block, lines 36576–38395)
 * Section 2: eBay-tabs component styles
 * Section 3: Stocktake-wrap component styles
 * Section 4: BR Agent widget styles
 */

/* ── SECTION 1: MAIN STYLESHEET ────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── Kinetic Light theme ── warmer off-white workspace, dark sidebar/topbar,
     kinetic-green gradient reserved for primary CTAs and accents only.
     Legacy token NAMES kept so existing rules don't break — values updated. */
  --bg:#f7f8f6;--white:#fff;--border:#eaeae6;--border2:#d8d8d2;
  --green:#16a34a;--green-l:#e8f7ed;--blue:#2563eb;--blue-l:#dbeafe;
  --red:#dc2626;--red-l:#fee2e2;--amber:#d97706;--amber-l:#fef3c7;
  --text:#0d0d0d;--t2:#525252;--t3:#8a8a86;
  --f:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;
  --sh:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.06);
  --sh2:0 6px 20px rgba(0,0,0,.10);
  --bnav:68px;
  /* Brand identity — matches public site */
  --brand:#22c55e;
  --brand-d:#16a34a;
  --brand-grad:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);
  --brand-glow:rgba(34,197,94,.18);
  /* Dark surface for sidebar + topbar */
  --dark:#161616;
  --dark-2:#1f1f1f;
  --dark-border:rgba(255,255,255,.08);
  --on-dark:#f4f4f3;
  --on-dark-2:#a8a8a4;
  --on-dark-3:#6e6e6a;
  /* Density / spacing */
  --r:10px;        /* default radius */
  --r-sm:7px;      /* small radius */
  --r-lg:14px;     /* large radius */
  --row-h:52px;    /* table row min-height */
  --gap:12px;      /* default gap */
  --pad:16px;      /* default card padding */

  /* ── Mobile-redesign token aliases ──
     Used by new mobile components (cards, sticky bars, bottom nav).
     Aliased instead of overwriting the legacy tokens above so desktop
     visuals stay byte-identical. */
  --m-brand:#16A34A;
  --m-ink:#111111;
  --m-surface-bg:#F8FAFC;
  --m-card:#FFFFFF;
  --m-border:#E5E7EB;
  --m-border-strong:#D1D5DB;
  --m-muted:#6B7280;
  --m-danger:#EF4444;
  --m-warning:#F59E0B;
  --m-blue:#2563EB;
  --m-purple:#7C3AED;
  --m-radius-card:16px;
  --m-radius-btn:12px;
  --m-pad:16px;
  --m-shadow:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.06);
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--f);font-size:13.5px;overflow:hidden}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
/* Use 100% so we inherit from #app-shell (which is 100dvh). 100vh on
   iOS Safari ignores the dynamic browser chrome and overflows past the
   visible viewport — combined with overflow:hidden it clips the bottom
   of every page. dvh is the modern unit; the dvh fallback covers older
   browsers that don't support it. */
.app{display:flex;height:100%;min-height:100dvh;width:100%;overflow:hidden}

/* ── SIDEBAR (desktop) ── */
.sb{width:218px;min-width:218px;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;box-shadow:var(--sh);z-index:10}
.sb-logo{padding:16px 14px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.sb-ic{width:30px;height:30px;background:var(--green);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(22,163,74,.3)}
.sb-name{font-weight:700;font-size:13.5px}.sb-tag{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-top:1px}
.sb-br{margin:9px 9px 4px;padding:7px 10px;background:var(--bg);border:1px solid var(--border);border-radius:7px;font-size:10px;color:var(--t3)}
.sb-br b{display:block;font-size:11px;color:var(--text);font-weight:600;margin-top:1px}
.sb-nav{flex:1;padding:5px 8px;overflow-y:auto}
.nl{font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--t3);padding:9px 8px 3px}
.ni{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;color:var(--t2);font-size:13px;transition:all .15s;margin-bottom:2px;user-select:none;border:1px solid transparent}
.ni:hover{background:var(--bg);color:var(--text)}.ni.on{background:var(--green-l);color:var(--green);font-weight:600;border-color:rgba(22,163,74,.15)}.ni.on svg{stroke:var(--green)}
.nbadge{margin-left:auto;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;font-family:var(--mono)}
.nr{background:var(--red-l);color:var(--red)}.ng{background:var(--green-l);color:var(--green)}
.sb-ft{padding:9px;border-top:1px solid var(--border)}
.sc{display:flex;align-items:center;gap:8px;padding:9px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.sa{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--green),#4ade80);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:52px;min-height:52px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 18px;box-shadow:var(--sh);flex-shrink:0}
.tb-title{font-size:14px;font-weight:700;flex-shrink:0}
.tb-tabs{display:flex;gap:2px;flex:1;padding-left:8px;overflow-x:auto}
.tt{padding:5px 12px;border-radius:6px;font-size:12px;cursor:pointer;color:var(--t2);font-weight:500;user-select:none;transition:all .15s;border-bottom:2px solid transparent;white-space:nowrap}
.tt:hover{color:var(--text)}.tt.on{color:var(--green);font-weight:600;border-bottom-color:var(--green)}
.sbox{display:flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--border2);border-radius:8px;padding:5px 10px;width:180px;transition:border-color .15s ease, box-shadow .15s ease}
.sbox input{background:none;border:none;outline:none;color:var(--text);font-family:var(--f);font-size:12px;width:100%}
.sbox input::placeholder{color:var(--t3)}
.sbox:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--brand-glow)}
.ib{width:32px;height:32px;border-radius:8px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);position:relative;flex-shrink:0}
.nd{position:absolute;top:6px;right:6px;width:6px;height:6px;background:var(--green);border-radius:50%;border:1.5px solid var(--white)}

/* ── BOTTOM NAV (mobile) ── */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bnav);background:#fff;border-top:1px solid #e5e7eb;z-index:100;box-shadow:0 -2px 16px rgba(0,0,0,.07);padding-bottom:env(safe-area-inset-bottom,0px)}
.bn-inner{display:flex;height:100%;align-items:stretch;width:100%}
.bn-item,.bn-more{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:#9ca3af;font-weight:700;user-select:none;position:relative;padding:6px 0 4px;-webkit-tap-highlight-color:transparent;transition:color .15s,transform .12s;overflow:hidden}
.bn-item:active,.bn-more:active{transform:scale(.85)}
.bn-item.on{color:#16a34a}
.bn-emoji{font-size:22px;line-height:1;display:block;text-align:center}
.bn-label{font-size:9px;font-weight:700;white-space:nowrap;text-align:center;width:100%;padding:0 2px;box-sizing:border-box}
.bn-badge{position:absolute;top:4px;right:calc(50% - 18px);min-width:16px;height:16px;background:#ef4444;border-radius:8px;border:2px solid #fff;font-size:8px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}

/* More drawer */
.more-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;opacity:0;transition:opacity .25s}
.more-overlay.open{opacity:1}
.more-drawer{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.15);z-index:200;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.more-drawer.open{transform:translateY(0)}
.more-handle-row{display:flex;justify-content:center;padding:12px 0 8px}
.more-handle{width:40px;height:4px;background:#e5e7eb;border-radius:2px}
.more-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;color:#9ca3af;padding:0 2px 12px}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-bottom:4px}
.more-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 11px;border-radius:16px;background:#f9fafb;cursor:pointer;font-size:11px;font-weight:700;color:#374151;user-select:none;text-align:center;-webkit-tap-highlight-color:transparent;transition:all .15s;border:2px solid transparent}
.more-item:active{transform:scale(.93)}
.more-item.on{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0}
.more-item .mi-emoji{font-size:26px;line-height:1}
.more-item-logout{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 16px;border-radius:14px;background:#fff1f2;cursor:pointer;font-size:13px;font-weight:700;color:#ef4444;margin-top:8px;-webkit-tap-highlight-color:transparent}
.more-item-logout:active{transform:scale(.97)}
.staff-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;user-select:none}
.staff-row:hover{background:#f9fafb}.staff-row.on{background:var(--green-l);border-left:3px solid var(--green)}

/* ── PAGES ── */
.pg{display:none;flex:1;overflow:hidden;flex-direction:column;min-width:0}
.pg.on{display:flex}
.ct{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 18px;min-width:0}
@keyframes fu{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.pg.on .ct,.pg.on .cl,.pg.on .pos-layout,.pg.on .settings-layout{animation:fu .18s ease}

/* ── DATA REFRESH OVERLAY ── */
#app-loading-overlay{display:none;position:fixed;inset:0;z-index:99998;align-items:center;justify-content:center;background:rgba(247,248,246,.78);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
#app-loading-overlay .app-loading-card{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh2);padding:16px 18px;min-width:220px;display:flex;align-items:center;gap:10px}
#app-loading-overlay .app-loading-spinner{width:18px;height:18px;border:2px solid #d1d5db;border-top-color:var(--green);border-radius:50%;animation:app-spin .8s linear infinite;flex-shrink:0}
#app-loading-overlay .app-loading-text{font-size:12.5px;color:var(--t2);font-weight:600}
@keyframes app-spin{to{transform:rotate(360deg)}}

/* ── CARDS ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh)}
.cp{padding:15px}

/* ── KPI ── */
.kg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
/* 5-col variant — used by Maintenance to keep all five KPIs on one row.
   Falls back to 2-col on mobile via the existing .kg media query. */
.kg.kg-5{grid-template-columns:repeat(5,1fr)}
@media (max-width: 1100px){
  .kg.kg-5{grid-template-columns:repeat(3,1fr)}
}
/* 8-col compact variant — Payments KPI strip on a single row. */
.kg.kg-8{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:8px}
.kg-8 .kpi{padding:10px 11px}
.kg-8 .kpi .kl{font-size:8.5px;margin-bottom:4px}
.kg-8 .kpi .kv{font-size:18px}
.kg-8 .kpi .ks{font-size:8.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width: 1280px){ .kg.kg-8{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 720px){ .kg.kg-8{grid-template-columns:repeat(2,1fr)} }
/* Period picker (segmented control) */
.pay-period-pick{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px}
.pay-period-btn{border:none;background:none;font-family:var(--f);font-size:11.5px;font-weight:600;color:var(--t2);padding:5px 10px;border-radius:6px;cursor:pointer;white-space:nowrap}
.pay-period-btn:hover{color:var(--text)}
.pay-period-btn.on{background:var(--white);color:var(--green);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* ── Payments tab: Actions cell — clean 2x2 grid ──
   Previously the four buttons (Mark Paid / Remind / Lock / Chase) used
   flex-wrap which produced uneven 2-row layouts because each button has
   a different intrinsic width. A 2-col grid forces a tidy 2x2 with all
   four buttons the same size. The Mark Paid wins visual prominence
   because it's first in the source order. */
.pay-actions-cell{padding:8px 10px !important}
.pay-actions-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  width:100%;
  min-width:200px;
}
.pay-act-btn{
  font-size:11px !important;
  padding:6px 8px !important;
  min-height:30px;
  justify-content:center;
  white-space:nowrap;
  width:100%;
}
.pay-act-chase{
  background:#25d366 !important;
  color:#fff !important;
  border-color:#25d366 !important;
  text-decoration:none !important;
}
/* New mockup-style action row: Mark as Paid · Chase · ⋮ overflow */
.pay-actions-row{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.pay-actions-row .pay-act-btn{white-space:nowrap}
.pay-more-btn{padding:6px 9px !important;min-width:auto !important;width:auto !important;font-size:15px !important;line-height:1}
.pay-menu-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:none;padding:8px 10px;border-radius:6px;font-size:12.5px;color:var(--text);cursor:pointer;font-family:var(--f)}
.pay-menu-item:hover{background:var(--bg)}
.kpi{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--sh);transition:box-shadow .15s}
.kpi:hover{box-shadow:var(--sh2)}.kpi.gk{border-top:3px solid var(--green);}
.kl{font-size:9.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.gk .kl{color:var(--t3)}.gk .kv{color:var(--green)}.gk .ks{color:var(--t3)}
.kv{font-size:22px;font-weight:700;letter-spacing:-.4px;font-family:var(--mono);line-height:1;color:var(--text)}
.ks{font-size:10.5px;color:var(--t3);margin-top:5px}
.dl{font-size:11px;font-weight:600;font-family:var(--mono);margin-left:5px;padding:1px 5px;border-radius:4px}
.du{color:var(--green);background:var(--green-l)}.dd{color:var(--red);background:var(--red-l)}.dn{color:var(--t2);background:var(--bg)}
.kb{height:5px;background:rgba(255,255,255,.3);border-radius:3px;margin-top:10px;overflow:hidden}
.kbf{height:100%;background:rgba(255,255,255,.75);border-radius:3px}

/* ── LAYOUT ── */
.g21{display:grid;grid-template-columns:1fr 296px;gap:12px;margin-bottom:14px}
.gcol{display:flex;flex-direction:column;gap:10px}

/* ── CHART ── */
.chd{display:flex;align-items:flex-start;justify-content:space-between;padding:13px 16px 10px;border-bottom:1px solid var(--border)}
.ct2{font-size:13px;font-weight:600}.cs{font-size:11.5px;color:var(--t3);margin-top:2px}
.cttabs{display:flex;gap:3px;background:var(--bg);border-radius:7px;padding:3px}
.ctab{padding:3px 9px;border-radius:5px;font-size:11.5px;font-weight:600;cursor:pointer;color:var(--t2);background:transparent;border:none;font-family:var(--f);transition:all .15s;user-select:none}
.ctab.on{background:var(--white);color:var(--green);box-shadow:var(--sh)}

/* ── TABLE ── */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{font-size:9.5px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);background:var(--bg)}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s;cursor:pointer}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:#f9fafb}
td{padding:10px 12px;font-size:12.5px;vertical-align:middle}
.mn{font-family:var(--mono)}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:6px;font-size:10.5px;font-weight:600;white-space:nowrap}
.b-g{background:var(--green-l);color:var(--green)}.b-r{background:var(--red-l);color:var(--red)}
.b-a{background:var(--amber-l);color:var(--amber)}.b-b{background:var(--blue-l);color:var(--blue)}.b-gr{background:#f3f4f6;color:var(--t2)}.b-p{background:#f3e8ff;color:#7c3aed}.b-sold{background:#e5e7eb;color:#374151}
.tag{display:inline-flex;padding:2px 6px;border-radius:4px;font-size:10.5px;font-weight:500;background:#f3f4f6;color:var(--t2);border:1px solid var(--border)}

/* ── ENTITY ── */
.ent{display:flex;align-items:center;gap:8px}
.av{width:26px;height:26px;border-radius:50%;background:var(--bg);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;color:var(--t2);flex-shrink:0}
.avsq{width:26px;height:26px;border-radius:6px;background:var(--green-l);display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;color:var(--green);flex-shrink:0}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--f);border:1px solid transparent;white-space:nowrap;transition:all .15s}
.bg{background:var(--green);color:#fff;border-color:var(--green)}.bg:hover{background:#15803d}
.bb{background:var(--blue);color:#fff;border-color:var(--blue)}.bb:hover{background:#1d4ed8}
.bo{background:var(--white);color:var(--t2);border-color:var(--border2)}.bo:hover{background:var(--bg)}
.bgh{background:transparent;border:none;color:var(--blue);cursor:pointer;font-family:var(--f);font-size:13px;font-weight:600;padding:4px 6px}

/* ── SPLIT BAR ── */
.sr2{margin-bottom:11px}
.slbl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--t2);margin-bottom:5px}
.slbl b{color:var(--text);font-weight:600}
.sbar{height:24px;border-radius:6px;overflow:hidden;display:flex}
.seg{display:flex;align-items:center;font-size:10.5px;font-weight:700}

/* ── MISC ── */
.ab{display:flex;align-items:center;gap:9px;background:#fffbeb;border:1px solid #fde68a;border-radius:9px;padding:9px 13px;margin-bottom:14px;font-size:12.5px;color:var(--amber)}
.sb2{height:4px;border-radius:2px;background:var(--border);margin-top:3px;overflow:hidden}
.sf{height:100%;border-radius:2px}.sg{background:var(--green)}.sa2{background:var(--amber)}.sr3{background:var(--red)}
.blr{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);font-size:12.5px}.blr:last-child{border-bottom:none}
.ci{display:flex;gap:9px;padding:9px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--border);margin-bottom:5px}
.fbar{height:5px;background:rgba(255,255,255,.3);border-radius:3px;margin-top:9px;overflow:hidden}
.fbf{height:100%;background:rgba(255,255,255,.8);border-radius:3px}
.fb,.jfb,.rfb{padding:5px 10px;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--t2);font-family:var(--f);transition:all .15s;user-select:none;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center}
.fb.on,.jfb.on,.rfb.on{background:var(--green);color:#fff;border-color:var(--green)}
.rt{display:flex;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:3px}
.rtb{padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;color:var(--t2);transition:all .15s;user-select:none}
.rtb.on{background:var(--white);color:var(--text);font-weight:600;box-shadow:var(--sh)}
.divl{height:1px;background:var(--border);margin:10px 0}
.pr{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border)}.pr:last-child{border-bottom:none}
.pk{font-size:11.5px;color:var(--t3)}.pv{font-size:12.5px;font-weight:500}
.doc{padding:9px 11px;border-radius:8px;border:1px solid;display:flex;align-items:center;gap:7px;font-size:12px}
.dok{border-color:#bbf7d0;background:var(--green-l);color:var(--green)}.dno{border-color:var(--border);background:var(--bg);color:var(--t2)}

/* ── CLIENTS ── */
.cl{display:flex;flex:1;overflow:hidden;min-width:0}
.clp{width:320px;min-width:320px;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--white)}
.crow{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;user-select:none}
.crow:hover{background:#f9fafb}.crow.on{background:var(--green-l);border-left:3px solid var(--green)}

/* ── POS ── */
.pos-layout{display:flex;flex:1;overflow:hidden}
.pos-panel{display:none;flex:1;overflow:hidden;flex-direction:column}.pos-panel.on{display:flex}
.pos-left{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:16px;gap:12px}
.pos-right{width:400px;min-width:400px;border-left:1px solid var(--border);display:flex;flex-direction:column;background:var(--white)}
@media(max-width:1280px){.pos-right{width:360px;min-width:360px}}
.pos-product{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:14px 12px;cursor:pointer;transition:all .15s;text-align:center;display:flex;flex-direction:column;align-items:center;user-select:none}
.pos-product:hover{border-color:var(--green);box-shadow:0 0 0 3px var(--green-l)}
.pos-product.pos-oos{opacity:.45;cursor:not-allowed;border-style:dashed}
.pos-product.pos-oos:hover{border-color:var(--red);box-shadow:none}
.pos-product.flash{background:var(--green-l);border-color:var(--green)}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;overflow-y:auto}
.basket-item{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px solid var(--border)}
.basket-item:last-child{border-bottom:none}
.basket-item-head{display:flex;align-items:flex-start;gap:8px;justify-content:space-between}
.basket-item-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.basket-item-each{font-size:11px;color:var(--t3);margin-top:2px}
.basket-item-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:space-between}
.basket-item-row .qty-group{display:flex;align-items:center;gap:6px}
.basket-item-row .price-cell{font-family:var(--mono);font-weight:700;font-size:14px;text-align:right;min-width:62px}
.basket-item-row .price-cell.discounted{color:var(--green)}
.basket-item-row .price-strike{font-family:var(--mono);font-size:11px;color:var(--t3);text-decoration:line-through;margin-left:4px}
.basket-disc-chip{display:inline-block;font-size:10.5px;font-weight:600;border-radius:4px;padding:1px 6px;margin-top:3px}
.qty-btn{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--bg);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;font-family:var(--f);color:var(--text);transition:all .15s}
.qty-btn:hover{background:var(--green-l);border-color:var(--green);color:var(--green)}
.rm-btn{width:22px;height:22px;border-radius:5px;border:none;background:transparent;cursor:pointer;color:var(--t3);font-size:13px;display:flex;align-items:center;justify-content:center;transition:color .15s}
.rm-btn:hover{color:var(--red)}
.pay-method{flex:1;padding:10px;border:2px solid var(--border);border-radius:9px;background:var(--white);cursor:pointer;font-family:var(--f);font-size:12.5px;font-weight:500;color:var(--t2);transition:all .15s;user-select:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.pay-method.on{border-color:var(--green);background:var(--green-l);color:var(--green)}
.pay-method.on .pay-icon{color:var(--green)}

/* POS modal */
.pos-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;align-items:center;justify-content:center}
.pos-modal-bg.open{display:flex}
.pos-modal{background:var(--white);border-radius:16px;padding:28px;width:340px;max-width:90vw;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.2)}

/* ── RENTALS ── */
.rent-tab{padding:12px 16px;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;user-select:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.rent-tab:hover{color:var(--text)}.rent-tab.on{color:var(--green);border-bottom-color:var(--green);font-weight:600}
.rent-panel{display:none;flex:1;overflow:hidden;flex-direction:column}.rent-panel.on{display:flex}
.ag-row{cursor:pointer;transition:background .1s}.ag-row:hover{background:#f9fafb}
.ag-row.ag-sel td{background:var(--green-l)}.ag-sel{border-left:3px solid var(--green)}

/* ── AUTOCOMPLETE ── */
.ac-drop{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);border:1px solid var(--border2);border-radius:9px;box-shadow:var(--sh2);z-index:500;max-height:220px;overflow-y:auto;margin-top:3px}
.ac-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.ac-item:last-child{border-bottom:none}
.ac-item:hover{background:var(--green-l)}

/* ── GLOBAL BRANCH SELECTOR ── */
.sb-branch-opt{background:var(--white)}
.sb-branch-opt:hover{background:var(--bg)}
.sb-branch-opt.on{background:var(--green-l);color:var(--green);font-weight:700}
#sb-branch-dd{display:none}
#sb-branch-dd.open{display:block !important}

/* ── INVENTORY TABS ── */
.inv-tabbar{display:flex;flex-direction:row;background:var(--white);border-bottom:2px solid var(--border);flex-shrink:0;padding:0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.inv-tabbar::-webkit-scrollbar{display:none}
.inv-tab{padding:12px 16px;font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;user-select:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.inv-tab:hover{color:var(--text)}.inv-tab.on{color:var(--green);border-bottom-color:var(--green);font-weight:600}
.inv-panel{display:none;flex:1;overflow:hidden;flex-direction:column;min-width:0}.inv-panel.on{display:flex}
.br-panel{display:none;flex:1;overflow:hidden;flex-direction:column}.br-panel.on{display:flex}
.inv-select{padding:5px 9px;border:1px solid var(--border2);border-radius:7px;font-family:var(--f);font-size:12px;color:var(--text);background:var(--white);cursor:pointer;outline:none}
.inv-select:focus{border-color:var(--green)}
/* Keep the Parts Catalogue filter selects compact + uniform so the
   "+ Add Part" / "+ Category" buttons don't get pushed onto a 2nd row. */
#parts-branch-filter,#parts-cat-filter,#parts-supp-filter,#parts-sort{width:126px;min-width:0;text-overflow:ellipsis}
/* Table pagination buttons (Fleet etc.) */
.fpg-btn{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--border2);background:var(--white);color:var(--text);border-radius:7px;font-size:12px;font-weight:600;font-family:var(--f);cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.fpg-btn:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.fpg-btn.on{background:var(--green);border-color:var(--green);color:#fff}
.fpg-btn:disabled{opacity:.4;cursor:default}
/* Uniform client-profile action buttons — equal size in a grid, with a
   subtle modern hover lift. */
.cd-act{justify-content:center;font-size:12.5px;font-weight:600;border-radius:9px;min-height:42px;padding:8px 10px;gap:5px;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease}
.cd-act:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.08)}
.cd-action-btn{transition:transform .12s ease,box-shadow .15s ease}
.cd-action-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(34,197,94,.28)}
/* Client profile: flow the middle sections into 2 balanced columns so the wide
   detail panel isn't a single tall scroll. Header + actions stay full-width
   (they're outside this wrapper). Cards never split across a column. */
.cd-cols{column-count:2;column-gap:10px}
.cd-cols > *{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 10px !important;display:block;width:100%}
@media (max-width:1279px){ .cd-cols{column-count:1} }

/* ── MODALS ── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:300;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.modal-x{background:none;border:none;font-size:18px;cursor:pointer;color:var(--t3);padding:4px 8px;border-radius:6px;line-height:1;flex-shrink:0}.modal-x:hover{color:var(--red);background:var(--red-l)}
.modal-bg.open{display:flex}
.modal-box,.modal{background:var(--white);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.2);width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.modal-hd{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.modal-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--bg);border-radius:14px 14px 0 0}
.modal-body{padding:18px 20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:12px}
.modal-ft{padding:13px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0}
.modal-close{background:none;border:none;font-size:16px;cursor:pointer;color:var(--t3);padding:4px 6px;border-radius:5px}.modal-close:hover{color:var(--red);background:var(--red-l)}
.form-grp{display:flex;flex-direction:column;gap:5px}.form-grp label{font-size:11.5px;font-weight:600;color:var(--t2)}
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.po-item-row{display:flex;gap:8px;align-items:center;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.po-item-row select,.po-item-row input{flex:1;padding:5px 8px;border:1px solid var(--border2);border-radius:6px;font-family:var(--f);font-size:12px;background:var(--white);color:var(--text);outline:none}
.po-item-row input{max-width:70px}
.po-item-row .rm-btn{width:24px;height:24px;border-radius:5px;border:none;background:var(--red-l);color:var(--red);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Supplier list */
.sup-row{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;user-select:none}
.sup-row:hover{background:#f9fafb}.sup-row.on{background:var(--green-l);border-left:3px solid var(--green)}
.sup-ic{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}

/* PO status */
.po-draft{background:#f3f4f6;color:var(--t2)}.po-sent{background:var(--blue-l);color:var(--blue)}.po-partial{background:var(--amber-l);color:var(--amber)}.po-received{background:var(--green-l);color:var(--green)}

/* Log type */
.log-out{background:var(--red-l);color:var(--red)}.log-in{background:var(--green-l);color:var(--green)}.log-adj{background:var(--amber-l);color:var(--amber)}

/* Job parts selector */
.job-part-row{display:flex;gap:8px;align-items:center;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.job-part-row select,.job-part-row input{padding:5px 8px;border:1px solid var(--border2);border-radius:6px;font-family:var(--f);font-size:12px;background:var(--white);color:var(--text);outline:none}

/* ── FLEET ── */
.fleet-row{cursor:pointer;transition:background .1s}
.fleet-row:hover{background:#f9fafb}
.fleet-row.fleet-sel{background:var(--blue-l) !important}
.cal-view-btn.on{background:var(--green)!important;color:#fff!important}
#pg-calendar:fullscreen{background:var(--white);display:flex;flex-direction:column}
.cal-fullscreen{position:fixed!important;top:0;left:0;right:0;bottom:0;z-index:9999;background:var(--white)!important;display:flex!important;flex-direction:column;overflow:auto}
.cal-fullscreen .modal-bg,.cal-fullscreen .modal-overlay{z-index:10000!important}
body:has(.cal-fullscreen) .modal-bg.open,body:has(.cal-fullscreen) .modal-overlay{z-index:10001!important}
.cal-view-btn:hover:not(.on){background:var(--bg2)}

/* ── A11Y: visible keyboard focus on all interactive elements ── */
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}
.btn:focus-visible,button:focus-visible,a:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.bn-item:focus-visible,.ni:focus-visible,.modal-close:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(34,197,94,.15)
}

/* ── Sticky table headers: long lists (sales, agreements, fleet, parts) ── */
.tbl-sticky thead th,
table.tbl-sticky thead th,
#sales-orders-table thead th,
#fleet-table thead th,
#parts-table thead th,
#agreements-table thead th,
#payments-table thead th,
#ptb thead th,
#stb thead th{
  position:sticky;top:0;z-index:5;
  background:var(--bg2,#f4f6f9);
  box-shadow:0 1px 0 var(--border)
}

/* ── Empty-state row & utility ── */
.tbl-empty,
.empty-state{
  padding:32px 18px;text-align:center;color:var(--t3);
  font-size:12.5px;font-weight:500
}
.tbl-empty .em-icon,
.empty-state .em-icon{
  font-size:28px;display:block;margin-bottom:6px;opacity:.6
}

/* ── Inline form validation (required-* markers + error styling) ── */
.req::after,
label.req::after{
  content:' *';color:var(--red);font-weight:700;
  margin-left:1px
}
.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid{
  border-color:var(--red) !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.12) !important;
  background:rgba(220,38,38,.04) !important
}
.field-error{
  display:block;color:var(--red);
  font-size:11.5px;font-weight:500;
  margin-top:4px;line-height:1.3
}

@media(max-width:768px){
  .fleet-layout{flex-direction:column !important}
  /* Rentals: agreements split panel stacks on mobile */
  #rtab-agreements > div{flex-direction:column !important}
  #ag-detail{width:100% !important;min-width:0 !important;border-left:none !important;border-top:1px solid var(--border) !important;max-height:50vh;overflow-y:auto}
  #pay-panel .ct{padding:10px 12px calc(var(--bnav) + 20px)}
  #fleet-detail{width:100% !important;min-width:0 !important;border-left:none !important;border-top:1px solid var(--border);max-height:50vh}
}

/* ── SETTINGS ── */
.settings-layout{flex:1;overflow-y:auto;padding:20px}
.settings-section{background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh);margin-bottom:16px;overflow:hidden}
.settings-hd{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--border)}
.settings-row:last-child{border-bottom:none}
.settings-row-label{font-size:13.5px;font-weight:500}
.settings-row-sub{font-size:11.5px;color:var(--t3);margin-top:2px}
.tog{width:42px;height:24px;border-radius:12px;background:var(--border2);cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.tog::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tog.tog-on{background:var(--green)}.tog.tog-on::after{transform:translateX(18px)}
.settings-input{padding:7px 11px;border:1px solid var(--border2);border-radius:8px;font-family:var(--f);font-size:13px;color:var(--text);outline:none;width:100%;background:var(--bg)}
/* PIN boxes are wide-tracked monospace so the typed digits read clearly, but
   that styling must NOT bleed onto the placeholder — an empty PIN field has to
   look obviously empty, never like four already-typed characters. */
.pin-input::placeholder{font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.2px;color:var(--t3)}
.settings-input:focus{border-color:var(--green);background:var(--white)}
.stripe-status{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:9px;background:var(--green-l);border:1px solid #bbf7d0;font-size:13px;font-weight:500;color:var(--green)}
.role-badge{display:inline-flex;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:600}
.role-admin{background:#fef3c7;color:#92400e}
.role-manager{background:var(--blue-l);color:var(--blue)}
.role-maint{background:var(--green-l);color:var(--green)}
.role-staff{background:#f3f4f6;color:var(--t2)}

/* ─────────────────────────────────────────────
   RESPONSIVE — MOBILE
───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* hide sidebar, show bottom nav */
  .sb{display:none}
  .bottom-nav{display:flex}
  .more-drawer{display:block}

  /* account for bottom nav — padding on all scrollable containers */
  .main{padding-bottom:0}
  .ct{padding:10px 10px calc(var(--bnav) + 20px)}
  .settings-layout{padding:10px 10px calc(var(--bnav) + 20px)}
  .cl{padding-bottom:var(--bnav)}

  /* Dashboard KPI grids — 2 columns on mobile */
  .kg{grid-template-columns:1fr 1fr !important;gap:8px !important}
  .dk-grid4{grid-template-columns:1fr 1fr !important;gap:8px !important}
  .kpi{min-width:0;padding:10px 12px !important}
  .kv{font-size:20px !important}
  .kl{font-size:9.5px !important}
  .ks{font-size:9.5px !important}

  /* Any inline repeat(3..7) grids — collapse to 2-col on phones.
     Previously only 3 and 4 were caught, so the Fleet KPI strip
     (repeat(7,1fr) with min-width:780px) overflowed the viewport and
     the right-most cards got clipped ("EN/2 Cur" peeking from the
     right edge of the screenshot). */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns:repeat(7"],
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important;gap:8px !important}
  /* Drop hardcoded min-width on KPI grids and their wrappers, and
     stop horizontal scroll on the wrappers. The 780px minimum makes
     sense on desktop where the toolbar fits seven KPIs across; on a
     phone it just causes overflow. */
  .kg[style*="min-width"]{min-width:0 !important}
  #fleet-kpi-area{overflow-x:visible !important;padding-right:10px !important}

  /* P&L and branch split cards — stack vertically */
  .ct>[style*="display:flex"]{flex-direction:column !important}

  /* Section labels */
  #tbtitle{font-size:15px !important}
  .ct{padding:10px 10px calc(var(--bnav) + 16px) !important}
  /* POS: the right payment panel needs bottom clearance */
  .pos-layout{padding-bottom:0}
  .pos-right-payment{padding-bottom:calc(var(--bnav) + 10px) !important}

  /* topbar: hide tabs and search on very small */
  .tb-tabs{display:none}
  .sbox{display:none}

  /* KPI: 2 columns */
  .kg{grid-template-columns:repeat(2,1fr);gap:10px}
  .kv{font-size:19px}

  /* chart grid: single column */
  .g21{grid-template-columns:1fr}

  /* POS: stack vertically */
  .pos-layout{flex-direction:column}
  .pos-right{width:100%;min-width:0;border-left:none;border-top:1px solid var(--border);max-height:52vh}
  .pos-grid{grid-template-columns:repeat(3,1fr)}

  /* Clients: full screen list, detail as overlay */
  .clp{width:100%;min-width:0;border-right:none}
  .cl{position:relative}
  #cd{position:fixed;inset:0;padding-bottom:calc(var(--bnav) + 52px);background:var(--bg);z-index:50;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;padding-top:52px}
  #cd.mob-open{transform:translateX(0)}

  /* Settings */
  .settings-row{flex-direction:column;align-items:flex-start;gap:10px}
  .settings-row .tog{align-self:flex-start}

  /* Branches */
  .branch-grid{grid-template-columns:1fr !important}

  /* Tables */
  .tw{-webkit-overflow-scrolling:touch}
  thead th,td{padding:8px 10px;font-size:12px}
}

@media (max-width: 480px) {
  .kg{grid-template-columns:repeat(2,1fr)}
  .kv{font-size:18px}
  .pos-grid{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE OVERHAUL — applied at the same 768px breakpoint, but kept
   as a self-contained block so the responsive rules above stay readable.

   Design principles applied here:
   • Tap targets ≥44px (Apple HIG) / 48dp (Material).
   • Inputs ≥16px font so iOS Safari doesn't auto-zoom on focus.
   • Wide tables collapse to stacked cards using existing data-label
     attributes — no JS rewrite required.
   • Single-purpose mobile detail overlays gain a sticky Back button.
   • Hide-by-default for the floating mobile-only widgets so they don't
     pollute the desktop layout.
   ═══════════════════════════════════════════════════════════════════ */

/* Mobile Back button on the Clients detail overlay. Hidden by default;
   visible only on phones, only when #cd has the .mob-open class. */
#cd-close{display:none}
/* Same default-hide for the Fleet detail Back button. Without this
   global rule the button rendered as plain "← Back to Fleet" text on
   the desktop right-hand panel because its display:none lived inside
   the @media (max-width:768px) block. */
#fleet-detail-close{display:none}

@media (max-width: 768px) {
  /* ── 1. Inputs: prevent iOS auto-zoom on focus ─────────────────────
     iOS Safari zooms in whenever an input's font-size is below 16px.
     The CRM uses 11–13px throughout for density. Keep the visual size
     small but enforce a 16px font on inputs/textareas/selects so users
     don't lose context every time they tap a search field. */
  input:not([type="checkbox"]):not([type="radio"]),
  textarea, select, .settings-input {
    font-size: 16px !important;
  }
  /* Compensate by tightening padding so they don't grow vertically. */
  .settings-input { padding: 9px 11px !important; }
  .sbox input { font-size: 16px !important; }

  /* ── 2. Tap targets: minimum 44px ──────────────────────────────────
     Many .btn instances run at 11–12px font with 4–6px padding — too
     small for thumbs. Bump the minimum height without forcing buttons
     in tight rows to grow horizontally. */
  .btn { min-height: 40px; padding: 8px 12px !important; }
  .btn[style*="font-size:11"], .btn[style*="font-size:12"] { min-height: 38px; }
  .crow { padding: 14px 14px !important; }
  .ni { padding: 12px 14px !important; }

  /* ── 3. Clients page mobile detail ─────────────────────────────────
     #cd already has the slide-in transform; selectClient() now toggles
     .mob-open. The existing rule above (line ~23411) puts it at z:50
     with `inset:0` so it covers the list but stays *under* the bottom
     nav (z:100) — that's deliberate so the user can still navigate away
     during a deep client view. Reserve the top 56px for the floating
     Back button and bottom 24px for breathing room above bottom-nav. */
  #cd {
    padding-top: 60px !important;
    padding-bottom: 24px !important;
  }
  /* Floating Back button — fixed-position, above everything (z:200) so
     it's reachable even with modals open. Hidden by default, shown
     only when the body carries .mobile-detail-open. */
  #cd-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0) + 12px);
    left: 12px;
    z-index: 200;
    align-items: center;
    gap: 6px;
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.mobile-detail-open #cd-close { display: inline-flex; }

  /* ── 4. Clients list panel — looser, larger header on mobile ───── */
  .clp { padding: 0 !important; }
  .clp .sbox { padding: 10px 12px !important; }
  /* Action row at the bottom of the list (New Client + CSV) — make
     primary action full-width, CSV becomes an icon-style square. */
  .clp button.btn { font-size: 13px !important; }

  /* ── 5. Sales page mobile layout ──────────────────────────────────
     The header has 6 action buttons + 6 channel filters + 5 status
     pills + search + 2 dates — overflow city. Strategy:
       a) Header buttons → horizontal scroll strip.
       b) Filter pills   → horizontal scroll strip.
       c) Date inputs    → stacked full-width.
       d) Table          → stacked card view (relies on data-label
          which renderSalesOrders already sets). */
  #pg-sales .ct > div:first-child {
    /* The flex-wrap row of action buttons. */
    flex-direction: row !important;
    align-items: stretch !important;
  }
  #pg-sales .ct > div:first-child > div:last-child {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  #pg-sales .ct > div:first-child > div:last-child > .btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  /* Filter card: pills horizontal-scroll, search full-width, dates stack. */
  #pg-sales .ct > .card[style*="padding:12px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #pg-sales .ct > .card[style*="padding:12px"] > div {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  #pg-sales .ct > .card[style*="padding:12px"] > div > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  #pg-sales #sales-search { width: 100% !important; }
  #pg-sales #sales-from, #pg-sales #sales-to { flex: 1; min-width: 0 !important; width: auto !important; }

  /* ── 6. Tables → stacked cards, scoped by :has(td[data-label]) ────
     Strategy:
     • Tables WHERE every row uses data-label attrs (e.g. Sales) get
       full cardification — header hidden, each row becomes a card with
       label/value pairs.
     • Tables WITHOUT data-label keep the base .tw { overflow-x:auto }
       so users can horizontal-scroll. (The previous version of this
       block forced overflow:visible which clipped wide tables to the
       viewport — that's why the Rentals Payments "Branch" column got
       cut off mid-word.)
     :has() ships in Safari 15.4+/Chrome 105+/Firefox 121+. Older
     browsers fall through to the cardification with empty labels,
     which still beats horizontal clipping. */
  .tw:has(td[data-label]) { overflow-x: visible; }
  .tw:has(td[data-label]) table thead { display: none; }
  .tw:has(td[data-label]) table,
  .tw:has(td[data-label]) table tbody,
  .tw:has(td[data-label]) table tr { display: block; width: 100%; }
  .tw:has(td[data-label]) table tr {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin: 0 0 10px 0;
    padding: 10px 14px;
    box-shadow: var(--sh);
    cursor: pointer;
  }
  .tw:has(td[data-label]) table tr:hover { background: var(--white); }
  .tw:has(td[data-label]) table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border: none;
    text-align: right;
    font-size: 13px;
    min-height: auto;
  }
  .tw:has(td[data-label]) table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--t3);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .5px;
    flex-shrink: 0;
    text-align: left;
  }
  /* td.td-block — for cells whose content shouldn't be label-vs-value
     side-by-side (e.g. an actions row with multiple buttons that needs
     full width). Block layout, label above (if present), padded top
     so it visually separates from the row above. */
  .tw:has(td[data-label]) table td.td-block {
    display: block;
    text-align: left;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
  }
  .tw:has(td[data-label]) table td.td-block::before {
    display: block;
    margin-bottom: 6px;
  }
  .tw:has(td[data-label]) table td.td-block[data-label=""]::before {
    display: none;
  }
  /* Tables without data-label keep horizontal scroll. Adding the
     -webkit prefix so iOS gives momentum scroll. */
  .tw:not(:has(td[data-label])) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Card headers (.chd) — title-left, actions-right on desktop; on
     phones the actions row gets too crowded and either wraps onto
     four lines or clips at the right edge (Maintenance "In Progress"
     was cut off, screenshot evidence). Stack title above actions, and
     turn the actions strip into a horizontal scroller so every pill
     stays reachable on a thumb-swipe. The :nth-child(2) selector
     picks the second child of .chd, which is the actions container
     in every header pattern used in the app. */
  .chd { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .chd > div:nth-child(2) {
    display: flex !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .chd > div:nth-child(2) > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ── 7. KPIs: tighter cards, label sizes ─────────────────────────── */
  .kpi { padding: 12px 14px !important; }
  .kv  { font-size: 20px !important; }
  .ks  { font-size: 10px !important; }

  /* ── 8. Topbar sizing ────────────────────────────────────────────── */
  .topbar { padding: 0 12px !important; gap: 8px !important; }

  /* ── 9. Cart drawer / modals: respect safe-area + bottom nav ─────── */
  .modal-bg { padding-bottom: calc(var(--bnav) + env(safe-area-inset-bottom, 0)) !important; }
}

/* iPad portrait — single column on tables but keep some labels visible. */
@media (max-width: 1024px) and (max-width: 900px) {
  .clp { width: 280px !important; min-width: 280px !important; }
}

/* ── UTILITY CLASSES (extracted from repeated inline styles) ── */
.fx{display:flex;align-items:center}
.fx-b{display:flex;align-items:center;justify-content:space-between}
.fx-c{display:flex;align-items:center;justify-content:center}
.fx-col{display:flex;flex-direction:column}
.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g16{gap:16px}
.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}
.fs10{font-size:10px}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}
.t2{color:var(--t2)}.t3{color:var(--t3)}.tg{color:var(--green)}.tr{color:var(--red)}.tb{color:var(--blue)}.ta{color:var(--amber)}
.uc{text-transform:uppercase}.ls{letter-spacing:.5px}
.r8{border-radius:8px}.r10{border-radius:10px}.r12{border-radius:12px}
.bb{border-bottom:1px solid var(--border)}
.bg-bg{background:var(--bg)}
.pr{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)}
.pk{color:var(--t3);font-size:12px}.pv{font-size:13px;font-weight:600;text-align:right}
.kpi-label{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--t3);margin-bottom:3px;letter-spacing:.5px}
.kpi-val{font-size:22px;font-weight:800}
.section-hd{font-size:15px;font-weight:700}
.sub-hd{font-size:13px;font-weight:600}
.meta-sm{font-size:11px;color:var(--t3)}
.meta-sm2{font-size:11.5px;color:var(--t3);margin-top:2px}
.sticky-top{position:sticky;top:0;background:var(--bg);z-index:1}
.empty-state{text-align:center;color:var(--t3);padding:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card{background:var(--bg);border-radius:8px;padding:10px}
.chk-accent{width:14px;height:14px;accent-color:var(--green)}

/* ══════════════════════════════════════════════════════════════════════════
   KINETIC LIGHT — CRM theme overrides
   ──────────────────────────────────────────────────────────────────────────
   Goal: light warm workspace, dark sidebar + topbar, kinetic-green gradient
   reserved for primary CTAs and accents only. Plus density & hierarchy fixes
   across all pages. Targeted overrides — does NOT rewrite existing rules.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Typography scale — 5 steps, no more drift ─────────────────────────── */
html,body{font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased}
.h1{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--text)}
.h2{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--text)}
.h3{font-size:13px;font-weight:600;line-height:1.3;color:var(--text)}
.lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.body{font-size:13px;line-height:1.5;color:var(--text)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── SIDEBAR → dark ─────────────────────────────────────────────────────── */
.sb{
  background:var(--dark);
  border-right:1px solid var(--dark-border);
  box-shadow:none;
}
.sb-logo{
  border-bottom:1px solid var(--dark-border);
  padding:18px 16px 14px;
}
.sb-logo .sb-name{color:var(--on-dark);font-size:14px;letter-spacing:-.01em}
.sb-logo .sb-tag{color:var(--on-dark-3)}
.sb-ic{
  background:var(--brand-grad);
  box-shadow:0 0 0 1px rgba(34,197,94,.35),0 6px 16px rgba(34,197,94,.22);
  width:32px;height:32px;border-radius:8px;
}
.sb-br{
  background:var(--dark-2);
  border:1px solid var(--dark-border);
  color:var(--on-dark-3);
}
.sb-br b{color:var(--on-dark)}
.nl{color:var(--on-dark-3)}
.ni{
  color:var(--on-dark-2);
  font-size:13px;
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:9px;
}
.ni:hover{background:rgba(255,255,255,.04);color:var(--on-dark)}
.ni.on{
  background:rgba(34,197,94,.10);
  color:var(--brand);
  border-color:rgba(34,197,94,.22);
  font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(34,197,94,.06);
}
.ni.on svg{stroke:var(--brand)}
.ni svg{opacity:.85}
.sb-ft{border-top:1px solid var(--dark-border);padding:11px}
.sb-ft a{
  color:var(--on-dark-2) !important;
  border-color:var(--dark-border) !important;
  background:var(--dark-2);
}
.sb-ft a:hover{background:#2a2a2a;color:var(--on-dark) !important}
.sc{
  background:var(--dark-2);
  border:1px solid var(--dark-border);
  color:var(--on-dark-2);
}
.sc,.sc *{color:var(--on-dark-2) !important}
.sc #nav-user-name,.sc b{color:var(--on-dark) !important}
.sa,.sa *{color:#002109 !important}
.sa{background:var(--brand-grad);color:#002109 !important;font-weight:800}
/* Badges inside sidebar stay light-on-dark */
.ni .nbadge.nr{background:rgba(239,68,68,.15);color:#fca5a5}
.ni .nbadge.ng{background:rgba(34,197,94,.15);color:#86efac}

/* ── TOPBAR → dark ──────────────────────────────────────────────────────── */
.topbar{
  background:var(--dark);
  border-bottom:1px solid var(--dark-border);
  box-shadow:none;
  height:56px;min-height:56px;
  padding:0 20px;
}
.topbar svg{stroke:currentColor}
.topbar .sbox svg{stroke:var(--on-dark-3)}
.topbar > div,.topbar select{color:var(--on-dark-2)}
.tb-title{color:var(--on-dark) !important;font-size:14px;letter-spacing:-.005em}
.tt{
  color:var(--on-dark-2);
  border-bottom-color:transparent;
  padding:6px 12px;
  border-radius:7px;
}
.tt:hover{color:var(--on-dark);background:rgba(255,255,255,.04)}
.tt.on{
  color:var(--brand);
  background:rgba(34,197,94,.10);
  border-bottom-color:transparent;
  font-weight:600;
}
/* Search box on dark topbar — light translucent fill instead of pure black.
   Reads as a proper input even against the dark chrome.
   SCOPED to .topbar: this rule used to be a bare `.sbox` selector, so its
   white-on-white fill leaked onto every in-card search box (parts, clients,
   fleet, invoices…) and made them nearly invisible on the light cards. */
.topbar .sbox{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.85);
  border-radius:9px;
  padding:6px 11px;
  width:220px;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.topbar .sbox input{color:#0d0d0d;background:transparent}
.topbar .sbox input::placeholder{color:#8a8a86}
.topbar .sbox svg{stroke:#6e6e6a}
.topbar .sbox:hover{background:#fff;border-color:#fff}
.topbar .sbox:focus-within{
  background:#fff;
  border-color:#22c55e;
  box-shadow:0 0 0 3px var(--brand-glow);
}
.ib{
  background:var(--dark-2);
  border:1px solid var(--dark-border);
  color:var(--on-dark-2);
  width:34px;height:34px;border-radius:9px;
}
.ib:hover{background:#2a2a2a;color:var(--on-dark)}
.ib svg{stroke:currentColor}
.nd{border-color:var(--dark);background:var(--brand)}

/* ── PAGES / CONTENT ────────────────────────────────────────────────────── */
.ct{padding:20px 22px;gap:16px}

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.card,.kpi{
  border-radius:var(--r-lg);
  border-color:var(--border);
  background:var(--white);
  box-shadow:0 1px 2px rgba(13,13,13,.02),0 1px 3px rgba(13,13,13,.04);
}
.cp{padding:var(--pad)}

/* ── KPI TILES ──────────────────────────────────────────────────────────── */
.kg{gap:14px;margin-bottom:16px}
.kpi{
  padding:16px 18px;
  position:relative;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.kpi:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(13,13,13,.06),0 2px 6px rgba(13,13,13,.04);
  border-color:rgba(34,197,94,.25);
}
.kpi.gk{
  border-top:none;
}
.kpi.gk::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--brand-grad);border-radius:var(--r-lg) 0 0 var(--r-lg);
}
.kl{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t3);margin-bottom:8px;
}
.kv{
  font-size:26px;font-weight:700;letter-spacing:-.02em;
  font-family:var(--f);line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.gk .kv{
  background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.ks{font-size:11px;color:var(--t2);margin-top:6px;font-weight:500}
.dl{font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;font-family:var(--f);font-variant-numeric:tabular-nums}
.du{color:#065f46;background:#d1fae5}
.dd{color:#7f1d1d;background:#fee2e2}
.dn{color:var(--t2);background:#f3f4f6}

/* ── TABLES — 52px rows, zebra, hover ──────────────────────────────────── */
thead th{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--t3);
  padding:11px 14px;
  background:#fafbf9;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1;
}
tbody tr{border-bottom:1px solid var(--border)}
tbody tr:nth-child(even){background:#fbfbf9}
tbody tr:hover{background:#f1f8f3}
td{
  padding:14px;
  font-size:13px;
  vertical-align:middle;
  min-height:var(--row-h);
  color:var(--text);
}

/* ── BUTTONS — primary uses the kinetic gradient ───────────────────────── */
.btn{
  padding:8px 14px;
  border-radius:9px;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.005em;
  transition:transform .12s,box-shadow .18s,background .18s,border-color .18s;
}
.btn:active{transform:translateY(1px)}
.bg{
  background:var(--brand-grad);
  color:#002109;
  border:none;
  box-shadow:0 0 0 1px rgba(34,197,94,.35),0 6px 16px rgba(34,197,94,.18);
}
.bg:hover{
  background:var(--brand-grad);
  box-shadow:0 0 0 1px rgba(34,197,94,.5),0 10px 22px rgba(34,197,94,.28);
  filter:brightness(1.03);
}
.bo{
  background:var(--white);
  color:var(--text);
  border:1px solid var(--border2);
  font-weight:600;
}
.bo:hover{
  background:#fbfbf9;
  border-color:var(--t3);
}
.bb{border:none;box-shadow:0 0 0 1px rgba(37,99,235,.3),0 6px 14px rgba(37,99,235,.2)}

/* ── FOCUS RINGS — consistent kinetic-green ────────────────────────────── */
input:focus-visible,textarea:focus-visible,select:focus-visible,
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-glow);
}
button:focus-visible,.btn:focus-visible,.ni:focus-visible,.tt:focus-visible,.ib:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--brand-glow);
}

/* ── STATUS PILLS — unified sizing & weight ────────────────────────────── */
.badge{
  padding:4px 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.02em;
  border:1px solid transparent;
}
.b-g{background:#e8f7ed;color:#046c3a;border-color:#c8ecd4}
.b-r{background:#fdecec;color:#b91c1c;border-color:#f7cfcf}
.b-a{background:#fdf2d6;color:#a15c07;border-color:#f6e2a1}
.b-b{background:#e7efff;color:#1e40af;border-color:#c9d8fc}
.b-gr{background:#f1f1ee;color:#525252;border-color:#e3e3df}
.b-p{background:#f3e8ff;color:#6b21a8;border-color:#e3d1f7}
.b-sold{background:#e5e5e1;color:#262626;border-color:#d1d1cc}

/* ── ENTITY AVATARS — slightly larger, warmer ──────────────────────────── */
.av,.avsq{width:30px;height:30px;font-size:10.5px;font-weight:700}
.avsq{background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(22,163,74,.18));color:var(--brand-d)}

/* ── INPUTS — consistent border/padding across admin ───────────────────── */
.input,input[type="text"],input[type="number"],input[type="email"],input[type="tel"],input[type="date"],input[type="search"],textarea,select{
  background:var(--white);
  border:1px solid var(--border2);
  border-radius:9px;
  padding:9px 12px;
  font-size:13px;
  color:var(--text);
  font-family:var(--f);
  transition:border-color .15s,box-shadow .15s;
}

/* ── LOADING SKELETON ──────────────────────────────────────────────────── */
.skel{
  background:linear-gradient(90deg,#eee 25%,#f4f4f0 50%,#eee 75%);
  background-size:200% 100%;
  animation:skel-shimmer 1.4s ease-in-out infinite;
  border-radius:6px;
}
@keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── EMPTY STATE — warmer, centred, branded icon ───────────────────────── */
.empty{
  text-align:center;
  padding:56px 24px;
  color:var(--t2);
}
.empty-icon{
  width:56px;height:56px;
  margin:0 auto 14px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(22,163,74,.14));
  display:flex;align-items:center;justify-content:center;
  color:var(--brand-d);
  font-size:26px;
}
.empty h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px}
.empty p{font-size:12.5px;color:var(--t3);max-width:320px;margin:0 auto}

/* ── STICKY FILTER BAR (utility) ───────────────────────────────────────── */
.filter-bar{
  position:sticky;top:0;z-index:5;
  background:var(--white);
  border-bottom:1px solid var(--border);
  padding:10px 14px;
  display:flex;align-items:center;gap:10px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}

/* ── Δ CHANGE PILLS (for KPIs) ─────────────────────────────────────────── */
.delta{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:999px;
  font-size:10.5px;font-weight:700;
  font-variant-numeric:tabular-nums;margin-left:6px;
}
.delta.up{background:#e8f7ed;color:#046c3a}
.delta.down{background:#fdecec;color:#b91c1c}
.delta.flat{background:#f1f1ee;color:#525252}

/* ── CHART PANEL HEADER ────────────────────────────────────────────────── */
.chd{padding:16px 18px 12px}
.ct2{font-size:14px;font-weight:700;letter-spacing:-.005em}
.cs{font-size:12px;color:var(--t2);margin-top:3px}
.cttabs{background:#f1f1ee;border-radius:9px;padding:3px}
.ctab{padding:5px 11px;border-radius:7px;font-size:12px}
.ctab.on{background:var(--white);color:var(--brand-d);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ── MOBILE / RESPONSIVE SWEEP ─────────────────────────────────────────── */
@media (max-width:820px){
  .sb{width:64px;min-width:64px}
  .sb-logo{padding:14px 10px;justify-content:center}
  .sb-logo .sb-name,.sb-logo .sb-tag{display:none}
  .sb-br{display:none}
  .nl{display:none}
  .ni{justify-content:center;padding:11px 0;font-size:0}
  .ni svg{width:16px;height:16px}
  .ni span:not(.nbadge){display:none}
  .ni .nbadge{position:absolute;top:4px;right:8px;margin-left:0;font-size:10px}
  .sb-ft .sc > *:not(.sa){display:none}
  .kg{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .sb{display:none}
  .topbar{padding:0 14px;height:52px;min-height:52px}
  .sbox{display:none}
  .ct{padding:14px}
  .kg{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:13px 14px}
  .kv{font-size:22px}
  td{padding:12px 10px;font-size:12.5px}
}

/* Final responsive hardening (kept at end so it wins cascade conflicts) */
img,svg,canvas{max-width:100%;height:auto}
.main,.pg,.ct,.settings-layout,.pos-layout,.cl{min-width:0}

@media (max-width:1024px){
  .g21{grid-template-columns:1fr !important}
  .tb-title{max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media (max-width:768px){
  #app-shell{height:100dvh !important}
  .app{height:100dvh}
  .topbar{padding:0 10px;gap:6px}
  .topbar > div:last-child{gap:4px !important}
  .ct,.settings-layout{padding-left:10px !important;padding-right:10px !important}
  .form-row2,.grid2{grid-template-columns:1fr !important}
  .modal-box,.modal{max-width:100vw}
  .modal-hd,.modal-hdr,.modal-ft{padding-left:12px;padding-right:12px}
  .modal-body{padding:12px}
  .more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  [style*="grid-template-columns:1fr 200px"],
  [style*="grid-template-columns:1fr 80px 90px 80px 28px"],
  [style*="grid-template-columns:1fr 50px 70px 70px"],
  [style*="grid-template-columns:1fr 60px 80px 28px"]{grid-template-columns:1fr !important}

  /* POS mobile flow */
  #pg-pos .pos-layout{flex-direction:column !important;overflow-y:auto}
  #pg-pos .pos-left{padding:10px;gap:10px;min-height:40dvh}
  #pg-pos .pos-right{width:100% !important;min-width:0 !important;max-height:none !important;border-left:none !important;border-top:1px solid var(--border)}
  #pg-pos .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
  #pg-pos .pos-product{padding:10px 8px;min-height:118px}
  #pg-pos #pos-basket{max-height:34dvh;padding:10px 12px !important}
  #pg-pos .pos-right-payment{position:sticky;bottom:0;background:var(--white);z-index:2;padding:10px 12px calc(var(--bnav) + 12px) !important}
  #pg-pos .pos-pay-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important}
  #pg-pos .pay-method{padding:9px 6px;font-size:11.5px}
  #pg-pos .pay-method > div:first-child{font-size:17px !important}
  #pg-pos .pay-method > div:last-child{font-size:10px !important;line-height:1.15;white-space:normal;text-align:center}
  #pg-pos .basket-item{align-items:flex-start;gap:8px}
  #pg-pos .basket-item > div:last-child{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
  #pg-pos .qty-btn{width:24px;height:24px}
  #pg-pos .pos-head-row{flex-wrap:wrap;gap:8px}
}

@media (max-width:560px){
  .more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;gap:8px !important}

  /* Keep POS controls usable on very small screens */
  #pg-pos .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #pg-pos .pos-pay-grid{grid-template-columns:1fr 1fr !important;gap:6px !important}
  #pg-pos .pos-client-row{flex-direction:column}
  #pg-pos .pos-client-row > *{width:100%;flex:1 1 auto !important}
  #pg-pos .pos-toolbar{gap:6px}
  #pg-pos .pos-misc-btn{margin-left:0 !important;width:100%;justify-content:center}
  #pg-pos #pos-basket{max-height:30dvh}
}

/* Sales Orders table responsiveness */
#pg-sales{overflow-y:auto}
#pg-sales > .ct{overflow:visible;min-height:max-content}
#pg-sales #sales-orders-table{min-width:1020px}
#pg-sales #sales-orders-table .sales-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
#pg-sales .tw{overflow-x:auto;scrollbar-gutter:stable}

@media (min-width:769px){
  #pg-sales #sales-orders-table tbody{display:table-row-group}
  #pg-sales #sales-orders-table tbody tr{display:table-row}
  #pg-sales #sales-orders-table tbody td{display:table-cell}
  #pg-sales #sales-orders-table thead{display:table-header-group}
  #pg-sales #sales-orders-table thead th{
    color:#737373;
    background:#f1f3f2;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
}

@media (min-width:769px) and (max-width:1320px){
  #pg-sales #sales-orders-table{min-width:920px}
  #pg-sales #sales-orders-table thead th,
  #pg-sales #sales-orders-table tbody td{padding:10px 8px}
  #pg-sales #sales-orders-table tbody td{font-size:12px}
  #pg-sales #sales-orders-table tbody td:nth-child(4){
    max-width:210px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #pg-sales #sales-orders-table tbody td:nth-child(10) .sales-actions{gap:4px}
}

@media (max-width:768px){
  #pg-sales #sales-orders-table{min-width:0;border-collapse:separate;border-spacing:0 10px}
  #pg-sales #sales-orders-table thead{display:none}
  #pg-sales #sales-orders-table tbody{display:block}
  #pg-sales #sales-orders-table tbody tr{display:block;border:1px solid var(--border);border-radius:10px;background:var(--white);padding:8px 10px;box-shadow:var(--sh)}
  #pg-sales #sales-orders-table tbody tr:hover{background:var(--white)}
  #pg-sales #sales-orders-table tbody tr.sales-orders-empty-row{display:table-row;border:none;box-shadow:none;padding:0;background:transparent}
  #pg-sales #sales-orders-table tbody tr.sales-orders-empty-row td{display:table-cell;padding:20px 12px !important;text-align:center !important}
  #pg-sales #sales-orders-table tbody tr.sales-orders-empty-row td::before{display:none}
  #pg-sales #sales-orders-table tbody td{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:7px 0;border:none;min-height:0}
  #pg-sales #sales-orders-table tbody td::before{content:attr(data-label);flex:0 0 78px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
  #pg-sales #sales-orders-table tbody td[data-label="Total"]{justify-content:space-between;text-align:left !important}
  #pg-sales #sales-orders-table tbody td[data-label="Actions"]{align-items:center}
  #pg-sales #sales-orders-table tbody td[data-label="Actions"] .sales-actions{justify-content:flex-start}

  /* ═══════════════════════════════════════════════════════════════════
     Universal table → card cardification (mobile-foundations slice 1)
     Any <table class="m-card-table"> (or any tbody with td[data-label]
     cells under .m-card-on) collapses to stacked cards. Lets each render
     function opt in by adding `m-card-table` to the <table> AND
     `data-label="…"` to each <td>. No JS rewrite required.
     ═══════════════════════════════════════════════════════════════════ */
  table.m-card-table{min-width:0 !important;border-collapse:separate;border-spacing:0 10px;width:100%}
  table.m-card-table thead{display:none}
  table.m-card-table tbody{display:block}
  table.m-card-table tbody tr{display:block;border:1px solid var(--m-border);border-radius:var(--m-radius-card);background:var(--m-card);padding:10px 12px;box-shadow:var(--m-shadow);margin-bottom:0}
  table.m-card-table tbody tr.tbl-empty-row,
  table.m-card-table tbody tr:has(td.tbl-empty){display:table-row;border:none;box-shadow:none;padding:0;background:transparent}
  table.m-card-table tbody tr.tbl-empty-row td,
  table.m-card-table tbody tr:has(td.tbl-empty) td{display:table-cell;padding:20px 12px !important;text-align:center !important}
  table.m-card-table tbody tr.tbl-empty-row td::before,
  table.m-card-table tbody tr:has(td.tbl-empty) td::before{display:none}
  table.m-card-table tbody td{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:7px 0;border:none;min-height:0;font-size:13px}
  table.m-card-table tbody td::before{content:attr(data-label);flex:0 0 92px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--m-muted);align-self:center}
  table.m-card-table tbody td:not([data-label])::before{content:""}
  /* Any "Actions" cell wraps to allow buttons to flow */
  table.m-card-table tbody td[data-label="Actions"],
  table.m-card-table tbody td.td-actions{flex-wrap:wrap;align-items:center}
  table.m-card-table tbody td[data-label="Actions"] > div,
  table.m-card-table tbody td.td-actions > div{display:flex;flex-wrap:wrap;gap:6px}
  /* `.td-block` on a td makes it span full card width below its label,
     useful for action rows or long descriptions. */
  table.m-card-table tbody td.td-block{flex-direction:column;align-items:stretch;gap:6px}
  table.m-card-table tbody td.td-block::before{flex:none}

  /* ═══════════════════════════════════════════════════════════════════
     Sticky bottom action bar utility (mobile-foundations slice 1)
     Apply class="m-sticky-bar" to a flex container of buttons. It pins
     to the bottom of the viewport, sits ABOVE the bottom nav using the
     existing --bnav variable, and respects iOS safe-area inset.
     ═══════════════════════════════════════════════════════════════════ */
  .m-sticky-bar{
    position:sticky;
    bottom:calc(var(--bnav) + env(safe-area-inset-bottom, 0px) + 8px);
    left:0;right:0;
    margin:12px -8px 0;
    padding:10px 12px;
    background:var(--m-card);
    border-top:1px solid var(--m-border);
    border-radius:14px 14px 0 0;
    box-shadow:0 -6px 18px rgba(15,23,42,.08);
    display:flex;gap:8px;align-items:center;
    z-index:50;
  }
  .m-sticky-bar > .btn,
  .m-sticky-bar > button{flex:1;min-height:44px;border-radius:var(--m-radius-btn) !important}
  .m-sticky-bar > .btn.m-secondary{flex:0 0 auto;min-width:96px}

  /* Hide row-expand detail on mobile — its info (agreement / plan / start)
     is already accessible from the agreement modal, and the click-to-expand
     pattern doesn't translate cleanly to cardified rows. */
  table.m-card-table tbody tr.pay-row-detail{display:none !important}

  /* ═══════════════════════════════════════════════════════════════════
     DASHBOARD MOBILE (slice 2)
     Force a clean 2-col KPI grid, stack heavy multi-column rows, hide
     desktop-only items, and reveal the mobile-only Snapshot + Quick
     Actions cards inserted near the top of #pg-dash.
     ═══════════════════════════════════════════════════════════════════ */
  /* Mobile-only utility — visible only at this breakpoint.
     !important needed because the desktop default rule lives outside
     this media block (after `}` below) and would otherwise win on
     source order. */
  .m-only{display:block !important}

  /* The dashboard KPI rows: collapse to 2 columns. Existing inline
     `style="grid-template-columns:repeat(4,1fr)"` etc. wins via
     specificity, so target by class/parent. */
  #pg-dash .dk-grid4{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
  #pg-dash .kpi{padding:10px 12px !important}
  #pg-dash .kpi .kv{font-size:20px !important}
  #pg-dash .kpi .kl{font-size:9.5px !important}
  #pg-dash .kpi .ks{font-size:10.5px !important}

  /* All "two-column" content rows on the dashboard collapse to a single
     stack so each card gets the full width. */
  #pg-dash > .ct > div[style*="grid-template-columns:1fr 1fr"],
  #pg-dash > .ct > div[style*="grid-template-columns: 1fr 1fr"],
  #pg-dash > .ct > div[style*="grid-template-columns:300px 1fr"],
  #pg-dash > .ct > div[style*="grid-template-columns:220px 1fr"]{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  /* Nested KPI sub-grids inside Income Sources / Monthly Costs go 2-col. */
  #pg-dash > .ct > div > div > div[style*="grid-template-columns:1fr 1fr"],
  #pg-dash > .ct > div > div > div[style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
  }

  /* Quick Action buttons in the snapshot card */
  .m-quick-btn{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    min-height:64px !important;
    padding:10px !important;
    border-radius:var(--m-radius-btn,12px) !important;
    background:var(--m-card,#fff) !important;
    border:1px solid var(--m-border,#E5E7EB) !important;
    color:var(--m-ink,#111) !important;
    font-size:12.5px !important;
  }
  .m-quick-btn:active{background:var(--bg) !important;transform:scale(.97)}

  /* Trim chart heights so they don't dominate the screen */
  #pg-dash canvas{max-height:200px !important;height:auto !important}

  /* Period selector row: keep on its own line, label collapses */
  #pg-dash .ct > div:first-child{flex-direction:column;align-items:stretch !important;gap:8px !important}
  #pg-dash #dash-period{flex:1;min-height:40px}

  /* Hide the desktop "Period:" label on small screens to save width */
  #pg-dash > .ct > div:first-child > div:last-child > span:first-child{display:none}

  /* ═══════════════════════════════════════════════════════════════════
     RENTALS MOBILE (slice 3)
     The Payments tab already cardifies (slice 1). The Agreements tab
     now also cardifies (m-card-table + data-label on each td). Polish
     the surrounding chrome so tabs scroll, filters wrap cleanly, the
     side detail panel is replaced entirely by the agreement modal,
     and KPI grids stay tight.
     ═══════════════════════════════════════════════════════════════════ */

  /* Tab strip becomes a horizontal scroller — five tabs (Payments,
     Agreements, Financing, Plans + future) won't fit on a 390px row. */
  #pg-rentals .inv-tabbar{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 8px !important;
  }
  #pg-rentals .inv-tabbar::-webkit-scrollbar{display:none}
  #pg-rentals .rent-tab{padding:12px 12px;font-size:12.5px;flex-shrink:0}

  /* Agreements toolbar: filter chips, sort, search, + button — wrap to
     two rows so nothing clips. */
  #rtab-agreements > div > div:first-child > div[style*="display:flex"][style*="justify-content:space-between"]{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  #rtab-agreements > div > div:first-child > div > div[style*="display:flex"]{
    width:100% !important;flex-wrap:wrap !important;
  }
  #rtab-agreements #ag-search{flex:1;min-width:160px;width:auto !important}
  #rtab-agreements #ag-sort{flex:1;min-width:120px}
  #rtab-agreements #new-agreement-btn{flex:1;min-height:42px}

  /* Hide the side detail panel — replaced by the full agreement modal
     (which opens via the View → button or row tap). The list now uses
     the full width on mobile. */
  #pg-rentals #ag-detail{display:none !important}
  #rtab-agreements > div{display:block !important}
  #rtab-agreements > div > div:first-child{padding:12px !important}

  /* Payments tab inner card padding tightens. */
  #pay-panel .ct{padding:10px 10px calc(var(--bnav) + 20px) !important;gap:10px !important}
  #pay-panel .kg{margin-bottom:6px !important}

  /* Filter chip row above the payments table */
  #pay-panel .pay-ftab,
  #pay-panel .rtb{font-size:11.5px;padding:6px 10px}

  /* Make the New Agreement button reach a 44px tap target on mobile */
  #new-agreement-btn{padding:9px 14px !important;font-size:13px !important}

  /* ═══════════════════════════════════════════════════════════════════
     CLIENTS MOBILE (slice 4)
     The list already lives as div.crow rows (not a table) and the slide-
     in detail overlay (#cd.mob-open) was set up in slice 0. Polish:
     hide cramped header export/filter buttons, drop the desktop "Fleet
     bikes:" sub-row (irrelevant on phones), enlarge tap targets, and
     sit the footer cleanly above the bottom nav with a Stripe-green
     Export CSV action.
     ═══════════════════════════════════════════════════════════════════ */
  /* The .clp panel takes the full width on mobile (existing rule). The
     header has tiny Filter / Export buttons crammed next to the title;
     they spam the search input — hide them, the prominent footer
     buttons replace them. */
  #pg-clients .clp #client-filter-btn,
  #pg-clients .clp #client-export-btn{display:none !important}
  /* Hide the sub-row above the buttons that just shows "Fleet bikes:" —
     useful on desktop, noise on phones. */
  #pg-clients #client-list-footer .m-hide-row{display:none !important}
  /* Hide the import-CSV utility button on phones; sales staff don't use
     it from a phone, and it crowds the primary actions. */
  #pg-clients #client-list-footer .m-hide{display:none !important}
  /* Enlarge the two primary footer buttons. */
  #pg-clients #client-list-footer button{
    min-height:44px;font-size:13px;font-weight:700;
    border-radius:var(--m-radius-btn,12px) !important;
  }
  /* Footer above the bottom nav — .cl already has padding-bottom:--bnav
     applied (line ~23758) so the footer sits clear of the tab bar. */
  #pg-clients #client-list-footer{
    background:var(--m-card,#fff);
    box-shadow:0 -4px 12px rgba(15,23,42,.05);
    padding:10px 12px env(safe-area-inset-bottom, 0px) !important;
  }
  /* Bigger tap targets and breathing room for client rows (the audit
     called out the cramped clients list — this fixes it). */
  #pg-clients .crow{padding:14px 14px;gap:11px}
  #pg-clients .crow > div:first-child + div div:first-child{font-size:14px}
  #pg-clients .crow .badge{font-size:10.5px;padding:3px 7px}
  /* Search box and sort select reach 44px tap height. */
  #pg-clients #client-search,
  #pg-clients #client-sort{min-height:40px}
  #pg-clients .clp .sbox{padding:6px 10px !important;height:42px}

  /* ═══════════════════════════════════════════════════════════════════
     FLEET MOBILE (rebuilt 2026-05-11)
     The previous slice 5 cardified the table but left every card at
     9 stacked fields, a 7-tile horizontally-scrolling KPI strip, and
     9 filter chips — so a phone user saw mostly chrome and barely any
     bikes. Reworked to:
       • Trim KPI tiles to the 4 that actually matter (Total / Rented /
         Available / Revenue) in a clean 2×2 grid, no horizontal scroll.
       • Hide the branch breakdown strip and the duplicate Client-Bikes
         filter chip — both are noise on a phone.
       • Trim each fleet card to: Bike ID + Status row, Model line,
         Renter line. Colour, Branch, Mileage, Last Service, ROI move
         to the detail panel instead of clogging the card.
       • Detail panel hidden when no bike is selected (avoids a 200-px
         empty placeholder pushing the list off-screen).
     ═══════════════════════════════════════════════════════════════════ */
  #pg-fleet .fleet-layout{flex-direction:column}

  /* Right detail panel — on phones it becomes a slide-in overlay, NOT
     a section below the list. The previous "stack below" approach left
     phone users stranded inside a 1000-px bike profile with no way back
     to the list. We mirror the Clients page pattern: position:fixed,
     translateX(100%), slides in when .mob-open is added by selectBike,
     dismissed by the floating #fleet-detail-close Back button. */
  #pg-fleet #fleet-detail{
    position:fixed;
    inset:0;
    width:100% !important;min-width:0 !important;
    border-left:none !important;
    background:var(--bg);
    z-index:50;
    transform:translateX(100%);
    transition:transform .25s ease;
    overflow-y:auto;
    padding:60px 14px 24px;
    max-height:none;
  }
  #pg-fleet #fleet-detail.mob-open{transform:translateX(0)}
  /* Empty placeholder — never shown on mobile since the panel only
     slides in after a tap. */
  #pg-fleet #fleet-detail > div[style*="height:100%"]{display:none}

  /* Floating Back button — same style language as #cd-close so the
     two detail overlays feel consistent. Hidden by default (see the
     global rule outside this media query); surfaced here only when
     body.mobile-detail-open + the bike panel is open. */
  body.mobile-detail-open #pg-fleet.on #fleet-detail-close{
    display:inline-flex;
    position:fixed;
    top:calc(env(safe-area-inset-top, 0) + 12px);
    left:12px;
    z-index:200;
    align-items:center;
    gap:6px;
    padding:9px 16px 9px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid var(--border);
    box-shadow:0 4px 14px rgba(0,0,0,.12);
    font-size:13px;
    font-weight:700;
    color:var(--text);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  /* KPI strip — 2×2 of the four most useful tiles, no horizontal scroll. */
  #pg-fleet #fleet-kpi-area{padding:10px 10px 0 !important;overflow-x:visible !important}
  #pg-fleet #fleet-kpi-area .kg{
    grid-template-columns:repeat(2,1fr) !important;
    min-width:0 !important;
    gap:8px !important;
  }
  /* Keep Total Fleet, Rented Out, Available, Fleet Revenue (indices 1,2,3,7).
     Hide In Maintenance / On Finance / Client Bikes — admins can still
     see those on desktop. */
  #pg-fleet #fleet-kpi-area .kg .kpi:nth-child(4),
  #pg-fleet #fleet-kpi-area .kg .kpi:nth-child(5),
  #pg-fleet #fleet-kpi-area .kg .kpi:nth-child(6){display:none}
  #pg-fleet #fleet-kpi-area .kpi{padding:10px 12px !important}
  #pg-fleet #fleet-kpi-area .kpi .kv{font-size:20px !important}
  #pg-fleet #fleet-kpi-area .kpi .kl{font-size:10px !important}
  #pg-fleet #fleet-kpi-area .kpi .ks{font-size:10px !important}

  /* Toolbar wraps; chips become rounded pills; selects/search line up. */
  #pg-fleet > .fleet-layout > div:first-child > div:nth-child(2){
    padding:8px 10px !important;
    gap:6px !important;
    align-items:stretch !important;
  }
  #pg-fleet .ffb{
    padding:6px 10px !important;font-size:11.5px !important;
    border-radius:999px !important;
    min-height:34px;
  }
  /* Hide low-value filter chips on mobile to avoid wrap clutter.
     - sold/client_owned are duplicates of Client Bikes
     - on_finance / overdue / on_notice are edge cases handled via the
       desktop filter pane. Keep the essentials: All / Rented / Available /
       Maintenance. */
  #pg-fleet .ffb[data-f="sold"],
  #pg-fleet .ffb[data-f="client_owned"],
  #pg-fleet .ffb[data-f="on_finance"],
  #pg-fleet .ffb[data-f="overdue"],
  #pg-fleet .ffb[data-f="on_notice"]{display:none !important}
  #pg-fleet #fleet-sort,
  #pg-fleet #fleet-branch-filter{flex:1;min-width:0;min-height:36px}
  #pg-fleet .sbox{flex:1 1 100%;width:100% !important}
  /* + Add Bike now lives in the tab strip — keep a comfortable tap target. */
  #pg-fleet #add-bike-btn{min-height:38px;font-weight:700}
  #pg-fleet .tw{padding:0 8px}

  /* ── Compact bike-row cards ──
     Hide low-priority cells on mobile so each card stays scannable. The
     fields we hide here (Colour, Branch, Mileage, Last Service, ROI)
     all show up in the bike detail panel when the user taps the card. */
  #pg-fleet table.m-card-table tbody td[data-label="Colour"],
  #pg-fleet table.m-card-table tbody td[data-label="Branch"],
  #pg-fleet table.m-card-table tbody td[data-label="Mileage"],
  #pg-fleet table.m-card-table tbody td[data-label="Last Service"],
  #pg-fleet table.m-card-table tbody td[data-label="ROI"]{
    display:none !important;
  }
  /* Tighter card padding + active state for tap feedback. */
  #pg-fleet table.m-card-table tbody tr{
    padding:12px 14px !important;
    margin-bottom:8px;
  }
  #pg-fleet table.m-card-table tbody tr.fleet-row{cursor:pointer}
  #pg-fleet table.m-card-table tbody tr.fleet-row:active{transform:scale(.99);background:var(--bg)}
  /* Bike ID and Model share the top row; hide their labels so the
     value reads as a heading rather than a key/value pair. */
  #pg-fleet table.m-card-table tbody td[data-label="ID"]::before,
  #pg-fleet table.m-card-table tbody td[data-label="Model"]::before{display:none !important}
  #pg-fleet table.m-card-table tbody td[data-label="ID"]{
    padding:0 !important;
    font-size:14px !important;
    font-weight:700;
  }
  #pg-fleet table.m-card-table tbody td[data-label="Model"]{
    padding:2px 0 6px !important;
    border-bottom:1px solid var(--m-border,#E5E7EB);
    margin-bottom:6px;
  }
  #pg-fleet table.m-card-table tbody td[data-label="Model"] > div:first-child{
    font-size:12.5px;font-weight:600;color:var(--text);
  }
  /* Status badge floats right of the ID; we achieve this by giving the
     ID cell flex with the Model cell flowing under it. */
  #pg-fleet table.m-card-table tbody td[data-label="Status"]{
    padding:4px 0 !important;
    justify-content:flex-start;
  }
  #pg-fleet table.m-card-table tbody td[data-label="Status"]::before{flex:0 0 60px !important}
  #pg-fleet table.m-card-table tbody td[data-label="Renter"]{
    padding:4px 0 !important;
  }
  #pg-fleet table.m-card-table tbody td[data-label="Renter"]::before{flex:0 0 60px !important}

  /* ── Edit Bike modal (tabbed) on mobile ──
     The 820-px modal already capped via max-width:96vw, but the tab
     strip, table-in-tab content, and inline action buttons all need
     trimming to fit a phone. */
  #modal-edit-bike .modal-box{
    width:100% !important;max-width:100% !important;
    max-height:100vh !important;
    border-radius:0 !important;
  }
  #modal-edit-bike #eb-tabbar{
    padding:0 6px !important;
    /* scroll-snap so taps land cleanly on a tab. */
    scroll-snap-type:x mandatory;
  }
  #modal-edit-bike .eb-tabbtn{
    padding:11px 11px !important;
    font-size:12px !important;
    scroll-snap-align:start;
  }
  #modal-edit-bike .modal-body{
    padding:10px 12px !important;
    max-height:calc(100vh - 220px) !important;
  }
  /* Tables inside tabs — render as scroll containers rather than
     trying to fit 7 columns on a 375 px screen. Each tab already wraps
     its table in .tw which already has overflow-x:auto. */
  #modal-edit-bike .tw{margin:0 -4px}
  #modal-edit-bike table th,
  #modal-edit-bike table td{font-size:11.5px;padding:6px 8px}
  /* Wrap the financials 2×2 to keep tiles readable at 320 px. */
  #modal-edit-bike #eb-tab-financials > div:first-child{
    grid-template-columns:1fr !important;
  }
  /* Action button rows in Contract/Client tab wrap rather than overflow. */
  #modal-edit-bike .eb-tab-panel button,
  #modal-edit-bike .eb-tab-panel a.btn{
    min-height:38px;
  }

  /* ═══════════════════════════════════════════════════════════════════
     INVENTORY MOBILE (slice 6)
     Tab bar already scrolls horizontally. Tighten KPI grid to 2-col,
     enlarge filter selects, dominant + Add Part action.
     ═══════════════════════════════════════════════════════════════════ */
  #pg-inv .inv-tab{padding:10px 13px !important;font-size:12.5px !important}
  #pg-inv .kg{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
  #pg-inv .kpi{padding:9px 11px !important}
  #pg-inv .kpi .kv{font-size:18px !important}
  #pg-inv select{min-height:36px;font-size:13px}
  #pg-inv .sbox{flex:1 1 100%;width:100% !important;min-height:40px}
  #pg-inv .sbox input{font-size:16px !important}
  #pg-inv [onclick*="openModal('modal-add-part"],
  #pg-inv #add-part-btn{
    min-height:44px;font-weight:700;
    border-radius:var(--m-radius-btn,12px) !important;
  }
  #pg-inv .tw{padding:0 8px}

  /* ═══════════════════════════════════════════════════════════════════
     MORE DRAWER POLISH (slice 6)
     User card on top, sectioned tile groups, tighter spacing.
     ═══════════════════════════════════════════════════════════════════ */
  .more-user-card{
    display:flex;align-items:center;gap:12px;
    padding:14px;margin:0 0 14px;
    background:var(--m-card,#fff);
    border:1px solid var(--m-border,#E5E7EB);
    border-radius:var(--m-radius-card,16px);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s, box-shadow .15s;
  }
  .more-user-card:active{transform:scale(.98)}
  .more-user-avatar{
    width:44px;height:44px;border-radius:12px;
    background:linear-gradient(135deg,var(--m-brand,#16A34A),#22c55e);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:800;font-size:15px;
    flex-shrink:0;letter-spacing:.5px;
  }
  .more-user-info{flex:1;min-width:0}
  .more-user-name{
    font-size:15px;font-weight:700;color:var(--m-ink,#111);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .more-user-role{
    font-size:11.5px;color:var(--m-muted,#6B7280);margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .more-user-chev{
    color:var(--m-muted,#6B7280);font-size:22px;line-height:1;
    flex-shrink:0;
  }
  .more-section-label{
    font-size:10px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--m-muted,#6B7280);
    padding:0 4px 8px;margin-top:4px;
  }
  /* Tighter inter-section spacing inside the drawer */
  #more-drawer .more-grid + .more-section-label{margin-top:14px}
}
/* Hide mobile-only blocks on desktop. Outside the @media so they're
   suppressed by default. The matching .m-only{display:block !important}
   inside the @media block above flips them on at <=768px. */
.m-only{display:none}
/* .m-hide / .m-hide-row are hidden on MOBILE only — present and visible
   on desktop. The matching display:none rules live inside the @media
   block above. */
/* The More-drawer user card sits inside #more-drawer which is hidden
   on desktop already (slide-out only on mobile), so no extra desktop
   suppression needed for .more-user-card / .more-section-label. */

/* ── SECTION 2: EBAY TABS ──────────────────────────────────────── */
.eb-tabbtn{background:transparent;border:none;color:var(--t2);font-size:12px;font-weight:600;padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;font-family:inherit}
.eb-tabbtn:hover{color:var(--text);background:var(--white)}
.eb-tabbtn.eb-tab-on{color:var(--green);border-bottom-color:var(--green);background:var(--white)}
.eb-tab-panel{padding:0}

/* ── SECTION 3: STOCKTAKE WRAP ─────────────────────────────────── */
  .stocktake-wrap .st-kpi-lbl{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--t3)}
  .stocktake-wrap .st-kpi-val{font-family:var(--mono,'JetBrains Mono',monospace);font-size:20px;font-weight:700;margin-top:4px;letter-spacing:-.5px;color:var(--ink,#0d0d0d)}
  .stocktake-wrap #st-table thead th{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t2);padding:12px 14px;border-bottom:1px solid var(--border);background:#fff}
  .stocktake-wrap #st-table tbody td{padding:10px 14px;border-bottom:1px dashed var(--border2,#f0f2f5);font-size:13px;vertical-align:middle}
  .stocktake-wrap #st-table tbody tr:hover td{background:#f9fbfa}
  .stocktake-wrap #st-table tbody tr.st-row-changed td{background:#fef9e7}
  .stocktake-wrap #st-table tbody tr.st-row-match td{background:#f0fdf4}
  .stocktake-wrap .st-count-inp{width:100%;max-width:110px;padding:7px 10px;border:1.5px solid var(--border);border-radius:8px;font-family:var(--mono,monospace);font-size:13px;text-align:center;outline:none;transition:border-color .15s,box-shadow .15s}
  .stocktake-wrap .st-count-inp:focus{border-color:var(--brand,#22c55e);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
  .stocktake-wrap .st-count-inp.st-match{border-color:#86efac;background:#f0fdf4}
  .stocktake-wrap .st-count-inp.st-diff{border-color:#fcd34d;background:#fffbeb}
  .stocktake-wrap .st-row-clear{cursor:pointer;color:var(--t3);font-size:14px;background:none;border:none;padding:4px 6px;border-radius:6px}
  .stocktake-wrap .st-row-clear:hover{background:#fee2e2;color:#dc2626}
  .stocktake-wrap .st-hist-card{border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px;cursor:pointer;transition:border-color .15s,transform .15s;background:#fff}
  .stocktake-wrap .st-hist-card:hover{border-color:var(--brand,#22c55e);transform:translateY(-1px)}
  .stocktake-wrap .st-hist-card.draft{border-style:dashed;background:#fffbeb}
  @media(max-width:900px){
    .stocktake-wrap #st-kpis{grid-template-columns:repeat(2,1fr) !important}
    .stocktake-wrap #st-history-drawer{width:100% !important}
  }

/* ── SECTION 4: BR AGENT WIDGET ────────────────────────────────── */
     in the sidebar (#ai-sidebar-trigger) calls toggleAgentPanel()
     instead. The panel still floats centred when open. */
  #br-agent-widget{position:fixed;top:60px;right:14px;bottom:auto;left:auto;z-index:9999;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:0;pointer-events:none}
  #br-agent-widget #br-agent-panel{margin-top:10px;margin-bottom:0}
  /* Hide the legacy floating trigger row (chevron + score pill).
     The panel HTML stays so toggleAgentPanel still works. */
  #br-agent-widget > div:last-child{display:none !important}
  @media(max-width:768px){
    /* On phones the panel grows upward to fill most of the screen when
       open. Position kept top-right so when toggled it floats over
       the page content the same way it did before; just no trigger. */
    #br-agent-widget{top:auto;right:12px;bottom:calc(var(--bnav) + 12px + env(safe-area-inset-bottom,0));flex-direction:column;align-items:flex-end}
    #br-agent-widget #br-agent-panel{margin-top:0;margin-bottom:10px;height:min(520px,calc(100dvh - var(--bnav) - 110px))!important;width:calc(100vw - 24px)!important}
  }
  /* Sidebar AI Insights tile — base .ni style applies (hover, layout);
     this just colours the icon green to keep the brand cue. */
  .ai-sidebar-trigger svg{color:var(--green)}
  .ai-sidebar-trigger:hover #ai-sidebar-score{filter:brightness(1.1)}