:is(#app-root, body, html)[data-theme="dark"] {
  --ui-bg: #0f131a;
  --ui-bg-2: #141a23;
  --ui-border: rgba(255, 255, 255, 0.12);
  --ui-border-focus: rgba(120, 170, 255, 0.55);
  --ui-text: rgba(233, 238, 245, 0.95);
  --ui-text-muted: rgba(233, 238, 245, 0.65);
  --ui-placeholder: rgba(233, 238, 245, 0.45);
  --ui-focus-ring: 0 0 0 3px rgba(120, 170, 255, 0.20);
}

/* Global control baseline (text/date/number/select/textarea + bootstrap wrappers). */
:is(#app-root, body, html)[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:is(#app-root, body, html)[data-theme="dark"] select,
:is(#app-root, body, html)[data-theme="dark"] textarea,
:is(#app-root, body, html)[data-theme="dark"] .form-control,
:is(#app-root, body, html)[data-theme="dark"] .form-select,
:is(#app-root, body, html)[data-theme="dark"] .dbc input,
:is(#app-root, body, html)[data-theme="dark"] .dbc select,
:is(#app-root, body, html)[data-theme="dark"] .dark-input,
:is(#app-root, body, html)[data-theme="dark"] .ui-input,
:is(#app-root, body, html)[data-theme="dark"] .ui-input-dark {
  color: var(--ui-text) !important;
  background-color: var(--ui-bg-2) !important;
  border: 1px solid var(--ui-border) !important;
  caret-color: var(--ui-text) !important;
  -webkit-text-fill-color: var(--ui-text) !important;
}

:is(#app-root, body, html)[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])::placeholder,
:is(#app-root, body, html)[data-theme="dark"] select::placeholder,
:is(#app-root, body, html)[data-theme="dark"] textarea::placeholder,
:is(#app-root, body, html)[data-theme="dark"] .form-control::placeholder,
:is(#app-root, body, html)[data-theme="dark"] .dark-input::placeholder,
:is(#app-root, body, html)[data-theme="dark"] .ui-input::placeholder,
:is(#app-root, body, html)[data-theme="dark"] .ui-input-dark::placeholder {
  color: var(--ui-placeholder) !important;
  opacity: 1 !important;
}

:is(#app-root, body, html)[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
:is(#app-root, body, html)[data-theme="dark"] select:focus,
:is(#app-root, body, html)[data-theme="dark"] textarea:focus,
:is(#app-root, body, html)[data-theme="dark"] .form-control:focus,
:is(#app-root, body, html)[data-theme="dark"] .form-select:focus,
:is(#app-root, body, html)[data-theme="dark"] .dark-input:focus,
:is(#app-root, body, html)[data-theme="dark"] .ui-input:focus,
:is(#app-root, body, html)[data-theme="dark"] .ui-input-dark:focus {
  outline: none !important;
  border-color: var(--ui-border-focus) !important;
  box-shadow: var(--ui-focus-ring) !important;
}

:is(#app-root, body, html)[data-theme="dark"] input:-webkit-autofill,
:is(#app-root, body, html)[data-theme="dark"] input:-webkit-autofill:hover,
:is(#app-root, body, html)[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ui-text) !important;
  box-shadow: 0 0 0 1000px var(--ui-bg-2) inset !important;
  caret-color: var(--ui-text) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .input-group-text {
  background-color: var(--ui-bg) !important;
  color: var(--ui-text-muted) !important;
  border-color: var(--ui-border) !important;
}

/* Dash Dropdown (react-select v1 classes). */
:is(#app-root, body, html)[data-theme="dark"] .Select-control {
  background: var(--ui-bg-2) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  box-shadow: none !important;
}

:is(#app-root, body, html)[data-theme="dark"] .Select--single > .Select-control .Select-value,
:is(#app-root, body, html)[data-theme="dark"] .Select-value-label,
:is(#app-root, body, html)[data-theme="dark"] .Select-input > input {
  color: var(--ui-text) !important;
  -webkit-text-fill-color: var(--ui-text) !important;
  opacity: 1 !important;
}

:is(#app-root, body, html)[data-theme="dark"] .Select-placeholder {
  color: var(--ui-placeholder) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .Select-menu-outer {
  background: var(--ui-bg-2) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .Select-option {
  background: var(--ui-bg-2) !important;
  color: var(--ui-text) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .Select-option.is-focused {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ui-text) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .Select-option.is-selected {
  background: rgba(120, 170, 255, 0.22) !important;
  color: var(--ui-text) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .Select.is-focused > .Select-control,
:is(#app-root, body, html)[data-theme="dark"] .Select-control:hover {
  border-color: var(--ui-border-focus) !important;
  box-shadow: var(--ui-focus-ring) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .Select-arrow-zone,
:is(#app-root, body, html)[data-theme="dark"] .Select-clear-zone {
  color: var(--ui-text-muted) !important;
}

/* Dash DataTable: headers, cells, active/selected, and filter/editor inputs. */
:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container,
:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-inner {
  background: var(--ui-bg-2) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th,
:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td,
:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th *,
:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td * {
  background: var(--ui-bg-2) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell--focused,
:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell--selected,
:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--ui-text) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-filter input,
:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td input,
:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td textarea {
  background: var(--ui-bg-2) !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-border) !important;
  caret-color: var(--ui-text) !important;
  -webkit-text-fill-color: var(--ui-text) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-filter input::placeholder,
:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td input::placeholder,
:is(#app-root, body, html)[data-theme="dark"] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td textarea::placeholder {
  color: var(--ui-placeholder) !important;
}

/* Dash date picker controls. */
:is(#app-root, body, html)[data-theme="dark"] .DateInput,
:is(#app-root, body, html)[data-theme="dark"] .DateRangePickerInput,
:is(#app-root, body, html)[data-theme="dark"] .SingleDatePickerInput {
  background: var(--ui-bg-2) !important;
  border-color: var(--ui-border) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .DateInput_input {
  background: var(--ui-bg-2) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  caret-color: var(--ui-text) !important;
  -webkit-text-fill-color: var(--ui-text) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .DateInput_input::placeholder {
  color: var(--ui-placeholder) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .DateInput_input__focused {
  border-color: var(--ui-border-focus) !important;
  box-shadow: var(--ui-focus-ring) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .DayPicker,
:is(#app-root, body, html)[data-theme="dark"] .DayPicker_transitionContainer,
:is(#app-root, body, html)[data-theme="dark"] .CalendarMonth,
:is(#app-root, body, html)[data-theme="dark"] .CalendarMonthGrid {
  background: var(--ui-bg-2) !important;
  color: var(--ui-text) !important;
}

/* Dash 4 / react-select v2 dropdown classes. */
:is(#app-root, body, html)[data-theme="dark"] .react-select__control {
  background: var(--ui-bg-2) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__control--is-focused,
:is(#app-root, body, html)[data-theme="dark"] .react-select__control:hover {
  border-color: var(--ui-border-focus) !important;
  box-shadow: var(--ui-focus-ring) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__value-container {
  background: transparent !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__single-value {
  color: var(--ui-text) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__placeholder {
  color: var(--ui-placeholder) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__menu {
  background: var(--ui-bg-2) !important;
  border: 1px solid var(--ui-border) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__menu-list {
  background: var(--ui-bg-2) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__option {
  color: var(--ui-text) !important;
  background: var(--ui-bg-2) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__option--is-focused {
  background: rgba(255, 255, 255, 0.06) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__option--is-selected {
  background: rgba(120, 170, 255, 0.16) !important;
  color: var(--ui-text) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__indicator,
:is(#app-root, body, html)[data-theme="dark"] .react-select__dropdown-indicator,
:is(#app-root, body, html)[data-theme="dark"] .react-select__clear-indicator {
  color: var(--ui-text-muted) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__indicator-separator {
  background-color: var(--ui-border) !important;
}

:is(#app-root, body, html)[data-theme="dark"] .react-select__input-container,
:is(#app-root, body, html)[data-theme="dark"] .react-select__input-container input {
  color: var(--ui-text) !important;
  caret-color: var(--ui-text) !important;
  -webkit-text-fill-color: var(--ui-text) !important;
}

/* Hard override for Dash inputs to guarantee typed-text visibility. */
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element,
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element[type="number"],
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element[type="text"],
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element[type="search"],
:is(#app-root, body, html)[data-theme="dark"] textarea.dash-input-element,
:is(#app-root, body, html)[data-theme="dark"] .dash-input input,
:is(#app-root, body, html)[data-theme="dark"] .dash-input-element:focus {
  background-color: var(--ui-bg-2) !important;
  color: var(--ui-text) !important;
  caret-color: var(--ui-text) !important;
  -webkit-text-fill-color: var(--ui-text) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  border: 1px solid var(--ui-border) !important;
}

:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element::placeholder,
:is(#app-root, body, html)[data-theme="dark"] textarea.dash-input-element::placeholder {
  color: var(--ui-placeholder) !important;
  opacity: 1 !important;
}

/* Remove native browser number steppers (+/- or arrow spinner UI). */
:is(#app-root, body, html)[data-theme="dark"] input[type="number"],
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element[type="number"] {
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

:is(#app-root, body, html)[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button,
:is(#app-root, body, html)[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* --- Disable Dash stepper overlay buttons (the injected +/-) --- */
.dash-input-stepper,
.dash-stepper-increment,
.dash-stepper-decrement {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ensure the input has normal padding and no space reserved for steppers */
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element[type="number"] {
  padding-right: 12px !important;
  padding-left: 12px !important;
}

/* Remove browser-native spinners too (Chrome/Safari/Edge) */
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element[type="number"]::-webkit-outer-spin-button,
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Firefox */
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* --- FINAL OVERRIDE: force Dash core input visibility everywhere --- */
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element,
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element[type="number"],
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element[type="text"],
:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element[type="search"],
:is(#app-root, body, html)[data-theme="dark"] textarea.dash-input-element {
  background-color: var(--ui-bg-2) !important;
  background: var(--ui-bg-2) !important;
  color: var(--ui-text) !important;
  caret-color: var(--ui-text) !important;
  -webkit-text-fill-color: var(--ui-text) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  border: 1px solid var(--ui-border) !important;
}

:is(#app-root, body, html)[data-theme="dark"] input.dash-input-element::placeholder,
:is(#app-root, body, html)[data-theme="dark"] textarea.dash-input-element::placeholder {
  color: var(--ui-placeholder) !important;
  opacity: 1 !important;
}