/* Modern 2.0 design system: dark ink sidebar and hero, lime accent, Trebuchet MS, rounded white cards on a
   light grey ground. Layout pieces MudBlazor's theme does not cover; keep colours in step with GymTheme. */

/* The accent: lime by default; a gym's own colour replaces these (MainLayout, from BrandPalette), never on platform screens.
   --gym-accent-ink is the text on the accent; --gym-accent-on-dark is the accent as text or lines on the dark sidebar and hero. */
:root { --gym-accent: #C8F135; --gym-accent-ink: #0F1115; --gym-accent-on-dark: #C8F135; --gym-accent-on-dark-soft: rgba(200, 241, 53, 0.14); }

body { background: #ECEEF1; color: #0F1115; }

/* Blazor moves focus to the page heading after navigation (for screen readers); no box is needed for that. */
h1:focus { outline: none; }

.gym-splash { min-height: 100vh; display: flex; align-items: center; justify-content: center; }

/* Spinner for the start-up screen (plain CSS: it shows before Blazor and MudBlazor load) and page loads. */
.gym-spinner { width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%; border: 4px solid #DDE1E8; border-top-color: #0F1115;
               animation: gym-spin 0.8s linear infinite; }
@keyframes gym-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gym-spinner { animation-duration: 2.4s; } }
.gym-loading { display: flex; justify-content: center; padding: 64px 0; }

/* MudBlazor buttons: sentence case, like the design. */
.mud-button-root { text-transform: none; font-weight: 700; letter-spacing: 0; }

/* ── App bar ─────────────────────────────────────────────── */
.gym-appbar .mud-toolbar { gap: 10px; }
.gym-search { display: flex; align-items: center; flex: 1 1 360px; max-width: 560px; min-height: 48px; padding: 0 12px;
              background: #FFFFFF; border-radius: 10px; }
.gym-search .mud-input-control { margin-top: 0; }
.gym-search-input { font-size: 15px; }
.gym-search-item { display: flex; flex-direction: column; }
.gym-branch-picker { flex: 0 0 200px; }
.gym-branch-picker .mud-input-outlined { background: #FFFFFF; border-radius: 10px; }
.gym-branch-picker .mud-input-outlined-border { border-color: transparent; border-radius: 10px; }
.gym-branch-picker.mud-input-control, .gym-branch-picker .mud-input-control { margin: 0; }
.gym-branch-picker .mud-input-outlined .mud-input-slot { padding-top: 13px; padding-bottom: 13px; }

/* ── Sidebar: a dark rounded card inside the drawer ───────── */
/* The card fills the drawer's height: brand on top, user and sign-out pinned to the bottom, and only the menu
   scrolls between them when the screen is short. */
.gym-drawer.mud-drawer { border: 0; overflow: hidden; }
.gym-drawer .mud-drawer-content { height: 100%; padding: 12px 0 12px 12px; box-sizing: border-box; overflow: hidden; }
.gym-drawer-body { height: 100%; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px;
                   padding: 20px 14px; border-radius: 14px; background: #0F1115; color: #E7E9EE; }
.gym-brand { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.gym-brand-mark { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--gym-accent); color: var(--gym-accent-ink);
                  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gym-brand-mark.gym-brand-logo { background: #FFFFFF; }
.gym-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.gym-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gym-brand-text { display: flex; flex-direction: column; min-width: 0; }
.gym-brand-name { font-weight: 700; font-size: 16px; color: #FFFFFF; }
.gym-brand-sub { font-size: 12px; color: #9AA1AE; }
.gym-brand-light { padding: 0; }
.gym-brand-light .gym-brand-mark { background: #0F1115; color: var(--gym-accent-on-dark); }
.gym-brand-light .gym-brand-name { color: #0F1115; font-size: 18px; }

/* The menu's scrollbar stays invisible (its space reserved, so nothing shifts) until the pointer is over the menu. */
.gym-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.gym-nav:hover, .gym-nav:focus-within { scrollbar-color: #3A404C transparent; }
.gym-nav-heading { display: block; padding: 12px 12px 6px; color: #8A909C; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
.gym-nav .mud-nav-link { border-radius: 8px; min-height: 44px; padding: 0 12px; align-items: center; color: #C9CDD6; }
.gym-nav-retry { padding: 8px 12px; color: #C9CDD6; font-size: 13px; text-decoration: underline; }
.gym-nav-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
/* At least as specific as MudBlazor's own ".mud-navmenu.mud-navmenu-default ..." rules, and loaded after them, so these win. */
.mud-navmenu.gym-nav .mud-nav-link:hover:not(.mud-nav-link-disabled):not(.active) { background-color: var(--gym-accent-on-dark-soft); color: var(--gym-accent-on-dark); }
.mud-navmenu.gym-nav .mud-nav-link:hover:not(.mud-nav-link-disabled):not(.active) .mud-nav-link-icon { color: var(--gym-accent-on-dark); }
/* The selected item stays lime when hovered, pressed or focused. MudBlazor's hover rule for it is more specific than
   a plain ".active:hover" (and would paint it with the dark hover colour), hence the drawer class in front. */
.gym-drawer .mud-navmenu.gym-nav .mud-nav-link.active:not(.mud-nav-link-disabled),
.gym-drawer .mud-navmenu.gym-nav .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled),
.gym-drawer .mud-navmenu.gym-nav .mud-nav-link.active:not(.mud-nav-link-disabled):active:not(.mud-nav-link-disabled),
.gym-drawer .mud-navmenu.gym-nav .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled) {
    background-color: var(--gym-accent); color: var(--gym-accent-ink); font-weight: 700; border-inline-end-width: 0;
}
.mud-navmenu.gym-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--gym-accent-ink); }
.mud-navmenu.gym-nav .mud-nav-link:focus-visible { outline: 2px solid var(--gym-accent-on-dark); outline-offset: 2px; }

.gym-badge { min-width: 22px; box-sizing: border-box; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; }
.gym-badge-warning { background: #FF8A3D; color: #0F1115; }

.gym-user { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: #1A1E26; }
.gym-user-avatar { background: #2A2F3A !important; color: #FFFFFF !important; font-weight: 700; }
.gym-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gym-user-name { font-size: 14px; font-weight: 700; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; }
.gym-user-role { font-size: 12px; color: #9AA1AE; }
.gym-user-signout { color: #9AA1AE !important; }

/* ── Page ────────────────────────────────────────────────── */
.gym-content { padding-top: 8px; padding-bottom: 32px; }
.gym-page { display: flex; flex-direction: column; gap: 16px; }
.gym-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.gym-page-kicker { display: block; font-size: 14px; color: #5E6573; }
.gym-page-title { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #0F1115; }

.gym-split { display: flex; flex-wrap: wrap; gap: 16px; }
.gym-split-4, .gym-split-5, .gym-split-7, .gym-split-8 { min-width: 0; display: flex; }
.gym-split-4 { flex: 4 1 300px; }
.gym-split-5 { flex: 5 1 420px; }
.gym-split-6 { flex: 6 1 420px; min-width: 0; }
.gym-finance-states { margin: 8px 0 12px; }
.gym-activity-filters > .mud-select { flex: 0 1 220px; min-width: 170px; }
.gym-activity-detail { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 8px; }
.gym-activity-detail .gym-code { max-height: 320px; overflow: auto; }
.gym-split-7 { flex: 7 1 520px; }
.gym-split-8 { flex: 8 1 640px; }
.gym-split-4 > *, .gym-split-5 > *, .gym-split-7 > *, .gym-split-8 > * { flex: 1; min-width: 0; }

.gym-card { background: #FFFFFF; border-radius: 12px; }
.gym-link { font-size: 14px; font-weight: 700; color: #0F1115; }
.gym-link:hover { color: #0F1115; text-decoration: underline; }
.gym-empty { margin: 0; padding: 28px 0; text-align: center; color: #5E6573; }

/* Buttons */
.gym-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
           box-sizing: border-box; border-radius: 8px; border: 0; font: inherit; font-size: 14px; font-weight: 700;
           text-decoration: none; white-space: nowrap; cursor: pointer; }
.gym-btn-lg { min-height: 48px; padding: 0 18px; border-radius: 10px; font-size: 15px; }
.gym-btn-dark { background: #0F1115; color: #FFFFFF; }
.gym-btn-dark:hover { background: #2A2F3A; color: #FFFFFF; }
.gym-btn-accent { background: var(--gym-accent); color: var(--gym-accent-ink); }
.gym-btn-accent:hover { background: #B6DE1F; color: #0F1115; }
.gym-btn-outline { background: #FFFFFF; color: #0F1115; border: 1px solid #E1E4EA; }
.gym-btn-outline:hover { background: #F1F3F6; border-color: #C9CED6; color: #0F1115; }
.gym-btn-ghost-dark:hover { background: #1F232B; color: #FFFFFF; }
.gym-btn-ghost-dark { background: transparent; color: #FFFFFF; border: 1px solid #343A46; }
.gym-btn:focus-visible { outline: 3px solid #2F5BEA; outline-offset: 2px; }
/* Disabled buttons sit inside a tooltip that explains why; let the pointer reach the tooltip. */
.gym-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Status colours, shared by pills, icon tiles and avatars */
.gym-tone-neutral   { background: #F1F3F6; color: #2A2F3A; }
.gym-tone-info      { background: #EAF0FF; color: #1E3FB0; }
.gym-tone-success   { background: #E4F7EA; color: #146C3A; }
.gym-tone-warning   { background: #FFF0DD; color: #8F4300; }
.gym-tone-error     { background: #FDE8E8; color: #B42318; }
.gym-tone-celebrate { background: #F2EAFE; color: #6B21A8; }
.gym-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ── Today (dark hero) ───────────────────────────────────── */
.gym-hero { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; padding: 24px;
            border-radius: 14px; background: #13161C; color: #FFFFFF; }
.gym-hero-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; color: #C9CDD6; }
.gym-hero-live { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.gym-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gym-accent-on-dark); }
.gym-hero-figures { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px; }
.gym-hero-figure { display: flex; flex-direction: column; }
.gym-hero-big { font-size: 64px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.gym-hero-mid { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.gym-hero-caption { margin-top: 6px; font-size: 14px; color: #9AA1AE; }
.gym-hero-chart svg { display: block; width: 100%; height: 110px; }
.gym-hero-area { fill: var(--gym-accent-on-dark); fill-opacity: 0.16; }
.gym-hero-line { fill: none; stroke: var(--gym-accent-on-dark); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gym-hero-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #8A909C; font-variant-numeric: tabular-nums; }
.gym-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gym-hero-actions .gym-btn { min-height: 52px; border-radius: 10px; font-size: 15px; }
.gym-hero-actions .gym-hero-checkin { flex: 1 1 180px; font-size: 16px; }

/* Busiest gyms (platform hero) */
.gym-hero-list { display: flex; flex-direction: column; gap: 10px; }
.gym-hero-list-title { font-size: 13px; font-weight: 700; color: #C9CDD6; }
.gym-hero-list-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 2fr) 40px; align-items: center; gap: 12px; }
.gym-hero-list-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gym-hero-list-track { height: 8px; border-radius: 4px; background: #2A2F3A; overflow: hidden; }
.gym-hero-list-fill { display: block; height: 100%; border-radius: 4px; background: var(--gym-accent-on-dark); }
.gym-hero-list-value { text-align: right; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Key figures ─────────────────────────────────────────── */
.gym-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gym-stat { min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.gym-stat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.gym-stat-label { font-size: 14px; font-weight: 700; color: #5E6573; }
.gym-tile { width: 40px; height: 40px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.gym-stat-value { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; overflow-wrap: anywhere; }
.gym-stat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gym-stat-note { font-size: 13px; color: #5E6573; }

/* ── Panels ──────────────────────────────────────────────── */
.gym-panel { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; }
.gym-panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 10px; }
.gym-panel-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.gym-panel-sub { display: block; margin-top: 4px; font-size: 14px; color: #5E6573; }
.gym-panel-foot { margin: 0; padding-top: 10px; font-size: 14px; color: #5E6573; }

.gym-segmented { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #F1F3F6; border-radius: 10px; }
.gym-segmented button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: #5E6573;
                        font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.gym-segmented button:hover:not(.active) { background: #E3E6EB; color: #0F1115; }
.gym-segmented button.active { background: #0F1115; color: #FFFFFF; }
.gym-segmented button:focus-visible { outline: 3px solid #2F5BEA; outline-offset: 1px; }
.gym-count { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: #E1E4EA; color: #2A2F3A; font-variant-numeric: tabular-nums; }
.gym-segmented button.active .gym-count { background: var(--gym-accent-on-dark); color: #0F1115; }
.gym-segmented-small { border-radius: 8px; }
.gym-segmented-small button { min-height: 36px; padding: 0 12px; border-radius: 6px; font-size: 13px; }
.gym-segmented-small button.active { background: #FFFFFF; color: #0F1115; box-shadow: 0 1px 2px rgba(15, 17, 21, 0.12); }

.gym-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #EEF0F3; }
.gym-row-plain { flex-wrap: nowrap; gap: 12px; padding: 8px 0; border-top: 0; }
.gym-row-text { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gym-row-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gym-row-sub { font-size: 13px; color: #5E6573; }
.gym-row-actions { display: flex; gap: 8px; }

.gym-avatar { position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%; display: flex; align-items: center;
              justify-content: center; font-size: 13px; font-weight: 700; }
.gym-avatar-square { width: 44px; height: 44px; border-radius: 10px; font-size: 14px; }
.gym-avatar-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF;
                    color: #5E6573; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px #EEF0F3; }

/* Tables */
.gym-table-wrap { overflow-x: auto; }
.gym-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.gym-table th { padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700; color: #5E6573; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.gym-table td { padding: 10px 12px; border-top: 1px solid #EEF0F3; vertical-align: middle; }
.gym-table th:first-child, .gym-table td:first-child { padding-left: 0; }
.gym-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gym-table-who { display: flex; align-items: center; gap: 12px; min-width: 180px; }
.gym-muted { color: #5E6573; }

/* Forms */
.gym-form { display: flex; flex-direction: column; gap: 8px; }
.gym-form-section { margin-top: 8px; font-size: 13px; font-weight: 700; color: #5E6573; text-transform: uppercase; letter-spacing: 0.08em; }
.gym-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 16px; }
.gym-spinner-small { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255, 255, 255, 0.35); border-top-color: #FFFFFF; }

/* Revenue bars */
.gym-bars { display: flex; align-items: flex-end; gap: 12px; height: 220px; padding-top: 8px; }
.gym-bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.gym-bar-fill { width: 100%; max-width: 64px; border-radius: 6px 6px 2px 2px; background: #DDE1E8; }
.gym-bar-fill.current { background: #0F1115; }
.gym-bar-value { font-size: 12px; font-weight: 700; color: #5E6573; font-variant-numeric: tabular-nums; }
.gym-bar-value.current { color: #0F1115; }
.gym-bar-label { font-size: 13px; font-weight: 700; color: #5E6573; }

/* Busy hours heatmap */
.gym-heat { display: flex; flex-direction: column; gap: 6px; }
.gym-heat-row { display: grid; grid-template-columns: 36px repeat(12, minmax(0, 1fr)); gap: 4px; align-items: center; }
.gym-heat-day { font-size: 12px; font-weight: 700; color: #5E6573; }
.gym-heat-cell { height: 22px; border-radius: 3px; background: #0F1115; }
.gym-heat-axis { font-size: 10px; color: #5E6573; font-variant-numeric: tabular-nums; }

/* ── Members ─────────────────────────────────────────────── */
.gym-title-count { margin-left: 8px; font-weight: 400; color: #5E6573; }
.gym-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gym-searchbox { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; max-width: 420px; min-height: 48px; padding: 0 14px;
                 box-sizing: border-box; background: #FFFFFF; border-radius: 10px; color: #5E6573; }
.gym-searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #0F1115; font: inherit; font-size: 15px; }
.gym-searchbox:focus-within { box-shadow: 0 0 0 2px #2F5BEA; }
.gym-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gym-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
            background: #FFFFFF; color: #2A2F3A; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.gym-chip:hover:not(.active) { background: #E3E6EB; }
.gym-chip.active { background: #0F1115; color: #FFFFFF; }
.gym-chip:focus-visible { outline: 3px solid #2F5BEA; outline-offset: 2px; }
.gym-chip-count { font-size: 12px; color: #5E6573; font-variant-numeric: tabular-nums; }
.gym-chip.active .gym-chip-count { color: var(--gym-accent-on-dark); }
.gym-split-top { align-items: flex-start; }

.gym-table-select tbody tr.selected td { background: #F5F6F8; }
.gym-link-button { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.gym-link-button:focus-visible { outline: 3px solid #2F5BEA; outline-offset: 2px; border-radius: 8px; }
.gym-nowrap { white-space: nowrap; }

/* Member import dialog */
.gym-import-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gym-import-pick label { cursor: pointer; }
.gym-import-pick label:focus-within { outline: 3px solid #2F5BEA; outline-offset: 2px; }
.gym-import-issues { max-height: 320px; overflow-y: auto; }

/* Point of sale */
.gym-pos-products { align-self: start; justify-content: flex-start; }
.gym-pos-products .gym-searchbox { flex: none; }
.gym-pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 12px; }
.gym-pos-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 92px; padding: 12px; border: 1px solid #E6E8EC;
                border-radius: 12px; background: #FFFFFF; color: #0F1115; font: inherit; text-align: left; cursor: pointer; }
.gym-pos-tile:hover:not(:disabled) { border-color: #0F1115; }
.gym-pos-tile:focus-visible { outline: 3px solid #2F5BEA; outline-offset: 2px; }
.gym-pos-tile:disabled { opacity: 0.55; cursor: not-allowed; }
.gym-pos-price { font-weight: 700; font-size: 16px; }
.gym-pos-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #E6E8EC; }
.gym-pos-qty { max-width: 84px; }
.gym-pos-price-field { max-width: 120px; }
.gym-pos-total { font-size: 18px; }

/* Offline and sync */
.gym-sync-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-right: 12px; padding: 0 12px; border-radius: 999px;
                 font-size: 13px; font-weight: 700; text-decoration: none; }
.gym-sync-chip:focus-visible { outline: 3px solid #2F5BEA; outline-offset: 2px; }
.gym-pin-unlock { margin-top: 20px; }

/* Member app (staff side) */
.gym-mono { font-family: Consolas, "Courier New", monospace; letter-spacing: 0.04em; }
.gym-code { margin: 0; padding: 12px 14px; border-radius: 10px; background: #0F1115; color: #E8EAED; font-family: Consolas, "Courier New", monospace;
            font-size: 13px; white-space: pre-wrap; word-break: break-all; }
.gym-chip-static { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0; padding: 4px 10px; border-radius: 999px; background: #F1F3F6;
                   font-size: 13px; font-weight: 700; }
.gym-chip-remove { border: 0; background: transparent; color: #5E6573; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; min-width: 24px; min-height: 24px; }
.gym-chip-remove:focus-visible { outline: 3px solid #2F5BEA; border-radius: 6px; }
.gym-legal { max-width: 720px; color: #1B1F27; line-height: 1.55; }
.gym-legal h2 { margin: 0 0 4px; font-size: 22px; }
.gym-legal h3 { margin: 18px 0 4px; font-size: 16px; }
.gym-legal ul { margin: 4px 0; padding-left: 20px; }
.gym-legal-draft { display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 999px; background: #FFF4D6; color: #7A5200; font-weight: 700; font-size: 13px; }
.gym-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 20px; }
.gym-legal-links .gym-link-button { min-height: 44px; color: #5E6573; }
.gym-legal-page { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; background: #FFFFFF; min-height: 100vh; box-sizing: border-box; }
.gym-fp-number { display: inline-flex; align-items: center; gap: 10px; }
.gym-enroll-wait { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; text-align: center; }
.gym-app-password { margin: 8px 0 0; }
.gym-qr { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.gym-qr img { width: 180px; height: 180px; border: 1px solid #E6E8EC; border-radius: 12px; image-rendering: pixelated; }

/* Guided intro */
.gym-tour-spotlight { position: fixed; z-index: 2000; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(15, 17, 21, 0.62);
                      outline: 3px solid var(--gym-accent-on-dark); pointer-events: none; transition: all 0.2s ease; }
.gym-tour-card { position: fixed; z-index: 2001; width: 340px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 18px 18px 14px;
                 border-radius: 14px; background: #FFFFFF; color: #0F1115; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28); outline: none; }
.gym-tour-card-sheet { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
.gym-tour-count { font-size: 12px; font-weight: 700; color: #5E6573; text-transform: uppercase; letter-spacing: 0.08em; }
.gym-tour-title { margin: 4px 0 10px; font-size: 18px; }
.gym-tour-points { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 14px; font-size: 14px; }
.gym-tour-points dt { font-weight: 700; color: #5E6573; }
.gym-tour-points dd { margin: 0; }
.gym-tour-actions { display: flex; align-items: center; gap: 8px; }
.gym-btn-ghost { background: transparent; color: #5E6573; border: 0; }
@media (prefers-reduced-motion: reduce) { .gym-tour-spotlight { transition: none; } }

/* Reports */
.gym-report-list { align-self: start; gap: 2px; }
.gym-report-link { display: block; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
                   color: #0F1115; font: inherit; text-align: left; cursor: pointer; }
.gym-report-link:hover { background: #F1F3F6; }
.gym-report-link.active { background: #0F1115; color: #FFFFFF; }
.gym-report-link.active .gym-row-title { color: #FFFFFF; }
.gym-report-link:focus-visible { outline: 3px solid #2F5BEA; outline-offset: 2px; }
.gym-report-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
.gym-report-filters > .mud-input-control { flex: 0 1 200px; }
.gym-report-table { max-height: 70vh; overflow: auto; }

/* Branding (Settings) */
.gym-brand-edit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gym-brand-edit-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gym-brand-mark.gym-brand-mark-large { width: 72px; height: 72px; border-radius: 16px; border: 1px solid #E6E8EC; }
.gym-brand-mark-large.gym-brand-logo { background: #FFFFFF !important; }
.gym-color-field { display: flex; align-items: flex-start; gap: 12px; }
.gym-color-field input[type=color] { flex: none; width: 56px; height: 56px; padding: 4px; border: 1px solid #D5D9E0; border-radius: 10px; background: #FFFFFF; cursor: pointer; }
.gym-color-field input[type=color]:focus-visible { outline: 3px solid #2F5BEA; outline-offset: 2px; }
.gym-color-preview { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; align-self: flex-start; }
.gym-color-preview .gym-btn { cursor: default; }
.gym-text-error { color: #B42318 !important; font-weight: 700; }
.gym-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; font-size: 14px; color: #5E6573; }
.gym-pager-buttons { display: flex; gap: 6px; }
.gym-icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E1E4EA;
                border-radius: 8px; background: #FFFFFF; color: #0F1115; cursor: pointer; }
.gym-icon-btn:hover:not(:disabled) { background: #F1F3F6; }
.gym-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.gym-detail { gap: 16px; }
.gym-detail-head { display: flex; align-items: center; gap: 14px; }
.gym-avatar-large { width: 56px; height: 56px; border-radius: 12px; font-size: 18px; }
.gym-detail-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.gym-pkgcard { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 12px; background: #13161C; color: #FFFFFF; }
.gym-pkgcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.gym-pkgcard-name { font-size: 17px; font-weight: 700; }
.gym-pkgcard-fee { font-size: 13px; color: #9AA1AE; font-variant-numeric: tabular-nums; }
.gym-progress { height: 8px; border-radius: 4px; background: #2A2F3A; overflow: hidden; }
.gym-progress span { display: block; height: 100%; border-radius: 4px; background: var(--gym-accent); }
.gym-pkgcard-dates { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #C9CDD6; }
.gym-pkgcard-left { font-weight: 700; color: #FFFFFF; }
.gym-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gym-mini { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: #F5F6F8; }
.gym-mini-label { font-size: 13px; color: #5E6573; }
.gym-mini-value { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gym-detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gym-detail-actions .gym-btn { width: 100%; }
.gym-span-2 { grid-column: span 2; }
.gym-detail-section { display: flex; flex-direction: column; }
.gym-detail-section-title { padding-bottom: 6px; font-size: 14px; font-weight: 700; }
.gym-detail-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #EEF0F3; font-size: 14px; }
.gym-detail-line .gym-muted { white-space: nowrap; }

.gym-row-actions-cell { white-space: nowrap; text-align: right; }
.gym-row-actions-cell .gym-btn + .gym-btn { margin-left: 6px; }
.gym-switches { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.gym-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Payments ────────────────────────────────────────────── */
.gym-date-range { display: flex; flex-wrap: wrap; gap: 10px; }
.gym-date-range .mud-input-control { width: 170px; margin: 0; background: #FFFFFF; border-radius: 8px; }
.gym-kpis-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gym-stat-link { color: inherit; text-decoration: none; }
.gym-stat-link:hover { box-shadow: 0 0 0 2px #0F1115; }

/* ── Check-in and attendance ─────────────────────────────── */
.gym-checkin { gap: 16px; }
.gym-checkin-search .mud-input { font-size: 18px; }
.gym-checkin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gym-btn-xl { flex: 1 1 240px; min-height: 60px; border-radius: 10px; font-size: 18px; }
.gym-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ── Admin: staff, roles, departments ───────────────────── */
.gym-pick-list { display: flex; flex-direction: column; gap: 4px; }
.gym-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; border: 0;
            border-radius: 8px; background: transparent; color: #0F1115; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.gym-pick:hover:not(.active) { background: #F1F3F6; }
.gym-pick.active { background: #0F1115; color: #FFFFFF; }
.gym-pick:focus-visible { outline: 3px solid #2F5BEA; outline-offset: 2px; }
.gym-inline-add { display: flex; align-items: flex-start; gap: 8px; padding-top: 12px; }
.gym-inline-add .mud-input-control { flex: 1; margin: 0; }
.gym-inline-add .gym-btn { min-height: 40px; }
.gym-role-name { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex: 1 1 260px; }
.gym-role-name .mud-input-control { flex: 1 1 220px; margin: 0; }
.gym-matrix .center { text-align: center; }
.gym-matrix tbody th { text-align: left; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #0F1115; padding: 4px 12px 4px 0; border-top: 1px solid #EEF0F3; }
.gym-matrix td { padding-top: 0; padding-bottom: 0; }
.gym-grow { flex: 1 1 auto; min-width: 0; }

.gym-filter-select { width: 200px; }
.gym-filter-select.mud-input-control { margin: 0; background: #FFFFFF; border-radius: 8px; }
.gym-row-cancelled td { color: #8A909C; text-decoration: line-through; }
.gym-row-cancelled td .gym-pill, .gym-row-cancelled td .gym-btn { text-decoration: none; }

/* ── Subscriptions ───────────────────────────────────────── */
.gym-banner { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.gym-banner-warning { background: #FFF0DD; color: #8F4300; }
.gym-banner-error { background: #FDE8E8; color: #B42318; }
/* The platform admin inside a gym: always in the platform's ink and lime, whatever the gym's colour. */
.gym-banner-switch { align-items: center; flex-wrap: wrap; background: #0F1115; color: #FFFFFF; }
.gym-banner-switch .gym-btn-accent { background: #C8F135; color: #0F1115; min-height: 36px; }
.gym-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.gym-plan { gap: 10px; }
.gym-plan-price { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.gym-plan-price .gym-muted { font-size: 14px; font-weight: 400; }
.gym-feature-list { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.gym-feature-list li { display: flex; align-items: center; gap: 8px; }
.gym-feature-list li.off { color: #8A909C; }
.gym-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 12px; }
.gym-inline-pay { display: inline-flex; align-items: center; gap: 6px; }
.gym-inline-pay .mud-input-control { width: 200px; margin: 0; }
.gym-table-wide { min-width: 760px; }

/* ── Forms (pages) ───────────────────────────────────────── */
.gym-page-narrow { max-width: 920px; }
.gym-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 14px; font-weight: 700; color: #5E6573; text-decoration: none; }
.gym-back:hover { color: #0F1115; }
.gym-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

/* ── Phone tab bar ───────────────────────────────────────── */
.gym-tabbar { display: none; }

/* ── Sign-in ─────────────────────────────────────────────── */
.gym-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: #ECEEF1; }
.gym-login-card { width: 100%; max-width: 440px; padding: 32px; border-radius: 14px; }

/* ── Phones ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .gym-branch-picker { flex-basis: 130px; }
    .gym-page-title { font-size: 26px; }
    .gym-hero { padding: 18px; gap: 14px; }
    .gym-hero-big { font-size: 48px; }
    .gym-hero-mid { font-size: 26px; }
    .gym-hero-figures { gap: 20px; }
    .gym-kpis { gap: 10px; }
    .gym-stat { padding: 14px; gap: 10px; }
    .gym-stat-value { font-size: 24px; }
    .gym-stat .gym-pill { white-space: normal; }
    .gym-tile { width: 32px; height: 32px; border-radius: 8px; }
    .gym-panel { padding: 18px 16px; }
    .gym-bars { gap: 6px; }

    .gym-content { padding-bottom: 104px; }
    .gym-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; /* under the open menu (MudBlazor drawer: 1100) */ display: flex; align-items: center;
                  justify-content: space-around; gap: 4px; padding: 8px 12px calc(14px + env(safe-area-inset-bottom));
                  background: #FFFFFF; border-top: 1px solid #E3E6EB; }
    .gym-tab { min-width: 56px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
               border: 0; background: none; color: #5E6573; font: inherit; font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; }
    .gym-tab.active { color: #0F1115; font-weight: 700; }
    .gym-tab-checkin { width: 60px; height: 60px; margin-top: -30px; border-radius: 14px; background: var(--gym-accent); color: var(--gym-accent-ink);
                       display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(15, 17, 21, 0.18); }
}