/*
 * =================================================================
 * Mobile-Specific and PWA Styles
 * =================================================================
 */

/* 
 * Define CSS variables for safe area insets.
 * These are provided by the browser on devices with notches or home indicators
 * when `viewport-fit=cover` is used in the viewport meta tag.
 */
:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/*
 * Apply safe area padding to the main body to avoid system UI.
 * This pushes the entire layout inward to avoid notches or rounded corners.
 */
body {
    padding-top: var(--safe-area-inset-top);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
}

/*
 * Adjust absolutely positioned UI elements to respect the safe areas.
 */
#center-location-button {
    top: calc(16px + var(--safe-area-inset-top));
    right: calc(10px + var(--safe-area-inset-right));
}

/* Apply safe area padding to the fixed bottom navigation bar. */
#bottom-nav {
    /* Add 5px of padding PLUS the safe area inset. */
    padding-bottom: calc(5px + var(--safe-area-inset-bottom));
    /* Account for left/right safe areas, especially in landscape mode. */
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
} 

/*
 * Hide UI elements not intended for mobile devices.
 * The QR code is for desktop users to open the app on their phone.
 * The install button is hidden by default and shown via JS if applicable.
 */
/* The QR code is now hidden by default in client.css and shown only on desktop. */

/*
 * =================================================================
 * Mobile Landscape Styles
 * =================================================================
 */

/*
 * This media query targets devices with a small height in landscape,
 * which is a reliable way to identify mobile landscape without affecting
 * larger screens like iPads.
 */
@media screen and (max-height: 600px) and (orientation: landscape) {

    /*
     * Remove the "glass" effect from panels and modals for performance and clarity
     * on smaller landscape screens. We replace it with a solid background.
     */
    .panel,
    .modal-overlay .modal-content,
    #debug-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: #ffffff; /* A solid white background */
    }

    .modal-overlay {
        z-index: 1030; /* Ensure modals appear above landscape panels */
    }

    .panel .panel-header {
        background-color: #f8f9fa; /* A light solid background for headers */
    }

    /*
     * Hide the logo in mobile landscape view to maximize screen space for the map and panels.
     */
    #logo-container { display: none !important; }

    /* Dock the event list as a floating panel in the bottom-left corner */
    #list-panel {
        position: fixed; /* Lock to viewport */
        left: 10px; /* Margin from the left edge */
        bottom: 0; /* Flush with the bottom edge */
        width: 40vw; /* 40% of viewport width */
        height: 90vh; /* 90% of viewport height */
        top: auto;
        /* Override default mobile transitions and transforms */
        transform: none !important; /* Reset any transform from portrait mode */
        transition: none !important; /* Disable transitions that interfere with this layout */
        visibility: visible !important;
        display: flex !important; /* Ensure it's always displayed */
        flex-direction: column;
        /* Round top corners */
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1010;
        /* Hide the list panel when the detail panel is open */
        transition: opacity 0.4s, visibility 0.4s;
    }

    #list-panel.detail-open {
        /* Keep the list panel visible, but prevent interaction */
        pointer-events: none;
        transform: none !important; /* Prevent scaling down */
    }

    /* Detail panel slides up from the bottom, slightly taller than the list panel */
    #detail-panel {
        /* Match the list panel's position and width */
        width: 40vw;
        left: 10px;
        right: auto;
        /* Make it slightly taller */
        height: 90vh;
        top: auto;
        bottom: 0;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(100%); /* Start hidden below screen */
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.4s;
        z-index: 1020; /* Ensure it's above the list panel */
    }

    #detail-panel.open {
        transform: translateY(0); /* Slide up into view */
        visibility: visible;
    }

    /* Condense the action buttons in the detail panel */
    #detail-panel .detail-actions {
        gap: 5px;
        padding-top: 10px;
        margin-top: 10px;
    }

    #detail-panel .detail-actions button {
        padding: 6px 12px;
        font-size: 0.8rem;
        gap: 5px;
    }

    #list-panel .panel-header {
        padding: 4px 8px;
    }

    #list-panel .panel-content { background-color: transparent; }
    #list-panel .panel-title { font-size: 1rem; }
    #list-panel .header-action-btn { padding: 4px; }
    #list-panel .header-action-btn svg { width: 20px; height: 20px; }
    #list-panel .header-action-text { display: none; }
    #list-panel #search-input { font-size: 0.8rem; padding: 6px 6px 6px 30px; }
    #list-panel .search-icon { width: 14px; height: 14px; left: 28px; top: 17px; }
    #list-panel .filter-pill { font-size: 0.7rem; padding: 2px 6px; }

    #list-panel #events-container .card {
        /* Revert to a block-style card layout like in portrait mode */
        flex-direction: column;
        padding: 0;
        gap: 0;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden; /* Ensure content respects the border-radius */
        margin-bottom: 15px;
    }

    #list-panel #events-container .card:last-child { margin-bottom: 0; border-bottom: none; }
    #list-panel #events-container .card-slider { width: 100%; height: 120px; flex-shrink: 1; }
    #list-panel #events-container .card-content { padding: 10px 15px; }
    #list-panel #events-container .card-title { font-size: 1rem; margin-bottom: 5px; }
    #list-panel #events-container .card-description { font-size: 0.85rem; line-height: 1.3; -webkit-line-clamp: 3; }
    #list-panel #events-container .mini-pills-container { display: none; }

    /* Condense the 'Clear Filters' button in the no-results view */
    #list-panel .clear-filters-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Hide UI elements that are redundant or conflict with this layout */
    #bottom-nav,
    #list-panel .panel-handle,
    #collapse-button,
    #expand-button,
    #settings-button {
        display: none !important;
    }
}