/* ============================================
   MOBILE.CSS — Responsive Breakpoints
   Tablet : max-width 1024px
   Phone  : max-width 767px
   ============================================ */


/* ============================================================
   TABLET  (≤ 1024px)
   Compresses nav and sidebar but keeps the core layout.
   ============================================================ */
@media (max-width: 1024px) {

    #navbar {
        padding: var(--space-sm) var(--space-md);
    }

    .nav-btn {
        min-width: 100px;
        padding: 6px 10px;
    }

    .nav-btn-text {
        display: none;
    }

    .nav-btn-value {
        max-width: 80px;
        font-size: 0.65rem;
    }

    #track-sidebar {
        width: 380px;
        min-width: 380px;
    }

    #main-container.sidebar-open #placeholder {
        margin-right: 380px;
    }

    .ts-images {
        grid-template-columns: 1fr;
    }

    .ts-product-selectors {
        grid-template-columns: 1fr;
    }

    #about-panel {
        width: 360px;
        right: -360px;
    }

    .map-stat-value {
        font-size: 0.8rem;
    }

    .map-stat-label {
        font-size: 0.45rem;
    }

    .filter-btn {
        padding: 6px 10px;
        font-size: 0.6rem;
    }

    .frame-header {
        padding: var(--space-xs) var(--space-sm);
    }

    .ts-timestep-grid {
        gap: 4px 8px;
    }
}


/* ============================================================
   PHONE  (≤ 767px)
   Map top 50%, sidebar bottom 50% (always visible, scrollable).
   Images side by side inside sidebar.
   ============================================================ */
