/* ============================================================================
   Merkava Toolkit — 3.0 "Ops Console" visual system (merkava.css)
   Loaded AFTER each page's inline <style>, so it governs the look via the
   cascade. Pure presentation: no layout/behavior changes. The app is fully
   CSS-variable driven, so refined tokens re-theme every page consistently;
   component rules below target the existing class names for added depth.

   Identity: near-black canvas with a faint blueprint grid, electric cyan
   accents, terminal-style mono headings, glowing status signals.
   ============================================================================ */

/* ---- Design tokens -------------------------------------------------------- */
:root, [data-theme="dark"] {
  --bg:#050607; --surface:#0c0f12; --surface2:#12161b; --surface-elev:#0e1216;
  --border:#1d242c; --border-strong:#2d3742;
  --accent:#22d3ee; --accent-hover:#5ce1f5; --accent-muted:rgba(34,211,238,0.10);
  --accent-grad:linear-gradient(135deg,#22d3ee 0%,#34d399 100%);
  --text:#e8eef2; --text2:#b8c4cd; --muted:#7c8b96;
  --good:#34d399; --good-bg:rgba(52,211,153,0.11);
  --warn:#fbbf24; --warn-bg:rgba(251,191,36,0.11);
  --bad:#fb7185; --bad-bg:rgba(251,113,133,0.11);
  --google:#60a5fa; --google-bg:rgba(96,165,250,0.12);
  --meta:#818cf8; --meta-bg:rgba(129,140,248,0.12);
  --radius:6px; --radius-sm:4px;
  --ring:0 0 0 3px rgba(34,211,238,0.25);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:0 8px 22px -8px rgba(0,0,0,0.65);
  --shadow-lg:0 22px 48px -14px rgba(0,0,0,0.75);
  --glow-accent:0 0 18px rgba(34,211,238,0.30);
  --btn-fg:#04151a; --btn-fg-danger:#23060c;
}
[data-theme="light"] {
  --bg:#f4f7f8; --surface:#ffffff; --surface2:#ebf1f3; --surface-elev:#ffffff;
  --border:#dbe4e8; --border-strong:#bccad1;
  /* Light palette tuned for WCAG AA: every signal color holds >=4.5:1 as small
     text on white/surface (and on its own -bg tint). Don't lighten these. */
  --accent:#0b5e74; --accent-hover:#0e7490; --accent-muted:rgba(11,94,116,0.10);
  --accent-grad:linear-gradient(135deg,#0b5e74 0%,#047857 100%);
  --text:#0c1418; --text2:#33444e; --muted:#566570;
  --good:#047857; --good-bg:rgba(4,120,87,0.11);
  --warn:#b45309; --warn-bg:rgba(180,83,9,0.11);
  --bad:#be123c; --bad-bg:rgba(190,18,60,0.09);
  --google:#2563eb; --google-bg:rgba(37,99,235,0.09);
  --meta:#4f46e5; --meta-bg:rgba(79,70,229,0.09);
  --ring:0 0 0 3px rgba(11,94,116,0.2);
  --shadow-sm:0 1px 2px rgba(12,20,24,0.06), 0 0 0 1px rgba(12,20,24,0.02);
  --shadow-md:0 10px 26px -8px rgba(12,20,24,0.12);
  --shadow-lg:0 24px 50px -14px rgba(12,20,24,0.16);
  --glow-accent:0 4px 14px rgba(14,116,144,0.22);
  --btn-fg:#ffffff; --btn-fg-danger:#ffffff;
}

@keyframes mk-blink { 50% { opacity:0.25; } }

/* ---- Canvas: blueprint grid + signal glow --------------------------------- */
body {
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    linear-gradient(rgba(34,211,238,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.018) 1px, transparent 1px),
    radial-gradient(1000px 550px at 80% -20%, rgba(34,211,238,0.07), transparent 65%),
    var(--bg);
  background-size:36px 36px, 36px 36px, auto, auto;
}
[data-theme="light"] body {
  background:
    linear-gradient(rgba(14,116,144,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,116,144,0.035) 1px, transparent 1px),
    radial-gradient(1000px 550px at 80% -20%, rgba(14,116,144,0.06), transparent 65%),
    var(--bg);
  background-size:36px 36px, 36px 36px, auto, auto;
}

/* ---- Navigation: console header ------------------------------------------- */
.top-nav {
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--surface) 85%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:var(--shadow-sm);
}
/* Gradient hairline along the bottom edge */
.top-nav::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, var(--accent) 0%, transparent 45%);
  opacity:0.55; pointer-events:none;
}
.top-nav-brand { color:var(--accent); font-weight:600; letter-spacing:0.18em; white-space:nowrap; }
.top-nav-brand::after {
  content:"v1.5";
  display:inline-block; margin-left:0.55rem; padding:0.08rem 0.4rem;
  font-size:0.56rem; letter-spacing:0.08em; vertical-align:1px;
  color:var(--muted); background:var(--surface2);
  border:1px solid var(--border); border-radius:999px;
}
.top-nav a.nav-link, .nav-dropdown > summary {
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.05em;
  text-transform:uppercase; white-space:nowrap; border-radius:var(--radius-sm);
  padding-left:0.7rem; padding-right:0.7rem;
  transition:color .16s ease, background .16s ease;
}
.top-nav a.nav-link:hover, .nav-dropdown > summary:hover { background:var(--accent-muted); }
/* Active page: pill highlight instead of the underline */
.top-nav a.nav-link.active {
  background:var(--accent-muted); color:var(--accent);
  border-bottom-color:transparent;
  text-shadow:0 0 14px rgba(34,211,238,0.35);
}
[data-theme="light"] .top-nav a.nav-link.active { text-shadow:none; }
.nav-dropdown-menu { border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:.35rem; }
.nav-dropdown-menu a {
  border-radius:3px; font-family:'JetBrains Mono',monospace; font-size:0.68rem;
  letter-spacing:0.06em; text-transform:uppercase;
}
.btn-sm { border-radius:var(--radius-sm); transition:color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.btn-sm:hover { box-shadow:0 0 12px rgba(34,211,238,0.18); }
.theme-toggle { border-radius:var(--radius-sm); }

/* ---- Terminal headings ----------------------------------------------------- */
h1 {
  font-family:'JetBrains Mono',monospace; text-transform:uppercase;
  letter-spacing:0.04em; font-weight:600;
}
h1::after { content:"_"; color:var(--accent); animation:mk-blink 1.2s step-end infinite; }

/* ---- KPI / stat cards: corner-tick frames ---------------------------------- */
.kpi {
  position:relative; border-radius:var(--radius);
  background:var(--surface-elev); box-shadow:var(--shadow-sm);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.kpi::before, .kpi::after {
  content:""; position:absolute; width:10px; height:10px;
  border-color:var(--accent); border-style:solid; opacity:0.65;
  pointer-events:none; transition:opacity .18s ease;
}
.kpi::before { top:-1px; left:-1px; border-width:2px 0 0 2px; border-radius:2px 0 0 0; }
.kpi::after { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 2px 0; }
.kpi:hover { border-color:var(--border-strong); box-shadow:var(--shadow-md); }
.kpi:hover::before, .kpi:hover::after { opacity:1; }
.kpi-value { font-family:'JetBrains Mono',monospace; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.kpi-label { letter-spacing:0.16em; }

/* ---- Content cards ---------------------------------------------------------- */
.client-card, .card {
  border-radius:var(--radius); background:var(--surface-elev);
  box-shadow:var(--shadow-sm);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.client-card:hover, .card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-md); }

/* ---- Data tables: cyan rail headers ----------------------------------------- */
.spend-table th, .camp-table th, .inc-table th, .dns-table th, .bd-table th, .sources-table th {
  background:var(--surface2); color:var(--accent); letter-spacing:0.12em;
}
.spend-table, .camp-table, .dns-table, .bd-table, .sources-table {
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
}
.spend-table tbody tr:hover td, .camp-table tr:hover td, .inc-table tr:hover td,
.dns-table tr:hover td, .bd-table tr:hover td, .sources-table tr:hover td {
  background:var(--accent-muted);
}
.spend-table tfoot td { background:var(--surface2); }

/* ---- Status / platform pills: square console tags --------------------------- */
.platform-pill, .spend-pill, .pill, .id-pill { border-radius:3px; }

/* Billing status buttons: dark glyphs on the bright dark-theme signal colors;
   light theme's deeper signal colors all need white glyphs for WCAG contrast. */
.status-btn.on-B { color:#04130c; }
.status-btn.on-D { color:#2a060d; }
[data-theme="light"] .status-btn.on-B,
[data-theme="light"] .status-btn.on-P,
[data-theme="light"] .status-btn.on-D { color:#fff; }

/* Active toggles that sit on the accent background (game nav, phone-format
   buttons, link-checker filter chips, billing "Copied" flag): dark theme's
   bright cyan needs dark glyphs — reuse the .btn foreground token. */
.game-nav a.active, .fmt-btn.active, .chip.active { color:var(--btn-fg); }
.spend-table td.copyable.copied::after { color:var(--btn-fg); }

/* Game leaderboard bronze rank: hardcoded #cd7f32 is too pale on white. */
[data-theme="light"] .lb-rank.bronze { color:#92400e; }

/* Public status banner: green-on-green tint needs a deeper green in light. */
[data-theme="light"] .status-banner.operational { color:#065f46; }

/* ---- Status dots: glowing signals ------------------------------------------- */
.dot.up { box-shadow:0 0 10px rgba(52,211,153,0.6); }
.dot.down { box-shadow:0 0 10px rgba(251,113,133,0.7); animation:mk-blink 1.1s step-end infinite; }

/* ---- Buttons ----------------------------------------------------------------- */
/* Button foreground comes from per-theme tokens (--btn-fg / --btn-fg-danger)
   so variant rules below stay at equal specificity and later-in-file wins in
   BOTH themes. Never use a theme-scoped selector to recolor .btn text — its
   higher specificity bled white text onto outline/secondary buttons. */
.btn {
  font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:0.06em;
  font-weight:600; border:0; border-radius:var(--radius-sm);
  background:var(--accent); color:var(--btn-fg);
  box-shadow:var(--glow-accent);
  transition:background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.btn:hover { background:var(--accent-hover); color:var(--btn-fg); transform:translateY(-1px);
  box-shadow:0 0 24px rgba(34,211,238,0.4); }
[data-theme="light"] .btn:hover { box-shadow:0 6px 18px rgba(14,116,144,0.3); }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text2); box-shadow:none; }
.btn-outline:hover { background:var(--accent-muted); border-color:var(--accent); color:var(--accent);
  transform:translateY(-1px); box-shadow:none; }
.btn-danger { background:var(--bad); color:var(--btn-fg-danger); }
.btn-danger:hover { background:var(--bad); color:var(--btn-fg-danger); filter:brightness(1.08); box-shadow:0 0 18px rgba(251,113,133,0.35); }
/* Variant guards — same specificity as .btn, declared after so they win:
   keep the Google sign-in button white and secondary buttons neutral. */
.btn-google, .btn-google:hover {
  background:#fff; color:#333; border:1px solid #ddd; box-shadow:none; transform:none;
  font-family:'Inter',sans-serif; text-transform:none; letter-spacing:0; font-weight:500;
}
.btn-google:hover { background:#f5f5f5; }
.btn-secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border); box-shadow:none; }
.btn-secondary:hover { background:var(--surface); color:var(--accent); border-color:var(--accent); box-shadow:none; transform:none; }
.btn:disabled, .btn[disabled] { transform:none; box-shadow:none; }
[data-theme="light"] .btn-sm:hover { box-shadow:0 2px 8px rgba(14,116,144,0.18); }

/* ---- Inputs ------------------------------------------------------------------- */
.search-input, .form-group input, input[type="text"], input[type="password"],
input[type="email"], input[type="url"], input[type="number"], input[type="month"], textarea, select {
  border-radius:var(--radius-sm);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.search-input:focus, .form-group input:focus, input[type="text"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="url"]:focus, input[type="number"]:focus,
input[type="month"]:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--accent); box-shadow:var(--ring);
}

/* ---- Modals -------------------------------------------------------------------- */
.modal { border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.modal-bg { backdrop-filter:blur(3px); }

/* ---- Tabs ------------------------------------------------------------------------ */
.tab { transition:color .15s ease, border-color .15s ease, background .15s ease; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.tab:hover { background:var(--accent-muted); }
.tab.active { text-shadow:0 0 14px rgba(34,211,238,0.45); }
[data-theme="light"] .tab.active { text-shadow:none; }

/* ---- Loading ----------------------------------------------------------------------- */
.spinner { border-color:var(--border); border-top-color:var(--accent); }

/* ---- Login page --------------------------------------------------------------------- */
.login-card, .login-box, .auth-card { border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.login-page {
  background:
    linear-gradient(rgba(34,211,238,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,0.02) 1px, transparent 1px),
    radial-gradient(900px 520px at 50% -12%, rgba(34,211,238,0.13), transparent 70%),
    var(--bg);
  background-size:36px 36px, 36px 36px, auto, auto;
}
[data-theme="light"] .login-page {
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(14,116,144,0.10), transparent 70%),
    var(--bg);
}
.login-page .card { box-shadow:var(--shadow-lg); }

/* ---- Global polish --------------------------------------------------------------------- */
::selection { background:var(--accent); color:#04151a; }
[data-theme="light"] ::selection { color:#fff; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:none; box-shadow:var(--ring);
}
.btn:active, .btn-sm:active, .btn-outline:active, .nav-link:active, .tab:active { transform:translateY(0) scale(.985); }

/* Themed scrollbars (dark-friendly) */
* { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); background-clip:content-box; }

/* Respect users who opt out of motion */
@media (prefers-reduced-motion: reduce) {
  .top-nav-brand::before, h1::after, .dot.down { animation:none; }
}