/* Dark theme CSS for Qligence Performance Dashboard */

/* ========== DROPDOWN STYLING ========== */

/* Dropdown container - main wrapper */
.dash-dropdown-dark .Select-control,
.dash-dropdown-dark > div > div {
    background-color: #303030 !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
}

/* Selected value text */
.dash-dropdown-dark .Select-value-label,
.dash-dropdown-dark .Select-placeholder,
.dash-dropdown-dark .Select-value,
.dash-dropdown-dark span {
    color: #e0e0e0 !important;
}

/* Input field for typing/search */
.dash-dropdown-dark .Select-input input,
.dash-dropdown-dark input {
    color: #e0e0e0 !important;
    background-color: transparent !important;
}

/* Dropdown menu container */
.dash-dropdown-dark .Select-menu-outer,
.dash-dropdown-dark .Select-menu,
.Select-menu-outer {
    background-color: #303030 !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
}

/* Individual options in dropdown */
.dash-dropdown-dark .VirtualizedSelectOption,
.dash-dropdown-dark .Select-option,
.VirtualizedSelectOption,
.Select-option,
div[class*="option"] {
    background-color: #303030 !important;
    color: #e0e0e0 !important;
}

/* Hovered/focused option */
.dash-dropdown-dark .VirtualizedSelectFocusedOption,
.dash-dropdown-dark .Select-option.is-focused,
.VirtualizedSelectFocusedOption,
.Select-option.is-focused,
div[class*="option"]:hover {
    background-color: #444 !important;
    color: #fff !important;
}

/* Selected option highlight */
.dash-dropdown-dark .Select-option.is-selected,
.Select-option.is-selected {
    background-color: #0d6efd !important;
    color: #fff !important;
}

/* Arrow indicator */
.dash-dropdown-dark .Select-arrow {
    border-color: #e0e0e0 transparent transparent !important;
}
.dash-dropdown-dark.is-open .Select-arrow {
    border-color: transparent transparent #e0e0e0 !important;
}

/* Clear button */
.dash-dropdown-dark .Select-clear,
.dash-dropdown-dark .Select-clear-zone {
    color: #e0e0e0 !important;
}

/* No results message */
.dash-dropdown-dark .Select-noresults {
    background-color: #303030 !important;
    color: #e0e0e0 !important;
}

/* ========== DATE PICKER STYLING ========== */
.DateRangePickerInput {
    background-color: #303030 !important;
    border: 1px solid #444 !important;
}
.DateInput_input {
    background-color: #303030 !important;
    color: #e0e0e0 !important;
    border: none !important;
}
.DateRangePickerInput_arrow_svg {
    fill: #e0e0e0 !important;
}