:root {
    /* Light theme (default) variables */
    --text-primary: #1C1C1E;
    --text-secondary: #8A8A8E;
    --border-color: #E5E5EA;
    --precip-color: #5AC8FA; /* Light blue for precipitation */
    --temp-color-warm: #FFA500; /* Orange for warm temps */
    --temp-color-cool: #AEAEB2; /* Grey for cool temps */
    --card-background: #FFFFFF;
    --card-background-rgb: 255, 255, 255; /* Added RGB version for opacity */
    --app-background: #F0F2F5;

    /* Dark theme variables - only applied when .dark-mode class is added */
    --dark-text-primary: #F5F5F7;
    --dark-text-secondary: #C7C7C7; /* Light grey for better contrast in dark mode */
    --dark-border-color: #38383A;
    --dark-card-background: #2C2C2E;
    --dark-app-background: #1C1C1E;
    --dark-card-background-rgb: 44, 44, 46; /* Added RGB version for opacity */
    /* Precipitation and temperature colors remain the same for visual consistency */
}

/* Dark mode class applied to body */
body.dark-mode {
    /* Switch core CSS variables to dark values */
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --border-color: var(--dark-border-color);
    --card-background: var(--dark-card-background);
    --card-background-rgb: var(--dark-card-background-rgb);
    --app-background: var(--dark-app-background);

    background-color: var(--dark-app-background);
    color: var(--dark-text-primary);
}

/* PWA Status Bar handling for notched devices */
.app-container.dark-status-bar {
    padding-top: env(safe-area-inset-top);
    background-color: var(--dark-app-background) !important;
}

/* Target notch area specifically in standalone mode */
@media all and (display-mode: standalone) {
    .app-container.dark-status-bar::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-top);
        background-color: var(--dark-app-background);
        z-index: 10000;
    }
    
    /* Light mode status bar handling */
    .app-container:not(.dark-status-bar)::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-top);
        background-color: var(--app-background);
        z-index: 10000;
    }
}

/* Dark mode overrides for app container */
body.dark-mode .app-container {
    background-color: var(--dark-app-background);
}

/* Dark mode overrides for cards */
body.dark-mode .card {
    background-color: var(--dark-card-background);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Dark mode overrides for text colors */
body.dark-mode .card h2 {
    color: var(--dark-text-secondary);
    font-family: inherit; /* Ensure headings use the base font */
}

/* Dark mode overrides for borders */
body.dark-mode .location-list li,
body.dark-mode .search-container {
    border-color: var(--dark-border-color);
    background-color: var(--dark-card-background);
}

/* Dark mode overrides for dropdown */
body.dark-mode .location-dropdown {
    background-color: var(--dark-card-background);
}

/* Dark mode overrides for input fields */
body.dark-mode #location-search-input {
    background-color: transparent;
    color: var(--dark-text-primary);
}

body.dark-mode #location-search-input::placeholder {
    color: var(--dark-text-secondary);
}

/* Toggle switch styling */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E5E5EA;
    transition: .4s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: #007AFF;
}

input:focus + .toggle-slider {
    box-shadow: 0 0 1px #007AFF;
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

/* Dark theme icons for the toggle slider */
.toggle-slider:after {
    content: "☀️";
    position: absolute;
    right: 10px;
    top: 8px;
    font-size: 14px;
}

input:checked + .toggle-slider:after {
    content: "🌙";
    left: 10px;
    right: auto;
}

/* Dark mode for alerts */
body.dark-mode .alert-card {
    background-color: rgba(254, 243, 199, 0.2);
    color: #FFD868;
}

/* Dark mode for location items */
body.dark-mode .location-list li:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Dark mode for settings buttons */
body.dark-mode #settings-view #notifications-btn {
    border-color: #007AFF;
    background-color: var(--dark-card-background);
    color: #007AFF;
}

body.dark-mode #settings-view #notifications-btn.enabled {
    background-color: #007AFF;
    color: #FFF;
}

/* Dark mode for the navigation bar */
body.dark-mode .floating-nav {
    /* Use the darker app background so nav-bar contrasts with card buttons */
    background-color: var(--dark-app-background);
}

body.dark-mode .nav-button {
    /* Buttons use card background to stand out against nav-bar */
    background-color: var(--dark-card-background);
    color: var(--text-secondary);
}

body.dark-mode .nav-button.active {
    /* Active button accent remains blue with white text */
    background-color: #007AFF;
    color: #FFFFFF;
}

body.dark-mode .nav-button:not(.active):hover {
    /* Hover a bit lighter border color with primary text */
    background-color: var(--dark-border-color);
    color: var(--text-primary);
}

/* Override for radio buttons in dark mode */
body.dark-mode .radio-group label {
    color: var(--dark-text-primary);
}

/* Dark mode for radar view */
body.dark-mode #layer-selector {
    background-color: var(--dark-card-background);
}

body.dark-mode .layer-button {
    background-color: #444444;
    color: var(--dark-text-primary);
}

body.dark-mode .layer-button:hover {
    background-color: #555555;
}

body.dark-mode .layer-button.active {
    background-color: #007AFF;
}

/* === Reset & Base === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 18px; /* Increased base font size */
}

body {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    background-color: #F0F2F5; /* Existing background */
    color: #1C1C1E;
    /* Remove top padding, keep others for sides/bottom */
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === App Container === */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure container takes full height */
    background-color: #F0F2F5; /* Match body background */
}

main#main-content {
    flex-grow: 1; /* Allow main content to take available space */
    /* Add top safe area padding, Reduce L/R padding */
    padding: calc(1rem + env(safe-area-inset-top)) 0.75rem 1rem 0.75rem; /* Reduced L/R from 0.75rem */
    /* Keep bottom padding calculation for nav bar, remove base 1rem as it's included above */
    padding-bottom: calc(70px + env(safe-area-inset-bottom)); 
    overflow-y: auto; /* Allow scrolling */
    -webkit-overflow-scrolling: touch;
}

/* === View Management === */
.view {
    display: none; /* Hide views by default */
    width: 100%;
    /* Allow vertical scrolling if content overflows */
    overflow-y: auto;
    /* Ensure views can grow to fill main content */
    flex-grow: 1; 
}

/* Styles for active views EXCEPT radar */
.view.active:not(#radar-view) {
    display: flex; /* Use flex for spacing */
    flex-direction: column; /* Keep column layout */
    gap: 0.75rem; /* Space between cards */
    /* Apply padding only to top and bottom, remove L/R padding */
    padding: 1rem 0; /* Changed from '1rem' */
}

/* Special handling for radar view */
#radar-view.active {
    display: flex; /* Use flex but without the gap */
    flex-direction: column;
    padding: 0; /* No padding for full map */
}

/* === Radar View Specific Styles === */
#radar-view {
    padding: 0; /* Remove padding for full map */
    flex-grow: 1; /* Ensure it takes up space */
    height: 100%; /* Crucial: Take full height of parent */
}

#map {
    width: 100%;
    height: 100%;
    z-index: 1; /* Ensure map is behind controls if they overlap */
}

/* Style for the grid containers */
#background-map-grid,
#radar-image-grid {
    position: absolute; /* Position relative to wrapper */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ensure radar grid is on top */
#radar-image-grid {
    z-index: 10;
    opacity: 0.8; /* Keep slight transparency */
}

#background-map-grid {
    z-index: 5;
}

/* Style for individual tiles within the grids */
#background-map-grid img,
#radar-image-grid img {
    display: block;
    position: absolute; /* Already set by JS, but can be here too */
    user-select: none; /* Already set by JS, but can be here too */
}

/* Style for the radar timestamp overlay */
#radar-timestamp {
    position: absolute;
    bottom: 10px; /* Position near bottom */
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 500; /* Above map tiles but below Leaflet controls */
    pointer-events: none; /* Allow clicks/touches to pass through */
}

/* Style for radar controls */
#radar-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 500;
    display: flex;
    gap: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px;
    border-radius: 4px;
}

#radar-controls button {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    font-weight: bold;
    font-size: 0.9rem;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    min-width: 30px;
    text-align: center;
}

#radar-controls button:hover {
    background-color: #eee;
}

#radar-controls button:active {
    background-color: #ddd;
}

