/* ===========================
   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;
}

/* Chart Fade-In Animation */
@keyframes chartFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Chart Container Backgrounds - Prevent White Flash on Load */
.dash-graph,
.js-plotly-plot {
    background-color: var(--bg-primary) !important;
}

/* Charts in secondary background cards */
.metric-card[style*="var(--bg-secondary)"] .dash-graph,
.metric-card[style*="var(--bg-secondary)"] .js-plotly-plot {
    background-color: var(--bg-secondary) !important;
}

/* Plotly Chart Responsive */
.js-plotly-plot {
    width: 100% !important;
    height: 100% !important;
    animation: chartFadeIn 0.6s ease-in;
}

/* Chart container fade-in for smoother loading */
.metric-card .js-plotly-plot,
.metric-card .dcc-graph {
    animation: chartFadeIn 0.6s ease-in;
}

/* 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;
}

/* AG Grid Transparent Backgrounds - Prevent Black/White Flash on Load */
.ag-theme-alpine,
.ag-theme-alpine-dark {
    background-color: transparent !important;
}

/* Make AG Grid loading overlays transparent */
.ag-overlay-loading-wrapper,
.ag-overlay-no-rows-wrapper,
.ag-overlay {
    background-color: transparent !important;
}

/* Make the root wrapper transparent */
.ag-root-wrapper {
    background-color: transparent !important;
}