/* ═══════════════════════════════════════════════════════════════ Mobile responsiveness — loaded LAST so it wins. Breakpoints: 1100px small laptop / large tablet — multi-col grids → fewer cols 900px tablet portrait — sidebars start to fold 768px large phone / small tablet — main "mobile" mode 480px phone — extra-tight compact mode Existing per-tab @media blocks are kept (analytics KPI grids, suppliers sidebar fold, finance KPIs, pile-split, etc.). This file fills in the new v* design system (v7-paper-v2, v8-pile, v9-finance, v10-suppliers, design-bridge) which previously shipped desktop-only. ═══════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────── ≤ 1100px — small laptop / large tablet ─────────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { /* Orders body: 320px rail + main → stack rail above main */ .pv2-body { grid-template-columns: 1fr; } .pv2-rail { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; padding: 14px 18px 18px; } /* Roadmap: 4-col → 2-col (pile.css already handles this, kept for parity) */ .rm-cols { grid-template-columns: repeat(2, 1fr); } /* Orders top grid already collapses at 1100px (orders.css) */ } /* ─────────────────────────────────────────────────────────────── ≤ 900px — tablet portrait ─────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* Tighten the page chrome */ .pv2-pagehead, .mm-pagehead { padding: 14px 18px 10px; gap: 10px; } .pv2-main { padding: 12px 18px 24px; } /* Page-head stats stack below the title */ .pv2-pagehead { flex-direction: column; align-items: flex-start; } .pv2-pagehead-right { width: 100%; justify-content: flex-start; gap: 12px; } /* Filters wrap to multiple lines */ .pv2-filters, .io-filters { flex-wrap: wrap; gap: 8px; } .pv2-search { min-width: 0; flex: 1; } .pv2-filters-spacer { flex-basis: 100%; height: 0; } /* Pile head stacks */ .pile-head { flex-wrap: wrap; gap: 12px; } } /* ─────────────────────────────────────────────────────────────── ≤ 768px — main mobile breakpoint ─────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* ── Body / scroll ───────────────────────────────────────── */ body { overflow: auto; height: auto; min-height: 100vh; } #app { height: auto; min-height: 100vh; } /* ── Top nav ─────────────────────────────────────────────── */ /* Tabs scroll horizontally; everything else compacts. The 42px brand logo stays — it's the anchor — but the brand wordmark hides so the tabs get room. */ #nav, .pv2-nav, .mm-nav { padding: 4px 10px; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #nav::-webkit-scrollbar, .pv2-nav::-webkit-scrollbar { display: none; } /* Intelligems trial banner compacts to match the nav; drop the manage link */ .ig-banner { padding: 8px 14px; gap: 8px; font-size: 12px; } .ig-banner-link { display: none; } .nav-brand, .pv2-brand, .mm-brand { font-size: 0; /* hide "Mulch Mound Matrix" wordmark */ gap: 0; margin-right: 4px; flex-shrink: 0; } .nav-brand-logo { width: 38px; height: 38px; } .nav-tabs, .pv2-tabs, .mm-tabs { flex: 0 0 auto; } .nav-tab, .pv2-tab, .mm-tab { padding: 5px 10px; font-size: 12px; flex-shrink: 0; } /* Identity selector compacts to a chip */ .nav-identity, .pv2-you, .mm-you { padding: 3px 8px; flex-shrink: 0; } .nav-identity-label, .pv2-you-label { display: none; } #theme-toggle { flex-shrink: 0; } /* ── Page heads ──────────────────────────────────────────── */ .pv2-pagehead, .pile-pagehead, .mm-pagehead { padding: 12px 14px 8px; flex-direction: column; align-items: stretch; gap: 8px; } .pv2-h1, .mm-h1 { font-size: 22px; } .pile-week-title { font-size: 18px; } .pv2-pagehead-right, .mm-pagehead-right { width: 100%; gap: 12px; flex-wrap: wrap; } /* ── Suppliers view: sidebar fold ────────────────────────── */ /* suppliers.css already folds at 768px; tighten further */ #sidebar { max-height: 180px; } #supplier-list { max-height: 110px; } .pv2-root #sidebar { padding: 10px 12px 14px; } .pv2-root .sidebar-header h2 { font-size: 18px; } /* Detail header */ .pv2-root .detail-header { padding: 12px 14px; flex-direction: column; align-items: stretch; } .pv2-root .detail-header h1, .pv2-root #d-name { font-size: 22px; } /* Sub-tab nav — already scrolls horizontally; tighten */ .pv2-root #sup-subtabs { padding: 0 14px; -webkit-overflow-scrolling: touch; } .pv2-root #detail > .sup-tabbody.is-active, .pv2-root #detail > .section.sup-tabbody.is-active { margin: 0 14px 12px; } .pv2-root .section { padding: 12px; } /* ── Orders rail ─────────────────────────────────────────── */ .pv2-rail { padding: 12px 14px 16px; } .pv2-main { padding: 10px 14px 22px; } .pv2-rail-spark { margin-top: 12px; padding-top: 12px; } /* Action queues: stack 3-col grid into 1 column */ .io-aq-grid, .io-aq-cards { grid-template-columns: 1fr !important; } /* Orders filters: more aggressive stacking */ .pv2-filters { padding: 8px; gap: 6px; } .pv2-filter-group { padding-right: 0; flex-wrap: wrap; } .pv2-filter-divider { display: none; } /* ── Alerts ──────────────────────────────────────────────── */ .pv2-alert { margin: 0 14px 10px; font-size: 12px; padding: 8px 12px; } /* ── Tables: horizontal scroll ───────────────────────────── */ .pv2-table-wrap, .io-tbl, .product-table, .schedule-table, .fin-monthly-table, .fin-orders-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pv2-table, .io-tbl, .product-table, .schedule-table { min-width: 720px; font-size: 12px; } .pv2-table thead th, .pv2-table tbody td, .io-tbl th, .io-tbl td { padding: 7px 9px; } .pv2-table-wrap { max-height: none; } /* ── Side panel ──────────────────────────────────────────── */ .sp-panel { width: 100vw; max-width: 100vw; } .sp-overlay { background: rgba(0,0,0,.5); } .sp-head { padding: 12px 14px; } .sp-body { padding: 14px; } .sp-foot { padding: 10px 14px; } .sp-accept-btn { width: 100%; min-width: 0; padding: 12px 18px; } /* Orders popovers (assignment / note) — clamp width and let JS keep them in view. On 320px screens an unclamped 260px popover hangs off the right edge. */ .io-pop { max-width: calc(100vw - 16px); min-width: 0; box-sizing: border-box; } .io-note-pop { width: calc(100vw - 24px); max-width: 320px; } /* ── Modals ──────────────────────────────────────────────── */ .modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; padding: 16px; } .modal-wide { width: 100vw; } /* ── Pile + Roadmap ──────────────────────────────────────── */ .pile-wrap, .pv2-root .pile-wrap { padding: 12px 14px 30px; } /* Page head: title over actions rather than squeezed side by side */ .pile-head { flex-direction: column; align-items: stretch; gap: 10px; } .pile-head-right { flex-wrap: wrap; } /* Type tabs scroll horizontally; filters stack full-width beneath */ .pile-toolbar { flex-direction: column; align-items: stretch; gap: 6px; } .pile-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pile-tabs::-webkit-scrollbar { display: none; } .pile-tab { flex-shrink: 0; white-space: nowrap; } .pile-filters { flex-direction: column; align-items: stretch; gap: 6px; } .pile-filters input, .pile-filters select { width: 100%; min-width: 0; } /* Roadmap columns stack into one readable scroll */ .rm-cols { grid-template-columns: 1fr; gap: 10px; } .rm-col { min-height: 0; } /* Row quick-actions are hover-only on desktop — always show them on touch */ .pile-row-actions { display: flex; } /* FAB: stay clear of bottom-screen UI; horizontal not vertical */ #pile-fab { bottom: 12px; right: 12px; flex-direction: row; gap: 6px; } .pile-fab-btn { width: 40px; height: 40px; font-size: 18px; } /* ── Analytics / Coverage / Finance / Admin headers ──────── */ .fin-wrap, .an-wrap, .co-wrap { padding: 12px 14px 30px; } /* Header-docked folder tabs become a full-width horizontally-scrolling strip when the pagehead stacks on mobile (display:flex so overflow-x engages; inline-flex would size to content and never scroll). */ .fin-subtabs, .co-subtabs, .an-subtabs { display: flex; width: 100%; padding: 4px 14px 0; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .fin-subtab, .co-subtab, .an-subtab { flex: none; } /* Admin view container */ #view-admin > div { padding: 14px !important; } /* ── Touch target sizes ──────────────────────────────────── */ .btn { padding: 8px 14px; min-height: 36px; } .btn-sm { padding: 6px 12px; min-height: 32px; } } /* ─────────────────────────────────────────────────────────────── ≤ 480px — phone / compact ─────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { /* Nav: smaller logo, even tighter */ .nav-brand-logo { width: 34px; height: 34px; } #nav, .pv2-nav, .mm-nav { padding: 4px 8px; gap: 6px; } .nav-tab, .pv2-tab, .mm-tab { padding: 4px 9px; font-size: 11.5px; } /* Page heads */ .pv2-h1, .mm-h1 { font-size: 20px; } .pile-head-title { font-size: 17px; } .pv2-pagehead, .mm-pagehead { padding: 10px 12px 6px; } /* Tighter rail */ .pv2-rail { padding: 10px 12px 14px; } .pv2-main { padding: 8px 12px 18px; } /* Tighter table cells */ .pv2-table, .io-tbl { font-size: 11.5px; } .pv2-table thead th, .pv2-table tbody td, .io-tbl th, .io-tbl td { padding: 6px 7px; } /* Filter chips compact */ .pv2-seg { padding: 3px 8px; font-size: 11px; } .pv2-field > select, .pv2-search { font-size: 11.5px; } /* Stat displays */ .pv2-stat-num, .mm-stat-num { font-size: 18px; } /* Pile rows: tighter */ .pile-row { padding: 7px 10px; } .pile-card-title, .rm-card-title { font-size: 12.5px; } /* FAB tighter */ #pile-fab { bottom: 10px; right: 10px; } .pile-fab-btn { width: 38px; height: 38px; font-size: 17px; } /* Hide the YOU select label entirely; show only the dropdown */ .nav-identity, .pv2-you, .mm-you { padding: 2px 6px; } .nav-identity select { font-size: 11.5px; } } /* ─────────────────────────────────────────────────────────────── Touch-device hover suppression — :hover on touch devices stays "stuck" after tap. Limit hover effects to devices with a real pointer so the UI doesn't feel laggy on phones. ─────────────────────────────────────────────────────────────── */ @media (hover: none) { .pile-fab-btn:hover { transform: none; box-shadow: var(--shadow-md); } .pile-row:hover, .rm-card:hover { transform: none; } .pv2-table tbody tr:hover, .io-tbl tbody tr:hover, .product-table tbody tr:hover { background: transparent; } } /* ═══════════════════════════════════════════════════════════════ Tab priority on mobile (≤768px) 1. Orders — full read + write 2. Pile — full read + write 3. Suppliers — read-only (browse list + view detail; edits hidden) 4. Admin / Coverage / Analytics / Content / Finance — hidden switchView() in shared.js handles the routing side (default to orders, bounce hidden-tab requests). This block handles the visual side: pulling tabs out of the nav, hiding view bodies, and making suppliers detail look like a read-only card. ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Pull hidden tabs out of the nav ─────────────────────── */ /* Analytics is mobile-enabled, so it stays in the (bottom) nav. */ .nav-tab[data-view="admin"], .nav-tab[data-view="coverage"], .nav-tab[data-view="content"], .nav-tab[data-view="finance"] { display: none !important; } /* Defense in depth: even if a hidden view is somehow active (stale hash, direct DOM toggle), keep its body off the page. Analytics is mobile-enabled (Funnel tab), so it's NOT hidden here. */ #view-admin, #view-coverage, #view-seo, #view-finance { display: none !important; } /* ── Suppliers: read-only ────────────────────────────────── */ /* Sidebar filters (search, owner/created_by/status selects) stay live — they're for *browsing*, not editing. Everything in #detail (the right pane) becomes a visual label. */ #detail input:not([type="checkbox"]), #detail select, #detail textarea, #detail .field-input, #detail .product-table input, #detail .product-table select, #detail .schedule-table input { pointer-events: none !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; cursor: default !important; padding-left: 0 !important; } /* Checkboxes still readable, just not toggleable */ #detail input[type="checkbox"] { pointer-events: none !important; opacity: .85; } /* Selects show their value without the dropdown chevron */ #detail select { background-image: none !important; padding-right: 0 !important; } /* Hide every write action in the suppliers view */ #view-suppliers .sidebar-header .btn-accent, /* "+ New" supplier */ #view-suppliers #btn-multi-select, /* bulk select toggle */ #view-suppliers #bulk-bar, /* bulk-action drawer */ #view-suppliers #btn-bulk-apply, #view-suppliers .sidebar-footer, #view-suppliers .save-zone, #view-suppliers .header-actions, #view-suppliers .detail-header .header-actions, #view-suppliers #btn-zip-edit, /* edit zip list */ #view-suppliers #zip-gen-wrap, /* "Generate from Range" */ #view-suppliers #btn-dup-product, /* duplicate last product */ #view-suppliers .btn-save-product, #view-suppliers .product-table .actions, /* edit/delete column */ #view-suppliers .product-table tr.new-row, /* unsaved new-product row */ #view-suppliers .sync-panel, /* catalog/zip sync cards */ #view-suppliers .blackout-tag button, /* remove blackout × */ #view-suppliers .blackout-pill button, #view-suppliers .linked-chip button, #view-suppliers .group-add-row, /* add member to group */ #view-suppliers .group-member-chip button, /* remove member × */ #view-suppliers .note-del, /* delete note × */ #view-suppliers .section button[onclick*="open"], /* modal triggers */ #view-suppliers .section button[onclick*="Open"], #view-suppliers .section button[onclick*="add"], /* add/insert */ #view-suppliers .section button[onclick*="Add"], #view-suppliers .section button[onclick*="del"], /* del / delete */ #view-suppliers .section button[onclick*="Delete"], #view-suppliers .section button[onclick*="save"], #view-suppliers .section button[onclick*="Save"], #view-suppliers .section button[onclick*="remove"], #view-suppliers .section button[onclick*="Remove"], #view-suppliers .section button[onclick*="sync"], /* sync runs */ #view-suppliers .section button[onclick*="Sync"], #view-suppliers .section button[onclick*="run"], /* run* writes */ #view-suppliers .section button[onclick*="Run"], #view-suppliers .section button[onclick*="generate"],/* generate zips */ #view-suppliers .section button[onclick*="Generate"], #view-suppliers .section button[onclick*="apply"], /* apply bulk */ #view-suppliers .section button[onclick*="Apply"], #view-suppliers .section button[onclick*="toggle"], /* edit-mode toggles */ #view-suppliers .section button[onclick*="Toggle"], #view-suppliers .section button[onclick*="duplicate"], #view-suppliers .section button[onclick*="Duplicate"], #view-suppliers .section button[onclick*="seed"], /* init fallback */ #view-suppliers .section button[onclick*="cleanup"], /* cleanup ops */ #view-suppliers .section button[onclick*="rename"] { display: none !important; } /* The product table actions column gets hidden above; collapse the empty space it leaves behind */ #view-suppliers .product-table th:last-child, #view-suppliers .product-table td:last-child { padding-right: 8px; } /* Read-only hint: a small pill near the top of the detail pane so the mobile user understands why edits aren't possible. JS doesn't have to do anything — the pill is a pure CSS marker injected via a pseudo-element on the detail header. */ #view-suppliers .detail-header::after { content: "Read-only · open on desktop to edit"; display: inline-block; font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; margin-top: 4px; align-self: flex-start; } } /* ═══════════════════════════════════════════════════════════════ suMMa MOBILE (≤768px) — bottom tab bar replaces the sidebar. Appended last so these win over the desktop sidebar rules. ═══════════════════════════════════════════════════════════════ */ #mobile-navdock{ display:none; } #mobile-more-overlay{ display:none; } @media (max-width:768px){ /* Sidebar off; content reclaims full width. Leave room for the bottom bar. */ #nav, #nav.pv2-nav{ display:none !important; } #app{ padding-left:0 !important; } #app.active #view-orders, #app.active #view-suppliers, #app.active #view-admin, #app.active #view-coverage, #app.active #view-analytics, #app.active #view-seo, #app.active #view-finance, #view-pile, #view-delivery-log{ padding-bottom:72px; } /* ── Bottom nav dock: glass pill of page icons + a separate More circle (Shopify split), Instagram liquid-glass finish. TWO states: expanded (default, wide bar) → shrinks + re-centres on scroll-down (JS toggles .is-shrunk on #mobile-navdock). Sizes are vars. ── */ #app.active ~ #mobile-navdock{ display:flex; position:fixed; left:50%; transform:translateX(-50%); bottom:calc(22px + env(safe-area-inset-bottom)); z-index:60; align-items:center; gap:var(--dock-gap); width:var(--dock-w, min(318px, calc(100% - 24px))); transition:width .22s ease; --dock-gap:10px; --tab-h:48px; --icon:26px; --pill-w:80px; --pill-h:51px; --more-sz:54px; /* expanded */ --tab-h-sh:29px; --icon-sh:16px; --pill-w-sh:54px; --pill-h-sh:31px; /* shrunk */ --more-sz-sh:41px; --tab-w-sh:50px; /* shrunk More + tab slot (tightness) */ } /* Shrunk: the dock narrows to a fixed width (animatable, so it eases in/out) and re-centres. Tabs stay flex:1, so they just get closer together — no layout switch, no items flying around. 267px ≈ four 50px slots + gap + the More circle. */ #app.active ~ #mobile-navdock.is-shrunk{ width:min(267px, calc(100% - 24px)); } /* Shared glass material for the pill + the More circle */ #mobile-navdock #mobile-tabbar, #mobile-navdock .mmore-fab{ background:color-mix(in oklab, var(--panel) 58%, transparent); -webkit-backdrop-filter:blur(26px) saturate(185%); backdrop-filter:blur(26px) saturate(185%); border:1px solid color-mix(in oklab, var(--line-strong) 55%, transparent); box-shadow: 0 10px 30px -6px rgba(42,36,24,.26), 0 2px 8px rgba(42,36,24,.10), inset 0 1px 0 rgba(255,255,255,.5); } /* Pill of page icons — icon-only; expanded = spread wide across flex slots */ #mobile-tabbar{ flex:1; min-width:0; display:flex; align-items:center; padding:5px 8px; border-radius:999px; } #mobile-tabbar .mtab{ flex:1; min-width:0; height:var(--tab-h); display:flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; cursor:pointer; position:relative; color:var(--ink-3); text-decoration:none; -webkit-tap-highlight-color:transparent; transition:color .15s ease, transform .12s ease, height .22s ease, flex-basis .22s ease; } #mobile-tabbar .mtab .nav-ico{ width:var(--icon); height:var(--icon); position:relative; z-index:1; transition:width .22s ease, height .22s ease; } #mobile-tabbar .mtab span{ display:none; } /* icon-only */ #mobile-tabbar .mtab:active{ transform:scale(.92); } #mobile-tabbar .mtab.is-active, #mobile-tabbar .mtab.active{ color:var(--green); } /* Selection = a horizontal green pill centred on the active icon */ #mobile-tabbar .mtab.is-active::before, #mobile-tabbar .mtab.active::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:var(--pill-w); height:var(--pill-h); max-width:100%; border-radius:999px; z-index:0; background:color-mix(in oklab, var(--green) 16%, transparent); transition:width .22s ease, height .22s ease; } /* Separate More circle */ #mobile-navdock .mmore-fab{ flex:none; width:var(--more-sz); height:var(--more-sz); border-radius:50%; display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; color:var(--ink-2); padding:0; -webkit-tap-highlight-color:transparent; transition:transform .12s ease, color .15s ease, width .22s ease, height .22s ease; } #mobile-navdock .mmore-fab .nav-ico{ width:22px; height:22px; } #mobile-navdock .mmore-fab:active{ transform:scale(.9); } /* Shrunk state — narrow fixed tab slots, smaller pill/icon/bar + smaller More */ #mobile-navdock.is-shrunk #mobile-tabbar .mtab{ height:var(--tab-h-sh); } #mobile-navdock.is-shrunk #mobile-tabbar .mtab .nav-ico{ width:var(--icon-sh); height:var(--icon-sh); } #mobile-navdock.is-shrunk #mobile-tabbar .mtab.is-active::before, #mobile-navdock.is-shrunk #mobile-tabbar .mtab.active::before{ width:var(--pill-w-sh); height:var(--pill-h-sh); } #mobile-navdock.is-shrunk .mmore-fab{ width:var(--more-sz-sh); height:var(--more-sz-sh); } /* ── Dark mode ── The nav is a sibling of #app (outside its token scope), so theme it via the sibling selector: dark glass that reads like the page, with brighter icons that match the body font colour for contrast. */ #app.active.pv2-dark ~ #mobile-navdock #mobile-tabbar, #app.active.pv2-dark ~ #mobile-navdock .mmore-fab{ background:color-mix(in oklab, #211f16 64%, transparent); border:1px solid rgba(255,255,255,.10); box-shadow: 0 12px 34px -6px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); } #app.active.pv2-dark ~ #mobile-navdock .mtab, #app.active.pv2-dark ~ #mobile-navdock .mmore-fab{ color:#c0baa6; } /* icons ~ body font */ #app.active.pv2-dark ~ #mobile-navdock .mtab.is-active, #app.active.pv2-dark ~ #mobile-navdock .mtab.active{ color:#9bcf90; } /* dark green */ #app.active.pv2-dark ~ #mobile-navdock .mtab.is-active::before, #app.active.pv2-dark ~ #mobile-navdock .mtab.active::before{ background:color-mix(in oklab, #74c274 24%, transparent); } /* ── "More" bottom sheet — slides up smoothly; NO scrim (the page stays visible), lifted off the page by a strong elevation shadow. The overlay is a transparent tap-catcher so tapping the page above the sheet still dismisses it. ── */ #mobile-more-overlay{ display:block; position:fixed; inset:0; z-index:70; background:transparent; visibility:hidden; pointer-events:none; transition:visibility 0s linear .36s; /* stay in the DOM until the slide-down ends */ } #mobile-more-overlay.open{ visibility:visible; pointer-events:auto; transition:visibility 0s; } #mobile-more-sheet{ position:absolute; left:0; right:0; bottom:0; background:var(--panel); border-radius:20px 20px 0 0; padding:6px 14px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -14px 44px -8px rgba(42,36,24,.34), 0 -3px 12px rgba(42,36,24,.16); transform:translateY(100%); transition:transform .36s cubic-bezier(.32,.72,0,1); will-change:transform; } #mobile-more-overlay.open #mobile-more-sheet{ transform:translateY(0); } .mms-grab{ width:40px; height:4px; border-radius:2px; background:var(--line-strong); margin:8px auto 10px; } .mms-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 4px 14px; border-bottom:1px solid var(--line); margin-bottom:6px; } .mms-user{ display:flex; align-items:center; gap:11px; min-width:0; } .mms-av{ position:relative; width:38px; height:38px; flex:none; border-radius:50%; overflow:hidden; background:var(--green); color:#fff; font-weight:700; font-size:16px; display:inline-flex; align-items:center; justify-content:center; } .mms-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; } .mms-name{ font-size:16px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mms-logout{ display:inline-flex; align-items:center; gap:7px; flex:none; padding:8px 14px; border:1px solid var(--line-strong); border-radius:9px; background:var(--panel-2); color:var(--ink); font:inherit; font-size:14px; font-weight:600; cursor:pointer; } .mms-logout .nav-ico{ width:16px; height:16px; } .mms-row{ display:flex; align-items:center; gap:13px; width:100%; padding:14px 6px; border:0; background:transparent; font:inherit; font-size:15px; font-weight:500; color:var(--ink); cursor:pointer; text-align:left; } .mms-row .nav-ico{ width:20px; height:20px; color:var(--ink-2); flex:none; } .mms-row:active{ background:var(--bg-2); } /* Dark mode — the sheet is a sibling of #app (outside its token scope), so redefine the palette tokens on it; everything inside adopts them. Darker shadow. */ #app.pv2-dark ~ #mobile-more-overlay{ --panel:#211f16; --panel-2:#29261b; --bg-2:#1d1b13; --ink:#f4f1e6; --ink-2:#c0baa6; --line:#302d21; --line-strong:#423e2e; --green:#74c274; } #app.pv2-dark ~ #mobile-more-overlay #mobile-more-sheet{ box-shadow:0 -16px 48px -8px rgba(0,0,0,.6), 0 -3px 12px rgba(0,0,0,.42); border-top:1px solid rgba(255,255,255,.06); } } @media (max-width:768px){ /* ── Orders table → tappable cards ── Column order in each row: 1 order · 2 supplier · 3 potential · 4 created · 5 delivery · 6 revenue · 7 status · 8 accepted · 9 assigned · 10 cost · 11 notes · 12 links. We hide the low-priority ones and flex-arrange the rest. */ #view-orders .pv2-table-wrap, #view-orders .io-table-wrap-full{ max-height:none !important; border:0; } /* ── Fixed header, internally-scrolling list ── The orders view fills the screen; title · metric chips · search/filters stay put while only the order list scrolls, so filters are always reachable. */ #app.active #view-orders{ position:fixed; inset:0; z-index:1; display:flex; flex-direction:column; overflow:hidden; padding-bottom:0 !important; } #view-orders .pv2-pagehead{ flex:0 0 auto; } #view-orders .io-queuebar{ flex:0 0 auto; } #view-orders .io-main-full{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } #view-orders #io-mobilebar{ flex:0 0 auto; } #view-orders .io-table-wrap-full{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-bottom:96px; } /* Pull-to-refresh indicator (grows above the list as you drag down) */ #view-orders #io-ptr{ display:flex; align-items:flex-end; justify-content:center; flex:none; height:0; overflow:hidden; transition:height .22s ease; } #view-orders #io-ptr.pulling{ transition:none; } #view-orders #io-ptr .io-ptr-ico{ display:flex; align-items:center; justify-content:center; margin-bottom:10px; color:var(--ink-3); opacity:.55; transition:opacity .15s ease, color .15s ease; } #view-orders #io-ptr .io-ptr-ico svg{ width:22px; height:22px; display:block; } #view-orders #io-ptr.ready .io-ptr-ico{ opacity:1; color:var(--green); } #view-orders #io-ptr.loading .io-ptr-ico{ opacity:1; color:var(--green); } #view-orders #io-ptr.loading .io-ptr-ico svg{ animation:io-rfsp .6s linear infinite; } /* supplier name wraps on mobile cards (the desktop nowrap that keeps the confirmed icon inline would otherwise push long names off-screen) */ #view-orders .io-tbl tbody td:nth-child(2){ white-space:normal; } #view-orders .io-count-foot{ display:none; } /* Day Sheet bar (count · day · search · state) sticks atop the scrolling list */ #view-orders .ds-bar{ position:sticky; top:0; z-index:6; margin:0 0 10px; } #view-orders .io-count-foot{ padding:8px 2px 2px; } #view-orders .io-tbl{ display:block; width:100%; min-width:0; max-width:100%; border:0; background:transparent; } #view-orders .io-tbl thead{ display:none; } #view-orders .io-tbl tbody{ display:block; width:100%; } #view-orders .io-tbl tbody tr{ display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:0 0 9px; } #view-orders .io-tbl tbody tr:active{ background:var(--bg-2); } #view-orders .io-tbl td{ display:block; border:0; padding:0; height:auto; font-size:14px; vertical-align:baseline; } /* Ops card columns (desktop order): Order·Supplier·Product·Potential·Created· Delivery·Revenue·Status·Accepted·Assigned·Cost·Notes·Links. hide low-priority: potential · created · accepted · notes · links */ #view-orders .io-tbl td:nth-child(4), #view-orders .io-tbl td:nth-child(5), #view-orders .io-tbl td:nth-child(9), #view-orders .io-tbl td:nth-child(12), #view-orders .io-tbl td:nth-child(13){ display:none; } /* arrange (compact) — line 1: order# (left) + delivery (right); line 2: supplier (left) + status chip (right, under delivery); line 3: product; line 4: assignment (left) + cost + revenue (right). order#/delivery use a 50% basis so they always fill line 1 and the supplier reliably drops to its own line. */ #view-orders .io-tbl td:nth-child(1){ order:0; flex:1 1 calc(50% - 5px); } /* order # (top-left) */ #view-orders .io-tbl td:nth-child(6){ order:1; flex:1 1 calc(50% - 5px); text-align:right; } /* delivery day/date (top-right) */ #view-orders .io-tbl td:nth-child(2){ order:2; flex:1 1 auto; min-width:0; } /* supplier */ #view-orders .io-tbl td:nth-child(8){ order:3; flex:0 0 auto; margin-left:auto; } /* status chip (right, under delivery) */ #view-orders .io-tbl:not(.ds-tbl) td:nth-child(3){ display:block; order:4; flex:0 0 100%; border-bottom:1px solid var(--line); padding-bottom:9px; margin-bottom:4px; } /* product + divider above the footer */ #view-orders .io-tbl td:nth-child(10){ order:5; flex:1 1 auto; } /* assigned (bottom-left) */ #view-orders .io-tbl td:nth-child(7){ order:7; flex:0 0 auto; font-weight:700; } /* revenue (bottom-right) */ #view-orders .io-tbl .c-sup-name{ font-size:15px; } /* street address is replaced by product on the card */ #view-orders .io-tbl .c-deliv-st{ display:none; } /* cost: only the recorded ✓ chip shows (no chip when missing); sits to the left of revenue */ /* No flag when cost is recorded; a dollar icon (from the Cost Missing card) flags orders that are missing cost. */ #view-orders .io-tbl td.c-cost{ display:flex; align-items:center; order:6; flex:0 0 auto; margin-left:auto; } #view-orders .io-tbl td.c-cost .c-cost-yes{ display:none; } #view-orders .io-tbl td.c-cost .c-cost-miss{ display:none; } #view-orders .io-tbl td.c-cost .c-cost-na{ display:none; } #view-orders .io-tbl td.c-cost .c-cost-dollar{ display:block; width:19px; height:19px; color:var(--red); } /* Day Sheet → mobile card. Desktop columns: Order·Address·Product·Supplier· Customer·AM/PM·Placement·SpecialInstr·Assignee·Accept. Mobile layout (#4.4): supplier top-left with order# + AM/PM top-right; then product, customer, address; drop placement bottom-right. */ #view-orders .io-tbl.ds-tbl td{ order:0; flex:0 0 100%; margin-left:0; } #view-orders .io-tbl.ds-tbl td:nth-child(4){ display:block; order:0; flex:1 1 auto; font-weight:600; } /* Supplier (top-left) */ #view-orders .io-tbl.ds-tbl td:nth-child(1){ order:1; flex:0 0 auto; } /* Order # (top-right, left of AM/PM) */ #view-orders .io-tbl.ds-tbl td:nth-child(6){ order:2; flex:0 0 auto; } /* AM/PM (top-right) */ #view-orders .io-tbl.ds-tbl td:nth-child(2){ order:3; } /* Address (city/state, then street) */ #view-orders .io-tbl.ds-tbl td:nth-child(3){ display:block; order:4; } /* Product */ #view-orders .io-tbl.ds-tbl td:nth-child(5){ display:block; order:5; flex:1 1 auto; } /* Customer (bottom-left) */ #view-orders .io-tbl.ds-tbl td:nth-child(7){ order:6; flex:0 0 auto; margin-left:auto; font-weight:600; text-align:right; } /* Placement (bottom-right) */ #view-orders .io-tbl.ds-tbl td:nth-child(8), #view-orders .io-tbl.ds-tbl td:nth-child(9), #view-orders .io-tbl.ds-tbl td:nth-child(10){ display:none; } /* Special Instr · Assignee · Accept */ #view-orders .io-tbl.ds-tbl .ds-phone{ display:none; } /* phone -> side panel only */ #view-orders .io-tbl.ds-tbl .ds-addr-city{ display:block; font-weight:600; } #view-orders .io-tbl.ds-tbl .ds-addr-st{ display:block; color:var(--ink-3); font-size:12.5px; } /* #4.1-4.3 Day Sheet bar: deliveries count on top, full-width date selector, full-width search. */ #view-orders .ds-bar{ gap:10px; } /* Deliveries count + day selector on their own rows; search + state share the row below (search stretches, state to its right) — like the ops mobile bar. */ #view-orders .ds-bar .ds-count{ order:0; flex:0 0 100%; text-align:center; align-self:center; } #view-orders .ds-bar .ds-nav{ order:1; flex:0 0 100%; justify-content:space-between; } #view-orders .ds-bar .ds-search-wrap{ order:2; flex:1 1 0; min-width:0; display:flex; } #view-orders .ds-bar .ds-search{ flex:1; min-width:0; height:42px; } #view-orders .ds-bar .ds-state{ order:3; flex:0 0 auto; height:42px; } #view-orders .ds-bar .ds-hint{ display:none; } /* ── Order side panel → full screen ── */ #view-orders .sp-panel{ width:100vw !important; max-width:100vw !important; z-index:90; } #view-orders .sp-overlay{ z-index:89; } #view-orders .sp-head{ flex-wrap:wrap; gap:10px; } #view-orders .sp-head-right{ width:100%; } #view-orders .sp-head-right .btn, #view-orders .sp-head-right .sp-accept-btn{ flex:1; justify-content:center; } /* Find-a-Supplier header stacks: label + count on top, full-width picker below */ #view-orders .sp-find-head{ flex-wrap:wrap; gap:8px; } #view-orders .sp-find-head > .sp-seclbl{ flex:1 1 100%; } #view-orders .sp-find-head .sp-net-wrap{ flex:1 1 100%; max-width:100%; } #view-orders .sp-find-head .sp-net-btn{ width:100%; } } @media (max-width:768px){ /* Panel product rows: stack product over its delivery/window/placement meta (the desktop side-by-side layout squeezes the SKU to a char-per-line on phones) */ #view-orders .sp-item-row{ flex-direction:column; align-items:stretch; } #view-orders .sp-item-meta{ border-left:0; border-top:1px solid var(--border); } #view-orders .sp-item-sku{ word-break:break-word; } } @media (max-width:768px){ /* Full-screen panel has no outside to tap — show the close X */ #view-orders .sp-close-x{ display:flex; } #view-orders .sp-head-left{ padding-right:42px; } } /* ── Mobile Orders: search/Filters bar + filter sheet (desktop hides these) ── */ #io-mobilebar{ display:none; } #io-ptr{ display:none; } #io-filter-overlay{ display:none; } #io-filter-sheet .ifs-head, #io-filter-sheet .ifs-actions{ display:none; } @media (max-width:768px){ /* (1) Action-queue metric cards → horizontal-scroll pills */ #view-orders .io-queuebar{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:8px; padding:10px 14px 4px; } #view-orders .io-queuebar::-webkit-scrollbar{ display:none; } #view-orders .io-aq-group{ display:contents; } #view-orders .io-aq-grouplbl{ display:none; } #view-orders .io-aq-cards{ display:contents; } #view-orders .io-aq-card{ flex:0 0 auto; flex-direction:row; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; min-width:0; } /* smaller icon, bigger label, no number on the mobile metric chips */ #view-orders .io-aq-card .io-aq-icon{ width:16px; height:16px; } #view-orders .io-aq-card .io-aq-count{ display:none; } #view-orders .io-aq-card .io-aq-name-txt{ font-size:14px; font-weight:600; color:var(--ink); } /* (2) Search + Filters button row above the order cards */ #view-orders #io-mobilebar{ display:flex; gap:10px; align-items:center; margin:2px 0 12px; } /* #11 in Day Sheet mode the day sheet supplies its own search — hide this bar so there's only ever one search box on mobile. */ #view-orders.day-mode #io-mobilebar{ display:none; } #view-orders .io-msearch-wrap{ flex:1; min-width:0; display:flex; } #io-msearch{ flex:1; min-width:0; height:42px; border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:0 38px 0 14px; font:inherit; font-size:15px; color:var(--ink); outline:none; } #io-msearch:focus{ border-color:var(--green); box-shadow:0 0 0 2px var(--green-bg); } /* #12 bigger touch target for the clear ✕ on mobile */ #view-orders .io-msearch-wrap .io-search-clear{ right:11px; width:20px; height:20px; font-size:12px; } #view-orders .ds-search-wrap .io-search-clear{ width:20px; height:20px; font-size:12px; } #io-filters-btn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 16px; border:1px solid var(--line-strong); border-radius:10px; background:var(--panel); font:inherit; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; } /* MM quick-toggle, left of the search bar */ #view-orders #io-mm-mobile{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 14px; border:1px solid var(--line-strong); border-radius:10px; background:var(--panel); font:inherit; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; } #view-orders #io-mm-mobile.on{ background:var(--green-bg); color:var(--green-2); border-color:color-mix(in oklab,var(--green) 45%,transparent); } /* Filter slide-up sheet */ /* Backdrop fades (opacity, not display) so it eases in/out with the sheet. */ #io-filter-overlay{ display:block; position:fixed; inset:0; z-index:79; background:rgba(15,23,42,.42); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility .3s ease; } #io-filter-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; } /* Sheet = fixed header · scrolling filters · fixed footer actions */ #view-orders #io-filter-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:80; background:var(--panel); border-radius:18px 18px 0 0; box-shadow:0 -10px 30px rgba(42,36,24,.2); transform:translateY(112%); transition:transform .34s cubic-bezier(.32,.72,0,1); max-height:88vh; display:flex; flex-direction:column; overflow:hidden; } #view-orders #io-filter-sheet.open{ transform:translateY(0); } /* Sheet sits above the floating bottom nav — hide the nav while filtering. */ body.io-filter-open #mobile-navdock{ display:none !important; } #view-orders #io-filter-sheet .ifs-head{ display:flex; align-items:center; justify-content:space-between; flex:none; background:var(--panel); padding:16px 16px 10px; } #view-orders .ifs-grab{ position:absolute; left:50%; top:8px; transform:translateX(-50%); width:40px; height:4px; border-radius:2px; background:var(--line-strong); } #view-orders .ifs-title{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-serif); font-size:18px; font-weight:700; color:var(--ink); } #view-orders .ifs-title-ico{ flex:none; color:var(--ink-3); } /* Top-right X close */ #view-orders .ifs-close{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:0; background:transparent; color:var(--ink-3); cursor:pointer; border-radius:8px; } #view-orders .ifs-close:hover{ background:var(--bg-2); color:var(--ink); } /* Bottom action bar: Clear (left) · Apply (right) */ #view-orders #io-filter-sheet .ifs-actions{ display:flex; align-items:center; gap:12px; flex:none; padding:12px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--panel); } #view-orders .ifs-clear{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink-2); font:inherit; font-size:15px; font-weight:700; padding:13px 18px; border-radius:12px; cursor:pointer; } #view-orders .ifs-clear svg{ width:18px; height:18px; flex:none; } #view-orders .ifs-apply{ flex:1 1 0; border:1px solid var(--green); background:var(--green); color:#fff; font:inherit; font-size:15px; font-weight:700; padding:13px 18px; border-radius:12px; cursor:pointer; } /* Stacked filter rows — one filter per row: label on top, control full-width below. Order (set by buildMobileFilters): Supplier · View · Status · Assigned · Final Cost · Issues · Show cancelled · Clear all. */ #view-orders #io-filters{ display:flex; flex-direction:column; gap:18px; flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 16px 16px; } #view-orders #io-filters .io-mfg{ display:flex; flex-direction:column; align-items:stretch; gap:8px; width:100%; } #view-orders #io-filters .io-mfg > label{ font-size:9px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; } /* Supplier dropdown fills the row — original suMMa select styling restored. */ #view-orders #io-filters .io-mfg select{ width:100%; height:42px; font-size:15px; padding:5px 10px; border:1px solid var(--border-light); border-radius:var(--radius); background:var(--surface); color:var(--text); outline:none; transition:border-color .12s; } #view-orders #io-filters .io-mfg select:focus{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(45,106,79,.15); } /* Single-select pill groups (Status / Assigned / Final Cost / Issues) — wrap left-to-right */ #view-orders #io-filters .io-mseg{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:6px; } #view-orders #io-filters .io-mseg-btn{ border:1px solid var(--line-strong); background:var(--panel); color:var(--ink-2); font:inherit; font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent; } #view-orders #io-filters .io-mseg-btn.on{ background:var(--green-bg); color:var(--green-2); border-color:color-mix(in oklab,var(--green) 45%,transparent); } /* View (MM/Potential) toggle fills the row, two equal halves */ #view-orders #io-filters .io-mfg .io-seg{ display:flex; width:100%; gap:6px; } #view-orders #io-filters .io-mfg .io-seg .io-seg-btn{ flex:1; justify-content:center; } #view-orders #io-filters .io-mfg .io-switch{ height:34px; align-self:flex-start; } /* Clear-all = full-width pill at the very bottom */ #view-orders #io-filters #f-clear{ width:100%; justify-content:center; height:auto; gap:8px; padding:13px; margin-top:4px; font-size:14px; font-weight:600; } #view-orders #io-filters #f-clear .io-clear-txt{ display:inline; } #view-orders #io-filters #f-refresh{ display:none; } /* Keep the hidden Cancelled checkbox zero-size — never a full-width invisible tap target. */ #view-orders #io-filters .io-switch input{ width:0; height:0; min-height:0; padding:0; } } @media (max-width:768px){ /* (1) Hide zero-count metric pills on mobile */ #view-orders .io-aq-card.is-zero{ display:none; } /* (2) Much shorter metric pills */ #view-orders .io-aq-card{ padding:6px 13px; } /* (3) Filter sheet polish */ #view-orders #io-filters{ border:0; background:transparent; } /* reserve a stable height so the clear button can appear without shifting the panel */ #view-orders #io-filter-sheet{ min-height:50vh; } } @media (max-width:768px){ /* Don't stretch the pills to the tray height — keep them their natural (short) height */ #view-orders .io-queuebar{ align-items:center; } } @media (max-width:768px){ /* Desktop cards have min-height:80px — reset so mobile pills are short */ #view-orders .io-aq-card{ min-height:0; } } @media (max-width:768px){ /* (3) left-aligned title + sub-text, with comfortable vertical padding */ /* padding-bottom:0 so the tab baseline sits directly under the tabs (like desktop); the title block keeps its own padding-bottom for breathing room. */ #view-orders .pv2-pagehead{ flex-direction:column; align-items:flex-start; gap:10px; padding:18px 16px 0; } #view-orders .pv2-pagehead > div:first-child{ width:100%; text-align:left; } #view-orders .pv2-pagehead .pv2-sub{ display:block; } /* (2) Operations / Day Sheet / Analytics fill the width, evenly spaced */ #view-orders .pv2-pagehead-right{ width:100%; } #view-orders .io-subnav{ width:100%; gap:2px; } #view-orders .io-subnav-btn{ flex:1; justify-content:center; gap:5px; padding:9px 4px; font-size:12px; } /* Analytics page scrolls inside the fixed Orders shell, like the table does. */ #view-orders.an-mode #io-an-page{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; gap:18px; padding:14px 16px 110px; } #view-orders .oan-controls{ gap:12px; padding:12px 14px; } #view-orders .oan-kpis{ grid-template-columns:repeat(2,1fr); gap:14px; } #view-orders .oan-kpi-num{ font-size:25px; } /* Cancellations is hidden on mobile — leaves Acceptances/Cancel Rate/Open/MM Share. */ #view-orders .oan-kpi-canc{ display:none; } /* Stack the three chart widgets on mobile (they sit in one row on desktop). */ #view-orders .oan-secs{ grid-template-columns:1fr; gap:18px; } #view-orders .oan-sec{ padding:16px 14px; } #view-orders .oan-chart-wrap{ min-height:0; height:260px; } } @media (max-width:768px){ /* Card gaps should show the cream page, not a white wrapper */ #view-orders #io-table-wrap, #view-orders .io-table-wrap-full{ background:transparent; } } @media (max-width:768px){ /* iOS Safari auto-zooms when a focused field's font-size is < 16px. Force ≥16px on every form control so tapping to type never zooms. (Keeps pinch-zoom working, unlike disabling user-scalable.) */ input, select, textarea, .io-fg input, .io-fg select, #io-msearch, #mms-identity-select, #nav-identity-select{ font-size:16px !important; } } @media (max-width:768px){ /* Suppliers sub-nav (Directory / Recruitment) fills the width like Orders'. */ #view-suppliers .pv2-pagehead{ flex-direction:column; align-items:stretch; gap:10px; } #view-suppliers .pv2-pagehead-right{ width:100%; display:flex; flex-direction:column; gap:10px; } #view-suppliers .io-subnav{ width:100%; gap:2px; } #view-suppliers .io-subnav-btn{ flex:1; justify-content:center; gap:5px; padding:9px 4px; font-size:12px; } /* (.sup-new-btn is already display:none on mobile — suppliers are read-only there.) */ }