/* Lead Pulse Dashboard — v2 (pixel-polish)
   Notes:
   - This file is intended to be your ONLY stylesheet linked by index.html:  <link rel="stylesheet" href="./styles.css">
   - Uses Figtree (loaded in <head> already)
*/

/* ---------- theme ---------- */
:root{
  /* Topbar */
  --navy-950:#04131d;
  --navy-900:#061b27;
  --navy-850:#072231;
  --navy-800:#0b2a3b;

  /* Page */
  --page:#f4f7fb;
  --card:#ffffff;
  --stroke:#e7edf4;
  --stroke-2:#d9e3ee;

  /* Text */
  --text:#0b1f2c;
  --muted:#5f7284;

  /* Brand */
  --brand:#25c2d1;
  --brand-2:#4fb7c2;

  /* Shadow / radius */
  --r-12:12px;
  --r-16:16px;
  --shadow: 0 12px 26px rgba(8, 22, 32, .08);
  --shadow-soft: 0 8px 18px rgba(8, 22, 32, .06);

  /* Layout */
  --container:1100px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Figtree", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--page);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{color:inherit}
.muted{color:var(--muted)}
.hidden{display:none !important}

/* ---------- header/topbar ---------- */
.topbar{
  background: radial-gradient(1200px 520px at 20% 0%, rgba(37,194,209,.18), transparent 55%),
              linear-gradient(180deg, var(--navy-950), var(--navy-800));
  padding:18px 0 28px;
  color:#fff;
}
.topbar-inner{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  border-bottom: 1px solid #f2f6fb30;
  padding-bottom: 20px;
}
.brand-left{display:flex; flex-direction:column; gap:10px}
.brand-row{display:flex; align-items:center; gap:10px}
.lh-logo{height:45px; width:auto; display:block}
.brand-copy{margin-top:2px}
.brand-copy .title{
  font-weight:800;
  letter-spacing:-.01em;
  font-size:18px;
  line-height:1.1;
}
.brand-copy .subtitle{
  font-weight:600;
  opacity:.9;
  font-size:12px;
  margin-top:4px;
}

/* ---------- controls ---------- */
.controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pill{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}
.pill-icon{
  width:16px;height:16px;object-fit:contain;
  filter: brightness(1.15);
  opacity:.95;
}
.pill select,
.pill input[type="date"]{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  font:inherit;
  font-weight:700;
  font-size:12px;
}
.pill select{
  padding-right:22px;
  min-width:320px;
}
.pill .dash{opacity:.65}
.pill .chev{
  position:absolute;
  right:14px;
  pointer-events:none;
  opacity:.85;
  font-size:12px;
}
.btn{
  border:none;
  border-radius:999px;
  padding:10px 16px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  color:#fff;
  background: rgba(37,194,209,.18);
  border:1px solid rgba(255,255,255,.14);
}
.btn:hover{background-color:#01b1c9;cursor:pointer;}
button:hover {cursor:pointer;}
.link{
  border:none;
  background:transparent;
  color:rgba(255,255,255,.88);
  font:inherit;
  font-weight:700;
  font-size:12px;
  cursor:pointer;
  padding:0;
}
.link:hover{opacity:1; text-decoration:underline}

/* ---------- main layout ---------- */
main{
  width:min(var(--container), calc(100% - 40px));
  margin:-14px auto 40px;
}
.section-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#7b8fa1;
  margin:22px 0 10px;
}

/* ---------- cards ---------- */
.card{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--r-16);
  box-shadow: var(--shadow-soft);
  padding:18px 18px 16px;
}
.card + .card{margin-top:16px}
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.card-title{
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.card-title .muted{
  text-transform:none;
  letter-spacing:0;
  font-weight:800;
  margin-left:4px;
}

/* ---------- KPI row ---------- */
.kpi-row{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:18px;
  margin-top:18px;
}
.kpi{
  padding:18px 20px;
  min-height:92px;
}
.kpi-label{
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#6e8294;
}
.kpi-value{
  font-size:34px;
  line-height:1;
  margin-top:10px;
  font-weight:900;
  letter-spacing:-.02em;
}
.kpi-sub{
  margin-top:6px;
  font-size:12px;
  font-weight:700;
  color:#6e8294;
}

/* ---------- charts ---------- */
canvas{width:100% !important; height:auto !important}
.legend-note{
  font-size:12px;
  font-weight:600;
  margin-top:10px;
  color:#6e8294;
}

/* ---------- 2-col charts row ---------- */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  margin-top:18px;
}

/* ---------- small KPI row ---------- */
.kpi-row-small{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:18px;
  margin-top:18px;
}
.kpi-small{
  padding:16px 20px;
  min-height:76px;
}
.kpi-small .kpi-value{font-size:30px}

