/* Vortex storefront design system — used by every store-facing page (gym_system staff pages + the member portal). Modern-neutral, built off the Vortex logo palette (navy + a single calm teal accent), not a picker of animated dashboard themes — that whole system (6 themes, glow effects, satin drift) has been retired in favor of one professional identity, light by default with an automatic dark variant via prefers-color-scheme. A store's own --premium-accent (Store.primary_color) still overrides the single accent color below it, independent of this base. */ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap'); /* The design system's colour/shape/type tokens. Imported here, rather than ed per page, because premium.css is loaded by all ~108 templates while the tokens previously lived in dashboard-metrics.css which is loaded by exactly one -- so every screen except the dashboard was running a parallel palette. The --premium-* names below are now mapped onto these, which is what lets an untouched page inherit the system without editing its markup. */ @import url("vx-tokens.d280569978c2.css"); /* ========================================================================== box-sizing reset Added after the same missing reset produced three separate layout bugs: the nav rail rendering 24px taller than the viewport (height:100vh plus padding) so sign-out fell below the fold, the confirm dialog's width overshooting on a phone, and the calendar and panel grids overflowing sideways. Each was patched where it surfaced; this is the cause. Declared on the universal selector with `inherit` on descendants -- the standard form -- so a component that genuinely needs content-box can opt out on itself and have its children follow, rather than every child having to opt out too. ========================================================================== */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } :root { --premium-accent: #0e8a82; --premium-accent-soft: color-mix(in srgb, var(--premium-accent) 12%, transparent); --premium-accent-glow: color-mix(in srgb, var(--premium-accent) 24%, transparent); /* Solid accent-fill buttons with white text need a darker shade than --premium-accent itself (dark mode's brighter teal only gives ~2.3:1 against white, well under WCAG AA's 4.5:1) — mixing toward black here, instead of a fixed value, so a store's own custom primary_color (which overrides --premium-accent on , per store) darkens the same way instead of being ignored. */ --premium-accent-contrast: color-mix(in srgb, var(--premium-accent) 70%, black); /* Surfaces, text and status now resolve to the design-system tokens (vx-tokens.css) instead of a second, near-miss palette. */ --premium-bg: var(--bg); --premium-panel: var(--surface); --premium-panel-top: var(--surface); --premium-surface-2: var(--surface-2); --premium-border: var(--border); --premium-border-strong: var(--border); --premium-text: var(--text); --premium-text-muted: var(--text-2); --premium-input-bg: var(--surface-2); --premium-hover-tint: rgba(15, 28, 44, 0.05); /* Text/icon color for anything sitting on a solid accent fill (buttons, badges) -- always white against this system's single accent, in both themes, but named so it's never hand-typed. */ --premium-on-accent: #ffffff; /* Status = the design system's families, so a "success" chip on any page is the same teal as a positive delta on the dashboard. A real amber "needs attention" state stays distinct from danger -- low stock, an expiring subscription, a pending request are cautions, not errors -- and coral now exists for inventory pressure. */ --premium-success: var(--teal-2); --premium-success-bg: var(--teal-bg); --premium-success-border: var(--teal-dim); --premium-danger: var(--red-3); --premium-danger-bg: var(--red-bg); --premium-danger-border: var(--red-dim); --premium-warning: var(--amber-2); --premium-warning-bg: var(--amber-bg); --premium-warning-border: var(--amber-bd); --premium-caution: var(--coral-2); --premium-caution-bg: var(--coral-bg); --premium-caution-border: var(--coral-dim); --premium-info: var(--blue-2); --premium-info-bg: var(--blue-bg); --premium-info-border: var(--blue-dim); /* Flat by design -- no elevation shadows anywhere in the system (kept as tokens, set to 'none', rather than deleting every box-shadow declaration, so depth can still be reintroduced in one place if that's ever revisited). */ --premium-shadow: none; --premium-shadow-lg: none; --premium-ease: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-color-scheme: dark) { :root { --premium-accent: #2dbdb0; --premium-accent-soft: color-mix(in srgb, var(--premium-accent) 14%, transparent); --premium-accent-glow: color-mix(in srgb, var(--premium-accent) 28%, transparent); /* #2dbdb0 only gives ~2.3:1 contrast against white text (fails WCAG AA's 4.5:1) — this darker teal is for solid-fill buttons specifically, see the :root definition above. */ --premium-accent-contrast: #0c7d76; /* Surfaces, text and status are NOT re-declared here any more: they resolve through vx-tokens.css, which already flips itself for dark. Restating them was exactly how this file drifted into being a second palette (#0f1c2c vs the system's #0F1922). */ --premium-input-bg: var(--surface-2); --premium-hover-tint: rgba(255, 255, 255, 0.06); --premium-on-accent: #ffffff; --premium-shadow: none; --premium-shadow-lg: none; --premium-ease: cubic-bezier(0.4, 0, 0.2, 1); } } /* Manual light/dark override (settings page toggle, see vx-system.js / the theme script in _vx_sidebar.html + _vx_portal_nav.html) — an attribute selector on :root beats both the plain :root defaults and the prefers-color-scheme media query on specificity, so it wins regardless of the OS setting or source order. Store's own --premium-accent (Store.primary_color, set inline per page) still overrides the accent value here either way, same as always. */ :root[data-theme="light"] { --premium-accent: #0e8a82; --premium-accent-soft: color-mix(in srgb, var(--premium-accent) 12%, transparent); --premium-accent-glow: color-mix(in srgb, var(--premium-accent) 24%, transparent); --premium-accent-contrast: color-mix(in srgb, var(--premium-accent) 70%, black); --premium-input-bg: var(--surface-2); --premium-hover-tint: rgba(15, 28, 44, 0.05); --premium-on-accent: #ffffff; --premium-shadow: none; --premium-shadow-lg: none; --premium-ease: cubic-bezier(0.4, 0, 0.2, 1); } :root[data-theme="dark"] { --premium-accent: #2dbdb0; --premium-accent-soft: color-mix(in srgb, var(--premium-accent) 14%, transparent); --premium-accent-glow: color-mix(in srgb, var(--premium-accent) 28%, transparent); --premium-accent-contrast: #0c7d76; --premium-input-bg: var(--surface-2); --premium-hover-tint: rgba(255, 255, 255, 0.06); --premium-on-accent: #ffffff; --premium-shadow: none; --premium-shadow-lg: none; --premium-ease: cubic-bezier(0.4, 0, 0.2, 1); } .premium-page { position: relative; min-height: 100vh; background: var(--premium-bg); color: var(--premium-text); font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; display: flex; align-items: center; justify-content: center; padding: 24px; /* INHERIT, never a fixed `rtl`. Every template sets dir on from LANG. A hardcoded `direction: rtl` here overrode that on every page in the app, so picking English produced English words laid out right-to-left: the rail stayed on the right, headings stayed right-aligned, and every logical property in the system (inset-inline-start, margin-inline, text-align:start) resolved the wrong way. The whole point of writing this stylesheet in logical properties was that ONE attribute should flip it, and this declaration was what stopped it. `inherit` takes the direction from -- which is exactly where the language decides it. */ direction: inherit; } .premium-card { position: relative; width: 100%; max-width: 420px; background: var(--premium-panel); border: 0.5px solid var(--premium-border); border-radius: var(--r-card); padding: 22px 20px; box-shadow: var(--premium-shadow-lg); } .premium-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 30px; text-align: center; } .premium-logo { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 0.5px solid var(--premium-border); } .premium-logo-fallback { width: 64px; height: 64px; border-radius: 12px; border: 0.5px solid var(--premium-border); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--premium-accent); background: var(--premium-accent-soft); } .premium-store-name { font-size: 20px; font-weight: 600; letter-spacing: 0.3px; } .premium-subtitle { color: var(--premium-text-muted); font-size: 13px; } .premium-field { margin-bottom: 20px; } .premium-field label { display: block; font-size: 13px; color: var(--premium-text-muted); margin-bottom: 8px; } .premium-field input, .premium-field select { width: 100%; color-scheme: light dark; background: var(--premium-input-bg); border: 0.5px solid var(--premium-border); border-radius: 10px; padding: 12px 14px; color: var(--premium-text); font-size: 14px; font-family: inherit; box-sizing: border-box; transition: border-color 0.2s var(--premium-ease), box-shadow 0.2s var(--premium-ease); } .premium-field select option { background: var(--premium-panel); color: var(--premium-text); } .premium-field input:focus, .premium-field select:focus { outline: none; border-color: var(--premium-accent); box-shadow: 0 0 0 3px var(--premium-accent-soft); } .premium-btn { width: 100%; padding: 13px; border-radius: 10px; border: 0.5px solid var(--premium-accent); background: var(--premium-accent-soft); color: var(--premium-accent); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s var(--premium-ease), color 0.15s var(--premium-ease), transform 0.15s var(--premium-ease); } .premium-btn:hover { background: var(--premium-accent-contrast); color: #ffffff; } .premium-error { background: var(--premium-danger-bg); border: 0.5px solid var(--premium-danger-border); color: var(--premium-danger); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px; } .premium-dashboard { max-width: 640px; text-align: center; } .premium-welcome-title { font-size: 24px; font-weight: 600; margin: 6px 0 4px; } .premium-welcome-sub { color: var(--premium-text-muted); font-size: 14px; margin-bottom: 28px; } .premium-divider { height: 1px; background: var(--premium-border); margin: 26px 0; } .premium-footer-note { color: var(--premium-text-muted); font-size: 12px; } .premium-logout { display: inline-block; margin-top: 20px; color: var(--premium-text-muted); font-size: 13px; text-decoration: none; border-bottom: 0.5px solid transparent; } .premium-logout:hover { color: var(--premium-text); border-bottom-color: var(--premium-text-muted); } .premium-status-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; background: var(--premium-danger-bg); border: 0.5px solid var(--premium-danger-border); color: var(--premium-danger); font-size: 24px; } /* Wide layout — member lists, and anything else with a table/form that shouldn't be squeezed into the 420px login-card width. */ .premium-page.premium-page-wide { align-items: flex-start; padding-top: 44px; } .premium-shell { width: 100%; max-width: 880px; margin: 0 auto; position: relative; z-index: 1; } .premium-topbar { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; } .premium-back { display: inline-block; color: var(--premium-text-muted); font-size: 13px; text-decoration: none; margin-bottom: 10px; } .premium-back:hover { color: var(--premium-text); } .premium-page-title { font-size: 22px; font-weight: 600; margin: 0; } .premium-btn-sm { display: inline-block; padding: 10px 20px; border-radius: 10px; border: 0.5px solid var(--premium-accent); background: var(--premium-accent-soft); color: var(--premium-accent); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 0.15s var(--premium-ease), color 0.15s var(--premium-ease); } .premium-btn-sm:hover { background: var(--premium-accent-contrast); color: #ffffff; } .premium-search { margin-bottom: 18px; } .premium-search input { width: 100%; background: var(--premium-input-bg); border: 0.5px solid var(--premium-border); border-radius: 10px; padding: 12px 14px; color: var(--premium-text); font-size: 14px; box-sizing: border-box; transition: border-color 0.2s var(--premium-ease), box-shadow 0.2s var(--premium-ease); } .premium-search input:focus { outline: none; border-color: var(--premium-accent); box-shadow: 0 0 0 3px var(--premium-accent-soft); } /* A filter bar is a flex row, but the width:100% above applies to every input in it -- so a date field claimed a whole row to itself, which is how the payments / expenses / sales / audit-log filter bars ended up three rows tall with a stranded button. Dates have an intrinsic width; let them use it, and let a labelled .premium-field sit inline too. */ .premium-search input[type="date"] { width: auto; flex: 0 0 auto; } .premium-search .premium-field { margin-bottom: 0; flex: 0 0 auto; } .premium-search .premium-field label { margin-bottom: 4px; font-size: 12px; } .premium-search .premium-field input { width: auto; padding: 12px 14px; } .premium-table-wrap { position: relative; background: var(--premium-panel); border: var(--hair) solid var(--premium-border); border-radius: var(--r-card); /* Was overflow:hidden -- on a narrow phone that just silently CLIPPED columns that didn't fit, with no way to reach them at all (no scrollbar, nothing to swipe). overflow-x:auto lets a table wider than the screen scroll horizontally instead of losing content. */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .premium-table { width: 100%; /* Without a floor, a 6-7 column table on a 360px phone would just squeeze every column unreadably thin instead of actually scrolling -- min-width forces it to stay at a legible size, which is what makes the wrapper's overflow-x actually kick in and scroll. */ min-width: 640px; border-collapse: collapse; } .premium-table th, .premium-table td { padding: 14px 20px; /* `start`, not `right`: in an RTL page these resolve identically, so every Arabic table is byte-for-byte unchanged -- but an English one now left-aligns its columns instead of pushing them to the far edge. See .premium-page's `direction: inherit`. */ text-align: start; border-bottom: 0.5px solid var(--premium-border); font-size: 14px; } .premium-table tr:last-child td { border-bottom: none; } .premium-table th { color: var(--premium-text-muted); font-weight: 500; font-size: var(--fs-meta); } .premium-table tbody tr { transition: background 0.15s var(--premium-ease); } .premium-table tbody tr:hover { background: var(--premium-hover-tint); } .premium-table-empty { padding: 30px 18px; text-align: center; color: var(--premium-text-muted); font-size: 14px; } /* A smarter empty state -- an icon, a real sentence, and (where relevant) a direct "add" action -- instead of one flat gray line of text with nothing to do next. */ .premium-empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 24px; text-align: center; } .premium-empty-state-icon { width: 52px; height: 52px; border-radius: var(--r-tile); display: flex; align-items: center; justify-content: center; background: var(--ctx-bg, var(--premium-accent-soft)); color: var(--ctx-2, var(--premium-accent)); margin-bottom: 8px; } .premium-empty-state-title { font-size: 15px; font-weight: 600; color: var(--premium-text); } .premium-empty-state-sub { font-size: 13px; color: var(--premium-text-muted); max-width: 340px; } .premium-empty-state .vx-btn { margin-top: 10px; text-decoration: none; } .premium-link { color: var(--premium-accent); text-decoration: none; font-weight: 600; } .premium-link:hover { text-decoration: underline; } /* Name + small circular initial avatar, used in table rows and topbars — tints with the store's own accent color rather than a per-person hash, so it stays cheap (no JS) and always on-brand. */ .premium-avatar-name { display: inline-flex; align-items: center; gap: 10px; } .premium-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; background: var(--ctx-bg, var(--premium-accent-soft)); color: var(--ctx-2, var(--premium-accent)); } .premium-avatar.is-lg { width: 40px; height: 40px; font-size: 15px; } /* The system badge: radius 20 / padding 1px 7px / 11px / weight 500, borderless and dotless. It was 4px 12px / 12px / 600 with a 0.5px border and a ::before dot, which is why a status chip on any list page read visibly heavier than the same chip on the dashboard. */ .premium-badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: 500; white-space: nowrap; } .premium-badge-active { background: var(--teal-bg); color: var(--teal-2); } .premium-badge-inactive { background: var(--red-bg); color: var(--red-3); } /* "Upcoming" is a scheduled booking, so it takes the bookings family -- it used to take the store's brand accent, which made every future booking read as money-teal. */ .premium-badge-upcoming { background: var(--purple-bg); color: var(--purple-2); } .premium-badge-neutral { background: var(--n-bg); color: var(--text-2); } /* Inventory pressure is coral, not red: an item under its minimum is a restock task, not a failure. */ .premium-badge-stock { background: var(--coral-bg); color: var(--coral-2); } .premium-badge-info { background: var(--blue-bg); color: var(--blue-2); } .premium-toggle-btn { padding: 6px 14px; border-radius: var(--r-btn-sm); border: var(--hair) solid var(--premium-border); background: transparent; color: var(--premium-text-muted); font-size: 12px; cursor: pointer; /* These two keep the label intact wherever the button sits inside a flex row (member row actions put it next to a plan