/* Hamburger hidden on desktop */
.topbar-hamburger { display: none; }

/* Search button hidden on desktop */
.topbar-search-btn { display: none; }

/* Float FAB hidden on desktop */
.mobile-float-fab { display: none; }

/* Right panel handle hidden on desktop */
.right-panel-handle { display: none; }

/* Mobile overlay hidden by default */
.mobile-overlay {
    position: fixed;
    inset: 0;
    top: var(--topbar-height);
    background: rgba(0, 0, 0, 0.5);
    z-index: 160;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile (<768px) */
@media (max-width: 768px) {
    :root {
        --panel-width: 0px;
        --topbar-height: 48px;
    }

    /* Top bar compact — search moved to left panel on mobile */
    .topbar { padding: 0 8px; gap: 8px; }
    .topbar-logo span { display: none; }

    /* The desktop search input is relocated into the left panel by JS
       (initMobileSearch). Until/unless that runs it must not take up topbar
       space — hide it only while it is still a direct child of .topbar.
       Once moved into .left-panel-content it is no longer a topbar child,
       so this selector stops applying and it shows normally. */
    .topbar > .topbar-search { display: none; }

    .topbar-conditions {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 2px 4px;
        overflow: hidden;
    }

    .topbar-gauge-name {
        width: 100%;
        text-align: right;
        font-size: 9px;
        padding-right: 0;
        padding-top: 2px;
        border-right: none;
        line-height: 1.2;
        margin-top: 0;
    }

    .condition-chip {
        padding: 2px 6px;
        font-size: 11px;
        gap: 3px;
    }

    .condition-chip .label-text { display: none; }

    /* Search icon button in topbar */
    .topbar-search-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        color: var(--text);
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    /* Hide weather display (never loads reliably on mobile) */
    #weather-display { display: none; }
    .topbar-stats-sep:last-of-type { display: none; }

    /* Float Plan FAB */
    .mobile-float-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: calc(56px + env(safe-area-inset-bottom));
        right: 10px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--accent);
        color: white;
        border: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        z-index: 100;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-float-fab .lucide { width: 22px; height: 22px; }

    /* Feedback button */
    .topbar-feedback-btn {
        width: 36px;
        height: 36px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Feedback modal */
    .feedback-modal {
        width: 95vw;
        max-height: 85vh;
    }

    .feedback-field select,
    .feedback-field input,
    .feedback-field textarea {
        font-size: 16px;
        min-height: 44px;
        padding: 10px 12px;
    }

    .feedback-submit-btn {
        min-height: 44px;
        font-size: 14px;
    }

    .feedback-option-card {
        padding: 14px;
        min-height: 44px;
    }

    /* Search in left panel on mobile */
    .mobile-panel-search {
        padding: 8px 12px 4px;
        max-width: none;
        flex-shrink: 0;
    }

    .mobile-panel-search input {
        width: 100%;
        font-size: 16px;
        min-height: 40px;
        padding-left: 38px;
    }

    .mobile-panel-search .search-icon {
        left: 14px;
    }

    .mobile-panel-search .search-results {
        position: relative;
        top: 4px;
        left: 0;
        right: 0;
        max-height: 40vh;
        border-radius: var(--radius-md);
    }

    /* Hamburger button in topbar */
    .topbar-hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        color: var(--text-primary);
        -webkit-tap-highlight-color: transparent;
        border-radius: var(--radius-sm);
    }

    .topbar-hamburger .lucide {
        width: 20px;
        height: 20px;
    }

    .topbar-hamburger:active {
        background: rgba(255,255,255,0.08);
    }

    /* Map full width */
    #map { left: 0 !important; }

    /* Left panel as side drawer from left */
    .left-panel {
        top: var(--topbar-height);
        left: 0;
        right: auto;
        bottom: 0;
        width: 85%;
        max-width: 340px;
        height: auto;
        max-height: none;
        border-right: 1px solid var(--border-color);
        border-top: none;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 170;
    }

    .left-panel.expanded {
        transform: translateX(0);
    }

    /* Hide bottom sheet handle and tabs on mobile — not needed with hamburger */
    .bottom-sheet-handle { display: none; }
    .bottom-sheet-tabs { display: none; }

    /* Hide floating panel toggle — replaced by hamburger */
    .panel-toggle { display: none !important; }

    /* Right panel as bottom sheet */
    .right-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 80vh;
        border-left: none;
        border-top: 1px solid var(--border-color);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(100%);
        /* Smooth GPU-accelerated drag/snap (see js/mobile-sheet.js) */
        will-change: transform;
    }

    .right-panel.open {
        transform: translateY(0);
    }

    /* Right panel handle for swiping */
    .right-panel-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0 4px;
        cursor: grab;
        touch-action: none;
        flex-shrink: 0;
    }

    .right-panel-handle::after {
        content: '';
        width: 36px;
        height: 4px;
        background: rgba(255,255,255,0.2);
        border-radius: 2px;
    }

    /* Header doubles as a secondary drag grip for the bottom sheet —
       prevent the browser from scroll-jacking the drag (js/mobile-sheet.js). */
    .right-panel-header { padding: 10px 14px; touch-action: none; }
    .right-panel-title { font-size: 15px; }
    .right-panel-content { padding: 12px; }

    /* Filter pills scroll */
    .filter-pills {
        flex-wrap: wrap;
        padding: 8px 10px;
    }

    .filter-pill {
        padding: 6px 12px;
        font-size: 12px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Bigger touch targets for action buttons */
    .panel-action-btn {
        padding: 12px 14px;
        font-size: 14px;
        min-height: 44px;
    }

    /* Section items bigger on mobile */
    .section-item {
        padding: 12px 14px !important;
    }

    /* Cards more compact */
    .card-body { padding: 10px 12px; }
    .card-stat { padding: 5px 0; }

    /* Float plan dropdowns bigger */
    .right-panel-content select {
        min-height: 44px;
        font-size: 14px;
    }

    /* Map controls position */
    .map-style-control {
        bottom: calc(24px + env(safe-area-inset-bottom));
        right: 8px;
        gap: 2px;
    }
    .style-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
    .locate-btn { bottom: 16px; left: 10px; }

    /* Safety banner */
    .safety-banner {
        left: 0;
        font-size: 10px;
        padding: 4px 10px;
        line-height: 1.3;
    }

    body:has(.safety-banner.active) .map-overlay-toggles {
        top: calc(var(--topbar-height) + 40px);
    }

    body:has(.safety-banner.active) #wind-widget {
        top: calc(var(--topbar-height) + 112px);
    }

    /* Search results — now inside left panel, not fixed overlay */

    .search-result-item {
        padding: 12px 14px;
        min-height: 44px;
    }

    .search-result-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    /* Floating toggles: upper-left on mobile (same as desktop) */
    .map-overlay-toggles {
        top: calc(var(--topbar-height) + 8px);
        left: 8px;
        bottom: auto;
        right: auto;
        align-items: flex-start;
    }

    .map-overlay-toggle .toggle-age {
        display: none;
    }

    /* Locate button: lower-right above style toggles on mobile */
    .locate-btn {
        left: auto !important;
        right: 10px !important;
        bottom: 56px !important;
    }

    /* Safe area insets for notched phones */
    .right-panel {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Narrow phones (<=640px) — prevent topbar overflow.
   At this width the topbar would otherwise overflow (~523px of content in a
   375px bar): the "Powered by Terrain360" badge is the biggest non-essential
   contributor, and the stats run tells us the rest fits once it's gone. */
@media (max-width: 640px) {
    .topbar-t360 { display: none; }
    /* Keep Help/Feedback from crowding — slightly tighter, still >=32px tap. */
    .topbar-actions { gap: 4px; }
    .topbar-stats { font-size: 10px; gap: 4px; }
}

/* Small phones (<375px) */
@media (max-width: 375px) {
    .topbar-conditions { display: none; }
    .topbar-search input { font-size: 14px; }

    /* Drop the static mileage/dam stats entirely to free space for the
       gauge-count + actions on the smallest screens. */
    .topbar-stats { display: none; }

    .filter-pill { padding: 5px 8px; font-size: 11px; }
    .filter-pill .count { display: none; }
}

/* Tablet (769-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    :root { --panel-width: 300px; }
    .right-panel { width: 360px; }
    .bottom-sheet-handle { display: none; }
    .bottom-sheet-tabs { display: flex; }
    .panel-toggle { display: flex; }
}

/* Desktop (>1024px) */
@media (min-width: 1025px) {
    .bottom-sheet-handle { display: none; }
    .bottom-sheet-tabs { display: flex; }
    .panel-toggle { display: none; }
}

/* Search filter panel mobile adjustments */
@media (max-width: 768px) {
    .search-filters-panel {
        min-width: 0;
        left: -40px;
        right: -10px;
        padding: 10px 12px;
    }
    .sf-chip {
        padding: 5px 10px;
        font-size: 11px;
    }
    .search-filter-toggle {
        right: 4px;
        width: 28px;
        height: 28px;
    }
}

/* View switcher on phones: shrink labels so all three fit the compact topbar */
@media (max-width: 600px) {
    .topbar-views .view-btn { padding: 5px 7px; font-size: 11px; }
}
@media (max-width: 380px) {
    .topbar-views { gap: 1px; }
    .topbar-views .view-btn { padding: 4px 5px; font-size: 10px; }
}