:root {
  --navy: #0D1B2E;
  --raised: #16233A;
  --raised-2: #1E2E4A;
  --line: #2A3B58;
  --blue: #3D6A9E;
  --tint: #7EA8D8;
  --text: #E8EEF6;
  --muted: #8FA1B9;
  --good: #3FA37A;
  --warn: #D9A441;
  --bad: #C9605A;
  --gold: #E5C15A;
  --r: 12px;
  --glass: rgba(19, 31, 51, .62);
  --glass-2: rgba(26, 41, 65, .7);
  /* The background clips are pre-blurred in the file itself, so the panels don't blur again
     (that was hundreds of live blur layers for no visible gain, and heavy on a phone). */
  --blur: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--navy); color: var(--text); font: 15px/1.4 Inter, system-ui, -apple-system, sans-serif; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; position: relative; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--tint); }
.muted { color: var(--muted); }
.err { color: var(--bad); min-height: 1.2em; }

.wordmark { font-family: 'IBM Plex Sans Condensed', Inter, sans-serif; font-weight: 700; letter-spacing: .08em; font-size: 18px; white-space: nowrap; }
.wordmark span { color: var(--tint); }

.btn { border: 1px solid var(--line); background: var(--raised-2); border-radius: 10px; padding: 10px 14px; cursor: pointer; min-height: 44px; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--blue); border-color: var(--blue); font-weight: 600; }
.btn.big { min-height: 52px; font-size: 17px; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: default; }

/* background video — one persistent layer behind the whole app; UI floats on top as glass */
.bg-layer { position: fixed; inset: 0; overflow: hidden; background: var(--navy); pointer-events: none; }
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; filter: saturate(1.05) brightness(.82); transform: scale(1.04); pointer-events: none; }
.bg-video.on { opacity: 1; }
.bg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,27,46,.4), rgba(13,27,46,.22) 35%, rgba(13,27,46,.34) 75%, rgba(13,27,46,.58)); }
@media (prefers-reduced-motion: reduce) { .bg-video { display: none; } .bg-overlay { background: var(--navy); } }

/* The app (and login) sit in their own layer above the fixed background. Without this, any
   panel that isn't itself a stacking context gets painted UNDER the fixed video layer. */
#login, #app { position: relative; z-index: 1; }

/* login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card { width: min(360px, 100%); background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: grid; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.login-card .wordmark { font-size: 22px; margin-bottom: 8px; }
.login-card input { padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(13,27,46,.55); font-size: 17px; }

/* top bar */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); }
.stats { display: flex; gap: 12px; margin-left: auto; font-size: 11px; color: var(--muted); }
.stats b { color: var(--text); font-size: 16px; display: block; text-align: center; }
.conn { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--muted); cursor: pointer; }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.conn.live i { background: var(--good); box-shadow: 0 0 0 3px rgba(63,163,122,.2); }
.conn.down i { background: var(--bad); }

