/* ── THEMES ─────────────────────────────────────────────── */
/* Option 1 Dark  */ body.o1d{--br:#101114;--bh:#151515;--bc:#1a1a1e;--brow:#202024;--browh:#28282e;--bi:#101114;--bm:#151519;--bt:#151515;--bd:#2a2a32;--bds:#38383e;--tp:#F3F4F6;--ts:#b0b4be;--tm:#6b7180;--ac:#0078D7;--acd:rgba(0,120,215,.13);--acb:rgba(0,120,215,.32);--acg:0 4px 24px rgba(0,120,215,.28);--act:#fff;--hi:#E63946;--hib:rgba(230,57,70,.13);--gr:#34d399;--grb:rgba(52,211,153,.10);--grd:rgba(52,211,153,.25);--rd:#f87171;--rdb:rgba(248,113,113,.10);--rdd:rgba(248,113,113,.25);--bl:#60a5fa;--blb:rgba(96,165,250,.10);--yw:#fbbf24;--eb:#1a1e2e;--ebo:#2e3248;--ec:#6070a0;--ehb:#0078D7;--ehc:#40a0ff;--ehg:rgba(0,120,215,.12);--db:#2e1a1a;--dbo:#482e2e;--dc:#a06060;--dhb:#E63946;--dhc:#ff6070;--dhg:rgba(230,57,70,.12);--hs:0 1px 0 #2a2a32,0 4px 20px rgba(0,0,0,.5);--cs:0 2px 16px rgba(0,0,0,.4)}
/* Option 1 Light */ body.o1l{--br:#F1F5F9;--bh:#ffffff;--bc:#F8FAFB;--brow:#EEF2F7;--browh:#E4EBF3;--bi:#ffffff;--bm:#ffffff;--bt:#F1F5F9;--bd:#D0D9E8;--bds:#B8C6D8;--tp:#0A1128;--ts:#2d4060;--tm:#6880a0;--ac:#0066B2;--acd:rgba(0,102,178,.09);--acb:rgba(0,102,178,.25);--acg:0 4px 24px rgba(0,102,178,.18);--act:#fff;--hi:#00B4D8;--hib:rgba(0,180,216,.10);--gr:#059669;--grb:rgba(5,150,105,.09);--grd:rgba(5,150,105,.22);--rd:#dc2626;--rdb:rgba(220,38,38,.09);--rdd:rgba(220,38,38,.22);--bl:#2563eb;--blb:rgba(37,99,235,.09);--yw:#d97706;--eb:#e8f0ff;--ebo:#c0d0f0;--ec:#4060a0;--ehb:#0066B2;--ehc:#0080d0;--ehg:rgba(0,102,178,.10);--db:#ffe8ea;--dbo:#f0c0c4;--dc:#a04048;--dhb:#dc2626;--dhc:#ef4444;--dhg:rgba(220,38,38,.10);--hs:0 1px 0 #D0D9E8,0 4px 20px rgba(0,0,0,.06);--cs:0 2px 12px rgba(0,0,0,.06)}
/* Option 2 Dark  */ body.o2d{--br:#090909;--bh:#111111;--bc:#141414;--brow:#1a1a1a;--browh:#222222;--bi:#090909;--bm:#111111;--bt:#111111;--bd:#262626;--bds:#303030;--tp:#D1D5DB;--ts:#9aa0ae;--tm:#5a6070;--ac:#5DADE2;--acd:rgba(93,173,226,.12);--acb:rgba(93,173,226,.30);--acg:0 4px 24px rgba(93,173,226,.22);--act:#090909;--hi:#2DD4BF;--hib:rgba(45,212,191,.12);--gr:#34d399;--grb:rgba(52,211,153,.10);--grd:rgba(52,211,153,.25);--rd:#f87171;--rdb:rgba(248,113,113,.10);--rdd:rgba(248,113,113,.25);--bl:#818cf8;--blb:rgba(129,140,248,.10);--yw:#fbbf24;--eb:#1a1e28;--ebo:#2a3040;--ec:#5070a0;--ehb:#5DADE2;--ehc:#80c8f0;--ehg:rgba(93,173,226,.12);--db:#281a1e;--dbo:#402a30;--dc:#a05060;--dhb:#f87171;--dhc:#ffa0a0;--dhg:rgba(248,113,113,.12);--hs:0 1px 0 #262626,0 4px 20px rgba(0,0,0,.6);--cs:0 2px 16px rgba(0,0,0,.5)}
/* Option 2 Light */ body.o2l{--br:#FAFBFC;--bh:#ffffff;--bc:#F3F4F6;--brow:#EAECF0;--browh:#E0E3E8;--bi:#ffffff;--bm:#ffffff;--bt:#F3F4F6;--bd:#D1D5DB;--bds:#B8BFC9;--tp:#0F172A;--ts:#334155;--tm:#64748b;--ac:#3B82F6;--acd:rgba(59,130,246,.09);--acb:rgba(59,130,246,.25);--acg:0 4px 24px rgba(59,130,246,.18);--act:#fff;--hi:#111827;--hib:rgba(17,24,39,.08);--gr:#059669;--grb:rgba(5,150,105,.09);--grd:rgba(5,150,105,.22);--rd:#dc2626;--rdb:rgba(220,38,38,.09);--rdd:rgba(220,38,38,.22);--bl:#6366f1;--blb:rgba(99,102,241,.09);--yw:#d97706;--eb:#eff6ff;--ebo:#c0d4ff;--ec:#3050c0;--ehb:#3B82F6;--ehc:#60a0ff;--ehg:rgba(59,130,246,.10);--db:#fff0f0;--dbo:#ffcccc;--dc:#c03040;--dhb:#dc2626;--dhc:#ef4444;--dhg:rgba(220,38,38,.10);--hs:0 1px 0 #D1D5DB,0 4px 20px rgba(0,0,0,.05);--cs:0 2px 12px rgba(0,0,0,.05)}
/* Option 3 Dark  */ body.o3d{--br:#0A0A0B;--bh:#111112;--bc:#161617;--brow:#1c1c1e;--browh:#242426;--bi:#0A0A0B;--bm:#111112;--bt:#111112;--bd:#272728;--bds:#333335;--tp:#F2F2F2;--ts:#b8b8b8;--tm:#707070;--ac:#CC0000;--acd:rgba(204,0,0,.12);--acb:rgba(204,0,0,.30);--acg:0 4px 24px rgba(204,0,0,.25);--act:#fff;--hi:#FFD166;--hib:rgba(255,209,102,.12);--gr:#34d399;--grb:rgba(52,211,153,.10);--grd:rgba(52,211,153,.25);--rd:#f87171;--rdb:rgba(248,113,113,.10);--rdd:rgba(248,113,113,.25);--bl:#60a5fa;--blb:rgba(96,165,250,.10);--yw:#FFD166;--eb:#2a1a1a;--ebo:#402828;--ec:#a06060;--ehb:#CC0000;--ehc:#ff3030;--ehg:rgba(204,0,0,.12);--db:#2a1e10;--dbo:#403018;--dc:#a08040;--dhb:#FFD166;--dhc:#ffe090;--dhg:rgba(255,209,102,.12);--hs:0 1px 0 #272728,0 4px 20px rgba(0,0,0,.6);--cs:0 2px 16px rgba(0,0,0,.5)}
/* Option 3 Light */ body.o3l{--br:#F5F5F5;--bh:#FAFAFA;--bc:#ffffff;--brow:#F0F0F0;--browh:#E8E8E8;--bi:#ffffff;--bm:#ffffff;--bt:#F5F5F5;--bd:#D8D8D8;--bds:#C0C0C0;--tp:#1F2937;--ts:#374151;--tm:#6b7280;--ac:#E10600;--acd:rgba(225,6,0,.08);--acb:rgba(225,6,0,.22);--acg:0 4px 24px rgba(225,6,0,.16);--act:#fff;--hi:#111111;--hib:rgba(17,17,17,.08);--gr:#059669;--grb:rgba(5,150,105,.09);--grd:rgba(5,150,105,.22);--rd:#dc2626;--rdb:rgba(220,38,38,.09);--rdd:rgba(220,38,38,.22);--bl:#2563eb;--blb:rgba(37,99,235,.09);--yw:#d97706;--eb:#fff0f0;--ebo:#ffc8c8;--ec:#c03040;--ehb:#E10600;--ehc:#ff3020;--ehg:rgba(225,6,0,.10);--db:#fff8e0;--dbo:#ffe8a0;--dc:#907020;--dhb:#111111;--dhc:#333333;--dhg:rgba(17,17,17,.08);--hs:0 1px 0 #D8D8D8,0 4px 20px rgba(0,0,0,.05);--cs:0 2px 12px rgba(0,0,0,.04)}
/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--br);color:var(--tp);font-family:'Inter',sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-400% 0}100%{background-position:400% 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.ai1{animation:slideUp .35s ease both .04s}.ai2{animation:slideUp .35s ease both .09s}
.ai3{animation:slideUp .35s ease both .14s}.ai4{animation:slideUp .35s ease both .19s}
.ai5{animation:slideUp .35s ease both .24s}.ai6{animation:slideUp .35s ease both .29s}

.bn,.ptitle,.mtitle,.slbl,.fcard-title{
  font-family:'Orbitron',sans-serif !important;
  letter-spacing:.04em;
}



/* Light theme text/border overrides */
body.o1l tbody tr,body.o2l tbody tr,body.o3l tbody tr{border-bottom-color:rgba(0,0,0,.06)}
body.o1l ::-webkit-scrollbar-thumb,body.o2l ::-webkit-scrollbar-thumb,body.o3l ::-webkit-scrollbar-thumb{background:var(--bds)}

/* Parts picker */
.parts-picker{max-height:180px;overflow-y:auto;border:1px solid var(--bds);border-radius:9px;background:var(--bi);padding:6px}
.parts-picker-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;transition:background .1s}
.parts-picker-row:hover{background:var(--acd)}
.parts-picker-row input[type=checkbox]{accent-color:var(--ac);width:14px;height:14px;flex-shrink:0}
.parts-picker-row .pname{font-size:13px;color:var(--tp);flex:1}
.parts-picker-row .pprice{font-size:12px;color:var(--ac);font-weight:700;white-space:nowrap}
.parts-picker-row .pstock{font-size:11px;color:var(--tm);white-space:nowrap}
.labour-calc{background:var(--brow);border:1px solid var(--bd);border-radius:10px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;margin:8px 0 4px;flex-wrap:wrap;gap:8px}
.calc-item{display:flex;flex-direction:column;align-items:center}
.calc-lbl{font-size:10px;color:var(--tm);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.calc-val{font-size:15px;font-weight:800;color:var(--ac)}
.calc-total{font-size:18px;font-weight:900;color:var(--gr);font-family:'Orbitron',sans-serif}

/* ── JOB CARD WORKFLOW & PARTS PICKER ───────────────────── */
.parts-picker{max-height:220px;overflow-y:auto;border:1px solid var(--bd);border-radius:9px;background:var(--bi);}
.parts-picker-row{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;transition:background .1s;border-bottom:1px solid rgba(255,255,255,.03);}
.parts-picker-row:last-child{border-bottom:none;}
.parts-picker-row:hover{background:var(--browh);}
.parts-picker-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--ac);flex-shrink:0;cursor:pointer;}
.parts-picker-row .pname{flex:1;font-size:13px;color:var(--tp);font-weight:600;}
.parts-picker-row .pstock{font-size:11.5px;color:var(--ts);min-width:90px;text-align:right;}
.parts-picker-row .pprice{font-size:12px;font-weight:800;color:var(--ac);min-width:80px;text-align:right;font-family:'Orbitron',sans-serif;}
.parts-unavail{opacity:.45;}
.parts-unavail:hover{background:transparent;cursor:not-allowed;}
.labour-calc{display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--brow);border:1px solid var(--bd);border-radius:10px;flex-wrap:wrap;}
.calc-item{display:flex;flex-direction:column;gap:3px;}
.calc-lbl{font-size:10px;font-weight:800;color:var(--tm);text-transform:uppercase;letter-spacing:.07em;}
.calc-val{font-size:15px;font-weight:800;color:var(--tp);font-family:'Orbitron',sans-serif;}
.calc-total{font-size:18px;font-weight:900;color:var(--gr);font-family:'Orbitron',sans-serif;}
/* ── HEADER ─────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:200;background:var(--bh);border-bottom:1px solid var(--bd);box-shadow:var(--hs);padding:0 36px;height:66px;display:flex;align-items:center;justify-content:space-between;transition:background .35s}
.hl{display:flex;align-items:center;gap:14px}
.logo{width:56px;height:56px;border-radius:14px;background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;transition:all .35s}
.bn{font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--tp)}
.bs{font-size:10px;color:var(--tm);letter-spacing:.12em;text-transform:uppercase;margin-top:1px}
.hr2{display:flex;align-items:center;gap:10px}
.ttog{display:flex;align-items:center;gap:8px;background:var(--brow);border:1px solid var(--bds);border-radius:10px;padding:6px 12px 6px 8px;cursor:pointer;transition:all .2s;user-select:none}
.ttog:hover{border-color:var(--ac)}
.ttrk{width:38px;height:21px;border-radius:11px;background:var(--bds);position:relative;transition:background .25s;flex-shrink:0}
.ttrk.on{background:var(--ac)}
.tthm{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--br);transition:left .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.ttrk.on .tthm{left:20px}
.tlbl{font-size:11px;font-weight:800;color:var(--ts);letter-spacing:.05em;white-space:nowrap;min-width:120px}
.cpill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:5px 12px;border-radius:8px;font-family:'Inter',sans-serif}
.cpill.live{background:var(--grb);color:var(--gr);border:1px solid var(--grd)}
.cpill.readonly{background:var(--acd);color:var(--ac);border:1px solid var(--acb)}
.cpill.offline{background:var(--rdb);color:var(--rd);border:1px solid var(--rdd)}
.cdot{width:7px;height:7px;border-radius:50%;animation:pulse 2s infinite;flex-shrink:0}
.cpill.live .cdot{background:var(--gr)}.cpill.readonly .cdot{background:var(--ac)}.cpill.offline .cdot{background:var(--rd)}
.dbadge{font-size:11px;color:var(--tm);padding:5px 12px;border:1px solid var(--bd);border-radius:8px;background:var(--bi);font-family:'Inter',sans-serif}
/* ── NAV ─────────────────────────────────────────────────── */
.nav{background:var(--bh);border-bottom:1px solid var(--bd);padding:0 36px;display:flex;transition:background .35s}
.ntab{padding:13px 18px;font-size:13px;font-weight:700;color:var(--tm);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;white-space:nowrap}
.ntab:hover{color:var(--ts)}.ntab.active{color:var(--ac);border-bottom-color:var(--ac)}
/* ── PAGES ───────────────────────────────────────────────── */
.page{display:none;padding:28px 36px;max-width:1600px;margin:0 auto}.page.active{display:block}
.phdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}
.ptitle{font-size:30px;font-weight:900;letter-spacing:-.04em;color:var(--tp);line-height:1}
.psub{font-size:13px;color:var(--tm);margin-top:5px}
/* ── BUTTONS ─────────────────────────────────────────────── */
.bp{background:var(--ac);color:var(--act);border:none;border-radius:10px;padding:11px 22px;font-size:14px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;box-shadow:var(--acg);transition:transform .15s,opacity .15s}
.bp:hover{transform:translateY(-2px);opacity:.9}.bp:active{transform:scale(.97)}.bp:disabled{opacity:.5;cursor:not-allowed;transform:none}
.bs2{background:var(--brow);color:var(--ts);border:1px solid var(--bds);border-radius:10px;padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;transition:border-color .15s,color .15s,background .15s}
.bs2:hover{border-color:var(--ac);color:var(--ac);background:var(--acd)}
.bgm{background:var(--brow);color:var(--ts);border:1px solid var(--bds);border-radius:9px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:border-color .15s,color .15s}
.bgm:hover{border-color:var(--tm);color:var(--tp)}
.bdm{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;border:none;border-radius:9px;padding:10px 22px;font-size:13px;font-weight:800;cursor:pointer;font-family:'Inter',sans-serif;box-shadow:0 4px 16px rgba(239,68,68,.3);transition:transform .15s}
.bdm:hover{transform:translateY(-1px)}
.bact{width:30px;height:30px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
.bact.edit{background:var(--eb);border:1px solid var(--ebo);color:var(--ec)}.bact.edit:hover{border-color:var(--ehb);color:var(--ehc);background:var(--ehg);transform:translateY(-1px)}
.bact.del{background:var(--db);border:1px solid var(--dbo);color:var(--dc)}.bact.del:hover{border-color:var(--dhb);color:var(--dhc);background:var(--dhg);transform:translateY(-1px)}
.bact.photo{background:var(--blb);border:1px solid rgba(96,165,250,.3);color:var(--bl)}.bact.photo:hover{border-color:var(--bl);transform:translateY(-1px)}
/* ── STATS ───────────────────────────────────────────────── */
.srow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.scard{background:var(--bc);border:1px solid var(--bd);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:15px;box-shadow:var(--cs);transition:border-color .2s,transform .15s;position:relative;overflow:hidden}
.scard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ac);opacity:0;transition:opacity .2s}
.scard:hover{border-color:var(--bds);transform:translateY(-2px)}.scard:hover::before{opacity:1}
.sico{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.slbl{font-size:11px;font-weight:800;color:var(--tm);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.sval{font-size:26px;font-weight:900;font-family:'Inter',sans-serif;color:var(--tp);letter-spacing:-.03em;line-height:1}
.ssub{font-size:11px;color:var(--tm);margin-top:3px}
/* ── TOOLBAR ─────────────────────────────────────────────── */
.tbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.swrap{flex:1;min-width:280px;position:relative}
.swrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--tm);pointer-events:none}
.sinput{width:100%;padding:10px 14px 10px 40px;background:var(--bc);border:1px solid var(--bd);border-radius:10px;color:var(--tp);font-size:13.5px;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}
.sinput::placeholder{color:var(--tm)}.sinput:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acd)}
.fsel{padding:10px 36px 10px 14px;min-width:200px;background:var(--bc);border:1px solid var(--bd);border-radius:10px;color:var(--tp);font-size:13.5px;font-family:'Inter',sans-serif;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a5a78' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;transition:border-color .2s}
.fsel:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acd)}
/* ── TABLE ───────────────────────────────────────────────── */
.twrap{background:var(--bc);border:1px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:var(--cs)}
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead tr{background:var(--bt);border-bottom:2px solid var(--bds)}
thead th{padding:13px 16px;text-align:left;font-size:11px;font-weight:800;color:var(--ts);text-transform:uppercase;letter-spacing:.09em;cursor:pointer;user-select:none;white-space:nowrap;transition:color .15s}
thead th:hover{color:var(--ac)}thead th:first-child{color:var(--ac)}
.sico2{margin-left:4px;opacity:.3;font-size:10px}.sico2.active{opacity:1;color:var(--ac)}
tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background .1s}
tbody tr:hover{background:var(--browh)}
tbody td:first-child{position:relative}
tbody td:first-child::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ac);opacity:0;transition:opacity .15s}
tbody tr:hover td:first-child::before{opacity:1}
tbody td{padding:12px 16px;font-size:13.5px}
.cid{font-family:'Inter',sans-serif;font-size:11.5px;color:var(--ac);font-weight:700}
.cnm{font-weight:700;color:var(--tp)}.cbr{color:var(--ts);font-weight:500}
.cmn{font-family:'Inter',sans-serif;color:var(--ts);font-size:13px}
.cpr{font-family:'Inter',sans-serif;font-weight:700;color:var(--tp);font-size:13px}
.csp{font-size:12.5px;color:var(--ts)}
.qbadge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:7px;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:800}
.qbadge.ok{background:var(--grb);color:var(--gr);border:1px solid var(--grd)}
.qbadge.low{background:var(--rdb);color:var(--rd);border:1px solid var(--rdd)}
.racts{display:flex;gap:6px;align-items:center;justify-content:center}
.tfoot{padding:13px 20px;border-top:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--tm);background:var(--bt)}
.tfoot strong{color:var(--yw);font-family:'Inter',sans-serif}
.estate{text-align:center;padding:60px 20px;color:var(--tm);font-size:15px}
.lbar{height:3px;background:var(--bc);overflow:hidden;margin-bottom:22px;border-radius:2px}
.lbar .ltrk{height:100%;width:45%;background:linear-gradient(90deg,transparent,var(--ac),transparent);background-size:400% 100%;animation:shimmer 1.4s infinite}
.spnr{width:20px;height:20px;border:2.5px solid var(--bd);border-top-color:var(--ac);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
/* ── VEHICLE CARDS ───────────────────────────────────────── */
.vcard{background:var(--brow);border:1px solid var(--bd);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.vcard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.vcard-plate{font-family:'Inter',sans-serif;font-size:14px;font-weight:800;color:var(--ac)}
.vcard-photos{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.vphoto-thumb{width:60px;height:60px;border-radius:8px;object-fit:cover;border:1px solid var(--bd);cursor:pointer}
.vphoto-add{width:60px;height:60px;border-radius:8px;border:1px dashed var(--bds);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tm);transition:all .15s}
.vphoto-add:hover{border-color:var(--ac);color:var(--ac)}
/* ── QR ─────────────────────────────────────────────────── */
.qr-modal{max-width:400px}
#qrcode{display:block;margin:20px auto;width:220px;height:220px}
#qrcode img{display:block;width:220px;height:220px;border-radius:12px;border:3px solid var(--bds)}
.qr-label{text-align:center;font-size:14px;font-weight:700;color:var(--ts);margin-bottom:4px}
.qr-url{text-align:center;font-size:10px;color:var(--tm);word-break:break-all;font-family:'Inter',sans-serif;margin-top:8px}
.poll-status{text-align:center;font-size:12px;color:var(--tm);margin-top:8px;font-style:italic}
/* ── MODAL ───────────────────────────────────────────────── */
.ovr{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.78);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease}
.ovr.hidden{display:none}
.modal{background:var(--bm);border:1px solid var(--bds);border-radius:18px;padding:28px 32px;width:100%;max-width:580px;max-height:92vh;overflow-y:auto;box-shadow:0 40px 100px rgba(0,0,0,.7);animation:slideUp .22s ease}
.mhdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--bd)}
.mtitle{font-size:18px;font-weight:900;color:var(--tp);letter-spacing:-.02em}
.mclose{width:30px;height:30px;border-radius:7px;background:var(--brow);border:1px solid var(--bd);color:var(--tm);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.mclose:hover{border-color:var(--bds);color:var(--tp)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.full{grid-column:1/-1}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:11px;font-weight:800;color:var(--tm);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.fld label .rs{color:var(--rd);margin-left:2px}
.fld input,.fld textarea,.fld select{width:100%;padding:10px 13px;background:var(--bi);border:1px solid var(--bds);border-radius:9px;color:var(--tp);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acd)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--tm)}
.fld textarea{resize:vertical;min-height:70px;font-family:'Inter',sans-serif;font-size:13px}
.mfoot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:18px;border-top:1px solid var(--bd)}
.msec{font-size:12px;font-weight:800;color:var(--ts);text-transform:uppercase;letter-spacing:.07em;margin:18px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--bd)}
/* ── FAQ ─────────────────────────────────────────────────── */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}
.fcard{background:var(--bc);border:1px solid var(--bd);border-radius:14px;padding:20px 22px;box-shadow:var(--cs)}
.fcard-title{font-size:13px;font-weight:800;color:var(--ac);text-transform:uppercase;letter-spacing:.07em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.fitem{margin-bottom:14px}
.fq{font-size:13.5px;font-weight:700;color:var(--tp);margin-bottom:5px}
.fa{font-size:13px;color:var(--ts);line-height:1.6}
.kbd{display:inline-flex;align-items:center;gap:4px}
.key{background:var(--brow);border:1px solid var(--bds);border-radius:6px;padding:3px 8px;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;color:var(--tp)}
.tip-banner{background:var(--acd);border:1px solid var(--acb);border-radius:12px;padding:14px 18px;margin-bottom:22px;display:flex;align-items:center;gap:12px}
.tip-text{font-size:13px;color:var(--ts);line-height:1.55}
/* ── TOAST ───────────────────────────────────────────────── */
.toast{position:fixed;top:20px;right:20px;z-index:3000;padding:12px 20px;border-radius:10px;font-size:13.5px;font-weight:700;animation:slideDown .2s ease;box-shadow:0 12px 36px rgba(0,0,0,.45);max-width:360px}
.toast.success{background:rgba(15,45,30,.97);border:1px solid var(--grd);color:var(--gr)}
.toast.error{background:rgba(45,15,18,.97);border:1px solid var(--rdd);color:var(--rd)}
.toast.hidden{display:none}
@media(max-width:1100px){.srow{grid-template-columns:repeat(2,1fr)}.faq-grid{grid-template-columns:1fr}}
@media(max-width:700px){.hdr,.nav,.page{padding-left:16px;padding-right:16px}.srow{grid-template-columns:1fr}.phdr{flex-direction:column;align-items:flex-start;gap:12px}.tbar{flex-direction:column}.swrap,.fsel{min-width:100%;width:100%}.dbadge,.tlbl{display:none}.fgrid{grid-template-columns:1fr}.full{grid-column:1}}

@keyframes ordFlash{0%,100%{background:transparent}50%{background:rgba(251,191,36,.10);}}
.ord-overdue{animation:ordFlash 2.5s ease-in-out infinite;}
.ord-cancelled-refund-pending{animation:ordFlash 2.5s ease-in-out infinite;}

/* ── Row selected state ──────────────────────────────────── */
.row-selected{background:var(--acd) !important;}
.row-selected:hover{background:var(--acd) !important;}

/* ── Supplier Order Slide-in Panel ───────────────────────── */
.sup-order-panel{position:fixed;top:0;right:0;width:520px;height:100vh;z-index:1100;background:var(--bm);border-left:1px solid var(--bds);box-shadow:-12px 0 48px rgba(0,0,0,.5);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow:hidden}
.sup-order-panel.visible{transform:translateX(0)}
.sup-order-panel.hidden{display:flex;transform:translateX(100%);pointer-events:none}
.sop-inner{display:flex;flex-direction:column;height:100%}
.sop-hdr{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px 16px;border-bottom:1px solid var(--bd);flex-shrink:0}
.sop-title{font-size:18px;font-weight:900;color:var(--tp);letter-spacing:-.03em;margin:0}
.sop-meta{font-size:11px;color:var(--tm);margin-top:4px;display:flex;gap:14px;flex-wrap:wrap}
.sop-meta span{display:inline-flex;align-items:center;gap:4px}
.sop-body{flex:1;overflow-y:auto;padding:0}
.sop-body table{width:100%;border-collapse:collapse;font-size:12.5px}
.sop-body thead tr{background:var(--brow);position:sticky;top:0;z-index:2}
.sop-body th{padding:9px 10px;font-size:10px;font-weight:800;color:var(--tm);text-transform:uppercase;letter-spacing:.06em;text-align:left;border-bottom:1px solid var(--bd)}
.sop-body td{padding:8px 10px;border-bottom:1px solid var(--bd);color:var(--tp);vertical-align:middle}
.sop-body tr.sop-low{background:rgba(251,146,60,.06)}
.sop-body tr:hover{background:var(--browh)}
.sop-qty-input{width:56px;text-align:center;background:var(--sb,var(--bi));border:1px solid var(--bds);border-radius:6px;color:var(--tp);padding:5px 4px;font-size:13px;font-weight:700;font-family:'Inter',sans-serif}
.sop-qty-input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acd);outline:none}
.sop-footer{flex-shrink:0;border-top:1px solid var(--bd);padding:16px 24px;background:var(--brow)}
.sop-summary{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;font-size:12px;color:var(--ts)}
.sop-summary .sop-grand{font-size:17px;font-weight:900;color:var(--gr);font-family:'Orbitron',sans-serif}
.sop-actions{display:flex;gap:10px;justify-content:flex-end}
.sop-backdrop{position:fixed;inset:0;z-index:1050;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);animation:fadeIn .15s ease}
.sop-backdrop.hidden{display:none}
@media(max-width:700px){.sup-order-panel{width:100%}}
/* ── Vehicle customer autocomplete dropdown ── */
.vtcd-item{padding:9px 14px;cursor:pointer;border-bottom:1px solid var(--bd);display:flex;flex-direction:column;gap:2px;}
.vtcd-item:last-child{border-bottom:none;}
.vtcd-item:hover{background:var(--browh);}
.vtcd-name{font-size:13px;font-weight:600;color:var(--tp);}
.vtcd-meta{font-size:11px;color:var(--tm);}
.vtcd-none{padding:10px 14px;font-size:13px;color:var(--tm);}