/* VGP Sales Pipeline Dashboard — styles
   Theme mirrors the VGP dashboard family (reference: vgp-cc-live.pages.dev):
   navy / red / green / gold. */
:root{
  --navy:#1E3A5F; --navy2:#274b78; --red:#D34236; --green:#2faa5e; --gold:#e0a92e;
  --ink:#22303f; --muted:#6b7c8f; --line:#e4e9f0; --bg:#f4f6fa; --card:#fff;
  /* stage colors */
  --st-warm:#e0a92e; --st-hot:#D34236; --st-pot:#2B7DE9; --st-closed:#2faa5e;
  --st-other:#9aa7b4;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}

/* header */
.top{background:var(--navy);color:#fff;padding:16px 24px;border-top:4px solid var(--red);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.top h1{font-size:19px;font-weight:700;letter-spacing:.3px}
.top .sub{font-size:12px;opacity:.85;margin-top:2px}
.top .upd{font-size:11px;opacity:.8}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;justify-content:flex-end}
.chip{background:rgba(255,255,255,.15);padding:3px 10px;border-radius:20px;font-size:11px}

.wrap{max-width:1240px;margin:0 auto;padding:20px}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:13px;margin-bottom:22px}
.kpi{background:var(--card);border-radius:12px;padding:15px 16px;box-shadow:0 1px 3px rgba(30,58,95,.08);
  border-left:4px solid var(--navy)}
.kpi.warm{border-left-color:var(--st-warm)} .kpi.hot{border-left-color:var(--st-hot)}
.kpi.pot{border-left-color:var(--st-pot)} .kpi.closed{border-left-color:var(--st-closed)}
.kpi.green{border-left-color:var(--green)} .kpi.gold{border-left-color:var(--gold)}
.kpi .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.kpi .val{font-size:27px;font-weight:800;color:var(--navy);line-height:1.1;margin-top:5px}
.kpi .note{font-size:11px;color:var(--muted);margin-top:3px}

/* section cards */
.card{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 1px 3px rgba(30,58,95,.08);margin-bottom:20px}
.card h2{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* collapsible sections */
.collapser{cursor:pointer;user-select:none}
.collapser .caret{display:inline-block;font-size:11px;color:var(--muted);margin-right:4px}
#pharmBody{margin-top:14px}
.collapsed{display:none}

/* pipeline (hero) */
.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:820px){.pipeline{grid-template-columns:1fr 1fr}}
.stage{position:relative;border-radius:12px;padding:16px;color:#fff;cursor:pointer;
  transition:transform .12s, box-shadow .12s;border:3px solid transparent}
