. */
.fx-subtitle-mobile-hide { display: none; }
/* Column container: row1 (logo/title diffusion + actions) is always
present; row2 (skill §5.3/§5.4's compact filter/search controls) is
appended only on pages that need it (FX_MOBILE_ROW2, dashboard.js)
and hidden via JS when empty -- both rows pin together as ONE sticky
unit, matching Marc's own "arranged horizontally on the sticky bar's
second line" instruction (the second line stays pinned, not a
separately-scrolling block). */
/* [Marc's direct report: "the fluxi logo looks like a baby... probably
an issue with size of the top bar"] Bar grown from a cramped
10px/32px-row1 footprint to real, deliberate size -- padding, row
gap, diffuse-slot height, and the logo's own font-size all scaled up
together, not just the logo in isolation (a bigger logo alone inside
an unchanged cramped bar would just clip/crowd). */
.fx-mobile-topbar {
position: sticky;
top: 0;
z-index: 30;
display: flex;
flex-direction: column;
gap: 10px;
margin: -16px -16px 16px;
padding: 14px 16px;
background: color-mix(in srgb, var(--fx-bg) 85%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--fx-border);
box-shadow: var(--fx-shadow-card);
}
.fx-mobile-topbar-row1 {
display: flex;
align-items: center;
/* [Inquiry 256, follow-up] Marc's final call for every page: logo on
the LEFT, everything else (Export/CSV, calendar, hamburger) on the
RIGHT -- the standard app-bar layout, hamburger pinned to the trailing
corner. space-between does exactly that. (This supersedes the earlier
flex-start "collapse the gap" attempt; the middle space is inert
anyway since Inquiry 255 killed the dead-zone.) */
justify-content: space-between;
gap: 10px;
min-height: 44px;
}
/* Diffusion slot: logo and title occupy the same box, cross-fading via
the --fx-diffuse custom property (0 = logo fully solid, 1 = title
fully solid), driven by fxInitMobileChrome()'s scroll handler as a
continuous value -- a real gradual blend, not a class-toggle snap,
per the skill's own "diffuses" requirement (§2.2). */
/* [Real bug, Marc's direct report: tapping ANYWHERE on the top bar
navigated home as if the logo was tapped.] The slot was flex:1, so the
stretched across the whole left half of the bar
and every accidental tap in that dead space fired the link. It is now
sized to its own content (inline-grid, both cross-fading texts stacked
in one cell), so only the logo/title glyphs themselves are tappable --
the empty space beside them is inert. The diffusion cross-fade is
unchanged (opacity on the two stacked children). */
/* [Inquiry 255] The slot is no longer itself the . It is an inert
wrapper sized to the WIDER of the two cross-fading texts; the two texts
are now each their own sized to their own glyphs.
This closes the Inquiry-248 dead-zone that recurred here: the old single
stretched to the title width, so on every page whose title is wider
than "FLUXI" the empty space beside the (narrower) logo, at top-of-
scroll, still fired the home link. Now that empty space belongs to this
non-clickable div, and only the phase-active anchor is pointer-active. */
.fx-diffuse-slot {
position: relative;
height: 30px;
display: inline-grid;
align-items: center;
justify-items: start;
min-width: 0;
max-width: 62vw;
overflow: hidden;
}
.fx-diffuse-logo, .fx-diffuse-title {
grid-area: 1 / 1;
white-space: nowrap;
width: max-content;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
color: inherit;
text-decoration: none;
cursor: pointer;
/* Only the currently-shown text catches taps; the faded one (which
still occupies its grid cell) must never be a hit target, or its
box would re-create the dead-zone. Phase set in dashboard.js. */
pointer-events: none;
}
.fx-mobile-topbar[data-fx-diffuse-phase="logo"] .fx-diffuse-logo,
.fx-mobile-topbar[data-fx-diffuse-phase="title"] .fx-diffuse-title {
pointer-events: auto;
}
.fx-diffuse-logo {
font-size: 26px;
font-weight: 900;
letter-spacing: -0.01em;
opacity: calc(1 - var(--fx-diffuse, 0));
}
/* [Real bug, Marc's direct report: "the text size on the navigation
bar on mobile is small and looks out of place compared to the text
sizes on the rest of the pages"] Was 17px, an arbitrary in-between
value -- bumped to 21px to match .fx-page-header-mobile .fx-page-
title's own real mobile size exactly (line 502 above), the actual
in-page heading this text takes over from mid-scroll. Same size
before and after the cross-fade reads as one continuous heading;
a smaller size here read as a demotion/mismatch instead. */
.fx-diffuse-title {
font-size: 21px;
font-weight: 700;
opacity: var(--fx-diffuse, 0);
}
@media (prefers-reduced-motion: no-preference) {
.fx-diffuse-logo, .fx-diffuse-title { transition: opacity 60ms linear; }
}
.fx-mobile-topbar-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
/* [Real bug, Marc's direct report: "the export csv button on the sales
page is preventing the logo render in full"] FX_MOBILE_TOPBAR_PIN
(dashboard.js) moves the page's REAL #fx-sales-export/#fx-vouchers-
export button into this row unchanged -- a labeled .fx-btn-secondary
("Export CSV" text + icon, ~120px+ wide), not the 44px icon-only
shape every other control in this row already has. flex-shrink:0
above means this row never gives back space once it needs it, so the
diffuse logo/title slot (flex:1, no min-width) absorbed the entire
overflow and truncated. Collapsed to the same icon-only 44px chip as
the calendar/hamburger buttons it now sits beside -- font-size:0
hides the text label without touching the icon's own explicit
width/height classes (data-lucide SVGs are sized via attributes, not
em units, so this never shrinks the icon itself). The button's real
onclick/id/desktop appearance are completely unaffected -- this rule
only ever matches while the node lives inside .fx-mobile-topbar-
actions, i.e. only after fxSyncMobileConditionalMoves() has moved it
there for the mobile breakpoint. */
.fx-mobile-topbar-actions .fx-btn-secondary,
.fx-mobile-topbar-actions .fx-btn-primary {
width: 44px;
height: 44px;
padding: 0;
border-radius: 9999px;
font-size: 0;
gap: 0;
flex-shrink: 0;
}
/* [Marc's direct correction, interaction-quality pass: "the previous CSV
download button fix went too far... the intent has been lost... a
user should be able to look at the interface and understand: that
control downloads a CSV" -- extended, second brief: "the same
broader problem we identified with the CSV controls" applies to
Create Package too: "reduce visual clutter, not semantic meaning"]
The generic icon-only collapse above is still right for the
calendar/hamburger buttons (universally understood icons with
nothing else in the row to confuse them with, and no real "primary
action" semantics riding on them), but wrong for any PRIMARY action
control -- Export CSV and Create Package both need their intent to
survive being pinned into this row, not just their icon. These IDs
(higher specificity than the class rule above, so they win
regardless of source order) restore a compact labeled pill instead
of a bare circle: icon + a short label (Option C from Marc's own
brief -- "CSV" for export, "New Package" for create, shorter than
each one's own full desktop text but never just an icon) -- reduces
chrome without reducing meaning. aria-label carries the FULL action
text on every one of these regardless of which short label is
visually shown, for assistive tech. */
.fx-mobile-topbar-actions #fx-sales-export,
.fx-mobile-topbar-actions #fx-vouchers-export,
.fx-mobile-topbar-actions #fx-float-export,
.fx-mobile-topbar-actions #fx-packages-create {
width: auto;
height: 40px;
padding: 0 12px;
border-radius: 9999px;
font-size: 11px;
font-weight: 700;
gap: 5px;
}
.fx-mobile-topbar-actions #fx-sales-export .fx-btn-label-full,
.fx-mobile-topbar-actions #fx-vouchers-export .fx-btn-label-full,
.fx-mobile-topbar-actions #fx-float-export .fx-btn-label-full,
.fx-mobile-topbar-actions #fx-packages-create .fx-btn-label-full {
display: none;
}
.fx-mobile-topbar-actions #fx-sales-export .fx-btn-label-compact,
.fx-mobile-topbar-actions #fx-vouchers-export .fx-btn-label-compact,
.fx-mobile-topbar-actions #fx-float-export .fx-btn-label-compact,
.fx-mobile-topbar-actions #fx-packages-create .fx-btn-label-compact {
display: inline;
}
/* Overrides the pre-existing .fx-hamburger mobile rule (below, Inquiry
221 -- position:absolute against .fx-topbar as its containing block,
now moot since .fx-topbar is JS-hidden). The moved hamburger here is
a normal flex child of .fx-mobile-topbar-actions instead; specificity
(2 classes) beats the older bare .fx-hamburger rule (1 class) so this
wins regardless of source order. */
.fx-mobile-topbar .fx-hamburger {
position: static;
width: 44px;
height: 44px;
}
.fx-mobile-topbar-actions .fx-icon-btn {
width: 44px;
height: 44px;
}
/* [Skill §2.3] Deliberate scoped exception to "no arbitrary new colors" --
this is the one control meant to draw the eye first (the highest-
frequency control on the app, Marc's own framing), so it gets its own
accent distinct from the emerald system used everywhere else. */
/* 2-class specificity, deliberately -- .fx-icon-btn's own base rule
(dashboard.css, ~line 951) sets color: var(--fx-muted) at equal
specificity to a bare .fx-mobile-calendar-btn selector and sits
LATER in the file, so it would silently win on source order alone;
confirmed live (real bug caught before shipping: computed color came
back as --fx-muted, not the calendar accent, until this was scoped
one level deeper). */
.fx-mobile-topbar-actions .fx-mobile-calendar-btn { color: var(--fx-calendar-accent); }
.fx-mobile-topbar-actions .fx-mobile-calendar-btn:hover { background: color-mix(in srgb, var(--fx-calendar-accent) 16%, transparent); }
/* [Marc's direct correction] The calendar icon REPLACES each page's own
inline date-range button entirely -- it does not merely scroll to
reveal a second, still-visible control sitting right next to it.
fxMobileCalendarTap() (dashboard.js) clicks the real, hidden
.fx-rangepicker-btn directly, opening the exact same real widget
(.fx-rangepanel already renders position:fixed/viewport-centered at
this breakpoint, see further down this file -- it never depended on
its trigger button's own position, so hiding the button changes
nothing about how the real panel opens or looks). Scoped to the five
real page-LEVEL range pickers (FX_MOBILE_RANGE_CONTROL, dashboard.js).
[Marc's direct pushback, Inquiry 248] Float's own
#fx-float-history-range was previously excluded here as scoping one
History card's table rather than the whole page -- Marc reported
that distinction as exactly the visual inconsistency he meant, so it
gets the same treatment as every other page-level range control now. */
#fx-overview-range .fx-rangepicker-btn,
#ua-overview-range .fx-rangepicker-btn,
#fx-support-hub-range .fx-rangepicker-btn,
#fx-sales-range .fx-rangepicker-btn,
#fx-vouchers-range .fx-rangepicker-btn,
#fx-float-history-range .fx-rangepicker-btn {
display: none;
}
/* Real bug caught from Marc's own live report ("truncating"): Sales'
and Vouchers' range field-group was hidden with display:none, which
hides EVERY descendant regardless of its own position property --
including .fx-rangepanel, a position:fixed element that's supposed
to escape to the viewport when opened. With display:none on this
ancestor, tapping the calendar icon toggled is-open correctly but
the real panel never had a chance to render at all. Collapsed to a
real zero-size box instead (width/height:0, overflow:visible) so
.fx-rangepanel can still escape and render centered on the real
viewport exactly like Dashboard's/Usage Analytics'/Support Hub's own
(never display:none'd) range pickers already correctly do. */
.fx-field-group:has(#fx-sales-range),
.fx-field-group:has(#fx-vouchers-range) {
width: 0;
height: 0;
min-width: 0;
padding: 0;
margin: 0;
border: 0;
overflow: visible;
}
.fx-field-group:has(#fx-sales-range) > .fx-label,
.fx-field-group:has(#fx-vouchers-range) > .fx-label {
display: none;
}
/* Pages with no date-range concept at all (confirmed by direct grep,
not assumed -- 14 of the 20 dashboard pages have none) get no
calendar icon rather than a dead button that opens nothing; honest-
incompleteness precedent (DESIGN.md §4), not a fake affordance. */
.fx-mobile-calendar-btn.fx-no-range { display: none; }
/* [Skill §5.3/§5.4] Row2: real .fx-field-group nodes moved here from
each page's own .fx-card filter block (fxSyncMobileConditionalMoves(),
dashboard.js) -- desktop keeps them in their real grid position
untouched; this only fires inside this media query, on the exact
same nodes, reversibly. Horizontally scrollable rather than wrapped,
so 2-3 filters fit on one pinned line at 320px without pushing the
bar's own height around per filter count. */
/* Real regression caught before shipping: Sales' own filters card is a
dedicated .fx-card holding nothing but Date range/Package/Channel/
Sold By -- once all four move out (row2, or hidden per the calendar
consolidation above), the empty card itself stayed visible as a
blank white box with real padding. Vouchers' equivalent filter grid
lives inside the same card as its tabs/table, so it never had this
problem -- Sales' case is real and specific, not a pattern to
generalize to every page.
Real second bug this same fix caused and had to correct: display:none
hides EVERY descendant regardless of its own position property --
#fx-sales-range's own .fx-rangepanel (position:fixed) lives inside
this exact card, so hiding the card outright silently broke the
calendar consolidation above for Sales specifically (confirmed live:
.fx-rangepanel computed a real 0x0 rect with the card as
display:none, and a normal, real rect the instant it was collapsed
this way instead). Same zero-size-not-display-none technique as the
.fx-field-group fix above, for the same underlying reason. */
#fx-sales-filters-card,
/* [Marc's direct follow-up: "on the customers page the search bar
isnt in the sticky bar at all"] Same real shape as Sales' own
filters card -- #fx-customer-search moved into row2 (FX_MOBILE_ROW2,
dashboard.js) leaves this dedicated .fx-card with nothing left
inside it. Same zero-size-not-display-none collapse, same reasoning. */
#fx-customers-filters-card {
width: 0;
height: 0;
min-width: 0;
padding: 0;
margin: 0;
border: 0;
box-shadow: none;
background: transparent;
overflow: visible;
}
/* [Marc's direct report: "the void space on the vouchers page re-surfaced"]
Vouchers' filter grid lives INSIDE the tabs/table card (unlike Sales',
which is its own card collapsed above), so it can't be collapsed by
hiding a whole card. On mobile its real controls relocate to the sticky
bar (Search + Package -> row2, Export CSV -> pinned, Date range -> the
calendar icon), but the emptied grid -- plus the Export button's leftover
spacer field-group -- was left occupying an ~88px band between the
status tabs and the table header. Collapse the grid itself to zero and
hide every leftover field-group, so nothing sits in that gap. Anchored on
#fx-vouchers-app (a wrapper that never moves) + `.fx-settings-tabs + .grid`
(the filter row is the grid immediately after the status tabs), which
stays valid whether the grid holds 2 or 4 fields. The one field-group that
wraps #fx-vouchers-range is kept present-but-zero-size instead of hidden,
so its position:fixed .fx-rangepanel can still escape when the mobile
calendar icon opens it (same reason the Sales/Vouchers range field-groups
collapse rather than display:none above). */
#fx-vouchers-app .fx-settings-tabs + .grid {
display: block;
height: 0;
min-height: 0;
margin: 0;
padding: 0;
gap: 0;
overflow: visible;
}
#fx-vouchers-app .fx-settings-tabs + .grid > .fx-field-group { display: none; }
#fx-vouchers-app .fx-settings-tabs + .grid > .fx-field-group:has(#fx-vouchers-range) {
display: block;
width: 0;
height: 0;
min-width: 0;
padding: 0;
margin: 0;
border: 0;
overflow: visible;
}
/* [Marc's direct report: row2 controls "look small compared to the
room and other texts on the page... as if they can scroll"] Real
measured baseline, not a guess: the app's own .fx-select-btn is
14px/10px-14px-padding everywhere else in this codebase (desktop
filter cards, every settings page). The first mobile pass undercut
that to 12px/30px-tall/132px-capped, which is exactly why it read as
a smaller, different-feeling control than the rest of the page.
Brought up to 13px/36px -- one deliberate step below the 14px/40px
desktop-equivalent (this row is real secondary filtering, not the
page's primary action) rather than matching it exactly, and the
132px hard cap is gone so a control sizes to its own real content
instead of truncating. A right-edge fade signals real, remaining
scrollable content when a row genuinely doesn't fit (Sales' 3 real
filters can still exceed 375px) -- confirms the scroll affordance
rather than leaving an ambiguous hard-cut edge. */
.fx-mobile-topbar-row2 {
align-items: center;
gap: 10px;
overflow-x: auto;
touch-action: pan-x pan-y;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(to right, black calc(100% - 20px), transparent 100%);
}
.fx-mobile-topbar-row2::-webkit-scrollbar { display: none; }
/* [Marc's direct correction] "Let the dropdown be the button itself --
no further descriptions on the sides." The separate
sitting next to a button that already reads "All Packages" was real,
literal repetition (Package / All Packages), not a compact-chip
pairing worth keeping -- the enhanced select's own trigger button
already carries the real, current value text (fxEnhanceSelect()'s
syncLabel(), unchanged), so the field-group's separate label is
dropped entirely in row2, everywhere, not just on the search field. */
.fx-mobile-topbar-row2 .fx-field-group {
display: flex;
align-items: center;
flex-shrink: 0;
margin-bottom: 0 !important;
}
.fx-mobile-topbar-row2 .fx-label {
display: none;
}
.fx-mobile-topbar-row2 .fx-selectw,
.fx-mobile-topbar-row2 .fx-select-btn {
min-width: 0;
}
.fx-mobile-topbar-row2 .fx-select-btn {
height: 36px;
padding: 0 12px;
font-size: 13px;
}
/* Any row2 search field (Vouchers, Customers -- FX_MOBILE_ROW2's own
searchSelector entries, dashboard.js): a real icon prefixed inside
the input via padding-left + a positioned , rather than
duplicating the input -- the input itself is the same real node
with its own working oninput/keyup handler, untouched. Sized to
match row1's own 40px controls (search is this row's primary
action, not a secondary filter, so it gets the fuller size rather
than the 36px filter-chip height). Listed explicitly by id, same
convention as FX_MOBILE_RANGE_CONTROL, rather than a blanket
input[type=text] selector that could accidentally catch an
unrelated future field. */
.fx-mobile-topbar-row2 .fx-field-group:has(#fx-vouchers-search),
.fx-mobile-topbar-row2 .fx-field-group:has(#fx-customer-search) {
position: relative;
flex: 1;
min-width: 140px;
}
.fx-mobile-topbar-row2 .fx-field-group:has(#fx-vouchers-search) .fx-label,
.fx-mobile-topbar-row2 .fx-field-group:has(#fx-customer-search) .fx-label {
display: none;
}
.fx-mobile-topbar-row2 #fx-vouchers-search,
.fx-mobile-topbar-row2 #fx-customer-search {
width: 100%;
height: 40px;
padding: 0 12px 0 34px;
font-size: 14px;
}
.fx-mobile-topbar-row2-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--fx-muted);
pointer-events: none;
}
/* ---------- floating bottom nav (skill §3) ----------
Glass treatment intentionally matches .fx-sidebar-brand.is-scrolled's
already-established recipe above (Inquiry 234) rather than a new one.
Icons only, 7 destinations (Dashboard/Usage Analytics/Sales/Vouchers/
Disbursements/Packages/Settings, Marc's own additions), order matched
to FX_NAV_STRUCTURE's real sequence -- see fxInitMobileChrome().
[Marc's direct report, light-mode contrast] Real computed values, not
assumed: --fx-muted on white measures 4.76:1 -- technically clears
text AA but reads weak on a thin-stroke 20px outline icon, especially
floating over varied card content rather than a flat background.
--fx-text measures 17.85:1 light / 16.30:1 dark, comfortably strong
in both themes, so inactive icons use it instead of muted. Glass
opacity raised 80%→92% for a more reliably legible surface regardless
of what's actually scrolling underneath it.
[Marc's direct report: "icons are too small... relative to the
overall text size"] Real anchor, not a guess: this app's page-title
(the largest real text on any page) is 24px; this is a PRIMARY,
always-visible navigation element, not an inline glyph next to body
text, so it earns a size at or above that scale -- 24px glyphs
(up from a 20px w-5/h-5) in a 44px touch target, the same real
44px floor already used for row1's hamburger/calendar buttons
(dashboard.js). A 44px×7-icon row doesn't fit inside 320px with any
real margin (344px vs. 320px, checked by direct arithmetic, not
assumed) -- rather than shrinking touch targets back down to force
a fit at the one width this skill's own §7.1 explicitly calls a
validation floor and never a design target, the nav scrolls
horizontally at that narrow an edge case, with the same real
right-edge fade used on row2 above so it never reads as an
ambiguous hard cut. At 360px+ (the real majority of devices) all 7
sit with genuine room to spare. */
/* [Marc's direct report: "bottom bar background in light mode is
blending in on the page... adapt to permanent dark glass just like
on the website"] Original recipe read directly from
src/frontend/landing/index.html's own #fx-nav scrolled state:
`bg-[#0D1B2A]/80 backdrop-blur-lg border border-white/10 shadow-lg`.
[Marc's direct follow-up correction: "too dark and its color
crashing with the app... balanced to a point that its not blended
into its backgrounds but its vivid enough"] The landing page's own
recipe is tuned for a permanently-dark hero background; against the
dashboard's real light-mode surface the same near-opaque near-black
pill read as a flat, disconnected slab rather than glass. Two real
changes, not a guess: (1) the base color is now a deliberate 85%
--fx-surface (dark mode)/15% --fx-accent mix instead of plain navy
-- pulls in the app's own real emerald brand color for "vivid,"
reusing existing tokens rather than inventing a new hex value; (2)
opacity dropped 80% -> 62% so more of whatever is actually behind it
shows through (real glass, not a solid slab), while still reading as
a distinct floating element against a light page. Recomputed
contrast against the NEW tinted base, not assumed carried over:
white/80 measures 9.55:1, emerald-400 (active-state color) measures
7.34:1 -- both still comfortably past AA. */
.fx-mobile-bottom-nav {
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
z-index: 35;
display: flex;
align-items: center;
gap: 4px;
padding: 9px;
max-width: calc(100vw - 32px);
overflow-x: auto;
touch-action: pan-x pan-y;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
border-radius: 9999px;
background: color-mix(in srgb, color-mix(in srgb, #0F172A 85%, #10B981 15%) 62%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
}
/* [Real bug, Marc's direct report: "fades on the edges instead of a
uniform border tone", and "the settings icon is almost peaking out
of the pill... not balanced across different device resolutions"]
Two real, separate causes, not one: (1) the mask-image edge-fade
used to apply UNCONDITIONALLY, so a phone wide enough to fit all 7
icons with real room to spare (Marc's own "bigger phone" test) still
showed a fade baked into both edges of an otherwise non-scrolling
pill -- a uniform border reads as intentional; a fade on a
non-scrolling element reads as a rendering defect. Now applied ONLY
via .has-overflow, a class fxBuildMobileBottomNav()/resize handling
toggles from real scrollWidth>clientWidth measurement (dashboard.js),
never assumed from viewport width alone. (2) padding raised 6px->9px:
on a genuinely narrower phone where 7x44px icons truly don't fit
(this skill's own §7.1 arithmetic: 344px of icons+gaps vs. 320px of
viewport), the last icon's flat edge sat close enough to the pill's
own 9999px border-radius curve that the curve visually clipped into
it -- more end-cap padding gives the curve room to close without
touching icon content, matching the comfortable clearance already
visible on a wider phone. */
.fx-mobile-bottom-nav.has-overflow {
-webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
}
.fx-mobile-bottom-nav a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 9999px;
color: rgba(255, 255, 255, 0.8);
transition: background-color 150ms ease, color 150ms ease;
}
.fx-mobile-bottom-nav a.is-active {
background: rgba(52, 211, 153, 0.18);
color: #34D399;
}
/* [Marc's direct correction] The floating nav is used far more often
than any single page's own CTA dock, so it stays thumb-closest (its
normal bottom:18px, unmoved) on every page including Float/Packages/
Packages-Create -- the CTA dock is the one that gets pushed up clear
of it instead. See the real body.has-cta-dock .fx-cta-dock /
.fx-main overrides further down this file (same selectors as the
CTA dock's own original rule, kept together rather than duplicated
at a second breakpoint to avoid a real source-order conflict between
this file's two media queries). */
.fx-main { padding-bottom: 96px; }
/* Sidebar drawer (z-index 40, dashboard.css line ~174) covers both new
elements when open -- both stay at z-index 35/30, never compete. */
}
/* Eyebrow pill — the locked "pill/badge eyebrow label" landing pattern
(visual-system §2): uppercase, letter-spaced, above a heading. */
.fx-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 9999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--fx-accent-soft);
color: var(--fx-accent-strong);
border: 1px solid color-mix(in srgb, var(--fx-accent) 25%, transparent);
}
/* ---------- cards ---------- */
/* [Impeccable gpt-thin-border-wide-shadow, Inquiry 203/204, re-confirmed
still live and fixed at Inquiry 236] A 1px border on all four sides
paired with a wide diffuse box-shadow at rest is a known generated-UI
signature ("commit to one -- a defined edge or a soft elevation --
rather than both at once", the detector's own guidance). .fx-card is
this app's single most reused component (every page's panels/tables/
filter bars), so this one shared rule was the dominant source of most
of the 70 findings. Committed to the defined-edge half: the shadow is
dropped, --fx-border already does real, visible separation work in
both themes (a real border color against --fx-surface, not decorative)
without needing a second, largely-imperceptible soft-elevation cue on
top of it. */
.fx-card {
background: var(--fx-surface);
border: 1px solid var(--fx-border);
border-radius: var(--fx-radius-outer);
transition: background-color 200ms ease, border-color 200ms ease;
}
.fx-card-inner {
background: var(--fx-surface-inner);
border-radius: var(--fx-radius-inner);
}
.fx-stat-card {
background: var(--fx-surface);
border: 1px solid var(--fx-border);
border-radius: var(--fx-radius-outer);
padding: 20px;
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background-color 200ms ease;
}
.fx-stat-card:hover {
/* [Impeccable gpt-thin-border-wide-shadow, Inquiry 236] Same fix as
.fx-card above: the --fx-shadow-card layer is dropped, the accent
ring stays as the real hover cue. */
border-color: color-mix(in srgb, var(--fx-accent) 35%, var(--fx-border));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-accent) 8%, transparent);
transform: translateY(-1px);
}
.fx-stat-icon {
width: 40px;
height: 40px;
border-radius: var(--fx-radius-inner);
background: var(--fx-accent-soft);
color: var(--fx-accent-strong);
display: flex;
align-items: center;
justify-content: center;
}
.fx-stat-value {
font-size: 24px;
font-weight: 700;
font-family: 'Lexend', 'Inter', sans-serif;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.fx-stat-label {
font-size: 12px;
color: var(--fx-muted);
font-weight: 600;
}
.fx-stat-sub {
font-size: 11px;
color: var(--fx-muted);
margin-top: 6px;
}
/* [Inquiry 236] Usage Analytics' 2-up mobile stat grid (fx-stats-compact,
usage-analytics.html) -- tightens padding/icon/label size specifically
where cards sit at roughly half their normal mobile width, so a longer
label ("Session Engagement Time", "Network Consumption Volume") wraps to
2 lines instead of 3-4. Scoped to this marker class, not the shared
.fx-stat-card default, so the Dashboard homepage's own single-column
mobile stat cards (Net Sales/Voucher Sales/Available Balance/System
Diagnostics -- confirmed via live measurement to already render fully
within the first mobile screen, no Screen Test issue) are unaffected. */
@media (max-width: 639px) {
.fx-stats-compact .fx-stat-card { padding: 14px; }
.fx-stats-compact .fx-stat-card > div:first-child { gap: 6px; }
.fx-stats-compact .fx-stat-icon { width: 30px; height: 30px; flex-shrink: 0; }
.fx-stats-compact .fx-stat-icon svg { width: 14px; height: 14px; }
.fx-stats-compact .fx-stat-label { font-size: 11px; line-height: 1.25; }
.fx-stats-compact .fx-stat-value { font-size: 19px; }
}
/* [Inquiry 220] Net Sales card's real MTN/Airtel brand marks, replacing a
plain "MM:" text label per Marc's explicit ask. White backing chip since
both source SVGs are colour marks meant to sit on a light card, same as
how the payment portal already presents them. */
.fx-mm-badge {
display: block;
background: #fff;
border-radius: 4px;
padding: 1px;
object-fit: contain;
}
/* ---------- System Diagnostics card (dashboard home, Row 1 4th slot) ----------
Three-metric layout matching XenFi's own "System Insights" panel
(Active / CPU / Data Usage) rather than this card's old single-number
layout — Marc's direct request. On mobile this card also moves to the
FIRST position in the row via order (see the max-width query below),
ahead of Net Sales/Voucher Sales/Balance, while staying in its natural
4th position on desktop — order changes paint position only, not DOM
order, so no markup duplication or JS reordering is needed. */
.fx-diagnostics-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.fx-diagnostics-metric {
text-align: center;
padding: 8px 4px;
border-radius: var(--fx-radius-tight);
background: var(--fx-surface-inner);
}
.fx-diagnostics-metric i { color: var(--fx-muted); }
.fx-diagnostics-value {
font-size: 15px;
font-weight: 700;
font-family: 'Lexend', 'Inter', sans-serif;
font-variant-numeric: tabular-nums;
margin: 4px 0 1px;
}
.fx-diagnostics-label {
font-size: 10px;
color: var(--fx-muted);
font-weight: 600;
}
@media (max-width: 900px) {
.fx-diagnostics-card { order: -1; }
}
/* ---------- status dot / badges ---------- */
.fx-status-dot {
width: 8px;
height: 8px;
border-radius: 9999px;
background: var(--fx-accent);
display: inline-block;
position: relative;
}
.fx-status-dot.is-pulsing::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 9999px;
background: var(--fx-accent);
opacity: 0.35;
animation: fx-pulse-ring 1.8s ease-out infinite;
}
.fx-status-dot.is-offline { background: var(--fx-danger); }
.fx-status-dot.is-offline.is-pulsing::after { background: var(--fx-danger); }
@keyframes fx-pulse-ring {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(2.4); opacity: 0; }
}
.fx-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 9999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
/* A status pill is a single atomic label; it must never break across
lines (e.g. "Not checked yet" wrapping to two rows inside a narrow
mobile table cell). Safe as a shared default because pill text is
always short, and the tables that host pills already live inside an
overflow-x:auto container. [Inquiry 257 Step 1a] */
white-space: nowrap;
background: var(--fx-accent-soft);
color: var(--fx-accent-strong);
transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.fx-pill.is-muted {
background: var(--fx-surface-inner);
color: var(--fx-muted);
}
.fx-pill.is-danger {
background: var(--fx-danger-soft);
color: var(--fx-danger);
}
.fx-pill.is-warning {
background: var(--fx-warning-soft);
color: var(--fx-warning);
}
/* Interactive pills (the History/Vouchers tab strips set cursor:pointer inline) */
button.fx-pill:hover { box-shadow: 0 0 0 3px var(--fx-ring); }
/* ---------- coming soon / disabled ---------- */
.fx-coming-soon {
position: relative;
opacity: 0.6;
}
.fx-coming-soon::before {
content: '';
position: absolute;
inset: 0;
cursor: not-allowed;
z-index: 5;
}
.fx-coming-soon-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 9999px;
background: var(--fx-surface-inner);
color: var(--fx-muted);
border: 1px dashed var(--fx-border);
}
/* ---------- buttons ---------- */
.fx-btn-primary {
/* [Impeccable low-contrast, Inquiry 203/204, re-confirmed still live]
White text on the plain --fx-accent (#10B981) fill measures 2.5:1,
well under WCAG AA's 4.5:1 floor for normal-weight 14px text. The
gradient's lighter (top) stop is now #047857 (emerald-700, already
used elsewhere in this file as the darker mix target) instead of
--fx-accent -- white-on-#047857 measures ~5.5:1. Darkens the button
slightly; the emerald identity and gradient depth are unchanged. */
background: linear-gradient(180deg, #047857, color-mix(in srgb, #047857 82%, black));
color: #fff;
font-weight: 600;
font-size: 14px;
border-radius: var(--fx-radius-inner);
padding: 10px 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid color-mix(in srgb, var(--fx-accent-strong) 55%, transparent);
box-shadow: var(--fx-shadow-btn), inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.fx-btn-primary:hover:not(:disabled) {
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow: 0 4px 14px -3px color-mix(in srgb, var(--fx-accent-strong) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.fx-btn-primary:active:not(:disabled) {
transform: translateY(0) scale(0.985);
filter: brightness(0.97);
}
.fx-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.fx-btn-secondary {
background: var(--fx-surface);
color: var(--fx-text);
border: 1px solid var(--fx-border);
font-weight: 600;
font-size: 14px;
border-radius: var(--fx-radius-inner);
padding: 10px 18px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
/* [Interaction-system audit — Tier 2, standard/secondary action]
Was a full emerald recolour (border+bg+text -> accent), which made every
utility button in this vocabulary -- Export CSV AND every modal Cancel/Back,
Test Connection, Copy, etc. -- light up in the brand's confirm colour on
hover, competing with the real primary action and giving a "Cancel" the
visual language of "go". Now a neutral elevation: the border strengthens,
the surface deepens one step, and it lifts 1px with the shared neutral
shadow -- clearly interactive, clearly subordinate to .fx-btn-primary. */
.fx-btn-secondary:hover {
border-color: var(--fx-border-strong);
background: var(--fx-surface-inner);
transform: translateY(-1px);
box-shadow: var(--fx-shadow-hover);
}
/* Default (desktop/full-label) state: only the full "Export CSV" text shows.
The compact "CSV"-only variant is opt-in, switched on above only inside
.fx-mobile-topbar-actions (the pinned mobile chip). */
.fx-btn-label-compact { display: none; }
.fx-btn-secondary:active { transform: translateY(0) scale(0.985); }
/* Loading affordance: add .is-loading to either button style. */
.fx-btn-primary.is-loading, .fx-btn-secondary.is-loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.fx-btn-primary.is-loading::after, .fx-btn-secondary.is-loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: fx-spin 0.7s linear infinite;
}
.fx-btn-secondary.is-loading::after {
border-color: var(--fx-ring);
border-top-color: var(--fx-accent);
}
.fx-icon-btn {
width: 36px;
height: 36px;
border-radius: var(--fx-radius-inner);
border: 1px solid var(--fx-border);
background: var(--fx-surface);
color: var(--fx-muted);
display: flex;
align-items: center;
justify-content: center;
transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.fx-icon-btn:hover {
color: var(--fx-accent-strong);
border-color: var(--fx-accent);
background: var(--fx-accent-soft);
}
.fx-icon-btn:active { transform: scale(0.94); }
/* ---------- form fields — label above input, 12px gap, 24px between groups ---------- */
.fx-field-group { margin-bottom: 24px; }
.fx-field-group:last-child { margin-bottom: 0; }
.fx-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--fx-text);
margin-bottom: 12px;
}
.fx-input, .fx-select {
width: 100%;
background: var(--fx-surface-inner);
border: 1px solid var(--fx-border);
color: var(--fx-text);
border-radius: var(--fx-radius-inner);
padding: 10px 14px;
font-size: 14px;
transition: border-color 150ms ease, box-shadow 150ms ease, background-color 200ms ease;
}
.fx-input::placeholder { color: color-mix(in srgb, var(--fx-muted) 75%, transparent); }
.fx-input:hover:not(:disabled):not(:focus), .fx-select:hover:not(:disabled):not(:focus) {
border-color: var(--fx-border-strong);
}
.fx-input:focus, .fx-select:focus {
outline: none;
border-color: var(--fx-accent);
box-shadow: 0 0 0 3px var(--fx-ring);
}
.fx-input:disabled { opacity: 0.6; cursor: not-allowed; }
/* Kill the native number spinners (vouchers quantity etc.) */
.fx-input::-webkit-outer-spin-button, .fx-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.fx-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* ---------- OTP digit boxes (sign-in Step 2) — six individual boxes, not
one field, per Marc's own explicit convention: "matches how users read
codes, easier to spot mistakes". Boxed with a background, same radius
token as every other input (radius-inner), not an underline style. ---------- */
.fx-otp-row {
display: flex;
gap: 10px;
justify-content: space-between;
}
.fx-otp-box {
width: 100%;
aspect-ratio: 1 / 1;
max-width: 52px;
background: var(--fx-surface-inner);
border: 1px solid var(--fx-border);
color: var(--fx-text);
border-radius: var(--fx-radius-inner);
font-size: 20px;
font-weight: 700;
text-align: center;
font-variant-numeric: tabular-nums;
font-family: 'Lexend', 'Inter', sans-serif;
transition: border-color 150ms ease, box-shadow 150ms ease, background-color 200ms ease;
}
.fx-otp-box:focus {
outline: none;
border-color: var(--fx-accent);
box-shadow: 0 0 0 3px var(--fx-ring);
}
.fx-otp-box.is-invalid {
border-color: var(--fx-danger);
box-shadow: 0 0 0 3px var(--fx-danger-soft);
}
.fx-otp-box::-webkit-outer-spin-button, .fx-otp-box::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* When dashboard.js has mounted a custom widget over a native control,
the native element stays in the DOM as the value store, visually gone. */
.fx-native-hidden {
position: absolute !important;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
overflow: hidden;
clip-path: inset(50%);
}
/* ---------- custom select (mounted by dashboard.js over select.fx-select) ---------- */
.fx-selectw { position: relative; width: 100%; }
.fx-selectw.is-auto { width: auto; min-width: 160px; }
.fx-select-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: var(--fx-surface-inner);
border: 1px solid var(--fx-border);
color: var(--fx-text);
border-radius: var(--fx-radius-inner);
padding: 10px 14px;
font-size: 14px;
text-align: left;
cursor: pointer;
transition: border-color 150ms ease, box-shadow 150ms ease, background-color 200ms ease;
}
/* [Interaction-system audit — Tier 3] Enhanced-select trigger: the other
top-bar/filter control (site filters, package/channel filters). Same
neutral elevation as the calendar so the whole top-bar control family
shares one hover language. */
.fx-select-btn:hover { border-color: var(--fx-border-strong); box-shadow: var(--fx-shadow-hover); }
.fx-select-btn:disabled, .fx-select-btn.is-disabled {
opacity: 0.6;
cursor: not-allowed;
}
.fx-select-btn:disabled:hover, .fx-select-btn.is-disabled:hover { border-color: var(--fx-border); }
.fx-selectw.is-open .fx-select-btn {
border-color: var(--fx-accent);
box-shadow: 0 0 0 3px var(--fx-ring);
}
.fx-select-btn .fx-caret {
flex-shrink: 0;
color: var(--fx-muted);
transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.fx-selectw.is-open .fx-caret { transform: rotate(180deg); color: var(--fx-accent-strong); }
.fx-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 100%;
z-index: 55;
background: var(--fx-surface);
border: 1px solid var(--fx-border);
border-radius: var(--fx-radius-inner);
box-shadow: var(--fx-shadow-pop);
padding: 6px;
max-height: 280px;
overflow-y: auto;
display: none;
}
.fx-selectw.is-open .fx-menu, .fx-datew.is-open .fx-menu { display: block; animation: fx-pop-in 160ms cubic-bezier(0.34, 1.3, 0.64, 1); }
.fx-menu.drop-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
@keyframes fx-pop-in {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.fx-menu.drop-up.fx-menu, .fx-selectw.is-open .fx-menu.drop-up { animation: fx-pop-in-up 160ms cubic-bezier(0.34, 1.3, 0.64, 1); }
@keyframes fx-pop-in-up {
from { opacity: 0; transform: translateY(4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.fx-menu::-webkit-scrollbar { width: 8px; }
.fx-menu::-webkit-scrollbar-thumb { background: var(--fx-border-strong); border-radius: 8px; }
.fx-menu::-webkit-scrollbar-track { background: transparent; }
.fx-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
text-align: left;
padding: 9px 12px;
border-radius: var(--fx-radius-tight);
font-size: 13px;
font-weight: 500;
color: var(--fx-text);
cursor: pointer;
white-space: nowrap;
transition: background-color 100ms ease, color 100ms ease;
}
.fx-option:hover, .fx-option.is-hilite { background: var(--fx-surface-inner); }
.fx-option.is-selected {
background: var(--fx-accent-soft);
color: var(--fx-accent-strong);
font-weight: 600;
}
.fx-option .fx-option-check { flex-shrink: 0; opacity: 0; transform: scale(0.5); transition: opacity 120ms ease, transform 160ms cubic-bezier(0.34, 1.5, 0.64, 1); }
.fx-option.is-selected .fx-option-check { opacity: 1; transform: scale(1); }
/* [Inquiry 256] Kebab (vertical-dots) row-action menu — a shared, body-level,
position:fixed popover so a table row's actions are never clipped by the
table's own overflow-x scroll container. Replaces per-row edge icons with a
single kebab that reveals the actions as words (settings-routers Sites). */
.fx-row-menu {
position: fixed;
z-index: 60;
min-width: 184px;
background: var(--fx-surface);
border: 1px solid var(--fx-border);
border-radius: var(--fx-radius-inner);
box-shadow: var(--fx-shadow-pop);
padding: 6px;
animation: fx-pop-in 140ms cubic-bezier(0.34, 1.3, 0.64, 1);
}
.fx-row-menu-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
text-align: left;
padding: 9px 12px;
border: 0;
background: transparent;
border-radius: var(--fx-radius-tight);
font-size: 13px;
font-weight: 500;
color: var(--fx-text);
cursor: pointer;
transition: background-color 100ms ease;
}
.fx-row-menu-item:hover { background: var(--fx-surface-inner); }
.fx-row-menu-item[disabled] { opacity: 0.4; cursor: not-allowed; }
.fx-row-menu-item.is-danger { color: var(--fx-danger); }
/* ---------- custom date-picker (mounted by dashboard.js over input[type=date]) ---------- */
.fx-datew { position: relative; width: 100%; }
.fx-datew.is-auto { width: auto; min-width: 148px; }
.fx-date-btn {
width: 100%;
display: flex;
align-items: center;
gap: 9px;
background: var(--fx-surface-inner);
border: 1px solid var(--fx-border);
color: var(--fx-text);
border-radius: var(--fx-radius-inner);
padding: 10px 14px;
font-size: 14px;
text-align: left;
cursor: pointer;
white-space: nowrap;
font-variant-numeric: tabular-nums;
transition: border-color 150ms ease, box-shadow 150ms ease, background-color 200ms ease;
}
.fx-date-btn:hover { border-color: var(--fx-border-strong); }
.fx-datew.is-open .fx-date-btn {
border-color: var(--fx-accent);
box-shadow: 0 0 0 3px var(--fx-ring);
}
.fx-date-btn .fx-date-ic { color: var(--fx-muted); flex-shrink: 0; }
.fx-datew.is-open .fx-date-ic { color: var(--fx-accent-strong); }
.fx-date-btn .fx-date-placeholder { color: color-mix(in srgb, var(--fx-muted) 75%, transparent); }
.fx-cal { width: 268px; padding: 12px; max-height: none; overflow: visible; }
.fx-cal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 10px;
}
.fx-cal-title {
font-family: 'Lexend', 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
}
.fx-cal-nav {
width: 28px;
height: 28px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
color: var(--fx-muted);
cursor: pointer;
transition: background-color 120ms ease, color 120ms ease;
}
.fx-cal-nav:hover { background: var(--fx-surface-inner); color: var(--fx-accent-strong); }
.fx-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.fx-cal-dow {
text-align: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--fx-muted);
padding: 4px 0 6px;
}
.fx-cal-day {
height: 32px;
border-radius: 9px;
font-size: 12.5px;
font-weight: 500;
color: var(--fx-text);
cursor: pointer;
font-variant-numeric: tabular-nums;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 100ms ease, color 100ms ease, transform 100ms ease;
}
.fx-cal-day:hover { background: var(--fx-surface-inner); }
.fx-cal-day:active { transform: scale(0.9); }
.fx-cal-day.is-outside { color: color-mix(in srgb, var(--fx-muted) 45%, transparent); }
.fx-cal-day.is-today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fx-accent) 55%, transparent); font-weight: 700; }
.fx-cal-day.is-selected {
background: var(--fx-accent);
color: #fff;
font-weight: 700;
box-shadow: var(--fx-shadow-btn);
}
.fx-cal-foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--fx-border);
}
.fx-cal-foot button {
font-size: 11px;
font-weight: 700;
color: var(--fx-accent-strong);
padding: 4px 8px;
border-radius: 8px;
cursor: pointer;
transition: background-color 120ms ease;
}
.fx-cal-foot button:hover { background: var(--fx-accent-soft); }
/* ---------- radio / checkbox — custom-drawn, zero-markup-change ---------- */
.fx-radio-row { display: flex; flex-direction: column; gap: 10px; }
.fx-radio-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: var(--fx-radius-inner);
border: 1px solid var(--fx-border);
background: var(--fx-surface-inner);
font-size: 13px;
cursor: pointer;
transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.fx-radio-option:hover { border-color: var(--fx-border-strong); }
.fx-radio-option:has(input:checked) {
border-color: var(--fx-accent);
background: var(--fx-accent-soft);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-accent) 10%, transparent);
}
/* ---------- voucher print-design picker (vouchers.html) ---------- */
/* Real in-progress state while POST /vouchers/batch is in flight (Marc's
direct request, 2026-08-18: the previous 0.6-opacity dim + abrupt
modal-close "read like an error message, not like something being
made"). Covers the grid so no card is clickable mid-request. */
.fx-tpl-loading-overlay {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--fx-surface) 92%, transparent);
border-radius: var(--fx-radius-inner);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
z-index: 5;
}
.fx-tpl-loading-overlay.hidden { display: none; }
.fx-tpl-grid {
display: grid;
/* min(300px, 100%) instead of a bare 300px -- on a narrow phone
viewport (confirmed live down to 320px) a bare minmax(300px, 1fr)
forces a 300px-wide track even inside a narrower modal panel,
overflowing the card and clipping its own text/image at the right
edge. Capping the minimum at the container's own available width
lets a single column shrink to fit instead of forcing overflow. */
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap: 14px;
max-height: 72vh;
overflow-y: auto;
padding: 2px;
}
.fx-tpl-option {
text-align: left;
border: 1px solid var(--fx-border);
background: var(--fx-surface-inner);
border-radius: var(--fx-radius-inner);
padding: 10px;
cursor: pointer;
transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
display: flex;
flex-direction: column;
gap: 8px;
}
.fx-tpl-option:hover { border-color: var(--fx-border-strong); transform: translateY(-1px); }
.fx-tpl-option.fx-tpl-option--selected {
border-color: var(--fx-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-accent) 12%, transparent);
}
.fx-tpl-option-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fx-tpl-option-name { font-size: 13px; font-weight: 600; }
.fx-tpl-check {
width: 18px; height: 18px; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: var(--fx-accent); color: white; flex-shrink: 0;
}
.fx-tpl-option-desc { font-size: 11px; color: var(--fx-muted); line-height: 1.35; min-height: 28px; }
.fx-tpl-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-tpl-badge {
font-size: 10px; padding: 2px 7px; border-radius: 999px;
background: var(--fx-surface); border: 1px solid var(--fx-border); color: var(--fx-muted);
}
/* Real rendered preview thumbnail (D-2026-08-18-001) — a real, legible
screenshot of that template's own actual PDF output (generated by
scripts/generate_voucher_template_preview_images.py against
representative sample data, cropped to two real card rows), not a CSS
approximation. Deliberately paper-white regardless of dashboard theme,
same as how a real print preview always shows white paper; a light
border keeps the image edge visible against a white page background. */
.fx-tpl-thumb-img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
border: 1px solid #d1d5db;
background: #ffffff;
}
.fx-radio-option input[type="radio"],
.fx-package-option input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
flex-shrink: 0;
margin: 0;
border-radius: 9999px;
border: 1.5px solid var(--fx-border-strong);
background: var(--fx-surface);
display: inline-grid;
place-content: center;
cursor: pointer;
transition: border-color 150ms ease, background-color 150ms ease;
}
.fx-radio-option input[type="radio"]::before,
.fx-package-option input[type="radio"]::before {
content: '';
width: 8px;
height: 8px;
border-radius: 9999px;
background: #fff;
transform: scale(0);
transition: transform 180ms cubic-bezier(0.34, 1.6, 0.64, 1);
}
.fx-radio-option input[type="radio"]:checked,
.fx-package-option input[type="radio"]:checked {
border-color: var(--fx-accent);
background: var(--fx-accent);
}
.fx-radio-option input[type="radio"]:checked::before,
.fx-package-option input[type="radio"]:checked::before { transform: scale(1); }
/* ---------- skeleton loading (perceived performance on slow networks) ----------
Real placeholder blocks swapped in for a table's or a stat
card's value while a fetch is in flight, replaced with real content (or
a real empty/error state) once it resolves -- never left showing a
fabricated "0"/"—" that could read as real data for a moment on a slow
connection. See fxSkeletonRows() in dashboard.js for the table-row
generator this pairs with. */
@keyframes fx-skeleton-shimmer { to { background-position: -135% 0; } }
.fx-skeleton {
display: block;
border-radius: 6px;
background: linear-gradient(100deg, var(--fx-surface-inner) 30%, var(--fx-border-strong) 50%, var(--fx-surface-inner) 70%);
background-size: 250% 100%;
animation: fx-skeleton-shimmer 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.fx-skeleton { animation: none; }
}
/* ---------- skeleton shape variants (geometry only -- always combined
with .fx-skeleton, which owns paint + shimmer + reduced-motion, so every
shape below inherits the accessible behavior for free) ----------
Each variant mirrors a real component's box so the content swap is
layout-shift-free: pills are pill-shaped, amounts right-aligned bars,
codes mono-width bars, avatars circles, charts fixed-height blocks. */
.fx-sk-pill { height: 22px; border-radius: 9999px; }
.fx-sk-amount { height: 18px; margin-left: auto; }
.fx-sk-mono { height: 14px; }
.fx-sk-avatar { width: 40px; height: 40px; border-radius: 9999px; flex-shrink: 0; }
.fx-sk-chart { min-height: 220px; border-radius: 8px; }
.fx-sk-value { height: 30px; }
.fx-sk-label { height: 14px; }
/* Reserved layout for async regions: empty containers hold their final
footprint before JS runs, so first paint already reserves the space. */
#fx-revenue-bars:empty { min-height: 220px; }
#fx-chart-cpu-memory:empty, #fx-chart-traffic:empty,
#fx-chart-active-users:empty { min-height: 200px; }
#fx-recent-sales:empty { min-height: 248px; }
/* Stale-while-revalidate dimming: a re-scoped panel keeps showing its old
rows (dimmed, honestly stale) instead of flashing back to skeleton. */
.fx-stale-dimming { opacity: 0.55; transition: opacity 300ms ease; }
/* [Marc's direct report: skeleton "scale doesn't match positions", jumps on
reveal] #fx-page-skeleton (dashboard pre-auth loader) now mirrors .fx-app's
real shell so nothing shifts when the real content replaces it:
- Desktop: a 264px sidebar placeholder + a flex-1 main column, so the main
content skeleton sits exactly where the real .fx-main will.
- Mobile: the sidebar collapses (as the real one does) and a top-bar
placeholder reserves the sticky FLUXI bar's height, so cards don't jump
down ~100px on reveal. */
#fx-page-skeleton { display: flex; min-height: 100vh; min-height: 100dvh; }
.fx-skeleton-sidebar {
width: 264px;
flex-shrink: 0;
background: var(--fx-surface);
border-right: 1px solid var(--fx-border);
}
.fx-skeleton-main { flex: 1; min-width: 0; padding: 24px 24px 32px; }
.fx-skeleton-mobiletop { display: none; }
@media (max-width: 900px) {
.fx-skeleton-sidebar { display: none; }
.fx-skeleton-main { padding: 16px 16px 28px; }
.fx-skeleton-mobiletop {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.fx-skeleton-mobilesite {
height: 44px;
width: 160px;
border-radius: var(--fx-radius-inner);
margin-bottom: 6px;
}
}
.fx-skeleton-mobilesite { display: none; }
@media (max-width: 900px) { .fx-skeleton-mobilesite { display: block; } }
/* ---------- pull-to-refresh [Marc's direct report: "i cant swipe down in
mobile view to refresh across different browser types...a user may need to
refresh when they are in an area of poor internet"] ----------
The app sets `overscroll-behavior: none` on the body (stops the rubber-band
bounce), which as a side effect also disables the browser's OWN native
pull-to-refresh -- and once installed as a standalone PWA there is no
browser chrome to pull at all. So we render our own: a small floating
spinner that a downward swipe from the very top drags into view, and which
triggers a real reload past a threshold. Hidden on desktop (no touch pull
there). */
.fx-ptr {
position: fixed;
/* [Marc's screenshots, Opus pass: the pill was parked fully on-screen at
rest -- "the pull to refresh button that is almost on top of
everything" -- overlapping the logo/calendar/hamburger on every page.
Root cause: top:-50px was exactly cancelled by the resting
translateY(50px), so net Y was 0 (dead on the top edge) at rest.]
The pill now rests HIDDEN: opacity 0 and parked just above the top
edge. JS (setVisual) fades + slides it in only during an active pull,
and it never travels far enough down to reach the bottom nav. */
top: -10px;
left: 50%;
transform: translateX(-50%) translateY(0);
opacity: 0;
z-index: 60;
display: none;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 16px;
border-radius: 9999px;
background: var(--fx-surface);
border: 1px solid var(--fx-border);
box-shadow: var(--fx-shadow-pop);
color: var(--fx-muted);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
}
@media (max-width: 900px) {
.fx-ptr { display: flex; }
}
.fx-ptr.is-ready { color: var(--fx-accent); border-color: var(--fx-accent); }
.fx-ptr-spinner { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fx-ptr.is-refreshing .fx-ptr-spinner { animation: fx-ptr-spin 0.7s linear infinite; }
@keyframes fx-ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.fx-ptr.is-refreshing .fx-ptr-spinner { animation: none; }
}
/* ---------- "Install FLUXI" prompt ----------
Mounted by fxInitInstallPrompt() (dashboard.js) on `beforeinstallprompt`
(Android/Chrome/Edge) or directly on iOS Safari (which never fires that
event -- see that function's own comment). Deliberately reuses this file's
existing floating-card visual language (surface/border/shadow-pop, same
as .fx-ptr/.fx-modal) rather than inventing new decoration. Bottom-center
on mobile, clear of both the bottom-nav pill and (where present) the
floating CTA dock; a small bottom-left card on desktop. */
.fx-install-banner {
position: fixed;
z-index: 38; /* above the bottom nav (35), below any open drawer/modal (40) */
display: flex;
align-items: center;
gap: 10px;
max-width: 360px;
padding: 12px 12px 12px 14px;
background: var(--fx-surface);
border: 1px solid var(--fx-border);
border-radius: var(--fx-radius-outer);
box-shadow: var(--fx-shadow-pop);
}
.fx-install-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 9999px;
background: var(--fx-accent-soft);
color: var(--fx-accent-strong);
}
.fx-install-copy { min-width: 0; }
.fx-install-title { font-size: 13px; font-weight: 700; color: var(--fx-text); }
.fx-install-sub { font-size: 11.5px; color: var(--fx-muted); margin-top: 1px; }
.fx-install-cta {
flex-shrink: 0;
padding: 7px 14px;
border-radius: 9999px;
background: var(--fx-accent);
color: #06281F;
font-size: 12px;
font-weight: 700;
border: none;
cursor: pointer;
}
.fx-install-close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 9999px;
border: none;
background: transparent;
color: var(--fx-muted);
cursor: pointer;
}
.fx-install-close:hover { background: var(--fx-surface-inner); color: var(--fx-text); }
@media (max-width: 900px) {
.fx-install-banner {
left: 12px;
right: 12px;
bottom: 90px; /* clears the bottom-nav pill (bottom:18px + ~62px) */
max-width: none;
}
/* Pages that still carry the floating CTA dock (Float, Packages-Create)
need the banner pushed clear of THAT too -- the dock itself already
sits at bottom:84px per its own rule. */
body.has-cta-dock .fx-install-banner { bottom: 150px; }
}
@media (min-width: 901px) {
.fx-install-banner { left: 24px; bottom: 24px; }
}
/* ---------- pager (rows-per-page + first/prev/next/last) ----------
Mounted by fxCreatePager() in dashboard.js onto an empty container
below a paginated table. See that function's own header comment for
the mount contract. */
.fx-pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--fx-border);
}
.fx-pager-size { display: flex; align-items: center; gap: 10px; }
.fx-pager-size-label { font-size: 12px; color: var(--fx-muted); font-weight: 600; white-space: nowrap; }
.fx-pager .fx-selectw.is-auto { min-width: 84px; }
.fx-pager-size-select { padding: 6px 10px !important; font-size: 13px !important; }
.fx-pager-count { font-size: 12px; color: var(--fx-muted); white-space: nowrap; }
.fx-pager-nav { display: flex; align-items: center; gap: 6px; }
@media (max-width: 560px) {
.fx-pager { justify-content: center; }
.fx-pager-count { order: 3; width: 100%; text-align: center; }
}
/* ---------- table ---------- */
.fx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fx-table th {
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--fx-muted);
padding: 10px 14px;
border-bottom: 1px solid var(--fx-border);
}
.fx-table td {
padding: 12px 14px;
border-bottom: 1px solid var(--fx-border);
color: var(--fx-text);
transition: background-color 100ms ease;
}
.fx-table tr:last-child td { border-bottom: none; }
.fx-table tbody tr:hover td { background: color-mix(in srgb, var(--fx-surface-inner) 55%, transparent); }
.fx-table tbody tr:hover td:first-child { border-radius: 10px 0 0 10px; }
.fx-table tbody tr:hover td:last-child { border-radius: 0 10px 10px 0; }
/* ---------- banner ---------- */
.fx-banner {
border-radius: var(--fx-radius-outer);
padding: 16px 20px;
display: flex;
align-items: flex-start;
gap: 12px;
border: 1px solid;
}
.fx-banner.is-warning {
background: var(--fx-danger-soft);
border-color: color-mix(in srgb, var(--fx-danger) 35%, transparent);
color: var(--fx-text);
}
/* ---------- recent activity row ---------- */
.fx-activity-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--fx-border);
}
/* ---------- Recent Sales scroll panel (dashboard home) ----------
Capped-height, themed-scrollbar container — same scrollbar convention
as .fx-sidebar/.fx-menu elsewhere in this file, not a bare unstyled
browser scrollbar. 15 rows fetched per page; "Show more" appends the
next page rather than replacing, so the scroll position holds. */
/* [Marc's direct mobile report] The scroll thumb used to draw flush against
the row content (amount figures in particular) since this container had
no gutter of its own -- padding-right pushes rows in from the thumb, and
the matching negative margin-right keeps the thumb sitting at the card's
own padding edge instead of opening up a second, wider gap beyond it. */
.fx-recent-sales-scroll {
max-height: 420px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--fx-border-strong) transparent;
padding-right: 10px;
margin-right: -10px;
}
.fx-recent-sales-scroll::-webkit-scrollbar { width: 8px; }
.fx-recent-sales-scroll::-webkit-scrollbar-track { background: transparent; }
.fx-recent-sales-scroll::-webkit-scrollbar-thumb { background-color: var(--fx-border-strong); border-radius: 8px; }
.fx-sale-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--fx-border);
}
.fx-sale-row:last-child { border-bottom: none; }
.fx-sale-avatar {
width: 36px;
height: 36px;
border-radius: 9999px;
flex-shrink: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--fx-accent-soft);
color: var(--fx-accent-strong);
}
.fx-sale-avatar svg { width: 100%; height: 100%; }
.fx-sale-name { font-size: 13px; font-weight: 600; color: var(--fx-text); }
/* [Marc's direct report] Fixed 3-line layout, consistent on every device
width: name (.fx-sale-name above) / package (.fx-sale-pkgline) / everything
else (.fx-sale-subline) -- plain block paragraphs, no display:flex, so the
relative-time text wraps like normal prose instead of a flex item orphaning
its last word ("ago") onto its own line on a narrow phone. */
.fx-sale-pkgline { font-size: 11px; color: var(--fx-muted); margin-top: 1px; }
.fx-sale-subline { font-size: 11px; color: var(--fx-muted); margin-top: 1px; }
.fx-sale-subline img { vertical-align: -2px; }
/* [Marc's direct mobile report: "sales with bigger numbers may not be
viewed well"] flex-shrink:0 guarantees the figure itself is never the
thing that gives up space when a row is tight -- .fx-sale-name/.fx-sale-
meta's own min-w-0/truncate above them already shrink first, same as
before; this only makes that priority explicit rather than relying on
flex's default shrink behavior happening to land the same way. */
.fx-sale-amount { font-size: 13px; font-weight: 700; color: var(--fx-accent-strong); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
/* Recent Sales package colors [Inquiry 212] — a printed-voucher row's
ticket-icon chip takes its package's color instead of the uniform accent
green; every row (printed AND mobile-money) additionally gets a small
solid dot ahead of its meta line so package identity is never
color-only (the package name is also always printed as text right next
to the dot). See the --fx-pkg-N/-soft tokens above for the palette. */
.fx-sale-pkg-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; flex-shrink: 0; }
.fx-sale-avatar.fx-pkg-1 { background: var(--fx-pkg-1-soft); color: var(--fx-pkg-1); }
.fx-sale-avatar.fx-pkg-2 { background: var(--fx-pkg-2-soft); color: var(--fx-pkg-2); }
.fx-sale-avatar.fx-pkg-3 { background: var(--fx-pkg-3-soft); color: var(--fx-pkg-3); }
.fx-sale-avatar.fx-pkg-4 { background: var(--fx-pkg-4-soft); color: var(--fx-pkg-4); }
.fx-sale-avatar.fx-pkg-5 { background: var(--fx-pkg-5-soft); color: var(--fx-pkg-5); }
.fx-sale-avatar.fx-pkg-6 { background: var(--fx-pkg-6-soft); color: var(--fx-pkg-6); }
.fx-sale-avatar.fx-pkg-7 { background: var(--fx-pkg-7-soft); color: var(--fx-pkg-7); }
.fx-sale-pkg-dot.fx-pkg-1 { background: var(--fx-pkg-1); }
.fx-sale-pkg-dot.fx-pkg-2 { background: var(--fx-pkg-2); }
.fx-sale-pkg-dot.fx-pkg-3 { background: var(--fx-pkg-3); }
.fx-sale-pkg-dot.fx-pkg-4 { background: var(--fx-pkg-4); }
.fx-sale-pkg-dot.fx-pkg-5 { background: var(--fx-pkg-5); }
.fx-sale-pkg-dot.fx-pkg-6 { background: var(--fx-pkg-6); }
.fx-sale-pkg-dot.fx-pkg-7 { background: var(--fx-pkg-7); }
.fx-activity-row:last-child { border-bottom: none; }
/* ---------- toast (mirrors portal's system-toast) ---------- */
#fx-toast {
position: fixed;
top: 20px;
right: 20px;
max-width: 340px;
background: var(--fx-surface);
border: 1px solid var(--fx-border);
border-left: 3px solid var(--fx-toast-accent, var(--fx-accent));
border-radius: var(--fx-radius-inner);
box-shadow: var(--fx-shadow-pop);
padding: 14px;
z-index: 60;
display: flex;
align-items: flex-start;
gap: 10px;
transform: translateY(-16px) scale(0.98);
opacity: 0;
pointer-events: none;
transition: transform 260ms cubic-bezier(0.34, 1.3, 0.64, 1), opacity 200ms ease;
overflow: hidden;
}
#fx-toast.is-shown { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
#fx-toast.is-error { border-left-color: var(--fx-danger); }
/* Countdown bar injected by dashboard.js — shows time until auto-dismiss.
Inherits --fx-toast-accent from its #fx-toast parent (fxShowToast sets
it per-kind), so the drain bar always matches the border it sits under
even though this element is created dynamically after that property is
set. .is-error fallback kept for any caller that toggles the class
directly without going through fxShowToast(). */
.fx-toast-progress {
position: absolute;
left: 0;
bottom: 0;
height: 2px;
background: var(--fx-toast-accent, var(--fx-accent));
width: 100%;
transform-origin: left;
}
#fx-toast.is-error .fx-toast-progress { background: var(--fx-danger); }
#fx-toast.is-shown .fx-toast-progress { animation: fx-toast-drain 4s linear forwards; }
@keyframes fx-toast-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.fx-hamburger {
display: none;
}
@media (max-width: 900px) {
/* English reads left-to-right, so the primary page heading belongs at
the natural reading-start (left) and the nav control at the far
right of the topbar — matching XenFi's own mobile layout (Marc's
direct report) rather than the hamburger leading the title. Pulled
out of the inline flex flow entirely (rather than reordered within
it) since it needs to sit at the topbar's own far edge, past
whatever primary action button follows the title block in markup. */
/* [Inquiry 221] Mobile sticky-header sizing — keeps position:sticky from
the base rule (sticky is itself a positioned value, so it still serves
as the containing block for the absolute hamburger below) while matching
.fx-main's own 16px mobile padding for the full-bleed background. */
.fx-topbar { margin: -16px -16px 16px; padding: 16px 16px 12px; padding-right: 52px; }
.fx-hamburger {
display: flex;
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: var(--fx-radius-inner);
border: 1px solid var(--fx-border);
align-items: center;
justify-content: center;
color: var(--fx-text);
}
}
.fx-sidebar-scrim {
display: none;
}
@media (max-width: 900px) {
.fx-sidebar-scrim.is-open {
display: block;
position: fixed;
inset: 0;
background: var(--fx-scrim);
z-index: 30;
animation: fx-fade-in 200ms ease;
}
}
@keyframes fx-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* ---------- spinner (mirrors portal's real spinner) ---------- */
.fx-spinner {
border: 3px solid color-mix(in srgb, var(--fx-accent) 20%, transparent);
border-top-color: var(--fx-accent);
border-radius: 50%;
animation: fx-spin 0.9s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }
/* Rotates an inline icon in place (e.g. a lucide loader-2 in a step
checklist) -- distinct from .fx-spinner, which is a standalone ring. */
.fx-spin { animation: fx-spin 0.9s linear infinite; transform-origin: center; }
/* ---------- voucher code display (Agent PoS success state) ---------- */
.fx-voucher-code-box {
background: var(--fx-surface-inner);
border: 1.5px dashed var(--fx-accent);
border-radius: var(--fx-radius-inner);
padding: 16px;
text-align: center;
font-family: 'Lexend', 'Inter', sans-serif;
font-size: 26px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--fx-accent-strong);
}
/* ---------- checkbox row (e.g. Free Trial toggle) ---------- */
.fx-checkbox-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: var(--fx-radius-inner);
border: 1px solid var(--fx-border);
background: var(--fx-surface-inner);
font-size: 13px;
cursor: pointer;
transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.fx-checkbox-row:hover { border-color: var(--fx-border-strong); }
.fx-checkbox-row:has(input:checked) {
border-color: var(--fx-accent);
background: var(--fx-accent-soft);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-accent) 10%, transparent);
}
.fx-checkbox-row input[type="checkbox"]:not(.fx-switch) {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
flex-shrink: 0;
margin: 0;
border-radius: 6px;
border: 1.5px solid var(--fx-border-strong);
background: var(--fx-surface);
display: inline-grid;
place-content: center;
cursor: pointer;
transition: border-color 150ms ease, background-color 150ms ease;
}
.fx-checkbox-row input[type="checkbox"]:not(.fx-switch)::before {
content: '';
width: 10px;
height: 10px;
background: #fff;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
transform: scale(0);
transition: transform 180ms cubic-bezier(0.34, 1.6, 0.64, 1);
}
.fx-checkbox-row input[type="checkbox"]:not(.fx-switch):checked {
border-color: var(--fx-accent);
background: var(--fx-accent);
}
.fx-checkbox-row input[type="checkbox"]:not(.fx-switch):checked::before { transform: scale(1); }
/* Switch variant — add class="fx-switch" to a checkbox input for a pill
toggle (used for boolean on/off, e.g. the Free Trial toggle). Still a
real checkbox underneath: same events, same .checked contract. */
input[type="checkbox"].fx-switch {
appearance: none;
-webkit-appearance: none;
width: 38px;
height: 22px;
flex-shrink: 0;
margin: 0;
border-radius: 9999px;
border: 1.5px solid var(--fx-border-strong);
background: var(--fx-surface-inner);
position: relative;
cursor: pointer;
transition: background-color 200ms ease, border-color 200ms ease;
}
input[type="checkbox"].fx-switch::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 15px;
height: 15px;
border-radius: 9999px;
background: var(--fx-muted);
transition: transform 200ms cubic-bezier(0.34, 1.3, 0.64, 1), background-color 200ms ease;
}
input[type="checkbox"].fx-switch:checked {
background: var(--fx-accent);
border-color: var(--fx-accent);
}
input[type="checkbox"].fx-switch:checked::before {
background: #fff;
transform: translateX(16px);
}
/* ---------- collapsible (e.g. Advanced Options) ---------- */
.fx-collapsible-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 14px;
border-radius: var(--fx-radius-inner);
border: 1px solid var(--fx-border);
background: var(--fx-surface-inner);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: border-color 150ms ease, background-color 150ms ease;
}
.fx-collapsible-trigger:hover { border-color: var(--fx-border-strong); }
.fx-collapsible-trigger .fx-caret, .fx-collapsible-trigger [data-lucide="chevron-down"] {
transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.fx-collapsible-trigger[aria-expanded="true"] .fx-caret,
.fx-collapsible-trigger[aria-expanded="true"] [data-lucide="chevron-down"] { transform: rotate(180deg); }
.fx-collapsible-body {
padding: 16px 2px 2px;
}
/* Animated variant — wrap .fx-collapsible-body in .fx-collapsible-wrap and
toggle .is-open on the wrap (see packages-create.html reference). */
.fx-collapsible-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 260ms cubic-bezier(0.32, 0.72, 0, 1);
}
.fx-collapsible-wrap > .fx-collapsible-body { overflow: hidden; min-height: 0; }
.fx-collapsible-wrap.is-open { grid-template-rows: 1fr; }
/* ---------- modal (opt-in shared classes — see upgrade spec migration note) ---------- */
.fx-modal {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: var(--fx-scrim);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
animation: fx-fade-in 180ms ease;
}
.fx-modal.hidden { display: none; }
.fx-modal-panel {
width: 100%;
animation: fx-modal-rise 240ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes fx-modal-rise {
from { opacity: 0; transform: translateY(14px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.fx-modal.is-closing { animation: fx-fade-out 160ms ease forwards; }
.fx-modal.is-closing .fx-modal-panel { animation: fx-modal-sink 160ms ease forwards; }
@keyframes fx-fade-out { to { opacity: 0; } }
@keyframes fx-modal-sink { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (max-width: 640px) {
/* Thumb-zone: on phones, modals bottom-sheet instead of center-float. */
.fx-modal { align-items: flex-end; padding: 0; }
.fx-modal .fx-modal-panel { max-width: none !important; }
.fx-modal .fx-card {
border-radius: var(--fx-radius-outer) var(--fx-radius-outer) 0 0;
border-bottom: none;
padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
}
/* ---------- settings sub-nav tab strip (Settings sector) ---------- */
.fx-settings-tabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
border-bottom: 1px solid var(--fx-border);
margin-bottom: 24px;
}
@media (max-width: 900px) {
/* Swipe-scroll instead of wrapping to a second line — matches XenFi's
own mobile filter-tab pattern (Marc's direct report) — buttons never
stack, don't shrink, and the strip just scrolls horizontally. */
.fx-settings-tabs {
flex-wrap: nowrap;
overflow-x: auto;
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.fx-settings-tabs::-webkit-scrollbar { display: none; }
.fx-settings-tab { flex-shrink: 0; }
}
.fx-settings-tab {
position: relative;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
color: var(--fx-muted);
text-decoration: none;
margin-bottom: -1px;
border-radius: var(--fx-radius-inner) var(--fx-radius-inner) 0 0;
transition: color 150ms ease, background-color 150ms ease;
}
.fx-settings-tab::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: 0;
height: 2px;
border-radius: 2px;
background: var(--fx-accent);
transform: scaleX(0);
transition: transform 200ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
.fx-settings-tab:hover { color: var(--fx-text); background: var(--fx-surface-inner); }
.fx-settings-tab:hover::after { transform: scaleX(0.6); }
.fx-settings-tab.is-active { color: var(--fx-accent-strong); }
.fx-settings-tab.is-active::after { transform: scaleX(1); }
/* ---------- package-select cards (Agent PoS) ---------- */
.fx-package-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-radius: var(--fx-radius-inner);
border: 1.5px solid var(--fx-border);
background: var(--fx-surface-inner);
cursor: pointer;
transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.fx-package-option:hover { border-color: var(--fx-accent); transform: translateY(-1px); }
.fx-package-option.is-selected,
.fx-package-option:has(input:checked) {
border-color: var(--fx-accent);
background: var(--fx-accent-soft);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-accent) 10%, transparent);
}
/* ---------- mobile thumb-zone CTA dock (Marc's bottom-third convention) ----------
Markup: place at end of :