/* Pin color-scheme to the site theme, not the OS */
body .highcharts-container {
  color-scheme: light;
}

body.dark-mode .highcharts-container {
  color-scheme: dark;
}

/* Highcharts context menu and export buttons (split from styles.css) */
.highcharts-menu {
  background-color: var(--surface-panel) !important;
}

.highcharts-menu-item {
  color: var(--text-primary) !important;
}

/* Light hover/fill uses --surface-btn, mirroring the dark block; formerly #f0f0f0, --surface-btn (#f7f7f7) is the nearest token. */
.highcharts-menu-item:hover {
  background-color: var(--surface-btn) !important;
}

/* Menu separator — thin divider line between export menu items */
.highcharts-separator {
  background-color: var(--border) !important;
  height: 0.5px !important;
  margin: 10px 0 !important;
  padding: 0 !important;
}

.highcharts-contextbutton .highcharts-button-box {
  fill: var(--surface-btn) !important;
  stroke: var(--border) !important;
}

.highcharts-contextbutton .highcharts-button-symbol {
  stroke: var(--text-primary) !important;
}

/* Dark mode */

body.dark-mode .highcharts-menu {
  background-color: var(--surface-panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-panel) !important;
}

body.dark-mode .highcharts-menu-item {
  background-color: var(--surface-panel) !important;
  color: var(--text-primary) !important;
  padding: 8px 16px !important;
}

body.dark-mode .highcharts-menu-item:hover {
  background-color: var(--surface-btn) !important;
  /* Pure white on the dark hover face — the theme-independent white token. */
  color: var(--text-on-accent) !important;
}

body.dark-mode .highcharts-separator {
  background-color: var(--border) !important;
  margin: 10px 0 !important;
  padding: 0 !important;
}

body.dark-mode .highcharts-contextbutton .highcharts-button-box {
  fill: var(--surface-btn) !important;
  stroke: var(--surface-control) !important;
}

body.dark-mode .highcharts-contextbutton .highcharts-button-symbol {
  stroke: var(--text-primary) !important;
}

body.dark-mode .highcharts-reset-zoom rect {
  fill: var(--surface-btn) !important;
  stroke: var(--surface-control) !important;
}

body.dark-mode .highcharts-reset-zoom text {
  fill: var(--text-primary) !important;
}

body.dark-mode .highcharts-tick,
body.dark-mode .highcharts-minor-tick {
  stroke: var(--text-faint) !important;
}

body.dark-mode .highcharts-tooltip path {
  fill: var(--input-bg) !important;
  stroke: var(--surface-control) !important;
}