:root { --bg:#eef1f5; --topbg:#16294d; --panel:#ffffff; --line:#d7dfe9; --txt:#16233a; --muted:#5d6f88; --acc:#1668dc; --acc-d:#0f4fb3; --acc-tx:#ffffff; --ok:#1e9e56; --danger:#d92d20; --inputbg:#f4f6fa; --flashbg:#d7f2e1;
--navbg:#16294d; --navtx:#ffffff; --navlink:#c3cfe4; --navmut:#8fa0bd; --navacc:#9fc1ff; --navhover-bg:rgba(255,255,255,.14); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.15);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#16233a; --expr:#c07f13; --expr-d:#96650f; --lock:#1e9e56; --lock-d:#157a41;
--cardbg:#ffffff; --chip-work:#e2ebfb; --chip-people:#ece6fa; --chip-system:#ddf2e2; --chip-you:#fdf3d7; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt); font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.top { background:var(--navbg); border-bottom:1px solid var(--navbg); padding:.6rem .9rem; position:sticky; top:0; z-index:10; }
.top .brand { color:var(--navtx); }
.top .navlink { color:var(--navlink); }
.top .navlink.on, .top .navlink:hover { background:var(--navhover-bg); color:var(--navhover-tx); }
.brand { font-weight:800; letter-spacing:.3px; margin-bottom:.4rem; }
nav { display:flex; gap:.4rem; flex-wrap:wrap; }
.navlink { color:var(--muted); text-decoration:none; padding:.35rem .7rem; border-radius:.5rem; font-size:.9rem; }
.navlink.on, .navlink:hover { background:var(--panel); color:var(--txt); }
.wrap { max-width:960px; margin:0 auto; padding:1rem .9rem 3rem; }
h1 { font-size:1.35rem; margin:.4rem 0 1rem; }
h2 { font-size:1.05rem; margin:1.4rem 0 .6rem; color:var(--acc); }
h3 { font-size:.95rem; margin:.2rem 0 .6rem; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { text-align:left; padding:.5rem .55rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; }
.r { text-align:right; } .mono { font-family:ui-monospace,monospace; font-size:.82rem; word-break:break-all; }
.muted { color:var(--muted); } .hint { color:var(--muted); font-size:.82rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.7rem; margin-bottom:1rem; grid-auto-rows:1fr; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:.7rem; padding:.9rem; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:5.2rem; }
.card .big { font-size:1.6rem; font-weight:800; } .card .lbl { color:var(--muted); font-size:.82rem; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:.7rem; padding:.9rem; margin-bottom:.9rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
@media (max-width:640px){ .grid2{ grid-template-columns:1fr; } }
.form label { display:block; margin:.55rem 0; font-size:.9rem; }
.form input, .form select, .form textarea { width:100%; margin-top:.25rem; padding:.55rem .6rem; border-radius:.5rem; border:1px solid var(--line); background:var(--inputbg); color:var(--txt); font-size:1rem; }
.form .chk input { width:auto; margin-right:.4rem; }
[hidden] { display:none !important; }
.btn { display:inline-block; background:#4a6fa5; color:#fff; border:1px solid #3a5a87; padding:.55rem .9rem; border-radius:.55rem; text-decoration:none; font-size:.92rem; cursor:pointer; font-weight:600; }
.btn.primary { background:var(--acc); border-color:var(--acc-d); color:var(--acc-tx); font-weight:700; }
.btn.green { background:var(--lock); border-color:var(--lock-d); color:#fff; font-weight:700; }
.btn.amber { background:var(--expr); border-color:var(--expr-d); color:#fff; font-weight:700; }
.btn.yellow { background:var(--newbtn); border-color:var(--newbtn-d); color:var(--newbtn-tx); font-weight:700; }
.row2 { display:flex; gap:.5rem; flex-wrap:wrap; margin:.8rem 0; }
.linkbtn { background:none; border:none; color:var(--acc); cursor:pointer; font-size:.9rem; padding:.2rem; }
.linkbtn.danger { color:var(--danger); }
.badge { display:inline-block; padding:.18rem .6rem; border-radius:1rem; font-size:.78rem; font-weight:700; background:#e3e7ee; color:#3c4657; }
.st-draft { background:#e3e7ee; color:#3c4657; } .st-estimate { background:#d2f0dc; color:#1c6b3f; } .st-approved { background:#d9e8fd; color:#1d4f9c; }
.st-in_progress { background:#f7e9c4; color:#8a5f00; } .st-dispatched { background:#e0e7ff; color:#3730a3; } .st-complete { background:#d2f0dc; color:#1c6b3f; }
.st-invoiced { background:#e9dcf7; color:#5b3a78; } .st-paid { background:#d2f0dc; color:#1c6b3f; } .st-cancelled { background:#f9d8d5; color:#a02328; }
.totals { max-width:420px; margin-left:auto; } .totals .grand td { font-weight:800; font-size:1.1rem; border-top:2px solid var(--acc); }
.internal { color:var(--muted); }
.foot { text-align:center; color:var(--muted); font-size:.78rem; padding:1.2rem; border-top:1px solid var(--line); }

/* Sidebar navigation layout (per-user display option) */
body.sidenav { display:flex; align-items:stretch; }
body.sidenav .top { position:sticky; top:0; height:100vh; width:var(--sidew,228px); flex:0 0 var(--sidew,228px); display:flex; flex-direction:column; overflow-y:auto; }
body.sidenav .top nav { flex-direction:column; align-items:stretch; margin-top:.5rem; flex:1; }
body.sidenav .top .navlink { display:block; padding:.55rem .75rem; }
body.sidenav .uchip { margin:auto 0 0; padding-top:.8rem; border-top:1px solid var(--navline); align-self:stretch; }
body.sidenav .uchip .who { white-space:nowrap; font-weight:600; }
body.sidenav .uchip .who .navlink { display:inline; padding:0; }
body.sidenav .sidewrap { flex:1; min-width:0; }
body.sidenav .brand { flex-direction:column; align-items:center; gap:.25rem; text-align:center; }
body.sidenav .brandsub { font-size:.72rem; letter-spacing:1.2px; }
@media (max-width:760px) {
  body.sidenav { display:block; }
  body.sidenav .top { width:auto; height:auto; }
  body.sidenav .top nav { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  body.sidenav .top nav::-webkit-scrollbar { display:none; }
  body.sidenav .top .navlink { flex:none; white-space:nowrap; }
  body.sidenav .uchip { margin-left:auto; border-top:none; padding-top:0; }
  body.sidenav .brand { flex-direction:row; align-items:center; }
}

/* Phase 2: auth & user management */
.err { background:#f9d8d5; border:1px solid var(--danger); border-radius:.5rem; padding:.7rem .9rem; }
.flash { background:var(--flashbg); border:1px solid var(--ok); border-radius:.5rem; padding:.7rem .9rem; }
/* Role-toggle banner: shown on every page while an owner is viewing as technician. */
.rolebanner { background:#b45309; color:#fff; border-radius:.5rem; padding:.6rem .9rem; margin:0 0 1rem; font-size:.92rem; }
.rolebanner .btn { background:#fff; color:#7c3a06; border-color:#fff; padding:.25rem .7rem; font-size:.85rem; }
/* Trial-nudge banner: solo mode, shown to the owner at 30 days in, 15 days out, then daily from 7 days out. */
.trialbanner { background:#1d4ed8; color:#fff; border-radius:.5rem; padding:.6rem .9rem; margin:0 0 1rem; font-size:.92rem; }
.trialbanner a { color:#fff; font-weight:700; }
.trialbanner .btn { background:#fff; color:#1e40af; border-color:#fff; padding:.25rem .7rem; font-size:.85rem; }
.trialbanner .trialwarn { font-weight:700; text-decoration:underline; }
.uchip { margin-left:auto; color:var(--muted); font-size:.82rem; align-self:center; }
.uchip .navlink { display:inline; padding:.2rem .4rem; }
.inlineform { display:inline; }
.nowrap { white-space:nowrap; }
.terms { max-height:220px; overflow:auto; background:var(--inputbg); border:1px solid var(--line); border-radius:.5rem; padding:.7rem; font-size:.85rem; white-space:pre-wrap; }
.bigpass { font-size:1.3rem; font-weight:800; letter-spacing:1px; background:var(--inputbg); padding:.7rem; border-radius:.5rem; border:1px dashed var(--acc); }
.mono.small { font-size:.72rem; }
.vmodal { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; z-index:60; padding:16px; }
.vmodal[hidden] { display:none; }
tr.voided td { opacity:.55; text-decoration:line-through; }
tr.voided td:last-child { text-decoration:none; }
.vmodal-box { max-width:440px; width:100%; }
.vmodal-box video { width:100%; border-radius:8px; background:#000; min-height:220px; }
.mgallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:1rem; }
.mitem { margin:0; }
.mitem img, .mitem video { width:100%; height:140px; object-fit:cover; border-radius:8px; background:#111; display:block; }
.mitem figcaption { font-size:12px; color:var(--muted); margin-top:4px; }
.ainote { border-left:3px solid var(--acc); padding:.4rem .7rem; margin:.6rem 0; background:rgba(255,255,255,.02); border-radius:0 .5rem .5rem 0; }
.ainote p { margin:.25rem 0; }
.brand { display:flex; align-items:center; gap:.75rem; }
.brandlogo { height:42px; width:auto; }
.brandsub { font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:.82rem; color:#c8d0e0; white-space:nowrap; }
/* Logo doubles as the owner role-switcher: a button reset to look like the old home link. */
.logobtn { background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.loginbrand { text-align:center; margin:1.4rem 0 .8rem; }
.loginlogo { height:72px; width:auto; }
.logintitle { margin-top:.55rem; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; font-size:.95rem; color:var(--txt); }

/* Owner inspection form (mobile-first) */
.seg{display:flex;gap:.4rem;margin:.4rem 0}
.segbtn{flex:1;min-width:0;padding:.75rem .2rem;font-size:.85rem;font-weight:700;border-radius:.6rem;border:2px solid var(--line);background:var(--inputbg);color:var(--txt);cursor:pointer}
.segbtn.on-good{background:#1f6b43;border-color:#1f6b43;color:#fff}
.segbtn.on-attention{background:#7a5b12;border-color:#7a5b12;color:#fff}
.segbtn.on-urgent{background:#5a2326;border-color:#e05252;color:#fff}
.segbtn.on-na{background:#3a3f4d;border-color:#3a3f4d;color:#fff}
.prog{height:10px;background:var(--inputbg);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:.3rem 0 .6rem}
.prog>i{display:block;height:100%;background:var(--acc);transition:width .2s}
.insp-item{border:1px solid var(--line);border-radius:.6rem;padding:.6rem .7rem;margin:.5rem 0}
.insp-item.flagged-attention{border-color:#7a5b12}
.insp-item.flagged-urgent{border-color:#e05252}
/* Section status badges (2026-10-01): same palette as the rating buttons */
.badge.secbadge-good{background:#1f6b43;color:#fff}
.badge.secbadge-attention{background:#7a5b12;color:#fff}
.badge.secbadge-urgent{background:#5a2326;border:1px solid #e05252;color:#fff}
.notelbl{display:block;margin:.4rem 0;font-size:.85rem;color:var(--muted)}
.notelbl input{width:100%;margin-top:.2rem;padding:.5rem .6rem;border-radius:.5rem;border:1px solid var(--line);background:var(--inputbg);color:var(--txt);font-size:.95rem;box-sizing:border-box}
/* Tekion-style inspection rows (2026-10-01, Justin): label + rating seg on
   top, measurement + mic'd note below. */
.insp-head{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-bottom:.15rem}
.insp-head strong{font-size:.95rem}
.insp-sub{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.measlbl{font-size:.85rem;color:var(--muted)}
.measrow{display:flex;gap:.35rem;align-items:center;margin-top:.2rem}
.measrow input{width:5rem;padding:.5rem .6rem;border-radius:.5rem;border:1px solid var(--line);background:var(--inputbg);color:var(--txt);font-size:.95rem}
.notelbl{flex:1;min-width:12rem}
.noterow{display:flex;gap:.35rem;align-items:center;margin-top:.2rem}
.noterow input{width:auto;flex:1;min-width:0;margin-top:0}
.micbtn.listening{background:#b91c1c;border-color:#b91c1c;color:#fff}
.thumbrow{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0}
.thumbrow img,.thumbwrap img{width:90px;height:70px;object-fit:cover;border-radius:6px}
.testbox{border:1px solid var(--line);border-radius:.6rem;padding:.7rem .8rem;margin:.6rem 0;background:var(--inputbg)}
.testbox h4{margin:.1rem 0 .5rem}
.testres{margin:.4rem 0}
.trow{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.trow span{color:var(--muted)}
.qrrow{display:flex;gap:.9rem;align-items:flex-start;margin:.6rem 0}
.qrimg{width:150px;height:150px;border:1px solid var(--line);border-radius:.4rem;background:#fff;flex:none}
.mono{font-family:ui-monospace,monospace;font-size:.82rem;word-break:break-all}
.docrow{padding:.3rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.checkline{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .6rem;border:1px solid var(--line);border-radius:.5rem;margin:.45rem 0;cursor:pointer}
.checkline input{margin-top:.2rem;transform:scale(1.25);flex:none}
.msglog{margin:.6rem 0}
.msgline{padding:.55rem .7rem;border-radius:.6rem;margin:.4rem 0;font-size:.93rem;line-height:1.45}
.msg-out{background:#d9e8fd;border:1px solid var(--acc)}
.msg-in{background:#d2f0dc;border:1px solid var(--ok)}
.pwWrap{position:relative;display:block}
.pwWrap input{padding-right:2.6rem}
.pwEye{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.15rem;line-height:1;cursor:pointer;padding:.25rem}
.modalBack{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:.75rem;max-width:440px;width:100%;padding:1.25rem;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.modal h3{font-size:1.1rem}
.btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; font-weight:700; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ---- Phone layout: the app must read cleanly in the installed PWA, not just on desktop. ---- */
@media (max-width:640px) {
  .wrap { padding:.8rem .6rem 3rem; }
  h1 { font-size:1.15rem; margin:.2rem 0 .8rem; }
  /* Data tables: scroll sideways instead of crushing columns. */
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  th, td { white-space:nowrap; }
  /* Top nav: one sideways-scrollable strip instead of a wrapping wall of links. */
  .top { padding:.5rem .6rem; }
  .top nav { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .top nav::-webkit-scrollbar { display:none; }
  .top .navlink, .uchip { flex:none; white-space:nowrap; }
  .brandlogo { height:32px; }
  .brandsub { font-size:.7rem; letter-spacing:1.5px; }
  /* Bigger tap targets, tighter panels. */
  .btn { padding:.65rem 1rem; }
  .panel { padding:.75rem; }
  .card { padding:.7rem; }
  .card .big { font-size:1.35rem; }
  .row2 { margin:.6rem 0; }
  .totals { max-width:none; }
}

/* Navigation editor (profile): reorder rows with up/down, show/hide, favorites */
.navrow { display:flex; align-items:center; gap:.6rem; padding:.3rem 0; border-bottom:1px solid var(--line); }
.navrow:last-child { border-bottom:none; }
.navmove { display:flex; flex-direction:column; gap:2px; }
.navmove .linkbtn { padding:.05rem .35rem; line-height:1.2; }
.navshow { flex:1; display:flex; align-items:center; gap:.5rem; margin:0; }
.navfav { display:flex; align-items:center; gap:.3rem; margin:0; white-space:nowrap; }

/* Dashboard stat cards that link into their data */
a.card.cardlink { text-decoration:none; color:inherit; display:block; }
a.card.cardlink:hover { border-color:var(--acc); }
a.card.cardlink:hover .lbl { color:var(--acc); }

/* R.O. detail tab strip */
.rotabs { display:flex; gap:.4rem; flex-wrap:wrap; margin:.55rem 0 .2rem; }
.rotabs a { padding:.32rem .75rem; border:1px solid var(--line); border-radius:999px;
  text-decoration:none; font-size:.9rem; color:inherit; background:var(--panel); }
.rotabs a:hover { border-color:var(--acc); color:var(--acc); }
/* R.O. tab strip colors — Justin's model: yellow = pending action,
   green = build/go (or "has what it needs": tech assigned, parts waiting on
   Scout), red = destructive. Blue/yellow stay neutral gray; green/red carry
   real color. Active tab is always gold ("you are here"). */
.rotabs a.rotab-yellow { background:#e5e7eb; border-color:#9ca3af; color:#374151; font-weight:700; }
.rotabs a.rotab-yellow:hover { background:#d1d5db; border-color:#9ca3af; color:#374151; }
.rotabs a.rotab-yellow.active { background:#c9a227; border-color:#a8861c; color:#16233a; }
.rotabs a.rotab-green { background:#d2f0dc; border-color:#1e9e56; color:#145c33; font-weight:700; }
.rotabs a.rotab-green:hover { background:#bfe8cf; border-color:#157a41; color:#0f4d2a; }
.rotabs a.rotab-green.active { background:#c9a227; border-color:#a8861c; color:#16233a; }
.rotabs a.rotab-blue { background:#e5e7eb; border-color:#9ca3af; color:#374151; font-weight:700; }
.rotabs a.rotab-blue:hover { background:#d1d5db; border-color:#9ca3af; color:#374151; }
.rotabs a.rotab-blue.active { background:#c9a227; border-color:#a8861c; color:#16233a; }
.rotabs a.rotab-red { background:#fdeceb; border-color:#d92d20; color:#b91c1c; font-weight:700; }
.rotabs a.rotab-red:hover { background:#fbd9d7; border-color:#b91c1c; color:#a01616; }
.rotabs a.rotab-red.active { background:#c9a227; border-color:#a8861c; color:#16233a; }

/* Dashboard sections: press and hold (mouse or touch) to move, no grips */
.dashsec { position:relative; }
.dashsec.dragging { opacity:.45; }
.dashsec[data-dkey] { -webkit-touch-callout:none; }
/* While a press is in flight, kill text selection so Android's long-press
   selection can't hijack the gesture (added synchronously on press start). */
.dashsec.noselect, .dashsec.noselect * { user-select:none !important; -webkit-user-select:none !important; }
body.secdrag, body.secdrag * { user-select:none !important; -webkit-user-select:none !important; cursor:grabbing !important; }
.dashsec.dcard { display:flex; }
.dashsec.dcard > .card { flex:1; }
/* R.O. detail sections: press and hold (mouse or touch) to move, no grips */
.rosec { position:relative; }
.rosec.dragging { opacity:.45; }
.rosec[data-rosec] { -webkit-touch-callout:none; }
.rosec.noselect, .rosec.noselect * { user-select:none !important; -webkit-user-select:none !important; }
/* Home layout editor rows */
.hlrow { display:flex; align-items:center; gap:.5rem; padding:.4rem .2rem; border-bottom:1px solid var(--line); }
.hlrow:last-child { border-bottom:none; }
.hlrow.hlhead { font-weight:700; font-size:.82rem; color:var(--muted); }
.hlrow .hllabel { flex:1; min-width:0; }
.hlrow .hlrole { flex:0 0 4.6rem; text-align:center; }

/* Quick-action buttons: slide side to side to reorder, no grips. */
#quickactions [data-qkey] { cursor:grab; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
#quickactions .qdragging { opacity:.45; cursor:grabbing; }
/* Nav bar tab dragging */
.navlink[data-navkey] { cursor:grab; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.navlink.navdragging { opacity:.45; cursor:grabbing; }
/* Nav sections (2026-10-01): WORK / PEOPLE / SYSTEM group headers + color chips. */
.navsec { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--navmut);
  padding:.65rem .75rem .2rem; cursor:grab; user-select:none; -webkit-user-select:none; white-space:nowrap; }
.navsec:first-child { padding-top:.1rem; }
.navsec-you { cursor:default; }
.navsec.navdragging { opacity:.45; cursor:grabbing; }
.navico { display:inline-block; border-radius:.35rem; padding:.02rem .32rem; margin-right:.4rem; }
.navico.nv-work { background:rgba(96,165,250,.20); }
.navico.nv-people { background:rgba(74,222,128,.20); }
.navico.nv-system { background:rgba(251,191,36,.22); }
.navico.nv-you { background:rgba(148,163,184,.25); }
/* Top-bar and phone layouts: hide section headers, keep the chips. */
body:not(.sidenav) .navsec { display:none; }
@media (max-width:760px) { body.sidenav .navsec { display:none; } }
/* Nav editor: section header rows with whole-section ▲ ▼. */
.navsecrow { display:flex; align-items:center; gap:.6rem; padding:.55rem 0 .15rem; margin-top:.35rem;
  border-bottom:1px solid var(--line); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.navsecrow strong { font-weight:700; }

/* Recommendation part entry rows (R.O. detail add form) + parts list */
.recpart-row { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.35rem; }
.recpart-row input { width:auto; margin-top:0; }
.recpart-row input[name="partDesc"] { flex:1 1 10rem; }
.recpart-row input[name="partNum"] { flex:1 1 7rem; }
.recpart-row input[name="partQty"] { flex:0 1 4.5rem; }
.recparts { margin:.4rem 0 .2rem; padding-left:1.2rem; }
.recparts li { margin:.25rem 0; }

/* SOS voice assist */
.soslog { max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:.5rem; padding:.25rem 0 .75rem; }
.sosmsg { max-width:88%; padding:.55rem .8rem; border-radius:.9rem; line-height:1.45; font-size:.95rem; }
.sosmsg.you { align-self:flex-end; background:#1e3a5f; color:#fff; border-bottom-right-radius:.25rem; }
.sosmsg.bot { align-self:flex-start; background:#eef2f7; color:#16233a; border-bottom-left-radius:.25rem; }
.soschips { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
.sosrow { display:flex; gap:.5rem; align-items:center; }
.sosrow .input { flex:1; }
.sosmic { width:3.2rem; height:3.2rem; border-radius:50%; border:2px solid #1e3a5f; background:#fff; font-size:1.5rem; cursor:pointer; flex:none; }
.sosmic.listening { background:#b91c1c; border-color:#b91c1c; color:#fff; animation:sospulse 1s infinite; }
@keyframes sospulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
.sosbig { font-size:1.15rem; padding:.8rem 1.4rem; display:inline-block; margin-top:.2rem; }

/* Techs dropdown in the nav bar */
.navdrop { position:relative; display:inline-block; }
.navdrop > summary { list-style:none; cursor:pointer; }
.navdrop > summary::-webkit-details-marker { display:none; }
.navdrop > summary::marker { content:''; font-size:0; }
.navdrop .navmenu { display:none; position:absolute; top:calc(100% + .35rem); left:0; z-index:80; min-width:14rem; background:#fff; border:1px solid var(--line); border-radius:.6rem; box-shadow:0 12px 30px rgba(10,25,50,.22); padding:.35rem; }
.navdrop[open] .navmenu { display:block; }
.navmenu a { display:block; padding:.55rem .8rem; border-radius:.4rem; color:var(--txt); text-decoration:none; font-weight:600; white-space:nowrap; }
.navmenu a:hover { background:var(--panel); }
.navmenu a.navall { border-top:1px solid var(--line); margin-top:.25rem; color:var(--acc); }
/* Sidebar layout: expand in-flow (the sidebar scrolls, so no floating menu). */
body.sidenav .navdrop { display:block; }
body.sidenav .navdrop .navmenu { position:static; box-shadow:none; border:none; background:transparent; padding:.1rem 0 .3rem .8rem; min-width:0; }
body.sidenav .navdrop .navmenu a { color:var(--navlink); padding:.4rem .6rem; }
body.sidenav .navdrop .navmenu a:hover { background:var(--navhover-bg); color:var(--navhover-tx); }
body.sidenav .navdrop .navmenu a.navall { border-top:1px solid var(--navline); color:var(--navacc); }
@media (max-width:760px) {
  /* Phone strip scrolls sideways — the menu becomes a fixed panel under the tab (JS sets top). */
  .navdrop .navmenu, body.sidenav .navdrop .navmenu { position:fixed; left:.6rem; right:.6rem; top:7rem; min-width:0; background:#fff; border:1px solid var(--line); border-radius:.6rem; box-shadow:0 12px 30px rgba(10,25,50,.22); padding:.35rem; }
  .navdrop .navmenu a, body.sidenav .navdrop .navmenu a { color:var(--txt); }
  .navdrop .navmenu a:hover, body.sidenav .navdrop .navmenu a:hover { background:var(--panel); color:var(--txt); }
  .navdrop .navmenu a.navall, body.sidenav .navdrop .navmenu a.navall { color:var(--acc); border-top:1px solid var(--line); }
}

/* Customer online booking (/book) */
.svccards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.5rem; margin:.5rem 0; }
.svccard { display:flex; gap:.6rem; align-items:flex-start; border:1px solid #d7dee9; border-radius:10px; padding:.7rem .8rem; cursor:pointer; background:#fff; }
.svccard input { width:auto; margin-top:.2rem; }
.svccard:has(input:checked) { border-color:#16294d; box-shadow:0 0 0 2px #16294d33; }
.chiprow { display:flex; flex-wrap:wrap; gap:.45rem; }
.chip { border:1px solid #d7dee9; background:#fff; border-radius:999px; padding:.45rem .9rem; cursor:pointer; font-size:.95rem; }
.chip.sel { background:#16294d; color:#fff; border-color:#16294d; }
.chip.taken { opacity:.35; text-decoration:line-through; cursor:not-allowed; }
.maintline { display:flex; gap:.6rem; align-items:flex-start; border:1px solid #e3e8f0; border-radius:8px; padding:.6rem .7rem; margin:.4rem 0; cursor:pointer; background:#fbfcfe; }
.heroesline { display:flex; gap:.6rem; align-items:flex-start; border:1px dashed #b98a1d; border-radius:8px; padding:.7rem .8rem; background:#fffdf4; cursor:pointer; }

/* Pinned nav items (Tech Reports, My techs): fixed at the bottom of the nav */
.navpinned { border-top:1px solid var(--line); border-radius:0; }
body.sidenav .navpinned { border-top-color:rgba(255,255,255,.15); }
/* Dealership pay-type box (demo): always-visible W / CP / INT selector */
.paytypebox { display:inline-flex; align-items:center; gap:.4rem; border:2px solid #b9c4d6; border-radius:.6rem; padding:.2rem .5rem; background:#fff; vertical-align:middle; }
.paytypebox .inlineform { display:inline-flex; gap:.25rem; margin:0; }
.ptopt { display:inline-flex; align-items:center; gap:.25rem; cursor:pointer; padding:.25rem .5rem; border-radius:.4rem; font-weight:700; font-size:.85rem; border:1px solid transparent; }
.ptopt:hover { background:#eef2f8; }
.ptopt.on { background:#e3ecfd; border-color:#1a73e8; }
.ptopt input { accent-color:#1a73e8; margin:0; }

/* Live-update toasts (2026-09-28): pop in when notifications arrive — no refresh needed. */
#liveToasts { position:fixed; right:.8rem; bottom:.8rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; max-width:min(92vw, 360px); }
.liveToast { display:block; background:#16294d; color:#fff; border-radius:.7rem; padding:.7rem .9rem; text-decoration:none; box-shadow:0 6px 24px rgba(0,0,0,.35); animation:toastIn .35s ease-out; border-left:4px solid #4caf50; }
.liveToast b { display:block; font-size:.92rem; margin-bottom:.15rem; }
.liveToast span { font-size:.82rem; opacity:.9; }
.liveToast.out { opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s; }
.liveToast { position:relative; padding-right:2.4rem; }
.liveToast .tx { position:absolute; top:.3rem; right:.4rem; border:0; background:transparent; color:#fff; opacity:.7; font-size:.95rem; line-height:1; cursor:pointer; padding:.25rem .4rem; }
.liveToast .tx:hover { opacity:1; }
.liveToast .tacts { display:flex; gap:.4rem; margin-top:.45rem; }
.liveToast .tact { border:0; border-radius:.45rem; padding:.35rem .7rem; font-size:.82rem; font-weight:600; cursor:pointer; background:#4caf50; color:#fff; }
.liveToast .tact:hover { filter:brightness(1.1); }
.liveToast .tact:disabled { opacity:.6; cursor:default; }
.mutetoggle { cursor:pointer; margin-left:.25rem; font-size:.85em; }
@keyframes toastIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
/* Flash highlight when an R.O. badge updates live. */
.roFlash .badge, select.roFlash { animation:roFlash 1.6s ease-out; }
@keyframes roFlash { 0% { box-shadow:0 0 0 3px #ffd54f; } 100% { box-shadow:0 0 0 0 transparent; } }

/* ---------- Tab strips (2026-09-29, Justin: tabs makeover — fit + colors) ---------- */
.tabs { display:flex; gap:.3rem; overflow-x:auto; padding:.3rem; margin:.7rem 0; background:var(--panel); border:1px solid var(--line); border-radius:.85rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .95rem; border-radius:.6rem; font-size:.9rem; font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap; border:1px solid transparent; background:transparent; cursor:pointer; font-family:inherit; }
.tab:hover { color:var(--txt); background:#eef2f8; }
.tab.on { background:var(--topbg); color:#fff; font-weight:700; box-shadow:0 1px 3px rgba(22,41,77,.35); }
/* Segmented period control */
.seg { display:inline-flex; gap:.15rem; background:#dbe2ed; border-radius:.7rem; padding:.22rem; }
.seg a { padding:.42rem .95rem; border-radius:.5rem; font-size:.88rem; font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap; }
.seg a:hover { color:var(--txt); }
.seg a.on { background:var(--panel); color:var(--topbg); font-weight:700; box-shadow:0 1px 2px rgba(22,41,77,.25); }
/* Ghost button: light companion to segmented controls */
.btn.ghost { background:var(--panel); border-color:var(--line); color:var(--txt); }

/* ===== Appearance themes (2026-10-01, Justin) — 12 themes incl. "Current" (= :root defaults).
   Per-user, per-device (phone/desktop) via body[data-theme]. Buttons recolor through
   --newbtn/--expr/--lock so the dashboard's yellow/amber/green language survives. ===== */
[data-theme="midnight"] { --bg:#0d1117; --topbg:#1c2530; --panel:#151b24; --line:#26303d; --txt:#e6ebf2; --muted:#8b98ab; --acc:#58a6ff; --acc-d:#1f6feb; --acc-tx:#ffffff; --ok:#3fb950; --danger:#f85149; --inputbg:#10151c; --flashbg:#12331f;
--navbg:#0b0f16; --navtx:#ffffff; --navlink:#c3cfe4; --navmut:#7d8ca3; --navacc:#9fc1ff; --navhover-bg:rgba(255,255,255,.1); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.12);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#1a1a1a; --expr:#c07f13; --expr-d:#96650f; --lock:#3fb950; --lock-d:#2e8b3a;
--cardbg:#151b24; --chip-work:#1c2b3a; --chip-people:#2b2340; --chip-system:#23382b; --chip-you:#3a2f16; }
[data-theme="copper"] { --bg:#14100c; --topbg:#3a2c1c; --panel:#1f1a14; --line:#3a2f22; --txt:#f0e8dc; --muted:#a89a85; --acc:#e09a4e; --acc-d:#b06f2c; --acc-tx:#241505; --ok:#7fc96b; --danger:#e5484d; --inputbg:#100d09; --flashbg:#2c3a1e;
--navbg:#171310; --navtx:#f5ead9; --navlink:#d8c9b4; --navmut:#8a7a63; --navacc:#e8b96e; --navhover-bg:rgba(224,154,78,.16); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.1);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#1a1a1a; --expr:#e09a4e; --expr-d:#b06f2c; --lock:#7fc96b; --lock-d:#5aa34c;
--cardbg:#1f1a14; --chip-work:#2a2620; --chip-people:#33241f; --chip-system:#24301f; --chip-you:#3d2f16; }
[data-theme="arctic"] { --bg:#eaf2f8; --topbg:#0c4a6e; --panel:#ffffff; --line:#cfdfe9; --txt:#0f2a3d; --muted:#5b7a90; --acc:#0284c7; --acc-d:#0369a1; --acc-tx:#ffffff; --ok:#16a34a; --danger:#dc2626; --inputbg:#f4f9fc; --flashbg:#d1f0dc;
--navbg:#ffffff; --navtx:#0f2a3d; --navlink:#33475c; --navmut:#8aa5b8; --navacc:#0369a1; --navhover-bg:rgba(2,132,199,.1); --navhover-tx:#0c4a6e; --navline:rgba(15,42,61,.12);
--newbtn:#fbbf24; --newbtn-d:#d97706; --newbtn-tx:#1c1917; --expr:#ea580c; --expr-d:#c2410c; --lock:#16a34a; --lock-d:#15803d;
--cardbg:#ffffff; --chip-work:#e0eefb; --chip-people:#ece4fa; --chip-system:#ddf2e2; --chip-you:#fdf3d7; }
[data-theme="highvis"] { --bg:#faf7f2; --topbg:#292524; --panel:#ffffff; --line:#e5ded2; --txt:#1c1917; --muted:#78716c; --acc:#ea580c; --acc-d:#c2410c; --acc-tx:#ffffff; --ok:#16a34a; --danger:#dc2626; --inputbg:#faf8f4; --flashbg:#d9f2e2;
--navbg:#1a1a1a; --navtx:#faf7f2; --navlink:#e7e5e4; --navmut:#a8a29e; --navacc:#fdba74; --navhover-bg:rgba(234,88,12,.28); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.15);
--newbtn:#facc15; --newbtn-d:#ca8a04; --newbtn-tx:#1c1917; --expr:#ea580c; --expr-d:#c2410c; --lock:#16a34a; --lock-d:#15803d;
--cardbg:#ffffff; --chip-work:#fde8d8; --chip-people:#f3e8fd; --chip-system:#dcf2e3; --chip-you:#fef6d8; }
[data-theme="forest"] { --bg:#eef4ec; --topbg:#1c2e1f; --panel:#ffffff; --line:#d4e0d0; --txt:#16281a; --muted:#5f7a63; --acc:#2f7d3b; --acc-d:#1f5c28; --acc-tx:#ffffff; --ok:#2f9e44; --danger:#d92d20; --inputbg:#f5f8f3; --flashbg:#d3f0da;
--navbg:#1c2e1f; --navtx:#f0f5ee; --navlink:#cfdccf; --navmut:#8aa58e; --navacc:#a7d8b2; --navhover-bg:rgba(255,255,255,.12); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.14);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#16281a; --expr:#b7791f; --expr-d:#92600f; --lock:#2f9e44; --lock-d:#237a33;
--cardbg:#ffffff; --chip-work:#dcebfd; --chip-people:#e9e2f8; --chip-system:#d9f0dd; --chip-you:#fdf3d0; }
[data-theme="crimson"] { --bg:#140a0c; --topbg:#4a1218; --panel:#241114; --line:#3d1e23; --txt:#f5e6e6; --muted:#b08d8d; --acc:#e5484d; --acc-d:#b3272f; --acc-tx:#ffffff; --ok:#46a758; --danger:#ff6369; --inputbg:#100708; --flashbg:#173522;
--navbg:#1d0d10; --navtx:#f7e8e8; --navlink:#e3c4c4; --navmut:#96707a; --navacc:#f0a3a8; --navhover-bg:rgba(229,72,77,.16); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.1);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#1a1a1a; --expr:#e8833a; --expr-d:#b25f22; --lock:#46a758; --lock-d:#34804a;
--cardbg:#241114; --chip-work:#33242e; --chip-people:#3a2030; --chip-system:#1f3826; --chip-you:#443310; }
[data-theme="royal"] { --bg:#120e1e; --topbg:#2e1a5e; --panel:#1d1733; --line:#2e2547; --txt:#ece7f7; --muted:#9a8fc0; --acc:#8b5cf6; --acc-d:#6d28d9; --acc-tx:#ffffff; --ok:#34d399; --danger:#f87171; --inputbg:#0e0a18; --flashbg:#14352a;
--navbg:#150f2e; --navtx:#efeafb; --navlink:#d3cbf0; --navmut:#7e719e; --navacc:#b79bff; --navhover-bg:rgba(139,92,246,.18); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.12);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#1a1a1a; --expr:#d97706; --expr-d:#b45309; --lock:#34d399; --lock-d:#059669;
--cardbg:#1d1733; --chip-work:#262040; --chip-people:#322457; --chip-system:#1e3a2e; --chip-you:#453512; }
[data-theme="ocean"] { --bg:#0a1a20; --topbg:#134e5e; --panel:#0f2830; --line:#1e3d46; --txt:#e0f0f2; --muted:#7fa3ac; --acc:#0891b2; --acc-d:#0e7490; --acc-tx:#ffffff; --ok:#34d399; --danger:#f87171; --inputbg:#071318; --flashbg:#123a2e;
--navbg:#082026; --navtx:#e6f4f5; --navlink:#bcd9de; --navmut:#5f8891; --navacc:#7dd3e8; --navhover-bg:rgba(34,211,238,.14); --navhover-tx:#ffffff; --navline:rgba(255,255,255,.1);
--newbtn:#f5c518; --newbtn-d:#c9a227; --newbtn-tx:#0a1a20; --expr:#fb923c; --expr-d:#ea580c; --lock:#34d399; --lock-d:#059669;
--cardbg:#0f2830; --chip-work:#142e3d; --chip-people:#232a4a; --chip-system:#14362e; --chip-you:#423512; }
[data-theme="mono"] { --bg:#f4f4f4; --topbg:#262626; --panel:#ffffff; --line:#d4d4d4; --txt:#171717; --muted:#737373; --acc:#404040; --acc-d:#171717; --acc-tx:#ffffff; --ok:#166534; --danger:#b91c1c; --inputbg:#fafafa; --flashbg:#dcfce7;
--navbg:#ffffff; --navtx:#171717; --navlink:#404040; --navmut:#a3a3a3; --navacc:#404040; --navhover-bg:rgba(0,0,0,.07); --navhover-tx:#000000; --navline:rgba(0,0,0,.1);
--newbtn:#171717; --newbtn-d:#000000; --newbtn-tx:#ffffff; --expr:#525252; --expr-d:#262626; --lock:#166534; --lock-d:#14532d;
--cardbg:#ffffff; --chip-work:#e7e7e7; --chip-people:#e7e7e7; --chip-system:#e7e7e7; --chip-you:#e7e7e7; }
[data-theme="blush"] { --bg:#fdf3f4; --topbg:#8e2f48; --panel:#ffffff; --line:#f0d5da; --txt:#4a2330; --muted:#a07a86; --acc:#db4f6d; --acc-d:#b23a54; --acc-tx:#ffffff; --ok:#16a34a; --danger:#dc2626; --inputbg:#fdf8f9; --flashbg:#d9f2e2;
--navbg:#ffffff; --navtx:#4a2330; --navlink:#6b4553; --navmut:#c49aa5; --navacc:#b23a54; --navhover-bg:rgba(219,79,109,.1); --navhover-tx:#8e2f48; --navline:rgba(74,35,48,.1);
--newbtn:#fbbf24; --newbtn-d:#d97706; --newbtn-tx:#4a2330; --expr:#ea7a3c; --expr-d:#c25f22; --lock:#16a34a; --lock-d:#15803d;
--cardbg:#ffffff; --chip-work:#fbe3ea; --chip-people:#f3e2f7; --chip-system:#dcf2e3; --chip-you:#fef3d8; }
[data-theme="cyber"] { --bg:#0a0c05; --topbg:#3f6212; --panel:#111507; --line:#2a3312; --txt:#eef7d8; --muted:#93a06b; --acc:#65a30d; --acc-d:#4d7c0f; --acc-tx:#f7fee7; --ok:#4ade80; --danger:#fb7185; --inputbg:#070903; --flashbg:#1a2e12;
--navbg:#0a0f02; --navtx:#ecfccb; --navlink:#cdd9a8; --navmut:#6b7a45; --navacc:#d9f99d; --navhover-bg:rgba(163,230,53,.14); --navhover-tx:#ecfccb; --navline:rgba(163,230,53,.16);
--newbtn:#a3e635; --newbtn-d:#65a30d; --newbtn-tx:#0a0c05; --expr:#fb923c; --expr-d:#ea580c; --lock:#4ade80; --lock-d:#16a34a;
--cardbg:#111507; --chip-work:#1c2410; --chip-people:#241a3d; --chip-system:#14301c; --chip-you:#2e2a0e; }

/* ===== Compact density (2026-10-01) ===== */
body.compact { font-size:14px; }
body.compact .wrap { padding:.7rem .7rem 2.5rem; }
body.compact .top { padding:.45rem .7rem; }
body.compact .top .brand { margin-bottom:.25rem; }
body.compact .top .navlink, body.compact.sidenav .top .navlink { padding:.4rem .6rem; font-size:.85rem; }
body.compact .btn { padding:.42rem .7rem; font-size:.86rem; }
body.compact .card { padding:.6rem; min-height:4.2rem; }
body.compact .card .big { font-size:1.35rem; }
body.compact .panel { padding:.65rem; margin-bottom:.65rem; }
body.compact h1 { font-size:1.15rem; }
body.compact h2 { margin:1rem 0 .5rem; }
body.compact .flash { padding:.5rem .7rem; margin:.5rem 0; }
body.compact th, body.compact td { padding:.35rem .5rem; }

/* ===== Sharp corners (2026-10-01) ===== */
body.sharp .card, body.sharp .panel, body.sharp .btn, body.sharp .form input, body.sharp .form select, body.sharp .form textarea, body.sharp .navlink, body.sharp .tab, body.sharp .seg, body.sharp .seg a, body.sharp .badge, body.sharp .flash, body.sharp .err, body.sharp .modal, body.sharp .setchip, body.sharp .navdrop .navmenu { border-radius:0; }

/* ===== Voice inspection (2026-10-01) ===== */
.voicetranscript{border:1px dashed #888;border-radius:8px;padding:.5rem .7rem;margin:.5rem 0;min-height:2.2em;font-style:italic}
.voicerow{padding:.4rem 0;border-top:1px solid rgba(136,136,136,.35)}
#voicebtn.listening{background:#b91c1c;border-color:#b91c1c;color:#fff}

/* ===== Sliding toggle switch (2026-10-01: schedule lane mode) ===== */
.switch{position:relative;display:inline-block;width:54px;height:28px;flex:none;vertical-align:middle}
.switch input{opacity:0;width:0;height:0;margin:0}
.switch .knob{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:background .2s;cursor:pointer}
.switch .knob:before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.switch input:checked + .knob{background:#16a34a}
.switch input:checked + .knob:before{transform:translateX(26px)}