/* Hamburger hidden on desktop */
.topbar-hamburger { 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; }

    .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; }

    /* 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%);
    }

    .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;
    }

    .right-panel-header { padding: 10px 14px; }
    .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: 16px; }
    .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;
    }
}

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

    .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: none; }
    .panel-toggle { display: flex; }
}

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