/* Force chart visibility styles */
.chart-container canvas {
  display: block !important;
  min-height: 300px;
  width: 100% !important;
}

/* Fix for specific charts */
#age-purchase-rate-chart, 
#brand-purchase-rate-chart {
  display: block !important;
  min-height: 300px;
  width: 100% !important;
  background-color: transparent;
}

/* Ensure chart headers are visible */
.chart-header h3 {
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  margin-bottom: 15px;
}

/* Light mode chart text */
.light-mode .chart-header h3 {
  color: #333333;
  text-shadow: none;
}

/* Ensure chart descriptions are visible */
.chart-description {
  display: block;
  margin-bottom: 15px;
  color: rgba(255,255,255,0.8);
}

/* Light mode chart description */
.light-mode .chart-description {
  color: rgba(0,0,0,0.7);
}