/* by me */
/* https://www.highcharts.com/docs/chart-design-and-style/style-by-css */

[data-theme-mode=dark] figure {
  background-color: transparent;
}

[data-theme-mode=dark] .highcharts-plot-background,
[data-theme-mode=dark] .highcharts-background {
  /* NOTE 1. keep rgb(var(--body-bg-rgb)) instead of transparent
             otherwise background will turn to black
             in full screen or in saved jpg
          2. rgb(var(--body-bg-rgb)) is the card bg in dark mode
  */
  fill: rgb(var(--body-bg-rgb)) !important;
}

[data-theme-mode=dark] .highcharts-title,
[data-theme-mode=dark] .highcharts-subtitle tspan {
  fill: darkgrey !important;
}

[data-theme-mode=dark] .highcharts-axis-labels text {
  fill: darkgrey !important;
}

[data-theme-mode=dark] .highcharts-credits {
  fill: grey !important;
}

[data-theme-mode=dark] .highcharts-data-label text {
  fill: white !important;
  font-weight: normal !important;
}

[data-theme-mode=dark] .highcharts-legend-item text {
  fill: darkgrey !important;
}
[data-theme-mode=dark] .highcharts-legend-box {
  fill: #2b2b30 !important;
}

[data-theme-mode=dark] .highcharts-tooltip-header,
[data-theme-mode=dark] .highcharts-tooltip text  {
  fill: darkgrey !important;
}
/* .highcharts-label-box for overall-activity */
[data-theme-mode=dark] .highcharts-label-box,
[data-theme-mode=dark] .highcharts-tooltip-box {
  fill: #2b2b30 !important;
  stroke: transparent !important;  /* border */
}
/* for maps */
[data-theme-mode=dark] .highcharts-tooltip span {
  color: darkgrey !important;
}

[data-theme-mode=dark] .highcharts-grid-line {
  stroke: rgba(255, 255, 255, .06) !important;
}

[data-theme-mode=dark] .highcharts-pie-series .highcharts-point,
[data-theme-mode=dark] .highcharts-column-series path {
  stroke: transparent !important;
}

[data-theme-mode=dark] .highcharts-drilldown-data-label tspan {
  text-decoration: underline !important;
}

[data-theme-mode=dark] .highcharts-data-table tr {
  background-color: transparent !important;
}

[data-theme-mode=dark] .highcharts-exporting-group .highcharts-button-box {
  fill: transparent;
}
[data-theme-mode=dark] .highcharts-contextmenu .highcharts-menu {
  background-color: #2b2b30 !important;
  box-shadow: none !important;
}
[data-theme-mode=dark] .highcharts-contextmenu .highcharts-menu .highcharts-menu-item  {
  color: white !important;
}

[data-theme-mode=dark] .highcharts-tracker-line {
  stroke: grey !important;
  stroke-width: 1px
}
[data-theme-mode=dark] .highcharts-label-box.highcharts-annotation-label-box {
  fill: black !important;
}
[data-theme-mode=dark] .highcharts-annotation-label tspan {
  font-weight: normal !important;
}

/* separator slash in drilldowns */
[data-theme-mode=dark] .highcharts-breadcrumbs-separator text {
  fill: grey !important;
}

[data-theme-mode=dark] .custom-crosshair {
  stroke: rgb(255, 255, 255, .01) !important;
}

/* for maps */
[data-theme-mode=dark] .highcharts-series-group .highcharts-map-series .highcharts-point {
  stroke: silver !important;  /* border */
}
[data-theme-mode=dark] .highcharts-series-group .highcharts-map-series .highcharts-null-point {
  fill: grey !important;
}




/* buttons: for overall-activity */
[data-theme-mode=dark] .highcharts-range-selector-buttons text {
  fill: darkgray !important;
}
[data-theme-mode=dark] .highcharts-range-selector-buttons rect {
  fill: #2b2b30;
  stroke: transparent !important;
}
[data-theme-mode=dark] .highcharts-range-selector-buttons .highcharts-button-hover rect,
[data-theme-mode=dark] .highcharts-range-selector-buttons .highcharts-button-pressed rect {
  stroke: transparent !important;
  fill: rgba(255, 255, 255, .2);
}
/* [data-theme-mode=dark] .highcharts-range-selector-buttons .highcharts-button-hover text, */
/* [data-theme-mode=dark] .highcharts-range-selector-buttons .highcharts-button-pressed text { */
/*   fill: darkgrey !important; */
/* } */
[data-theme-mode=dark] .highcharts-navigator-xaxis .highcharts-text-outline {
  fill: transparent !important;
  stroke: transparent !important;
}


/* buttons: for detailed activity */
[data-theme-mode=dark] .highcharts-reset-zoom text {
  fill: darkgrey !important;
}
[data-theme-mode=dark] .highcharts-reset-zoom .highcharts-button-box,
[data-theme-mode=dark] .highcharts-reset-zoom.highcharts-button-normal rect {
  fill: #2b2b30;
  stroke: transparent !important;
}
[data-theme-mode=dark] .highcharts-reset-zoom.highcharts-button-pressed rect,
[data-theme-mode=dark] .highcharts-reset-zoom.highcharts-button-hover rect {
  stroke: transparent !important;
  fill: rgba(255, 255, 255, .2);
}


/* buttons: for drilldown */
[data-theme-mode=dark] .highcharts-button.highcharts-breadcrumbs-button.highcharts-button-pressed text,
[data-theme-mode=dark] .highcharts-button.highcharts-breadcrumbs-button.highcharts-button-hover text,
[data-theme-mode=dark] .highcharts-button.highcharts-breadcrumbs-button.highcharts-button-normal text {
  fill: darkgrey !important;
}
[data-theme-mode=dark] .highcharts-button.highcharts-breadcrumbs-button .highcharts-button-box {
  fill: #2b2b30;
  stroke: transparent !important;
}
[data-theme-mode=dark] .highcharts-button.highcharts-breadcrumbs-button.highcharts-button-hover rect,
[data-theme-mode=dark] .highcharts-button.highcharts-breadcrumbs-button.highcharts-button-pressed rect {
  stroke: transparent !important;
  fill: rgba(255, 255, 255, .2);
}