/* Base styles for chart container */
.chart-container {
    margin: 20px auto;
    padding: 20px;
    max-width: 100%;
    width: 90%;              /* Responsive width relative to parent */
    box-sizing: border-box;  /* Include padding and border in width */
}

/* Large desktops and smaller laptops */
@media (max-width: 1200px) {
    .chart-container {
        width: 95%;
        padding: 18px;
        margin: 18px auto;
    }
}

/* Tablets and small laptops */
@media (max-width: 1024px) {
    .chart-container {
        width: 95%;
        padding: 15px;
        margin: 15px auto;
    }
}

/* Tablets and large phones */
@media (max-width: 768px) {
    .chart-container {
        width: 100%;
        padding: 12px;
        margin: 12px auto;
    }
}

/* Large mobile phones */
@media (max-width: 480px) {
    .chart-container {
        width: 100%;
        padding: 8px;
        margin: 10px auto;
    }
}

/* Small mobile phones */
@media (max-width: 320px) {
    .chart-container {
        width: 100%;
        padding: 5px;
        margin: 8px auto;
    }
}

/* Make sure SVG or canvas charts inside are responsive */
.chart-container svg,
.chart-container canvas {
    width: 100% !important;      /* Take full width of container */
    height: auto !important;     /* Auto adjust height */
}

/* Responsive text for chart titles, labels etc. if any */
.chart-container .chart-title,
.chart-container .chart-label {
    font-size: calc(1rem + 0.2vw);
    text-align: center;
    margin-bottom: 10px;
}

/* Ensure any cards or other wrapping elements use flexible layout */
.card, .card-body {
    width: 100%;
    box-sizing: border-box;
    padding: 0 15px;
}

/* Optional: allow charts to resize dynamically when window resizes */
@media (max-width: 320px) {
    .chart-container .chart-title,
    .chart-container .chart-label {
        font-size: 0.8rem;
    }
}