/* Touch-optimized styles for 1280x1024 kiosk */
        body {
            font-size: 16px;
            line-height: 1.5;
            background-color: #f8f9fa;
            overflow-x: hidden;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* Ensure html element doesn't constrain width */
        html {
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* Minimum touch target size */
        .btn, .nav-link {
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Dropdown menu styling */
        .dropdown-item {
            min-height: 44px;
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            text-align: left;
        }
        
        .dropdown-item i {
            width: 20px;
            margin-right: 0.75rem;
            text-align: center;
        }
        
        /* Header link hover effects */
        .kiosk-header h1 a {
            transition: all 0.2s ease;
        }
        
        .kiosk-header h1 a:hover {
            opacity: 0.8;
            transform: translateY(-1px);
        }
        
        /* Main container styling for dashboard layout only */
        main.container-fluid {
            max-width: 1240px;
            margin: 0 auto;
        }
        
        /* Custom header layout - bypasses Bootstrap completely */
        .kiosk-header {
            width: 100vw !important;
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw !important;
            margin-right: -50vw !important;
            padding: 0 !important;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: none;
            padding: 0.75rem 15px;
            margin: 0;
        }
        
        .header-section {
            display: flex;
            align-items: center;
            flex: 1;
        }
        
        .header-left {
            justify-content: flex-start;
        }
        
        .header-center {
            justify-content: center;
        }
        
        .header-right {
            justify-content: flex-end;
            gap: 0.5rem;
        }
        
        .panel {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 1.5rem;
            overflow: hidden;
            position: relative;
        }
        
        .panel-header {
            background: #f8f9fa;
            padding: 1rem;
            border-bottom: 1px solid #dee2e6;
            font-weight: 600;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .panel-header i {
            margin-right: 0.5rem;
            font-size: 1.2rem;
            color: #6c757d;
        }
        
        .panel-header .panel-title {
            display: flex;
            align-items: center;
            flex-grow: 1;
        }
        
        /* Expandable panel functionality */
        .panel-toggle {
            background: none;
            border: none;
            color: #6c757d;
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0.25rem;
            margin-left: 0.5rem;
            transition: transform 0.2s ease;
        }
        
        .panel-toggle:hover {
            color: #495057;
        }
        
        .dashboard-layout .panel.collapsed .panel-body {
            height: 60px !important;
            overflow: hidden;
        }
        
        .dashboard-layout .panel.collapsed .panel-toggle {
            transform: rotate(180deg);
        }
        
        .dashboard-layout .panel.expanded .panel-body {
            height: 450px !important;
        }
        
        /* Touch scroll indicators - moved to panel level to stay fixed */
        .panel::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: linear-gradient(transparent, rgba(248,249,250,0.8));
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 10;
        }
        
        .panel:hover::after,
        .panel:focus-within::after {
            opacity: 1;
        }
        
        /* Compact scrollable indicators */
        .panel-body.scrollable {
            border-bottom: 2px solid #e9ecef;
        }
        
        .panel-body {
            padding: 1.5rem;
            position: relative;
        }
        
        /* Dashboard-specific panel heights for kiosk layout */
        .dashboard-layout .panel-body {
            height: 320px;
            overflow-y: auto;
        }
        
        /* Weather and photo panels - taller to match side-by-side layout */
        .dashboard-layout #weather-panel .panel-body,
        .dashboard-layout #photo-panel .panel-body {
            height: 470px;
        }
        
        /* Compact mode for better space utilization (dashboard only) */
        .dashboard-layout .panel-body.compact {
            height: 280px;
            padding: 1rem;
        }
        
        /* Scrollbar styling for touch-friendly interaction */
        .panel-body::-webkit-scrollbar {
            width: 12px;
        }
        
        .panel-body::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 6px;
        }
        
        .panel-body::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 6px;
            border: 2px solid #f1f1f1;
        }
        
        .panel-body::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }
        
#photo-panel .panel-body {
    padding: 0;
    overflow: hidden;
}

#photo-panel #photo-content {
    padding: 0;
    height: 100%;
}

#photo-panel .photo-rotator,
#photo-panel .photo-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#photo-panel .photo-rotator img,
#photo-panel .photo-container img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

