/* Wholesale REI CRM — liquid glass theme */
:root{
  --bg:#000000;
  --text:#fdeef0; --muted:#d6a9b2;
  --accent:#ef4444; --accent2:#fb7185;             /* shades of red */
  --warn:#fbbf24; --danger:#f87171; --chip:#f43f5e;
  --line:rgba(255,255,255,.2); --line-soft:rgba(255,255,255,.12);
  --panel:#241620; --panel2:#301b26;               /* solid fallbacks (raised maroon) */
  --surface:rgba(42,26,34,.96);                    /* panel fallback (no blur) — lifts off black */
  --surface-lite:rgba(255,255,255,.07);
  --radius:18px; --radius-sm:12px;
  --sheen:inset 0 1px 0 rgba(255,255,255,.14);
  --shadow:0 18px 46px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,Arial,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;min-height:100vh;
}
/* Ambient backdrop: deep indigo→teal gradient with soft color blobs */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(700px 520px at 12% 6%, rgba(190,18,60,.16), transparent 58%),
    radial-gradient(820px 600px at 88% 14%, rgba(239,68,68,.10), transparent 58%),
    radial-gradient(760px 620px at 74% 96%, rgba(159,18,57,.14), transparent 58%),
    linear-gradient(160deg,#0a0206 0%,#020102 58%,#070205 100%);
}
h1,h2,h3,h4{letter-spacing:-.02em}
button{cursor:pointer;font-family:inherit}
button:disabled{opacity:.45;cursor:not-allowed}
input,select,textarea{font-family:inherit;font-size:14px}
a{color:var(--accent2)}
.hidden{display:none!important}

/* Scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);border:2px solid transparent;background-clip:padding-box}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.20) transparent}

/* ---------- Login ---------- */
#login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:30px;width:100%;max-width:400px;box-shadow:var(--sheen),var(--shadow);
}
.card h1{margin:0 0 4px;font-size:23px;font-weight:800;color:var(--accent)}
.card h1 span{color:var(--text)}
.card p.sub{margin:0 0 20px;color:var(--muted)}
.field{margin-bottom:14px}
.field label{display:block;margin-bottom:6px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:10px;color:var(--text);
  transition:border-color .18s,box-shadow .18s;
}
.field select option{background:var(--panel);color:var(--text)}
.field textarea{resize:vertical;min-height:70px}
/* A checkbox beside its text: the box keeps its own size, so every row lines
   up at the left edge. The full-width input rule above used to stretch it. */
.checkline input[type=checkbox]{width:auto;flex:0 0 auto;padding:0;margin:2px 0 0}
.checkline > span{flex:1 1 auto;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:rgba(96,165,250,.75);box-shadow:0 0 0 3px rgba(96,165,250,.18);
}

/* Glassy pill buttons */
.btn{
  background:linear-gradient(180deg,rgba(239,68,68,.42),rgba(185,28,28,.22));
  color:#ffe4e6;border:1px solid rgba(252,165,165,.45);
  padding:10px 18px;border-radius:999px;font-weight:700;
  box-shadow:var(--sheen),0 4px 14px rgba(190,18,60,.18);
  transition:box-shadow .2s,border-color .2s,transform .12s;
}
.btn:hover{border-color:rgba(252,165,165,.8);box-shadow:var(--sheen),0 0 20px rgba(239,68,68,.4)}
.btn:active{transform:translateY(1px)}
.btn.blue{
  background:linear-gradient(180deg,rgba(244,63,94,.40),rgba(159,18,57,.24));
  color:#ffe4ec;border-color:rgba(251,113,133,.5);
  box-shadow:var(--sheen),0 4px 14px rgba(190,18,60,.18);
}
.btn.blue:hover{border-color:rgba(251,113,133,.85);box-shadow:var(--sheen),0 0 20px rgba(244,63,94,.4)}
.btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);box-shadow:var(--sheen)}
.btn.ghost:hover{background:rgba(255,255,255,.10);box-shadow:var(--sheen),0 0 14px rgba(148,163,211,.18)}
.btn.small{padding:6px 13px;font-size:12px}
.btn.danger{
  background:linear-gradient(180deg,rgba(248,113,113,.34),rgba(220,38,38,.20));
  color:#ffe4e4;border-color:rgba(252,165,165,.42);
  box-shadow:var(--sheen),0 4px 14px rgba(239,68,68,.14);
}
.btn.danger:hover{border-color:rgba(252,165,165,.8);box-shadow:var(--sheen),0 0 20px rgba(248,113,113,.35)}
.btn.wide{width:100%}
.err{color:var(--danger);font-size:13px;margin-top:8px;min-height:16px}
.demo-hint{
  margin-top:16px;padding:10px 12px;background:rgba(255,255,255,.05);
  border:1px solid var(--line-soft);border-radius:12px;color:var(--muted);font-size:12px;line-height:1.6;
}
.demo-hint code{color:var(--text);background:transparent}
.linklike{background:none;border:none;color:var(--accent2);padding:0;font-size:13px;text-decoration:underline}

/* ---------- App shell ---------- */
#app{min-height:100vh}
header.topbar{
  display:flex;align-items:center;gap:16px;padding:12px 20px;
  background:linear-gradient(180deg,rgba(46,10,20,.96) 0%,rgba(14,5,9,.97) 55%,rgba(4,2,4,.98) 100%);
  border-bottom:1px solid var(--line-soft);
  box-shadow:var(--sheen),0 8px 24px rgba(0,0,0,.5);
  position:sticky;top:0;z-index:20;flex-wrap:wrap;
}

/* ---------- Desktop: menu on the LEFT-hand side (vertical sidebar) ---------- */
@media(min-width:721px){
  header.topbar{
    position:fixed; top:0; left:0; bottom:0; right:auto; width:220px; height:100vh;
    flex-direction:column; align-items:stretch; gap:10px; flex-wrap:nowrap;
    padding:18px 14px; overflow-y:auto;
    border-bottom:none; border-right:1px solid var(--line-soft);
    box-shadow:8px 0 24px rgba(20,4,10,.4),var(--sheen);
  }
  header.topbar .logo{ margin-bottom:10px; padding-bottom:12px; font-size:21px; border-bottom:1px solid rgba(239,68,68,.28); width:100%; }
  header.topbar .who{ color:#f2cdd4; }
  header.topbar nav.tabs{ flex-direction:column; gap:6px; width:100%; }
  header.topbar nav.tabs button{ width:100%; text-align:left; padding:10px 14px; }
  header.topbar .spacer{ flex:1 1 auto; }
  header.topbar .mode-badge{ align-self:flex-start; }
  header.topbar .who{ max-width:none; font-size:12px; line-height:1.5; }
  header.topbar #logoutBtn{ width:100%; }
  #app > main{ margin-left:220px; }
}
.logo{font-weight:800;font-size:18px;color:var(--accent);white-space:nowrap;letter-spacing:-.02em}
.logo span{color:var(--text)}
nav.tabs{display:flex;gap:6px;flex-wrap:wrap}
nav.tabs button{
  background:transparent;border:1px solid transparent;color:#f2cdd4;
  padding:8px 15px;border-radius:12px;font-weight:600;letter-spacing:.2px;
  transition:color .15s,background .15s,border-color .15s,box-shadow .15s;
}
nav.tabs button:hover{color:#fff;background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.28)}
/* Active page: BLACK background with RED lettering + a red accent bar & glow. */
nav.tabs button.active{
  background:#050203;
  color:#ff3b47;font-weight:800;
  border-color:rgba(239,68,68,.6);
  box-shadow:inset 3px 0 0 #ef4444, 0 0 16px rgba(239,68,68,.28);
}
nav.tabs button.active:hover{color:#ff5763;background:#050203}
.spacer{flex:1}
.who{color:var(--muted);font-size:13px;text-align:right;line-height:1.4}
.who b{color:var(--text)}
.mode-badge{
  font-size:11px;padding:3px 11px;border-radius:999px;font-weight:700;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--muted);
  white-space:nowrap;box-shadow:var(--sheen);
}
.mode-badge.live{background:rgba(52,211,153,.14);color:var(--accent);border-color:rgba(52,211,153,.4)}

main{padding:20px;max-width:1400px;margin:0 auto}
/* The pipeline list is a wide table, so it uses the whole screen. */
main:has(> #view-pipeline:not(.hidden)){max-width:none}
.viewhead{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.viewhead h2{margin:0;font-size:20px;font-weight:800}
.search{
  padding:8px 13px;background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:10px;color:var(--text);min-width:220px;transition:border-color .18s,box-shadow .18s;
}
.search:focus{outline:none;border-color:rgba(96,165,250,.75);box-shadow:0 0 0 3px rgba(96,165,250,.18)}
select.search option{background:var(--panel);color:var(--text)}

/* ---------- Pipeline board ---------- */
.board{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px}
.col{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;
  min-width:240px;width:240px;flex:0 0 auto;display:flex;flex-direction:column;max-height:75vh;
  box-shadow:var(--sheen),var(--shadow);
}
.col h3{margin:0;padding:12px 14px;font-size:13px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center}
.col h3 .count{background:rgba(255,255,255,.08);border:1px solid var(--line-soft);border-radius:999px;padding:1px 9px;font-size:12px;color:var(--muted)}
.col .cards{padding:10px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px;min-height:60px}
.pcard{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  border:1px solid var(--line-soft);border-radius:14px;padding:11px;cursor:pointer;
  box-shadow:var(--sheen),0 4px 12px rgba(2,6,23,.25);
  transition:border-color .15s,box-shadow .15s,transform .12s;
}
.pcard:hover{border-color:rgba(96,165,250,.55);box-shadow:var(--sheen),0 0 16px rgba(96,165,250,.22);transform:translateY(-1px)}
.pcard.dragging{opacity:.4;border-style:dashed;transform:none}
/* While a drag is in progress, freeze hover lift so the board doesn't jitter. */
.board.is-dragging .pcard:hover{transform:none;box-shadow:var(--sheen),0 4px 12px rgba(2,6,23,.25)}
.board.is-dragging .pcard{cursor:grabbing}
.pcard .nm{font-weight:700}
.pcard .pr{color:var(--muted);font-size:12px;margin-top:3px}
.pcard .meta{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.tag{display:inline-block;white-space:nowrap;vertical-align:middle;font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(16,185,129,.14);color:#6ee7b7;border:1px solid rgba(16,185,129,.32)}
.tag.blue{background:rgba(56,189,248,.13);color:#7dd3fc;border-color:rgba(56,189,248,.32)}
.tag.warn{background:rgba(251,191,36,.13);color:#fcd34d;border-color:rgba(251,191,36,.32)}
.tag.grey{background:rgba(255,255,255,.06);color:var(--muted);border-color:var(--line)}
.col.dragover{outline:2px solid rgba(96,165,250,.55);outline-offset:-2px;background:rgba(96,165,250,.10)}
.col.dragover .cards{background:rgba(96,165,250,.04)}

/* ---------- Tables ---------- */
.tablewrap{
  overflow-x:auto;border:1px solid var(--line-soft);border-radius:16px;
  background:var(--surface);box-shadow:var(--sheen),var(--shadow);
}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-soft)}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;background:rgba(255,255,255,.03)}

/* ---------- Big data tables: keep both scrollbars reachable ----------
   The Contacts list runs to ~1,700 rows. With the whole table in one
   page-scrolling box, its horizontal scrollbar sat about 100,000px down the
   page — so nudging the columns sideways meant scrolling to the very bottom of
   the list first. Giving the wrapper its own bounded height puts BOTH
   scrollbars on screen at all times, and pins the header row while you scroll.
   Phones never see this: mobile.css replaces the whole desktop table. */
#view-contacts .tablewrap,
#view-leadengine .tablewrap,
#view-dispo .tablewrap{
  max-height:calc(100vh - 200px);
  min-height:340px;
  overflow:auto;
  overscroll-behavior:contain;
}
#view-contacts .tablewrap thead th,
#view-leadengine .tablewrap thead th,
#view-dispo .tablewrap thead th{
  position:sticky;top:0;z-index:3;
  background:var(--panel);            /* opaque — rows must not show through */
  box-shadow:inset 0 -1px 0 var(--line-soft);
}
/* Reclaim the ~370px of overflow so the columns usually fit outright:
   trim the cell padding and stop the two widest columns hogging room. */
#view-contacts .tablewrap th,
#view-contacts .tablewrap td{padding:10px 8px}
#view-contacts .tablewrap td:nth-child(2){max-width:230px;overflow-wrap:anywhere}
#view-contacts .tablewrap .phonecell{white-space:nowrap;width:1%}
@media (max-width:900px){
  #view-contacts .tablewrap,
  #view-leadengine .tablewrap,
  #view-dispo .tablewrap{max-height:none;min-height:0;overflow:auto}
  #view-contacts .tablewrap thead th,
  #view-leadengine .tablewrap thead th,
  #view-dispo .tablewrap thead th{position:static}
}
tr:hover td{background:rgba(255,255,255,.045)}
tr:last-child td{border-bottom:none}
.rowlink{cursor:pointer}

/* ---------- Modal ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(4,8,22,.55);
  display:flex;align-items:flex-start;justify-content:center;
  padding:30px 16px;overflow-y:auto;z-index:50;
}
.modal{
  background:#000;border:1px solid var(--line);border-radius:20px;
  width:96%;max-width:1650px;margin-bottom:30px;box-shadow:var(--sheen),0 24px 64px rgba(2,6,23,.6);
  /* Header/footer stay pinned while the body scrolls between them. */
  display:flex;flex-direction:column;max-height:calc(100vh - 60px);
}
.modal .mhead{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;
  border-bottom:1px solid var(--line-soft);position:sticky;top:0;flex:0 0 auto;
  background:rgba(17,23,46,.92);border-radius:20px 20px 0 0;z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.modal .mhead h3{margin:0}
.mhead-titles{flex:1 1 auto;min-width:0}
.mhead-sub{font-size:13px;color:var(--muted);margin-top:3px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mhead-sub .mhs-ico{color:var(--accent2);font-size:12px}
.mhead-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
.modal .mbody{padding:16px 20px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal .mfoot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line-soft);flex-wrap:wrap;flex:0 0 auto}
/* Lead window footer: a row of same-size tool buttons, then Delete / Cancel / Save. */
.modal .mfoot.cm-foot{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px}
/* Desktop: one line, every label on one line, the buttons sharing the width
   (Marisa, 2026-09-29). A window too narrow for them all moves a whole button
   down rather than wrapping any label. */
.cm-foot .cm-tools{display:flex;flex-wrap:wrap;gap:6px}
.cm-foot .cm-tools .btn{flex:1 1 auto;margin:0;justify-content:center;text-align:center;white-space:nowrap;padding-left:8px;padding-right:8px}
.cm-foot .cm-main{display:flex;align-items:center;gap:10px}
.cm-foot .cm-main .spacer{flex:1}
.cm-foot .cm-main .btn{margin:0}
@media (max-width:720px){
  .cm-foot .cm-tools{display:grid;grid-template-columns:1fr 1fr}
  .cm-foot .cm-tools .btn{width:100%;height:100%;white-space:normal;line-height:1.2;padding-left:8px;padding-right:8px;min-height:40px}
  .cm-foot .cm-main .btn{flex:1 1 0;justify-content:center;white-space:nowrap;padding-left:10px;padding-right:10px}
  .cm-foot .cm-main #cmSave{flex-grow:1.6}
  .cm-foot .cm-main .spacer{display:none}
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.sec{margin-top:22px}
.sec h4{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);border-bottom:1px solid var(--line-soft);padding-bottom:6px;font-weight:700}
/* Contact modal: shade each section into its own card so the long form reads
   as distinct blocks (Details, Property, Dates, Communication, Documents...). */
.modal .sec{
  margin-top:12px; padding:14px 16px; border-radius:14px;
  background:rgba(225,29,72,.05); border:1px solid var(--line-soft);
  border-left:3px solid rgba(225,29,72,.55);
  box-shadow:var(--sheen);
}
/* Tighter vertical rhythm inside the (now wider) contact modal. */
.modal .field{margin-bottom:10px}
.modal .grid2,.modal .grid3{gap:10px 14px}
.modal .grid2 .field,.modal .grid3 .field{margin-bottom:0}
.modal .sec h4{ margin-top:0; color:#fda4af; border-bottom-color:rgba(225,29,72,.25); }
.modal .adminbar{ border-radius:14px; }
.close{background:transparent;border:none;color:var(--muted);font-size:22px;line-height:1}

/* ---------- Deal Qualifier calculator ----------
   Its own overlay so it can sit ON TOP of the contact modal (z-index 50). */
.calcov{z-index:60;padding:16px;align-items:center}
.modal.calcbox{max-width:1120px;max-height:calc(100vh - 32px);margin-bottom:0}
/* Answer on the left, what-if table on the right, so nothing needs scrolling
   to reach on a laptop. Stacks below 900px. */
.calccols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start}
.calcside .calch4{margin-top:0}
@media (max-width:900px){
  .calccols{grid-template-columns:1fr;gap:8px}
  .calcside .calch4{margin-top:16px}
}
.calcbox .calcwho{font-weight:500;opacity:.65;font-size:13px;margin-left:10px}
.calcbox .calcintro{margin:0 0 12px}
.calcbox .calcnote{margin:8px 0 0}
.calcbox .tablewrap{overflow-x:auto}
.calcmax{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding:14px 16px;border-radius:14px;
  background:rgba(225,29,72,.10);border:1px solid rgba(225,29,72,.35);
}
.calcmax span{font-weight:600}
.calcmax.dq{margin-top:8px;background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.35)}
.calcmax.dq small{font-weight:400;opacity:.75}
.dq-price{font-weight:800}
.calcmax b{font-size:26px;font-variant-numeric:tabular-nums;white-space:nowrap}
.calcgrid{margin-top:14px;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.calcrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--line-soft);
}
.calcrow:last-child{border-bottom:0}
.calcrow b{font-variant-numeric:tabular-nums;white-space:nowrap}
.calcrow b.bad{color:#ff6b5e}
.calcvs{
  margin-top:14px;padding:12px 14px;border-radius:12px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line-soft);
}
.calcvs.good{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.38)}
.calcvs.bad{background:rgba(225,29,72,.10);border-color:rgba(225,29,72,.38)}
.calcvs-l{font-weight:600}
.calcvs-r{white-space:nowrap;opacity:.85}
.calcvs-r b{font-variant-numeric:tabular-nums;margin-left:4px}
.calch4{margin:18px 0 8px;font-size:14px}
/* min-width:0 beats the global table{min-width:640px}, which otherwise pushed
   this table past its column and clipped the ROI figures off the right edge. */
