/* ── Mobile Shell v2 ──────────────────────────────────────────────────────────
All rules are scoped to xs/sm/md tiers (max-width 1023.98px mirrors --bp-lg).
Desktop (lg/xl/xxl >= 1024) is pixel-frozen - no rules here touch it.
Media queries cannot deref CSS vars, so we use the literal 1023.98px.
─────────────────────────────────────────────────────────────────────────── */
/* xs/sm/md tier (max-width 1023.98px mirrors --bp-lg). Media queries cannot deref CSS vars. */
@media (max-width: 1023.98px) {
/* ── Variables ── */
:root {
--mth-h: 56px;
--mbt-h: 60px;
--mbt-safe: env(safe-area-inset-bottom, 0px);
}
/* ── Horizontal-scroll lock (xs/sm/md) ─────────────────────────────────────
Belt-and-suspenders: clip horizontal overflow at every layer between the
viewport and the page body. html/body alone is not enough on this layout
because Radzen's RadzenLayout / RadzenBody / RadzenRow chain inserts wrapper
divs that participate in horizontal scroll independently of when their
descendants overshoot, plus .jbf-page-card has overflow:clip vertically but
can still let inner table content widen its parent on touch. !important
ensures feature CSS (PaginatedTable / GridWithPreviewWorkspace / per-page
sheets) can't override it. Vertical scroll is intentionally untouched.
Desktop is unaffected - this entire block only fires at xs/sm/md.
Use 100% (not 100vw) because 100vw includes the document scrollbar on some
Chromium-based webviews and would itself be a hair wider than the viewport.
IMPORTANT - why html uses clip instead of hidden:
CSS spec: when overflow-x is set to anything except "visible" or "clip",
overflow-y silently converts from "visible" to "auto". overflow-x: clip
is the one value that does NOT trigger this conversion, so stays
as a pure viewport rather than becoming a scroll container. This is
critical for iOS Safari: if gains an implicit overflow-y: auto,
iOS treats it as an inner scroll container (not the native document
scroll), and touch-drag on pages that rely on document-level scroll
(e.g. /dashboard with height:auto shell) is silently swallowed with no
visible movement.
Same reasoning for .jbf-shell and .jbf-shell__body: two-level-nav.css
intentionally sets overflow: visible on both at mobile breakpoints so
/dashboard can use a single document-level scroll (shell grows with
content). Applying overflow-x: hidden !important here overrode that
intent and gave both elements an implicit overflow-y: auto, creating
ghost scroll containers that captured iOS touch gestures and did
nothing with them (content never overflows a height:auto element).
.rz-layout, .rz-body, .jbf-main, and .jbf-page-card are safe to
keep hidden because they do NOT have the "overflow: visible release"
in their mobile overrides. */
html {
overflow-x: clip !important;
max-width: 100% !important;
}
body {
overflow-x: hidden !important;
max-width: 100% !important;
}
.rz-layout,
.rz-body,
.jbf-main,
.jbf-page-card {
max-width: 100% !important;
overflow-x: hidden !important;
}
/* RadzenRow uses negative gutter margins (margin-left/right: -8px) which on a
child that's already 100vw pushes the row 16px wider than the viewport.
Zero those gutters on mobile so the row stays inside the column. The row's
internal columns keep their own padding and look fine without the negative
margin compensation. */
.jbf-main .rz-row {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ── Top header ──
Mobile counterpart of AppHeader.razor's .app-header chrome. Same 4px
plum bottom border + drop shadow so the brand "underline" reads
identically across desktop and mobile (single source: tokens in
site.css, applied in two visual hosts). */
.mth-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--mth-h);
padding: 0 12px;
background: #fff;
border-bottom: 4px solid var(--jbf-plum);
box-shadow: 0 4px 10px rgba(125, 91, 129, 0.28);
position: sticky;
top: 0;
z-index: 200;
width: 100%;
}
.mth-logo-link { display: flex; align-items: center; }
.mth-logo { height: 36px; width: 72px; object-fit: contain; }
.mth-actions {
display: flex;
align-items: center;
gap: 6px;
}
.mth-icon-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: transparent;
color: #2f3a40;
cursor: pointer;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
transition: background-color .15s ease;
-webkit-tap-highlight-color: transparent;
}
.mth-icon-btn:hover { background: rgba(125,91,129,.10); }
.mth-icon-btn:active { background: rgba(125,91,129,.18); }
/* Primary action squares - Create Tags + My QR Code.
Filled plum rounded-square (8px radius) per the Figma spec. Both share
the same treatment so they read as the user's two main action entry
points alongside the icon-only Search and the circular Avatar. */
.mth-square-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 8px;
background: var(--jbf-plum, #7d5b81);
color: #fff;
cursor: pointer;
flex-shrink: 0;
transition: background-color .15s ease, transform .1s ease;
-webkit-tap-highlight-color: transparent;
}
.mth-square-btn:hover { background: #6a4d6e; }
.mth-square-btn:active {
background: #58405b;
transform: translateY(1px);
}
.mth-square-btn:focus-visible {
outline: 2px solid var(--jbf-plum, #7d5b81);
outline-offset: 2px;
}
/* Neutral variant - used for secondary square actions (e.g. QR code) so a
row of square buttons doesn't read as two competing primaries. Light
gray fill with a dark icon, matching the Search/Avatar visual weight. */
.mth-square-btn--neutral {
background: #f1f3f5;
color: #2f3a40;
border: 1px solid #e3e6e8;
}
.mth-square-btn--neutral:hover { background: #e9ecef; }
.mth-square-btn--neutral:active { background: #dee2e6; transform: translateY(1px); }
.mth-square-btn--neutral:focus-visible {
outline: 2px solid #adb5bd;
outline-offset: 2px;
}
/* Location picker - neutral square button between QR and Bell */
.mth-location-picker {
display: inline-flex;
align-items: center;
}
.mth-location-picker .generic-dropdown {
display: inline-flex;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
position: relative;
}
/* Neutral square - matches mth-square-btn--neutral (QR code button) */
.mth-location-picker .dropdown-control {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #e3e6e8 !important;
background: #f1f3f5 !important;
border-radius: 8px !important;
color: #2f3a40;
cursor: pointer;
flex-shrink: 0;
transition: background-color .15s ease, transform .1s ease;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.mth-location-picker .dropdown-control:hover {
background: #e9ecef !important;
}
.mth-location-picker .dropdown-control:active {
background: #dee2e6 !important;
transform: translateY(1px);
}
.mth-location-picker .dropdown-control svg {
width: 20px;
height: 20px;
color: #2f3a40;
flex-shrink: 0;
}
/* Purple dot - shows when a location is selected */
.mth-location-picker--active .dropdown-control::after {
content: '';
position: absolute;
bottom: 6px;
right: 5px;
width: 9px;
height: 9px;
background: #7D5B81;
border-radius: 50%;
border: 2px solid #f1f3f5;
pointer-events: none;
}
/* Pin icon turns plum when a location is active */
.mth-location-picker--active .dropdown-control svg {
color: #7D5B81;
}
.mth-location-picker .dropdown-menu {
right: 0;
left: auto;
width: auto !important;
min-width: 240px;
/* The trigger is a 40px icon button anchored to the right of the
mobile header. Menu drops down anchored to the trigger's right edge
and extends leftward, so the arrow must point near the right edge
of the menu (over the icon), not toward the center/left.
!important required - GenericDropdown writes the variable INLINE
via its `style` attribute (default "80%"), and inline declarations
beat any external selector without !important. Scope is limited to
.mth-location-picker so only the mobile header picker is affected. */
--drop-down-content-position: calc(100% - 30px) !important;
}
/* Avatar - uses the lighter mauve so it doesn't compete with the plum
Create Tags FAB sitting two slots to the left. When the user has a
profile photo (.mth-avatar--photo) the background is hidden behind
the ![]()
so this color only shows on the initials fallback. */
.mth-avatar {
background: var(--jbf-mauve, #a282a6);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
overflow: hidden;
padding: 0;
}
.mth-avatar:hover { background: #8a6f8e; }
.mth-avatar:active { background: #735a77; }
/* Photo variant - when the user has a profile picture, the ![]()
fills the
40x40 circle and the purple initials background is hidden behind it.
Mirrors the desktop .header-avatar-img treatment so mobile and desktop
feel like the same product. */
.mth-avatar--photo { background: transparent; }
.mth-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
/* ── Bottom tab bar ── */
.mbt-bar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(var(--mbt-h) + var(--mbt-safe));
padding-bottom: var(--mbt-safe);
background: #fff;
border-top: 1px solid #e0e0e0;
z-index: 200;
box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.mbt-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
text-decoration: none;
color: #8a8a8a;
font-size: 10px;
font-weight: 500;
padding: 8px 4px;
transition: color .15s;
-webkit-tap-highlight-color: transparent;
}
.mbt-tab.is-active { color: #D23C77; }
.mbt-icon { font-size: 20px; }
.mbt-label { line-height: 1; }
/* Push main content above the bottom bar */
.jbf-shell__body { padding-bottom: calc(var(--mbt-h) + var(--mbt-safe)); }
/* Push Freshworks launcher above the bottom tab bar.
Actual element: