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

/* Primary dropdown control container */
.Select .Select-control,
.dash-dropdown .Select-control {
    background-color: #111c34 !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: #111c34 !important;
    border: 1px solid #555555 !important;
    border-top: none !important;
}

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

/* Individual dropdown options - CRITICAL FIX */
.Select .Select-option,
.dash-dropdown .Select-option {
    color: #FFFFFF !important;
    background-color: #111c34 !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: #111c34 !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: #111c34 !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: #111c34 !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: #111c34 !important;
    color: #FFFFFF !important;
}

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

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

/* DataTable odd rows */
.dash-table-container tr:nth-child(odd) .dash-cell {
    background-color: #111c34 !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: #111c34 !important;
    color: #FFFFFF !important;
    border: 1px solid #666 !important;
}

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

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

/* ===================================================================
   STAFF MASTER DRAWER STYLING (PM43)
   Card-based layout with responsive design
   =================================================================== */

/* Drawer card container */
.staff-drawer-card {
    background-color: #111c34;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

/* Section headings inside drawer */
.staff-drawer-section-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: #CCCCCC;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #444;
}

/* Two-column responsive grid for form fields */
.staff-drawer-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 1rem;
}

/* Single column for mobile */
@media (max-width: 768px) {
    .staff-drawer-two-column {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Dark input styling for drawer */
.staff-drawer-input,
.staff-drawer-textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #666;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: #111c34;
    color: #F0F0F0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.staff-drawer-input:focus,
.staff-drawer-textarea:focus {
    outline: none;
    border-color: #C8102E;
    box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.2);
}

.staff-drawer-textarea {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}

/* Input labels */
.staff-drawer-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #E0E0E0;
}

.staff-drawer-label-required::after {
    content: ' *';
    color: #C8102E;
}

/* Validation hint text */
.staff-drawer-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #9CA3AF;
    font-style: italic;
}

/* Bootstrap switch styling override for drawer */
.staff-drawer-card .form-check-input {
    background-color: #555 !important;
    border-color: #555 !important;
}

.staff-drawer-card .form-check-input:checked {
    background-color: #C8102E !important;
    border-color: #C8102E !important;
}

.staff-drawer-card .form-check-label {
    color: #E0E0E0;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Classification review banner inside drawer */
.staff-drawer-classification-banner {
    background-color: #2C1810;
    border-left: 4px solid #D97706;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.staff-drawer-classification-banner-icon {
    color: #FCD34D;
    font-size: 1.25rem;
    margin-right: 0.75rem;
}

.staff-drawer-classification-banner-text {
    font-size: 0.875rem;
    color: #FCD34D;
    font-weight: 500;
}

/* Button footer with separator */
.staff-drawer-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #444;
    background-color: transparent;
}

/* DatePicker styling for drawer */
.staff-drawer-datepicker .SingleDatePickerInput__withBorder .DateInput_input {
    background-color: #111c34 !important;
    color: #F0F0F0 !important;
    border: 1px solid #666 !important;
    border-radius: 0.375rem !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem !important;
}

.staff-drawer-datepicker .SingleDatePickerInput__withBorder .DateInput_input:focus {
    border-color: #C8102E !important;
    box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.2) !important;
}

/* Number input specific styling */
.staff-drawer-input[type="number"] {
    -moz-appearance: textfield;
}

.staff-drawer-input[type="number"]::-webkit-outer-spin-button,
.staff-drawer-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}