/*
 * Base styles for the entire application.
 * Defines global rules for the body, fonts, and background.
 */
body {
    /* Sets a modern, system-agnostic font stack. */
    font-family: sans-serif;
    /* Removes default browser margin. */
    margin: 0;
    /* Default background color for the light theme. */
    background-color: #999999;
    /* Prevents horizontal scrolling on the main body. */
    overflow-x: hidden;
    /* --- CHANGE: Re-enabled to prevent layout shifts when content length changes. --- */
    /* Ensures a vertical scrollbar is always present, preventing the layout from "jumping". */
    overflow-y: scroll;
    /* A smooth transition for background color changes (e.g., theme switching). */
    transition: background-color 0.2s ease;
}
/* The main container for the entire charting interface. */
.chart-container {
    /* Ensures the container doesn't create a horizontal scrollbar. */
    position: relative;
    /* Takes up 98% of the viewport width, leaving small margins on the sides. */
    width: 98vw;
    /* Matches the body's background color. */
    background-color: #999999;
    /* Centers the container horizontally with a small top/bottom margin. */
    margin: 5px auto;
    /* Standard padding inside the container. */
    padding: 0 10px 10px 10px;
    /* Ensures padding is included in the total width, not added to it. */
    box-sizing: border-box;
    /* Syncs the background transition with the body's transition. */
    transition: background-color 0.2s ease;
}
/* This utility class is added to the body via JavaScript when a modal is opened. */
/* It prevents the main page content from scrolling underneath the modal overlay. */
body.modal-open {
    overflow: hidden;
}

/* --- NEW: Styles for the main footer component --- */
/* Placed in base.css to inherit global styles and theme changes seamlessly. */
.main-footer {
    width: 98vw;
    margin: 0 auto 20px auto; /* Added bottom margin */
    padding: 20px;
    box-sizing: border-box;
    color: white;
    font-size: 14px;
    text-align: left; /* --- CHANGED: Alignment is now left by default --- */
    line-height: 1.6;
}

.main-footer a {
    color: yellow; /* --- CHANGED: Link color is now yellow --- */
    text-decoration: none;
}

.main-footer a:hover {
    text-decoration: underline;
}