/* Autocare Garage Manager — workshop palette shared with Workshop Champions */
:root{
  --bg:#EEF2F4; --surface:#FFFFFF; --sunk:#E3E9ED; --line:#CDD6DC; --line-strong:#B5C2CB;
  --ink:#14232D; --muted:#5A6B77;
  --accent:#FFBD59; --accent-ink:#8A5300; --accent-soft:#FFF0D6;
  --petrol:#004AAD; --petrol-soft:#DDE8F8;
  --brand:#004AAD; --brand-deep:#003A88; --gold:#FFBD59;
  --good:#1F7A4D; --good-soft:#DDF1E6; --bad:#B3261E; --bad-soft:#F8E0DE; --warn:#A35A00; --warn-soft:#FCE9D2;
  --plate:#F7D117;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:10px; --nav:232px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E171D; --surface:#16222A; --sunk:#1D2C35; --line:#2B3D48; --line-strong:#3B5260;
  --ink:#E7EEF2; --muted:#93A6B2;
  --accent:#FFBD59; --accent-ink:#FFCF85; --accent-soft:#3A2C12;
  --petrol:#7FAEF0; --petrol-soft:#13284A;
  --good:#5CC08B; --good-soft:#123426; --bad:#F08A82; --bad-soft:#3A1715; --warn:#F2A65A; --warn-soft:#3A2410;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E171D; --surface:#16222A; --sunk:#1D2C35; --line:#2B3D48; --line-strong:#3B5260;
  --ink:#E7EEF2; --muted:#93A6B2;
  --accent:#FFBD59; --accent-ink:#FFCF85; --accent-soft:#3A2C12;
  --petrol:#7FAEF0; --petrol-soft:#13284A;
  --good:#5CC08B; --good-soft:#123426; --bad:#F08A82; --bad-soft:#3A1715; --warn:#F2A65A; --warn-soft:#3A2410;
  color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0;line-height:1.05;text-wrap:balance}
h1{font-size:2.1rem;font-weight:900}
h2{font-size:1.35rem;font-weight:800}
h3{font-size:1.1rem;font-weight:800}
a{color:var(--petrol)}
.num{font-variant-numeric:tabular-nums}
.label{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.85rem}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.side :focus-visible,.topbar :focus-visible{outline-color:var(--gold)}

/* ---------- Shell ---------- */
.shell{display:grid;grid-template-columns:var(--nav) minmax(0,1fr);min-height:100vh}
.side{background:var(--brand);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:18px 12px;gap:4px;overflow-y:auto}
.brand{padding:4px 10px 16px;display:flex;flex-direction:column;gap:2px}
.brand b{font-family:var(--display);font-size:1.9rem;font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.brand b span{color:var(--gold)}
.brand small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:700}
.side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:rgba(255,255,255,.88);text-decoration:none;font-weight:600}
.side a svg{width:18px;height:18px;flex:0 0 auto;opacity:.85}
.side a:hover{background:rgba(255,255,255,.12);color:#fff}
.side a[aria-current="page"]{background:var(--gold);color:#1A1200}
.side a[aria-current="page"] svg{opacity:1}
.side .grp{margin:14px 10px 4px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700}
.side .me{margin-top:auto;padding:12px 10px 0;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:rgba(255,255,255,.75)}
.side .me b{color:#fff}
.side .me button{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:8px;padding:6px 10px;text-align:left}
.badge-count{margin-left:auto;background:rgba(255,255,255,.12);border-radius:999px;padding:0 7px;font-size:.75rem;font-weight:700}
.side a[aria-current="page"] .badge-count{background:rgba(0,0,0,.15)}
.topbar{display:none}
main{min-width:0;padding:22px 28px 60px;display:flex;flex-direction:column;gap:18px;max-width:1400px;width:100%}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:min(280px,85vw);z-index:40;transform:translateX(-100%);transition:transform .2s ease}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.4)}
  .topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--brand);color:#fff;position:sticky;top:0;z-index:30}
  .topbar #menuBtn{background:none;border:0;color:#fff;padding:6px;display:grid;place-items:center}
  .topbar b{font-family:var(--display);font-size:1.4rem;font-weight:900;text-transform:uppercase}
  .topbar b span{color:var(--gold)}
  main{padding:16px 16px 60px}
  h1{font-size:1.7rem}
}

/* ---------- Page bits ---------- */
.pagehead{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px}
.pagehead .sub{color:var(--muted);margin-top:4px}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card.flush{padding:0;overflow:hidden}
.card > h2,.card > h3{margin-bottom:12px}
.cardhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:14px;align-items:start}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;min-width:0}
a.stat:hover{border-color:var(--line-strong)}
.stat b{font-family:var(--display);font-size:2rem;font-weight:800;line-height:1.05}
.stat .sub{font-size:.8rem;color:var(--muted)}
.stat.warn b{color:var(--warn)} .stat.bad b{color:var(--bad)} .stat.good b{color:var(--good)}

/* ---------- Buttons & forms ---------- */
.btn{border:0;border-radius:8px;padding:9px 15px;font-weight:700;background:var(--ink);color:var(--bg);display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;line-height:1.2}
.btn.accent{background:var(--accent);color:#1A1200}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--line-strong)}
.btn.danger{background:var(--bad);color:#fff}
.btn.sm{padding:5px 10px;font-size:.85rem}
.btn.icon{padding:6px;background:transparent;color:var(--muted);border:0}
.btn.icon:hover{color:var(--bad);background:var(--sunk)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:16px;height:16px}

.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > span,.field > label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 11px;width:100%;min-width:0}
textarea{min-height:76px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--petrol);outline:none;box-shadow:0 0 0 3px var(--petrol-soft)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--petrol);padding:0}
.check{display:flex;gap:8px;align-items:center;font-weight:600}
.formgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.formgrid .wide{grid-column:1/-1}
.inline{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.inline .field{flex:1 1 160px}
.search{position:relative;flex:1 1 260px;max-width:420px}
.search input{padding-left:34px}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td.c,th.c{text-align:center}
tbody tr.link{cursor:pointer}
tbody tr.link:hover td{background:var(--sunk)}
tfoot td{font-weight:700;border-top:2px solid var(--line);border-bottom:0}
.empty{color:var(--muted);text-align:center;padding:28px 12px}

/* ---------- Chips, plate ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--sunk);color:var(--petrol);white-space:nowrap}
.chip.good{background:var(--good-soft);color:var(--good)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.accent{background:var(--accent-soft);color:var(--accent-ink)}
.chip.petrol{background:var(--petrol-soft);color:var(--petrol)}
.plate{display:inline-block;background:var(--plate);color:#111;font-family:"Arial Narrow",var(--display);font-weight:800;letter-spacing:.06em;border-radius:4px;padding:1px 7px;border:1px solid rgba(0,0,0,.25);white-space:nowrap;font-size:.95em;line-height:1.4}
.plate.lg{font-size:1.6rem;padding:2px 12px;border-width:2px}

/* ---------- Modal & toast ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,17,22,.55);display:grid;place-items:start center;padding:6vh 16px;z-index:60;overflow-y:auto}
.modal{background:var(--surface);border-radius:12px;width:min(640px,100%);box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column}
.modal.wide{width:min(900px,100%)}
.modal header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal header button{background:none;border:0;font-size:1.5rem;line-height:1;color:var(--muted);padding:2px 6px}
.modal .body{padding:18px;display:flex;flex-direction:column;gap:14px}
.modal footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;z-index:80;max-width:calc(100% - 32px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.toast.bad{background:var(--bad);color:#fff}
.banner{border-radius:8px;padding:10px 14px;font-weight:600;font-size:.9rem;background:var(--accent-soft);color:var(--accent-ink)}
.banner.bad{background:var(--bad-soft);color:var(--bad)}
.banner.good{background:var(--good-soft);color:var(--good)}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:linear-gradient(160deg,var(--brand) 0 45%,var(--bg) 45%)}
.login .card{width:min(400px,100%);padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.login .brand b{color:var(--ink)}
.login .brand small{color:var(--muted)}
.linkbtn{background:none;border:0;color:var(--petrol);padding:0;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Diary ---------- */
.diary{display:grid;grid-template-columns:56px repeat(var(--cols),minmax(150px,1fr));overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.diary .colhead{position:sticky;top:0;background:var(--surface);z-index:2;padding:10px;font-weight:700;border-bottom:1px solid var(--line);border-left:1px solid var(--line);font-size:.9rem}
.diary .corner{border-bottom:1px solid var(--line)}
.diary .times{position:relative}
.diary .times div{height:var(--hour);font-size:.72rem;color:var(--muted);text-align:right;padding:2px 6px 0 0;border-top:1px solid var(--line)}
.diary .col{position:relative;border-left:1px solid var(--line);background-image:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px calc(var(--hour)/2));background-size:100% calc(var(--hour)/2)}
.diary .col:hover{background-color:var(--sunk)}
.diary .slot-hint{position:absolute;left:0;right:0;pointer-events:none}
.jobblock{position:absolute;left:4px;right:4px;border-radius:7px;padding:5px 8px;font-size:.8rem;overflow:hidden;cursor:pointer;border:1px solid var(--line-strong);border-left:5px solid var(--petrol);background:var(--petrol-soft);color:var(--ink);display:flex;flex-direction:column;gap:2px;line-height:1.25}
.jobblock:hover{box-shadow:0 2px 8px rgba(0,0,0,.18);z-index:3}
.jobblock .t{font-weight:700;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.jobblock.s-arrived,.jobblock.s-in_progress{border-left-color:var(--accent);background:var(--accent-soft)}
.jobblock.s-awaiting_parts,.jobblock.s-awaiting_auth{border-left-color:var(--warn);background:var(--warn-soft)}
.jobblock.s-complete,.jobblock.s-invoiced,.jobblock.s-collected{border-left-color:var(--good);background:var(--good-soft)}
.jobblock.s-cancelled{opacity:.5;text-decoration:line-through}
.datebar{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px}
.datebar button{border:0;background:transparent;min-width:34px;height:34px;border-radius:999px;color:var(--muted);font-weight:700;padding:0 10px}
.datebar button:hover{background:var(--sunk);color:var(--ink)}
.datebar strong{min-width:170px;text-align:center}
.datebar input{width:auto;border:0;background:transparent;padding:4px}

/* ---------- Job card ---------- */
.jobhead{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.jobhead .who{display:flex;flex-direction:column;gap:2px}
.lines td{padding:6px 6px}
.lines input,.lines select{padding:6px 8px;font-size:.9rem}
.lines .desc{min-width:220px}
.lines .n{width:78px;text-align:right}
.lines .n2{width:64px;text-align:right}
.lines tr.unauth td{background:repeating-linear-gradient(135deg,transparent 0 8px,var(--sunk) 8px 9px)}
.lines tr.addon td:first-child{box-shadow:inset 4px 0 0 var(--accent)}
.addonrow td{padding-top:0!important;border-top:0}
.addonrow .inline{gap:6px}
.addonrow select{font-size:.85rem;padding:5px 8px}
.totals{display:grid;grid-template-columns:auto auto;gap:4px 18px;justify-content:end;font-variant-numeric:tabular-nums}
.totals .grand{font-family:var(--display);font-size:1.5rem;font-weight:800}
.status-select{font-weight:700;width:auto}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:.92rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.lookup{display:flex;gap:8px}
.lookup input{text-transform:uppercase;font-weight:700;letter-spacing:.06em}
.result-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;max-height:260px;overflow-y:auto}
.result-list button{border:0;border-bottom:1px solid var(--line);background:var(--surface);text-align:left;padding:9px 12px;display:flex;gap:10px;align-items:center}
.result-list button:last-child{border-bottom:0}
.result-list button:hover{background:var(--sunk)}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);overflow-x:auto}
.tabs button{border:0;background:none;padding:9px 14px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- Champions ---------- */
.board{display:flex;flex-direction:column;gap:8px}
.lrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.lrow .rank{font-family:var(--display);font-weight:900;font-size:1.7rem;text-align:center;color:var(--muted);grid-row:span 2}
.lrow.p1{border-color:var(--accent);background:linear-gradient(90deg,var(--accent-soft),var(--surface) 60%)}
.lrow.p1 .rank{color:var(--accent-ink)}
.lrow .who{font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lrow .pts{text-align:right}
.lrow .pts b{font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1}
.lrow .pts small{color:var(--muted);display:block;font-size:.75rem}
.bar{height:10px;background:var(--sunk);border-radius:999px;position:relative;overflow:hidden}
.lrow .bar{grid-column:2/4}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--petrol);border-radius:999px}
.lrow.hit .bar i{background:var(--good)}
.lrow.p1 .bar i,.bar.team i{background:var(--accent)}

