/* GaugeWorks — cards, buttons, tables, chips, gauges, findings, modals */
/* ---------- primitives ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;overflow-x:auto}
.card h3{font-size:17px;margin-bottom:10px;color:var(--text)}
.card .h3row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.card-chev{color:var(--faint);font-size:12px;width:16px;text-align:center;flex-shrink:0}
.card .h3row h3{margin:0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.row>*{flex:1;min-width:120px}
.btn{background:var(--panel2);border:1px solid var(--line2);color:var(--text);border-radius:var(--r-sm);
  padding:8px 14px;font-size:13px;font-weight:600}
.btn:hover{border-color:var(--low);color:#fff}
.btn.pri{background:var(--low);border-color:var(--low);color:#08131C}
.btn.pri:hover{background:#5FB9F8}
.btn.hot{background:var(--high);border-color:var(--high);color:#fff}
.btn.hot:hover{background:#F3745F}
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);border-color:var(--line2)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid}
.chip.ok{color:var(--ok);border-color:var(--ok-dim);background:rgba(61,204,126,.08)}
.chip.warn{color:var(--amber);border-color:#6B4A1E;background:rgba(242,167,59,.09)}
.chip.fail{color:#FF7A64;border-color:var(--high-dim);background:rgba(240,86,60,.1)}
.chip.info{color:var(--low);border-color:var(--low-dim);background:rgba(63,169,245,.08)}
.chip.mut{color:var(--muted);border-color:var(--line2);background:rgba(255,255,255,.03)}
.statsbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:14px}
.statcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.statcard .num{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700;color:var(--text);line-height:1.1}
.statcard .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;color:var(--muted);
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line2);font-weight:600}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:rgba(255,255,255,.02)}
td.num,th.num{text-align:right;font-family:var(--mono);font-size:12.5px}
.mono{font-family:var(--mono);font-size:12.5px}
.mut{color:var(--muted)}.sm{font-size:12.5px}.xs{font-size:11.5px}
.right{text-align:right}.center{text-align:center}
.clickable{cursor:pointer}
.empty{color:var(--faint);text-align:center;padding:30px 10px;font-size:13.5px}
.searchrow{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.searchrow input,.searchrow select{width:auto;flex:1;min-width:140px}
.toolbtns{display:flex;gap:8px;flex-wrap:wrap}
hr.div{border:none;border-top:1px solid var(--line);margin:14px 0}

/* stat tiles */
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;position:relative;overflow:hidden}
.stat .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat .val{font-family:var(--disp);font-size:34px;font-weight:700;line-height:1.1;margin-top:2px}
.stat .sub{font-size:12px;color:var(--faint)}
.stat.accent-low{border-top:2px solid var(--low)}
.stat.accent-high{border-top:2px solid var(--high)}
.stat.accent-amber{border-top:2px solid var(--amber)}
.stat.accent-ok{border-top:2px solid var(--ok)}

/* ---------- gauges (signature) ---------- */
.gaugerow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gauge{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);padding:12px;text-align:center}
.gauge svg{display:block;margin:0 auto}
.gauge .gv{font-family:var(--mono);font-size:22px;font-weight:700}
.gauge .gl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.gauge .gs{font-family:var(--mono);font-size:12px;color:var(--muted)}
.gauge.low .gv{color:var(--low)}.gauge.high .gv{color:#FF8570}
.readout{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);padding:10px 12px}
.readout .rl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.readout .rv{font-family:var(--mono);font-size:24px;font-weight:700;line-height:1.2}
.readout .rt{font-size:11.5px;color:var(--faint);font-family:var(--mono)}
.readout.ok .rv{color:var(--ok)}.readout.warn .rv{color:var(--amber)}.readout.fail .rv{color:#FF7A64}.readout.na .rv{color:var(--faint)}

/* generic list row — used where a table's fixed columns would just squish on
   a narrow screen (dashboard summaries); flexes and wraps instead of shrinking */
.listrow{display:flex;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:8px;background:var(--panel2);align-items:center}
.listrow.clickable:hover{border-color:var(--line2)}
.listrow .lr-main{flex:1;min-width:0}
.listrow .lr-title{font-size:13.5px;font-weight:600;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.listrow .lr-sub{font-size:12px;color:var(--muted);margin-top:1px}
.listrow .lr-end{flex-shrink:0;text-align:right;font-size:13px}

/* findings */
.finding{display:flex;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:8px;background:var(--panel2);align-items:flex-start}
.finding .fdot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0}
.finding.ok .fdot{background:var(--ok)}.finding.warn .fdot{background:var(--amber)}.finding.fail .fdot{background:var(--high)}.finding.info .fdot{background:var(--low)}
.finding b{display:block;font-size:13.5px}
.finding p{font-size:12.5px;color:var(--muted)}

/* forms in diag */
.fldgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sidepanel-title{font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--muted);
  border-bottom:1px solid var(--line2);padding-bottom:6px;margin:14px 0 10px;font-weight:600}
