/* ─── Gate Access Property Portal — Mobile Responsive ───────────────────────────────────
   v2.4.284 — stacks the dashboard tile grid + makes the data tables
   horizontally scrollable down to 360px. The base `styles.css` already
   handles most of the layout; this file just patches the resident-
   specific surfaces.

   The `data-table` selector covers the My Guests, History, Approvals,
   Audit, and PM Companies tables. Wrapping in a scroll container keeps
   the table readable instead of squishing each cell unreadable.
*/

/* Larger tap targets across the portal — mobile users miss small buttons. */
@media (max-width: 768px) {
  .admin-container { padding: 0.5rem !important; }

  /* Stack tile grid into a single column. */
  .admin-container .dashboard-grid { grid-template-columns: 1fr !important; }

  /* Filter rows stack vertically on narrow screens. */
  .filter-row { flex-direction: column !important; align-items: stretch !important; }
  .filter-row > * { width: 100% !important; }

  /* Data tables scroll horizontally so columns stay legible. */
  .data-table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Larger button tap targets (Apple HIG = 44px min, Material = 48dp). */
  .btn,
  button.btn {
    padding: 0.6rem 1rem !important;
    min-height: 44px;
    font-size: 1rem;
  }

  /* Cards stretch full-width on mobile. */
  .card { padding: 0.75rem !important; }

  /* Address-list rows stack address + actions vertically. */
  .address-list .card > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
}

/* 360px is the smallest viewport we target. Tighter padding + fonts. */
@media (max-width: 380px) {
  .admin-container { padding: 0.25rem !important; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.05rem; }
  .form-group label { font-size: 0.95rem; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; /* iOS won't auto-zoom on focus */ }
  .data-table th, .data-table td { padding: 0.4rem 0.5rem; font-size: 0.9rem; }
}