/* ============================================================
   SynX Explorer — Redesign Override
   Goal: pure black background, clean thin cyan lines,
         subtle glow, terminal-grade clarity (per ref shot).
   Loaded AFTER the Vite bundle so these rules win.
   ============================================================ */

:root,
[data-theme],
.dark {
  /* Force pure black for every surface */
  --background: 0 0% 0% !important;
  --card: 0 0% 0% !important;
  --popover: 0 0% 0% !important;
  --muted: 0 0% 4% !important;
  --input: 0 0% 3% !important;
  --sidebar-background: 0 0% 0% !important;
  --sidebar-accent: 0 0% 4% !important;

  /* Cleaner cyan — slightly muted, less neon-burn */
  --quantum-cyan: 184 90% 48% !important;
  --quantum-cyan-glow: 184 90% 60% !important;
  --quantum-cyan-bright: 184 95% 75% !important;
  --quantum-border: 184 80% 32% !important;
  --quantum-text: 184 55% 78% !important;
  --quantum-text-dim: 184 30% 55% !important;

  --synx-rune-hot: #e6fbff;
  --synx-rune-mid: #4ad8e6;
  --synx-rune-deep: #0091a8;
  --synx-rune-star: #e6fbff;

  --primary: 184 90% 48% !important;
  --accent: 184 90% 48% !important;
  --border: 184 70% 28% !important;
  --ring: 184 90% 48% !important;
}

html[data-synx-theme="quantum-purple"] {
  --quantum-cyan: 282 92% 62% !important;
  --quantum-cyan-glow: 288 100% 70% !important;
  --quantum-cyan-bright: 270 100% 84% !important;
  --quantum-border: 282 74% 42% !important;
  --quantum-text: 276 62% 82% !important;
  --quantum-text-dim: 276 34% 58% !important;
  --synx-rune-hot: #f7eaff;
  --synx-rune-mid: #c15cff;
  --synx-rune-deep: #6e1dba;
  --synx-rune-star: #f4dcff;
  --primary: 282 92% 62% !important;
  --accent: 288 100% 70% !important;
  --border: 282 70% 34% !important;
  --ring: 282 92% 62% !important;
}

html[data-synx-theme="green-terminal"] {
  --quantum-cyan: 156 88% 44% !important;
  --quantum-cyan-glow: 154 96% 56% !important;
  --quantum-cyan-bright: 145 100% 78% !important;
  --quantum-border: 154 68% 30% !important;
  --quantum-text: 150 56% 78% !important;
  --quantum-text-dim: 150 32% 54% !important;
  --synx-rune-hot: #dcffe9;
  --synx-rune-mid: #27e68e;
  --synx-rune-deep: #007a4c;
  --synx-rune-star: #d6ffe5;
  --primary: 156 88% 44% !important;
  --accent: 154 96% 56% !important;
  --border: 154 64% 28% !important;
  --ring: 156 88% 44% !important;
}

/* ---------- Base surfaces ---------- */
html,
body,
#root {
  background: #000 !important;
}

body {
  font-family: 'JetBrains Mono', 'Cascadia Code', 'Courier New', Consolas, monospace !important;
  color: hsl(var(--quantum-text)) !important;
  letter-spacing: 0.01em;
}

/* Kill the noisy static grain — keep environment calm/black */
body::before {
  opacity: 0 !important;
  animation: none !important;
}

/* Soften the moving scanline — barely visible */
body::after {
  background: linear-gradient(transparent 50%, hsl(var(--quantum-cyan) / 0.018) 50%) !important;
  background-size: 100% 3px !important;
  opacity: 0.4 !important;
  animation-duration: 14s !important;
}

/* ---------- Clean lines, no chunky glow ---------- */
.glow-border-cyan,
[class*="border-primary"],
[class*="border-quantum"] {
  box-shadow: none !important;
}

.glow-border-cyan {
  box-shadow:
    0 0 0 1px hsl(var(--quantum-cyan) / 0.35),
    0 0 12px hsl(var(--quantum-cyan) / 0.08) !important;
}

/* Make every "card" surface flat black with a single hairline border */
[class*="bg-card"],
[class*="bg-background"],
.bg-black\/30,
.bg-black\/80 {
  background-color: #000 !important;
}

/* Thin every border to 1px hairline */
[class*="border-2"] {
  border-width: 1px !important;
}
[class*="border-[3px]"],
[class*="border-4"] {
  border-width: 1px !important;
}

/* Soften text glow — keep readable */
.glow-cyan {
  text-shadow:
    0 0 2px hsl(var(--quantum-cyan) / 0.55),
    0 0 8px hsl(var(--quantum-cyan) / 0.18) !important;
}

/* Section title cyan with a clean centered feel */
h1, h2, h3 {
  letter-spacing: 0.08em;
  color: hsl(var(--quantum-cyan-bright));
}