/* === Card Base Style === */
.card {
    background-color: #FFFFFF;
    border-radius: 28px; /* Generous rounding */
    padding: 1.5rem; /* Increased inner card padding */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

.card h2 {
    font-size: 0.9rem; /* Increased size slightly */
    font-weight: 700; /* Bolder */
    color: var(--text-secondary);
    opacity: 1;
    font-family: inherit; /* Ensure headings use the base font */
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.6px; /* Adjust spacing */
}

/* === Current Weather Card === */
.current-weather-card {
    display: grid;
    grid-template-columns: 1fr auto; /* Col 1: Main text info | Col 2: Icon */
    grid-template-rows: auto auto auto; /* Row 1: Main info | Row 2: Centered Toggle | Row 3: Expandable section */
    align-items: flex-start; 
    gap: 0.25rem; /* Reduced gap slightly */
    padding: 1rem 0.5rem 0.5rem 0.5rem; 
    overflow-y: hidden; /* Keep this */
    position: relative; /* For absolute positioning of toggle if needed, though flex/grid preferred */
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

.current-weather-card > .current-main-info {
    grid-row: 1;
    grid-column: 1;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

/* Styling for .current-temp which now holds main temp and Feels Like */
.current-weather-card > .current-main-info .current-temp {
    /* display: flex; /* No longer needed as Feels Like is outside */
    /* flex-direction: row; */
    /* align-items: baseline; */
    margin-top: 0.25rem; /* Space between time and temp line */
    line-height: 1; 
}

.current-weather-card > .current-main-info .current-temp #temperature {
    font-size: 3.5rem; 
    font-weight: 300;
    line-height: 1; 
}

/* Styling for Feels Like now as a separate line, left-justified */
#feels-like-container {
    margin-top: 0.35rem; /* Space below the main temperature line */
    text-align: left; 
}

#feels-like-container .detail-label {
    font-size: 0.9rem; /* Adjusted size */
    color: var(--text-secondary);
    display: inline; /* Label and value on same line */
    font-weight: 400; /* Normal weight */
}

#feels-like-container .detail-value {
    font-size: 0.9rem; /* Match label size */
    font-weight: 500; /* Slightly bolder for value */
    color: var(--text-primary);
    display: inline;
    margin-left: 0.25rem; /* Space after label */
}

.current-weather-card > .current-main-info .location-time {
    /* This div now only holds condition and time */
    line-height: 1.2; /* Adjust line height for stacked text */
}

.current-weather-card > .current-main-info .location-time #current-condition-text {
    font-size: 1.4rem; /* Larger condition text */
    font-weight: 600;
    display: block; /* Make it block to stack */
}

.current-weather-card > .current-main-info .location-time #current-time {
    font-size: 0.8rem; /* Smaller updated time */
    color: var(--text-secondary);
    display: block; /* Make it block to stack */
}

.current-weather-card > .current-main-info .current-temp {
    font-size: 3.5rem; /* Adjust as needed */
    font-weight: 300;
    line-height: 1;
    margin-top: 0.25rem; /* Space between time and temp */
}

.current-weather-card > .current-icon {
    grid-row: 1;
    grid-column: 2;
    align-self: center; 
}

/* Styles for directly visible details (Hi/Low, Feels Like) */
.current-weather-details { /* This container is now empty or repurposed */
    grid-column: 1 / -1; 
    /* grid-row: 2; /* This row is now for the toggle */
    display: none; /* Hide if empty */
    /* Remove other styles if it's truly empty or re-purpose if needed */
    /* padding-top: 0.0rem; */
    /* margin-top: 0.0rem; */
    /* border-top: none; */
    /* min-height: 0; */
}

/* Individual styling for hi-low and feels-like if needed */
#hi-low-temp-container .detail-value {
    font-size: 1.1rem; 
    font-weight: 500;
}

.current-weather-details .detail-item {
    align-items: center; /* Center items if stacked or side-by-side */
    text-align: center; /* Center text within detail-item */
}

/* Expandable section for Humidity, Wind, etc. */
.current-weather-expandable {
    grid-column: 1 / -1; 
    grid-row: 3; /* Place the actual expandable content in the third row */
    margin-top: 0.25rem; /* Small margin above the hidden content area */
}

/* New style for the centered toggle button */
.expand-toggle.centered-toggle {
    grid-row: 2; /* Place toggle in the second row of the main card grid */
    grid-column: 1 / -1; /* Span it across columns to center it */
    display: flex; /* Use flex to center the icon itself if padding is on the button */
    justify-content: center;
    align-items: center;
    margin: 0 auto; /* Top/bottom margin 0, auto L/R for block centering */
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem; 
    padding: 0.35rem; /* Slightly increased tap target */
    cursor: pointer;
    width: 100%; /* Make it take full width to center icon via flex */
}

.expand-toggle.centered-toggle i {
    transition: transform 0.3s ease;
}

.expand-toggle.centered-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.current-weather-expandable .expand-toggle i { /* This might be redundant now */
    transition: transform 0.3s ease;
}

.current-weather-expandable .expand-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

#current-weather-extra-details {
    display: flex; /* Arrange all detail items (Hi/Low, Humidity, Wind) in a row */
    flex-direction: row;
    justify-content: space-around; /* Distribute items evenly */
    align-items: center; /* Vertically align items if they have different heights */
    flex-wrap: wrap; /* Allow wrapping on small screens if needed */
    gap: 0.5rem; 
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color); 
    margin-top: 0.25rem; 
}

/* Style Hi/Low specifically in the expanded section */
#current-weather-extra-details #hi-low-temp-container {
    text-align: center; 
    padding: 0.25rem 0;
    /* border-top: 1px solid var(--border-color); /* Remove individual border */
    padding-top: 0; 
    margin-top: 0; 
    /* Allow flex item to shrink/grow */
    flex: 1 1 auto;
}

#current-weather-extra-details #hi-low-temp-container .detail-label {
    /* Ensure label styles are consistent if added back or for other items */
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.15rem;
    text-transform: uppercase;
}

#current-weather-extra-details #hi-low-temp-container .detail-value {
    font-size: 1rem; /* Adjust size for single line layout */
    font-weight: 500;
}

.details-row { /* For Humidity and Wind */
    display: flex; /* This will now be a flex item itself */
    /* justify-content: space-around; /* Parent #current-weather-extra-details handles spacing */
    gap: 0.75rem; /* Space between humidity and wind items */
    /* width: 100%; /* Let flexbox determine width */
    padding: 0; /* Reset padding */
    border-top: none; /* Remove individual border */
    margin-top: 0;
    /* Allow flex item to shrink/grow */
    flex: 2 1 auto; /* Allow this to take more space potentially */
}

.details-row .detail-item {
    text-align: center; 
    flex: 1; /* Distribute space equally between humidity and wind */
}

/* General detail item styling (applies to both visible and expandable) */
.detail-item {
    display: flex;
    flex-direction: column; 
    align-items: center; /* Center items if stacked or side-by-side */
    padding: 0.25rem 0;
}

.detail-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 1rem; /* Larger font for the value */
    font-weight: 600;
    color: var(--text-primary);
}

.location-time h1 { 
    font-size: 1.3rem; /* Larger */
    font-weight: 700; /* Bold */
    margin-bottom: 0.1rem; /* Adjust margin */
}
.location-time span { 
    font-size: 0.8rem; /* Smaller */
    color: var(--text-secondary);
    opacity: 1;
    display: block; 
    line-height: 1.1;
}
.current-temp {
    font-size: 2.8rem; /* Smaller */
    font-weight: 300; /* Adjust weight if needed */
    letter-spacing: -1px; 
    margin-top: 0.1rem; 
}
.current-icon {
    font-size: 2.2rem; /* Smaller */
    height: 36px; 
    /* Other styles same */
    align-self: center; /* Vertically center icon */
    text-align: center; 
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)); 
    display: flex; align-items: center; justify-content: center;
}

/* === Chart Card Common Styles === */
.chart-card {
    /* Base card styles apply */
    /* Inherits left/right/top padding from .card */
    /* Override bottom padding to match new base */
    padding-bottom: 1.5rem; /* Match increased inner padding */
}

.chart-container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.5rem 0.5rem 0.5rem 0.5rem; /* Increased top padding from 1rem to 1.5rem */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.chart-container::-webkit-scrollbar { 
    display: none;
}

/* ===== Chart Item Structure (Flexbox Zero-Axis) ===== */

/* 
 * Hourly Chart Layout Explanation:
 * - .hourly-item: Flex container for one hour column. 
 *     - Uses flexbox (space-between) to position children vertically:
 *       - .chart-label-top at the top.
 *       - .bar-container in the middle.
 *       - .chart-label-bottom (not used here, time is axis label) at bottom.
 *     - Fixed height accommodates tallest potential bars + labels.
 * - .bar-container: Holds the bars and axis label. 
 *     - Fixed height defines the max height for the temperature bar area.
 *     - position: relative establishes the coordinate system for its children.
 *     - Its bottom edge acts as the conceptual "zero axis".
 * - .temp-bar: Positioned absolutely, aligned to the bottom of .bar-container.
 *     - Grows *upwards* from the axis based on its inline height style.
 * - .precip-bar: Positioned absolutely, top aligned to *below* the .bar-container.
 *     - top: 100% starts it below the axis.
 *     - margin-top adds a visual gap between the axis/label and the bar.
 *     - Grows *downwards* based on its inline height style.
 * - .time-label.axis-label: Positioned absolutely.
 *     - top: 100% aligns its top edge with the axis.
 *     - transform: translateX(-50%) centers it horizontally.
 *     - margin-top pushes it slightly below the axis line into the gap.
 */

