/* Custom styles for TPC-BI Dashboard */

/* Dropdown menu styling - fix white text on white background */
/* Target Dash dcc.Dropdown menu items */

/* Main dropdown menu container */
.dashboard-dropdown .Select-menu-outer,
.dashboard-dropdown div[class*="menu"] {
    background-color: white !important;
    border: 1px solid #e1e8ed !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Dropdown menu items */
.dashboard-dropdown .Select-option,
.dashboard-dropdown div[class*="option"] {
    background-color: white !important;
    color: #2c3e50 !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Hover state */
.dashboard-dropdown .Select-option:hover,
.dashboard-dropdown div[class*="option"]:hover,
.dashboard-dropdown .Select-option.is-focused,
.dashboard-dropdown div[class*="option"][class*="focused"] {
    background-color: #e8f4f8 !important;
    color: #317BAB !important;
}

/* Selected state */
.dashboard-dropdown .Select-option.is-selected,
.dashboard-dropdown div[class*="option"][class*="selected"] {
    background-color: #317BAB !important;
    color: white !important;
}

/* Dropdown control */
.dashboard-dropdown .Select-control,
.dashboard-dropdown div[class*="control"] {
    background-color: white !important;
    border: 1px solid #e1e8ed !important;
    border-radius: 6px !important;
}

/* Selected value text */
.dashboard-dropdown .Select-value-label,
.dashboard-dropdown div[class*="singleValue"] {
    color: #2c3e50 !important;
    font-weight: 500 !important;
}

/* Placeholder text */
.dashboard-dropdown .Select-placeholder,
.dashboard-dropdown div[class*="placeholder"] {
    color: #7f8c8d !important;
}

/* Try to override any inline styles with very specific selectors */
#page-selector .Select-menu-outer {
    background: white !important;
}

#page-selector .Select-option {
    color: #2c3e50 !important;
    background: white !important;
}

#page-selector .Select-option:hover {
    background-color: #e8f4f8 !important;
    color: #317BAB !important;
}

/* For newer Dash versions using different structure */
#page-selector > div > div:last-child > div > div {
    background-color: white !important;
}

#page-selector > div > div:last-child > div > div > div {
    color: #2c3e50 !important;
    background-color: white !important;
}

#page-selector > div > div:last-child > div > div > div:hover {
    background-color: #e8f4f8 !important;
    color: #317BAB !important;
}