/* Stone Surgeons CRM — same brand tokens as the main site (assets/css/base.css) */
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/archivo-var.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-var.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }

:root {
  --ink: #071a2e; --navy: #0b2a4a; --blue: #1f6fd0; --blue-d: #185cae; --teal: #2a9d8f;
  --mint: #b9efe6; --mint-xl: #e3f8f4; --ice: #dcedfc; --bg: #f6f8fa; --off: #eef5fb; --white: #fff;
  --text: #16263a; --muted: #4c5d72; --line: #dde5ee; --err: #c62f28; --ok: #1d7a4f;
  --radius: 12px; --shadow: 0 10px 30px rgba(7, 26, 46, .10);
  --display: 'Archivo', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); }
button, input, select, textarea { font: inherit; color: inherit; }
.boot { padding: 40px; text-align: center; color: var(--muted); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── buttons & fields ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px;
  padding: 11px 18px; font-weight: 700; cursor: pointer; background: var(--blue); color: #fff; text-decoration: none; }
.btn:hover { background: var(--blue-d); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--off); }
.btn-danger { background: transparent; color: var(--err); border: 1px solid #f1c9c6; }
.btn-danger:hover { background: #fdf0ef; }
.btn-sm { padding: 7px 12px; font-size: 14px; }
.btn-xs { padding: 4px 9px; font-size: 13px; font-weight: 600; border-radius: 8px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; text-decoration: underline; font-size: 14px; }
.f { display: block; margin: 0 0 14px; }
.f > span { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; color: var(--navy); }
.in { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.in:focus, .btn:focus-visible, .tab:focus-visible, .linkbtn:focus-visible { outline: 3px solid rgba(31, 111, 208, .35); outline-offset: 1px; border-color: var(--blue); }
textarea.in { resize: vertical; min-height: 80px; }
.msg { font-size: 14px; margin: 10px 0 0; min-height: 1.2em; }
.msg.err { color: var(--err); } .msg.ok { color: var(--ok); }

/* ── auth screens ── */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: linear-gradient(160deg, var(--navy), var(--ink)); }
.auth-card { width: 100%; max-width: 400px; background: #fff; border-radius: 16px; padding: 32px 28px; box-shadow: var(--shadow); }
.auth-logo { display: block; height: 44px; margin: 0 auto 18px; }
.auth h1 { font: 800 22px/1.2 var(--display); font-stretch: 112%; text-transform: uppercase; text-align: center; margin: 0 0 6px; color: var(--ink); }
.auth .sub { text-align: center; color: var(--muted); margin: 0 0 22px; font-size: 15px; }
.auth .btn { width: 100%; margin-top: 4px; }
.auth .alt { text-align: center; margin: 16px 0 0; }

/* ── app shell ── */
.top { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 10; }
.top-in { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.brand { font: 800 16px/1 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em; color: #fff; text-decoration: none; }
.brand small { color: var(--mint); font-size: 12px; margin-left: 6px; }
.tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tab { color: #cfe0f2; text-decoration: none; padding: 8px 11px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
.tab:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.tab.on { background: #fff; color: var(--navy); }
.who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #cfe0f2; }
.who .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
.who .btn-ghost:hover { background: rgba(255, 255, 255, .08); }
main { max-width: 1200px; margin: 0 auto; padding: 24px 16px 60px; }
h2 { font: 800 22px/1.2 var(--display); font-stretch: 112%; text-transform: uppercase; margin: 0 0 16px; color: var(--ink); }
h3 { font-size: 16px; margin: 0 0 12px; color: var(--navy); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.late { color: var(--err) !important; font-weight: 700; }
.empty { color: var(--muted); padding: 18px 0; text-align: center; }

/* ── stat tiles ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 20px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.tile b { display: block; font: 800 30px/1.1 var(--display); color: var(--ink); }
.tile span { font-size: 14px; color: var(--muted); }
a.tile { text-decoration: none; }
a.tile:hover { border-color: var(--blue); }
.tile.warn { border-color: #f1c9c6; background: #fff8f7; }
.tile.warn b { color: var(--err); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grid2 > .span2 { grid-column: 1 / -1; }

/* ── lists ── */
.mini { list-style: none; margin: 0; padding: 0; }
.mini li + li { border-top: 1px solid var(--line); }
.mini a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; text-decoration: none; color: var(--text); }
.mini a:hover { background: var(--off); }
.mini .meta { color: var(--muted); font-size: 14px; white-space: nowrap; }

/* ── leads table ── */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.filters .in { width: auto; min-width: 150px; padding: 9px 10px; }
.filters .grow { flex: 1; min-width: 200px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.tbl-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 700; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--off); }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.c-phone, .c-date { white-space: nowrap; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--off); }
tbody tr:last-child td { border-bottom: 0; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.st-new { background: #e7f0fc; color: #174f95; border-color: #c9dcf6; }
.st-contacted { background: #fff4e0; color: #8a5300; border-color: #f5ddb0; }
.st-quoted { background: #efeafd; color: #5a3cb0; border-color: #dcd2fa; }
.st-won { background: #e3f6ec; color: #1d6b45; border-color: #bfe6d0; }
.st-lost { background: #f1f3f5; color: #55606d; border-color: #dfe3e8; }
.tag { display: inline-block; background: var(--mint-xl); color: #1d5f57; border-radius: 6px; padding: 1px 7px; font-size: 12px; margin: 0 4px 4px 0; }
.test { color: #8a5300; font-size: 12px; font-weight: 700; }

/* ── lead detail ── */
.back { display: inline-block; margin: 0 0 12px; font-size: 14px; }
.detail { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-areas: "info ctl" "extra ctl" "hist ctl"; grid-template-rows: auto auto 1fr; gap: 16px; align-items: start; }
.d-info { grid-area: info; } .d-ctl { grid-area: ctl; } .d-hist { grid-area: hist; } .d-extra { grid-area: extra; display: grid; gap: 16px; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin: 0; }
.kv dt { color: var(--muted); font-size: 14px; }
.kv dd { margin: 0; word-break: break-word; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }
.notes { list-style: none; margin: 0 0 14px; padding: 0; }
.notes li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.notes .by { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.notes p { margin: 4px 0 0; white-space: pre-wrap; }
.row-end { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
.actions .sep { font-size: 13px; color: var(--muted); margin-left: 6px; }
.textmenu { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; padding: 10px; background: var(--off); border-radius: 10px; }
.fu { background: var(--off); border-radius: 10px; padding: 12px; }
.fu-label { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.fu .quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.claim { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #e7f0fc; border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; font-weight: 600; color: #174f95; }
.dup { background: #fff4e0; border: 1px solid #f5ddb0; color: #6b4100; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 14px; }
.history { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.history li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.history li small { white-space: nowrap; }
.mini .meta.late { color: var(--err); }

/* ── charts (single series → one brand blue; values in text ink) ── */
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: minmax(100px, 44%) 1fr 36px; align-items: center; gap: 10px; padding: 5px 0; }
.bars .lbl { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .trk { height: 14px; position: relative; }
.bars .bar { position: absolute; inset: 0 auto 0 0; background: var(--blue); border-radius: 0 4px 4px 0; min-width: 2px; }
.bars li:hover .bar { background: var(--blue-d); }
.bars .val { font-size: 14px; font-weight: 700; text-align: right; color: var(--text); }
.cols { display: flex; align-items: flex-end; gap: 2px; height: 160px; border-bottom: 1px solid var(--line); padding-top: 18px; }
.cols .c { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.cols .c i { display: block; width: 100%; max-width: 34px; background: var(--blue); border-radius: 4px 4px 0 0; min-height: 0; }
.cols .c:hover i { background: var(--blue-d); }
.cols .c em { position: absolute; top: -18px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--text); opacity: 0; }
.cols .c:hover em, .cols .c:focus em { opacity: 1; }
.cols-x { display: flex; gap: 2px; margin-top: 4px; }
.cols-x span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); }

/* ── leaderboard ── */
.lb-nav { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; }
.lb-nav strong { min-width: 220px; text-align: center; color: var(--navy); }
.lb { list-style: none; margin: 0; padding: 0; }
.lb-row { display: grid; grid-template-columns: 34px minmax(110px, 1fr) minmax(60px, 1.2fr) auto; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 10px; }
.lb-row + .lb-row { border-top: 1px solid var(--line); }
.lb-row.me { background: var(--off); }
.lb-rank { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--muted); background: #f1f3f5; }
.lb-rank.m1 { background: #f7d774; color: #5c4300; }
.lb-rank.m2 { background: #dfe4ea; color: #3b4652; }
.lb-rank.m3 { background: #e8b98d; color: #5a3410; }
.lb-name { display: flex; flex-direction: column; min-width: 0; }
.lb-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name small { color: var(--muted); font-size: 12px; }
.lb-trk { height: 12px; position: relative; }
.lb-trk i { position: absolute; inset: 0 auto 0 0; background: var(--blue); border-radius: 0 4px 4px 0; }
.lb-val { font-size: 16px; text-align: right; white-space: nowrap; color: var(--ink); }

/* ── admin ── */
.imp { background: #fff4e0; color: #6b4100; border-bottom: 1px solid #f5ddb0; padding: 10px 16px; display: flex; gap: 12px;
  align-items: center; justify-content: center; flex-wrap: wrap; font-weight: 600; font-size: 14px; }
.subtabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--off); padding: 4px; border-radius: 10px; }
.tab.sub { border: 0; background: none; color: var(--navy); cursor: pointer; font-size: 14px; padding: 7px 14px; }
.tab.sub:hover { background: #fff; }
.tab.sub.on { background: var(--navy); color: #fff; }
.acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pwrow { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.pwrow .in { width: auto; flex: 1; min-width: 170px; padding: 7px 10px; }
.admin-tbl tbody tr, .db-tbl tbody tr { cursor: default; }
.db-tbl td, .db-tbl th { white-space: nowrap; font-size: 13px; }
.src-tbl tbody tr { cursor: default; }
.src-tbl td:not(:first-child), .src-tbl th:not(:first-child) { text-align: right; white-space: nowrap; }
.spend-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; font-size: 14px; }
.setrow { display: grid; gap: 4px; margin-top: 8px; padding: 10px; background: var(--off); border-radius: 10px; max-width: 420px; }
.setrow .f { margin: 0 0 6px; }
.setrow .in { padding: 7px 10px; }
.in-sm { width: auto; padding: 6px 8px; font-size: 14px; }
.narrow { max-width: 460px; }
.steps { padding-left: 20px; }
.steps li { margin: 0 0 8px; }
.qr { display: block; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin: 6px 0; }
.key { font-size: 13px; word-break: break-all; background: var(--off); padding: 2px 6px; border-radius: 6px; }
.in.code { font-size: 24px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.c-fu { white-space: nowrap; font-size: 13px; }

/* ── shared bits for the field-ops pages ── */
.note-box { background: #e7f0fc; border: 1px solid #c9dcf6; color: #174f95; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 14px; }
.note-box.ok { background: #e3f6ec; border-color: #bfe6d0; color: #1d6b45; }
.note-box.bad { background: #fdf0ef; border-color: #f1c9c6; color: #9b2620; }
.note-box.warn { background: #fff4e0; border-color: #f5ddb0; color: #6b4100; }
.note-box.clock { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
td.num, th.num, .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pre { white-space: pre-wrap; }
section.card + section.card, .q-grid > div > * + * { margin-top: 16px; }
.card h3 { margin: 0 0 12px; font-size: 17px; color: var(--ink); }
.card h4 { margin: 0; font-size: 15px; color: var(--navy); }
details.card summary { cursor: pointer; font-weight: 700; color: var(--navy); }
details.card[open] summary { margin-bottom: 12px; }

/* ── doors ── */
.door-where .door-addr { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 0 0 10px; }
.door-where .door-addr2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.numbox { display: flex; gap: 4px; align-items: stretch; }
.numbox .in { width: 84px; text-align: center; font-size: 20px; font-weight: 800; padding: 8px; }
.numbox .btn { padding: 0 14px; font-size: 20px; }
.door-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.door-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; border-radius: 14px;
  border: 2px solid var(--line); background: #fff; font-weight: 800; font-size: 15px; cursor: pointer; color: var(--ink); }
.door-btn span { font-size: 26px; line-height: 1; }
.door-btn:hover { border-color: var(--blue); }
.door-btn:active { transform: scale(.98); }
.door-btn.o-booked, .door-btn.o-sold { border-color: #9fdcc3; background: #effaf5; }
.door-btn.o-interested, .door-btn.o-come_back { border-color: #bcd4f3; background: #f3f8fe; }
.door-form { margin: 0 0 16px; }
.door-form .quick { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 12px; }
.legend { font-size: 14px; font-weight: 600; color: var(--navy); margin: 0 0 6px; padding: 0; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; background: #9aa3ad; }
.dot.g-yes { background: #1baf7a; } .dot.g-maybe { background: #2a78d6; } .dot.g-no { background: #eb6834; } .dot.g-none { background: #9aa3ad; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--text); margin: 0 0 10px; }
.door-map { height: 460px; border-radius: var(--radius); border: 1px solid var(--line); z-index: 0; }
.streets-tbl tbody tr { cursor: default; }

/* ── quotes / invoices ── */
.q-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.q-grid > div { min-width: 0; }
.q-tbl tbody tr { cursor: pointer; }
.q-items tbody tr { cursor: default; }
.q-items tbody tr:hover { background: none; }
.q-items td { vertical-align: top; }
.q-items .q-name { min-width: 220px; }
.q-items .q-name .in { width: 100%; margin: 0 0 6px; }
.q-items .q-name textarea.in { min-height: 52px; font-size: 13px; }
.q-items .q-qty .in { width: 70px; } .q-items .q-price .in { width: 100px; }
.q-items .q-line { padding-top: 16px; font-weight: 700; }
.q-items .q-opt { padding-top: 14px; white-space: nowrap; }
.q-totals { display: grid; gap: 6px; font-size: 15px; }
.q-totals > div { display: flex; justify-content: space-between; gap: 12px; }
.q-totals .q-grand { border-top: 2px solid var(--ink); padding-top: 8px; margin-top: 2px; font-size: 19px; }
.q-totals .q-grand b { font: 800 22px/1.2 var(--display); color: var(--ink); }
.q-link { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.q-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--off); padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.q-share .acts { margin: 0 0 8px; }
.q-draft { background: #f1f3f5; color: #55606d; border-color: #dfe3e8; }
.q-sent { background: #fff4e0; color: #8a5300; border-color: #f5ddb0; }
.q-approved { background: #e3f6ec; color: #1d6b45; border-color: #bfe6d0; }
.q-declined { background: #fdf0ef; color: #9b2620; border-color: #f1c9c6; }
.q-opt.pill { background: var(--mint-xl); color: #1d5f57; border-color: #bfe8df; font-size: 12px; }
.i-draft { background: #f1f3f5; color: #55606d; border-color: #dfe3e8; }
.i-marked_sent { background: #fff4e0; color: #8a5300; border-color: #f5ddb0; }
.i-marked_paid { background: #e3f6ec; color: #1d6b45; border-color: #bfe6d0; }
.i-void { background: #fdf0ef; color: #9b2620; border-color: #f1c9c6; text-decoration: line-through; }

/* ── schedule + jobs ── */
.j-unscheduled { background: #fff4e0; color: #8a5300; border-color: #f5ddb0; }
.j-scheduled { background: #e7f0fc; color: #174f95; border-color: #c9dcf6; }
.j-in_progress { background: #efeafd; color: #5a3cb0; border-color: #dcd2fa; }
.j-completed { background: #e3f6ec; color: #1d6b45; border-color: #bfe6d0; }
.j-cancelled { background: #f1f3f5; color: #55606d; border-color: #dfe3e8; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.wday { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; min-height: 160px; display: flex; flex-direction: column; gap: 6px; }
.wday.today { border-color: var(--blue); box-shadow: inset 0 3px 0 var(--blue); }
.wday-h { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.wday-h b { color: var(--ink); }
.wday-add { margin-left: auto; text-decoration: none; font-weight: 800; font-size: 18px; line-height: 1; padding: 2px 7px; border-radius: 6px; }
.wday-add:hover { background: var(--off); }
.wday-empty { color: #b3bcc6; text-align: center; margin: 6px 0; }
.jcard { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); border: 1px solid #c9dcf6; border-left: 4px solid var(--blue);
  background: #f6faff; border-radius: 8px; padding: 6px 8px; font-size: 13px; min-width: 0; }
.jcard:hover { border-color: var(--blue); }
.jcard strong { overflow: hidden; text-overflow: ellipsis; }
.jcard .jc-time { font-weight: 700; color: var(--navy); font-size: 12px; }
.jcard .jc-sub, .jcard .jc-crew { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.jcard .pill { align-self: flex-start; font-size: 11px; padding: 0 7px; }
.jcard.j-completed { border-left-color: var(--ok); background: #f3fbf7; border-color: #bfe6d0; }
.jcard.j-in_progress { border-left-color: #5a3cb0; background: #f8f6fe; border-color: #dcd2fa; }
.jcard.j-cancelled { opacity: .55; text-decoration: line-through; border-left-color: #9aa3ad; background: #f6f7f8; border-color: var(--line); }
.jcard.big { font-size: 15px; padding: 12px 14px; }
.jcard.big .jc-time { font-size: 13px; } .jcard.big .jc-sub { font-size: 14px; white-space: normal; }
.jlist { display: grid; gap: 8px; }
.jday + .jday { margin-top: 14px; }
.jday h4 { margin: 0 0 6px; }
.todo-row { display: flex; align-items: center; gap: 10px; }
.todo-row > a:first-child { flex: 1; min-width: 0; }
.crew-list { display: grid; gap: 8px; }
.crew-chk { color: var(--text); font-size: 15px; }
.run-acts { margin: 0 0 16px; }
.run-acts .btn { font-size: 17px; padding: 14px 22px; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist .chk { color: var(--text); font-size: 15px; align-items: flex-start; gap: 10px; }
.checklist input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }
.ph-group + .ph-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ph-group h4 { margin: 0; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.ph-grid figure { margin: 0; position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--off); }
.ph-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-missing { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 13px; }
.ph-del { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(7, 26, 46, .7); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.sig { display: block; width: 100%; height: 160px; border: 1px dashed #9fb3c8; border-radius: 10px; background: #fff; touch-action: none; margin: 0 0 6px; }
.sig-view img { max-width: 100%; max-height: 160px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.sig-view { margin: 8px 0 0; }

/* ── print view (invoices) ── */
.print-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(7, 26, 46, .55); overflow-y: auto; padding: 20px 12px; }
.print-wrap > .acts { max-width: 820px; margin: 0 auto 12px; align-items: center; background: #fff; border-radius: 12px; padding: 10px 12px; }
.print-sheet { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 4px; padding: 40px; color: #111; font-size: 14px; }
.ps-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 28px; }
.ps-head p, .ps-meta p { margin: 2px 0; }
.ps-logo { height: 44px; margin: 0 0 8px; }
.ps-meta { text-align: right; }
.ps-meta h1 { font: 800 30px/1 var(--display); letter-spacing: .04em; margin: 0 0 8px; color: var(--ink); }
.ps-to { display: flex; flex-direction: column; margin: 0 0 22px; }
.ps-items { margin: 0 0 18px; }
.ps-items tbody tr { cursor: default; }
.ps-items tbody tr:hover { background: none; }
.ps-totals { max-width: 320px; margin: 0 0 22px auto; }
.ps-paid { font: 800 22px/1 var(--display); color: var(--ok); border: 3px solid var(--ok); display: inline-block; padding: 8px 14px; transform: rotate(-3deg); }

/* ── customer quote page (/q/<link>) ── */
body.pub { background: var(--off); }
.pub-top { background: #fff; border-bottom: 1px solid var(--line); padding: 10px 16px; text-align: center; }
.pub-top img { height: 44px; width: auto; }
.pub-main { max-width: 760px; margin: 0 auto; padding: 20px 16px 40px; outline: none; }
.pub-card { padding: 26px; }
.pub-card h1 { font: 800 24px/1.2 var(--display); color: var(--ink); margin: 0 0 4px; }
.pq-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; }
.pq-head p { margin: 0; }
.pq-for { display: flex; flex-direction: column; text-align: right; font-size: 14px; }
.pq-msg { background: var(--off); border-radius: 10px; padding: 12px 14px; white-space: pre-wrap; }
.pq-items { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--line); }
.pq-item { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pq-item.opt { background: linear-gradient(90deg, var(--mint-xl), transparent 70%); padding-left: 10px; border-radius: 0; }
.pq-what p { margin: 4px 0 0; font-size: 14px; }
.pq-amt { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pq-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; }
.pq-pick input { width: 20px; height: 20px; }
.pq-terms { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.pq-terms h3 { font-size: 14px; margin: 0 0 4px; color: var(--navy); }
.pq-terms p { white-space: pre-wrap; margin: 0; }
.pq-approve { margin: 24px 0 0; padding: 18px; border: 2px solid var(--blue); border-radius: var(--radius); background: #f6faff; }
.pq-approve h2 { margin: 0 0 12px; font: 800 19px/1.2 var(--display); color: var(--ink); }
.pq-agree { color: var(--text); align-items: flex-start; margin: 0 0 14px; font-size: 15px; }
.pq-agree input { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.pq-decline { margin: 14px 0 0; }
.pub-foot { text-align: center; font-size: 14px; margin: 22px 0 0; }
.pub-foot p { margin: 4px 0; }

/* ── dispatch: drag-and-drop calendar, day lanes, route planner, crew map ── */
.week-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 10px; align-items: start; }
.unsched { background: #fff; border: 1px dashed #b9c6d4; border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; position: sticky; top: 76px; }
.unsched h4 { margin: 0; font-size: 14px; color: var(--navy); }
.unsched p { margin: 0 0 4px; }
.jcard[role=button] { cursor: grab; user-select: none; }
.jcard.dragging { opacity: .35; }
.drag-ghost { position: fixed; z-index: 80; pointer-events: none; box-shadow: var(--shadow); transform: rotate(1.5deg); cursor: grabbing; }
.drop-on { outline: 3px dashed var(--blue); outline-offset: -3px; background: #f3f8fe !important; }
.jc-plan { position: absolute; top: 4px; right: 6px; font-weight: 800; color: var(--blue); font-size: 13px; }
.jcard { position: relative; }
.day-board { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-x: auto; }
.lane { display: grid; grid-template-columns: 150px minmax(560px, 1fr); gap: 8px; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.lane-hours { background: none; border: 0; padding: 0 6px; }
.lane-h { display: flex; flex-direction: column; gap: 4px; justify-content: center; font-size: 14px; min-width: 0; }
.lane-h .btn { align-self: flex-start; }
.lane-track { position: relative; min-height: 72px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 14 - 1px), var(--line) calc(100% / 14 - 1px) calc(100% / 14)); border-radius: 6px; }
.lane-track.hours { min-height: 18px; background: none; }
.lane-track.hours span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.hour-line { display: none; }
.lane-card { position: absolute; height: 56px; overflow: hidden; padding: 4px 6px; font-size: 12px; }
.lane-card .jc-time { font-size: 11px; white-space: nowrap; }
.lane-card strong, .lane-card .jc-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(7, 26, 46, .5); display: grid; place-items: center; padding: 16px; }
.modal-box { background: #fff; border-radius: 14px; padding: 22px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); }
.modal-box h3 { margin: 0 0 6px; }
.route-list { padding-left: 22px; margin: 12px 0; }
.route-list li { margin: 0 0 8px; }
.map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; align-items: start; }
.crew-side { max-height: 460px; overflow-y: auto; }
.crew-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; }
.crew-pin { background: var(--blue); color: #fff; border: 3px solid #fff; border-radius: 50%; display: grid !important; place-items: center; font: 800 12px/1 var(--body); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.crew-pin.stale { background: #9aa3ad; }
.loc-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 40; background: #e3f6ec; color: #1d6b45; border: 1px solid #bfe6d0;
  border-radius: 99px; padding: 6px 14px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(7, 26, 46, .12); max-width: calc(100vw - 24px); text-align: center; }
body:has(.loc-pill) .toast { bottom: 60px; }
.month-grid { display: grid; grid-template-columns: repeat(6, auto); gap: 6px 12px; }
.type-card summary { cursor: pointer; }
.type-card[open] summary { margin-bottom: 12px; }
.type-card + .type-card { margin-top: 10px; }
.fields-builder { display: grid; gap: 8px; }
.field-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; background: var(--off); border-radius: 8px; }
.field-row .in-sm:first-child { flex: 1 1 180px; }
.field-row .in-sm[aria-label=Choices] { flex: 1 1 180px; }

/* ── money ── */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; align-items: start; }
.bars .val-wide { white-space: nowrap; }
.bars li:has(.val-wide) { grid-template-columns: minmax(100px, 40%) 1fr auto; }
.exp-form { margin: 0 0 16px; }
.exp-form.compact { margin: 10px 0; border-style: dashed; }
.exp-tbl tbody tr, .profit-tbl tbody tr { cursor: default; }
.profit-tbl td:not(:first-child), .profit-tbl th:not(:first-child) { text-align: right; white-space: nowrap; }
.rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 16px; }
.rate-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.rate-row .in-sm { width: 90px; }
.narrow-wide { max-width: 620px; }

/* ── grow: referrals + campaigns ── */
.ref-pick .mini { margin-top: 6px; }
.c-draft { background: #f1f3f5; color: #55606d; border-color: #dfe3e8; }
.c-sending { background: #fff4e0; color: #8a5300; border-color: #f5ddb0; }
.c-sent, .c-printed { background: #e3f6ec; color: #1d6b45; border-color: #bfe6d0; }
.aud-count { background: var(--off); border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.aud-count b { font: 800 22px/1 var(--display); color: var(--ink); margin-right: 4px; }
.chips { align-items: center; margin: -4px 0 8px; }
.c-preview { background: #fcfdff; }
.c-preview .pc-front { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; }
.pc-front { aspect-ratio: 6 / 4; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; background: #fff; overflow: hidden; }
.pc-logo { height: 34px; width: auto; align-self: flex-start; }
.pc-front h4 { font: 800 20px/1.15 var(--display); color: var(--ink); margin: 4px 0 0; }
.pc-front p { margin: 0; font-size: 14px; }
.pc-cta { font-weight: 800; color: var(--blue); font-size: 14px; margin-top: auto; }
.pc-ref { font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; }
.pc-sheet { display: grid; gap: 12px; justify-items: center; }
.pc-page { width: 6in; height: 4in; background: #fff; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.pc-page .pc-front { height: 100%; aspect-ratio: auto; }
.pc-back { font-size: 13px; }
.pc-from { position: absolute; top: .3in; left: .3in; font-size: 10px; color: #333; }
.pc-stamp { position: absolute; top: .3in; right: .3in; width: .8in; height: .9in; border: 1px dashed #999; display: grid; place-items: center; font-size: 9px; color: #999; }
.pc-to { position: absolute; left: 2.6in; top: 1.8in; font-size: 14px; line-height: 1.35; }
.labels { width: 8.5in; background: #fff; display: grid; grid-template-columns: repeat(3, 2.625in); grid-auto-rows: 1in; column-gap: .125in; padding: .5in .1875in; margin: 0 auto; }
.label { padding: .1in .15in; font-size: 11px; line-height: 1.3; overflow: hidden; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 50; }

@media (max-width: 1360px) { .who span { display: none; } }
@media (max-width: 760px) {
  .tabs { order: 3; flex-basis: 100%; padding-bottom: 8px; overflow-x: auto; }
  .tab { white-space: nowrap; padding: 8px 10px; }
  .lb-row { grid-template-columns: 30px 1fr auto; }
  .lb-trk { display: none; }
  .who span { display: none; }
  .detail, .controls { grid-template-columns: 1fr; }
  .q-grid { grid-template-columns: 1fr; }
  .week-wrap, .map-wrap, .grid2 { grid-template-columns: 1fr; }
  .unsched { position: static; min-height: 0; }
  .lane { grid-template-columns: 96px minmax(560px, 1fr); }
  .month-grid { grid-template-columns: repeat(4, auto); }
  th.hide-sm { display: none; }
  .week { grid-template-columns: 1fr; }
  .wday { min-height: 0; }
  .door-btns { grid-template-columns: repeat(2, 1fr); }
  .door-map { height: 360px; }
  .pq-for { text-align: left; }
  .pub-card, .print-sheet { padding: 18px; }
  .detail { grid-template-areas: "info" "ctl" "extra" "hist"; }
  .kv { grid-template-columns: 96px 1fr; }
  .filters .grow { flex-basis: 100%; }
  .filters select.in { flex: 1 1 40%; min-width: 0; }
  /* leads table → one card per lead */
  .leads-tbl table, .leads-tbl tbody, .leads-tbl tr, .leads-tbl td { display: block; }
  .leads-tbl thead, td.hide-sm { display: none; }
  .leads-tbl tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .leads-tbl tbody tr:last-child { border-bottom: 0; }
  .leads-tbl td { padding: 0; border: 0; }
  .leads-tbl .c-name { grid-column: 1; grid-row: 1; }
  .leads-tbl .c-status { grid-column: 2; grid-row: 1; text-align: right; }
  .leads-tbl .c-phone { grid-column: 1; grid-row: 2; }
  .leads-tbl .c-date { grid-column: 2; grid-row: 2; text-align: right; color: var(--muted); font-size: 13px; }
  .leads-tbl .c-area { grid-column: 1 / -1; grid-row: 3; color: var(--muted); font-size: 13px; }
  .leads-tbl .c-area::before { content: 'Area: '; }
  .leads-tbl td.empty { grid-column: 1 / -1; }
  .leads-tbl .c-fu { grid-column: 1; grid-row: 4; }
  .leads-tbl .c-fu:not(:empty)::before { content: 'Follow-up: '; }
  .leads-tbl .c-who { grid-column: 2; grid-row: 3 / 5; text-align: right; align-self: end; font-size: 13px; color: var(--muted); }
  .history li { flex-direction: column; gap: 2px; }
  /* admin accounts → one card per person */
  .admin-tbl, .admin-tbl tbody, .admin-tbl tr, .admin-tbl td { display: block; }
  .admin-tbl thead { display: none; }
  .admin-tbl tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .admin-tbl td { padding: 2px 0; border: 0; }
  .admin-tbl td:last-child { padding-top: 8px; }
}

@page postcard { size: 6in 4in; margin: 0; }
@media print {
  body:has(> .print-wrap) > *:not(.print-wrap) { display: none !important; }
  .pc-sheet { display: block; }
  .pc-page { page: postcard; box-shadow: none; break-after: page; }
  .labels { padding: .5in .1875in; }
  .loc-pill { display: none; }
  .print-wrap { position: static; background: none; padding: 0; overflow: visible; }
  .print-sheet { padding: 0; max-width: none; }
  .no-print { display: none !important; }
  body.pub .pq-approve, body.pub .pq-decline, body.pub .linkbtn { display: none !important; }
  body.pub { background: #fff; }
  .card { border: 0; }
}

/* ── doors v2: canvassing map, dispositions, territories, offline ── */
.offline-bar { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: #fff6e5; color: #7a5300; border: 1px solid #f3d79a; }
.offline-bar.is-off { background: #fdecea; color: #8a1f17; border-color: #f3b4ad; }
.map-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 10px; }
.map-bar .live-toggle { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.door-map.is-drawing { cursor: crosshair; outline: 3px solid #7b4fd0; }
.dot.g-hot { background: #7b4fd0; } .dot.g-info { background: #2a78d6; } .dot.g-dnk { background: #b0262b; }
/* disposition group tints for the Log + Map buttons */
.door-btn.grp-yes, .disp-btn.grp-yes { border-color: #9fdcc3; background: #effaf5; }
.door-btn.grp-hot, .disp-btn.grp-hot { border-color: #cbbaf0; background: #f5f1fd; }
.door-btn.grp-maybe, .disp-btn.grp-maybe { border-color: #f2dd9b; background: #fdf8ea; }
.door-btn.grp-info, .disp-btn.grp-info { border-color: #bcd4f3; background: #f3f8fe; }
.door-btn.grp-no, .disp-btn.grp-no { border-color: #f3c0ac; background: #fdf1ec; }
.door-btn.grp-dnk, .disp-btn.grp-dnk { border-color: #e3a9a9; background: #fcecec; }
.door-btn.grp-none, .disp-btn.grp-none { border-color: var(--line); background: #f7f8fa; }
/* bottom sheet */
.sheet-back { position: fixed; inset: 0; background: rgba(11,42,74,.45); display: flex; align-items: flex-end;
  justify-content: center; z-index: 1000; animation: sheetfade .15s ease; }
.sheet { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 18px 18px 0 0;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(11,42,74,.25); animation: sheetup .2s ease; }
@keyframes sheetfade { from { opacity: 0; } } @keyframes sheetup { from { transform: translateY(100%); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.sheet-head h3 { margin: 0; }
.sheet-x { border: 0; background: #eef2f6; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--navy); }
.sheet-body { }
.disp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.disp-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 76px;
  border-radius: 14px; border: 2px solid var(--line); background: #fff; font-weight: 600; font-size: 14px; color: var(--navy); cursor: pointer; }
.disp-btn span { font-size: 24px; line-height: 1; }
.disp-btn:active { transform: scale(.98); }
.disp-btn.is-disabled { opacity: .45; }
.btn-block { width: 100%; justify-content: center; margin-top: 4px; }
.btn-xs { padding: 4px 10px; font-size: 13px; }
@media (min-width: 560px) { .disp-grid { grid-template-columns: repeat(3, 1fr); } }

/* doors v2: bigger map + mobile full-screen */
.door-map { height: 70vh; min-height: 340px; }
@media (min-width: 760px) { .door-map { height: 520px; } }
.door-map.fs { position: fixed; inset: 0; height: auto !important; width: auto; z-index: 1200; border: 0; border-radius: 0; }
body.map-fs-open { overflow: hidden; }
.map-fs-exit { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 1300;
  width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3);
  font-size: 18px; color: var(--navy); cursor: pointer; }
/* keep the disposition sheet above a full-screen map */
.sheet-back { z-index: 1400; }

/* doors v2: walking-map drop pin + active locate button */
.drop-pin { background: none; border: 0; font-size: 28px; line-height: 1; text-align: center; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.map-bar .btn.on { background: var(--blue, #1f6fd0); color: #fff; border-color: var(--blue, #1f6fd0); }