.chart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    text-align: center;
}

.hourly-item {
    /* Container for a single hour's chart elements */
    height: 160px !important;      /* Reduced from 200px */
    justify-content: flex-start !important;
    width: 21px; /* Reduced width to fit ~15 items */
    margin: 0 !important;
    /* background-color: rgba(255, 0, 0, 0.1); */ /* DEBUG REMOVED */
}

.daily-item {
    /* Adapted from hourly-item */
    height: 180px; /* Match hourly height */
    justify-content: flex-start; /* Align items to top */
    width: 40px; /* Significantly reduced width */
    margin: 0 1px; /* Reduced margin for 7 days */
}

.chart-label-top {
    position: absolute; /* Position relative to bar-container */
    bottom: calc(var(--temp-bar-height, 0%) + 4px); /* Position bottom relative to bar height + 4px gap */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    z-index: 2; /* Ensure label is above precip bar */
    font-size: 0.75rem; /* Decreased font size */
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    text-align: center;
    pointer-events: none; /* Prevent label interfering with interaction */
    /* Add background with slight transparency to prevent overlapping */
    background-color: rgba(var(--card-background-rgb, 255, 255, 255), 0.7);
    padding: 0 2px;
    border-radius: 2px;
}

/* Override for minutely chart's top label to remove background */
#minutely-chart-container .chart-label-top {
    background-color: transparent;
}

/* REMOVED HOVER EFFECT FOR NOW
.bar-container:hover .chart-label-top {
     opacity: 1;
}
*/

.bar-container, .hourly-bar-container {
    position: relative;
    height: 80px !important; 
    margin-top: 8px !important;
    width: 12px; /* General case for hourly etc. */
}

/* Override for bar-container specifically within minutely items */
.minutely-item .bar-container.minutely-bar-container {
    width: 100%; /* Take full width of parent .minutely-item (e.g., 4px from JS) */
    height: 100%; /* Allow bar to use full height of the .minutely-item */
    margin: 0;   /* Reset any margin from the general .bar-container rule */
    display: flex; /* Added to help manage internal layout if needed */
    align-items: flex-end; /* Align precip bar to the bottom */
    justify-content: center; /* Center content like labels if they were not absolute */
}

.hourly-bar-container {
    width: 12px; /* Explicitly hourly width */
}

.daily-bar-container {
    width: 16px !important;
    height: 100px;
    background-color: transparent;
    border-radius: 4px;
    position: relative;
    overflow: visible;
}

.temp-bar {
    width: 100%;
    position: absolute; /* Position relative to the container */
    bottom: 0; /* Align to the bottom */
    left: 0;
    background-color: var(--temp-color-cool); /* Default color */
    border-radius: 3px 3px 0 0; /* Round top corners */
    transition: height 0.3s ease, background-color 0.3s ease;
    /* min-height: 5px; */ /* REMOVED: Now controlled by JS percentage */
    max-height: none; /* Remove any max-height constraint */
}

.precip-bar {
    width: 100%; 
    background-color: var(--precip-color); 
    border-radius: 0 0 2px 2px; 
    position: absolute; 
    top: 100%; 
    left: 0;
    /* Base margin (can be overridden) */
    margin-top: 18px; 
    min-height: 2px; 
    max-height: 70px; /* Visually emphasise precipitation bars */
}

.hourly-precip-bar {
    margin-top: 24px; /* Explicitly hourly margin */
}

.daily-precip-bar {
    position: absolute;
    top: 100%; /* Start at the axis (just below the label) */
    left: 0;
    width: 100%;
    background-color: #5AC8FA;
    border-radius: 0 0 4px 4px;
    transition: height 0.3s ease-out;
    margin-top: 24px; /* Lower the daily precip bars further below the label */
}

.axis-label {
    position: absolute; 
    top: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
    margin-top: 3px; /* Push down slightly */
    font-size: 0.75rem;
    color: var(--text-primary); /* Changed to primary text color */
    white-space: nowrap; 
    padding: 0 2px; 
}

.time-label.axis-label {
    /* Inherits from .axis-label, no extra styles needed currently */
}

.daily-item .axis-label {
    position: relative; /* Position in normal flow */
    left: auto; 
    transform: none; 
    top: auto; 
    margin-top: -89px; /* Pull label upwards significantly */
    z-index: 10; /* Keep on top */
    /* Inherits font-size/color from base .axis-label */
}

.daily-hourly-chart-container {
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.daily-hourly-chart-container::-webkit-scrollbar {
    display: none;
}

.expandable-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.expandable-details .chart-container {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 0.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.expandable-details .chart-container::-webkit-scrollbar {
    display: none;
}

/* Override for flex-direction in the chart containers */
.chart-container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

/* Daily view section headers */
.section-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0.5rem 0 0.25rem 0.5rem;
}

/* Create a container for the section header above charts */
.chart-header-container {
    width: 100%;
    display: block;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
}

/* Make sure hourly item bars in daily view have correct sizing */
.daily-hourly-forecast-day .hourly-item {
    height: 160px; /* Reduced from 180px */
    width: 21px;
    margin: 0 2px;
    flex-shrink: 0;
    align-items: flex-end;
    justify-content: flex-end;
}

/* Ensure that .chart-item is always flex */
.chart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    text-align: center;
}

/* === Daily Chart Container Specific Padding === */
#daily-chart-container {
    /* Use general .chart-container padding now */
    /* Ensure minimal gap */
    gap: 1px;
}

/* === Minutely Chart Styles === */
#minutely-chart-card.card.chart-card {
    padding-top: 1rem; /* Reduce top padding */
    padding-bottom: 0.5rem; /* Reduce bottom padding */
    padding-left: 0.75rem; /* Reduce side padding */
    padding-right: 0.75rem; /* Reduce side padding */
}

#minutely-chart-container {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    /* Increased height */
    height: 120px; 
    position: relative; /* Keep for absolute positioned children like labels and new dotted lines */
    padding-left: 0; /* Original was 28px in JS, but this was for label alignment, let JS handle item margins */
    padding-right: 10px; /* Ensure last items/labels are not cut off */
    /* Ensure no bottom padding interferes with 0-line for bands */
    padding-bottom: 0; 
    /* Explicitly set background to transparent to avoid unwanted colors */
    background-color: transparent; 
    /* Add some top padding if labels were too close to the card title */
    padding-top: 5px; 
}

.minutely-item {
    width: 4px; /* Thin bars for minutes */
    margin: 0; /* Remove extra margin, use gap */
    height: 100%; /* Allow item to fill container height */
    display: flex; /* To align the inner bar */
    align-items: flex-end; /* Align inner bar to bottom */
    /* Remove chart-item class inheritance if it causes issues */
    flex-shrink: 0;
    position: relative; /* Context for bar */
}

.minutely-item .precip-bar {
    position: absolute; /* Position relative to minutely-item */
    bottom: 0; /* Grow upwards */
    left: 0;
    width: 100%;
    background-color: var(--precip-color);
    border-radius: 1px 1px 0 0; /* Minimal rounding */
    min-height: 1px; /* Show a tiny line even for 0% height */
    /* height is set inline via JS */
    margin-top: 0;
    max-height: 100%; /* Allow full height relative to parent */
    /* Remove inherited top property */
    top: auto;
}

.minutely-time-label {
    position: absolute;
    bottom: 0.5em; /* Position within the container's bottom padding */
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    /* transform: translateX(-50%); Already centered by justify-content */
}

/* === Settings View === */
#settings-view {
    /* Base card styles apply */
}
.settings-content {
    padding: 15px;
    font-family: 'DM Sans', sans-serif; /* Ensure settings content uses the font */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.setting-item label {
    font-size: 1rem;
    font-weight: 500;
}
/* Re-style notification button for settings context */
#settings-view #notifications-btn {
    padding: 0.5em 1em;
    border: 1px solid #007AFF;
    background-color: #FFF;
    color: #007AFF;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    min-width: 80px; /* Ensure min width */
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#settings-view #notifications-btn.enabled {
    background-color: #007AFF;
    color: #FFF;
}
#settings-view #notifications-btn:disabled {
    background-color: #E9ECEF;
    border-color: #CED4DA;
    color: #6C757D;
    cursor: not-allowed;
}

