/* Dash 4.x dropdown — dark-theme styling for the CYBORG dashboard.

   Dash 4.x rewrote dcc.Dropdown (no more react-select) and themes it through
   --Dash-* design tokens that default to a LIGHT palette
   (--Dash-Fill-Inverse-Strong: #fff). With no override the control and its
   menu render white; on engines that auto-theme the native <button> trigger
   the result also differs across devices (the desktop-vs-iPad discrepancy).
   We pin the tokens + colors to a dark palette so the dropdown renders
   identically everywhere and matches CYBORG.

   The inline style={"backgroundColor": "#313244"} on dcc.Dropdown only reaches
   the .dash-dropdown-wrapper, which sits BEHIND the white button — which is why
   the prior fix (T16/T34) only darkened the text and looked right only while
   the button stayed white. That workaround is removed; this styles the control
   itself. */

/* Trigger button (closed state). The popover menu is portaled to <body>, so it
   must be targeted directly rather than via the wrapper. */
button.dash-dropdown,
.dash-dropdown-content {
    --Dash-Fill-Inverse-Strong: #313244;          /* control + menu background */
    --Dash-Text-Strong: #e6e6e6;                  /* value text + trigger icon */
    --Dash-Stroke-Strong: rgba(255, 255, 255, 0.18);
    --Dash-Stroke-Weak: rgba(255, 255, 255, 0.08);
    background: #313244 !important;
    color: #e6e6e6 !important;
}

/* Selected value + placeholder text */
button.dash-dropdown .dash-dropdown-value,
button.dash-dropdown .dash-dropdown-value-item,
button.dash-dropdown .dash-dropdown-value-item > span,
button.dash-dropdown .dash-dropdown-placeholder {
    color: #e6e6e6 !important;
}

/* Options in the open menu */
.dash-dropdown-option {
    color: #e6e6e6 !important;
}
.dash-dropdown-option:hover,
.dash-dropdown-option.selected,
.dash-dropdown-option[aria-selected="true"] {
    background: #45475a !important;
    color: #ffffff !important;
}