.sidepanel-title:first-child{margin-top:0}
.sidetag{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:3px;letter-spacing:.08em;margin-left:6px;vertical-align:2px}
.sidetag.blue{background:var(--low-dim);color:var(--low)}.sidetag.red{background:var(--high-dim);color:#FF8570}

/* modal — overflow-x:auto on both the modal and any card contains a too-wide
   table/option-grid to its own scroll region instead of breaking page layout */
.overlay{position:fixed;inset:0;background:rgba(6,9,12,.72);display:none;align-items:flex-start;justify-content:center;
  padding:5vh 16px;z-index:100;overflow-y:auto}
.overlay.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);width:100%;max-width:640px;padding:20px;overflow-x:auto}
.modal.wide{max-width:900px}
.modal h3{font-size:20px;margin-bottom:14px}
.modal .foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1/-1}

/* toast */
#toast{position:fixed;top:20px;right:20px;transform:translateY(-20px);background:var(--panel2);
  border:1px solid var(--line2);border-left:3px solid var(--ok);border-radius:var(--r-sm);padding:10px 18px;
  font-size:13.5px;opacity:0;pointer-events:none;transition:.25s;z-index:200;max-width:90vw}
#toast.show{opacity:1;transform:translateY(0)}
#toast.err{border-left-color:var(--high)}

