/* RTM Hub site 0.97.76 — phones (Dave 2026-11-12: "make it so the website fits better and works better when a user is on their phone. Right now we
   cannot scroll around or really do much of anything"). Everything here is inside @media (max-width: 760px): computers and tablets do not change.
   - Scrolling: html and body were BOTH set to scroll (site.css), so the page's own scroll never moved; now the page scrolls normally.
   - The menu is one row at the top that you swipe sideways (it stays at the top while you scroll), instead of a full screen of links.
   - The status buttons (Load stages, builds stuck, Live, Connections, Wilatek check, appointments) sit at the end of the page instead of on top of it.
   - Tables (Loads, Carriers, lists) show each row as a card instead of a table wider than the phone.
   - The load window keeps its title and Close button at the top while you scroll it. Nothing is wider than the screen. */
@media (max-width: 760px) {
  html { overflow-x: hidden !important; overflow-y: visible !important; height: auto !important; }
  html body, html body.rtm { overflow: visible !important; height: auto !important; }
  #app272 { overflow-x: clip !important; }

  #app272 .side272 { flex-direction: row !important; align-items: center !important; gap: 6px !important; overflow-x: auto !important; overflow-y: hidden !important;
    padding: 8px !important; position: sticky !important; top: 0; z-index: 30; scrollbar-width: none; background: rgba(16, 10, 42, .94) !important; border-radius: 22px 22px 0 0; }
  #app272 .side272::-webkit-scrollbar { display: none; }
  #app272 .side272 > * { flex-shrink: 0 !important; margin: 0 !important; }
  #app272 .side272 > div:not(.brand272):not(.vsw272):not(.ft272) { display: flex !important; flex-direction: row !important; gap: 6px !important; }
  #app272 .side272 .ni272 { white-space: nowrap !important; width: auto !important; padding: 7px 11px !important; }
  #app272 .side272 .ft272, #app272 .side272 .sp272 { display: none !important; }
  #app272 .side272 .brand272 { padding: 0 4px !important; }

  body > #g99btn, body > #p98chip, body > #cn55chip, body > #wlck50chip, body > #lv87, body > #apt81p {
    position: static !important; display: inline-flex !important; margin: 4px 0 4px 8px !important; max-width: calc(100vw - 16px) !important; transform: none !important; }
  body > #g99btn ~ #g99btn { display: none !important; }

  #app272 .tw272 { overflow-x: visible !important; }
  #app272 table.tbl272, #app272 table.tbl272 tbody { display: block !important; width: 100% !important; min-width: 0 !important; }
  #app272 table.tbl272 thead { display: none !important; }
  #app272 table.tbl272 tr { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 10px; padding: 10px 10px 10px 14px !important; height: auto !important;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, .12)); position: relative; }
  #app272 table.tbl272 td { display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important;
    padding: 2px 0 !important; border: 0 !important; white-space: normal !important; overflow-wrap: anywhere; }
  #app272 table.tbl272 td:empty { display: none !important; }

  #app272 .drw7 .dh7 { position: sticky !important; top: 0; z-index: 5; background: rgba(16, 10, 42, .97) !important; }
}