/* ── Overrides de alta especificidade — Dash 2.x classes ───────────────────── */

/* Brutal catch-all: qualquer elemento dentro de #filter-expert (o id do Dropdown) */
#filter-expert,
#filter-expert *,
#filter-expert + div,
#filter-expert + div * {
  color: #F1F5F9 !important;
  background-color: #162033 !important;
}

/* Somente bordas/foco via id — sem sobrescrever menus de cor branca */
div[id="filter-expert"] button,
div[id="filter-expert"] [role="combobox"],
div[id="filter-expert"] [role="listbox"] {
  background-color: #162033 !important;
  border-color: #253550 !important;
  color: #F1F5F9 !important;
}

/* ── Dropdown wrapper ───────────────────────────────────────────────────────── */
.dash-dropdown-wrapper,
.dash-dropdown-wrapper * {
  color: #F1F5F9 !important;
  font-size: 15px !important;
}

/* Trigger button (the visible "control" area) */
button.dash-dropdown {
  background-color: #162033 !important;
  border: 1px solid #253550 !important;
  border-radius: 6px !important;
  color: #F1F5F9 !important;
  min-height: 40px !important;
  box-shadow: none !important;
  outline: none !important;
}
button.dash-dropdown:hover {
  border-color: #0EA5E9 !important;
}
button.dash-dropdown:focus {
  border-color: #0EA5E9 !important;
  box-shadow: 0 0 0 2px rgba(14,165,233,0.2) !important;
}

/* Selected value and placeholder text */
.dash-dropdown-value,
.dash-dropdown-placeholder {
  color: #F1F5F9 !important;
  font-size: 15px !important;
}

/* Grid container inside trigger */
.dash-dropdown-grid-container {
  color: #F1F5F9 !important;
}

/* Dropdown menu (the popup list) */
.dash-dropdown-menu,
.dash-dropdown-options,
[class*="dash-dropdown-menu"],
[class*="VirtualizedSelectList"] {
  background-color: #162033 !important;
  border: 1px solid #253550 !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  z-index: 9999 !important;
  color: #F1F5F9 !important;
}

/* Individual options */
.dash-dropdown-option,
[class*="dash-dropdown-option"] {
  background-color: #162033 !important;
  color: #F1F5F9 !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
}
.dash-dropdown-option:hover,
.dash-dropdown-option.focused,
.dash-dropdown-option.active {
  background-color: #1C2840 !important;
  color: #0EA5E9 !important;
}
.dash-dropdown-option.selected {
  background-color: rgba(14,165,233,0.2) !important;
  color: #0EA5E9 !important;
  font-weight: 600 !important;
}

/* Catch-all: any element inside .filter-dropdown */
.filter-dropdown,
.filter-dropdown * {
  color: #F1F5F9 !important;
}
.filter-dropdown button,
.filter-dropdown [role="listbox"],
.filter-dropdown [role="option"] {
  background-color: #162033 !important;
  border-color: #253550 !important;
  color: #F1F5F9 !important;
}

/* ── Date picker dark — Dash 2.x (dash-datepicker classes) ─────────────────── */

/* Trigger button (input wrapper) */
.dash-datepicker-input-wrapper,
button.dash-datepicker-input-wrapper {
  background-color: #162033 !important;
  background:       #162033 !important;
  border:           1px solid #253550 !important;
  border-radius:    6px !important;
  color:            #F1F5F9 !important;
  box-shadow:       none !important;
  min-height:       40px !important;
  height:           40px !important;
  padding:          0 12px !important;
  display:          flex !important;
  align-items:      center !important;
}
.dash-datepicker-input-wrapper:hover {
  border-color: #0EA5E9 !important;
}

/* All text/spans inside the date picker trigger */
.dash-datepicker-input-wrapper *,
.dash-datepicker * {
  color: #F1F5F9 !important;
}

/* The SVG arrow between dates and caret icon */
.dash-datepicker-range-arrow svg,
.dash-datepicker-caret-icon svg {
  fill:   #94A3B8 !important;
  stroke: #94A3B8 !important;
}
.dash-datepicker-range-arrow path,
.dash-datepicker-caret-icon path {
  fill:   #94A3B8 !important;
  stroke: #94A3B8 !important;
}

/* Popup/calendar content */
.dash-datepicker-content,
[class*="dash-datepicker-content"] {
  background-color: #0E1729 !important;
  border:           1px solid #253550 !important;
  border-radius:    8px !important;
  box-shadow:       0 8px 32px rgba(0,0,0,0.5) !important;
  color:            #F1F5F9 !important;
}
.dash-datepicker-content * {
  color: #F1F5F9 !important;
}

/* Day cells */
.dash-datepicker-content [class*="day"]:not([class*="selected"]):not([class*="range"]) {
  background-color: #0E1729 !important;
  color:            #94A3B8 !important;
}
.dash-datepicker-content [class*="day"]:hover {
  background-color: #162033 !important;
  color:            #0EA5E9 !important;
}
.dash-datepicker-content [class*="selected"] {
  background-color: #0EA5E9 !important;
  color:            #fff !important;
}
.dash-datepicker-content [class*="range"] {
  background-color: rgba(14,165,233,0.15) !important;
  color:            #F1F5F9 !important;
}

/* Outer wrapper — remove o fundo branco que aparece na quina */
.dash-datepicker,
div[class="dash-datepicker"] {
  background-color: transparent !important;
  background:       transparent !important;
  color:            #F1F5F9 !important;
  --Dash-Stroke-Strong: #253550 !important;
  --Dash-Background-Primary: #162033 !important;
}