/* status pills for jobs/invoices */
.st{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:4px;display:inline-block}
.st.scheduled{background:var(--low-dim);color:#9CD3FB}
.st.enroute{background:#4A3A12;color:#F8CE8B}
.st.onsite{background:#134A2E;color:#8FE9BC}
.st.complete{background:#28313B;color:#AEBBC8}
.st.draft{background:#28313B;color:#AEBBC8}
.st.sent{background:var(--low-dim);color:#9CD3FB}
.st.paid{background:#134A2E;color:#8FE9BC}
.st.overdue{background:var(--high-dim);color:#FFAA9A}
.st.approved{background:#134A2E;color:#8FE9BC}
.st.declined{background:var(--high-dim);color:#FFAA9A}
.st.expired{background:#28313B;color:#AEBBC8}
.st.converted{background:var(--low-dim);color:#9CD3FB}
.pri-high{color:#FF8570;font-weight:700}.pri-med{color:var(--amber);font-weight:600}.pri-low{color:var(--muted)}

/* estimate option cards (builder) */
.est-opts{display:flex;flex-direction:column;gap:12px;margin-bottom:4px}
.est-opt{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--panel2)}
.est-opt.rec{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok) inset}
.est-opt-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.est-opt-label{flex:1;min-width:140px;font-family:var(--disp);font-size:15px;font-weight:600;
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);padding:4px 6px;color:var(--text)}
.est-opt-label:hover,.est-opt-label:focus{border-color:var(--line2);background:var(--panel)}
.est-opt-rec{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.est-opt-desc{width:100%;margin-bottom:8px;font-size:13px}
.est-opt-tot{text-align:right;font-size:13px;color:var(--muted);margin-top:8px}
.est-opt-tot b{color:var(--text);font-size:15px}
.est-opt-pick{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;cursor:pointer;transition:.15s}
.est-opt-pick:hover{border-color:var(--low);background:rgba(63,169,245,.06)}
.est-opt-pick.picked{border-color:var(--ok);background:rgba(61,204,126,.08)}
.est-opt-pick span{font-family:var(--disp);font-size:16px;font-weight:700}

/* load calc wizard */
.lc-progress{display:flex;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:2px}
.lc-step{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--faint);font-weight:600;white-space:nowrap}
.lc-step.on{color:var(--text)}
.lc-step.done{color:var(--ok)}
.lc-step-n{width:22px;height:22px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.lc-step.on .lc-step-n{border-color:var(--low);color:var(--low)}
.lc-step.done .lc-step-n{background:var(--ok-dim);border-color:var(--ok);color:var(--ok)}
.lc-step-line{width:20px;height:1px;background:var(--line2);margin:0 4px}
.lc-result{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.lc-result-tile{background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:12px 14px}
.lc-result-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.lc-result-val{font-family:var(--disp);font-size:26px;font-weight:700;margin-top:2px}
.lc-result-val span{font-size:13px;color:var(--muted);font-weight:600;font-family:var(--body)}
@media (max-width:760px){.lc-step-label{display:none}}

/* PT chart */
.ptwrap{max-height:420px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.ptwrap table{font-family:var(--mono);font-size:12.5px}
.ptwrap th{position:sticky;top:0;background:var(--panel2)}
tr.hl td{background:rgba(63,169,245,.14)!important}

/* ---------- auth screens ---------- */
#authscreen{position:fixed;inset:0;background:var(--bg);display:none;align-items:center;justify-content:center;
  z-index:500;padding:20px;
  background-image:radial-gradient(ellipse 900px 500px at 70% -10%,rgba(63,169,245,.07),transparent),
                   radial-gradient(ellipse 700px 400px at 15% 110%,rgba(240,86,60,.06),transparent)}
.authcard{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);
  padding:30px 28px;width:100%;max-width:380px}
.authcard h1{font-family:var(--disp);font-size:34px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;text-align:center}
.authcard h1 .g1{color:var(--low)}.authcard h1 .g2{color:var(--high)}
.authcard .brandmark{max-height:46px;margin:0 auto 4px}
.authcard .authsub{color:var(--muted);font-size:13px;text-align:center;margin:2px 0 20px}
.authcard .autherr{color:#FF8570;font-size:13px;border:1px solid var(--high-dim);border-radius:var(--r-sm);
  padding:8px 10px;margin-bottom:12px;background:rgba(240,86,60,.08)}
body:not(.authed) .app,body:not(.authed) .mobilebar{display:none}

/* ---------- user chip ---------- */
.userchip{display:flex;align-items:center;gap:8px}
.udot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;flex-shrink:0;vertical-align:1px}

/* ---------- calendar ---------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-head div{font-family:var(--disp);text-transform:uppercase;font-size:11.5px;letter-spacing:.08em;
  color:var(--muted);text-align:center;padding:4px 0 7px;font-weight:600}
.cal-cell{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);
  min-height:88px;padding:5px 6px;cursor:pointer;overflow:hidden}
.cal-cell:hover{border-color:var(--line2)}
.cal-cell.other{opacity:.38}
.cal-cell.today{border-color:var(--low)}
.cal-cell.sel{outline:2px solid var(--low);outline-offset:-1px}
.cal-daynum{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:3px}
.cal-cell.today .cal-daynum{color:var(--low);font-weight:700}
.cal-job{font-size:10.5px;line-height:1.25;padding:2px 4px;margin-bottom:3px;border-left:3px solid;
  background:rgba(255,255,255,.04);border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-job:hover{background:rgba(255,255,255,.09)}
.cal-more{font-size:10px;color:var(--faint)}
.cal-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
@media (max-width:760px){
  .cal-cell{min-height:56px;padding:3px 4px}
  .cal-job{display:none}
  .cal-more{display:block}
}

/* ---------- sync / clock pills & banner ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 10px;border-radius:99px;border:1px solid var(--line2)}
.pill-on{color:var(--ok);border-color:var(--ok-dim)}
.pill-off{color:var(--amber);border-color:#6B4A1E;background:rgba(242,167,59,.08)}
.pill-sync{color:var(--low);border-color:var(--low-dim);background:rgba(63,169,245,.08)}
.pill-clock{color:#FF8570;border-color:var(--high-dim);background:rgba(240,86,60,.1);display:flex;justify-content:center}
.banner{background:rgba(242,167,59,.1);border:1px solid #6B4A1E;color:#F8CE8B;border-radius:var(--r-sm);
  padding:10px 14px;margin-bottom:14px;font-size:13.5px}
.banner:hover{background:rgba(242,167,59,.16)}

/* ---------- photo gallery ---------- */
.ph-grid{display:flex;flex-wrap:wrap;gap:8px}
.ph-thumb{position:relative;width:96px;height:96px;border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden}
.ph-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph-x{position:absolute;top:3px;right:3px;background:rgba(6,9,12,.75);border:none;color:#FF8570;
  border-radius:4px;font-size:11px;padding:2px 5px;cursor:pointer}

/* ---------- signature pad ---------- */
.sigpad{background:#fff;border:1px solid var(--line2);border-radius:var(--r-sm);display:block;
  width:100%;max-width:560px;touch-action:none;cursor:crosshair}

/* ---------- cylinders ---------- */
.cylrow{display:flex;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:8px;background:var(--panel2);cursor:pointer}
.cylrow:hover{border-color:var(--line2)}
.cylbar{height:5px;background:var(--bg);border-radius:3px;margin-top:5px;overflow:hidden}
.cylbar span{display:block;height:100%;border-radius:3px}