/* === Floating Navigation === */
.floating-nav {
    position: fixed;
    bottom: calc(1.5rem + env(safe-area-inset-bottom)); 
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: max-content;
    max-width: calc(100% - 2rem);

    background-color: #000000;
    border-radius: 60px; /* Larger radius for larger height */
    padding: 6px; /* Minimal padding inside */
    display: flex;
    justify-content: center; 
    align-items: center;
    gap: 0; /* << No gap */
    z-index: 1000;
    height: 70px; /* << Increased Height */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.nav-button {
    background-color: #333333; 
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem; 
    color: #FFFFFF; 
    cursor: pointer;
    border-radius: 50%; 
    width: 58px;  /* << Button Width (70px height - 6px*2 padding) */
    height: 58px; /* << Button Height (70px height - 6px*2 padding) */
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-button .nav-label {
    display: none; 
}

.nav-button.active {
    background-color: #FFFFFF;
    color: #000000;
}

.nav-button:not(.active):hover {
    background-color: #444444;
    color: #FFFFFF;
}

/* Remove old footer */
/* .app-footer { display: none; } */ /* Already hidden */

/* === Alert Card === */
.alert-card {
    background-color: #FEF3C7; /* Softer yellow background */
    color: #92400E; /* Darker text for contrast */
    padding: 0.8rem 1.25rem;
    border-radius: 16px; /* Slightly less round than main cards */
}
.alert-card .alert-content {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.alert-card .alert-icon {
    font-size: 1.2rem;
    opacity: 0.8;
}
.alert-card .alert-text {
    font-size: 0.9rem;
    font-weight: 500;
}

/* === Alert Items (Expandable) === */
.alert-item {
    background-color: #FEF3C7; /* Softer yellow background */
    color: #92400E; /* Darker text for contrast */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.alert-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Original padding: 0.75rem 1rem; */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 2.5rem; /* Adjusted to make space for the caret */
    position: relative;
}

.alert-header:after {
    content: "\f0d7"; /* Unicode for Font Awesome caret-down icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.alert-item.expanded .alert-header:after {
    transform: translateY(-50%) rotate(180deg);
}

.alert-title {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* margin-right: 1.5rem; /* Removed, space now handled by header padding */
}

.alert-item.expanded .alert-title {
    white-space: normal; /* Allow title to wrap when expanded */
    overflow: visible;
    text-overflow: clip; /* Or unset, effectively removing ellipsis */
}

.alert-time {
    font-size: 0.8rem;
    opacity: 0.8;
    display: none; /* Hide in collapsed state */
}

.alert-item.expanded .alert-time {
    display: block; /* Show when expanded */
    margin-top: 0.25rem; /* Add space below title if title wraps */
}

.alert-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1rem;
}

.alert-item.expanded .alert-body {
    max-height: 500px; /* Large enough to contain content */
    padding: 0 1rem 1rem;
}

.alert-description {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.alert-link {
    display: inline-block;
    color: #0070f3;
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 600;
}

.alert-link:hover {
    text-decoration: underline;
}

/* Dark mode support for alert items */
body.dark-mode .alert-item {
    background-color: rgba(254, 243, 199, 0.2);
    color: #FFD868;
}

/* === Daily Forecast Card === */
.daily-forecast-container {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* More gap */
}

.daily-day {
    font-weight: 600;
    color: #1C1C1E;
    min-width: 4em; 
}

/* New Chart Area Styles */
.daily-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center elements vertically */
    position: relative; /* For positioning labels potentially */
    height: 60px; /* Set a fixed height for the chart area */
}

.daily-temp-high-label {
    position: absolute;
    top: -1.2em; /* Position above the bar container */
    font-size: 0.8rem;
    font-weight: 500;
    color: #3C3C43;
}

.daily-temp-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #AEAEB2;
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease-out;
}

.daily-precip-bar {
    position: absolute;
    top: 100%; /* Start at the axis (just below the label) */
    left: 0;
    width: 100%;
    background-color: #5AC8FA;
    border-radius: 0 0 4px 4px;
    transition: height 0.3s ease-out;
    margin-top: 24px; /* Lower the daily precip bars further below the label */
}

.daily-precip-label {
    position: absolute;
    bottom: -1.2em; /* Position below the bar container */
    font-size: 0.75rem;
    color: #5AC8FA; /* Match precip bar color */
    visibility: hidden; /* Hide if no precip */
}
.daily-precip-label.visible {
    visibility: visible;
}

.daily-temp-high {
    /* High temp is now a label above the bar */
    display: none; /* Hide the original high temp element */
}

.daily-temp-low {
    font-weight: 500;
    color: #3C3C43;
    opacity: 0.7;
    text-align: right;
    min-width: 2.5em; /* Align low temps */
}

/* === Footer === */
#notifications-btn {
    background-color: #E5E5EA;
    color: #3C3C43;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#notifications-btn:hover {
    background-color: #D1D1D6;
}

#notifications-btn.active {
    background-color: #34C759;
    color: white;
}

#notifications-btn:disabled {
    background-color: #E5E5EA;
    color: #8E8E93;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Add more styles for responsiveness, different themes etc. as needed */

/* General Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 18px; /* Increased base font size */
}

body {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background-color: #F8F9FA; /* Light background */
    color: #343A40; /* Dark grey text */
    padding: 0;
    -webkit-font-smoothing: antialiased; /* Smoother fonts */
    -moz-osx-font-smoothing: grayscale;
}

#app-container {
    max-width: 700px; /* Max width for larger screens */
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF; /* White app background */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

/* Header */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem;
    border-bottom: 1px solid #E9ECEF; /* Light separator */
}

.location-info h1 {
    font-size: 1.5rem; /* Larger location name */
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.1rem;
}

.location-info #current-date {
    font-size: 0.9rem;
    color: #6C757D; /* Secondary grey */
}

#refresh-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #6C757D;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}
#refresh-btn:hover {
    color: #343A40;
}

/* Main Content Area */
.main-content {
    flex-grow: 1;
    padding: 2rem 1.5rem;
}

/* Current Weather Section */
#current-weather {
    text-align: center;
    margin-bottom: 3rem;
}

.temp-display {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

#current-temp {
    font-size: 6rem; /* Very prominent temp */
    font-weight: 300; /* Lighter weight */
    color: #212529;
    line-height: 1;
}

.degree-symbol {
    font-size: 2rem;
    font-weight: 300;
    color: #495057;
    margin-top: 0.8rem; /* Align nicely */
}

.condition-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

#current-condition-icon {
    font-size: 1.8rem; /* Adjust as needed for icon font/SVG */
    color: #007BFF; /* Example color */
}

#current-condition-text {
    font-size: 1.25rem;
    font-weight: 500;
    color: #495057;
}

.details-display #current-hi-low {
    font-size: 1rem;
    color: #6C757D;
}

/* Forecast Section */
#forecast {
    margin-bottom: 2rem;
}

#forecast h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    text-align: center;
    margin-bottom: 1.5rem;
}

#forecast-chart-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align days at the bottom */
    gap: 0.5rem; /* Spacing between days */
    min-height: 180px; /* Ensure container has height for bars */
    padding: 0 0.5rem; /* Padding inside container */
    border-top: 1px solid #E9ECEF;
    border-bottom: 1px solid #E9ECEF;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.forecast-day {
    flex: 1; /* Each day takes equal space */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.forecast-day .temp {
    font-size: 1rem;
    font-weight: 500;
    color: #343A40;
    margin-bottom: 0.5rem; /* Space above precip bar */
    order: 1; /* Temp below the bar container visually */
}

.precip-bar-container {
    width: 24px; /* Match time-label width */
    height: 24px; /* Enough space to position bar below baseline */
    display: flex;
    justify-content: center;
    position: relative;
    top: 8px; /* Shift down so bar sits below time-label */
    margin-bottom: -8px; /* Pull container up to compensate */
}

.precip-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #5AC8FA; /* Ensure correct blue */
    border-radius: 0 0 7px 7px; /* Round bottom */
    max-height: 70px; /* Visually emphasise precipitation bars */
    transition: height 0.3s ease-out;
    /* Height is set dynamically by JS based on precip amount */
}

.forecast-day .precip-amount {
    font-size: 0.75rem;
    color: #0056b3; /* Darker blue for amount text */
    margin-top: 0.25rem; /* Space below bar */
    height: 1em; /* Reserve space even if empty */
    visibility: hidden; /* Hide if no precip */
    order: 3;
}

.forecast-day .precip-amount.visible {
    visibility: visible;
}

.forecast-day .day-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6C757D;
    margin-top: 0.5rem;
    order: 4;
}

/* Footer */
#last-updated-container {
    font-size: 0.8rem;
    color: #6C757D;
    margin-bottom: 0.75rem;
}

/* Responsive adjustments (for wider screens) */
@media (max-width: 370px) {
    html {
        font-size: 14px; /* Slightly smaller base font on very small screens */
    }
    .precip-bar-container {
        width: 30px; /* Narrower bars */
    }
}

/* Ensure app container doesn't get too wide on desktop, keeps mobile feel */
@media (min-width: 700px) {
     #app-container {
        margin-top: 2rem;
        margin-bottom: 2rem;
        border-radius: 12px;
     }
}

