/**
 * TradingView Custom Theme CSS
 * 
 * Theme-aware styling for TradingView Advanced Charts.
 * Uses CSS variables from the app's theme system (globals.css).
 * Automatically adapts to Dark, Light, and Breakout themes.
 * 
 * Reference: https://www.tradingview.com/charting-library-docs/latest/customization/styles/css-color-themes
 */

:root {
  /* ========================================
     Platform & Pane Backgrounds
     ======================================== */
  --tv-color-platform-background: var(--chart-bg);
  --tv-color-pane-background: var(--chart-bg);
  
  /* ========================================
     Toolbar Styling
     ======================================== */
  --tv-color-toolbar-button-text: var(--colors-ds-neutral);
  --tv-color-toolbar-button-text-hover: var(--colors-ds-primary);
  --tv-color-toolbar-button-text-active: var(--accent-primary);
  --tv-color-toolbar-button-text-active-hover: var(--accent-primary);
  --tv-color-toolbar-button-background-hover: var(--background-tertiary);
  --tv-color-toolbar-button-background-expanded: var(--background-tertiary);
  --tv-color-toolbar-button-background-active: var(--accent-primary, #0091FF)1f;
  --tv-color-toolbar-button-background-active-hover: var(--accent-primary, #0091FF)3d;
  
  /* Toggle buttons (Magnet Mode, Lock Drawings, etc.) */
  --tv-color-item-active-text: var(--accent-primary);
  --tv-color-toolbar-toggle-button-background-active: var(--accent-primary, #0091FF)1f;
  --tv-color-toolbar-toggle-button-background-active-hover: var(--accent-primary, #0091FF)3d;
  
  /* Toolbar dividers and misc */
  --tv-color-toolbar-divider-background: var(--border-color-ds-divider);
  --tv-color-toolbar-save-layout-loader: var(--accent-primary);
  
  /* ========================================
     Popup & Context Menu Styling
     ======================================== */
  --tv-color-popup-background: var(--background-secondary);
  --tv-color-popup-element-text: var(--colors-ds-primary);
  --tv-color-popup-element-text-hover: var(--colors-ds-primary);
  --tv-color-popup-element-background-hover: var(--background-tertiary);
  --tv-color-popup-element-divider-background: var(--border-color-ds-divider);
  --tv-color-popup-element-secondary-text: var(--colors-ds-neutral);
  --tv-color-popup-element-hint-text: var(--colors-ds-dimmed);
  --tv-color-popup-element-text-active: var(--accent-primary);
  --tv-color-popup-element-background-active: var(--accent-primary, #0091FF)1f;
  
  /* Popup toolbox (drawing tools dropdown) */
  --tv-color-popup-element-toolbox-text: var(--colors-ds-neutral);
  --tv-color-popup-element-toolbox-text-hover: var(--colors-ds-primary);
  --tv-color-popup-element-toolbox-text-active-hover: var(--accent-primary);
  --tv-color-popup-element-toolbox-background-hover: var(--background-tertiary);
  --tv-color-popup-element-toolbox-background-active-hover: var(--accent-primary, #0091FF)1f;
}

/* ========================================
   Chart Frame & Container
   ======================================== */
.chart-container {
  background-color: var(--chart-bg) !important;
}

/* Chart iframe wrapper */
.TVChartContainer {
  background-color: var(--chart-bg) !important;
}

/* ========================================
   Scrollbar Styling (for chart panels)
   ======================================== */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--background-color-ds-scrollbar-thumb);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--background-color-ds-scrollbar-thumb-hover);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--background-color-ds-scrollbar-thumb) transparent;
}

/* ========================================
   Dialog & Modal Styling
   ======================================== */
.tv-dialog {
  background-color: var(--background-secondary) !important;
  border: 1px solid var(--border-color-ds-divider) !important;
  border-radius: 12px !important;
}

.tv-dialog__section {
  border-color: var(--border-color-ds-divider) !important;
}

/* ========================================
   Input & Form Controls
   ======================================== */
.tv-control-input {
  background-color: var(--background-color-ds-input) !important;
  border-color: transparent !important;
  color: var(--colors-ds-primary) !important;
}

.tv-control-input:hover {
  background-color: var(--background-color-ds-input-hover) !important;
}

.tv-control-input:focus {
  border-color: var(--border-focus) !important;
  background-color: var(--background-color-ds-input-hover) !important;
}

/* ========================================
   Tab Styling
   ======================================== */
.tv-tabs__tab {
  color: var(--colors-ds-neutral) !important;
}

.tv-tabs__tab:hover {
  color: var(--colors-ds-primary) !important;
}

.tv-tabs__tab--active {
  color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
}

/* ========================================
   Button Styling
   ======================================== */
.tv-button--primary {
  background-color: var(--accent-primary) !important;
  color: #ffffff !important;
}

.tv-button--primary:hover {
  background-color: var(--accent-primary) !important;
  opacity: 0.9;
}

.tv-button--secondary {
  background-color: var(--background-color-ds-input) !important;
  color: var(--colors-ds-primary) !important;
}

.tv-button--secondary:hover {
  background-color: var(--background-color-ds-input-hover) !important;
}

/* ========================================
   Price Scale & Time Scale
   ======================================== */
.price-axis {
  background-color: transparent !important;
}

.time-axis {
  background-color: transparent !important;
}

/* ========================================
   Legend Styling
   ======================================== */
.chart-controls-bar {
  background-color: transparent !important;
}

/* ========================================
   Study Pane Separators
   ======================================== */
.pane-separator {
  background-color: var(--border-color-ds-divider) !important;
}

/* ========================================
   Watermark (if visible)
   ======================================== */
.tv-watermark {
  opacity: 0.05 !important;
}