/* ===== DEFINE YOUR COLORS HERE ===== */
:root {
  /* Change these two values to match your Tailwind colors */
  --chart-bg-primary: hsl(223 18% 6%);    /* primary-800 - main background */
  --chart-bg-dropdown: hsl(215 17% 10%);  /* primary-700 - dropdown/modal background */
}

/* CSS Variables for TradingView */
.theme-dark {
  /* ===== TOP TOOLBAR & HEADER ===== */
  --tv-color-pane-background: var(--chart-bg-primary) !important;
  --tv-color-toolbar-button-background-hover: transparent !important;
  --tv-color-toolbar-button-background-expanded: transparent !important;
  --tv-color-toolbar-button-background-active: transparent !important;
  --tv-color-toolbar-button-text: #e0e7ff !important;
  --tv-color-toolbar-button-text-active: #e0e7ff !important;
  --tv-color-toolbar-button-text-hover: #e0e7ff !important;

  /* ===== DROPDOWN & POPUP MENUS ===== */
  --tv-color-popup-background: var(--chart-bg-dropdown) !important;
  --tv-color-popup-element-text: #e0e7ff !important;
  --tv-color-popup-element-text-hover: #ffffff !important;
  --tv-color-popup-element-background-hover: rgba(255, 255, 255, 0.1) !important;
  --tv-color-popup-element-background-active: rgba(255, 255, 255, 0.15) !important;
  --tv-color-popup-element-text-active: #ffffff !important;
  --tv-color-popup-element-secondary-text: #9ca3af !important;
  --tv-color-popup-element-hint-text: #6b7280 !important;

  /* ===== MODAL/DIALOG BACKGROUNDS ===== */
  --tv-color-platform-background: var(--chart-bg-dropdown) !important;
  --tv-color-pane-background-secondary: var(--chart-bg-dropdown) !important;

  /* ===== LEFT SIDEBAR ===== */
  --tv-color-toolbar-toggle-button-background-active: rgba(255, 255, 255, 0.15) !important;
  --tv-color-toolbar-toggle-button-background-hover: rgba(49, 49, 49, 0.3) !important;
  --tv-color-toolbar-toggle-button-background-active-hover: rgba(255, 255, 255, 0.15) !important;
  --tv-color-toolbar-toggle-button-text-active: #e0e7ff !important;
  --tv-color-toolbar-toggle-button-text-hover: #e0e7ff !important;
  --tv-color-toolbar-toggle-button-text-active-hover: #e0e7ff !important;
}

:root {
  /* ===== TOP TOOLBAR & HEADER ===== */
  --tv-color-pane-background: var(--chart-bg-primary) !important;
  --tv-color-toolbar-button-background-hover: rgba(5, 5, 7, 0.3) !important;
  --tv-color-toolbar-button-background-expanded: rgba(255, 255, 255, 0.15) !important;
  --tv-color-toolbar-button-background-active: rgba(255, 255, 255, 0.15) !important;
  --tv-color-toolbar-button-text: #e0e7ff !important;

  /* ===== DROPDOWN & POPUP MENUS ===== */
  --tv-color-popup-background: var(--chart-bg-dropdown) !important;
  --tv-color-popup-element-text: #e0e7ff !important;
  --tv-color-popup-element-text-hover: #ffffff !important;
  --tv-color-popup-element-background-hover: rgba(255, 255, 255, 0.1) !important;
  --tv-color-popup-element-background-active: rgba(255, 255, 255, 0.15) !important;
  --tv-color-popup-element-text-active: #ffffff !important;
  --tv-color-popup-element-secondary-text: #9ca3af !important;
  --tv-color-popup-element-hint-text: #6b7280 !important;

  /* ===== MODAL/DIALOG BACKGROUNDS ===== */
  --tv-color-platform-background: var(--chart-bg-dropdown) !important;
  --tv-color-pane-background-secondary: var(--chart-bg-dropdown) !important;

  /* ===== LEFT SIDEBAR ===== */
  --tv-color-toolbar-toggle-button-background-active: rgba(255, 255, 255, 0.15) !important;
  --tv-color-toolbar-toggle-button-background-hover: rgba(5, 5, 7, 0.3) !important;
  --tv-color-toolbar-toggle-button-background-active-hover: rgba(255, 255, 255, 0.15) !important;
  --tv-color-toolbar-toggle-button-text-active: #e0e7ff !important;
  --tv-color-toolbar-toggle-button-text-hover: #e0e7ff !important;
  --tv-color-toolbar-toggle-button-text-active-hover: #e0e7ff !important;
}

html, body {
  background: var(--chart-bg-primary) !important;
}

.layout__area--left button svg,
.layout__area--left [class*="button"] svg,
.tv-side-toolbar button svg,
.tv-side-toolbar [class*="button"] svg,
[class*="toolbar-toggle-button"] svg,
[class*="sidebar"] button svg {
  color: #e0e7ff !important;
}

.layout__area--left button.active svg,
.layout__area--left button[class*="active"] svg,
.layout__area--left button:active svg,
.tv-side-toolbar button.active svg,
.tv-side-toolbar button[class*="active"] svg,
[class*="toolbar-toggle-button"][class*="active"] svg,
[class*="toolbar-toggle-button"].active svg {
  color: #e0e7ff !important;
}

[class*="dialog"],
[class*="modal"],
[class*="popup-container"],
div[data-role="dialog"],
div[data-name*="indicator"] {
  background: var(--chart-bg-dropdown) !important;
  background-color: var(--chart-bg-dropdown) !important;
}

[class*="dialog-content"],
[class*="modal-content"],
[class*="dialog"] > div,
[class*="modal"] > div {
  background: var(--chart-bg-dropdown) !important;
}