/* Mobile chrome: fixed bottom navigation bar, the bottom-spacer, and the
   slide-up menu overlay. Loaded after Bootstrap. */

:root {
    /* How much of the iOS home-indicator inset the bottom nav gives up.
       Reserving all 34px of it floats the bar clear of the screen edge and
       reads as dead space, so the bar sits 10px into the inset instead and
       lets the screen's bottom curve cut into it. max() keeps this at 0 on
       every device without an inset (Android, desktop), where env() is 0 and
       subtracting would otherwise go negative.

       Single owner of the value: the nav's padding, the scroll spacer that
       stands in for the nav's height, and the Chip launcher that floats above
       the nav all read it. The iOS shell applies the same 10px in
       native/ios/Chippie/MainViewController.swift (setupTabBar). */
    --mobile-nav-safe-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - 10px));
}

/* Mobile bottom navigation */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--nav-bg);
    border-top: 1px solid var(--border-color);
    z-index: 1000;
    /* Respect iOS safe area */
    padding-bottom: var(--mobile-nav-safe-bottom);
}

/* Ensure Leaflet map controls stay below mobile navbar when scrolling */
@media (max-width: 991.98px) {
    .leaflet-top,
    .leaflet-bottom {
        z-index: 400 !important;
    }
}

/* Spacer to prevent content being hidden behind fixed bottom nav */
.mobile-bottom-spacer {
    height: calc(64px + var(--mobile-nav-safe-bottom));
}

.mobile-nav-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    max-width: 100%;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #6c757d;
    font-size: 0.75rem;
    padding: 8px 12px;
    min-height: 44px; /* Touch target */
    min-width: 44px;
    border: none;
    background: none;
    transition: color 0.2s ease;
    touch-action: manipulation; /* Eliminate double-tap-to-zoom delay */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    color: var(--primary-color);
}

.mobile-nav-item i {
    font-size: 1.2rem;
    margin-bottom: 2px;
}

/* PowerSync sync indicator, mobile instance. State colours and the
   data-connected/data-syncing display toggles come from the shared
   .sync-indicator rules in components/navbar.css; this only compacts the
   desktop padding so the icon sits as a slim status (not a touch target)
   alongside the nav items. */
.mobile-bottom-nav .sync-indicator {
    padding: 8px 4px;
    font-size: 1.2rem;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1050;
}

.mobile-menu {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.mobile-menu-items {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
}

.mobile-menu-overlay.show .mobile-menu {
    transform: translateY(0);
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    color: #2c3e50;
    text-decoration: none;
    font-size: 1rem;
    border-bottom: 1px solid var(--bg-secondary);
    min-height: 44px;
}

.mobile-menu-item:hover {
    color: var(--primary-color);
    background: var(--bg-secondary);
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.mobile-menu-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 10px 0;
}