Mobile header — the shared band
9:41
Customers999
THE SHARED HEADER ORGANISM — feature screens COMPOSE these classes 1:1, never a hand-rolled inline-styled wrapper (the Customers templates, the mobile Contacts/Showroom shell, Leads/Analytics/Inbox). THREE stacked var(--gray-07) bands after the OS status bar: .sb-mh-tabs (SECTION TABS, padding 16/16/8 so there is breathing room beneath the tabs, with a :has(+ .sb-mh-titlebar) seam that merges only the tabs→titlebar edge) → .sb-mh-titlebar (Views toggle chip · .tb-title + optional count · icon-only .sb-daterange--icon 32×32 · icon-only funnel/Filters · '+ Add' keeps its label) → .sb-mselbar quick filters (vary per screen) — the whole region reads as ONE gray-07 band ending in a single gray-06 hairline. Content below = the white surface with full-width .sb-custlist rows. The 5th section tab is "Cal" (abbreviated from "Calendar") on mobile across every screen. Two header variants: (a) FULL (Contacts / Showroom) = .sb-mh-tabs + .sb-mh-titlebar (Views toggle + title + icon date-range + Filters + Add) + .sb-mselbar quick-filters. (b) COMPACT (Leads and other non-Contacts feature screens) = .sb-mh-tabs + ONE .sb-mselbar that packs icon-only quick-filters + Untouched (icon + count badge, not a labeled pill) + Compact on the LEFT and the icon date-range + Filters on the RIGHT (the row carries .sb-mselbar--compact: gap 4 · pad 12 · 32px icon boxes, so all 7 controls fit one 375px line) — NO Views toggle, NO title, NO Add (the desktop Leads board header has no Add — leads are created elsewhere). Rule: the Views toggle + title belong ONLY to Contacts (the one screen with a Views sheet); every other feature screen uses the compact row and must keep FEATURE PARITY with its desktop toolbar controls (Leads mobile carries date-range · All/Mine/Unassigned/Untouched · Compact · Filters, matching the desktop Leads board).