/* Dark colour mode. Bootstrap 5.3 restyles itself from data-bs-theme="dark" on
   <html>; this file covers the Dash pieces that don't follow it: the Dash 4
   component palette (CSS variables, light-only by default), the DataTable's
   filter inputs, and the loading overlay. Plotly figures and DataTable cell
   colours are themed server-side (themes.plotly_theme.apply_theme,
   components.data_table.build_table). */

[data-bs-theme="dark"] {
    --Dash-Fill-Inverse-Strong: #2b3035;            /* dropdown menu background */
    --Dash-Fill-Interactive-Weak: rgba(255, 255, 255, 0.06);
    --Dash-Fill-Primary-Hover: rgba(255, 255, 255, 0.06);
    --Dash-Fill-Primary-Active: rgba(255, 255, 255, 0.10);
    --Dash-Fill-Disabled: rgba(255, 255, 255, 0.10);
    --Dash-Stroke-Strong: rgba(255, 255, 255, 0.35);
    --Dash-Stroke-Weak: rgba(255, 255, 255, 0.12);
    --Dash-Text-Primary: rgba(255, 255, 255, 0.87);
    --Dash-Text-Strong: rgba(255, 255, 255, 0.90);
    --Dash-Text-Weak: rgba(255, 255, 255, 0.65);
    --Dash-Text-Disabled: rgba(255, 255, 255, 0.50);
}

[data-bs-theme="dark"] .dash-dropdown,
[data-bs-theme="dark"] .dash-dropdown-content {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] ._dash-loading {
    background-color: rgba(33, 37, 41, 0.7) !important;
}

[data-bs-theme="dark"] .dash-spreadsheet-container input {
    color: var(--bs-body-color) !important;
}

/* Keep the navbar switch readable on the dark navbar in both modes. */
#theme-switch + label { color: #fff; cursor: pointer; }