/* Phones — nav/cx-mobile.css (with cx-mobile.js)
 * One pane at a time, edge to edge, thumb-sized controls, and a bottom bar in
 * the CivilXL colours. Loaded after dashboard.css. */
@media (max-width: 920px) {
  :root { --headerH: 52px; }
  html, body { overscroll-behavior-y: none; }

  /* Header: menu, mark, project name. The desktop layout tools are hidden. */
  .hv-app-header { padding: 0 10px !important; gap: 8px; }
  .hv-app-header .logo-text, .hv-app-header .hv-logo-img + .logo-text { display: none; }
  .hv-app-header .pill { display: none; }
  .hv-app-header #activeProjectBroadcast { display: block !important; max-width: none !important; font-size: 15px !important; font-weight: 700 !important; border-left: 0 !important; padding-left: 0 !important; min-width: 0; flex: 1 1 auto; }
  .hv-app-header > div:first-child { flex: 1 1 auto; min-width: 0; }
  .hv-app-header > div:first-child > div { min-width: 0; flex: 1 1 auto; }
  .hv-app-header #menuToggleBtn { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 10px; }
  .hv-app-header > div:last-child { gap: 6px !important; }
  .hv-app-header > div:last-child .btn, .hv-app-header > div:last-child button { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 10px; font-size: 13px; }

  /* Panes: full width, no card chrome, content scrolls under the bar. */
  .workspace { padding: 0 !important; gap: 0 !important; }
  .colA, .colB, .colC { border-radius: 0 !important; box-shadow: none !important; border: 0 !important; }
  .panel .ph { position: sticky; top: 0; z-index: 5; min-height: 48px; padding: 0 12px !important; font-size: 15px; }
  .panel .pb { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)) !important; }
  #paneC .pb { padding-left: 0 !important; padding-right: 0 !important; }
  #paneC .pb > * { max-width: 100%; }

  /* Bottom bar */
  .mobile-pane-switcher { height: calc(60px + env(safe-area-inset-bottom)) !important; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 18px rgba(16, 24, 20, .06); }
  .mobile-pane-switcher .switcher-btn { color: var(--muted, #64748b) !important; }
  .mobile-pane-switcher .switcher-btn span { font-size: 11px !important; letter-spacing: .02em !important; text-transform: none !important; font-weight: 600 !important; }
  .mobile-pane-switcher .switcher-btn.active { color: var(--btn, #4a6b3a) !important; }
  .mobile-pane-switcher .switcher-btn.active::before { background: var(--btn, #4a6b3a) !important; box-shadow: none !important; left: 34% !important; right: 34% !important; height: 3px !important; border-radius: 0 0 3px 3px; }
  .mobile-pane-switcher .switcher-btn .icon-box { display: grid; place-items: center; width: 44px; height: 28px; border-radius: 14px; transition: background .15s; }
  .mobile-pane-switcher .switcher-btn.active .icon-box { background: color-mix(in srgb, var(--btn, #4a6b3a) 12%, transparent); }
  body[data-theme="dark"] .mobile-pane-switcher { background: var(--panel) !important; }

  /* No zoom-on-focus on iPhone: inputs at 16px */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }

  /* Status headers (submittals / RFIs): number on its own line, title full width */
  .cxf-head { padding: 12px !important; }
  .cxf-head-top { flex-wrap: wrap; }
  .cxf-head-top .cxe-title, .cxf-head-top .cxr-title { flex: 1 1 100% !important; order: 3; }
  .cxf-next { padding: 10px; }
  .cxf-next .btn { flex: 1 1 auto; }
  .cxs-revno, .cxf-mini { white-space: nowrap; }

  /* Lists: comfortable tap rows */
  #paneB .cx-row, #paneB .ds-row, #paneB .feed-card, #paneB tr[id^="b_row_"] td, #paneB .pa-row td { min-height: 52px; }

  /* Wide tables scroll sideways inside their card, never the whole page */
  #paneB table, #paneC table { max-width: none; }
  #paneC .items-table, #paneC .data-grid { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Pay app totals: a card at the end of the page on a phone, not a fixed footer */
  #paEditorScope .fin-card { position: static !important; }

  /* Dialogs become sheets */
  .modalWrap .modal, .cx-dialog { width: 100% !important; max-width: none !important; border-radius: 16px 16px 0 0 !important; margin: auto 0 0 !important; }
}

/* Very narrow phones */
@media (max-width: 400px) {
  .cxf-court .cxf-k { display: none; }
  .cxf-court-bar { height: 40px; }
  .cxfc-kpi .v { font-size: 16px !important; }
}

/* Installed as an app (Android shell / home-screen): respect the notch */
@media (display-mode: standalone) {
  .hv-app-header { padding-top: env(safe-area-inset-top); height: calc(var(--headerH) + env(safe-area-inset-top)) !important; }
}