/* ============================================================ MOBILE LAYER — every rule scoped under body.is-mobile so it can never touch the desktop layout. Activated by syncMobileClass() in app-core.js at ≤640px. Purpose-built phone layouts, not shrunk desktop views. ============================================================ */ /* ---- iOS auto-zoom guard ---- Mobile Safari zooms the page when a TEXT-ENTRY control with font-size < 16px gains focus. Only text inputs/selects/textareas trigger this — buttons do NOT. So we force 16px on inputs only; buttons keep their authored sizes (forcing 16px on every .btn made small text-xs/text-sm buttons render as chunky as primary CTAs — the inconsistency the user saw). We don't set maximum-scale (that breaks pinch-zoom a11y). */ body.is-mobile input, body.is-mobile select, body.is-mobile textarea, body.is-mobile .form-input, body.is-mobile .search input { font-size: 16px !important; } /* The label-sized controls (segmented toggles, chips) don't need 16px and look oversized at it — keep those small but they aren't focusable text inputs so they don't trigger the zoom. */ body.is-mobile .seg-btn, body.is-mobile .tasks-groupby .seg-btn, body.is-mobile .mtab, body.is-mobile .badge, body.is-mobile .priority-pill, body.is-mobile .status-pill { font-size: 0.78rem !important; } /* ---- Horizontal-overflow guard ---- A single element wider than the viewport makes mobile browsers shrink ("zoom out") the whole page to fit. Clamp the shell + scroll container so stray wide content (long titles, selects, fixed bars) can never widen the document. */ /* iOS/Safari ignores overflow-x:hidden on unless clips too; clamp both and pin the width so a horizontal swipe can't reveal a blank off-screen area. */ html:has(body.is-mobile), body.is-mobile { overflow-x: hidden; max-width: 100%; width: 100%; position: relative; } body.is-mobile .app-shell, body.is-mobile .main, body.is-mobile .content-wrap { max-width: 100vw; overflow-x: hidden; } body.is-mobile .content-wrap * { max-width: 100%; } /* Tables (reports) are the one thing allowed to scroll sideways — but inside their own wrapper, not by widening the page. */ body.is-mobile .report-table { max-width: none; } /* ---- Shell: hide the desktop sidebar + its drawer, the app becomes a single column with a bottom tab bar. ---- */ body.is-mobile .sidebar, body.is-mobile .sidebar-scrim, body.is-mobile .sidebar-toggle { display: none !important; } body.is-mobile .app-shell { grid-template-columns: 1fr !important; display: block !important; } /* Bottom tab bar — primary nav. Hidden on desktop entirely. */ .mobile-tabbar { display: none; } body.is-mobile .mobile-tabbar { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 45; background: var(--surface-1); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -4px 20px -8px rgba(0,0,0,.25); align-items: stretch; justify-content: space-around; } body.is-mobile .mtab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 0 7px; background: transparent; border: 0; cursor: pointer; color: var(--text-subtle); font-size: 0.66rem; min-height: 56px; } body.is-mobile .mtab i { font-size: 1.15rem; } body.is-mobile .mtab { position: relative; } /* Active tab: accent color PLUS a top indicator bar so the active state isn't conveyed by color alone (WCAG 1.4.1). */ body.is-mobile .mtab.active { color: var(--accent); font-weight: 600; } body.is-mobile .mtab.active::before { content: ""; position: absolute; top: 0; inset-inline: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); } body.is-mobile .mtab-fab { flex: 0 0 auto; margin-top: -22px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--accent-text, #fff); box-shadow: 0 8px 20px -6px var(--accent-glow); align-self: center; } body.is-mobile .mtab-fab i { font-size: 1.3rem; } body.is-mobile .mtab-fab span { display: none; } /* Give the content room above the tab bar so the last row isn't hidden. */ body.is-mobile .content-wrap { padding: 14px 14px calc(78px + env(safe-area-inset-bottom, 0px)) !important; } /* ---- Topbar: keep a usable global search (it does client-side title search across tasks/people), drop the breadcrumb + new-task (→ FAB) + secondary icons. ---- */ body.is-mobile .topbar { /* Safe-area inset ADDED to the height (border-box would otherwise carve it out of the content area — same iPad/notch bug as style.css). */ min-height: calc(60px + env(safe-area-inset-top, 0px)); padding-inline: 12px; gap: 8px; } body.is-mobile .crumbs, body.is-mobile .topbar-newtask, body.is-mobile #changePasswordBtn, body.is-mobile #installAppBtn, body.is-mobile .topbar-status-pill { display: none !important; } /* No spacer needed — the search flexes to fill the row. */ body.is-mobile .topbar-spacer { display: none !important; } body.is-mobile .search { flex: 1 1 auto; margin: 0; max-width: none; } /* Hide the ⌘K hint on mobile (touch keyboards don't have it). */ body.is-mobile .search-kbd { display: none !important; } /* ---- Mobile "More" sheet ---- */ .mobile-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80; display: flex; align-items: flex-end; opacity: 0; transition: opacity .2s ease; } .mobile-sheet-backdrop.open { opacity: 1; } .mobile-sheet { width: 100%; background: var(--surface-1); border-radius: 20px 20px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); transition: transform .22s cubic-bezier(.32,.72,0,1); max-height: 80vh; overflow-y: auto; } .mobile-sheet-backdrop.open .mobile-sheet { transform: translateY(0); } .mobile-sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--border-strong, var(--border)); margin: 6px auto 14px; } .mobile-sheet-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--border); } .mobile-sheet-name { font-weight: 700; color: var(--text); font-size: 1rem; } .mobile-sheet-role { font-size: 0.78rem; color: var(--text-muted); } .mobile-sheet-list { display: flex; flex-direction: column; } .mobile-sheet-item { display: flex; align-items: center; gap: 14px; padding: 15px 6px; background: transparent; border: 0; cursor: pointer; color: var(--text); font-size: 0.95rem; text-align: start; border-bottom: 1px solid var(--border); } .mobile-sheet-item > i:first-child { width: 22px; text-align: center; color: var(--accent); font-size: 1.05rem; } .mobile-sheet-item span { flex: 1; } .mobile-sheet-chev { color: var(--text-subtle); font-size: 0.8rem; } .mobile-sheet-logout { width: 100%; margin-top: 14px; padding: 14px; border-radius: 12px; background: rgba(193,87,76,.12); color: var(--danger, #c1574c); border: 1px solid rgba(193,87,76,.25); font-weight: 600; cursor: pointer; } /* ---- Page headers: tighter on mobile ---- */ body.is-mobile .page-title { font-size: 1.5rem; } body.is-mobile .page-head { margin-bottom: 12px; } /* ---- Dashboard: single column, full-width cards, bigger stat tiles ---- */ body.is-mobile .today-grid, body.is-mobile .rhythm-activity-grid { grid-template-columns: 1fr !important; display: flex; flex-direction: column; gap: 14px; } body.is-mobile .mini-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; } body.is-mobile .mini-stat { padding: 14px 12px; } body.is-mobile .focus-card { padding: 18px 16px; } body.is-mobile .rhythm-num { font-size: 44px; } /* ---- Stat cards grid (dashboard scope + reports KPIs): 2-up ---- */ body.is-mobile #dashStatsGrid { grid-template-columns: repeat(2, 1fr) !important; } body.is-mobile .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; } /* ---- Tasks list: comfortable full-width rows ---- The desktop grid put status/priority/assignees in their own columns. On mobile we switch to a wrapping flex row so they flow onto a second line instead of stacking in one grid cell (which overlapped them). */ body.is-mobile .task-row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 10px; grid-template-columns: none; grid-template-areas: none; padding: 14px 12px; } /* Line 1: check + title (title takes the rest) + date trailing. */ body.is-mobile .task-row > .check { flex: 0 0 auto; order: 0; } body.is-mobile .task-row > .task-title-block { flex: 1 1 55%; min-width: 0; order: 1; } body.is-mobile .task-row > .task-date { flex: 0 0 auto; order: 2; margin-inline-start: auto; } /* Line 2: pills + assignees wrap and flow inline (no overlap). */ body.is-mobile .task-row > .status-pill { flex: 0 0 auto; order: 3; } body.is-mobile .task-row > .priority-pill { flex: 0 0 auto; order: 4; } body.is-mobile .task-row > .assignee-stack { flex: 0 0 auto; order: 5; margin-inline-start: auto; } body.is-mobile .task-title { white-space: normal; } /* Filters: stack the controls, full width */ body.is-mobile .filters-panel .grid, body.is-mobile #filtersPanel .grid { grid-template-columns: 1fr !important; } body.is-mobile .tasks-groupby { flex-wrap: wrap; } body.is-mobile .tasks-groupby .seg { width: 100%; } body.is-mobile .tasks-groupby .seg-btn { flex: 1; justify-content: center; } /* Bulk actions bar: stack as a bottom sheet clearing the 78px tab bar */ body.is-mobile #bulkActionsBar { inset-inline: 8px !important; transform: none !important; bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; flex-wrap: wrap; justify-content: center; } /* ---- Touch targets: WCAG 2.5.5 wants ≥44px. Bump the small controls that are tap-tight on a phone. ---- */ body.is-mobile .icon-btn { min-width: 44px; min-height: 44px; } body.is-mobile .cal-nav .icon-btn { width: 44px; height: 44px; } body.is-mobile .quick-complete-btn { width: 28px !important; height: 28px !important; } body.is-mobile .task-row .check { width: 26px; height: 26px; flex: 0 0 26px; } body.is-mobile .closed-toggle { min-height: 44px; } /* ---- Calendar: month grid is too dense on a phone. Shrink chips, tighten cells, and let the rail card sit on top (already stacked). ---- */ body.is-mobile .cal-toolbar { flex-wrap: wrap; gap: 8px; } body.is-mobile .cal-month-name { order: -1; width: 100%; font-size: 1.1rem; } body.is-mobile .cal-grid { font-size: 0.62rem; } body.is-mobile .cal-day { min-height: 64px; padding: 3px; } body.is-mobile .cal-chip-task { font-size: 0.6rem; padding: 1px 4px; } body.is-mobile .cal-dow { padding: 5px 2px; font-size: 0.6rem; } /* Week view's tall 7-col grid overflows a phone — let it scroll horizontally as its own scroll region rather than zooming the page. */ body.is-mobile .cal-grid.cal-grid-week { overflow-x: auto; min-width: 100%; } body.is-mobile .cal-grid.cal-grid-week .cal-day { min-width: 13vw; } /* ---- Kanban: columns sized to the viewport with snap scrolling so each column is a comfortable full-width "page" on a phone. ---- */ body.is-mobile .board-wrap { scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 16px; } body.is-mobile .board-wrap > * { scroll-snap-align: center; flex: 0 0 88vw; min-width: 88vw; } /* ---- Reports tables: allow horizontal scroll instead of squashing ---- */ body.is-mobile .report-table { font-size: 0.78rem; } body.is-mobile .report-table th, body.is-mobile .report-table td { padding: 9px 10px; } /* ---- Members grid: single column ---- */ body.is-mobile .members-grid, body.is-mobile [class*="members"][class*="grid"] { grid-template-columns: 1fr !important; } /* ---- Consistency pass (audit follow-up) ---- Several screens use raw Tailwind markup the mobile layer didn't reach, so paddings/sizes clashed page-to-page. Normalise here. */ /* Members / permissions wide tables: scroll inside their own box rather than overflowing the page (they had no overflow wrapper). */ body.is-mobile .content-wrap table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Modal/detail bodies authored with Tailwind p-6 (24px) → match the 14px page rhythm used everywhere else on mobile. */ body.is-mobile .modal-content .p-6 { padding: 16px !important; } /* Headings authored as text-2xl/3xl (members, permissions) → match the .page-title size used on the token-based screens. */ body.is-mobile .content-wrap h1.text-2xl, body.is-mobile .content-wrap h1.text-3xl, body.is-mobile .content-wrap .text-2xl.font-bold { font-size: 1.5rem !important; } /* Raw Tailwind cards on the lower dashboard (p-5) → align to the 16px card padding the token cards use on mobile. */ body.is-mobile .content-wrap .rounded-xl.border.p-5, body.is-mobile .content-wrap .rounded-2xl.border.p-5 { padding: 16px !important; } /* Task-detail action buttons + new/edit panel footer: keep the panel body padding in step with the rest (was 22px). */ body.is-mobile .task-panel-body, body.is-mobile .task-panel-foot { padding-inline: 16px; } /* ---- Modals → full-screen sheets on mobile ---- */ body.is-mobile .modal-backdrop { padding: 0; align-items: stretch; } body.is-mobile .modal-content { max-width: 100% !important; width: 100% !important; max-height: 100% !important; height: 100%; border-radius: 0; /* Clear the iOS status bar / notch at the top and the home indicator at the bottom — without this the × button + title rendered behind the time/battery. */ padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } /* Same for the slide-in task panel (new/edit) which is also full-height. */ body.is-mobile .task-panel { padding-top: env(safe-area-inset-top, 0px); } /* Close (×) button: a comfortable 44px tap target that always sits on top and receives the tap (the inner icon won't swallow it). */ body.is-mobile .close-modal { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 2; } body.is-mobile .close-modal > * { pointer-events: none; } /* Task side-panel (new/edit task) → full screen on mobile */ body.is-mobile .task-panel { width: 100% !important; max-width: 100% !important; border-radius: 0; } /* Account / Security cards: full width */ body.is-mobile .security-cards { max-width: 100% !important; } /* Appearance popover: center as a small sheet rather than a tiny top-anchored card */ body.is-mobile #appearancePopover { position: fixed !important; inset-inline: 14px !important; top: auto !important; bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; }