/* ─────────────────────────────────────────────────────────────────────
   Blackbird client portal — shared theme
   Dark "terminal / signal" aesthetic aligned with blackbirdseo.com:
   Space Grotesk (display) + Courier Prime (mono), green hairlines + glow.

   Per client direction (2026-06-27): keep the official dark terminal feel,
   but the two colours that hurt data legibility are changed —
   (1) the murky green-black canvas (#020806) → a cleaner neutral near-black
       with clear layer separation, and
   (2) neon green is no longer used for DATA — numbers/values read in near-white;
       green survives only as a restrained accent (active nav, radar, focal
       border, glow) and as the brand hairline thread.

   Defines BOTH legacy variable names used by older client pages
   (--bg / --panel / --fg / --accent / --border …) AND newer semantic names
   (--paper / --ink / --line …) so a page re-skins by linking this file and
   dropping its own :root + chrome rules. Semantic note: --ink / --fg mean
   "primary text" (light on this dark canvas); --paper / --bg mean "canvas".
   ──────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Courier+Prime:wght@400;700&display=swap');

:root {
  /* Tell the UA to render native widgets (select popups, date/number
     spinners, scrollbars, form controls) in dark mode. */
  color-scheme: dark;

  /* Canvas + surfaces — neutral near-black, lifted for contrast */
  --paper:    #0E1014;  --bg:      #0E1014;
  --panel:    #171A20;
  --card:     #1B1F26;  /* primary surface */
  --card-alt: #20242C;  --panel-2: #20242C;
  --card-hi:  #262B34;

  /* Text — official tokens (high contrast on the lifted dark) */
  --ink:   #F3F8F4;  --fg: #F3F8F4;   /* headings + data values */
  --body:  #E6EFE8;
  --muted: #8B9C91;
  --faint: #5F7068;  --dim: #5F7068;

  /* Green hairline thread + glow (brand) */
  --line:      rgba(31,176,94,0.22);  --border: rgba(31,176,94,0.22);
  --line-soft: rgba(31,176,94,0.11);
  --glow:      0 0 24px rgba(61,188,138,0.18);

  /* Restrained green accent (interactive / structural only — never on data) */
  --accent:      #3DBC8A;
  --accent-deep: #2CA877;
  --accent-soft: rgba(61,188,138,0.13);
  --accent-2:    #3DBC8A;
  --warning:     #E0A33E;  --warn: #E0A33E;
  --danger:      #E5645A;

  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono:    "Courier Prime", "Courier New", ui-monospace, Menlo, monospace;

  --r-card: 10px;
  --r-pill: 999px;
  --shadow:    0 1px 2px rgba(0,0,0,0.40);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.50);
}

/* ── Base ───────────────────────────────────────────────────────────── */
body {
  font: 400 14px/1.55 var(--mono);
  background: var(--bg);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.eyebrow {
  font: 400 11px/1 var(--mono);
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted);
}

/* ── Topbar / brand / nav ───────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(14,16,20,0.84);
  backdrop-filter: blur(9px);
  position: sticky; top: 0; z-index: 20;
}
.brand { font: 600 17px/1 var(--display); color: var(--ink); letter-spacing: 0.005em; }
.brand-lockup { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 22px; height: 22px; flex: none; color: var(--accent); filter: drop-shadow(0 0 6px rgba(61,188,138,0.45)); }
.brand-word { font: 600 17px/1 var(--display); letter-spacing: 0.005em; color: var(--ink); }
.brand-tag {
  font: 400 9px/1 var(--mono); letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--faint); align-self: flex-end; padding-bottom: 2px;
}
.nav { display: flex; gap: 2px; margin-left: 30px; }
.nav a {
  color: var(--muted); text-decoration: none;
  padding: 7px 13px; border-radius: 7px; font: 400 13px var(--mono);
  transition: color 0.14s, background 0.14s;
}
.nav a:hover { color: var(--ink); background: rgba(61,188,138,0.08); }
.nav a.active { color: var(--accent); background: rgba(61,188,138,0.10); }
.who { color: var(--body); font-size: 13px; margin-right: 12px; text-decoration: none; cursor: pointer; transition: color 0.14s; }
a.who:hover { color: var(--accent); }
.logout {
  background: transparent; border: 1px solid var(--line);
  color: var(--body); padding: 7px 14px; border-radius: 8px;
  cursor: pointer; font: 400 13px var(--mono);
  transition: border-color 0.14s, color 0.14s, box-shadow 0.14s;
}
.logout:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  padding: 9px 16px; border-radius: 7px; font: 400 13px var(--mono); cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border: 1px solid var(--accent); color: #0B0E0C; font-weight: 700; }
.btn-primary:hover { background: var(--accent-deep); color: #0B0E0C; }
.btn-primary:disabled { background: var(--card-alt); border-color: var(--line); color: var(--muted); cursor: not-allowed; }

/* ── Pills ──────────────────────────────────────────────────────────── */
.pill {
  display: inline-block; padding: 2px 9px; font: 400 11px var(--mono);
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--card-alt); color: var(--muted);
}
.pill.urgency-emergency, .pill.urgency-asap, .pill.urgency-urgent {
  color: var(--danger); border-color: rgba(229,100,90,0.4); background: rgba(229,100,90,0.08);
}
.pill.urgency-high { color: var(--warn); border-color: rgba(224,163,62,0.4); background: rgba(224,163,62,0.08); }
.pill.lead-call { color: var(--muted); border-color: var(--line); }