.calctable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:0}
.calctable th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);font-weight:700;border-bottom:1px solid var(--line-soft);
  white-space:normal;line-height:1.25;padding:8px 10px;
}
.calctable td{padding:8px 10px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.calctable tbody tr:last-child td{border-bottom:0}
.calctable tbody tr:hover td{background:rgba(255,255,255,.05)}
.calctable tbody tr.on td{background:rgba(225,29,72,.18);font-weight:700}
@media (max-width:600px){
  .calcbox .grid3.calcinputs{grid-template-columns:1fr}
  .calcmax{flex-direction:column;align-items:flex-start;gap:4px}
  .calcmax b{font-size:22px}
  .calcvs{flex-direction:column;align-items:flex-start;gap:6px}
}
.close:hover{color:var(--text)}
.actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}

/* ---------- Contact modal: horizontal "Deal progress" timeline ----------
   Stages run left-to-right (dot + short label, connector lines between);
   the row scrolls horizontally on narrow screens so all stages fit. */
.ptl{display:flex;align-items:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0 6px}
.ptl-step{flex:1 0 0;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:6px}
.ptl-track{display:flex;align-items:center;width:100%}
.ptl-line{flex:1 1 auto;height:2px;background:var(--line-soft)}
.ptl-line.done{background:var(--accent)}
.ptl-line.none{background:transparent}
.ptl-dot{
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
}
.ptl-step.done .ptl-dot{background:var(--accent);border-color:var(--accent)}
.ptl-step.now .ptl-dot{background:rgba(239,68,68,.22);border:2px solid var(--accent)}
.ptl-label{font-size:11px;line-height:1.25;text-align:center;color:var(--muted);padding:0 4px}
.ptl-step.done .ptl-label,.ptl-step.now .ptl-label{color:var(--text)}
.ptl-step.now .ptl-label{font-weight:700}
.ptl-dur{display:block;font-size:10.5px;color:var(--muted);text-align:center;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptl-clock{font-size:13px;margin-top:6px;color:var(--text)}
.ptl-clock-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-right:4px}
/* "4 days in stage" on a Pipeline card */
.dis{color:var(--muted);white-space:nowrap}
/* Time in milestone card (dashboards) */
.stt-clock{margin-bottom:12px}
.stt-big{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
.stt-sub{font-size:12px;color:var(--muted)}
.stt-outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:14px}
.stt-out{border:1px solid var(--line-soft);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.stt-out span{font-size:11px;color:var(--muted)}
.stt-out b{font-size:16px;font-variant-numeric:tabular-nums}
.stt-out i{font-style:normal;font-size:11px;color:var(--muted)}
.stt-out.run{border-style:dashed}
.stt-table td:not(:first-child),.stt-table th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.ptl-cur{display:block;font-size:10px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* toggles */
.toggles{display:flex;gap:18px;flex-wrap:wrap}
.toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;user-select:none}
.toggle input{width:16px;height:16px;accent-color:var(--accent)}
.toggle .tdesc{color:var(--muted);font-size:11px}

/* activity log */
.log{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto}
.logitem{background:rgba(255,255,255,.05);border:1px solid var(--line-soft);border-radius:10px;padding:8px 11px;font-size:13px;box-shadow:var(--sheen)}
.logitem .lh{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px;margin-bottom:3px;flex-wrap:wrap}
.typechip{font-size:10px;font-weight:700;letter-spacing:.5px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted)}
.typechip.call{color:#7dd3fc;border-color:rgba(56,189,248,.45);background:rgba(56,189,248,.10)}
.typechip.sms{color:#6ee7b7;border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.10)}
.typechip.email{color:#c4b5fd;border-color:rgba(167,139,250,.45);background:rgba(167,139,250,.10)}
.typechip.rvm{color:#fcd34d;border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.10)}
.typechip.note{color:var(--muted)}
.typechip.stage{color:#f9a8d4;border-color:rgba(244,114,182,.45);background:rgba(244,114,182,.10)}

/* messages */
.msgrow{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px;flex-wrap:wrap}
.msgrow .num{
  background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:10px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-weight:800;box-shadow:var(--sheen);
}
.msgrow textarea{
  flex:1;min-width:200px;min-height:46px;padding:8px 10px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:10px;color:var(--text);resize:vertical;
  transition:border-color .18s,box-shadow .18s;
}
.msgrow textarea:focus{outline:none;border-color:rgba(96,165,250,.75);box-shadow:0 0 0 3px rgba(96,165,250,.18)}
.msgrow .msgside{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pill{
  font-size:11px;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);color:var(--muted);display:inline-flex;align-items:center;gap:5px;box-shadow:var(--sheen);
}
.pill.sent{background:rgba(52,211,153,.14);color:var(--accent);border-color:rgba(52,211,153,.4)}
.pill input{accent-color:var(--accent);margin:0}

/* ---------- Tasks ---------- */
.tasklist{display:flex;flex-direction:column;gap:8px}
.taskitem{
  display:flex;align-items:center;gap:10px;background:var(--surface-lite);
  border:1px solid var(--line-soft);border-radius:14px;padding:10px 14px;flex-wrap:wrap;
  box-shadow:var(--sheen),0 4px 12px rgba(2,6,23,.2);
}
.taskitem input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto}
.taskitem.done .tt{text-decoration:line-through;color:var(--muted)}
.taskitem .tt{flex:1;min-width:140px}
.due{font-size:12px;color:var(--warn);white-space:nowrap}
.due.overdue{color:var(--danger);font-weight:700}
.taskform{
  display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:16px;padding:14px;margin-bottom:16px;
  box-shadow:var(--sheen),var(--shadow);
}
.taskform .field{margin:0;flex:1;min-width:160px}
.subhead{margin:20px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}

/* ---------- Misc ---------- */
.hint{color:var(--muted);font-size:12px;line-height:1.6}
.banner{
  background:rgba(59,130,246,.12);border:1px solid rgba(96,165,250,.35);color:#cfe3ff;
  padding:10px 15px;border-radius:14px;font-size:13px;margin-bottom:16px;line-height:1.5;box-shadow:var(--sheen);
}
.empty{color:var(--muted);text-align:center;padding:40px}
.kv{font-size:13px;margin-bottom:8px}
.kv b{color:var(--muted);font-weight:600}
.panelbox{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:16px;
  padding:18px 20px;max-width:720px;box-shadow:var(--sheen),var(--shadow);
}
.panelbox h3{margin:0 0 10px;font-size:16px}
select.inline{padding:5px 9px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:12px}
select.inline option{background:var(--panel);color:var(--text)}

/* toast */
#toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:rgba(23,30,56,.92);border:1px solid var(--line);color:var(--text);
  padding:10px 18px;border-radius:999px;font-size:13px;
  /* Above every window, including the phone's full-screen ones (z-index 200),
     so an error never lands hidden behind the window that caused it. */
  z-index:100001;
  box-shadow:var(--sheen),0 12px 32px rgba(2,6,23,.6);max-width:90vw;
}
#toast.error{border-color:rgba(248,113,113,.55);color:#fecaca}
#toast.ok{border-color:rgba(52,211,153,.5);color:var(--accent)}

@media(max-width:700px){
  .grid2,.grid3{grid-template-columns:1fr}
  main{padding:12px}
  header.topbar{padding:10px 12px}
  .who{display:none}
}

/* ---------- Leads ---------- */
.tag.lead{background:rgba(168,85,247,.15);color:#d8b4fe;border-color:rgba(168,85,247,.35)}
button.unread-chip{cursor:pointer;font:inherit;font-size:11px;line-height:1.2;font-weight:600}
button.unread-chip:hover{filter:brightness(1.15)}

/* In-app document viewer (PDF / images) */
.docviewer{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.72);display:flex;padding:2vh 2vw}
.docviewer-box{margin:auto;width:min(1100px,96vw);height:92vh;background:#0f172a;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.docviewer-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.docviewer-title{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docviewer-body{flex:1;background:#fff;overflow:auto;display:flex}
@media (max-width:640px){.docviewer{padding:0}.docviewer-box{width:100vw;height:100vh;border-radius:0}}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filterbar .search{min-width:220px;flex:1}
.filterbar .search.sm{min-width:100px;max-width:150px;flex:0 1 auto}
/* "Lead owner: Everyone" needs a little more room than the other small filters. */
.filterbar .search.sm.ownerFilter{max-width:210px}
select.search{appearance:auto}
.thumb{max-width:200px;max-height:130px;border-radius:12px;border:1px solid var(--line);display:block;margin-top:8px;object-fit:cover;box-shadow:var(--shadow)}

/* ---------- Lead Engine / grade badges (A–F, glass pills) ---------- */
.grade-badge{
  display:inline-block;min-width:20px;padding:2px 9px;margin-right:6px;
  border-radius:999px;font-size:12px;font-weight:800;line-height:1.35;
  text-align:center;vertical-align:middle;border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.grade-A{background:rgba(39,174,96,.24);border-color:rgba(74,222,128,.55);color:#86efac}
.grade-B{background:rgba(46,204,113,.16);border-color:rgba(134,239,172,.42);color:#a7f3d0}
.grade-C{background:rgba(243,156,18,.20);border-color:rgba(251,191,36,.5);color:#fcd34d}
.grade-D{background:rgba(230,126,34,.22);border-color:rgba(251,146,60,.5);color:#fdba74}
.grade-E{background:rgba(231,76,60,.22);border-color:rgba(248,113,113,.55);color:#fca5a5}
.grade-F{background:rgba(139,0,0,.5);border-color:rgba(220,38,38,.6);color:#fecaca}
td .grade-badge{margin-right:0}
.le-result{margin-top:12px;font-size:13px;font-weight:600;min-height:18px}
.le-result.ok{color:var(--accent)}
.le-result.error{color:var(--danger)}

/* ---------- Lead status badges (NEW / WORKING / RELISTED) ---------- */
/* .ls-queue is kept: reused as a neutral blue badge by dispo.js and alerts. */
.status-badge{
  display:inline-block;padding:2px 10px;margin-right:6px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.6px;vertical-align:middle;
  white-space:nowrap;line-height:1.6;border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.ls-new{background:rgba(250,204,21,.20);color:#fde68a;border-color:rgba(250,204,21,.5)}
.ls-queue{background:rgba(96,165,250,.13);color:#93c5fd;border-color:rgba(96,165,250,.38)}
.ls-relisted{background:rgba(167,139,250,.18);color:#c4b5fd;border-color:rgba(167,139,250,.5)}
.tag.relisted{background:rgba(167,139,250,.16);color:#c4b5fd;border-color:rgba(167,139,250,.45)}
.ls-working{background:rgba(255,255,255,.06);color:var(--muted);border-color:var(--line)}
.ls-contacted{background:rgba(52,211,153,.14);color:#6ee7b7;border-color:rgba(52,211,153,.4)}
td .status-badge{margin-right:0}
.mhead h3 .status-badge{margin-left:6px}

/* ---------- Import change history ---------- */
.changelog{margin-top:6px;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);border-radius:10px;padding:8px 11px;max-height:180px;overflow-y:auto;font-size:12px}
.cl-line{padding:3px 0;border-bottom:1px dashed var(--line-soft);color:var(--text);font-family:ui-monospace,Consolas,monospace}
.cl-line:last-child{border-bottom:none}

/* ---------- Contacts: prominent search, sortable headers, bulk bar ---------- */
.filterbar .search.big{
  flex:1 1 240px;min-width:200px;max-width:420px;padding:9px 13px;font-size:14px;
  border-color:rgba(96,165,250,.5);box-shadow:0 0 0 1px rgba(96,165,250,.22),var(--sheen);
}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{color:var(--text)}
th.sortable .arrow{font-size:10px;color:var(--accent2)}
th.chk,td.chk{width:34px;text-align:center}
td.chk input,th.chk input{cursor:pointer;accent-color:var(--accent2)}
.bulkbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(59,130,246,.10);border:1px solid rgba(96,165,250,.4);
  border-radius:14px;padding:10px 15px;margin-bottom:12px;box-shadow:var(--sheen);
}
.bulkbar b{color:var(--accent2)}
.bulkbar .sep{color:var(--line)}
.bulkbar select{padding:7px 11px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;color:var(--text);max-width:260px}
.bulkbar select option{background:var(--panel);color:var(--text)}

/* ---------- Contact modal: admin bar (assign + Keep-as-NEW pin) ---------- */
.adminbar{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  background:rgba(255,255,255,.05);border:1px solid var(--line-soft);
  border-radius:14px;padding:10px 15px;margin-bottom:16px;box-shadow:var(--sheen);
}
.adminbar .btn{white-space:nowrap}

/* ---------- Liquid glass: frosted blur where supported ---------- */
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .card,.col,.tablewrap,.modal,.panelbox,.taskform,.gcard,.kpi{
    background:linear-gradient(180deg,rgba(255,236,241,.11),rgba(255,236,241,.05));
    border-color:rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(20px) saturate(165%);
    backdrop-filter:blur(20px) saturate(165%);
    box-shadow:var(--sheen),0 18px 46px rgba(0,0,0,.6),0 0 0 1px rgba(239,68,68,.12);
  }
  header.topbar{
    background:linear-gradient(180deg,rgba(60,12,26,.72) 0%,rgba(16,6,10,.78) 55%,rgba(6,2,4,.82) 100%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
  }
  .taskitem,.bulkbar,.adminbar,.banner{
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    backdrop-filter:blur(12px) saturate(140%);
  }
  .overlay{
    background:rgba(4,8,22,.42);
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
  }
  .modal .mhead{
    background:#000;
  }
  #toast{
    background:rgba(23,30,56,.66);
    -webkit-backdrop-filter:blur(14px) saturate(150%);
    backdrop-filter:blur(14px) saturate(150%);
  }
}

/* ---- Softphone call widget ---- */
.call-widget{
  position:fixed; right:20px; bottom:20px; z-index:1200;
  width:290px; padding:16px; border-radius:16px;
  background:rgba(17,23,46,.92); color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  animation:cwIn .18s ease-out;
}
.call-widget.hidden{ display:none; }
@keyframes cwIn{ from{ transform:translateY(10px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.call-widget .cw-head{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; opacity:.7; margin-bottom:4px; }
.call-widget .cw-num{ font-size:16px; font-weight:700; margin-bottom:8px; word-break:break-word; }
/* The caller's number under their name on an incoming call. */
.call-widget .cw-sub{ font-size:14px; opacity:.75; margin:-4px 0 10px; font-variant-numeric:tabular-nums; }
.call-widget .cw-timer{ font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; margin:2px 0 10px; }
/* Calling / Ringing: pulsing dots where the timer will be once they answer. */
.call-widget .cw-head.cw-pending{ opacity:1; color:#6ee7b7; }
.call-widget .cw-dots{ display:flex; gap:7px; height:31px; align-items:center; }
.call-widget .cw-dots span{ width:9px; height:9px; border-radius:50%; background:#fff; opacity:.25; animation:cwDot 1.2s infinite ease-in-out; }
.call-widget .cw-dots span:nth-child(2){ animation-delay:.2s; }
.call-widget .cw-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes cwDot{ 0%,80%,100%{ opacity:.25; transform:scale(.85); } 40%{ opacity:1; transform:scale(1); } }
.call-widget .btn.on{ background:rgba(255,255,255,.9); color:#11172e; }
.call-widget .cw-note{
  width:100%; box-sizing:border-box; min-height:64px; resize:vertical;
  border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; padding:8px 10px; font:inherit; font-size:13px;
  margin-bottom:10px;
}
.call-widget .cw-note::placeholder{ color:rgba(255,255,255,.45); }
.call-widget .cw-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

/* In-call DTMF keypad — the softphone has no handset, so this is how you
   reach an extension or work a "press 1 for sales" menu. */
.call-widget .cw-pad{ margin:2px 0 10px; }
.call-widget .cw-pad-sent{
  min-height:18px; margin-bottom:8px; padding:5px 8px; border-radius:8px;
  background:rgba(255,255,255,.06); font-size:13px; letter-spacing:.08em;
  font-variant-numeric:tabular-nums; word-break:break-all; opacity:.85;
}
.call-widget .cw-pad-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.call-widget .cw-key{
  padding:10px 0; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08);
  color:#fff; font:inherit; font-size:17px; font-weight:700; line-height:1;
  transition:background .12s ease, transform .06s ease;
}
.call-widget .cw-key:hover{ background:rgba(255,255,255,.16); }
.call-widget .cw-key:active{ background:rgba(255,255,255,.26); transform:scale(.96); }
.call-widget .cw-pad-row{ display:flex; gap:6px; margin-top:8px; }
.call-widget .cw-pad-input{
  flex:1; min-width:0; box-sizing:border-box;
  border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; padding:8px 10px;
  font:inherit; font-size:13px; letter-spacing:.06em;
}
.call-widget .cw-pad-input::placeholder{ color:rgba(255,255,255,.45); letter-spacing:normal; }
.call-widget .btn.ghost.on{ background:rgba(255,255,255,.18); color:#fff; }
.btn.danger{ background:#c0392b; border-color:#c0392b; color:#fff; }
.btn.ghost.danger{ background:transparent; color:#ff6b5e; border-color:rgba(255,107,94,.5); }

/* Pink click-to-call button in the Contacts table phone cell */
.callbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; margin-left:8px; padding:0;
  border:none; border-radius:50%; cursor:pointer; vertical-align:middle;
  background:#ff2d78; color:#fff;
  box-shadow:0 2px 7px rgba(255,45,120,.45);
  transition:background .12s ease, transform .12s ease;
}
.callbtn:hover{ background:#ff4f8f; transform:translateY(-1px); }
.callbtn:active{ transform:translateY(0); }
.phonenum{ vertical-align:middle; }

/* Per-contact documents list */
.doclist{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.docitem{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
}
.docitem .docname{ font-weight:600; flex:1; min-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.docitem .docmeta{ font-size:12px; color:var(--muted); }
.docitem .docacts{ display:flex; gap:6px; margin-left:auto; }

/* RVM recorder row */
.rvmrec{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 6px; }
#rvmRecBtn{ color:#ff2d78; }

/* Unread-voicemail alert badge in the top bar */
.vm-badge{ background:#ff2d78; border-color:#ff2d78; color:#fff; font-weight:700; }
.vm-badge:hover{ background:#ff4f8f; border-color:#ff4f8f; }
.vm-badge.hidden{ display:none; }

/* Unread inbound activity row highlight */
.logitem.unread{ box-shadow:inset 3px 0 0 #ff2d78; }

/* Pipeline card "Added" date line */
.pcard .pdate{ font-size:11px; opacity:.65; margin-top:2px; }

/* ------------------------------ Mobile / PWA ------------------------------ */
/* Respect iOS safe areas (notch) when installed. */
body{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }

@media (max-width: 720px) {
  .topbar{ flex-wrap:wrap; gap:8px; padding:8px 10px; position:sticky; top:0; z-index:50; }
  .topbar .logo{ font-size:16px; }
  .topbar .spacer{ display:none; }
  .who{ font-size:11px; max-width:45%; overflow:hidden; }
  /* Tab bar scrolls horizontally instead of overflowing */
  .tabs{ order:10; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; display:flex; gap:4px; }
  .tabs button{ flex:0 0 auto; }

  main{ padding:10px; }
  .viewhead{ flex-wrap:wrap; gap:8px; }
  .viewhead h2{ width:100%; }

  /* Pipeline: swipeable columns */
  .board{ display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
  .board .col{ flex:0 0 82%; scroll-snap-align:start; }

  /* Filters + search stack full-width */
  .filterbar{ flex-direction:column; align-items:stretch; }
  .filterbar .search, .filterbar select{ width:100%; }
  /* In a vertical column, `flex:1 1 240px` makes the search's 240px basis a
     VERTICAL height (and grow to fill) — reset it to natural height. */
  .filterbar .search.big{ flex:0 0 auto; max-width:none; height:auto; }

  /* Modal takes the whole screen */
  .overlay{ padding:0; }
  .modal{ width:100vw; max-width:100vw; height:100vh; max-height:100vh; border-radius:0; }
  /* Push the header (and its X button) below the phone status bar / notch so
     the close button is never hidden under the battery/clock and stays tappable. */
  .modal .mhead{ padding-top:calc(14px + env(safe-area-inset-top)); border-radius:0; }
  .modal .close{ font-size:30px; padding:4px 8px; margin:-4px -6px -4px 0; line-height:1; }
  .grid2, .grid3{ grid-template-columns:1fr; }

  /* Tables scroll horizontally */
  .tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Bigger tap targets */
  .btn{ padding:10px 12px; }
  .btn.small{ padding:8px 10px; }
  .callbtn{ width:34px; height:34px; }
}

/* ---------- Dashboard (GoHighLevel-style, light cards + red charts) ---------- */
.dash{ background:#eef1f6; border-radius:16px; padding:16px; margin:-2px; }
.dash .grow{ display:grid; gap:16px; margin-bottom:16px; }
.dash .grow:last-child{ margin-bottom:0; }
.dash .grow3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:1100px){ .dash .grow3{ grid-template-columns:1fr; } }
.gcard{ background:#fff; border:1px solid #e6e9f0; border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.05); overflow:hidden; }
.gcard-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid #eef0f4; }
.gcard-h h3{ margin:0; font-size:16px; color:#243043; font-weight:700; letter-spacing:0; }
.gpill{ font-size:12px; color:#475467; background:#f7f8fb; border:1px solid #e6e9f0; border-radius:8px; padding:5px 10px; white-space:nowrap; }
.gcard-b{ padding:18px; color:#243043; }
.donut{ display:block; }
.gsplit{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.gchart{ flex:0 0 auto; text-align:center; }
.glegs{ flex:1 1 160px; display:flex; flex-direction:column; gap:10px; min-width:150px; }
/* Wide static legend: all rows visible (no internal scroll), laid out across
   the card width in multiple columns. Collapses to fewer columns on narrow screens. */
.glegs-wide{ display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:10px 28px; align-content:start; }
@media(max-width:1100px){ .glegs-wide{ grid-template-columns:repeat(2,minmax(160px,1fr)); } }
@media(max-width:640px){ .glegs-wide{ grid-template-columns:1fr; } }
.gleg{ display:flex; align-items:center; gap:8px; font-size:13px; color:#344054; }
.gsw{ width:12px; height:12px; border-radius:3px; flex:0 0 auto; }
.glab{ color:#475467; }
.gval{ margin-left:auto; color:#98a2b3; font-size:12px; white-space:nowrap; }
.ovbars{ display:flex; flex-direction:column; gap:16px; padding:6px 0 4px; }
.ovrow{ display:flex; align-items:center; gap:10px; }
.ovlbl{ width:82px; flex:0 0 82px; font-size:12px; color:#667085; text-align:right; }
.ovtrack{ flex:1; height:12px; background:#f2f4f7; border-radius:6px; overflow:hidden; }
.ovfill{ height:100%; border-radius:6px; min-width:3px; transition:width .4s ease; }
.ovtotal{ text-align:center; margin-top:16px; color:#667085; font-size:13px; }
.ovtotal b{ display:block; font-size:20px; color:#243043; margin-top:2px; }
.gfun{ display:grid; grid-template-columns:1fr 90px 108px; gap:8px 6px; align-items:center; }
.gfun-cellh{ font-size:12px; color:#667085; text-align:center; padding-bottom:4px; line-height:1.2; }
.gfun-cellh:first-child{ text-align:left; }
.gfun-barcell{ padding:3px 0; }
.gfun-bar{ min-height:46px; border-radius:8px; display:flex; flex-direction:column; justify-content:center; padding:6px 12px; color:#fff; min-width:150px; transition:width .4s ease; }
.gfun-bar .gfb-l{ line-height:1.2; }
.gfb-l{ font-weight:700; font-size:13px; }
.gfb-v{ font-size:12px; opacity:.92; }
.gfun-cell{ background:#f6f7f9; border-radius:8px; text-align:center; font-size:13px; color:#344054; padding:14px 4px; font-weight:600; }
.gtasks{ padding:4px 0; }
.gtask{ display:flex; align-items:flex-start; gap:12px; padding:14px 18px; border-bottom:1px solid #eef0f4; }
.gtask:last-child{ border-bottom:none; }
.gtask input{ margin-top:3px; cursor:pointer; width:16px; height:16px; accent-color:var(--accent); }
.gtask.taskdone, .mtrow.taskdone{ opacity:.4; transition:opacity .2s; }
.mtrow.taskdone .mtnm{ text-decoration:line-through; }
.gtask-t{ color:#c0392b; font-weight:600; font-size:14px; }
.gtask-s{ color:#667085; font-size:13px; margin-top:3px; }
.gdue{ display:inline-block; font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px; background:#eef1f6; color:#667085; margin-left:6px; }
.gdue.overdue{ background:#fef0f0; color:#d92d20; }
.gtable{ width:100%; border-collapse:collapse; }
.gtable th{ text-align:left; font-size:12px; color:#667085; font-weight:600; padding:10px 12px; border-bottom:1px solid #eef0f4; }
.gtable td{ padding:12px; border-bottom:1px solid #f2f4f7; color:#344054; font-size:13px; }
.gtag{ background:#fdecef; color:#be123c; border:1px solid #fbd0d9; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:600; }
.ghint{ color:#98a2b3; padding:16px; text-align:center; }

/* Unread count badge on a nav item */
.navbadge{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; margin-left:8px; border-radius:999px; background:#e11d48; color:#fff;
  font-size:11px; font-weight:800; vertical-align:middle;
}

/* ---------- Conversations (GoHighLevel-style, light) ---------- */
.conv-item.unread .conv-name{ font-weight:800; color:#111827; }
.conv-item.unread .conv-snip{ color:#243043; font-weight:700; }
.conv-item.unread{ background:#fff7f8; }
.conv-item.unread::before{ content:""; width:8px; height:8px; border-radius:50%; background:#e11d48; position:absolute; left:4px; }
.conv-item{ position:relative; }
.conv{ display:flex; flex-direction:column; height:calc(100vh - 90px); min-height:480px; }
.conv-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid #eef0f4; flex:0 0 auto; }
.conv-tabs{ display:flex; gap:6px; }
.conv-tabs button{ background:transparent; border:none; color:#667085; font-weight:700; font-size:15px; padding:6px 10px; border-radius:8px; }
.conv-tabs button.active{ color:#c0122e; background:#fdecef; }
.conv-actions{ display:flex; gap:8px; }
.conv-actions .gpill{ cursor:pointer; }
.conv-body{ display:flex; flex:1 1 auto; min-height:0; }
.conv-list{ flex:0 0 320px; width:320px; border-right:1px solid #eef0f4; overflow-y:auto; }
@media(max-width:760px){ .conv-list{ flex-basis:180px; width:180px; } }
.conv-item{ display:flex; gap:10px; align-items:center; padding:12px 14px; border-bottom:1px solid #f2f4f7; cursor:pointer; }
.conv-item:hover{ background:#f8f9fc; }
.conv-item.active{ background:#fdecef; }
.conv-av{ width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:#eceef3; color:#667085; display:flex; align-items:center; justify-content:center; font-weight:700; }
.conv-meta{ flex:1; min-width:0; }
.conv-top{ display:flex; justify-content:space-between; gap:8px; }
.conv-name{ font-weight:700; color:#243043; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-time{ color:#98a2b3; font-size:12px; white-space:nowrap; }
.conv-snip{ color:#667085; font-size:13px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-badge{ background:#e11d48; color:#fff; border-radius:999px; font-size:11px; padding:0 6px; margin-left:6px; font-weight:700; }
.conv-detail{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.conv-empty{ margin:auto; text-align:center; color:#98a2b3; font-size:16px; line-height:2; }
.conv-thead{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid #eef0f4; flex:0 0 auto; }
.conv-thead .gpill{ margin-left:auto; cursor:pointer; }
.conv-msgs{ flex:1 1 auto; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
.cmsg{ max-width:74%; display:flex; flex-direction:column; }
.cmsg.in{ align-self:flex-start; }
.cmsg.out{ align-self:flex-end; align-items:flex-end; }
.cbub{ padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.4; }
.cmsg.in .cbub{ background:#f2f4f7; color:#243043; border-bottom-left-radius:4px; }
.cmsg.out .cbub{ background:#e11d48; color:#fff; border-bottom-right-radius:4px; }
.ctime{ font-size:11px; color:#98a2b3; margin-top:3px; }
.conv-reply{ display:flex; align-items:flex-end; gap:8px; padding:12px 16px; border-top:1px solid #eef0f4; flex:0 0 auto; }
.conv-reply textarea{ flex:1; resize:vertical; height:120px; min-height:90px; max-height:50vh; line-height:1.45; border:1px solid #e6e9f0; border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; color:#243043; background:#fff; }
.conv-actions2{ display:flex; gap:8px; padding:14px 18px; border-bottom:1px solid #eef0f4; }
.conv-leadbar{ flex-wrap:wrap; padding:10px 18px; }
.conv-leadbar .btn{ padding:6px 12px; font-size:13px; }
.clog{ padding:12px 18px; border-bottom:1px solid #f2f4f7; font-size:13px; color:#344054; }

/* ---------- Unify Dashboard + Conversations to the dark glass theme ---------- */
.dash{ background:transparent; padding:0; margin:0; }
.gcard{ background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--sheen),var(--shadow); }
.gcard-h{ border-bottom:1px solid var(--line-soft); }
.gcard-h h3{ color:var(--text); }
.gcard-b{ color:var(--text); }
.gpill{ background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--muted); }
.gleg{ color:var(--text); }
.glab{ color:var(--muted); }
.gval{ color:var(--muted); }
.ovlbl{ color:var(--muted); }
.ovtrack{ background:rgba(255,255,255,.08); }
.ovtotal{ color:var(--muted); }
.ovtotal b{ color:var(--text); }
.gfun-cellh{ color:var(--muted); }
.gfun-cell{ background:rgba(255,255,255,.05); color:var(--text); }
.gtable th{ color:var(--muted); border-bottom:1px solid var(--line-soft); }
.gtable td{ color:var(--text); border-bottom:1px solid var(--line-soft); }
.gtag{ background:rgba(239,68,68,.15); color:#fda4af; border:1px solid rgba(239,68,68,.4); }
.ghint{ color:var(--muted); }
.gtasks .gtask{ border-bottom:1px solid var(--line-soft); }
.gtask-t{ color:#ff6b78; }
.gtask-s{ color:var(--muted); }
.gdue{ background:rgba(255,255,255,.08); color:var(--muted); }
.gdue.overdue{ background:rgba(239,68,68,.2); color:#fecaca; }
/* Conversations */
.conv-h{ border-bottom:1px solid var(--line-soft); }
.conv-tabs button{ color:var(--muted); }
.conv-tabs button.active{ color:#ff6b78; background:rgba(239,68,68,.14); }
.conv-list{ border-right:1px solid var(--line-soft); }
.conv-item{ border-bottom:1px solid var(--line-soft); }
.conv-item:hover{ background:rgba(255,255,255,.04); }
.conv-item.active{ background:rgba(239,68,68,.13); }
.conv-item.unread{ background:rgba(239,68,68,.08); }
.conv-item.unread .conv-name{ color:#fff; }
.conv-item.unread .conv-snip{ color:var(--text); }
.conv-av{ background:rgba(255,255,255,.08); color:var(--muted); }
.conv-name{ color:var(--text); }
.conv-time{ color:var(--muted); }
.conv-snip{ color:var(--muted); }
.conv-empty{ color:var(--muted); }
.conv-thead{ border-bottom:1px solid var(--line-soft); }
/* The listing a text thread is about, with the agent's other listings. */
.conv-prop{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 18px; border-bottom:1px solid var(--line-soft); flex:0 0 auto; }
.conv-prop[hidden]{ display:none; }
.conv-prop-addr{ font-weight:600; color:var(--text); }
.conv-prop select{ max-width:320px; padding:4px 8px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--text); font:inherit; font-size:13px; cursor:pointer; }
.cmsg.in .cbub{ background:rgba(255,255,255,.09); color:var(--text); }
.cmsg.out .cbub{ background:#e11d48; color:#fff; }
.ctime{ color:var(--muted); }
.conv-reply{ border-top:1px solid var(--line-soft); }
.conv-reply textarea{ background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--text); }
.conv-actions2{ border-bottom:1px solid var(--line-soft); }
.clog{ border-bottom:1px solid var(--line-soft); color:var(--text); }
/* Voicemails (Marisa, 2026-09-29): play it, read it, reply to it. */
.vm-reply{ flex-wrap:wrap; align-items:center; }
.vm-reply-l{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-right:4px; }
.vmcard{ margin:12px 18px; padding:14px 16px; border-radius:14px; border:1px solid var(--line-soft); background:rgba(255,255,255,.04); }
.vmcard.unread{ border-color:var(--accent); }
.vm-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.vm-len{ font-weight:700; color:var(--accent2); }
.call-rec{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; justify-content:center; }
.call-tx p{ margin:8px 0 0; padding:8px 10px; border-radius:8px; background:rgba(127,127,127,.08); font-size:13.5px; line-height:1.45; white-space:pre-wrap; text-align:left; }
.call-tx p.ghint{ background:none; padding:0; text-align:center; }
.vm-play{ width:100%; justify-content:center; font-size:15px; padding:12px; }
.vm-tr{ margin-top:12px; }
.vm-tr-h{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:4px; }
.vm-tr p{ margin:0; font-size:14.5px; line-height:1.45; color:var(--text); white-space:pre-wrap; }
.vm-tr p.ghint{ font-size:13px; color:var(--muted); }
/* Phone: a call or voicemail opens full screen, like a text conversation. */
.mcall{ position:fixed; inset:0; z-index:90; background:var(--bg); display:flex; flex-direction:column; }
.mcall-head{ flex:0 0 auto; padding:calc(env(safe-area-inset-top) + 8px) 12px 8px; border-bottom:1px solid var(--line-soft); background:var(--surface,#fff); }
.mcall-back{ background:none; border:0; color:var(--accent); font:inherit; font-size:17px; font-weight:600; padding:6px 2px; cursor:pointer; }
.mcall-body{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:calc(20px + env(safe-area-inset-bottom)); background:var(--surface,#fff); }
.mcall-body .conv-thead{ flex-wrap:wrap; gap:8px; }
.mcall-body .vmcard{ margin:12px; }
body.mcall-open .mnav, body.mcall-open .mselbar{ display:none !important; }
body.mcall-open #modalMount .overlay{ z-index:96; }
/* RVM list: how each ringless voicemail went */
.rvm-st{ display:inline-block; font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px; border:1px solid transparent; }
.rvm-st.ok{ background:rgba(34,197,94,.14); color:#4ade80; border-color:rgba(34,197,94,.35); }
.rvm-st.bad{ background:rgba(239,68,68,.16); color:#f87171; border-color:rgba(239,68,68,.4); }
.rvm-st.wait{ background:rgba(148,163,184,.14); color:#cbd5e1; border-color:rgba(148,163,184,.35); }
@media (max-width:720px){ .rvm-st.ok{ color:#15803d; } .rvm-st.bad{ color:#b91c1c; } .rvm-st.wait{ color:#475569; } }

/* ---------- Deal Flow Pro brand ---------- */
.brand-lockup{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 2px; }
.brand-lockup h1{ margin:0; font-size:24px; font-weight:800; color:var(--text); }
.brand-lockup h1 span{ color:#ff343a; }
.brand-logo{ width:52px; height:52px; border-radius:13px; box-shadow:0 4px 14px rgba(0,0,0,.45); }
.brand-tag{ margin:0 0 16px; text-align:center; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.logo{ display:flex; align-items:center; gap:9px; }
.logo .logo-mark{ width:30px; height:30px; border-radius:8px; }
.logo span{ color:#ff343a; }

/* ================= Archive folder, bulk actions & "no longer listed" review
   Shared by desktop and mobile (mobile.css re-skins these for the light theme).
   ========================================================================= */

/* Amber "needs attention" button (⚠ Needs review) */
.btn.warn{
  background:linear-gradient(180deg,rgba(251,191,36,.22),rgba(245,158,11,.16));
  border:1px solid rgba(251,191,36,.55); color:#fcd34d; font-weight:700;
}
.btn.warn:hover{border-color:rgba(252,211,77,.9);box-shadow:var(--sheen),0 0 18px rgba(251,191,36,.3)}
.navbadge.warn{ background:#f59e0b; color:#3b2a00; }

/* Scrollable "these are the records you're about to change" list */
.bulklist{
  max-height:190px; overflow:auto; margin:12px 0;
  border:1px solid var(--line); border-radius:12px; padding:8px 12px;
  background:rgba(255,255,255,.04); font-size:13px;
}
.bulklist div{ padding:4px 0; border-bottom:1px solid rgba(255,255,255,.05); }
.bulklist div:last-child{ border-bottom:0 }

/* Loud warning block for the permanent-delete confirmation */
.warnbox{
  background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.45);
  border-radius:12px; padding:11px 14px; margin:0 0 12px; font-size:13px; line-height:1.5;
}

/* One property in the Archive-or-Keep walkthrough */
.reviewcard{
  border:1px solid var(--line); border-radius:14px; padding:15px 17px;
  background:rgba(255,255,255,.04);
}
.reviewcard .raddr{ font-size:17px; font-weight:800; margin-bottom:4px; }
.reviewcard .rmeta{ font-size:13px; color:var(--muted); margin-bottom:3px; }
.reviewcard .rtags{ display:flex; gap:7px; flex-wrap:wrap; margin:10px 0; }
.reviewcard .rtags a.tag{ text-decoration:none; }
.reviewcard .rwhy{
  margin:10px 0 6px; font-size:13px; font-weight:600;
  background:rgba(251,191,36,.12); border-left:3px solid rgba(251,191,36,.6);
  padding:8px 11px; border-radius:0 10px 10px 0;
}
.revfoot{ flex-wrap:wrap; gap:8px; }
.revfoot .revall{ flex-basis:100%; display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }

/* ---------------------------------------------------------------------------
   Dispo tab (public/dispo.js) — list rows and the key/value grid used in the
   buyer detail modal. Kept with the desktop styles; mobile.css restyles these
   for phones.
   ------------------------------------------------------------------------ */
.rowitem{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.08));
}
.rowitem:last-child{border-bottom:0}
.rowitem:hover{background:rgba(255,255,255,.03)}
.kvgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
@media (max-width:720px){ .kvgrid{grid-template-columns:1fr} }

/* Walkthrough photo grid inside the contact modal (public/dispo.js). */
.bogGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:8px}
.bogCell{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.05)}
.bogCell img{width:100%;height:100%;object-fit:cover;display:block}
.bogDel{
  position:absolute;top:4px;right:4px;width:22px;height:22px;line-height:20px;
  border-radius:50%;border:0;cursor:pointer;font-size:16px;
  background:rgba(0,0,0,.62);color:#fff;
}
.bogDel:hover{background:rgba(200,16,46,.9)}

/* ---- Keyword badges (seller-finance overlay) & Zillow quick-links ---- */
.tag.kw{background:rgba(244,114,182,.14);color:#f9a8d4;border-color:rgba(244,114,182,.35);text-transform:uppercase;letter-spacing:.02em}
.zlink{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:rgba(56,189,248,.12);color:#7dd3fc;border:1px solid rgba(56,189,248,.32);text-decoration:none;white-space:nowrap;
  max-width:100%;box-sizing:border-box}
/* The label is a site name now (Zillow, Facebook, Craigslist, Auction.com...),
   so it has to be allowed to truncate rather than spill out of its column. */
.zlink svg{flex:none}
.zlink .zl-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zlink:hover{background:rgba(56,189,248,.24);border-color:rgba(56,189,248,.55)}
.pcard .pdate .zlink{margin-top:2px}
.pl-row .zlink.row{align-self:center;flex:none;margin-right:8px}

/* A lead that arrived in the last few days and that nobody has opened yet.
   Same amber as the NEW status badge, so the board reads consistently, but
   this one is about WHEN it arrived rather than whether it has been worked. */
.added-new{color:#fde68a;font-weight:700}
.added-new::before{content:"\25cf";font-size:8px;vertical-align:middle;margin-right:4px;color:#facc15}

/* ------- Contact modal: collapsible sections + two-column desktop layout ------- */
.modal .sec > h4{ cursor:pointer; user-select:none; position:relative; padding-right:24px; }
.modal .sec > h4::after{
  content:'\25be'; position:absolute; right:4px; top:0;
  font-size:12px; color:inherit; transition:transform .15s ease;
}
.modal .sec.collapsed > h4{ margin-bottom:0; border-bottom:none; padding-bottom:0; }
.modal .sec.collapsed > h4::after{ transform:rotate(-90deg); }
.modal .sec.collapsed > *:not(h4){ display:none !important; }

/* Blue quick-text button (pairs with the pink .callbtn) */
.textbtn{ background:#2c7ef8; box-shadow:0 2px 7px rgba(44,126,248,.45); text-decoration:none; }
.textbtn:hover{ background:#4b92ff; }
td.phonecell{ white-space:nowrap; }

/* Phone number + call button on Pipeline deal rows */
.pl-phone{ display:flex; align-items:center; font-size:13px; white-space:nowrap; }
.pl-phone .phonenum, .pl-phone a.phonenum{ color:var(--text); }
a.phonenum{ color:inherit; text-decoration:none; }
a.phonenum:hover{ text-decoration:underline; }

/* Call / Text buttons beside the Contact Phone input in the modal */
.phonefield{ display:flex; gap:6px; align-items:center; }
.phonefield input{ flex:1 1 auto; min-width:0; }
/* A number a text bounced off (landline.js): the tag sits where Text was. */
.llpill{ display:inline-block; font-size:11px; font-weight:700; color:var(--warn); border:1px solid var(--warn); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.llnote{ margin-top:6px; font-size:12px; color:var(--muted); line-height:1.5; }
.linkbtn{ background:none; border:0; padding:0; font:inherit; color:var(--text); text-decoration:underline; cursor:pointer; }

@media (min-width:721px){
  /* Desktop: Details + Property Details stay pinned open... */
  .modal .sec.nocol > h4{ cursor:default; padding-right:0; }
  .modal .sec.nocol > h4::after{ content:none; }
  /* ...and every section after them flows into two columns. */
  .modal .msecs{ columns:2; column-gap:14px; margin-top:12px; }
  .modal .msecs .sec{
    display:inline-block; width:100%; box-sizing:border-box;
    break-inside:avoid; -webkit-column-break-inside:avoid;
    margin:0 0 12px;
  }
  .modal .msecs #propExtras{ display:contents; }
}

/* Quick Actions + Activity Log sit at the very top of the contact sheet on
   EVERY screen size — they are what the contact is opened for, and the name
   and address are already in the modal header. The markup keeps them under
   Property Details; flex `order` hoists them without a second markup path. */
.modal .mbody{ display:flex; flex-direction:column; }
.modal .mbody > *{ flex:0 0 auto; }
.modal .mbody > .sec-quick{ order:-2; }
.modal .mbody > .sec-activity{ order:-1; }

/* Compact Assign-to + Keep-as-NEW pin in the contact modal header */
.mhead-actions .assign-mini{
  max-width:150px; font-size:12px; padding:4px 8px; border-radius:8px;
  background:rgba(255,255,255,.06); border:1px solid var(--line-soft);
  color:var(--text); text-overflow:ellipsis;
}
.pinbtn{
  background:transparent; border:1px solid var(--line-soft); border-radius:8px;
  padding:3px 7px; cursor:pointer; font-size:13px; line-height:1; opacity:.5;
  transition:opacity .12s ease, background .12s ease;
}
.pinbtn:hover{ opacity:.85; }
.pinbtn.on{ opacity:1; background:rgba(59,130,246,.25); border-color:rgba(96,165,250,.6); }
@media (max-width:720px){
  .mhead-actions{ gap:6px; }
  .mhead-actions .assign-mini{ max-width:104px; }
}

/* Date/time + Schedule button pair, used by the text workflow and composer. */
.schedrow{ display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.schedrow input[type="datetime-local"]{
  flex:1 1 190px; min-width:0; font-size:13px; padding:6px 8px;
  border-radius:8px; border:1px solid var(--line,rgba(255,255,255,.14));
  background:transparent; color:inherit;
}

/* Shared recording player. Fixed above the mobile tab bar so the controls are
   always reachable, however far the activity log has been scrolled. */
#recBar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:1400;
  display:flex; align-items:center; gap:10px; max-width:min(560px,calc(100vw - 24px));
  padding:8px 12px; border-radius:999px;
  background:var(--surface,#1b1b22); border:1px solid var(--line-soft,rgba(255,255,255,.16));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#recBar #recLabel{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
#recBar #recSeek{ flex:1 1 120px; min-width:80px; accent-color:var(--accent,#ef4444); }
#recBar #recTime{ font-size:12px; opacity:.75; white-space:nowrap; }
#recBar .btn{ flex:0 0 auto; }
@media (max-width:720px){
  #recBar{ bottom:76px; }            /* clear the bottom tab bar */
  #recBar #recLabel{ display:none; } /* room for the controls */
}

/* ---------------------------------------------------------------------------
   Dispo listing photos.

   The gallery under the "pull photos" box in the listing modal, and the small
   cover thumbnail on each row in the Listings pane. Clicking a tile makes it
   the cover, so the whole tile is the control and the badge just says so.
   ------------------------------------------------------------------------ */

.lgal{
  display:grid; gap:8px; margin-top:4px;
  grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
}
.lgal-i{
  position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden;
  border:2px solid transparent; background:var(--panel-2, #f2f2f2); cursor:pointer;
}
.lgal-i img{width:100%; height:100%; object-fit:cover; display:block}
.lgal-i.is-cover{border-color:var(--blue, #2563eb)}
.lgal-tag{
  position:absolute; left:0; right:0; bottom:0; padding:3px 6px;
  font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color:#fff; background:rgba(0,0,0,.55); text-align:center;
}
.lgal-i.is-cover .lgal-tag{background:var(--blue, #2563eb)}
.lgal-x{
  position:absolute; top:4px; right:4px; width:20px; height:20px; line-height:18px;
  border:0; border-radius:50%; cursor:pointer; font-size:14px; padding:0;
  color:#fff; background:rgba(0,0,0,.55);
}
.lgal-x:hover{background:#b91c1c}

.lthumb{
  width:64px; height:48px; flex:0 0 auto; border-radius:6px; margin-right:10px;
  background:#eee center/cover no-repeat;
}
.lthumb.empty{background:repeating-linear-gradient(45deg,#eee,#eee 6px,#e4e4e4 6px,#e4e4e4 12px)}

/* ---------------------------------------------------------------------------
   Listing photo management: select, reorder, rotate, and the drop zone.
   ------------------------------------------------------------------------ */

.lgal-bar{margin:0 0 8px;flex-wrap:wrap;gap:8px}

.ldrop{
  position:relative; border:2px dashed transparent; border-radius:10px;
  padding:8px; transition:border-color .12s, background .12s;
}
.ldrop.is-over{border-color:var(--blue,#2563eb); background:rgba(37,99,235,.06)}
.ldrop-hint{
  margin-top:8px; text-align:center; font-size:12px; color:var(--muted,#777);
  letter-spacing:.02em;
}

.lgal-i{cursor:grab}
.lgal-i.is-dragging{opacity:.4}
.lgal-i.is-over{outline:3px solid var(--blue,#2563eb); outline-offset:2px}
.lgal-i.is-picked{box-shadow:inset 0 0 0 3px var(--blue,#2563eb)}

/* Top-left tick for the multi-select, top-right × to drop one, ⟳ beside it. */
.lgal-sel{
  position:absolute; top:4px; left:4px; width:22px; height:22px; margin:0;
  display:grid; place-items:center; border-radius:5px; background:rgba(0,0,0,.5);
  cursor:pointer;
}
.lgal-sel input{margin:0; cursor:pointer; width:14px; height:14px}
.lgal-rot{
  position:absolute; top:4px; right:28px; width:20px; height:20px; line-height:18px;
  border:0; border-radius:50%; cursor:pointer; font-size:13px; padding:0;
  color:#fff; background:rgba(0,0,0,.55);
}
.lgal-rot:hover{background:var(--blue,#2563eb)}
.lgal-n{
  position:absolute; bottom:20px; left:4px; font-size:10px; font-weight:700;
  color:#fff; background:rgba(0,0,0,.55); border-radius:4px; padding:1px 5px;
}

/* ---------------------------------------------------------------------------
   PDF viewer. Its own overlay above the listing modal, so pressing Done or
   Escape closes the document and leaves the half-edited listing alone.
   ------------------------------------------------------------------------ */

.pdfov{z-index:80; padding:16px; align-items:center}
.pdfbox{
  background:var(--panel,#fff); border-radius:12px; overflow:hidden;
  width:min(1100px, 100%); height:calc(100vh - 32px);
  display:flex; flex-direction:column;
}
.pdfhead{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid var(--line-soft,#e5e5e5); flex:0 0 auto;
}
.pdfbox iframe{flex:1 1 auto; width:100%; border:0; background:#525659}

/* ---------- Conversations: hide / unhide ----------
   Every text thread and call row carries a small Hide button. Hidden ones
   stay out of the list each time Conversations opens; "Show hidden" at the
   foot of the list brings them back for that visit, dimmed, with Unhide.
   Colours come from the theme variables so this reads on the dark desktop
   and the light phone layout alike. */
.conv-hide{
  flex:0 0 auto; align-self:center; cursor:pointer;
  background:transparent; border:1px solid var(--line-soft); border-radius:999px;
  color:var(--muted); font:inherit; font-size:11px; font-weight:700; line-height:1.4;
  padding:3px 9px; opacity:.6; transition:opacity .12s, border-color .12s;
}
.conv-item:hover .conv-hide, .conv-item.active .conv-hide, .conv-hide:focus-visible{ opacity:1; }
.conv-hide:hover{ color:var(--text); border-color:var(--line); background:var(--line-soft); }
@media (hover:none){ .conv-hide{ opacity:1; padding:7px 12px; font-size:12px; } }
/* Phones: swipe instead of buttons (Marisa, 2026-09-26). Left = Archive,
   right = Delete (app.js wireConvSwipe). The row slides over a coloured
   layer that names the action. */
@media (max-width:720px){
  .conv-btns{ display:none !important; }
  .conv-list{ position:relative; }
  .conv-item{ touch-action:pan-y; }
  .conv-item.sw-on{ position:relative; z-index:1; }
  .conv-item.sw-back{ transition:transform .2s ease; }
  .conv-swipebg{ position:absolute; left:0; right:0; z-index:0; pointer-events:none; }
  .conv-swipebg.arch{ background:#6b7280; }
  .conv-swipebg.del{ background:#b91c1c; }
  .conv-swipebg::after{
    position:absolute; top:50%; transform:translateY(-50%);
    color:#fff; font-size:13px; font-weight:800; letter-spacing:.02em; opacity:.7;
  }
  .conv-swipebg.arch::after{ content:"Archive"; right:18px; }
  .conv-swipebg.arch.unarch::after{ content:"Unarchive"; }
  .conv-swipebg.del::after{ content:"Delete"; left:18px; }
  .conv-swipebg.go::after{ opacity:1; }
}
.conv-item.is-hidden .conv-av, .conv-item.is-hidden .conv-meta{ opacity:.5; }
.conv-item.is-hidden .conv-hide{ opacity:1; }
.conv-hidfoot{ padding:14px; text-align:center; }
.conv-showhid{
  background:transparent; border:none; cursor:pointer; padding:4px 8px;
  color:var(--muted); font:inherit; font-size:13px; font-weight:700; text-decoration:underline;
}
.conv-showhid:hover{ color:var(--text); }
.conv-list > .conv-empty{ margin:48px auto 0; }
/* Two pills in the thread header: push the pair right, not each one. */
.conv-thead .gpill + .gpill{ margin-left:0; }

/* ---------- Zillow status check ---------- */
.lsstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;margin:12px 0}
.lsstats>div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.lsstats .n{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.lsstats span:not(.n){font-size:12px;color:var(--muted)}
.lsstats .ls-sold .n{color:#f87171}.lsstats .ls-pending .n{color:#fbbf24}.lsstats .ls-off_market .n{color:#94a3b8}.lsstats .ls-for_sale .n{color:#4ade80}
.lsbar{height:10px;border-radius:999px;background:rgba(127,127,127,.2);overflow:hidden;margin:6px 0 10px}
.lsbar span{display:block;height:100%;background:var(--accent,#ef4444);transition:width .4s}
.lssteps{margin:8px 0 12px 18px;padding:0;line-height:1.55}
.lsopt{display:flex;gap:8px;align-items:center;margin:8px 0 10px;font-size:14px}
.lsline{margin-top:6px}
.lsline.ls-sold b{color:#f87171}.lsline.ls-pending b{color:#fbbf24}.lsline.ls-for_sale b{color:#4ade80}

/* "Your signature is needed" card: stays on screen until signed */
#signDock{position:fixed;right:18px;bottom:18px;z-index:9500;width:340px;max-width:calc(100vw - 32px);
  background:var(--panel,#fff);color:inherit;border:2px solid #f59e0b;border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);padding:12px 14px}
#signDock .sd-head{font-weight:700;margin-bottom:8px}
#signDock .sd-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid rgba(127,127,127,.2)}
#signDock .sd-text{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px}
#signDock .sd-text span{opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#signDock .sd-more{font-size:12px;opacity:.75;margin-top:4px}
@media (max-width:700px){
  #signDock{left:10px;right:10px;width:auto;bottom:calc(env(safe-area-inset-bottom, 0px) + 72px)}
}

/* Email signature preview: white like an email, whatever the app theme */
.sigpreview .sigpaper{background:#fff;color:#222;border-radius:10px;padding:14px 16px;border:1px solid rgba(127,127,127,.35)}
.sigpreview .sigpaper .hint{color:#666}

/* Email button (pairs with the pink call and blue text buttons) */
.emailbtn{ background:#c96a4a; box-shadow:0 2px 7px rgba(201,106,74,.45); margin-left:4px; }
.emailbtn:hover{ background:#dd7d5c; }
.emailbtn.noaddr{ opacity:.55; }
/* RVM (ringless voicemail) pill between the text and email buttons */
.callbtn.rvmbtn{ width:auto; padding:0 8px; border-radius:13px; margin-left:4px; background:#7c3aed;
  box-shadow:0 2px 7px rgba(124,58,237,.45); font-weight:700; font-size:10px; line-height:1; letter-spacing:.4px; }
.callbtn.rvmbtn:hover{ background:#8f55f0; }
.emailitem{ flex-wrap:wrap; cursor:pointer; }
.emailitem.unread .docname b{ color:var(--accent2,#fb7185); }
.cbub.email{ text-align:left; }
.cbub.email .esubj{ margin-bottom:2px; }

/* ---------- Facebook Messenger in the Texts inbox ---------- */
.conv-chan{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em; color:#0a7cff; background:rgba(10,124,255,.12); border-radius:999px; padding:1px 7px; margin-right:4px; vertical-align:middle; }
.cmsg.out.msgr .cbub{ background:#0a7cff; color:#fff; }
.conv-chanbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:10px 16px 0; flex:0 0 auto; }
.conv-chansel{ display:inline-flex; border:1px solid var(--line,#e6e9f0); border-radius:999px; overflow:hidden; }
.conv-chansel button{ background:transparent; border:0; color:var(--muted,#667085); font:inherit; font-size:12px; font-weight:700; padding:6px 14px; cursor:pointer; }
.conv-chansel button.on{ background:#0a7cff; color:#fff; }
.conv-chansel button[data-chan="sms"].on{ background:#e11d48; }
.conv-win{ font-size:12px; color:var(--muted,#667085); }
.conv-win.closed{ color:#d97706; }
.conv-reply textarea:disabled{ opacity:.5; }
/* Emoji picker on the text reply box, opens above the button. */
.conv-reply{ position:relative; }
.conv-emoji{ font-size:18px; padding:0 10px; line-height:1; }
.emoji-pop{ position:absolute; right:16px; bottom:calc(100% + 6px); z-index:50; display:grid; grid-template-columns:repeat(8, 36px); gap:2px;
  padding:8px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.emoji-pop button{ width:36px; height:36px; border:0; border-radius:8px; background:transparent; font-size:20px; cursor:pointer; padding:0; }
.emoji-pop button:hover{ background:rgba(255,255,255,.1); }
/* Quick replies (the Pics Reply templates), over any text box, phone thread included. */
.reply-pop-bg{ position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; padding:16px; }
.reply-pop{ width:100%; max-width:560px; max-height:70vh; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); overflow:hidden; margin-bottom:env(safe-area-inset-bottom); }
.reply-pop-h{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; font-weight:700; border-bottom:1px solid var(--line-soft); }
.reply-pop-h button{ border:0; background:transparent; color:var(--text); font-size:22px; line-height:1; cursor:pointer; padding:0 4px; }
.reply-pop-list{ overflow:auto; padding:6px 10px 12px; }
.reply-pop-g{ margin:12px 4px 6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.reply-pop-g span{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--accent2); margin-left:6px; }
.reply-pop-list button[data-rp]{ display:block; width:100%; text-align:left; margin:0 0 6px; padding:10px 12px; border:1px solid var(--line-soft);
  border-radius:10px; background:var(--surface-lite); color:var(--text); font:inherit; line-height:1.4; cursor:pointer; }
.reply-pop-list button[data-rp]:hover{ background:rgba(255,255,255,.12); }
.reply-pop-bg[hidden]{ display:none; }
/* Add note, and the lead's Quick actions, in the same pop up style (2026-09-29). */
.note-pop-bg, .qa-pop-bg{ align-items:center; }
.note-pop-body{ padding:12px 14px 14px; }
.note-pop-body textarea{ width:100%; min-height:120px; resize:vertical; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface-lite); color:var(--text); font:inherit; line-height:1.4; }
.note-pop-foot{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.qa-pop{ max-width:640px; }
.qa-pop-body{ overflow:auto; padding:12px 14px 14px; }
.notebtn{ background:#8a6f3c; box-shadow:0 2px 7px rgba(138,111,60,.45); margin-left:8px; }
.notebtn:hover{ background:#a0844d; }
.ml-list{ display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto; margin-top:8px; }
.ml-row{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; background:transparent; border:1px solid var(--line,#e6e9f0); border-radius:10px; padding:10px 12px; color:inherit; font:inherit; cursor:pointer; }
.ml-row:hover{ border-color:#0a7cff; }

/* ---------- Message on Facebook (Marketplace leads, contact card) ---------- */
.fbmsg{ border:1px solid rgba(10,124,255,.35); background:rgba(10,124,255,.06); border-radius:12px; padding:12px; margin:8px 0; }
.fbmsg-h{ display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.fbmsg-h b{ color:#0a7cff; }
.fbmsg textarea{ width:100%; box-sizing:border-box; resize:vertical; border:1px solid var(--line,#e6e9f0); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; color:inherit; background:transparent; }
.fbmsg #fbMsgGo{ background:#0a7cff; border-color:#0a7cff; }
.fbphone{ border-top:1px dashed var(--line,#e6e9f0); margin-top:10px; padding-top:10px; }
.fbphone label{ display:block; font-size:13px; }
.fbphone input[type=tel]{ flex:1; min-width:150px; border:1px solid var(--line,#e6e9f0); border-radius:10px; padding:8px 10px; font:inherit; color:inherit; background:transparent; }
.fbphone .fbok{ display:inline-flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; }
.fbasks{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-bottom:8px; font-size:13px; }
.fbask{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap; }

/* ---------- Facebook leads queue (Pipeline row button + popup) ---------- */
.callbtn.fbbtn{ background:#0a7cff; box-shadow:0 2px 7px rgba(10,124,255,.45); margin-left:4px; }
.callbtn.fbbtn:hover{ background:#3395ff; }
.callbtn.fbbtn.done{ background:#8a94a6; box-shadow:none; }
.pl-phone .pc-main .fbbtn{ margin-left:0; }
.btn.fbq-start{ display:inline-flex; align-items:center; gap:6px; background:#0a7cff; border-color:#0a7cff; color:#fff; }
.fbq .mhead h3 .hint{ font-weight:400; margin-left:6px; }
.fbq-lead{ margin-bottom:10px; }
.fbq-lead .raddr{ font-weight:700; font-size:16px; }
.fbq-lead .rmeta{ font-size:13px; opacity:.8; margin-top:2px; }
.fbq #fbqCopy{ background:#0a7cff; border-color:#0a7cff; }
.fbq-save{ border:1px solid var(--line,#e6e9f0); border-radius:12px; padding:12px; margin:8px 0; }
.fbq-save .fbmsg-h b{ color:inherit; }
.fbq-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px 10px; }
.fbq-grid .field{ margin:0; }
.fbq-grid .field.wide{ grid-column:1 / -1; }
.fbq-grid input, .fbq-grid select{ width:100%; box-sizing:border-box; }
.fbq-save .fbok{ display:inline-flex; align-items:center; gap:6px; font-size:13px; margin:8px 0 4px; }
.fbq-save textarea{ width:100%; box-sizing:border-box; resize:vertical; }
.fbq-foot{ flex-wrap:wrap; gap:8px; }
@media (max-width:720px){
  .fbq-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .fbq-foot .spacer{ display:none; }
  .fbq-foot .btn{ flex:1 1 auto; }
}

/* ---------- Dashboard: New leads card (today / last 7 days by source) ---------- */
.nl-table{ width:100%; border-collapse:collapse; font-size:14px; }
.nl-table th{ text-align:right; font-size:12px; font-weight:600; color:var(--muted); padding:0 10px 8px; text-transform:uppercase; letter-spacing:.04em; }
.nl-table th:first-child{ text-align:left; }
.nl-table td{ padding:9px 10px; border-top:1px solid var(--line-soft); text-align:right; font-variant-numeric:tabular-nums; }
.nl-table td.nl-src{ text-align:left; color:var(--text); }
.nl-table tr.nl-total td{ font-weight:700; border-top:2px solid var(--line); }
.nl-link{ display:inline-block; min-width:44px; padding:4px 10px; border-radius:8px; background:rgba(225,29,72,.14); color:#fb7185; font-weight:700; text-decoration:none; }
.nl-link:hover{ background:rgba(225,29,72,.28); color:#fff; }
.nl-zero{ color:var(--muted); padding:4px 10px; }
.nl-days{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-size:12px; color:var(--muted); }
.nl-day b{ color:var(--text); font-weight:600; margin-right:2px; }
.nl-day.nl-today{ color:#fb7185; }
.nl-day.nl-today b{ color:#fb7185; }

/* Priority star: a lead to connect with ASAP (Pipeline rows, lead header, Archive table) */
.starbtn{
  background:none; border:0; padding:0 5px 0 0; cursor:pointer; font-size:16px; line-height:1;
  color:var(--muted,#94a3b8); opacity:.55; vertical-align:-1px;
}
.starbtn:hover{ opacity:1; color:#f59e0b; }
.starbtn.on{ opacity:1; color:#f59e0b; }

/* Lead flags: Priority, Call back, No pictures (Pipeline rows, lead header).
   Faint outlines when off, one colour each when on, so a row stays calm. */
.flaggrp{ display:inline-flex; align-items:center; gap:0; margin:0 6px 0 -2px; vertical-align:-3px; }
.flagbtn{ background:none; border:0; padding:2px; border-radius:6px; cursor:pointer; line-height:0;
  color:var(--muted,#94a3b8); opacity:.38; }
.flagbtn:hover{ opacity:.9; background:rgba(148,163,184,.14); }
.flagbtn:disabled{ cursor:wait; }
.flagbtn.on{ opacity:1; }
.flagbtn.fl-priority.on{ color:#f59e0b; }
.flagbtn.fl-call_back.on{ color:#22c55e; }
.flagbtn.fl-no_pictures.on{ color:#38bdf8; }
.mhead .flaggrp{ margin-right:8px; }

/* Inbox search: by name and by property address */
.conv-search{ display:flex; gap:8px; padding:10px 16px; border-bottom:1px solid var(--line-soft); flex:0 0 auto; }
.conv-search .search{ flex:1 1 0; min-width:0; }

/* Inbox: Archive and (admins only) Delete side by side on each row. */
.conv-btns{ flex:0 0 auto; align-self:center; display:flex; gap:6px; }
.conv-del:hover, .conv-delthis:hover{ color:#e5484d; border-color:rgba(229,72,77,.55); }

/* Inbox Texts / Calls / Emails tabs: brand red with white lettering. */
.conv-tabs button{ background:#c0122e; color:#fff; cursor:pointer; }
.conv-tabs button:hover{ background:#a50f27; }
.conv-tabs button.active{ background:#8f0d22; color:#fff; box-shadow:inset 0 0 0 2px #fff; }

/* Inbox search button in the header: phone only (see mobile.css). */
.hdr-search{ display:none; }

/* Agents with several listings: lead badge, lead sheet note, Agents window */
.tag.agentmulti{ cursor:pointer; font:inherit; font-size:11px; background:rgba(167,139,250,.14); color:#c4b5fd; border-color:rgba(167,139,250,.38); }
.tag.agentmulti:hover{ background:rgba(167,139,250,.26); }
.agentnote{ margin-top:10px; padding:8px 12px; border-radius:10px; border:1px solid rgba(167,139,250,.38); background:rgba(167,139,250,.10); color:var(--text); font-size:13px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ag-list{ display:flex; flex-direction:column; gap:10px; max-height:60vh; overflow:auto; }
.ag-card{ border:1px solid var(--line-soft); border-radius:12px; padding:10px 12px; background:rgba(255,255,255,.03); }
.ag-card.focus{ border-color:rgba(167,139,250,.6); }
.ag-top{ display:flex; align-items:flex-start; gap:12px; }
.ag-who{ flex:1 1 auto; min-width:0; }
.ag-name{ font-weight:800; font-size:15px; }
.ag-meta{ color:var(--muted); font-size:12px; margin-top:2px; overflow-wrap:anywhere; }
.ag-count{ flex:0 0 auto; text-align:center; font-weight:800; font-size:20px; line-height:1; color:#c4b5fd; }
.ag-count small{ display:block; font-size:10px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:3px; }
.ag-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.ag-leads{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.ag-lead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; text-align:left; width:100%; padding:6px 8px; border-radius:8px; border:1px solid var(--line-soft); background:rgba(255,255,255,.03); color:var(--text); font:inherit; font-size:13px; cursor:pointer; }
.ag-lead:hover{ background:rgba(255,255,255,.07); }
.ag-addr{ font-weight:700; }
.ag-csz{ color:var(--muted); font-size:12px; }

/* Daily overview: the "Yesterday" card at the top of the dashboard (dailyrecap.js). */
.rcp-card .gcard-h{ flex-wrap:wrap; }
.rcp-nav{ display:flex; align-items:center; gap:8px; }
.rcp-day{ font-size:13px; font-weight:700; color:var(--text); min-width:150px; text-align:center; }
.rcp-arrow{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--text); font-size:18px; line-height:1; cursor:pointer; }
.rcp-arrow:hover:not(:disabled){ background:rgba(255,255,255,.12); }
.rcp-arrow:disabled{ opacity:.3; cursor:default; }
.rcp-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.rcp-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; padding:12px 14px; border-radius:12px; border:1px solid var(--line-soft); background:rgba(255,255,255,.04); color:var(--text); font:inherit; cursor:pointer; }
.rcp-tile:hover{ background:rgba(255,255,255,.08); }
.rcp-tile.on{ border-color:var(--accent); background:rgba(239,68,68,.14); }
.rcp-n{ font-size:24px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.rcp-l{ font-size:12.5px; font-weight:700; }
.rcp-s{ font-size:11.5px; color:var(--muted); }
.rcp-team{ margin-top:16px; }
.rcp-team td:not(:first-child), .rcp-team th:not(:first-child){ text-align:right; }
.rcp-detail{ margin-top:16px; border-top:1px solid var(--line-soft); padding-top:6px; }
.rcp-gh{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:12px 0 4px; }
.rcp-gh b{ color:var(--text); margin-left:4px; }
.rcp-row{ display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-soft); }
.rcp-row:last-child{ border-bottom:0; }
.rcp-t{ flex:0 0 64px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; padding-top:1px; }
.rcp-m{ flex:1; min-width:0; }
.rcp-top{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.rcp-lead{ color:var(--text); font-weight:700; text-decoration:none; }
.rcp-lead:hover{ color:var(--accent2); text-decoration:underline; }
.rcp-who{ font-size:11.5px; color:var(--muted); background:rgba(255,255,255,.06); border-radius:6px; padding:1px 7px; }
.rcp-x{ font-size:12.5px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }

/* Call and time worked stats under the Calls and Leads worked tiles. */
.rcp-stats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin:12px 0 4px; }
.rcp-stat{ padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--line-soft); }
.rcp-stat b{ display:block; font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
.rcp-stat span{ font-size:11.5px; color:var(--muted); }

/* Time on each overview heading, and the day's total active time. */
.rcp-time{ margin-top:4px; font-size:11.5px; font-weight:700; color:var(--accent2); font-variant-numeric:tabular-nums; }
.rcp-active{ display:block; width:100%; text-align:left; font:inherit; color:var(--text); cursor:pointer; margin-top:14px; padding:12px 14px; border-radius:12px; border:1px solid var(--line-soft); background:rgba(255,255,255,.04); }
.rcp-active:hover{ background:rgba(255,255,255,.08); }
.rcp-active.on{ border-color:var(--accent); background:rgba(239,68,68,.14); }
.rcp-active-leads{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--accent2); }
.rcp-detail{ scroll-margin-top:72px; }
.rcp-go{ cursor:pointer; }
.rcp-go:hover .rcp-lead{ color:var(--accent2); text-decoration:underline; }
.rcp-active-h{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; }
.rcp-active-h span:first-child{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.rcp-active-h b{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.rcp-active-plus{ font-size:12px; color:var(--muted); }
.rcp-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.rcp-chip{ font-size:12px; color:var(--muted); background:rgba(255,255,255,.06); border:1px solid var(--line-soft); border-radius:8px; padding:3px 9px; }
.rcp-chip b{ color:var(--text); margin-left:3px; }

/* Started, finished and total on each overview line. */
.rcp-times{ font-size:11.5px; color:var(--accent2); margin-top:3px; font-variant-numeric:tabular-nums; }

/* Lead photos (lead-photos.js), up to 20. The Pipeline card and the opened
   lead show them as a row of small squares; tapping one opens the viewer. */
.pcard-cover{display:block;width:calc(100% + 22px);height:110px;margin:-11px -11px 9px;object-fit:cover;border-radius:14px 14px 0 0;background:rgba(127,127,127,.12)}
.pc-photos,.lead-photos{display:flex;gap:8px}
.pc-photos{overflow-x:auto;margin:12px 0 2px;padding-bottom:2px;scrollbar-width:thin}
.lead-photos{flex-wrap:wrap;margin:0}
/* First thing in the opened lead, above Quick Actions and the Activity Log. */
.modal .mbody > .lead-photos{order:-3}
.modal .mbody > .lead-photoadd{order:-3;margin:-4px 0 0}
.ph-sq{flex:0 0 auto;width:92px;height:92px;padding:0;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;background:rgba(127,127,127,.12);cursor:zoom-in}
.lead-photos .ph-sq{width:110px;height:110px}
.ph-sq img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.ph-sq:hover img{transform:scale(1.06)}
/* The agent's listing remarks and the listing's own tags (Marisa, 2026-09-28).
   Four lines on the Pipeline card until Show all opens the rest. */
.lr-box{margin:12px 0 2px}
.lr-box .lr-head{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.lr-text{margin:0;font-size:13.5px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
/* Four lines by height, not -webkit-line-clamp: Safari and the iPhone app did not redraw when the clamp came off, so Show all seemed to do nothing. */
.lr-box.clip:not(.open) .lr-text{max-height:5.8em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.lr-more{margin-top:4px;padding:2px 0;border:0;background:none;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.lr-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.lr-tags .tag{margin:0}
/* Undo on the toast after a milestone move or a flag (Marisa, 2026-09-28). */
#toast .toast-undo{margin-left:12px;padding:4px 12px;border:1px solid currentColor;border-radius:999px;background:none;color:inherit;font:inherit;font-weight:700;cursor:pointer}
/* Clear of the phone's bottom tab bar, solid so it reads over any page. */
#toast.has-undo{align-items:center;background:rgba(15,23,42,.97);color:#fff;border-color:rgba(255,255,255,.25)}
#toast.has-undo .toast-undo{flex:0 0 auto;white-space:nowrap;color:#fff;background:rgba(255,255,255,.14)}
/* On a computer the Undo toast sits at the top, clear of the Done and Save
   buttons along the bottom of a window (Marisa, 2026-10-02). */
@media (min-width:721px){#toast.has-undo{top:22px;bottom:auto}}
@media (max-width:720px){#toast.has-undo{bottom:calc(86px + env(safe-area-inset-bottom));padding:10px 10px 10px 18px}}
.pc-count{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft);text-align:center;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.phv{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.9);touch-action:none;overscroll-behavior:contain}
/* The page behind the photo viewer stays put while it is open. */
html.phv-lock,html.phv-lock body{overflow:hidden}
.phv-img{max-width:92vw;max-height:74vh;object-fit:contain;border-radius:8px;user-select:none;-webkit-user-drag:none}
.phv-nav{position:absolute;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;line-height:1}
.phv-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:32px}
.phv-nav.prev{left:16px}
.phv-nav.next{right:16px}
.phv-nav:hover{background:rgba(255,255,255,.28)}
.phv-done{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);min-width:140px;padding:13px 28px;border:0;border-radius:999px;background:#fff;color:#111;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.phv-done:hover{background:#e5e7eb}
.phv-n{position:absolute;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font-size:14px;font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .ph-sq{width:76px;height:76px}
  .lead-photos .ph-sq{width:84px;height:84px}
  .phv-nav{width:40px;height:40px;font-size:26px}
  .phv-nav.prev{left:8px}
  .phv-nav.next{right:8px}
}
/* Texts: the New only switch at the top of the list. */
.conv-newbar{ padding:8px 12px; border-bottom:1px solid var(--line-soft); }
.conv-newonly{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:5px 12px;
  background:transparent; border:1px solid var(--line); border-radius:999px;
  color:var(--muted); font:inherit; font-size:13px; font-weight:700;
}
.conv-newonly .cno-dot{ width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor; }
.conv-newonly.on{ background:rgba(239,68,68,.14); border-color:var(--accent); color:var(--text); }
.conv-newonly.on .cno-dot{ background:var(--accent); border-color:var(--accent); }
.conv-newonly .conv-badge{ margin-left:0; }
/* Voice typing mic, floated into the corner of the box with the cursor. */
.dictate-btn{
  position:fixed; z-index:300; display:none; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; border:1px solid #d0d5dd; cursor:pointer;
  background:#fff; color:#475467; box-shadow:0 2px 6px rgba(0,0,0,.18); padding:0;
}
.dictate-btn.on{ background:#dc2626; border-color:#dc2626; color:#fff; animation:dictPulse 1.2s ease-in-out infinite; }
@keyframes dictPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.5); } 50%{ box-shadow:0 0 0 7px rgba(220,38,38,0); } }
/* Voice message recorder. Sits above the phone's text thread (z-index 90). */
.vmemoOverlay{ z-index:200; }
.vmemo{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:22px 16px; }
.vmemo-rec{
  width:72px; height:72px; border-radius:50%; border:3px solid #dc2626; background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.vmemo-rec span{ width:52px; height:52px; border-radius:50%; background:#dc2626; transition:all .15s; }
.vmemo-rec.on span{ width:26px; height:26px; border-radius:6px; }
.vmemo-status{ font-size:14px; color:var(--muted); text-align:center; }

/* Website seller lead pop up (routes/sellerweb.js): above everything, cannot be dismissed. */
.overlay.weblead-ov{z-index:9999;background:rgba(10,12,20,.82)}
.modal.weblead{max-width:520px;border:3px solid #ef4444;box-shadow:0 0 0 6px rgba(239,68,68,.25),0 20px 60px rgba(0,0,0,.6)}
.weblead-head{display:flex;align-items:center;gap:10px;background:#dc2626;color:#fff;font-weight:800;letter-spacing:.06em;padding:12px 18px;font-size:15px}
.weblead-dot{width:12px;height:12px;border-radius:50%;background:#fff;animation:wlpulse 1s infinite}
@keyframes wlpulse{0%,100%{opacity:1}50%{opacity:.25}}
.weblead-ago{margin-left:auto;font-weight:600;letter-spacing:0;font-size:13px;opacity:.9}
.weblead-name{font-size:24px;font-weight:800;margin-bottom:4px}
.weblead-addr{font-size:16px;margin-bottom:4px}
.weblead-sit{display:inline-block;background:rgba(239,68,68,.15);color:#ef4444;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;margin:4px 0 8px}
.weblead-phone{display:block;font-size:26px;font-weight:800;margin:6px 0;text-decoration:none}
.weblead-rule{font-size:13px;opacity:.8;margin:12px 0 8px}
.weblead-more{font-weight:800;color:#ef4444;margin:10px 0 0}
.weblead-foot{justify-content:stretch}
.weblead-foot .btn{flex:1 1 auto}
.btn.weblead-call{background:#16a34a;border-color:#16a34a;color:#fff;font-weight:800}

/* Back to conversation on a lead card or lead window opened from Conversations (2026-10-10). */
.conv-back-btn { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 8px; font-weight: 700; }
.pl-card > .conv-back-btn { align-self: flex-start; }

/* View only sign in (Marisa, 2026-10-12): no Settings, Campaigns, Team or Lead Engine on the phone's More sheet. */
body.view-only [data-mtab="settings"],
body.view-only [data-mtab="leadengine"],
body.view-only [data-mtab="campaigns"],
body.view-only [data-mtab="team"] { display: none !important; }