/* Base chart styling for all modes */
.chart-card {
    background-color: #ffffff;
    border-color: #e2e2e2;
    padding: 20px; /* More padding for better spacing */
    margin-bottom: 20px;
    position: relative;
}

.chart-header h3 {
    color: #333333;
    font-weight: 700; /* Increased for better visibility */
    font-size: 18px;
    margin-bottom: 15px;
    margin-top: 0;
    text-align: center;
    padding-bottom: 8px;
}

.chart-card .chart-header {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

/* Enhanced chart styling for dark mode */
body.dark-mode .chart-card {
    background-color: #2d3748;
    border-color: #4a5568;
}

body.dark-mode .chart-header h3 {
    color: #ffffff !important;
    font-weight: 700; /* Increased for better visibility */
}

body.dark-mode .chart-card .chart-header {
    border-bottom: 1px solid #4a5568;
}

/* Chart title and labels */
body.dark-mode .chart-card canvas {
    filter: brightness(1.1);
}

/* Legend text color for charts */
body.dark-mode .chart-card .chartjs-legend {
    color: #e2e8f0;
}

/* Make the doughnut charts more visible in dark mode */
body.dark-mode #purchase-distribution-chart,
body.dark-mode #brand-distribution-chart {
    filter: brightness(1.2);
}

/* Chart tooltip in dark mode */
body.dark-mode .chartjs-tooltip {
    background-color: rgba(45, 55, 72, 0.9) !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}