/* Remove previous absolute/margin hacks */
.precip-bar-container { display: none; }
.axis-line { display: none; }

/* Remove old bar-container and axis-line styles if present */
/* .bar-container, .axis-line, .precip-bar-container { display: none !important; } */

/* ===== Daily View - Stacked Hourly Charts ===== */

/* Container for each day's forecast in the daily view - NOW A CARD */
.daily-hourly-forecast-day.card {
    /* Keep bottom margin for spacing */
    margin-bottom: 0.75rem; /* Reduced margin between day cards */
    /* Remove the border-top, card shadow provides separation */
    border-top: none;
    /* Override base card padding for condensation */
    padding: 1rem 0.75rem 0.5rem 0.75rem; /* Increased top padding from 0.5rem, kept L/R and bottom */
    /* Keep other card styles like background, border-radius, shadow */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Slightly softer shadow */
}

/* Style for the day heading (e.g., "Tuesday") */
.daily-hourly-day-label {
    font-size: 1rem; /* Larger */
    font-weight: 700; /* Bold */
    color: var(--text-primary);
    margin-bottom: 0.5rem; /* Reduced space below heading */
    padding-left: 1rem; /* CHANGED to add more padding */
    padding-right: 1rem; /* ADDED more padding */
    /* Make it look less like a card title (h2) */
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
}

/* Style for the chart container within each day card */
.daily-hourly-chart-container {
    padding-top: 0; /* Remove extra padding */
    padding-bottom: 0.25rem; /* Minimal padding below chart */
    /* Align left edge with heading */
    padding-left: 0;
    padding-right: 0;
    overflow-y: hidden; /* Ensure no vertical scrolling */
}

/* --- Vertical Compression for Hourly Items within Daily View --- */
/* These existing rules should still apply correctly inside the day cards */

/* Target hourly items specifically within the daily view */
.daily-view .hourly-item {
    /* Reduce overall height */
    height: 70px; /* Increased slightly from 60px to prevent label cutoff */
}

.daily-view .chart-label-top {
    /* Keep font size as is, was 0.7rem */
    /* font-size: 0.7rem; */
}

.daily-view .bar-container {
    /* Reduce height of the area containing bars */
    height: 25px; /* Halved from 50px */
    /* Keep top margin */
    margin-top: 4px;
}

/* Adjust hourly bar container width if needed (optional) */
/* .daily-view .hourly-bar-container { width: 10px; } */

/* Adjust precip bar margin within daily view */
.daily-view .precip-bar {
    margin-top: 4px; /* Reduced margin from default 18px */
    max-height: 25px; /* Limit max height */
}

.daily-view .axis-label {
    /* Keep font size as is, was 0.7rem */
    /* font-size: 0.7rem; */
    /* Keep margin-top as is, was 2px */
    /* margin-top: 2px; */
}

/* Hide precipitation bars if they become too cluttered (optional) */
/* .daily-view .precip-bar { display: none; } */


/* Adjustments for smaller screens if needed */
@media (max-width: 370px) {
    .daily-view .hourly-item {
        width: 18px; /* Further reduce width */
    }
    .daily-view .axis-label {
        /* Potentially hide labels on very small screens */
        /* display: none;  */
    }
}

/* Override default card H2 for specific charts */
#hourly-chart-card h2,
#daily-chart-card h2 {
    font-size: 1rem; /* Match daily-hourly-day-label */
    font-weight: 700; /* Already bold, ensure consistency */
    color: var(--text-primary); /* Use primary text color */
    opacity: 1; /* Full opacity */
    text-transform: none; /* Remove uppercase */
    letter-spacing: normal; /* Reset letter spacing */
}

.chart-container::-webkit-scrollbar { 
    display: none;
}

.label-between-bars {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: 36px; /* Place between temp and precip bars, adjust as needed */
    font-size: 0.8rem;
    color: var(--text-secondary);
    z-index: 2;
    background: none;
    pointer-events: none;
}

.daily-label.axis-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0 2px;
    z-index: 2;
}

/* Add styles for views if they don\'t exist */
.view {
    display: none; /* Hide views by default */
    width: 100%;
    /* Add padding or other common view styles */
    padding: 1rem;
    /* Allow vertical scrolling if content overflows */
    overflow-y: auto;
    /* Ensure views can grow to fill main content */
    flex-grow: 1; 
    /* Add flex for centering or other layout if needed */
    /* display: flex; */
    /* flex-direction: column; */
}

.view.active {
    display: block; /* Show the active view */
}

/* Radar View Specific Styles */
#radar-view {
    padding: 0; /* Remove padding for full map */
    display: flex; /* Use flex to make map fill space */
    flex-direction: column;
    height: 100%; /* Ensure radar view tries to fill parent */
}

#map {
    width: 100%;
    height: 100%;
    z-index: 1; /* Ensure map is behind controls if they overlap */
}

/* Ensure Leaflet controls are visible */
.leaflet-control-layers {
     background: rgba(255, 255, 255, 0.8);
     border-radius: 5px;
     padding: 5px;
     color: #333; /* Ensure text is readable */
}

.leaflet-control-layers label span {
    vertical-align: middle;
}

/* --- Full Screen Radar Logic --- */

/* When radar view is active, remove padding from main content */
main#main-content:has(#radar-view.active) {
    padding: 0;
    /* Ensure it respects safe areas at top/bottom when padding is removed */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    height: 100vh; /* Force main to take full viewport height */
    overflow: hidden; /* Prevent scrolling on main when map is fullscreen */
}

/* Hide the floating nav when radar view is active */
/* Using sibling selector assumes nav follows main in the DOM */
#radar-view.active ~ .floating-nav {
    display: none;
}

/* --- End Full Screen Radar Logic --- */

/* --- NEW Layer Selector Styles --- */
#layer-selector {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000; /* Ensure it's above the map */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column; /* Stack buttons and timestamp vertically */
    gap: 8px; /* Spacing between items */
}

#layer-selector .layer-button {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background-color 0.2s, border-color 0.2s;
    display: flex; /* Align icon and text */
    align-items: center;
    gap: 5px; /* Space between icon and text in button */
}

#layer-selector .layer-button i {
    font-size: 1em; /* Adjust icon size if needed */
}

#layer-selector .layer-button:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

#layer-selector .layer-button.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Styles for the new radar timestamp info */
.radar-timestamp-info {
    font-size: 0.85em;
    color: #333;
    padding: 5px 0; /* Add some padding */
    text-align: center; /* Center the text */
    border-top: 1px solid #eee; /* Optional separator */
    margin-top: 5px; /* Space from buttons */
}

.radar-timestamp-info .timestamp-label {
    font-weight: 500; /* Make the "Updated" part slightly bolder */
}

.radar-timestamp-info .timestamp-value {
    /* Style for the actual time value if needed */
}

.app-container.radar-active .location-picker-header {
    display: none; /* Hide location picker when radar is active */
}

/* ... existing code ... */

/* Dark Mode Overrides for Radar Controls */
.dark-mode #layer-selector {
    background-color: rgba(40, 40, 40, 0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.dark-mode #layer-selector .layer-button {
    background-color: #333;
    border-color: #555;
    color: #f0f0f0;
}

.dark-mode #layer-selector .layer-button:hover {
    background-color: #444;
    border-color: #666;
}

.dark-mode .radar-timestamp-info {
    color: #ccc;
    border-top-color: #444;
}

.dark-mode .radar-timestamp-info .timestamp-label {
    /* No change needed, or adjust if necessary */
}

/* ... existing code ... */

/* Modern Location Marker Styles */
.custom-marker-container {
    background: transparent;
    border: none;
}

