/* ========================================================================== Vaboo Control — mobile layer -------------------------------------------------------------------------- EVERY rule in this file lives inside `@media (max-width: 767px)` AND is scoped to `body.vaboo-mobile` (set by src/hooks/useIsMobile.js). Both conditions must hold for anything here to apply, so the desktop layout cannot be affected by this file under any circumstance. 767px is Tailwind's `md` boundary, which the desktop UI already uses. ========================================================================== */ @media (max-width: 767px) { /* ---------- base ------------------------------------------------------ */ /* NB: no `overflow-x` here on purpose — setting it makes a scroll container and silently kills `position: sticky` for the topbar and the section bar. Wide content is contained by .vb-table-container instead. */ body.vaboo-mobile { -webkit-text-size-adjust: 100%; } body.vaboo-mobile.vb-m-nav-open { overflow: hidden; } /* ---------- top bar --------------------------------------------------- */ body.vaboo-mobile .vb-m-topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 4px; height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; background: #592373; user-select: none; } body.vaboo-mobile .vb-m-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; color: #e9d9f2; background: transparent; border: 0; } body.vaboo-mobile .vb-m-iconbtn:active { background: #4a1f5e; } body.vaboo-mobile .vb-m-iconbtn-glyph { font-size: 26px; line-height: 1; } body.vaboo-mobile .vb-m-brand { display: inline-flex; align-items: center; padding: 4px; } body.vaboo-mobile .vb-m-brand img { height: 24px; width: auto; } body.vaboo-mobile .vb-m-topbar-section { margin-left: auto; padding-right: 8px; color: #d9c3e6; font-size: 13px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; } /* ---------- drawer ---------------------------------------------------- */ body.vaboo-mobile .vb-m-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(24, 8, 32, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } body.vaboo-mobile .vb-m-scrim-open { opacity: 1; pointer-events: auto; } body.vaboo-mobile .vb-m-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 80; display: flex; flex-direction: column; width: 82vw; max-width: 300px; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); background: #ffffff; box-shadow: 0 0 24px rgba(0, 0, 0, 0.28); transform: translateX(-102%); transition: transform 0.2s ease; overflow-y: auto; } body.vaboo-mobile .vb-m-drawer-open { transform: translateX(0); } body.vaboo-mobile .vb-m-drawer-head { padding: 18px 20px; background: #592373; color: #ffffff; font-size: 15px; letter-spacing: 0.02em; } body.vaboo-mobile .vb-m-drawer-nav { display: flex; flex-direction: column; padding: 8px 0; } body.vaboo-mobile .vb-m-drawer-item { display: flex; align-items: center; min-height: 50px; padding: 0 20px; color: #374151; font-size: 15px; text-decoration: none; border-left: 3px solid transparent; } body.vaboo-mobile .vb-m-drawer-item-active { color: #592373; background: #f7f2fa; border-left-color: #8857a1; } body.vaboo-mobile .vb-m-drawer-logout { display: flex; align-items: center; min-height: 50px; margin-top: auto; padding: 0 20px; color: #6b7280; font-size: 15px; text-decoration: none; border-top: 1px solid #f1f1f4; } /* ---------- section bar (replaces the hidden sidebar) ----------------- */ body.vaboo-mobile .vb-m-page { display: flex; flex-direction: column; min-height: 0; background: #ffffff; } body.vaboo-mobile .vb-m-sectionbar { position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 50; background: #ffffff; border-bottom: 1px solid #ececf1; } body.vaboo-mobile .vb-m-sectionbtn { display: flex; align-items: center; width: 100%; min-height: 46px; padding: 6px 14px; background: #ffffff; border: 0; text-align: left; } body.vaboo-mobile .vb-m-sectionlabel { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } body.vaboo-mobile .vb-m-sectionroot { color: #9aa0ab; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } body.vaboo-mobile .vb-m-sectioncurrent { color: #374151; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.vaboo-mobile .vb-m-chev { margin-left: auto; padding-left: 10px; color: #9aa0ab; font-size: 22px; transition: transform 0.15s ease; } body.vaboo-mobile .vb-m-chev-open { transform: rotate(180deg); } body.vaboo-mobile .vb-m-sectionmenu { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; border-top: 1px solid #f3f3f6; background: #fcfcfe; } body.vaboo-mobile .vb-m-sectionitem { display: flex; align-items: center; min-height: 46px; padding: 0 14px; color: #4b5563; font-size: 14px; text-decoration: none; border-left: 3px solid transparent; } body.vaboo-mobile .vb-m-sectionitem-active { color: #592373; background: #f4ecf8; border-left-color: #bb93cf; } body.vaboo-mobile .vb-m-sectionitemlabel { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.vaboo-mobile .vb-m-notice-alert { margin-left: auto; color: #f97316; } body.vaboo-mobile .vb-m-notice-img { height: 16px; margin-left: auto; } body.vaboo-mobile .vb-m-sectionaction { padding: 10px 14px; border-top: 1px solid #f3f3f6; } body.vaboo-mobile .vb-m-content { /* room for the fixed PageControls / FormControls footer */ padding-bottom: calc(84px + env(safe-area-inset-bottom)); } /* ---------- unlock viewport-locked containers ------------------------- */ /* Desktop pins these to 100vh with an inner scroller. On mobile the URL bar makes 100vh wrong, producing a nested scroll area and clipped content, so hand scrolling back to the document. */ body.vaboo-mobile .vb-block-container { height: auto !important; max-height: none !important; overflow-y: visible !important; padding: 14px 12px 0 !important; } body.vaboo-mobile .vb-page-container { min-height: 0; } /* ---------- fixed footers -------------------------------------------- */ body.vaboo-mobile .vb-page-controls, body.vaboo-mobile .vb-form-controls { left: 0 !important; right: 0 !important; height: auto !important; min-height: 56px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important; } body.vaboo-mobile .vb-page-controls > div, body.vaboo-mobile .vb-form-controls > div { flex-wrap: wrap; gap: 8px; align-items: center; } /* ---------- forms ----------------------------------------------------- */ /* iOS zooms the viewport when focusing a control under 16px. */ body.vaboo-mobile input:not([type="checkbox"]):not([type="radio"]), body.vaboo-mobile select, body.vaboo-mobile textarea { font-size: 16px !important; min-height: 42px; } body.vaboo-mobile input[type="checkbox"], body.vaboo-mobile input[type="radio"] { width: 18px; height: 18px; } body.vaboo-mobile button, body.vaboo-mobile [role="button"] { min-height: 38px; } /* ---------- login ----------------------------------------------------- */ /* pages/Login.jsx renders before the mobile shell (App.js returns it from its own Switch), so it needs its own treatment. `w-[400px]` overflows a 390px viewport, and the logo is parked in a fixed corner at 20% opacity. */ body.vaboo-mobile .vb-login { min-height: 100dvh; padding: 32px 18px calc(32px + env(safe-area-inset-bottom)); } body.vaboo-mobile .vb-login-card { width: 100% !important; max-width: 420px; } body.vaboo-mobile .vb-login-logo { position: static !important; opacity: 1 !important; margin-bottom: 8px; } body.vaboo-mobile .vb-login-submit { min-height: 48px; } /* ---------- tables (tier 1: keep them, make them scrollable) ---------- */ body.vaboo-mobile .vb-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } body.vaboo-mobile .vb-table-view table { font-size: 12px; } body.vaboo-mobile .vb-table-view th, body.vaboo-mobile .vb-table-view td { font-size: 12px !important; line-height: 1.35 !important; } body.vaboo-mobile .vb-table-view td { padding-top: 9px !important; padding-bottom: 9px !important; } /* The sticky header offsets are calibrated for the desktop inner scroller; with the document scrolling instead they float wrongly. `relative` (not `static`) because THCol draws its cell frame with absolutely positioned ::before elements that must stay anchored to the . */ body.vaboo-mobile .vb-table-view th { position: relative !important; top: auto !important; } }