/* mobile.css — the phone layer. Loaded last; everything here is scoped to ≤ 760 px (plus a few touch-only rules).
   Goal: a rep at an exhibition, in a taxi or at a client's yard can do the whole job on a phone — read and answer
   the Inbox, open and move deals, record a provider price, ask Nola, log a call — with thumb-sized targets. */

:root { --bottom-nav-h: 60px; --safe-b: env(safe-area-inset-bottom, 0px); }

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; }

  /* ---------- shell: topbar, drawer, bottom tabs ---------- */
  .topbar { padding: 0 10px; gap: 8px; height: var(--topbar-h); }
  .topbar > .icon-btn.hide-lg { flex: none; display: inline-grid; }
  .topbar .search { flex: 1; min-width: 0; max-width: none; }
  .topbar .search input { padding-inline: 34px 10px; font-size: 16px; }   /* 16px: iOS does not zoom the page on focus */
  .topbar .search kbd { display: none; }
  .topbar-actions { gap: 2px; flex: none; }
  .topbar-actions .presence-bar, .topbar-actions .ai-pill, .topbar-actions .live-dot, .topbar-actions .lang-toggle, .topbar-actions [data-theme-btn] { display: none; }
  .search-results { position: fixed; inset-inline: 10px; top: calc(var(--topbar-h) + 4px); width: auto; max-height: 60vh; }
  .notif-panel { inset-inline: 8px; width: auto; top: calc(var(--topbar-h) + 6px); max-height: 75vh; }

  .sidebar { z-index: calc(var(--z-drawer) + 2); width: min(84vw, 320px); height: 100dvh; top: 0; }
  .nav-scrim { display: none; position: fixed; inset: 0; background: rgba(9,17,32,.45); z-index: calc(var(--z-drawer) + 1); }
  .shell.nav-open .nav-scrim { display: block; animation: fade-in var(--t-base) both; }
  .shell.nav-open { overflow: hidden; }
  .sidebar .collapse-btn { display: none; }

  .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bottom-nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; background: var(--surface); border-top: 1px solid var(--border);
    z-index: var(--z-sidebar); box-shadow: 0 -8px 24px -18px rgba(9,17,32,.35); }
  .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--text-3); position: relative; padding: 6px 0 4px; border-radius: 0; }
  .bottom-nav svg { width: 22px; height: 22px; }
  .bottom-nav .active { color: var(--brand); }
  .bottom-nav .active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent-vivid); }
  .bottom-nav .badge-count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent-vivid); color: var(--on-lime); font-size: 10px; display: grid; place-items: center; }

  #outlet { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b)); }
  .page { padding: 12px 12px 24px; gap: 12px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-head h1 { font-size: 22px; }
  .page-head .sub { font-size: var(--fs-sm); }
  .page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .page-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  .eyebrow { font-size: 10px; }

  /* ---------- touch targets & controls ---------- */
  .btn, .icon-btn, .select, .input, .chip, .tabs button { min-height: 40px; }
  .btn-sm, .icon-btn.sm, .chip { min-height: 34px; }
  .input, .select, .textarea { font-size: 16px; }
  .tbl td.actions .btn, .pv-pend .btn-sm { min-height: 34px; }

  /* ---------- nothing may be wider than the phone ---------- */
  .page, .page > *, .grid > *, .deal-grid > *, .detail-grid > *, .home-grid > *, .cols > *, .card, .card-body, .card-head, .col, .fact, .stat { min-width: 0; max-width: 100%; }
  .card-head { flex-wrap: wrap; gap: 6px; } .card-head h3 { font-size: var(--fs-md); }
  .fact b, .stat .value { overflow-wrap: anywhere; }
  .priority-card, .home-list > * { min-width: 0; } .priority-card .row { flex-wrap: wrap; }
  .settings-page .row, .fields-list .row { flex-wrap: wrap; }
  pre, code.block { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* ---------- grids collapse ---------- */
  .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid-2 { grid-template-columns: 1fr; }
  .stat { padding: 12px 12px 12px 14px; } .stat .value { font-size: 22px; } .stat .label { font-size: 10px; } .stat .delta { font-size: 11px; }
  .facts-strip { grid-template-columns: 1fr 1fr; }
  .cols, .kv { grid-template-columns: 1fr !important; }
  .detail-grid, .deal-grid, .home-grid, .settings { grid-template-columns: 1fr; }
  .client-head, .pv-head { flex-direction: column; align-items: flex-start; }
  .client-head .page-actions, .pv-head .page-actions { width: 100%; }
  .client-head h1, .pv-head h1 { font-size: 20px; }
  .tabs { gap: 0; margin-inline: -12px; padding-inline: 12px; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
  .tabs button { padding: 0 10px; }
  .subnav { width: 100%; display: flex; } .subnav a { flex: 1; text-align: center; padding: 8px 6px; font-size: var(--fs-xs); }
  .toolbar { gap: 8px; } .toolbar .input-wrap.search { width: 100%; } .toolbar .input-wrap.search .input { width: 100%; }
  .toolbar [data-filters] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
  .toolbar [data-filters] .chip { justify-content: center; }
  .sel-filter { max-width: 100%; }
  .bulkbar { position: sticky; bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 8px); z-index: 6; }
  .pager { flex-wrap: wrap; gap: 8px; } .pager [data-size] { display: none; }

  /* ---------- tables become cards ---------- */
  .tbl.cards, .table-wrap .tbl { display: block; }
  .table-wrap .tbl thead { display: none; }
  .table-wrap .tbl tbody { display: flex; flex-direction: column; gap: 10px; }
  .table-wrap .tbl tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
  .table-wrap .tbl tr.clickable:active { background: var(--surface-hover); }
  .table-wrap .tbl td { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; height: auto; border: 0; min-width: 0; text-align: start; }
  .table-wrap .tbl td::before { content: attr(data-label); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-4); }
  .table-wrap .tbl td:first-child:not([data-label=""]) { grid-column: 1 / -1; }
  .table-wrap .tbl td[data-label=""]::before { display: none; }
  .table-wrap .tbl td.actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 8px; }
  .table-wrap .tbl td.actions::before { display: none; }
  .table-wrap .tbl td.num, .table-wrap .tbl th.num { text-align: start; } .table-wrap .tbl td.num .pv-price { align-items: flex-start; }
  .table-wrap .tbl td .truncate { max-width: 100% !important; white-space: normal; }
  .table-wrap .tbl td input[type=checkbox][data-sel] { width: 22px; height: 22px; }
  .table-wrap .tbl tr td:first-child:has([data-sel]) { grid-column: auto; }
  .table-wrap .tbl tr > td:only-child { grid-column: 1 / -1; }   /* the empty state */
  .table-wrap .tbl tr > td:only-child::before { display: none; }

  /* ---------- modals & drawers: bottom sheets ---------- */
  .overlay { padding: 0; place-items: end center; backdrop-filter: none; }
  .modal, .modal.wide, .modal.narrow { width: 100%; max-height: calc(100dvh - 24px); border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; }
  .modal header { padding: 14px 16px; } .modal header h2 { font-size: var(--fs-md); }
  .modal .body { padding: 14px 16px; } .modal footer { padding: 10px 12px calc(10px + var(--safe-b)); flex-wrap: wrap; }
  .modal footer .btn { flex: 1 1 auto; justify-content: center; min-height: 42px; }
  .drawer { width: 100%; } .drawer .body { padding: 14px 16px; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .form-grid .span-2, .form-grid-3 .span-2, .form-grid-3 .span-3 { grid-column: auto; }
  .form-footer { position: fixed; left: 0; right: 0; bottom: calc(var(--bottom-nav-h) + var(--safe-b)); margin: 0; border-radius: 0; border-inline: 0; padding: 8px 12px !important; z-index: 8; }
  .form-footer .btn { min-height: 40px; }
  .page:has(.form-footer) { padding-bottom: 92px; }

  /* ---------- Nola ---------- */
  .agent { bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 14px); inset-inline-end: 14px; }
  /* deal / company headers: the code · client · priority row wraps, and long error texts (AI provider replies) break */
  .deal-head .row, .client-head .row, .page-head .row { flex-wrap: wrap; }
  .deal-head .row.gap-2 > * { min-width: 0; }
  .callout, .callout .small, .callout .ltr { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
  /* a form's sticky footer sits in the same corner: lift the Nola button above it (and above an inbox composer) */
  body:has(#outlet .form-footer) .agent, body:has(.inbox.has-active) .agent, body:has(.chat.has-active) .agent { bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 78px); }
  .agent-fab { height: 48px; width: 48px; }
  .agent-fab svg.nola-mark { width: 26px; height: 26px; }
  .agent-panel, .agent-panel.size-large, .agent-panel.size-full { inset: 0 !important; width: 100vw !important; height: 100dvh !important; max-height: none; max-width: none; border-radius: 0; border: 0; z-index: calc(var(--z-drawer) + 3); }
  .agent-panel [data-size] { display: none; }
  .agent-panel .agent-input textarea, .agent-panel textarea { font-size: 16px; }
  .agent-msgs .msg, .agent-msgs .bubble { max-width: 94%; }
  .nola-card .nola-similar a { grid-template-columns: 1fr; }

  /* ---------- deals board: one column per swipe ---------- */
  .page.fill-board { padding-bottom: 0; }
  .kanban { grid-template-columns: repeat(6, 86vw); gap: 10px; scroll-snap-type: x mandatory; min-height: 0; padding-bottom: 12px; }
  .kcol { scroll-snap-align: center; min-height: 50vh; }
  .kscrollbar, .kscroll { display: none !important; }
  .kanban .kcard { touch-action: pan-x pan-y; }
  .board-head .row-wrap { gap: 8px; }

  /* ---------- request form ---------- */
  .form-section .row.gap-2, .form-grid .row.gap-2 { flex-wrap: wrap; }
  .form-section .row.gap-2 > .input, .form-section .row.gap-2 > .select, .form-grid .row.gap-2 > .input, .form-grid .row.gap-2 > .select { min-width: 0; flex: 1 1 140px; width: auto !important; }
  .form-section .row.gap-2 > .select[style*="width:84px"], .form-grid .row.gap-2 > .select[style*="width:84px"] { flex: 0 0 84px; }
  .form-section h3 { flex-wrap: wrap; }
  .services-grid, .svc-grid { grid-template-columns: 1fr 1fr; }

  /* ---------- deal page ---------- */
  .stage-stepper { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .stage-stepper::-webkit-scrollbar { display: none; }
  .stage-stepper button, .stage-stepper > span { flex: 0 0 auto; padding: 0 10px; }
  .quote-row { flex-wrap: wrap; } .quote-row .btn { flex: 1 1 auto; justify-content: center; }
  .workflow-bar { grid-template-columns: repeat(6, max-content); overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: none; }
  .workflow-bar::-webkit-scrollbar { display: none; }
  .deal-head-row, .deal-title-row { flex-wrap: wrap; }
  .deal-grid > aside, .deal-grid > .aside { order: -1; }   /* the Nola card + actions first on a phone */
  .section-grid, .form-view, .kv-grid { grid-template-columns: 1fr 1fr; }
  .quote-editor table { font-size: var(--fs-xs); }
  .cargo-line .row { flex-wrap: wrap; }

  /* ---------- inbox / chat ---------- */
  .inbox, .chat { height: calc(100dvh - var(--topbar-h) - var(--bottom-nav-h) - var(--safe-b)); margin: -12px; }
  .inbox > *, .chat > * { min-width: 0; }
  .thread, .conv-list, .chans { min-width: 0; max-width: 100vw; }
  .thread .head { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .thread .head .chips, .thread .head .row-wrap { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .msg { max-width: 92%; }
  .composer { padding: 8px 10px calc(8px + var(--safe-b)); } .composer textarea { font-size: 16px; }
  .composer .row:last-child, .composer > .row.between { padding-inline-end: 0; flex-wrap: wrap; gap: 6px; }
  .inbox .ctx { display: none; }
  .conv-list .head { gap: 6px; padding: 10px 12px; }
  .conv-list .head .row { gap: 6px; } .conv-list .head .select { min-height: 36px; }
  .conv-list .head .chips, .conv-list .head .row-wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .conv-list .head .chips::-webkit-scrollbar, .conv-list .head .row-wrap::-webkit-scrollbar { display: none; }
  .conv-list .head .row:has(> .select + .select) { display: grid; grid-template-columns: 1fr 1fr; }
  .nola-ready { flex-wrap: wrap; } .nola-ready .truncate { flex-basis: 100%; white-space: normal; }

  /* ---------- settings ---------- */
  .settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding: 6px; scrollbar-width: none; }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav .grp { display: none; }
  .settings-nav a { white-space: nowrap; padding: 8px 10px; font-size: var(--fs-xs); }
  .perm-grid { grid-template-columns: 120px repeat(8, 110px) !important; }

  /* ---------- providers ---------- */
  .pv-crit { grid-template-columns: 1fr 1fr; gap: 8px; } .pv-crit .pv-modes, .pv-crit button[type=submit] { grid-column: 1 / -1; }
  .pv-crit .pv-modes { flex-wrap: wrap; height: auto; }
  .pv-market { margin-inline: -12px; padding-inline: 12px; }
  .pv-cov { grid-template-columns: 1fr 1fr; }
  .pv-contacts { grid-template-columns: 1fr; }
  .pv-kvs { grid-template-columns: 1fr; }
  .pv-steps { gap: 6px; } .pv-step { font-size: var(--fs-xs); padding: 4px 10px 4px 4px; }
  .pv-summary .fact b { font-size: var(--fs-lg); }
  .pv-pend tr, .pv-review tr { display: table-row; }   /* editable tables keep their columns and scroll sideways */
  .pv-pend td, .pv-review td { display: table-cell; } .pv-pend td::before, .pv-review td::before { display: none; }
  .pv-pend thead, .pv-review thead { display: table-header-group; } .pv-pend tbody, .pv-review tbody { display: table-row-group; }
  .pv-pend, .pv-review { display: table; min-width: 760px; }

  /* ---------- reports ---------- */
  .reports .grid-4, .reports .grid-3 { grid-template-columns: 1fr 1fr; }
  .report-head .row { flex-wrap: wrap; }
  svg.chart, .chart svg { max-width: 100%; height: auto; }

  /* ---------- home ---------- */
  .hero-card { padding: 14px; } .hero-card h1 { font-size: 20px; }
  .home-grid .card { min-width: 0; }

  /* ---------- misc ---------- */
  .callout { flex-wrap: wrap; }
  .chips { flex-wrap: wrap; }
  .toast-wrap, .toasts { bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 10px); inset-inline: 10px; }
  .menu { max-width: calc(100vw - 20px); }
  .lookup-menu { max-height: 40vh; }
  .ref-code.lg { font-size: var(--fs-sm); }
  .truncate { max-width: 100%; }
  .row.between.row-wrap > * { min-width: 0; }
  .empty { padding: 24px 12px; }
  .print-only { display: none; }
}

/* the bottom bar exists only on phones */
@media (min-width: 761px) { .bottom-nav, .nav-scrim { display: none !important; } }

/* touch devices of any width: no hover-only affordances, larger drag handles */
.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .tbl tr .actions .btn, .kcard .card-actions { opacity: 1 !important; visibility: visible !important; }
  .helptip { width: 24px; height: 24px; }
  .touch-only { display: inline-flex; }
  /* a menu opened from a kanban card would be clipped by the column: show it as a sheet above the bottom bar */
  .kmove-host .menu { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 12px); max-width: none; max-height: 55vh; overflow: auto; z-index: 1000; }
  .kmove-host .menu button { padding: 12px 14px; font-size: var(--fs-md, 15px); }
  .kcard .kmove { width: 28px; height: 28px; border-radius: 8px; color: var(--muted); background: var(--surface-2, rgba(127,127,127,.12)); }
  .kcard.lp { transform: scale(.97); box-shadow: 0 0 0 2px var(--primary) inset; transition: transform .15s; }
  .kcard { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
}