/* ═══════════════════════════════════════════════════════════════════════════
   The portal on a phone.

   The pages were built for a desktop: rows of steps and rows of statistics laid out
   side by side with flexbox. On a phone those rows are wider than the screen, and because
   the layout is right-to-left, the overflow pushes the whole page off to one side. That is
   why the dashboard arrived shifted, with a strip of red down the edge and every card
   cut off — it was not the app, it was the page being wider than the phone.

   This file is loaded after each page's own styles, so it wins, and everything in it is
   inside a phone-width media query, so a desktop sees nothing change.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {

  /* ── nothing may be wider than the phone ─────────────────────────────────
     One overflowing element drags the entire page sideways. min-width:auto is the flexbox
     default and it is what lets a flex child refuse to shrink; zero lets it. */
  html, body { max-width: 100vw !important; overflow-x: hidden !important; }
  * { min-width: 0 !important; }

  /* .main is a CLASS here, not the <main> tag — two different things, and I targeted the
     wrong one first. Without a width of its own it grows to fit its content, which is a
     five-step progress track 650px across, and then it hangs off the side of the phone. */
  main, .wrap, .card, .panel, section,
  .layout, .layout .main, .main, .rail {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  main { padding: 14px 12px 40px !important; }
  .card, .panel { padding: 16px 14px !important; border-radius: 14px !important; }

  /* ── the header ──────────────────────────────────────────────────────────
     Logo on its own line, everything else beneath it, nothing squeezed. */
  body > header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
  }
  body > header > * { justify-content: center !important; }
  body > header .logo { margin: 0 auto !important; }

  /* The header buttons. Wrapping left "sign out" stranded on a line of its own; a single
     scrolling row cut the last one in half. Small enough to wrap evenly is the answer —
     six chips become two tidy rows of three, and it reads as a deliberate block. */
  header .tabs, header .headright, header .nav,
  body > header > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  header a, header .tab, header button {
    font-size: 12px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* The language switch is one control, not two. It must never split across a line. */
  header .lang { flex: 0 0 auto !important; display: inline-flex !important; }

  /* ── the progress tracks ─────────────────────────────────────────────────
     Five steps across a phone is 70 pixels each, and the labels are Persian sentences.
     So the track scrolls sideways WITHIN ITSELF, and the page stays still. */
  .track, .timeline, .stages {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity;
    gap: 10px !important;
    padding-bottom: 8px !important;
    margin-inline: -14px !important;
    padding-inline: 14px !important;
  }
  .track > *, .timeline > *, .stages > * {
    flex: 0 0 auto !important;
    width: 116px !important;
    scroll-snap-align: start;
    text-align: center !important;
  }

  /* ── the statistics ──────────────────────────────────────────────────────
     Three number cards in a row do fit, if they are allowed to be small. */
  /* Four cards in three columns leaves one stranded on a row of its own, next to a hole.
     Two by two fills the space and reads as a block. */
  .counts {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .counts > * {
    width: auto !important;
    min-width: 0 !important;
    padding: 12px 6px !important;
    text-align: center !important;
  }
  .counts .cat, .counts .label { font-size: 11px !important; line-height: 1.4 !important; }

  /* ── the client's own name card ──────────────────────────────────────────*/
  .idcard {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  .idmeta { align-items: center !important; justify-content: center !important;
            flex-wrap: wrap !important; }

  /* ── rows that were columns ──────────────────────────────────────────────*/
  .row, .cases-head, .caserow-body, .docbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── buttons are for thumbs ──────────────────────────────────────────────*/
  .btn, .cta, button, .mini {
    min-height: 46px !important;
    font-size: 15px !important;
  }
  .cta, .btn { width: 100% !important; justify-content: center !important; }

  /* ── the checklist stops being a table ───────────────────────────────────
     A table of four columns cannot fit a phone, and letting it scroll sideways hides the
     one column that matters: the upload button. On a phone the client could see the name
     of every document they owed us and had no way to send any of them.

     So each row becomes a card. Name, note, status and button stack, and the button is
     the width of the screen. Nothing to scroll to, nothing hidden. */
  table, thead, tbody, tr, td, th {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  thead { display: none !important; }

  tbody tr {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 14px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    background: #fff !important;
  }

  td {
    padding: 3px 0 !important;
    border: none !important;
    text-align: start !important;
  }

  /* The buttons go full width, under everything else, where a thumb expects them. */
  td.actions, td:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }
  td.actions > *, td:last-child > button, td:last-child > .btn {
    flex: 1 1 auto !important;
    min-height: 46px !important;
  }

  /* ── never let a form field trigger Safari's zoom ────────────────────────*/
  input, select, textarea {
    font-size: 16px !important;
    min-height: 46px !important;
  }

  /* ── the checklist rows on the documents page ────────────────────────────*/
  #row, tr { max-width: 100% !important; }
  .doc-note, .cat { white-space: normal !important; }
}