/*
 * admin-mobile.css — shared responsive layer for every /admin/*.php page.
 *
 * Each admin page keeps its own inline <style> (the desktop layout). This file
 * is <link>ed immediately AFTER that inline block in every page's <head>, so
 * these small-screen overrides win purely by source order — no !important
 * needed. One place to tune the admin's phone/tablet behaviour.
 *
 * The pages already share a class vocabulary (.wrap/.head/.nav/.card/.stat-grid/
 * table/.tabs/.field/.btn), so a single stylesheet covers all of them.
 */

@media (max-width: 640px) {

  /* Page gutter: desktop uses 36px 20px — too roomy on a 375px screen. */
  .wrap { padding: 18px 13px; }

  /* Header: the nav is 10 items pinned right with margin-left:auto inside a
     flex row — on a phone that squeezes logo+title and mangles the pills.
     Let the nav drop to its own full-width row below the title and wrap. */
  .head { flex-wrap: wrap; gap: 10px 12px; margin-bottom: 18px; }
  .nav  { margin-left: 0; width: 100%; gap: 6px; flex-wrap: wrap; }
  .nav a { padding: 6px 10px; font-size: 12px; }

  /* Cards a touch tighter. */
  .card { padding: 15px 14px; }

  /* Stat tiles: two per row instead of one cramped 5-across strip. */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat   { padding: 12px 13px; }
  .stat .n { font-size: 19px; }

  /* THE big fix: wide data tables (orders/credits/catalog…) scroll sideways
     instead of crushing 8 columns into an unreadable mush. display:block +
     overflow-x turns the table itself into a horizontal scroller; columns stay
     aligned via the browser's anonymous table box, and nowrap keeps each cell
     on one line so the table grows wide enough to actually scroll. */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* Inputs full width with comfortable tap targets. */
  .field input, .field textarea,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="url"], textarea, select {
    width: 100%; max-width: 100%;
  }

  /* Filter/tab strips: one swipeable row rather than several wrapped rows. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tabs a { flex: 0 0 auto; white-space: nowrap; }

  /* Two-column form grids (e.g. SMTP host + port) collapse to one column. */
  .grid2 { grid-template-columns: 1fr; }
  .formfoot { flex-wrap: wrap; }

  /* Long inline form rows (e.g. an order's action buttons) may stack. */
  .btn { white-space: nowrap; }
}
