/*
 * Styles for the "night mode" theme.
 * These rules override the default light theme styles when the 'night-mode' class
 * is applied to the body and .chart-container elements.
 */
/* Changes the main background of the entire page. */
body.night-mode {
    background-color: #000000;
}
/* Changes the background of the chart container itself. */
.chart-container.night-mode {
    background-color: #000000;
}
/* Styles for the theme switcher component when in night mode. */
.night-mode .theme-switch {
    background-color: #999999;
}
.night-mode .theme-switch .switch-track {
    /* Moves the sun icon to the left, revealing it. */
    justify-content: flex-start;
}
.night-mode .theme-switch .icon-sun {
    /* The sun icon becomes visible in night mode. */
    display: block;
}
.night-mode .theme-switch .icon-moon {
    /* The moon icon is hidden in night mode. */
    display: none;
}
.night-mode .theme-switch .switch-thumb {
    /* Moves the thumb to the right side of the switch. */
    transform: translateX(30px);
    background-color: #FFFFFF;
}
/* Overrides the background color for the sticky global controls bar. */
.night-mode .global-controls.pinned {
    background-color: #000000;
}
/* Overrides the background color for the draggable scale bar. */
.night-mode #scale-bar {
    background-color: #222;
}
/* Overrides the background color for the legend's scroll container. */
.night-mode .legend-scroll-container {
    /* --- FIX: Reverted background color to match the main chart background for night mode. --- */
    background-color: #000000;
}
/* Overrides the background color for the formula editor bar. */
.night-mode .formula-bar {
    background-color: #000000;
}
/* Dark theme styles for the language switcher button. */
.night-mode .lang-btn {
    background-color: #000000;
    color: #FFFFFF;
    border-color: #555555;
}
/* Changes the dropdown arrow color to be visible on the dark background. */
.night-mode .lang-btn .arrow-down {
    border-top-color: #FFFFFF;
}
/* Dark theme styles for the language dropdown list. */
.night-mode #lang-list {
    background-color: #000000;
    border-color: #555555;
}
/* Dark theme styles for individual language items. */
.night-mode .lang-item {
    color: #FFFFFF;
}
.night-mode .lang-item:hover {
    background-color: #333333;
}