/* mobile.css — applied only on screens <= 768px * Loaded via so desktop never parses 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: 768px) { /* ── Shell: hide sidebar ─────────────────────────────────────── */ .sidebar, .app-sidebar, nav.sidebar { display: none !important; } /* ── Main content: full-width, page scroll on mobile ─────────── */ .main-content, .app-content, .app-main { margin-left: 0 !important; padding: var(--space-3) !important; padding-bottom: 80px !important; /* room for tab bar */ width: 100% !important; max-width: 100% !important; /* Override inner-scroll so normal page scroll works on mobile */ overflow: visible !important; height: auto !important; max-height: none !important; } /* Allow the body itself to scroll */ body, html { overflow-x: hidden; height: auto; } /* ── 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; } /* ── 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; } /* ── 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 { 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, a[href="/service-tickets"], a[href^="/projects?selected"], 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: 769px) { .mobile-tabbar, .comment-drawer-btn, .comment-drawer, .comment-drawer-overlay, .settings-desktop-banner { display: none !important; } }