/* Screenshot-inspired theme for the isolated New API IP entry. */
:root,
.dark {
  --background: #1f1f1f;
  --foreground: #f2f4f7;
  --card: #222222;
  --card-foreground: #f2f4f7;
  --popover: #262626;
  --popover-foreground: #f2f4f7;
  --primary: #5a8bd8;
  --primary-foreground: #ffffff;
  --secondary: #293448;
  --secondary-foreground: #bdcbe3;
  --muted: #2b2b2b;
  --muted-foreground: #8f9bad;
  --accent: #2a3b59;
  --accent-foreground: #dce8ff;
  --border: #29415f;
  --input: #2b3b53;
  --ring: #716bff;
  --chart-1: #8be4f4;
  --chart-2: #8b7cff;
  --chart-3: #6f9ee8;
  --chart-4: #a4a0ff;
  --chart-5: #67c9d8;
  --sidebar: #22252a;
  --sidebar-foreground: #eef2f7;
  --sidebar-primary: #5a8bd8;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2b3d5b;
  --sidebar-accent-foreground: #dce8ff;
  --sidebar-border: #2d4568;
  --sidebar-ring: #716bff;
}

html,
body {
  background: #1f1f1f !important;
  color: #f2f4f7;
}

/* Keep the visual hierarchy close to the supplied dashboard screenshot. */
button,
[role="button"] {
  border-color: #29415f;
}

table thead,
thead {
  background: #252525;
}

svg [stroke="#000"],
svg [stroke="#000000"] {
  stroke: currentColor;
}

/* Recolor common chart grid/axis strokes without changing chart geometry. */
svg .recharts-cartesian-grid line,
svg .recharts-cartesian-axis-line,
svg .recharts-cartesian-axis-tick-line {
  stroke: #3b4c63;
}

svg .recharts-text {
  fill: #9eacc0;
}