/* ── States ─────────────────────────────────────────────────────────── */
.empty, .placeholder {
  padding: 34px; text-align: center; color: var(--muted); font-size: 13px;
  background: var(--card); border: 1px dashed var(--line); border-radius: 8px;
}
.loading { text-align: center; padding: 90px 24px; color: var(--muted); font: 400 13px var(--mono); letter-spacing: 0.06em; }
.errbox {
  margin: 24px; padding: 16px 18px;
  background: rgba(229,100,90,0.08);
  border: 1px solid rgba(229,100,90,0.32);
  border-radius: 8px; color: var(--danger); font-size: 13px;
}

/* ── Standalone auth pages (register / forgot / reset / prospect-register) ── */
body.auth { display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; }
.auth .bg-radar { position: fixed; inset: 0; margin: auto; width: 720px; height: 720px; pointer-events: none; z-index: 0; color: var(--accent); }
.auth .bg-radar circle { fill: none; stroke: currentColor; stroke-width: 0.5; opacity: 0.07; }
.auth .bg-radar .ping { transform-origin: center; opacity: 0; animation: lr-ping 6s ease-out infinite; }
.auth .bg-radar .ping.b { animation-delay: 2s; }
.auth .bg-radar .ping.c { animation-delay: 4s; }
@keyframes lr-ping { 0% { transform: scale(0.1); opacity: 0.18; } 70% { opacity: 0.04; } 100% { transform: scale(1); opacity: 0; } }
.auth .card {
  position: relative; z-index: 1; width: 100%; max-width: 392px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 34px 30px; box-shadow: 0 16px 50px rgba(0,0,0,0.55), var(--glow);
}
.auth .login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.auth .login-brand .brand-mark { width: 26px; height: 26px; }
.auth h1 { font: 600 22px/1.1 var(--display); color: var(--ink); margin: 0 0 4px; }
.auth .sub { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.auth label { display: block; font: 400 11px/1 var(--mono); color: var(--muted); margin: 16px 0 7px; text-transform: uppercase; letter-spacing: 0.12em; }
.auth input, .auth select {
  width: 100%; padding: 11px 12px; background: var(--card-alt);
  border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: 400 14px var(--mono);
}
.auth input:focus, .auth select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Kill Chrome's light-blue autofill background site-wide (login/register/
   profile etc.). Repaint the field with the dark surface + light text. */
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--card-alt) inset;
  box-shadow: 0 0 0 1000px var(--card-alt) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;
}
.auth button[type="submit"], .auth button.primary, .auth .auth-submit {
  width: 100%; margin-top: 22px; padding: 12px 14px; background: var(--accent);
  border: 0; border-radius: 7px; color: #0B0E0C; font: 700 14px var(--mono); cursor: pointer; transition: background 0.14s;
}
.auth button[type="submit"]:hover, .auth button.primary:hover, .auth .auth-submit:hover { background: var(--accent-deep); }
.auth button:disabled { opacity: 0.6; cursor: not-allowed; }
.auth .err { margin-top: 14px; padding: 10px 12px; background: rgba(229,100,90,0.10); border: 1px solid rgba(229,100,90,0.35); border-radius: 7px; color: var(--danger); font-size: 13px; display: none; }
.auth .err.show { display: block; }
.auth .ok { margin-top: 14px; padding: 12px 14px; background: var(--accent-soft); border: 1px solid rgba(61,188,138,0.35); border-radius: 7px; color: var(--accent); font-size: 13px; line-height: 1.6; display: none; }
.auth .ok.show { display: block; }
.auth .footer { position: relative; margin-top: 24px; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.7; }
.auth .footer a { color: var(--muted); text-decoration: none; }
.auth .footer a:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .auth .bg-radar .ping { animation: none; opacity: 0.05; transform: none; } }