/* Alert row hover */
.alert-row:hover {
    background: #f3f4f6;
}

/* Button hover effect — applies to all buttons across the dashboard */
button {
    transition: filter 0.15s ease, opacity 0.15s ease;
}

button:hover {
    filter: brightness(0.88);
    cursor: pointer;
}

button:active {
    filter: brightness(0.78);
}

/* ─── Dark theme ──────────────────────────────────────────────────────── */
html.dark-mode,
html.dark-mode body {
    background: #1e2126 !important;
    color: #e6edf3 !important;
}

html.dark-mode #main-app-div {
    background: #1e2126 !important;
    color: #e6edf3 !important;
}

/* Panels / cards */
html.dark-mode .app-panel,
html.dark-mode #alerts-panel > div,
html.dark-mode #pinned-pairs-panel > div {
    background: #161b22 !important;
    border-color: #30363d !important;
    color: #e6edf3 !important;
}

/* Alert / favorites row hovers in dark mode */
html.dark-mode .alert-row:hover {
    background: #2d3139 !important;
}

/* Dropdown (react-select) */
html.dark-mode .Select-control,
html.dark-mode [class$="-control"] {
    background: #2d3139 !important;
    border-color: #3a3f48 !important;
    color: #e6edf3 !important;
}
html.dark-mode .Select-menu-outer,
html.dark-mode [class$="-menu"],
html.dark-mode [class$="-MenuList"] {
    background: #24282f !important;
    border-color: #3a3f48 !important;
}
html.dark-mode .Select-option,
html.dark-mode [class$="-option"] {
    background: #24282f !important;
    color: #e6edf3 !important;
}
html.dark-mode .Select-option.is-focused,
html.dark-mode [class$="-option"]:hover {
    background: #2d3139 !important;
}
html.dark-mode [class$="-singleValue"],
html.dark-mode .Select-value-label {
    color: #e6edf3 !important;
}
html.dark-mode [class$="-placeholder"],
html.dark-mode .Select-placeholder {
    color: #8b949e !important;
}
html.dark-mode [class$="-indicatorSeparator"] {
    background: #30363d !important;
}
html.dark-mode [class$="-indicatorContainer"] svg {
    color: #8b949e !important;
}

/* Text inputs */
html.dark-mode input[type="text"],
html.dark-mode input:not([type]) {
    background: #2d3139 !important;
    color: #e6edf3 !important;
    border-color: #3a3f48 !important;
}

/* Checklist labels */
html.dark-mode .form-check-label,
html.dark-mode .dash-checklist label {
    color: #e6edf3 !important;
}

/* Loading spinner overlay */
html.dark-mode ._dash-loading-callback {
    background: rgba(13, 17, 23, 0.6) !important;
}

/* Dash Graph container backgrounds */
html.dark-mode .dash-graph {
    background: #0d1117 !important;
}