/* Leilani — mobile fixes, loaded last so it wins over each page's inline <style>.
 *
 * THE BUG (2026-08-06): the header nav is one non-wrapping flex row of up to 8 links.
 * At 390px that row is ~780px wide, so the page could not fit the device and the phone
 * zoomed the whole layout out to ~50% — text became tiny and buttons on the right, and
 * anything the nav pushed sideways, ended up off-screen and untappable.
 * Measured layout width before this file: chat 783px, maintenance 795px, payments 765px,
 * profile 429px, against a 390px device.
 *
 * Everything here is a max-width media query, so nothing changes on desktop.
 * !important is used only where it has to beat an inline style attribute.
 */

/* Nothing may force the page wider than the phone. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, iframe { max-width: 100%; height: auto; }
/* Flex/grid children default to min-width:auto, which is what lets long words and wide
   tables push a row past the viewport. */
.row > *, .grid > *, .header > *, .bal > * { min-width: 0; }
* { word-break: break-word; }

@media (max-width: 760px) {

  /* ---- the header: wrap instead of overflowing ---- */
  .header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    align-items: center;
  }
  .header h1 { font-size: 17px; }
  .header-nav {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100%;
    justify-content: flex-start;
  }
  .header-nav a {
    font-size: 12px;
    padding: 7px 10px;      /* still a 32px+ touch target */
  }

  /* ---- containers ---- */
  .container { padding: 12px 10px; }
  .card { padding: 14px; border-radius: 10px; }

  /* ---- stacked form rows (these carry inline max-width on desktop) ---- */
  .grid { flex-direction: column; gap: 8px; }
  .grid > div { max-width: none !important; width: 100% !important; }

  /* ---- rows of controls wrap, and buttons stay reachable ---- */
  .row { flex-wrap: wrap !important; }
  button, .newbtn { min-height: 40px; }
  .row > button { flex: 1 1 auto; }
  .tiny { min-height: 32px; }

  /* ---- tables scroll inside themselves instead of widening the page ---- */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table th, table td { white-space: nowrap; }

  /* ---- balance boxes stack ---- */
  .bal { flex-direction: column; }
  .balbox { min-width: 0; width: 100%; }

  /* ---- documents list ---- */
  .doc { flex-wrap: wrap; gap: 10px; }
  .doc .meta { flex: 1 1 60%; }
  a.dl { padding: 9px 14px; }

  /* ---- chat ---- */
  .suggestions { flex-wrap: wrap; justify-content: center; }
  .input-bar { padding: 10px; gap: 8px; }
  .input-bar input { font-size: 16px; }   /* <16px makes iOS zoom on focus */

  /* iOS zooms any focused field under 16px, which then leaves the page panned sideways. */
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 400px) {
  .header h1 { font-size: 16px; }
  .header-nav a { font-size: 11.5px; padding: 6px 8px; }
  .card { padding: 12px; }
}