/* The date picker has to open over the yield map, not under it.
 *
 * Leaflet stacks its own panes from z-index 200 (tiles) to 700 (popups) and its controls at 800,
 * and the map sits in a `position: relative` wrapper -- which with `z-index: auto` does not open a
 * new stacking context, so all of those numbers compete directly with everything else on the page.
 * react-dates, which is what `dcc.DatePickerRange` renders, gives its calendar `z-index: 1`. The
 * map is also later in the document, so it wins twice over and the calendar opened invisibly
 * behind the imagery.
 *
 * Fixed at both ends: the filter row is lifted above every Leaflet layer, and the calendar is
 * lifted above the row so it also clears the map's own overlays (the legend is at 1000).
 */

#hist-filters {
  position: relative;
  z-index: 1200;
}

/* react-dates' popup, which is portalled inside the input's wrapper rather than to the body --
 * so it inherits the row's stacking context and only needs to beat its siblings. The
 * `!important` is unavoidable: react-dates sets this inline. */
.DateRangePicker_picker,
.SingleDatePicker_picker {
  z-index: 1300 !important;
}

/* The two device/field dropdowns sit in the same row and open downward over the map for the same
 * reason. Menu portalling is off by default in `dcc.Dropdown`, so they need the same lift. */
#hist-filters .Select-menu-outer,
#hist-filters .VirtualizedSelectFocusedOption {
  z-index: 1300;
}