/*
 * Responsive styles: mobile-first, same UX across phone and desktop.
 * Breakpoints: 1200px (tablet), 768px (small tablet / large phone), 480px (phone).
 *
 * NOTE: Mobile bottom bar + panel styles live in _nav.html <style> block
 *       so they always apply regardless of CSS load order.
 */

/* Prevent horizontal overflow and iOS zoom on input focus */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ===================== GLOBAL 768px ===================== */
@media (max-width: 768px) {
  header {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }
  header > div:not(.brand) {
    width: 100%;
    flex-wrap: wrap;
  }
  header .brand { min-width: 0; }
  header .brand .subtitle { font-size: 0.8rem; }

  nav {
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    justify-content: flex-start;
  }
  nav a {
    padding: 0.6rem 0.85rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
  }
  .nav-dropdown-toggle {
    min-height: 44px;
    padding: 0.6rem 0.85rem;
    display: inline-flex;
    align-items: center;
  }
  .nav-dropdown-menu {
    left: 0;
    right: auto;
    min-width: 180px;
  }

  main { padding: 0.75rem; }

  .main-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .left-panel { order: 1; }
  .right-panel { order: 2; min-width: 0; }

  .filter-section { padding: 1rem; }
  .filter-section input,
  .filter-section select {
    min-height: 44px;
    font-size: 16px;
  }
  .filter-range { grid-template-columns: 1fr 1fr; }

  .card-header { padding: 0.75rem 1rem; flex-wrap: wrap; }
  .card-title { font-size: 1.05rem; }

  .view-switcher { flex-wrap: wrap; gap: 0.5rem; }
  .view-switcher a,
  .view-switcher button {
    min-height: 44px;
    padding: 0.6rem 0.85rem;
  }
  .view-switcher a.reset-btn { margin-left: 0; width: 100%; }

  .kpi-bar {
    padding: 0.6rem 0.75rem;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .kpi-item .kpi-value { font-size: 1rem; }
  .kpi-item .kpi-label { font-size: 0.75rem; }

  .cards-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .load-card { padding: 1rem; }

  .transport-table-wrap { height: auto; min-height: 200px; }

  th, td { padding: 0.45rem 0.5rem; font-size: 0.78rem; }

  .pagination {
    padding: 0.75rem;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
  }
  .pagination a,
  .pagination span {
    padding: 0.45rem 0.55rem;
    font-size: 0.8rem;
  }

  /* Modals: bottom-sheet style */
  .modal-overlay,
  .modal { padding: 0 !important; }
  .modal-content,
  .modal-box {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 90vh;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    margin: auto 0 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
  .modal-header { padding: 0.75rem 1rem; }
  .modal-body {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 70vh;
  }
  .modal-body table { font-size: 0.8rem; }

  .table-wrapper,
  .table-scroll-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .filter-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
  }
  .kpi-card { padding: 0.9rem !important; }
  .kpi-value { font-size: 1.25rem !important; }

  .section { padding: 0.75rem; }

  .btn-calc { min-height: 48px; font-size: 1rem; }
  .map-card { min-height: 300px; }
  #map { min-height: 260px; }

  /* Inputs: prevent iOS zoom */
  input, select, textarea { font-size: 16px; }

  /* Touch targets */
  button, .btn, [type="button"], [type="submit"] {
    min-height: 44px;
  }

  /* Transport/toolkit pages with overflow:hidden on html,body */
  html, body {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
  }
  .page {
    height: auto !important;
    overflow: visible !important;
    min-height: 100vh;
  }
}

/* ===================== GLOBAL 480px ===================== */
@media (max-width: 480px) {
  header { padding: 0.5rem 0.75rem; }
  .brand-text { font-size: 0.9rem; }
  .subtitle { display: none; }

  nav { width: 100%; }
  main { padding: 0.5rem; }
  .main-layout { gap: 0.5rem; }

  .filter-section { padding: 0.75rem; }
  .filter-range { grid-template-columns: 1fr; }
  .filter-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .kpi-grid { grid-template-columns: 1fr !important; }

  .card-header { padding: 0.6rem 0.75rem; }

  th, td { padding: 0.35rem 0.4rem; font-size: 0.72rem; }
  .vin-count { font-size: 0.85rem !important; }
  .pagination a,
  .pagination span {
    padding: 0.4rem 0.45rem;
    font-size: 0.75rem;
  }
}

/* Tablet: single column layout earlier if needed */
@media (max-width: 1200px) {
  .main-layout { grid-template-columns: 1fr; }
}

/* Ensure tables don't break layout on small screens */
.table-wrapper,
.table-scroll-area,
.table-scroll-x-top {
  min-width: 0;
}
table { min-width: 0; }

/* Safe area for notched devices */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}