/* 
------------------------------- Charts ------------------------------- 
*/
.chart-container {
    width: 100%;
    height: 500px;
    background: var(--chart-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-card);
}

.chart-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.chart-lg {
    width: 100%;
    height: 450px;
    min-height: 300px;
}

.chart-md {
    width: 100%;
    height: 350px;
    min-height: 250px;
}

.chart-sm {
    width: 100%;
    height: 300px;
    min-height: 200px;
}

/*
------------------------------- Media Queries -------------------------------
*/
@media (min-width: 992px) {
    .chart-lg {
        height: 450px;
    }

    .chart-md {
        height: 350px;
    }

    .chart-sm {
        height: 300px;
    }
}