/* ============================================================
   MOBILE RESPONSIVE STYLES
   Imported by every page template alongside navbar.css
   ============================================================ */

/* ── Sidebar overlay backdrop ── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    /* Must be just below sidebar (1200) but above map content */
    z-index: 1100;
    cursor: pointer;
}

.sidebar-overlay.active {
    display: block;
}

/* ── Prevent body scroll when sidebar is open ── */
body.sidebar-open {
    overflow: hidden;
}

@media (max-width: 768px) {

    /* ── Navbar ── */
    .app-navbar {
        padding: 0 12px;
        gap: 8px;
    }

    .navbar-hamburger {
        display: inline-flex;
    }

    /* Hide nav links; navigation accessible via sidebar */
    .navbar-links {
        display: none;
    }

    /* When on a page without sidebar, nav links shown as dropdown */
    .navbar-links.mobile-nav-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid rgba(102, 126, 234, 0.15);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.14);
        padding: 8px 12px;
        z-index: 1400;
    }

    .navbar-links.mobile-nav-open a {
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 0.95rem;
    }

    /* Hide verbose auth labels on small screens */
    .navbar-contact-link {
        display: none;
    }

    .navbar-username {
        display: none;
    }

    /* ── Sidebar: slide-in from left as overlay ── */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        /* Must be above Leaflet controls (z-index 800) and overlays (400) */
        z-index: 1200;
        width: 285px;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.22);
    }

    /* ── Sidebar close button (mobile only) ── */
    .sidebar-close-btn {
        display: flex !important;
    }

    /* ── Sidebar containers: no flex space on mobile ── */
    .sidebar-container {
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        overflow: visible;
    }

    /* For pages that use .sidebar-spacer pattern (trip-view.html) */
    .sidebar-spacer {
        display: none !important;
    }

    /* ── Map page: fix container and search bar ── */
    .container {
        height: auto;
        min-height: calc(100vh - 56px);
    }

    /* (map-specific search-bar positioning is in map.css) */

    /* ── Settings / plan pages: full-width content ── */
    .settings-content {
        padding: 16px !important;
    }

    /* ── Trip view main content ── */
    .trip-main {
        padding: 20px 16px !important;
    }

    /* ── Plan wizard: readable on mobile ── */
    .wizard-container {
        padding: 16px !important;
    }

    .wizard-step {
        padding: 20px 16px !important;
    }

    .wizard-header h1 {
        font-size: 26px !important;
    }

    /* ── Grids: single column on mobile ── */
    .bookmarks-grid {
        grid-template-columns: 1fr !important;
    }

    .trips-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Avatar section: stack vertically ── */
    .avatar-section {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    /* ── Login / Register containers: full width ── */
    .login-container,
    .register-container {
        width: 100% !important;
        max-width: 420px !important;
        margin: 16px !important;
        padding: 24px !important;
        box-sizing: border-box !important;
    }

    /* ── Map container: full height ── */
    .map-container {
        height: calc(100vh - 56px) !important;
    }

    /* ── Map header overlay (trip-map / shared-trip-map) ── */
    .map-header {
        top: 68px !important;
        left: 10px !important;
        right: 10px !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 14px 16px !important;
    }
}

@media (max-width: 480px) {
    /* ── Auth buttons: more compact ── */
    .navbar-auth-btns {
        gap: 5px;
    }

    .navbar-btn-login,
    .navbar-btn-register {
        padding: 5px 10px;
        font-size: 0.8rem;
    }

    /* ── User action buttons in navbar ── */
    .navbar-icon-btn {
        padding: 5px 6px;
        font-size: 0.95rem;
    }

    /* ── Settings section: compact ── */
    .settings-section {
        padding: 20px 16px !important;
    }

    /* ── POI details sidebar: compact review form ── */
    .star-form,
    .star {
        font-size: 24px !important;
    }
}