/* ============================================================
   Hunter Platform — design system
   "Refined dark" / intelligence-product look.

   One shared stylesheet, used on every page. Principles:
     • Neutral, subtly-layered surfaces (no saturated navy).
     • ONE accent (interactive + brand). No neon, no glow.
     • Hairline borders + soft real depth for separation.
     • Confident typography; monospace for figures/IDs.
     • Status colours are muted and used sparingly.

   Older pages reference --pg-* tokens / pg-* classes; those are kept
   as aliases so they inherit this system automatically.
   ============================================================ */

:root {
  /* ── Surfaces — deep cool charcoal, layered ─────────────── */
  --bg:         #0a0e15;   /* app background          */
  --surface-1:  #111722;   /* nav, base panels        */
  --surface-2:  #161d2a;   /* raised cards            */
  --surface-3:  #1c2434;   /* hover / active surface  */
  --overlay:    rgba(8,11,18,0.72);

  /* ── Borders — hairline ─────────────────────────────────── */
  --border:     #1f2735;
  --border-2:   #2a3344;

  /* ── Text ───────────────────────────────────────────────── */
  --text-1:     #e8ebf1;   /* primary       */
  --text-2:     #98a2b1;   /* secondary     */
  --text-3:     #626c7b;   /* faint / muted */

  /* ── Single accent (interactive / brand) ────────────────── */
  --accent:        #4f8dfb;
  --accent-hover:  #6ea2ff;
  --accent-press:  #3a78ec;
  --accent-fg:     #ffffff;
  --accent-soft:   rgba(79,141,251,0.12);
  --accent-line:   rgba(79,141,251,0.32);

  /* ── Semantic (muted; status only) ──────────────────────── */
  --success:      #41b883;
  --success-soft: rgba(65,184,131,0.13);
  --warning:      #d8a33b;
  --warning-soft: rgba(216,163,59,0.13);
  --danger:       #e0685f;
  --danger-soft:  rgba(224,104,95,0.13);
  --info:         var(--accent);

  /* ── Geometry / type ────────────────────────────────────── */
  --radius:     4px;
  --radius-sm:  2px;
  --radius-lg:  6px;
  --ring:       0 0 0 3px var(--accent-soft);
  --shadow-1:   0 1px 2px rgba(0,0,0,0.30);
  --shadow-2:   0 4px 16px -6px rgba(0,0,0,0.45);
  --shadow-3:   0 16px 40px -12px rgba(0,0,0,0.55);

  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;

  /* ── Back-compat aliases (do not remove — older pages use these) ── */
  --pg-bg-deep:        var(--bg);
  --pg-bg-panel:       var(--surface-1);
  --pg-bg-soft:        var(--surface-2);
  --pg-border:         var(--border);
  --pg-brand:          var(--accent);
  --pg-brand-rgb:      79,141,251;
  --pg-primary:        var(--accent);
  --pg-primary-hover:  var(--accent-hover);
  --pg-primary-border: var(--accent);
  --pg-primary-rgb:    79,141,251;
  --pg-text-light:     var(--text-1);
  --pg-text-mid:       var(--text-2);
  --pg-text-faint:     var(--text-3);
  --pg-focus:          var(--accent);
}

html { color-scheme: dark; }

body.pg-dark,
body.hunter-app {
  background-color: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
}

