/* =========================================================================
   GLOBAL — Bootstrap theme variables
   These are provided by whichever Bootstrap theme (Flatly / Darkly) is active.
   ThemeSwitchAIO swaps stylesheets, Bootstrap updates these variables.
   ========================================================================= */

/*
Bootstrap exposes theme colors as CSS variables:
--bs-body-bg
--bs-body-color
--bs-border-color
--bs-tertiary-bg   (hover/secondary surfaces)
*/


/* =========================================================================
   DCC DROPDOWN (dash.dcc.Dropdown / React Select)
   ========================================================================= */

/* Closed dropdown control */
.Select-control {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 6px !important;
}

/* Placeholder text, selected value, typing input */
.Select-placeholder,
.Select-value-label,
.Select-input > input {
  color: var(--bs-body-color) !important;
}

/* Dropdown caret icon */
.Select-arrow {
  border-top-color: var(--bs-body-color) !important;
}


/* =========================================================================
   OPEN MENU PANEL
   ========================================================================= */

/* Wrapper (positioning + stacking above cards/AG grid/etc) */
.Select-menu-outer {
  position: absolute !important;
  z-index: 9999 !important;
  border: 1px solid var(--bs-border-color) !important;
  background-color: var(--bs-body-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Inner panel */
.Select-menu {
  background-color: var(--bs-body-bg) !important;
}


/* =========================================================================
   OPTIONS
   ========================================================================= */

/* Normal option */
.VirtualizedSelectOption {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Hovered / keyboard-highlighted option */
.VirtualizedSelectFocusedOption {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* =========================================================================
   FIX: Hovered dropdown option becomes white (make it themed instead)
   ========================================================================= */