/* ============================================================================
   gracoleads.f19.org — CRM theme.

   Palette and shapes taken from the HVAC Closer CRM: navy/orange on a light
   blue-grey field, Inter, 22px cards, 13px controls, orange gradient CTA.

   It deliberately redefines the SAME class names the shared lead views already
   use (.lb-*, .ld-*, .t-*) rather than forking those views. The shell defines
   ROCKET_LB_CSS before rendering, which makes the views' own inline dark theme
   skip itself — so this file is the single source of truth for how this app
   looks, and graco.f19.org's field app is completely untouched.
   ========================================================================= */

:root{
  /* Graco brand tokens, taken from config/brands.json — not eyeballed. */
  --green:#064232;      /* primary deep green  */
  --green2:#021917;     /* deepest, for text   */
  --lime:#deff55;       /* accent              */
  --lime2:#c2e23a;      /* accent hover        */
  --limeink:#021917;    /* text ON lime        */
  --soft:#70c38b;       /* soft accent         */
  --ink:#212529; --muted:#5b6b66; --line:#e2e9e4; --bg:#ffffff; --paper:#f4f7f2;
  --card:#ffffff;
  --ok-bg:#e9f7ee;   --ok-ink:#0d6b39;
  --warn-bg:#fdf6e3; --warn-ink:#8a6a00;
  --bad-bg:#fbeceb;  --bad-ink:#c7473f;
  --cool-bg:#eef6f1; --cool-ink:#064232;
  --plum-bg:#f0f7ea; --plum-ink:#3f6b1f;
  /* aliases kept so the rest of the sheet reads unchanged */
  --navy:var(--green); --navy2:var(--green2); --orange:var(--green); --blue:var(--soft);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
/* The login screen gets the reference's deep radial field; signed-in pages stay
   light so dense lead data is readable in a truck in daylight. */
body.t-nohead{
  background:linear-gradient(160deg,var(--paper) 0,#eaf3ec 55%,#ffffff 100%);
  display:grid; place-items:center; min-height:100vh;
}
a{color:var(--navy)}

/* ── header ───────────────────────────────────────────────────────────────── */
.t-head{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,var(--green) 0,var(--green2) 100%);
  color:#fff; padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  position:sticky; top:0; z-index:30;
}
.t-head .t-id{flex:1 1 auto; min-width:0; text-decoration:none; color:inherit}
.t-head .t-id b{display:block; font-size:1.02rem; font-weight:800;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.t-head .t-id span{display:block; font-size:.8rem; opacity:.75}
.t-head form{margin:0; flex:0 0 auto}
.t-back{color:#fff; text-decoration:none; font-size:1.6rem; line-height:1;
  padding:0 8px 0 0; flex:0 0 auto}
.t-out{
  min-height:40px; padding:0 14px; border:1px solid #ffffff40; border-radius:20px;
  background:#ffffff1a; color:#fff; font:800 .82rem/1 Inter,sans-serif; cursor:pointer;
}
.t-leads{
  position:relative; text-decoration:none; color:#fff; font-weight:800; font-size:.82rem;
  padding:9px 13px; border-radius:20px; background:#ffffff1a; margin-right:6px; white-space:nowrap;
}
.t-badge{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--lime); color:var(--limeink); font-size:.68rem; line-height:19px;
  text-align:center; font-weight:900; box-shadow:0 0 0 2px var(--green);
}

/* ── login (mirrors the reference box) ────────────────────────────────────── */
.t-main{width:min(430px,92vw); margin:0 auto; padding:0 0 40px}
body.t-nohead .t-main{padding:0}
body.t-nohead .t-main > div:first-child,
body.t-nohead form{
  background:#fff; border:1px solid #ffffff33; border-radius:22px;
  box-shadow:0 18px 50px #0642321f; padding:26px 30px; margin:0 0 14px;
}
.t-h1{font-weight:900; font-size:26px; color:var(--navy); line-height:1; margin:0}
.t-sub{color:var(--green); font-weight:900; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; margin:4px 0 0}
body.t-nohead .t-main p.t-sub:last-of-type{color:var(--muted); font-weight:600;
  letter-spacing:0; text-transform:none; font-size:13px; margin-top:10px}
.t-card{background:#fff; border:1px solid var(--line); border-radius:13px; padding:12px 14px}
body.t-nohead .t-card{border:0; padding:0; margin:0}
.t-label{display:block; font-size:.72rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.t-input{
  width:100%; padding:14px; border-radius:13px; border:1px solid var(--line);
  font:400 15px Inter,sans-serif; background:#fff; color:var(--ink);
}
.t-input:focus{outline:0; border-color:var(--soft); box-shadow:0 0 0 3px #70c38b40}
.t-pin{letter-spacing:.35em; text-align:center; font-weight:800}
#initials{letter-spacing:.25em}
.t-btn{
  width:100%; padding:14px; border-radius:13px; border:0; cursor:pointer;
  font:900 15px Inter,sans-serif; background:#fff; color:var(--navy);
  border:1px solid var(--line); text-decoration:none; display:block; text-align:center;
}
.t-btn.primary{background:var(--lime); color:var(--limeink); border:0}
.t-msg{border-radius:13px; padding:12px 14px; margin:10px 0; font-weight:700; font-size:.9rem}
.t-msg.err{background:var(--bad-bg); color:var(--bad-ink)}
.t-msg.ok{background:var(--ok-bg); color:var(--ok-ink)}
.t-foot{text-align:center; color:var(--muted); font-size:.8rem; margin-top:14px}
body:not(.t-nohead) .t-foot{color:var(--muted)}

/* ── board ────────────────────────────────────────────────────────────────── */
.lb{padding:14px 14px 80px; max-width:1100px; margin:0 auto}
.lb-alert{background:var(--bad-bg); color:var(--bad-ink); border-radius:13px;
  padding:11px 13px; margin-bottom:10px; font-weight:700; font-size:.9rem}
.lb-search{display:flex; gap:8px; margin-bottom:12px}
.lb-search input{flex:1; min-width:0; padding:13px 14px; border-radius:13px;
  border:1px solid var(--line); background:#fff; color:var(--ink); font:400 15px Inter,sans-serif}
.lb-search input:focus{outline:0; border-color:var(--soft); box-shadow:0 0 0 3px #70c38b40}
.lb-search button{padding:0 20px; border-radius:13px; border:0;
  background:var(--lime); color:var(--limeink); font-weight:900; cursor:pointer}
.lb-chips{display:flex; gap:7px; overflow-x:auto; padding-bottom:9px; -webkit-overflow-scrolling:touch}
.lb-chip{flex:0 0 auto; padding:8px 13px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--navy); text-decoration:none; font-size:.83rem; font-weight:700; white-space:nowrap}
.lb-chip b{opacity:.55; margin-left:5px; font-weight:800}
.lb-chip.on{background:var(--navy); border-color:var(--navy); color:#fff}
.lb-chip.on b{opacity:.8}
.lb-chip--t{font-size:.79rem}
.lb-empty{text-align:center; color:var(--muted); padding:34px 0; font-weight:600}

.lb-list{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
.lb-item a{display:block; padding:14px 15px; border-radius:16px; background:#fff;
  border:1px solid var(--line); color:inherit; text-decoration:none;
  box-shadow:0 1px 2px #0642320d}
.lb-item a:active{background:var(--paper)}
.lb-row1{display:flex; justify-content:space-between; align-items:center; gap:8px}
.lb-name{font-weight:800; font-size:1.02rem; color:var(--navy)}
.lb-row2{color:var(--muted); font-size:.86rem; margin-top:3px; display:flex; gap:5px; flex-wrap:wrap}
.lb-row3{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:9px}
.lb-dot{opacity:.4}
.lb-val{margin-left:auto; font-weight:900; font-size:.92rem; color:var(--navy)}
.lb-when{color:var(--muted); font-size:.76rem}

.lb-state,.lb-tag{border-radius:999px; padding:3px 9px; font-size:.69rem; font-weight:900;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; background:#eef3f9; color:var(--muted)}
.lb-tag{font-size:.66rem}
.lb-state--booked,.lb-tag--booked{background:var(--ok-bg); color:var(--ok-ink)}
.lb-state--scheduled,.lb-tag--scheduled{background:var(--cool-bg); color:var(--cool-ink)}
.lb-state--sold,.lb-tag--sold{background:var(--plum-bg); color:var(--plum-ink)}
.lb-state--complete,.lb-tag--complete{background:var(--ok-bg); color:var(--ok-ink)}
.lb-state--canceled,.lb-tag--canceled{background:var(--bad-bg); color:var(--bad-ink)}
.lb-state--incomplete,.lb-tag--incomplete{background:var(--warn-bg); color:var(--warn-ink)}
.lb-tag--in-titan,.lb-state--in-titan{background:var(--cool-bg); color:var(--cool-ink)}
.lb-tag--not-in-titan{background:var(--bad-bg); color:var(--bad-ink)}
.lb-tag--wf{background:#eef3f9; color:var(--navy)}

/* ── toasts ───────────────────────────────────────────────────────────────── */
.lb-toasts{position:fixed; left:12px; right:12px; bottom:16px; z-index:60;
  display:flex; flex-direction:column; gap:8px; pointer-events:none}
.lb-toast{pointer-events:auto; display:block; padding:12px 14px; border-radius:14px;
  text-decoration:none; background:linear-gradient(135deg,var(--navy),var(--navy2)); color:#fff;
  box-shadow:0 14px 34px #02191740; animation:lbIn .22s ease-out}
.lb-toast--partial{background:var(--lime); color:var(--limeink)}
.lb-toast.is-out{opacity:0; transform:translateY(6px); transition:opacity .5s,transform .5s}
.lb-toast__k{display:block; font-size:.67rem; text-transform:uppercase; letter-spacing:.07em;
  opacity:.9; font-weight:900}
.lb-toast__n{display:block; font-weight:900; font-size:1rem; margin-top:2px}
.lb-toast__p{display:block; font-size:.84rem; opacity:.9}
@keyframes lbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── lead detail ──────────────────────────────────────────────────────────── */
.lb-detail{padding-bottom:100px}
.ld-head h1{margin:2px 0 7px; font-size:1.4rem; font-weight:900; color:var(--navy)}
.ld-tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:13px}
.ld-card{background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:15px 16px; margin-bottom:11px; box-shadow:0 1px 2px #0642320d}
.ld-card h2{margin:0 0 11px; font-size:.73rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--green); font-weight:900}
.ld-kv{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 16px}
.ld-kv--wide{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ld-kv > div{min-width:0; border-bottom:1px solid var(--line); padding-bottom:7px}
.ld-kv span{display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:800}
.ld-kv b{display:block; font-weight:800; word-break:break-word; font-size:.95rem; color:var(--ink)}
.ld-actions{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:13px}
.ld-actions--st{margin:13px 0 0}
.ld-btn{flex:1 1 auto; text-align:center; padding:13px 14px; border-radius:13px;
  text-decoration:none; background:#fff; border:1px solid var(--line); color:var(--navy);
  font-weight:800; font-size:.9rem; cursor:pointer}
.ld-btn--go{background:var(--lime); color:var(--limeink); border:0}
.ld-btn--st{background:var(--navy); color:#fff; border:0}
.ld-warn{background:var(--bad-bg); color:var(--bad-ink); border-radius:13px;
  padding:11px 13px; margin:0; font-weight:700; font-size:.89rem}
.ld-note{background:var(--paper); border:1px solid var(--line); border-radius:13px;
  padding:10px 12px; font-size:.89rem; margin:0 0 11px}
.ld-table{width:100%; border-collapse:collapse; font-size:.87rem; margin-top:11px}
.ld-table th{text-align:left; padding:7px 6px; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); font-weight:800; border-bottom:1px solid var(--line)}
.ld-table td{padding:8px 6px; border-bottom:1px solid var(--line)}
.ld-table tr.on{background:#f2fae6; font-weight:800}
.dim{color:var(--muted)}
.ld-form{display:flex; flex-direction:column; gap:11px}
.ld-statuses{display:flex; flex-wrap:wrap; gap:7px}
.ld-radio{flex:1 1 auto}
.ld-radio input{position:absolute; opacity:0; pointer-events:none}
.ld-radio span{display:block; text-align:center; padding:11px 10px; border-radius:12px;
  border:1px solid var(--line); font-size:.85rem; font-weight:800; background:#fff; color:var(--navy)}
.ld-radio input:checked + span,.ld-radio.on span{background:var(--navy); border-color:var(--navy); color:#fff}
.ld-field{display:block}
.ld-field span{display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); font-weight:800; margin-bottom:5px}
.ld-field input,.ld-field textarea{width:100%; padding:12px 13px; border-radius:13px;
  border:1px solid var(--line); background:#fff; color:var(--ink); font:400 15px Inter,sans-serif}
.ld-field input:focus,.ld-field textarea:focus{outline:0; border-color:var(--soft); box-shadow:0 0 0 3px #70c38b40}
.el-back{margin:0 0 10px; font-size:.88rem}
.el-back a{color:var(--muted); text-decoration:none}

/* ── verification chips + stated-vs-record table ──────────────────────────── */
.ld-verify{display:flex; gap:7px; flex-wrap:wrap}
.ld-vchip{border-radius:999px; padding:6px 11px; font-size:.76rem; font-weight:700;
  background:var(--paper); color:var(--muted); border:1px solid var(--line)}
.ld-vchip b{font-weight:900; margin-right:5px}
.ld-vchip.is-ok{background:var(--ok-bg); color:var(--ok-ink); border-color:transparent}
.ld-vchip.is-bad{background:var(--bad-bg); color:var(--bad-ink); border-color:transparent}
.ld-cmp td{vertical-align:top}
.ld-cmp .cmp-l{font-weight:800; color:var(--green); white-space:nowrap}
.cmp-flag{display:inline-block; margin-left:6px; border-radius:999px; padding:2px 8px;
  font-size:.65rem; font-weight:900; text-transform:uppercase; letter-spacing:.04em;
  background:var(--warn-bg); color:var(--warn-ink)}
.ld-cmp tr.cmp--differ td, .ld-cmp tr.cmp--check td{background:#fffdf4}
.cmp-note{font-size:.78rem; margin-top:3px; line-height:1.35}
/* Status commits on tap; this is the half-second before the page returns. */
.ld-radio.is-saving span{opacity:.55}

/* "N test leads hidden" hint above the list. */
.lb-hidden{margin:2px 0 8px; font-size:.82rem; color:var(--muted); font-weight:600}
.lb-hidden a{color:var(--green); font-weight:800}

/* ── CRM report layout ────────────────────────────────────────────────────── */
.ld-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; margin-bottom:12px}
.ld-head__main{min-width:0}
.ld-head h1{margin:0 0 4px; font-size:1.35rem; font-weight:900; color:var(--green2)}
.ld-head__addr{margin:0; font-weight:700; color:var(--ink); font-size:.95rem}
.ld-head__meta{margin:3px 0 0; color:var(--muted); font-size:.83rem}
.ld-sect{font-size:.9rem; font-weight:900; color:var(--green); margin:22px 0 9px}
.ld-grid2{display:grid; grid-template-columns:1fr; gap:11px}
.ld-mgmt{display:grid; grid-template-columns:1fr; gap:11px}
.ld-field--sel select{width:100%; padding:12px 13px; border-radius:13px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font:600 15px Inter,sans-serif}
.ld-lastmoved{margin:0 0 10px; font-size:.82rem}
.ld-map{height:230px; border-radius:16px; overflow:hidden; border:1px solid var(--line); margin-bottom:11px}
.ld-map iframe{width:100%; height:100%; border:0; display:block}

/* Red flag on an answer that disagrees with the county record. */
.ld-kv > div.is-flagged{background:#fff6f5; margin:-4px -6px; padding:4px 6px 7px; border-radius:8px}
.ld-flag{position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; margin-left:7px; border-radius:50%; background:var(--bad-ink);
  color:#fff; font-size:.68rem; font-weight:900; cursor:help; vertical-align:middle}
.ld-flag__tip{position:absolute; bottom:130%; left:50%; transform:translateX(-50%);
  width:min(250px,68vw); background:var(--green2); color:#fff; padding:9px 11px; border-radius:10px;
  font-size:.76rem; font-weight:600; line-height:1.4; text-align:left; letter-spacing:0;
  opacity:0; pointer-events:none; transition:opacity .13s; z-index:20;
  box-shadow:0 10px 26px #02191740}
.ld-flag:hover .ld-flag__tip,.ld-flag:focus .ld-flag__tip{opacity:1}

/* Notes & history */
.ld-hist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.ld-hist__i{border-left:3px solid var(--line); padding:2px 0 2px 11px}
.ld-hist__i--status{border-left-color:var(--lime)}
.ld-hist__i--note{border-left-color:var(--soft)}
.ld-hist__when{display:block; font-size:.72rem; color:var(--muted); font-weight:600}
.ld-hist__when b{color:var(--green); font-weight:900}
.ld-hist__what{display:block; font-size:.9rem; font-weight:600}
.ld-hist__note{display:block; margin-top:3px; font-size:.85rem; color:var(--muted);
  background:var(--paper); border-radius:9px; padding:7px 9px}
.ld-raw{background:#fff; border:1px solid var(--line); border-radius:16px; padding:13px 15px; margin-top:14px}
.ld-raw summary{cursor:pointer; font-weight:800; font-size:.88rem; color:var(--green)}
.ld-raw pre{overflow-x:auto; font-size:.74rem; background:var(--paper); padding:12px; border-radius:10px; margin-top:10px}

/* ── desktop ──────────────────────────────────────────────────────────────── */
@media (min-width:860px){
  .lb{padding:22px 24px 90px}
  .ld-grid2{grid-template-columns:1fr 1fr; gap:13px; align-items:start}
  .ld-mgmt{grid-template-columns:1fr 1fr; gap:13px}
  .ld-head h1{font-size:1.6rem}
  .ld-map{height:300px}
  .ld-actions{max-width:640px}
  .lb-list{display:grid; grid-template-columns:1fr 1fr; gap:11px}
  .ld-kv{gap:12px 20px}
}
@media (min-width:1280px){
  .lb-list{grid-template-columns:1fr 1fr 1fr}
}