/* Chart tooltips that are readable in every theme and palette (ApexCharts).
 *
 * Two defaults made them hard to read, and both are overridden here, on
 * every page:
 *
 * - A donut or pie tooltip is filled with the SLICE's color, white or grey
 *   text on top (Apex's fillSeriesColor): 2.0 to 3.7:1 on the Decisions page,
 *   under the 4.5:1 text needs. The !important beats the inline fill.
 * - The theme compiles the tooltip's background at build time and picks its
 *   text color from Apex's own light/dark class, so a chart asking for a dark
 *   tooltip in the light theme drew white on white, and a custom palette was
 *   never consulted.
 *
 * So the box takes the page's own tokens: the paper background, the heading
 * color for its text, the border color; the series dot keeps its color, which
 * is what says which series it is. Measured after: bars, histograms and
 * donuts alike well over 4.5:1 in both themes.
 */
.apexcharts-canvas .apexcharts-tooltip,
.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light,
.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-dark {
  background: var(--bs-paper-bg, var(--bs-card-bg, var(--bs-body-bg))) !important;
  color: var(--bs-heading-color, var(--bs-body-color)) !important;
  border: 1px solid var(--bs-border-color) !important;
}
.apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
  background: var(--bs-tertiary-bg, var(--bs-body-bg)) !important;
  color: var(--bs-heading-color, var(--bs-body-color)) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
}
.apexcharts-canvas .apexcharts-tooltip :is(.apexcharts-tooltip-text, .apexcharts-tooltip-text-y-label,
  .apexcharts-tooltip-text-y-value, .apexcharts-tooltip-text-goals-label, .apexcharts-tooltip-text-goals-value,
  .apexcharts-tooltip-text-z-label, .apexcharts-tooltip-text-z-value) {
  color: inherit !important;
}
/* the little axis labels that follow the pointer */
.apexcharts-canvas :is(.apexcharts-xaxistooltip, .apexcharts-yaxistooltip) {
  background: var(--bs-paper-bg, var(--bs-card-bg, var(--bs-body-bg))) !important;
  color: var(--bs-heading-color, var(--bs-body-color)) !important;
  border-color: var(--bs-border-color) !important;
}