/* SparkQuote — Stacked Out brand: charcoal ground, electric yellow #ffdd33 (action/money),
   cyan #3fe3ff (incoming/new), signature gradient on hero moments only */
/* Brand type — self-hosted (ITF Free Font Licence via Fontshare) */
@font-face{ font-family:'Clash Display'; src:url('../fonts/clash-display-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Clash Display'; src:url('../fonts/clash-display-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Clash Display'; src:url('../fonts/clash-display-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('../fonts/satoshi-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('../fonts/satoshi-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('../fonts/satoshi-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
:root{
  --bg:#08090b; --bg2:#0d0f13; --panel:#14161c; --panel2:#1c1f27;
  --line:#272b33; --text:#f5f6f8; --muted:#9aa1ab;
  --amber:#ffdd33; --amber-dk:#c7a70a; --green:#34d399; --red:#f87171;
  --radius:12px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text);
  font:14px/1.5 'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
}
a{ color:var(--amber); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1{ font-size:22px; margin:0; letter-spacing:-.3px; }
h2{ font-size:17px; } h3{ font-size:14px; margin:0 0 10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
.muted{ color:var(--muted); } .small{ font-size:12px; text-transform:none; letter-spacing:0; }

.shell{ display:flex; min-height:100vh; }

/* ---------- sidebar ---------- */
.sidebar{
  width:210px; flex-shrink:0; background:var(--bg2); border-right:1px solid var(--line);
  padding:20px 12px; display:flex; flex-direction:column; gap:18px;
  position:sticky; top:0; height:100vh;
}
.logo{ font-size:19px; font-weight:800; letter-spacing:-.5px; padding:0 8px; }
.logo em{ color:var(--amber); font-style:normal; }
.bolt{ }
.bolt.big{ font-size:34px; }
nav{ display:flex; flex-direction:column; gap:4px; }
.nav-btn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; color:var(--muted); font:inherit; font-weight:600;
  padding:10px 12px; border-radius:8px; cursor:pointer;
}
.nav-btn:hover{ background:var(--panel); color:var(--text); }
.nav-btn.active{ background:var(--panel2); color:var(--amber); }
.sidebar-foot{ margin-top:auto; font-size:11px; color:var(--muted); padding:0 8px; line-height:1.6; }

/* ---------- mobile menu ---------- */
.menu-btn{
  display:none; position:fixed; top:12px; left:12px; z-index:120;
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:10px; font-size:20px; padding:8px 13px; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.menu-backdrop{
  display:none; position:fixed; inset:0; background:rgba(4,5,7,.6); z-index:98;
}
@media (max-width: 860px){
  .menu-btn{ display:block; }
  .menu-backdrop.open{ display:block; }
  .sidebar{
    position:fixed; left:0; top:0; z-index:99; height:100vh; height:100dvh;
    transform:translateX(-110%); transition:transform .22s ease;
    box-shadow:8px 0 32px rgba(0,0,0,.5); width:240px;
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar .logo{ padding-left:60px; }
  main{ padding:16px 14px 90px; }
  .view-head{ padding-left:60px; min-height:44px; }
  .view-head h1{ font-size:19px; }
  .head-actions .btn{ padding:7px 10px; font-size:12px; }
  .job-row{ flex-direction:column; }
  .job-btns{ flex-direction:row; }
  .job-btns .btn{ flex:1; }
  .line{ flex-direction:column; }
  .line-figures{ flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; text-align:left; }
  .room-actions{ flex-direction:column; align-items:stretch; }
  .ai-panel{ right:10px; left:10px; width:auto; bottom:76px; }
  .ai-fab{ right:14px; bottom:14px; padding:11px 16px; }
  .cq-doc{ padding:20px 16px; }
  .modal{ padding:10px; }
  table.mats th:nth-child(2), table.mats td:nth-child(2){ display:none; } /* hide brand col on phones */
}

/* ---------- main / views ---------- */
main{ flex:1; padding:24px 28px 60px; min-width:0; }
.view{ display:none; } .view.active{ display:block; }
.view-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.head-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.lead{ color:var(--muted); max-width:720px; margin-top:-6px; }
.section-h{ margin:22px 0 10px; }

/* ---------- buttons & inputs ---------- */
.btn{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  font:inherit; font-weight:600; padding:8px 14px; border-radius:8px; cursor:pointer;
}
.btn:hover{ border-color:var(--amber); }
.btn-amber{ background:var(--amber); border-color:var(--amber); color:#08090b; }
.btn-amber:hover{ background:#ffe566; }
.btn.small{ padding:4px 10px; font-size:12px; }
.btn.full{ width:100%; margin-top:14px; }
.btn.tall{ align-self:stretch; }
.icon-btn{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px;
  padding:4px 6px; border-radius:6px;
}
.icon-btn:hover{ color:var(--red); background:rgba(248,113,113,.1); }
input,select,textarea{
  background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; font:inherit; width:100%;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--amber); }
input[type=number]{ width:80px; }
input[type=checkbox]{ width:auto; accent-color:var(--amber); transform:scale(1.2); }
label{ display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); font-weight:600; }
.suffix{ display:flex; align-items:center; gap:6px; }
.suffix span{ color:var(--muted); }
.suffix.tight input{ width:75px; }
.vat-toggle{ flex-direction:row; align-items:center; gap:10px; }

/* ---------- describe job ---------- */
.job-box{
  background:linear-gradient(135deg, var(--panel), var(--panel2));
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:14px;
}
.job-label{ margin-bottom:8px; color:var(--amber); font-size:13px; }
.job-row{ display:flex; gap:10px; }
.job-row textarea{ flex:1; resize:vertical; }
.job-note{ margin-top:10px; padding:10px 12px; border-radius:8px; font-size:13px; }
.job-note.ok{ background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.35); }
.job-note.warn{ background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.3); }

/* ---------- quick add ---------- */
.quick-add{ position:relative; margin-bottom:16px; }
.quick-add input{ padding:11px 14px; font-size:14px; }
.quick-results{
  display:none; position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  max-height:380px; overflow:auto; box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.quick-results.open{ display:block; }
.qr-head{ padding:8px 14px 4px; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }
.qr-item{ padding:9px 14px; cursor:pointer; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.qr-item:hover{ background:var(--panel); }
.qr-badge{ font-size:10px; font-weight:800; background:var(--line); border-radius:4px; padding:2px 5px; color:var(--muted); }
.qr-badge.kit{ background:var(--amber); color:#08090b; }
.qr-sub{ font-size:12px; color:var(--muted); }
.qr-none{ padding:14px; color:var(--muted); }

/* ---------- quote layout ---------- */
.quote-layout{ display:grid; grid-template-columns:1fr 320px; gap:16px; align-items:start; }
@media (max-width:1000px){ .quote-layout{ grid-template-columns:1fr; } }
.quote-lines{ display:flex; flex-direction:column; gap:10px; }
.empty{
  border:2px dashed var(--line); border-radius:var(--radius); text-align:center;
  padding:44px 20px; color:var(--muted);
}
.empty-icon{ font-size:34px; margin-bottom:6px; }

.line{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; display:flex; justify-content:space-between; gap:14px;
}
.line-main{ flex:1; min-width:0; }
.line-title{ font-weight:700; margin-bottom:8px; }
.chip{ font-size:11px; font-weight:600; color:var(--muted); background:var(--bg); border:1px solid var(--line); padding:1px 7px; border-radius:20px; margin-left:6px; }
.chip-cat{ color:var(--amber); }
.line-controls{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.line-controls select{ width:auto; max-width:300px; }
.line-unit{ font-size:12px; color:var(--muted); padding-bottom:8px; }
.line-figures{
  display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0;
  font-size:12px; color:var(--muted); text-align:right;
}
.line-figures strong{ color:var(--text); font-size:14px; }
.line-mats{ margin-top:10px; font-size:12px; }
.line-mats summary{ cursor:pointer; color:var(--muted); }
.line-mats table{ width:100%; border-collapse:collapse; margin-top:8px; }
.line-mats th,.line-mats td{ text-align:left; padding:4px 8px; border-bottom:1px solid var(--line); }
.line-mats th{ color:var(--muted); font-size:11px; text-transform:uppercase; }

/* ---------- side panels ---------- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; }
.rates-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tot-row{ display:flex; justify-content:space-between; padding:5px 0; font-size:13px; }
.tot-row.muted{ color:var(--muted); }
.tot-row.small{ font-size:12px; }
.tot-row.subtotal{ border-top:1px solid var(--line); margin-top:6px; padding-top:10px; font-weight:700; }
.tot-row.grand{ font-size:17px; font-weight:800; color:var(--amber); border-top:2px solid var(--amber); margin-top:6px; padding-top:10px; }

/* ---------- kits ---------- */
.kit-cat{ margin:26px 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--amber); }
.kit-count{ background:var(--panel2); color:var(--muted); border-radius:20px; padding:1px 9px; font-size:11px; margin-left:6px; letter-spacing:0; }
.kit-ico{ margin-right:7px; }
.kit-card{ transition:border-color .12s ease, transform .12s ease; }
.kit-card:hover{ border-color:var(--amber-dk); transform:translateY(-1px); }
.kit-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
.kit-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; flex-direction:column; gap:10px;
}
.kit-card.bundle{ border-color:var(--amber-dk); }
.kit-name{ font-weight:700; }
.kit-desc{ font-size:12px; color:var(--muted); flex:1; }
.kit-actions{ display:flex; gap:8px; align-items:center; }
.kit-actions input{ width:64px; }

/* ---------- materials ---------- */
.mat-tools input{ padding:11px 14px; margin-bottom:12px; }
.mat-cats{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.chip-btn{
  background:var(--panel); color:var(--muted); border:1px solid var(--line);
  border-radius:20px; padding:5px 12px; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
}
.chip-btn.on{ background:var(--amber); color:#08090b; border-color:var(--amber); }
table.mats{ width:100%; border-collapse:collapse; background:var(--panel); border-radius:var(--radius); overflow:hidden; }
table.mats th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); background:var(--panel2);
}
table.mats td{ padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.mats td.links a{ margin-right:8px; font-size:12px; }
.ov-reset{ background:none; border:none; color:var(--amber); cursor:pointer; font-size:14px; }

/* ---------- saved ---------- */
.saved-row{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 16px; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:12px; flex-wrap:wrap;
}
.saved-actions{ display:flex; gap:10px; align-items:center; }
.saved-total{ font-weight:800; color:var(--amber); }

/* ---------- settings ---------- */
.settings-form{ max-width:760px; }
.settings-form h3{ margin-top:26px; }
.set-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:14px; }
label.wide{ margin-bottom:14px; }
.set-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- modals ---------- */
.modal{
  display:none; position:fixed; inset:0; background:rgba(4,5,7,.75); z-index:100;
  padding:24px; overflow:auto;
}
.modal.open{ display:flex; align-items:flex-start; justify-content:center; }
.modal-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:24px; width:100%; max-width:440px; margin-top:4vh;
  display:flex; flex-direction:column; gap:12px;
}
.modal-card.wide{ max-width:820px; background:var(--bg2); }
.ob-head{ text-align:center; }
.ob-head h2{ margin:8px 0 4px; }
.ob-head p{ color:var(--muted); margin:0; font-size:13px; }
.ob-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-toolbar{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
.cq-fields{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex:1; }
.cq-fields input{ width:200px; }

/* ---------- customer quote document ---------- */
.cq-doc{
  background:#fff; color:#16181d; border-radius:10px; padding:36px 40px;
  font-size:13px; line-height:1.55;
}
.cq-head{ display:flex; justify-content:space-between; gap:20px; border-bottom:3px solid #ffdd33; padding-bottom:16px; margin-bottom:16px; }
.cq-biz{ font-size:21px; font-weight:800; letter-spacing:-.3px; }
.cq-contact{ color:#5c636d; font-size:12px; margin-top:4px; }
.cq-meta{ text-align:right; color:#5c636d; font-size:12px; }
.cq-meta strong{ color:#16181d; font-size:14px; letter-spacing:2px; }
.cq-customer{ margin-bottom:16px; }
.cq-lab{ color:#5c636d; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.6px; }
.cq-addr{ color:#5c636d; white-space:pre-line; }
.cq-table{ width:100%; border-collapse:collapse; margin-bottom:18px; }
.cq-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#5c636d; border-bottom:2px solid #e6e8eb; padding:8px 6px; }
.cq-table td{ padding:9px 6px; border-bottom:1px solid #eef0f2; vertical-align:top; }
.cq-table .r{ text-align:right; }
.cq-sub{ font-size:11px; color:#9aa1ab; }
.cq-totals{ margin-left:auto; width:260px; }
.cq-totals > div{ display:flex; justify-content:space-between; padding:4px 0; }
.cq-grand{ font-weight:800; font-size:16px; border-top:2px solid #16181d; margin-top:6px; padding-top:8px !important; }
.cq-terms{ margin-top:26px; padding-top:14px; border-top:1px solid #e6e8eb; color:#9aa1ab; font-size:11px; }

/* ---------- rooms ---------- */
.btn-select{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  font:inherit; font-weight:600; padding:8px 10px; border-radius:8px; cursor:pointer; width:auto;
}
.btn-select:hover{ border-color:var(--amber); }
.room-empty{
  border:1px dashed var(--line); border-radius:10px; padding:14px 16px;
  color:var(--muted); font-size:13px; margin:6px 0;
}
.room-block{ border-radius:12px; }
.room-block.drag-over{ outline:2px dashed var(--amber); outline-offset:4px; }
.drag-handle{ cursor:grab; color:var(--muted); margin-right:2px; user-select:none; }
.room-head[draggable]{ cursor:grab; }
.room-head[draggable]:active{ cursor:grabbing; }
.room-tots .icon-btn{ margin-left:2px; }
.add-room-row.top{ margin:0 0 12px; }
.room-actions{ display:flex; gap:10px; align-items:center; margin:6px 0 4px; }
.room-actions .btn{ flex-shrink:0; }
.room-actions .quick-add{ flex:1; margin:0; }
.add-room-row{ margin-top:16px; }
.room-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.fin-opt{ font-size:14px; padding:10px 16px; }
.room-custom{ display:flex; gap:8px; }
.bp-list{ max-height:62vh; overflow:auto; display:flex; flex-direction:column; gap:6px; padding-right:4px; }
.bp-cat{ margin:10px 0 2px; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--amber); font-weight:800; }
.bp-row{
  display:grid; grid-template-columns:1fr 230px 60px auto; gap:10px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:9px 12px;
}
@media (max-width:760px){ .bp-row{ grid-template-columns:1fr; } }
.bp-name{ font-weight:700; font-size:13px; }
.bp-desc{ font-weight:400; font-size:11px; color:var(--muted); }
.bp-row input{ width:60px; }
.btn.added{ background:var(--green); border-color:var(--green); color:#06281c; }
.room-qa{ margin:6px 0 4px; }
.room-qa input{ padding:8px 12px; font-size:13px; border-style:dashed; background:transparent; }
.room-qa input:focus{ background:var(--bg); border-style:solid; }
.room-tots .icon-btn{ margin-left:6px; }
.room-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  margin:26px 0 6px; padding:11px 14px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--amber) 16%, var(--panel2)), var(--panel2) 65%);
  border-left:5px solid var(--amber); border-radius:8px;
  border-top:1px solid color-mix(in srgb, var(--amber) 35%, var(--line));
}
.room-head:first-child{ margin-top:0; }
.room-name{ font-weight:800; font-size:17px; letter-spacing:.4px; color:var(--amber); }
.room-tots{ font-size:12px; color:var(--muted); }
.room-sel{ max-width:160px; }
.cq-room td{
  background:#f4f5f7; font-weight:800; font-size:11px; text-transform:uppercase;
  letter-spacing:1.2px; color:#16181d; padding:7px 6px !important;
}

/* ---------- voice note ---------- */
.job-btns{ display:flex; flex-direction:column; gap:8px; justify-content:stretch; }
.job-btns .btn{ white-space:nowrap; }
.btn.mic.rec{
  background:rgba(248,113,113,.15); border-color:var(--red); color:var(--red);
  animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(248,113,113,.35);} 50%{ box-shadow:0 0 0 7px rgba(248,113,113,0);} }

/* ---------- optional (qty 0) materials ---------- */
tr.zero-row td{ opacity:.5; }
tr.zero-row input.mini{ border-style:dashed; opacity:1; }
.chip-opt{ color:var(--amber); border-color:var(--amber-dk); }
.line-desc{ margin-top:10px; }
.line-desc label{ margin-bottom:5px; }
.line-desc textarea{ font-size:12px; }

/* ---------- category separators (materials) ---------- */
tr.cat-sep td{
  background:var(--panel2); border-top:2px solid var(--amber-dk); border-bottom:1px solid var(--line);
  padding:9px 12px !important;
}
tr.cat-sep span{
  color:var(--amber); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:1.2px;
}
tr.cat-sep em{ float:right; font-style:normal; font-size:11px; color:var(--muted); }

/* ---------- editable recipes ---------- */
input.mini{ width:70px; padding:4px 8px; font-size:12px; }
.kit-edit{ font-size:12px; }
.kit-edit summary{ cursor:pointer; color:var(--muted); font-weight:600; }
.kit-edit summary:hover{ color:var(--amber); }
.ke-table{ width:100%; border-collapse:collapse; margin-top:10px; }
.ke-table th{ text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); padding:4px 6px; border-bottom:1px solid var(--line); }
.ke-table td{ padding:4px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ke-foot{ display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.ke-hours{ flex-direction:row; align-items:center; gap:8px; }
.ke-edited{ color:var(--amber); font-size:11px; font-weight:700; }
tr.add-row td{ padding:6px; }
tr.add-row input{ font-size:12px; padding:6px 10px; border-style:dashed; }
tr.add-row input::placeholder{ color:var(--muted); }
.line-mats td .suffix.tight input{ width:70px; }

/* ---------- essentials batch ---------- */
.test-block{
  margin-top:14px; padding:12px; border:1px dashed var(--amber-dk); border-radius:10px;
}
.test-title{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--amber); margin-bottom:10px; }
.more-rates{ margin-top:12px; font-size:12px; }
.more-rates summary{ cursor:pointer; color:var(--muted); font-weight:700; margin-bottom:10px; }
.more-rates summary:hover{ color:var(--amber); }
tr.cert-row td{ background:rgba(255,221,51,.04); }
.chip-cert{ color:var(--green); border-color:rgba(52,211,153,.4); }
.status-sel{ width:auto; font-size:12px; padding:4px 8px; font-weight:700; }
.status-sel.st-accepted{ color:var(--green); border-color:rgba(52,211,153,.5); }
.status-sel.st-sent{ color:var(--amber); border-color:var(--amber-dk); }
.status-sel.st-declined{ color:var(--red); border-color:rgba(248,113,113,.4); }
.logo-row{ display:flex; align-items:center; gap:12px; margin:10px 0 14px; }
.logo-prev{ max-height:56px; max-width:200px; background:#fff; border-radius:8px; padding:6px; }
.cq-head-left{ display:flex; align-items:center; gap:16px; }
.cq-logo{ max-height:64px; max-width:180px; }
.cq-section{ margin-top:14px; font-size:12px; color:#3f444d; }
.cq-section .cq-lab{ display:block; margin-bottom:2px; }

/* ---------- business costs ---------- */
.cost-summary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:24px; }
.cost-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.cost-card.amber{ border-color:var(--amber-dk); }
.cost-card.green{ border-color:rgba(52,211,153,.5); }
.cc-label{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; margin-bottom:6px; }
.cc-label input.mini{ width:52px; padding:2px 6px; }
.cc-val{ font-size:22px; font-weight:800; letter-spacing:-.4px; }
.cost-card.amber .cc-val{ color:var(--amber); }
.cost-card.green .cc-val{ color:var(--green); }
.cc-sub{ font-size:11px; color:var(--muted); margin-top:4px; }
.cc-sub .ok{ color:var(--green); } .cc-sub .warn{ color:var(--amber); } .cc-sub .bad{ color:var(--red); }
.staff-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; margin-bottom:10px; }
.staff-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.staff-head{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.staff-name{ font-weight:800; width:auto; flex:1; }
.staff-head select{ width:auto; }
.staff-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.staff-result{
  margin-top:12px; padding-top:10px; border-top:1px solid var(--line);
  font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
}
.staff-result strong{ color:var(--amber); }
.add-staff{ align-self:start; }
.ovh-cat{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px 14px; margin-bottom:12px; }
.ovh-cat-head{ display:flex; justify-content:space-between; font-weight:800; margin-bottom:8px; }
.ovh-cat-head span:last-child{ color:var(--amber); }
.ovh-table{ width:100%; border-collapse:collapse; margin-bottom:8px; }
.ovh-table td{ padding:4px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.ovh-name{ font-size:13px; }
.ovh-table select{ width:auto; font-size:12px; padding:5px 8px; }
.profit-panel{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.profit-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:6px; }
.profit-title a{ text-transform:none; letter-spacing:0; font-weight:600; }
.profit-row{ font-weight:800; }
.profit-row.ok span:last-child{ color:var(--green); }
.profit-row.warn span:last-child{ color:var(--amber); }
.profit-row.bad span:last-child{ color:var(--red); }
.profit-alert{ margin-top:8px; padding:8px 10px; border-radius:8px; font-size:12px; font-weight:700;
  background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.4); color:var(--red); }
.profit-alert.warn{ background:rgba(255,221,51,.08); border-color:var(--amber-dk); color:var(--amber); }

/* ---------- autosave / undo ---------- */
.autosave{
  font-size:11px; font-weight:700; color:var(--green); align-self:center;
  padding:4px 10px; border:1px solid rgba(52,211,153,.3); border-radius:20px; opacity:.75;
}
.autosave.pulse{ animation:aspulse .8s ease; }
@keyframes aspulse{ 0%{ background:rgba(52,211,153,.25); opacity:1; } 100%{ background:transparent; opacity:.75; } }
.undo-btn{ padding:8px 11px; font-size:15px; }
.undo-btn:disabled{ opacity:.3; cursor:default; }
.line-save-bundle{ margin-top:10px; color:var(--muted); }
.line-save-bundle:hover{ color:var(--amber); }

/* ---------- jobs & documents ---------- */
.job-chip{ display:flex; align-items:center; gap:10px; margin:-6px 0 14px; flex-wrap:wrap; }
.job-chip-badge{ background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:5px 14px; font-size:13px; }
.status-pill{
  font-size:11px; font-weight:800; padding:3px 10px; border-radius:20px;
  color:var(--pc,#9aa1ab); border:1px solid; background:transparent;
}
.dash-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.actions-panel{ background:var(--panel); border:1px solid var(--amber-dk); border-radius:var(--radius); padding:12px 16px; margin-bottom:16px; }
.ap-title{ font-weight:800; color:var(--amber); font-size:13px; margin-bottom:8px; }
.ap-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line); font-size:13px; flex-wrap:wrap; }
.ap-row span:last-child{ display:flex; gap:6px; }
.job-row{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 16px; display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-bottom:8px; flex-wrap:wrap;
}
.job-main{ display:flex; align-items:center; gap:12px; cursor:pointer; flex:1; min-width:220px; }
.job-ico{ font-size:22px; }
.job-side{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.job-val{ font-weight:800; color:var(--amber); min-width:80px; text-align:right; }
.nj-types{ display:grid; grid-template-columns:repeat(auto-fill,minmax(115px,1fr)); gap:8px; margin:8px 0 4px; }
.nj-type{
  background:var(--bg); border:1px solid var(--line); border-radius:10px; color:var(--text);
  font:inherit; font-size:12px; font-weight:600; padding:10px 6px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.nj-type span{ text-align:center; line-height:1.2; }
.nj-type:hover{ border-color:var(--amber-dk); }
.nj-type.on{ border-color:var(--amber); background:rgba(255,221,51,.08); }
#doc-extras{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
.doc-extra-field{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); font-weight:600; flex-wrap:wrap; }
.doc-extra-field.wide{ flex-direction:column; align-items:stretch; }
.doc-extra-field textarea{ font-size:12px; }
.photo-grid{ display:flex; gap:8px; flex-wrap:wrap; }
.photo-thumb{ position:relative; }
.photo-thumb img{ width:72px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.photo-thumb button{
  position:absolute; top:-6px; right:-6px; background:var(--red); color:#fff; border:none;
  border-radius:50%; width:20px; height:20px; font-size:11px; cursor:pointer;
}
.photo-add{
  width:72px; height:72px; border:2px dashed var(--line); border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--muted); cursor:pointer;
}
.photo-add:hover{ border-color:var(--amber); color:var(--amber); }
.cq-summary{ font-size:13px; line-height:1.7; margin:6px 0 16px; color:#2b2f38; }
.cq-deposit{
  margin-top:16px; padding:12px 14px; background:#fdf6e3; border:1px solid #f0d48a;
  border-radius:8px; font-size:13px; color:#5a4a12;
}
.cq-photo-grid{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.cq-photo-grid img{ width:150px; height:112px; object-fit:cover; border-radius:6px; border:1px solid #e6e8eb; }

/* ---------- AI assistant ---------- */
.ai-fab{
  position:fixed; right:22px; bottom:22px; z-index:90;
  background:var(--amber); color:#08090b; border:none; border-radius:26px;
  font:inherit; font-weight:800; padding:13px 20px; cursor:pointer;
  box-shadow:0 8px 28px rgba(255,221,51,.35);
}
.ai-fab:hover{ background:#ffe566; }
.ai-panel{
  display:none; position:fixed; right:22px; bottom:84px; z-index:95;
  width:400px; max-width:calc(100vw - 44px); height:560px; max-height:calc(100vh - 120px);
  background:var(--bg2); border:1px solid var(--line); border-radius:16px;
  flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.55); overflow:hidden;
}
.ai-panel.open{ display:flex; }
.ai-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--line); font-weight:800; background:var(--panel2);
}
.ai-msgs{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; }
.ai-msg{ max-width:88%; padding:9px 13px; border-radius:12px; font-size:13px; line-height:1.5; }
.ai-user{ align-self:flex-end; background:var(--amber); color:#08090b; border-bottom-right-radius:4px; }
.ai-assistant{ align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:4px; }
.ai-chip{
  align-self:flex-start; background:none; border:1px dashed var(--line);
  color:var(--muted); font-size:11px; padding:4px 10px; border-radius:20px;
}
.ai-note{ align-self:center; background:var(--panel); border:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; }
.ai-note.warn{ border-color:rgba(248,113,113,.4); color:var(--red); }
.ai-note a{ color:var(--amber); }
.ai-input{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--panel2); }
.ai-input textarea{ flex:1; resize:none; font-size:13px; }
.ai-dots::after{ content:'…'; animation:aidots 1.2s steps(4) infinite; }
@keyframes aidots{ 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} }
@media print{ .ai-fab, .ai-panel{ display:none !important; } }

/* ---------- print: customer quote only ---------- */
@media print{
  body *{ visibility:hidden; }
  .modal.open, .modal.open *{ visibility:visible; }
  .no-print, .no-print *{ visibility:hidden !important; display:none !important; }
  .modal{ position:static; padding:0; background:#fff; overflow:visible; }
  .modal-card{ border:none; background:#fff; padding:0; max-width:none; margin:0; }
  .cq-doc{ border-radius:0; padding:10mm 8mm; }
  @page{ margin:12mm; }
}

/* markup override — item or line no longer following the quote-wide % */
input.mk-ov{ border-color:var(--amber); color:var(--amber); font-weight:600; }

/* ---------- calendar view ---------- */
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px;
  font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
.cal-dow div{ padding:0 6px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cell{ background:var(--panel); border:1px solid var(--line); border-radius:8px;
  min-height:86px; padding:4px 5px; overflow:hidden; }
.cal-cell.cal-out{ opacity:.38; }
.cal-cell.cal-today{ border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset; }
.cal-daynum{ font-size:11px; color:var(--muted); margin-bottom:3px; }
.cal-today .cal-daynum{ color:var(--amber); font-weight:700; }
.cal-ev{ font-size:11px; line-height:1.25; background:color-mix(in srgb, var(--pc, #34d399) 22%, var(--panel));
  border-left:3px solid var(--pc, #34d399); border-radius:4px; padding:2px 5px; margin-bottom:3px;
  cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev:hover{ background:color-mix(in srgb, var(--pc, #34d399) 38%, var(--panel)); }
.cal-ev-soft{ opacity:.6; border-left-style:dashed; }
@media (max-width:720px){
  .cal-grid, .cal-dow{ gap:3px; }
  .cal-cell{ min-height:64px; padding:3px 3px; }
  .cal-ev{ font-size:9px; padding:1px 3px; }
}

/* ---------- customers view ---------- */
.cust-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; }
.cust-card summary{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px; cursor:pointer; list-style:none; }
.cust-card summary::-webkit-details-marker{ display:none; }
.cust-card[open] summary{ border-bottom:1px solid var(--line); }
.cust-body{ padding:12px 14px; }
.cust-site{ display:flex; gap:8px; margin-bottom:6px; }
.cust-site .cs-label{ width:180px; flex-shrink:0; }
.cust-site .cs-addr{ flex:1; }
.site-sel{ max-width:220px; }
#nj-cust-badge:empty, #nj-site-wrap:empty{ display:none; }

/* customer details card on the open job */
.job-chip{ display:block; }
.job-chip-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.job-cust{ display:grid; grid-template-columns:repeat(4, minmax(140px,1fr)); gap:10px; align-items:end;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin-top:10px; }
.job-cust.hide{ display:none; }
.job-cust label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.job-cust input, .job-cust select{ width:100%; }
.job-cust .jc-addr{ grid-column:span 2; }
.job-cust a.btn{ justify-self:start; }
@media (max-width:900px){ .job-cust{ grid-template-columns:1fr 1fr; } .job-cust .jc-addr{ grid-column:1/-1; } }

/* kit management + AI kit builder */
.kit-name{ display:flex; align-items:center; gap:6px; }
.kit-name .kit-tools{ margin-left:auto; display:flex; gap:2px; opacity:0; transition:opacity .15s; }
.kit-card:hover .kit-tools{ opacity:1; }
.kit-card.kit-mine{ border-color:var(--amber-dk); }
#kb-desc{ width:100%; margin-top:6px; }
#kb-mic.rec{ border-color:var(--red); color:var(--red); }
@media (hover:none){ .kit-name .kit-tools{ opacity:1; } }

/* ---------- certificates ---------- */
.cert-sec{ margin-bottom:14px; }
.cert-sec label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.cert-sec textarea{ width:100%; }
.cert-tbl-wrap{ overflow-x:auto; }
.cert-table{ width:100%; border-collapse:collapse; font-size:12px; }
.cert-table th{ text-align:left; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.4px; padding:4px 4px; white-space:nowrap; }
.cert-table td{ padding:2px 3px; }
.cert-table input, .cert-table select{ padding:4px 6px; font-size:12px; }
.c-xs{ width:46px; } .c-s{ width:70px; } .c-desc{ min-width:150px; width:100%; }
.mini-sel{ font-size:12px; padding:6px 8px; }
.obs-row{ display:flex; gap:6px; margin-bottom:6px; align-items:center; flex-wrap:wrap; }
.obs-code{ width:66px; font-weight:700; }
.obs-C1{ color:#f87171; border-color:#f87171; } .obs-C2{ color:#f97316; border-color:#f97316; }
.obs-C3{ color:#ffdd33; } .obs-FI{ color:#3fe3ff; }
.obs-txt{ flex:2; min-width:200px; } .obs-loc{ flex:1; min-width:110px; } .obs-reg{ width:90px; }
.cert-photos{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.cp-wrap{ position:relative; } .cp-wrap img{ width:96px; height:96px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.cp-wrap .icon-btn{ position:absolute; top:2px; right:2px; background:rgba(0,0,0,.55); }
/* cert print */
.cp-table{ width:100%; border-collapse:collapse; font-size:10.5px; margin-top:4px; }
.cp-table th, .cp-table td{ border:1px solid #ccc; padding:3px 5px; text-align:left; }
.cp-table th{ background:#f2f2f2; font-size:9.5px; text-transform:uppercase; }
.cp-outcome{ font-size:15px; padding:10px; border-radius:6px; }
.cp-outcome.ok{ background:#e8f8f0; } .cp-outcome.bad{ background:#fdecea; }
.cp-sig{ font-family:'Snell Roundhand','Segoe Script',cursive; font-size:16px; }
.cp-photos{ display:flex; gap:6px; flex-wrap:wrap; } .cp-photos img{ width:110px; height:110px; object-fit:cover; border:1px solid #ddd; }

/* ---------- certificates v2: section nav, inspection schedule, cover page ---------- */
.cert-nav{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; position:sticky; top:0; z-index:5;
  background:var(--bg); padding:8px 0; }
.cn-badge{ background:var(--panel2); border-radius:10px; padding:1px 7px; font-size:10px; color:var(--muted); }
.cn-badge.done{ color:var(--green); } .cn-badge.warn{ color:var(--amber); }
.insp-sec{ border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:var(--bg2); }
.insp-sec summary{ padding:9px 12px; cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.insp-sec summary::-webkit-details-marker{ display:none; }
.insp-quick{ margin-left:auto; display:flex; gap:4px; }
.insp-items{ border-top:1px solid var(--line); padding:6px 10px; }
.insp-row{ display:flex; align-items:center; gap:8px; padding:4px 0; border-bottom:1px dashed var(--line); font-size:12px; }
.insp-row:last-child{ border-bottom:none; }
.insp-id{ width:44px; flex-shrink:0; color:var(--muted); font-size:11px; }
.insp-desc{ flex:1; min-width:180px; }
.insp-loc{ width:110px; padding:4px 6px; font-size:11px; }
.insp-out{ width:64px; padding:4px 4px; font-weight:700; }
.insp-out.code{ color:var(--red); border-color:var(--red); }
/* print: cover page + wide circuit table */
.cp-cover{ text-align:center; padding:40mm 0 0; }
.cp-cover-title{ font-size:26px; font-weight:800; }
.cp-cover-no{ margin-top:6px; font-size:13px; color:#555; }
.cp-cover-std{ margin:14mm 0; font-size:13px; line-height:1.6; }
.cp-cover-addr{ font-size:17px; font-weight:600; line-height:1.5; margin:10mm 0; }
.cp-cover-meta{ font-size:13px; line-height:1.8; margin-bottom:12mm; }
.cp-cover-biz{ font-size:12px; line-height:1.6; color:#333; }
.pg-brk{ page-break-before:always; }
.cp-l{ background:#f6f6f6; font-weight:600; white-space:nowrap; }
.cp-red{ color:#c62828; }
.cp-small{ font-size:9.5px; line-height:1.5; color:#333; }
.cp-sec-row td{ background:#eee; }
.cp-ckt th, .cp-ckt td{ font-size:8px; padding:2px 2px; }
@media print{ .cert-nav{ display:none; } }
.same-addr{ font-size:12px; color:var(--muted); text-transform:none; letter-spacing:0; margin-left:12px; display:inline-flex; gap:6px; align-items:center; cursor:pointer; }
.cert-sec input:disabled{ opacity:.55; cursor:not-allowed; }
.doc-certs{ display:flex; flex-direction:column; gap:6px; }
.doc-cert-tick{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
/* certificate pages inside the invoice doc print on white like the invoice */
.cq-doc .cp-cover{ padding-top:20mm; }

/* ---------- team & engineer view ---------- */
.staff-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.staff-row .st-name{ width:170px; }
.staff-row .st-c{ width:150px; }
.staff-dot{ width:14px; height:14px; border-radius:50%; display:inline-block; flex-shrink:0; cursor:pointer; border:2px solid rgba(255,255,255,.25); }
.cal-leave{ font-style:italic; }
/* engineer view preview: hide internal money */
body.eng-view .quote-side{ display:none !important; }
body.eng-view .line-figures span[title="Materials at cost"]{ display:none !important; }
body.eng-view .line-controls label:has(input[onchange*="'mk'"]){ display:none !important; }
body.eng-view .line-mats td:nth-child(3), body.eng-view .line-mats td:nth-child(4),
body.eng-view .line-mats th:nth-child(3), body.eng-view .line-mats th:nth-child(4){ display:none; }
body.eng-view .quote-layout{ grid-template-columns:1fr; }
body.eng-view::after{ content:'👁 Engineer view preview — costs & margins hidden (turn off in Team)'; position:fixed; bottom:10px; left:50%; transform:translateX(-50%);
  background:var(--amber); color:#111; font-size:12px; font-weight:700; padding:6px 14px; border-radius:16px; z-index:99; }

/* timesheets, diary, capacity, availability */
.job-diary{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-top:10px; }
.job-diary summary{ padding:10px 14px; cursor:pointer; list-style:none; font-size:13px; }
.job-diary summary::-webkit-details-marker{ display:none; }
.jd-body{ padding:0 14px 12px; max-width:660px; } /* checklists & notes read as a left-hand clipboard, not a page-wide sprawl */
.jd-note{ padding:6px 0; border-bottom:1px dashed var(--line); font-size:13px; display:flex; gap:8px; align-items:baseline; }
.jd-note .icon-btn{ margin-left:auto; }
.jd-add{ display:flex; gap:8px; margin-top:8px; }
.jd-add input{ flex:1; }
.cap-table td{ text-align:center; padding:6px 4px; }
.cap-table td:first-child{ text-align:left; white-space:nowrap; }
.cap-free{ color:var(--muted); }
.cap-part{ color:var(--green); font-weight:700; }
.cap-full{ color:var(--amber); font-weight:700; }
.cap-leave{ opacity:.8; }
.bk-avail{ display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.bk-av{ display:inline-flex; gap:5px; align-items:center; }
/* engineer view: lock price editing (visible prices stay, editing blocked) */
body.eng-view #rates-panel input, body.eng-view #rates-panel select,
body.eng-view .line-mats input[onchange*="setPrice"],
body.eng-view input[onchange*="setPrice"]{ pointer-events:none; opacity:.6; }

/* photo report + RAMS */
.pr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pr-grid img{ width:100%; border:1px solid #ddd; border-radius:4px; }
.pr-grid figure{ margin:0; } .pr-grid figcaption{ font-size:9px; color:#666; padding:2px 0; }
.rams-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.rams-row .rams-h{ width:230px; font-size:12px; }
.rams-row .rams-r{ width:56px; }
.rams-row .rams-c{ flex:1; min-width:220px; font-size:12px; }
.cs-role{ width:130px; flex-shrink:0; }

/* finish picker: option rows with live price deltas */
.fin-grid{ display:flex; flex-direction:column; gap:6px; margin:12px 0 8px; }
.fin-opt{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; color:var(--text); font:inherit; cursor:pointer; }
.fin-opt:hover:not(:disabled){ border-color:var(--amber); }
.fin-opt:disabled{ opacity:.45; cursor:not-allowed; }
.fin-opt .fo-ico{ font-size:18px; }
.fin-opt .fo-name{ flex:1; font-weight:600; }
.fin-opt .fo-delta{ font-weight:700; }
.fin-opt .fo-delta.up{ color:var(--amber); }
.fin-opt .fo-delta.down{ color:var(--green); }
.tot-row.hours-row{ background:var(--panel2); border-radius:8px; padding:8px 10px; margin-bottom:6px; }

/* quote options on the job */
.opt-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.opt-chip{ display:inline-flex; align-items:center; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:3px 6px 3px 4px; }
.opt-chip.on{ border-color:var(--amber); background:var(--panel2); }
.opt-chip .opt-name{ background:none; border:none; color:var(--text); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:3px 8px; }
.opt-chip:not(.on) .opt-name{ color:var(--muted); font-weight:500; }
.chip-fin{ border:1px solid var(--amber-dk); color:var(--amber); background:none; cursor:pointer; font:inherit; font-size:11px; border-radius:10px; padding:2px 8px; }
.chip-fin:hover{ border-color:var(--amber); }

/* engineer job log */
.jd-note{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.jd-note .jd-main{ flex:1; display:flex; flex-direction:column; gap:2px; }
.jd-note.jd-issue{ border-left:3px solid var(--red); padding-left:8px; }
.jd-note.jd-done > .jd-main > span:first-child{ text-decoration:line-through; opacity:.6; }
.jd-ico{ font-size:14px; }
.jd-photos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.jd-ph{ position:relative; }
.jd-ph img{ width:56px; height:56px; object-fit:cover; border-radius:6px; border:1px solid var(--line); cursor:pointer; }
.jd-ph .icon-btn{ position:absolute; top:-6px; right:-6px; background:var(--bg); padding:0 4px; }
.jd-add{ display:flex; gap:8px; margin-top:10px; align-items:center; }
.jd-add .jd-type{ width:110px; flex-shrink:0; }
.jd-add input[type=text], .jd-add input:not([type]){ flex:1; }

/* ============================================================
   VISUAL HIERARCHY v2 — depth, prominence & rhythm
   Principles: aesthetic-usability, Gestalt common-region,
   size = importance, colour = meaning, motion = feedback.
   ============================================================ */

/* 1 · Depth: the page is no longer one flat sheet */
body{
  background: radial-gradient(1200px 600px at 75% -10%, #16181d 0%, var(--bg) 55%) fixed, var(--bg);
}
.panel, .line, .job-row, .cost-card, .kit-card, .cust-card, .staff-card,
.insp-sec, .job-diary, .job-cust, .cal-cell, .job-box{
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.25);
}
.line, .job-row, .kit-card, .cost-card, .cust-card{
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.line:hover, .job-row:hover, .kit-card:hover, .cust-card:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 26px rgba(0,0,0,.38);
}

/* 2 · Section identity: page titles anchor each view */
.view-head{ border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:22px; position:relative; }
.view-head::after{ content:''; position:absolute; left:0; bottom:-1px; width:64px; height:3px; background:var(--amber); border-radius:2px; }
.view-head h1{ font-size:26px; }

/* 3 · Panels announce themselves: brighter titles with a keyline */
.panel h3, .cert-sec h3{
  color:var(--text); display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:12px;
}
.panel h3::before, .cert-sec h3::before{ content:''; width:4px; height:14px; background:var(--amber); border-radius:2px; flex-shrink:0; }

/* 4 · Money leads: key figures are the biggest thing in their card */
.cost-card{ background:linear-gradient(180deg, var(--panel2), var(--panel)); }
.cost-card .cc-val{ font-size:27px; letter-spacing:-.5px; }
.cost-card.green{ border-top:3px solid var(--green); }
.cost-card.amber{ border-top:3px solid var(--amber); }
.line-figures strong{ font-size:16px; color:var(--amber); }
.tot-row.subtotal{ font-size:16px; }
.tot-row.subtotal span:last-child{ color:var(--amber); font-weight:800; }
.job-val{ font-size:15px; font-weight:800; color:var(--amber); }

/* 5 · Cards read as cards: titles up a size */
.line-title{ font-size:15px; }
.job-row .job-main strong{ font-size:15px; }

/* 6 · Primary actions glow, everything responds */
.btn, .chip-btn, .icon-btn, .nav-btn, .fin-opt, .nj-type{ transition: all .13s ease; }
.btn-amber{ box-shadow: 0 2px 12px rgba(255,221,51,.25); }
.btn-amber:hover{ box-shadow: 0 4px 18px rgba(255,221,51,.4); transform: translateY(-1px); }
.chip-btn.on{ box-shadow: 0 2px 10px rgba(255,221,51,.3); }

/* 7 · Navigation: the active place is unmistakable */
.nav-btn{ border-left:3px solid transparent; border-radius:0 8px 8px 0; }
.nav-btn.active{ border-left-color:var(--amber); background:linear-gradient(90deg, rgba(255,221,51,.12), var(--panel2)); }
.nav-btn:hover{ padding-left:16px; }
.nav-group{ font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted);
  padding:12px 12px 2px; opacity:.7; }

/* 8 · Tables breathe: zebra rows for long schedules */
.cert-table tbody tr:nth-child(even) td, .ovh-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.02); }
.cert-table tbody tr:hover td{ background:rgba(255,221,51,.05); }

/* 9 · Modals float above a hushed page */
.modal{ backdrop-filter: blur(6px); background:rgba(4,5,7,.72); }
.modal-card{ box-shadow: 0 24px 80px rgba(0,0,0,.6); border:1px solid color-mix(in srgb, var(--amber) 18%, var(--line)); }

/* 10 · Focus & polish */
:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--amber-dk); }
::-webkit-scrollbar-track{ background:transparent; }

/* keep print clean — none of the above decorates paper */
@media print{
  body{ background:#fff; }
  .modal{ backdrop-filter:none; }
  .modal-card{ box-shadow:none; border:none; }
}

/* ============================================================
   DESIGN SYSTEM v3 — typography, colour temperature, surfaces
   Display: Clash Display (headings, money) · UI: Satoshi (body)
   ============================================================ */
:root{
  --bg:#08090b; --bg2:#0d0f13; --panel:#14161c; --panel2:#1c1f27;
  --line:rgba(154,161,171,.17); --text:#f5f6f8; --muted:#9aa1ab;
  --ink:#08090b; --radius:14px;
  --font-ui:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Clash Display','Space Grotesk',-apple-system,sans-serif;
}
body{ font:14px/1.55 var(--font-ui); letter-spacing:.005em; }
h1{ font-family:var(--font-display); font-size:28px; font-weight:700; letter-spacing:-.5px; }
h2{ font-family:var(--font-display); font-weight:600; }
.logo{ font-family:var(--font-display); font-size:21px; }
.kit-name, .line-title, .cq-biz{ font-family:var(--font-display); font-weight:600; letter-spacing:-.2px; }

/* money & data: display face + tabular figures so columns line up */
.cc-val, .job-val, .line-figures strong, .tot-row.subtotal span:last-child, .cq-grand{
  font-family:var(--font-display); font-variant-numeric:tabular-nums;
}
.tot-row, .cert-table, .ovh-table, .cp-table, .line-figures, .cq-totals{ font-variant-numeric:tabular-nums; }

/* labels whisper, values speak: lighter labels, stronger input text */
label{ font-weight:500; }
input, select, textarea{ font-weight:500; border-radius:9px; background:rgba(8,9,11,.65); }
input:focus, select:focus, textarea:focus{ box-shadow:0 0 0 3px rgba(255,221,51,.15); }
.cc-label, .test-title, .cq-lab{ font-size:10.5px; letter-spacing:1.1px; opacity:.85; }

/* consistent radius scale: 9 controls · 14 cards · 18 modals */
.btn, .chip-btn{ border-radius:9px; }
.modal-card{ border-radius:18px; }
.line, .panel, .job-row, .cost-card, .kit-card, .cust-card, .staff-card, .job-box, .job-cust, .job-diary{ border-radius:var(--radius); }

/* buttons: neutral ones look pressable, primary looks golden */
.btn{ background:linear-gradient(180deg, #20242e, var(--panel2)); border-color:rgba(154,161,171,.22); }
.btn:hover{ border-color:var(--amber); }
.btn-amber{ background:linear-gradient(180deg, #ffe566, var(--amber)); color:var(--ink); border-color:transparent; font-weight:700; }
.btn-amber:hover{ background:linear-gradient(180deg, #fff099, #ffe566); }

/* cards: soft borders, let elevation do the separating */
.panel, .line, .job-row, .cost-card, .kit-card, .cust-card, .staff-card, .job-box, .insp-sec{
  border-color:rgba(154,161,171,.13);
}
/* KPI numbers get the display face at full size */
.cost-card .cc-val{ font-size:28px; font-weight:700; }

/* status pills: consistent, quiet capsule */
.status-pill{ font-weight:700; letter-spacing:.3px; }

/* sidebar: brand presence + breathing room */
.sidebar{ background:linear-gradient(180deg, #0e1013, #08090b); }
.bolt{ filter:drop-shadow(0 0 10px rgba(255,221,51,.8)); }

@media print{ body{ font-family:var(--font-ui); } }

/* ============ the "add" visual language ============ */
/* tiles that CREATE something: dashed amber frame + corner plus badge */
.nj-add{ position:relative; border-style:dashed; border-color:rgba(255,221,51,.45); padding-right:34px; }
.nj-add::after{
  content:'＋'; position:absolute; top:8px; right:8px;
  width:22px; height:22px; line-height:22px; text-align:center;
  background:var(--amber); color:var(--ink); font-weight:800; font-size:14px;
  border-radius:50%; box-shadow:0 2px 8px rgba(255,221,51,.35);
}
.nj-add:hover{ border-color:var(--amber); background:rgba(255,221,51,.07); }
/* buttons that ADD to a list: dashed amber capsule, distinct from normal actions */
button.btn-add{
  background:rgba(255,221,51,.06); border:1px dashed rgba(255,221,51,.5);
  color:var(--amber); font-weight:600;
}
button.btn-add:hover{ background:rgba(255,221,51,.14); border-color:var(--amber); border-style:solid; transform:none; }
/* the photo "＋" tile joins the family */
.photo-add{ border:1px dashed rgba(255,221,51,.5) !important; color:var(--amber) !important; }

/* job card upgrades: priority, engineer, staleness */
.eng-dot{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:50%; font-size:9px; font-weight:800; color:#08090b; vertical-align:middle; margin:0 4px; }
.days-chip{ font-size:10.5px; color:var(--muted); background:var(--panel2); border-radius:9px; padding:2px 8px; vertical-align:middle; }
.days-chip.stale{ color:#f87171; border:1px solid rgba(248,113,113,.4); font-weight:700; }
.job-side .icon-btn{ font-size:14px; }
.job-side a.icon-btn{ text-decoration:none; }
.line-sup{ border-left:4px solid #3fe3ff; }
.mat-cat-row td{ padding:9px 4px 3px !important; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.9px; color:var(--amber); border-bottom:1px solid var(--line); background:none !important; }
.mat-cat-row.mat-cat-opt td{ color:var(--muted); }

/* ---------- operations: inbox drawer, queues, tasks ---------- */
.ops-badge{ background:var(--red); color:#fff; font-size:10px; font-weight:800; border-radius:9px;
  padding:1px 6px; margin-left:auto; }
#ops-drawer{ position:fixed; top:0; right:-400px; width:380px; max-width:92vw; height:100vh; z-index:130;
  background:var(--bg2); border-left:1px solid var(--line); box-shadow:-16px 0 48px rgba(0,0,0,.5);
  transition:right .22s ease; display:flex; flex-direction:column; }
#ops-drawer.open{ right:0; }
.ops-drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); }
#ops-drawer-body{ overflow:auto; padding:10px 12px; flex:1; }
#ops-drawer-body .test-title{ margin:10px 0 6px; }
.ops-notif{ display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:10px; cursor:pointer;
  border:1px solid transparent; margin-bottom:4px; }
.ops-notif:hover{ background:var(--panel); }
.ops-notif.unread{ background:var(--panel); border-color:rgba(255,221,51,.25); }
.ops-notif .on-ico{ font-size:16px; }
.ops-notif .on-main{ flex:1; display:flex; flex-direction:column; gap:2px; font-size:13px; }
.ops-notif .on-dot{ width:8px; height:8px; border-radius:50%; background:var(--amber); margin-top:6px; }
.queue-sel{ max-width:150px; color:var(--muted) !important; border-color:var(--line) !important; }
.ops-log{ margin-top:8px; border-top:1px solid var(--line); padding-top:6px; max-height:320px; overflow:auto; }

/* ---------- job card sections: each one has its own colour identity ---------- */
.job-cust{ --sec:#3fe3ff; }          /* customer = cyan (incoming/new) */
.job-diary.jd-log{ --sec:#34d399; }  /* job log = green */
.job-diary.jd-exp{ --sec:#ffdd33; }  /* expenses = yellow (money) */
.job-diary.jd-act{ --sec:#9aa1ab; }  /* activity = muted */
.job-cust, .job-diary{ border-left:4px solid var(--sec, var(--line)); }
.sec-head{
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.9px; color:var(--sec, var(--text));
  margin:-12px -14px 8px; padding:10px 14px; border-radius:14px 14px 0 0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--sec) 14%, var(--panel)), var(--panel) 65%);
  border-bottom:1px solid color-mix(in srgb, var(--sec) 30%, var(--line));
}
.job-diary summary{
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.9px; color:var(--sec, var(--text));
  background:linear-gradient(90deg, color-mix(in srgb, var(--sec) 14%, var(--panel)), var(--panel) 65%);
  border-radius:14px;
}
.job-diary[open] summary{ border-radius:14px 14px 0 0; border-bottom:1px solid color-mix(in srgb, var(--sec) 30%, var(--line)); }
.job-diary summary .muted, .job-diary summary .small{ text-transform:none; letter-spacing:0; font-family:var(--font-ui); font-weight:500; }
.job-diary summary strong{ color:inherit; }
.opt-bar{ background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:14px; padding:10px 14px; }

/* proposal lines in the builder */
.chip-sale{ border:1px solid var(--green); color:var(--green); font-size:10px; border-radius:10px; padding:2px 8px; }
.chip-sale.chip-choice{ border-color:#3fe3ff; color:#3fe3ff; }
.line.sale-off{ opacity:.6; border-style:dashed; }
.line-media{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0; padding:8px 10px;
  background:var(--bg2); border-radius:10px; border:1px dashed var(--line); }
.lm-ph{ position:relative; } .lm-ph img{ width:52px; height:52px; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:pointer; }
.lm-ph .icon-btn{ position:absolute; top:-8px; right:-8px; background:var(--bg); padding:0 4px; }
/* proposal sections on the customer document */
.cq-choice{ border:2px solid #c7a70a33; border-radius:12px; padding:12px 14px; margin-top:14px; }
.cq-opt{ display:flex; gap:12px; align-items:flex-start; padding:10px 8px; border-radius:10px; border:1px solid #e5e7eb;
  margin-top:8px; cursor:pointer; color:#111; }
.cq-opt.sel{ border-color:#c7a70a; background:#fffbeb; }
.cq-opt-main{ flex:1; }
.cq-opt-price{ font-weight:800; white-space:nowrap; }
.cq-inc{ font-size:11px; color:#166534; background:#dcfce7; border-radius:8px; padding:1px 8px; }
.cq-media{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:6px; }
.cq-line-ph{ width:86px; height:86px; object-fit:cover; border-radius:8px; border:1px solid #ddd; }
.cq-attach{ font-size:12px; border:1px solid #d1d5db; border-radius:8px; padding:3px 10px; text-decoration:none; color:#1d4ed8 !important; }
@media print{ .cq-opt input{ -webkit-appearance:none; appearance:none; width:14px; height:14px; border:2px solid #333; border-radius:3px; }
  .cq-opt input[type=radio]{ border-radius:50%; } .cq-opt input:checked{ background:#333; } }

/* ============================================================
   STACKED OUT BRAND — signature gradient, hero moments only
   (logo + primary CTA glow). Never on body text.
   ============================================================ */
.logo em{
  background:linear-gradient(100deg, #ffdd33, #3fe3ff);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.bolt{ filter:drop-shadow(0 0 10px rgba(255,221,51,.8)); }
.view-head::after{ background:linear-gradient(100deg, #ffdd33, #3fe3ff); }
@media print{ .logo em{ -webkit-text-fill-color:initial; color:#16181d; background:none; } }

/* ============================================================
   CERTIFICATES v2 — every section wears its colour
   paperwork = cyan · electrical data = yellow · testing = green
   observations = red · declaration = muted
   ============================================================ */
.cert-sec{ border-left:4px solid var(--csec, var(--line)); }
#csec-details, #csec-install{ --csec:#3fe3ff; }
#csec-supply{ --csec:#ffdd33; }
#csec-inspection{ --csec:#34d399; }
.cert-sec.sec-board{ --csec:#ffdd33; }
#csec-obs{ --csec:#f87171; }
#csec-pat, #csec-eml{ --csec:#34d399; }
#csec-fire{ --csec:#f87171; }
#csec-summary{ --csec:#3fe3ff; }
#csec-sign{ --csec:#9aa1ab; }
.cert-check{ --csec:#34d399; border-left:4px solid var(--csec); }
/* section headers announce themselves like the job card sections */
.cert-sec > h3:first-child, .cert-check > h3:first-child{
  font-family:var(--font-display); font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.9px; color:var(--csec, var(--text));
  margin:-14px -16px 14px; padding:12px 16px; border-radius:0 14px 0 0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--csec, #9aa1ab) 13%, var(--panel)), var(--panel) 65%);
  border-bottom:1px solid color-mix(in srgb, var(--csec, #9aa1ab) 30%, var(--line));
}
.cert-sec > h3:first-child::before, .cert-check > h3:first-child::before{ background:var(--csec, var(--line)); }
.cert-sec > h3:first-child .muted{ text-transform:none; letter-spacing:0; font-family:var(--font-ui); font-weight:500; }
/* the sticky section nav gets matching colour dots */
.cn-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:baseline; }
.cert-nav{ border-bottom:1px solid var(--line); }
/* live test-result flags */
input.zs-bad{ border-color:var(--red) !important; color:var(--red); font-weight:800; background:rgba(248,113,113,.08); }
input.ir-bad{ border-color:var(--red) !important; color:var(--red); font-weight:800; background:rgba(248,113,113,.08); }
input.ir-warn{ border-color:#f97316 !important; color:#f97316; font-weight:700; }
/* certificate check panel */
.cchk-row{ display:flex; gap:10px; align-items:center; padding:7px 10px; border-radius:8px;
  font-size:13px; margin-bottom:4px; border:1px solid var(--line); background:var(--bg2); }
.cchk-bad{ border-color:rgba(248,113,113,.45); }
.cchk-warn{ border-color:rgba(255,221,51,.35); }
/* remedial banner: the money moment on an unsatisfactory EICR */
.remedial-banner{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:12px;
  padding:14px 16px; border-radius:12px; border:1px solid rgba(255,221,51,.5);
  background:linear-gradient(90deg, rgba(255,221,51,.12), rgba(63,227,255,.06));
}
.remedial-banner > div{ flex:1; min-width:240px; }
.remedial-banner .btn{ flex-shrink:0; }
@media print{ .cert-nav, #cert-check-panel, .remedial-banner{ display:none !important; } }

/* inspection schedule: coded items open a write-up box that feeds the observation sheet */
.insp-write{ margin:2px 0 10px 44px; padding:10px 12px; border-radius:10px;
  background:var(--bg2); border:1px solid var(--line); border-left:4px solid var(--muted);
  display:flex; flex-direction:column; gap:8px; }
.insp-write.obs-C1{ border-left-color:#f87171; } .insp-write.obs-C2{ border-left-color:#f97316; }
.insp-write.obs-C3{ border-left-color:#ffdd33; } .insp-write.obs-FI{ border-left-color:#3fe3ff; }
.iw-head{ font-size:12px; color:var(--muted); }
.iw-head strong{ color:var(--text); }
.insp-write textarea{ font-size:13px; }
.iw-lib{ font-size:12px; color:var(--muted); }
.iw-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.iw-photos{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.iw-photos img{ width:44px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.iw-photos .lm-ph .icon-btn{ top:-8px; right:-8px; }
.obs-num{ font-weight:800; color:var(--muted); min-width:18px; text-align:right; }
.obs-row{ align-items:flex-start; }
/* print: observation photo blocks */
.cp-obs-ph{ margin-top:6px; page-break-inside:avoid; }
.cp-obs-ph .cp-photos img{ width:150px; height:112px; object-fit:cover; }
@media (max-width:860px){ .insp-write{ margin-left:8px; } }

/* library v2: NC code + BPG4 myth warnings */
.obs-NC{ color:var(--muted); border-color:var(--line); }
.insp-write.obs-NC{ border-left-color:var(--muted); }
.iw-myth{ font-size:12px; color:var(--muted); padding:6px 10px; border:1px dashed rgba(255,221,51,.4);
  border-radius:8px; background:rgba(255,221,51,.05); }

/* job P&L (actuals) on the job card */
.jd-pl{ margin-top:8px; padding:10px 12px; border-radius:10px; background:var(--bg2); border:1px solid var(--line); }
.jd-pl .profit-row span:last-child{ font-weight:800; }

/* ============================================================
   LIST VIEWS v2 — status tabs + data tables
   (the Tradify clarity, in the Stacked Out skin)
   ============================================================ */
.tabs{ display:flex; gap:2px; flex-wrap:wrap; align-items:flex-end; padding:0 4px; }
.tab{ background:transparent; border:1px solid transparent; border-bottom:none; color:var(--muted);
  font:inherit; font-size:13px; font-weight:600; padding:9px 14px; cursor:pointer;
  border-radius:10px 10px 0 0; transition:all .12s; position:relative; }
.tab:hover{ color:var(--text); background:var(--panel2); }
.tab.active{ color:var(--text); background:var(--panel); border-color:var(--line); font-weight:700; }
/* active tab wears the signature gradient — the working line of colour on every tabbed page */
.tab.active::after{ content:''; position:absolute; left:2px; right:2px; bottom:-1px; height:3px;
  border-radius:2px; background:linear-gradient(100deg,#ffdd33,#3fe3ff); }
.tab.tab-action::after{ display:none; }
.tab-ct{ display:inline-block; background:var(--panel2); color:var(--muted); border-radius:12px;
  padding:1px 8px; font-size:11px; font-weight:800; margin-left:6px; }
.tab.active .tab-ct{ background:var(--amber); color:#08090b; }
.table-card{ background:var(--panel); border:1px solid var(--line); border-radius:0 14px 14px 14px; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 6px 18px rgba(0,0,0,.25); }
.table-toolbar{ display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line);
  flex-wrap:wrap; align-items:center; background:var(--panel2); }
.table-toolbar input[type=search]{ background:var(--bg); }
.dt-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; }
.data-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
.data-table td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13px; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr{ cursor:pointer; transition:background .1s ease; }
.data-table tbody tr:hover{ background:rgba(63,227,255,.05); }
.data-table .r{ text-align:right; }
.dt-link{ color:#3fe3ff; font-weight:700; }
tr:hover .dt-link{ text-decoration:underline; }
.dt-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.dt-actions{ white-space:nowrap; text-align:right; }
.dt-actions .icon-btn{ font-size:14px; }
.dt-empty{ padding:36px 20px; text-align:center; color:var(--muted); }
.data-table .status-sel{ font-size:11.5px; padding:3px 6px; max-width:150px; }
.data-table .queue-sel{ max-width:110px; }
@media (max-width:900px){
  .hide-m{ display:none !important; }
  .data-table td, .data-table th{ padding:8px 8px; }
  .tab{ padding:8px 10px; font-size:12px; }
}
.table-toolbar select{ width:auto; max-width:220px; }
.table-toolbar .btn{ margin-left:auto; }

/* ============================================================
   THEME: DAYLIGHT — light content, charcoal sidebar
   "Less is more": flat surfaces, soft shadows, one accent.
   Toggle: 🌓 in the sidebar. Dark theme = remove body class.
   ============================================================ */
body.theme-light{
  --bg:#f7f7f4; --bg2:#f0f0ec; --panel:#ffffff; --panel2:#f4f4f0;
  --line:#e5e4dc; --text:#1a1d23; --muted:#5f6774; --ink:#16181d;
  --amber:#a87e00; --amber-dk:#8a6800;
  --green:#059669; --red:#dc2626;
  background:var(--bg);
}
body.theme-light{ background:#f7f7f4; } /* kill the dark radial */
/* the charcoal rail — flat Stacked Out panel, no gradients */
body.theme-light .sidebar{ background:#0d0f13; color:#f5f6f8; border-right:none; }
body.theme-light .sidebar .nav-btn{ color:#9aa1ab; }
body.theme-light .sidebar .nav-btn:hover{ background:#16181d; color:#f5f6f8; }
body.theme-light .sidebar .nav-btn.active{ background:#16181d; color:#ffdd33; border-left-color:#ffdd33; }
body.theme-light .sidebar-foot{ color:#7c8592; }
body.theme-light .nav-group{ color:#7c8592; }
body.theme-light .menu-btn{ background:#16181d; color:#f5f6f8; border-color:#2a2e37; }
/* buttons: white, bordered, obviously pressable; primary = the one yellow thing */
body.theme-light .btn{ background:#fff; border:1px solid #d6dae1; color:var(--text); box-shadow:0 1px 2px rgba(16,24,40,.05); }
body.theme-light .btn:hover{ border-color:#b9c0ca; background:#fafbfc; }
body.theme-light .btn-amber{ background:#16181d; border-color:#16181d; color:#ffdd33; box-shadow:0 1px 2px rgba(16,24,40,.1); }
body.theme-light .btn-amber:hover{ background:#23262e; box-shadow:0 2px 6px rgba(16,24,40,.12); }
body.theme-light .chip-btn{ background:#fff; border-color:#d6dae1; color:var(--muted); }
body.theme-light .chip-btn.on{ background:#ffdd33; border-color:#e8c400; color:#16181d; box-shadow:none; }
body.theme-light button.btn-add{ background:rgba(168,126,0,.05); border-color:rgba(168,126,0,.45); color:#8a6800; }
/* inputs */
body.theme-light input, body.theme-light select, body.theme-light textarea{
  background:#fff; border-color:#d6dae1; color:var(--text); }
body.theme-light input:focus, body.theme-light select:focus, body.theme-light textarea:focus{
  border-color:#e8c400; box-shadow:0 0 0 3px rgba(255,221,51,.25); }
body.theme-light input[type=checkbox]{ accent-color:#d9a900; }
/* cards: flat white, one soft shadow, no glow-lines */
body.theme-light .panel, body.theme-light .line, body.theme-light .job-row, body.theme-light .cost-card,
body.theme-light .kit-card, body.theme-light .cust-card, body.theme-light .staff-card, body.theme-light .insp-sec,
body.theme-light .job-diary, body.theme-light .job-cust, body.theme-light .cal-cell, body.theme-light .job-box,
body.theme-light .table-card, body.theme-light .modal-card, body.theme-light .saved-row, body.theme-light .ovh-cat{
  box-shadow:0 1px 3px rgba(16,24,40,.07); border-color:var(--line); background:var(--panel); }
body.theme-light .line:hover, body.theme-light .job-row:hover, body.theme-light .kit-card:hover, body.theme-light .cust-card:hover{
  box-shadow:0 3px 10px rgba(16,24,40,.1); border-color:#cdd3db; }
body.theme-light .job-box{ background:var(--panel); }
body.theme-light .cost-card{ background:var(--panel); }
body.theme-light .btn:hover{ transform:none; }
/* modals */
body.theme-light .modal{ background:rgba(23,27,34,.45); }
body.theme-light .modal-card{ box-shadow:0 20px 60px rgba(16,24,40,.25); border-color:var(--line); }
body.theme-light .quick-results{ background:#fff; box-shadow:0 10px 30px rgba(16,24,40,.15); }
/* tables & tabs */
body.theme-light .data-table tbody tr:hover{ background:rgba(2,132,199,.05); }
body.theme-light .dt-link{ color:#0369a1; }
body.theme-light .table-toolbar{ background:var(--panel2); }
body.theme-light .tab.active{ background:var(--panel); box-shadow:0 -2px 0 #e8c400 inset; }
body.theme-light .tab:hover{ background:#eceef2; }
body.theme-light .tab.active .tab-ct{ background:none; color:var(--text); }
body.theme-light .cert-table tbody tr:nth-child(even) td, body.theme-light .ovh-table tbody tr:nth-child(even) td{ background:rgba(16,24,40,.02); }
body.theme-light .cert-table tbody tr:hover td{ background:rgba(255,221,51,.08); }
body.theme-light table.mats th{ background:var(--panel2); }
/* headers & identity colours tuned for white */
body.theme-light .view-head h1{ color:#16181d; }
body.theme-light .job-cust{ --sec:#0e7490; }
body.theme-light .job-diary.jd-log{ --sec:#059669; }
body.theme-light .job-diary.jd-exp{ --sec:#a87e00; }
body.theme-light .job-diary.jd-act{ --sec:#64748b; }
body.theme-light #csec-details, body.theme-light #csec-install, body.theme-light #csec-summary{ --csec:#0e7490; }
body.theme-light #csec-supply, body.theme-light .cert-sec.sec-board{ --csec:#a87e00; }
body.theme-light #csec-inspection, body.theme-light #csec-pat, body.theme-light #csec-eml{ --csec:#059669; }
body.theme-light #csec-obs, body.theme-light #csec-fire{ --csec:#dc2626; }
body.theme-light #csec-sign{ --csec:#64748b; }
body.theme-light .insp-write.obs-C3{ border-left-color:#d97706; }
body.theme-light .insp-write.obs-C2{ border-left-color:#ea580c; }
body.theme-light .insp-write.obs-FI{ border-left-color:#0e7490; }
body.theme-light .obs-C3{ color:#b45309; }
body.theme-light .remedial-banner{ border-color:#e8c400; background:linear-gradient(90deg, rgba(255,221,51,.15), rgba(14,116,144,.05)); }
body.theme-light .iw-myth{ border-color:#e0c34d; background:rgba(255,221,51,.08); color:#6b5d20; }
/* amber-background elements keep the true yellow with dark text */
body.theme-light .qr-badge.kit{ background:#ffdd33; color:#16181d; }
body.theme-light .ai-user{ background:#ffdd33; color:#16181d; }
body.theme-light .ai-fab{ background:#ffdd33; color:#16181d; box-shadow:0 6px 20px rgba(16,24,40,.2); }
body.theme-light .nj-add::after{ background:#ffdd33; color:#16181d; }
body.theme-light .room-head{ background:linear-gradient(90deg, rgba(168,126,0,.1), var(--panel2) 65%); border-left-color:#d9a900; }
body.theme-light .room-name{ color:#8a6800; }
/* scrollbars & backdrops */
body.theme-light ::-webkit-scrollbar-thumb{ background:#c9cfd8; }
body.theme-light ::-webkit-scrollbar-thumb:hover{ background:#aeb6c2; }
body.theme-light .menu-backdrop{ background:rgba(23,27,34,.4); }
/* breathing room — less is more */
body.theme-light main{ padding:28px 36px 70px; }
body.theme-light .view-head{ border-bottom-color:var(--line); }
@media (max-width:860px){ body.theme-light main{ padding:16px 14px 90px; } }

/* dashboard folds (queues / tasks tucked away until needed) */
.dash-fold{ background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:10px; }
.dash-fold summary{ display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer;
  list-style:none; font-weight:700; font-size:13px; }
.dash-fold summary::-webkit-details-marker{ display:none; }
.dash-fold summary::before{ content:'▸'; color:var(--muted); transition:transform .15s; }
.dash-fold[open] summary::before{ transform:rotate(90deg); }
.dash-fold > *:not(summary){ padding:0 14px 12px; }
body.theme-light .dash-fold{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
.dash-kpis{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }

/* ============================================================
   TRADIFY-MATCH PASS (Daylight) — breadcrumb bar, block tabs,
   solid pills, sortable headers, dashboard grid & tiles
   ============================================================ */
/* editorial page headers — headline on the canvas, no chrome around it */
body.theme-light .view-head{ background:none; border:none; border-radius:0;
  padding:0 0 4px; margin:0 0 18px; box-shadow:none; }
body.theme-light .view-head::after{ display:none; }
body.theme-light .view-head h1{ font-size:24px; font-weight:600; letter-spacing:-.4px; }
body.theme-light .lead{ display:none; }
body.theme-light .section-h{ font-size:14px; }
/* tabs: quiet underline — text on the canvas, one yellow rule under the active one */
body.theme-light .tabs{ border-bottom:1px solid var(--line); gap:0; padding:0 2px; }
body.theme-light .tab{ background:none; border:none; color:var(--muted);
  border-radius:0; margin-right:16px; padding:9px 2px; }
body.theme-light .tab:hover{ background:none; color:var(--text); }
body.theme-light .tab.active{ background:none; color:var(--text); box-shadow:none; position:relative; z-index:2; }
body.theme-light .tab .tab-ct{ background:none; color:var(--muted); padding:1px 2px; }
body.theme-light .tab.active .tab-ct{ background:none; color:var(--text); }
body.theme-light .table-card{ position:relative; z-index:1; margin-top:12px; border-radius:14px; }
/* status pills & selects: solid fill, white text */
body.theme-light .status-pill{ background:var(--pc,#6b7280); color:#fff !important; border:none; padding:4px 12px; }
body.theme-light .data-table .status-sel{ background:var(--pc,#6b7280); color:#fff !important; border:none;
  font-weight:700; border-radius:14px; padding:4px 10px; }
body.theme-light .data-table .status-sel option{ background:#fff; color:#1a1d23; }
body.theme-light .data-table .queue-sel{ background:#fff; color:var(--muted) !important; border:1px solid #d6dae1; }
/* sortable headers */
.th-sort{ cursor:pointer; user-select:none; }
.th-arr{ font-size:9px; opacity:.45; }
.th-sort.on .th-arr{ opacity:1; color:var(--amber); }
.th-sort:hover{ color:var(--text); }
.th-ck{ width:34px; text-align:center; }
.th-ck input{ transform:scale(1.15); accent-color:#0ea5e9; }
/* dashboard grid: today's jobs + solid tiles + module cards */
.tf-grid{ display:grid; grid-template-columns:1fr 300px; gap:14px; margin-bottom:14px; }
@media (max-width:1000px){ .tf-grid{ grid-template-columns:1fr; } }
.tf-today{ min-height:170px; margin-bottom:0; }
.tf-jobrow{ display:flex; gap:12px; align-items:center; padding:9px 6px; border-bottom:1px solid var(--line);
  cursor:pointer; border-radius:6px; }
.tf-jobrow:hover{ background:rgba(2,132,199,.05); }
.tf-jobrow:last-child{ border-bottom:none; }
.tf-tiles{ display:flex; flex-direction:column; gap:14px; }
.tf-tile{ flex:1; border-radius:12px; padding:18px 20px; color:#fff; display:flex; flex-direction:column; gap:4px;
  box-shadow:0 2px 8px rgba(16,24,40,.15); }
.tf-blue{ background:linear-gradient(135deg,#0ea5e9,#0284c7); }
.tf-green{ background:linear-gradient(135deg,#10b981,#059669); }
.tf-tile-label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; opacity:.9; }
.tf-tile-val{ font-family:var(--font-display); font-size:30px; font-weight:700; }
.tf-tile-sub{ font-size:12px; opacity:.85; }
.tf-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-bottom:14px; }
.tf-card{ margin-bottom:0; padding:14px 16px 8px; }
.tf-card-title{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:6px; }
.tf-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 2px; font-size:13px;
  border-top:1px solid var(--line); cursor:pointer; }
.tf-row:first-of-type{ border-top:none; }
.tf-row:hover{ color:var(--text); background:rgba(2,132,199,.03); }
.tf-ct{ background:none; color:var(--pc,var(--muted)); border-radius:0; padding:0 2px; font-size:13px; font-weight:700; min-width:24px; text-align:right; font-variant-numeric:tabular-nums; }
/* dark theme fallbacks so the new dash reads there too */
body:not(.theme-light) .tf-tile{ box-shadow:none; }
body:not(.theme-light) .tab .tab-ct{ background:var(--panel2); }

/* ============================================================
   OUR SPIN — same bones, Stacked Out colours only.
   Tiles = the diary logo: gold slot (booked today), charcoal
   slot with the signature gradient (tomorrow's enquiries).
   ============================================================ */
.tf-gold{ background:linear-gradient(135deg,#ffe566,#ffd60a); color:#16181d; }
.tf-gold .tf-tile-label{ color:#5c4d00; opacity:1; }
.tf-gold .tf-tile-sub{ color:#5c4d00; opacity:1; }
.tf-ink{ background:linear-gradient(135deg,#1c1f27,#0e1013); color:#f5f6f8; }
.tf-ink .tf-tile-val{ background:linear-gradient(100deg,#ffdd33,#3fe3ff); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.tf-ink .tf-tile-label{ color:#9aa1ab; }
.tf-ink .tf-tile-sub{ color:#9aa1ab; }
/* links, hovers, focus — cyan family, not Tradify blue */
body.theme-light .dt-link{ color:#0e7490; }
body.theme-light .data-table tbody tr:hover{ background:rgba(14,116,144,.05); }
.tf-jobrow:hover{ background:rgba(14,116,144,.05); }
.tf-row:hover{ background:rgba(14,116,144,.04); }
.th-ck input{ accent-color:#d9a900; }
/* module cards: quiet titles, no keylines */
.tf-card-title{ display:flex; align-items:center; gap:8px; }
body.theme-light .table-toolbar .tab-ct{ background:none; color:#8a6800; }

/* every-page pass: customers table expansion, calendar card, settings nav */
.cust-caret{ color:var(--muted); font-size:12px; }
tr.cust-exp{ cursor:default; }
tr.cust-exp:hover{ background:transparent !important; }
tr.cust-exp > td{ background:var(--panel2); padding:16px 18px; }
body.theme-light tr.cust-exp > td{ background:#fafbfc; }
.cust-exp .cust-body{ padding:0; }
/* calendar reads as one clean card */
#cal-body{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; }
body.theme-light #cal-body{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
body.theme-light .cal-cell{ box-shadow:none; border-color:var(--line); }
/* materials/kits tabs sit flush over their card */
#mat-cats .tabs{ padding:0 4px; }
.set-nav{ position:sticky; top:0; z-index:5; background:var(--bg); padding:8px 0; margin-bottom:12px; }

/* job card tabs: the sections live behind tabs, page stays clean */
.job-tabs{ margin:10px 0 0; }
.job-pane{ border-radius:0 14px 14px 14px; margin-top:-1px; }
.job-pane .sec-head{ border-radius:0 14px 0 0; }
#job-cust.job-pane{ margin-top:-1px; }

/* ============================================================
   ONE-SHEET JOB CARD — the tabs are pages of the same card
   ============================================================ */
#job-sheet{ background:var(--panel); border:1px solid var(--line);
  border-radius:0 14px 14px 14px; padding:16px 16px 20px; margin-top:-1px; }
body.theme-light #job-sheet{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
/* inner blocks sit flat on the sheet — no card-on-card */
#job-sheet .job-box{ background:var(--panel2); border-color:var(--line); box-shadow:none; margin-bottom:12px; }
#job-sheet .quote-side .panel{ box-shadow:none; }
body.theme-light #job-sheet .quote-side .panel{ background:#fafbfc; }
#job-sheet .quick-add input{ background:var(--panel2); }
body.theme-light #job-sheet .quick-add input{ background:#fafbfc; }
/* the panes are the same sheet, different page */
.job-pane{ background:var(--panel) !important; border:1px solid var(--line) !important;
  border-radius:0 14px 14px 14px !important; margin-top:-1px !important; padding:16px !important; }
body.theme-light .job-pane{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
.job-pane .sec-head{ display:none; }  /* the active tab IS the heading */
.job-tabs{ margin-top:12px; }
.job-tabs .tab.active{ font-weight:700; }

/* ============================================================
   QUOTE GRID — one row per line, expandable detail
   ============================================================ */
.qg-card{ border-radius:14px; margin-bottom:4px; }
.quote-grid td{ padding:9px 10px; }
.quote-grid input.mini{ width:64px; }
.quote-grid .qg-variant{ max-width:230px; font-size:12px; padding:5px 8px; }
.quote-grid .qg-margin{ color:var(--green); font-weight:600; }
.quote-grid tbody tr.qg-row{ cursor:default; }
.qg-caret{ font-size:13px; width:24px; }
tr.qg-room td{ background:linear-gradient(90deg, color-mix(in srgb, #ffd60a 12%, var(--panel2)), var(--panel2) 65%) !important;
  border-left:4px solid #ffd60a; font-weight:800; padding:9px 12px; }
tr.qg-room .room-name{ font-family:var(--font-display); font-size:14px; }
tr.qg-room .room-tots{ float:right; font-weight:500; font-size:12px; color:var(--muted); }
tr.qg-exp > td{ background:var(--panel2); padding:14px 16px; }
body.theme-light tr.qg-exp > td{ background:#fafbfc; }
tr.qg-exp:hover{ background:transparent !important; }
.qg-exp-grid{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
table.qg-mats{ width:100%; border-collapse:collapse; margin-top:6px; font-size:12px; }
.qg-mats th{ text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); padding:4px 8px; border-bottom:1px solid var(--line); }
.qg-mats td{ padding:4px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.qg-qa td{ padding:8px 10px !important; }
.qg-qa .quick-add input{ padding:9px 12px; border-style:dashed; background:transparent; }
.qg-qa .quick-add input:focus{ border-style:solid; background:var(--panel); }
.qg-empty-room td{ padding:14px; font-size:12.5px; }
.qg-add{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center; }
.quote-grid .dt-sub{ margin-top:1px; }
@media (max-width:900px){ .quote-grid input.mini{ width:54px; } .quote-grid td{ padding:8px 6px; } }

/* quote grid: every line reads as its own band — clear grooves between rows */
.quote-grid{ border-collapse:separate; border-spacing:0; }
.quote-grid thead th{ border-bottom:1px solid var(--line); }
.quote-grid tbody tr.qg-row > td,
.quote-grid tbody tr.qg-room > td,
.quote-grid tbody tr.qg-qa > td,
.quote-grid tbody tr.qg-empty-room > td{
  border-top:8px solid var(--bg); border-bottom:none; background:var(--panel);
}
.quote-grid tbody tr:first-child > td{ border-top:none; }
/* the expansion stays glued to its line — a quiet dashed join, no groove */
.quote-grid tbody tr.qg-exp > td{ border-top:1px dashed var(--line); border-bottom:none; }
/* rows breathe and centre */
.quote-grid tbody tr.qg-row > td{ padding-top:13px; padding-bottom:13px; vertical-align:middle; }
.quote-grid tbody tr.qg-row td:first-child{ min-width:180px; font-size:13.5px; }
body.theme-light .quote-grid tbody tr.qg-row > td{ border-top-color:#eef0f4; }
body.theme-light .quote-grid tbody tr.qg-room > td,
body.theme-light .quote-grid tbody tr.qg-qa > td,
body.theme-light .quote-grid tbody tr.qg-empty-room > td{ border-top-color:#eef0f4; }

/* the open/close control: obvious, labelled, at the FRONT of the row */
.qg-open{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  background:var(--panel2); color:var(--muted); font-size:13px; font-weight:700;
  cursor:pointer; transition:all .12s ease; line-height:1; }
.qg-open:hover{ border-color:#d9a900; color:var(--text); background:rgba(255,221,51,.15); transform:scale(1.08); }
.qg-open.on{ background:#ffd60a; border-color:#e8c400; color:#16181d; }
.qg-title{ cursor:pointer; }
.qg-title:hover{ text-decoration:underline; text-decoration-color:#d9a900; text-underline-offset:3px; }
.qg-sub{ cursor:pointer; color:#8a6800; font-weight:600; }
.qg-sub:hover{ text-decoration:underline; }
body:not(.theme-light) .qg-sub{ color:#d9a900; }

/* action tabs: same strip, same shape — icon-led, live clock goes gold */
.tab-gap{ margin-left:auto; }
.tab-action{ color:var(--muted); }
.tab-action:hover{ color:var(--text); }
.tab.tab-live{ background:#ffd60a; color:#16181d; border-color:#e8c400; font-weight:800; }
@media (max-width:900px){ .tab-gap{ margin-left:0; flex-basis:100%; height:0; } }

/* expand chevron: small, subtle, unmistakable */
.qg-chev{ display:inline-block; width:16px; margin-right:4px; cursor:pointer;
  color:#b08900; font-size:11px; transition:transform .12s ease; user-select:none; }
.qg-chev:hover{ transform:scale(1.3); }
.qg-chev.on{ color:#8a6800; }
body:not(.theme-light) .qg-chev{ color:#d9a900; }
/* retire the old fat button style */
.qg-open{ display:none; }

/* ============================================================
   SCHEDULER — dispatch board (day / week / month)
   ============================================================ */
.sched-bar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.sched-title{ font-family:var(--font-display); font-size:15px; }
.sched-wrap{ display:grid; grid-template-columns:230px 1fr; gap:14px; align-items:start; }
@media (max-width:900px){ .sched-wrap{ grid-template-columns:1fr; } }
.sched-tray{ background:var(--panel); border:1px dashed rgba(176,137,0,.5); border-radius:12px; padding:12px; min-height:120px; }
.sched-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
@media (max-width:1100px){ .sched-week{ grid-template-columns:repeat(2,1fr); } }
.sched-col{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px; min-height:150px; }
body.theme-light .sched-col{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
.sched-col.sched-today{ border-color:#e8c400; box-shadow:0 0 0 1px #e8c400 inset, 0 1px 3px rgba(16,24,40,.07); }
.sched-col-head{ font-weight:800; font-size:12.5px; padding:2px 4px 8px; display:flex; align-items:center; gap:6px; }
.sched-today .sched-col-head{ color:#8a6800; }
.sb{ background:var(--panel2); border:1px solid var(--line); border-left:4px solid var(--sc,#9aa1ab);
  border-radius:9px; padding:7px 9px; margin-bottom:6px; font-size:12.5px; cursor:pointer; transition:all .12s; }
body.theme-light .sb{ background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.08); }
.sb:hover{ transform:translateY(-1px); box-shadow:0 3px 10px rgba(16,24,40,.14); }
.sb-top{ display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.sb-win{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--sc,#9aa1ab);
  background:color-mix(in srgb, var(--sc,#9aa1ab) 12%, transparent); border-radius:6px; padding:1px 6px; }
.sb-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.sb-warn{ margin-left:auto; }
.sb-conf{ border-color:#dc2626; box-shadow:0 0 0 1px #dc2626 inset; }
.sb-leave{ opacity:.75; border-style:dashed; cursor:default; }
.sb-tray{ border-left-color:#b08900; }
.sb-over{ outline:2px dashed #d9a900; outline-offset:2px; }
.sched-drop-hint{ border:1px dashed var(--line); border-radius:8px; padding:12px; text-align:center;
  color:var(--muted); font-size:11px; opacity:.7; }
.sched-day{ display:grid; gap:4px 6px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:10px; }
.sched-hour{ font-size:10.5px; color:var(--muted); text-align:right; padding-top:6px; }
.sched-cell{ border:1px dashed color-mix(in srgb, var(--line) 60%, transparent); border-radius:8px; min-height:40px; padding:2px; }
.sched-cell .sb{ margin-bottom:2px; }
.msg-panel{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px;
  padding:10px 12px; border-radius:10px; border:1px solid rgba(176,137,0,.4); background:rgba(255,221,51,.07); }

/* arming: booking a job from the board */
.arm-banner{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px;
  padding:12px 14px; border-radius:12px; border:1px solid #e8c400;
  background:linear-gradient(90deg, rgba(255,221,51,.15), rgba(63,227,255,.05)); font-size:13px; }
.sched-armable{ cursor:copy; outline:1px dashed rgba(217,169,0,.5); outline-offset:-3px; }
.sched-armable:hover{ background:rgba(255,221,51,.08); }

/* ============================================================
   🚐 MY DAY — the engineer's screens (mobile-first, big targets)
   ============================================================ */
.eng-topbar{ display:flex; gap:10px; align-items:flex-end; margin-bottom:14px; flex-wrap:wrap; }
.eng-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden; }
body.theme-light .eng-card{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
.eng-card.eng-live{ border-color:#e8c400; box-shadow:0 0 0 1px #e8c400 inset, 0 1px 3px rgba(16,24,40,.1); }
.eng-card.eng-dim{ opacity:.75; }
.eng-head{ display:flex; gap:12px; align-items:center; padding:13px 14px; cursor:pointer; }
.eng-when{ font-family:var(--font-display); font-weight:700; font-size:13px; color:#8a6800;
  background:rgba(255,221,51,.15); border-radius:8px; padding:6px 10px; white-space:nowrap; }
.eng-who{ flex:1; font-size:14px; }
.eng-actions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; padding:0 14px 13px; }
.eng-btn{ text-align:center; padding:12px 8px !important; font-size:13.5px !important; }
.eng-body{ border-top:1px dashed var(--line); padding:12px 14px; background:var(--panel2); }
body.theme-light .eng-body{ background:#fafbfc; }
.eng-check{ display:flex; gap:10px; align-items:center; padding:9px 4px; font-size:14px; border-bottom:1px dashed var(--line); cursor:pointer; }
.eng-check.done{ opacity:.55; text-decoration:line-through; }
.eng-check input{ transform:scale(1.3); accent-color:#d9a900; }
@media (max-width:600px){ .eng-actions{ grid-template-columns:1fr 1fr; } }

/* My Day v2 — SM8-pattern week strip, day timeline, bottom bar, actions sheet */
.eng-week{ display:flex; gap:6px; margin-bottom:10px; }
.eng-wd{ flex:1; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:7px 2px;
  font:inherit; cursor:pointer; text-align:center; color:var(--muted); position:relative; }
.eng-wd span{ display:block; font-size:10px; font-weight:700; }
.eng-wd strong{ font-size:15px; color:var(--text); }
.eng-wd.on{ border-color:#e8c400; background:rgba(255,221,51,.14); }
.eng-wd.today strong{ color:#8a6800; }
.eng-wd i{ position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#d9a900; }
.eng-selday{ font-family:var(--font-display); font-weight:700; font-size:15px; margin:4px 0 8px; }
.eng-tl{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  margin-bottom:14px; overflow:hidden; }
body.theme-light .eng-tl{ box-shadow:0 1px 3px rgba(16,24,40,.07); }
.eng-tl-hr{ position:absolute; left:0; right:0; border-top:1px solid var(--line); opacity:.6; }
.eng-tl-hr span{ position:absolute; left:6px; top:2px; font-size:9.5px; color:var(--muted); }
.eng-tl-blk{ position:absolute; left:56px; right:8px; border-radius:9px; padding:6px 10px; cursor:pointer;
  background:color-mix(in srgb, var(--sc,#9aa1ab) 14%, var(--panel)); border-left:4px solid var(--sc,#9aa1ab);
  overflow:hidden; font-size:12.5px; }
.eng-tl-blk:hover{ background:color-mix(in srgb, var(--sc,#9aa1ab) 22%, var(--panel)); }
.eng-now{ position:absolute; left:0; right:0; border-top:2px solid #dc2626; z-index:2; }
.eng-now i{ position:absolute; left:50px; top:-4px; width:7px; height:7px; border-radius:50%; background:#dc2626; }
.eng-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:96;
  display:flex; gap:4px; align-items:center; padding:8px 12px; border-radius:26px;
  background:var(--panel); border:1px solid var(--line); box-shadow:0 8px 28px rgba(16,24,40,.25); }
.eng-bar .icon-btn{ font-size:19px; padding:8px 10px; }
.eng-bar-job{ font-weight:800; font-size:12px; color:#8a6800; padding:0 4px; }
body:not(.theme-light) .eng-bar{ background:var(--panel2); }
.eng-sheet{ max-width:420px; }
.eng-sheet-list{ display:flex; flex-direction:column; }
.eng-act{ display:flex; gap:10px; align-items:center; padding:13px 6px; border-top:1px solid var(--line);
  background:none; border-left:none; border-right:none; border-bottom:none; font:inherit; font-size:14.5px;
  color:var(--text); cursor:pointer; text-align:left; text-decoration:none; }
.eng-act:hover{ background:rgba(14,116,144,.05); }
.eng-act select{ margin-left:auto; width:auto; max-width:170px; }
@media (max-width:600px){ .eng-bar{ bottom:10px; } .ai-fab{ bottom:74px; } }

/* 👷 engineer mode: delivery only — the office stays at the office */
body.eng-mode .nav-btn[data-view="quote"],
body.eng-mode .nav-btn[data-view="kits"],
body.eng-mode .nav-btn[data-view="materials"],
body.eng-mode .nav-btn[data-view="customers"],
body.eng-mode .nav-btn[data-view="team"],
body.eng-mode .nav-btn[data-view="costs"],
body.eng-mode .nav-btn[data-view="settings"],
body.eng-mode .nav-btn[data-view="marketing"],
body.eng-mode .nav-btn[data-view="convos"]{ display:none; }
body.eng-mode #setup-card{ display:none !important; }
body.eng-mode .nav-group{ display:none; }
body.eng-mode .job-val{ display:none !important; }
body.eng-mode .ai-fab, body.eng-mode .ai-panel{ display:none !important; }
body.eng-mode .head-actions .btn-amber[onclick*="openCustomerQuote"]{ display:none; }
/* the old preview banner reads wrong in real engineer mode */
body.eng-mode.eng-view::after{ content:'👷 Engineer mode — prices & office admin hidden'; }
body.eng-mode .tf-money{ display:none; }
/* engineer mode: jobs = information about THEIR jobs, nothing else */
body.eng-mode #jobs-dash{ display:none; }
body.eng-mode #view-jobs .head-actions,
body.eng-mode .table-toolbar .btn-amber{ display:none; }
body.eng-mode .th-ck, body.eng-mode .data-table .queue-sel{ display:none; }

/* engineer job card */
.ej-start{ width:100%; padding:20px; font:inherit; font-family:var(--font-display); font-size:19px; font-weight:800;
  letter-spacing:.5px; border:none; border-radius:16px; cursor:pointer; margin:2px 0 14px;
  background:linear-gradient(135deg,#ffe566,#ffd60a); color:#16181d; box-shadow:0 3px 12px rgba(16,24,40,.15); }
.ej-start:active{ transform:scale(.99); }
.ej-start.ej-running{ background:linear-gradient(135deg,#10b981,#059669); color:#fff; }
.ej-elapsed{ font-size:13px; font-weight:600; opacity:.9; }
.ej-sec{ margin-bottom:12px; }
.ej-addr{ margin:0 0 10px; font-size:14px; }
.ej-line{ padding:8px 0; border-bottom:1px dashed var(--line); font-size:14px; }
.ej-line:last-child{ border-bottom:none; }
/* engineer-mode badge: small corner chip, off the action bar */
body.eng-mode.eng-view::after{ top:10px; bottom:auto; left:auto; right:10px; transform:none;
  font-size:9.5px; padding:4px 10px; opacity:.9; }

/* engineer mode on the scheduler: their diary, read-friendly */
body.eng-mode .sched-tray{ display:none; }
body.eng-mode .sched-wrap{ grid-template-columns:1fr; }

/* ============================================================
   MOBILE CERTIFICATES — the app fills EICRs on a phone
   (the editor's grids carry inline column counts; on narrow
   screens we overrule them so every box lines up)
   ============================================================ */
@media (max-width:700px){
  .cert-sec .set-grid, #view-certs .set-grid{ grid-template-columns:1fr 1fr !important; gap:10px; }
  .cert-sec .set-grid label[style*="grid-column"], #view-certs .set-grid label[style*="grid-column"]{ grid-column:1/-1 !important; }
  .cert-nav{ position:static; }
  .insp-row{ flex-wrap:wrap; }
  .insp-desc{ min-width:0; flex-basis:100%; }
  .insp-loc{ flex:1; width:auto; }
  .obs-row .obs-txt{ flex-basis:100%; }
  .insp-write{ margin-left:0; }
  .iw-row input{ flex:1; min-width:100px; }
  .cchk-row{ flex-wrap:wrap; }
}
@media (max-width:430px){
  .cert-sec .set-grid, #view-certs .set-grid{ grid-template-columns:1fr !important; }
  .cert-sec > h3:first-child{ font-size:12.5px; }
  .dash-bar .job-chip-badge{ font-size:12px; }
}

/* ============================================================
   CALM PASS v104 — less ink, one accent, quiet type
   ============================================================ */
/* collapsible sidebar: « docks it away, ☰ brings it back as an overlay */
.logo-row2{ display:flex; align-items:center; justify-content:space-between; padding-right:4px; }
.nav-collapse{ background:none; border:1px solid transparent; color:#7c8592; font:inherit; font-size:16px;
  border-radius:8px; padding:2px 9px; cursor:pointer; }
.nav-collapse:hover{ color:#f5f6f8; border-color:#2a2e37; }
body.nav-min .sidebar{ position:fixed; left:0; top:0; z-index:99; height:100vh; height:100dvh;
  transform:translateX(-110%); transition:transform .22s ease; box-shadow:8px 0 32px rgba(0,0,0,.5); width:240px; }
body.nav-min .sidebar.open{ transform:translateX(0); }
body.nav-min .menu-btn{ display:block; }
body.nav-min .menu-backdrop.open{ display:block; }
body.nav-min main{ padding-left:36px; }
@media (max-width:860px){ body.nav-min main{ padding-left:14px; } }

/* quiet headings: sentence case, charcoal, no bars, no gradients */
.panel h3, .cert-sec h3, .cert-sec > h3:first-child, .cert-check > h3:first-child{
  font-family:var(--font-ui) !important; font-size:13px !important; font-weight:650 !important;
  text-transform:none !important; letter-spacing:0 !important; color:var(--text) !important;
  background:none !important; border-bottom:1px solid var(--line); margin:-2px 0 12px !important;
  padding:0 0 8px !important; border-radius:0 !important;
}
.panel h3::before, .cert-sec h3::before, .cert-sec > h3:first-child::before, .cert-check > h3:first-child::before{ display:none !important; }
.cert-sec{ border-left:1px solid var(--line) !important; }
.tf-card-title{ text-transform:none; letter-spacing:0; font-size:13px; color:var(--text); font-weight:650; }
.tf-card-title::before{ display:none; }
.test-title{ text-transform:none !important; letter-spacing:0 !important; color:var(--muted) !important; font-size:12px !important; }
.sec-head{ background:none !important; border-bottom:1px solid var(--line) !important; color:var(--text) !important;
  text-transform:none !important; letter-spacing:0 !important; font-family:var(--font-ui) !important; }
/* explainer sentences off the screen (they live on in tooltips where set) */
.panel h3 .muted, .cert-sec h3 .muted, summary .muted.small, .tf-card-title .muted,
.view-head .lead, .sched-col-head .muted{ display:none !important; }
/* tables: lowercase quiet headers, grey badges */
.data-table th, table.mats th, .qg-mats th, .cert-table th{ text-transform:none; letter-spacing:.2px; font-size:11px; }
.tab-ct{ background:none !important; color:var(--muted) !important; border-radius:0 !important; padding:1px 2px !important; }
.tab.active .tab-ct{ background:none !important; color:var(--text) !important; }
/* flatter cards: border OR shadow, not both */
body.theme-light .panel, body.theme-light .cost-card, body.theme-light .kit-card,
body.theme-light .staff-card, body.theme-light .job-diary, body.theme-light .job-cust,
body.theme-light .insp-sec, body.theme-light .eng-card, body.theme-light .sched-col{ box-shadow:none; }
/* add-language: dashed but quiet */
button.btn-add, .nj-add{ border-color:#cfd4db !important; color:var(--text) !important; background:transparent !important; }
.nj-add::after{ background:#e5e7eb !important; color:#4b5563 !important; box-shadow:none !important; }
/* quote grid room band: grey, one gold tick */
tr.qg-room td{ background:var(--panel2) !important; border-left:3px solid #ffd60a; }
tr.qg-room .room-name{ font-family:var(--font-ui); font-size:13px; color:var(--text); }
.room-head{ background:var(--panel2) !important; border-left:3px solid #ffd60a !important; border-top:none !important; }
.room-name{ color:var(--text) !important; font-size:14px !important; }
/* gold hints under quote lines: grey until hover */
.qg-sub{ color:var(--muted); font-weight:500; }
.qg-sub:hover{ color:#8a6800; }
.qg-chev{ color:#a9b0ba; }
.qg-chev:hover, .qg-chev.on{ color:#8a6800; }
/* cert nav dots + cn-dots: gone (colour was decoration there) */
.cn-dot{ display:none; }
/* scheduler block window chips: quiet */
.sb-win{ background:var(--panel2); color:var(--muted); }

/* job description: one quiet box, AI behind the corner button (the SM8 pattern) */
.jd-box{ position:relative; margin-bottom:12px; }
.jd-box textarea{ resize:none; overflow:hidden; padding-right:52px; min-height:58px; }
.jd-ai{ position:absolute; right:10px; bottom:10px; width:32px; height:32px; border-radius:50%;
  border:1px solid #e8c400; background:#fff; color:#8a6800; font-size:15px; cursor:pointer;
  box-shadow:0 1px 3px rgba(16,24,40,.12); transition:all .12s; }
.jd-ai:hover{ background:#ffd60a; color:#16181d; transform:scale(1.06); }
body:not(.theme-light) .jd-ai{ background:var(--panel2); }
.jd-menu{ position:absolute; right:8px; bottom:48px; z-index:40; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(16,24,40,.16);
  display:flex; flex-direction:column; min-width:230px; overflow:hidden; }
.jd-menu button{ background:none; border:none; font:inherit; font-size:13.5px; color:var(--text);
  text-align:left; padding:11px 16px; cursor:pointer; border-bottom:1px solid var(--line); }
.jd-menu button:last-child{ border-bottom:none; }
.jd-menu button:hover{ background:rgba(255,221,51,.12); }
.jd-status{ font-size:12px; color:var(--muted); margin-top:4px; min-height:0; }

/* the one job description box: grows, collapses, builds quotes */
.jd-box textarea.jd-collapsed{ overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent); mask-image:linear-gradient(180deg,#000 60%,transparent); }
.jd-more{ display:block; margin:2px auto 0; background:none; border:none; font:inherit; font-size:12px;
  color:var(--muted); cursor:pointer; }
.jd-more:hover{ color:#8a6800; }
.jd-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
/* corner button while dictating: red, pulsing, tap to stop */
.jd-ai.rec{ background:#dc2626 !important; border-color:#dc2626 !important; color:#fff !important;
  animation:pulse 1.2s ease-in-out infinite; }
.jd-menu .jd-primary{ font-weight:700; background:rgba(255,221,51,.12); }
/* description tools: one quiet row, no popovers to fight the phone */
.jd-box textarea{ padding-right:14px; }
.jd-tools{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.jd-tools .btn.small{ padding:5px 11px; font-size:12px; }
.jd-ai, .jd-menu{ display:none !important; }
/* description box: one shell — the tools visibly belong to it */
.jd-shell{ border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; }
body.theme-light .jd-shell{ box-shadow:0 1px 3px rgba(16,24,40,.07); border-color:#d6dae1; }
.jd-shell textarea{ border:none !important; box-shadow:none !important; background:transparent !important;
  border-radius:0; min-height:96px; padding:12px 14px; }
.jd-shell textarea:focus{ box-shadow:none !important; }
.jd-shell .jd-tools{ margin:0; padding:8px 10px; border-top:1px solid var(--line); background:var(--panel2); }
body.theme-light .jd-shell .jd-tools{ background:#f7f8fa; }
.jd-more{ display:none !important; }

/* rich description editor */
.jd-fmt{ display:flex; gap:2px; flex-wrap:wrap; align-items:center; padding:6px 8px;
  border-bottom:1px solid var(--line); background:var(--panel2); }
body.theme-light .jd-fmt{ background:#f7f8fa; }
.jd-fmt button{ background:none; border:1px solid transparent; border-radius:6px; font:inherit; font-size:13px;
  width:30px; height:28px; cursor:pointer; color:var(--text); }
.jd-fmt button:hover{ background:#fff; border-color:#d6dae1; }
body:not(.theme-light) .jd-fmt button:hover{ background:var(--panel); border-color:var(--line); }
.jd-sel{ width:auto !important; font-size:12px; padding:3px 6px; border:1px solid transparent !important; background:none !important; }
.jd-sel:hover{ border-color:#d6dae1 !important; background:#fff !important; }
.jd-sep{ width:1px; height:18px; background:var(--line); margin:0 5px; }
.jd-hl{ background:#fff3b0; padding:0 3px; border-radius:3px; }
.jd-editor{ min-height:96px; padding:12px 14px; font:inherit; line-height:1.55; outline:none; }
.jd-editor:empty::before{ content:attr(data-ph); color:var(--muted); pointer-events:none; }
.jd-editor ul, .jd-editor ol{ margin:6px 0 6px 22px; }
.jd-editor a{ color:#0e7490; text-decoration:underline; }
.ej-desc{ margin:0 0 10px; font-size:14px; line-height:1.55; }
.ej-desc ul, .ej-desc ol{ margin:6px 0 6px 22px; }

/* the ☰ gets its own headroom — content starts below it, nothing overlaps */
body.nav-min main{ padding-top:64px; }
@media (max-width:860px){
  main{ padding-top:64px !important; }
  .view-head{ padding-left:16px; min-height:0; }   /* old left-shunt hack retired */
}
.menu-btn{ top:10px; left:10px; font-size:17px; padding:7px 12px; }
body.nav-min main{ padding-top:64px !important; }

/* the job header breathes: bigger row, bigger tabs, proper spacing */
.job-chip-row{ gap:12px; row-gap:10px; padding:6px 0 2px; }
.job-chip-row .btn.small{ padding:9px 16px; font-size:13.5px; }
.job-chip-badge{ font-size:15px; padding:8px 18px; }
.job-chip-row .status-pill{ font-size:12.5px; padding:6px 15px; }
.job-chip-row .queue-sel{ font-size:13px; padding:8px 12px; max-width:200px; }
.job-chip-row .autosave{ padding:6px 12px; }
/* job-card tabs: PAGES of the job card — folder tabs planted on a baseline.
   Curved tops, flat bottoms on the line, neighbours shingle behind; the one
   you're on sits proud in ink + yellow and punches through the line. */
.job-tabs{ margin-top:16px; display:flex; flex-wrap:wrap; gap:0; align-items:flex-end;
  background:none; border:none; border-radius:0; padding:0 6px;
  border-bottom:1px solid var(--line); }
.job-tabs .tab{ background:var(--panel2); border:1px solid var(--line); border-radius:14px 14px 0 0;
  padding:10px 18px 11px; font-size:13.5px; color:var(--muted);
  margin:0 0 -1px -9px; position:relative; z-index:1;
  box-shadow:none; transition:background .12s, color .12s; }
.job-tabs .tab:first-child{ margin-left:0; }
body.theme-light .job-tabs .tab{ background:#f0f0ea; border:1px solid #d6dae1; border-radius:14px 14px 0 0;
  margin-right:0; padding:10px 18px 11px; }
.job-tabs .tab:hover, body.theme-light .job-tabs .tab:hover{
  background:var(--panel); color:var(--text); z-index:2; transform:none; box-shadow:none; border-color:#b9c0ca; }
.job-tabs .tab:hover::after{ display:none; }
.job-tabs .tab.active, body.theme-light .job-tabs .tab.active{
  background:#16181d; border-color:#16181d; color:#ffdd33; font-weight:700;
  z-index:3; padding-top:12px; box-shadow:0 -2px 8px rgba(16,24,40,.15); }
.job-tabs .tab.active:hover{ background:#16181d; color:#ffdd33; }
.job-tabs .tab.active::after{ display:none; }
.job-tabs .tab-ct, .job-tabs .tab.active .tab-ct{
  background:#ffdd33 !important; color:#16181d !important; border-radius:10px !important;
  padding:1px 7px !important; min-width:19px; text-align:center !important; font-size:11.5px; margin-left:7px; }
.job-tabs .tab-ct.tab-ct-warn{ background:#e24b4a !important; color:#fff !important; }
.job-tabs .tab-action, body.theme-light .job-tabs .tab-action{
  border:1px dashed #b9c0ca; border-radius:16px; background:transparent; box-shadow:none;
  margin:0 0 7px 6px; padding:7px 14px; z-index:1; }
.job-tabs .tab-action:first-of-type{ margin-left:14px; }
.job-tabs .tab-action:hover{ background:var(--panel); z-index:1; }
/* panes no longer join onto block tabs — full radius, a little air */
.job-pane, #job-sheet{ border-radius:14px !important; margin-top:12px !important; }
.job-pane .sec-head{ border-radius:14px 14px 0 0 !important; }
.opt-bar{ margin-top:14px; padding:12px 16px; }
#job-sheet, .job-pane{ padding-top:20px !important; }

/* the job number is the headline (the Tradify lesson, our type) */
.job-crumb{ margin-bottom:10px; }
.job-head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 6px; }
.job-title{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.job-title h1{ font-family:var(--font-display); font-size:30px; font-weight:700; letter-spacing:-.5px; margin:0; }
.job-who{ font-size:15px; color:var(--muted); font-weight:600; }
.job-status{ font-size:13px !important; padding:7px 12px !important; font-weight:700; }
.job-head-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.job-tabs{ margin-top:20px; }
@media (max-width:700px){ .job-title h1{ font-size:24px; } .job-head{ gap:10px; } }

/* Overview: the job's front door — calm, four clear bands */
.ov-pane{ margin-bottom:12px; }
.ov-facts{ display:flex; gap:26px; flex-wrap:wrap; padding:4px 2px 14px; border-bottom:1px solid var(--line); }
.ov-facts span{ font-size:14.5px; font-weight:650; }
.ov-facts em{ display:block; font-style:normal; font-size:11px; color:var(--muted); font-weight:600; margin-bottom:2px; }
.ov-comms{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
.ov-comms .btn{ padding:9px 18px; }
.ov-comms .mini-sel{ min-width:170px; }
#jd-host-over{ padding:14px 0 2px; }
#jd-host-over .jd-box{ margin-bottom:0; }
.ov-timeline{ padding-top:12px; }
@media (max-width:700px){ .ov-facts{ gap:16px; } .ov-comms .btn{ flex:1; text-align:center; } }

/* rooms read as sections: deep groove before each, subtotal underlining each */
.quote-grid tbody tr.qg-room > td{ border-top:18px solid var(--bg) !important; }
.quote-grid tbody tr:first-child.qg-room > td{ border-top:none !important; }
tr.qg-subtotal > td{ border-top:1px solid var(--line); padding:10px 12px; font-size:13px;
  color:var(--muted); background:var(--panel); }
tr.qg-subtotal strong{ color:var(--text); font-family:var(--font-display); font-size:14.5px; }
tr.qg-subtotal:hover{ background:transparent !important; }
body.theme-light .quote-grid tbody tr.qg-room > td{ border-top-color:#eef0f4 !important; }
/* engineers do not get the office Home */
body.eng-mode .nav-btn[data-view="home"]{ display:none; }

/* ============================================================
   HOME BRIEFING — the front door reads like a morning brief,
   not a widget grid. One gradient moment per page, here only.
   ============================================================ */
.hb-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin:6px 0 24px; flex-wrap:wrap; }
.hb-kicker{ font-size:12px; color:var(--muted); letter-spacing:.04em; margin-bottom:6px; }
.hb-greet{ font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-.5px; margin:0; }
.hb-sum{ color:var(--muted); font-size:14px; margin:7px 0 0; max-width:560px; }
.hb-grad{ width:110px; height:3px; margin-top:14px; border-radius:2px;
  background:linear-gradient(100deg,#ffdd33,#3fe3ff); }
.hb-sec{ font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase;
  margin:26px 0 4px; }
.hb-row{ display:flex; align-items:center; gap:16px; padding:13px 2px; border-top:1px solid var(--line); cursor:pointer; }
.hb-row:hover{ background:rgba(14,116,144,.04); }
.hb-time{ font-family:var(--font-display); font-weight:500; font-size:15px; width:52px; flex-shrink:0; }
.hb-job{ font-weight:600; font-size:14px; }
.hb-val{ font-family:var(--font-display); font-weight:600; font-size:16px; }
.hb-empty{ color:var(--muted); padding:14px 2px; border-top:1px solid var(--line); font-size:13.5px; }
.hb-need{ display:flex; align-items:center; gap:10px; padding:10px 2px; border-top:1px solid var(--line); font-size:13.5px; flex-wrap:wrap; }
.hb-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.hb-need-txt{ flex:1; min-width:200px; }
.hb-need-act{ display:flex; gap:6px; flex-wrap:wrap; }
.hb-links{ display:flex; gap:8px 22px; flex-wrap:wrap; margin-top:26px; padding:12px 2px 0; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted); }
.hb-links span{ cursor:pointer; }
.hb-links span:hover{ color:var(--text); text-decoration:underline; }
.hb-links .hb-alert{ color:var(--red); font-weight:600; }
.hb-stats{ display:flex; gap:34px; align-items:flex-end; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.hb-stat{ cursor:pointer; }
.hb-fig{ font-family:var(--font-display); font-weight:600; font-size:22px; letter-spacing:-.3px; font-variant-numeric:tabular-nums; }
.hb-fig.hb-warm{ color:#b45309; }
.hb-lbl{ font-size:12px; color:var(--muted); margin-top:2px; }
.hb-periods{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; align-self:center; }
@media (max-width:860px){
  .hb-head{ margin-top:34px; }
  .hb-greet{ font-size:24px; }
  .hb-stats{ gap:22px; }
  .hb-periods{ margin-left:0; }
}

/* ---------- home v2: stat drop-downs, money chart, tasks fold ---------- */
.hb-chev{ display:inline-block; font-size:9px; transition:transform .15s; opacity:.6; }
.hb-stat.on .hb-chev{ transform:rotate(180deg); }
.hb-stat.on .hb-fig{ color:#8a6800; }
body:not(.theme-light) .hb-stat.on .hb-fig{ color:var(--amber); }
.hb-expand{ margin-top:10px; padding:2px 14px 8px; background:var(--panel2); border-radius:12px; }
.hb-expand-cap{ font-size:12px; color:var(--muted); padding:10px 2px 2px; }
.hb-expand .hb-row{ border-top-color:var(--line); }
.hb-expand .hb-row:first-of-type{ border-top:none; }
.hb-mini{ padding:9px 2px; }
.hb-expand-foot{ font-size:12.5px; color:var(--muted); padding:8px 2px 4px; }
.hb-expand-foot span{ cursor:pointer; }
.hb-expand-foot span:hover{ color:var(--text); text-decoration:underline; }
.hb-chart svg{ width:100%; height:auto; display:block; margin-top:6px; }
.hbc-won{ fill:#16181d; } body:not(.theme-light) .hbc-won{ fill:#f5f6f8; }
.hbc-paid{ fill:#ffd60a; }
.hbc-axis{ stroke:var(--line); stroke-width:1; }
.hbc-lbl{ fill:var(--muted); font-size:11px; font-family:inherit; }
.hb-legend{ display:flex; gap:18px; align-items:center; font-size:12px; color:var(--muted); margin-top:4px; }
.hb-legend .hbl{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.hbl-won{ background:#16181d; } body:not(.theme-light) .hbl-won{ background:#f5f6f8; }
.hbl-paid{ background:#ffd60a; }
.hb-sec-note{ text-transform:none; letter-spacing:0; font-weight:500; margin-left:10px; }
.hb-fold{ margin-top:26px; }
.hb-fold summary{ cursor:pointer; list-style:none; font-size:12px; font-weight:700; color:var(--muted);
  letter-spacing:.05em; text-transform:uppercase; padding-bottom:4px; }
.hb-fold summary::-webkit-details-marker{ display:none; }
.hb-fold summary::before{ content:'▸'; display:inline-block; margin-right:7px; transition:transform .15s; }
.hb-fold[open] summary::before{ transform:rotate(90deg); }
.hb-count{ text-transform:none; letter-spacing:0; font-weight:500; margin-left:6px; }
.hb-tick{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:none;
  color:var(--muted); font-size:11px; cursor:pointer; flex-shrink:0; line-height:1; }
.hb-tick:hover{ border-color:#059669; color:#059669; background:rgba(5,150,105,.08); }
.hb-late{ color:var(--red); font-weight:600; }
.hb-tlink{ color:#0e7490; font-weight:600; cursor:pointer; }
.hb-tlink:hover{ text-decoration:underline; }
.hb-taskadd{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 2px 2px; align-items:center; }
.hb-taskadd input[type=date], .hb-taskadd select{ width:auto; }
.hb-taskadd input:first-child{ flex:1; min-width:200px; }
@media (max-width:860px){ .hb-taskadd input:first-child{ min-width:100%; } }

/* ============================================================
   CALM SWEEP — the Home cleanness, everywhere. In-flow cards
   keep their hairline but lose the drop shadow; floating things
   (modals, menus, FAB) keep theirs. Section headings whisper.
   ============================================================ */
body.theme-light .panel, body.theme-light .line, body.theme-light .job-row, body.theme-light .cost-card,
body.theme-light .kit-card, body.theme-light .cust-card, body.theme-light .staff-card, body.theme-light .insp-sec,
body.theme-light .job-diary, body.theme-light .job-cust, body.theme-light .cal-cell, body.theme-light .job-box,
body.theme-light .table-card, body.theme-light .saved-row, body.theme-light .ovh-cat, body.theme-light .dash-fold,
body.theme-light #cal-body, body.theme-light #job-sheet, body.theme-light .eng-card, body.theme-light .sched-col{
  box-shadow:none; }
body.theme-light .line:hover, body.theme-light .job-row:hover, body.theme-light .kit-card:hover,
body.theme-light .cust-card:hover{ box-shadow:none; border-color:#cdd3db; }
body.theme-light .btn{ box-shadow:none; }
body.theme-light .btn-amber{ box-shadow:none; }
body.theme-light .btn-amber:hover{ box-shadow:none; }
/* section headings match the Home briefing voice */
body.theme-light .section-h, body.theme-light .panel > h3, body.theme-light .cert-sec > h3:first-child{
  font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; font-family:var(--font-ui); }
/* job card + panes take the full-radius editorial shape (tabs are underlines now, nothing to join to) */
body.theme-light #job-sheet, body.theme-light .job-pane{ border-radius:14px; margin-top:10px; }
body.theme-light .job-pane .sec-head{ border-radius:14px 14px 0 0; }
/* chart chips + cyan leads bar */
.hb-chart-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 2px; }
.hbc-cyan{ fill:#12b7d8; }
.hbl-cyan{ background:#12b7d8; }
.hbc-val{ fill:var(--muted); font-size:10.5px; font-family:inherit; }

/* ---------- job card: customer messages panel ---------- */
.ov-msgs{ margin-top:16px; border:1px solid var(--line); border-radius:14px; padding:14px 16px 16px; background:var(--panel); }
.ov-msgs-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ov-msgs-title{ font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
.ov-msgs-title .muted{ text-transform:none; letter-spacing:0; font-weight:500; }
.ov-chans{ display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 0; }
.ov-chan{ background:none; border:1px solid var(--line); border-radius:20px; padding:6px 14px;
  font:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; }
.ov-chan:hover{ border-color:var(--cc); color:var(--text); }
.ov-chan.on{ color:var(--cc); border-color:var(--cc);
  background:color-mix(in srgb, var(--cc) 10%, transparent); }
.ov-thread{ margin-top:12px; border-top:1px solid var(--line); padding-top:12px; min-height:64px;
  max-height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.ov-none{ color:var(--muted); font-size:13px; margin:14px 4px; }
.ov-when{ color:var(--muted); font-size:11px; white-space:nowrap; }
/* phone: a call log */
.ov-call{ display:flex; align-items:baseline; gap:10px; padding:7px 4px; border-bottom:1px dashed var(--line); font-size:13.5px; }
.ov-call:last-child{ border-bottom:none; }
.ov-call-txt{ flex:1; min-width:0; }
/* text & whatsapp: a conversation, ours on the right */
.ov-thread-chat{ align-items:flex-end; }
.ov-bub-row{ max-width:78%; }
.ov-bub{ background:color-mix(in srgb, var(--cc) 14%, var(--panel)); border:1px solid color-mix(in srgb, var(--cc) 30%, transparent);
  border-radius:14px 14px 4px 14px; padding:8px 12px; font-size:13.5px; }
.ov-bub .ov-when{ display:block; text-align:right; margin-top:3px; }
/* email: an outbox */
.ov-mail{ border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.ov-mail-top{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; }
.ov-mail-snip{ color:var(--muted); font-size:12.5px; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* compose */
.ov-compose{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.ov-compose input{ flex:1; min-width:180px; }
.ov-compose-col{ flex-direction:column; align-items:stretch; }
.ov-compose-row{ display:flex; gap:8px; flex-wrap:wrap; }
.ov-compose-row select{ width:auto; }
.ov-compose-row input{ flex:1; min-width:180px; }
.ov-compose-row textarea{ flex:1; min-width:200px; resize:vertical; }
.ov-compose-row .btn-amber{ align-self:flex-end; }
@media (max-width:860px){ .ov-bub-row{ max-width:92%; } }

/* ============================================================
   PAPER TRAIL — the whole job at a glance, floating on the right.
   Collapsed: a pill on the right edge that follows the scroll.
   Open: a floating panel over the page. Works on the phone too.
   ============================================================ */
.job-rail{ display:none; }
#view-quote.active .job-rail{ display:contents; }
.pt-fab{ position:fixed; right:0; top:38%; z-index:96; display:flex; align-items:center; gap:6px;
  background:#16181d; color:#ffdd33; border:none; border-radius:12px 0 0 12px;
  font:inherit; font-size:15px; font-weight:700; padding:10px 10px 10px 12px; cursor:pointer;
  box-shadow:-4px 4px 18px rgba(0,0,0,.22); }
.pt-lab{ font-size:13px; max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  transition:max-width .18s ease, opacity .15s ease; }
.pt-fab:hover .pt-lab{ max-width:90px; opacity:1; }
.pt-fab.hidden{ display:none; }
.pt-ct{ background:#ffdd33; color:#16181d; border-radius:10px; padding:0 7px; font-size:11px; font-weight:700; }
.pt-panel{ position:fixed; right:0; top:0; bottom:0; width:390px; max-width:94%; z-index:97;
  background:var(--panel); border-left:1px solid var(--line);
  box-shadow:-16px 0 48px rgba(8,9,11,.25);
  transform:translateX(105%); transition:transform .22s ease;
  padding:14px 16px 60px; overflow-y:auto; }
.pt-panel.open{ transform:none; }
.pt-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
  position:sticky; top:-14px; background:var(--panel); padding:6px 0; z-index:3; }
.pt-close{ font-size:18px; color:var(--muted); }
.pt-close:hover{ color:var(--text); background:var(--panel2); }
.pt-panel .jr-day{ background:var(--panel); }
.jr-head{ font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin:6px 0 10px; }
.jr-head .muted{ text-transform:none; letter-spacing:0; font-weight:500; }
.jr-add{ display:flex; gap:6px; margin-bottom:10px; }
.jr-add input[type=text], .jr-add input:not([type]){ flex:1; font-size:13px; }
.jr-add .btn{ flex-shrink:0; }
.jr-files{ margin-bottom:12px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.jr-files summary{ cursor:pointer; list-style:none; font-size:12.5px; font-weight:600; color:var(--muted); }
.jr-files summary::-webkit-details-marker{ display:none; }
.jr-file-grid{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.jr-thumb img{ width:52px; height:52px; object-fit:cover; border-radius:8px; cursor:pointer; border:1px solid var(--line); }
.jr-att{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:16px;
  padding:3px 10px; font-size:11.5px; color:var(--text); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jr-att:hover{ border-color:#6d6ae8; text-decoration:none; }
.jr-day{ font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.05em; text-transform:uppercase;
  margin:14px 0 6px; position:sticky; top:0; background:var(--bg); padding:4px 0; z-index:2; }
/* SM8-style rhythm: open rows, hairline separators, tinted icon medallions */
.jr-ev{ display:flex; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line); }
.jr-ev:last-child{ border-bottom:none; }
.jr-ico{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; background:color-mix(in srgb, var(--tt,#8a8f98) 14%, transparent); }
.jr-main{ flex:1; min-width:0; }
.jr-title{ font-size:13.5px; font-weight:600; line-height:1.45; }
.jr-meta{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.jr-body{ font-size:12.5px; color:var(--text); opacity:.85; margin-top:6px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.jr-photos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.jr-photos img{ width:58px; height:58px; object-fit:cover; border-radius:8px; cursor:pointer; border:1px solid var(--line); }
.jr-atts{ display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
/* panel views: All / Photos / Files */
.pt-views{ display:flex; gap:6px; margin:2px 0 6px; }
.pt-photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.pt-photo{ position:relative; }
.pt-photo img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; cursor:pointer; border:1px solid var(--line); display:block; }
.pt-photo-d{ position:absolute; left:6px; bottom:6px; background:rgba(8,9,11,.65); color:#f5f6f8;
  font-size:10px; padding:1px 7px; border-radius:8px; }
.pt-file-list{ margin-top:6px; }
.pt-file{ display:flex; gap:12px; align-items:center; padding:11px 2px; border-bottom:1px solid var(--line); color:var(--text); }
.pt-file:last-child{ border-bottom:none; }
.pt-file:hover{ text-decoration:none; background:rgba(109,106,232,.05); }
.pt-file-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pt-file-name{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-file-dl{ color:var(--muted); font-size:15px; }
/* the Activity tab shares the feed */
.job-diary .jr-feed{ margin-top:8px; }
/* email attachment picker */
.ov-attach{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ov-attach-lab{ font-size:12px; color:var(--muted); }
.ov-att{ display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:16px;
  padding:4px 11px; font-size:12px; color:var(--muted); cursor:pointer; }
.ov-att:hover{ border-color:#6d6ae8; }
.ov-att.on{ color:#6d6ae8; border-color:#6d6ae8; background:color-mix(in srgb, #6d6ae8 10%, transparent); }

/* ---------- the bell: notifications on every page, top right ---------- */
/* quiet when there's nothing; electric and pulsing when there is.
   The lane is part of the page layout — content starts below it, so the
   bell owns the top-right of every page without overlapping a thing. */
.bell-lane{ position:sticky; top:56px; z-index:95; height:0; display:flex; justify-content:flex-end; }
main{ padding-top:56px !important; }
.bell-btn{ position:relative; margin-top:-46px; width:38px; height:38px;
  border-radius:50%; background:var(--panel); color:var(--muted); border:1px solid var(--line);
  font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  filter:grayscale(1) opacity(.75); transition:all .15s; }
.bell-btn:hover{ border-color:var(--muted); filter:grayscale(1) opacity(1); }
.bell-btn.has-new{ background:#ffdd33; border-color:#e8c400; filter:none;
  box-shadow:0 2px 10px rgba(232,196,0,.4); animation:bell-pulse 2.2s ease-out infinite; }
@keyframes bell-pulse{
  0%{ box-shadow:0 2px 10px rgba(232,196,0,.4), 0 0 0 0 rgba(255,221,51,.55); }
  70%{ box-shadow:0 2px 10px rgba(232,196,0,.4), 0 0 0 11px rgba(255,221,51,0); }
  100%{ box-shadow:0 2px 10px rgba(232,196,0,.4), 0 0 0 0 rgba(255,221,51,0); }
}
.bell-btn .ops-badge{ position:absolute; top:-7px; right:-7px; background:#16181d; color:#ffdd33;
  border:2px solid var(--bg); border-radius:11px; min-width:21px; height:21px; padding:0 5px;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.ops-notif .hb-tick{ align-self:center; }
.ops-notif.is-done{ opacity:.5; }
.ops-notif.is-done .on-main span:first-child{ text-decoration:line-through; }

/* ---------- quote grid, calm mode ---------- */
.qg-bar{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 8px; }
/* £ Workings off: Hrs/Buy/Mk%/Margin tuck away — the customer-shaped view stays */
.qg-simple thead th:nth-child(n+4):nth-child(-n+7),
.qg-simple tr.qg-row > td:nth-child(n+4):nth-child(-n+7){ display:none; }
/* inputs sit quiet as text until you reach for them */
.quote-grid input.mini, .quote-grid select{ background:transparent; border-color:transparent; box-shadow:none; }
.quote-grid tr:hover input.mini, .quote-grid tr:hover select{ border-color:var(--line); background:var(--panel); }
.quote-grid input.mini:focus, .quote-grid select:focus{ border-color:#e8c400; background:var(--panel); }
body.theme-light .quote-grid input.mini, body.theme-light .quote-grid select{ background:transparent; border-color:transparent; box-shadow:none; }
body.theme-light .quote-grid tr:hover input.mini, body.theme-light .quote-grid tr:hover select{ border-color:#d6dae1; background:#fff; }
body.theme-light .quote-grid input.mini:focus, body.theme-light .quote-grid select:focus{ border-color:#e8c400; background:#fff; }
/* room bar: tools appear when you're there, not before */
@media (hover:hover){
  tr.qg-room .btn, tr.qg-room .icon-btn{ opacity:0; transition:opacity .12s; }
  tr.qg-room:hover .btn, tr.qg-room:hover .icon-btn,
  tr.qg-room:focus-within .btn, tr.qg-room:focus-within .icon-btn{ opacity:1; }
}
/* a touch more air between lines */
.quote-grid tr.qg-row > td{ padding-top:12px; padding-bottom:12px; }

/* booking summary on the Overview + the Bookings pane */
.ov-booked{ display:flex; align-items:center; gap:9px; margin-top:12px; padding:10px 14px;
  border:1px solid var(--line); border-radius:12px; font-size:13.5px; background:var(--panel); }
.ov-booked .btn{ margin-left:auto; }
.bk-rows{ max-width:520px; }
.bk-row{ display:flex; gap:14px; padding:9px 2px; border-bottom:1px dashed var(--line); font-size:13.5px; align-items:center; }
.bk-row:last-child{ border-bottom:none; }
.bk-row em{ font-style:normal; color:var(--muted); font-size:12px; width:74px; flex-shrink:0; }

/* ---------- purchase orders ---------- */
.po-new{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.po-or{ font-size:12px; color:var(--muted); }
.po-card{ border:1px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--panel); }
.po-head{ display:flex; gap:12px; align-items:center; padding:11px 14px; cursor:pointer; flex-wrap:wrap; }
.po-head:hover{ background:var(--panel2); border-radius:12px; }
.po-no{ font-family:var(--font-display); font-size:14.5px; letter-spacing:-.2px; }
.po-sup{ color:var(--muted); font-size:13px; flex:1; min-width:120px; }
.po-tot{ font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; }
.po-edit{ padding:2px 14px 14px; border-top:1px solid var(--line); }
.po-fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin:12px 0; }
.po-table input.mini{ width:100%; }
.po-table .po-code{ font-variant-numeric:tabular-nums; }
.po-table .po-nocode{ border-style:dashed; }
.po-actions{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:12px; }

/* ---------- journeys settings editor ---------- */
.jset-rows{ margin:10px 0 8px; }
.jset-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.jset-row input:not([type=number]){ flex:1; min-width:160px; }
.jset-row select{ width:auto; max-width:220px; }
.jset-seq{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
#journey-panel h3{ margin-bottom:4px; }

/* ---------- marketing ---------- */
.mk-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; }
.mk-src{ display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer; }
.mk-src-name{ width:130px; flex-shrink:0; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mk-bar{ flex:1; height:10px; background:var(--panel2); border-radius:6px; overflow:hidden; }
.mk-bar i{ display:block; height:100%; background:linear-gradient(100deg,#ffdd33,#3fe3ff); border-radius:6px; }
.mk-src-n{ font-size:12px; color:var(--muted); white-space:nowrap; }
.mk-status{ display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.mk-int{ display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px dashed var(--line); }
.mk-int:last-of-type{ border-bottom:none; }
.mk-int strong{ width:170px; flex-shrink:0; }
.mk-int .muted{ flex:1; }
.mk-grid .panel label{ margin-top:8px; }
/* inbound texts sit on the left, grey — like a real thread */
.ov-bub-row-in{ align-self:flex-start; }
.ov-bub-in{ background:var(--panel2); border-color:var(--line); border-radius:14px 14px 14px 4px; }
.ov-bub-in .ov-when{ text-align:left; }

/* ---------- conversations inbox ---------- */
.cv-layout{ display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:900px){ .cv-layout{ grid-template-columns:1fr; } .cv-thread{ order:-1; } }
.cv-list{ border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; max-height:72vh; overflow-y:auto; }
.cv-row{ display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; }
.cv-row:last-child{ border-bottom:none; }
.cv-row:hover{ background:var(--panel2); }
.cv-row.cv-on{ background:var(--panel2); box-shadow:inset 3px 0 0 #ffd60a; }
.cv-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cv-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cv-name{ font-size:13.5px; font-weight:600; }
.cv-prev{ font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-needs .cv-prev{ color:var(--text); font-weight:600; }
.cv-when{ font-size:11px; color:var(--muted); flex-shrink:0; }
.cv-thread{ border:1px solid var(--line); border-radius:14px; background:var(--panel); display:flex; flex-direction:column; max-height:72vh; }
.cv-empty{ display:flex; align-items:center; justify-content:center; min-height:200px; border:1px dashed var(--line); border-radius:14px; }
.cv-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cv-msgs{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px; min-height:180px; }
.cv-draft{ padding:10px 16px; border-top:1px dashed var(--line); font-size:13px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:color-mix(in srgb,#6d6ae8 6%,transparent); }
.cv-compose{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); }
.cv-compose textarea{ flex:1; resize:none; }

/* ---------- command palette (⌘K) ---------- */
#pal-wrap{ display:none; position:fixed; inset:0; background:rgba(8,9,11,.5); z-index:200; padding:10vh 16px 0; }
#pal-wrap.open{ display:flex; justify-content:center; align-items:flex-start; }
#pal-box{ width:640px; max-width:100%; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 80px rgba(8,9,11,.4); overflow:hidden; }
#pal-input{ width:100%; border:none; border-bottom:1px solid var(--line); border-radius:0;
  padding:16px 18px; font-size:15px; background:var(--panel); }
#pal-input:focus{ outline:none; box-shadow:none; border-color:var(--line); }
#pal-results{ max-height:52vh; overflow-y:auto; padding:6px; }
.pal-sec{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:10px 12px 4px; }
.pal-row{ display:flex; flex-direction:column; gap:1px; padding:9px 12px; border-radius:10px; cursor:pointer; font-size:14px; }
.pal-row:hover, .pal-row.on{ background:var(--panel2); box-shadow:inset 3px 0 0 #ffd60a; }
.pal-sub{ font-size:12px; color:var(--muted); }
.pal-hint{ color:var(--muted); font-size:13px; padding:16px 14px; margin:0; }
.pal-btn{ background:none; border:none; color:var(--muted); font-size:14px; cursor:pointer; padding:4px 6px; border-radius:8px; }
.pal-btn:hover{ background:var(--panel2); color:var(--text); }
/* ---------- doc accents + tax blocks ---------- */
.cq-creds{ display:flex; gap:8px 18px; flex-wrap:wrap; margin:12px 0 4px; padding:10px 14px;
  border:1px solid var(--cqa,#16181d); border-radius:10px; font-size:12.5px; font-weight:600; }
.cq-creds-note{ color:#666; font-weight:400; }
.cq-cis span:last-child{ color:#b45309; font-weight:700; }
.cq-reverse{ border:2px solid var(--cqa,#16181d); border-radius:10px; padding:10px 14px !important; }
.cq-doc .cq-lab{ color:var(--cqa,#16181d); }
.cq-doc .cq-grand{ border-color:var(--cqa,#16181d); }
.cq-doc .cq-room td{ color:var(--cqa,#16181d); }

/* ---------- setup guide (bottom-left) + stages ---------- */
#setup-card{ position:fixed; left:16px; bottom:16px; z-index:94; width:min(330px,calc(100vw - 32px));
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 12px 40px rgba(8,9,11,.25); padding:14px 14px 10px; }
#setup-card.hidden{ display:none; }
#setup-card.collapsed{ background:none; border:none; box-shadow:none; padding:0; width:auto; }
.setup-chip{ background:#16181d; color:#ffdd33; border:none; border-radius:20px; padding:9px 16px;
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.25); }
.setup-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.setup-prog{ height:5px; background:var(--panel2); border-radius:3px; overflow:hidden; margin-bottom:8px; }
.setup-prog i{ display:block; height:100%; background:linear-gradient(100deg,#ffdd33,#3fe3ff); border-radius:3px; transition:width .3s; }
.setup-list{ max-height:290px; overflow-y:auto; }
.setup-row{ display:flex; gap:9px; align-items:flex-start; padding:6px 0; border-top:1px dashed var(--line); }
.setup-row .hb-tick.on, .setup-row.done .hb-tick{ border-color:#059669; color:#059669; background:rgba(5,150,105,.1); }
.setup-txt{ display:flex; flex-direction:column; cursor:pointer; font-size:12.5px; line-height:1.35; }
.setup-row.done .setup-txt strong{ text-decoration:line-through; opacity:.6; }
.setup-txt:hover strong{ text-decoration:underline; }
@media (max-width:860px){ #setup-card{ bottom:70px; } }
.stage-bar{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:6px 0; }
.stage-row{ display:flex; gap:8px; align-items:center; margin-bottom:5px; }
.stage-row input:first-child{ flex:1; }
.cq-stages td{ padding:6px 8px; }

/* ---------- never trapped in the document again ---------- */
#customer-modal .modal-card{ position:relative; }
.doc-close{ position:sticky; top:8px; float:right; margin:0 0 -40px; z-index:30;
  width:38px; height:38px; border-radius:50%; background:#16181d; color:#f5f6f8;
  border:none; font-size:15px; cursor:pointer; box-shadow:0 4px 14px rgba(8,9,11,.3); }
.doc-close:hover{ background:#e24b4a; }
#customer-modal .modal-toolbar{ position:sticky; top:0; z-index:20; background:var(--panel);
  padding-top:8px; padding-bottom:8px; }

/* document typefaces + brand in the sidebar */
.cq-doc.cq-font-classic, .cq-doc.cq-font-classic .cq-biz{ font-family:Georgia,'Times New Roman',serif; }
.cq-doc.cq-font-clean, .cq-doc.cq-font-clean .cq-biz{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.cq-doc.cq-logo-large .cq-logo{ max-height:110px; max-width:280px; }
#side-brand{ display:flex; align-items:center; gap:8px; margin-bottom:10px; min-height:0; }
#side-brand:empty{ display:none; }
#side-brand img{ max-height:30px; max-width:110px; background:#fff; border-radius:6px; padding:2px 5px; }
#side-brand span{ font-size:11.5px; color:#c8cdd5; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* setup ticks tell the truth: empty until done */
.setup-row .hb-tick{ color:transparent; }
.setup-row .hb-tick:hover{ color:var(--muted); }
.setup-row.done .hb-tick, .setup-row .hb-tick.on{ color:#059669; }

/* ---------- cloud login gate ---------- */
#cloud-gate{ position:fixed; inset:0; z-index:300; background:#0d0f13;
  display:flex; align-items:center; justify-content:center; padding:20px; }
.cg-card{ width:min(400px,100%); background:#14161c; border:1px solid #272b33; border-radius:20px;
  padding:34px 30px 22px; display:flex; flex-direction:column; gap:10px; }
.cg-logo{ font-family:var(--font-display); font-size:26px; font-weight:700; color:#f5f6f8; text-align:center; }
.cg-logo em{ color:#ffdd33; font-style:normal; }
.cg-sub{ color:#9aa1ab; text-align:center; margin:0 0 10px; font-size:14px; }
#cloud-gate input{ background:#0d0f13; border:1px solid #272b33; color:#f5f6f8; border-radius:10px;
  padding:12px 14px; font:inherit; }
#cloud-gate input:focus{ outline:none; border-color:#ffdd33; }
.cg-btn{ width:100%; padding:12px !important; font-size:14px !important; }
.cg-msg{ min-height:18px; color:#3fe3ff; font-size:13px; text-align:center; margin:0; }
.cg-foot{ color:#5f6570; font-size:11px; text-align:center; margin:14px 0 0; }
.cg-trust{ display:flex; align-items:center; gap:8px; color:#9aa1ab; font-size:13px; justify-content:center; }
.cg-trust input{ width:auto; accent-color:#ffdd33; }
.cg-orgs{ display:flex; flex-direction:column; gap:6px; max-height:44vh; overflow:auto; margin:4px 0 8px; }
.cg-org{ display:flex; align-items:center; gap:10px; background:#0d0f13; border:1px solid #272b33;
  border-radius:10px; padding:10px 12px; color:#f5f6f8; }
.cg-org .muted{ color:#9aa1ab; }
#cloud-badge{ display:block; font-size:11px; margin-bottom:6px; }
#cloud-acct{ margin-bottom:4px; }

/* ---------- job type on the card + new-job category step + journeys design ---------- */
.cat-sel{ max-width:210px; color:#6d6ae8 !important; border-color:#6d6ae855 !important; font-weight:700; }
.nj-cat-block{ grid-column:1/-1; display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:2px; }
.nj-cat-lab{ font-size:12px; color:var(--muted); font-weight:600; }
.nj-side{ display:flex; gap:6px; }
#nj-cat{ width:auto; min-width:220px; }
.jny-cats{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.jny-cat-group{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.jny-cat-lab{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; width:86px; flex-shrink:0; }
.jny-ct{ background:#ffdd33; color:#16181d; border-radius:8px; padding:0 5px; font-size:10px; font-weight:700; }
.jny-ai-card{ border:1px dashed #6d6ae8; border-radius:14px; padding:14px 16px; background:color-mix(in srgb,#6d6ae8 5%,transparent); }
.jny-ai-head{ font-size:13px; font-weight:700; margin-bottom:8px; }
.jny-ai-card textarea{ width:100%; }
.jny-ai-row{ display:flex; gap:10px; align-items:center; margin-top:8px; }
.jny-steps{ margin:8px 0; }
.jny-step{ display:flex; gap:9px; align-items:center; margin-bottom:6px; }
.jny-step input{ flex:1; min-width:140px; }
.jny-step select{ width:auto; max-width:210px; }
.jny-n{ width:24px; height:24px; border-radius:50%; background:var(--panel2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.jny-then{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.jny-seq-card{ display:flex; gap:12px; border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:8px; }
.jny-day{ display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; }
.jny-day span{ font-size:10px; color:var(--muted); text-transform:uppercase; }
.jny-day input{ width:52px; text-align:center; font-weight:700; }
.jny-seq-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.set-tabs{ margin-bottom:16px; }
.set-tabwrap > h3:first-child{ margin-top:4px; }

/* labour is the top line of every kit — where the pricing thinking happens */
.qg-labrow td{ background:color-mix(in srgb, #ffdd33 7%, transparent); border-bottom:2px solid var(--line) !important; }
.qg-labrow .suffix input{ font-weight:700; }

/* inline doc pane + send modal */
.doc-pane #cq-doc{ margin-top:14px; border:1px solid var(--line); border-radius:14px; padding:26px 30px; background:#fff; }
#send-modal .modal-card{ max-width:640px; }
#send-modal label{ margin-top:10px; }
#send-modal textarea{ font-size:13.5px; line-height:1.5; }

/* proposal template + section modes */
.room-mode{ font-size:11px; max-width:190px; margin-left:8px; }
.room-mode-on{ color:#6d6ae8 !important; border-color:#6d6ae855 !important; font-weight:700; }
.cqp-sec{ margin:18px 0 6px; }
.cqp-title{ font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--cqa,#16181d);
  border-bottom:2px solid var(--cqa,#16181d); padding-bottom:5px; margin-bottom:8px; }
.cqp-mode{ font-family:var(--font-ui); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#666; margin-left:8px; }
.cqp-intro{ font-size:13px; color:#444; margin:4px 0 10px; }
.cqp-subonly{ display:flex; justify-content:space-between; gap:14px; padding:9px 2px; font-size:13.5px; }

/* the customer document rides as a slim bar under the builder */
.doc-slim{ margin-top:14px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); }
.doc-slim-bar{ cursor:pointer; border-radius:0 !important; margin:0 !important; }
.doc-slim-bar:hover{ background:var(--panel2) !important; }
.doc-slim-chev{ font-size:11px; color:var(--muted); }
#doc-inline-quote #cq-doc{ max-height:70vh; overflow-y:auto; }

/* every quote line is its own thing — give them a proper break */
.quote-grid tbody tr.qg-row > td{ border-top:10px solid var(--bg) !important; }
.quote-grid tbody tr:first-child.qg-row > td{ border-top:none !important; }
.quote-grid tbody tr.qg-room + tr.qg-row > td{ border-top-width:6px !important; }
body.theme-light .quote-grid tbody tr.qg-row > td{ border-top-color:#f7f7f4 !important; }
body:not(.theme-light) .quote-grid tbody tr.qg-row > td{ border-top-color:var(--bg) !important; }
/* the expanded details stay glued to their line */
.quote-grid tr.qg-exp > td{ border-top:none !important; }

/* ============================================================
   COMPLETE line separation: every quote line is its own card.
   The grid table goes transparent; each row carries its own
   border + corners; spacer rows let the page show through.
   ============================================================ */
.quote-grid{ border-collapse:separate !important; border-spacing:0 !important; }
body.theme-light .qg-card, .qg-card{ background:transparent !important; border:none !important; box-shadow:none !important; overflow:visible; }
.qg-card .dt-wrap{ overflow-x:auto; }
.quote-grid thead th{ background:transparent !important; border-bottom:none !important; }
.qg-gap > td{ height:14px !important; background:transparent !important; border:none !important; padding:0 !important; }
.qg-gap-lg > td{ height:22px !important; }
/* the line card */
.quote-grid tbody tr.qg-row > td{ background:var(--panel) !important;
  border-top:1px solid var(--line) !important; border-bottom:1px solid var(--line) !important; }
.quote-grid tbody tr.qg-row > td:first-child{ border-left:1px solid var(--line) !important; border-top-left-radius:12px; border-bottom-left-radius:12px; }
.quote-grid tbody tr.qg-row > td:last-child{ border-right:1px solid var(--line) !important; border-top-right-radius:12px; border-bottom-right-radius:12px; }
/* an open line hands its bottom edge to the expansion — one card, line + details */
.quote-grid tbody tr.qg-row:has(+ tr.qg-exp) > td{ border-bottom:none !important; }
.quote-grid tbody tr.qg-row:has(+ tr.qg-exp) > td:first-child{ border-bottom-left-radius:0; }
.quote-grid tbody tr.qg-row:has(+ tr.qg-exp) > td:last-child{ border-bottom-right-radius:0; }
.quote-grid tr.qg-exp > td{ background:var(--panel) !important; border:1px solid var(--line) !important; border-top:none !important; border-radius:0 0 12px 12px; }
/* section bands + subtotals sit on the page, not in cards */
.quote-grid tr.qg-room > td{ background:transparent !important; border:none !important; padding-left:2px; }
.quote-grid tr.qg-subtotal > td{ background:transparent !important; border:none !important; }
body.theme-light .quote-grid tbody tr.qg-row > td{ border-top-color:#d6dae1 !important; border-bottom-color:#d6dae1 !important; }
body.theme-light .quote-grid tbody tr.qg-row > td:first-child{ border-left-color:#d6dae1 !important; }
body.theme-light .quote-grid tbody tr.qg-row > td:last-child{ border-right-color:#d6dae1 !important; }
body.theme-light .quote-grid tr.qg-exp > td{ border-color:#d6dae1 !important; border-top:none !important; }

/* choice dots sit LEFT of the text, never centred above it */
.cq-opt input[type=radio], .cq-opt input[type=checkbox]{
  width:18px !important; height:18px; flex:0 0 18px; margin:2px 0 0; accent-color:var(--cqa,#16181d); }
.cq-opt{ flex-direction:row !important; align-items:flex-start !important; }

/* the customer document lives in the LEFT column, under the lines, beside the totals */
.quote-main{ min-width:0; display:flex; flex-direction:column; gap:14px; }
/* choice dot: vertically centred in the card, text pushed right */
.cq-opt{ align-items:center !important; gap:16px !important; }
.cq-opt input[type=radio], .cq-opt input[type=checkbox]{ margin:0 !important; }

/* ===== v179: the guide rail — one quiet next step under the builder ===== */
.qg-next{ display:flex; align-items:center; gap:12px; margin-top:14px; padding:11px 16px;
  border:1px solid var(--line); border-left:4px solid #ffd60a; border-radius:10px; background:var(--panel); }
.qg-next-txt{ flex:1; font-size:13.5px; }
body.theme-light .qg-next{ border-left-color:#e8c400; }

/* ===== v179: rates rail folds to a summary line ===== */
.rates-fold > summary{ cursor:pointer; list-style:none; }
.rates-fold > summary::-webkit-details-marker{ display:none; }
.rates-fold > summary::after{ content:'▸'; float:right; color:var(--muted); font-size:12px; }
.rates-fold[open] > summary::after{ content:'▾'; }
.rates-fold #rates-panel{ margin-top:12px; }

/* ===== v179: mobile — the quote grid fits, the toolbar calms down, floaters dock ===== */
@media (max-width:640px){
  .quote-grid tbody tr.qg-row td:first-child{ min-width:110px; font-size:13px; }
  .quote-grid input.mini{ width:42px; padding:6px 4px; }
  .quote-grid td{ padding:7px 4px; }
  .quote-grid .qg-variant{ max-width:120px; }
  /* description box: two-line toolbar only while you're actually writing */
  .jd-fmt{ display:none; }
  .jd-shell:focus-within .jd-fmt{ display:flex; flex-wrap:wrap; }
  /* paper trail chip drops to the bottom corner — clear of £ Workings */
  .pt-fab{ top:auto !important; bottom:84px; }
}

/* ===== v180: the one-storyline quote page (quotebar.js) ===== */
body.qb-new .qb-hidden{ display:none !important; }
body.qb-new #view-quote .doc-slim-bar{ display:none; }         /* preview/send ride the money bar now */
body.qb-new #view-quote .qg-bar{ display:none; }               /* line count + workings chip → drawer */
body.qb-new #view-quote .qg-next{ }                            /* restyled inside the bar */
.qb-desc{ display:flex; align-items:center; gap:10px; border:1.5px dashed var(--line); border-radius:12px;
  padding:10px 16px; margin:0 0 14px; color:var(--muted); font-size:13.5px; cursor:pointer; background:var(--panel); }
.qb-desc:hover{ border-color:#d9a900; }
.qb-desc-t{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.qb-desc-go{ font-size:12px; font-weight:700; }
.qb-desc-close{ margin-top:8px; }
.qb-addbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; border:1.5px dashed var(--line);
  border-radius:12px; padding:9px 14px; margin:14px 0 10px; background:var(--panel); }
.qb-plus{ font-size:19px; font-weight:800; color:#d9a900; }
.qb-addbar input{ width:100%; border:none; background:transparent; font-size:14px; padding:6px 2px; }
.qb-addbar input:focus{ outline:none; }
.qb-results{ position:absolute; left:0; right:0; top:100%; z-index:60; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.16); overflow:hidden; }
.qb-hit{ display:flex; gap:10px; align-items:baseline; padding:9px 14px; cursor:pointer; font-size:13.5px; }
.qb-hit span{ color:var(--muted); font-size:11.5px; margin-left:auto; }
.qb-hit:hover, .qb-hit.top{ background:color-mix(in srgb, #ffd60a 10%, var(--panel)); }
.qb-more{ display:none; position:absolute; right:0; top:110%; z-index:61; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.16); min-width:210px; overflow:hidden; }
.qb-more.open{ display:block; }
.qb-more div{ padding:9px 14px; font-size:13px; cursor:pointer; }
.qb-more div:hover{ background:var(--panel2); }
#qb-money{ position:sticky; bottom:10px; z-index:55; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:#111318; color:#f5f6f8; border-radius:14px; padding:12px 18px; margin-top:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.28); }
.qb-pays-l{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; opacity:.65; }
.qb-total{ font-size:22px; font-weight:800; color:#ffdd33; font-variant-numeric:tabular-nums; }
.qb-subline{ font-size:12px; opacity:.8; max-width:260px; }
.qb-ghost{ background:transparent; color:#f5f6f8; border:1px solid rgba(255,255,255,.28); border-radius:9px;
  padding:8px 14px; font:inherit; font-size:12.5px; cursor:pointer; }
.qb-ghost:hover{ border-color:#ffdd33; }
.qb-send{ background:#ffdd33; color:#111; font-weight:800; border:none; border-radius:9px; padding:9px 18px;
  font:inherit; font-size:13.5px; cursor:pointer; }
.qb-send:hover{ filter:brightness(1.06); }
#qb-money .qg-next{ border:none; background:transparent; padding:0; margin:0; color:#f5f6f8; gap:8px; }
#qb-money .qg-next .qg-next-txt{ font-size:12px; opacity:.85; max-width:300px; }
#qb-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(430px, 92vw); z-index:130; background:var(--bg);
  border-left:1px solid var(--line); box-shadow:-18px 0 50px rgba(0,0,0,.22); transform:translateX(102%);
  transition:transform .22s ease; overflow-y:auto; padding:16px 18px 30px; }
#qb-drawer.open{ transform:none; }
.qb-drawer-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.qb-drawer-opt{ display:flex; gap:8px; align-items:center; font-size:13px; margin:6px 0 12px; }
.qb-drawer-opt input{ width:auto !important; }
#qb-drawer .quote-side{ display:flex; flex-direction:column; gap:14px; }
body.qb-new #view-quote .quote-side{ }
body.qb-new .quote-layout{ display:block; }                     /* builder takes the full width */
body.qb-new.job-open .ai-fab{ bottom:92px; }                    /* assistant clears the money bar */
body.qb-new #view-quote .jd-fmt{ display:none; }                /* toolbar only while writing */
body.qb-new #view-quote .jd-shell:focus-within .jd-fmt{ display:flex; flex-wrap:wrap; }
@media (max-width:640px){ #qb-money{ bottom:0; border-radius:14px 14px 0 0; margin-left:-10px; margin-right:-10px; } }
body.qb-new #view-quote .qg-add.qb-replaced{ display:none; }   /* the eight buttons → one smart bar */
body.qb-new.job-open .ai-fab{ bottom:160px; }   /* clear of the money bar, whatever it wraps to */

/* ===== v181: feedback round — floats out of the way, drawer stable, doc panel on-theme ===== */
body.qb-new.job-open .pt-fab{ top:auto; bottom:232px; right:12px; border-radius:50%; width:48px; height:48px;
  justify-content:center; padding:0; }
body.qb-new.job-open .pt-fab .pt-lab{ display:none; }
body.qb-new.job-open .ai-fab{ bottom:172px; right:12px; width:48px; height:48px; border-radius:50%;
  padding:0; font-size:0; display:flex; align-items:center; justify-content:center; }
body.qb-new.job-open .ai-fab::after{ content:'⚡'; font-size:21px; }
.qb-desc-close{ position:absolute; top:8px; right:8px; width:30px; height:30px; font-size:15px; }
.jd-shell{ position:relative; }
.qb-pinned > summary{ pointer-events:none; }
.qb-pinned > summary::after{ display:none; }
.qstyle-cards{ display:flex; gap:10px; flex-wrap:wrap; }
.qstyle-card{ flex:1; min-width:180px; text-align:left; background:var(--panel); border:1.5px solid var(--line);
  border-radius:12px; padding:11px 14px; cursor:pointer; font:inherit; color:var(--text); }
.qstyle-card strong{ display:block; font-size:14px; }
.qstyle-card em{ font-style:normal; font-size:12px; color:var(--muted); }
.qstyle-card.on{ border-color:#d9a900; background:color-mix(in srgb, #ffd60a 8%, var(--panel)); }
.qstyle-card:hover{ border-color:#d9a900; }
/* the expanded customer-document panel: one calm grid, on-theme */
#doc-extras{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
#doc-extras .doc-extra-field{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
#doc-extras .doc-extra-field.wide{ grid-column:1/-1; }
#doc-extras .doc-extra-field > span:first-child{ display:block; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); font-weight:700; margin-bottom:8px; }
@media (max-width:760px){ #doc-extras{ grid-template-columns:1fr; } }
body.qb-new #view-quote .room-mode{ display:none; }   /* the section select retired — the line decides */
.qb-sale{ margin-left:10px; font-size:11px; max-width:170px; color:var(--muted); border:none; background:transparent; cursor:pointer; }
.qb-sale.qb-sale-on{ color:var(--cyan, #0e7c96); font-weight:700; }

/* ===== v183: line card tidy — no stray carets, labelled pill, everything on one edge ===== */
body.qb-new #view-quote .qg-bar{ display:flex; }               /* numbers toggle back beside the lines */
body.qb-new #view-quote .qg-caret{ display:none; }             /* the mystery caret goes; title + items open the line */
body.qb-new #view-quote .qg-row td:first-child{ padding-left:16px; }
body.qb-new #view-quote .dt-sub.qg-sub{ display:inline-block; margin:4px 0 0; color:var(--cyan,#0e7c96); }
.qb-sale-pill{ display:inline-flex; align-items:center; gap:5px; margin:4px 0 0 12px; padding:2px 4px 2px 10px;
  border:1px solid var(--line); border-radius:99px; font-size:11px; color:var(--muted); cursor:pointer;
  flex-direction:row !important; width:auto !important; }
.qb-sale-pill select{ border:none; background:transparent; font-size:11px; color:inherit; font-weight:700;
  cursor:pointer; width:auto !important; padding:2px 0; }
.qb-sale-pill.qb-sale-on{ border-color:var(--cyan,#0e7c96); color:var(--cyan,#0e7c96); }

/* ===== v185: The Desk + louder stack on the job card ===== */
.desk-search{ width:100%; padding:13px 18px; font-size:15px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--panel); margin-bottom:14px; }
.desk-stacks{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; margin-bottom:8px; }
.desk-stack{ display:flex; align-items:center; gap:7px; white-space:nowrap; border:1px solid var(--line);
  border-radius:99px; background:var(--panel); padding:7px 13px; font:inherit; font-size:12.5px; cursor:pointer; }
.desk-stack.on{ border-color:#d9a900; background:color-mix(in srgb,#ffd60a 10%,var(--panel)); font-weight:700; }
.desk-stack .ds-ct{ font-weight:800; font-variant-numeric:tabular-nums; }
.desk-stack .ds-late{ background:#e24b4a; color:#fff; border-radius:99px; font-size:10.5px; font-weight:800; padding:1px 7px; }
.desk-row{ display:flex; gap:10px; align-items:center; padding:8px 14px; cursor:pointer; font-size:13.5px; }
.desk-row:hover{ background:var(--panel2); }
.desk-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px; }
@media (max-width:800px){ .desk-cols{ grid-template-columns:1fr; } }
.stk-wrap{ display:inline-flex !important; flex-direction:row !important; align-items:center; gap:6px; width:auto !important;
  font-size:11.5px; font-weight:700; color:var(--muted); border:1.5px dashed var(--line); border-radius:99px; padding:3px 6px 3px 12px; }
.stk-wrap.on{ border-style:solid; border-color:#d9a900; color:var(--text); background:color-mix(in srgb,#ffd60a 10%,var(--panel)); }
.stk-wrap select{ width:auto !important; border:none; background:transparent; font-weight:700; }
/* v187: desk v2 — stacks wrap in rows; rich job cards; status colours */
.desk-stacks{ flex-wrap:wrap; overflow-x:visible; }
.desk-filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.desk-job{ display:flex; gap:14px; align-items:center; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:11px 16px; margin-bottom:8px; cursor:pointer; }
.desk-job:hover{ border-color:#d9a900; }
.dj-status{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:99px;
  background:var(--panel2); color:var(--muted); white-space:nowrap; }
.st-quoting,.st-lead{ background:#fff4c2; color:#8a6d00; } .st-sent{ background:#dff3f7; color:#0e7c96; }
.st-accepted{ background:#e6f2eb; color:#2e7d4f; } .st-completed{ background:#e6f2eb; color:#2e7d4f; }
.st-invoiced{ background:#fbf1df; color:#b06a00; } .st-paid{ background:#e6f2eb; color:#2e7d4f; }
.st-lost{ background:#fbeaea; color:#c23b3b; }
.dj-main{ flex:1; display:flex; flex-direction:column; }
.dj-right{ display:flex; flex-direction:column; align-items:flex-end; font-variant-numeric:tabular-nums; }
.desk-eng{ margin:8px 0; } .desk-eng > strong{ font-size:13px; }
.desk-fold > summary{ list-style:none; display:flex; align-items:center; padding:12px 16px; }
.desk-fold > summary::-webkit-details-marker{ display:none; }
/* v188: THE DESK = dispatch board — KPI strip, tile queues, three dense zones */
.desk-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
.desk-kpi{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }
.desk-kpi span{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; }
.desk-kpi strong{ font-size:20px; font-variant-numeric:tabular-nums; }
.desk-kpi em{ display:block; font-style:normal; font-size:11px; color:var(--muted); }
.desk-kpi.good strong{ color:#2e7d4f; } .desk-kpi.warn strong{ color:#b06a00; } .desk-kpi.bad strong{ color:#e24b4a; }
.desk-grid{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:12px; align-items:start; }
@media (max-width:1000px){ .desk-grid{ grid-template-columns:1fr; } .desk-kpis{ grid-template-columns:repeat(2,1fr); } }
.desk-zone{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.dz-head{ display:flex; align-items:center; gap:8px; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); font-weight:800; margin-bottom:8px; }
.desk-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:6px; }
.desk-tile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; background:transparent;
  border:1px solid transparent; border-radius:10px; padding:8px 4px 6px; font:inherit; cursor:pointer; }
.desk-tile:hover{ border-color:var(--line); background:var(--panel2); }
.desk-tile.on{ border-color:#d9a900; background:color-mix(in srgb,#ffd60a 9%,var(--panel)); }
.dt-lab{ font-size:10.5px; line-height:1.2; text-align:center; color:var(--text); max-width:92px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.dt-badge{ position:absolute; top:2px; right:8px; background:#d9a900; color:#111; font-size:10px; font-weight:800;
  border-radius:99px; padding:1px 6px; }
.dt-badge.late{ background:#e24b4a; color:#fff; }
.dj-act{ display:flex; gap:4px; }
/* v189: THE DESK final form — split board + persistent jobs panel */
.desk-split{ display:grid; grid-template-columns:1fr 340px; gap:12px; align-items:start; }
@media (max-width:980px){ .desk-split{ grid-template-columns:1fr; } }
.desk-main{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-height:420px; }
.desk-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.desk-jobs{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; }
.djp-filter,.djp-search{ width:100%; margin-bottom:8px; padding:9px 12px; border-radius:9px; border:1px solid var(--line); background:var(--bg); font:inherit; font-size:13px; }
.djp-list{ overflow-y:auto; max-height:calc(100vh - 320px); min-height:300px; }
.djp-row{ display:flex; gap:10px; padding:9px 8px; border-bottom:1px solid var(--line); cursor:pointer; align-items:flex-start; }
.djp-row:hover{ background:var(--panel2); }
.djp-av{ width:30px; height:30px; border-radius:50%; color:#fff; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center; flex:0 0 30px; }
.djp-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.djp-top{ display:flex; gap:8px; align-items:baseline; } .djp-top em{ font-style:normal; font-size:11px; color:var(--muted); margin-left:auto; }
.djp-meta{ font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.djp-dot{ width:9px; height:9px; border-radius:50%; margin-top:4px; flex:0 0 9px; }
.desk-lanes{ display:flex; gap:10px; overflow-x:auto; align-items:flex-start; padding-bottom:6px; }
.desk-lane{ min-width:230px; max-width:230px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px; }
.lane-head{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:8px; }
.lane-head .dt-badge{ position:static; margin-left:auto; }
.lane-card{ display:flex; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:8px 10px; margin-bottom:6px; cursor:pointer; font-size:12.5px; }
.lane-card:hover{ border-color:#d9a900; }
.lane-card em{ font-style:normal; font-size:10.5px; color:var(--muted); }
.lane-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
/* v192: On my desk — always visible, four columns of unfinished work */
.desk-onmy{ margin-bottom:12px; }
.onmy-grid{ column-count:4; column-gap:18px; font-size:12.5px; }
.onmy-grid .dz-head{ break-after:avoid; margin-top:0; }
.onmy-grid .dz-head:first-child{ margin-top:0; }
.onmy-grid .desk-row, .onmy-grid .hb-need{ break-inside:avoid; }
@media (max-width:1100px){ .onmy-grid{ column-count:2; } }
@media (max-width:640px){ .onmy-grid{ column-count:1; } }
/* v193: On my desk — five distinct cards, clear at a glance */
.onmy-grid{ column-count:unset; display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px; }
.onmy-card{ background:var(--bg); border:1px solid var(--line); border-left:3px solid #d9a900; border-radius:10px;
  padding:9px 11px; min-height:74px; }
.onmy-card.is-clear{ border-left-color:var(--line); opacity:.65; }
.onmy-head{ display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); margin-bottom:4px; }
.onmy-ct{ margin-left:auto; background:#d9a900; color:#111; border-radius:99px; font-size:10.5px; font-weight:800; padding:1px 8px; }
.onmy-none{ font-size:12px; color:var(--muted); margin:4px 0 0; }
.onmy-card .desk-row{ padding:5px 2px; font-size:12.5px; border-bottom:1px dashed var(--line); }
.onmy-card .desk-row:last-child{ border-bottom:none; }
.onmy-card .hb-need{ font-size:12.5px; padding:5px 2px; }

/* ===== v194: MY DESK = SM8 dispatch board, like-for-like ===== */
.dsk-top{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; margin-bottom:8px; }
.dsk-panel{ background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.dsk-panel-h{ background:var(--panel2); border-bottom:1px solid var(--line); font-size:11.5px; font-weight:700;
  color:var(--muted); text-align:center; padding:5px 12px; }
.dsk-panel-b{ padding:8px 10px; }
.dsk-actions .dsk-panel-b{ display:flex; gap:12px; }
.dsk-action{ display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:1px solid transparent;
  border-radius:8px; padding:6px 10px; font:inherit; font-size:11px; cursor:pointer; color:var(--text); max-width:92px; text-align:center; }
.dsk-action:hover{ border-color:var(--line); background:var(--panel2); }
.dsk-action-ico{ font-size:22px; position:relative; }
.dsk-action-ico i{ position:absolute; right:-7px; bottom:-2px; font-style:normal; font-size:12px; font-weight:800;
  background:#2e9e5b; color:#fff; border-radius:50%; width:15px; height:15px; line-height:15px; }
.dsk-q-grid{ display:flex; flex-wrap:wrap; gap:2px 6px; justify-content:flex-start; }
.dsk-q{ position:relative; display:flex; flex-direction:column; align-items:center; width:86px; padding:5px 2px 3px;
  background:none; border:1px solid transparent; border-radius:8px; font:inherit; cursor:pointer; }
.dsk-q:hover{ border-color:var(--line); background:var(--panel2); }
.dsk-q.on{ border-color:#d9a900; background:color-mix(in srgb,#ffd60a 9%,var(--panel)); }
.dsk-q-lab{ font-size:10px; line-height:1.25; text-align:center; color:var(--text); max-width:84px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.dsk-q-ct{ position:absolute; top:0; right:14px; background:#e02b2b; color:#fff; font-size:10px; font-weight:800;
  border-radius:99px; padding:0 5px; min-width:16px; line-height:15px; z-index:2; }
.dsk-q-ct.late{ box-shadow:0 0 0 2px #fff; }
.dsk-staff-chip{ display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:1px solid transparent;
  border-radius:8px; padding:5px 8px; font:inherit; font-size:10.5px; cursor:pointer; color:var(--text); }
.dsk-staff-chip:hover{ border-color:var(--line); } .dsk-staff-chip.on{ border-color:#d9a900; background:color-mix(in srgb,#ffd60a 9%,var(--panel)); }
.jc-flag{ color:#e24b4a; font-weight:800; }
.jc-task-edit{ border:1px solid #d9a900; border-radius:10px; padding:8px 10px; margin:4px 0; background:color-mix(in srgb,#ffd60a 6%,var(--panel)); }
.jc-task-edit input[id='jce-title']{ width:100%; margin-bottom:6px; }
.jc-task-edit-row{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.dsk-staff-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 10px; }
.dsk-staff-row .dsk-staff-chip{ flex-direction:row; padding:4px 10px; gap:6px; font-size:12px; border-color:var(--line); }
.dsk-staff-row .dsk-staff-chip.on{ border-color:#d9a900; }
.dsk-init{ width:30px; height:30px; border-radius:50%; color:#fff; font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center; }
.dsk-split{ display:grid; grid-template-columns:1fr 330px; gap:8px; align-items:start; }
@media (max-width:980px){ .dsk-split{ grid-template-columns:1fr; } .dsk-top{ grid-template-columns:1fr; } }
.dsk-main{ background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.dsk-tabs{ display:flex; gap:0; background:var(--panel2); border-bottom:1px solid var(--line); overflow-x:auto; }
.dsk-tab{ font:inherit; font-size:12px; padding:8px 13px; background:none; border:none; border-right:1px solid var(--line);
  cursor:pointer; color:var(--muted); white-space:nowrap; }
.dsk-tab.on{ background:var(--panel); color:var(--text); font-weight:700; box-shadow:inset 0 2px 0 #d9a900; }
.dsk-tabbody{ padding:10px 12px; min-height:430px; }
#desk-map{ height:460px; border-radius:6px; }
.dsk-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.dsk-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  border-bottom:2px solid var(--line); padding:7px 8px; background:var(--panel2); }
.dsk-table td{ padding:8px; border-bottom:1px solid var(--line); }
.dsk-tick{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); background:none; cursor:pointer; font-size:0; }
.dsk-tick:hover{ border-color:#2e9e5b; background:#2e9e5b22; }
.dsk-datebar{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sch-grid{ border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.sch-row{ display:grid; grid-template-columns:120px 1fr; border-bottom:1px solid var(--line); min-height:56px; position:relative; }
.sch-row:last-child{ border-bottom:none; }
.sch-head{ min-height:30px; background:var(--panel2); font-size:10px; color:var(--muted);
  grid-template-columns:120px repeat(12,1fr); }
.sch-head .sch-cell{ border-left:1px solid var(--line); padding:6px 4px; white-space:nowrap; overflow:hidden; }
.sch-staff{ display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:12.5px; font-weight:600;
  border-right:1px solid var(--line); background:var(--panel2); }
.sch-lane{ position:relative; background:
  repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/12 - 1px), var(--line) calc(100%/12 - 1px), var(--line) calc(100%/12)); }
.sch-block{ position:absolute; top:5px; bottom:5px; background:color-mix(in srgb, #3b7dd8 12%, var(--panel));
  border:1px solid var(--line); border-left:4px solid #3b7dd8; border-radius:4px; padding:4px 8px; font-size:11px;
  overflow:hidden; cursor:pointer; }
.sch-block span{ color:var(--muted); font-size:10px; }
.dsk-cal{ display:grid; grid-template-columns:130px 1fr; gap:10px; }
.dsk-cal-staff{ font-size:12px; padding:6px 10px; border-radius:4px; margin-bottom:4px; }
.dsk-cal-hour{ display:flex; gap:8px; align-items:flex-start; border-top:1px solid var(--line); padding:4px 0; min-height:30px; }
.dsk-cal-hour > span{ font-size:10px; color:var(--muted); width:38px; flex:0 0 38px; }
.dsk-cal-blk{ flex:1; border-radius:4px; padding:5px 10px; font-size:12px; cursor:pointer; margin-bottom:3px; }
.dsk-rec-add{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; font-size:12px; }
.dsk-rec-add input{ padding:7px 10px; font-size:12.5px; }
.dsk-rec-add label{ display:flex; align-items:center; gap:5px; flex-direction:row; width:auto; }
.dsk-jobs{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px; }
.djp-chip{ font-size:10.5px; background:var(--panel2); border-radius:4px; padding:2px 7px; margin-top:3px;
  display:inline-block; width:fit-content; color:var(--muted); }
.djp-chip.exp{ color:#c23b3b; font-weight:600; }
.dsk-recent{ position:fixed; right:22px; bottom:96px; z-index:90; width:74px; height:74px; border-radius:50%;
  background:#f0a030; border:3px solid #fff; box-shadow:0 8px 26px rgba(0,0,0,.3); cursor:pointer; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; font:inherit; }
.dsk-recent span{ font-size:24px; font-weight:800; line-height:1; }
.dsk-recent em{ font-style:normal; font-size:9.5px; font-weight:700; }

/* ===== v195: My Desk in OUR skin — home-page warmth on the dispatch bones ===== */
#view-desk .view-head{ display:none; }                     /* the greeting is the header now */
.dsk-q-emoji{ font-size:22px; line-height:1; }
.dsk-q-emoji.late{ filter:drop-shadow(0 0 3px #e24b4a); }
.dsk-panel{ border-radius:12px; }
.dsk-panel-h{ background:transparent; border-bottom:1px solid var(--line); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.09em; font-weight:800; text-align:left; padding:7px 12px 5px; }
.dsk-main,.dsk-jobs{ border-radius:12px; }
.dsk-tab.on{ box-shadow:inset 0 2px 0 0 #ffdd33; }
.dsk-tabs{ background:transparent; }
.desk-lane .lane-head{ text-transform:none; letter-spacing:0; font-size:12px; }
/* v196: assign popup + owner views */
#stack-modal .modal-card label{ margin-bottom:10px; }
.djp-assign{ align-self:center; font-size:14px; opacity:0; }
.djp-row:hover .djp-assign{ opacity:1; }
.stk-wrap{ cursor:pointer; font:inherit; }

/* v197: desk layout v3 — on-my-desk up top, slim toolbar, stacks dock, peek */
.dsk-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; max-width:420px; }
.dsk-dock{ margin-top:12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px 6px; }
.dsk-dock-tiles{ display:flex; flex-wrap:wrap; gap:2px 4px; }
.dsk-q.drop{ border-color:#d9a900; background:color-mix(in srgb,#ffd60a 18%,var(--panel)); transform:scale(1.06); }
.peek-card{ max-width:560px; }
.peek-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin:6px 0 12px; font-size:13.5px; }
.peek-lab{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800; margin-bottom:2px; }
.peek-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:12px; }
.djp-row{ cursor:grab; }
.djp-row:active{ cursor:grabbing; }
.onmy-clear{ background:var(--panel); border:1px dashed var(--line); border-radius:10px; padding:14px 18px; font-size:13.5px; color:var(--muted); }
.onmy-clear strong{ color:var(--text); }

/* ===== v199: MY DESK fills the screen — one page, no scrolling, every inch working ===== */
body.desk-lock{ overflow:hidden; }
body.desk-lock main{ overflow:hidden; height:100vh; }
#view-desk.active{ display:flex; flex-direction:column; height:calc(100vh - 24px); overflow:hidden; }
#desk-body{ display:flex; flex-direction:column; flex:1; min-height:0; gap:0; }
.dsk-hb{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.dsk-hb-l{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; min-width:0; }
.dsk-greet{ font-size:21px !important; margin:0 !important; white-space:nowrap; }
.dsk-sum{ font-size:12.5px; margin:0; color:var(--muted); }
.dsk-hb .dsk-toolbar{ margin-left:auto; max-width:none; flex-wrap:nowrap; }
.dsk-hb .dsk-staff-chip{ flex-direction:row; padding:3px 8px; gap:5px; }
.dsk-hb .dsk-init{ width:22px; height:22px; font-size:10px; }
#desk-body .desk-onmy{ flex:0 0 auto; margin-bottom:8px !important; }
#desk-body .onmy-grid{ grid-auto-rows:minmax(64px, 108px); }
#desk-body .onmy-card{ max-height:108px; overflow-y:auto; }
#desk-body .dsk-split{ flex:1 1 auto; min-height:0; }
#desk-body .dsk-main{ display:flex; flex-direction:column; min-height:0; height:100%; }
#desk-body .dsk-tabbody{ flex:1; min-height:0; overflow-y:auto; }
#desk-body .dsk-jobs{ display:flex; flex-direction:column; min-height:0; height:100%; }
#desk-body .djp-list{ flex:1; min-height:0; max-height:none; }
#desk-map{ height:100%; min-height:280px; }
#desk-body .dsk-dock{ flex:0 0 auto; margin-top:8px; padding:6px 10px 4px; }
#desk-body .dsk-dock .dz-head{ margin-bottom:2px; }
#desk-body .dsk-dock .dsk-q{ width:64px; padding:3px 2px 2px; }
#desk-body .dsk-dock .dsk-q-emoji{ font-size:16px; }
#desk-body .dsk-dock .dsk-q-lab{ font-size:8.5px; max-width:62px; -webkit-line-clamp:2; }
#desk-body .dsk-dock .dsk-q-ct{ right:6px; font-size:9px; line-height:13px; }
@media (max-width:980px){ body.desk-lock{ overflow:auto; } #view-desk.active{ height:auto; overflow:visible; } }
/* phones: the header stacks, the greeting wraps, the toolbar stops crushing the summary */
@media (max-width:760px){
  .dsk-hb{ flex-direction:column; align-items:stretch; gap:8px; }
  .dsk-hb-l{ padding-right:52px; }
  .dsk-greet{ white-space:normal; font-size:18px !important; }
  .dsk-hb .dsk-toolbar{ margin-left:0; flex-wrap:wrap; justify-content:flex-start; padding-right:0; }
  .onmy-card{ min-width:0; }
  .onmy-head{ white-space:normal; }
}
/* v199b: account for main's 56px top pad — and trim it on the desk so nothing scrolls */
body.desk-lock main{ padding-top:14px !important; padding-bottom:10px !important; }
#view-desk.active{ height:calc(100vh - 26px); }
html:has(body.desk-lock){ overflow:hidden; }
body.desk-lock main{ box-sizing:border-box; }

/* ============================================================
   v200 · MY DESK REDESIGN — "papers on a desk, charcoal console"
   Same functions, our species: paper triage slips up top, a dark
   console for the work surface, a paper filing rail on the right,
   and a charcoal dock of stack pills along the bottom. One gradient,
   gold only where your hand goes next. Nothing boxed-and-grey.
   ============================================================ */
/* the console — charcoal, like the rail and the money bar */
#desk-body .dsk-main{ background:#16181d; border:none; border-radius:16px; color:#eceded; }
#desk-body .dsk-tabs{ background:transparent; border-bottom:1px solid rgba(255,255,255,.08); padding:8px 10px 0; gap:4px; }
#desk-body .dsk-tab{ border:none; border-radius:8px 8px 0 0; color:#9aa1ab; font-size:12px; padding:8px 14px; }
#desk-body .dsk-tab:hover{ color:#eceded; background:rgba(255,255,255,.05); }
#desk-body .dsk-tab.on{ background:#f7f7f4; color:#16181d; font-weight:800; box-shadow:none; }
#desk-body .dsk-tabbody{ background:#f7f7f4; color:var(--text); margin:0 10px 10px; border-radius:0 10px 10px 10px; padding:12px; }
body:not(.theme-light) #desk-body .dsk-tabbody{ background:var(--panel); }
/* the filing rail — paper cards on the canvas, no box around them */
#desk-body .dsk-jobs{ background:transparent; border:none; padding:0 0 0 2px; }
#desk-body .dsk-jobs .dsk-panel-h{ border:none; padding:2px 4px 6px; }
.djp-card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; margin-bottom:6px;
  padding:9px 10px 9px 12px; position:relative; border-left-width:4px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.djp-card:hover{ border-color:#d9a900; background:var(--panel); }
.djp-row.djp-card{ border-bottom:1px solid var(--line); }
.st-edge-lead,.st-edge-quoting{ border-left-color:#d9a900 !important; }
.st-edge-sent{ border-left-color:#e08a00 !important; }
.st-edge-accepted,.st-edge-completed{ border-left-color:#0e7c96 !important; }
.st-edge-invoiced{ border-left-color:#b06a00 !important; }
.st-edge-paid{ border-left-color:#2e7d4f !important; }
.st-edge-lost{ border-left-color:#c23b3b !important; }
.djp-top .dj-status{ font-size:9px; padding:2px 7px; }
.djp-filter,.djp-search{ background:var(--panel); border-radius:10px; }
/* the dock — charcoal strip, stack pills, gold where you drop */
#desk-body .dsk-dock{ background:#111318; border:none; border-radius:14px; color:#eceded; padding:8px 12px 8px; }
#desk-body .dsk-dock .dz-head{ color:#9aa1ab; }
#desk-body .dsk-dock .dsk-q{ flex-direction:row; width:auto; gap:6px; padding:4px 10px; border-radius:99px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); }
#desk-body .dsk-dock .dsk-q-lab{ color:#eceded; font-size:10.5px; max-width:none; -webkit-line-clamp:1; white-space:nowrap; }
#desk-body .dsk-dock .dsk-q-ct{ position:static; margin-left:2px; background:#ffdd33; color:#111; }
#desk-body .dsk-dock .dsk-q-ct.late{ background:#e24b4a; color:#fff; box-shadow:none; }
#desk-body .dsk-dock .dsk-q.has-late{ border-color:rgba(226,75,74,.5); }
#desk-body .dsk-dock .dsk-q:hover{ border-color:#ffdd33; background:rgba(255,221,51,.08); }
#desk-body .dsk-dock .dsk-q.on{ border-color:#ffdd33; background:rgba(255,221,51,.14); }
#desk-body .dsk-dock .dsk-q.drop{ border-color:#ffdd33; background:rgba(255,221,51,.22); transform:scale(1.05); }
/* triage slips — paper on the desktop, gold edge only when they hold work */
#desk-body .onmy-card{ border:none; box-shadow:0 1px 4px rgba(0,0,0,.08); background:var(--panel); border-left:3px solid #d9a900; }
#desk-body .onmy-card.is-clear{ box-shadow:none; background:transparent; border:1px dashed var(--line); }
/* console-dark inner furniture: tables, schedules, calendar, lanes */
#desk-body .dsk-table th{ background:transparent; }
#desk-body .desk-lane{ background:var(--panel2); }
/* map frame */
#desk-map{ border-radius:8px; }
@media (max-width:980px){ #desk-body .dsk-tabbody{ margin:0 6px 6px; } }

/* v201: drawer spines, compact map + expand, task rows, day-end */
#desk-body .dsk-main{ display:grid; grid-template-columns:60px 1fr; }
.dsk-drawers{ display:flex; flex-direction:column; gap:4px; padding:10px 6px; border-right:1px solid rgba(255,255,255,.08); }
.dsk-drawer{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; background:none;
  border:none; border-radius:10px; padding:8px 2px 6px; font:inherit; cursor:pointer; color:#9aa1ab; }
.dsk-drawer:hover{ background:rgba(255,255,255,.06); color:#eceded; }
.dsk-drawer.open{ background:#f7f7f4; color:#16181d; }
body:not(.theme-light) .dsk-drawer.open{ background:var(--panel); color:var(--text); }
.dd-ico{ font-size:17px; line-height:1; }
.dd-lab{ font-size:8.5px; font-weight:700; letter-spacing:.03em; }
.dd-ct{ position:absolute; top:2px; right:6px; background:#ffdd33; color:#111; border-radius:99px;
  font-size:9px; font-weight:800; padding:0 5px; line-height:13px; }
#desk-body .dsk-tabbody{ margin:10px 10px 10px 0; border-radius:10px; }
.dsk-map-wrap{ position:relative; }
#desk-map{ height:250px; min-height:0; }
.dsk-map-expand{ position:absolute; top:8px; right:8px; z-index:800; background:#16181d; color:#ffdd33;
  border:none; border-radius:8px; width:34px; height:34px; font-size:16px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.dsk-map-expand:hover{ background:#000; }
.dsk-task{ display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:9px 12px; margin-bottom:6px; cursor:pointer; }
.dsk-task:hover{ border-color:#d9a900; }
.dsk-task-main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.dsk-task-main strong{ font-size:13px; }
.dsk-task-meta{ font-size:11px; color:var(--muted); } .dsk-task-meta em{ font-style:normal; color:var(--cyan,#0e7c96); font-weight:700; }
.due-late{ color:#e24b4a; font-weight:700; } .due-today{ color:#b06a00; font-weight:700; }
.dsk-task .dsk-tick{ margin-left:auto; flex:0 0 auto; }
.dsk-tick.is-done{ border-color:#2e9e5b; background:#2e9e5b; color:#fff; font-size:12px; }
/* v202: the console gives ground — On my desk gets the room for real lists */
#desk-body .desk-onmy{ flex:1 1 36%; min-height:170px; display:flex; flex-direction:column; }
#desk-body .desk-onmy .onmy-grid{ flex:1; min-height:0; grid-auto-rows:1fr; }
#desk-body .onmy-card{ max-height:none; height:100%; overflow-y:auto; }
#desk-body .dsk-split{ flex:1.4 1 50%; min-height:290px; }
#desk-map{ height:210px; }
/* v203: our stage colours on the card edges — matched to the pill language */
.st-edge-lead{ border-left-color:#0e7c96 !important; }
.st-edge-quoting{ border-left-color:#d9a900 !important; }
.st-edge-sent{ border-left-color:#5d5ae0 !important; }
.st-edge-accepted{ border-left-color:#2e7d4f !important; }
.st-edge-completed{ border-left-color:#0f766e !important; }
.st-edge-invoiced{ border-left-color:#c2410c !important; }
.st-edge-paid{ border-left-color:#2e7d4f !important; }
.st-edge-lost{ border-left-color:#6a7078 !important; }
.dj-status{ text-transform:none; letter-spacing:.02em; font-size:9.5px; }
/* v204: the map fills its drawer, filtered by stage + job type */
.dsk-map-full{ display:flex; flex-direction:column; height:100%; min-height:0; gap:8px; }
.dsk-map-bar{ display:flex; gap:8px; align-items:center; flex:0 0 auto; }
.dsk-map-bar select{ width:auto; font-size:12px; padding:6px 10px; border-radius:8px; }
.dsk-map-full .dsk-map-wrap{ flex:1; min-height:0; }
.dsk-map-full #desk-map{ height:100%; min-height:220px; }
#desk-body .dsk-tabbody{ display:flex; flex-direction:column; }
#desk-body .dsk-tabbody > *:only-child{ flex:1; min-height:0; }
/* v205: leaflet stays UNDER every popup — the container caps its own stacking context */
#desk-map, #desk-map-big{ position:relative; z-index:0; }
/* v207: bell card retired; jobs rail runs the full height beside cards+console */
.dsk-left{ display:flex; flex-direction:column; min-height:0; gap:8px; }
.dsk-left .desk-onmy{ flex:1 1 40%; min-height:170px; display:flex; flex-direction:column; margin:0 !important; }
.dsk-left .dsk-main{ flex:1.3 1 55%; min-height:280px; }
#desk-body .desk-onmy .onmy-grid{ grid-template-columns:repeat(4,1fr); }
#desk-body .dsk-split{ flex:1 1 auto; }
/* v207b: the assistant tucks into a circle above the dock — no more overlap */
body.desk-lock .ai-fab{ bottom:148px; right:14px; width:48px; height:48px; border-radius:50%;
  padding:0; font-size:0; display:flex; align-items:center; justify-content:center; }
body.desk-lock .ai-fab::after{ content:'⚡'; font-size:21px; }
#desk-body .dsk-dock{ padding-right:20px; }
/* v208: dock lifts off the floor, assistant below it; on-my-desk grows, console sits lower */
#desk-body .dsk-dock{ margin-bottom:46px; }
body.desk-lock .ai-fab{ bottom:6px; right:14px; }
.dsk-left .desk-onmy{ flex:1.5 1 52%; }
.dsk-left .dsk-main{ flex:1 1 42%; min-height:250px; }
.dsk-map-full #desk-map{ min-height:180px; }
#desk-body .dsk-split{ align-items:stretch; }
.dsk-left{ height:100%; min-height:0; }
/* v209: the toolbar earns its corner — aligned, useful, clear of the bell */
.dsk-hb .dsk-toolbar{ padding-right:56px; gap:6px; }
.dsk-toolbar .btn{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:12.5px; padding:8px 12px; }