/* ═══════════════════════════════════════════════════════════
   responsive.css  —  Mobile & Responsive Adjustments
   ShapeFile Converter | bumixa.com
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet / small desktop (≤ 900px) ─────────────────── */
@media (max-width: 900px) {
  :root { --panel-w: 300px; }
}

/* ── Mobile (≤ 680px) ──────────────────────────────────── */
@media (max-width: 680px) {
  :root {
    --panel-w: 100vw;
    --navbar-h: 48px;
  }

  /* Panel becomes full-width bottom sheet feel */
  .side-panel {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: var(--panel-w) !important;
    z-index: 500;
  }

  /* Navbar */
  .navbar-sub  { display: none; }
  .badge-secure { display: none; }

  /* Map toolbar wraps and smaller */
  .map-toolbar { max-width: calc(100vw - 60px); font-size: .68rem; }

  /* Info grid single col */
  .info-grid-compact { grid-template-columns: 1fr; }

  /* Download buttons full width */
  .download-btn-row { flex-direction: column; }
  .download-btn-row .btn { width: 100%; }
  .download-all-row .btn { width: 100%; }

  /* FAB position */
  .panel-fab { left: 10px; }

  /* Footer */
  .app-footer { font-size: .65rem; }
}

/* ── Small mobile (≤ 420px) ────────────────────────────── */
@media (max-width: 420px) {
  .navbar-title { font-size: .82rem; }
  .map-empty-title { font-size: 1rem; }
  .map-empty-sub { font-size: .78rem; }
}