/* mobile.css — applied only on screens <= 1199px (bumped 2026-05-11 * from 768; iPads / Surface / 12" laptops were getting the desktop * split-pane treatment and breaking). * Loaded via so wider screens never parse it. * All rules wrapped in @media guard as a secondary safety net. * Class .mobile-shell is toggled on by an inline script when the * viewport is narrow — allows progressive enhancement without a build step. */ @media (max-width: 1199px) { /* ── Shell: hide sidebar ─────────────────────────────────────── */ .sidebar, .app-sidebar, nav.sidebar { display: none !important; } /* ── Main content: full-width, page scroll on mobile ─────────── */ /* .app-container is height:100vh + overflow:hidden on desktop to give .app-content its own inner scroll. On mobile we want the document to scroll, so unlock every wrapper in the chain. Missing the outer .app-container was the cause of "form bottom fields slip behind the tab bar" — inner content grew past 100vh but the container clipped at the viewport edge. */ .app-container, .main-content, .app-content, .app-main { margin-left: 0 !important; padding: var(--space-3) !important; /* Bottom clearance for the 58px fixed tab bar PLUS the iOS home-indicator safe-area (~34px on iPhone X+). 80px was the original value and didn't cover the safe area, so the last 12-14px of every page sat under the tab bar on home-indicator devices. Use env() to scale up dynamically. */ padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; height: auto !important; max-height: none !important; } .app-container { padding: 0 !important; /* outer keeps zero padding; child wraps add it */ padding-bottom: 0 !important; /* tab-bar clearance lives on .app-content */ } /* Allow the body itself to scroll */ body, html { overflow-x: hidden; height: auto; } /* ── WO + Form container boundaries — must match on mobile (5_13_prodfixes §C4) ── work-order.ejs uses .wo-container with padding:var(--space-3); form.ejs uses .form-container. Before this rule, .form-container relied on .app-content's padding only, which made the form bleed wider than the WO at the same width. Force both to share the same top + side budget on mobile. */ .wo-container, .form-container { max-width: 100% !important; margin: 0 !important; padding: var(--space-3) var(--space-3) 0 !important; box-sizing: border-box !important; } /* And the .app-content wrapper already adds var(--space-3) of padding, so don't double-pad the inner container side-edges. Cancel the inner padding and let app-content drive the side margins. */ .app-content > .wo-container, .app-content > .form-container, .app-content .wo-container, .app-content .form-container { padding-left: 0 !important; padding-right: 0 !important; } /* ── Tab bar ─────────────────────────────────────────────────── */ .mobile-tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: 58px; display: flex !important; align-items: stretch; justify-content: space-around; background: var(--color-bg-secondary, #1a1d23); border-top: 1px solid var(--color-border-primary, #2c3038); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 200; box-shadow: 0 -2px 8px rgba(0,0,0,.3); } .mobile-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; color: var(--color-text-muted, #6c7280); text-decoration: none; font-size: 10px; min-height: 48px; transition: color .15s; -webkit-tap-highlight-color: transparent; } .mobile-tabbar a.active { color: var(--color-primary, #3b82f6); } .mobile-tabbar .icon { font-size: 22px; line-height: 1; } /* ── Project detail: collapse right rail ────────────────────── */ /* Right rail (comments) hidden on mobile — becomes a slide-out drawer */ .project-detail-grid, [style*="1fr 340px"], [style*="grid-template-columns: 1fr 340px"] { grid-template-columns: 1fr !important; } /* Hide the right-rail comments column on mobile */ .project-right-rail, .comments-rail { display: none !important; } /* ── Comment drawer (slide-in from right) ───────────────────── */ .comment-drawer-btn { position: fixed; right: 0; top: 50%; transform: translateY(-50%); background: var(--color-primary, #3b82f6); color: #fff; border-radius: 8px 0 0 8px; padding: 10px 8px; font-size: 11px; writing-mode: vertical-rl; cursor: pointer; z-index: 120; box-shadow: -2px 0 8px rgba(0,0,0,.3); display: flex !important; align-items: center; gap: 4px; border: none; min-height: 80px; } .comment-drawer { position: fixed; right: -100%; top: 0; bottom: 0; width: min(360px, 90vw); background: var(--color-bg-secondary, #1a1d23); border-left: 1px solid var(--color-border-primary, #2c3038); z-index: 150; overflow-y: auto; transition: right .25s ease-out; padding-bottom: 80px; } .comment-drawer.open { right: 0; } .comment-drawer-header { position: sticky; top: 0; background: var(--color-bg-secondary, #1a1d23); border-bottom: 1px solid var(--color-border-primary, #2c3038); padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13px; } .comment-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 140; } .comment-drawer-overlay.open { display: block; } /* ── Phase strip: horizontal scroll ────────────────────────── */ .phase-strip-container > div, [data-phase-strip] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; flex-wrap: nowrap !important; } /* ── Tabs: horizontal scroll ─────────────────────────────────── */ .tab-nav, [class*="tab-item"] { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; } .tab-nav::-webkit-scrollbar { display: none; } /* ── Project list: kill ghost right split-pane ───────────────── */ /* Target only the named split-pane div, not the stage content */ .project-split-pane, #project-detail-panel, .split-detail { display: none !important; } /* ── Split-list: drop fixed 300px / flex-shrink:0 set inline by EJS, otherwise it overflows a 390px mobile viewport. Override needs !important to beat the inline style. ─────────────────────── */ .split-list { width: 100% !important; flex-shrink: 1 !important; border-right: none !important; padding-right: 0 !important; max-height: none !important; } .split-layout { min-height: 0 !important; } /* ── Project list rows: touch-friendly ──────────────────────── */ .project-list-row { min-height: 64px; padding: 10px 14px; } /* ── Tap targets: minimum 44px ──────────────────────────────── */ .btn, .btn-sm { min-height: 44px; font-size: 14px !important; } /* ── Inputs: prevent iOS zoom (requires 16px minimum) ───────── */ input, select, textarea { font-size: 16px !important; } /* ── Form/WO: remove 2-column layout ────────────────────────── */ .form-container, #project-surface { grid-template-columns: 1fr !important; } /* ── Bug 1 (2026-05-11): form/WO bottom fields slip behind tab bar. The FrameNav embed wrapper #project-surface keeps an internal scroll/height constraint that traps the outer .main-content's padding-bottom. Force the wrapper to flow naturally and give the form-container its own bottom clearance over the 58px tab bar. */ #project-surface, .form-container { overflow: visible !important; height: auto !important; max-height: none !important; } .form-container { /* Stack with .app-content's own padding-bottom so even very long forms stay clear of the tab bar — extra 24px breathing room above the safe-area-inset-aware base. */ padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; max-width: 100% !important; } /* ── Bug 2 (2026-05-11): form context-fields grid in views/projects/ form.ejs:188 uses repeat(auto-fill, minmax(180px, 1fr)). On narrow phones the 180px hard minimum can force horizontal overflow when combined with inner content min-widths. Collapse to a single column on mobile. Attribute selector matches the inline style verbatim since there's no class to hook. */ div[style*="auto-fill, minmax(180px"], div[style*="auto-fill,minmax(180px"] { grid-template-columns: 1fr !important; } .form-container * { max-width: 100% !important; } /* ── Bug 3 (2026-05-11): service-ticket addons row carries an inline grid-column:1/span 2 on views/service-tickets/detail.ejs:299. On mobile (single-column grid override below) "span 2" creates an implicit off-screen column 2 — visually the whole addons block (Work / Site Visits / Line Items / Timesheets) appears to vanish. Force grid-column back to auto so it lands in the single column. */ .ticket-layout > .ticket-main > .ticket-addons, .ticket-addons[style*="grid-column"] { grid-column: auto !important; grid-row: auto !important; } /* ── Breadcrumb: prevent overflow ───────────────────────────── */ .breadcrumb, [class*="breadcrumb"] { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } /* ── Schedule: agenda list default ──────────────────────────── */ .schedule-month-view { display: none; } .schedule-agenda-view { display: block !important; } /* ── Settings: desktop redirect banner ──────────────────────── */ .settings-desktop-banner { display: block !important; } /* ── ALL top chrome: hidden on mobile, no exceptions ────────────── */ /* This covers every possible header pattern across the app. The mobile tab bar (bottom) handles all navigation. No page should ever show a desktop header/breadcrumb/user hero on mobile. */ .app-header, .header, .page-header, .header-left, .header-right, .header-user, .header-notification, .header-signout, .nav-breadcrumbs, .breadcrumbs-bar, .breadcrumbs, .frame-nav-toolbar, [class*="breadcrumb"], [class*="framenav"], .skip-to-content, /* Avatar / hero / initials sweep — no user-hero icon on mobile per MOBILE_UI_PLAYBOOK. Bottom-nav user tab carries the identity. */ [class*="avatar"], [class*="hero"], [class*="circle-initial"], [class*="user-initials"], [class*="account-avatar"], .my-work-avatar, .header-avatar { display: none !important; } /* ── Back-links on form, WO, and service ticket: hidden on mobile ── */ /* Tab bar handles navigation — these are redundant and waste space */ .form-back-link, .wo-back, a.embedded-hide, .wo-container > a:first-child, .service-ticket-back, /* These href-based rules were silently hiding the bottom-nav tabs (which legitimately link to /service-tickets, /accounts/...). Scope them to anchors that are NOT inside the mobile tab bar. */ :not(.mobile-tabbar) > a[href="/service-tickets"], :not(.mobile-tabbar) > a[href^="/projects?selected"], :not(.mobile-tabbar) > a[href^="/accounts/"] { display: none !important; } /* ── Comment drawer button: wider and more visible ──────────── */ .comment-drawer-btn { width: 46px !important; min-height: 90px !important; font-size: 10px !important; padding: 8px 4px !important; } /* ── Inbox: 2-line compact rows ─────────────────────────────── */ .inbox-row { flex-direction: column !important; align-items: flex-start !important; min-height: 64px; gap: 2px; } /* ── My Work table: hide Address + Phase on mobile, keep What/Born/Aged/Status */ .mw-col-address, .mw-col-phase, .mw-col-admin { display: none !important; } } /* Desktop: hide mobile-only elements */ @media (min-width: 1200px) { .mobile-tabbar, .comment-drawer-btn, .comment-drawer, .comment-drawer-overlay, .settings-desktop-banner, .mobile-only { display: none !important; } } /* Mobile: hide desktop-only elements */ @media (max-width: 1199px) { .desktop-only { display: none !important; } /* File-upload zone: drag-and-drop never fires from finger touches. Hide the "or drop files here" hint on mobile; the camera + library buttons are the affordance. Also bump button width to fill nicely. */ .file-zone-drop-hint { display: none !important; } .file-zone-btn { flex: 1 1 calc(50% - 4px) !important; justify-content: center !important; } /* Service-ticket detail: stack the 3-column desktop layout vertically on mobile. The grid's 320px sidebar overflows; comments-rail is already hidden by .comments-rail rule above. */ .ticket-layout { flex-direction: column !important; gap: var(--space-3) !important; } .ticket-layout > .ticket-main { grid-template-columns: 1fr !important; grid-template-areas: "info" "work" "addons" !important; gap: var(--space-3) !important; } .ticket-layout > .ticket-timeline { display: none !important; } .ticket-info .info-card, .ticket-work .work-card, .ticket-addons { padding: var(--space-3) !important; } /* Account-detail header: stack on mobile instead of horizontal flex (current desktop layout collapses badly on iPhone). */ .account-detail-header > div { flex-direction: column !important; align-items: stretch !important; gap: var(--space-2) !important; } .account-detail-header > div > div { min-width: 0 !important; max-width: 100% !important; } .account-detail-header > div > div[style*="text-align:right"], .account-detail-header > div > div[style*="text-align: right"] { text-align: left !important; } .account-detail-header h1 { font-size: var(--font-size-xl) !important; line-height: 1.2 !important; } .account-detail-header p { word-break: normal !important; } /* Item 2 — header field font normalization. work-header.ejs uses inline font sizes from 9-12px. Playbook: label = --font-size-sm (12), value = --font-size-base (14). Force-override on mobile so the header lays out at standard mobile readability without ripping out every inline style on the partial. */ .work-header-bar { padding: var(--space-3) var(--space-4) var(--space-3); } .work-header-bar [style*="font-size:11px"], .work-header-bar [style*="font-size: 11px"], .work-header-bar [style*="font-size:10px"], .work-header-bar [style*="font-size: 10px"], .work-header-bar [style*="font-size:9px"], .work-header-bar [style*="font-size: 9px"] { font-size: var(--font-size-sm) !important; } .work-header-bar [style*="font-size:12px"], .work-header-bar [style*="font-size: 12px"] { font-size: var(--font-size-base) !important; } .work-header-bar h1[style*="font-size"] { font-size: var(--font-size-xl) !important; } .work-header-bar select, .work-header-bar input[type="text"] { min-height: 36px !important; padding: 4px 8px !important; } /* Item-1 / Projects-list mobile redesign — full-width single-column list, stacked dropdown filters, no split-pane. The desktop horizontal phase pills + 280px sidebar + embedded detail are wrapped in .desktop-only and never render on mobile. */ .projects-page .filters-bar { gap: var(--space-2); flex-direction: column; align-items: stretch; } .projects-page .filters-bar > * { width: 100%; min-width: 0; } .projects-page .filters-bar .input, .projects-page .filters-bar select, .projects-page .filters-bar button { font-size: var(--font-size-base) !important; min-height: 44px; padding: 0 var(--space-3) !important; } .mobile-phase-select { width: 100%; font-size: var(--font-size-base); min-height: 44px; padding: 0 var(--space-3); background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); border-radius: var(--border-radius); color: var(--color-text-primary); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right var(--space-3) center; } .mobile-project-list { display: flex; flex-direction: column; padding-bottom: 88px; } .mobile-project-row, .mobile-project-row:link, .mobile-project-row:visited, .mobile-project-row:hover, .mobile-project-row:active { display: block; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border-secondary); color: var(--color-text-primary); text-decoration: none; min-height: 56px; } /* Force link colour to inherit on the heading span so :visited doesn't bleed through (browsers apply visited-link colour with high precedence unless explicitly overridden on the descendant). */ .mobile-project-row .heading, .mobile-project-row:visited .heading, .mobile-project-row .row-2, .mobile-project-row:visited .row-2 { color: inherit; } .mobile-project-row:active, .mobile-project-row:hover { background: var(--color-bg-secondary); } .mobile-project-row .row-1 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-base); font-weight: 600; } .mobile-project-row .row-1 .serial { font-family: monospace; color: var(--color-text-secondary); font-size: var(--font-size-sm); min-width: 48px; } .mobile-project-row .row-1 .heading { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-project-row .row-2 { margin-top: 2px; padding-left: 56px; font-size: var(--font-size-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mobile-project-row .badge { font-size: var(--font-size-xs); padding: 2px 6px; } .mobile-project-row .phase { font-size: var(--font-size-xs); font-weight: 500; } }