html, body {
    margin: 0;
    padding: 0;
}
/* Generic surface class for the customer page's settings button/panel and
   chart cards - values mirror DARK_THEME in dash_app.py, kept in sync
   manually since this file can't read the Python dict directly. */
.dark-mode .surface-card {
    background-color: #121f30 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #eef4fa !important;
}
/* Card header label strip (map/wind rose/power chart titles) - see
   _card_header_label() in dash_app.py. */
.dark-mode .card-header-label {
    color: #7d93a8 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
/* Stats row tiles (avg wind speed / power output / buildings online) - see
   _stat_tile() in dash_app.py. Light-mode colors are picked dark enough for
   contrast on a white card; dark mode needs the brighter brand accents
   instead, same reasoning as card-header-label above. */
.dark-mode .stat-label {
    color: #7d93a8 !important;
}
.dark-mode .stat-value-wind {
    color: #4fd8e6 !important;
}
.dark-mode .stat-value-power {
    color: #ffb648 !important;
}
.dark-mode .stat-value-neutral {
    color: #eef4fa !important;
}
/* dcc.RadioItems labels (Appearance/Map layer options in the settings
   panel) hardcode a dark navy text color regardless of parent background -
   fine on the white page, invisible against the dark settings panel. */
.dark-mode .dash-options-list-option {
    color: #eef4fa !important;
}
.dark-mode .dash-dropdown {
    background-color: #1a2a3d !important;
    color: #eef4fa !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.dark-mode .dash-dropdown-value,
.dark-mode .dash-dropdown-value-item,
.dark-mode .dash-dropdown-trigger-icon path {
    color: #eef4fa !important;
    fill: #eef4fa !important;
}
.dark-mode [data-radix-popper-content-wrapper] [role="listbox"],
.dark-mode [data-radix-popper-content-wrapper] [role="option"] {
    background-color: #1a2a3d !important;
    color: #eef4fa !important;
}
/* The dropdown's popup panel (.dash-dropdown-content, role="dialog") and its
   search box container are a separate element from the listbox/options above
   - they weren't covered by the listbox/option rule, so they stayed white
   with a transparent search input on top, showing white through dark text. */
.dark-mode [data-radix-popper-content-wrapper] .dash-dropdown-content,
.dark-mode [data-radix-popper-content-wrapper] .dash-dropdown-search-container {
    background-color: #1a2a3d !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.dark-mode [data-radix-popper-content-wrapper] .dash-dropdown-search {
    color: #eef4fa !important;
}
.dark-mode [data-radix-popper-content-wrapper] .dash-dropdown-search::placeholder {
    color: #7d93a8 !important;
}
.dark-mode [data-radix-popper-content-wrapper] .dash-dropdown-search-container svg path {
    fill: #7d93a8 !important;
}