/* This CRM on a phone.
 *
 * One sheet, because it is one feature rather than five: most of the time the
 * people using this application are agents and assistants on a handset, and
 * every rule here exists because something was wrong for them specifically.
 *
 * Everything is inside the 860px query. Nothing here changes a desktop.
 */

/* The bar and the sheet are built on every render and simply not shown above
 * the breakpoint, which is cheaper than asking the page to know how wide it is.
 */
.pnav, .pnav-sheet, .pnav-back { display: none; }

@media (max-width: 860px) {

  /* ---- The rail goes away ---- */
  /*
   * It used to become a horizontally scrolling strip pinned to the top. That
   * spent vertical space, which a phone has least of, to hide fifteen of its
   * nineteen entries on an axis nobody thinks to scroll.
   */
  .rail { display: none; }

  /* ---- The bottom tab bar ---- */
  /*
   * Fixed, and last in the DOM, so it sits over the page without the page
   * having to leave a hole for it. `env(safe-area-inset-bottom)` is the home
   * indicator on a modern iPhone: without it the labels sit under the bar the
   * system draws and the outer tabs are hard to hit.
   */
  .pnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--navy); border-top: 1px solid #1e293b;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .pnav-t {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; gap: 3px; padding: 5px 2px 4px;
    background: none; border: none; color: #94a3b8; font: inherit;
    font-size: 10.5px; font-weight: 600; cursor: pointer; border-radius: 9px;
    /* A tap on a nav item should not select its label or flash a grey box. */
    -webkit-tap-highlight-color: transparent; user-select: none;
  }
  .pnav-t:hover { text-decoration: none; color: #cbd5e1; }
  .pnav-t.on { color: #fff; }
  .pnav-ico { position: relative; display: flex; }
  .pnav-t svg { width: 21px; height: 21px; }
  .pnav-l { overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }

  /* A dot rather than a number. There is no room for "122" under a 21px icon,
   * and at this size the question a glance is asking is "is there anything",
   * not "how many". The count itself is still on the screen the tab opens. */
  .pnav-dot {
    position: absolute; top: -2px; right: -4px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--blue);
    box-shadow: 0 0 0 2px var(--navy);
  }
  .pnav-dot.warn { background: var(--amber); }
  .pnav-dot.danger { background: var(--red); }

  /* ---- The More sheet ---- */
  .pnav-back {
    display: block; position: fixed; inset: 0; z-index: 95;
    background: rgba(15, 23, 42, .45);
  }
  .pnav-back[hidden] { display: none; }
  .pnav-sheet {
    display: flex; flex-direction: column; position: fixed; z-index: 96;
    left: 0; right: 0; bottom: 0; max-height: 82vh;
    background: var(--card); border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .35);
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .pnav-sheet[hidden] { display: none; }
  .pnav-grab {
    width: 38px; height: 4px; border-radius: 999px; background: var(--border);
    margin: 2px auto 10px; flex: none;
  }
  .pnav-who {
    display: flex; align-items: center; gap: 10px; padding: 0 4px 12px;
    border-bottom: 1px solid var(--border); margin-bottom: 8px; flex: none;
  }
  .pnav-who .who { flex: 1; min-width: 0; }
  .pnav-who .who b { display: block; font-size: 14px; }
  .pnav-who .who span { font-size: 12px; color: var(--muted); }
  /* The menu is the only part that scrolls, so Sign out and the identity stay
   * put however many entries are behind More. Same reasoning as the rail. */
  .pnav-list { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
  .pnav-i {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 10px; border: none; background: none; border-radius: 10px;
    color: var(--text); font: inherit; font-size: 14.5px; font-weight: 500;
    text-align: left; cursor: pointer;
  }
  .pnav-i:hover { text-decoration: none; background: var(--bg); }
  .pnav-i.on { background: #eff6ff; color: var(--blue); font-weight: 700; }
  .pnav-i svg { width: 19px; height: 19px; flex: none; color: var(--muted); }
  .pnav-i.on svg { color: var(--blue); }
  .pnav-i span { flex: 1; min-width: 0; }
  .pnav-i .count {
    background: var(--border); color: var(--muted); border-radius: 999px;
    font-size: 11.5px; font-weight: 700; padding: 2px 8px;
  }
  .pnav-i .count.warn { background: var(--amber); color: #fff; }
  .pnav-i .count.danger { background: var(--red); color: #fff; }
  body.pnav-open { overflow: hidden; }

  /* ---- Room for the bar ---- */
  /*
   * The bar is fixed, so anything that also sits at the bottom of the screen
   * has to be lifted above it or it is unreachable. The To Do dock is the one
   * that bit: it is bottom-right over everything, and it landed squarely on
   * the Deals tab.
   */
  .content { padding-bottom: 76px; }
  #toast-root { bottom: 80px; }
  .fb-launch { bottom: 84px; }
  .fb-panel { bottom: 138px; }
  .pick-bar { bottom: 84px; }

  /* ---- The topbar ---- */
  /*
   * It carried a title, a help mark, two search boxes and two buttons, and on
   * a phone those wrapped into a block several rows deep before any of the
   * page showed. The second box, "Find a setting or tool", searches the CRM's
   * own settings and screens - a thing you do at a desk while configuring
   * something, not at a kerb - so it is the one that goes.
   */
  .topbar { height: auto; flex-wrap: wrap; padding: 9px 12px; gap: 8px; }
  .topbar h2 { font-size: 16px; flex: 1; min-width: 0; }
  .topbar .search { max-width: none; order: 3; width: 100%; flex: 1 1 100%; }
  .topbar .feature-search { display: none; }
  .topbar .spacer { display: none; }
  /* The two actions stay, as icons. They are how a lead gets into the CRM from
   * a driveway, so losing them would cost more than the width they take. */
  .topbar > .btn { padding: 8px 10px; }
  .topbar > .btn span.lbl { display: none; }

  /* ---- iOS zooms the page on any input under 16px ---- */
  /*
   * body is 14px and `input, select, textarea { font: inherit }`, so every
   * field in this application was under the threshold and every tap into one
   * zoomed the layout and left it zoomed. It reads as the app being broken.
   *
   * 16px on the controls is the whole fix. The alternative everybody reaches
   * for first - maximum-scale=1 on the viewport - also stops somebody
   * pinch-zooming a photograph or a contract, so it is not on the table.
   */
  input, select, textarea,
  .field input, .field select, .field textarea,
  .composer textarea, .composer input, .composer input[type=datetime-local],
  .thread-compose textarea, select.mini, .ck-row input, .ck-row select,
  .topbar .search input {
    font-size: 16px;
  }

  /* ---- The lead page, in the order a phone needs it ---- */
  /*
   * DEFAULT_LAYOUT puts composer and timeline in the right column and the nine
   * reference cards in the left. At one column the left renders first, so an
   * agent who tapped a lead to answer a text scrolled past Contact info,
   * Documents, Signatures, Deals, Action plans, Open tasks, Appointments,
   * Photos and Consent to reach the conversation and the reply box.
   *
   * The layout data is not touched - it is dragged, saved, and shared with the
   * office through layout rules - only the order it is painted in at this
   * width. A card moved into the other column by somebody's own rule follows
   * its column, which is the honest reading of what they asked for.
   */
  .person-layout > .pcol[data-col="right"] { order: -1; }

  /* With the columns reordered, the ribbon is the only way back up to the
   * reference cards without a long scroll, so it stays on screen. */
  .jump-ribbon {
    position: sticky; top: 0; z-index: 30; background: var(--bg);
    margin: 0 -12px 12px; padding: 8px 12px; border-bottom: 1px solid var(--border);
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .jump-ribbon::-webkit-scrollbar { display: none; }
  .jump-b { flex: none; padding: 5px 12px; font-size: 12.5px; }

  /* The head has ten buttons on it, wrapped into equal halves rather than a
   * ragged run.
   *
   * The column picker used to be hidden here, on the reasoning that one
   * column is the only thing this width can draw. That was true of the
   * column COUNT and false of what the control now does: picking 1 makes
   * every card foldable, which is worth more on a phone than anywhere else -
   * twelve cards is a very long scroll. So it stays, at a size a thumb can
   * hit. At this width 2 and 3 both draw one column, and only 1 folds. */
  .person-head .col-pick-b { padding: 8px 14px; }

  /* The fold control is the most-tapped thing on the lead page in this mode,
   * and an icon-btn is sized for a mouse. */
  .pcard-fold { padding: 7px; }

  /* ---- Nested scrollers ---- */
  /*
   * A list with its own max-height inside a page that also scrolls means a
   * thumb on the list cannot move the page. On a desktop that is a design; on
   * a phone it is a trap, and the viewport is already the frame these were
   * trying to provide.
   */
  .people-scroll, .queue-list { max-height: none; }

  /* ---- Tap targets ---- */
  /* Row actions are revealed by hover on a desktop. There is no hover here,
   * so they are always out - and at a size a thumb can hit. */
  .row-actions { opacity: 1; gap: 6px; }
  .row-actions .icon-btn { padding: 7px; }
  .row-actions svg { width: 17px; height: 17px; }
  .multi-row .icon-btn.tiny, .q-line .icon-btn,
  .folder-rail .fitem .sl-edit, .filter-rail .sl-edit { opacity: 1; }
}