/* ═══════════════════════════════════════════════════════════════════════════
   public/css/app.css · APP.CSS — the look of the whole platform: the tokens, the shell, every screen, the phone layout, and the Service Desk scoped under #svc
   ═══════════════════════════════════════════════════════════════════════════
   Moved out of public/index.html in v192 (Phase 2 of the improvement plan) as ONE text:
   everything below this header is the page's own <style> block, byte for byte and in its order.
   Everything below this header is the page's own style block, byte for byte and in its order, linked from the <head> where the block stood. The rules between the SVC-PORT markers are WarrantyDesk's own stylesheet, scoped under #svc, and were generated by scripts/port-warrantydesk-client.py, which still writes into index.html and is recorded as a debt in service.md (Dhawal, v192).
   See docs/modules/platform.md · client code. */
:root{--brand:#0e7c5a;--brand-600:#0b6a4d;--brand-700:#095440;--brand-50:#e8f5f0;--brand-100:#cdeae0;
--bg:#f3f5f7;--surface:#fff;--line:#e5e9ee;--line-2:#eef1f4;--text:#16202b;--muted:#647587;--muted-2:#93a1b0;
--amber:#f59e0b;--amber-bg:#fef3e2;--green:#16a34a;--green-bg:#e7f6ec;--blue:#2563eb;--blue-bg:#e7eefe;
--red:#e0384e;--red-bg:#fdeaec;--slate:#475569;--radius:12px;
--shadow:0 1px 2px rgba(16,32,45,.04),0 2px 8px rgba(16,32,45,.06);
--shadow-lg:0 8px 30px rgba(16,32,45,.14);
--sans:'Segoe UI',Roboto,-apple-system,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--text);font-size:15px;line-height:1.55}
button{font-family:inherit}
/* ---- login ---- */
#login{position:fixed;inset:0;background:linear-gradient(135deg,#0c8577,#0e3b30);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}
.lcard{background:#fff;border-radius:16px;padding:32px;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}
.lcard h1{margin:0 0 4px;font-size:21px}
.lcard .sub{color:var(--muted);font-size:13px;margin-bottom:20px}
.lcard label{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:14px 0 5px}
.lcard input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:16px;font-family:inherit}
.lcard input:focus{outline:2px solid var(--brand-100);border-color:var(--brand)}
.lcard button{width:100%;margin-top:20px;padding:12px;background:var(--brand);color:#fff;border:0;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer}
.lcard button:hover{background:var(--brand-600)}
.lerr{background:var(--red-bg);color:#9c2233;border:1px solid #f6c9d0;border-radius:8px;padding:9px 12px;font-size:13px;margin-top:14px;display:none}
.quick{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.quick .qt{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:9px}
.quick .qb{display:flex;flex-wrap:wrap;gap:6px}
.quick button{width:auto;margin:0;padding:5px 10px;background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-100);border-radius:20px;font-size:11.5px;font-weight:600}
.quick button:hover{background:var(--brand-100)}
/* ---- shell ---- */
.app{display:flex;min-height:100vh}
.sidebar{width:250px;background:#16202b;color:#c8d4e0;flex-shrink:0;display:flex;flex-direction:column;position:fixed;height:100vh;overflow-y:auto;z-index:40}
.brand{padding:18px 20px;border-bottom:1px solid #223041}
.brand .n{font-weight:700;color:#fff;font-size:15px}
.brand .s{font-size:11.5px;color:#7d8fa3;margin-top:2px}
.nav{padding:10px 0;flex:1}
.nav .grp{font-size:10px;font-weight:800;letter-spacing:1px;color:#5d7186;padding:14px 20px 6px;text-transform:uppercase}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 20px;color:#c8d4e0;text-decoration:none;font-size:14px;cursor:pointer;border-left:3px solid transparent}
.nav a:hover{background:#1d2937;color:#fff}
.nav a.on{background:#1d2937;color:#fff;border-left-color:var(--brand)}
.nav a .bd{margin-left:auto;background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px}
.nav a .bd.r{background:var(--red)}
.who{padding:14px 20px;border-top:1px solid #223041;font-size:13px}
.who .nm{color:#fff;font-weight:600}
.who .rl{color:#7d8fa3;font-size:11.5px}
.who button{margin-top:8px;background:none;border:1px solid #34455a;color:#9fb0c2;padding:4px 10px;border-radius:6px;font-size:11.5px;cursor:pointer}
.main{margin-left:250px;flex:1;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:11px 24px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30}
.topbar .srch{flex:1;max-width:520px;position:relative}
.topbar input{width:100%;padding:8px 12px 8px 32px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit}
.topbar .ic{position:absolute;left:11px;top:9px;color:var(--muted-2)}
.sres{position:absolute;top:40px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);max-height:400px;overflow-y:auto;display:none;z-index:50}
.sres .g{padding:7px 12px;font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;background:#fafbfc;border-bottom:1px solid var(--line-2)}
.sres .r{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line-2);font-size:13.5px}
.sres .r:hover{background:var(--brand-50)}
.sres .r b{display:block}
.sres .r span{color:var(--muted);font-size:12px}
.content{padding:22px 24px 60px;max-width:1320px}
h2.pt{margin:0 0 4px;font-size:21px}
.psub{color:var(--muted);font-size:13.5px;margin-bottom:18px}
/* ---- the notification bell ---- */
.bell{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;width:38px;height:38px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.bell:hover{background:var(--brand-50);border-color:var(--brand)}
.bico{width:19px;height:19px;color:var(--text);display:block}
.bdot{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--amber);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;
  justify-content:center;box-shadow:0 0 0 2px #fff}
.bdot.crit{background:var(--red)}
/* "there is work" is not "you have unread messages" — so it is a plain dot with
   no number, and it never pretends to be a count you can clear */
.bdot.work{min-width:11px;width:11px;height:11px;padding:0;top:-3px;right:-3px;background:var(--amber)}
.bdot.work.crit{background:var(--red)}
.bpanel{display:none;position:absolute;right:0;top:46px;width:430px;max-height:76vh;overflow:auto;z-index:80;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 34px rgba(16,32,45,.18)}
.bhd{padding:12px 14px;border-bottom:1px solid var(--line);font-weight:800;font-size:14px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;position:sticky;top:0;background:#fff;z-index:1}
.bhd .muted{font-size:11.5px}
.bgrp{padding:9px 14px 5px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:#fafbfc;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bgrp a{color:var(--brand-700);text-decoration:none;font-size:10.5px;text-transform:none;letter-spacing:0}
.bitem{display:flex;gap:9px;padding:10px 14px;border-bottom:1px solid #f1f4f7;cursor:pointer;align-items:flex-start}
.bitem:hover{background:var(--brand-50)}
.bitem .bs{font-size:11px;line-height:1.5;flex:0 0 auto}
.bitem .bt{font-size:13px;font-weight:600;line-height:1.35}
.bitem .bsub{font-size:11.5px;color:var(--muted);margin-top:2px}
.bitem.critical{border-left:3px solid var(--red)}
.bitem.warning{border-left:3px solid var(--amber)}
.bitem.info{border-left:3px solid #cbd5e0}
.bitem.ev .bs{color:var(--muted)}
.bitem.ev.unread{background:#f5faf8}
.bitem.ev.unread .bt{font-weight:700}
.bempty{padding:26px 16px;color:var(--muted);font-size:13px;text-align:center}
.bfoot{padding:10px 14px;font-size:11px;color:var(--muted);border-top:1px solid var(--line);background:#fafbfc}
/* ---- the global time filter, top right of every dashboard ---- */
.perseg{display:flex;flex-wrap:wrap;gap:4px;background:#f2f5f8;border:1px solid var(--line);border-radius:9px;padding:3px}
.perbtn{border:0;background:transparent;padding:6px 11px;border-radius:7px;font-size:12px;font-weight:600;
  color:var(--muted);cursor:pointer;font-family:inherit}
.perbtn:hover{color:var(--text);background:#e7ecf1}
.perbtn.on{background:#fff;color:var(--brand-700);box-shadow:0 1px 3px rgba(16,32,45,.12)}
.perbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 14px;margin:0 0 16px;box-shadow:var(--shadow)}
.perlab{font-size:13px}
.perlab .muted{margin-left:8px;font-size:12px}
.perctl{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.perctl select,.perctl input{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:#fff}
.perctl select:first-child{font-weight:700;border-color:var(--brand);color:var(--brand-700);background:var(--brand-50)}
.delta{display:inline-block;font-size:11px;font-weight:700;padding:1px 6px;border-radius:6px;margin-left:6px;white-space:nowrap}
.delta.up{background:#e7f6ec;color:#166534}.delta.down{background:#fdeaec;color:#9f1239}
.delta.flat{background:#f1f4f7;color:var(--muted)}
/* ---- lead temperature ---- */
/* One dot primitive for every status colour in the product. Flat CSS circles,
   not emoji: emoji render as glossy gradient balls that belong to a different
   design language entirely, and they change shape on every operating system. */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--muted);vertical-align:middle;position:relative;top:-1px}
.dot.red{background:var(--red)} .dot.amber{background:var(--amber)}
.dot.yellow{background:#c99700} .dot.blue{background:#2b6cb0}
.dot.green{background:var(--green)} .dot.grey{background:#94a3b8}
.dot.critical{background:var(--red)} .dot.warning{background:var(--amber)} .dot.info{background:#94a3b8}
/* Lead temperature — one quiet pill, the same shape as every other chip on the
   screen, with the colour carried by a dot rather than by a coloured background.
   Three loud badges in a table row compete with the numbers they sit next to. */
.temp{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:2px 9px 2px 8px;border-radius:20px;white-space:nowrap;
  background:#fff;border:1px solid var(--line);color:var(--text)}
.temp .dot{top:0}
.temp.Hot{border-color:#f3c9cf;background:#fdf6f7}
.temp.Hot .dot{background:var(--red)}
.temp.Warm{border-color:#f0dcb4;background:#fdfaf3}
.temp.Warm .dot{background:var(--amber)}
.temp.Cold{border-color:#cfd8e0;background:#f8fafb}
.temp.Cold .dot{background:#7c93a8}
/* the temperature setter — three small buttons, not three underlined links */
.tempset{display:inline-flex;gap:5px;margin-top:5px}
.tempset button{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer}
.tempset button:hover{border-color:var(--brand);color:var(--brand-700);background:var(--brand-50)}
.tempset button.on{border-color:var(--brand);background:var(--brand-50);color:var(--brand-700)}
.fdue{color:var(--red);font-weight:700}
/* ---- the stage × temperature board ---- */
table.t.board td{vertical-align:middle}
table.t.board th{white-space:nowrap}
.bcell{text-align:center}
.bcell .bn{font-size:20px;font-weight:800;line-height:1.1}
.bcell .bv{font-size:11.5px;color:var(--muted);font-weight:600}
.bcell:hover{background:var(--brand-50)}
.note.g{background:#e7f6ec;border-color:#b7e3c6}
/* ---- components ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.sech{margin:26px 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:6px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.kpi .l{font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.kpi .v{font-size:26px;font-weight:700;margin:5px 0 2px}
.kpi .s{font-size:11.5px;color:var(--muted-2)}
.kpi .src{font-size:10px;color:var(--muted-2);margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.kpi.na{background:#fafbfc}.kpi.na .v{color:var(--muted-2);font-size:15px;font-weight:600}
.kpi.cl{cursor:pointer;transition:.12s}
.kpi.cl:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(14,124,90,.16);transform:translateY(-1px)}
.kpi.cl:hover .src{color:var(--brand)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.card .hd{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card .hd h3{margin:0;font-size:15px}
.card .hd .r{margin-left:auto;font-size:12.5px;color:var(--muted)}
.card .bd{padding:16px 18px}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{text-align:left;background:#fafbfc;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;padding:9px 14px;border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap}
table.t td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr.cl{cursor:pointer}
/* TER-01 — a cell holding twenty chips wraps on the spaces between them, so the
   rows came out ragged and the columns beside them drifted. A chip cell is a
   flex container with a real gap, the numbers are right-aligned in fixed
   columns, and the action column is pinned. */
.terrtbl{table-layout:fixed;width:100%}
.terrtbl col.c-asm{width:210px} .terrtbl col.c-num{width:96px} .terrtbl col.c-act{width:150px}
.chipwrap{display:flex;flex-wrap:wrap;gap:5px;align-items:flex-start}
.chipwrap .chip{margin:0}
.terrtbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.terrtbl th.num{text-align:right}
.terrtbl td.act{text-align:right;white-space:nowrap}
/* TER-01 — the actions column carries two buttons now, so they stack rather
   than pushing the table out past the card it sits in */
.terrtbl td.act .actcol{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.terrtbl td,.terrtbl th{vertical-align:top}
/* WHS-07 — the dispatch pipeline reads DOWN, because that is the direction the
   work travels: a new order at the top, the lorry at the bottom. Five tiles in
   a row said nothing about the order they happen in. */
.dtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:4px 0 18px}
/* UIX-08 (v123) — the dispatch tiles speak the platform's own language.
   The saturated gradients were copied from a reference screenshot and made the
   dispatch board look like a different product from every other screen: white
   cards, dark figures, one thin band of colour to say what kind of thing this
   is. The colour still distinguishes the stages; it no longer shouts. */
.dtile{background:#fff;border:1px solid var(--line);border-left:4px solid var(--muted);
  border-radius:var(--radius);padding:15px 16px 30px;color:inherit;cursor:pointer;position:relative;
  min-height:112px;display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .12s,box-shadow .12s,border-color .12s}
.dtile:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.dtile.still{cursor:default}.dtile.still:hover{transform:none;box-shadow:0 4px 14px rgba(0,0,0,.10)}
.dtile .tl{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.dtile .n{font-size:30px;font-weight:700;line-height:1.1;margin:5px 0 2px;color:#0f172a}
.dtile .s{font-size:11.5px;color:var(--muted-2);line-height:1.35}
.dtile .bdg{margin-top:auto;padding-top:8px;font-size:11.5px;font-weight:700;display:flex;justify-content:space-between;color:#334155}
.dtile .go{position:absolute;right:14px;bottom:9px;font-size:10.5px;font-weight:700;color:var(--muted-2)}
.dtile:hover{border-color:var(--brand)}
.dtile:hover .go{color:var(--brand)}
.t-purple{border-left-color:#6d6ae0}.t-green{border-left-color:var(--green)}
.t-orange{border-left-color:#e07a4e}.t-yellow{border-left-color:#d99b0b}
.t-blue{border-left-color:#2b8fd0}.t-brown{border-left-color:#a97c5c}
.t-slate{border-left-color:#4a6fa5}.t-red{border-left-color:var(--red)}
.t-teal{border-left-color:#129c8b}.t-gray{border-left-color:#8b98a6}
.dfilters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;margin:0 0 14px}
.dfilters input,.dfilters select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.dpipe{display:flex;flex-direction:column;gap:0;margin:2px 0 16px}
.dpstep{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-left-width:5px;border-radius:12px;padding:13px 16px;cursor:pointer;transition:.12s}
.dpstep:hover{border-color:var(--brand);border-left-color:inherit;box-shadow:0 4px 14px rgba(14,124,90,.13);transform:translateX(2px)}
.dpstep .dpn{font-size:26px;font-weight:700;min-width:46px;text-align:center;line-height:1}
.dpstep .dpb{flex:1;min-width:0}
.dpstep .dpb b{font-size:14px}
.dpstep .dpb div{font-size:12px;color:var(--muted);margin-top:2px}
.dpstep .dpv{font-size:14px;font-weight:700;white-space:nowrap}
.dpstep .dpgo{font-size:11.5px;color:var(--brand);font-weight:600;white-space:nowrap}
.dpjoin{width:2px;height:12px;background:var(--line);margin-left:38px}
@media(max-width:700px){.dpstep .dpv{display:none}.dpjoin{margin-left:26px}}
/* RPT-09 — a cell that opens a record has to LOOK like it does. These were
   already clickable and gave no sign of it, which is the same as not being
   clickable at all. */
table.t tbody td.cl{cursor:pointer;color:var(--brand);font-weight:600}
table.t tbody td.cl:hover{text-decoration:underline}
table.t tbody td.cl b{color:inherit}
table.t tbody tr.cl:hover{background:var(--brand-50)}
.chip{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap}
.c-g{background:var(--green-bg);color:#146c33;border:1px solid #bfe6cc}
.c-a{background:var(--amber-bg);color:#8a5a06;border:1px solid #f6d9a8}
.c-r{background:var(--red-bg);color:#9c2233;border:1px solid #f6c9d0}
.c-b{background:var(--blue-bg);color:#1c3f9e;border:1px solid #c7d8fd}
.c-s{background:#eef1f4;color:var(--slate);border:1px solid #dde3ea}
.dnum{color:var(--brand-700);text-decoration:none;border-bottom:1px dotted var(--brand);cursor:pointer}
.dnum:hover{background:var(--brand-50)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
.muted{color:var(--muted)}
.btn{background:var(--brand);color:#fff;border:0;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--brand-600)}
.btn.g{background:#fff;color:var(--text);border:1px solid var(--line)}
.btn.g:hover{background:#fafbfc}
.btn.d{background:var(--red)}.btn.d:hover{background:#c22e42}
/* a destructive action offered in a list is not the thing you came to do — it is
   quiet until you mean it, and only loud once you are already in its dialog */
.btn.g.d{background:#fff;color:var(--red);border:1px solid #f3c9d0}
.btn.g.d:hover{background:#fdf2f4;border-color:var(--red)}
.btn.s{padding:4px 10px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{background:none;border:0;padding:9px 15px;font-size:13.5px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--brand-700);border-bottom-color:var(--brand);font-weight:600}
.tl{list-style:none;padding:0;margin:0}
.tl li{padding:8px 0 8px 18px;border-left:2px solid var(--line);position:relative;font-size:13.5px}
.tl li:before{content:'';position:absolute;left:-5px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.tl li .w{color:var(--muted);font-size:11.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kv{display:grid;grid-template-columns:130px 1fr;gap:4px 10px;font-size:13.5px}
.kv .k{color:var(--muted)}
.bucket{margin-bottom:18px}
.bucket .bh{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:6px 0;color:var(--muted)}
.bucket.crit .bh{color:var(--red)}
.item{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:9px;padding:11px 14px;margin-bottom:7px;cursor:pointer}
.item:hover{box-shadow:var(--shadow)}
.item.crit{border-left-color:var(--red)}
.item .t{font-weight:600;font-size:14px}
.item .s{color:var(--muted);font-size:12.5px}
.item .w{float:right;font-size:11.5px;color:var(--red);font-weight:600}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#16202b;color:#fff;padding:11px 20px;border-radius:10px;font-size:13.5px;box-shadow:var(--shadow-lg);z-index:200;display:none;max-width:80vw}
.toast.err{background:#7f1d2b}
.ovl{position:fixed;inset:0;background:rgba(16,32,45,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:90}
.ovl.fv{background:rgba(11,22,31,.82);z-index:120;flex-direction:column;gap:12px}
.fvbox{background:#fff;border-radius:14px;max-width:1100px;width:100%;max-height:92vh;display:flex;flex-direction:column;
  overflow:hidden;box-shadow:var(--shadow-lg)}
.fvbox .fvh{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line)}
.fvbox .fvh b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fvbox .fvh .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.fvbox .fvb{flex:1;min-height:240px;overflow:auto;background:#f3f5f7;display:flex;align-items:center;justify-content:center}
.fvbox .fvb img{max-width:100%;max-height:80vh;display:block}
/* the gallery — several files behave like a gallery, one behaves as it always did */
.fvbox .fvb{position:relative}
.fvnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.94);cursor:pointer;font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;color:var(--text);box-shadow:var(--shadow);z-index:2}
.fvnav:hover{background:#fff}
.fvnav[disabled]{opacity:.3;cursor:not-allowed}
.fvnav.p{left:14px} .fvnav.n{right:14px}
/* GAL-04 — minimised. The advice stays open in a corner while the person reads
   the screen behind it; the backdrop lets clicks through so the page is usable.
   Nothing is closed, so nothing has to be found again. */
.ovl.fv.min{background:transparent;pointer-events:none;align-items:flex-end;justify-content:flex-end;padding:16px}
.ovl.fv.min .fvbox{pointer-events:auto;width:400px;max-width:44vw;max-height:46vh;box-shadow:var(--shadow-lg)}
.ovl.fv.min .fvbox .fvb img{max-height:30vh}
.ovl.fv.min .fvstrip{display:none}
/* FIL-02 — a list of file names is not a set of pictures. The dealer's papers
   show as small pictures you can flick through, and the table underneath keeps
   the detail for anybody who wants it. */
.thumbs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.thumbs .th{position:relative;width:96px;height:96px;padding:0;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;display:block}
.thumbs .th:hover{border-color:var(--brand)}
.thumbs .th img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs .th .thp{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:12px;font-weight:800;color:var(--muted);background:var(--brand-50)}
.thumbs .th .thn{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.62);color:#fff;
  font-size:9.5px;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* GAL-04 — the same thumbnail, sized for a table cell. One look everywhere:
   a small picture you click, never a filename button and never a new tab. */
.thumbs.sm{gap:6px}
/* UIX-10 — seven action buttons on a dispatch row forced the whole table
   sideways and the buttons off the screen. They wrap now, in a fixed-width
   block, so every action is visible without sliding anything. */
.dacts{display:flex;flex-wrap:wrap;gap:6px;max-width:330px}
.dacts .btn{padding:6px 11px;font-size:12.5px}
.thumbs.sm .th{width:52px;height:52px;border-radius:8px}
.thumbs.sm .th .thp{font-size:10px}
.thumbs.sm .th .thn{display:none}
/* GAL-05 — the one way files are ATTACHED, everywhere: a Choose button, the
   count in words, and the same thumbnails of what has been picked, before
   anything is submitted. The native input is hidden because seven screens with
   seven native inputs is seven slightly different screens. */
.fbox{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;background:#fafbfc}
.fbox .fbrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fbox .thumbs{margin-top:8px}
.fbox .th .thx{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.62);color:#fff;border:none;
  border-radius:6px;width:18px;height:18px;font-size:11px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center}
/* ── THE CHART BAND (DSH-05) ──────────────────────────────────────────────
   Charts are built as inline SVG on the same design tokens as the rest of the
   platform. Every mark is a door: bars, columns, funnel steps and trend months
   all open the list or the period they are computed from. The palette is the
   validated four — green, blue, amber, red — with values always written beside
   the mark, never carried by colour alone. */
.chgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px;margin:14px 0}
.ch{padding:0}
.ch .hd h3{font-size:13px}
.ch .bd{padding:14px 16px}
.hero{display:flex;flex-direction:column;gap:2px;cursor:pointer;border-radius:10px;padding:8px;margin:-8px}
.hero:hover{background:var(--brand-50)}
.hero .hv{font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.hero .hl{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.hero .hs{font-size:12.5px;color:var(--muted)}
.hero .hd2{font-size:12.5px;font-weight:700}
.hd2.up{color:var(--green)} .hd2.dn{color:var(--red)}
.fun{display:flex;flex-direction:column;gap:7px}
.fun .fr{display:grid;grid-template-columns:118px 1fr 34px;gap:9px;align-items:center;cursor:pointer;border-radius:8px;padding:3px 5px}
.fun .fr:hover{background:var(--brand-50)}
.fun .fl{font-size:12.5px;color:var(--text)}
.fun .ft{height:20px;background:var(--bg);border-radius:5px;position:relative;overflow:hidden}
.fun .fb{height:100%;border-radius:4px;min-width:3px;transition:width .5s ease}
.fun .fv{font-size:12.5px;font-weight:700;text-align:right}
.fun .fp{font-size:11px;color:var(--muted);padding-left:123px;margin:-3px 0}
.cols{display:flex;align-items:flex-end;gap:3px;height:96px;padding-top:6px}
.cols .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;
  cursor:pointer;border-radius:5px 5px 0 0;min-width:8px}
.cols .c:hover{background:var(--brand-50)}
.cols .cb{width:100%;max-width:26px;border-radius:4px 4px 0 0;background:var(--brand);min-height:2px;transition:height .4s ease}
.cols .cb.mute{background:#b5dcce}
.cols .cl2{font-size:10px;color:var(--muted);white-space:nowrap}
.cols .cv2{font-size:10.5px;font-weight:700}
.split{display:flex;height:22px;border-radius:6px;overflow:hidden;gap:2px;background:var(--bg)}
.split .sg{cursor:pointer;min-width:4px;transition:flex .4s ease}
.split .sg:hover{filter:brightness(1.12)}
.slegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.slegend .li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);cursor:pointer;border-radius:6px;padding:2px 6px}
.slegend .li:hover{background:var(--brand-50)}
.slegend .sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.trend{width:100%;max-height:320px;display:block}
.trend .dotc{cursor:pointer}
.trend .dotc:hover circle{r:6}
.trend text{font-family:inherit}
.kpi{transition:transform .12s ease, box-shadow .12s ease}
.kpi.cl:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(14,124,90,.13);border-color:var(--brand)}
.sech{display:flex;align-items:center;gap:8px}
.sech::before{content:'';display:inline-block;width:4px;height:14px;border-radius:2px;background:var(--brand)}
/* ── DSH-06 — the v72 layout, drawn better. Donuts, bars and rings live INSIDE
   the sections the tiles lived in; same numbers, same clicks, better ink. */
.kpi .v{font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.kpi .l{letter-spacing:.4px}
.donutwrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.donutwrap svg circle{transition:stroke-width .1s ease}
.donutwrap svg circle:hover{stroke-width:26}
.dlegend{flex:1;min-width:230px;display:flex;flex-direction:column;gap:2px}
.dlrow{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;cursor:pointer}
.dlrow:hover{background:var(--brand-50)}
.dlrow .sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
/* PTL-17 — the one switch on the Dealer Portal page */
.tgl{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.tgl .k{position:relative;width:44px;height:26px;border-radius:13px;background:#c9d1d9;transition:.15s;flex:0 0 auto}
.tgl .k::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.15s}
.tgl.on .k{background:var(--brand)}.tgl.on .k::after{left:21px}
.tgl.dis{opacity:.45;cursor:not-allowed}.tgl .l{font-size:12.5px;color:var(--muted)}
.dlrow .rv{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;font-size:15px}
.hbars{display:flex;flex-direction:column;gap:4px}
.hbrow{display:grid;grid-template-columns:minmax(130px,180px) 1fr 74px;gap:12px;align-items:center;
  cursor:pointer;border-radius:9px;padding:6px 9px}
.hbrow:hover{background:var(--brand-50)}
.hbl{font-size:12.5px}
.hbtrack{height:14px;border-radius:7px;background:var(--line);overflow:hidden}
.hbfill{height:100%;border-radius:7px;transition:width .25s ease}
.hbv{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;font-size:15px}
.ring{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;border-radius:12px;
  padding:10px 8px;text-align:center;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease}
.ring:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(14,124,90,.13);border-color:var(--brand)}
.ring .ringl{font-size:12px}
.rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
/* PRC-14 — the product spec card: label — value lines instead of one comma-run */
.pspec{display:grid;grid-template-columns:auto 1fr;gap:1px 12px;font-size:12px;margin:5px 0 3px;align-items:baseline}
.pspec .pk{color:var(--muted);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.pspec .pv{color:var(--text)}
/* PRC-15 — media rows and the small delete cross on a thumbnail */
.mvrow{display:flex;gap:10px;align-items:center;padding:8px 2px;border-bottom:1px solid var(--line)}
.mvrow:last-child{border-bottom:0}
.mvdel{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--red);font-weight:800;font-size:12px;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
.mvdel:hover{background:var(--red);color:#fff}
/* CMP-08 — the tick-box picker. The .modal label rule (block, uppercase,
   muted) must not touch these rows, so every property it sets is reset. */
.pkchead{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;
  border-top:1px solid var(--line);font-size:13px;user-select:none}
.pkcat:first-child .pkchead{border-top:0}
.pkchead:hover{background:var(--brand-50)}
.pkchead b{font-weight:700}
.pkarrow{width:14px;color:var(--muted);font-size:12px;flex:0 0 auto}
.modal .pkchead input[type=checkbox]{width:15px;height:15px;padding:0;margin:0;flex:0 0 auto;accent-color:var(--brand);border:0}
.pkprods{margin:0 12px 6px 36px;border-left:2px solid var(--line);padding-left:10px}
.modal label.pkprow{display:flex;align-items:center;gap:9px;padding:4px 6px;font-size:12.5px;cursor:pointer;
  border-radius:6px;text-transform:none;color:var(--text);font-weight:400;margin:0}
.modal label.pkprow:hover{background:var(--brand-50)}
.pkcrow input,.pkprow input{width:15px;height:15px;accent-color:var(--brand);margin:0;flex:0 0 auto}
/* CMP-14 — the campaign form. Every multi-pick is a proper field: a labelled
   control that reads like a select, says what is chosen, and opens the tick
   list on click. No bare buttons. */
.cfld>label{display:block;font-size:11px;font-weight:800;letter-spacing:.45px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.cfin{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13.5px;background:#fff;color:var(--text)}
.cfin:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
textarea.cfin{resize:vertical}
/* QDS-01 — the quotation setup screen: a switch that reads as a sentence, and
   the image wells for the logo, the stamp and the QR code. */
.qstog{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:9px;cursor:pointer;background:#fff}
.qstog:hover{border-color:var(--brand)}
.qstog input{width:17px;height:17px;accent-color:var(--brand);margin:1px 0 0;flex:0 0 auto}
.qstog b{font-size:13.5px;font-weight:650}
.qsimg{width:150px;height:74px;border:1px dashed var(--line);border-radius:10px;display:flex;
  align-items:center;justify-content:center;background:#fbfbfa;overflow:hidden;font-size:11.5px}
.qsimg img{max-width:100%;max-height:100%;object-fit:contain}
/* SHP-01 — the two ship-to choices, side by side, each reading as a sentence */
.shiprow{display:flex;gap:10px;flex-wrap:wrap}
.shipchip{display:inline-block;background:var(--amber);color:#fff;font-size:10.5px;font-weight:700;
  padding:1px 7px;border-radius:20px;margin-left:6px;vertical-align:middle}
.pksel{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:#fff;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;font:inherit;font-size:13.5px;text-align:left;transition:border-color .12s,box-shadow .12s}
.pksel:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
.pksel .pksum{flex:1;min-width:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pksel.on{border-color:var(--brand);background:var(--brand-50)}
.pksel.on .pksum{color:var(--brand);font-weight:700}
.pksel .pkcar{color:var(--muted);font-size:10px;flex:0 0 auto}
.cfchips{margin-top:7px;line-height:2}
/* BHV-01 — the customer behaviour card */
.bhv{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:10px}
.bhv .b{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff;min-width:0}
.bhv .b .l{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bhv .b .v{font-size:16px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bhv .b .s{font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bhvbar{height:9px;border-radius:5px;background:var(--brand);opacity:.85;min-width:2px}
.cfsechd{display:flex;align-items:center;gap:10px}
.cfsechd .ic{width:34px;height:34px;border-radius:9px;background:var(--brand-50);display:flex;align-items:center;justify-content:center;font-size:17px;flex:0 0 auto}
.cfsechd .tt b{display:block;font-size:14.5px}
.cfsechd .tt span{font-size:12px;color:var(--muted)}
.chcard{display:grid;grid-template-columns:1fr;gap:0}
@media (max-width:640px){ .hbrow{grid-template-columns:minmax(100px,130px) 1fr 60px} }
.fvstrip{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line);overflow-x:auto;background:#fafbfc}
.fvstrip .th{width:58px;height:44px;border-radius:7px;border:2px solid transparent;object-fit:cover;cursor:pointer;
  background:#fff;flex:0 0 auto}
.fvstrip .th.on{border-color:var(--brand)}
.fvstrip .thp{width:58px;height:44px;border-radius:7px;border:2px solid transparent;cursor:pointer;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;background:#fff;font-size:18px;color:var(--muted)}
.fvstrip .thp.on{border-color:var(--brand)}
.fvcount{font-size:12px;color:var(--muted);margin-left:10px;white-space:nowrap}
.fvbox .fvb iframe{width:100%;height:80vh;border:0;background:#fff}
.modal{background:#fff;border-radius:14px;max-width:620px;width:100%;max-height:86vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal.wide{max-width:1000px}
/* the quotation as it prints — house format, taken off the real proforma invoice */
.doc{font-size:12.5px;color:#111}
.doc table{width:100%;border-collapse:collapse}
/* QDC-05 — a company name, an address and a two-person contact line are all
   longer than the cell somebody drew for them. Without this the SHIP TO block
   walks out through the right-hand border and off the page. */
.doc{table-layout:fixed}
.doc td,.doc th{border:1px solid #333;padding:6px 8px;vertical-align:top;
  overflow-wrap:anywhere;word-break:break-word}
.doc table{table-layout:fixed}
.doc .hdbox td{border:1px solid #333}
/* QDS-08 — the header colour is a SETTING, so the document reads it from a
   variable the quotation screen sets per document. The literal below is only
   the fallback for a document drawn before the settings are known. */
.doc th{background:var(--doc-head,#fbeee0);color:var(--doc-head-ink,#111);font-weight:600;text-align:center}
.doc tr.doctot td{background:var(--doc-head,#fbeee0);color:var(--doc-head-ink,#111)}
@media print{ .noprint,.nav,.top{display:none!important} .printonly{display:inline!important} .modal{max-width:none;box-shadow:none;max-height:none}
  .ovl{position:static;background:#fff;display:block!important;padding:0} body{background:#fff} }
.modal .mh{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:600;display:flex;align-items:center;gap:10px}
.modal .mh .mht{flex:1 1 auto;min-width:0}
.modal .mh .mx{flex:0 0 auto;margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:8px;width:32px;height:32px;font-size:15px;line-height:1;cursor:pointer;color:var(--muted)}
.modal .mh .mx:hover{background:var(--bg);color:var(--text)}
.modal .mb{padding:18px 20px}
.modal .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.modal label{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;margin:12px 0 5px}
/* a label wrapping a checkbox is a choice, not a field heading — it reads as
   ordinary sentence text and sits on one line with its box */
.modal label.tick,.modal label.chip-tick{display:inline-flex;align-items:center;gap:7px;text-transform:none;
  font-weight:500;font-size:12.5px;color:var(--text);margin:0}
/* SCH-02 — a scheme row: words left, switch right, the checkbox itself hidden */
.modal label.schrow{display:flex;align-items:center;gap:12px;justify-content:space-between;text-transform:none;font-weight:500;
  font-size:12.5px;color:var(--text);margin:0;padding:9px 0;border-top:1px solid var(--line-2);cursor:pointer;width:100%}
.modal label.schrow:first-of-type{border-top:0}
.modal label.schrow .schtx{flex:1 1 auto;min-width:0;line-height:1.4}
.modal label.schrow .schk{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.modal label.schrow .tgl{flex:0 0 auto}
.modal label.chip-tick{border:1px solid var(--line);border-radius:20px;padding:4px 11px;cursor:pointer;
  font-size:12px;white-space:nowrap}
.modal label.chip-tick input:checked+*,.modal label.chip-tick:has(input:checked){border-color:var(--brand);
  background:var(--brand-50);color:var(--brand-700);font-weight:600}
.modal label.chip-tick:hover{border-color:var(--brand);background:var(--brand-50)}
.modal label.chip-tick input{margin:0}
.pickbox{display:flex;flex-wrap:wrap;gap:6px;max-height:132px;overflow:auto;border:1px solid var(--line);
  border-radius:8px;padding:9px;background:#fff}
/* A picker folded down to one line, carrying its own count. Three of these open
   at once is what turned the qualifying call into a scroll. */
details.pick{border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:9px}
details.pick>summary{list-style:none;cursor:pointer;padding:9px 12px;font-size:11.5px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;user-select:none}
details.pick>summary::-webkit-details-marker{display:none}
details.pick>summary:hover{color:var(--brand-700)}
details.pick>summary::after{content:'\25be';font-size:13px;color:var(--muted);letter-spacing:0}
details.pick[open]>summary::after{content:'\25b4'}
details.pick .pickn{font-weight:600;text-transform:none;letter-spacing:0;color:var(--brand);font-size:11.5px;margin-left:auto}
details.pick .pickbox{border:0;border-top:1px solid var(--line);border-radius:0 0 10px 10px;max-height:150px}
/* a heading inside a long form, so a call reads as three short steps rather
   than one unbroken column of fields */
.qsec{margin:18px 0 4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-700);border-bottom:1px solid var(--line);padding-bottom:5px}
/* a folded section of the dealer thread — one day, or one deal */
details.tlg{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:8px}
details.tlg>summary{list-style:none;cursor:pointer;padding:10px 14px;font-size:13.5px;display:flex;
  align-items:center;gap:10px;user-select:none}
details.tlg>summary::-webkit-details-marker{display:none}
details.tlg>summary::before{content:'\25b8';color:var(--muted);font-size:12px;transition:transform .12s}
details.tlg[open]>summary::before{transform:rotate(90deg)}
details.tlg>summary:hover{background:#fafbfc}
details.tlg[open]>summary{border-bottom:1px solid var(--line)}
.tlgn{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
details.tlg .tl{padding:12px 16px 14px}
/* a face against a name — on a team spread across eleven states, most of whom
   have never met, initials in a circle stop being enough */
.avt{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--brand-50);color:var(--brand-700);
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:19px;
  border:2px solid var(--brand-100);flex:0 0 auto;overflow:hidden}
.avt.sm{width:30px;height:30px;font-size:11.5px;border-width:1px}
.avt.lg{width:78px;height:78px;font-size:26px}
/* A table wider than its card was being clipped by the card's overflow:hidden —
   the last columns simply disappeared off the right-hand edge of the Sales Head
   screens. The card keeps its rounded corners; the table scrolls inside it. */
.card:has(>table.t),.card:has(>div>table.t){overflow-x:auto}
.card .bd{overflow-x:auto}
.content{min-width:0}
.modal input,.modal select,.modal textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit}
/* CMP-08/09 — checkboxes in the tick pickers are checkboxes, not full-width
   text fields; declared after the generic modal input rule on purpose. */
.modal label.pkcrow input[type=checkbox],.modal label.pkprow input[type=checkbox]{
  width:15px;height:15px;padding:0;margin:0;flex:0 0 auto;accent-color:var(--brand);border:0}
.note{background:var(--brand-50);border:1px solid var(--brand-100);color:#0b4a3a;border-radius:9px;padding:11px 14px;font-size:13px;margin:12px 0}

/* ── ASST-01 · the assistant drawer ───────────────────────────────────── */
.askdim{position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:8000;display:none}
.askdim.on{display:block}
.askdrawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:94vw;background:#fff;
  border-left:1px solid var(--line);box-shadow:-14px 0 40px rgba(16,32,52,.14);z-index:8100;
  display:flex;flex-direction:column;transform:translateX(102%);transition:transform .22s ease}
.askdrawer.on{transform:none}
.askhead{display:flex;align-items:flex-start;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.askttl{font-weight:700;font-size:15px}
.asksub{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.askx{margin-left:auto;background:none;border:0;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.askbody{flex:1;overflow-y:auto;padding:14px 16px;background:#f8fafc}
.askfoot{border-top:1px solid var(--line);padding:12px 14px;background:#fff}
.askfoot input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:13.5px}
.askfine{font-size:10.5px;color:var(--muted);margin-top:7px}
.askq{background:var(--brand);color:#fff;border-radius:12px 12px 3px 12px;padding:9px 12px;font-size:13px;
  max-width:85%;margin:0 0 10px auto;width:fit-content}
.aska{background:#fff;border:1px solid var(--line);border-radius:12px 12px 12px 3px;padding:12px 14px;
  margin-bottom:12px;font-size:13.5px;line-height:1.5}
.askrow{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line)}
.askrow:first-of-type{border-top:0}
.askrow .t{font-weight:600;font-size:12.5px;min-width:0;flex:1}
.askrow .s{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:2px;line-height:1.4}
.askrow .r{font-weight:700;font-size:12.5px;white-space:nowrap}
.askrow.lnk{cursor:pointer}
.askrow.lnk:hover .t{color:var(--brand);text-decoration:underline}

.askfiles{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.askfile{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:8px 10px;cursor:pointer;font-size:12.5px}
.askfile:hover{border-color:var(--brand);background:var(--brand-50)}
.askfile .fi{font-size:16px}
.askfile .fn{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.askacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.askchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.askchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 11px;font-size:11.5px;
  cursor:pointer;color:#334155;text-align:left}
.askchip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.askscope{font-size:10.5px;color:var(--muted);margin-top:9px;padding-top:8px;border-top:1px dashed var(--line)}
.askblk{margin-top:12px}
.askblk h4{margin:0 0 4px;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.askwait{display:flex;gap:5px;align-items:center;color:var(--muted);font-size:12.5px;padding:6px 0}
.askwait i{width:6px;height:6px;border-radius:50%;background:var(--brand);display:inline-block;
  animation:askb 1s infinite ease-in-out}
.askwait i:nth-child(2){animation-delay:.15s}.askwait i:nth-child(3){animation-delay:.3s}
@keyframes askb{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media(max-width:700px){.askdrawer{width:100%}}
/* UIX-07 v120 — guidance moves behind an information button. The explanation is
   still one tap away; the screen shows the work, not the manual. Blocking and
   warning notes (.note.r / .note.w) are never collapsed: a person must see why
   an action is refused. */
.ib{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;flex:0 0 17px;
  border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);
  font-size:11px;font-weight:700;font-style:normal;line-height:1;cursor:pointer;padding:0;
  vertical-align:middle;text-transform:none;letter-spacing:0;transition:all .12s}
.ib:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.ib.on{border-color:var(--brand);color:#fff;background:var(--brand)}
.hintpop{position:fixed;z-index:9000;max-width:360px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 30px rgba(16,32,52,.16);padding:12px 14px;
  font-size:12.5px;line-height:1.55;color:#334155;display:none;text-transform:none;
  font-weight:400;letter-spacing:0;text-align:left}
.hintpop.show{display:block}
/* UIX-10 (v144) — GUIDANCE IS NEVER PAINTED, NOT PAINTED AND THEN TAKEN AWAY.
   The fold runs a moment after the screen is drawn, so for that moment the
   paragraph was on the page and then vanished, and the page jumped as it went.
   On the heaviest lists the moment was long enough to see. Anything marked as
   background reading starts hidden and only its ⓘ ever appears; a note kept on
   purpose (data-keep) is not background reading and is shown as it always was. */
.psub{display:none}
div.note[data-guide]:not(.r):not(.w){display:none}
div.note[data-guide][data-keep="1"]{display:block}
.hintpop b{color:#0f172a}
.note.w{background:var(--amber-bg);border-color:#f6d9a8;color:#8a5a06}
.note.r{background:var(--red-bg);border-color:#f6c9d0;color:#9c2233}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}
.main{margin-left:0}.grid2{grid-template-columns:1fr}.hamb{display:block!important}
/* DRW-01 (v150) — the drawer is the phone's height (dvh: the browser's own
   bars are not counted), the menu scrolls INSIDE it, and the person's block —
   profile, password, Sign out — stays pinned at the bottom of the screen.
   Before this, Sign out sat below the fold and the whole drawer had to be
   scrolled to reach it. A tap anywhere outside the drawer closes it. */
.sidebar{height:100vh;height:100dvh;overflow:hidden}
.sidebar .nav{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
.sidebar .who{flex:0 0 auto;background:#16202b;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.sbback{display:none;position:fixed;inset:0;background:rgba(10,18,26,.45);z-index:39}
.sidebar.open ~ .sbback{display:block}}

/* ══ MOB-01 (v144) · THE PLATFORM ON A PHONE ═══════════════════════════════
   Every screen here was built at a desk. On a phone a table of nine columns
   did not scroll — the card it sits in clips what does not fit, so the ninth
   column was not merely awkward, it was GONE, and nothing on the screen said
   so. A warehouse man holding a phone was reading a table with its right-hand
   half cut off and no way to reach it.

   A table read down a phone is not a table. It is one card per row, each field
   on its own line with the column's name beside it — which is how a man reads
   a delivery note anyway. The names come from the table's own header, applied
   by one pass over the page (cardify) rather than by rewriting a hundred
   screens, so a table added tomorrow gets this for free. */
@media(max-width:760px){
  .content{padding:14px 12px}
  .topbar{padding:9px 12px;gap:8px}
  .topbar input{font-size:16px}                    /* under 16px, iOS zooms the page in */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  /* a section's name and the caption beside it do not fit on one line of a
     phone, and half a caption pushed up against a heading reads as neither */
  .sech{flex-wrap:wrap;row-gap:2px}
  .sech > span,.sech > small,.sech .muted{flex-basis:100%;text-transform:none;letter-spacing:0}
  .kpi{padding:11px 12px}
  .kpi .v{font-size:20px}
  .kpi .l{font-size:9.5px}
  .kpi .s{font-size:10.5px}
  h2.pt{font-size:20px}
  /* a dialogue on a phone is the screen, not a card floating on it */
  .ovl{padding:0;align-items:stretch}
  .modal,.modal.wide{max-width:none;width:100%;max-height:100vh;height:100%;border-radius:0}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .filters,.fbar{flex-wrap:wrap}
  .filters select,.filters input,.fbar select,.fbar input{min-width:0;flex:1 1 46%}
  /* buttons stand in a row until there is no room, then they stack full width */
  .rowbtns,.mfoot,.actions{flex-wrap:wrap;gap:8px}
  .mfoot .btn,.actions .btn{flex:1 1 auto}
  /* DLG-02 (v150) — the dialogue's bottom bar wraps inside the screen; its first
     button (Close / Back) is never pushed off the left edge, and the bar stays
     in reach at the bottom while the body scrolls */
  .modal .mf{flex-wrap:wrap;justify-content:flex-start;position:sticky;bottom:0;background:#fff;padding:10px 12px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:2}
  .modal .mf .btn{flex:0 1 auto;white-space:nowrap;padding:9px 12px;font-size:13px}
  .modal .mh{position:sticky;top:0;background:#fff;z-index:2}
  img,canvas,svg,video{max-width:100%}
  /* A DOCUMENT IS NOT A LIST. The quotation shown here is the paper the
     dealer receives, and its shape carries meaning: two columns of party
     details, a rate table, a tax summary. Squeezed into 390 pixels it broke
     words in half — "Destinati on", "07/09/202 6" — which is not a smaller
     version of the document, it is a wrong one. It keeps the width it was
     drawn at and the phone slides across it, exactly as a photograph of the
     printed page would. */
  .doc{min-width:640px}
  .modal .docbox,#qdoc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ── one card per row ─────────────────────────────────────────────────── */
  table.t[data-carded],
  table.t[data-carded] tbody,
  table.t[data-carded] tr,
  table.t[data-carded] td{display:block;width:auto}
  table.t[data-carded] thead{display:none}
  table.t[data-carded] tr{border-bottom:1px solid var(--line);padding:11px 13px}
  table.t[data-carded] tr:last-child{border-bottom:0}
  /* MOB-03 (v150) — THE VALUE IS ONE SENTENCE. A carded cell used to be a flex
     row, and every piece of its value (a chip, a name, a note, "VR" and "L")
     became a column of its own, squeezed separately: "shi/ps/else/whe/re",
     "Pai/d", "Appro/val/sent". The label is set to the left by position, and
     the value flows as ordinary text — wrapping under itself, right-aligned,
     chips and switches in the same line as their words. */
  table.t[data-carded] td{border:0;padding:3px 0 3px 40%;display:block;position:relative;
    text-align:right;min-height:21px;overflow-wrap:anywhere}
  table.t[data-carded] td::before{content:attr(data-l);position:absolute;left:0;top:3px;width:37%;
    text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px;
    font-weight:700;line-height:1.8}
  table.t[data-carded] td > div{display:block}
  table.t[data-carded] td .chip,table.t[data-carded] td .tgl{vertical-align:middle}
  table.t[data-carded] td .thumbs{display:flex;justify-content:flex-end;margin-bottom:0}
  /* a code (DLR-000001, QT-00188) moves to the next line whole rather than
     breaking at its hyphen — an inline-block wraps inside only when it is
     wider than the line, which a code never is */
  table.t[data-carded] td span.mono,table.t[data-carded] td b.mono{display:inline-block;max-width:100%;vertical-align:baseline}
  /* the row's own name reads as its heading, not as one field among nine */
  table.t[data-carded] td.cardhd{display:block;text-align:left;font-weight:700;font-size:14.5px;padding-left:0;
    padding-bottom:5px}
  table.t[data-carded] td.cardhd::before{display:none}
  table.t[data-carded] td[data-empty="1"]{display:none}
  table.t[data-carded] td[colspan]{display:block;text-align:left;padding-left:0}
  table.t[data-carded] td[colspan]::before{display:none}
}
/* a field that upper-cases what is typed (a model, a code) does not shout its placeholder */
input::placeholder{text-transform:none}
/* PIK-01 — the suggestion list under a field */
.sugw{position:relative}
.sugg{position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);max-height:280px;overflow-y:auto;margin-top:3px}
.sugg .sg{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.sugg .sg:last-child{border-bottom:0}
.sugg .sg:hover,.sugg .sg:active{background:var(--brand-50)}
.sugg .t{font-weight:600;font-size:14px;color:var(--text);text-transform:none}
.sugg .s{font-size:12px;color:var(--muted);margin-top:1px}
.docbox.fit{overflow:hidden!important}

/* ══ MOB-02 (v148) · NOTHING SLIDES SIDEWAYS ═══════════════════════════════
   Dhawal, with nine screenshots: "there must be no option to scroll right and
   left to view details, each details should be visible properly in each
   window, logins, each page". v144 let a box scroll inside itself and let the
   quotation paper slide; both are reversed here. tests/audit148.mjs names
   every box that still slides, on every login and every screen, and this
   block is what empties that list. */
@media(max-width:760px){
  /* under 16px an iPhone zooms into the field when it is tapped, and stays
     zoomed after the keyboard goes — every field, every screen */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
  /* filter tabs wrap onto a second line instead of running off the screen */
  .tabs,span.tabs{flex-wrap:wrap;overflow:visible!important;max-width:100%;row-gap:0}
  .tabs button{padding:8px 10px;font-size:13px}
  /* a card heading whose right-hand side holds tabs or a caption: the tabs
     drop under the heading and take the whole width */
  .card .hd{flex-wrap:wrap}
  .card .hd .r{margin-left:auto;max-width:100%}
  .card .hd .r:has(.tabs){flex-basis:100%;margin-left:0;margin-top:4px}
  /* MOB-03 — a heading's caption that carries buttons (Refunds, Ledger…) takes
     the whole width; its buttons sit in their own row under the words */
  .card .hd .r:has(.btn){flex-basis:100%;margin-left:0;margin-top:4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .card .hd .r:has(.btn) .btn{margin-left:0!important}
  /* nothing inside a carded row keeps a fixed width or refuses to wrap */
  table.t[data-carded] td{min-width:0}
  table.t[data-carded] td > *{min-width:0;max-width:100%}
  /* a carded row is a flex row, and a flex item's floor is its longest
     unbreakable word unless the wrap is 'anywhere' — 'break-word' leaves an
     email address or a long reference pushing the card out (found on the
     Audit log, v149) */
  table.t[data-carded] td{overflow-wrap:anywhere}
  table.t[data-carded] td .chip,table.t[data-carded] td b,table.t[data-carded] td .muted,table.t[data-carded] td span{white-space:normal;overflow-wrap:anywhere}
  table.t[data-carded] td .chipwrap{flex-wrap:wrap;justify-content:flex-end}
  table.t[data-carded] td > div:has(> .btn){display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
  table.t[data-carded] td .btn{white-space:nowrap;overflow-wrap:normal}
  /* a field inside a carded row takes the whole row, its label above it */
  table.t[data-carded] td:has(> input,> select,> textarea,> .sugw,> div > input,> .btn,> div > .btn){display:block;text-align:left;padding-left:0}
  table.t[data-carded] td:has(> input,> select,> textarea,> .sugw,> div > input,> .btn,> div > .btn)::before{display:block;position:static;width:auto;margin-bottom:3px}
  table.t[data-carded] td:has(> .btn,> div > .btn)::before{display:none}
  table.t[data-carded] td:has(> .btn),table.t[data-carded] td > div:has(> .btn){display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;padding-top:6px}
  /* a note beside a switch or a chip goes on its own line, so every switch in
     a column sits at the same edge (Dhawal: "on off toggle buttons not in one line") */
  table.t[data-carded] td .tgl ~ span,table.t[data-carded] td .tgl ~ .muted{display:block;margin-top:3px}
  table.t[data-carded] td input,table.t[data-carded] td select,table.t[data-carded] td .sugw{width:100%!important}
  /* a table of two or three columns is left a table; its cells wrap */
  table.t:not([data-carded]) td,table.t:not([data-carded]) th{white-space:normal;overflow-wrap:anywhere}
  .card{min-width:0;max-width:100%;overflow:hidden}
  .card .bd{min-width:0}
  /* the small captions on the behaviour tiles read in full */
  .bhv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bhv .b .l,.bhv .b .v,.bhv .b .s{white-space:normal;overflow:visible;text-overflow:clip}
  details.tlg summary,.tlgn{white-space:normal}
  /* two-column grids become one column: the key/value block, the form grid,
     the quotation form's header, side-by-side cards in a dialogue */
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv .k{margin-top:6px}
  .grid2,.frm,.qfgrid{grid-template-columns:1fr!important}
  .modal,.modal.wide{min-width:0;overflow-x:hidden}
  .modal .mb{min-width:0}
  .modal .mb > .card > .bd{overflow-x:visible}
  .modal .mb [style*="display:flex"]:not(.tick){flex-wrap:wrap}
  .modal .mb [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  /* the paper: scaled by fitDocs() to the width it is given; never slides */
  .doc{min-width:0}
  .modal .docbox,#qdoc-wrap{overflow-x:hidden}
  /* DOC-03 (v151) — THE LINES ON A PHONE. v150 gave the screen paper the PDF's
     column proportions (DOC-02) so Items had room on a desk. Scaled to a phone
     those proportions squeezed "No.", "11 UNT" and "₹ 3,54,336.19" into
     syllables (Dhawal: "everything is disturbed, nothing is in one sequence").
     On the phone the lines table lays itself out by content again — a number
     is never broken — and the DESCRIPTION is the one thing that gives: one
     line, cut with an ellipsis, the model number beside it in full. The
     proportions stay on the desk and in the PDF. */
  .doc table.lines{table-layout:auto}
  .doc table.lines col{width:auto!important}
  .doc table.lines td{white-space:nowrap;overflow-wrap:normal;word-break:normal}
  .doc table.lines th{white-space:normal;overflow-wrap:normal;word-break:normal}
  .doc table.lines td.desc{max-width:0;min-width:120px;overflow:hidden;text-overflow:ellipsis}
  /* long single tokens — a reference, a timestamp, a GSTIN — break rather
     than push the row out */
  td,.kv > div,.muted,.mono{overflow-wrap:break-word}
  .btn{overflow-wrap:normal}
  /* buttons in a row wrap when the row is full */
  .bd > div:has(> .btn){flex-wrap:wrap}
  /* the ASM's states on the Users page: the whole list, not an ellipsis */
  .terr{max-width:none!important;white-space:normal!important;overflow:visible!important}
  /* a select is never wider than the box it is in, whatever its longest option */
  select,input,textarea{max-width:100%}
  .bd > select,.bd > div > select{width:100%}
}
.hamb{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:5px 9px;cursor:pointer}
/* ── SVC-PORT CSS BEGIN · generated by scripts/port-warrantydesk-client.py — do not edit by hand ── */
#svc{
  --brand:#0e7c5a; --brand-600:#0b6a4d; --brand-700:#095440; --brand-50:#e8f5f0; --brand-100:#cdeae0;
  --bg:#f3f5f7; --surface:#ffffff; --line:#e5e9ee; --line-2:#eef1f4;
  --text:#16202b; --muted:#647587; --muted-2:#93a1b0;
  --amber:#f59e0b; --amber-bg:#fef3e2; --green:#16a34a; --green-bg:#e7f6ec;
  --blue:#2563eb; --blue-bg:#e7eefe; --red:#e0384e; --red-bg:#fdeaec; --slate:#475569;
  --shadow:0 1px 2px rgba(16,32,45,.04),0 2px 8px rgba(16,32,45,.06);
  --shadow-lg:0 8px 30px rgba(16,32,45,.12);
  --radius:12px; --radius-sm:8px;
  --sans:'Segoe UI',Roboto,-apple-system,Helvetica,Arial,sans-serif;
}#svc *{box-sizing:border-box;margin:0;padding:0}#svc, #svc{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}#svc a{color:inherit;text-decoration:none}#svc button{font-family:inherit;cursor:pointer;border:none;background:none}#svc ::-webkit-scrollbar{width:10px;height:10px}#svc ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px;border:2px solid var(--bg)}#svc .app-unused{display:flex;min-height:100vh}#svc .sidebar{width:250px;background:#0c1b26;color:#c7d2dd;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:40;transition:transform .25s}#svc .brand{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.07)}#svc .brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#12b886);display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px}#svc .brand b{color:#fff;font-size:15px;letter-spacing:.2px}#svc .brand span{display:block;font-size:11px;color:#7d8ea0;font-weight:500}#svc .nav{padding:12px 12px;flex:1;overflow:auto}#svc .nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:#5f7183;margin:14px 10px 6px}#svc .nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:#aebccb;font-weight:500;font-size:13.5px;margin-bottom:2px;transition:.15s}#svc .nav a:hover{background:rgba(255,255,255,.05);color:#fff}#svc .nav a.active{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(14,124,90,.4)}#svc .nav a .ic{width:18px;text-align:center;font-size:15px}#svc .nav a .badge{margin-left:auto;background:var(--amber);color:#3a2500;font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px}#svc .side-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;color:#6b7d8f}#svc .side-user{display:flex;align-items:center;gap:10px}#svc .side-user .av{width:30px;height:30px;border-radius:50%;background:#1f3b4d;color:#8fd3bd;display:grid;place-items:center;font-weight:700;font-size:12px}#svc .main-unused{flex:1;margin-left:250px;display:flex;flex-direction:column;min-width:0}#svc .topbar{height:60px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 24px;position:sticky;top:0;z-index:30}#svc .hamburger{display:none;font-size:22px;color:var(--slate)}#svc .topbar h1{font-size:17px;font-weight:700}#svc .topbar .sub{color:var(--muted);font-size:12.5px;font-weight:500;margin-top:1px}#svc .search{margin-left:auto;position:relative;display:flex;align-items:center}#svc .search input{border:1px solid var(--line);background:var(--bg);border-radius:20px;padding:8px 14px 8px 34px;width:230px;font-size:13px;outline:none}#svc .search input:focus{border-color:var(--brand);background:#fff}#svc .search .si{position:absolute;left:12px;color:var(--muted-2)}#svc .top-actions{display:flex;align-items:center;gap:12px}#svc .msearch{display:none}#svc .icon-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--slate);font-size:16px;position:relative}#svc .icon-btn:hover{background:var(--bg)}#svc .icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid #fff}#svc .btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:9px;font-weight:600;font-size:13.5px;transition:.15s;white-space:nowrap}#svc .btn-primary{background:var(--brand);color:#fff}#svc .btn-primary:hover{background:var(--brand-600)}#svc .btn-ghost{background:var(--bg);color:var(--slate);border:1px solid var(--line)}#svc .btn-ghost:hover{background:#e9edf1}#svc .btn-lg{padding:12px 22px;font-size:15px}#svc .svc-content{padding:24px;max-width:1320px;width:100%;margin:0 auto;flex:1;display:flex;flex-direction:column}#svc .app-footer{margin-top:auto;padding:26px 16px 30px;text-align:center;border-top:1px solid var(--line)}#svc .app-footer .ft-brand{display:inline-flex;align-items:center;gap:8px;justify-content:center}#svc .app-footer .ft-logo{width:22px;height:22px;border-radius:6px;object-fit:contain;opacity:.9}#svc .app-footer .ft-name{font-weight:700;color:var(--text);font-size:13.5px;letter-spacing:.2px}#svc .app-footer .ft-sub{color:var(--muted);font-size:11.5px;margin-top:5px;letter-spacing:.4px;text-transform:uppercase}#svc .page{display:none}#svc .page.active{display:block;animation:fade .25s}@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}#svc .grid{display:grid;gap:16px}#svc .kpis{grid-template-columns:repeat(5,1fr)}#svc .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}#svc .kpi{padding:16px 18px;position:relative;overflow:hidden}#svc .kpi .k-top{display:flex;justify-content:space-between;align-items:flex-start}#svc .kpi .k-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:17px}#svc .kpi .k-val{font-size:27px;font-weight:800;margin-top:12px;letter-spacing:-.5px}#svc .kpi .k-lbl{color:var(--muted);font-size:12.5px;font-weight:600;margin-top:2px}#svc .kpi .k-trend{font-size:11.5px;font-weight:600;margin-top:8px}#svc .up{color:var(--green)}#svc .down{color:var(--red)}#svc .sec-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px;margin-bottom:2px}#svc .sec-sub{color:var(--muted);font-size:12.5px;margin-bottom:14px}#svc .chart-wrap{padding:18px 20px}#svc .chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}#svc .chart-box{position:relative;height:250px}#svc .chart-box.sm{height:220px}#svc .table-card{overflow:hidden}#svc .table-tools{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}#svc .filter{position:relative}#svc .filter select{appearance:none;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 30px 8px 12px;font-size:12.5px;font-weight:500;color:var(--slate);cursor:pointer;outline:none}#svc .filter::after{content:"▾";position:absolute;right:11px;top:9px;color:var(--muted-2);pointer-events:none;font-size:11px}#svc table{width:100%;border-collapse:collapse}#svc thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;padding:12px 16px;background:var(--line-2);white-space:nowrap}#svc tbody td{padding:13px 16px;border-bottom:1px solid var(--line-2);font-size:13px;vertical-align:middle}#svc tbody tr{transition:.12s}#svc tbody tr:hover{background:var(--brand-50);cursor:pointer}#svc .cid{font-weight:700;color:var(--brand)}#svc .cust b{display:block}#svc .cust span{color:var(--muted);font-size:11.5px}#svc .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700}#svc .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}#svc .p-pending{background:var(--amber-bg);color:#b26a00}#svc .p-approved{background:var(--green-bg);color:#0f7a34}#svc .p-partial{background:var(--blue-bg);color:#1d4ed8}#svc .p-rejected{background:var(--red-bg);color:#c02338}#svc .p-info{background:#efe9fd;color:#6d28d9}#svc .tag{display:inline-block;padding:3px 9px;border-radius:6px;background:var(--line-2);color:var(--slate);font-size:11.5px;font-weight:600}#svc .muted{color:var(--muted)}#svc .row2{grid-template-columns:1.4fr 1fr}#svc .row-eq{grid-template-columns:1fr 1fr}#svc .rank-list{padding:6px 20px 16px}#svc .rank{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}#svc .rank:last-child{border:none}#svc .rank .r-n{width:24px;height:24px;border-radius:7px;background:var(--brand-50);color:var(--brand);font-weight:800;font-size:12px;display:grid;place-items:center}#svc .rank .r-name{font-weight:600;font-size:13px}#svc .rank .r-bar{flex:1;height:7px;background:var(--line-2);border-radius:6px;overflow:hidden;margin:0 4px}#svc .rank .r-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#25c08c);border-radius:6px}#svc .rank .r-val{font-weight:700;font-size:12.5px;color:var(--slate);width:34px;text-align:right}#svc .wizard{display:grid;grid-template-columns:230px 1fr;gap:22px;align-items:start}#svc .stepper{position:sticky;top:84px}#svc .stepper .step{display:flex;gap:12px;padding:9px 6px;position:relative}#svc .stepper .step .sc{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--muted-2);z-index:2;flex-shrink:0}#svc .stepper .step:not(:last-child)::before{content:"";position:absolute;left:19px;top:34px;bottom:-4px;width:2px;background:var(--line)}#svc .stepper .step .st{font-size:13px;font-weight:600;color:var(--muted);padding-top:4px}#svc .stepper .step .st small{display:block;font-size:11px;color:var(--muted-2);font-weight:500}#svc .stepper .step.done .sc{background:var(--brand);border-color:var(--brand);color:#fff}#svc .stepper .step.done::before{background:var(--brand)}#svc .stepper .step.current .sc{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px var(--brand-50)}#svc .stepper .step.current .st{color:var(--text)}#svc .wiz-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-height:440px;display:flex;flex-direction:column}#svc .wiz-body{padding:24px 26px;flex:1}#svc .wiz-stagehead{display:flex;align-items:center;gap:12px;margin-bottom:4px}#svc .wiz-stagehead .n{background:var(--brand-50);color:var(--brand);font-weight:800;font-size:12px;padding:4px 10px;border-radius:20px}#svc .wiz-stagehead h2{font-size:18px;font-weight:700}#svc .wiz-note{color:var(--muted);font-size:12.5px;margin-bottom:20px}#svc .progress-top{height:5px;background:var(--line-2);border-radius:0}#svc .progress-top span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#22c58d);transition:width .3s}#svc .wiz-foot{display:flex;justify-content:space-between;align-items:center;padding:16px 26px;border-top:1px solid var(--line)}#svc .save-state{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}#svc .save-state .d{width:7px;height:7px;border-radius:50%;background:var(--green)}#svc .field{margin-bottom:16px}#svc .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}#svc .form-grid.g3{grid-template-columns:1fr 1fr 1fr}#svc .field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--slate)}#svc .field label .req{color:var(--red);margin-left:2px}#svc .field input, #svc .field select, #svc .field textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13.5px;font-family:inherit;outline:none;background:#fff;color:var(--text);transition:.15s}#svc .field input:focus, #svc .field select:focus, #svc .field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}#svc .field input:disabled{background:var(--bg);color:var(--muted)}#svc .field textarea{resize:vertical;min-height:110px}#svc .field .hint{font-size:11.5px;color:var(--muted);margin-top:5px}#svc .field.err input, #svc .field.err select, #svc .field.err textarea{border-color:var(--red);background:var(--red-bg)}#svc .field .errmsg{display:none;color:var(--red);font-size:11.5px;font-weight:600;margin-top:5px}#svc .field.err .errmsg{display:block}#svc .autofield{background:var(--brand-50);border:1px dashed var(--brand-100);border-radius:9px;padding:10px 12px;display:flex;align-items:center;gap:8px;font-weight:700;color:var(--brand-700);font-size:13.5px}#svc .autofield .lock{font-size:12px}#svc .radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}#svc .radio-card{border:1.5px solid var(--line);border-radius:11px;padding:16px;cursor:pointer;transition:.15s;display:flex;gap:12px;align-items:flex-start}#svc .radio-card:hover{border-color:var(--brand-100)}#svc .radio-card.sel{border-color:var(--brand);background:var(--brand-50)}#svc .radio-card .rc-ic{font-size:22px}#svc .radio-card b{display:block;font-size:14px}#svc .radio-card span{font-size:12px;color:var(--muted)}#svc .parts-table{margin-bottom:12px}#svc .parts-table .pt-head{display:none}#svc .parts-row{border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:10px;background:#fff}#svc .pr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px}#svc .pr-title{font-weight:700;font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:.4px}#svc .pr-del{border:1px solid #f3c9cf;background:#fff;color:var(--red);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}#svc .pr-del:hover{background:var(--red-bg)}#svc .pr-grid{display:grid;grid-template-columns:2fr 1.4fr .7fr 1.4fr;gap:10px}#svc .pr-f{display:flex;flex-direction:column;gap:4px;min-width:0}#svc .pr-f > span{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}#svc .pr-f input, #svc .pr-f select{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:13.5px;font-family:inherit;background:#fff;outline:none;color:var(--text)}#svc .pr-f input:focus, #svc .pr-f select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}#svc .upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}#svc .dropzone{border:2px dashed var(--line);border-radius:11px;padding:22px;text-align:center;cursor:pointer;transition:.15s;background:var(--bg)}#svc .dropzone:hover{border-color:var(--brand);background:var(--brand-50)}#svc .dropzone.filled{border-style:solid;border-color:var(--brand);padding:0;background:#000}#svc .dropzone .dz-ic{font-size:26px;color:var(--muted-2)}#svc .dropzone b{display:block;font-size:13px;margin-top:8px}#svc .dropzone span{font-size:11.5px;color:var(--muted)}#svc .dz-req{color:var(--red);font-weight:700}#svc .thumb{position:relative;border-radius:9px;overflow:hidden;height:130px}#svc .thumb img{width:100%;height:100%;object-fit:cover;display:block}#svc .thumb .rm{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px}#svc .thumb .cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:11px;font-weight:600;padding:14px 8px 6px}#svc .review-sec{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden}#svc .review-sec h4{background:var(--line-2);padding:10px 14px;font-size:12.5px;font-weight:700;display:flex;justify-content:space-between}#svc .review-sec h4 a{color:var(--brand);font-size:11.5px}#svc .review-grid{padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}#svc .review-grid .rg{font-size:12.5px}#svc .review-grid .rg span{color:var(--muted);display:block;font-size:11px}#svc .confirm-box{background:var(--amber-bg);border:1px solid #f7d9a3;border-radius:10px;padding:14px;display:flex;gap:10px;align-items:flex-start;margin-top:8px}#svc .confirm-box input{margin-top:3px}#svc .detail-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}#svc .back-btn{display:inline-flex;align-items:center;gap:6px;color:var(--slate);font-weight:600;font-size:13px}#svc .back-btn:hover{color:var(--brand)}#svc .detail-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}#svc .case-sec{margin-bottom:16px}#svc .case-sec .cs-head{font-size:13px;font-weight:700;padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}#svc .case-sec .cs-head .ci{color:var(--brand)}#svc .info-grid{padding:14px 16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}#svc .info-grid .ig span{color:var(--muted);font-size:11px;display:block;margin-bottom:2px}#svc .info-grid .ig b{font-size:13px;font-weight:600}#svc .desc-block{padding:14px 16px;font-size:13px;color:var(--slate);line-height:1.7}#svc .gallery{padding:14px 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}#svc .gallery .g-item{height:90px;border-radius:9px;overflow:hidden;position:relative;border:1px solid var(--line)}#svc .gallery .g-item img{width:100%;height:100%;object-fit:cover}#svc .gallery .g-item .g-cap{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);color:#fff;font-size:9.5px;padding:3px 6px;font-weight:600}#svc .gallery .g-item.video::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:20px;background:rgba(0,0,0,.25)}#svc .approve-table thead th{background:var(--line-2)}#svc .approve-table .qty-in{width:64px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;text-align:center}#svc .approve-table .dec{display:flex;gap:6px}#svc .dec-btn{padding:5px 11px;border-radius:7px;font-size:11.5px;font-weight:700;border:1.5px solid var(--line);color:var(--slate)}#svc .dec-btn.a.on{background:var(--green-bg);border-color:var(--green);color:#0f7a34}#svc .dec-btn.r.on{background:var(--red-bg);border-color:var(--red);color:#c02338}#svc .rmk-in{width:100%;border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:12px}#svc .decision-panel{position:sticky;top:84px}#svc .dp-body{padding:16px}#svc .dp-body h3{font-size:14px;font-weight:700;margin-bottom:4px}#svc .dp-body .sla{background:var(--amber-bg);border-radius:9px;padding:10px 12px;display:flex;gap:10px;align-items:center;margin:12px 0;font-size:12px}#svc .dp-body .sla b{color:#b26a00}#svc .summary-line{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--line-2)}#svc .summary-line b{font-weight:700}#svc .decision-btns{display:grid;gap:9px;margin-top:14px}#svc .dbtn{padding:12px;border-radius:9px;font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}#svc .dbtn.approve{background:var(--green);color:#fff}#svc .dbtn.approve:hover{background:#128a3a}#svc .dbtn.partial{background:var(--blue);color:#fff}#svc .dbtn.partial:hover{background:#1d4ed8}#svc .dbtn.reject{background:#fff;color:var(--red);border:1.5px solid var(--red)}#svc .dbtn.reject:hover{background:var(--red-bg)}#svc .dbtn.info{background:#fff;color:#6d28d9;border:1.5px solid #c4b5fd}#svc .dbtn.info:hover{background:#efe9fd}#svc .dp-body textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;font-size:13px;font-family:inherit;min-height:80px;resize:vertical;outline:none;margin-top:6px}#svc .dp-body textarea:focus{border-color:var(--brand)}#svc .timeline{padding:6px 16px 14px}#svc .tl{display:flex;gap:12px;padding:8px 0;position:relative}#svc .tl:not(:last-child)::before{content:"";position:absolute;left:12px;top:26px;bottom:-2px;width:2px;background:var(--line)}#svc .tl .tl-d{width:26px;height:26px;border-radius:50%;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;font-size:12px;flex-shrink:0;z-index:1}#svc .tl .tl-c b{font-size:12.5px}#svc .tl .tl-c span{display:block;font-size:11px;color:var(--muted)}#svc .toast{position:fixed;bottom:24px;right:24px;background:#0c1b26;color:#fff;padding:14px 18px;border-radius:11px;box-shadow:var(--shadow-lg);display:flex;gap:11px;align-items:center;font-size:13.5px;font-weight:600;z-index:100;transform:translateY(120px);opacity:0;transition:.3s;max-width:360px}#svc .toast.show{transform:none;opacity:1}#svc .toast .t-ic{width:26px;height:26px;border-radius:50%;background:var(--brand);display:grid;place-items:center;flex-shrink:0}#svc .toast.warn .t-ic{background:var(--amber)}#svc .toast.err .t-ic{background:var(--red)}#svc .hide{display:none!important}#svc .overlay{position:fixed;inset:0;background:rgba(12,27,38,.4);z-index:39;display:none}#svc .overlay.show{display:block}@media(max-width:1080px){#svc .kpis{grid-template-columns:repeat(3,1fr)}#svc .row2, #svc .row-eq{grid-template-columns:1fr}#svc .detail-grid{grid-template-columns:1fr}#svc .decision-panel{position:static}#svc .detail-grid{min-width:0}#svc .detail-grid>div, #svc .decision-panel{min-width:0;max-width:100%}}#svc .table-scroll{max-width:100%}@media(max-width:820px){#svc .sidebar{transform:translateX(-100%)}#svc .sidebar.open{transform:none}#svc .main-unused{margin-left:0}#svc .hamburger{display:block}#svc .search{display:none}#svc .msearch{display:flex;align-items:center;position:relative;margin-bottom:12px}#svc .msearch input{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:22px;padding:11px 16px 11px 40px;font-size:16px;outline:none;font-family:inherit;color:var(--text)}#svc .msearch input:focus{border-color:var(--brand);background:#fff}#svc .msearch .si{position:absolute;left:15px;color:var(--muted-2);font-size:16px}#svc input, #svc select, #svc textarea, #svc .field input, #svc .field select, #svc .field textarea, #svc .dp-body textarea{font-size:16px!important}#svc .topbar{gap:10px;padding:0 14px}#svc .titlewrap{flex:1;min-width:0}#svc .topbar h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#svc .topbar .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}#svc .top-actions{gap:8px;flex-shrink:0}#svc .wizard{grid-template-columns:1fr}#svc .stepper{position:static;display:flex;overflow-x:auto;gap:0;padding-bottom:8px;margin-bottom:6px}#svc .stepper .step{flex-direction:column;align-items:center;min-width:80px;text-align:center;padding:6px 2px}#svc .stepper .step:not(:last-child)::before{left:auto;top:19px;right:-40px;left:auto;width:60px;height:2px}#svc .stepper .step .st{font-size:10px;padding-top:2px}#svc .stepper .step .st small{display:none}}@media(max-width:640px){#svc .kpis{grid-template-columns:1fr 1fr}#svc .svc-content{padding:16px}#svc .form-grid, #svc .form-grid.g3, #svc .radio-cards, #svc .upload-grid{grid-template-columns:1fr}#svc #anFilters, #svc #focFilters{display:grid!important;grid-template-columns:1fr 1fr;gap:10px 10px;align-items:end}#svc #anFilters .field, #svc #focFilters .field{min-width:0!important;width:auto;margin:0}#svc #anFilters .field select, #svc #anFilters .field input, #svc #focFilters .field select, #svc #focFilters .field input{width:100%}#svc #anFilters .btn, #svc #focFilters .btn{grid-column:1/-1;width:100%;justify-content:center}#svc .info-grid{grid-template-columns:1fr 1fr}#svc .gallery{grid-template-columns:repeat(2,1fr)}#svc .pr-grid{grid-template-columns:1fr}#svc .pr-f input, #svc .pr-f select{font-size:16px}#svc table.mstack .dec{display:flex;gap:6px;width:100%}#svc table.mstack .dec .dec-btn{flex:1}#svc table.mstack .qty-in, #svc table.mstack .rmk-in{width:100%}#svc .topbar h1{font-size:15px}#svc .table-scroll{overflow-x:auto}#svc table:not(.mstack){min-width:760px}#svc table.mstack{min-width:0!important;width:100%}#svc table.mstack thead{display:none}#svc table.mstack tbody, #svc table.mstack tr, #svc table.mstack td{display:block;width:auto}#svc table.mstack tr{border:1.5px solid #cfd8dd;border-radius:12px;margin:0 0 16px;padding:12px 14px;background:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(16,50,58,.10)}#svc table.mstack tr:active{border-color:var(--brand);box-shadow:0 2px 10px rgba(12,133,119,.18)}#svc table.mstack td{border:none!important;padding:6px 0;text-align:left}#svc table.mstack td:not(:last-child){border-bottom:1px solid var(--line-2)!important}#svc table.mstack td::before{content:attr(data-label);display:block;font-weight:700;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}#svc table.mstack td.cid{font-weight:700}#svc table.mstack .cust{display:block}#svc table.mstack .cust span{display:block;font-size:12px;color:var(--muted)}}#svc .qf{display:flex;gap:10px;flex-wrap:wrap}#svc .qf-opt{flex:1;min-width:120px;border:1.5px solid var(--line);border-radius:10px;padding:12px;font-weight:700;font-size:14px;color:var(--slate);background:#fff;display:flex;align-items:center;justify-content:center;gap:8px}#svc .qf-opt:hover{border-color:var(--brand-100)}#svc .qf-opt.on{border-color:var(--brand);background:var(--brand-50);color:var(--brand-700)}#svc #lightbox{position:fixed;inset:0;background:rgba(8,15,22,.88);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}#svc #lightbox.show{display:flex}#svc #lightbox img, #svc #lightbox video{max-width:92vw;max-height:88vh;border-radius:10px}#svc #lightbox .lb-close{position:absolute;top:20px;right:26px;color:#fff;font-size:30px;cursor:pointer}#svc .g-item{cursor:pointer}#svc .comp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin-top:16px}#svc .comp-card h3{font-size:15px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px}#svc .comp-card .sub{color:var(--muted);font-size:12.5px;margin-bottom:16px}#svc .kpi{cursor:pointer;transition:.12s}#svc .kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}#svc .kpi.sel{outline:2px solid var(--brand)}#svc .chips{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}#svc .chip{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid var(--line);color:var(--slate);cursor:pointer;background:#fff}#svc .chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}#svc .p-parts{background:#e6f7f4;color:#0c8577}#svc .p-hold{background:var(--amber-bg);color:#b26a00}#svc .p-closed{background:#eef1f4;color:#475569}#svc .aud-btn{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--slate);cursor:pointer}#svc .aud-btn.rec{background:var(--red-bg);color:var(--red);border-color:var(--red)}#svc .aud-t{font-size:12px;color:var(--red);font-weight:700;margin-left:8px}#svc .aud-x{color:var(--red);font-size:12px;cursor:pointer;margin-left:8px}#svc .audio-w{margin-top:8px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}#svc .utable{width:100%;border-collapse:collapse}#svc .utable th{text-align:left;font-size:11px;text-transform:uppercase;color:var(--muted);padding:10px 14px;background:var(--line-2)}#svc .utable td{padding:11px 14px;border-bottom:1px solid var(--line-2);font-size:13px}#svc .daybadge{display:inline-block;background:#fff4e6;color:#b45309;border:1px solid #fbd9a8;border-radius:8px;padding:4px 10px;font-weight:700;font-size:12.5px}
/* the platform's frame around the desk: a title, a row of tabs, one button */
#svc{background:transparent;padding:0}
#svc .svc-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 14px;margin:0 0 14px}
#svc .svc-head .titlewrap{flex:1 1 auto;min-width:160px}
#svc .svc-tabs{display:flex;gap:6px;flex-wrap:wrap;flex-basis:100%}
#svc .svc-tabs button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;min-height:36px;box-shadow:var(--shadow)}
#svc .svc-tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
#svc .svc-tabs button .badge{margin-left:0}
#svc .svc-tabs button.on .badge{background:#fff;color:var(--brand-700)}
#svc .svc-content>.page{padding:0}
#svc .toast{z-index:1200}

/* ── SVC-PORT CSS END ── */

