/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* PLOTLY CUSTOM STYLESHEET FOR STATISTIKPORTAL ZUG ::::::::::::::::::::::::: */
/* Custom styles for Plotly charts to match the theme of the application :::: */
/* Date: 2026-02-26 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* Set spikeline (stroke-width="3" => background halo, 
  stroke-width="1" => foreground line) */
.js-plotly-plot .spikeline[stroke-width="1"] {
  stroke: var(--bs-body-color) !important;
}

.js-plotly-plot .spikeline[stroke-width="3"] {
  stroke: var(--bs-body-bg) !important;
  stroke-opacity: 0.5 !important;
}

/* Set grid lines, using the chart text color with reduced opacity */
.js-plotly-plot .ygrid.crisp,
.js-plotly-plot .xgrid.crisp {
  stroke: var(--bs-body-color) !important;
  stroke-opacity: 0.3 !important;
}

/* Set hover labels background and border colors (tooltip) */
.js-plotly-plot .hoverlayer path {
  fill: var(--bs-body-bg) !important;
  stroke: var(--bs-border-color) !important;
  stroke-width: 1.5px !important;
}

.js-plotly-plot .hoverlayer .hovertext text {
  fill: var(--bs-body-color) !important;
}

/* Set update menu (dropdown) background and border colors, and hover effect */

.js-plotly-plot .updatemenu-item-rect {
  fill: var(--bs-body-bg) !important;
  stroke: var(--bs-border-color) !important;
}

.js-plotly-plot .updatemenu-item-rect:hover {
  filter: brightness(var(--updatemenu-hover-brightness)) !important;
  stroke: var(--bs-border-color) !important;
}

.js-plotly-plot .updatemenu-item-text {
  pointer-events: none;
  fill: var(--bs-body-color) !important;
}

.js-plotly-plot .updatemenu-header-arrow {
  fill: var(--bs-body-color) !important;
}

.js-plotly-plot .updatemenu-item-rect {
  rx: 3px;
  ry: 3px;
}

/* Design animation slider */
.js-plotly-plot rect.slider-grip-rect {
  width: 6px;
  height: 20px;
  rx: 1px;
  translate: 7px 0px;
  fill: var(--bs-border-color) !important;
  stroke: var(--bs-border-bg) !important;
}

.js-plotly-plot rect.slider-rail-rect {
  fill: var(--bs-body-bg) !important;
  stroke: var(--bs-border-color) !important;
  height: 6px !important;
  stroke-width: 1px !important
}

.js-plotly-plot .slider-tick-rect {
  fill: var(--bs-body-color) !important;
}

.js-plotly-plot .slider-label {
  fill: var(--bs-body-color) !important;
}

/* Allow the animation slider's currentvalue label to render outside the SVG
   viewport on mobile without using a CSS transform (transforms on SVG groups
   prevent Plotly from visually updating the slider handle during animation). */
.d-md-none .js-plotly-plot,
.d-md-none .js-plotly-plot svg {
  overflow: visible !important;
}


/* Native <select> (plus optional "Gemeinde:" label) replacing the SVG
   dropdown on mobile (built by plotly-menu.js). The wrapper carries
   .reactable-filter-wrapper for the same look as the reactable table filter
   (assets/css/reactable.css); this compound selector only overrides
   sizing/display so it spans the full plot width, sitting below the
   OGD/Excel/download button row and above the plot instead of overlaying
   the plot canvas. */
.plotly-mobile-menu-wrapper.reactable-filter-wrapper {
  display: flex;
  width: 100%;
  min-width: 0;
  margin-bottom: 6px;
}

.dropdown-menu {
  border-color: var(--bs-border-color) !important;
}