/* S&H Lead Command — design system v1 (custom build, 2026-11-02)
   Enterprise CRM register: hairlines over shadows, tabular numbers,
   one navy, muted status color, dense but breathable. */
:root{
  --navy:#0C3660; --navy2:#153F69; --ink:#16283C; --mut:#5B6B7C;
  --bg:#F4F6F9; --panel:#FFFFFF; --line:#E2E6EC; --line2:#EDF0F4;
  --red:#B3261E; --amber:#B45309; --amber-bg:#FEF3C7; --green:#177245;
  --radius:6px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{font-size:14px}
body{font-family:"Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased}
a{color:var(--navy2); text-decoration:none}

/* ---- shell ---- */
.shell{display:flex; min-height:100vh}
.rail{width:216px; flex:0 0 216px; background:var(--navy); color:#C9D6E4;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh}
.rail .brand{padding:18px 18px 14px; border-bottom:1px solid rgba(255,255,255,.14)}
.rail .brand .mark{font-size:17px; font-weight:700; color:#fff; letter-spacing:.2px}
.rail .brand .logo{display:block; width:168px; max-width:100%; height:auto}
.rail .brand .sub{font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:#8FA9C4; margin-top:2px}
.rail nav{padding:10px 8px; flex:1}
.rail nav button{display:flex; width:100%; align-items:center; gap:10px; padding:8px 10px;
  background:none; border:0; border-left:3px solid transparent; color:#C9D6E4;
  font:inherit; font-size:13.5px; cursor:pointer; border-radius:0 4px 4px 0; text-align:left}
.rail nav button:hover{background:rgba(255,255,255,.07); color:#fff}
.rail nav button.on{background:var(--navy2); border-left-color:#fff; color:#fff; font-weight:600}
.rail nav .ic{width:16px; text-align:center; opacity:.85}
.rail .who{padding:12px 18px; border-top:1px solid rgba(255,255,255,.14); font-size:12.5px}
.rail .who .nm{color:#fff; font-weight:600}
.rail .who .rl{color:#8FA9C4}
.main{flex:1; min-width:0}
.topbar{background:var(--panel); border-bottom:1px solid var(--line);
  padding:14px 26px; display:flex; align-items:baseline; gap:14px; position:sticky; top:0; z-index:5}
.topbar h1{font-size:20px; font-weight:650; letter-spacing:-.2px}
.topbar .crumb{color:var(--mut); font-size:12.5px}
.topbar .sp{flex:1}
.btn{background:var(--navy); color:#fff; border:1px solid var(--navy); padding:7px 14px;
  border-radius:var(--radius); font:inherit; font-size:13px; font-weight:600; cursor:pointer}
.btn:hover{background:var(--navy2)}
.btn.ghost{background:#fff; color:var(--navy); border-color:#C6D0DC}
.content{padding:22px 26px 40px; max-width:1460px}

/* ---- generic panels & tables ---- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:18px}
.panel .ph{padding:12px 16px 10px; display:flex; align-items:baseline; gap:10px}
.panel .ph h2{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.1px; color:var(--mut)}
.panel .ph .note{font-size:12px; color:var(--mut)}
.panel .pb{padding:4px 16px 14px}
table{width:100%; border-collapse:collapse; font-size:13px}
th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--mut);
  padding:8px 10px; border-bottom:1px solid var(--line); font-weight:600}
td{padding:8px 10px; border-bottom:1px solid var(--line2); vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#F8FAFC}
.num{text-align:right; font-variant-numeric:tabular-nums}
th.num{text-align:right}

/* ---- KPI strip ---- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); margin-bottom:18px}
.kpi{padding:16px 18px 14px; border-right:1px solid var(--line2)}
.kpi:last-child{border-right:0}
.kpi .lb{font-size:11px; text-transform:uppercase; letter-spacing:1.1px; color:var(--mut); font-weight:600}
.kpi .vl{font-size:30px; font-weight:650; letter-spacing:-.5px; margin-top:4px; font-variant-numeric:tabular-nums}
.kpi .vl.red{color:var(--red)}
.kpi .ds{font-size:12px; color:var(--mut); margin-top:2px}

/* ---- funnel ---- */
.funnel{display:flex; height:34px; border-radius:4px; overflow:hidden; border:1px solid var(--line)}
.funnel div{display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:12px; font-weight:600; min-width:34px; white-space:nowrap; overflow:hidden}
.funnel-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:9px; font-size:12px; color:var(--mut)}
.funnel-legend b{color:var(--ink); font-variant-numeric:tabular-nums}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px}

/* ---- status pills & chips ---- */
.pill{display:inline-block; padding:2px 8px; border-radius:99px; font-size:11.5px; font-weight:600; white-space:nowrap}
/* Leads list (v5.9, Sean 2026-11-05): the controls bar, footer, and
   the per-row status dropdown styled as a pill. */
.listbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--line)}
.listbar label{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--mut)}
.listbar input[type="search"]{border:1px solid var(--line); border-radius:8px;
  padding:6px 10px; font-size:13px; min-width:200px}
.listfoot{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 16px; color:var(--mut); font-size:12.5px; border-top:1px solid var(--line)}
.stsel{border:0; border-radius:99px; padding:3px 6px; font-size:11.5px;
  font-weight:600; cursor:pointer; max-width:170px}
.st-New{background:#E3ECFB; color:#1D4ED8}
.st-AttemptingContact{background:#FEF3C7; color:#92400E}
.st-MadeContact{background:#D9EFE6; color:#0B5C43}
.st-Quoted{background:#E9E4F8; color:#4C2E9E}
.st-Bound{background:#D8F0DC; color:#14532D}
.st-Lost{background:#FBE3E1; color:#8C1D18}
.st-Dead{background:#E8ECF0; color:#52606D}
.conf-low{background:#FEF3C7; color:#92400E; border:1px solid #E7C26A}
.chip{display:inline-block; padding:2px 7px; border-radius:4px; font-size:11px; font-weight:700; letter-spacing:.3px; white-space:nowrap}
.chip.over{background:var(--red); color:#fff}
.chip.soon{background:var(--amber-bg); color:var(--amber); border:1px solid #E7C26A}
.chip.ok{background:#fff; color:var(--mut); border:1px solid var(--line)}

/* ---- pipeline ---- */
.pipebar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.pipebar label{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1.1px; color:var(--mut)}
.pipesum{font-size:12.5px; color:var(--mut); font-variant-numeric:tabular-nums}
.pipesum b{color:var(--ink)}
.pipesum .showall{background:none; border:0; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--navy2); cursor:pointer; padding:0; text-decoration:underline}
.pipesum .showall:hover{color:var(--navy)}
/* The shelf sits BELOW the board (footer section), so the gap is on top. */
.shelf{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:8px 12px; margin-top:12px}
.shelf-h{display:flex; align-items:center; gap:8px; padding:2px 4px; cursor:pointer}
.shelfchev{margin-left:auto; color:var(--mut); font-size:12px; font-weight:600; white-space:nowrap}
.shelfitems{margin-top:6px}
.shelf-h .t{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px}
.shelf-h .n{background:#EDF1F6; border:1px solid var(--line); border-radius:99px;
  font-size:11px; font-weight:700; padding:0 7px; font-variant-numeric:tabular-nums}
.shelf-h .note{color:var(--mut); font-size:12px}
.shelfitem{display:flex; align-items:center; gap:10px; padding:7px 6px;
  border-top:1px solid var(--line2); border-radius:4px; cursor:pointer; flex-wrap:wrap}
.shelfitem:hover{background:#F8FAFC}
.shelfitem .nm{font-weight:650; font-size:13px}
.shelfitem .mt{color:var(--mut); font-size:12px}
.shelfitem .who{margin-left:auto; display:flex; align-items:center; gap:6px;
  color:var(--mut); font-size:12px}
.board{display:grid; grid-template-columns:repeat(7,minmax(178px,1fr)); gap:12px; align-items:start}
.lane{background:#EDF1F6; border:1px solid var(--line); border-radius:var(--radius); padding:10px}
.lane .lh{display:flex; align-items:center; gap:7px; padding:2px 4px 8px}
.lane .lh .t{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px}
.lane .lh .n{margin-left:auto; background:#fff; border:1px solid var(--line); border-radius:99px;
  font-size:11px; font-weight:700; padding:0 7px; font-variant-numeric:tabular-nums}
.card{background:#fff; border:1px solid var(--line); border-radius:5px; padding:11px 12px; margin-bottom:9px}
.card .nm{font-weight:650; font-size:13.5px}
.card .mt{color:var(--mut); font-size:12px; margin-top:2px}
.card .ft{display:flex; align-items:center; gap:6px; margin-top:9px; flex-wrap:wrap}
.ava{width:20px; height:20px; border-radius:50%; background:var(--navy2); color:#fff;
  font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.card .pr{font-size:12px; color:var(--mut)}

/* ---- availability / misc ---- */
.avail{display:flex; align-items:center; gap:12px}
.avail .tt{font-weight:650}
.avail .ds{color:var(--mut); font-size:12.5px}
.switch{position:relative; width:44px; height:24px; flex:0 0 44px; cursor:pointer}
.switch input{opacity:0; width:0; height:0}
.switch .tr{position:absolute; inset:0; background:#C6D0DC; border-radius:99px; transition:.15s}
.switch .tr:before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch input:checked + .tr{background:var(--green)}
.switch input:checked + .tr:before{transform:translateX(20px)}
select,input[type=text],input[type=email],input[type=tel]{
  font:inherit; font-size:13px; padding:6px 9px; border:1px solid #CBD5E1; border-radius:5px; background:#fff; color:var(--ink)}
select:focus,input:focus{outline:2px solid #9DB8D6; outline-offset:0; border-color:var(--navy2)}
.ratebar{display:inline-block; width:64px; height:6px; background:var(--line2); border-radius:99px; vertical-align:middle; margin-right:8px; overflow:hidden}
.ratebar i{display:block; height:100%; background:var(--navy2)}
.allclear{color:var(--green); font-weight:600; padding:6px 0}
.overrow{display:flex; gap:10px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line2)}
.overrow:last-child{border-bottom:0}
.overrow .who{margin-left:auto; color:var(--mut); font-size:12.5px}

/* ---- lead detail overlay ---- */
#overlay{position:fixed; inset:0; background:rgba(12,30,52,.45); z-index:50;
  display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:28px 12px}
.sheet{background:#fff; border-radius:8px; width:680px; max-width:96vw; padding:22px 24px; box-shadow:0 12px 40px rgba(0,0,0,.3)}
.sheet h3{font-size:18px; font-weight:650}
.sheet .grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-top:14px}
.fld label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--mut); font-weight:600; margin-bottom:4px}
.fld input,.fld select{width:100%}
.sheet .acts{display:flex; gap:10px; margin-top:18px; align-items:center}
.tl{margin-top:8px}
.tl .ev{padding:7px 0; border-bottom:1px solid var(--line2); font-size:12.5px}
.tl .ev:last-child{border-bottom:0}
.tl .ev .w{color:var(--mut)}
[data-open]{cursor:pointer}
.card[data-open]:hover{border-color:#9DB8D6}

/* ---- lead documents (drag & drop intake) ---- */
.dropzone{border:1.5px dashed #C6D0DC; border-radius:var(--radius); background:#F8FAFC;
  padding:14px 16px; text-align:center; font-size:13px; margin-top:6px}
.dropzone .dz-sub{color:var(--mut); font-size:12px; margin-top:5px}
.dropzone.drag{border-color:var(--navy2); background:#EAF1F9; color:var(--navy)}
/* Quick Add's box sits above a data-entry form; a firmer navy tint sets
   it apart from the form panel below it (Command's stays neutral). */
.dropzone.qa{background:#EDF2F8; border-color:#9DB8D6}
.dropzone .dz-as{margin-top:10px; font-size:12.5px; color:var(--mut)}
.dropzone .dz-as select{margin-left:6px; width:auto}
.docrow{display:flex; gap:8px; align-items:baseline; padding:6px 0;
  border-bottom:1px solid var(--line2); font-size:12.5px}
.docrow:last-child{border-bottom:0}
.docrow .w{color:var(--mut)}
input.spinput{width:140px}

/* ---- forms (quick add) ---- */
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; max-width:760px}
.formgrid .full{grid-column:1 / -1}
textarea{font:inherit; font-size:13px; padding:7px 9px; border:1px solid #CBD5E1;
  border-radius:5px; width:100%; min-height:64px; color:var(--ink)}
textarea:focus{outline:2px solid #9DB8D6; border-color:var(--navy2)}
.savednote{background:#D9EFE6; color:#0B5C43; border:1px solid #A7D8C2;
  padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:16px; max-width:760px}

/* ---- producer-first touches ---- */
.callbtn{display:inline-block; background:var(--green); color:#fff; font-weight:700;
  font-size:12px; padding:4px 12px; border-radius:99px; text-decoration:none}
.callbtn:hover{background:#0B5C43; color:#fff}
a.tel{color:var(--navy2); font-weight:600; text-decoration:none}
a.tel:hover{text-decoration:underline}
.nextup{display:flex; align-items:center; gap:14px; background:#FFF8E6;
  border:1px solid #E7C26A; border-radius:var(--radius); padding:13px 16px; margin-bottom:18px}
.nextup .lb{font-size:11px; text-transform:uppercase; letter-spacing:1.1px; color:var(--amber); font-weight:700}
.nextup .nm{font-size:16px; font-weight:700}
.nextup .mt{color:var(--mut); font-size:12.5px}
.caughtup{background:#EFF7F1; border:1px solid #BFE3CC; color:#0B5C43;
  border-radius:var(--radius); padding:12px 16px; margin-bottom:18px; font-size:13px}
.searchwrap{position:relative}
#globalSearch{width:230px}
#searchResults{position:absolute; right:0; top:34px; width:300px; background:#fff;
  border:1px solid var(--line); border-radius:6px; box-shadow:0 10px 30px rgba(12,30,52,.18);
  display:none; z-index:40; overflow:hidden}
#searchResults .hit{padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--line2)}
#searchResults .hit:last-child{border-bottom:0}
#searchResults .hit:hover{background:#F0F5FB}
#searchResults .hit .s{color:var(--mut); font-size:12px}

/* ---- phone / small screens (producers live on their phones) ---- */
@media (max-width: 980px){
  .shell{flex-direction:column}
  .rail{width:100%; flex:none; height:auto; position:static}
  .rail nav{display:flex; flex-wrap:wrap; gap:2px}
  .rail nav button{width:auto}
  .rail .who{display:none}
  .content{padding:16px 14px 32px}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{border-bottom:1px solid var(--line2)}
  .board{grid-template-columns:1fr}
  .panel{overflow-x:auto}
  .formgrid,.sheet .grid{grid-template-columns:1fr}
  #globalSearch{width:150px}
  .topbar{flex-wrap:wrap}
}