/* ═══════════════════════════════════════════
   NAV Mobile Fix v2 — точно під реальний HTML
   ═══════════════════════════════════════════ */

/* ── Desktop: ховаємо мобільні елементи ── */
@media (min-width: 641px) {
  #bottom-sheet   { display: none !important; }
  #fab-container  { display: none !important; }
  #nav-stop-fab   { display: none !important; }
  #coord-popup    { display: none !important; }
  #mobile-search  { display: none !important; }

  /* Toolbar знизу щоб не конфліктував з MapLibre controls */
  #toolbar {
    top: auto !important;
    bottom: 48px !important;
    right: 12px !important;
  }
}

/* ══════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Карта — завжди fullscreen */
  #map {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    z-index: 0 !important;
  }

  /* Desktop панель — схована */
  #panel, #search-box, #toolbar { display: none !important; }

  /* ── Bottom Sheet ── */
  #bottom-sheet {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    
    max-height: 84vh !important;
    z-index: 30 !important;
    background: #0d0d0d !important;
    border-radius: 18px 18px 0 0 !important;
    border-top: 1px solid #2a2a2a !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: height 0.3s cubic-bezier(.4,0,.2,1) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-shadow: 0 -4px 32px rgba(0,0,0,.8) !important;
  }
  #bottom-sheet.collapsed { height: 52px !important; }
  #bottom-sheet.full      { height: 84vh !important; }

  /* Handle */
  #sheet-handle {
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 0 6px !important;
    cursor: pointer !important;
    touch-action: none !important;
    min-height: 32px !important;
  }
  .handle-bar {
    width: 40px !important; height: 4px !important;
    background: #333 !important; border-radius: 2px !important;
  }

  /* Sheet content — скролиться */
  #sheet-content {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 4px 14px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ── Mode buttons ── */
  #sheet-mode {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  #sheet-mode .mode-btn {
    flex: 1 !important;
    padding: 10px 4px !important;
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 10px !important;
    color: #666 !important;
    font-size: 22px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #sheet-mode .mode-btn.active {
    background: #44aaff !important;
    border-color: #44aaff !important;
    color: #000 !important;
  }

  /* ── Inputs ── */
  #sheet-inputs {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  #sheet-inputs .input-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #141414 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
  }
  #sheet-inputs .input-row:focus-within {
    border-color: #44aaff !important;
  }
  .input-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; flex-shrink: 0 !important; }
  .input-dot.from { background: #44ff88 !important; }
  .input-dot.to   { background: #ff4444 !important; }
  #sheet-inputs input {
    flex: 1 !important; background: none !important; border: none !important;
    outline: none !important; color: #e0e0e0 !important;
    font-size: 15px !important; padding: 13px 0 !important;
    font-family: inherit !important;
  }
  #sheet-inputs input::placeholder { color: #444 !important; }
  .input-loc-btn, .sheet-loc-btn {
    background: none !important; border: none !important;
    color: #555 !important; cursor: pointer !important;
    padding: 6px !important; display: flex !important;
    align-items: center !important; border-radius: 50% !important;
    flex-shrink: 0 !important;
  }
  .input-loc-btn:hover, .sheet-loc-btn:hover { color: #44aaff !important; }

  /* Waypoint кнопка */
  #sheet-add-waypoint {
    background: none !important;
    border: 1px dashed #2a2a2a !important;
    color: #555 !important; padding: 8px !important;
    border-radius: 10px !important; cursor: pointer !important;
    font-size: 13px !important; text-align: center !important;
    width: 100% !important;
  }

  /* ── Route button ── */
  #sheet-route-btn {
    width: 100% !important; padding: 15px !important;
    background: #44aaff !important; color: #000 !important;
    border: none !important; border-radius: 10px !important;
    font-size: 16px !important; font-weight: 700 !important;
    cursor: pointer !important; flex-shrink: 0 !important;
  }

  /* ── Clear button ── */
  #sheet-clear-btn {
    width: 100% !important; padding: 11px !important;
    background: none !important;
    border: 1px solid #2a2a2a !important;
    color: #666 !important; border-radius: 10px !important;
    font-size: 13px !important; cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  #sheet-clear-btn:hover { border-color: #ff4444 !important; color: #ff4444 !important; }

  /* ── Route info bar ── */
  .route-info-bar {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: #141414 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    flex-shrink: 0 !important;
  }
  .route-info-bar .route-stat .val {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 20px !important; font-weight: 700 !important;
    color: #44aaff !important;
  }
  .route-info-bar .route-stat .lbl {
    font-size: 10px !important; color: #555 !important;
    text-transform: uppercase !important; letter-spacing: 1px !important;
  }

  /* ── Nav Go button ── */
  .nav-start-btn {
    margin-left: auto !important;
    padding: 10px 16px !important;
    background: #22cc66 !important; color: #000 !important;
    border: none !important; border-radius: 8px !important;
    font-size: 14px !important; font-weight: 700 !important;
    cursor: pointer !important; white-space: nowrap !important;
  }

  /* Share button */
  #sheet-share-btn {
    background: none !important;
    border: 1px solid #2a2a2a !important;
    color: #666 !important; padding: 8px 10px !important;
    border-radius: 8px !important; cursor: pointer !important;
    font-size: 14px !important;
  }

  /* ── Steps ── */
  #sheet-steps-header {
    font-size: 11px !important; color: #555 !important;
    text-transform: uppercase !important; letter-spacing: 1px !important;
    padding: 6px 0 !important; border-top: 1px solid #1a1a1a !important;
  }
  #sheet-steps-list .step-item {
    display: flex !important; gap: 10px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #1a1a1a !important;
  }
  .step-icon {
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important; background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; font-size: 12px !important;
    flex-shrink: 0 !important;
  }
  .step-instruction { font-size: 13px !important; line-height: 1.4 !important; }
  .step-dist { font-size: 11px !important; color: #555 !important; margin-top: 2px !important; }

  /* ── FAB ── visible only when sheet is collapsed, positioned above the 52px handle strip */
  #fab-container {
    position: fixed !important;
    right: 14px !important;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 14px) !important;
    display: none !important;
    flex-direction: column !important;
    gap: 10px !important;
    z-index: 40 !important;
    opacity: 0;
    transition: opacity 0.2s ease !important;
    pointer-events: none;
  }
  body.sheet-collapsed #fab-container {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
  }

  .fab {
    width: 50px !important; height: 50px !important;
    border-radius: 50% !important;
    background: #141414 !important; border: 1px solid #2a2a2a !important;
    color: #e0e0e0 !important; font-size: 20px !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.7) !important;
    cursor: pointer !important;
  }
  .fab-blue, #fab-locate {
    background: #44aaff !important; color: #000 !important;
    border-color: #44aaff !important;
  }
  .fab.active {
    background: #ffaa00 !important; color: #000 !important;
    border-color: #ffaa00 !important;
  }

  /* ── MapLibre controls ── */
  .maplibregl-ctrl-top-right {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
  }
  .maplibregl-ctrl-bottom-right,
  .maplibregl-ctrl-bottom-left,
  .maplibregl-ctrl-scale { display: none !important; }

  /* ── Nav overlay ── */
  #nav-overlay {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  }
  /* On mobile the FAB is the only stop control — hide the top-bar button */
  #nav-overlay #nav-stop-btn { display: none !important; }

  /* ── Nav stop FAB (hidden until navigation active) ── */
  #nav-stop-fab {
    position: fixed !important;
    right: 14px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    z-index: 310 !important; /* above nav-overlay (300) */
    width: 64px !important; height: 64px !important;
    border-radius: 50% !important;
    background: #ff4444 !important; color: #fff !important;
    border: none !important; font-size: 11px !important;
    font-weight: 700 !important; line-height: 1.3 !important;
    box-shadow: 0 4px 16px rgba(255,68,68,.5) !important;
    cursor: pointer !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    touch-action: manipulation !important;
  }
  #nav-stop-fab.visible { display: flex !important; }
  /* Hide bottom sheet + FABs while navigating so stop FAB is not obscured */
  body.navigating #bottom-sheet,
  body.navigating #fab-container { display: none !important; }

  /* ── Coord popup ── */
  #coord-popup {
    position: fixed !important;
    bottom: calc(44vh + 12px) !important;
    left: 12px !important; right: 70px !important;
    background: #141414 !important;
    border: 1px solid #44aaff !important;
    border-radius: 10px !important; padding: 10px 14px !important;
    z-index: 50 !important; font-family: monospace !important;
  }
  #coord-text { color: #44aaff !important; font-size: 13px !important; margin-bottom: 8px !important; }
  .coord-actions { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
  .coord-actions button {
    background: #1a1a1a !important; border: 1px solid #2a2a2a !important;
    color: #e0e0e0 !important; padding: 5px 10px !important;
    border-radius: 6px !important; cursor: pointer !important; font-size: 12px !important;
  }

  /* ── Toast ── */
  #toast { bottom: calc(44vh + 12px) !important; }

  /* ── Mobile search ── */
  #mobile-search {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important; right: 74px !important;
    z-index: 50 !important;
  }
  #mobile-search-input {
    width: 100% !important;
    background: #141414 !important; border: 1px solid #2a2a2a !important;
    border-radius: 24px !important; padding: 10px 16px !important;
    color: #e0e0e0 !important; font-size: 14px !important; outline: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.7) !important;
  }
}