/* FurnFlow mobile PWA layer styles.
   Activated by html[data-ffm="on"] (set by furnflow-mobile.js at <=880px).
   Inherits the SPA's design tokens (--brand, --surface, --text, --line, etc.)
   so it tracks light/dark theme automatically. */

:root { --ffm-bar-h: 60px; }

/* ── Safe-area handling ─────────────────────────────────────────────────
   The bottom nav is an in-flow flex child of .main (NOT position:fixed), so
   .content no longer reserves room for it — flexbox sizes the content pane to
   exclude the nav, and the nav itself pads for the home-indicator safe area. */
html[data-ffm="on"] .drawer,
html[data-ffm="on"] .cx360-panel { padding-bottom: env(safe-area-inset-bottom); }
.ffm-noscroll { overflow: hidden !important; }

/* ── Bottom navigation ──────────────────────────────────────────────────
   In-flow flex child of .main (appended after .content) — NOT position:fixed,
   so it never overlaps content or fights the safe-area inset. It sits at the
   bottom of the column because .content (flex:1) fills the space above it. */
.ffm-bottomnav {
  display: none; align-items: stretch;
  background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(15,23,42,0.06);
}
html[data-ffm="on"] .ffm-bottomnav { display: flex; order: 999; flex-shrink: 0; }
.ffm-tab {
  flex: 1; min-width: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: var(--ffm-bar-h); padding: 6px 2px;
  color: var(--muted); font: inherit; -webkit-tap-highlight-color: transparent;
}
.ffm-tab .ic { font-size: 20px; line-height: 1; }
.ffm-tab .lb {
  font-size: 10.5px; font-weight: 600; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ffm-tab.active { color: var(--brand); }
.ffm-tab.active .ic { transform: translateY(-1px); }
.ffm-tab:active { background: var(--bg); }
.ffm-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ── Connectivity / sync status strip ────────────────────────────────────
   In-flow flex child of .main, ordered just above the bottom nav (NOT fixed).
   It only takes layout space while shown (.show); hidden it collapses away. */
.ffm-status {
  display: none; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; padding: 7px 12px; text-align: center;
}
html[data-ffm="on"] .ffm-status.show { display: flex; order: 998; flex-shrink: 0; }
.ffm-status.offline { background: var(--warn-soft); color: #92400e; }
.ffm-status.pending { background: var(--info-soft); color: var(--brand-d); }
.ffm-status .tap { text-decoration: underline; }
.ffm-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.ffm-status .spin, .ffm-ptr .spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  display: inline-block; animation: ffm-spin 0.8s linear infinite;
}
@keyframes ffm-spin { to { transform: rotate(360deg); } }

/* ── Pull-to-refresh indicator ──────────────────────────────────────── */
.ffm-ptr {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-50px);
  z-index: 8060; width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; color: var(--brand);
  transition: transform 0.2s ease, opacity 0.2s; opacity: 0.9;
}
.ffm-ptr.ready { color: var(--good); }
.ffm-ptr.active .spin { animation: ffm-spin 0.7s linear infinite; }

/* ── Bottom sheet (device capture, more, queue) ─────────────────────── */
.ffm-sheet-back {
  position: fixed; inset: 0; z-index: 9300; background: rgba(15,23,42,0.5);
  display: flex; align-items: flex-end; justify-content: center;
  animation: ffm-fade 0.18s ease-out;
}
@keyframes ffm-fade { from { opacity: 0; } to { opacity: 1; } }
.ffm-sheet {
  width: 100%; max-width: 640px; background: var(--surface);
  border-radius: 18px 18px 0 0; max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(100%); transition: transform 0.26s cubic-bezier(.2,.8,.2,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.ffm-sheet.open { transform: translateY(0); }
@media (min-width: 880px) { .ffm-sheet-back { align-items: center; } .ffm-sheet { border-radius: 18px; max-width: 520px; } }
.ffm-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.ffm-sheet-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.ffm-sheet-x { width: 36px; height: 36px; border: 0; background: var(--bg); border-radius: 10px; font-size: 16px; color: var(--muted); cursor: pointer; }
.ffm-sheet-body { padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Shared sheet controls */
.ffm-input {
  width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text);
  margin-bottom: 12px; -webkit-appearance: none;
}
.ffm-input:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.ffm-btn {
  min-height: 50px; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--line-strong);
  font-size: 16px; font-weight: 700; cursor: pointer; background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.ffm-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.ffm-btn-ghost { background: var(--bg); }
.ffm-btn:active { transform: translateY(1px); }
.ffm-btn[disabled] { opacity: 0.55; }
.ffm-cap-row { display: flex; gap: 10px; margin-top: 12px; }
.ffm-cap-row .ffm-btn { flex: 1; }
.ffm-cap-note { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.ffm-cap-status { padding: 24px; text-align: center; color: var(--muted); font-weight: 600; }
.ffm-cap-status.bad { color: var(--bad); }

/* Camera / scan video */
.ffm-cap-video, .ffm-scan .ffm-cap-video {
  width: 100%; max-height: 50vh; border-radius: 12px; background: #000; display: block;
}

/* Signature pad */
.ffm-sig-padwrap { border: 2px dashed var(--line-strong); border-radius: 12px; padding: 4px; background: var(--bg); }
.ffm-sig-pad { width: 100%; height: 180px; touch-action: none; background: var(--surface); border-radius: 8px; display: block; }

/* Scan */
.ffm-scan-or { margin: 16px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); }
.ffm-scan-manual { display: flex; gap: 8px; align-items: stretch; }
.ffm-scan-manual .ffm-input { margin-bottom: 0; }
.ffm-scan-manual .ffm-btn { white-space: nowrap; }

/* More sheet */
.ffm-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ffm-more-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 84px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
  color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; padding: 8px; text-align: center;
}
.ffm-more-item .ic { font-size: 22px; }
.ffm-more-sep { margin: 18px 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); }
.ffm-more :is(.ffm-more-sep) ~ .ffm-more-item { width: 100%; flex-direction: row; justify-content: flex-start; min-height: 54px; gap: 12px; margin-bottom: 8px; }

