/* ------------------------------------------------------------------
   dcc.Dropdown menu visibility (applies to every tab)

   1. react-select v1 ships `.Select-menu-outer` with `z-index: 1`, so
      the Plotly graph / KPI cards rendered further down the page paint
      on top of an open menu. Raise it.
   2. In the narrow filter sidebar long option labels ("Tipo de
      Indicador", "Indicador", município / síndrome names) are clipped.
      Dropdowns with very long labels opt in with className="dd-long":
      a wider menu whose option text wraps instead of being truncated
      (row height comes from the `optionHeight` prop on the component).
   ------------------------------------------------------------------ */

.Select-menu-outer {
    z-index: 1500 !important;
    min-width: 100%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.Select.is-open {
    position: relative;
    z-index: 1500;
}

/* keep Plotly graphs from forming a layer that covers the filter menus */
.js-plotly-plot,
.js-plotly-plot .plot-container,
.dash-graph {
    z-index: 0;
}

/* ---- long-label dropdowns -------------------------------------------------- */

.Select.dd-long .Select-menu-outer {
    width: 380px;
    min-width: 100%;
    max-width: 92vw;
}

.Select.dd-long .Select-menu-outer .VirtualizedSelectOption,
.Select.dd-long .Select-menu-outer .Select-option {
    white-space: normal !important;
    line-height: 1.3;
    display: flex;
    align-items: center;
}