/* Highcharts custom theme */
.highcharts-container {
  font-family: var(--font-sans);
}

.highcharts-background {
  fill: transparent;
}

.highcharts-title {
  fill: var(--gray-900);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
}

.highcharts-subtitle {
  fill: var(--gray-600);
  font-size: var(--text-sm);
}

.highcharts-axis-title {
  fill: var(--gray-700);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.highcharts-axis-labels text {
  fill: var(--gray-600);
  font-size: var(--text-xs);
}

.highcharts-grid-line {
  stroke: var(--border-color);
  stroke-width: 1;
}

.highcharts-tick {
  stroke: var(--border-color);
}

.highcharts-legend-item text {
  fill: var(--gray-700);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.highcharts-legend-item:hover text {
  fill: var(--gray-900);
}

.highcharts-tooltip-box {
  fill: var(--white);
  stroke: var(--border-color);
  stroke-width: 1;
  filter: drop-shadow(var(--shadow-lg));
}

.highcharts-tooltip text {
  fill: var(--gray-700);
  font-size: var(--text-sm);
}

.highcharts-label text {
  fill: var(--gray-700);
  font-size: var(--text-sm);
}

/* Series colors */
.highcharts-color-0 {
  fill: var(--primary);
  stroke: var(--primary);
}

.highcharts-color-1 {
  fill: var(--success);
  stroke: var(--success);
}

.highcharts-color-2 {
  fill: var(--warning);
  stroke: var(--warning);
}

.highcharts-color-3 {
  fill: var(--danger);
  stroke: var(--danger);
}

.highcharts-color-4 {
  fill: var(--info);
  stroke: var(--info);
}

.highcharts-color-5 {
  fill: var(--secondary);
  stroke: var(--secondary);
}

/* Chart wrapper with custom styling */
.chart-wrapper {
  position: relative;
  width: 100%;
  min-height: 300px;
}

.chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background: var(--gray-50);
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius);
  color: var(--gray-500);
  font-size: var(--text-sm);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--gray-700);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.chart-legend-item:hover {
  opacity: 0.8;
}

.chart-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.chart-legend-label {
  font-weight: var(--font-medium);
}

.chart-legend-value {
  color: var(--gray-600);
  margin-left: var(--space-1);
}

/* Mini charts for KPI cards */
.mini-chart {
  height: 60px;
  margin-top: var(--space-3);
}

.mini-chart .highcharts-background {
  fill: transparent;
}

.mini-chart .highcharts-axis,
.mini-chart .highcharts-axis-labels,
.mini-chart .highcharts-grid-line {
  display: none;
}