/* Rent 2 Go admin — mobile first (16 Sep 2026).
   The console is run from a phone as often as a desk: at the car, at the shop, standing in the yard.
   Every page was built at desk width, so on a phone dialogs sat wider than the screen, tables ran off the
   side, and every tap into a 13px input zoomed the whole page (iOS zooms below 16px). This is the one
   stylesheet that fixes those for every page; it is loaded last, so it wins, and it only applies on small
   screens — the desktop layouts are untouched. */

@media (max-width: 899px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* Room for the fixed ☰ button so it never sits on top of a heading or a button. */
  .wrap, main.wrap, .page, .container { padding-left: 12px !important; padding-right: 12px !important; max-width: 100% !important; }
  #appwrap .wrap, #appwrap main.wrap, body > main.wrap { padding-top: 58px !important; }

  /* TAP TARGETS. A 24px button is a miss on a phone. */
  .btn, button, .cpb, .mvtab, .pal, .tabs button, .seg button { min-height: 40px; }
  .btn.sm, .btn.small, .iconbtn, .btn.xs { min-height: 36px; }
  .iconbtn { min-width: 36px; }

  /* NO ZOOM ON FOCUS. iOS zooms into any field under 16px; then nothing lines up again. */
  input, select, textarea { font-size: 16px !important; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 42px; }
  textarea { min-height: 72px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }

  /* DIALOGS. Fixed widths (340-1000px) were wider than the screen; they are now the screen. */
  .modal, .rvmodal, .exit-panel, .logincard, .card.modal, .sheet, .ovbox, .mdbox,
  #md, .md, .panel, .dlg, .drawer {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box;
  }
  .rvbd, .exit-wrap, .mbd, .ovl, #ov { padding: 8px !important; align-items: flex-start !important; }
  #md, .modal, .rvmodal, .exit-panel { max-height: 92vh; overflow-y: auto; }

  /* TABLES scroll sideways inside their own box instead of pushing the page sideways. */
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tw, .tscroll, .rowscroll, .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* TWO-UP LAYOUTS become one column. */
  .f2, .grid2, .ex-2col, .algrid, .calside, .smsbox, .ed, .dash-grid, .bsplit, .cd-grid,
  .cpsels, .qwrap, .lists, .stat, .stat-row, .statgrp .stat, .fgrid, .bgrid, .photos, .grid3, .f3 {
    grid-template-columns: 1fr !important; display: grid !important;
  }
  .stat, .stat-row, .fgrid, .bgrid, .lists { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }

  /* Rows of controls wrap instead of squeezing. */
  .ctl, .actions, .acts, .mact, .row, .chd, .qacts, .flinks, .calbar { flex-wrap: wrap !important; }
  .ctl input, .ctl select { min-width: 0; flex: 1 1 150px; }

  /* The schedule calendar: a readable month on a phone. */
  .calgrid { gap: 3px !important; }
  .calday { min-height: 62px !important; padding: 4px !important; }
  .calpill { font-size: 10px !important; }

  /* Images and media never set the page width. */
  img, video, canvas, iframe { max-width: 100%; height: auto; }
  .pvframe { height: 420px; }

  /* Long values (emails, invoice numbers, links) wrap rather than stretch the page. */
  td, th, .meta, .hint, .rdim, .sub { overflow-wrap: anywhere; }

  /* Full-height screens that iOS gets wrong with 100vh. */
  .loginwrap { min-height: 100svh; }
}

/* Phones held in the hand, not a small desktop. */
@media (max-width: 560px) {
  body { font-size: 15px; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 16px !important; }
  .wrap, main.wrap { padding-bottom: 90px !important; }
  .btn, button { font-size: 14px; }
  /* One card per row, whatever the page called its grid. */
  .cards, .grid, .fgrid, .bgrid, .lists, .stat, .stat-row { grid-template-columns: 1fr !important; }
  .calday { min-height: 54px !important; }
  .caldn { font-size: 11px !important; }
}