/* style.css */

:root {
    /* Light Mode Colors (Default) */
    --bg-color: #f4f4f4;
    --text-color: #333;
    --container-bg-color: #ffffff;
    --input-bg-color: #fdfdfd;
    --border-color: #ccc; /* Lighter border */
    --header-bg-color: #3498db;
    --header-color: #ffffff;
    --button-bg-color: #3498db;
    --button-text-color: #ffffff;
    --button-hover-bg-color: #2980b9;
    --button-disabled-bg-color: #bdc3c7;
    --accent-color: #3498db;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --map-bg-color: #e0e0e0; /* Lighter map fallback */
    --popup-bg-color: #ffffff;
    --loading-bg: #fdf3e6;
    --loading-border: #f5cba7;
    --loading-text: #e67e22;
    --toggle-border: #aaa;
    --toggle-bg: #f8f8f8;
    --toggle-text: #333;
}

body.dark-mode {
    /* Dark Mode Colors */
    --bg-color: #222b36; /* Darker */
    --text-color: #e1e1e1; /* Lighter text */
    --container-bg-color: #2c3e50;
    --input-bg-color: #3a5068; /* Adjusted input bg */
    --border-color: #4a6581; /* Adjusted border */
    --header-bg-color: #2980b9;
    --header-color: #e1e1e1;
    --button-bg-color: #3498db;
    --button-text-color: #ffffff;
    --button-hover-bg-color: #2c7bb6;
    --button-disabled-bg-color: #566573; /* Darker disabled */
    --accent-color: #3498db;
    --shadow-color: rgba(0, 0, 0, 0.4); /* Darker shadow */
    --map-bg-color: #3a3a3a; /* Dark map fallback */
    --popup-bg-color: #3e5770; /* Darker popup */
    --loading-bg: #4d4030;
    --loading-border: #7a6245;
    --loading-text: #f39c12;
    --toggle-border: #56708a;
    --toggle-bg: #34495e;
    --toggle-text: #e1e1e1;
}

/* Apply transitions only AFTER initial load if needed, but generally okay */
body, #upload-area, input[type="file"], button, #theme-toggle, #loading-indicator {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

h1 { /* Style H1 using variables */
    text-align: center;
    padding: 20px 0;
    background-color: var(--header-bg-color);
    color: var(--header-color);
    margin: 0 0 20px 0;
}

#upload-area {
    width: 85%;
    max-width: 700px;
    margin: 20px auto 20px auto;
    background-color: var(--container-bg-color);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid var(--border-color); /* Add border */
    box-shadow: 0 0 10px var(--shadow-color);
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-color);
}

input[type="file"] {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
    display: block;
    cursor: pointer;
    background-color: var(--input-bg-color);
    color: var(--text-color);
}

input[type="file"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px var(--accent-color);
}

button#process-data {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: block;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.2s ease; /* Faster button transition */
}

button#process-data:hover {
    background-color: var(--button-hover-bg-color);
}

button#process-data:disabled {
    background-color: var(--button-disabled-bg-color);
    cursor: not-allowed;
}

button#process-data:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-color); /* Focus ring */
}

button#theme-toggle {
    /* Position moved inline for clarity */
    padding: 8px 12px;
    background-color: var(--toggle-bg);
    color: var(--toggle-text);
    border: 1px solid var(--toggle-border);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
button#theme-toggle:hover {
    opacity: 0.85;
}

#loading-indicator {
     display: none; text-align: center; padding: 15px; font-weight: bold;
     margin: 15px auto; width: 85%; max-width: 700px;
     background-color: var(--loading-bg); border: 1px solid var(--loading-border); border-radius: 4px; color: var(--loading-text);
}

/* Map styles are inline in HTML */

/* Responsive */
@media (max-width: 768px) {
    #upload-area,
    #map {
        width: 95%;
    }
    button#process-data { font-size: 14px; padding: 10px 16px; }
    h1 { font-size: 1.4em; padding: 15px 0;}
}