/* Numbers, IDs, money, timestamps — tabular monospace reads premium. */
.font-data, .pg-stat-value, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::selection { background: var(--accent-soft); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* Slim, unobtrusive scrollbars (WebKit) */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #36425a; background-clip: content-box; }

/* ── Box geometry: crisp, squared corners (the "engineered" look) ─────────
   The platform mixes the theme radius tokens with raw Tailwind rounded-*
   utilities, so square BOTH centrally. Scoped to the app body classes so it
   only touches Hunter pages. rounded-full (pills, avatars, toggles) is left
   alone — those are meant to be round. */
body.pg-dark .rounded-sm, body.pg-dark .rounded, body.pg-dark .rounded-md,
body.hunter-app .rounded-sm, body.hunter-app .rounded, body.hunter-app .rounded-md {
  border-radius: 2px !important;
}
body.pg-dark .rounded-lg, body.pg-dark .rounded-xl, body.pg-dark .rounded-2xl, body.pg-dark .rounded-3xl,
body.hunter-app .rounded-lg, body.hunter-app .rounded-xl, body.hunter-app .rounded-2xl, body.hunter-app .rounded-3xl {
  border-radius: 4px !important;
}

/* Crisp machined top-edge on the main panel/card surfaces — a 1px inner
   highlight that, with the square corners, reads as a deliberate engineered
   panel rather than a generic rounded card. */
.pg-panel, .pg-card, .card-surface, .stat-card, .settings-card, .help-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

/* ══════════════════════════════════════════════════════════════════════════
   LEGACY-UTILITY COMPATIBILITY LAYER

   The platform mixes design tokens / component classes (.pg-panel, .pg-btn,
   .app-input, var(--surface-1)…) with raw Tailwind slate/cyan utilities — the
   latter also baked into JS-generated DOM the restyle pass couldn't reach.
   Rather than rewrite every page + every template literal, we normalise the
   legacy utilities onto the tokens here, scoped to the app body. Result:
   new code may use EITHER a token/component class OR a raw utility and still
   render on-system. This is the single source of truth for the box look.

   Notes:
   • Only LIGHT slate text (100–600) is remapped. Dark slate text (700–950)
     is left alone — it's used as dark-on-light (print sheets, coloured pills).
   • Neon cyan/sky is retired to the single accent blue everywhere.
   • Translucent slate bg/border opacity variants are left as-is: at reduced
     alpha the slate↔surface hue gap is imperceptible.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Surfaces (solid slate → surface scale) ── */
:is(body.pg-dark,body.hunter-app) .bg-slate-950 { background-color: var(--bg) !important; }
:is(body.pg-dark,body.hunter-app) .bg-slate-900 { background-color: var(--surface-1) !important; }
:is(body.pg-dark,body.hunter-app) .bg-slate-800 { background-color: var(--surface-2) !important; }
:is(body.pg-dark,body.hunter-app) .bg-slate-700 { background-color: var(--surface-3) !important; }
:is(body.pg-dark,body.hunter-app) .bg-slate-600 { background-color: var(--surface-3) !important; }

/* ── Borders (solid slate → border tokens) ── */
:is(body.pg-dark,body.hunter-app) .border-slate-800 { border-color: var(--border) !important; }
:is(body.pg-dark,body.hunter-app) .border-slate-700 { border-color: var(--border-2) !important; }
:is(body.pg-dark,body.hunter-app) .border-slate-600 { border-color: var(--border-2) !important; }
:is(body.pg-dark,body.hunter-app) .border-slate-500 { border-color: var(--border-2) !important; }
:is(body.pg-dark,body.hunter-app) .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

/* ── Text (light slate → text tokens; dark slate left for dark-on-light) ── */
:is(body.pg-dark,body.hunter-app) .text-slate-100 { color: var(--text-1) !important; }
:is(body.pg-dark,body.hunter-app) .text-slate-200 { color: var(--text-1) !important; }
:is(body.pg-dark,body.hunter-app) .text-slate-300 { color: var(--text-2) !important; }
:is(body.pg-dark,body.hunter-app) .text-slate-400 { color: var(--text-2) !important; }
:is(body.pg-dark,body.hunter-app) .text-slate-500 { color: var(--text-3) !important; }
:is(body.pg-dark,body.hunter-app) .text-slate-600 { color: var(--text-3) !important; }
:is(body.pg-dark,body.hunter-app) .placeholder-slate-500::placeholder,
:is(body.pg-dark,body.hunter-app) .placeholder-slate-600::placeholder,
:is(body.pg-dark,body.hunter-app) .placeholder-slate-700::placeholder { color: var(--text-3) !important; }

/* ── Retire neon cyan / sky → single accent blue ── */
:is(body.pg-dark,body.hunter-app) .text-cyan-100 { color: #b9d0ff !important; }
:is(body.pg-dark,body.hunter-app) .text-cyan-200,
:is(body.pg-dark,body.hunter-app) .text-cyan-300,
:is(body.pg-dark,body.hunter-app) .text-sky-300 { color: #8ab8ff !important; }
:is(body.pg-dark,body.hunter-app) .text-cyan-400,
:is(body.pg-dark,body.hunter-app) .text-cyan-500,
:is(body.pg-dark,body.hunter-app) .text-sky-400 { color: var(--accent) !important; }
:is(body.pg-dark,body.hunter-app) .bg-cyan-400,
:is(body.pg-dark,body.hunter-app) .bg-cyan-500,
:is(body.pg-dark,body.hunter-app) .bg-cyan-600,
:is(body.pg-dark,body.hunter-app) .bg-cyan-700 { background-color: var(--accent) !important; }
:is(body.pg-dark,body.hunter-app) .bg-cyan-900,
:is(body.pg-dark,body.hunter-app) .bg-cyan-600\/20,
:is(body.pg-dark,body.hunter-app) .bg-cyan-600\/30,
:is(body.pg-dark,body.hunter-app) .bg-cyan-700\/10,
:is(body.pg-dark,body.hunter-app) .bg-cyan-700\/30,
:is(body.pg-dark,body.hunter-app) .bg-cyan-500\/20,
:is(body.pg-dark,body.hunter-app) .bg-cyan-900\/20,
:is(body.pg-dark,body.hunter-app) .bg-cyan-900\/30,
:is(body.pg-dark,body.hunter-app) .bg-cyan-900\/40,
:is(body.pg-dark,body.hunter-app) .bg-cyan-900\/50 { background-color: var(--accent-soft) !important; }
:is(body.pg-dark,body.hunter-app) [class*="border-cyan-"],
:is(body.pg-dark,body.hunter-app) [class*="border-sky-"] { border-color: var(--accent-line) !important; }
:is(body.pg-dark,body.hunter-app) .accent-cyan-500 { accent-color: var(--accent) !important; }
:is(body.pg-dark,body.hunter-app) [class*="ring-cyan-"] { --tw-ring-color: var(--accent) !important; }

.section-max { max-width: 100rem; margin-left: auto; margin-right: auto; }
:target { scroll-margin-top: 6rem; }

.pg-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,14,21,0.92), rgba(10,14,21,0.35)),
    radial-gradient(circle at 30% 35%, rgba(10,14,21,0.40), rgba(10,14,21,0.88));
}
.pg-accent { color: var(--accent); }

