/* ===========================
   Charts
=========================== */

/* Base Chart Styles */
.chart {
    height: 350px;
    width: 100%;
}

/* Chart Container Backgrounds */
.chart-container-primary {
    --chart-bg: var(--chart-bg-primary);
}

.chart-container-secondary {
    --chart-bg: var(--chart-bg-secondary);
}

.auto-chart-bg[style*="var(--bg-primary)"] {
    --chart-bg: var(--chart-bg-primary);
}

.auto-chart-bg[style*="var(--bg-secondary)"] {
    --chart-bg: var(--chart-bg-secondary);
}

.metric-card[style*="var(--bg-secondary)"] {
    --chart-bg: var(--chart-bg-secondary);
}

/* Overlay Chart */
.overlay-chart {
    width: 100% !important;
    height: calc(90vh - 120px) !important;
    min-height: 500px;
}

/* Progress Bar Colors */
.progress-bar-over .progress-bar {
    background-color: var(--brand-purple) !important;
}

.progress-bar-complete .progress-bar {
    background-color: var(--success-green) !important;
}

.progress-bar-default .progress-bar {
    background-color: var(--brand-purple) !important;
}

/* Plotly Chart Responsive */
.js-plotly-plot {
    width: 100% !important;
    height: 100% !important;
}

/* Chart Legends */
.js-plotly-plot .legend {
    display: none !important;
}

/* Date Range Indicators */
.date-range-green {
    color: var(--success-green);
    font-weight: bold;
}

.date-range-error {
    color: var(--error-red);
    font-weight: bold;
}