/* TradingView Lightweight Charts Custom Styling */

/* Chart overlay shouldn't block interactions */
.chart-overlay.wtwhite-1q96n5s {
    pointer-events: none !important;
}

.chart-info.wtwhite-1h9dxk {
    pointer-events: none !important;
}

/* Chart container styling */
.tv-lightweight-charts {
    width: 100% !important;
    height: 100% !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Crosshair styling */
.tv-lightweight-charts table.crosshair-info {
    background-color: var(--color-background) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 4px !important;
    color: var(--color-text-default) !important;
    font-size: 12px !important;
}

/* Price scale styling */
.tv-lightweight-charts .pane-legend {
    color: var(--color-text-default) !important;
    font-size: 12px !important;
}

/* Time scale styling */
.tv-lightweight-charts .time-axis {
    color: var(--color-text-secondary) !important;
    font-size: 11px !important;
}

/* Chart watermark */
.tv-lightweight-charts .watermark {
    color: var(--color-text-secondary) !important;
    opacity: 0.5 !important;
}

/* Volume series styling */
.tv-lightweight-charts .volume-series {
    opacity: 0.6 !important;
}

/* Dark theme specific styles */
[data-theme="dark"] .tv-lightweight-charts {
    background-color: #0f1720 !important;
}

[data-theme="dark"] .tv-lightweight-charts table.crosshair-info {
    background-color: #2B2B43 !important;
    border-color: #3C3C5A !important;
    color: #d1d4dc !important;
}

/* Light theme specific styles */
[data-theme="light"] .tv-lightweight-charts {
    background-color: #ffffff !important;
}

[data-theme="light"] .tv-lightweight-charts table.crosshair-info {
    background-color: #ffffff !important;
    border-color: #e1e1e1 !important;
    color: #333333 !important;
}

/* Responsive chart container */
@media (max-width: 768px) {
    #chart-container {
        height: 100% !important;
        min-height: 100% !important;
    }
    
    .chart-screen #chart-container {
        height: calc(100vh - var(--m-screen-header-height) - var(--bot-bar-height)) !important;
        min-height: 400px;
    }
    
    .tv-lightweight-charts {
        font-size: 11px !important;
    }
}

/* Custom scrollbar for chart area */
.tv-lightweight-charts ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.tv-lightweight-charts ::-webkit-scrollbar-track {
    background: var(--color-background);
}

.tv-lightweight-charts ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.tv-lightweight-charts ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* Chart loading indicator */
.chart-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text-secondary);
    font-size: 14px;
    z-index: 10;
}

/* Chart error state */
.chart-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-error);
    font-size: 14px;
    text-align: center;
    z-index: 10;
}

/* Don't hide Highcharts - let LWCharts render inside the container */

/* Ensure chart container takes full size */
.chart-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.chart-screen #chart-container {
    width: 100%;
    height: 100%;
    min-height: 400px;
}