/* ── Buttons ──────────────────────────────────────────────── */
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-weight: 550; border-radius: var(--radius-sm);
  padding: 0.5rem 0.95rem; font-size: 0.8125rem; line-height: 1.1;
  border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: background-color .16s, color .16s, border-color .16s, box-shadow .16s, transform .12s;
}
.pg-btn:active { transform: translateY(0.5px); }
.pg-btn:disabled { opacity: .5; pointer-events: none; }

.pg-btn-primary {
  background: var(--accent); color: var(--accent-fg);
  border-color: var(--accent);
}
.pg-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pg-btn-primary:active { background: var(--accent-press); }

.pg-btn-outline {
  background: transparent; color: var(--text-1);
  border-color: var(--border-2);
}
.pg-btn-outline:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

.pg-btn-subtle {
  background: var(--surface-2); color: var(--text-2); border-color: var(--border);
}
.pg-btn-subtle:hover { background: var(--surface-3); color: var(--text-1); border-color: var(--border-2); }

.pg-btn-ghost { background: transparent; color: var(--text-2); border-color: transparent; }
.pg-btn-ghost:hover { background: rgba(255,255,255,0.05); color: var(--text-1); }

.pg-btn-danger { background: transparent; color: var(--danger); border-color: var(--danger-soft); }
.pg-btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }

/* ── Panels & cards ───────────────────────────────────────── */
.pg-panel, .card-surface {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pg-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

/* ── Stat cards — restrained, no lift/glow ────────────────── */
.pg-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  transition: border-color .2s, background-color .2s;
}
.pg-stat:hover { border-color: var(--border-2); background: var(--surface-3); }
.pg-stat-value {
  font-size: 2rem; line-height: 1.05; font-weight: 650;
  letter-spacing: -0.02em; color: var(--text-1);
}
.pg-stat-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); font-weight: 600;
}
@media (min-width: 640px) { .pg-stat-value { font-size: 2.25rem; } }

/* ── Inputs ───────────────────────────────────────────────── */
.app-input {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-1);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.app-input::placeholder { color: var(--text-3); }
.app-input:focus { outline: none; border-color: var(--accent-line); box-shadow: var(--ring); }

/* ── Status pills ─────────────────────────────────────────── */
.pg-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.7rem; font-weight: 600; line-height: 1;
  padding: 0.28rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--text-2); background: var(--surface-2);
}
.pg-badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .9; }
.pg-badge-accent  { color: var(--accent);  background: var(--accent-soft);  border-color: var(--accent-line); }
.pg-badge-success { color: var(--success); background: var(--success-soft); border-color: transparent; }
.pg-badge-warning { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.pg-badge-danger  { color: var(--danger);  background: var(--danger-soft);  border-color: transparent; }
.pg-badge-muted   { color: var(--text-3); }
.pg-badge-muted::before { display: none; }

/* ── Tables ───────────────────────────────────────────────── */
.pg-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.pg-table thead th {
  text-align: left; font-weight: 600; color: var(--text-3);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border);
}
.pg-table tbody td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border); color: var(--text-1); }
.pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-table tbody tr { transition: background-color .12s; }
.pg-table tbody tr:hover { background: var(--surface-3); }

/* ── Active nav highlight ─────────────────────────────────── */
.pg-nav-active { color: var(--text-1) !important; position: relative; }
.pg-nav-active::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: -0.55rem;
  height: 2px; background: var(--accent); border-radius: 2px;
}