/* ---------- Print ---------- */
#print{display:none}
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff;color:#000}
  #app,.toast,.overlay{display:none!important}
  #print{display:block}
}
.doc{font-family:var(--body);color:#000;font-size:11pt;line-height:1.4}
.doc .dhead{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid #004AAD;padding-bottom:10px;margin-bottom:14px}
.doc .dbrand b{font-family:var(--display);font-size:26pt;font-weight:900;text-transform:uppercase;display:block;line-height:1}
.doc .dtitle{text-align:right}
.doc .dtitle h1{font-size:20pt}
.doc .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.doc .box{border:1px solid #bbb;border-radius:6px;padding:8px 10px}
.doc .box .label{color:#555}
.doc table{font-size:10pt}
.doc th{color:#333;border-bottom:1.5px solid #333;background:none}
.doc td{border-bottom:1px solid #ddd;padding:6px 8px}
.doc .dtotals{margin-top:10px;margin-left:auto;width:260px}
.doc .dtotals div{display:flex;justify-content:space-between;padding:3px 0}
.doc .dtotals .g{border-top:2px solid #000;font-weight:800;font-size:13pt;padding-top:6px;margin-top:4px}
.doc .foot{margin-top:24px;font-size:9pt;color:#444;border-top:1px solid #ccc;padding-top:8px;white-space:pre-line}
.doc .sign{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:30px}
.doc .sign div{border-top:1px solid #000;padding-top:4px;font-size:9pt}
.doc .tick{display:inline-block;width:12px;height:12px;border:1px solid #000;margin-right:6px;vertical-align:-2px}

/* Invoice preview on screen follows the app theme */
.card .doc{color:var(--ink)}
.card .doc th{color:var(--muted);border-bottom-color:var(--line)}
.card .doc td{border-bottom-color:var(--line)}
.card .doc .box{border-color:var(--line)}
.card .doc .dtotals .g{border-top-color:var(--ink)}
button.stat{font:inherit;color:inherit}

/* Let grid children shrink so wide tables scroll inside their card instead of stretching the page */
.split > *,.grid > *{min-width:0}
.lines td:first-child select{width:92px}
.lines .desc input{min-width:200px}
@media (max-width:900px){
  .pagehead .actions{width:100%}
  .lines .desc input{min-width:160px}
}
.split{grid-template-columns:minmax(0,1fr) minmax(260px,340px)}
@media (max-width:1100px){.split{grid-template-columns:1fr}}
.lines .n{width:72px}.lines .n2{width:58px}
.lines .desc input{min-width:180px}
.topbar .btn{flex:0 0 auto}
.lines td{padding:6px 4px}
.lines td:first-child select{width:84px}
.lines .desc input{min-width:150px}
.split{grid-template-columns:minmax(0,1fr) minmax(250px,300px)}
@media (max-width:1100px){.split{grid-template-columns:1fr}}
.split{grid-template-columns:minmax(0,1fr) minmax(250px,290px)} @media (max-width:1100px){.split{grid-template-columns:1fr}}

/* ---------- Departments, stages, allocation ---------- */
.chip svg{width:12px;height:12px}
.ind{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.dept-car_repair{background:var(--petrol-soft);color:var(--petrol)}
.dept-car_mot{background:var(--accent-soft);color:var(--accent-ink)}
.dept-moto_repair{background:var(--good-soft);color:var(--good)}
.dept-moto_mot{background:var(--warn-soft);color:var(--warn)}
.tabs .count{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--sunk);font-size:.75rem;font-variant-numeric:tabular-nums}
.tabs button[aria-selected="true"] .count{background:var(--accent);color:#1A1200}
.weekstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.weekstrip .stat{cursor:pointer;text-align:left}
.weekstrip .stat b{font-size:1.4rem}
.weekstrip .stat[aria-current="date"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
@media (max-width:640px){.weekstrip{grid-template-columns:repeat(4,minmax(0,1fr))}}
.diary .colhead{display:flex;justify-content:space-between;gap:6px;align-items:center}
.diary .col.drop{background-color:var(--accent-soft)}
.jobblock .ind .chip{font-size:.6rem;padding:2px 6px}
.jobblock.dragging{opacity:.4}
.jobblock.s-on_site,.jobblock.s-on_ramp{border-left-color:var(--accent);background:var(--accent-soft)}
.jobblock.s-mot_fail_repair,.jobblock.s-mot_fail_brb{border-left-color:var(--bad);background:var(--bad-soft)}
.jobblock.s-retest_required{border-left-color:var(--warn);background:var(--warn-soft)}
.jobblock.s-work_completed,.jobblock.s-mot_passed,.jobblock.s-awaiting_collection,.jobblock.s-completed{border-left-color:var(--good);background:var(--good-soft)}
.statusbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:12px;align-items:end}
@media (max-width:1100px){.statusbar{grid-template-columns:repeat(2,minmax(0,1fr))}.statusbar .actions{grid-column:1/-1}}
@media (max-width:520px){.statusbar{grid-template-columns:1fr}}
.status-select{font-weight:700;width:100%}
.status-select.s-on_site,.status-select.s-on_ramp{background:var(--accent-soft);color:var(--accent-ink)}
.status-select.s-work_completed,.status-select.s-mot_passed,.status-select.s-awaiting_collection{background:var(--good-soft);color:var(--good)}
.status-select.s-mot_fail_repair,.status-select.s-mot_fail_brb,.status-select.s-cancelled{background:var(--bad-soft);color:var(--bad)}
.status-select.s-retest_required{background:var(--warn-soft);color:var(--warn)}
.status-select.p-to_order{background:var(--bad-soft);color:var(--bad)}
.status-select.p-ordered{background:var(--warn-soft);color:var(--warn)}
.status-select.p-arrived{background:var(--good-soft);color:var(--good)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-weight:600;cursor:pointer;background:var(--surface)}
.seg input:checked + span{background:var(--accent);border-color:var(--accent);color:#1A1200}
.seg input:focus-visible + span{outline:3px solid var(--petrol);outline-offset:2px}
@media print{.doc + .doc{break-before:page}}
.printpaper .doc + .doc{margin-top:28px;padding-top:28px;border-top:2px dashed #bbb}
.jobblock .t .ind{display:inline-flex;margin-left:2px}
.jobblock .vline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Diary slot list (VGM style) ---------- */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.legend{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.swatch{padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
.swatch.none{background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.weekbar{display:flex;gap:4px;flex-wrap:wrap}
.weekbar button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 10px;display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--ink)}
.weekbar button span{color:var(--muted)}
.weekbar button[aria-current]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.slots-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.slots-title{padding:8px 12px;font-weight:800;color:var(--petrol);background:var(--petrol-soft);border-bottom:1px solid var(--line)}
.slots{font-size:.85rem}
.slots th{padding:7px 8px;background:var(--sunk);font-size:.66rem}
.slots td{padding:5px 8px;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.28)}
.slots tbody tr[data-job]{background:var(--row,var(--surface));color:var(--rowink,var(--ink));cursor:pointer}
.slots tbody tr.unalloc td{border-bottom-color:var(--line)}
.slots tbody tr[data-job]:hover{filter:brightness(1.1)}
.slots tbody tr.cancelled{opacity:.5}
.slots tbody tr.cancelled td{text-decoration:line-through}
.slots .type,.slots .veh{max-width:260px;overflow:hidden;text-overflow:ellipsis}
.slots .notes{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.slots .flag{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#D92D20;color:#fff;font-size:.7rem}
.slots select{width:auto;font-size:.82rem;color:inherit;background:transparent;border:1px solid color-mix(in srgb, currentColor 35%, transparent);padding:3px 6px;border-radius:4px}
.slots select option{color:#111;background:#fff}
.slots .stcell{padding:3px 6px}
.stsel{font-weight:800;min-width:118px;border:0!important;text-transform:uppercase;letter-spacing:.03em;font-size:.74rem!important}
.stsel.s-on_site{background:#F28C28!important;color:#fff!important}
.stsel.s-on_ramp,.stsel.s-on_test{background:#B83CD6!important;color:#fff!important}
.stsel.s-work_completed,.stsel.s-mot_passed,.stsel.s-completed{background:#2EA44F!important;color:#fff!important}
.stsel.s-mot_fail_repair,.stsel.s-mot_fail_brb{background:#E5251B!important;color:#fff!important}
.stsel.s-retest_required{background:#E0A100!important;color:#1A1200!important}
.stsel.s-awaiting_collection{background:#0E9AA7!important;color:#fff!important}
.stsel.s-cancelled{background:#7A7A7A!important;color:#fff!important}
.colours{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cswatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line);padding:0}
.cswatch.on{box-shadow:0 0 0 2px var(--ink)}
.colours input[type=color]{width:36px;height:30px;padding:2px}
.statusbar{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
main{max-width:1680px}
.slots{font-size:.82rem}
.slots td{padding:4px 6px}
.slots th{padding:7px 6px}
.stsel{min-width:0}
.slots .type{max-width:150px}
.slots .veh{max-width:210px}
.slots .customer{max-width:150px}
.slots .techsel{max-width:140px}
/* Collapsible side menu */
.brand{position:relative}
.navmini-btn{position:absolute;right:0;top:2px;background:rgba(255,255,255,.08);border:0;color:#fff;border-radius:6px;width:28px;height:28px;font-size:1rem;line-height:1}
.navmini-btn:hover{background:rgba(255,255,255,.16);color:#fff}
@media (min-width:901px){
  body.navmini{--nav:68px}
  body.navmini .side{padding:18px 8px}
  body.navmini .side a{justify-content:center;padding:10px 0}
  body.navmini .side a span,body.navmini .side .grp,body.navmini .brand small,body.navmini .brand b,body.navmini .side .me > span,body.navmini .side [data-newjob] span{display:none}
  body.navmini .side .me{padding:10px 0 0}
  body.navmini .side .me button{font-size:.62rem;padding:5px 2px;text-align:center;line-height:1.2}
  body.navmini .side [data-newjob]{margin:0 0 6px;padding:9px 0;justify-content:center}
  body.navmini .brand{padding:4px 0 16px;align-items:center}
  body.navmini .navmini-btn{position:static}
}
@media (max-width:900px){.navmini-btn{display:none}}
.slots .notes{max-width:84px}
.slots .stsel{width:122px}
.slots .veh{max-width:170px}
.slots .techsel{width:112px}
.slots .stsel{width:136px;letter-spacing:.01em}
.quickjob{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;background:var(--accent-soft);border-radius:8px}
.quickjob .field{flex:1 1 260px;max-width:420px}
.quickjob .field > span{color:var(--accent-ink)}
.ptsel{font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:.72rem!important;width:96px;border:0!important}
.ptsel.p-to_order{background:#E5251B!important;color:#fff!important}
.ptsel.p-ordered{background:#E0A100!important;color:#1A1200!important}
.ptsel.p-arrived{background:#2EA44F!important;color:#fff!important}
.slots .type{max-width:120px}
.slots td{padding:4px 4px}
.slots th{padding:7px 4px}
.slots .stsel{width:120px}
.slots .techsel{width:106px}

/* ---------- Vehicle check ---------- */
.vcheck{display:flex;flex-direction:column;gap:8px;background:var(--sunk);border-radius:8px;padding:10px 12px}
.card .vcheck{background:transparent;padding:0}
.vc-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline}
.vc-head b{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;letter-spacing:.02em}
.vc-chips{display:flex;flex-wrap:wrap;gap:6px}
.vc-kv{grid-template-columns:max-content 1fr;font-size:.86rem;gap:2px 12px}
.modal .vc-kv{grid-template-columns:repeat(auto-fill,minmax(110px,max-content) minmax(120px,1fr))}
.vc-test .label .ok{color:var(--good)} .vc-test .label .bad{color:var(--bad)}
.vc-list{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:.86rem}
.vc-list li{padding:5px 8px 5px 26px;border-radius:6px;position:relative}
.vc-list li::before{position:absolute;left:8px;top:5px;font-weight:800}
.vc-list li.adv{background:var(--warn-soft);color:var(--ink)} .vc-list li.adv::before{content:"!";color:var(--warn)}
.vc-list li.fail{background:var(--bad-soft);color:var(--ink)} .vc-list li.fail::before{content:"✕";color:var(--bad)}
.vc-list li.fixed{background:var(--surface);color:var(--muted)} .vc-list li.fixed::before{content:"✓";color:var(--good)}
#vcCard .actions .btn{white-space:normal}
/* Linked bookings */
.linkbox{border:1px dashed var(--line-strong);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.depbox{border:1px dashed var(--line-strong);border-radius:8px;padding:10px 12px}
.depbox .formgrid{margin:0}
.deposits .deprow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.deposits .deprow:last-child{border-bottom:0}
.deposits .deprow .btn,.deposits .deprow .chip{margin-left:auto}
.totals .dep{color:var(--good)}
.linkbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 14px;border-radius:8px;background:var(--petrol-soft);color:var(--ink)}
.linkbar svg{width:18px;height:18px;color:var(--petrol)}
.linkchip{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:4px;background:var(--petrol);color:#fff;vertical-align:1px}
.slots .stsel{width:114px}
.slots .techsel{width:100px}
.slots .linkchip{font-size:.6rem;padding:1px 4px}
.slots .stsel{width:126px;letter-spacing:0}

/* ---------- Vehicle health check ---------- */
.rag{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 5px;border-radius:5px;font-size:.72rem;font-weight:800;color:#fff;margin-right:3px;font-variant-numeric:tabular-nums}
.rag.r{background:#D92D20}.rag.a{background:#E0A100;color:#1A1200}.rag.g{background:#2EA44F}
.rag:empty{min-width:12px;height:12px;padding:0;border-radius:50%}
.vhc-progress{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vhc-progress .bar{flex:1 1 120px;min-width:100px}
.vhc-progress .bar i{background:var(--accent)}
.vhc-sec h3{margin-bottom:6px}
.vhc-item{border-top:1px solid var(--line);padding:10px 0;display:flex;flex-direction:column;gap:8px}
.vhc-item:first-of-type{border-top:0}
.vhc-item.r-green{box-shadow:inset 4px 0 0 #2EA44F;padding-left:12px}
.vhc-item.r-amber{box-shadow:inset 4px 0 0 #E0A100;padding-left:12px}
.vhc-item.r-red{box-shadow:inset 4px 0 0 #D92D20;padding-left:12px}
.vhc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vhc-label{flex:1 1 200px;font-weight:600}
.ragbtns{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rb{border:0;background:var(--surface);padding:10px 14px;font-weight:800;font-size:.85rem;color:var(--muted);min-width:72px;min-height:44px}
.rb + .rb{border-left:1px solid var(--line)}
.rb.green.on{background:#2EA44F;color:#fff}.rb.amber.on{background:#E0A100;color:#1A1200}.rb.red.on{background:#D92D20;color:#fff}
.rb:disabled{cursor:default}
.cam{min-height:44px;min-width:52px;justify-content:center;cursor:pointer}
.cam svg{width:20px;height:20px}
.cam.disabled{opacity:.4;pointer-events:none}
.vhc-more{display:flex;flex-direction:column;gap:8px}
.vhc-more textarea{min-height:52px}
.rec-text{display:inline-block;width:auto;flex:1;min-width:220px;padding:6px 8px;margin-left:4px}
.vhc-more .check{flex-wrap:wrap}
.thumbs{display:flex;flex-wrap:wrap;gap:8px}
.thumb{position:relative;width:86px;height:86px;border-radius:8px;overflow:hidden;background:#000;cursor:zoom-in;flex:0 0 auto}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.thumb .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.4rem;text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none}
.thumb-x{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:1rem;line-height:1;padding:0}
.measure{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:4px 0 8px}
.measure input{font-weight:700;font-size:1.05rem}
.measure input.m-green{border-color:#2EA44F;box-shadow:inset 4px 0 0 #2EA44F}
.measure input.m-amber{border-color:#E0A100;box-shadow:inset 4px 0 0 #E0A100}
.measure input.m-red{border-color:#D92D20;box-shadow:inset 4px 0 0 #D92D20}
.recs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.recs li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--sunk)}
.recs li span:nth-child(2){flex:1}
.dotr{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.recs li.red .dotr{background:#D92D20}.recs li.amber .dotr{background:#E0A100}
.vhc-foot{position:sticky;bottom:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:0 -6px 18px rgba(0,0,0,.08);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.myjobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.myjob{display:flex;flex-direction:column;gap:10px}
.mj-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mj-head > b{font-family:var(--display);font-size:1.4rem}
.mj-lines{margin:0;padding-left:18px;font-size:.9rem}
.mj-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mj-foot .status-select{width:auto;flex:1 1 170px}
@media (max-width:520px){.myjobs{grid-template-columns:1fr}.rb{min-width:0;padding:10px 12px}}

/* ---------- Customer approval page ---------- */
body.public{background:var(--bg)}
/* Technician diary */
.stbadge{display:inline-block;padding:3px 8px;border-radius:4px;font-weight:800;font-size:.72rem;text-transform:uppercase;white-space:nowrap}
.slots.tech tbody tr{background:var(--surface);color:var(--ink)}
.slots.tech tbody tr td{border-bottom-color:var(--line)}
.slots.tech tr.mine{cursor:pointer;background:var(--accent-soft)}
.slots.tech tr.mine td:first-child{box-shadow:inset 4px 0 0 var(--accent)}
.slots.tech tr.notmine{color:var(--muted)}
.namepill{display:inline-block;padding:1px 8px;border-radius:999px;font-weight:700;font-size:.74rem;background:var(--sunk)}
.slots .stsel.stbadge,.slots .ptsel.stbadge{width:auto}
/* Technician job sheet */
.tw{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tw li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;background:var(--sunk);font-size:.95rem}
.tw li span:nth-child(2){flex:1}
.tw-kind{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol);min-width:44px}
.tw.muted li{opacity:.75}

/* ---------- Trade accounts & invoicing ---------- */
.chip.trade{background:var(--petrol-soft);color:var(--petrol);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.62rem;padding:1px 6px}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
.invbanner{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.invbanner svg{width:18px;height:18px;flex:none}
.invbanner span{flex:1;min-width:200px;font-weight:500}
.invbanner .btn{margin-left:auto}
.invnow{border:0;border-radius:4px;background:#E5251B;color:#fff;font-weight:800;font-size:.66rem;text-transform:uppercase;letter-spacing:.02em;padding:4px 6px;cursor:pointer;white-space:nowrap}
.invnow:hover{background:#B91C14}
.invnow:disabled{opacity:.5}
.invlink{display:inline-block;font-weight:800;font-size:.74rem;padding:2px 7px;border-radius:4px;background:#2EA44F;color:#fff!important;text-decoration:none}
.slots .cust{max-width:128px;overflow:hidden;text-overflow:ellipsis}
.slots .ptsel{width:84px}
.slots .invcell{padding-right:8px}
.slots .cust .chip.trade{margin-right:2px}
.slots tbody tr.toinv td.invcell{box-shadow:inset 3px 0 0 #E5251B}
.stsel.s-no_show{background:#4A4A4A!important;color:#fff!important}
.status-select.s-no_show{background:var(--bad-soft);color:var(--bad)}
.tradebox{display:grid;grid-template-columns:1fr 180px;gap:10px;align-items:end;padding:10px 12px;border:1px dashed var(--line);border-radius:8px}
.tradebox .check{align-items:flex-start}
.tradebox .check svg{width:16px;height:16px;flex:none;margin-top:2px}
@media (max-width:640px){.tradebox{grid-template-columns:1fr}}
.monthbar{align-items:center;gap:10px}
.monthbar b{font-size:1rem}
tr.dead td{opacity:.55}
table.alloc td,table.alloc th{padding:6px 8px}

/* ---------- Service prices by engine size ---------- */
.pricegrid th{white-space:nowrap}
.pricegrid .pin{display:inline-flex;align-items:center;gap:3px;color:var(--muted)}
.pricegrid input{width:86px;text-align:right}
.pricegrid input.low{border-color:var(--bad);background:var(--bad-soft)}
.bandchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bandlist{display:grid;gap:4px;margin-bottom:8px}
.bandlist .inline{align-items:end}
.ccbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:2px 0 8px}
.cc-in{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600}
.cc-in input{width:90px;padding:5px 8px}
.tplpick .tplprice{color:var(--muted);font-variant-numeric:tabular-nums}
.tplpick .tplprice.set{color:var(--good);font-weight:700}
.pricegrid input::placeholder{color:var(--muted);opacity:.6;font-style:italic;font-size:.8rem}
.check svg{width:16px;height:16px;flex:none}

/* ---------- Parked work ---------- */
.parkedbox{border:1px solid var(--petrol);background:var(--petrol-soft);border-radius:8px;padding:10px 12px;display:grid;gap:6px}
.parkedbox .pb-head{display:flex;align-items:center;gap:6px;color:var(--petrol)}
.parkedbox .pb-head svg{width:16px;height:16px}
.parkedbox .check{align-items:flex-start;font-weight:500}
.parkedbox .check input{margin-top:3px}
.parkedcard{border-color:var(--petrol)}
.parkedcard h3{display:flex;align-items:center;gap:6px}
.parkedcard h3 svg{width:16px;height:16px}
.pk-item{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.pk-item:last-child{border-bottom:0}
.nowrap{white-space:nowrap}

/* ---------- Clock on / time ---------- */
.clock{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.clock.on{border-color:var(--good);background:var(--good-soft)}
.clock .clockbtn{font-size:1.05rem;padding:12px 20px;font-weight:800}
.clock .clockbtn svg{width:18px;height:18px}
.clockbtn.start{background:#2EA44F;color:#fff;border-color:#2EA44F}
.clockbtn.stop{background:#E5251B;color:#fff;border-color:#E5251B}
.clocktime{display:flex;flex-direction:column}
.clocktime b{font-size:1.5rem;font-variant-numeric:tabular-nums}
.clock.compact{padding:8px 10px;gap:10px}
.clock.compact .clockbtn{font-size:.9rem;padding:8px 14px}
.clock.compact .clocktime b{font-size:1.1rem}
.timesum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.timesum .label{display:block}
.timesum b{font-size:1.15rem}
b.good,.eff.good{color:var(--good)} b.warn,.eff.warn,b.warnt{color:var(--warn)} b.bad,.eff.bad{color:var(--bad)}
.timelist{display:grid}
.trow{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.live{color:var(--good)}
.techcell{white-space:nowrap}
.liveclock{display:inline-flex;vertical-align:middle;margin-right:3px;color:#2EA44F;animation:pulse 1.6s infinite}
.liveclock svg{width:15px;height:15px}
@keyframes pulse{50%{opacity:.35}}
h3 svg{width:16px;height:16px;vertical-align:-2px}
/* ---------- Activity log & history ---------- */
.actlog .dayrow td{background:var(--sunk);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.actlog td.bad{color:var(--bad)} .actlog td.good{color:var(--good)}
.actlog .area{display:inline-flex;gap:5px;align-items:center;color:var(--muted)}
.actlog .area svg{width:14px;height:14px}
.history summary{cursor:pointer;list-style:none}
.history summary h3{display:inline-flex;gap:6px;align-items:center;margin:0}
.hlist{display:grid;margin-top:8px;max-height:340px;overflow:auto}
.hrow{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line)}
.hrow .bad{color:var(--bad)} .hrow .good{color:var(--good)}
/* ---------- Open job sheets ---------- */
.openjobs tr.stale td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.banner svg{width:16px;height:16px;vertical-align:-3px;flex:none}
.chip svg{width:12px;height:12px}
.timehead{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.timehead input[type=date]{width:auto}
/* Staff name pills: always one line, compact */
.namepill{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;padding:2px 9px;border-radius:999px;font-weight:700;font-size:.74rem;line-height:1.35;max-width:100%}
.namepill svg{width:12px;height:12px;flex:none}
/* ---------- Free diary slots ---------- */
.slots tbody tr.freeslot{cursor:pointer;background:repeating-linear-gradient(135deg,var(--surface) 0 10px,color-mix(in srgb,var(--sunk) 55%,var(--surface)) 10px 20px)}
.slots tbody tr.freeslot td{border-bottom:1px dashed var(--line);color:var(--muted)}
.slots tbody tr.freeslot .freelbl{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.8rem}
.slots tbody tr.freeslot .freelbl svg{width:14px;height:14px}
.slots tbody tr.freeslot:hover{background:var(--accent-soft)}
.slots tbody tr.freeslot:hover td{color:var(--accent-ink)}
.slots tbody tr.freeslot.past{opacity:.55}
.slots tbody tr[data-over] td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.slots tbody tr[data-first] td{border-top:2px solid color-mix(in srgb,var(--petrol) 25%,var(--line))}
/* ---------- Customer messages ---------- */
.msgto{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.sendbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;width:100%}
.btn.send{color:#fff;border:0;font-weight:800}
.btn.send svg{width:16px;height:16px}
.btn.send.wa{background:#1FA855}.btn.send.wa:hover{background:#178A45}
.btn.send.gm{background:#C5221F}.btn.send.gm:hover{background:#A51B19}
.btn.send.pref{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
.msglist{display:grid}
.msgrow{border-bottom:1px solid var(--line);padding:6px 0}
.msgrow summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:6px;align-items:center;list-style:none}
.msgrow p{white-space:pre-line;margin:6px 0 2px;color:var(--muted)}
.tplcard .formgrid{margin:0}
code{background:var(--sunk);padding:1px 5px;border-radius:4px;font-size:.78rem}

/* Plain diary rows, colour on staff names */
.slots tbody tr[data-job]{background:var(--surface);color:var(--ink)}
.slots tbody tr[data-job]:nth-child(even){background:color-mix(in srgb, var(--sunk) 45%, var(--surface))}
.slots tbody tr[data-job] td{border-bottom-color:var(--line)}
.slots tbody tr[data-job]:hover{filter:none;background:var(--sunk)}
.slots select{border-color:var(--line)}
.slots .techsel.coloured{font-weight:700}
.slots .techsel.coloured option{color:#111;background:#fff}
.namepill{background:var(--sunk)}
.slots .stsel{width:126px;letter-spacing:0}
.slots .notes{max-width:60px}
.slots .veh{max-width:150px}
/* ---------- Online bookings ---------- */
.webchip{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.06em;padding:1px 6px;border-radius:4px;background:#1E6FD9;color:#fff;vertical-align:middle}
.chip.webchip{font-size:.66rem}
.webchip.new{animation:pulse 1.6s infinite;background:#C2187A}
tr.newonline td:first-child{box-shadow:inset 3px 0 0 #C2187A}
textarea.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;background:var(--sunk)}

/* Health check ready to price: flashing banner + nav badge */
.vhcbanner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--petrol-soft);color:var(--ink);border:2px solid var(--petrol)}
.vhcbanner>svg{width:20px;height:20px;flex:none;color:var(--petrol)}
.vhcbanner>span{flex:1;min-width:220px;font-weight:500;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.vhcbanner>span>b{flex-basis:100%}
.vhcbanner .vhclink{display:inline-flex;gap:6px;align-items:center;text-decoration:none;color:inherit}
.vhcbanner .btn{margin-left:auto}
.banner.flash{animation:flashb 1.6s ease-in-out infinite}
@keyframes flashb{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--petrol) 0%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--petrol) 35%,transparent)}}
.side a .navbadge{margin-left:auto;background:var(--bad);color:#fff;font-size:.7rem;font-weight:800;min-width:20px;height:20px;border-radius:999px;display:inline-grid;place-items:center;padding:0 5px;animation:flashb 1.6s ease-in-out infinite}
body.navmini .side a span.navbadge{display:inline-grid;position:absolute;top:2px;right:2px;min-width:16px;height:16px;font-size:.62rem}
@media (prefers-reduced-motion: reduce){.banner.flash,.side a .navbadge{animation:none}}
.side a{position:relative}
.vhctimer{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--good-soft);color:var(--good);font-weight:700}
.vhctimer svg{width:18px;height:18px}
.vhctimer span{display:flex;flex-direction:column;line-height:1.1}
.vhctimer b{font-variant-numeric:tabular-nums;font-size:1.05rem}
.vhctimer small{font-weight:600;font-size:.7rem;opacity:.85}
.vhctimer.over{background:var(--bad-soft);color:var(--bad)}
.clock.vhcfirst{border-color:var(--petrol);background:var(--petrol-soft)}
/* Ticking off work and handovers */
.tw li.done{background:var(--good-soft)}
.tw li .tw-desc{flex:1}
.tw li.done .tw-text{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.tw li .donewho{display:block;text-decoration:none;font-size:.75rem;color:var(--good);font-weight:600}
.tw li.done .donewho{text-decoration:none}
.tw .tick{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.8rem;font-weight:700;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.tw .tick input{width:22px;height:22px;accent-color:var(--good);margin:0}
.tw li.done .tick{border-color:var(--good);color:var(--good)}
.twhead{margin:-4px 0 8px}
.mj-lines li.done{text-decoration:line-through;color:var(--muted)}
.handbanner{display:flex;gap:10px;align-items:flex-start;background:var(--petrol-soft);color:var(--ink);border:1px solid var(--petrol)}
.handbanner>svg{width:20px;height:20px;flex:none;color:var(--petrol);margin-top:2px}
.handbanner span{font-weight:500}
.handbanner .honote{display:inline-block;margin-top:4px;font-style:italic}
.chip svg{width:12px;height:12px;vertical-align:-2px}
.hogrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media (max-width:640px){.hogrid{grid-template-columns:1fr}}
.hogrid h4{margin:0 0 6px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.holist{margin:0;padding-left:18px;font-size:.9rem}
.holist li.ok::marker{content:"✓  ";color:var(--good)}
/* Job files */
.filelist{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.filelist li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--sunk)}
.filelist .fileopen{display:flex;gap:10px;align-items:center;flex:1;min-width:0;text-align:left;text-decoration:none;color:inherit}
.filelist .fileopen svg{width:20px;height:20px;flex:none;color:var(--petrol)}
.filelist .fileopen>span{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.filelist .fileopen b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filelist small{color:var(--muted);font-size:.75rem}
.filescard.needdiag{border-color:var(--warn);box-shadow:0 0 0 2px var(--warn-soft)}
/* Quick add grouped by type */
.qagroups{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.qagroup{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface)}
.qagroup h4{margin:0 0 6px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol)}
.qagroup .actions{flex-direction:column;align-items:flex-start;gap:4px}
.qagroup.qa-mot{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
tr.grouprow th{background:var(--sunk);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--petrol);text-align:left;padding:6px 12px}
/* Financials */
.fin-tiles{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
button.stat.fin{font:inherit;text-align:left;cursor:pointer;color:inherit}
button.stat.fin.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.stat.fin.total{background:var(--petrol-soft);border-color:var(--petrol)}
tr.totrow td{border-top:2px solid var(--line)}
td.warnt{color:var(--warn)}
.paytypes{display:flex;flex-direction:column;gap:8px}
.ptrow{display:flex;gap:10px;align-items:center}
.ptrow input[data-l]{flex:1;max-width:340px}
.stars{color:#E3A008;letter-spacing:1px;font-size:1.05rem;white-space:nowrap}
.stars .off{color:var(--line)}
tr.lowscore td{background:var(--bad-soft)}

/* Back button + day clock bar */
.mainwrap{min-width:0;display:flex;flex-direction:column}
.crumbbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 28px 0;max-width:1680px;width:100%}
@media (max-width:900px){.crumbbar{padding:10px 16px 0}}
.mainwrap > main{padding-top:12px}
.backbtn{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.backbtn:hover{border-color:var(--petrol)}
.backbtn[hidden]{display:inline-block;visibility:hidden}
.dayclockbox{margin-left:auto}
.dayclock{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 14px;font-size:.85rem}
.dayclock .dc-state{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.dayclock svg{width:16px;height:16px}
.dayclock .btn.sm{border-radius:999px}
.dayclock.in{border-color:var(--good)} .dayclock.in .dc-state{color:var(--good)}
.dayclock.off{border-color:var(--warn)}
.dayclock.onbreak{border-color:var(--petrol);background:var(--petrol-soft)}
.dayclock.onbreak.over,[data-breakbox].over{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
/* Staff today */
.staffday .strow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line)}
.staffday .strow:last-child{border-bottom:0}
.staffday .brk{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--petrol-soft);border:1px solid var(--petrol);font-size:.8rem;font-weight:700}
.staffday .brk svg{width:14px;height:14px}
.staffday .brk b{font-variant-numeric:tabular-nums}
.side a .navbadge.calm{background:var(--petrol);animation:none}
/* Time off */
.pendingleave{border-color:var(--warn);box-shadow:0 0 0 2px var(--warn-soft)}
.lrq{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.lrq-main{flex:1;min-width:200px}
.myleave{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cdh{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center;padding:2px 0}
.cd{min-height:64px;border:1px solid var(--line);border-radius:8px;padding:4px;display:flex;flex-direction:column;gap:2px;background:var(--surface);overflow:hidden}
.cd.empty{border:0;background:none}
.cd .dn{font-size:.75rem;font-weight:700;color:var(--muted)}
.cd.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cd.past{opacity:.55}
.cd.full{background:repeating-linear-gradient(135deg,var(--sunk) 0 6px,transparent 6px 12px)}
.cd.mine{border-color:var(--petrol);background:var(--petrol-soft)}
.cd .who{font-size:.68rem;font-weight:700;border-radius:4px;padding:1px 4px;background:var(--good-soft);color:var(--good);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd .who.pending{background:var(--warn-soft);color:var(--warn)}
.calkey{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.calkey .ck{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--line);vertical-align:-2px}
.calkey .ck.full{background:repeating-linear-gradient(135deg,var(--sunk) 0 3px,transparent 3px 6px)}
.calkey .ck.mine{background:var(--petrol-soft);border-color:var(--petrol)}
.calkey .ck.pend{background:var(--warn-soft)}
@media (max-width:640px){.cd{min-height:48px}.cd .who{font-size:.6rem}}
.latepts{color:var(--bad);font-weight:700}
.offbanner{display:flex;align-items:center;gap:8px;background:var(--petrol-soft);color:var(--ink)} .offbanner svg{width:18px;height:18px;color:var(--petrol)}
h1 > svg,h2 > svg,h3 > svg{width:1em;height:1em;vertical-align:-.12em;flex:none}
/* Parts not ordered before a booking */
#partsAlert:empty{display:none}
#partsAlert{display:flex;flex-direction:column;gap:10px}
.partsbanner{display:flex;gap:10px;align-items:flex-start}
.partsbanner>svg{width:20px;height:20px;flex:none;margin-top:2px}
.partsbanner>div{flex:1;display:flex;flex-direction:column;gap:6px}
.partsbanner .pa-job{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:inherit;text-decoration:none;font-weight:500}
.partsbanner .pa-job:hover span{text-decoration:underline}
.banner.bad.flash-red{border:2px solid var(--bad);animation:flashRed 1.2s ease-in-out infinite}
.banner.warn.flash-amber{border:2px solid var(--warn);animation:flashAmber 1.8s ease-in-out infinite}
@keyframes flashRed{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 0%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--bad) 40%,transparent)}}
@keyframes flashAmber{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 0%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--warn) 35%,transparent)}}
@media (prefers-reduced-motion: reduce){.flash-red,.flash-amber{animation:none}}
/* Light / Auto / Dark picker */
.themepick{margin-top:auto!important;display:flex;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:3px;margin:8px 4px 0}
.themepick button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:none;border:0;color:rgba(255,255,255,.85);font:inherit;font-size:.74rem;font-weight:700;padding:5px 4px;border-radius:999px;cursor:pointer}
.themepick button svg{width:14px;height:14px;flex:none}
.themepick button[aria-checked="true"]{background:var(--gold);color:#1A1200}
.themepick button:hover:not([aria-checked="true"]){background:rgba(255,255,255,.1)}
body.navmini .themepick{flex-direction:column;margin:8px 0 0;border-radius:12px}
body.navmini .themepick span{display:none}
.themepick + .me{margin-top:10px}
/* Customer replied to a health check */
.vhcreply{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--good);color:var(--ink)}
.vhcreply>svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--good)}
.vhcreply>div{flex:1;display:flex;flex-direction:column;gap:6px}
.vhcreply .pa-job{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:inherit;text-decoration:none;font-weight:500}
.vhcreply .pa-job:hover span{text-decoration:underline}
.banner.good.flash.vhcreply{animation:flashGood 1.6s ease-in-out infinite}
@keyframes flashGood{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 0%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--good) 35%,transparent)}}
@media (prefers-reduced-motion: reduce){.banner.good.flash.vhcreply{animation:none}}
.tplprice.trade{color:var(--petrol);font-weight:700}
.tptable .pin{display:inline-flex;align-items:center;gap:4px} .tptable input[data-tp]{width:100px;text-align:right}
/* Technician: Job completed */
.btn.completebtn{background:var(--good);color:#fff;border:0;font-weight:800;justify-content:center}
.btn.completebtn:not(.sm){width:100%;padding:14px 18px;font-size:1.05rem;border-radius:12px}
.btn.completebtn svg{width:18px;height:18px}
.donebanner{display:flex;gap:10px;align-items:center}
.donebanner svg{width:20px;height:20px;flex:none}
.mresult{display:flex;flex-direction:column;gap:6px}
/* Office: jobs finished by technicians */
.finbanner{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--accent);background:var(--accent-soft);color:var(--ink)}
.finbanner>svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--accent-ink)}
.finbanner>div{flex:1;display:flex;flex-direction:column;gap:8px}
.finrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.finrow .fr-main{flex:1;min-width:220px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.finrow .fr-main a{color:inherit}
.finrow .actions{gap:6px}
.banner.flash.finbanner{animation:flashFin 1.6s ease-in-out infinite}
@keyframes flashFin{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 40%,transparent)}}
@media (prefers-reduced-motion: reduce){.banner.flash.finbanner{animation:none}}

/* Logo */
.brand .logo{display:block;width:100%;max-width:190px;height:auto}
.brand .mark{display:none;width:30px;height:auto}
.side .brand small{margin-top:6px}
.topbar .toplogo{height:22px;width:auto;display:block}
.login .brand{align-items:flex-start;padding:4px 0 6px}
.login .brand .logo{max-width:230px}
.login .brand small{color:var(--muted)}
.lg-dark{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lg-light{display:none!important}:root:not([data-theme="light"]) .lg-dark{display:block!important}}
:root[data-theme="dark"] .lg-light{display:none!important}:root[data-theme="dark"] .lg-dark{display:block!important}
.doc .dbrand .dlogo{display:block;height:46px;width:auto;margin-bottom:8px}
@media (min-width:901px){body.navmini .brand .logo{display:none}body.navmini .brand .mark{display:block}}
.topbar #menuBtn svg{width:24px;height:24px}
.side .brand .logo{max-width:calc(100% - 34px)}
.side .brand small{margin-top:8px}
.login .brand small{margin-top:4px}
/* Add-ons logged by technicians */
.addonbanner{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);color:var(--ink);border:1px solid var(--accent)}
.addonbanner>svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--accent-ink)}
.addonbanner>div{flex:1;display:flex;flex-direction:column;gap:6px}
.addonbanner .pa-job{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:inherit;text-decoration:none;font-weight:500}
.addonbanner .pa-job:hover span{text-decoration:underline}
.addoncard h3 svg{width:1em;height:1em;vertical-align:-2px;color:var(--accent-ink)}
.addonlist{list-style:none;margin:10px 0 0;padding:0}
.addonlist li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:.9rem}
.addonlist small{color:var(--muted)}
/* Paused jobs */
.stsel.s-paused{background:#C2410C!important;color:#fff!important}
.status-select.s-paused{background:var(--warn-soft);color:var(--warn)}
.jobblock.s-paused{border-left-color:var(--warn);background:var(--warn-soft)}
.pausebanner{display:flex;gap:10px;align-items:center}
.pausebanner>svg{width:20px;height:20px;flex:none}
.pausebanner>div{flex:1;display:flex;flex-direction:column;gap:2px}
.pausedbanner{display:flex;gap:10px;align-items:flex-start}
.pausedbanner>svg{width:20px;height:20px;flex:none;margin-top:2px}
.pausedbanner>div{flex:1;display:flex;flex-direction:column;gap:6px}
.pausedbanner .pz-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pausedbanner .pz-row a{color:inherit}
.pausedbanner .pz-row .btn{margin-left:auto}
.pausepick{flex-wrap:wrap}
/* Technician working on a job: live timer + progress against time sold */
.livework{border:1px solid color-mix(in srgb,var(--good) 45%,transparent);background:var(--good-soft);border-radius:var(--r);padding:12px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.livework.compact{margin:10px 0 14px}
.lw-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.lw-head>b{color:var(--good)}
.lw-who{display:inline-flex;gap:6px;align-items:center}
.lw-who b{font-size:1.05rem}
.lw-dot{width:10px;height:10px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent);animation:lwPulse 1.6s ease-out infinite}
@keyframes lwPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
@media (prefers-reduced-motion:reduce){.lw-dot{animation:none}}
.lw-progress{display:flex;gap:10px;align-items:center}
.lw-bar{flex:1;height:12px;border-radius:999px;background:color-mix(in srgb,var(--good) 18%,var(--surface));overflow:hidden}
.lw-bar i{display:block;height:100%;background:var(--good);border-radius:inherit;transition:width .8s linear}
.lw-bar.near i{background:var(--warn)}
.lw-bar.over i{background:var(--bad)}
.lw-pct{font-weight:800;min-width:3.2em;text-align:right}
.lw-txt{color:var(--muted)}
/* Duplicate customers */
.dupelist{border:0}
.duperow{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.duperow input[type=radio]{width:18px;height:18px;flex:none}
.dupegroup{border:1px solid var(--line);border-radius:var(--r);padding:4px 12px 12px;margin-bottom:12px}
.dupegroup .actions{margin-top:10px}
/* Stock sections */
.stockbar{justify-content:space-between;flex-wrap:wrap}
.stockbar .seg{flex:none}
.stockbar .search{flex:1;min-width:220px}
.tyresize{font-size:1rem;letter-spacing:.02em}
.pp-sec{margin-bottom:10px}
/* Each page's own box inside main keeps main's spacing */
main > .page{display:flex;flex-direction:column;gap:18px;min-width:0}

/* ---------- Customer health check report ---------- */
body.vr-body{background:#E9EEF3;color-scheme:light}
.vr{--vr-blue:#004AAD;--vr-blue-d:#003A88;--vr-ink:#17212B;--vr-muted:#5A6672;--vr-line:#DFE4EA;--vr-red:#C0392B;--vr-amber:#C68A00;--vr-amber-t:#8A5C00;--vr-green:#2C8150;
  font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;color:var(--vr-ink);max-width:640px;margin:0 auto;padding-bottom:28px;-webkit-font-smoothing:antialiased}
.vr h1,.vr h2,.vr h3,.vr h4{font-family:inherit;text-transform:none;letter-spacing:0;margin:0;color:var(--vr-ink);text-wrap:balance}
.vr .num{font-variant-numeric:tabular-nums}
.vr-loading{padding:40px 20px;color:var(--vr-muted)}
.vr-note{margin:12px 12px 0;padding:10px 14px;border-radius:10px;background:#FFF4DC;color:#6B4A00;font-size:.92rem}
.vr-note a{color:inherit}
.vr-top{background:var(--vr-blue);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 46px;font-weight:500;font-size:.95rem}
.vr-top .vr-logo{height:22px;width:auto;display:block}
.vr-top span{opacity:.88}
@media (min-width:641px){.vr-top{border-radius:0 0 14px 14px}}
.vr-sheet{background:#fff;border:1px solid var(--vr-line);border-radius:14px;margin:0 12px 12px;padding:22px 20px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 18px -10px rgba(16,24,40,.12)}
.vr-top + .vr-sheet{margin-top:-30px;position:relative}
.vr-vehicle{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--vr-line)}
.vr-plate{background:#F7D117;color:#111;font-family:"Barlow Semi Condensed","Barlow",sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:.06em;padding:4px 12px;border-radius:5px;border:1.5px solid rgba(0,0,0,.55);line-height:1.2;white-space:nowrap}
.vr-veh-name{font-weight:600;font-size:1.2rem;line-height:1.25}
.vr-facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 0}
.vr-facts div{display:flex;flex-direction:column}
.vr-facts dt{font-size:.8rem;color:var(--vr-muted)}
.vr-facts dd{margin:0;font-weight:600;font-size:1.02rem}
.vr-hello{margin:18px 0 0;font-size:1.02rem;max-width:58ch}
.vr-condition{margin-top:20px}
.vr-bar{display:flex;gap:3px;height:12px;border-radius:6px;overflow:hidden;background:var(--vr-line)}
.vr-bar i{display:block;min-width:8px}
.vr-bar i.red{background:var(--vr-red)}.vr-bar i.amber{background:var(--vr-amber)}.vr-bar i.green{background:var(--vr-green)}
.vr-legend{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vr-legend li{display:flex;flex-direction:column;font-size:.86rem;color:var(--vr-muted);line-height:1.25}
.vr-legend b{font-size:1.75rem;font-weight:600;line-height:1.1}
.vr-legend .red b{color:var(--vr-red)}.vr-legend .amber b{color:var(--vr-amber-t)}.vr-legend .green b{color:var(--vr-green)}
.vr-legend .zero b{color:#AEB7C0}
.vr-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;vertical-align:baseline}
.vr-dot.red{background:var(--vr-red)}.vr-dot.amber{background:var(--vr-amber)}.vr-dot.green{background:var(--vr-green)}
.vr-measures{margin-top:24px;padding-top:20px;border-top:1px solid var(--vr-line)}
.vr-measures h3,.vr-group h3{font-size:1.12rem;font-weight:600}
.vr-mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.vr-m{border:1px solid var(--vr-line);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 8px}
.vr-m-l{grid-column:1/-1;font-size:.82rem;color:var(--vr-muted)}
.vr-m-v{font-size:1.45rem;font-weight:600;line-height:1.1}
.vr-m-v small{font-size:.8rem;font-weight:500;color:var(--vr-muted);margin-left:2px}
.vr-m-s{font-size:.82rem;display:inline-flex;align-items:center;gap:5px;padding-bottom:3px}
.vr-m.red{border-color:color-mix(in srgb,var(--vr-red) 45%,var(--vr-line));background:color-mix(in srgb,var(--vr-red) 5%,#fff)}
.vr-m.red .vr-m-s{color:var(--vr-red);font-weight:600}.vr-m.amber .vr-m-s{color:var(--vr-amber-t)}.vr-m.green .vr-m-s{color:var(--vr-green)}
.vr-fine{font-size:.82rem;color:var(--vr-muted);margin:10px 0 0}
.vr-group{margin-top:24px;padding-top:20px;border-top:1px solid var(--vr-line)}
.vr-group>header,.vr-passed summary{display:flex;align-items:center;gap:9px}
.vr-count{margin-left:auto;font-size:.85rem;font-weight:600;color:var(--vr-muted);background:#F1F4F7;border-radius:999px;padding:1px 10px}
.vr-group-sub{margin:4px 0 0;color:var(--vr-muted);font-size:.92rem}
.vr-findings{list-style:none;margin:12px 0 0;padding:0}
.vr-f{padding:14px 0 14px 14px;border-top:1px solid var(--vr-line);position:relative}
.vr-f::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:2px;background:var(--vr-amber)}
.vr-f.red::before{background:var(--vr-red)}
.vr-f-t{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.vr-f h4{font-size:1.02rem;font-weight:600}
.vr-f-sec{font-size:.8rem;color:var(--vr-muted)}
.vr-f p{margin:4px 0 0;font-size:.97rem;max-width:60ch}
.vr-media{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.vr-media .thumb{width:96px;height:96px;border-radius:10px}
.vr-passed summary{list-style:none;cursor:pointer}
.vr-passed summary::-webkit-details-marker{display:none}
.vr-show{font-size:.88rem;font-weight:600;color:var(--vr-blue);margin-left:6px}
.vr-passed[open] .vr-show{font-size:0}.vr-passed[open] .vr-show::after{content:"Hide";font-size:.88rem}
.vr-passlist{list-style:none;margin:12px 0 0;padding:0;columns:2;column-gap:20px;font-size:.92rem}
.vr-passlist li{break-inside:avoid;padding:3px 0 3px 20px;position:relative}
.vr-passlist li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:5px;border-left:2px solid var(--vr-green);border-bottom:2px solid var(--vr-green);transform:rotate(-45deg)}
@media (max-width:420px){.vr-passlist{columns:1}}
.vr-decision h2,.vr-done h2,.vr-msg h1{font-size:1.3rem;font-weight:600}
.vr-recs{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.vr-rec{border:1px solid var(--vr-line);border-radius:12px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:start;transition:border-color .15s}
.vr-rec.yes{border-color:color-mix(in srgb,var(--vr-green) 55%,var(--vr-line));box-shadow:inset 3px 0 0 var(--vr-green)}
.vr-rec-t h4{font-size:1rem;font-weight:600;line-height:1.3}
.vr-rec-t span{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;color:var(--vr-muted);margin-top:3px}
.vr-price{font-size:1.15rem;font-weight:600;white-space:nowrap}
.vr-choice{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--vr-line);border-radius:10px;padding:3px;gap:3px;background:#F4F6F9}
.vr-choice button{font:inherit;font-weight:600;font-size:.95rem;border:0;border-radius:8px;padding:9px 6px;background:transparent;color:var(--vr-muted);cursor:pointer;min-height:42px}
.vr-choice button[aria-checked="true"][data-v="1"]{background:var(--vr-green);color:#fff}
.vr-choice button[aria-checked="true"][data-v="0"]{background:#fff;color:var(--vr-ink);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.vr-choice button:disabled{cursor:default;opacity:.75}
.vr-choice button:focus-visible,.vr-send:focus-visible,.vr summary:focus-visible{outline:3px solid #7FA8E6;outline-offset:2px}
.vr-verdict{grid-column:1/-1;justify-self:start;font-size:.85rem;font-weight:600;padding:2px 10px;border-radius:999px;background:#EEF1F4;color:var(--vr-muted)}
.vr-rec.yes .vr-verdict{background:color-mix(in srgb,var(--vr-green) 14%,#fff);color:var(--vr-green)}
.vr-field{display:flex;flex-direction:column;gap:6px;margin-top:16px;font-size:.92rem;font-weight:500}
.vr-field small{color:var(--vr-muted);font-weight:400}
.vr-field textarea{font:inherit;border:1px solid var(--vr-line);border-radius:10px;padding:10px 12px;resize:vertical;background:#fff;color:var(--vr-ink)}
.vr-quote{margin:14px 0 0;padding:10px 14px;border-left:3px solid var(--vr-line);color:var(--vr-muted);font-style:italic}
.vr-done p,.vr-msg p{margin:6px 0 0;color:var(--vr-muted)}
.vr-done a{color:var(--vr-blue);font-weight:600}
.vr-msg{margin-top:24px}
.vr-logo-ink{height:22px;width:auto;display:block;margin-bottom:16px}
.vr-foot{padding:10px 24px 8px;display:flex;flex-direction:column;gap:2px;font-size:.88rem;color:var(--vr-muted)}
.vr-foot b{color:var(--vr-ink);font-weight:600}
.vr-foot a{color:var(--vr-blue);font-weight:600;text-decoration:none}
.vr-bar-bottom{position:sticky;bottom:0;z-index:5;margin:8px 0 0;background:#fff;border-top:1px solid var(--vr-line);box-shadow:0 -8px 20px -12px rgba(16,24,40,.25);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:14px}
@media (min-width:641px){.vr-bar-bottom{border:1px solid var(--vr-line);border-radius:14px;margin:8px 12px 0;bottom:12px}}
.vr-sum{display:flex;flex-direction:column;line-height:1.2;flex:1}
.vr-sum span{font-size:.84rem;color:var(--vr-muted)}
.vr-sum b{font-size:1.35rem;font-weight:700}
.vr-send{font:inherit;font-weight:600;font-size:1rem;border:0;border-radius:10px;padding:13px 20px;background:var(--vr-blue);color:#fff;cursor:pointer}
.vr-send:hover{background:var(--vr-blue-d)}
.vr-send:disabled{opacity:.7;cursor:progress}
@media (prefers-reduced-motion:reduce){.vr-rec{transition:none}}
/* One price for several lines (service packages, combined health check work) */
.lines tr.incl td{background:color-mix(in srgb,var(--sunk) 55%,transparent);padding-top:4px;padding-bottom:4px}
.lines tr.incl td.desc{padding-left:22px;position:relative}
.lines tr.incl td.desc::before{content:"";position:absolute;left:8px;top:0;bottom:50%;width:8px;border-left:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);border-bottom-left-radius:4px}
.lines tr.incl input[data-k=description]{font-size:.9rem}
.inclchip{display:inline-block;font-size:.78rem;font-weight:700;color:var(--muted);background:var(--sunk);border-radius:999px;padding:2px 10px}
.vatmode{flex:none}
.vatmode label span{padding:5px 10px;font-size:.8rem}
.cardhead .vatmode{margin-left:auto;margin-right:8px}
.pkgopt{align-items:flex-start}
.pkgopt span{font-weight:400}
.doc tr.incl td{color:#555;font-size:.92em;padding-top:2px;padding-bottom:2px}
.doc tr.incl .incl-d{padding-left:14px;display:inline-block;position:relative}
.doc tr.incl .incl-d::before{content:"–";position:absolute;left:2px}
/* Sending a health check: word, combine and price recommendations */
.vhcsend-bar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.vhcsend td.desc{min-width:260px}
.vs-desc{display:flex;gap:6px;align-items:center}
.vs-desc input{flex:1;min-width:0}
.vs-rag{width:auto;font-size:.8rem;font-weight:700;padding:5px 6px;border-radius:6px;border:0}
.vs-rag.r{background:var(--bad-soft);color:var(--bad)}.vs-rag.a{background:var(--warn-soft);color:var(--warn)}
.vs-kids{list-style:none;margin:6px 0 0;padding:0 0 0 12px;border-left:2px solid var(--line-strong);font-size:.85rem;color:var(--muted)}
.vs-kids li{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:2px 0}
.vhcsend tr.pkg td{border-bottom-color:transparent}
.vr-incl{margin:3px 0 0;font-size:.86rem;color:var(--vr-muted)}
/* Service reminders when a technician completes a service */
.svcchecks{display:flex;flex-direction:column;gap:8px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:var(--r);padding:12px 14px;margin-bottom:10px}
.svcchecks b{color:var(--accent-ink)}
.svcchecks .check{font-weight:600}
.vatsub{display:block;font-size:.74rem;color:var(--muted);font-weight:500}
.vatmode-l{margin-left:auto;align-self:center}
.cardhead .vatmode-l + .vatmode{margin-left:6px}
/* Recording a customer's answer to a health check */
.ra-list{list-style:none;margin:0 0 12px;padding:0}
.ra-list li{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.ra-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:220px}
.ra-seg input[value="1"]:checked + span{background:var(--good);border-color:var(--good);color:#fff}
.ra-seg input[value="0"]:checked + span{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.hc-acts{white-space:nowrap}
.hc-acts .btn + .btn{margin-left:6px}
/* Service prices by fuel */
.fuelbar{margin-top:12px;align-items:center;flex-wrap:wrap;gap:10px}
.fuelseg{flex-wrap:wrap}
.fdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-left:4px;vertical-align:middle}
.copyfrom{flex-direction:row;align-items:center;gap:8px;margin-left:auto}
.copyfrom span{white-space:nowrap}
.ccbar select{width:auto}
.ccbar .cc-in + .cc-in{margin-left:12px}
.copyfrom select{width:auto;min-width:150px}
.copyfrom{flex:0 0 auto}
/* Prices follow the vehicle */
.pricedfor{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px;padding:8px 10px;border:1px dashed var(--line-strong);border-radius:8px}
.pricedfor select{width:auto}
.pricedfor .pf-cc{display:inline-flex;align-items:center;gap:4px;font-size:.85rem}
.pricedfor .pf-cc input{width:90px}
.tplprice.por{color:var(--warn);font-weight:700}
.perfcard textarea{min-height:64px}

/* Health check: estimated completion */
.readybox{display:grid;grid-template-columns:minmax(200px,1fr) minmax(200px,1.4fr);gap:4px 14px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--sunk)}
.readybox .readyquick{grid-column:1;grid-row:2;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.readybox .field:nth-of-type(2){grid-column:2;grid-row:1}
@media (max-width:640px){.readybox{grid-template-columns:1fr}.readybox .field:nth-of-type(2),.readybox .readyquick{grid-column:auto;grid-row:auto}}
.vr-ready{display:flex;gap:12px;align-items:center;margin-top:16px;padding:12px 14px;border-radius:10px;background:#EAF1FB;color:var(--vr-blue-d)}
.vr-ready svg{width:26px;height:26px;flex:none}
.vr-ready div{display:flex;flex-direction:column;line-height:1.3}
.vr-ready span{font-size:.82rem;color:var(--vr-muted)}
.vr-ready b{font-size:1.12rem;color:var(--vr-ink)}
.vr-ready small{font-size:.88rem;color:var(--vr-muted)}

/* MOT queue */
.mq-stats{display:flex;gap:8px;flex-wrap:wrap}
.mq-stats span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.9rem}
.mq-stats b{font-size:1.05rem}
.mq-h{font-size:1rem;margin:0 0 8px}
.mq-tests{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.mq-test{display:flex;flex-direction:column;gap:10px;border-left:4px solid var(--accent)}
.mq-test.mine{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.mq-test.near{border-left-color:var(--warn)}
.mq-test.over{border-left-color:var(--bad)}
.mq-test.paused{border-left-color:var(--line-strong);opacity:.85}
.mq-t-head{display:flex;gap:10px;align-items:center}
.mq-t-veh{display:flex;flex-direction:column;min-width:0}
.mq-t-who{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mq-clock{display:flex;align-items:baseline;gap:8px}
.mq-left{font-size:1.05rem}
.mq-left b{font-size:1.7rem;line-height:1}
.mq-test.over .mq-left{color:var(--bad)}
.mq-test.near .mq-left{color:var(--warn)}
.mq-bar{height:8px;border-radius:4px;background:var(--sunk);overflow:hidden}
.mq-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .8s linear}
.mq-test.near .mq-bar i{background:var(--warn)}
.mq-test.over .mq-bar i{background:var(--bad)}
.mq-test .actions{margin-top:auto}
.mq-list{list-style:none;margin:0;padding:0}
.mq-row{display:grid;grid-template-columns:auto auto auto minmax(140px,1fr) auto auto;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.mq-row:first-child{border-top:0}
.mq-row.next{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.mq-row.away > :not(.mq-r-acts){opacity:.6}
.mq-row.dragging{opacity:.4}
.mq-row.dropto{box-shadow:inset 0 3px 0 var(--accent)}
.mq-grip{cursor:grab;color:var(--muted, #8896a0);letter-spacing:-3px;user-select:none}
.mq-pos{min-width:1.6em;text-align:center;font-size:1.1rem}
.mq-r-veh{display:flex;flex-direction:column;min-width:0}
.mq-r-chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mq-r-acts{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.mq-row:not([draggable]) {grid-template-columns:auto auto minmax(140px,1fr) auto auto}
@media (max-width:900px){.mq-row,.mq-row:not([draggable]){grid-template-columns:auto auto 1fr}.mq-r-chips,.mq-r-acts{grid-column:1/-1;justify-content:flex-start}.mq-grip{display:none}}
.mq-done{list-style:none;margin:0;padding:0}
.mq-done li{display:flex;gap:10px;align-items:center;padding:8px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.mq-done li:first-child{border-top:0}
.mq-done li[data-open]{cursor:pointer}
.mq-done li > span:nth-child(2){flex:1;min-width:120px}
.hcready svg{width:14px;height:14px;vertical-align:-2px;margin-right:2px}
/* Customer MOT result */
.vr-defect{margin:0;font-size:.98rem}
.vr-res{display:flex;align-items:center;gap:6px}
.vr-res.red{color:var(--vr-red)}
.vr-res.green{color:var(--vr-green)}
.vr-res.amber{color:var(--vr-amber-t)}
/* MOT result card on the booking */
.good-t{color:var(--good)}
.motcard.fail{border-left:4px solid var(--bad)}
.motdefects{list-style:none;margin:0 0 10px;padding:0}
.motdefects li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.motdefects li:first-child{border-top:0}
.motdefects .chip{flex:none;margin-top:1px}
.md-t{flex:1;min-width:0}
.md-acts{display:flex;gap:6px;align-items:center;flex:none}
.mdadd{display:grid;grid-template-columns:130px 1fr auto;gap:8px;align-items:center}
@media (max-width:640px){.mdadd{grid-template-columns:1fr}.motdefects li{flex-wrap:wrap}}
.motnotes{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px}
.mq-done-h{display:flex;align-items:center;gap:8px}
.bad-t{color:var(--bad)} .mq-failed{border-left:4px solid var(--bad)}
.allocbanner{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.allocbanner > span:first-of-type{flex:1;min-width:200px}
/* MOT result: pass / fail picker and photos */
.seg.motres{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg.motres label span{display:block;text-align:center;padding:14px 10px;font-size:1.05rem;font-weight:700;border-radius:10px}
.seg.motres label.pass input:checked + span{background:var(--good);color:#fff;border-color:var(--good)}
.seg.motres label.fail input:checked + span{background:var(--bad);color:#fff;border-color:var(--bad)}
.mm{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mm-grid{display:flex;gap:8px;flex-wrap:wrap}
.mm-up{cursor:pointer}
.mm-up.busy{opacity:.6;pointer-events:none}
.mm-sec{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.mm-sec h3{font-size:.95rem;margin:0 0 8px}
/* Tech job sheet: complete / pause */
.donebar{display:grid;grid-template-columns:1fr auto;gap:10px}
.donebar .completebtn{width:100%}
.btn.pausebtn{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);font-weight:800;justify-content:center}
.donebar .btn.pausebtn{padding:14px 18px;font-size:1.05rem;border-radius:12px}
.btn.pausebtn:hover{background:color-mix(in srgb,var(--warn-soft) 70%,var(--warn) 15%)}
/* Job card tabs */
.jobtabs{position:sticky;top:0;z-index:6;background:var(--bg);margin-bottom:-6px;padding-top:4px}
.jobtabs .count.warn{background:var(--warn-soft);color:var(--warn)}
.jobtabs .count.live{background:var(--good-soft);color:var(--good)}
.jobpanels{display:contents}
.jobpanel{display:grid;gap:18px;align-content:start;min-width:0}
.jobpanel[hidden]{display:none}
.jp-booking{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.jp-hist,.jp-time,.jp-files,.jp-vc,.jp-msgs,.jp-vhc{max-width:920px}
@media (max-width:900px){.jp-booking{grid-template-columns:1fr}}
.btn.deljob{color:var(--bad)}
.jobphone{color:inherit;font-weight:600}
.jobtabs button[aria-selected="true"] .count.warn{background:var(--warn);color:#fff}
.ownerf.need > span{color:var(--bad)} .ownerf.need #own{outline:2px solid var(--bad);outline-offset:4px;border-radius:8px}
/* Collection & delivery */
.cdbox{border:1px dashed var(--line-strong);border-radius:var(--r);padding:10px 12px}
.cd-picks{display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center}
.cd-t{display:inline-flex;gap:6px;align-items:center;font-weight:700}
.cd-t svg,.cdcard h3 svg{width:18px;height:18px}
.cdcard.on{border-left:4px solid var(--petrol)}
.cdchip{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:5px;background:var(--petrol-soft);color:var(--petrol);white-space:nowrap}
.cdchip.del{background:var(--accent-soft);color:var(--accent-ink)}
.cdchip.done{opacity:.6}
.cdlist{list-style:none;margin:0;padding:0}
.cdlist li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.cdlist li:first-child{border-top:0}
.cdlist .cd-main{flex:1;min-width:160px;display:flex;flex-direction:column}
/* Diary month calendar */
.calbtn{display:inline-flex;align-items:center;gap:6px}
.calbtn svg{width:16px;height:16px}
.calhead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.calhead h3{margin:0 8px;min-width:170px;text-align:center}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.calw{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center}
.calday{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:78px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-align:left;cursor:pointer;font:inherit;color:inherit}
.calday:hover{border-color:var(--petrol)}
.calday b{font-size:1.05rem}
.calday .calcount{font-size:.75rem;font-weight:600}
.calday .calfree{font-size:.7rem;color:var(--muted)}
.calfill{width:100%;height:5px;border-radius:3px;background:var(--sunk);overflow:hidden}
.calfill i{display:block;height:100%;background:var(--good)}
.calday.busy .calfill i{background:var(--warn)}
.calday.full .calfill i{background:var(--bad)}
.calday.full .calcount{color:var(--bad)}
.calday.closed{background:var(--sunk);color:var(--muted)}
.calday.other{opacity:.45}
.calday.past{opacity:.7}
.calday.today{box-shadow:inset 0 0 0 2px var(--accent)}
.calday.sel{border-color:var(--petrol);box-shadow:inset 0 0 0 2px var(--petrol)}
@media (max-width:600px){.calday{min-height:54px;padding:4px}.calday .calfree,.calday .calfill{display:none}.calday .calcount{font-size:.62rem}}
@media (max-width:600px){.calhead{flex-wrap:wrap;gap:6px}.calhead h3{min-width:0;flex:1;font-size:1rem;margin:0}.calgrid{gap:3px}.calday{min-width:0;overflow:hidden}.calw{font-size:.6rem}}
@media (max-width:600px){.calbtn .caltxt{display:none}.datebar input[type=date]{max-width:150px}}
/* Morning clock-in prompt */
.clockinbox{text-align:center;padding:6px 4px}
.ci-time{font-size:3rem;font-weight:800;line-height:1;margin:4px 0 10px}
.ci-btn{width:100%;justify-content:center;padding:16px;font-size:1.15rem;border-radius:12px;margin-top:8px}
/* Break screen */
.breakscreen{position:fixed;inset:0;z-index:300;background:rgba(0,30,70,.92);display:grid;place-items:center;padding:16px;color:#fff;backdrop-filter:blur(3px)}
.bs-card{width:min(560px,100%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.bs-label{display:flex;gap:8px;align-items:center;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:1rem;color:#FFBD59}
.bs-label svg{width:22px;height:22px}
.bs-timer{font-size:clamp(4rem,18vw,9rem);font-weight:800;line-height:1;letter-spacing:-.02em}
.bs-sub{opacity:.85}
.bs-bar{width:100%;height:12px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden;margin:6px 0 10px}
.bs-bar i{display:block;height:100%;width:0;background:#FFBD59;transition:width 1s linear}
[data-breakbox].over .bs-timer{color:#FF8A80}
[data-breakbox].over .bs-bar i{background:#FF5A4E}
.bs-end{padding:16px 28px;font-size:1.15rem;border-radius:12px}
.bs-hide{color:#fff;opacity:.75;margin-top:4px}
.bs-state{font-weight:700;font-size:1.1rem;margin-top:-6px}
/* Repair diary by bay */
.viewpick{margin:2px 0 -4px}
.viewpick span{display:inline-flex;align-items:center;gap:6px}
.viewpick svg{width:15px;height:15px}
.bayboard{--bhead-h:46px;display:grid;grid-template-columns:54px minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:auto;max-height:calc(100vh - 150px)}
.btimes{position:sticky;left:0;z-index:4;background:var(--surface);border-right:1px solid var(--line)}
.btimes .bhead{position:sticky;top:0;z-index:5;background:var(--surface)}
.btbody{position:relative}
.btbody span{position:absolute;right:6px;transform:translateY(-50%);font-size:.72rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.btbody span:first-child{transform:none}
.bcols{display:grid;position:relative;min-width:0}
.bcol{border-left:1px solid var(--line);min-width:0}
.bcol:first-child{border-left:0}
.bhead{height:var(--bhead-h);padding:6px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:3;background:var(--surface);display:flex;flex-direction:column;justify-content:center;line-height:1.2;box-sizing:border-box}
.bbody{position:relative;cursor:copy;background-image:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px var(--hour)),repeating-linear-gradient(to bottom,color-mix(in srgb,var(--line) 45%,transparent) 0 1px,transparent 1px calc(var(--hour) / 2))}
.bbody:hover{background-color:color-mix(in srgb,var(--petrol) 3%,transparent)}
.bbody.dropto{background-color:color-mix(in srgb,var(--petrol) 10%,transparent)}
.bblock{position:absolute;box-sizing:border-box;border:1px solid var(--line);border-left:5px solid;border-radius:8px;background:var(--surface);padding:4px 7px;overflow:hidden;text-decoration:none;color:inherit;font-size:.78rem;line-height:1.3;display:flex;flex-direction:column;gap:2px;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:grab;z-index:1}
.bblock:hover{box-shadow:0 3px 10px rgba(0,0,0,.16);z-index:2}
.bblock .bb-time{font-weight:700;font-size:.72rem;color:var(--muted)}
.bblock .bb-veh{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bblock .bb-cust{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bblock .bb-chips{display:flex;gap:3px;flex-wrap:wrap}
.bblock .bb-chips .chip{font-size:.6rem;padding:1px 5px}
.bblock.short .bb-cust,.bblock.short .bb-chips{display:none}
.bblock.s-on_site,.bblock.s-on_ramp,.bblock.s-on_test{background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.bblock.s-paused{background:var(--warn-soft)}
.bblock.s-work_completed,.bblock.s-awaiting_collection,.bblock.s-mot_passed{background:var(--good-soft)}
.bblock.s-completed{opacity:.6}
.bnow{position:absolute;left:0;right:0;height:2px;background:var(--bad);z-index:3;pointer-events:none}
.bnow::before{content:"";position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--bad)}
/* Dashboard: workshop progress */
.wsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;padding:6px 16px 16px}
.wsitem{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-decoration:none;color:inherit;background:var(--surface)}
.wsitem:hover{border-color:var(--petrol)}
.ws-top{display:flex;gap:8px;align-items:center}
.ws-veh{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ws-veh b,.ws-veh span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-foot{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.jstage{display:flex;flex-direction:column;gap:4px}
.js-text{font-weight:700;font-size:.88rem}
.js-text.good{color:var(--good)} .js-text.warn{color:var(--warn)} .js-text.bad{color:var(--bad)}
.js-bar{height:7px;border-radius:4px;background:var(--sunk);overflow:hidden}
.js-bar i{display:block;height:100%;background:var(--good);transition:width .4s}
.js-bar.vhc i{background:var(--petrol)}
.progcell{min-width:150px;max-width:220px}
/* Diary by bay — same look as the diary list */
.baytable{table-layout:fixed;width:100%;min-width:640px}
.baytable th{text-align:left}
.baytable th .count{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--surface);font-size:.7rem;margin-left:4px;text-align:center}
.baytable td{white-space:normal;vertical-align:top;height:38px;box-sizing:border-box;border-bottom:1px dashed var(--line);border-left:1px solid var(--line);padding:3px}
.baytable tr.hour-end td{border-bottom:1px solid var(--line-strong)}
.baytable td.bt-time{border-left:0;padding:9px 8px;white-space:nowrap;background:var(--surface)}
.baytable td.btfree{cursor:pointer;color:var(--muted);vertical-align:middle;padding:0 8px;background:repeating-linear-gradient(135deg,var(--surface) 0 10px,color-mix(in srgb,var(--sunk) 55%,var(--surface)) 10px 20px)}
.baytable td.btfree .freelbl{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:.78rem}
.baytable td.btfree .freelbl svg{width:13px;height:13px}
.baytable td.btfree:hover{background:var(--accent-soft);color:var(--accent-ink)}
.baytable td.btfree.past{opacity:.55}
.baytable td.dropto{outline:2px dashed var(--petrol);outline-offset:-3px;background:var(--petrol-soft)}
.baytable td.btcell{background:var(--surface)}
.btjob{display:flex;flex-direction:column;justify-content:flex-start;gap:4px;box-sizing:border-box;min-height:calc(var(--rows,1) * 38px - 7px);padding:6px 9px;border-radius:5px;background:var(--row,var(--surface));color:var(--rowink,var(--ink));text-decoration:none;cursor:grab;overflow:hidden;font-size:.84rem}
.btcell.clash .btjob{min-height:0}
.btjob + .btjob{margin-top:3px}
.btjob.unalloc{background:var(--sunk);border:1px dashed var(--line-strong)}
.btjob:hover{filter:brightness(1.1)}
.bt-l1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-l1 .bt-veh{opacity:.85}
.bt-l2{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.bt-l3{font-size:.76rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-time-r{font-size:.74rem;opacity:.85}
.btst,.btpt{display:inline-block;padding:2px 7px;border-radius:4px;font-weight:800;font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;background:rgba(255,255,255,.9);color:#1b2730}
.btst.s-on_site{background:#F28C28;color:#fff}
.btst.s-on_ramp,.btst.s-on_test{background:#B83CD6;color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.75)}
.btst.s-paused{background:#E0A100;color:#1A1200}
.btst.s-work_completed,.btst.s-mot_passed,.btst.s-completed{background:#2EA44F;color:#fff}
.btst.s-awaiting_collection{background:#0E9AA7;color:#fff}
.btst.s-mot_fail_repair,.btst.s-mot_fail_brb{background:#E5251B;color:#fff}
.btpt.p-to_order{background:#E5251B;color:#fff}
.btpt.p-ordered{background:#E0A100;color:#1A1200}
.btpt.p-arrived{background:#2EA44F;color:#fff}
.btclash{display:block;font-size:.68rem;font-weight:800;color:var(--bad);padding:0 4px 2px}
.baytable td.clash{background:var(--bad-soft)}

/* ---------- Phones ---------- */
@media (max-width:900px){
  /* 16px text in boxes stops iPhones zooming the page in when you tap one */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
  .tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs.at-end{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:640px){
  /* Tables become a card per row: heading on the left, value on the right */
  table.stk,table.stk>tbody,table.stk>tbody>tr,table.stk>tbody>tr>td,table.stk>tfoot,table.stk>tfoot>tr{display:block;width:auto!important;min-width:0!important}
  table.stk>thead{display:none}
  .tablewrap:has(>table.stk){overflow-x:visible}
  table.stk>tbody>tr{padding:10px 14px;border-bottom:1px solid var(--line)}
  table.stk>tbody>tr>td{display:flow-root;padding:3px 0!important;border:0!important;text-align:right!important;white-space:normal!important;max-width:none!important;min-height:22px;overflow-wrap:anywhere}
  table.stk>tbody>tr>td[data-label]::before{content:attr(data-label);float:left;margin-right:14px;max-width:48%;text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.9;overflow-wrap:normal}
  table.stk>tbody>tr>td:not([data-label]){text-align:left!important}
  table.stk>tbody>tr>td:empty{display:none}
  table.stk>tbody>tr>td:first-child{font-weight:700}
  /* boxes you type into sit under their label, full width */
  table.stk>tbody>tr>td:has(>:is(input:not([type=checkbox]):not([type=radio]),select,textarea)),table.stk>tbody>tr>td:has(>div>:is(input:not([type=checkbox]):not([type=radio]),select,textarea)){text-align:left!important}
  table.stk>tbody>tr>td:has(>:is(input:not([type=checkbox]):not([type=radio]),select,textarea))::before,table.stk>tbody>tr>td:has(>div>:is(input:not([type=checkbox]):not([type=radio]),select,textarea))::before{float:none;display:block;max-width:none}
  table.stk>tbody>tr>td :is(input:not([type=checkbox]):not([type=radio]),select,textarea){width:100%!important;max-width:none!important}
  table.stk>tbody>tr>td svg{width:18px;height:18px}
  table.stk>tfoot>tr{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-top:2px solid var(--line)}
  table.stk>tfoot>tr>td,table.stk>tfoot>tr>th{display:block;border:0!important;padding:0!important}
  table.stk>tfoot>tr>td:empty{display:none}
  .slots-wrap table.stk>tbody>tr,.card table.stk>tbody>tr:last-child{border-bottom:0}
  .card table.stk>tbody>tr+tr{border-top:0}

  /* Diary list: a compact two-column card per booking */
  table.slots.stk>tbody>tr[data-job]{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;border-bottom:2px solid var(--bg)}
  table.slots.stk>tbody>tr[data-job]>td{text-align:left!important;min-width:0}
  table.slots.stk>tbody>tr[data-job]>td::before{float:none;display:block;max-width:none;line-height:1.4;color:inherit;opacity:.7}
  table.slots.stk>tbody>tr[data-job]>td[data-label="Time"]{order:-2;font-size:1.05rem}
  table.slots.stk>tbody>tr[data-job]>td[data-label="Time"]::before,table.slots.stk>tbody>tr[data-job]>td[data-label="Status"]::before{display:none}
  table.slots.stk>tbody>tr[data-job]>td[data-label="Status"]{order:-1;text-align:right!important}
  table.slots.stk>tbody>tr[data-job]>td:is([data-label="Mod."],[data-label="User"],[data-label="Paid by"],[data-label="Cost"]){display:none}
  table.slots.stk>tbody>tr[data-job]>td:is([data-label="Customer"],[data-label="Vehicle"],[data-label="Type"]){overflow:hidden;text-overflow:ellipsis}
  table.slots.stk>tbody>tr[data-job] select{width:100%!important;min-width:0}
  table.slots.stk>tbody>tr.freeslot{display:flex;gap:12px;align-items:center;padding:7px 14px}
  table.slots.stk>tbody>tr.freeslot>td{text-align:left!important;padding:0!important;font-weight:600}
}
@media (max-width:640px){
  .card .doc table{font-size:.78rem}
  .card .doc th,.card .doc td{padding:5px 4px!important}
  .card .doc .cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .datebar{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .datebar::-webkit-scrollbar{display:none}
  .datebar button{white-space:nowrap;flex:0 0 auto}
  table.stk>tbody>tr>td>div{justify-content:flex-end;margin-left:auto}
  table.stk>tbody>tr.freeslot>td::before{display:none}
  table.stk>tbody>tr>td.progcell>*{margin-top:4px}
}
@media (max-width:640px){
  .lookup{flex-wrap:wrap}
  .lookup>input{flex:1 1 100%}
  /* Work & parts lines: a compact card per line — description across the top, the numbers three to a row underneath */
  table.lines.stk>tbody>tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;align-items:end}
  table.lines.stk>tbody>tr>td{text-align:left!important;min-width:0}
  table.lines.stk>tbody>tr>td[data-label]::before{float:none;display:block;max-width:none;line-height:1.5}
  table.lines.stk>tbody>tr>td:is([data-label^="Desc"],[data-label^="Work"],[data-label^="Recommended"]){grid-column:1/-1}
  table.lines.stk>tbody>tr>td:not([data-label]){align-self:center}
  table.lines.stk>tbody>tr>td:first-child{font-weight:inherit}
  table.lines.stk>tbody>tr>td:has(>input[type=checkbox]){display:flex;align-items:center;gap:8px}
  table.lines.stk>tbody>tr>td:has(>input[type=checkbox])::before{display:inline;line-height:1}
}
.check>input{flex:none}
.field>label.check{font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500}
@media (max-width:640px){
  /* long forms in pop-ups: the Save / Cancel buttons stay on screen */
  .modal footer{position:sticky;bottom:0;z-index:3;background:var(--surface);border-radius:0 0 12px 12px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .overlay{padding:12px 10px 24px}
  .modal .body{padding:16px 14px}
  .modal header{padding:14px}
}
@media (max-width:640px){
  table.lines.stk>tbody>tr>td:is([data-label^="Desc"],[data-label^="Work"],[data-label^="Recommended"]){grid-column:span 2}
  table.lines.stk>tbody>tr>td:is([data-label^="Desc"],[data-label^="Work"],[data-label^="Recommended"]):first-child,table.lines.stk>tbody>tr>td:not([data-label])+td:is([data-label^="Desc"],[data-label^="Work"],[data-label^="Recommended"]){grid-column:1/-1}
  table.lines.stk>tbody>tr>td[data-label="Type"] select{padding-left:8px;padding-right:4px}
}
@media (max-width:640px){
  table.lines.stk>tbody>tr>td:is([data-label^="Desc"],[data-label^="Work"],[data-label^="Recommended"]){grid-column:1/-1!important;order:-1}
  table.lines.stk>tbody>tr>td:not([data-label]):first-child{order:-2;grid-column:1/-1}
}
/* Health check: tyre sizes, required once tyres are advised */
.tyresizes{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin:0 0 10px}
.tyresizes .ts-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.tyresizes .ts-req{display:none;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--bad);border-radius:4px;padding:1px 6px}
.tyresizes.need{border:2px solid var(--bad);background:var(--bad-soft)}
.tyresizes.need .ts-req{display:inline-block}
.tyresizes.need .ts-opt{display:none}
.tyresizes input{text-transform:uppercase}
.tyresizes input.m-red{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
/* Check-in */
.cibtn{border:1px solid var(--accent);background:var(--accent);color:#1A1200;font-weight:800;font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;border-radius:5px;padding:2px 7px;cursor:pointer;white-space:nowrap}
.cibtn:hover{filter:brightness(1.05)}
.btjob .cibtn{box-shadow:0 0 0 1.5px rgba(255,255,255,.7)}
.cibar{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;padding:8px 12px;margin:0 0 12px;border-radius:8px;background:var(--good-soft);color:var(--good)}
.cibar svg{width:14px;height:14px;vertical-align:-2px}
.nutbadge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--petrol-soft);color:var(--petrol);font-size:.85rem}
.nutbadge.warn{background:var(--warn-soft);color:var(--warn)}
.nutbadge svg{width:14px;height:14px}
.ci-intro{margin:0;display:flex;gap:6px;align-items:center}
.ci-intro svg{width:16px;height:16px}
.ci-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ci-sec{border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.ci-sec h3{display:flex;gap:8px;align-items:center;margin:0 0 10px;font-size:1rem}
.ci-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--petrol);color:#fff;font-size:.78rem;flex:none}

.ci-nuts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ci-nuts label{position:relative}
.ci-nuts input{position:absolute;opacity:0;pointer-events:none}
.ci-nuts span{display:block;padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-weight:600;font-size:.88rem;cursor:pointer;background:var(--surface);height:100%;box-sizing:border-box}
.ci-nuts input:checked+span{background:var(--accent);border-color:var(--accent);color:#1A1200}
.ci-nuts input:focus-visible+span{outline:3px solid var(--petrol);outline-offset:2px}
.ci-qrrow{display:flex;gap:14px;align-items:flex-start}
.ci-qr{flex:none;width:150px;height:150px;display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.ci-qr svg{width:100%;height:100%;display:block}
.ci-confirm{margin-top:4px;padding:12px 14px;border-radius:10px;background:var(--accent-soft);font-size:1rem}
.ci-confirm input{width:22px;height:22px}
@media (max-width:760px){.ci-grid{grid-template-columns:1fr}}
@media (max-width:420px){.ci-qrrow{flex-direction:column;align-items:center;text-align:center}.ci-qr{width:200px;height:200px}}
.tyresizes input::placeholder{text-transform:none}
/* Technician work requests */
.reqnote{margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--muted)}
.reqnote .chip svg{width:12px;height:12px}
.seg.rqok{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg.rqok span{height:100%;box-sizing:border-box;font-size:.88rem}
@media (max-width:520px){.seg.rqok{grid-template-columns:1fr}}
@media (max-width:520px){
  .clock.vhcfirst{flex-direction:column;align-items:stretch;text-align:center}
  .clock.vhcfirst .clockbtn{justify-content:center}
  .clock.vhcfirst .clocktime b{font-size:1.1rem!important}
}
/* Dashboard: managers can hide the money tiles */
.stat .fig-v{display:inline-block;transition:filter .2s}
.figs-hidden .stat.money .fig-v{filter:blur(14px);user-select:none}
/* Jobs page: 11 tabs — on a computer they wrap rather than hide off to the right */
@media (min-width:901px){.jobslisttabs{flex-wrap:wrap;overflow-x:visible;row-gap:0}}