/* Tables / rows — clean dividers, no fill */
table, tr, td, th {
  background: transparent !important;
}
tr {
  border-bottom: 1px solid hsl(var(--quantum-border) / 0.55) !important;
}
th {
  color: hsl(var(--quantum-text)) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
}

/* Inputs / search bar — flat black with hairline */
input, textarea, select {
  background: #000 !important;
  border: 1px solid hsl(var(--quantum-border)) !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: hsl(var(--quantum-cyan-glow)) !important;
  box-shadow: 0 0 0 1px hsl(var(--quantum-cyan-glow) / 0.5),
              0 0 12px hsl(var(--quantum-cyan-glow) / 0.15) !important;
}

/* Buttons — outlined terminal style */
button {
  background: #000 !important;
}
button:hover {
  background: hsl(var(--quantum-cyan) / 0.12) !important;
}

button[data-synx-theme-button] {
  color: hsl(var(--quantum-text)) !important;
  border-color: hsl(var(--quantum-border) / 0.9) !important;
  box-shadow: none !important;
}

button[data-synx-theme-active="true"] {
  color: hsl(var(--quantum-cyan-bright)) !important;
  border-color: hsl(var(--quantum-cyan-glow) / 0.78) !important;
  background: hsl(var(--quantum-cyan) / 0.13) !important;
  box-shadow:
    0 0 0 1px hsl(var(--quantum-cyan) / 0.34),
    0 0 16px hsl(var(--quantum-cyan) / 0.26) !important;
}

/* ---------- Rune emblem: clean it up ---------- */
/* The RuneGlyph component renders an SVG glyph that is runtime-patched
   (synx-rune-patch.js) into an Othala (ᛟ) + Isa (ᛁ) bindrune. We keep the
   emblem crisp: one hairline outer ring, a multi-tier neon glow on the
   rune itself, and a faint atmospheric halo. */

/* Strip the per-element heavy box-shadows on the orbital rings */
[style*="animation: rotate-3d"] {
  box-shadow: 0 0 0 1px hsl(var(--quantum-cyan) / 0.35) !important;
}

/* Reduce the SVG static-noise haze inside the circle */
svg[style*="static-noise"] {
  opacity: 0.04 !important;
}

/* Kill the blurred cyan halos that bleed inside the ring — interior must
   read as the same black void as the page background. */
.breathing-glow.blur-3xl,
.breathing-glow.blur-2xl,
.breathing-glow.blur-xl {
  opacity: 0 !important;
  background: transparent !important;
}

/* The bright outer circle — clean thin ring with a humming pulse.
   NOTE: NO `inset` shadow — the interior must stay pure black, matching
   the page background. All glow radiates OUTWARD only. */
.flicker-border {
  border-width: 1px !important;
  background: #000 !important;
  box-shadow:
    0 0 0 1px hsl(var(--quantum-cyan) / 0.42),
    0 0 10px hsl(var(--quantum-cyan) / 0.18),
    0 0 26px hsl(var(--quantum-cyan) / 0.08) !important;
  animation: synx-ring-hum 3.6s ease-in-out infinite !important;
}

html[data-synx-theme="green-terminal"] .flicker-border {
  box-shadow:
    0 0 0 1px hsl(var(--quantum-cyan) / 0.48),
    0 0 8px hsl(var(--quantum-cyan) / 0.14),
    0 0 18px hsl(var(--quantum-cyan) / 0.05) !important;
}

html[data-synx-theme="quantum-purple"] .flicker-border {
  box-shadow:
    0 0 0 1px hsl(var(--quantum-cyan) / 0.50),
    0 0 12px hsl(var(--quantum-cyan-glow) / 0.24),
    0 0 30px hsl(var(--quantum-cyan) / 0.10) !important;
}

@keyframes synx-ring-hum {
  0%, 100% {
    box-shadow:
      0 0 0 1px hsl(var(--quantum-cyan) / 0.42),
      0 0 10px hsl(var(--quantum-cyan) / 0.18),
      0 0 26px hsl(var(--quantum-cyan) / 0.08);
  }
  50% {
    box-shadow:
      0 0 0 1px hsl(var(--quantum-cyan) / 0.55),
      0 0 14px hsl(var(--quantum-cyan) / 0.28),
      0 0 34px hsl(var(--quantum-cyan) / 0.12);
  }
}

/* Multi-tier glow stack is baked INTO the SVG itself by synx-rune-patch.js.
   No outer drop-shadow here — it was the main source of cyan bleed into
   the disc interior. The rune glows on its own; the void stays black.

   The three concentric scan rings around the rune are HTML <div>s
   rendered by the React bundle with `rotate-3d-x|y|diagonal` keyframes —
   that's the original "scan" effect and we leave it alone. */
svg[viewBox="0 0 100 100"].breathing-glow {
  filter: none !important;
  animation: none !important;
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #000;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--quantum-border) / 0.75);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--quantum-cyan) / 0.85);
}

/* ---------- Selection ---------- */
::selection {
  background: hsl(var(--quantum-cyan) / 0.45);
  color: #fff;
}