/* =========================================================
   NOBTI Mobile Polish V2
   Global mobile fixes for bottom navigation, scroll button,
   cards spacing, forms, and Leaflet popup behavior.
   ========================================================= */

:root {
    --nobti-bottom-nav-height: 112px;
    --nobti-bottom-safe-space: 168px;
    --nobti-mobile-page-x: 14px;
}

/* Give every public page enough breathing room above bottom nav */
html,
body {
    min-height: 100%;
}

body {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Common page wrappers */
main,
.page,
.page-wrap,
.app-page,
.home-page,
.places-page,
.map-page,
.nearby-page,
.search-page,
.reminders-page,
.status-alerts-page,
.report-page,
.place-details-page,
.profile-page,
.nobti-page,
.nobti-public-page {
    padding-bottom: var(--nobti-bottom-safe-space) !important;
}

/* If pages use Bootstrap container directly */
body > .container,
body > .container-fluid {
    padding-bottom: var(--nobti-bottom-safe-space) !important;
}

/* Make sure last cards are not hidden under bottom navbar */
.card:last-child,
.nobti-card:last-child,
.place-card:last-child,
.search-result-card:last-child,
.reminder-card:last-child,
.alert-card:last-child,
.map-shell:last-child,
.nearby-shell:last-child,
.places-shell:last-child,
.search-shell:last-child {
    margin-bottom: 42px !important;
}

/* Bottom navbar should stay above content but not capture full screen */
.nobti-bottom-nav,
.bottom-nav,
.mobile-bottom-nav,
.app-bottom-nav,
#nobtiBottomNav,
#bottomNav {
    z-index: 1050 !important;
}

/* Scroll to top button positioning */
.back-to-top,
.scroll-top,
.scroll-to-top,
#scrollTopBtn,
#backToTopBtn,
.nobti-scroll-top,
.nobti-back-top {
    position: fixed !important;
    left: 18px !important;
    right: auto !important;
    bottom: calc(var(--nobti-bottom-nav-height) + 18px) !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-radius: 999px !important;
    z-index: 990 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 14px 30px rgba(29, 78, 216, 0.24) !important;
}

/* Keep floating buttons away from bottom nav */
.floating-action,
.floating-btn,
.fab,
.nobti-fab {
    bottom: calc(var(--nobti-bottom-nav-height) + 18px) !important;
}

/* Mobile form polish */
@media (max-width: 576px) {
    :root {
        --nobti-bottom-nav-height: 112px;
        --nobti-bottom-safe-space: 178px;
        --nobti-mobile-page-x: 12px;
    }

    body {
        overflow-x: hidden;
    }

    main,
    .page,
    .page-wrap,
    .app-page,
    .home-page,
    .places-page,
    .map-page,
    .nearby-page,
    .search-page,
    .reminders-page,
    .status-alerts-page,
    .report-page,
    .place-details-page,
    .profile-page,
    .nobti-page,
    .nobti-public-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: var(--nobti-mobile-page-x) !important;
        padding-right: var(--nobti-mobile-page-x) !important;
        padding-bottom: var(--nobti-bottom-safe-space) !important;
    }

    .container,
    .container-fluid {
        max-width: 100% !important;
        padding-left: var(--nobti-mobile-page-x) !important;
        padding-right: var(--nobti-mobile-page-x) !important;
    }

    .card,
    .nobti-card,
    .place-card,
    .search-result-card,
    .reminder-card,
    .alert-card,
    .map-shell,
    .nearby-shell,
    .places-shell,
    .search-shell {
        border-radius: 24px !important;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }

    .form-control,
    .form-select {
        min-height: 48px;
    }

    .btn {
        min-height: 46px;
    }

    /* Avoid huge empty spaces in mobile cards */
    .stat-card,
    .stats-card,
    .metric-card,
    .nobti-stat-card {
        min-height: 108px !important;
        padding: 18px !important;
    }

    /* Small cards grid if the page already has a stats wrapper */
    .stats-grid,
    .metrics-grid,
    .nobti-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    /* Chips should not break the layout */
    .chips,
    .chip-row,
    .filter-chips,
    .status-chips,
    .quick-chips {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }

    .chips::-webkit-scrollbar,
    .chip-row::-webkit-scrollbar,
    .filter-chips::-webkit-scrollbar,
    .status-chips::-webkit-scrollbar,
    .quick-chips::-webkit-scrollbar {
        display: none !important;
    }

    .chips > *,
    .chip-row > *,
    .filter-chips > *,
    .status-chips > *,
    .quick-chips > * {
        flex: 0 0 auto !important;
    }
}