.modern-marker {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.marker-pin {
    width: 16px;
    height: 16px;
    background-color: #007bff;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.marker-pulse {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 123, 255, 0.2);
    border-radius: 50%;
    z-index: 5;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Radar Timestamp Display */
.radar-timestamp {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 10px;
}

/* Improve radar layer visibility */
.leaflet-tile-pane {
    z-index: 200 !important; /* Ensure tile pane is visible and on top */
}

.leaflet-map-pane {
    z-index: 100;
    position: relative !important; /* Force relative positioning for proper stacking */
}

/* Ensure the marker is visible above other layers */
.leaflet-marker-pane {
    z-index: 500 !important; /* Higher z-index than the tile pane */
}

/* Make sure popup is always on top */
.leaflet-popup-pane {
    z-index: 700 !important;
}

/* Fix for Safari and iOS */
.leaflet-safari .leaflet-tile {
    image-rendering: -webkit-optimize-contrast !important;
}

/* Improved Loading States */
.leaflet-tile-loaded {
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease;
}

.leaflet-tile-loading {
    visibility: hidden;
    opacity: 0;
}

/* Velocity Info Bubble */
.radar-info {
    margin: 10px;
    z-index: 1000;
}

.velocity-info-bubble {
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 15px;
    border-radius: 10px;
    max-width: 250px;
    font-size: 0.85rem;
    line-height: 1.4;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.velocity-info-bubble p {
    margin: 0 0 8px 0;
}

.velocity-info-bubble ul {
    margin: 5px 0;
    padding-left: 20px;
}

.velocity-info-bubble li {
    margin: 3px 0;
}

/* Close button for velocity info */
.velocity-info-close {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #ccc;
    cursor: pointer;
    font-size: 1.2rem;
}

/* === Location Picker Header === */
.location-picker-header {
    display: flex; /* Keep flex display */
    justify-content: center; /* Keep content centered */
    align-items: center;
    align-self: center; /* Center the pill horizontally in the flex container */
    width: max-content; /* Size based on content */
    max-width: calc(100% - 4rem); /* Limit width with side margins */
    padding: 0.6rem 1.5rem; /* Adjust vertical and horizontal padding */
    /* Add top safe area padding (applied within padding-top) */
    padding-top: calc(0.6rem + env(safe-area-inset-top));
    position: sticky; /* Stick to the top */
    top: 0.5rem; /* Add a small space from the absolute top */
    background-color: var(--card-background); /* Use white card background */
    border-radius: 999px; /* Make it a pill */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Add subtle shadow */
    z-index: 10; /* Ensure it's above scrolling content */
    gap: 0.5rem; /* Space between text and button */
    margin-bottom: 0.5rem; /* Add some space below the sticky header */
}

#location-picker-display {
    font-size: 1rem; /* Slightly larger than base */
    font-weight: 600; /* Semi-bold */
    color: var(--text-primary);
}

/* Reusable icon button style */
.icon-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.1rem; /* Adjust icon size */
    cursor: pointer;
    padding: 0.25rem; /* Small padding for tap target */
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-button:hover {
    color: var(--text-primary); /* Darken on hover */
}

/* === Location Selection Dropdown Styles === */
.location-dropdown {
    position: absolute; /* Position relative to app-container */
    top: 5rem; /* Initial position below header (adjust as needed) */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 3rem); /* Responsive width */
    max-width: 400px; /* Max width */
    z-index: 100; /* Above main content, below potential modals */
    background-color: var(--card-background);
    font-family: inherit;
    border-radius: 28px; /* Match card rounding */
    padding: 1.5rem; /* Match card padding */
    /* Inherits card padding, border-radius, shadow */
    display: none; /* Hidden by default */
    max-height: 60vh; /* Limit height */
    overflow-y: auto; /* Allow scrolling within dropdown */
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15), 0 8px 10px rgba(0, 0, 0, 0.12); /* Enhanced shadow */
}

.location-dropdown.active {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Adjustments for content inside dropdown */
.location-selection-content {
    /* padding: 1.5rem; /* Inherits from .card now */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* General Button Style (can be reused) */
.button-primary {
    background-color: #007AFF; /* System blue */
    color: white;
    border: none;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex; /* Align icon and text */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative; /* For loading spinner */
    overflow: hidden; /* For ripple effect */
}

.button-primary:hover {
    background-color: #0056b3; /* Darker blue */
}

.button-primary:active {
    background-color: #004494; /* Even darker on active */
    transform: translateY(1px); /* Subtle press effect */
}

.button-primary:disabled {
    background-color: #77b8ff; /* Lighter blue */
    cursor: not-allowed;
    opacity: 0.8;
}

.button-primary i {
    font-size: 0.9em; /* Slightly smaller icon */
}

.search-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #EFEFF4; /* Light gray background */
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    transition: box-shadow 0.2s ease;
    border: 1px solid transparent;
}

.search-container:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
    border-color: #007AFF;
}

#location-search-input {
    flex-grow: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.5; /* Ensure consistent height on mobile */
    padding: 4px 0; /* Add some padding for better tap target */
    font-family: inherit;
}

#location-search-input::placeholder {
    color: var(--text-secondary);
}

/* Use existing .icon-button for search button */
#location-search-btn {
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

#location-search-btn:hover {
    color: #007AFF; /* Highlight on hover */
}

#location-results-container {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#location-results-container h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    padding-left: 0.5rem;
}

.location-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.location-list li {
    padding: 0.75rem 1rem;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex; /* Align text and icons horizontally */
    align-items: center;
    justify-content: space-between;
    user-select: none; /* Prevent text selection */
}

/* Location name (left side of list item) */
.location-name {
    flex: 1; /* Take up available space */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ellipsis for long names */
    white-space: nowrap;
    padding-right: 0.5rem; /* Space between name and button */
}

/* Favorite/Remove buttons */
.favorite-btn, .remove-btn {
    color: var(--text-secondary);
    opacity: 0.7;
    transition: color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
    font-size: 1.1rem;
}

.favorite-btn:hover, .remove-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.favorite-btn {
    color: #FFB800; /* Gold star color */
}

.remove-btn:hover {
    color: #FF3B30; /* Red delete color */
}

.location-list li:hover {
    background-color: rgba(0, 122, 255, 0.1); /* Blueish hover highlight */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.location-list li:active {
    transform: translateY(0);
    background-color: rgba(0, 122, 255, 0.15); /* Darker on press */
}

/* Empty state styles */
.empty-list-message {
    padding: 1rem;
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
    font-size: 0.9rem;
}

/* Mobile optimizations */
@media (max-width: 480px) {
    .location-dropdown {
        width: calc(100% - 2rem); /* Wider on mobile */
        max-width: none;
        max-height: 70vh; /* Taller on mobile */
    }
    
    .button-primary, 
    .search-container,
    .location-list li {
        padding: 0.9rem 1rem; /* Larger padding for better touch targets */
    }
    
    #location-search-input {
        font-size: 16px; /* Prevent iOS auto-zoom */
    }
}

/* Loading message within search results */
.searching-message {
    padding: 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}

/* Toast Messages */
#toast-container {
    position: fixed;
    bottom: 80px; /* Above the nav bar */
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    pointer-events: none; /* Allow clicks to pass through */
}

.toast-message {
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    max-width: 80%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-message.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-message.error {
    background-color: rgba(255, 59, 48, 0.9); /* Red background for errors */
}

.toast-message i {
    margin-right: 6px;
}

/* === End Location Selection Dropdown Styles === */

/* Hide Location Header when Radar is active */
.app-container.radar-active .location-picker-header {
    display: none;
}

/* Improve location item click visibility */
.location-item {
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.location-list li.location-item {
    position: relative;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    /* Add subtle indicator that items are clickable */
    border-left: 3px solid transparent;
}

.location-list li.location-item:hover {
    background-color: rgba(0, 122, 255, 0.08);
    border-left-color: rgba(0, 122, 255, 0.6);
}

.location-list li.location-item:active {
    background-color: rgba(0, 122, 255, 0.15);
    transform: translateY(1px);
}

/* Add generic inheritance for all form elements */
input, button, select, textarea {
    font-family: inherit;
}

/* Enforce DM Sans font in location picker controls */
.location-selection-content .button-primary,
.location-selection-content #location-search-input,
.location-selection-content #location-search-input::placeholder {
    font-family: 'DM Sans', sans-serif;
}

/* Additional dark mode styles for UI elements */
body.dark-mode .location-picker-header {
    background-color: var(--dark-card-background);
    color: var(--dark-text-primary);
    border-bottom-color: var(--dark-border-color);
}

body.dark-mode #location-picker-display {
    color: var(--dark-text-primary);
}

body.dark-mode .icon-button {
    color: var(--dark-text-primary);
}

body.dark-mode .setting-label {
    color: var(--dark-text-primary);
}

/* Style for radio buttons in dark mode */
body.dark-mode .radio-group input[type="radio"] {
    accent-color: #007AFF;
}

/* Dark mode for chart elements */
body.dark-mode .axis-label {
    color: var(--dark-text-secondary);
}

body.dark-mode .chart-label-top {
    color: var(--dark-text-secondary);
}

/* Custom color for the toggle label in dark mode */
body.dark-mode .setting-item .setting-label {
    color: var(--dark-text-primary);
}

/* Dark mode for toasts */
body.dark-mode .toast-message {
    background-color: var(--dark-card-background);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border-color);
}

body.dark-mode .toast-message.error {
    background-color: rgba(255, 59, 48, 0.2);
    color: #FF3B30;
}

/* Highlight current condition text in dark mode for better contrast */
body.dark-mode #current-condition-text {
    color: var(--text-primary);
    font-weight: 600;
}

/* Fallback message when there's no precipitation */
.no-precipitation-message {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
    font-family: inherit;
}

/* Dark mode: make fallback message and chart labels fully bright */
body.dark-mode {
    /* Override secondary text to full white for key labels */
    --dark-text-secondary: #E5E5E5;
}

