/* Mobile-specific media queries and tweaks extracted from styles.css */
/* ... (CSS will be pasted here, no code changes) ... */

/* Mobile-specific media queries and tweaks for GPS Tracker */

/* ===== APK NATIVE APP STATUS BAR FIXES ===== */
/* Ensure content starts below the status bar on native Android */
@media (max-width: 768px) {
  body {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* For Capacitor native apps - add extra padding to account for status bar */
  .main-header {
    margin-top: env(safe-area-inset-top, 0px);
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
  }

  /* Ensure main content doesn't overlap with status bar */
  main {
    margin-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  }
}

/* ===== STATS TAB MOBILE IMPROVEMENTS ===== */
@media (max-width: 768px) {
  /* Better spacing for mobile stats */
  .mobile-stats-table {
    font-size: 0.85rem !important;
    margin-bottom: 1rem;
  }

  .mobile-stats-table th,
  .mobile-stats-table td {
    padding: 0.5rem 0.25rem !important;
    font-size: 0.8rem !important;
    line-height: 1.2;
  }

  .mobile-stats-table th:first-child,
  .mobile-stats-table td:first-child {
    min-width: 60px !important;
    font-size: 0.85rem !important;
  }

  /* Performance Insights mobile optimization */
  .insights-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .insight-card {
    padding: 0.75rem !important;
    margin-bottom: 0.5rem;
  }

  /* Better legend spacing on mobile */
  .stats-key {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
  }

  .key-item {
    font-size: 0.75rem !important;
    gap: 0.25rem !important;
  }

  /* Mobile app info section improvements */
  .app-version {
    font-size: 0.85rem !important;
    text-align: center !important;
    margin-top: 0.75rem !important;
  }

  /* Better button sizing in mobile settings */
  .settings-action-btn {
    padding: 0.7rem 0.5rem !important;
    font-size: 0.85rem !important;
    min-width: 100px !important;
  }

  .report-type-btn {
    padding: 0.6rem 0.4rem !important;
    font-size: 0.8rem !important;
    min-width: 80px !important;
  }
}

/* ===== MAP BLACK BACKGROUND FIXES ===== */
#map {
  background: #f0f4f8 !important; /* Light gray instead of black */
}

/* Remove any black backgrounds from map containers */
.map-container {
  background: #f0f4f8 !important;
}

/* Ensure map tiles load with proper background */
.leaflet-container {
  background: #f0f4f8 !important;
}

/* ===== REMOVE DUPLICATE USER LOCATION MARKERS ===== */
/* Hide default Leaflet location control if it exists */
.leaflet-control-locate {
  display: none !important;
}

/* Style the custom location button properly */
.location-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(25, 118, 210, 0.3) !important;
}

.location-btn:hover {
  background: rgba(25, 118, 210, 0.1) !important;
}

/* ===== MODAL POSITIONING FOR MOBILE KEYBOARDS ===== */
@media (max-width: 768px) {
  /* Address confirmation modal adjustments for APK */
  #addressConfirmModal {
    align-items: flex-start !important;
    padding-top: 2rem !important;
  }

  #addressConfirmModal .modal-content,
  #aiModalContentContainer {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    margin: 1rem !important;
    max-height: calc(100vh - 4rem) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* When keyboard appears, keep modal visible */
  .modal-overlay.keyboard-open {
    align-items: flex-start !important;
    padding-top: 1rem !important;
  }

  .modal-overlay.keyboard-open .modal-content {
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  /* Address input improvements for mobile */
  #aiModalAddressInput,
  #aiModalAddressInput2,
  #modalAddressInput,
  #modalAddressInput2 {
    font-size: 16px !important; /* Prevent zoom on iOS */
    padding: 1rem !important;
    border-radius: 8px !important;
    border: 2px solid #e0e0e0 !important;
  }

  #aiModalAddressInput:focus,
  #aiModalAddressInput2:focus,
  #modalAddressInput:focus,
  #modalAddressInput2:focus {
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1) !important;
  }

  /* Google Places dropdown positioning */
  .pac-container {
    z-index: 99999 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    margin-top: 4px !important;
  }

  .pac-item {
    padding: 0.75rem !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  .pac-item:hover {
    background: #f8f9fa !important;
  }
}

/* ===== ADDITIONAL MOBILE OPTIMIZATIONS ===== */
@media (max-width: 480px) {
  /* Extra small screen adjustments */
  .mobile-stats-table {
    font-size: 0.75rem !important;
  }

  .mobile-stats-table th,
  .mobile-stats-table td {
    padding: 0.4rem 0.2rem !important;
    font-size: 0.7rem !important;
  }

  .stats-key {
    grid-template-columns: 1fr !important;
    gap: 0.3rem !important;
  }

  .key-item {
    font-size: 0.7rem !important;
  }

  /* Smaller modal on very small screens */
  #addressConfirmModal .modal-content,
  #aiModalContentContainer {
    margin: 0.5rem !important;
    border-radius: 8px !important;
  }
}

/* ===== KEYBOARD DETECTION AND MODAL ADJUSTMENT ===== */
@media (max-width: 768px) {
  /* When virtual keyboard is open (detected by viewport height change) */
  @supports (-webkit-touch-callout: none) {
    /* iOS specific adjustments */
    .modal-overlay {
      position: fixed !important;
      top: 0 !important;
      height: 100vh !important;
    }
  }

  /* Android specific adjustments */
  .modal-overlay {
    position: fixed !important;
    top: 0 !important;
    height: 100vh !important;
    align-items: flex-start !important;
    padding-top: 1rem !important;
  }

  /* Ensure modal content is scrollable when keyboard is open */
  .modal-content {
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ===== DARK MODE MAP IMPROVEMENTS ===== */
.leaflet-container.dark-mode {
  background: #2d3748 !important;
}

/* Better map control styling */
.custom-map-btn {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ===== CAPACITOR NATIVE APP SPECIFIC ADJUSTMENTS ===== */
@media (max-width: 768px) {
  /* Ensure proper spacing for native status bar */
  .container {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  /* Better navigation for native app */
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}