/* TradingView Chart Styles with Theme System Integration */
/* Dynamic styles using CSS variables from the theme system */

/* Apply Ganntec Sans font family to TradingView chart */
.tv-chart-container,
.tv-chart-container * {
  font-family: 'Ganntec Sans', 'Arial', sans-serif !important;
  font-weight: 400 !important; /* Reduce weight by one notch from default */
}

/* Main container */
#tv_chart_container {
  width: 100%;
  height: 100%;
  background-color: var(--theme-chart-background, #0e0e10);
}

/* Basic chart styling using theme variables */
.tv-chart-container {
  background-color: var(--theme-chart-background, #0e0e10) !important;
}

/* Scrollbars using theme variables */
.tv-chart-container ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.tv-chart-container ::-webkit-scrollbar-track {
  background: var(--theme-chart-surface, #161616);
}

.tv-chart-container ::-webkit-scrollbar-thumb {
  background: var(--theme-chart-border, #1a1a1c);
  border-radius: 4px;
}

.tv-chart-container ::-webkit-scrollbar-thumb:hover {
  background: var(--theme-chart-up, #65fb9e);
}

/* Context menus using theme variables */
.menuBox-biCHvr5P {
  background-color: var(--theme-chart-surface, #161616) !important;
  border-color: var(--theme-chart-border, #1a1a1c) !important;
  color: var(--theme-chart-text, #a0a0a0) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.item-RRTT8-lU {
  color: var(--theme-chart-text, #a0a0a0) !important;
}

.item-RRTT8-lU:hover {
  background-color: var(--theme-chart-border, #1a1a1c) !important;
  color: var(--theme-chart-up, #65fb9e) !important;
}

/* Additional TradingView element overrides */
.chart-controls {
  background-color: var(--theme-chart-surface, #161616) !important;
  border-color: var(--theme-chart-border, #1a1a1c) !important;
  color: var(--theme-chart-text, #a0a0a0) !important;
}

/* Toolbar styling with new variables */
.toolbar {
  background-color: var(--theme-chart-background, #0e0e10) !important;
}

/* Button styling in charts */
.chart-button {
  background-color: var(--theme-chart-surface, #161616) !important;
  border-color: var(--theme-chart-border, #1a1a1c) !important;
  color: var(--theme-chart-text, #a0a0a0) !important;
}

.chart-button:hover {
  background-color: var(--theme-chart-border, #1a1a1c) !important;
  color: var(--theme-chart-up, #65fb9e) !important;
}

/* Official TradingView CSS Custom Properties - Updated dynamically via JavaScript */

/* Force chart header/toolbar background to match theme - target all possible toolbar elements */
.tv-chart-container .chart-markup-table,
.tv-chart-container [data-name='legend-source-item'],
.tv-chart-container .layout__area--top,
.tv-chart-container [class*='toolbar'],
.tv-chart-container [class*='header'],
.tv-chart-container .chart-widget-collection,
.tv-chart-container .layout__area--center,
.tv-chart-container .layout__area--left,
.tv-chart-container .layout__area--right,
.tv-chart-container [data-name='top-toolbar'],
.tv-chart-container [data-name='header'],
.tv-chart-container .chart-controls-bar,
.tv-chart-container .chart-container-border,
.tv-chart-container > div:first-child,
.tv-chart-container iframe[name*='tradingview'] + div {
  background: var(--theme-chart-background, #0e0e10) !important;
  background-color: var(--theme-chart-background, #0e0e10) !important;
}

/* Target the blue header specifically */
.tv-chart-container div[style*='background'] {
  background: var(--theme-chart-background, #0e0e10) !important;
  background-color: var(--theme-chart-background, #0e0e10) !important;
}

/* More aggressive targeting */
.tv-chart-container * {
  --tv-color-platform-background: var(--theme-chart-background, #0e0e10) !important;
  --tv-color-pane-background: var(--theme-chart-background, #0e0e10) !important;
}