body.dark-mode .no-precipitation-message,
body.dark-mode .chart-label-top,
body.dark-mode .axis-label,
body.dark-mode .time-label.axis-label {
    color: var(--text-primary) !important;
}

/* Styles for expandable hourly extra charts */
.hidden {
    display: none !important;
}

.expandable-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem; /* Tighter spacing */
    /* border-bottom: 1px solid var(--border-color); */ /* Subtle separator -- REMOVED */
    padding-bottom: 0.5rem;
}

#hourly-extra-charts .bar-container {
    height: 140px !important;
    margin-bottom: 18px !important;
}

#hourly-extra-charts .hourly-item {
    height: 140px !important;
    align-items: flex-end !important;
    margin-bottom: 0 !important;
}

/* Reintroduce expand-toggle icon rotation */
.expand-toggle i {
    transition: transform 0.3s ease;
}
.expand-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Modern expand toggle styling */
.expand-toggle {
    background: none;
    border: none;
    padding: 0.3rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.expand-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Header spacing and style tweaks */
.expandable-card .card-header h2 {
    margin: 0;
    font-weight: 600;
    font-size: 1rem;
}

.humidity-bar {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--humidity-color, #007BFF);
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}

.wind-bar {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--wind-color, #34A852);
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}

/* Final override to make extra hourly items height auto and align bars to bottom */
#hourly-extra-charts .hourly-item {
    height: 108px !important;    /* Bar-container height (100px) + label space (~8px) */
    justify-content: flex-end !important; /* Align bars at bottom */
    margin: 0 1px;                /* Tight horizontal spacing */
    padding: 0;
}

/* Comment out forced display override for hourly extra charts */
/* #hourly-extra-charts { display: block !important; padding: initial !important; margin: initial !important; } */
/* #hourly-extra-charts .chart-container { padding: 1rem 0.5rem 0.5rem 0.5rem !important; gap: 2px !important; } */
/* #hourly-extra-charts .hourly-item { height: 180px !important; justify-content: flex-start !important; margin: 0 !important; } */
/* #hourly-extra-charts .chart-item { padding: initial !important; flex-direction: column !important; align-items: center !important; } */
/* #hourly-extra-charts .bar-container { height: 100px !important; margin-top: 8px !important; } */
/* #hourly-extra-charts .chart-label-top { position: absolute; bottom: calc(100% + 4px); } */

.chart-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
}

/* Style for daily hourly section headers */
.section-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0.5rem 0 0.25rem 0.5rem;
}

/* Improve daily tab's expandable charts to match today tab */
.daily-hourly-chart-container { /* This is for the main temp/precip chart in daily cards */
    padding: 0.25rem 0 0.25rem 0; /* top: 0.25rem, L/R: 0, bottom: 0.25rem -- CHANGED top padding */
    margin-bottom: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.daily-hourly-chart-container::-webkit-scrollbar {
    display: none;
}

.daily-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.daily-summary-label {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.details-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.daily-hourly-forecast-day .expandable-details .chart-container .hourly-item {
    height: 65px !important; /* Reduced from 108px */
    justify-content: flex-end !important;
    margin: 0 2px; /* CHANGED from 0 1px to match main daily chart items */
    padding: 0;
}

/* New rule for bar-container within daily expandable charts */
.daily-hourly-forecast-day .expandable-details .chart-container .hourly-item .bar-container {
    height: 50px !important; /* Set specific height for these bar containers */
    margin-top: 0 !important; /* Override any inherited margin-top */
    position: relative; /* Ensure it's a positioning context for absolute children */
    width: 12px; /* Match other hourly bar containers */
}

/* THIS IS THE MODIFIED RULE */
.daily-hourly-forecast-day .expandable-details .chart-container {
    /* Ensure these styles are maintained or inherited if not overridden by a more general rule */
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* Adjust padding */
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 1.5rem; /* Increased from 1.2rem */
}

.daily-hourly-chart-container::-webkit-scrollbar {
    display: none;
}

/* NEW STYLES FOR REDESIGNED DAILY VIEW */

/* Container for the horizontally scrollable day summary cards */
#day-summary-cards-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.75rem 0.5rem; /* Padding around the scrollable area */
    gap: 0.4rem; /* Reduced gap from 0.75rem */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

#day-summary-cards-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, Edge */
}

/* Individual Day Summary Card */
.day-summary-card {
    flex: 0 0 auto;
    width: 65px;
    padding: 0.4rem;
    background-color: var(--card-background);
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.15rem; /* Reduced from 0.3rem to keep elements compact */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent;
    height: auto;
    min-height: 160px; /* Slightly reduced but still taller than original */
}

.day-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.day-summary-card.selected {
    border-color: #007AFF; /* Blue border for selected card */
    box-shadow: 0 6px 12px rgba(0, 122, 255, 0.2);
    background-color: #007AFF; /* Inverted background */
    color: var(--card-background); /* Inverted text (using card background as text color) */
    /* New selected style: black background in light mode */
    background-color: var(--text-primary); /* Typically black/dark gray */
    color: var(--card-background); /* Typically white/light gray */
    border-color: var(--text-primary); /* Match background */
}

.day-summary-card.selected .day-summary-name,
.day-summary-card.selected .day-summary-icon,
.day-summary-card.selected .day-summary-temp-graphic .temp-high-label,
.day-summary-card.selected .day-summary-temp-graphic .temp-low-label,
.day-summary-card.selected .day-summary-precip {
    color: var(--card-background); /* Ensure all text elements inside invert */
}

.day-summary-card.selected .day-summary-precip .wi-raindrop {
    color: var(--card-background); /* Invert raindrop icon color as well */
}

.day-summary-card.selected .temp-bar-segment { /* This class is no longer used for the main bar */
    background-color: var(--card-background); /* Invert bar segment color */
}

.day-summary-card.selected .temp-range-bar-daily {
    background-color: var(--dark-text-primary); /* Darker bar for selected (light mode) */
    /* Bar color for selected card in light mode */
    background-color: var(--card-background); /* Light bar on dark background */
}

.day-summary-name {
    font-size: 0.7rem; /* Slightly reduced */
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.1rem; /* Minimal margin */
}

.day-summary-icon {
    font-size: 1.5rem; /* Back to original size */
    color: var(--text-primary);
    margin: 0.1rem 0; /* Minimal margin */
}

/* Graphical representation of High/Low Temperature */
.day-summary-temp-graphic {
    width: 100%;
    position: relative;
    margin: 0.1rem 0; /* Minimal margin */
    height: 85px; /* Increased significantly for better temperature range display */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Make the temperature track taller */
.temp-range-track {
    position: relative;
    width: 25%; /* Width percentage of card width */
    height: 60px; /* Much taller for better range visualization */
    background-color: var(--border-color);
    border-radius: 3px;
    margin: 1px 0;
}

/* Minimal precipitation display */
.day-summary-precip {
    font-size: 0.65rem; /* Reduced slightly */
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.1rem;
    margin: 0.1rem 0; /* Minimal margin */
}

.day-summary-precip .wi-raindrop {
    color: var(--precip-color);
    font-size: 0.9em; /* Slightly reduced */
}

.day-summary-temp-graphic .temp-high-label,
.day-summary-temp-graphic .temp-low-label {
    position: static;
    width: auto;
    text-align: center;
    font-size: 0.7rem; /* Keep smaller font */
}

/* Container for the detailed charts shown below summary cards */
#detailed-charts-section {
    padding: 0 0.75rem 0.75rem 0.75rem; /* Padding around the detailed charts area */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Space between detailed chart cards */
}

/* Styling for individual cards within the detailed-charts-section */
.detailed-chart.card {
    background-color: var(--card-background);
    border-radius: 16px;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.07);
}

.detailed-chart.card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Ensure chart containers within detailed cards have proper styling */
.hourly-temp-precip-detailed,
.hourly-humidity-detailed,
.hourly-wind-detailed {
    /* These are .chart-container elements */
    padding: 1.2rem !important; /* Compact padding */
    /* Ensure they don't inherit excessive height if not needed */
}

.hourly-temp-precip-detailed .hourly-item,
.hourly-humidity-detailed .hourly-item,
.hourly-wind-detailed .hourly-item {
    height: 120px; /* Reduced height */
}

.hourly-temp-precip-detailed .bar-container,
.hourly-humidity-detailed .bar-container,
.hourly-wind-detailed .bar-container {
    height: 80px; /* Default bar area height */
}

.hourly-humidity-detailed .bar-container,
.hourly-wind-detailed .bar-container {
    height: 60px; /* Further reduced bar area height */
}

/* NEW: Styles for UV Index Detailed Chart */
.hourly-uv-detailed {
    /* Inherits general .chart-container styles */
    padding-top: 1.2rem !important; 
    padding-bottom: 0.6rem !important; 
}

