/* High Specificity Dash Dropdown Styling - Override defaults */

/* Primary dropdown control container */
.Select .Select-control,
.dash-dropdown .Select-control {
    background-color: #2C2C2C !important;
    border: 1px solid #555555 !important;
    color: #FFFFFF !important;
}

/* Placeholder text */
.Select .Select-placeholder,
.dash-dropdown .Select-placeholder {
    color: #CCCCCC !important;
}

/* Selected value text - CRITICAL FIX */
.Select .Select-value-label,
.dash-dropdown .Select-value-label {
    color: #FFFFFF !important;
}

/* Input field when searchable */
.Select .Select-input > input,
.dash-dropdown .Select-input > input {
    color: #FFFFFF !important;
    background-color: transparent !important;
}

/* Dropdown arrow */
.Select .Select-arrow-zone .Select-arrow,
.dash-dropdown .Select-arrow-zone .Select-arrow {
    border-color: #FFFFFF transparent transparent !important;
}

/* Dropdown menu outer container */
.Select .Select-menu-outer,
.dash-dropdown .Select-menu-outer {
    background-color: #2C2C2C !important;
    border: 1px solid #555555 !important;
    border-top: none !important;
}

/* Menu itself */
.Select .Select-menu,
.dash-dropdown .Select-menu {
    background-color: #2C2C2C !important;
}

/* Individual dropdown options - CRITICAL FIX */
.Select .Select-option,
.dash-dropdown .Select-option {
    color: #FFFFFF !important;
    background-color: #2C2C2C !important;
    padding: 8px 12px !important;
}

/* Hovered/focused option */
.Select .Select-option:hover,
.Select .Select-option.is-focused,
.dash-dropdown .Select-option:hover,
.dash-dropdown .Select-option.is-focused {
    background-color: #404040 !important;
    color: #FFFFFF !important;
}

/* Selected option in dropdown */
.Select .Select-option.is-selected,
.dash-dropdown .Select-option.is-selected {
    background-color: #C8102E !important;
    color: #FFFFFF !important;
}

/* Multi-select option styling */
.Select.is-multi .Select-value,
.dash-dropdown.is-multi .Select-value {
    background-color: #404040 !important;
    color: #FFFFFF !important;
    border: 1px solid #555555 !important;
}

/* VirtualizedSelect fallback (if used) */
.VirtualizedSelectOption {
    color: #FFFFFF !important;
    background-color: #2C2C2C !important;
    padding: 8px 12px !important;
}

.VirtualizedSelectFocusedOption {
    background-color: #404040 !important;
    color: #FFFFFF !important;
}

/* Target the input field within the DatePickerSingle */
.SingleDatePickerInput__withBorder .DateInput_input {
    background-color: #A9A9A9 !important; /* THIS IS THE NEW BACKGROUND COLOR (DarkGray) */
    color: #000000 !important;           /* Black text color for good contrast on DarkGray */
    border: 1px solid #555555 !important;
    border-radius: 3px !important;
    padding: 5px 8px !important;
    box-sizing: border-box;
    width: 100%;
}

/* --- Style for selected radio buttons --- */
input[type="radio"]:checked {
    accent-color: #C00000;
}

/*S30.5 */
#global-reviewer-type-filter .Select-value-label {
    color: red !important;
}

/*S30.5 */
/* === Styles for the 'Select Reviewer Type(s)' Dropdown === */

/* Change text color of selected items */
#global-reviewer-type-filter .Select-value-label {
    color: rgb(245, 193, 193) !important;
}

/* NEW: Change border color of the selected item box */
#global-reviewer-type-filter .Select-value {
    border: 1px solid #fd0202 !important; /* A slightly lighter red for the border */
    background-color: #5c1f1f !important;  /* A dark red background */
}

/* NEW: Change color of the 'x' remove icon */
#global-reviewer-type-filter .Select-value-icon {
    color: #fbf7f7 !important; /* A slightly lighter red for the icon */
}

/* ===================================================================
   DASH DATA TABLE DARK THEME - Filter Inputs and Headers
   =================================================================== */

/* DataTable filter input fields */
.dash-table-container .dash-filter input {
    background-color: #1E1E1E !important;
    color: #FFFFFF !important;
    border: 1px solid #666 !important;
    padding: 6px 8px !important;
}

.dash-table-container .dash-filter input::placeholder {
    color: #999999 !important;
}

/* DataTable filter select dropdowns */
.dash-table-container .dash-filter select {
    background-color: #1E1E1E !important;
    color: #FFFFFF !important;
    border: 1px solid #666 !important;
    padding: 6px 8px !important;
}

/* DataTable filter select options */
.dash-table-container .dash-filter select option {
    background-color: #1E1E1E !important;
    color: #FFFFFF !important;
}

/* DataTable headers */
.dash-table-container .dash-header {
    background-color: #2C2C2C !important;
    color: #FFFFFF !important;
}

/* DataTable cells */
.dash-table-container .dash-cell {
    background-color: #1E1E1E !important;
    color: #E0E0E0 !important;
    border: 1px solid #444 !important;
}

/* DataTable odd rows */
.dash-table-container tr:nth-child(odd) .dash-cell {
    background-color: #282828 !important;
}

/* DataTable selected rows */
.dash-table-container .dash-cell.cell--selected {
    background-color: rgba(200, 16, 46, 0.25) !important;
    border: 1px solid #C8102E !important;
    color: #FFFFFF !important;
}

/* Staff Master table specific - highest priority */
#staff-master-grid .dash-filter input,
#staff-master-grid input[type="text"] {
    background-color: #1E1E1E !important;
    color: #FFFFFF !important;
    border: 1px solid #666 !important;
}

#staff-master-grid .dash-filter select,
#staff-master-grid select {
    background-color: #1E1E1E !important;
    color: #FFFFFF !important;
    border: 1px solid #666 !important;
}

#staff-master-grid .dash-filter select option {
    background-color: #1E1E1E !important;
    color: #FFFFFF !important;
}