/* ============================================================
   FlyHi Sourcing — dark theme
   Every colour is a token. Reskinning means editing :root, not
   hunting through 130 rules.
   ============================================================ */
:root{
  /* --- brand ---
     FlyHi navy #0668A2. The three derived values exist because one hex
     can't do every job on a dark background:
       --navy      fills (white label on top clears 5.9:1)
       --navy-lift hover, one step brighter
       --navy-ink  navy as TEXT or hairline — the brand hex itself only
                   hits 3.2:1 on #0e1116, this tint reaches 6.8:1
       --navy-dim  translucent wash for tinted chips */
  --navy:#0668A2;
  --navy-lift:#0a7fc4;
  --navy-ink:#4fa3da;
  --navy-dim:rgba(6,104,162,.24);

  /* --- surfaces, darkest to lightest --- */
  --bg:#0e1116;
  --panel:#141922;
  --raise:#1a2029;
  --line:#252d39;
  --line-2:#1b222c;

  /* --- text --- */
  --ink:#e6ebf2;
  --ink-2:#9aa6b6;
  --ink-3:#66727f;

  --warn:#e2a06a;
  --warn-bg:rgba(226,160,106,.10);
  --ok:#5fc79a;
  --ok-bg:rgba(95,199,154,.10);

  --radius:14px;
  --sans:"Miranda Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Stack Sans Headline","Miranda Sans",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
::selection{background:var(--navy-lift);color:#fff}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:196px 1fr;height:100vh}
.work{display:grid;grid-template-columns:minmax(340px,26%) 1fr;height:100vh;min-width:0}
#view-clients{height:100vh}
.pane{overflow-y:auto;padding:26px 24px 70px;min-width:0}
.pane-left{border-right:1px solid var(--line);background:var(--panel)}

header{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
h1{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.015em;margin:0}
.sub{color:var(--ink-3);font-size:13px}
.count{font-size:12px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}

/* ---------- sidebar ---------- */
.side{
  display:flex;flex-direction:column;gap:2px;padding:22px 12px;
  border-right:1px solid var(--line);background:#0b0e12;overflow-y:auto;
}
.brand{
  font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.01em;
  padding:0 10px 18px;color:var(--ink);
}
.nav{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  border:none;background:none;border-radius:9px;padding:10px 12px;
  font-family:inherit;font-size:13.5px;color:var(--ink-2);transition:.13s;
}
.nav:hover{background:var(--raise);color:var(--ink)}
.nav.on{background:var(--navy);color:#fff}
.nav-n{
  margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.09);border-radius:999px;padding:1px 7px;
}
.nav.on .nav-n{background:rgba(255,255,255,.2)}
.side-foot{
  margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--line-2);
  font-size:11px;color:var(--ink-3);display:flex;flex-direction:column;gap:5px;align-items:flex-start;
}

/* ---------- controls ---------- */
button{font-family:inherit;font-size:13px;cursor:pointer}
.btn{
  border:1px solid var(--navy);background:var(--navy);color:#fff;
  border-radius:999px;padding:9px 20px;font-weight:500;transition:.15s;
}
.btn:hover{background:var(--navy-lift);border-color:var(--navy-lift)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{background:var(--raise);color:var(--ink);border-color:var(--ink-3)}
.btn-sm{padding:6px 14px;font-size:12px}
.link{
  background:none;border:none;color:var(--ink-3);padding:0;
  text-decoration:underline;text-underline-offset:3px;
}
.link:hover{color:var(--navy-ink)}

textarea{
  width:100%;min-height:150px;resize:vertical;
  font-family:var(--mono);font-size:12px;line-height:1.55;
  border:1px solid var(--line);border-radius:10px;padding:14px;
  background:var(--bg);color:var(--ink);
}
textarea:focus,input:focus,select:focus{outline:2px solid var(--navy-lift);outline-offset:1px}
input,select{color-scheme:dark}
.paste-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.hint{color:var(--ink-3);font-size:12px}

/* ---------- draft form ---------- */
#draft{margin-top:20px;display:none}
.draft-cols{display:grid;gap:20px}
.group h3{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-2);
}
.field{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:10px;margin-bottom:8px}
.field label{font-size:12px;color:var(--ink-2)}
.field input{
  font-family:inherit;font-size:13px;color:var(--ink);
  border:1px solid transparent;border-bottom:1px solid var(--line);
  border-radius:4px;padding:5px 7px;background:transparent;width:100%;
}
.field input:hover{background:var(--raise)}
.field.missing input{border-bottom-color:var(--warn);background:var(--warn-bg)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.extras{margin:14px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.7}
.extras b{font-weight:500;color:var(--ink-2)}

.flag{
  display:flex;gap:8px;align-items:flex-start;border-radius:10px;
  padding:10px 13px;margin-bottom:16px;font-size:12.5px;
  background:var(--raise);border:1px solid var(--line);color:var(--ink-2);
}
.flag.dupe{background:var(--warn-bg);border-color:rgba(226,160,106,.3);color:var(--warn)}
.flag.client{background:var(--ok-bg);border-color:rgba(95,199,154,.3);color:var(--ok)}
.flag.checking{color:var(--ink-3)}
.flag b{font-weight:600}
.draft-foot{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2)}

/* ---------- call queue ---------- */
.list-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.list-head h2{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0}
#listHint{display:block;margin-bottom:14px}
.empty{
  border:1px dashed var(--line);border-radius:var(--radius);
  padding:38px 22px;text-align:center;color:var(--ink-3);font-size:13px;
}
.agent-card{
  border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:14px;overflow:hidden;background:var(--panel);
}
.agent-top{display:flex;align-items:center;gap:14px;padding:15px 22px;background:var(--raise);flex-wrap:wrap}
.agent-name{font-weight:600;font-size:14.5px}
.agent-meta{color:var(--ink-2);font-size:12.5px}
.agent-meta span{margin-right:14px;white-space:nowrap}
.pill{
  font-size:11px;letter-spacing:.04em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:2px 10px;background:var(--panel);
}
.pill.is-client{background:var(--ok-bg);border-color:rgba(95,199,154,.32);color:var(--ok);text-transform:capitalize}
.pill.is-lead{background:var(--navy-dim);border-color:rgba(79,163,218,.34);color:var(--navy-ink);text-transform:capitalize}

/* Map is the anchor of the card; text sits beside it. */
.listing{
  display:grid;grid-template-columns:minmax(300px,460px) 1fr;gap:26px;
  align-items:start;padding:24px 22px;border-top:1px solid var(--line-2);
}
.lmapwrap{position:relative;width:100%;height:320px;border-radius:12px;overflow:hidden}
.lmap{width:100%;height:100%;background:#e9edf2}
.leaflet-container{background:#e9edf2;font-family:inherit}

/* Light map inside a dark card: the frame is a dark hairline so the panel
   has an edge, and the overlays flip to dark-on-white. */
.frame{
  position:absolute;inset:0;pointer-events:none;border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(6,104,162,.35),
             0 0 0 1px rgba(0,0,0,.35);
}
.frame::before,.frame::after{
  content:'';position:absolute;width:14px;height:14px;
  border-color:rgba(6,104,162,.55);border-style:solid;
}
.frame::before{top:9px;left:9px;border-width:2px 0 0 2px;border-radius:3px 0 0 0}
.frame::after{bottom:9px;right:9px;border-width:0 2px 2px 0;border-radius:0 0 3px 0}
/* The coordinate readout is gone — it told you nothing you could act on.
   Only the approximate-pin warning survives, because that one changes
   how much you trust the dot. */
.approx{
  position:absolute;left:10px;bottom:9px;z-index:400;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#8a5a2b;background:rgba(255,255,255,.85);
  border-radius:4px;padding:2px 6px;
}
.attrib{
  position:absolute;right:10px;top:9px;z-index:400;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;
  color:#5c6470;background:rgba(255,255,255,.8);
  border-radius:4px;padding:2px 5px;
}
/* Navy pin on a light map — brand colour, full strength, no lift needed. */
.pin{position:relative}
.pin-core,.pin-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.pin-core{
  width:12px;height:12px;background:var(--navy);
  box-shadow:0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,.4);
}
.pin-ring{
  width:12px;height:12px;border:2px solid rgba(6,104,162,.8);
  animation:ping 2.6s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes ping{
  0%{width:12px;height:12px;opacity:.85}
  70%{width:62px;height:62px;opacity:0}
  100%{width:62px;height:62px;opacity:0}
}
.lmap-empty{
  position:relative;width:100%;height:100%;display:grid;place-items:center;gap:7px;
  border-radius:12px;background:#e9edf2;overflow:hidden;border:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:#5c6470;text-transform:uppercase;
}
.lmap-empty .link{color:var(--navy)}
.scan{
  position:absolute;left:0;right:0;height:1px;top:0;
  background:linear-gradient(90deg,transparent,rgba(6,104,162,.55),transparent);
  animation:sweep 1.9s linear infinite;
}
@keyframes sweep{0%{top:8%}100%{top:92%}}

.linfo{display:flex;flex-direction:column;gap:13px;min-width:0;padding-top:2px}
.lhead{display:flex;align-items:baseline;gap:12px}
.listing .addr{font-weight:500;font-size:16px}
.lsub{color:var(--ink-3);font-size:12.5px;margin-top:-9px}
.meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.listing-actions{margin-left:auto;display:flex;gap:12px;align-items:center}
.stat{color:var(--ink-2);font-size:12.5px;font-variant-numeric:tabular-nums}
.stat b{font-weight:500;color:var(--ink)}
.sqft{
  font-family:var(--display);font-size:19px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.sqft i{
  font-family:var(--sans);font-style:normal;font-size:10.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-left:5px;
}
.when{color:var(--ink-3);font-size:12px;white-space:nowrap}
.due{color:var(--warn);font-weight:500}

/* ---------- call tracking ---------- */
.status{
  font-size:11px;font-weight:500;letter-spacing:.03em;
  border-radius:999px;padding:3px 11px;white-space:nowrap;
  border:1px solid var(--line);color:var(--ink-2);background:var(--raise);
}
.status.new{border-style:dashed;color:var(--ink-3)}
.status.wait{background:var(--warn-bg);border-color:rgba(226,160,106,.3);color:var(--warn)}
.status.good{background:var(--ok-bg);border-color:rgba(95,199,154,.3);color:var(--ok)}
.status.dead{background:var(--line-2);border-color:var(--line);color:var(--ink-3)}
.callbar{
  display:none;gap:7px;align-items:center;flex-wrap:wrap;
  padding:14px 22px;border-top:1px solid var(--line-2);background:var(--raise);
}
.callbar.open{display:flex}
.out{
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  border-radius:999px;padding:6px 14px;font-size:12px;transition:.12s;
}
.out:hover{border-color:var(--navy-ink);color:var(--ink);background:var(--navy-dim)}
.note-in{
  flex:1;min-width:160px;font-family:inherit;font-size:12.5px;color:var(--ink);
  border:none;border-bottom:1px solid var(--line);background:transparent;padding:5px 4px;
}
.history{
  flex-basis:100%;margin:0 0 8px;padding-bottom:9px;border-bottom:1px solid var(--line);
  font-size:12px;color:var(--ink-2);
}
.history div{display:flex;gap:9px;padding:2px 0}
.history time{color:var(--ink-3);min-width:104px;font-variant-numeric:tabular-nums}
.history b{font-weight:500;color:var(--ink);min-width:96px}
.history i{font-style:normal;color:var(--ink-2)}

.filters{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.filter{
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  border-radius:999px;padding:5px 13px;font-size:12px;
}
.filter:hover{border-color:var(--ink-3);color:var(--ink)}
.filter.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- clients table ---------- */
.search{
  width:100%;max-width:420px;margin:0 0 16px;padding:9px 13px;
  font-family:inherit;font-size:13px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);color:var(--ink);
}
.ctable{width:100%;border-collapse:collapse;font-size:13px}
.ctable th{
  position:sticky;top:0;z-index:2;background:var(--bg);
  text-align:left;font-weight:500;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
  padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.th-sort{cursor:pointer;user-select:none}
.th-sort:hover{color:var(--ink)}
.th-sort.on{color:var(--navy-ink)}
.th-sort::after{content:'';display:inline-block;width:11px;opacity:.5}
.th-sort.on[data-dir="asc"]::after{content:'↑';opacity:1}
.th-sort.on[data-dir="desc"]::after{content:'↓';opacity:1}
.ctable td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.ctable tbody tr:hover{background:var(--panel)}
.cname{font-weight:500;white-space:nowrap}
.ctable .muted{color:var(--ink-2);font-size:12.5px}
.ctable .nowrap{white-space:nowrap}
.ctable .trunc{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctable .num{text-align:right;font-variant-numeric:tabular-nums}
.ctable th.num{text-align:right}
.ctable tr.editing{background:var(--raise)}
.ctable tr.editing td{padding:16px 14px}
.edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.edit-grid label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--ink-3)}
.edit-grid input,.edit-grid select{
  font-family:inherit;font-size:13px;color:var(--ink);padding:7px 9px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg);
}
.edit-foot{display:flex;gap:10px;align-items:center;margin-top:14px}

/* ---------- gate + banner ---------- */
.gate{display:grid;place-items:center;height:100vh;background:var(--bg)}
.gate-box{
  width:320px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 28px;
}
.gate-box h1{margin:0 0 4px;font-family:var(--display)}
.gate-box .sub{display:block;margin-bottom:20px;font-size:13px;color:var(--ink-3)}
.gate-box input{
  display:block;width:100%;margin-bottom:10px;padding:10px 12px;
  font-family:inherit;font-size:13.5px;border:1px solid var(--line);
  border-radius:9px;background:var(--bg);color:var(--ink);
}
.gate-box .btn{width:100%;margin-top:6px}
.gate-err{margin:12px 0 0;font-size:12.5px;color:var(--warn);min-height:16px}
.banner{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:10px 16px;font-size:12.5px;font-family:var(--mono);
  background:var(--warn-bg);border-bottom:1px solid rgba(226,160,106,.3);color:var(--warn);
}

@media(max-width:980px){
  body{overflow:auto}
  .app{grid-template-columns:1fr;height:auto}
  .work{grid-template-columns:1fr;height:auto}
  #view-clients{height:auto}
  .pane{overflow:visible;padding:22px 18px 40px}
  .pane-left{border-right:none;border-bottom:1px solid var(--line)}
  .side{flex-direction:row;align-items:center;height:auto;border-right:none;border-bottom:1px solid var(--line);overflow-x:auto}
  .side .brand,.side-foot{display:none}
  .listing{grid-template-columns:1fr;padding:18px}
  .lmapwrap{height:230px}
  .field{grid-template-columns:96px 1fr}
  .edit-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.pin-ring,.scan{animation:none}}

/* ---------- jobs ----------
   The cards are the sourcing cards — same .agent-card, .listing, .lmapwrap.
   Only the toolbar above them is new. */
#jobHint{display:block;margin-bottom:16px}
.job-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.job-tools .search{margin:0;flex:1 1 240px;max-width:360px}
/* .filters pushes itself right in a header row; inside the toolbar it's
   just another control, so the auto margin has to go. */
.job-tools .filters{margin-left:0}
.sort-pick{
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
}
.sort-pick select{
  font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:8px 13px;
}
.sort-pick select:hover{border-color:var(--ink-3)}
/* Services are a comma string in the import — one chip each, so a job with
   three add-ons reads as three things rather than one long line. */
.svc{display:flex;gap:6px;flex-wrap:wrap}
.svc .pill{background:var(--raise);color:var(--ink-2)}
.addr .unit{
  font-style:normal;font-weight:400;font-size:13px;
  color:var(--ink-3);margin-left:4px;
}
.more{display:flex;justify-content:center;padding:6px 0 24px}

@media(max-width:980px){
  .job-tools .search{max-width:none}
}

/* ---------- home points on the map ----------
   Muted on purpose. These are context, not the subject — the navy
   listing pin has to stay the thing your eye lands on first. */
.home-pin{color:#41505f}
.home-mark{
  display:grid;place-items:center;width:24px;height:24px;
  background:rgba(255,255,255,.92);border-radius:7px;
  box-shadow:0 0 0 1px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.22);
}

/* ---------- attribution ---------- */
.by{font-weight:500;color:var(--ink-2)}
.history u{
  text-decoration:none;color:var(--navy-ink);font-size:11.5px;
  min-width:64px;
}

/* ---------- sidebar gear ---------- */
.nav-gear{
  gap:9px;margin-bottom:8px;font-size:13px;
  /* .side-foot is a column flex with align-items:flex-start, which would
     shrink a button to its text width. */
  align-self:stretch;
}
.nav-gear svg{flex:none;opacity:.75}
.nav-gear.on svg{opacity:1}
.side-foot{padding-top:12px}

/* ---------- settings ---------- */
.setting{
  max-width:720px;margin:0 0 34px;padding-bottom:26px;
  border-bottom:1px solid var(--line-2);
}
.setting:last-child{border-bottom:none}
.setting h3{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px;
}
.setting-note{margin:0 0 16px;font-size:12.5px;color:var(--ink-2);line-height:1.6;max-width:60ch}
.setting-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.setting-row .search{margin:0;flex:1 1 240px;max-width:none}
.setting-row .home-label{flex:0 1 180px}

.home-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;margin-top:10px;
  border:1px solid var(--line);border-radius:11px;background:var(--panel);
}
.home-ico{
  font-size:17px;line-height:1;color:var(--navy-ink);
  width:26px;height:26px;display:grid;place-items:center;flex:none;
  border-radius:7px;background:var(--navy-dim);
}
.home-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.home-text b{font-weight:500;font-size:13.5px}
.home-text i{
  font-style:normal;font-size:12px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.home-state{font-size:11px;letter-spacing:.04em;color:var(--ink-3);white-space:nowrap}
.home-state.ok{color:var(--ok)}
.home-state.bad{color:var(--warn)}

@media(max-width:980px){
  /* The sidebar becomes a horizontal strip and .side-foot was hidden
     outright. The gear has to survive that; the email doesn't. */
  .side-foot{
    display:flex;flex-direction:row;align-items:center;gap:12px;
    margin:0 0 0 auto;padding:0 4px 0 12px;border-top:none;
  }
  .side-foot #who{display:none}
  .nav-gear{align-self:auto;margin-bottom:0;white-space:nowrap}
  .setting-row .search{flex:1 1 100%}
}

/* ---------- address autocomplete ---------- */
.sug-wrap{position:relative;display:block;flex:1 1 240px;min-width:0}
.sug-wrap .search{width:100%;max-width:none}
.sug{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;
  background:var(--raise);border:1px solid var(--line);border-radius:11px;
  padding:5px;box-shadow:0 12px 30px rgba(0,0,0,.45);
  max-height:260px;overflow-y:auto;
}
.sug-item{
  display:block;width:100%;text-align:left;border:none;background:none;
  font-family:inherit;font-size:13px;color:var(--ink-2);
  padding:9px 11px;border-radius:7px;line-height:1.45;
}
.sug-item:hover,.sug-item.on{background:var(--navy);color:#fff}