@media (max-width: 767px) {

    /* --- Safe area insets --- */
    #app {
        padding-bottom: env(safe-area-inset-bottom);
    }

    #navbar {
        padding-top: calc(var(--space-xs) + env(safe-area-inset-top));
        padding-left: calc(var(--space-sm) + env(safe-area-inset-left));
        padding-right: calc(var(--space-sm) + env(safe-area-inset-right));
        padding-bottom: var(--space-xs);
    }

    /* ---- Navbar: single-row compact ---- */
    #controls {
        gap: var(--space-xs);
        flex-wrap: nowrap;
        align-items: center;
    }

    .navbar-left {
        flex: 0 0 auto;
        width: auto !important;
    }

    .navbar-right {
        flex: 1;
        width: auto !important;
        justify-content: flex-end;
    }

    /* Title: hurricane icon only */
    .title-text,
    .title-accent {
        display: none;
    }

    .title-icon {
        font-size: 1.1rem;
    }

    /* Nav buttons: icon + value, no text/arrow */
    .nav-buttons {
        gap: 4px;
        flex-wrap: nowrap;
    }

    .nav-btn {
        min-width: unset;
        padding: 5px 7px;
        gap: 4px;
    }

    .nav-btn-text {
        display: none;
    }

    .nav-btn-arrow {
        display: none;
    }

    .nav-btn-value {
        max-width: 52px;
        font-size: 0.58rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-dropdown {
        position: fixed !important;
        top: 56px !important;
        left: var(--space-sm) !important;
        right: var(--space-sm) !important;
        min-width: unset !important;
        max-width: none !important;
        transform: translateY(-10px) !important;
    }

    .nav-dropdown.open {
        transform: translateY(0) !important;
    }

    /* Icon buttons */
    .icon-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    /* Hide sidebar toggle — sidebar is always visible at bottom */
    #sidebar-toggle {
        display: none;
    }

    /* Mobile nav toggle: visible when player active */
    #mobile-nav-toggle {
        order: -1;
    }

    /* ---- Player controls: compact ---- */
    .player-panel {
        gap: var(--space-xs);
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .control-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.6rem !important;
    }

    .control-btn.play-btn {
        width: 29px !important;
        height: 29px !important;
        font-size: 0.64rem !important;
    }

    .control-label span {
        display: none;
    }

    .speed-control input[type="range"] {
        width: 48px;
    }

    #speed-value {
        font-size: 0.6rem;
    }

    .toggle-label > span:last-child {
        display: none;
    }

    .frame-counter {
        font-size: 0.6rem;
        padding: 4px 8px;
    }

    /* ---- Progress bar ---- */
    #progress-wrapper {
        height: 20px;
    }

    /* ============================================================
     * CORE LAYOUT: map top 50%, sidebar bottom 50%
     * ============================================================ */

    #main-container {
        flex-direction: column !important;
        padding: 0 !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    /* Map / placeholder: top 40% */
    #placeholder {
        flex: 0 0 45% !important;
        height: 45% !important;
        min-height: 0 !important;
        width: 100% !important;
        overflow: hidden;
        padding: 0;
    }

    /* Animation views: also occupy top 40% when shown */
    #dual-view,
    #single-view {
        flex: 0 0 45% !important;
        height: 45% !important;
        min-height: 0 !important;
        width: 100% !important;
        overflow: hidden;
        padding: 0;
    }

    /* Map wrapper: flush edges on phone */
    .placeholder-map-wrapper {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }

    /* Dual-view: keep side-by-side (limited vertical space in top half) */
    #dual-view {
        flex-direction: row !important;
        gap: 2px !important;
    }

    .image-frame {
        max-width: 50% !important;
        flex: 1 !important;
    }

    /* Dual-view active: hide sidebar, stack images, fill full height */
    #main-container:has(#dual-view[style*="display: flex"]) #track-sidebar {
        display: none !important;
    }

    #main-container:has(#dual-view[style*="display: flex"]) #dual-view {
        flex: 1 1 100% !important;
        height: 100% !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    #main-container:has(#dual-view[style*="display: flex"]) .image-frame {
        max-width: 100% !important;
        flex: 0 0 calc(50% - 1px) !important;
        height: calc(50% - 1px) !important;
    }

    /* Single view: fill top half */
    .single-frame img {
        max-height: 100% !important;
    }

    /* ---- Sidebar: bottom half, always visible, scrollable ---- */
    #track-sidebar {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 55% !important;
        height: 55% !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: 1 !important;
        border-left: none !important;
        border-top: 1px solid var(--border-subtle);
        overflow-y: auto !important;
        overflow-x: hidden !important;
        visibility: visible !important;
        box-shadow: none !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Always visible regardless of .open class state */
    #track-sidebar:not(.open) {
        visibility: visible !important;
        transform: none !important;
    }

    /* Hide close button (sidebar is persistent, not a drawer) */
    #track-sidebar .close-btn {
        display: none !important;
    }

    /* Cancel desktop margin-shift trick */
    #main-container.sidebar-open #placeholder,
    #main-container:not(.sidebar-open) #placeholder {
        margin-right: 0 !important;
        transition: none !important;
    }

    /* Sidebar content: tighter padding */
    .track-sidebar-content {
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    /* ---- Sidebar images: SIDE BY SIDE ---- */
    .ts-images {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-xs);
    }

    .ts-product-selectors {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-xs);
    }

    /* Image frames: reasonable height for side-by-side in sidebar */
    .ts-image-frame {
        min-height: 140px !important;
        max-height: 220px !important;
    }

    /* ---- Filter pills: horizontal scroll ---- */
    .ts-filter-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .ts-filter-buttons::-webkit-scrollbar {
        display: none;
    }

    .ts-filter-btn {
        flex-shrink: 0;
    }

    /* ---- Mode buttons ---- */
    .ts-mode-buttons {
        gap: var(--space-xs);
    }

    .ts-mode-btn {
        padding: 6px 10px;
        font-size: 0.55rem;
        flex: 1;
        justify-content: center;
    }

    .ts-mode-btn span {
        font-size: 0.5rem;
    }

    /* ---- Timestep card ---- */
    .ts-timestep-card {
        padding: 4px 6px;
        margin-bottom: 4px;
    }

    .ts-timestep-title {
        font-size: 0.42rem;
        margin-bottom: 4px;
        gap: 4px;
    }

    .ts-timestep-title i {
        font-size: 0.45rem;
    }

    .ts-timestep-grid {
        gap: 2px 6px;
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .ts-timestep-grid .ts-timestep-row:nth-child(1) {
        grid-column: span 1;
    }

    .ts-timestep-grid .ts-timestep-row:nth-child(2) {
        grid-column: span 2;
    }

    .ts-timestep-label {
        font-size: 0.38rem;
        letter-spacing: 0.04em;
        color: #a0aec0 !important;
    }

    .ts-timestep-card strong {
        font-size: 0.5rem;
        line-height: 1.1;
    }

    #ts-timestep {
        font-size: 0.5rem !important;
        margin-left: 0 !important;
    }

    #ts-datetime {
        font-size: 0.5rem !important;
    }

    /* ---- Map header: title only, flush below filter bar ---- */
    .map-header-overlay {
        padding: 4px var(--space-sm) 0;
        top: 33px !important;
    }

    .map-header-right {
        display: none !important;
    }

    .map-title {
        font-size: 0.9rem;
    }

    .map-subtitle {
        display: none;
    }

    .map-badge {
        font-size: 0.48rem;
        padding: 2px 6px;
    }

    /* ---- Map legend: compact ---- */
    .map-legend-overlay {
        bottom: var(--space-sm) !important;
        left: calc(var(--space-sm) + 3px) !important;
        padding: 6px 8px;
        min-width: unset;
    }

    .legend-title {
        font-size: 0.48rem;
        margin-bottom: 4px;
    }

    .legend-bar {
        height: 5px;
    }

    .legend-labels {
        font-size: 0.42rem;
    }

    .legend-items {
        display: none;
    }

    /* Zoom control: top right */
    .leaflet-bottom.leaflet-left {
        bottom: auto !important;
        left: auto !important;
        top: calc(var(--space-sm) + 50px) !important;
        right: var(--space-sm) !important;
    }

    .leaflet-control-zoom {
        border-radius: 6px !important;
        overflow: hidden;
        border: 1px solid var(--border-medium) !important;
        background: rgba(10, 22, 40, 0.9) !important;
        backdrop-filter: blur(15px);
    }

    .leaflet-control-zoom a {
        width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        font-size: 14px !important;
        background: transparent !important;
        color: var(--text-secondary) !important;
        border-bottom: 1px solid var(--border-medium) !important;
        display: block !important;
    }

    .leaflet-control-zoom-out {
        border-bottom: none !important;
    }

    /* Map filter overlay: full-width strip at top of map */
    .map-filter-overlay {
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    .map-filter-bar {
        width: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        padding: 4px !important;
        pointer-events: auto !important;
    }

    .map-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-label {
        display: none !important;
    }

    /* Map filter overlay: icon-only */
    .filter-btn span {
        display: none;
    }

    .filter-btn {
        padding: 6px 8px;
        flex-shrink: 0;
    }

    /* Map instruction: hide */
    .map-instruction {
        display: none;
    }

    /* ---- Image frame headers (dual/single view) ---- */
    .frame-header {
        padding: 4px var(--space-sm);
        flex-wrap: nowrap !important;
        gap: 4px;
        align-items: center;
        overflow: hidden;
    }

    .frame-label {
        font-size: 0.46rem;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .overlay-controls {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
        flex-wrap: nowrap;
    }

    .overlay-label {
        font-size: 0.42rem;
        white-space: nowrap;
    }

    .overlay-checkbox {
        gap: 2px;
        flex-shrink: 0;
    }

    /* ---- About panel: full-screen ---- */
    #about-panel {
        width: 100% !important;
        right: -100% !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    #about-panel.open {
        right: 0 !important;
    }

    /* ---- 3D viewer header: compact ---- */
    .viewer-3d-header {
        padding: var(--space-sm) var(--space-md);
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .viewer-3d-title span {
        font-size: 0.7rem;
    }

    .viewer-3d-controls {
        gap: var(--space-sm);
        flex-wrap: wrap;
    }

    .viewer-3d-frame {
        font-size: 0.65rem;
    }
}