/* =========================================================
   Leaflet popup fixes
   ========================================================= */

/*
   The popup pane should not block the map after popup is closed.
   Only the visible popup itself receives clicks.
*/
.leaflet-popup-pane {
    pointer-events: none !important;
}

.leaflet-popup {
    pointer-events: auto !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-popup-close-button {
    pointer-events: auto !important;
}

.leaflet-container {
    touch-action: pan-x pan-y !important;
}

/* Popup mobile polish */
@media (max-width: 576px) {
    .leaflet-popup-content {
        margin: 12px !important;
        min-width: 240px !important;
        max-width: 280px !important;
    }

    .leaflet-popup-content-wrapper {
        border-radius: 18px !important;
    }

    .leaflet-control-zoom a {
        width: 38px !important;
        height: 38px !important;
        line-height: 38px !important;
        font-size: 22px !important;
    }
}

/* =========================================================
   Route/Google/report popup buttons visibility
   ========================================================= */

.map-popup-actions a,
.map-popup-actions a:visited,
.map-popup-actions a:hover,
.map-popup-actions a:focus,
.map-popup-actions a:active {
    text-decoration: none !important;
}

.map-popup-btn {
    color: #0f172a !important;
}

.map-popup-btn-primary,
.map-popup-btn-primary:visited,
.map-popup-btn-primary:hover,
.map-popup-btn-primary:focus,
.map-popup-btn-primary:active {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

.map-popup-btn-route,
.map-popup-btn-route:visited,
.map-popup-btn-route:hover,
.map-popup-btn-route:focus,
.map-popup-btn-route:active {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

.map-popup-btn-report,
.map-popup-btn-report:visited,
.map-popup-btn-report:hover,
.map-popup-btn-report:focus,
.map-popup-btn-report:active {
    background: #ffffff !important;
    border-color: #1d4ed8 !important;
    color: #1d4ed8 !important;
}

.map-popup-btn-google,
.map-popup-btn-google:visited,
.map-popup-btn-google:hover,
.map-popup-btn-google:focus,
.map-popup-btn-google:active {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* =========================================================
   More comfortable hero sections on mobile
   ========================================================= */

@media (max-width: 576px) {
    .hero,
    .nobti-hero,
    .home-hero,
    .places-hero,
    .map-hero,
    .nearby-hero,
    .search-hero,
    .reminders-hero,
    .status-alerts-hero {
        padding: 22px 18px !important;
        border-radius: 24px !important;
        margin-bottom: 16px !important;
    }

    .hero h1,
    .nobti-hero h1,
    .home-hero h1,
    .places-hero h1,
    .map-hero h1,
    .nearby-hero h1,
    .search-hero h1,
    .reminders-hero h1,
    .status-alerts-hero h1 {
        font-size: clamp(2rem, 9vw, 3rem) !important;
        line-height: 1.18 !important;
    }

    .hero p,
    .nobti-hero p,
    .home-hero p,
    .places-hero p,
    .map-hero p,
    .nearby-hero p,
    .search-hero p,
    .reminders-hero p,
    .status-alerts-hero p {
        font-size: 1.05rem !important;
        line-height: 1.75 !important;
    }
}