/* ============================================
   DESKTOP SPLIT-VIEW LAYOUT
   Airbnb-style layout: Filters top, List left, Map right
   Only applies to screens > 768px
   ============================================ */

@media (min-width: 769px) {
    /* Hide preset duration buttons on desktop to save space */
    .preset-buttons {
        display: none !important;
    }
    
    /* Hide timeline header elements on desktop - info redundant with race list */
    .timeline-header {
        display: none !important;
    }
    
    /* Reduce timeline container padding on desktop */
    .timeline-container {
        padding: 8px 0 4px 0 !important;
    }
    
    /* ============================================
       DUAL-HANDLE RANGE SLIDER (DESKTOP ONLY)
       ============================================ */
    
    .dual-slider {
        position: absolute;
        width: calc(100% - 24px);
        left: 12px;
        top: 20px;
        height: 8px;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        pointer-events: none;
        z-index: 2;
    }
    
    /* Slider track styling */
    .dual-slider::-webkit-slider-track {
        height: 8px;
        background: transparent;
    }
    
    .dual-slider::-moz-range-track {
        height: 8px;
        background: transparent;
    }
    
    /* Slider thumb (handle) - 44px minimum for touch-friendly */
    .dual-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        background: white;
        border: 3px solid #667eea;
        border-radius: 50%;
        cursor: grab;
        pointer-events: auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s, box-shadow 0.2s;
        margin-top: -8px;
    }
    
    .dual-slider::-moz-range-thumb {
        width: 24px;
        height: 24px;
        background: white;
        border: 3px solid #667eea;
        border-radius: 50%;
        cursor: grab;
        pointer-events: auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    /* Hover state */
    .dual-slider::-webkit-slider-thumb:hover {
        transform: scale(1.15);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    .dual-slider::-moz-range-thumb:hover {
        transform: scale(1.15);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    /* Active/dragging state */
    .dual-slider:active::-webkit-slider-thumb {
        cursor: grabbing;
        transform: scale(1.2);
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.6);
    }
    
    .dual-slider:active::-moz-range-thumb {
        cursor: grabbing;
        transform: scale(1.2);
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.6);
    }
    
    /* Different colors for start and end handles */
    .dual-slider-start::-webkit-slider-thumb {
        border-color: #667eea;
    }
    
    .dual-slider-start::-moz-range-thumb {
        border-color: #667eea;
    }
    
    .dual-slider-end::-webkit-slider-thumb {
        border-color: #764ba2;
    }
    
    .dual-slider-end::-moz-range-thumb {
        border-color: #764ba2;
    }
    
    /* Dynamic date labels */
    .dual-slider-labels {
        position: absolute;
        top: -30px;
        left: 0;
        right: 0;
        height: 25px;
        pointer-events: none;
    }
    
    .dual-slider-label {
        position: absolute;
        background: rgba(255, 255, 255, 0.95);
        color: #667eea;
        padding: 4px 10px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        transform: translateX(-50%);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        transition: left 0.05s ease-out;
    }
    
    .dual-slider-label-start {
        color: #667eea;
    }
    
    .dual-slider-label-end {
        color: #764ba2;
    }
    
    /* Adjust timeline slider height for labels */
    .timeline-slider {
        height: 60px !important;
        margin-bottom: 5px;
    }
    
    /* Make range highlight draggable on desktop */
    .range-highlight {
        pointer-events: auto !important;
        cursor: grab;
        transition: left 0.05s ease-out, width 0.05s ease-out;
    }
    
    .range-highlight:active {
        cursor: grabbing;
    }
    
    /* Desktop body layout with top nav and footer */
    body {
        display: grid;
        grid-template-rows: auto 1fr 60px; /* top-nav, content, footer */
        grid-template-columns: 1fr;
        height: 100vh;
        overflow: hidden;
    }
    
    /* Top navigation at row 1 */
    .top-nav {
        grid-row: 1;
        grid-column: 1;
    }
    
    /* Controls panel as floating overlay on map (not in grid flow) */
    .controls-panel {
        position: fixed !important;
        top: 76px; /* Below top nav */
        left: calc(33% + 16px); /* Start after left panel + padding */
        right: 16px;
        z-index: 400;
        max-width: calc(67% - 32px); /* Match map width minus padding */
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        padding: 12px 20px;
        color: white;
    }
    
    /* Ensure controls panel is never hidden on desktop */
    .controls-panel.hidden {
        display: block !important;
    }
    
    /* Desktop split-view container */
    .desktop-split-container {
        grid-row: 2;
        grid-column: 1;
        display: grid;
        grid-template-columns: 33% 67%;
        height: 100%;
        overflow: hidden;
    }
    
    /* List view - left side */
    #list-view.active {
        display: block;
        position: relative;
        grid-column: 1;
        overflow-y: auto;
        height: 100%;
        background: var(--bg-secondary);
        border-right: 1px solid var(--border-medium);
    }
    
    /* Map view - right side */
    #map-view.active {
        display: block;
        position: relative;
        grid-column: 2;
        height: 100%;
        z-index: 1; /* Keep map below other UI elements */
    }
    
    #map-view #map {
        height: 100% !important;
        width: 100%;
    }
    
    /* Both list and map are visible simultaneously on desktop */
    .desktop-split-container #list-view,
    .desktop-split-container #map-view {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
    
    /* Hide bottom navigation on desktop */
    .bottom-nav {
        display: none;
    }
    
    /* Show footer on desktop - position it in grid row 3 */
    .app-footer {
        display: block;
        grid-row: 3;
        grid-column: 1;
        position: relative;
        z-index: 1000; /* Above all overlays */
    }
    
    /* Remove padding since footer is now in grid */
    .desktop-split-container {
        padding-bottom: 0;
    }
    
    /* Overlay views: still use fixed positioning and account for footer */
    #settings-view,
    #chatbot-view {
        bottom: 60px; /* Leave space for footer */
    }
    
    /* Favorites and Crews use split-view (not overlay) */
    #favorites-view,
    #crews-view {
        bottom: 60px; /* Leave space for footer */
    }
    
    /* DESKTOP SPLIT-VIEW: Show split-container when active */
    .desktop-split-container.active {
        display: grid !important;
    }
    
    /* Favorites view uses split layout on desktop */
    #favorites-view,
    #crews-view {
        position: fixed;
        top: 60px; /* Account for top-nav height */
        left: 0;
        right: 0;
        bottom: 60px; /* Account for footer height */
        z-index: 500;
        background: var(--bg-primary);
    }
    
    #favorites-view:not(.active),
    #crews-view:not(.active) {
        display: none;
    }
    
    /* Favorites view split container fills entire view */
    #favorites-view > .desktop-split-container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 33% 67%;
        overflow: hidden;
    }
    
    /* Favorites view uses same left/right split as list view */
    #favorites-view .list-header,
    #favorites-view .favorites-empty,
    #favorites-view .favorites-list {
        grid-column: 1;
    }
    
    #favorites-view .list-header {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    #favorites-view .favorites-empty,
    #favorites-view .favorites-list {
        overflow-y: auto;
    }
    
    /* Favorites map panel (right) - match map-view positioning */
    #favorites-view .favorites-map-panel {
        grid-column: 2;
        position: fixed;
        right: 0;
        top: 60px; /* Height of top nav */
        bottom: 60px; /* Height of footer */
        width: 67%; /* Match split ratio */
        background: #e5e7eb; /* Light gray background to see the panel */
    }
    
    /* Map container when moved to favorites panel */
    #favorites-view .favorites-map-panel #map {
        width: 100%;
        height: 100% !important;
        position: relative;
        z-index: 1;
    }
    
    /* Favorites map empty state overlay */
    .favorites-map-empty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        pointer-events: none;
        text-align: center;
        display: none;
    }
    
    .favorites-map-empty .map-empty-message {
        background: white;
        padding: 32px 48px;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }
    
    .favorites-map-empty .map-empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }
    
    .favorites-map-empty .map-empty-text {
        font-size: 16px;
        color: #666;
        max-width: 300px;
    }
    
    /* Crews view uses split layout (same as favorites) */
    #crews-view > .desktop-split-container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 33% 67%;
        overflow: hidden;
    }
    
    /* Crews left panel contains header and content */
    #crews-view .crews-left-panel {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    #crews-view .crews-header {
        flex-shrink: 0;
        padding: 16px;
        background: white;
        border-bottom: 1px solid #ddd;
    }
    
    #crews-view .crews-content {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
        background: var(--bg-secondary);
    }
    
    /* Compact crew cards on desktop */
    #crews-view .crew-card {
        margin-bottom: 8px;
    }
    
    #crews-view .crew-card:last-child {
        margin-bottom: 0;
    }
    
    /* Crew detail view in left panel */
    #crews-view .crew-detail {
        padding: 12px;
    }
    
    /* Crews map panel (right) - match favorites-map-panel positioning */
    #crews-view .crews-map-panel {
        grid-column: 2;
        position: fixed;
        right: 0;
        top: 60px; /* Height of top nav */
        bottom: 60px; /* Height of footer */
        width: 67%; /* Match split ratio */
        background: #e5e7eb;
    }
    
    /* Map container when moved to crews panel */
    #crews-view .crews-map-panel #map {
        width: 100%;
        height: 100% !important;
        position: relative;
        z-index: 1;
    }
    
    /* Settings view stays as overlay on desktop */
    #settings-view {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;
        background: var(--bg-primary);
    }
    
    #settings-view:not(.active) {
        display: none;
    }
    
    /* Chatbot view stays as overlay on desktop */
    #chatbot-view {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 500;
        background: var(--bg-primary);
    }
    
    #chatbot-view:not(.active) {
        display: none;
    }
    
    /* Desktop navigation - top right icons instead of bottom tabs */
    .desktop-nav {
        display: flex;
        gap: 12px;
        align-items: center;
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 200;
    }
    
    .desktop-nav-btn {
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .desktop-nav-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
    }
    
    .desktop-nav-btn.active {
        background: white;
        color: #667eea;
        border-color: white;
    }
    
    /* Compact list header for desktop */
    .list-header,
    .crews-header {
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 10;
        border-bottom: 1px solid var(--border-medium);
        padding: 16px;
    }
    
    .list-header h2,
    .crews-header h2 {
        font-size: 20px;
        margin-bottom: 12px;
    }
    
    /* More compact status filters in split view */
    .status-filter-btn {
        padding: 6px 12px;
        font-size: 13px;
        gap: 4px;
    }
    
    .status-filter-btn .filter-text {
        display: none; /* Hide text on desktop split view, show only icons */
    }
    
    .status-filter-btn .filter-icon {
        display: inline; /* Ensure icon is visible */
    }
    
    .status-filters-label {
        font-size: 11px;
    }
    
    /* Race cards slightly more compact on desktop split view */
    .race-card {
        margin: 8px 12px;
    }
    
    /* Hover effect for race cards - highlight map marker */
    .race-card:hover {
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
        border-color: #667eea;
        transform: translateY(-1px);
        transition: all 0.2s;
        cursor: pointer;
    }
    
    /* Highlight effect when card is focused from map click */
    .race-card.card-highlighted {
        animation: cardPulse 2s ease-in-out;
        border-color: #667eea;
    }
    
    @keyframes cardPulse {
        0%, 100% { 
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        50% { 
            box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
        }
    }
    
    /* Marker highlight effect */
    .marker-highlighted {
        animation: markerPulse 1s ease-in-out infinite;
        z-index: 1000 !important;
    }
    
    @keyframes markerPulse {
        0%, 100% { 
            transform: scale(1);
        }
        50% { 
            transform: scale(1.2);
        }
    }
}