/* Queue sheet */
.ffm-queue-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.ffm-queue-row.bad { border-color: var(--bad); background: var(--bad-soft); }
.ffm-queue-row.warn { border-color: var(--warn); background: var(--warn-soft); }
.ffm-queue-main { flex: 1; min-width: 0; }
.ffm-queue-main .t { font-weight: 700; font-size: 14px; }
.ffm-queue-main .s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ffm-queue-acts { display: flex; gap: 6px; }
.ffm-queue-acts button { min-height: 38px; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 13px; }
.ffm-empty { text-align: center; color: var(--muted); padding: 24px 8px; font-size: 15px; }

/* ── Driver POD flow ────────────────────────────────────────────────── */
.ffm-sheet-full { max-height: 100vh; max-height: 100dvh; height: 100dvh; border-radius: 0; }
.ffm-btn-danger { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.ffm-driver-loading { padding: 40px 16px; text-align: center; color: var(--muted); }
.ffm-driver-loading .spin, .ffm-empty .spin { width: 16px; height: 16px; border: 2px solid var(--brand); border-top-color: transparent; border-radius: 50%; display: inline-block; vertical-align: middle; animation: ffm-spin 0.8s linear infinite; margin-right: 6px; }
.ffm-driver-offline { background: var(--warn-soft); color: #92400e; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.ffm-driver-count { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); margin-bottom: 10px; }
.ffm-driver-card { display: block; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px; margin-bottom: 10px; cursor: pointer; }
.ffm-driver-card:active { background: var(--bg); }
.ffm-driver-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ffm-driver-card-top .ref { font-weight: 800; font-size: 15px; color: var(--text); }
.ffm-driver-card-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.ffm-driver-card-note { color: var(--muted); font-size: 12.5px; margin-top: 6px; font-style: italic; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.warn { background: var(--warn-soft); color: #92400e; }
.badge.info { background: var(--info-soft); color: var(--brand-d); }
.ffm-driver-back { border: 0; background: none; color: var(--brand); font-weight: 700; font-size: 15px; padding: 4px 0 12px; cursor: pointer; }
.ffm-driver-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ffm-driver-detail-head h2 { margin: 0; font-size: 18px; }
.ffm-driver-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ffm-driver-row .k { width: 96px; flex-shrink: 0; color: var(--muted); font-weight: 600; }
.ffm-driver-row .v { flex: 1; color: var(--text); }
.ffm-driver-quick { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.ffm-driver-quick .ffm-btn { flex: 1; min-width: 90px; text-decoration: none; }
.ffm-driver-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ffm-pod-step { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.ffm-pod-step.done { border-color: var(--good); background: var(--good-soft); }
.ffm-pod-step-h { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 10px; }
.ffm-pod-step-h .tick { color: var(--good); }
.ffm-pod-thumb { width: 100%; max-height: 180px; object-fit: contain; border-radius: 10px; margin-bottom: 10px; background: var(--bg); }
.ffm-pod-thumb.sig { background: #fff; border: 1px solid var(--line); }
.ffm-pod-submit { width: 100%; }
.ffm-pod-hint { text-align: center; }

/* ── Warehouse flow ─────────────────────────────────────────────────── */
.ffm-wh-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.ffm-wh-tab { flex: 1; min-height: 44px; border: 1px solid var(--line); background: var(--bg); border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; }
.ffm-wh-tab.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-d); }
.ffm-wh-scanbtn { width: 100%; margin-bottom: 14px; }
.ffm-wh-item { border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.ffm-wh-item-name { font-weight: 800; font-size: 16px; }
.ffm-wh-item-sku { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ffm-wh-onhand { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; padding: 12px; background: var(--bg); border-radius: 10px; }
.ffm-wh-onhand span { color: var(--muted); font-weight: 600; }
.ffm-wh-onhand strong { font-size: 22px; }

/* ── Installer / Support shared controls ────────────────────────────── */
.ffm-check { display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-size: 15px; color: var(--text); cursor: pointer; }
.ffm-check input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--brand); }
.ffm-input.ffm-inline { margin-bottom: 0; min-height: 40px; padding: 6px 10px; }
.ffm-field-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 4px 0 4px; }
.ffm-finance-note { background: var(--warn-soft); color: #92400e; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; margin-bottom: 12px; }

/* ── Executive KPIs ─────────────────────────────────────────────────── */
.ffm-exec-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.ffm-exec-kpi { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--surface); }
.ffm-exec-kpi .v { font-size: 22px; font-weight: 800; color: var(--text); }
.ffm-exec-kpi .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ffm-exec-bar { margin-bottom: 12px; }
.ffm-exec-bar-top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.ffm-exec-bar-track { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.ffm-exec-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-d)); border-radius: 99px; }
@media (min-width: 700px) { .ffm-exec-kpis { grid-template-columns: repeat(3, 1fr); } }

/* Larger tap targets everywhere in mobile mode */
html[data-ffm="on"] .nav-item { min-height: 46px; }
html[data-ffm="on"] button, html[data-ffm="on"] .btn { -webkit-tap-highlight-color: transparent; }

/* ── Dispatch board ─────────────────────────────────────────────────── */
.ffm-dispatch-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; -webkit-overflow-scrolling: touch; }
.ffm-dispatch-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 700; }
.ffm-dispatch-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.ffm-dispatch-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--bg); color: var(--text); font-size: 11px; line-height: 18px; text-align: center; }
.ffm-dispatch-tab.active .ffm-dispatch-badge { background: rgba(255,255,255,0.25); color: #fff; }
.ffm-field { display: block; margin-bottom: 12px; }
.ffm-field > span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.ffm-dispatch-terminal { padding: 12px; border-radius: 12px; background: var(--bg); color: var(--muted); font-size: 14px; text-align: center; margin-top: 8px; }
.ffm-dispatch-timeline-btn { margin-top: 10px; }
.ffm-dispatch-timeline { display: flex; flex-direction: column; gap: 10px; }
.ffm-dispatch-event { border-left: 3px solid var(--brand); padding: 2px 0 2px 10px; }
.ffm-dispatch-event .t { font-size: 14px; font-weight: 700; color: var(--text); text-transform: capitalize; }
.ffm-dispatch-event .s { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ── Internal chat / support on mobile ──────────────────────────────────
   The chat & support shells fill the viewport minus the top bar and the
   in-flow bottom nav (--ffm-bar-h + safe area), so the composer sits just
   above the nav with no overlap. */
html[data-ffm="on"] .chat-shell,
html[data-ffm="on"] .support-shell {
  height: calc(100dvh - 60px - var(--ffm-bar-h) - env(safe-area-inset-bottom));
  border: 0; border-radius: 0;
}
/* The shell's height calc already accounts for the top bar + nav, so it equals
   the content pane height — zero the content padding so it fits with no
   overflow and goes edge-to-edge on mobile. */
html[data-ffm="on"] .content:has(.chat-shell),
html[data-ffm="on"] .content:has(.support-shell) { padding: 0 !important; }
/* 16px text avoids iOS focus-zoom; larger comfortable tap targets. */
html[data-ffm="on"] .chat-composer textarea,
html[data-ffm="on"] .sup-composer textarea { font-size: 16px; }
html[data-ffm="on"] .chat-comp-btn { width: 40px; height: 40px; }
html[data-ffm="on"] .chat-tab { padding: 8px 12px; font-size: 12px; }
html[data-ffm="on"] .chat-convo { padding: 12px; }
html[data-ffm="on"] .chat-back { width: 36px; height: 36px; }

/* ── Finance AR-aging summary line ──────────────────────────────────── */
.ffm-finance-aging-sum { font-size: 13px; color: var(--text); padding: 8px 2px 4px; }
.ffm-finance-aging-sum strong { color: var(--text); }

/* ── No horizontal scrolling for nav/tab strips on mobile ───────────────
   Every tab/nav strip wraps so all items stay visible (no left/right scroll). */
html[data-ffm="on"] .tabs,
html[data-ffm="on"] .bm-topbar .bm-tabs,
html[data-ffm="on"] .chat-tabs,
html[data-ffm="on"] .wf-tabs,
html[data-ffm="on"] [role="tablist"] {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  scrollbar-width: none;
}
html[data-ffm="on"] .tabs::-webkit-scrollbar,
html[data-ffm="on"] .bm-topbar .bm-tabs::-webkit-scrollbar { display: none; }

/* Tenant-admin → Billing → Compare plans: always a single column on mobile so
   every plan is fully visible (overrides the inline auto-fit that showed 2+
   partial columns on wider phones). */
html[data-ffm="on"] #planGrid { grid-template-columns: 1fr !important; }

/* ── Compact / expandable plan cards on mobile ─────────────────────────
   Desktop shows the full module list (no toggle). On mobile the module list +
   highlights collapse behind a tap-to-expand toggle, so each plan card is short
   (name, price, caps, downgrade warning, CTA) and the list isn't a wall of rows. */
.plan-toggle { display: none; }
.plan-collapsible { display: block; }
html[data-ffm="on"] .plan-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 11px 12px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  font: inherit; font-size: 13px; font-weight: 700; color: var(--brand); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html[data-ffm="on"] .plan-toggle-caret { transition: transform 0.15s ease; }
html[data-ffm="on"] .plan-tier.expanded .plan-toggle-caret { transform: rotate(180deg); }
html[data-ffm="on"] .plan-tier:not(.expanded) .plan-collapsible { display: none; }

/* ── Workspace tab bar: not sticky on mobile ───────────────────────────
   The wrapped tab strip used position:sticky, so on a phone it pinned to the
   top and overlapped content on scroll. On mobile it scrolls away with the
   page (the main app header stays as the persistent nav). */
html[data-ffm="on"] .bm-topbar { position: static; }

/* ── No sticky scroll-chrome on mobile ──────────────────────────────────
   Same rationale as .bm-topbar above: on a phone, position:sticky chrome pins
   while the content scrolls, overlapping it and fighting the safe-area inset.
   De-sticky the SPA's remaining sticky elements so they scroll away naturally.
   Overlays, drawers, backdrops and the toast stack are NOT scroll chrome and
   are intentionally left alone; desktop keeps its sticky affordances.
     • thead th / table.tbl th — table header rows (every list/grid view, incl.
                             .ffa-table, .ee-job-packet-table). table.tbl th is
                             kept explicitly so headers rendered as a bare <tr>
                             with no <thead> are still covered.
     • .modal-foot         — already pinned by the modal's flex column, so this
                             is vestigial; static keeps it visible with no risk
     • .perm-cat-head      — category header inside the role-permission editor
     • .preview-banner     — global-admin "previewing a tenant role" banner
     • .user-menu .um-head — header inside the account dropdown
     • .sr-cart            — sales-register / showroom cart aside
     • .ee-installer-nav-wrap        — installer workspace top nav strip
     • .ee-install-job-detail-aside  — installer job-detail side panel (its grid
                             collapses to one column ≤900px, so a sticky aside
                             would pin over the stacked content)
   No !important on the th/class rules on purpose: they win on specificity over
   the base rules, and staying non-important means inline
   `style="position:sticky;left:0"` frozen first-columns (workforce roster,
   admin matrices) survive — inline beats a non-important external rule, so those
   horizontal-freeze affordances keep working on mobile. */
html[data-ffm="on"] thead th,
html[data-ffm="on"] table.tbl th,
html[data-ffm="on"] .modal-foot,
html[data-ffm="on"] .perm-cat-head,
html[data-ffm="on"] .preview-banner,
html[data-ffm="on"] .user-menu .um-head,
html[data-ffm="on"] .sr-cart,
html[data-ffm="on"] .ee-installer-nav-wrap,
html[data-ffm="on"] .ee-install-job-detail-aside {
  position: static;
}
/* Some grids (e.g. inventory) pin the header via an inline sticky <thead>
   against an internal scroller. De-sticky every <thead> with !important to beat
   that inline style — but target <thead>, NOT th/td, so the inline
   sticky-left:0 frozen columns above are left intact (frozen columns never put
   sticky on <thead>). */
html[data-ffm="on"] thead { position: static !important; }

/* ── Unauthenticated public marketing bar: not fixed on mobile ──────────
   .ffmod-public-bar is injected at the top of <body> for signed-out visitors
   as position:fixed, with a matching `padding-top:52px` set inline on <body>
   to reserve space. On a phone a fixed top bar pins over content on scroll, so
   un-fix it (scrolls naturally in flow) and drop the reserved padding — scoped
   with :has so it only zeroes the padding when the bar is actually present
   (authenticated views never get it). */
html[data-ffm="on"] .ffmod-public-bar { position: static; }
html[data-ffm="on"] body:has(> .ffmod-public-bar) { padding-top: 0 !important; }

/* ── Prevent iOS focus-zoom on form fields ─────────────────────────────
   iOS Safari auto-zooms when focusing an input whose font-size is < 16px.
   The app's fields are 13px, so every form jumped/zoomed on focus. Force 16px
   on mobile (checkbox/radio/range excluded — font-size is irrelevant there). */
html[data-ffm="on"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-ffm="on"] select,
html[data-ffm="on"] textarea {
  font-size: 16px !important;
}

/* ── iOS notch / Dynamic Island safe-area (TOP) ─────────────────────────
   The PWA uses apple-mobile-web-app-status-bar-style=black-translucent +
   viewport-fit=cover, so web content extends UNDER the camera/status bar.
   Nothing reserved env(safe-area-inset-top), so the app header, preview
   banner, and drawer/sidebar headers slid behind the notch on iPhone.
   Reserve the inset on every top-anchored surface. Scoped to mobile mode
   (html[data-ffm="on"]); Android/desktop resolve the inset to 0px so this is
   a no-op there. box-sizing:border-box is global, so padding-top shrinks the
   inner area without growing the element — the bottom nav stays on-screen. */
html[data-ffm="on"] .main { padding-top: env(safe-area-inset-top, 0px); }
/* Slide-in sidebar (and any left drawer) — its brand/header row. */
html[data-ffm="on"] .side { padding-top: env(safe-area-inset-top, 0px); }
/* Full-screen right drawer (Order 360 etc. → width:100vw on phones): pad its
   header so the title/close button clear the camera. */
html[data-ffm="on"] .drawer { padding-top: env(safe-area-inset-top, 0px); }
/* Bottom-sheet device capture (camera/scan/signature) can open near full
   height — keep its header below the notch too. */
html[data-ffm="on"] .ffm-sheet { padding-top: env(safe-area-inset-top, 0px); }
/* Pull-to-refresh spinner is fixed at top:0 — drop it below the inset so it
   doesn't render under the camera. */
html[data-ffm="on"] .ffm-ptr { top: env(safe-area-inset-top, 0px); }

/* ── iOS "Add to Home Screen" hint banner ───────────────────────────────
   One-time dismissible banner shown to not-yet-installed iPhone Safari users
   (created by furnflow-mobile.js maybeShowIosInstallHint). Fixed just above the
   bottom nav (--ffm-bar-h) and clear of the home-indicator safe area. Only ever
   injected in mobile mode on iOS Safari, so no platform guard needed here. */
.ffm-ios-a2hs {
  position: fixed; left: 10px; right: 10px;
  bottom: calc(var(--ffm-bar-h, 60px) + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 8200;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 14px;
  background: var(--surface, #fff); color: var(--text, #0f172a);
  border: 1px solid var(--line, #e2e8f0); border-radius: 14px;
  box-shadow: 0 8px 28px rgba(15,23,42,0.18);
  animation: ffm-a2hs-in 0.28s cubic-bezier(.2,.8,.2,1);
}
@keyframes ffm-a2hs-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.ffm-a2hs-ic { font-size: 22px; line-height: 1; flex-shrink: 0; }
.ffm-a2hs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ffm-a2hs-text strong { font-size: 13.5px; font-weight: 700; }
.ffm-a2hs-text span { font-size: 12px; color: var(--muted, #64748b); line-height: 1.35; }
.ffm-a2hs-show {
  flex-shrink: 0; border: 0; cursor: pointer;
  background: var(--brand, #4f46e5); color: #fff;
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 9px 13px; border-radius: 9px; -webkit-tap-highlight-color: transparent;
}
.ffm-a2hs-show:active { filter: brightness(0.94); }
.ffm-a2hs-x {
  flex-shrink: 0; border: 0; background: none; cursor: pointer;
  color: var(--muted, #64748b); font-size: 22px; line-height: 1;
  width: 30px; height: 30px; border-radius: 8px; -webkit-tap-highlight-color: transparent;
}
.ffm-a2hs-x:active { background: var(--bg, #f1f5f9); }