/* CSS-side chart compatibility. JS-side Plotly relayout is in theme_charts.js. */
html[data-theme="dark"] :where(
  [class*="Chart"],
  [class*="chart"],
  [class*="Graph"],
  [class*="graph"]
) {
  --chart-line-muted: var(--chart-grid);
  --chart-text-muted: var(--chart-axis);
}
html[data-theme="dark"] :where(
  [class*="Tooltip"],
  [class*="tooltip"],
  .reports-bar-tooltip,
  .chartTooltip
) {
  background-color: var(--chart-tooltip-bg) !important;
  color: var(--chart-tooltip-text) !important;
  border-color: color-mix(in srgb, var(--chart-tooltip-bg) 72%, var(--border-strong)) !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-theme="dark"] :where(
  [class*="Tooltip"] *,
  [class*="tooltip"] *,
  .reports-bar-tooltip *,
  .chartTooltip *
) { color: inherit; }
html[data-theme="dark"] :where(.modebar, .modebar-group) { background: var(--surface-2) !important; }
html[data-theme="dark"] :where(.modebar-btn path) { fill: var(--text-muted) !important; }
html[data-theme="dark"] :where(.modebar-btn:hover path) { fill: var(--brand-hover) !important; }