.hourly-uv-detailed .hourly-item {
    height: 120px; /* Consistent with other detailed hourly items */
}

.hourly-uv-detailed .bar-container {
    height: 80px; /* Consistent bar area height */
}

.uv-index-bar {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease, background-color 0.3s ease;
}
/* END NEW STYLES */

/* Specific card for miscellaneous details (UV, Sun times) */
.misc-details-card {
    /* Uses .detailed-chart.card styles */
}

.misc-detail-item {
    font-size: 0.9rem;
    color: var(--text-primary);
    padding: 0.3rem 0;
    line-height: 1.5;
}

.misc-detail-item strong {
    font-weight: 600;
    color: var(--text-secondary);
}

/* Placeholder for Allergy Card */
.allergy-card-placeholder p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Dark Mode adaptations for new Daily View elements */
body.dark-mode .day-summary-card {
    background-color: var(--dark-card-background);
    border: 2px solid transparent; /* Reset border */
}

body.dark-mode .day-summary-card.selected {
    border-color: #007AFF; /* Keep blue for selected */
    background-color: var(--dark-text-primary); /* Typically white/light gray */
    color: var(--dark-card-background); /* Typically black/dark gray */
    border-color: var(--dark-text-primary); /* Match background */
}

body.dark-mode .day-summary-name,
body.dark-mode .day-summary-icon {
    color: var(--dark-text-primary);
}

body.dark-mode .day-summary-temp-graphic .temp-high-label,
body.dark-mode .day-summary-temp-graphic .temp-low-label,
body.dark-mode .day-summary-precip {
    color: var(--dark-text-secondary);
}

body.dark-mode .detailed-chart.card {
    background-color: var(--dark-card-background);
}

body.dark-mode .detailed-chart.card h3 {
    color: var(--dark-text-primary);
    border-bottom-color: var(--dark-border-color);
}

body.dark-mode .misc-detail-item {
    color: var(--dark-text-primary);
}

body.dark-mode .misc-detail-item strong {
    color: var(--dark-text-secondary);
}

body.dark-mode .allergy-card-placeholder p {
    color: var(--dark-text-secondary);
}

body.dark-mode .day-summary-card.selected .temp-range-bar-daily {
    background-color: var(--dark-card-background); /* Dark bar on light background */
}

/* END OF NEW STYLES FOR REDESIGNED DAILY VIEW */

/* Message when no hourly data is available for a day */
.no-data-message {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
    padding: 1.5rem;
    font-style: italic;
}

/* Temperature range bar for daily cards - track is already defined earlier */
.temp-range-bar-daily {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%; /* Full width of its parent track */
    background-color: var(--temp-color-warm); /* Default color for the daily range */
    border-radius: 3px;
    /* bottom and height are set inline by JS */
    transition: background-color 0.2s ease;
}

/* Ensure detailed chart containers have enough top padding for labels */
.hourly-temp-precip-detailed,
.hourly-humidity-detailed,
.hourly-wind-detailed {
    padding-top: 1.2rem !important; /* More top padding for detailed view charts */
    padding-bottom: 0.6rem !important; /* Increased bottom padding for axis labels */
}

.setting-description {
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-top: 4px;
    margin-left: 8px;
}

/* Media queries for responsiveness */
.minutely-source-indicator {
    position: absolute;
    top: -24px;
    right: 10px;
    font-size: 0.8em;
    color: var(--text-secondary);
    background-color: var(--card-background);
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

.minutely-source-indicator i {
    color: #3498db;
}

.setting-description {
    font-size: 0.8em;
    color: var(--text-secondary);
    margin-top: 4px;
    margin-left: 8px;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    /* Add any additional styles for smaller screens */
}

/* Custom cursor styles */
.pointer {
    cursor: pointer;
}

/* Minutely precipitation chart padding adjustment */
.minutely-chart-container {
    padding-bottom: 1rem !important; /* Increased bottom padding for axis labels */
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.toast {
    min-width: 200px;
    max-width: 90%;
    padding: 12px 20px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.info {
    background-color: #3498db;
}

.toast.success {
    background-color: #2ecc71;
}

.toast.warning {
    background-color: #f39c12;
}

.toast.error {
    background-color: #e74c3c;
}

/* End Toast Notifications */

/* Snackbar container */
#status-snackbar {
    visibility: hidden; /* Hidden by default. Visible when class 'show' is added */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1000; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
    font-size: 17px; /* Increase font size */
}

/* Show the snackbar when a JS adds the 'show' class to it */
#status-snackbar.show {
    visibility: visible; /* Show the snackbar */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s; /* Default duration is 3s, animation lasts 0.5s in, 2s visible, 0.5s out */
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

/* Error snackbar specific styles (if you have one) */
#error-snackbar {
    background-color: #f44336; /* Red for errors */
}

/* Numeric label that clarifies precip amount (or lack thereof) */
.precip-label {
    position: absolute;
    top: calc(100% + var(--precip-bar-height, 0%) + 35px); /* Increased spacing from 30px to 35px */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem; /* Increased from 0.7rem for better readability */
    font-weight: 500; /* Added font weight for better visibility */
    color: var(--precip-color);
    white-space: nowrap;
    text-align: center;
    z-index: 3;
    margin-top: 4px; /* Increased margin for better spacing */
    background-color: rgba(var(--card-background-rgb, 255, 255, 255), 0.8); /* Semi-transparent background */
    padding: 1px 3px; /* Small padding for readability */
    border-radius: 3px; /* Rounded corners */
    min-width: 20px; /* Minimum width to prevent cramping */
}

/* ... existing code ... */
.chart-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
}

.chart-card .card-header h2 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.pill-toggle-group {
    display: flex;
    gap: 0.25rem;
}

.pill-toggle {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border-color);
    background-color: var(--card-background);
    color: var(--text-primary);
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pill-toggle.selected {
    background-color: #007AFF;
    color: #FFFFFF;
    border-color: #007AFF;
}

body.dark-mode .pill-toggle {
    background-color: var(--dark-card-background);
    border-color: var(--dark-border-color);
    color: var(--dark-text-primary);
}

body.dark-mode .pill-toggle.selected {
    background-color: #0A84FF;
    color: #FFFFFF;
    border-color: #0A84FF;
}


.setting-label {
    flex: 0 0 140px; /* fixed label column */
    font-weight: 600;
}

.radio-group {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.provider-setting {
    flex-wrap: wrap; /* allow elements to wrap on small screens */
    align-items: flex-start;
}

.provider-setting .data-source-display {
    flex-basis: 100%;
    margin-left: 140px; /* align under radios */
    font-size: 0.85em;
    color: #6c6c70;
    margin-top: 4px;
}

/* Install button */
.primary-btn {
    padding: 0.5em 1.1em;
    border: 1px solid #007AFF;
    background-color: #FFF;
    color: #007AFF;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.primary-btn:hover {
    background-color: #007AFF;
    color: #FFF;
}

.primary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.dark-mode .primary-btn {
    background-color: transparent;
    border-color: #0A84FF;
    color: #0A84FF;
}

body.dark-mode .primary-btn:hover {
    background-color: #0A84FF;
    color: #FFF;
}

/* Adjust precip bar margin within daily view */
.daily-view .precip-bar {
    margin-top: 4px; /* Reduced margin from default 18px */
    max-height: 25px; /* Limit max height */
}

/* Special spacing for precipitation labels in daily view */
.daily-view .precip-label {
    top: calc(100% + var(--precip-bar-height, 0%) + 20px); /* Reduced spacing for compact daily view */
    font-size: 0.7rem; /* Slightly smaller font for daily view */
    margin-top: 2px; /* Reduced margin for daily view */
    background-color: rgba(var(--card-background-rgb, 255, 255, 255), 0.9); /* More opaque background for better readability in compact view */
}

body.dark-mode .primary-btn:hover {
    background-color: #0A84FF;
    color: #FFF;
}

/* Force Refresh Button styling */
.refresh-btn {
    background-color: #FF9500 !important;
    border-color: #FF9500 !important;
    color: #FFF !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.refresh-btn:hover {
    background-color: #E85D00 !important;
    border-color: #E85D00 !important;
    color: #FFF !important;
}

.refresh-btn:disabled {
    background-color: #CCCCCC !important;
    border-color: #CCCCCC !important;
    color: #666666 !important;
    cursor: not-allowed !important;
}

.refresh-btn i {
    font-size: 0.9em;
}

body.dark-mode .refresh-btn {
    background-color: #FF9F0A !important;
    border-color: #FF9F0A !important;
    color: #1C1C1E !important;
}

body.dark-mode .refresh-btn:hover {
    background-color: #FFB340 !important;
    border-color: #FFB340 !important;
    color: #1C1C1E !important;
}

/* Adjust precip bar margin within daily view */