.active-banner { background: var(--blue); padding: 10px 16px; font-weight: 600; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.active-banner button { background: rgba(0,0,0,.2); border: 0; border-radius: 8px; padding: 6px 10px; cursor: pointer; }

/* layout: phone = one pane at a time; desktop = two columns */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.list-pane, .card-pane { min-width: 0; }
.card-pane { display: none; }
body.show-card .list-pane { display: none; }
body.show-card .card-pane { display: block; }
@media (min-width: 900px) {
  .layout { grid-template-columns: minmax(360px, 440px) 1fr; height: calc(100dvh - 58px); }
  .list-pane, .card-pane, body.show-card .list-pane, body.show-card .card-pane { display: flex; flex-direction: column; min-height: 0; }
  .list-pane { border-right: 1px solid var(--line); background: rgba(13,27,46,.1); backdrop-filter: blur(2px); }
  .list { overflow: auto; flex: 1; }
  .card-pane { overflow: auto; }
  .back { display: none !important; }
}

.tabs { display: flex; gap: 4px; padding: 8px 12px 0; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: 0; padding: 10px 10px; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tabs button.on { color: var(--text); border-color: var(--tint); font-weight: 600; }
.tabs .count { font-size: 11px; color: var(--muted); margin-left: 4px; }
.filters { display: flex; gap: 8px; padding: 10px 12px; }
.filters input, .filters select { flex: 1; min-width: 0; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font-size: 16px; }
.filters select { flex: 0 1 40%; }

.list { padding: 0 12px 24px; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px; border-radius: var(--r); background: var(--glass-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid transparent; margin-bottom: 8px; cursor: pointer; }
.row.sel { border-color: var(--tint); }
.row .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { font-size: 13px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.row .tel { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-decoration: none; background: var(--blue); color: #fff; border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.chip { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--raised-2); color: var(--muted); border: 1px solid var(--line); }
.chip.gold { color: var(--gold); border-color: #5a4b1f; }
.chip.A { color: #9fd1b6; } .chip.B { color: var(--tint); } .chip.C { color: #e0b6e8; }
.chip.over { color: var(--bad); border-color: #5a2a28; }
.chip.ok { color: #9fd1b6; }
.empty-list { color: var(--muted); padding: 24px 4px; text-align: center; }

/* lead card */
.empty { min-height: 240px; display: grid; place-items: center; padding: 48px 24px; text-align: center; }
.empty p { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 18px; margin: 0 0 8px; }
.empty p.muted { background: none; border: none; padding: 0 18px; font-size: 13px; }
@media (min-width: 900px) { .empty { min-height: 100%; } }
#card { padding: 16px; padding-bottom: calc(env(safe-area-inset-bottom) + 32px); max-width: 760px; width: 100%; background: rgba(13,27,46,.35); backdrop-filter: blur(4px); }
.back { margin-bottom: 8px; }
.card-head h1 { font-size: 22px; margin: 0 0 4px; }
.card-head .meta { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.call-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 16px 0; }
.callbtn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border-radius: 14px; background: var(--good); color: #06150e; font-weight: 700; font-size: 20px; text-decoration: none; }
/* desktop dashboard: phone number is informational (it dials on the other device), the
   Google Business link is the loud call-to-action since that's what gets used while a
   call is live */
.dash-row { margin: 16px 0; display: grid; gap: 10px; }
.dash-phone { font-size: 17px; font-weight: 600; }
.dash-phone .muted { font-weight: 400; font-size: 13px; display: block; }
.callbtn.gbp { background: var(--blue); color: #fff; font-size: 17px; min-height: 56px; }
.callbtn.gbp.ringing { animation: ringing-pulse 1.1s ease-in-out infinite; }
@keyframes ringing-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(61,106,158,.6); } 50% { box-shadow: 0 0 0 10px rgba(61,106,158,0); } }
.links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.links a { font-size: 14px; }
.box { background: var(--glass-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin: 12px 0; }
.box h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pitch { white-space: pre-wrap; }
details.box summary { cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
details.box[open] summary { margin-bottom: 8px; }

.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.outcomes button { min-height: 56px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised-2); cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px; }
.outcomes button.good { border-color: #2c6b52; }
.outcomes button.bad { border-color: #5a2a28; }
.outcomes button.pick { background: var(--blue); border-color: var(--blue); }
@media (max-width: 380px) { .outcomes { grid-template-columns: repeat(2, 1fr); } }

textarea.note { width: 100%; min-height: 96px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--navy); font-size: 16px; resize: vertical; }
.when { display: grid; gap: 8px; }
.when .quick { display: flex; flex-wrap: wrap; gap: 6px; }
.when .quick button { border: 1px solid var(--line); background: var(--raised-2); border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.when .quick button.on { background: var(--blue); border-color: var(--blue); }
.when input { padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--navy); font-size: 16px; }
.save-row { display: flex; gap: 8px; margin-top: 10px; }
.save-row .btn { flex: 1; }

.hist { list-style: none; margin: 0; padding: 0; }
.hist li { padding: 8px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.hist li:first-child { border-top: 0; }
.hist .h1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hist .acts { display: flex; gap: 6px; }
.hist .acts button { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 12px; cursor: pointer; color: var(--muted); }

.follow { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }

/* import */
.imp { display: grid; gap: 10px; padding: 4px 0; }
.imp input[type=text], .imp textarea { padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--raised); font-size: 16px; width: 100%; }
.imp textarea { min-height: 120px; font-family: ui-monospace, monospace; font-size: 12px; }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px); transform: translateX(-50%); background: var(--raised-2); border: 1px solid var(--line); padding: 10px 16px; border-radius: 999px; z-index: 20; max-width: calc(100% - 32px); }
.flash { animation: flash 1s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 2px var(--tint); } to { box-shadow: 0 0 0 0 transparent; } }

@media (max-width: 520px) {
  .top { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .top .wordmark { font-size: 15px; }
  .top .wordmark span { display: none; }
  .conn span { display: none; }
  .conn { padding: 8px; }
}
html, body { overflow-x: hidden; }

/* ---------- header target ---------- */
.stats b small { font-size: 11px; font-weight: 500; color: var(--muted); }
.stats .hit b { color: var(--good); }

/* ---------- full-width tabs (Pipeline, Stats): on a computer they get the whole screen until a lead is opened ---------- */
.list-pane { container-type: inline-size; container-name: lp; }
@media (min-width: 900px) {
  body.wide .layout { grid-template-columns: minmax(0, 1fr); }
  body.wide .card-pane { display: none; }
  body.wide .list-pane { border-right: 0; background: transparent; }
  body.wide .tabs, body.wide .filters, body.wide .list { width: 100%; max-width: 1360px; margin-left: auto; margin-right: auto; }
  body.widetab .back { display: inline-block !important; }
}

/* ---------- pipeline ---------- */
.pipe { display: grid; gap: 10px; }
.pfunnel { display: flex; height: 34px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--glass); }
.pf { display: grid; place-items: center; font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; color: #fff; }
.s-new { --st: #5b7aa3; } .s-trying { --st: #7a8fb0; } .s-warm { --st: #c9a43f; } .s-booked { --st: #3fa37a; } .s-client { --st: #35c28f; } .s-dead { --st: #6b5559; }
.pf.s-new, .pf.s-trying, .pf.s-warm, .pf.s-booked, .pf.s-client, .pf.s-dead { background: var(--st); }
.plegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.plegend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: var(--st); }
.pboard { display: grid; gap: 10px; }
.pcol { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line); border-top: 3px solid var(--st); border-radius: var(--r); min-width: 0; }
.phead { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px; cursor: pointer; font-weight: 700; }
.phead b { margin-left: auto; font-weight: 600; color: var(--muted); font-size: 13px; }
.phead .chev { font-style: normal; color: var(--muted); transition: transform .15s; }
.pcol.collapsed .chev { transform: rotate(-90deg); }
.pcol.collapsed .pbody { display: none; }
.pbody { padding: 0 8px 8px; display: grid; gap: 6px; }
.pcard { background: var(--glass-2); border: 1px solid transparent; border-radius: 10px; padding: 9px 10px; cursor: pointer; }
.pcard.sel { border-color: var(--tint); }
.pcard .nm { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .meta { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 3px; }
.pempty { padding: 6px 4px; font-size: 13px; }
@container lp (min-width: 760px) {
  .pboard { grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto; align-items: start; padding-bottom: 6px; }
  .pcol.collapsed .pbody { display: grid; }
  .phead { cursor: default; } .phead .chev { display: none; }
}

/* ---------- stats ---------- */
.stats-wrap { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.stats-wrap .box { margin: 0; }
.rhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rhead h3 { margin: 0; }
.ranges { display: flex; gap: 4px; flex-wrap: wrap; }
.ranges button { border: 1px solid var(--line); background: var(--glass-2); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--muted); }
.ranges button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; margin-top: 4px; }
.bar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.bar i.done { background: var(--good); }
.sr { margin: 9px 0; }
.srl { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.srl b { font-size: 20px; min-width: 2ch; }
.srl .muted { margin-left: auto; font-size: 12px; }
.sr.bad .bar i { background: var(--bad); } .sr.good .bar i { background: var(--good); } .sr.dim .bar i { background: #5d6b82; } .sr.dim { opacity: .75; }
.goal { margin: 10px 0; }
.gl { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.gl b { color: var(--text); font-size: 15px; }
.goal small { font-size: 12px; }
.gform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.gform label { font-size: 12px; color: var(--muted); display: grid; gap: 4px; }
.gform input { padding: 9px; border-radius: 10px; border: 1px solid var(--line); background: rgba(13,27,46,.55); font-size: 16px; }
.days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end; height: 130px; }
.day { display: grid; grid-template-rows: 14px 1fr 14px 14px; justify-items: center; height: 100%; font-size: 10px; color: var(--muted); min-width: 0; }
.day em { font-style: normal; font-size: 10px; }
.day u { text-decoration: none; color: var(--gold); font-size: 10px; }
.dcol { width: 100%; max-width: 22px; height: 100%; display: flex; align-items: flex-end; background: rgba(255,255,255,.05); border-radius: 5px; overflow: hidden; }
.dcol i { display: block; width: 100%; background: var(--blue); border-radius: 5px 5px 0 0; min-height: 0; }
.day.hit .dcol i { background: var(--good); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: right; font-weight: 500; color: var(--muted); font-size: 11px; padding: 4px 6px; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl td { text-align: right; padding: 6px; border-top: 1px solid var(--line); }
.tbl td:first-child { overflow-wrap: anywhere; }
.up { color: var(--good); } .down { color: var(--bad); }
.orow { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 8px 0; font-size: 13px; }
.orow .bar { grid-column: 1 / -1; margin: 0; } .orow.dim { opacity: .7; }
.jpast { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }

/* ---------- ‹ › between leads, beside the List button ---------- */
.cardnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cardnav .back { margin-bottom: 0; }
.navbtns { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.navbtns .btn { min-width: 48px; padding: 8px 14px; font-size: 22px; line-height: 1; }
.navbtns .btn:disabled { opacity: .3; }
.navpos { font-size: 13px; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }

/* long business names must not stretch a pipeline column past its edge */
.pbody { grid-template-columns: minmax(0, 1fr); }
.pcard { min-width: 0; }