.stage:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(30,58,95,.18)}
.stage.sel{border-color:#fff;box-shadow:0 0 0 3px var(--navy)}
.stage.s-warm{background:linear-gradient(135deg,#e0a92e,#c8901c)}
.stage.s-hot{background:linear-gradient(135deg,#D34236,#a2291d)}
.stage.s-pot{background:linear-gradient(135deg,#2B7DE9,#1c5cad)}
.stage.s-closed{background:linear-gradient(135deg,#2faa5e,#1c7a43)}
.stage .snum{font-size:32px;font-weight:800;line-height:1}
.stage .slbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;opacity:.95;margin-top:4px}
.stage .spct{font-size:12px;opacity:.9;margin-top:2px}
.stage .sarrow{position:absolute;right:-9px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--muted);z-index:2}
@media(max-width:820px){.stage .sarrow{display:none}}
.pipenote{font-size:12px;color:var(--muted);margin-top:12px}
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.clearf{background:var(--navy);color:#fff;border:none;padding:6px 12px;border-radius:7px;font-size:12px;cursor:pointer}
.clearf:hover{background:var(--navy2)}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;
  cursor:pointer;user-select:none;white-space:nowrap}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
th.sortable:hover{color:var(--navy)}
tr:last-child td{border-bottom:none}
.bar{height:8px;border-radius:5px;background:var(--line);overflow:hidden;min-width:50px}
.bar>i{display:block;height:100%;border-radius:5px}

/* pills */
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.p-warm{background:#fdf0dc;color:#8a6410}.p-hot{background:#fbe3e0;color:#a2291d}
.p-pot{background:#e3eefc;color:#1c5cad}.p-closed{background:#e5f6ec;color:#1c7a43}
.p-pend{background:#eef2f7;color:#5c6b7c}.p-no{background:#f0f1f3;color:#7a828c}

/* search / inputs */
.search{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;min-width:220px;flex:1}
.sel{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff}
.tblwrap{overflow-x:auto}
.tblmeta{font-size:12px;color:var(--muted);margin-bottom:8px}

/* Sales Manager KPI cards */
.mgr-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
@media(max-width:900px){.mgr-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mgr-cards{grid-template-columns:1fr}}
.mgr-card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--navy);
  border-radius:12px;padding:14px}
.mgr-card .mgl{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600;min-height:26px}
.mgr-card .mgv{font-size:24px;font-weight:800;color:var(--navy);margin:4px 0 8px}
.mgr-card .mgt{font-size:13px;font-weight:600;color:var(--muted)}
.mgr-card .bar{height:8px}

/* Live Individual Scorecards */
.scorecards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.scorecards{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.scorecards{grid-template-columns:1fr}}
.scard{border:1px solid var(--line);border-radius:12px;padding:14px;border-top:4px solid var(--muted)}
.scard.on{border-top-color:var(--st-closed)} .scard.near{border-top-color:var(--st-warm)} .scard.below{border-top-color:var(--st-hot)}
.schd{display:flex;align-items:baseline;justify-content:space-between}
.scname{font-weight:700;color:var(--navy);font-size:15px}
.sckpi{font-weight:800;font-size:20px;color:var(--navy)}
.scdate{font-size:11px;color:var(--muted);margin:2px 0 10px}
.scline{display:flex;align-items:center;gap:8px;margin-top:6px}
.scline .scl{width:56px;font-size:11px;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.scline .bar{flex:1}
.scmet{font-size:10.5px;color:var(--muted);margin:1px 0 3px 64px;text-transform:uppercase;letter-spacing:.3px}

/* leaderboard badges */
.badge{display:inline-block;padding:1px 7px;border-radius:20px;font-size:10px;font-weight:700;margin-left:4px}
.badge.top{background:#e5f6ec;color:#1c7a43}
.badge.low{background:#fbe6e3;color:#a2291d}

/* Daily Breakdown (month -> day -> rep) */
#brkBody{margin-top:14px}
.mrow{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.mhead{background:var(--navy);color:#fff;font-weight:700}
.dhead{background:#eef2f6;color:var(--ink);font-weight:600}
.bhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;cursor:pointer;user-select:none}
.bhead .caret{font-size:11px;opacity:.85}
.bdays{font-size:11px;opacity:.85;font-weight:500;margin-right:4px}
.mrow.collapsed>.bbody{display:none}
.drow.collapsed>.bbody{display:none}
.mrow>.bbody{padding:8px 12px 4px}
.drow{border:1px solid var(--line);border-radius:8px;margin:8px 0}
.drow>.bbody{padding:6px 12px 10px}
.bpill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.bp-c{background:rgba(255,255,255,.18);color:inherit}
.mhead .bp-c{background:rgba(255,255,255,.22);color:#fff}
.dhead .bp-c{background:#dde5ee;color:#274b78}
.bp-w{background:#fdf0dc;color:#8a6410}.bp-h{background:#fbe3e0;color:#a2291d}.bp-s{background:#e5f6ec;color:#1c7a43}
.bd-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.bd-tbl th,.bd-tbl td{padding:6px 9px;border-bottom:1px solid var(--line);text-align:left}
.bd-tbl th.num,.bd-tbl td.num{text-align:right;font-variant-numeric:tabular-nums}

/* charts */
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.chart-grid{grid-template-columns:1fr}}
.chart-box{position:relative;height:260px}

.foot{text-align:center;color:var(--muted);font-size:11px;padding:16px}
.loading{text-align:center;padding:40px;color:var(--muted)}
.err{text-align:center;padding:20px;color:var(--red);font-weight:600}