/* Phones and touch screens, for every page. Loaded after each page's own styles, so these win where they
   overlap. Desktop (a mouse, a wide screen) is unchanged.

   - Touch screens (pointer: coarse): buttons, links styled as buttons, tabs and form fields are at least
     44px tall, the size Apple and Google recommend for a thumb.
   - Phones (max-width 640px): form fields use 16px text, since iPhones zoom the whole page into any field
     with smaller text when it's tapped; headers wrap instead of running off the screen.
   - Phones and tablets held upright: wide tables become one card per row where they wouldn't fit (Parts
     Tracker up to 1024px, RO Log up to 900px); on a tablet the cards sit two to a row.
   - Tablets on their side (1025-1279px): the Parts Tracker table is tightened so its buttons fit. */

@media (pointer: coarse) {
  .btn, button.btn, label.btn, .btn.sm, button.sm, .home-link, .tr-open, .ah-btn,
  .store-switch .chip, .chip, .tab, .subtab, dialog .btn, .set-close, .ah-close {
    min-height: 44px !important;
  }
  .ah-btn, .tr-open, .home-link { min-width: 44px; justify-content: center; }
  .store-switch li { min-height: 44px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  /* the calendar's month arrows */
  #prevMonth, #nextMonth { min-width: 44px; min-height: 44px; }
}

@media (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }

  /* front page: logo on its own row, then the store and the header buttons */
  .page > header { flex-wrap: wrap; row-gap: 14px; }
  .page > header .who { width: 100%; justify-content: space-between; flex-wrap: wrap; row-gap: 10px; }
  .page > header .who .store-switch .chip { max-width: 52vw; }

  /* dialogs use the whole height a phone has (the address bar comes and goes) */
  dialog[open] { max-height: calc(100dvh - 24px); }
  dialog .bd { max-height: none; }

  /* RO Log: the advisor and tech filters take the whole row */
  #advFilter, #techFilter { width: 100% !important; flex: 1 1 100%; }

  /* ---------- console: the tenant's tabs and filter wrap; wide tables scroll inside their box ---------- */
  .tabs { flex-wrap: wrap; }
  .tabs .tools { margin: 6px 0 8px; width: 100%; }
  .tabs .tools select { width: 100%; }
  .tabpanel { overflow-x: auto; }
}

/* ---------- Phones and tablets held upright: cards instead of tables that wouldn't fit ---------- */

/* Parts tab: its table needs ~1170px (js/pages/service-parts.js renders #ordersCards at the same width) */
@media (max-width: 1024px) {
  #tab-orders .tablewrap { display: none; }
  #ordersCards { display: flex !important; }
}

/* RO Log: its table needs ~940px, so each RO becomes a card */
@media (max-width: 900px) {
  table.ro-table thead { display: none; }
  table.ro-table, table.ro-table tbody { display: block; }
  table.ro-table tr {
    display: grid; grid-template-columns: 1fr auto; grid-auto-flow: row dense; gap: 4px 10px; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer;
  }
  table.ro-table td { display: block; padding: 0 !important; border: 0 !important; white-space: normal; }
  table.ro-table td.c-ro { grid-column: 1; font-size: 17px; }
  table.ro-table td.c-date { grid-column: 2; justify-self: end; color: var(--muted); }
  table.ro-table td.c-cust { grid-column: 1 / -1; font-weight: 600; }
  table.ro-table td.c-type { grid-column: 1; }
  table.ro-table td.c-tech { grid-column: 2; justify-self: end; font-weight: 600; }
  table.ro-table td.c-adv { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
  table.ro-table td.c-adv:not(:empty)::before { content: "Advisor: "; }
  table.ro-table td.c-status { grid-column: 1 / -1; margin-top: 4px; }
  table.ro-table td.c-status select { width: 100%; min-height: 44px; font-size: 16px; }
  table.ro-table td.c-flags { grid-column: 1 / -1; }
  table.ro-table td.c-flags:empty, table.ro-table td.c-notes:empty { display: none; }
  table.ro-table td.c-notes { grid-column: 1 / -1; color: var(--muted); font-size: 14px; max-width: none; overflow: visible; text-overflow: clip; }
}

/* ---------- Tablets (641-1024px): two cards to a row, each a rounded box ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
  #ordersCards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px; }
  #ordersCards .ocard { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
}
@media (min-width: 641px) and (max-width: 900px) {
  table.ro-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
  table.ro-table tr { border: 1px solid var(--line); border-radius: var(--radius-lg); align-content: start; }
  /* front page: the person's name moves to the Settings menu (as on phones), so the header buttons fit */
  .who .name { display: none; }
  .page > header { flex-wrap: wrap; row-gap: 12px; column-gap: 12px; }   /* (a long store name: buttons go to a 2nd row) */
  .page > header .who { gap: 8px; margin-left: auto; }
}

/* ---------- Tablets on their side (1025-1279px): the Parts Tracker table, tightened to fit ---------- */
@media (min-width: 1025px) and (max-width: 1279px) {
  #tab-orders th, #tab-orders td { padding-left: 6px; padding-right: 6px; }
  #tab-orders th:first-child, #tab-orders td:first-child { padding-left: 12px; }
  #tab-orders th:last-child, #tab-orders td:last-child { padding-right: 12px; }
}