/** * mobile.css — Flight61 shared design tokens + mobile re-architecture. * * Linked from EVERY page's right after style.css (?v=1 cache-bust). * All layout rules are @media-gated and additive: desktop >=1200px must render * exactly as before this file existed. Never edit style.css (unversioned) — * new shared CSS belongs here. * * Breakpoint tiers (documented as tokens below; @media cannot read var()): * phone <= 575.98px — tightened chrome, full-screen modals, 16px inputs * md <= 767.98px — table column-hide + tap-to-reveal + sticky id col * < lg <= 991.98px — bottom tab bar visible * < xl <= 1199.98px — off-canvas drawer behavior (existing sidebar seam) */ /* ========================================================================== 1. Design tokens Names match the inline :root blocks in dashboard.html / activity.html (identical values, so coexistence is safe; de-dup those inline blocks is a tracked follow-up). ========================================================================== */ :root { /* Brand — blue = primary chrome, red = emphasis (settled 2026-06-24) */ --f61-accent: #4154f1; --f61-accent-dark: #012970; --f61-accent-tint: #f6f9ff; --f61-accent-tint2: #cfe2ff; --f61-hot: #C8102E; --f61-hot-dark: #9E0B23; --f61-hot-tint: #FCEDEF; --f61-hot-tint2: #F8DDE2; --f61-ink: #3F4254; --f61-muted: #9aa3b0; --f61-line: #eceef1; --f61-link-hover: #717ff5; /* Severity — single source (mirrors debrief.css / .severity-* usage) */ --sev-critical: #dc3545; --sev-high: #fd7e14; --sev-medium: #ffc107; --sev-observation: #17a2b8; --sev-none: #6c757d; /* Spacing (4px base) */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; /* Radius / shadow */ --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --shadow-sm: 0 1px 2px rgba(1, 41, 112, .06); --shadow-md: 0 2px 8px rgba(1, 41, 112, .10); /* Fluid type scale */ --fs-xs: .75rem; --fs-sm: .875rem; --fs-body: clamp(.9375rem, .9rem + .2vw, 1rem); --fs-h1: clamp(1.25rem, 1.05rem + 1.1vw, 1.5rem); --fs-h2: clamp(1.1rem, .95rem + .8vw, 1.25rem); --fs-h3: clamp(1rem, .9rem + .5vw, 1.15rem); --touch-min: 44px; /* Breakpoints — documentation only; hand-copy the numbers into @media */ --bp-phone: 576px; /* @media (max-width: 575.98px) */ --bp-md: 768px; /* @media (max-width: 767.98px) */ --bp-lg: 992px; /* @media (max-width: 991.98px) */ --bp-xl: 1200px; /* @media (max-width: 1199.98px) */ /* Mobile chrome metrics */ --mbn-height: 56px; /* bottom tab bar */ } /* ========================================================================== 2. Mobile-first base ========================================================================== */ img, svg, video { max-width: 100%; height: auto; } .pagetitle h1 { font-size: var(--fs-h1); } .table-responsive { -webkit-overflow-scrolling: touch; } @media (max-width: 575.98px) { #main { padding: 12px; } .card { margin-bottom: .85rem; } .card-body { padding: .85rem; } .pagetitle { margin-bottom: 4px; } /* 16px input font kills iOS Safari's zoom-on-focus */ .form-control, .form-select, .form-control-sm, .form-select-sm, input, select, textarea { font-size: 16px; } /* Touch targets */ .btn { min-height: 42px; } .btn-sm { min-height: 36px; } .form-control, .form-select { min-height: var(--touch-min); } .form-control-sm, .form-select-sm { min-height: 38px; } /* Denser tables on phones */ .table > :not(caption) > * > * { padding: .4rem .5rem; font-size: .85rem; } /* Toolbars: never overflow — wrap and share the row */ .card-header, .pagetitle > .d-flex { flex-wrap: wrap; gap: .5rem; } } /* ========================================================================== 3. Header on mobile — hamburger first, logo shrinks, profile stays right ========================================================================== */ @media (max-width: 1199.98px) { .header { padding-left: 8px; } .header .toggle-sidebar-btn { order: -1; margin-right: 4px; padding: 6px 10px; /* ~44px hit box around the 32px glyph */ } .logo img { max-height: 24px; } .header-nav .nav-profile img { max-height: 32px; } } /* ========================================================================== 4. Off-canvas drawer (uses existing #sidebar + body.toggle-sidebar slide) Adds: backdrop, scroll-lock, touch targets. JS lifecycle in layout.js. z-order: bottom-bar(994) < backdrop(995) < sidebar(996) < header(997) ========================================================================== */ @media (max-width: 1199.98px) { .sidebar-backdrop { position: fixed; inset: 60px 0 0 0; /* header stays visible + tappable */ background: rgba(1, 41, 112, .45); z-index: 995; opacity: 0; visibility: hidden; transition: opacity .3s ease; } body.drawer-open .sidebar-backdrop { opacity: 1; visibility: visible; } body.drawer-open { overflow: hidden; } /* Touch-friendly nav items inside the drawer */ #sidebar .sidebar-nav > li > .nav-link { min-height: var(--touch-min); } #sidebar .nav-content a { min-height: 40px; } /* Back-to-top must not float above the open drawer */ body.drawer-open .back-to-top { display: none; } } /* ========================================================================== 5. Bottom tab bar (phone + small tablet) — built by layout.js ========================================================================== */ @media (max-width: 991.98px) { .mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; z-index: 994; background: #fff; border-top: 1px solid var(--f61-accent-tint2); box-shadow: 0 -2px 12px rgba(1, 41, 112, .08); height: calc(var(--mbn-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); } .mbn-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: var(--touch-min); border: 0; background: none; font-size: 11px; line-height: 1.2; color: #899bbd; text-decoration: none; -webkit-tap-highlight-color: transparent; } .mbn-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mbn-item i { font-size: 20px; line-height: 1; } .mbn-item.active, .mbn-item[aria-current="page"] { color: var(--f61-accent); font-weight: 600; } /* Content and footer clear the bar */ #main { padding-bottom: calc(var(--mbn-height) + env(safe-area-inset-bottom) + 16px); } #footer { margin-bottom: calc(var(--mbn-height) + env(safe-area-inset-bottom)); } /* Modal backdrop covers the bar anyway; hide it to kill dead taps */ body.modal-open .mobile-bottom-nav { display: none; } /* Back-to-top sits above the bar instead of under it */ .back-to-top { bottom: calc(var(--mbn-height) + env(safe-area-inset-bottom) + 12px); } } @media (min-width: 992px) { .mobile-bottom-nav { display: none; } } @media print { .mobile-bottom-nav, .sidebar-backdrop { display: none !important; } } /* ========================================================================== 6. Responsive tables — priority column-hide + swipe + tap-to-reveal Column hiding itself is emitted per-table by layout.js (MobileTables) from tags. This section holds the shared pieces. ========================================================================== */ @media (max-width: 767.98px) { /* Sticky identifier cells are emitted per-table by layout.js (nth-child rules with position:sticky) — nothing generic needed here. */ /* Tap-to-reveal detail row (inserted by layout.js) */ table[data-mob] tr.mob-reveal > td { background: var(--f61-accent-tint); border-top: 0; padding: .5rem .75rem .6rem; } .mob-reveal-grid { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; } .mob-reveal-grid .mob-reveal-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--f61-muted); align-self: center; white-space: nowrap; } .mob-reveal-grid .mob-reveal-value { font-size: .85rem; min-width: 0; word-break: break-word; } } /* ========================================================================== 7. Filters & toolbars ========================================================================== */ /* Active-filter count badge on the collapsed "Filters" toggle */ .filter-count-badge { display: inline-block; min-width: 1.4em; padding: .15em .45em; margin-left: .35rem; border-radius: 999px; background: var(--f61-hot); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.3; text-align: center; } .filter-count-badge:empty { display: none; } @media (max-width: 575.98px) { /* Buttons in card headers / page-title toolbars wrap and share rows */ .card-header .btn, .pagetitle .btn { flex: 1 1 auto; } } /* ========================================================================== 8. Modals — full-screen on phones `modal-fullscreen-sm-down` is added in page HTML alongside modal-xl. !important beats page-scoped overrides like garmin-log/data.html's `.modal-xl { max-width: 1140px }`. ========================================================================== */ @media (max-width: 575.98px) { .modal-dialog.modal-fullscreen-sm-down { max-width: none !important; width: 100vw !important; margin: 0 !important; } } /* ========================================================================== 9. Rule-builder (garmin-rules create/edit/view) — fixed-width strips wrap ========================================================================== */ @media (max-width: 575.98px) { .operator-select, .field-select, .value-input, .interval-input, .rate-comparison-select { min-width: 0 !important; width: 100% !important; max-width: 100% !important; } /* Any flex strip inside a condition row wraps instead of overflowing */ .condition .d-flex { flex-wrap: wrap !important; } }