/* =====================
   Mobile layout (<=767px)
   Desktop-first: ONLY add rules inside this media query
   ===================== */
/* Mobile-only additions; desktop-first: only under media query */
@media (max-width: 767px) {
  /* Hide desktop-only mobile blocker */
  .mobile-message { display: none !important; }

  /* Bottom navigation bar */
  .mobile-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    display: none; /* enabled via body.mobile-enabled */
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0,0,0,0.08);
    z-index: 2000;
  }
  .mobile-nav .mobile-nav-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: transparent;
    border: none;
    color: #333;
  }
  .mobile-nav .mobile-nav-btn span { font-size: 11px; margin-top: 2px; }
  .mobile-nav .mobile-nav-btn.active { color: #007bff; font-weight: 600; }

  /* Enable mobile UI only when body has the flag class */
  body.mobile-enabled .mobile-nav { display: flex !important; }

  /* General clean up for mobile */
  .reset-zoom-btn, .disclaimer, .legend, #infoPanel { display: none !important; }

  /* Three cards model: map | filters | info */
  /* Map card height excludes date filter + nav bar */
  #map {
    height: calc(100vh - 56px) !important; /* only nav height */
    width: 100% !important;
    display: none; /* hidden by default; shown only in map card */
  }

  /* Date slider sits above the nav bar */
  .date-filter {
    position: static;
    height: auto;
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: block; /* visible inside Filters card */
    z-index: auto;
    margin-bottom: 12px;
  }
  .filter-container { max-width: none; }

  /* Filters card: take full space above nav */
  .filters-panel {
    position: fixed;
    top: 44px; left: 0; right: 0; bottom: 56px;
    margin: 0;
    border-radius: 0;
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    overflow-y: auto;
    padding: 16px;
    display: none; /* shown in filters card only */
    z-index: 1400;
  }
  .filter-group-row { flex-direction: column; gap: 12px; }
  .button-group button { padding: 8px 10px; }

  .mobile-date-slot { margin-bottom: 12px; }

  .mobile-date-pickers { display: none; margin-bottom: 12px; }
  .mobile-date-field { display: flex; flex-direction: column; margin-bottom: 8px; }
  .mobile-date-field label { font-size: 13px; color: #333; margin-bottom: 4px; }
  .mobile-date-field input[type="date"] { font-size: 16px; padding: 8px; border: 1px solid #ddd; border-radius: 6px; }

  .mobile-filters-summary {
    position: fixed;
    left: 0; right: 0; bottom: 56px; /* above nav */
    display: none; /* only on filters card */
    padding: 10px 12px;
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 14px;
    z-index: 1600;
  }

  body.mobile-enabled.mobile-card-filters #mobileFiltersSummary { display: block; }

  /* Top bar for non-map cards */
  .mobile-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 44px;
    display: none; /* only visible on filters/info */
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    z-index: 1600;
    align-items: center;
    padding: 0 10px;
  }
  .mobile-back-btn {
    background: none;
    border: none;
    font-size: 14px;
    color: #007bff;
    padding: 8px 6px;
  }

  /* Info card reuses the details panel */
  .details-panel {
    position: fixed;
    top: 44px; left: 0; right: 0; bottom: 56px;
    width: auto;
    border-radius: 0;
    background: rgba(255,255,255,0.98);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 16px;
    overflow-y: auto;
    display: none; /* shown in info card only */
    z-index: 1400;
  }
  .popup-content { padding: 8px 4px; }
  .popup-image { max-width: 100%; }
  /* Disable hover eye icon on mobile */
  .popup-image + .image-zoom-icon { display: none !important; }
  .popup-image.loaded { opacity: 1; }

  /* Active card toggles */
  body.mobile-enabled.mobile-card-map #map { display: block !important; }
  body.mobile-enabled.mobile-card-map .date-filter { display: none !important; }
  body.mobile-enabled.mobile-card-map .filters-panel,
  body.mobile-enabled.mobile-card-map .details-panel,
  body.mobile-enabled.mobile-card-map #mobileMessage { display: none !important; }

  body.mobile-enabled.mobile-card-filters .filters-panel { display: block !important; overflow: auto; padding-bottom: 64px; }
  body.mobile-enabled.mobile-card-filters #mobileDatePickers { display: block !important; }
  body.mobile-enabled.mobile-card-filters .date-filter { display: none !important; }

  /* Show Leaflet location control only on mobile map card and position it above bottom nav */
  body.mobile-enabled.mobile-card-map .leaflet-control-locate { 
    display: block !important; 
    margin-bottom: 70px !important; /* above bottom nav (56px) + extra margin */
  }
  body.mobile-enabled:not(.mobile-card-map) .leaflet-control-locate { display: none !important; }
  body.mobile-enabled.mobile-card-filters #map,
  body.mobile-enabled.mobile-card-filters .date-filter,
  body.mobile-enabled.mobile-card-filters .details-panel { display: none !important; }
  body.mobile-enabled.mobile-card-filters .mobile-topbar { display: flex !important; }
  body.mobile-enabled.mobile-card-map .mobile-topbar { display: none !important; }

  body.mobile-enabled.mobile-card-info .details-panel { display: block !important; }
  body.mobile-enabled.mobile-card-info #map,
  body.mobile-enabled.mobile-card-info .date-filter,
  body.mobile-enabled.mobile-card-info .filters-panel { display: none !important; }
  body.mobile-enabled.mobile-card-info .mobile-topbar { display: flex !important; }
}