/* AAA Exchange Style Overrides */
/* Define color variables for the dark trading‑desk aesthetic */
:root {
  /* Refine the dark palette: push the base even closer to true black for a premium feel. */
  --bg-color: #00060e;
  --card-bg: #0a1118;
  --border-color: #1a222d;
  --text-primary: #e5eaf0;
  --text-secondary: #7d8590;
  /* Primary accent switched to white to echo a minimalist, high‑end vibe */
  --accent: #ffffff;
  /* Negative colour remains red for downward metrics */
  --negative: #F6465D;
  /* Positive colour retained for small details like price change, volume bars and status */
  --positive: #00A67E;
}

/* Base page styling */
body {
  background-color: var(--bg-color);
  color: var(--text-primary);
}

/* Override common light backgrounds with dark panels */
.bg-white,
.bg-\[\#fafafa\],
.bg-black\/\[0\.015\] {
  background-color: var(--card-bg) !important;
}

/* Neutralise borders to suit the dark theme */
.border-gray-200,
.border-gray-200\/80,
.border-gray-200\/60,
.border-gray-100 {
  border-color: var(--border-color) !important;
}

/* Typography overrides */
.text-\[\#0a0a0b\],
.text-\[\#0a0a0b\]\/55,
.text-\[\#0a0a0b\]\/45,
.text-\[\#0a0a0b\]\/50,
.text-\[\#0a0a0b\]\/40,
.text-\[\#0a0a0b\]\/70 {
  color: var(--text-primary) !important;
}

/* Accent overrides for badges and highlights */
.text-\[\#0052FF\] {
  color: var(--accent) !important;
}

/* Set rank badge backgrounds to the border colour for contrast */
.bg-\[\#0052FF\] {
  background-color: var(--border-color) !important;
}

/* Neutralise transparent accent backgrounds used throughout the design (e.g. navbar link backgrounds, stat icon backdrops).
   Replace tinted blues/greens/yellows/reds with a gentle neutral overlay that works on dark cards. */
.bg-\[\#0052FF\]\/10,
.bg-\[\#00A67E\]\/10,
.bg-\[\#F59E0B\]\/10,
.bg-\[\#EF4444\]\/10 {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Ensure icons inside these neutral backgrounds adopt the primary accent (white). */
.bg-\[\#0052FF\]\/10 > span,
.bg-\[\#00A67E\]\/10 > span,
.bg-\[\#F59E0B\]\/10 > span,
.bg-\[\#EF4444\]\/10 > span {
  color: var(--accent) !important;
}

/* Specifically target span elements that carry the original colour class within their tinted parent.
   Without this, the `.text-[#EF4444]` and similar classes (defined below) override our neutral icon colour. */
.bg-\[\#0052FF\]\/10 span.text-\[\#0052FF\],
.bg-\[\#00A67E\]\/10 span.text-\[\#00A67E\],
.bg-\[\#F59E0B\]\/10 span.text-\[\#F59E0B\],
.bg-\[\#EF4444\]\/10 span.text-\[\#EF4444\] {
  color: var(--accent) !important;
}

/* Match very small blue bullets (e.g. chart legend dots) to the positive colour.
   We target elements that combine width and height classes along with the original blue background utility. */
.w-2.h-2.bg-\[\#0052FF\] {
  background-color: var(--positive) !important;
}

/* Secondary accent colours are unified to the primary accent */
/* Preserve green colouring for positive values by referencing the --positive variable rather than a hard-coded hex. */
.text-\[\#00A67E\] {
  color: var(--positive) !important;
}

/* Use original yellow colour for max supply icon and text */

/* Negative colour for downward moves */
/* Only colour the text red for negative values */
.text-\[\#EF4444\] {
  color: var(--negative) !important;
}

/* Override subtle black translucent backgrounds used for hovers and volume bars with a slightly higher opacity for better contrast on the darker canvas. */
.bg-black\/5,
.bg-black\/10,
.bg-black\/\[0\.02\] {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Colour the inner volume bar green when inside a black/10 progress container */
.bg-black\/10 > .bg-\[\#0052FF\] {
  background-color: var(--positive) !important;
}

/* Darken header and footer backgrounds */
#mainHeader,
footer,
header {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Table header shading */
table thead tr {
  background-color: var(--card-bg) !important;
}