/* ========================================
   MOBILE FIXES pentru Avant pTRN
   Corecții pentru Android/iOS
   ======================================== */

/* FIX 1: Buton Deconectare - Evită notch-ul și camera
   (suprascris de FIX 13 cu valori mai precise — păstrăm pt fallback) */
@media (max-width: 768px) {
  .logout-btn {
    top: 60px !important;
    right: 15px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    min-width: 120px;
  }
}

/* FIX 2: Butoane Zoom Leaflet - Poziționare dreapta sub logout */
@media (max-width: 768px) {
  .leaflet-control-zoom {
    margin-right: 14px !important;
    margin-top: 56px !important;
  }

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

  .leaflet-control-zoom-in,
  .leaflet-control-zoom-out {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
  }
}

/* FIX 3: Panou Navigator - Poziționare pentru mobile
   (suprascris de FIX 13 cu display:none — panelul desktop nu apare pe mobile) */
@media (max-width: 768px) {
  #map-controls {
    top: 120px !important;
    right: 10px !important;
    width: calc(100% - 20px) !important;
    max-width: 320px !important;
  }

  /* Collapsed pe mobile: 36px — la fel cu zoom și logout */
  #map-controls.collapsed {
    width: 36px !important;
  }
}

/* FIX 4: Toast notifications - Poziționare corectă pe mobile */
@media (max-width: 768px) {
  #nearby-toast {
    bottom: 80px !important;
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    max-width: none !important;
    width: auto !important;
  }

  .nearby-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .toast-btn {
    width: 100% !important;
  }
}

/* FIX 5: Overlay autentificare - Adaptare mobile */
@media (max-width: 768px) {
  .auth-form {
    padding: 20px !important;
    max-width: calc(100% - 40px) !important;
  }

  .auth-form h2 {
    font-size: 20px !important;
  }

  .auth-form input,
  .btn-primary,
  .btn-secondary {
    font-size: 15px !important;
    padding: 14px !important;
  }
}

/* FIX 6: Popup-uri proiecte - Touch-friendly */
@media (max-width: 768px) {
  .popup-container {
    min-width: 260px !important;
    max-width: 300px !important;
  }

  .nav-popup-btn {
    padding: 14px 16px !important;
    font-size: 15px !important;
    min-height: 48px !important;
  }

  .checkbox-container {
    padding: 10px !important;
    min-height: 44px !important;
  }
}

/* FIX 7: Filtre - Touch-friendly */
@media (max-width: 768px) {
  .filter-compact-item {
    padding: 12px 10px !important;
    min-height: 48px !important;
  }

  .filter-icon-small {
    width: 28px !important;
    height: 28px !important;
  }
}

/* FIX 8: Butoane navigare - Touch targets */
@media (max-width: 768px) {
  .nav-btn {
    padding: 14px 15px !important;
    font-size: 15px !important;
    min-height: 52px !important;
  }

  .route-action-btn {
    padding: 10px 14px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
}

/* FIX 9: Safe areas pentru dispozitive cu notch (iPhone X+, Android modern)
   ⚠️ IMPORTANT: wrapat în @media (max-width: 768px) — altfel suprascrie desktop!
   Pe desktop env(safe-area-inset-top) = 0, deci max(120px, 80px) = 120px
   care suprascria top: 144px din style.css cu !important */
@media (max-width: 768px) {
  @supports (padding: max(0px)) {
    body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }

    .logout-btn {
      top: max(60px, calc(20px + env(safe-area-inset-top))) !important;
    }

    #map-controls {
      top: max(120px, calc(80px + env(safe-area-inset-top))) !important;
    }

    .leaflet-control-zoom {
      margin-top: max(64px, calc(28px + env(safe-area-inset-top) + 36px)) !important;
      margin-right: 14px !important;
      margin-left: 0 !important;
    }

    #nearby-toast {
      bottom: max(80px, calc(24px + env(safe-area-inset-bottom))) !important;
    }
  }
}

/* FIX 10: Previne zoom accidental la double-tap */
@media (max-width: 768px) {
  * {
    touch-action: pan-x pan-y;
  }

  #map {
    touch-action: none;
  }

  input, textarea, button {
    touch-action: manipulation;
  }
}

/* FIX 11: Scrolling smooth pe mobile */
@media (max-width: 768px) {
  .mc-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* FIX 12: Îmbunătățiri pentru landscape mode */
@media (max-width: 768px) and (orientation: landscape) {
  .logout-btn {
    top: 15px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  #map-controls {
    top: 60px !important;
    max-width: 280px !important;
  }

  .leaflet-control-zoom {
    margin-top: 70px !important;
  }
}

/* ========================================
   FIX 13: BOTTOM SHEET — Navigator mobile
   Pe desktop rămâne panelul fix din dreapta (neschimbat).
   Pe mobile (<= 768px) navigatorul devine bottom sheet.
   ======================================== */
@media (max-width: 768px) {

  /* Ascundem panelul desktop — îl înlocuim cu bottom sheet */
  #map-controls {
    display: none !important;
  }

  /* Bottom sheet container */
  #map-controls-bs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    border-radius: 16px 16px 0 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
    transform: translateY(calc(100% - 28px));
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    height: 42vh;
    min-height: 280px;
    max-height: 480px;
  }

  #map-controls-bs.bs-open {
    transform: translateY(0);
  }

  /* Handle — bara de drag */
  #bs-handle {
    width: 100%;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  #bs-handle::after {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
  }

  #bs-handle:hover::after,
  #map-controls-bs.bs-open #bs-handle::after {
    background: #aab0b8;
  }

  /* Header bottom sheet */
  #bs-header {
    display: flex;
    align-items: center;
    padding: 0 16px 10px 16px;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  #bs-header-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.1px;
  }

  /* Conținut scrollabil */
  #bs-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1;
    padding: 12px 14px 32px 14px;
  }

  /* Structura flex verticală */
  #map-controls-bs {
    display: flex;
    flex-direction: column;
  }

  /* Zoom controls — dreapta sub logout */
  .leaflet-control-zoom {
    margin-top: max(100px, calc(max(56px, calc(20px + env(safe-area-inset-top))) + 36px + 8px)) !important;
    margin-right: 14px !important;
    margin-left: 0 !important;
  }

  /* Logout — doar iconița pe mobile, compact */
  .logout-btn {
    top: max(56px, calc(20px + env(safe-area-inset-top))) !important;
    right: 14px !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 0 !important;
    min-width: 36px !important;
    width: 36px !important;
    border-radius: 8px !important;
  }

  .logout-btn .btn-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .logout-btn .btn-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Auth modal — compact pe mobile, centrat, scroll intern */
  .auth-form {
    padding: 24px 20px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 14px !important;
  }

  .auth-form h2 {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }

  .auth-form input {
    padding: 13px !important;
    font-size: 15px !important;
  }

  .btn-primary, .btn-secondary {
    padding: 14px !important;
    font-size: 15px !important;
  }

  /* Toast proximitate — deasupra bottom sheet */
  #nearby-toast {
    bottom: calc(42vh + 12px) !important;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  #map-controls-bs {
    height: 55vh;
    min-height: 200px;
    max-height: 320px;
  }

  #nearby-toast {
    bottom: calc(55vh + 8px) !important;
  }

  .logout-btn {
    top: 10px !important;
  }
}

/* Pe desktop: bottom sheet ascuns, panelul clasic activ */
@media (min-width: 769px) {
  #map-controls-bs {
    display: none !important;
  }
}