/* Enhanced Style.css based on README.md Design Considerations */

/* CSS Variables for Themeing and Consistency */
:root {
    --color-background: #f9f9f9;
    --color-text-primary: #333;
    --color-text-secondary: #555;
    --color-heading: #2c3e50;
    --color-container-background: #fff;
    --color-container-shadow: rgba(0, 0, 0, 0.15);
    --color-border: #ddd;
    --color-accent: rgb(75, 192, 192); /* Chart line color */
    --color-error: red;
    --font-family-base: 'Roboto', sans-serif;
}

/* Dark Theme Variables (override :root variables in dark mode) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #121212; /* Dark background */
        --color-text-primary: #eee; /* Light text for dark background */
        --color-text-secondary: #ccc;
        --color-heading: #eee;
        --color-container-background: #1e1e1e; /* Darker container background */
        --color-container-shadow: rgba(255, 255, 255, 0.1); /* Light shadow for dark mode */
        --color-border: #555;
    }
}

/* General Styles */
body {
    font-family: var(--font-family-base);
    padding: 20px;
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s; /* Smooth theme transition */
}

h1 {
    text-align: center;
    margin-bottom: 25px;
    color: var(--color-heading);
    font-weight: bold;
}

p {
    color: var(--color-text-secondary);
}

/* Chart Container Styles */
#chart-container {
    width: 100%;
    max-width: 960px;
    margin: 30px auto;
    background-color: var(--color-container-background);
    border-radius: 12px;
    box-shadow: 0 5px 15px var(--color-container-shadow);
    padding: 30px;
    box-sizing: border-box;
    overflow: hidden;
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth theme transition */
    border: 1px solid var(--color-border); /* Add border for better definition in dark mode */
}

/* Error and Loading Message Styles */
#error-container, #chart-container > div { /* Targeting loading indicator div as well */
    color: var(--color-error);
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
}
#chart-container > div { /* Specific to loading indicator */
    color: var(--color-text-secondary); /* Less prominent color for loading text */
}

/* Chart Canvas */
canvas {
    display: block;
    width: 100%;
    height: auto;
}

/* Responsive Design using Media Queries */

/* For tablets and larger smartphones (up to 768px) */
@media (max-width: 768px) {
    body {
        padding: 15px;
    }
    h1 {
        font-size: 2em;
        margin-bottom: 20px;
    }
    #chart-container {
        padding: 20px;
        margin: 20px auto;
        border-radius: 10px;
    }
}

/* For smaller smartphones (up to 480px) */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    h1 {
        font-size: 1.6em;
        margin-bottom: 15px;
    }
    p {
        font-size: 0.95em;
    }
    #chart-container {
        padding: 15px;
        margin: 15px auto;
        border-radius: 8px;
        box-shadow: 0 3px 8px var(--color-container-shadow); /* Adjusted shadow for smaller screens */
    }
}

/* Very small screens (e.g., older phones) */
@media (max-width: 320px) {
    body {
        padding: 5px;
    }
    h1 {
        font-size: 1.4em;
    }
    #chart-container {
        padding: 10px;
        margin: 10px auto;
    }
}