/* Chart Container */
.chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    width: 100%;
    margin: 20px auto;
    padding: 16px;
    background: #d5f2e2;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Doughnut Chart */
#doughnutChart {
    width: 100%;
    max-width: 500px;
    background: #d5f2e2;
    aspect-ratio: 1 / 1; /* Keeps it square */
}

/* Bar Chart */
#barChart {
    width: 100%;
    max-width: 500px;
    background: #d5f2e2;
    aspect-ratio: 2 / 1; /* Better for bar charts (wider than tall) */
    display: block;
    margin: 0 auto; /* Center horizontally */
}

/* Chart Text (for legends outside canvas) */
.chart-text {
    color: #2d566b;
    font-family: "Arial", sans-serif;
    font-size: 14px;
}