/* ==========================================================================
   GetLeadz dashboard
   --------------------------------------------------------------------------
   A restrained, mostly-neutral surface with the brand purple used sparingly:
   on the logo, the active nav item, and the primary action. The reference this
   follows keeps almost everything grey and lets the NUMBERS carry the visual
   weight — a dashboard covered in brand colour makes every figure shout, and
   then none of them do.

   Type: small uppercase tracked labels above large tabular figures. The label
   says what it is once, quietly; the number is what you came to read.
   ========================================================================== */

:root{
  --bg:#f4f4f6;
  --surface:#ffffff;
  --surface-2:#fafafb;
  --border:#e8e6ec;
  --border-strong:#d8d5e0;

  --ink:#15111f;
  --ink-2:#4b4459;
  --ink-3:#8b8496;
  --ink-4:#a9a3b4;

  --accent:#9b3fd6;
  --accent-light:#c471f5;
  --accent-deep:#7e2eb8;
  --accent-ink:#ffffff;
  --accent-tint:#f4ebfd;

  --ok:#0f9d58;
  --ok-tint:#e8f6ee;
  --warn:#b45309;
  --warn-tint:#fdf3e7;
  --miss:#8b8496;

  --r-sm:8px; --r:14px; --r-lg:20px; --r-pill:999px;
  --shadow:0 1px 2px rgba(21,17,31,.04), 0 1px 3px rgba(21,17,31,.03);

  --sidebar-w:238px;
  --f-sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Consolas,monospace;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0e17; --surface:#131826; --surface-2:#0f141f;
    --border:#232a3b; --border-strong:#2f3850;
    --ink:#f2f4f9; --ink-2:#bcc3d4; --ink-3:#8892a6; --ink-4:#6b7488;
    --accent:#b566e8; --accent-deep:#c471f5; --accent-tint:#1d1830;
    --ok:#3ddc84; --ok-tint:#11291d;
    --warn:#f0c98a; --warn-tint:#2b2113;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}

/* The `hidden` attribute must beat any display rule this file sets.
   Without this, `#gate{display:grid}` outranks the user-agent's
   `[hidden]{display:none}` — so hiding the sign-in card after login did
   nothing, and a full-screen overlay at z-index 100 stayed on top of the
   dashboard. Everything toggled by script (#gate, .shell, .req, .mobile-bar)
   sets its own display, so this applies to all of them. */
[hidden]{display:none!important}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--f-sans);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;color:var(--ink);font-weight:800;letter-spacing:-.03em;line-height:1.2}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* Small tracked uppercase label — used above every figure. */
.eyebrow{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);
}

/* Figures are tabular so a changing number does not shift the ones beside it. */
.figure{
  font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1.05;
}
.figure-sm{font-size:24px}

/* ==========================================================================
   SHELL
   ========================================================================== */
.shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:none;background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.sidebar-brand{padding:20px 18px 14px}
.sidebar-brand img{height:34px;width:auto;display:block}

.nav{flex:1;overflow-y:auto;padding:6px 10px}
.nav-group{margin:14px 0 4px;padding:0 8px}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;margin-bottom:1px;border:none;background:none;
  border-radius:var(--r-sm);cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--ink-2);text-align:left;
  transition:background .12s,color .12s;
}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item[aria-current="page"]{background:var(--accent-tint);color:var(--accent-deep);font-weight:700}
.nav-item svg{width:16px;height:16px;flex:none;opacity:.75}
.nav-item[aria-current="page"] svg{opacity:1}

.sidebar-foot{border-top:1px solid var(--border);padding:10px}
.who-row{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r-sm);
}
.who-row .av{
  width:26px;height:26px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:800;
}
.who-row .av img{width:100%;height:100%;object-fit:cover}
.who-row .nm{
  min-width:0;font-size:13px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.icon-btn{
  margin-left:auto;flex:none;width:26px;height:26px;border-radius:6px;
  border:none;background:none;cursor:pointer;color:var(--ink-4);
  display:grid;place-items:center;
}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn svg{width:15px;height:15px}

/* ==========================================================================
   MAIN
   ========================================================================== */
main{flex:1;min-width:0;padding:34px 40px 60px;max-width:1180px}
@media (max-width:900px){
  main{padding:24px 20px 48px}
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:none}
  .shell.has-sidebar main{padding-top:70px}
}

.page-head{margin-bottom:26px}
.page-head h1{font-size:clamp(1.6rem,3.2vw,2.1rem)}
.page-head .sub{margin-top:6px;font-size:14.5px;color:var(--ink-3)}

.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow);
  position:relative;display:flex;flex-direction:column;
}
.card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.card-head .eyebrow{padding-top:2px}
.card-title{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-top:2px}
.card-link{
  margin-left:auto;flex:none;width:22px;height:22px;border-radius:5px;
  display:grid;place-items:center;color:var(--ink-4);
  border:none;background:none;cursor:pointer;
}
.card-link:hover{color:var(--accent-deep);background:var(--accent-tint)}
.card-link svg{width:13px;height:13px}

