/* Override Dash 4's CSS variables for dark theme */
:root {
    --Dash-Fill-Inverse-Strong: #21262d !important;
    --Dash-Stroke-Strong: #30363d !important;
    --Dash-Stroke-Weak: #21262d !important;
    --Dash-Text-Primary: #e6edf3 !important;
    --Dash-Text-Strong: #e6edf3 !important;
    --Dash-Text-Weak: #8b949e !important;
    --Dash-Text-Disabled: #484f58 !important;
    --Dash-Fill-Interactive-Strong: #58a6ff !important;
    --Dash-Fill-Primary-Hover: #2d333b !important;
    --Dash-Fill-Primary-Active: #21262d !important;
    --Dash-Fill-Disabled: #21262d !important;
    --Dash-Shading-Strong: rgba(0,0,0,0.5) !important;
}

/* Dropdown options */
.dark-dropdown * { background-color: #21262d !important; color: #e6edf3 !important; }
body div[class*="menu"] { background-color: #21262d !important; border: 1px solid #30363d !important; }
body div[class*="option"] { background-color: #21262d !important; color: #e6edf3 !important; }
body div[class*="option"]:hover { background-color: #2d333b !important; color: #ffffff !important; }

/* Date picker input text */
.dash-datepicker { color: #e6edf3 !important; }
.dash-datepicker input { color: #e6edf3 !important; }
input[class*="datepicker"] { color: #e6edf3 !important; }

/* Match date picker font size to forecast model dropdown */
.dash-datepicker input { font-size: 12px !important; }
.dash-datepicker { font-size: 12px !important; }

/* Force date picker font size with higher specificity */
div[class*="datepicker"] input, div[class*="DatePicker"] input { font-size: 12px !important; }
div.dash-datepicker-container input { font-size: 12px !important; }

/* Match date input text exactly to forecast dropdown colour */
:root { --Dash-Text-Primary: #e6edf3 !important; --Dash-Text-Strong: #e6edf3 !important; }
.dash-datepicker input, div[class*="datepicker"] input { color: #e6edf3 !important; }