/* ── 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;
}

/* ── Offcanvas dark theme ──────────────────────────────────────────────────── */

.offcanvas {
    background-color: #1e1e26 !important;
    color: #ddd !important;
    border-left: 1px solid #333 !important;
}

.offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.offcanvas-title {
    color: #eee !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* ── DatePickerSingle dark theme ───────────────────────────────────────────── */

.DateInput_input {
    background-color: #2a2a2e !important;
    color: #ccc !important;
    border: 1px solid #555 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

.DateInput_input::placeholder {
    color: #666 !important;
}

.SingleDatePickerInput {
    background-color: #2a2a2e !important;
    border: none !important;
}

.SingleDatePickerInput__withBorder {
    border: none !important;
}

.CalendarDay__selected {
    background: #61CE70 !important;
    border: 1px solid #61CE70 !important;
}

/* ── Filters button active state — neon magenta glow ──────────────────────── */

.filter-btn-active {
    border-color: #ff00ff !important;
    color: #ff00ff !important;
    background-color: rgba(255, 0, 255, 0.12) !important;
    box-shadow:
        0 0 6px rgba(255, 0, 255, 0.5),
        0 0 14px rgba(255, 0, 255, 0.3),
        0 0 30px rgba(255, 0, 255, 0.15) !important;
    animation: neon-pulse 1.8s ease-in-out infinite alternate;
    font-weight: 600 !important;
}

@keyframes neon-pulse {
    from { box-shadow: 0 0 6px rgba(255,0,255,0.5), 0 0 14px rgba(255,0,255,0.3), 0 0 30px rgba(255,0,255,0.15); }
    to   { box-shadow: 0 0 8px rgba(255,0,255,0.7), 0 0 20px rgba(255,0,255,0.45), 0 0 40px rgba(255,0,255,0.25); }
}


/* ── Switch dark theme ─────────────────────────────────────────────────────── */

.form-check-input {
    background-color: #444 !important;
    border-color: #555 !important;
}

.form-check-input:checked {
    background-color: #61CE70 !important;
    border-color: #61CE70 !important;
}

/* ── Outline buttons that fill on hover ────────────────────────────────────── */

.btn-hover-fill.btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.btn-hover-fill.btn-outline-secondary:hover {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
}

.btn-hover-fill.btn-outline-warning:hover {
    background-color: var(--bs-warning) !important;
    color: #000 !important;
}

.btn-hover-fill.btn-outline-info:hover {
    background-color: var(--bs-info) !important;
    color: #000 !important;
}

.btn-hover-fill.btn-outline-success:hover {
    background-color: var(--bs-success) !important;
    color: #fff !important;
}