/* mobile.css — responsive overrides for phones/small tablets.
   Loaded by every page AFTER its inline styles, so these win on small screens.
   Desktop is untouched (everything lives behind the media query). */

@media (max-width: 760px) {
  /* Topbar: let the nav scroll sideways instead of wrapping into chaos */
  .topbar {
    padding: 8px 12px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .topbar-left, .topbar-right { flex-shrink: 0; }
  .topbar h2 { font-size: 13px !important; white-space: nowrap; }
  .topbar a, .topbar button { white-space: nowrap; }

  /* Page body */
  .main { padding: 14px 12px !important; }
  h3 { font-size: 18px !important; }

  /* Stats row: two per line instead of squished four */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .stat-value { font-size: 22px !important; }

  /* Camera cards: one per row, full width */
  .camera-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Toolbar (search + filter chips): wrap and give touch room */
  .toolbar { flex-wrap: wrap !important; gap: 8px !important; }
  .toolbar input[type="search"], .search-box, .search-box input { width: 100% !important; max-width: none !important; }

  /* Camera drawer: full screen on phones */
  .drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }
  .drawer-body { padding: 12px !important; }

  /* Tables (health, logbook, team, alarms, admin): scroll sideways in place */
  .card.table-card, .table-card { overflow-x: auto !important; }
  table { min-width: 640px; }
  th, td { padding: 8px 10px !important; font-size: 12px !important; }

  /* Forms */
  .form-row { flex-direction: column !important; align-items: stretch !important; }
  .field input, .field select { min-width: 0 !important; width: 100% !important; }

  /* Buttons: bigger touch targets */
  .btn { padding: 10px 14px !important; }

  /* Modals */
  .modal, .modal-card { width: calc(100vw - 24px) !important; max-width: none !important; }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-card { padding: 12px 14px !important; }
}