/* ============================================================================ jp-portal-mobile.css — Clinic Portal mobile layer — v1.7.17 (2026-06-11) ---------------------------------------------------------------------------- Mobile Wave 1. Desktop is UNTOUCHED by design: every rule here lives behind a max-width media query (or styles elements that only exist on mobile, like the drawer toggle + scrim injected by jp-cp-mobile-nav.js). Loads AFTER the portal's inline styles and jp-portal-tokens.css, so its equal-specificity !important rules win over the inline ≤767px icon-rail block where they must. Contents: 1 · Navigation drawer — icon rail (closed) ⇄ full labeled drawer (open) 2 · Touch targets — 44px floors on interactive elements 3 · Floating elements — tour chip · sign-off queue · tour card (bottom sheet) with safe-area insets, no overlap 4 · Modals & panels — dvh clamps + internal scroll (search · notif · detail panel · intake editor overlay) 5 · Tables — horizontal scroll + sticky first column 6 · 390px small-phone pass for the v1.7.11–15 surfaces ========================================================================== */ /* Drawer chrome exists only on mobile — inert and hidden on desktop */ #jp-mnav-toggle { display: none; } #jp-mnav-scrim { display: none; } @media (max-width: 767px) { /* ── 1 · Navigation drawer ───────────────────────────────────────────── Closed state = the existing 56px icon rail (unchanged, instantly familiar). Open state = the rail expands to a 268px labeled drawer that OVERLAYS content (#main keeps its 56px offset), under a scrim. */ #sidebar { transition: width .22s ease, min-width .22s ease; z-index: 9410; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } #jp-mnav-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 44px; margin: 8px auto 0; background: none; border: none; cursor: pointer; border-radius: 12px; } #jp-mnav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.85); transition: transform .2s ease, opacity .2s ease; } #jp-mnav-toggle:active { background: rgba(255,255,255,.08); } body.jp-drawer-open #jp-mnav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.jp-drawer-open #jp-mnav-toggle span:nth-child(2) { opacity: 0; } body.jp-drawer-open #jp-mnav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } body.jp-drawer-open #sidebar { width: 268px !important; min-width: 268px !important; box-shadow: 24px 0 60px rgba(0, 0, 0, .45); } /* restore the labels/badges the inline icon-rail block hides (body-class selectors out-specify the inline #sidebar rules) */ body.jp-drawer-open #sidebar .label, body.jp-drawer-open #sidebar .sb-label, body.jp-drawer-open #sidebar .sb-user-info { display: inline-block !important; } body.jp-drawer-open #sidebar .sb-badge { display: inline-flex !important; } body.jp-drawer-open #sidebar .sb-item { justify-content: flex-start !important; padding: 11px 14px !important; margin: 2px 8px !important; } body.jp-drawer-open #sidebar .sb-logo { justify-content: flex-start !important; padding: 14px 16px !important; } body.jp-drawer-open #sidebar .sb-user { justify-content: flex-start !important; padding: 10px 14px !important; } body.jp-drawer-open #jp-mnav-scrim { display: block; position: fixed; inset: 0; background: rgba(6, 18, 42, .52); z-index: 9405; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); } /* ── v1.7.29 · rail discipline ───────────────────────────────────────── Device QA showed the rail in a half-expanded state with the wordmark image (72px tall, wide) cut to "JetPo" and bleeding over content. 1) The closed rail is EXACTLY 56px — no in-between states. 2) The wordmark never renders in the rail; a compact JP mark does. The full wordmark returns when the drawer opens. */ /* v1.7.35 — design consolidation: the icon rail confused phones (three menus: rail + drawer + tab bar). On phones the rail is RETIRED — the tab bar is primary nav, the full drawer opens via the fixed hamburger. Desktop (>767px) untouched. */ body:not(.jp-drawer-open) #sidebar { width: 0 !important; min-width: 0 !important; max-width: 0 !important; border: none !important; overflow: hidden !important; } /* body-prefixed: the page's inline `#main{margin-left:56px!important}` loads after this sheet — higher specificity required, not just order */ body #main { margin-left: 0 !important; width: 100vw !important; } body #topbar { padding-left: 64px !important; } /* room for the fixed toggle */ #jp-mnav-toggle { position: fixed !important; top: calc(8px + env(safe-area-inset-top, 0px)) !important; left: 12px !important; z-index: 9412 !important; margin: 0 !important; background: rgba(10, 45, 110, .07) !important; border: 1px solid rgba(10, 45, 110, .16) !important; border-radius: 12px !important; } #jp-mnav-toggle span { background: #0A2D6E !important; } body.jp-drawer-open #jp-mnav-toggle { background: rgba(255, 255, 255, .10) !important; border-color: rgba(255, 255, 255, .25) !important; } body.jp-drawer-open #jp-mnav-toggle span { background: #fff !important; } body:not(.jp-drawer-open) #sidebar .sb-logo img { display: none !important; } body:not(.jp-drawer-open) #sidebar .sb-logo { justify-content: center !important; padding: 12px 0 !important; } body:not(.jp-drawer-open) #sidebar .sb-logo::before { content: "JP"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #00C9C0, #0A8FDF); color: #04102A; font-weight: 800; font-size: 13px; letter-spacing: -.02em; } body.jp-drawer-open #sidebar .sb-logo img { display: block !important; height: 34px !important; width: auto !important; margin: 0 !important; } /* tour FAB clears the 56px rail and the bottom tab bar (its own injected