/* TradingView chart style overrides */

/* Ensure proper chart centering and layout */
.tv-chart-container,
.chart-widget,
div[id*="tradingview_"] {
  width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}

/* Center the chart content */
.chart-page .chart-container {
  width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
}

/* Ensure the main chart area is centered */
.chart-page .pane {
  margin: 0 auto !important;
  flex: 1 !important;
  max-width: none !important;
}

/* Customize chart background and text */
:root :not(.chart-page) div.chart-container {
  background-color: #1E1E2D !important;
}

/* Make chart toolbar cleaner */
.chart-page .header-chart-panel .group {
  margin: 1px !important;
}

.chart-page .header-chart-panel .header-group-bars {
  font-size: 14px !important;
}

/* Improve legend text */
.chart-page .legend-source-item {
  color: #cccccc !important;
}

/* Chart bottom controls */
.chart-controls-bar {
  background-color: #1E1E2D !important;
  border-top: 1px solid #252538 !important;
}

/* Improve scale text visibility */
.chart-page .pane-legend-line > span {
  color: #cccccc !important;
}

/* Price and volume labels */
.chart-page .pane-legend-title__title {
  color: #ffffff !important;
}

.chart-page .pane-legend-item-value-wrap {
  color: #cccccc !important;
}

/* Make the candlesticks more visible */
.chart-page .chart-container canvas {
  filter: contrast(1.05) !important;
}

/* Force candlestick display and prevent line chart fallback */
.tv-chart-container canvas,
.chart-page canvas,
div[id*="tradingview_"] canvas {
  image-rendering: auto !important;
}

