/* Stronger period selection is limited to the dark theme (support ticket #40). */
html[data-chart-theme='theme']:is(.dark,.theme-dark) {
  --toolbar-interval-selected-bg: #454d5b;
  --toolbar-interval-selected-hover-bg: #566170;
  --toolbar-interval-selected-fg: #ffffff;
}
html[data-chart-theme='theme']:is(.dark,.theme-dark) .chart-header-bar__interval-cluster {
  --toolbar-selected-bg: var(--toolbar-interval-selected-bg);
  --toolbar-selected-hover-bg: var(--toolbar-interval-selected-hover-bg);
  --toolbar-selected-fg: var(--toolbar-interval-selected-fg);
}

/* Dark period selection keeps its contrast through focus and menu highlight. */
html[data-chart-theme='theme']:is(.dark,.theme-dark) .chart-header-bar__interval-cluster [data-toolbar-state='selected'] { color: var(--toolbar-interval-selected-fg); }
html[data-chart-theme='theme']:is(.dark,.theme-dark) .chart-header-bar__interval-cluster [data-toolbar-state='selected']:focus-visible::before { background: var(--toolbar-interval-selected-hover-bg); }
html[data-chart-theme='theme']:is(.dark,.theme-dark) .chart-header-bar__menu .chart-header-bar__menu-item--active {
  background: var(--toolbar-interval-selected-bg);
  color: var(--toolbar-interval-selected-fg);
}
html[data-chart-theme='theme']:is(.dark,.theme-dark) .chart-header-bar__menu .chart-header-bar__menu-item--active:is(:hover,:focus-visible,[data-highlighted]) {
  background: var(--toolbar-interval-selected-hover-bg);
  color: var(--toolbar-interval-selected-fg);
}