/* ============================================================================= HELIOS · Liquid Glass theme for FluxUI / Livewire (wbap_api) ----------------------------------------------------------------------------- Drop-in global stylesheet. Re-skins the whole admin app by overriding FluxUI's own theming hooks — no per-component edits required. HOW IT WORKS ------------ FluxUI is already token-driven. Every accent surface reads its color from the CSS variable `--color-accent` (+ `--color-accent-content` / `--color-accent-foreground`), and every component exposes a stable `data-flux-*` attribute. This file: 1. Defines the Liquid-Glass design tokens (--panel-*, --accent, --link …). 2. Re-points FluxUI's `--color-accent*` at the HELIOS magenta. 3. Lays a glass surface treatment over the real `data-flux-*` elements (sidebar, buttons, inputs, tables, cards, modals, links). INSTALL ------- 1. Put this file at resources/css/helios-glass.css 2. Import it AFTER Flux's styles so these rules win, e.g. in app.css: @import 'tailwindcss'; @import '../../vendor/livewire/flux/dist/flux.css'; @import './helios-glass.css'; (or enqueue it last in your layout ). 3. Theme switching: • Dark / light — works with Flux's native `.dark` class on , OR an explicit `data-theme="dark|light"` on /. • Variation — set `data-variation="a|b|c"` on /: a = Aurora (soft, vivid, large radii) b = Frost (flat, tight radii, hairline borders) c = Refined (Apple-like; DEFAULT if unset) Backdrop-filter is used heavily; it degrades gracefully where unsupported. ============================================================================= */ /* --------------------------------------------------------------------------- 1 · DESIGN TOKENS --------------------------------------------------------------------------- */ /* Shared (theme-agnostic) -------------------------------------------------- */ :root { --accent: #ff2d92; --accent-2: #e0117a; --accent-soft: rgba(255,45,146,.16); --accent-grad: linear-gradient(160deg, var(--accent), var(--accent-2)); --glass-blur: blur(42px) saturate(185%); /* Default geometry = Refined (variation c). Overridden per variation below. */ --radius-panel: 18px; --radius-card: 16px; --radius-control:11px; --sidebar-margin:10px; --sidebar-radius:18px; --nav-bar-w: 0px; /* --- Bridge into FluxUI's own accent system (themes everything) --- */ --color-accent: var(--accent); --color-accent-content: var(--accent); --color-accent-foreground: #ffffff; } /* DARK surface tokens — Flux `.dark` class OR data-theme="dark" ------------- */ html.dark, [data-theme="dark"] { --bg-base:#08070c; --glow-1:rgba(236,16,122,.22); --glow-2:rgba(124,80,255,.16); --glow-3:rgba(40,120,255,.13); --text-1:rgba(255,255,255,.96); --text-2:rgba(255,255,255,.58); --text-3:rgba(255,255,255,.38); --panel-bg:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); --panel-border:rgba(255,255,255,.08); --content-panel-bg:rgba(255,255,255,.022); --panel-shadow:0 8px 30px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08); --sidebar-bg:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); --hover-bg:rgba(255,255,255,.085); --control-bg:rgba(255,255,255,.055); --control-border:rgba(255,255,255,.12); --divider:rgba(255,255,255,.06); --accent-glow:0 4px 16px rgba(255,45,146,.3),inset 0 1px 0 rgba(255,255,255,.35); --nav-active-bg:linear-gradient(160deg,rgba(255,45,146,.2),rgba(255,45,146,.08)); --nav-active-border:rgba(255,45,146,.3); --nav-active-text:#ff7ab8; --green-bg:rgba(48,209,88,.17); --green-text:#67e08e; --green-border:rgba(48,209,88,.32); --red-bg:rgba(255,69,58,.16); --red-text:#ff8178; --red-border:rgba(255,69,58,.34); --red-btn:linear-gradient(160deg,#ff5b52,#dc352b); --red-glow:0 6px 20px rgba(255,69,58,.4),inset 0 1px 0 rgba(255,255,255,.32); --avatar:linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,.2)); --link:#56a8ff; /* Opaque fill for the sticky campaigns row-actions column (§7.2). Must be SOLID — a row's surface is the translucent --panel-bg gradient over near-black, so without an opaque fill the scrolled Name/List text bleeds through the pinned column. Sampled to the composited dark glass. */ --table-sticky-bg:#15141a; --table-sticky-hover-bg:#1b1a21; } /* LIGHT surface tokens — Flux default (no .dark) OR data-theme="light" ------ */ html:not(.dark):not([data-theme="dark"]), [data-theme="light"] { --bg-base:#e9ebf3; --glow-1:rgba(236,16,122,.14); --glow-2:rgba(124,80,255,.12); --glow-3:rgba(40,120,255,.1); --text-1:#16161f; --text-2:rgba(22,22,38,.62); --text-3:rgba(22,22,38,.42); --panel-bg:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.56)); --panel-border:rgba(255,255,255,.75); --content-panel-bg:rgba(255,255,255,.42); --panel-shadow:0 8px 28px rgba(60,65,95,.1),inset 0 1px 0 rgba(255,255,255,.9); --sidebar-bg:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.5)); --hover-bg:rgba(255,255,255,.62); --control-bg:rgba(255,255,255,.55); --control-border:rgba(255,255,255,.8); --divider:rgba(30,30,60,.07); --accent-glow:0 4px 16px rgba(255,45,146,.28),inset 0 1px 0 rgba(255,255,255,.55); --nav-active-bg:linear-gradient(160deg,rgba(255,45,146,.15),rgba(255,45,146,.06)); --nav-active-border:rgba(255,45,146,.26); --nav-active-text:#d40f73; --green-bg:rgba(40,170,85,.16); --green-text:#178043; --green-border:rgba(40,170,85,.34); --red-bg:rgba(225,55,45,.13); --red-text:#c0322a; --red-border:rgba(225,55,45,.3); --red-btn:linear-gradient(160deg,#ff5b52,#dc352b); --red-glow:0 6px 18px rgba(225,55,45,.32),inset 0 1px 0 rgba(255,255,255,.4); --avatar:linear-gradient(150deg,rgba(255,255,255,.95),rgba(220,220,235,.7)); --link:#0a6fd6; /* Opaque sticky-actions fill (§7.2) — solid light surface matching the glass composite. */ --table-sticky-bg:#f6f7fb; --table-sticky-hover-bg:#ffffff; } /* VARIATION a · AURORA — soft, vivid, large radii --------------------------- */ [data-variation="a"] { --radius-panel:26px; --radius-card:20px; --radius-control:14px; --sidebar-margin:14px; --sidebar-radius:26px; --nav-bar-w:0px; } [data-variation="a"].dark, [data-variation="a"][data-theme="dark"] { --bg-base:#070509; --glow-1:rgba(236,16,122,.26); --glow-2:rgba(124,80,255,.20); --glow-3:rgba(40,120,255,.15); --panel-bg:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.035)); --panel-border:rgba(255,255,255,.14); --panel-shadow:0 12px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18); --sidebar-bg:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025)); --accent-glow:0 8px 26px rgba(255,45,146,.5),inset 0 1px 0 rgba(255,255,255,.45); --nav-active-bg:linear-gradient(160deg,rgba(255,45,146,.24),rgba(255,45,146,.10)); --nav-active-border:rgba(255,45,146,.42); } [data-variation="a"]:not(.dark):not([data-theme="dark"]) { --bg-base:#e7e9f2; --panel-bg:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.5)); --panel-border:rgba(255,255,255,.85); --panel-shadow:0 14px 44px rgba(70,70,120,.16),inset 0 1px 0 rgba(255,255,255,.95); --nav-active-bg:linear-gradient(160deg,rgba(255,45,146,.2),rgba(255,45,146,.08)); --nav-active-border:rgba(255,45,146,.32); } /* VARIATION b · FROST — flat, tight radii, hairline borders ----------------- */ [data-variation="b"] { --radius-panel:14px; --radius-card:12px; --radius-control:9px; --sidebar-margin:0px; --sidebar-radius:0px; --nav-bar-w:3px; --accent-glow:0 3px 12px rgba(255,45,146,.28),inset 0 1px 0 rgba(255,255,255,.32); --red-glow:0 2px 8px rgba(255,69,58,.22),inset 0 1px 0 rgba(255,255,255,.22); } [data-variation="b"].dark, [data-variation="b"][data-theme="dark"] { --glow-1:rgba(236,16,122,.16); --glow-2:rgba(150,150,170,.08); --glow-3:rgba(80,90,140,.1); --panel-bg:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03)); --sidebar-bg:linear-gradient(180deg,rgba(20,20,28,.55),rgba(16,16,22,.5)); --panel-shadow:0 6px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1); --nav-active-bg:linear-gradient(160deg,rgba(255,45,146,.14),rgba(255,45,146,.05)); } [data-variation="b"]:not(.dark):not([data-theme="dark"]) { --glow-1:rgba(236,16,122,.1); --glow-2:rgba(150,150,170,.06); --glow-3:rgba(80,90,140,.07); --panel-bg:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.66)); --sidebar-bg:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.62)); --panel-shadow:0 6px 22px rgba(70,70,120,.12),inset 0 1px 0 rgba(255,255,255,.9); --nav-active-bg:linear-gradient(160deg,rgba(255,45,146,.13),rgba(255,45,146,.05)); } /* VARIATION c · REFINED is the :root default (already set above) ------------ */ /* --------------------------------------------------------------------------- 2 · GLOBAL CANVAS The app shell gets the deep base color + an ambient mesh glow behind it. `[data-flux-main]` is FluxUI's main content region; `body` is the fallback. --------------------------------------------------------------------------- */ body { background: var(--bg-base) !important; color: var(--text-1); } body::before { content: ""; position: fixed; inset: -10%; z-index: 0; pointer-events: none; background: radial-gradient(900px 720px at 10% 4%, var(--glow-1), transparent 60%), radial-gradient(1000px 820px at 92% 14%, var(--glow-2), transparent 60%), radial-gradient(900px 760px at 50% 100%, var(--glow-3), transparent 62%); animation: hg-floatmesh 22s ease-in-out infinite; } @keyframes hg-floatmesh { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%,-2%,0) scale(1.06); } } /* Paint too so the rubber-band/overscroll area shows the glass canvas, never a flat white strip. */ html { background: var(--bg-base) !important; } /* App-shell top bar (FluxUI grid-area:header) — must ALWAYS read as part of the canvas, with no colour change at any scroll position. Flux ships it with a solid bg (bg-zinc-900) + a grey border-b; we strip all of it to fully transparent. NOTE: do NOT put a backdrop-filter here — the ambient glow (body::before) is position:fixed, so a blur/saturate over it frosts that band into a visible grey strip that drifts against the fixed glow as you scroll (the "goes grey on scroll" bug). The bar scrolls away with the content (sticky top:auto never actually pins), so nothing scrolls under it and plain transparent is all it needs. */ [class*="grid-area:header"] { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* App-shell content column — float it as a glass island with the SAME gutter + radius as the sidebar, instead of letting the header + main bleed flush into the top + right window edges. This is the fix for the lopsided "padding": before, the sidebar floated with a 10px gutter while the content slammed into the top (0px) and right (~scrollbar) edges. Now the two read as balanced floating panels. Selector targets the Flux grid column that holds [grid-area:header] + [grid-area:main]; the margin/radius reuse the sidebar tokens so the two stay in lockstep across every theme + variation. */ body > div.flex > div.grow { margin: var(--sidebar-margin) var(--sidebar-margin) var(--sidebar-margin) 0 !important; border: 1px solid var(--panel-border) !important; border-radius: var(--sidebar-radius) !important; background: var(--content-panel-bg) !important; } /* --------------------------------------------------------------------------- 3 · SIDEBAR → [data-flux-sidebar] (renders as ) --------------------------------------------------------------------------- */ [data-flux-sidebar] { background: var(--sidebar-bg) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--panel-border) !important; border-radius: var(--sidebar-radius); margin: var(--sidebar-margin); box-shadow: var(--panel-shadow); color: var(--text-1); } /* Nav items */ [data-flux-sidebar-item] { color: var(--text-2) !important; border-radius: var(--radius-control) !important; transition: background .18s, color .18s; } [data-flux-sidebar-item]:hover { background: var(--hover-bg) !important; color: var(--text-1) !important; } /* Active / current item — the glass accent pill */ [data-flux-sidebar-item][data-current] { background: var(--nav-active-bg) !important; border: 1px solid var(--nav-active-border) !important; color: var(--nav-active-text) !important; position: relative; } /* Frost variation: left accent bar instead of filled pill */ [data-variation="b"] [data-flux-sidebar-item][data-current]::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: var(--nav-bar-w); height: 60%; border-radius: 0 3px 3px 0; background: var(--accent); } [data-flux-sidebar-item][data-current] svg { color: var(--nav-active-text) !important; } /* Sidebar group toggles (the expandable dropdowns: Mailcoach, SMS, WhatsApp, Comms Journey). These are clickable nav, not passive section labels — style them like the direct nav items (bright --text-2, hover lift) so they read as prominent. The leading icon + chevron inherit the text colour, so they brighten with it. */ [data-flux-sidebar] [data-flux-sidebar-group] > button, [data-flux-sidebar] summary { color: var(--text-2) !important; border-radius: var(--radius-control) !important; transition: background .18s, color .18s; } [data-flux-sidebar] [data-flux-sidebar-group] > button:hover, [data-flux-sidebar] summary:hover { background: var(--hover-bg) !important; color: var(--text-1) !important; } [data-flux-sidebar] [data-flux-sidebar-group] > button svg, [data-flux-sidebar] summary svg { color: currentColor !important; } /* Brand wordmark */ [data-flux-sidebar] [data-flux-brand] { color: var(--text-1) !important; } /* --------------------------------------------------------------------------- 4 · BUTTONS → [data-flux-button] FluxUI variants set their own bg classes; we override the meaningful ones. --------------------------------------------------------------------------- */ /* Primary — the accent gradient + glow */ [data-flux-button][data-flux-group-target] { border-radius: var(--radius-control) !important; } [data-flux-button].bg-\[var\(--color-accent\)\], /* primary (class form) */ [data-flux-button][variant="primary"], button[data-flux-button][type="submit"]:not([variant="ghost"]):not([variant="subtle"]):not([variant="outline"]):not([variant="filled"]) { background: var(--accent-grad) !important; color: #fff !important; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: var(--accent-glow) !important; } /* Outline / filled — glass control */ [data-flux-button].bg-white, [data-flux-button].dark\:bg-zinc-700, [data-flux-button][variant="outline"], [data-flux-button][variant="filled"] { background: var(--control-bg) !important; color: var(--text-1) !important; border: 1px solid var(--control-border) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } [data-flux-button][variant="outline"]:hover, [data-flux-button][variant="filled"]:hover { background: var(--hover-bg) !important; } /* Ghost / subtle */ [data-flux-button][variant="ghost"], [data-flux-button][variant="subtle"] { color: var(--text-2) !important; } [data-flux-button][variant="ghost"]:hover, [data-flux-button][variant="subtle"]:hover { background: var(--hover-bg) !important; color: var(--text-1) !important; } /* Danger */ [data-flux-button].bg-red-500, [data-flux-button][variant="danger"] { background: var(--red-btn) !important; color: #fff !important; box-shadow: var(--red-glow) !important; border: 1px solid rgba(0,0,0,.06) !important; } /* --------------------------------------------------------------------------- 5 · FORM CONTROLS → [data-flux-control] (inputs, selects, textareas) --------------------------------------------------------------------------- */ input[data-flux-control], textarea[data-flux-control], select[data-flux-control], [data-flux-input] input { background: var(--control-bg) !important; border: 1px solid var(--control-border) !important; border-radius: var(--radius-control) !important; color: var(--text-1) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } input[data-flux-control]::placeholder, textarea[data-flux-control]::placeholder { color: var(--text-3) !important; } input[data-flux-control]:focus, textarea[data-flux-control]:focus, select[data-flux-control]:focus, [data-flux-input] input:focus { outline: none !important; border-color: var(--nav-active-border) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; } input[data-flux-control][data-invalid], [data-flux-input] input[data-invalid] { border-color: var(--red-border) !important; } /* Checkboxes / radios / switch pick up the accent automatically via --color-accent, but nudge the switch track for contrast on glass */ [data-flux-control][role="switch"][aria-checked="true"] { background: var(--accent) !important; } /* --------------------------------------------------------------------------- 6 · CARDS & PANELS → [data-flux-card] --------------------------------------------------------------------------- */ [data-flux-card] { background: var(--panel-bg) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--panel-border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--panel-shadow) !important; color: var(--text-1); } /* --------------------------------------------------------------------------- 7 · TABLES → [data-flux-table] --------------------------------------------------------------------------- */ [data-flux-table] { background: var(--panel-bg) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--panel-border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--panel-shadow) !important; overflow: hidden; } [data-flux-table] thead th, [data-flux-columns] [data-flux-column] { color: var(--text-3) !important; border-bottom: 1px solid var(--divider) !important; background: transparent !important; } [data-flux-table] tbody tr, [data-flux-rows] [data-flux-row] { border-bottom: 1px solid var(--divider) !important; } [data-flux-table] tbody tr:hover, [data-flux-rows] [data-flux-row]:hover { background: var(--hover-bg) !important; } [data-flux-table] td, [data-flux-cell] { color: var(--text-1) !important; } /* Roomier rows — Flux ships cells at py-3 (12px), which reads cramped next to the target design. Bump the vertical rhythm so list tables breathe (≈68px rows). Vertical padding ONLY, so Flux's px-3 / first:ps-0 / last:pe-0 horizontal edge alignment is left untouched. Covers both Flux table APIs (/ and the [data-flux-columns]/[data-flux-rows] cell attributes). */ [data-flux-table] thead th, [data-flux-table] tbody td, [data-flux-table] [data-flux-cell], [data-flux-columns] [data-flux-column], [data-flux-rows] [data-flux-row] [data-flux-cell] { padding-top: 18px !important; padding-bottom: 18px !important; } /* …and inset the first/last columns from the rounded card edge. Flux ships first:ps-0 / last:pe-0, which crams the leading link + trailing actions hard against the card's 16px corner (the content sat ~1px off the border). Restore a comfortable gutter so content clears the rounded edge — this is the horizontal half of the "padding" the cells were missing. */ [data-flux-table] thead th:first-child, [data-flux-table] tbody td:first-child, [data-flux-table] [data-flux-cell]:first-child, [data-flux-columns] [data-flux-column]:first-child, [data-flux-rows] [data-flux-row] [data-flux-cell]:first-child { padding-left: 24px !important; } [data-flux-table] thead th:last-child, [data-flux-table] tbody td:last-child, [data-flux-table] [data-flux-cell]:last-child, [data-flux-columns] [data-flux-column]:last-child, [data-flux-rows] [data-flux-row] [data-flux-cell]:last-child { padding-right: 24px !important; } /* --------------------------------------------------------------------------- 7.2 · STICKY ROW-ACTIONS COLUMN (campaigns) → keep the ⋮ menu always in view --------------------------------------------------------------------------- */ /* The campaigns table is wider than its scroll-area (long Name/List columns), so the actions ⋮ column — Rename / Re-run / Duplicate / Delete — fell into the right-hand overflow and was invisible without horizontal scrolling. Pin the LAST column to the right edge of the scroller (the vendored ui-table-scroll-area.overflow-auto that wraps the table) so it is always visible. Scoped to .wbap-pin-actions (added to the campaigns wrapper view) and to :last-child — which on THIS table is always the actions column — so (a) no other table is affected (a global body pin would misalign the 17 other action tables, pinning a body cell under an unpinned header while scrolled), and (b) header and body share one selector → perfect alignment. The pinned cell needs an OPAQUE fill: rows are transparent over the translucent glass panel, so without --table-sticky-bg the scrolled Name/List text shows through. backdrop-filter is already none on the table (§13) → no containing-block trap; z-index 10/11 matches/exceeds Flux's native sticky (z-10) so it never loses a stacking fight, and the open ⋮ menu is a top-layer popover so it is unaffected. */ /* CRITICAL ENABLER: §7 sets `overflow:hidden` on [data-flux-table], which makes the TABLE itself a scroll container — so a sticky cell sticks to the (non-scrolling) table and never pins (verified live: the cell rendered off-screen at x=1766 in a 1728px viewport). `overflow:clip` clips the rounded card corners identically but is NOT a scroll container, so the sticky cell correctly sticks to the real horizontal scroller (the vendored ui-table-scroll-area). Scoped to campaigns only. */ .wbap-pin-actions [data-flux-table] { overflow: clip !important; } .wbap-pin-actions [data-flux-table] thead th:last-child, .wbap-pin-actions [data-flux-table] tbody td:last-child, .wbap-pin-actions [data-flux-table] [data-flux-cell]:last-child, .wbap-pin-actions [data-flux-columns] [data-flux-column]:last-child, .wbap-pin-actions [data-flux-rows] [data-flux-row] [data-flux-cell]:last-child { position: sticky; right: 0; z-index: 10; background: var(--table-sticky-bg) !important; /* Soft seam so the pinned column reads as an edge while scrolling (fades into the rounded corner). */ box-shadow: -12px 0 12px -12px rgba(0, 0, 0, .45); } /* Header above the body cells when both are pinned. */ .wbap-pin-actions [data-flux-table] thead th:last-child, .wbap-pin-actions [data-flux-columns] [data-flux-column]:last-child { z-index: 11; } /* Keep row-hover feedback on the pinned cell — its opaque fill would otherwise paint over the row's translucent --hover-bg, so the actions column wouldn't highlight together with its row. */ .wbap-pin-actions [data-flux-table] tbody tr:hover td:last-child, .wbap-pin-actions [data-flux-table] tbody tr:hover [data-flux-cell]:last-child, .wbap-pin-actions [data-flux-rows] [data-flux-row]:hover [data-flux-cell]:last-child { background: var(--table-sticky-hover-bg) !important; } /* --------------------------------------------------------------------------- 7.1 · SEGMENTED SELECTION CONTROLS → Flux radio-cards rendered as a row of equal-width buttons (e.g. the campaign Sent / Scheduled / Sending / Draft filter). --------------------------------------------------------------------------- */ /* Flux left-aligns the icon+label inside each stretched (flex-1) card, leaving a big lopsided empty gutter on the right that reads as broken padding. Centre the content so the row reads as a balanced segmented control. IMPORTANT: scope to ROW groups only via :not(.flex-col). Flux puts .flex-1 on EVERY card, stacked ones included, so an unscoped rule also hit vertical title+description card groups (e.g. the Re-run campaign modal) — forcing flex:0 0 auto on their content, which then sized to its intrinsic width, overflowed the card, and clipped the labels. Column groups now fall back to Flux's native left-aligned, shrink-to-wrap layout. */ ui-radio-group:not(.flex-col) ui-radio.flex-1 { justify-content: center !important; } ui-radio-group:not(.flex-col) ui-radio.flex-1 > div { flex: 0 0 auto !important; justify-content: center !important; } /* --------------------------------------------------------------------------- 8 · MODALS & DROPDOWNS → [data-flux-modal], [data-flux-menu] --------------------------------------------------------------------------- */ /* The visible surface is the inner native