/* Ensure candlestick series are always visible */
.chart-page .main-series,
.chart-page .candlestick-series,
.tv-chart-container .main-series,
.tv-chart-container .candlestick-series {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Remove extra toolbars for cleaner appearance */
.chart-page .control-bar-wrapper {
  display: none !important;
}

.chart-page .time-axis {
  border-top: none !important;
}

/* Clean up border */
.chart-page .chart-container {
  border: none !important;
}

/* Remove ALL borders and edges from chart */
.tv-chart-container,
.tv-chart-container *,
.chart-page *,
div[id*="tradingview_"] * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove padding and margins from chart container */
.tv-chart-container {
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Remove any internal spacing */
.chart-page .chart-container,
.chart-page .pane,
.chart-page .price-axis,
.chart-page .time-axis {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Make grid lines more subtle */
.chart-page .price-axis {
  border-right: none !important;
}

/* Tooltip styling */
.tv-floating-toolbar {
  border: none !important;
  background: #1E1E2D !important;
}

/* Empty chart styling */
.chart-page .chart-markup-table {
  background-color: #1E1E2D !important;
}

/* Crosshair */
.chart-page .chart-crosshair-cursor-vertical,
.chart-page .chart-crosshair-cursor-horizontal {
  opacity: 0.3 !important;
}

/* Chart logo to make it less prominent */
.chart-page .tv-logo-toolbar {
  opacity: 0.5 !important;
}

/* Additional centering and layout fixes */
.chart-page .chart-widget-container {
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
}

/* Ensure time axis is centered */
.chart-page .time-axis-container {
  width: 100% !important;
  margin: 0 auto !important;
}

/* Fix any potential left alignment issues */
.chart-page .chart-container > div {
  margin: 0 auto !important;
}

/* Prevent any absolute positioning that might cause left alignment */
.chart-page .chart-container .pane-border-top,
.chart-page .chart-container .pane-border-bottom {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Ensure proper width distribution */
.chart-page .price-axis-container {
  position: relative !important;
}

/* Force chart to use full available width */
.tv-chart-container iframe,
.tv-chart-container > div {
  width: 100% !important;
  max-width: none !important;
  min-width: 300px !important;
}

/* Ensure timeframe toolbar is always visible and accessible */
.tv-header-toolbar,
.tv-header-toolbar__group,
.tv-header-toolbar__group--time-frames,
[data-name="time-frames-toolbar"],
.chart-page .timeframe-toolbar,
.chart-page [data-name="timeframe-toolbar"],
.chart-page .time-frames-toolbar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important;
}

/* Style the timeframe buttons for better experience on all devices */
.tv-header-toolbar__group--time-frames button,
.chart-page .timeframe-toolbar button,
.chart-page .time-frames-toolbar button {
  min-width: 32px !important;
  height: 24px !important;
  font-size: 12px !important;
  padding: 2px 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #999999 !important;
  border-radius: 4px !important;
  margin: 0 2px !important;
}

.tv-header-toolbar__group--time-frames button:hover,
.chart-page .timeframe-toolbar button:hover,
.chart-page .time-frames-toolbar button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.tv-header-toolbar__group--time-frames button.i-active,
.chart-page .timeframe-toolbar button.active,
.chart-page .time-frames-toolbar button.active {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
}

/* Ensure chart container has proper dimensions */
.tv-chart-container {
  min-height: 500px !important;
}

/* Fix potential blackout issues */
.tv-chart-container iframe,
.tv-chart-container canvas {
  background: transparent !important;
}

/* Ensure toolbar is positioned correctly */
.tv-header {
  position: relative !important;
  z-index: 10 !important;
}

.tv-header-toolbar {
  position: relative !important;
  z-index: 10 !important;
}

/* ============================================
   REAL-TIME UPDATE OPTIMIZATIONS
   ============================================ */

/* Prevent chart flickering during real-time updates */
.tv-chart-container,
.tv-chart-container canvas,
.chart-page .chart-container,
.chart-page .chart-container canvas {
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Optimize canvas rendering for smooth updates */
.chart-page canvas {
  image-rendering: auto !important;
  image-rendering: crisp-edges !important;
  image-rendering: -webkit-optimize-contrast !important;
}

/* Prevent layout shifts during candlestick updates */
.chart-page .pane,
.chart-page .price-axis,
.chart-page .time-axis {
  contain: layout style paint !important;
}

/* Smooth real-time price line updates */
.chart-page .price-line,
.chart-page .crosshair-price-line {
  transition: transform 0.1s ease-out !important;
}

/* Optimize legend updates for real-time data */
.chart-page .pane-legend,
.chart-page .pane-legend-line,
.chart-page .pane-legend-item-value {
  transition: color 0.2s ease !important;
}

/* Prevent tooltip flicker during updates */
.tv-floating-toolbar,
.chart-page .chart-crosshair-tooltip {
  transition: opacity 0.1s ease !important;
  will-change: transform, opacity !important;
}

/* Optimize volume bar updates */
.chart-page .histogram-series,
.chart-page .volume-series {
  transition: none !important;
}

/* Smooth scrolling for real-time data */
.chart-page .time-axis {
  scroll-behavior: smooth !important;
}

/* Prevent reflow during candlestick updates */
.chart-page .main-series,
.chart-page .candlestick-series {
  contain: layout !important;
}

/* Optimize price scale updates */
.chart-page .price-axis-container {
  contain: layout style !important;
}

/* Smooth real-time indicator updates */
.chart-page .study-container,
.chart-page .study-legend {
  transition: none !important;
  will-change: auto !important;
}

/* Hardware acceleration for smooth updates */
.tv-chart-container {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  perspective: 1000px !important;
}

/* Prevent visual artifacts during updates */
.chart-page .chart-container {
  overflow: hidden !important;
  contain: layout style paint !important;
}

/* Optimize real-time crosshair movement */
.chart-page .chart-crosshair {
  pointer-events: none !important;
  will-change: transform !important;
}

/* Smooth price label updates */
.chart-page .price-axis-label,
.chart-page .time-axis-label {
  transition: opacity 0.1s ease !important;
}

/* Prevent loading indicators during real-time updates */
.chart-page .loading-indicator,
.chart-page .spinner {
  display: none !important;
}

/* Optimize performance for high-frequency updates */
.chart-page {
  contain: layout style paint !important;
  isolation: isolate !important;
}

/* ============================================
   CANDLESTICK FORCING RULES
   ============================================ */

/* Force candlestick chart type globally */
.tv-chart-container,
.chart-page {
  --tv-color-platform-background: #1E1E2D !important;
  --tv-color-pane-background: #1E1E2D !important;
}

/* Prevent line chart fallback */
.tv-chart-container .main-series-line,
.chart-page .main-series-line {
  display: none !important;
}

/* Ensure candlestick bodies are visible */
.tv-chart-container .main-series-candlestick,
.chart-page .main-series-candlestick {
  display: block !important;
  opacity: 1 !important;
}

/* Force candlestick style over line style */
.tv-chart-container [data-name="legend-source-item"] {
  --tv-series-style: "candlestick" !important;
}

/* Prevent chart from defaulting to line on small timeframes */
.tv-chart-container .chart-container,
.chart-page .chart-container {
  --tv-chart-style: candlestick !important;
}