/* ---------- tables ---------- */
.table-wrap{overflow:auto; border-radius: var(--r-12); border:1px solid var(--stroke); background:#fff}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:760px;
  font-size:15px;
}
thead th{
  position:sticky;
  top:0;
  background: #f6f9fc;
  color:#6d8193;
  text-align:left;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:11px;
  padding:12px 12px;
  border-bottom:1px solid var(--stroke);
}
tbody td{
  padding:12px 12px;
  border-bottom:1px solid var(--stroke);
  color:#142b3a;
  font-weight:400;
}
tbody tr:hover td{background:#fbfdff}
.badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  background:#fff;
  text-transform:uppercase ;
}
.badge.lead{color: #117569; background: #CCFBEF}
.badge.not-lead{color: #C64542; background: #FEE4E2}
.badge.booked{color: #117569; background: #CCFBEF}
.badge.not-booked{color: #C64542; background: #FEE4E2}
.badge.ungraded{color: #6d8193; background: rgba(37,194,209,.10)}

.pager {padding-top:20px;}
#pagerInfo {padding-bottom:10px;}

/* ---------- footer ---------- */
.footer{
  margin-top:0px;
  padding: 50px 0;
  font-size:11px;
  font-weight:600;
  color:#7a8ea0;
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .pill select{min-width:240px}
  .kpi-row{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .kpi-row-small{grid-template-columns:1fr}
}


/* patch */

/* =========================
   MOCKUP MATCH (for YOUR HTML)
   (index.html has .hero + main.wrap)
========================= */

/* Deeper “mock” navy header palette */
:root{
  --navy-950:#071a3b;
  --navy-900:#0b224f;
  --navy-800:#0c2a62;

  --page:#f2f6fb;
}

/* Header height + background feel */
.topbar{
  padding: 20px 0 110px; /* creates the underlap space */
  background:
    radial-gradient(900px 520px at 76% 60%, rgba(37,194,209,.10), transparent 62%),
    radial-gradient(800px 520px at 18% 12%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-800));
}

/* Make the hero area larger + align like mock */
.hero{
  width: min(var(--container), calc(100% - 40px));
  margin: 28px auto 0;
  padding-left: 8px; /* slight nudge like mock */
}
.hero-title{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.hero-sub{
  margin-top: 10px;
  font-size: 18px;
  font-weight: 650;
  opacity: .92;
}

/* ✅ THIS is the missing piece: pull the cards up into the header */
.wrap{
  margin: -78px auto 56px; /* overlay/underlap */
}

/* Make KPI cards look like they “float” */
.kpi{
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(7, 26, 59, .10);
}
.kpi.top {border-bottom: 5px solid #01b1c9;}

/* Bigger KPI type like mock */
.kpi-label{
  font-size: 12px;
  letter-spacing: .09em;
}
.kpi-value{
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -.03em;
}

/* Slightly larger overall card spacing like mock */
.kpi-row{ gap: 22px; }
.card{
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(7, 26, 59, .10);
}

/* Make the top controls sit more “right” like mock */
.topbar-inner{ align-items: center; }
.pill select{ min-width: 360px; }


/* patch 2 */

/* =========================
   Layout width: 5% gutters
========================= */

/* Replace fixed container behavior with responsive gutters */
:root{
  --container: 1600px;         /* large cap for ultra-wide screens */
  --gutter: 5vw;               /* ~5% on common widths */
}

/* Apply gutters */
.topbar-inner,
.hero,
.wrap{
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
}

/* Slightly more breathing room on very small screens */
@media (max-width: 520px){
  :root{ --gutter: 18px; }
}

/* =========================
   Fix 1: Top KPI cards “underlay” bleed
========================= */

.kpi{
  background: var(--card);     /* force solid surface */
  position: relative;
  overflow: hidden;            /* clip anything behind/inside */
  isolation: isolate;          /* prevents blending with backdrop */
}

/* If you have any gradient applied to KPI cards elsewhere, neutralize it */
.kpi::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--card);
  z-index:-1;
}

/* Add consistent space below KPI row so it matches other modules */
.kpi-row{
  margin-bottom: 18px;
}

/* =========================
   Fix 2: Middle mini KPI cards look wonky
   (follow-ups / missed calls / missed opps)
========================= */

.kpi-row-small{
  margin-top: 18px;
  margin-bottom: 18px;        /* consistent spacing below row */
  gap: 22px;
}

/* Make mini KPIs visually consistent with main KPI cards */
.kpi-small{
  background: var(--card);
  border: 1px solid rgba(227,235,245,.9);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(7, 26, 59, .10);
  padding: 18px 22px;
  min-height: 96px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Match label/value sizing rhythm */
.kpi-small .kpi-label{
  font-size: 12px;
  letter-spacing: .09em;
  margin-bottom: 10px;
}
.kpi-small .kpi-value{
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
}

/* If those three blocks are not using .kpi-small class,
   this also catches any KPI-like card inside that row */
.kpi-row-small > *{
  overflow:hidden;
  isolation:isolate;
}

/* Optional: keep consistent bottom padding inside the section below */
.card{ margin-bottom: 0; }

/* =========================
   Call Details Drawer
========================= */
.drawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2, 10, 24, .52);
  backdrop-filter: blur(2px);
  z-index: 9990;
}
.drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(520px, 92vw);
  background: #fff;
  border-left: 1px solid var(--stroke);
  box-shadow: -18px 0 44px rgba(7, 26, 59, .18);
  transform: translateX(110%);
  transition: transform .22s ease;
  z-index: 9991;
  display: flex;
  flex-direction: column;
}
.drawer.open{ transform: translateX(0); }

body.drawer-open{ overflow: hidden; }

.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--stroke);
}
.drawer-title{
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: 16px;
  color: var(--text);
}
.drawer-close{
  border: 1px solid var(--stroke);
  background: #fff;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-weight: 900;
  cursor: pointer;
}
.drawer-body{
  padding: 16px 18px 18px;
  overflow: auto;
}

.drawer-section{ margin-bottom: 14px; }
.drawer-subtitle{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6d8193;
  margin-bottom: 8px;
}
.drawer-kv{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 10px 12px;
}
.drawer-kv .k{
  color:#6d8193;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.drawer-kv .v{
  font-weight: 650;
  color: #142b3a;
}

.drawer-box{
  border: 1px solid var(--stroke);
  background: #f7fbff;
  border-radius: 14px;
  padding: 12px 12px;
  color: #3a5568;
  font-weight: 600;
  line-height: 1.35;
}
.drawer-actions{
  display:flex;
  gap: 10px;
  margin-top: 14px;
}

.hidden{ display:none !important; }