/* Dropdown styling for Dash 2.14+ */
/* Forces BLACK text on WHITE bg in dropdown menus */

/* ── Dropdown MENU (the open list of options) ────────────────── */

/* Dash 2.x uses .VirtualizedSelectOption inside a menu wrapper.
   Also target generic .Select-menu-outer / .Select-option for safety. */

/* Menu container background */
.Select-menu-outer,
.Select-menu,
.VirtualizedSelectMenu,
div[class*="menu"] {
  background-color: #ffffff !important;
}

/* Option text — BLACK on every state */
.Select-option,
.Select-menu-outer *,
.Select-menu *,
.VirtualizedSelectOption,
.VirtualizedSelectFocusedOption,
.VirtualizedSelectSelectedOption,
.Select-noresults,
div[class*="option"] {
  color: #000000 !important;
  background-color: #ffffff !important;
}

/* Focused (hovered) option */
.Select-option.is-focused,
.VirtualizedSelectFocusedOption,
div[class*="option"]:hover {
  background-color: #dbeafe !important;
  color: #000000 !important;
}

/* Selected option */
.Select-option.is-selected,
.VirtualizedSelectSelectedOption {
  background-color: #bfdbfe !important;
  color: #000000 !important;
}

/* No results message */
.Select-noresults {
  color: #333333 !important;
  background-color: #ffffff !important;
}

/* ── The closed control bar — keep dark theme ────────────────── */
.dark-dropdown .Select-control,
.dark-dropdown .Select-control *,
.dark-dropdown .Select-input > input {
  color: #e6edf3 !important;
}
.dark-dropdown .Select-control {
  background-color: #21262d !important;
  border-color: #30363d !important;
}
.dark-dropdown .Select-placeholder,
.dark-dropdown span[class*="placeholder"] {
  color: #8b949e !important;
}
.dark-dropdown .Select-arrow-zone,
.dark-dropdown .Select-clear-zone {
  color: #8b949e !important;
}
.dark-dropdown .Select-arrow {
  border-color: #8b949e transparent transparent !important;
}
.dark-dropdown .Select-input > input {
  background: none !important;
}

/* Multi-value chips */
.dark-dropdown .Select-value {
  background-color: #161b22 !important;
  border-color: #30363d !important;
}
.dark-dropdown .Select-value .Select-value-label {
  color: #58a6ff !important;
}
.dark-dropdown .Select-value .Select-value-icon {
  color: #58a6ff !important;
  border-color: #30363d !important;
}

/* ── Scoped to approach filter dropdowns specifically ─────────── */
/* Target by component ID to guarantee specificity */
#tail-filter .VirtualizedSelectOption,
#dep-filter .VirtualizedSelectOption,
#arr-filter .VirtualizedSelectOption,
#approach-tail-filter .VirtualizedSelectOption,
#approach-dep-filter .VirtualizedSelectOption,
#approach-arr-filter .VirtualizedSelectOption,
#tail-filter div[class*="option"],
#dep-filter div[class*="option"],
#arr-filter div[class*="option"],
#approach-tail-filter div[class*="option"],
#approach-dep-filter div[class*="option"],
#approach-arr-filter div[class*="option"] {
  color: #000000 !important;
  background-color: #ffffff !important;
}

#tail-filter .VirtualizedSelectFocusedOption,
#dep-filter .VirtualizedSelectFocusedOption,
#arr-filter .VirtualizedSelectFocusedOption,
#approach-tail-filter .VirtualizedSelectFocusedOption,
#approach-dep-filter .VirtualizedSelectFocusedOption,
#approach-arr-filter .VirtualizedSelectFocusedOption,
#tail-filter div[class*="option"]:hover,
#dep-filter div[class*="option"]:hover,
#arr-filter div[class*="option"]:hover,
#approach-tail-filter div[class*="option"]:hover,
#approach-dep-filter div[class*="option"]:hover,
#approach-arr-filter div[class*="option"]:hover {
  background-color: #dbeafe !important;
  color: #000000 !important;
}

/* Plotly map buttons */
.updatemenu-item rect { fill: #21262d !important; }
.updatemenu-item text { fill: #e6edf3 !important; }