/* ── dcc.Dropdown dark theme (Dash 4) ──────────────────────────────────────── */

.dash-dropdown-wrapper {
    background-color: #2a2a2e !important;
    border: 1px solid #555 !important;
    border-radius: 4px !important;
    color: #ccc !important;
}

.dash-dropdown-trigger {
    background-color: #2a2a2e !important;
    color: #ccc !important;
}

.dash-dropdown-value {
    color: #ccc !important;
}

.dash-dropdown-placeholder {
    color: #666 !important;
}

.dash-dropdown-value-item {
    background-color: #1a4a6e !important;
    color: #ccc !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
}

.dash-dropdown-content {
    background-color: #2a2a2e !important;
    border: 1px solid #555 !important;
    z-index: 9999 !important;
}

.dash-dropdown-options {
    background-color: #2a2a2e !important;
}

.dash-dropdown-option {
    background-color: #2a2a2e !important;
    color: #ccc !important;
}

.dash-dropdown-option:hover {
    background-color: #3a3a45 !important;
    color: #eee !important;
}

.dash-dropdown-option[aria-selected="true"] {
    background-color: #1a4a6e !important;
    color: #fff !important;
}

.dash-dropdown-search input {
    background-color: #1e1e26 !important;
    color: #eee !important;
    border: 1px solid #555 !important;
}

.dash-dropdown-clear,
.dash-dropdown-trigger-icon,
.dash-dropdown-search-icon {
    color: #888 !important;
}

/* ── dbc.Input dark theme inside modals ────────────────────────────────────── */

.modal .form-control,
.modal input.form-control {
    background-color: #2a2a2e !important;
    border-color: #555 !important;
    color: #eee !important;
}

.modal .form-control:focus {
    background-color: #2a2a2e !important;
    border-color: #4a9eda !important;
    color: #eee !important;
    box-shadow: 0 0 0 0.2rem rgba(74, 158, 218, 0.25) !important;
}

.modal .form-control::placeholder {
    color: #666 !important;
}