/* ============================================================
   Mobile layer.

   Loaded after style.css and purely additive: every rule sits
   inside a media query, so the desktop layout is untouched. The
   760px breakpoint matches the one already in style.css.
   ============================================================ */

/* Inputs under 16px make iOS Safari zoom the page on focus, leaving
   the layout scrolled sideways. This is triggered by the font size,
   not the viewport, so it applies at every width. */
input, select, textarea, button { font-size: 16px; }
.form input, .form select, .form textarea { font-size: 16px; }

@media (max-width: 760px) {

  /* ---- top bar: scroll rather than wrap ---- */
  .topbar {
    height: auto;
    gap: .7rem;
    padding: .55rem .9rem;
    flex-wrap: nowrap;
    align-items: center;
  }
  .brand { font-size: 1.15rem; flex: 0 0 auto; }
  .topbar nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .2rem;
    margin-right: -.9rem;
    padding-right: .9rem;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; padding: .45rem .6rem; font-size: .88rem; }

  main { padding: 1rem .9rem 2rem; }
  h1 { font-size: 1.4rem; }

  /* ---- tables scroll inside themselves, not the whole page ---- */
  .grid {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: .88rem;
  }
  .grid td, .grid th { padding: .6rem .5rem; }
  .grid td form { display: inline-block; margin: 0 .15rem 0 0; }

  /* ---- touch targets ---- */
  .btn { padding: .65rem 1rem; min-height: 44px; }
  .grid .btn, .grid button { min-height: 38px; padding: .4rem .7rem; font-size: .85rem; }
  .filters a { padding: .4rem .75rem; }

  /* ---- forms stack ---- */
  .form .row { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; gap: .15rem .5rem; }
  .detail dt { margin-top: .5rem; font-size: .8rem; }
  .page-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .head-actions { width: 100%; }

  /* ================= dashboard ================= */

  /* seven days scroll sideways instead of wrapping ragged */
  .hm-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-right: -.9rem;
    padding-right: .9rem;
  }
  .hm-strip::-webkit-scrollbar { display: none; }
  .hm-day {
    flex: 0 0 auto;
    min-width: 68px;
    scroll-snap-align: start;
    padding: 9px 5px;
  }
  .hm-day .dn { font-size: 1.25rem; }

  /* two by two rather than four across */
  .hm-counts { gap: 8px; }
  .hm-count { flex: 0 0 calc(50% - 4px); min-width: 0; padding: 10px 12px; }
  .hm-count .n { font-size: 1.3rem; }

  .hm-row { padding: 11px 12px; gap: 11px; }
  .hm-thumb { width: 46px; height: 46px; flex-basis: 46px; }
  .hm-t { font-size: .95rem; }
  .hm-w { font-size: .8rem; white-space: normal; }
  .hm-amt { font-size: .95rem; }
  /* the slot chip is the first thing to drop when space is tight */
  .hm-slot { display: none; }
  .hm-sec { margin-bottom: 22px; }
  #riderMap { height: 260px !important; }

  /* ================= orders board ================= */
  .ob-card { padding: 12px; gap: 12px; flex-wrap: nowrap; }
  .ob-thumb { width: 72px; height: 72px; flex-basis: 72px; }
  .ob-title { font-size: .95rem; }
  .ob-to { font-size: .84rem; }
  .ob-right {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    width: auto;
    gap: 4px;
  }
  .ob-amt { font-size: 1.05rem; }
  .ob-tabs {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    margin-right: -.9rem; padding-right: .9rem;
  }
  .ob-tabs::-webkit-scrollbar { display: none; }
  .ob-tab { white-space: nowrap; }
  .ob-meta { gap: 5px; }
  .ob-chip { font-size: .72rem; padding: 2px 7px; }
  .ob-day { margin: 20px 0 8px 0; }

  /* ================= order detail ================= */
  .od-top { gap: 10px; }
  .od-date { font-size: 1.25rem; }
  .od-amt { text-align: left; }
  .od-amt .v { font-size: 1.5rem; }
  .od-panel { padding: 14px 15px; }
  .od-item { flex-direction: column; gap: 11px; }
  .od-img { width: 100%; height: 190px; flex-basis: auto; }
  .od-panel select, .od-panel input, .od-panel button { min-height: 44px; }
  .od-row { flex-wrap: wrap; gap: 2px; }
  .od-row .v { text-align: left; width: 100%; }

  /* ================= payload viewer ================= */
  pre { font-size: .72rem !important; padding: 12px !important; }
}

/* very narrow phones */
@media (max-width: 380px) {
  .hm-count { flex-basis: 100%; }
  .ob-thumb { width: 60px; height: 60px; flex-basis: 60px; }
  .brand { font-size: 1.05rem; }
}

/* respect a reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hm-row:hover, .ob-card:hover, .hm-count:hover, .hm-day:hover,
  .ob-card:hover { transform: none !important; }
}