/* =========================================================================
   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)
   ========================================================================= */


/* =========================================================================
   PAGE NAV PILLS
   ========================================================================= */

.app-navbar .container-fluid,
.app-navbar .container {
  align-items: stretch;
}

.page-nav {
  margin-top: 0;
  margin-bottom: -0.6rem;
  align-self: flex-end;
}

.page-nav .nav-link.page-nav-link {
  color: var(--bs-body-color) !important;
  background-color: transparent !important;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.7rem 0.7rem 0 0;
  padding: 0.55rem 1rem 0.7rem 1rem;
  line-height: 1.1;
  margin-right: 0.25rem;
}

.page-nav .nav-link.page-nav-link:hover,
.page-nav .nav-link.page-nav-link:focus {
  background-color: color-mix(in srgb, var(--bs-tertiary-bg) 80%, var(--bs-body-bg)) !important;
  color: var(--bs-body-color) !important;
}

.page-nav .nav-link.page-nav-link.active {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
  border-bottom-color: var(--bs-body-bg) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .page-nav .nav-link.page-nav-link.active {
  background-color: color-mix(in srgb, var(--bs-body-bg) 94%, white 6%) !important;
  color: #fff !important;
}


/* =========================================================================
   PORTFOLIO CONNECTIONS
   ========================================================================= */

.portfolio-connections-scroll {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.portfolio-connection-card .card-body {
  padding: 0.55rem 0.8rem;
}


/* =========================================================================
   BEST COMBO TIMEFRAME
   ========================================================================= */

.combo-timeframe-selector .form-check {
  display: inline-flex;
  align-items: center;
  margin-right: 0.9rem;
  margin-bottom: 0;
}

.combo-timeframe-selector .combo-timeframe-input {
  margin-right: 0.35rem;
}

.combo-timeframe-selector .combo-timeframe-label {
  margin-right: 0;
  min-width: 2.4rem;
  font-weight: 400;
}