/* ── App header / primary nav ─────────────────────────────── */
.hunter-header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.hunter-nav-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.72rem; border-radius: var(--radius-sm);
  font-size: 0.8125rem; font-weight: 500; color: var(--text-2);
  white-space: nowrap; cursor: pointer; background: transparent; border: 0;
  transition: color .15s, background-color .15s;
}
.hunter-nav-link:hover { color: var(--text-1); background: rgba(255,255,255,0.055); }
.hunter-nav-link.is-active { color: var(--text-1); background: rgba(255,255,255,0.08); }
.hunter-nav-caret { width: 0.7rem; height: 0.7rem; opacity: .6; }

/* Dropdown menus — solid, elevated, lightly frosted (premium) */
.hunter-dropdown {
  background: rgba(22,29,42,0.97);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: 0.3rem;
  min-width: 12rem;
}
.hunter-dd-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.65rem; border-radius: var(--radius-sm);
  font-size: 0.8125rem; color: var(--text-2);
  transition: color .15s, background-color .15s;
}
.hunter-dd-item:hover { color: var(--text-1); background: rgba(255,255,255,0.06); }
.hunter-dd-item .ic { color: var(--text-3); }
.hunter-dd-label {
  padding: 0.45rem 0.65rem 0.3rem; font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-3);
}
.hunter-dd-sep { height: 1px; background: var(--border); margin: 0.3rem 0.25rem; }

/* User chip */
.hunter-user-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.32rem 0.55rem 0.32rem 0.4rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-1); font-size: 0.8125rem; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.hunter-user-chip:hover { border-color: var(--border-2); background: var(--surface-3); }
.hunter-user-avatar {
  width: 1.4rem; height: 1.4rem; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.7rem;
}
.hunter-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--radius-sm);
  color: var(--text-2); background: transparent; border: 0; cursor: pointer;
  transition: color .15s, background-color .15s;
}
.hunter-icon-btn:hover { color: var(--text-1); background: rgba(255,255,255,0.06); }
.hunter-nav-div { width: 1px; height: 1.4rem; background: var(--border); margin: 0 0.35rem; }

/* ── Leaflet dark overrides (map popups) ──────────────────── */
.leaflet-popup-content-wrapper {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-2);
  border-radius: var(--radius) !important;
  padding: 0; overflow: hidden;
  box-shadow: var(--shadow-3) !important;
}
.leaflet-popup-content { margin: 0 !important; width: 320px !important; color: var(--text-1); line-height: 1.5; }
.leaflet-popup-tip { background: var(--surface-2) !important; border-left: 1px solid var(--border-2); border-top: 1px solid var(--border-2); }
.leaflet-container a.leaflet-popup-close-button {
  color: var(--text-2) !important; font-size: 20px !important; top: 8px !important; right: 8px !important; transition: color 0.2s;
}
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--text-1) !important; }

/* Map controls (zoom + layer switcher) restyled for the dark intelligence
   basemap — no more white default chrome. */
.leaflet-bar {
  border: 1px solid var(--border-2) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-2) !important;
  overflow: hidden;
}
.leaflet-bar a,
.leaflet-control-zoom a {
  background: rgba(17,23,34,0.92) !important;
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(8px);
  transition: color .15s, background-color .15s;
}
.leaflet-bar a:hover,
.leaflet-control-zoom a:hover { background: var(--surface-3) !important; color: var(--text-1) !important; }
.leaflet-bar a.leaflet-disabled { color: var(--text-3) !important; background: rgba(17,23,34,0.6) !important; }
.leaflet-control-layers {
  background: rgba(22,29,42,0.97) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-3) !important;
  color: var(--text-2);
  backdrop-filter: blur(14px) saturate(1.25);
}
.leaflet-control-layers-toggle {
  background-color: rgba(17,23,34,0.92) !important;
  border-radius: var(--radius-sm) !important;
}
.leaflet-control-layers-expanded { padding: 0.5rem 0.65rem !important; }
.leaflet-control-layers label { color: var(--text-1); font-size: 0.8125rem; margin: 0.15rem 0; }
.leaflet-control-layers-separator { border-top: 1px solid var(--border) !important; }
.leaflet-control-attribution {
  background: rgba(10,14,21,0.72) !important;
  color: var(--text-3) !important;
  border-top-left-radius: var(--radius-sm);
}
.leaflet-control-attribution a { color: var(--text-2) !important; }
/* Soften the seams between vector tiles on the dark basemap. */
.leaflet-tile-pane { filter: saturate(1.05) contrast(1.02); }