/* ============================================================================
   mobile.css — the Hub on a phone.

   The field view already had a phone face of its own. This is about the other
   one: the back office, on the phone in your pocket, when you are not at a
   desk. The sidebar already collapsed at 900px, which is a tablet — everything
   below was still laid out as though there were a mouse and 1200 pixels.

   Four things break a page on a phone, and only one of them is obvious:

     1. SOMETHING WIDER THAN THE SCREEN. One wide table and the whole page
        scrolls sideways, so every other screen feels broken too. Tables are the
        usual culprit and they cannot simply be made narrower — a key list needs
        its columns. So they scroll INSIDE their card, and the page does not.
     2. TEXT INPUTS UNDER 16px. Safari zooms the page in when you focus one, and
        does not zoom back out. It reads as the app jumping about.
     3. TAP TARGETS built for a cursor. 44px is the number; a 28px button is
        reachable but not reliably, which is worse than either.
     4. THE PARTS OF THE SCREEN THAT ARE NOT THE SCREEN. The notch, and the home
        bar that sits over the bottom of the page. Buttons go under them.

   Written as one block at 640px and below, so nothing here can affect a desktop.
   ========================================================================== */

@media (max-width: 640px) {

  /* --- the page itself ---------------------------------------------------- */
  html, body { max-width: 100%; overflow-x: hidden; }

  .app-body {
    display: block;
    padding: 0 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .app-body main, main#mainContent {
    padding: 14px 0 96px;      /* room at the bottom for the home bar */
    max-width: 100%;
  }

  /* --- the Setup rail becomes a strip you swipe --------------------------- */
  /* Stacking it vertically would push the actual page down by six buttons. */
  .setup-panel {
    position: static; width: auto;
    flex-direction: row; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 10px 0; margin: 0 -12px 4px;
    padding-left: 12px; padding-right: 12px;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .setup-panel::-webkit-scrollbar { display: none; }
  .setup-panel-label { display: none; }
  .setup-btn {
    flex: 0 0 auto; white-space: nowrap;
    border: 1px solid var(--border); border-radius: 999px;
    padding: .5rem .9rem; min-height: 40px;
  }

  /* --- cards -------------------------------------------------------------- */
  .card { padding: 14px; border-radius: 12px; margin-bottom: 12px; }

  /* --- ANYTHING WIDE SCROLLS INSIDE ITS CARD, NOT ACROSS THE PAGE --------- */
  .card > table,
  .card > .table-wrap,
  .table-wrap { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: .88rem; }
  table th, table td { white-space: nowrap; padding: .5rem .45rem; }
  /* The first column is the one you read to find the row, so let it wrap and
     keep it in view while the rest scrolls under your thumb. */
  table td:first-child, table th:first-child {
    white-space: normal; min-width: 8.5rem;
    position: sticky; left: 0; background: var(--card);
  }

  pre, code { max-width: 100%; overflow-x: auto; }
  img, svg, video, canvas { max-width: 100%; height: auto; }

  /* --- forms -------------------------------------------------------------- */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }

  /* 16px exactly. Anything smaller and Safari zooms the page on focus. */
  input, select, textarea {
    font-size: 16px; width: 100%; min-height: 44px;
    padding: .6rem .7rem; border-radius: 10px;
  }
  textarea { min-height: 88px; }
  label { display: block; margin-bottom: .25rem; }

  button, .btn, .tab-btn, .setup-btn, .logout-btn {
    min-height: 44px; font-size: .95rem;
  }
  /* A row of buttons wraps rather than pushing the page sideways. */
  .row { flex-wrap: wrap; }
  .row > button { flex: 1 1 auto; }

  /* --- modals ------------------------------------------------------------- */
  /* A centred box with a fixed width becomes a letterbox on a phone. These
     take the screen, and scroll, and keep their buttons above the home bar. */
  #modalOverlay { padding: 0; align-items: stretch; }
  #modalBox, .modal-box, .modal {
    width: 100%; max-width: 100%;
    max-height: 100dvh; height: auto;
    margin: 0; border-radius: 14px 14px 0 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  }

  /* --- the sign-in screen ------------------------------------------------- */
  .login-card {
    width: 100%; max-width: 380px; margin: 0 14px;
    padding: 2rem 1.25rem; border-radius: 14px;
  }
  .pin-pad button { padding: 18px 0; font-size: 1.15rem; }

  /* --- the bar across the top while viewing as somebody else -------------- */
  #impersonationBar {
    flex-wrap: wrap; gap: .4rem; font-size: .82rem;
    padding-top: max(.55rem, env(safe-area-inset-top));
  }
  #impersonationBar span { flex-basis: 100%; order: 3; }

  /* --- headings ----------------------------------------------------------- */
  .hub-heading h1, h1 { font-size: 1.35rem; }
  h2 { font-size: 1.1rem; }
  .hub-heading-row { flex-direction: column; align-items: stretch; gap: .6rem; }
}

/* A phone held sideways is short, not narrow: give the modal back its scroll
   rather than letting it run off the bottom. */
@media (max-height: 480px) and (orientation: landscape) {
  #modalBox, .modal-box, .modal { max-height: 100dvh; overflow-y: auto; }
}