/* wallet */
.wallet-body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:120px}
.wallet-row{display:flex;align-items:baseline;gap:9px}
.wallet-coin{
  width:22px;height:22px;border-radius:50%;flex:none;align-self:center;
  background:var(--accent-tint);color:var(--accent-deep);
  display:grid;place-items:center;font-size:11px;font-weight:800;
}
.wallet-hint{margin-top:10px;font-size:12.5px;color:var(--ink-3)}
.wallet-low{color:var(--warn);font-weight:600}

/* segmented DAY / WEEK / MONTH */
.seg{
  margin-left:auto;display:inline-flex;gap:2px;padding:3px;flex:none;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);
}
.seg button{
  border:none;background:none;cursor:pointer;border-radius:var(--r-pill);
  padding:4px 11px;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);transition:background .12s,color .12s;
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}

.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.stat .eyebrow{margin-bottom:5px}

/* the little daily bar chart */
.spark{
  margin-top:20px;display:flex;align-items:flex-end;gap:5px;height:66px;
}
.spark-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-width:0}
.spark-bar{
  border-radius:3px 3px 0 0;background:var(--accent);min-height:2px;
  transition:height .25s;
}
.spark-bar.miss{background:var(--border-strong)}
.spark-day{
  margin-top:6px;font-size:9px;font-weight:700;color:var(--ink-4);
  text-align:center;overflow:hidden;white-space:nowrap;
}
.empty-note{
  margin:auto;padding:26px 0;text-align:center;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);
}

/* ==========================================================================
   TABLE
   ========================================================================== */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px}
thead th{
  text-align:left;padding:11px 16px;background:var(--surface-2);
  font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-4);border-bottom:1px solid var(--border);white-space:nowrap;
}
tbody td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
td .mono{font-family:var(--f-mono);font-size:12.5px;color:var(--ink)}
td .muted{color:var(--ink-4)}
.slug-link{font-weight:700;color:var(--ink)}
.slug-link:hover{color:var(--accent-deep);text-decoration:underline}

.pill{
  display:inline-block;padding:2.5px 9px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
.pill-hit{background:var(--ok-tint);color:var(--ok)}
.pill-miss{background:var(--surface-2);color:var(--miss);border:1px solid var(--border)}
.pill-cache{background:var(--accent-tint);color:var(--accent-deep)}
.pill-error{background:var(--warn-tint);color:var(--warn)}

.delta-pos{color:var(--ok);font-weight:800;font-variant-numeric:tabular-nums}
.delta-neg{color:var(--ink-2);font-weight:800;font-variant-numeric:tabular-nums}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--r-pill);border:1.5px solid transparent;
  font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background .14s,border-color .14s,color .14s,transform .14s;
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-deep)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn-block{width:100%}

/* ==========================================================================
   AUTH GATE — full-screen, shown until a session exists
   ========================================================================== */
#gate{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:grid;place-items:center;padding:24px;overflow-y:auto;
}
.gate-card{
  width:100%;max-width:392px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:32px 30px;box-shadow:0 8px 40px rgba(21,17,31,.09);
}
.gate-card img.logo{height:46px;width:auto;display:block;margin:0 auto 20px}
.gate-card h1{font-size:20px;text-align:center}
.gate-card .gate-sub{margin:8px 0 22px;text-align:center;font-size:13.5px;color:var(--ink-3)}

.req{
  display:flex;gap:8px;align-items:flex-start;
  padding:10px 12px;margin-bottom:16px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:12px;line-height:1.5;color:var(--ink-3);
}
.req svg{width:14px;height:14px;flex:none;margin-top:1px;color:var(--accent);opacity:.85}
.req b{color:var(--ink)}

.btn-google{
  width:100%;background:var(--surface);color:var(--ink);
  border:1.5px solid var(--border-strong);
}
.btn-google:hover{border-color:var(--accent);background:var(--surface)}

.divider{
  display:flex;align-items:center;gap:12px;margin:18px 0;
  font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}

.tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;margin-bottom:16px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);
}
.tabs button{
  border:none;background:none;cursor:pointer;border-radius:var(--r-pill);
  padding:8px;font-size:13px;font-weight:700;color:var(--ink-3);
}
.tabs button[aria-selected="true"]{background:var(--accent);color:#fff}

.field{margin-bottom:14px}
.field label{display:block;font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
.field input{
  width:100%;padding:11px 13px;font-family:inherit;font-size:14px;color:var(--ink);
  background:var(--bg);border:1.5px solid var(--border-strong);border-radius:var(--r-sm);
}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(155,63,214,.14)}

.msg{
  padding:11px 13px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.5;
  margin-bottom:14px;
}
.msg-err{background:var(--warn-tint);border:1px solid #f0d9a8;color:var(--warn)}
.msg-ok{background:var(--ok-tint);border:1px solid #a8e3bf;color:var(--ok)}

/* ==========================================================================
   MISC
   ========================================================================== */
.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:sk 1.3s linear infinite;
  border-radius:6px;color:transparent!important;
}
@keyframes sk{to{background-position:-200% 0}}

.spin{
  width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:sp .7s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}

.mobile-bar{
  display:none;position:fixed;top:0;left:0;right:0;z-index:50;
  padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border);
  align-items:center;gap:10px;
}
.mobile-bar img{height:28px;width:auto}
@media (max-width:900px){.mobile-bar{display:flex}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}