#photo-panel .photo-rotator img.photo-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    transition: opacity 0.8s ease;
}

        /* Photo panel specific */
        .photo-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .photo-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* Calendar panel specific */
        .calendar-events {
            padding-top: 0.25rem; /* Minimal whitespace at top */
            padding-bottom: 1.5rem; /* More whitespace at bottom for visual appeal */
        }
        
        /* Tasks panel - match calendar exactly */
        .tasks-list {
            padding-top: 0.25rem; /* Minimal whitespace at top - same as calendar */
            padding-bottom: 1.5rem; /* More whitespace at bottom for visual appeal - same as calendar */
        }
        
        /* Fade-to-white effect at bottom of scrollable content */
        /* For calendar - uses ::after pseudoelement */
        #calendar-panel .panel-body::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px; /* Height of fade effect */
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
            pointer-events: none; /* Allow clicking through the fade */
            z-index: 1; /* Above content */
        }
        
        /* For tasks - uses explicit div element for better control */
        #tasks-panel {
            position: relative;
        }
        
        #tasks-panel .panel-fade-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
            pointer-events: none;
            z-index: 10; /* Above panel-body content */
        }
        
        .date-separator {
            margin: 0.25rem 0 0.5rem 0; /* Minimal top margin */
            padding: 0.25rem 0;
            color: #495057;
            font-size: 1rem;
        }
        
        /* First date separator should have no top margin */
        .date-separator:first-child {
            margin-top: 0;
            padding-top: 0;
        }
        
        .no-events {
            margin-bottom: 0.5rem;
            padding: 0.5rem 0.75rem;
            color: #6c757d;
            font-style: italic;
        }
        
        .event-item {
            padding: 0.75rem;
            border-left: 4px solid #007bff;
            margin-bottom: 0.5rem;
            background: #f8f9fa;
            border-radius: 0 8px 8px 0;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .event-item:hover {
            background: #e9ecef;
            transform: translateX(4px);
        }
        
        .event-time {
            font-size: 0.9rem;
            color: #6c757d;
            font-weight: 500;
        }
        
        .event-title {
            font-weight: 600;
            margin: 0.25rem 0;
        }
        
        .event-location {
            font-size: 0.85rem;
            color: #495057;
        }
        
        /* Document panel specific */
        .document-content {
            max-height: 400px;
            overflow-y: auto;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .document-content h1,
        .document-content h2,
        .document-content h3 {
            color: #495057;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
        }
        
        .document-content p {
            margin-bottom: 0.75rem;
            line-height: 1.6;
        }
        
        /* Clock styles */
        .clock {
            font-size: 2rem;
            font-weight: 700;
            text-align: center;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .date {
            font-size: 1.1rem;
            text-align: center;
            color: rgba(255,255,255,0.9);
            margin-top: 0.25rem;
        }
        
        /* Standard desktop layout for larger screens */
        @media (min-width: 1281px) {
            main.container-fluid {
                max-width: 1200px;
            }
            
            .dashboard-layout .panel-body {
                height: 380px;
                padding: 1.5rem;
            }
            
            /* Weather and photo panels - taller for larger screens */
            .dashboard-layout #weather-panel .panel-body,
            .dashboard-layout #photo-panel .panel-body {
                height: 520px;
            }
            
            .dashboard-col {
                padding-left: 12px;
                padding-right: 12px;
            }
        }
        
        /* Kiosk compact mode - user toggleable */
        body.kiosk-compact .dashboard-col {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 2px;
        }
        
        body.kiosk-compact .dashboard-layout .panel-body {
            height: 240px;
            padding: 0.5rem;
        }
        
        body.kiosk-compact .panel-header {
            padding: 0.4rem 0.5rem;
            font-size: 0.9rem;
        }
        
        body.kiosk-compact .btn-sm {
            padding: 0.2rem 0.3rem;
            font-size: 0.75rem;
        }
        
        body.kiosk-compact .form-select-sm {
            min-width: 100px !important;
            font-size: 0.75rem;
        }
        
        body.kiosk-compact .task-item {
            padding: 0.3rem !important;
            margin-bottom: 0.3rem !important;
        }
        
        body.kiosk-compact .date-separator {
            margin: 0.75rem 0 0.4rem 0;
            padding: 0.4rem 0;
            font-size: 0.9rem;
        }
        
        body.kiosk-compact .no-events {
            margin-bottom: 0.4rem;
            padding: 0.4rem 0.6rem;
            font-size: 0.8rem;
        }
        
        body.kiosk-compact .event-item {
            padding: 0.3rem;
            margin-bottom: 0.25rem;
        }
        
        /* Specific optimizations for 1280x1024 displays */
        @media (max-width: 1280px) and (min-width: 1200px) {
            /* Ensure full width usage for main content */
            main.container-fluid {
                max-width: 100%;
                padding-left: 12px;
                padding-right: 12px;
            }
            
            /* Two-column layout optimizations */
            .dashboard-col {
                padding-left: 8px;
                padding-right: 8px;
                flex: 0 0 50%;
                max-width: 50%;
            }
            
            .dashboard-layout .panel-body {
                height: 350px;
                padding: 1rem;
            }
            
            /* Weather and photo panels - taller on tablets */
            .dashboard-layout #weather-panel .panel-body,
            .dashboard-layout #photo-panel .panel-body {
                height: 490px;
            }
            
            .dashboard-layout .panel.expanded .panel-body {
                height: 500px !important;
            }
            
            .dashboard-layout .panel.collapsed .panel-body {
                height: 60px !important;
            }
            
            .date-separator {
                margin: 0.75rem 0 0.4rem 0;
                padding: 0.4rem 0;
                font-size: 0.9rem;
            }
            
            .no-events {
                margin-bottom: 0.4rem;
                padding: 0.4rem 0.6rem;
                font-size: 0.8rem;
            }
            
            .panel {
                margin-bottom: 1.25rem;
            }
            
            /* Header optimizations */
            .header-content {
                padding: 0.75rem 15px;
            }
            
            .clock {
                font-size: 1.75rem;
            }
            
            .date {
                font-size: 1rem;
            }
            
            /* Form controls for better fit */
            .form-select-sm {
                min-width: 140px !important;
                font-size: 0.85rem;
            }
            
            .btn-sm {
                font-size: 0.8rem;
                padding: 0.3rem 0.5rem;
            }
        }

        /* Ultra-compact mode for smaller displays or when space is really tight */
        @media (max-width: 1199px) {
            .dashboard-layout .panel-body {
                height: 280px;
            }
            
            .dashboard-layout .panel.expanded .panel-body {
                height: 420px !important;
            }
            
            .dashboard-layout .panel.collapsed .panel-body {
                height: 50px !important;
            }
            
            .dashboard-col {
                padding-left: 6px;
                padding-right: 6px;
            }
            
            .panel {
                margin-bottom: 1rem;
            }
        }
        
        /* Loading states */
        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 200px;
            color: #6c757d;
        }
        
        .spinner-border-sm {
            width: 1rem;
            height: 1rem;
        }
        
        /* Drag and Drop Styling */
        .panel-drag-handle {
            cursor: grab;
            color: #6c757d;
            padding: 0.25rem;
            margin-left: 0.5rem;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .panel-drag-handle:hover {
            background: rgba(108, 117, 125, 0.1);
            color: #495057;
        }

        .panel-drag-handle:active {
            cursor: grabbing;
        }

        .sortable-ghost {
            opacity: 0.4;
            transform: scale(0.98);
        }

        .sortable-chosen {
            background: #f8f9fa;
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
            transform: scale(1.02);
            z-index: 1000;
        }

        .sortable-drag {
            transform: rotate(5deg);
        }

        .dashboard-controls {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1050;
            background: white;
            padding: 0.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .dashboard-controls .btn {
            min-height: auto;
        }

        /* Touch-friendly drag handles on mobile */
        @media (max-width: 768px) {
            .panel-drag-handle {
                padding: 0.5rem;
                margin-left: 0.25rem;
            }
        }
/* Task items styled like calendar events */
.task-item {
    padding: 0.75rem;
    border-left: 4px solid #007bff;
    margin-bottom: 0.5rem;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.6s ease-out;
    min-height: auto;
    height: auto;
    text-align: left !important; /* Prevent centering on HTMX swap */
    align-items: flex-start !important; /* Prevent vertical centering */
    display: block !important; /* Prevent layout shifts */
    position: relative !important; /* Maintain position during swap */
}

/* Prevent centering during HTMX swap */
.task-item * {
    text-align: left !important;
}

.task-item-grid {
    display: grid !important;
    text-align: left !important;
    justify-content: start !important;
}

.task-content-column {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Task completion fade-out animation */
.task-item.task-completing {
    opacity: 1 !important;
}

.task-item.task-completing.fade-out {
    opacity: 0 !important;
}

/* Remove top margin from first task item to match calendar */
.task-item:first-child {
    margin-top: 0;
}

.task-item:hover {
    background: #e9ecef;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.task-time {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.task-title {
    font-weight: 600;
    margin: 0.25rem 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    line-height: 1.5;
}

/* Ensure checkbox doesn't cause layout shifts */
.task-completion-checkbox {
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
}

.task-list-badge {
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
}

/* Make tasks-list behave exactly like calendar-events */
.tasks-list {
    padding-top: 0.25rem !important; /* Minimal whitespace at top - matches calendar */
    padding-bottom: 1.5rem !important; /* More whitespace at bottom for visual appeal - matches calendar */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* First date separator should have no top margin - matches calendar */
.tasks-list .date-separator:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Date separators in tasks should match calendar styling */
.tasks-list .date-separator {
    /* Inherits from base.html calendar styling */
}

/* Debug: Add temporary borders to see spacing */
/* 
#tasks-panel .panel-body {
    border: 2px solid red !important;
}
#calendar-panel .panel-body {
    border: 2px solid blue !important;
}
.tasks-container {
    border: 2px solid green !important;
}
.calendar-events {
    border: 2px solid orange !important;
}
*/

.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Prevent centering during HTMX swap operations */
.htmx-swapping .task-item,
.htmx-swapping .task-item *,
.task-item.htmx-swapping,
.task-item.htmx-swapping * {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* Compact task items for smaller panels */
@media (max-width: 1280px) {
    .task-item {
        padding: 0.4rem;
        margin-bottom: 0.4rem;
    }
    
    .task-time {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
    }
    
    .task-title {
        font-size: 0.9rem;
        margin: 0.2rem 0;
    }
    
    .task-list-badge {
        font-size: 0.65em;
        padding: 1px 4px;
    }
}
</style>

<script>
function showTaskDetails(taskId) {
    console.log('showTaskDetails called with taskId:', taskId);
    
    const modalElement = document.getElementById('task-modal');
    const titleElement = document.getElementById('task-modal-label');
    const bodyElement = document.getElementById('task-modal-content');
    
    if (!modalElement) {
        console.error('Task modal element not found');
        return;
    }
    
    // Show loading state
    if (titleElement) titleElement.textContent = 'Loading...';
    if (bodyElement) {
        bodyElement.innerHTML = '<div class="text-center py-8"><div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div></div>';
    }
    
    // Initialize Alpine if needed
    if (window.Alpine && !modalElement.__x) {
        window.Alpine.initTree(modalElement);
    }
    
    // Open modal using global state management
    window.updateModalState('taskModal', true);
    
    // Fetch task details via HTMX
    htmx.ajax('GET', `/tasks/task/${taskId}/`, {
        target: '#task-modal-content',
        swap: 'innerHTML'
    }).then(() => {
        if (titleElement) titleElement.textContent = 'Task Details';
    }).catch((error) => {
        console.error('Error loading task details:', error);
        if (titleElement) titleElement.textContent = 'Error';
        if (bodyElement) {
            bodyElement.innerHTML = '<p class="text-red-600">Failed to load task details.</p>';
        }
    });
}

// Handle task completion via right-click (removed - checkbox is now visible)

// Update dropdown selection when fragment loads
function updateHeaderDropdown() {
    const headerSelect = document.querySelector('#task-list-dropdown') || document.querySelector('#tasks-panel select[name="list"]');
    if (headerSelect) {
        const selectedValue = '{{ selected_list|default:"" }}';
        headerSelect.value = selectedValue;
        console.log('Updated header dropdown to:', selectedValue);
        console.log('Dropdown options:', Array.from(headerSelect.options).map(opt => ({value: opt.value, text: opt.text})));
    } else {
        console.log('Header dropdown not found, retrying...');
        // Retry after a short delay in case the DOM isn't fully ready
        setTimeout(updateHeaderDropdown, 100);
    }
}

// Call the function immediately and also after a short delay
updateHeaderDropdown();
setTimeout(updateHeaderDropdown, 200);
setTimeout(updateHeaderDropdown, 500);

// Debug: Log current tasks
console.log('Tasks fragment loaded with {{ tasks|length }} tasks');
{% for task in tasks %}
console.log('Task: {{ task.title }} (List: {{ task.task_list.name|default:"No list" }})');
{% endfor %}
</script>

/* Weather Tabs */
.weather-tabs {
    margin: -1rem -1rem 0 -1rem; /* Negative margin to touch edges */
    border-bottom: 1px solid #dee2e6;
}

.weather-tabs {
    margin: -1rem -1rem 0 -1rem; /* Negative margin to touch edges */
    border-bottom: 1px solid #d1d5db;
}

/* Tab Content */
.weather-tab-content {
    padding: 1rem 0 0 0;
}

/* Windy Widget Container */
.windy-widget-container {
    width: 100%;
    height: 450px;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f8f9fa;
}

.windy-widget-container iframe {
    display: block;
    border: none;
    border-radius: 0.5rem;
}

/* Weather Panel - Full Box Styling */
.weather-content {
    padding: 0; /* No extra padding - fill the panel */
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Current Weather Section */
.current-weather {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.weather-main {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.weather-icon-large {
    font-size: 4rem;
    color: #0d6efd;
}

.weather-details {
    flex: 1;
}

.current-temp {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #212529;
    margin-bottom: 0.25rem;
}

.weather-desc {
    font-size: 1.1rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.location-name {
    font-size: 0.9rem;
    color: #6c757d;
}

.location-name i {
    color: #0d6efd;
}

/* Weather Stats */
.weather-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    font-size: 0.9rem;
}

.stat-item i {
    font-size: 1.2rem;
    color: #0d6efd;
}

/* Forecast Section */
.weather-forecast {
    flex: 1;
}

.forecast-header {
    font-size: 0.95rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

.forecast-header i {
    color: #0d6efd;
}

.forecast-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.forecast-day {
    text-align: center;
    padding: 0.75rem 0.5rem;
    background: rgba(13, 110, 253, 0.05);
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.forecast-day:hover {
    background: rgba(13, 110, 253, 0.1);
    transform: translateY(-2px);
}

.forecast-date {
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.forecast-icon {
    font-size: 2rem;
    color: #0d6efd;
    margin-bottom: 0.5rem;
}

.forecast-temps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.high-temp {
    font-weight: 700;
    color: #212529;
}

.low-temp {
    color: #6c757d;
}

.forecast-precip {
    font-size: 0.75rem;
    color: #0dcaf0;
    margin-top: 0.25rem;
}

.forecast-precip i {
    font-size: 0.7rem;
}

/* Weather Meta */
.weather-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid #e9ecef;
    font-size: 0.75rem;
    color: #6c757d;
}

.weather-source {
    font-weight: 500;
}

.weather-source i {
    color: #0d6efd;
}

/* Error State */
.weather-error {
    padding: 0;
}

/* Loading State */
.weather-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
    color: #6c757d;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .current-temp {
        font-size: 2rem;
    }
    
    .weather-icon-large {
        font-size: 3rem;
    }
    
    .weather-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .forecast-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .forecast-day {
        padding: 0.5rem 0.25rem;
    }
    
    .forecast-icon {
        font-size: 1.5rem;
    }
}

/* Make sure panel-body doesn't add extra padding for weather */
#weather-panel .panel-body {
    padding: 1rem !important; /* Consistent padding */
}
</style>

<script>
// Alpine.js will handle tab switching automatically via x-data and x-show
// No additional initialization needed
</script>