/* ==========================================================================
   FITPRO — Light (default) & Dark themes — soft, eye-friendly harmony
   ========================================================================== */

:root,
html[data-theme="light"] {
    color-scheme: light;

    /* Legacy club tokens (custom.css) */
    --club-bg: #f3f5f8;
    --club-bg-subtle: #eef2f7;
    --club-surface: #ffffff;
    --club-surface-elevated: #ffffff;
    --club-border: #e2e8f0;
    --club-border-strong: #cbd5e1;
    --club-text: #1e293b;
    --club-text-muted: #64748b;
    --club-text-subtle: #94a3b8;

    --fx-bg: #f3f5f8;
    --fx-bg-elevated: #ffffff;
    --fx-surface: #ffffff;
    --fx-surface-2: #f7f9fc;
    --fx-surface-3: #eef2f6;
    --fx-border: rgba(15, 23, 42, 0.08);
    --fx-border-strong: rgba(15, 23, 42, 0.14);
    --fx-text: #1e293b;
    --fx-text-secondary: #475569;
    --fx-text-muted: #94a3b8;
    --fx-accent: var(--club-accent, #0d9488);
    --fx-accent-2: #3b82f6;
    --fx-accent-glow: color-mix(in srgb, var(--fx-accent) 18%, transparent);
    --fx-accent-text: #ffffff;
    --fx-danger: #dc2626;
    --fx-warning: #d97706;
    --fx-success: #059669;
    --fx-header-bg: rgba(255, 255, 255, 0.92);
    --fx-header-border: rgba(15, 23, 42, 0.08);
    --fx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
    --fx-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
    --fx-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.09), 0 4px 10px rgba(15, 23, 42, 0.04);
    --fx-chart-grid: rgba(15, 23, 42, 0.08);
    --fx-chart-muted: #94a3b8;
    --fx-on-media: #ffffff;
    --fx-hero-overlay: linear-gradient(105deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.45) 45%, rgba(15, 23, 42, 0.62) 100%);
    --fx-hero-overlay-dashboard: linear-gradient(100deg, rgba(15, 23, 42, 0.86) 0%, rgba(15, 23, 42, 0.48) 42%, rgba(15, 23, 42, 0.72) 100%);
    --fx-launch-overlay: linear-gradient(0deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.35) 55%, rgba(15, 23, 42, 0.15) 100%);
    --fx-program-overlay: linear-gradient(0deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.2) 55%, transparent 100%);
    --fx-happening-overlay: linear-gradient(0deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.4) 100%);
    --fx-feature-overlay: linear-gradient(0deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.45) 50%, rgba(15, 23, 42, 0.15) 100%);
    --fx-card-media-overlay: linear-gradient(160deg, rgba(255, 255, 255, 0.72) 0%, rgba(248, 250, 252, 0.95) 70%);
    --fx-card-media-opacity: 0.08;
    --fx-card-media-opacity-hover: 0.14;
    --fx-member-overlay: linear-gradient(0deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.35) 100%);
    --fx-sidebar-texture-opacity: 0.04;

    /* Navigation */
    --fx-nav-text: #64748b;
    --fx-nav-text-hover: #1e293b;
    --fx-nav-text-active: #0f172a;
    --fx-nav-bg-hover: #f1f5f9;
    --fx-nav-bg-active: #e8edf3;
    --fx-nav-indicator: var(--fx-accent);
    --fx-nav-icon: #94a3b8;
    --fx-nav-icon-hover: #475569;
    --fx-nav-icon-bg: transparent;
    --fx-nav-icon-bg-active: #dde4ec;
    --fx-nav-icon-active: #334155;
    --fx-nav-sub-text: #78859a;
    --fx-nav-sub-text-hover: #334155;
    --fx-nav-sub-text-active: #0f172a;
    --fx-nav-sub-bg-hover: #f1f5f9;
    --fx-nav-group-open: #475569;

    /* Record / entity links (names in tables, etc.) */
    --fx-link: #334155;
    --fx-link-hover: #0f172a;
    --fx-row-hover: #f1f5f9;

    /* Text-only / outline buttons (not filled primary) */
    --fx-btn-text: #475569;
    --fx-btn-text-hover: #1e293b;
    --fx-btn-outline-text: #334155;
    --fx-btn-outline-border: #cbd5e1;
    --fx-btn-outline-hover-bg: #f1f5f9;
}

html[data-theme="dark"] {
    color-scheme: dark;

    /* Legacy club tokens (custom.css) */
    --club-bg: #181a1e;
    --club-bg-subtle: #1f2126;
    --club-surface: #24262c;
    --club-surface-elevated: #2a2d34;
    --club-border: rgba(255, 255, 255, 0.08);
    --club-border-strong: rgba(255, 255, 255, 0.13);
    --club-text: #eceef2;
    --club-text-muted: #b4b9c5;
    --club-text-subtle: #949aa8;
    --club-primary-soft: color-mix(in srgb, var(--club-accent, #34d399) 8%, #24262c);

    --fx-bg: #181a1e;
    --fx-bg-elevated: #1f2126;
    --fx-surface: #24262c;
    --fx-surface-2: #2a2d34;
    --fx-surface-3: #32353d;
    --fx-border: rgba(255, 255, 255, 0.08);
    --fx-border-strong: rgba(255, 255, 255, 0.13);
    --fx-text: #eceef2;
    --fx-text-secondary: #c8ccd4;
    --fx-text-muted: #9aa0ad;
    --fx-accent: var(--club-accent, #34d399);
    --fx-accent-2: #60a5fa;
    --fx-accent-glow: color-mix(in srgb, var(--fx-accent) 14%, transparent);
    --fx-accent-text: #0a1a14;
    --fx-danger: #f87171;
    --fx-warning: #fbbf24;
    --fx-success: #34d399;
    --fx-header-bg: rgba(20, 24, 32, 0.92);
    --fx-header-border: rgba(255, 255, 255, 0.06);
    --fx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12);
    --fx-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.16);
    --fx-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.38), 0 4px 10px rgba(0, 0, 0, 0.2);
    --fx-chart-grid: rgba(255, 255, 255, 0.06);
    --fx-chart-muted: #8490a0;
    --fx-on-media: #ffffff;
    --fx-hero-overlay: linear-gradient(105deg, rgba(10, 12, 18, 0.9) 0%, rgba(10, 12, 18, 0.55) 45%, rgba(10, 12, 18, 0.75) 100%);
    --fx-hero-overlay-dashboard: linear-gradient(100deg, rgba(10, 12, 18, 0.92) 0%, rgba(10, 12, 18, 0.65) 42%, rgba(10, 12, 18, 0.8) 100%);
    --fx-launch-overlay: linear-gradient(0deg, rgba(10, 12, 18, 0.9) 0%, rgba(10, 12, 18, 0.38) 55%, rgba(10, 12, 18, 0.18) 100%);
    --fx-program-overlay: linear-gradient(0deg, rgba(10, 12, 18, 0.94) 0%, rgba(10, 12, 18, 0.18) 55%, transparent 100%);
    --fx-happening-overlay: linear-gradient(0deg, rgba(10, 12, 18, 0.9) 0%, rgba(10, 12, 18, 0.48) 100%);
    --fx-feature-overlay: linear-gradient(0deg, rgba(10, 12, 18, 0.94) 0%, rgba(10, 12, 18, 0.5) 50%, rgba(10, 12, 18, 0.22) 100%);
    --fx-card-media-overlay: linear-gradient(160deg, rgba(10, 12, 18, 0.5) 0%, rgba(20, 24, 32, 0.92) 70%);
    --fx-card-media-opacity: 0.1;
    --fx-card-media-opacity-hover: 0.18;
    --fx-member-overlay: linear-gradient(0deg, rgba(10, 12, 18, 0.94) 0%, rgba(10, 12, 18, 0.4) 100%);
    --fx-sidebar-texture-opacity: 0.04;

    /* Navigation */
    --fx-nav-text: #a8aeb8;
    --fx-nav-text-hover: #e8eaee;
    --fx-nav-text-active: #f3f4f6;
    --fx-nav-bg-hover: rgba(255, 255, 255, 0.05);
    --fx-nav-bg-active: rgba(255, 255, 255, 0.09);
    --fx-nav-indicator: var(--fx-accent);
    --fx-nav-icon: #8b919d;
    --fx-nav-icon-hover: #c8ccd4;
    --fx-nav-icon-bg: transparent;
    --fx-nav-icon-bg-active: rgba(255, 255, 255, 0.1);
    --fx-nav-icon-active: #e8eaee;
    --fx-nav-sub-text: #949aa8;
    --fx-nav-sub-text-hover: #d8dce2;
    --fx-nav-sub-text-active: #f0f2f5;
    --fx-nav-sub-bg-hover: rgba(255, 255, 255, 0.04);
    --fx-nav-group-open: #c8ccd4;

    /* Record / entity links (names in tables, etc.) */
    --fx-link: #c8ccd4;
    --fx-link-hover: #eceef2;
    --fx-row-hover: rgba(255, 255, 255, 0.04);

    /* Text-only / outline buttons (not filled primary) */
    --fx-btn-text: #b4b9c5;
    --fx-btn-text-hover: #eceef2;
    --fx-btn-outline-text: #c8ccd4;
    --fx-btn-outline-border: rgba(255, 255, 255, 0.14);
    --fx-btn-outline-hover-bg: rgba(255, 255, 255, 0.06);

    /* Filled primary buttons — dark: navy fill, light gray text */
    --fx-btn-filled-bg: var(--club-primary, #465fff);
    --fx-btn-filled-bg-hover: color-mix(in srgb, var(--club-primary, #465fff) 86%, #0f1419);
    --fx-btn-filled-text: #d4d8de;
    --fx-btn-filled-glow: color-mix(in srgb, var(--club-primary, #465fff) 20%, transparent);
}

/* Theme toggle icons */
html[data-theme="light"] .fx-theme-icon--moon { display: block; }
html[data-theme="light"] .fx-theme-icon--sun { display: none; }
html[data-theme="dark"] .fx-theme-icon--moon { display: none; }
html[data-theme="dark"] .fx-theme-icon--sun { display: block; }

.fitpro-ui .fx-theme-toggle {
    color: var(--fx-text-muted);
}

.fitpro-ui .fx-theme-toggle:hover {
    color: var(--fx-accent);
    border-color: color-mix(in srgb, var(--fx-accent) 30%, var(--fx-border));
}

/* Light-mode refinements */
html[data-theme="light"] .fitpro-ui .club-btn-primary {
    color: var(--fx-accent-text, #fff) !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--fx-accent) 25%, transparent);
}

html[data-theme="dark"] .fitpro-ui .club-btn-primary {
    background: var(--fx-btn-filled-bg) !important;
    color: var(--fx-btn-filled-text) !important;
    box-shadow: 0 1px 4px var(--fx-btn-filled-glow);
}

html[data-theme="dark"] .fitpro-ui .club-btn-primary:hover {
    background: var(--fx-btn-filled-bg-hover) !important;
    color: var(--fx-btn-filled-text) !important;
    filter: none;
    box-shadow: 0 2px 10px var(--fx-btn-filled-glow);
}

html[data-theme="light"] .fitpro-ui .fx-card {
    box-shadow: var(--fx-shadow-sm);
}

html[data-theme="light"] .fitpro-ui .fx-card:hover {
    box-shadow: var(--fx-shadow-md);
}

html[data-theme="light"] .fitpro-ui .fx-hero__title,
html[data-theme="light"] .fitpro-ui .fx-launch-tile__label,
html[data-theme="light"] .fitpro-ui .fx-dash-feature__value {
    color: var(--fx-on-media);
}

html[data-theme="light"] .fitpro-ui .fx-hero__stat-val {
    color: var(--fx-accent);
}

html[data-theme="light"] .fitpro-ui .fx-hero__stat-val--muted {
    color: var(--fx-text) !important;
}

html[data-theme="light"] .fitpro-ui .fx-hero__stat-label,
html[data-theme="light"] .fitpro-ui .fx-hero__stat-hint {
    color: color-mix(in srgb, var(--fx-text) 68%, transparent) !important;
}

html[data-theme="light"] .fitpro-ui .fx-hero__stat--link {
    background: color-mix(in srgb, #fff 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--fx-border) 90%, transparent);
    border-radius: var(--fx-radius-lg, 0.875rem);
    padding: 0.55rem 0.75rem;
    backdrop-filter: blur(8px);
}

html[data-theme="light"] .fitpro-ui .fx-hero__stat--link:hover {
    background: color-mix(in srgb, #fff 92%, transparent);
    border-color: color-mix(in srgb, var(--fx-accent) 25%, var(--fx-border));
}

html[data-theme="light"] .fitpro-ui .club-alert {
    border: 1px solid var(--fx-border);
}

html[data-theme="light"] .fitpro-ui .club-dropdown {
    box-shadow: var(--fx-shadow-lg);
}

html[data-theme="light"] .fitpro-ui .border-gray-800 {
    border-color: var(--fx-border) !important;
}

html[data-theme="light"] .fitpro-ui .fx-live-dot {
    box-shadow: 0 0 4px var(--fx-accent-glow);
}

html[data-theme="light"] .fitpro-ui .fx-hero:hover {
    box-shadow: var(--fx-shadow-md);
}

html[data-theme="light"] .fitpro-ui .fx-card:hover {
    box-shadow: var(--fx-shadow-md);
}

/* Dark-mode filled buttons: club-primary (navy) + light gray text */
html[data-theme="dark"] .fitpro-ui a.bg-brand-500,
html[data-theme="dark"] .fitpro-ui button.bg-brand-500,
html[data-theme="dark"] .fitpro-ui .rounded-lg.bg-brand-500,
html[data-theme="dark"] .fitpro-ui .fx-workspace a.bg-brand-500,
html[data-theme="dark"] .fitpro-ui .fx-workspace button.bg-brand-500,
html[data-theme="dark"] .fitpro-ui .fx-workspace .rounded-lg.bg-brand-500 {
    background: var(--fx-btn-filled-bg) !important;
    color: var(--fx-btn-filled-text) !important;
    box-shadow: 0 1px 4px var(--fx-btn-filled-glow);
    filter: none;
}

html[data-theme="dark"] .fitpro-ui a.bg-brand-500:hover,
html[data-theme="dark"] .fitpro-ui button.bg-brand-500:hover,
html[data-theme="dark"] .fitpro-ui .hover\:bg-brand-600:hover.bg-brand-500,
html[data-theme="dark"] .fitpro-ui .fx-workspace a.bg-brand-500:hover,
html[data-theme="dark"] .fitpro-ui .fx-workspace button.bg-brand-500:hover {
    background: var(--fx-btn-filled-bg-hover) !important;
    color: var(--fx-btn-filled-text) !important;
    filter: none;
    box-shadow: 0 2px 10px var(--fx-btn-filled-glow);
}

html[data-theme="dark"] .fitpro-ui .club-btn-primary.text-white,
html[data-theme="dark"] .fitpro-ui .bg-brand-500.text-white,
html[data-theme="dark"] .fitpro-ui button.bg-brand-500.text-white,
html[data-theme="dark"] .fitpro-ui a.bg-brand-500.text-white {
    color: var(--fx-btn-filled-text) !important;
}

html[data-theme="dark"] .fitpro-ui .fx-live-dot {
    box-shadow: 0 0 6px var(--fx-accent-glow);
}

/* ── Navigation: neutral palette, no purple primary bleed ─────────────── */

.fitpro-ui .club-sidebar,
.fitpro-ui .fx-sidebar {
    background: var(--fx-bg-elevated) !important;
}

.fitpro-ui .pro-nav-item,
.fitpro-ui .club-nav-item,
.fitpro-ui .fx-nav-item {
    color: var(--fx-nav-text) !important;
}

.fitpro-ui .pro-nav-item .club-nav-item__icon,
.fitpro-ui .club-nav-item .club-nav-item__icon {
    color: var(--fx-nav-icon) !important;
    background: var(--fx-nav-icon-bg) !important;
    opacity: 1 !important;
}

.fitpro-ui .pro-nav-item:hover,
.fitpro-ui .club-nav-item:hover:not(.club-nav-item--disabled),
.fitpro-ui .fx-nav-item:hover {
    background: var(--fx-nav-bg-hover) !important;
    color: var(--fx-nav-text-hover) !important;
    box-shadow: inset 2px 0 0 var(--fx-nav-indicator);
}

.fitpro-ui .pro-nav-item:hover .club-nav-item__icon,
.fitpro-ui .club-nav-item:hover:not(.club-nav-item--disabled) .club-nav-item__icon {
    color: var(--fx-nav-icon-hover) !important;
    background: var(--fx-nav-icon-bg) !important;
}

.fitpro-ui .pro-nav-item--active,
.fitpro-ui .club-nav-item--active,
.fitpro-ui .fx-nav-item--active {
    background: var(--fx-nav-bg-active) !important;
    color: var(--fx-nav-text-active) !important;
    box-shadow: inset 2px 0 0 var(--fx-nav-indicator);
}

.fitpro-ui .pro-nav-item--active .club-nav-item__icon,
.fitpro-ui .club-nav-item--active .club-nav-item__icon {
    color: var(--fx-nav-icon-active) !important;
    background: var(--fx-nav-icon-bg-active) !important;
}

.fitpro-ui .club-nav-item--active::before {
    display: none !important;
}

.fitpro-ui .pro-nav-group__toggle {
    color: var(--fx-nav-text) !important;
}

.fitpro-ui .pro-nav-group__toggle .club-nav-item__icon {
    color: var(--fx-nav-icon) !important;
    background: transparent !important;
}

.fitpro-ui .pro-nav-group__toggle:hover {
    background: var(--fx-nav-bg-hover) !important;
    color: var(--fx-nav-text-hover) !important;
}

.fitpro-ui .pro-nav-group__toggle:hover .club-nav-item__icon {
    color: var(--fx-nav-icon-hover) !important;
}

.fitpro-ui .pro-nav-group--open > .pro-nav-group__toggle,
.fitpro-ui .pro-nav-group--active > .pro-nav-group__toggle {
    color: var(--fx-nav-group-open) !important;
    background: var(--fx-nav-bg-hover) !important;
}

.fitpro-ui .pro-nav-group--open .fx-nav-chevron,
.fitpro-ui .pro-nav-group--open .pro-nav-group__chevron {
    color: var(--fx-nav-icon-hover) !important;
    opacity: 0.75;
}

.fitpro-ui .pro-nav-sub {
    color: var(--fx-nav-sub-text) !important;
}

.fitpro-ui .pro-nav-sub:hover {
    color: var(--fx-nav-sub-text-hover) !important;
    background: var(--fx-nav-sub-bg-hover) !important;
    border-right-color: color-mix(in srgb, var(--fx-nav-indicator) 35%, var(--fx-border));
}

.fitpro-ui .pro-nav-sub--active {
    color: var(--fx-nav-sub-text-active) !important;
    font-weight: 600;
}

.fitpro-ui .pro-nav-sub__icon {
    background: var(--fx-surface-3) !important;
    color: var(--fx-nav-icon) !important;
}

.fitpro-ui .pro-nav-sub:hover .pro-nav-sub__icon {
    color: var(--fx-nav-icon-hover) !important;
}

.fitpro-ui .pro-nav-sub--active .pro-nav-sub__icon {
    color: var(--fx-nav-icon-active) !important;
    background: var(--fx-nav-icon-bg-active) !important;
}

.fitpro-ui .club-sidebar__footer,
.fitpro-ui .club-sidebar__footer a {
    color: var(--fx-nav-text) !important;
}

.fitpro-ui .club-sidebar__footer a:hover {
    color: var(--fx-nav-text-hover) !important;
}

.fitpro-ui .fx-brand-tag {
    color: var(--fx-nav-indicator);
    opacity: 0.9;
}

/* Tabs & links: accent for indicator only, readable text */
html[data-theme="dark"] .fitpro-ui .club-tab--active,
html[data-theme="dark"] .fitpro-ui .pro-tab--active {
    color: var(--fx-text) !important;
    border-bottom-color: var(--fx-accent) !important;
}

html[data-theme="dark"] .fitpro-ui .fx-tab-bar a.is-active,
html[data-theme="dark"] .fitpro-ui .fx-tab-bar a.bg-brand-500 {
    background: var(--fx-btn-filled-bg) !important;
    color: var(--fx-btn-filled-text) !important;
    border-color: color-mix(in srgb, var(--club-primary) 40%, var(--fx-border));
}

html[data-theme="light"] .fitpro-ui .fx-tab-bar a.is-active,
html[data-theme="light"] .fitpro-ui .fx-tab-bar a.bg-brand-500 {
    color: var(--fx-nav-text-active) !important;
}

/* Kill legacy purple active states from custom.css */
.fitpro-ui .club-nav-item--active,
.fitpro-ui .menu-item-active {
    background: var(--fx-nav-bg-active) !important;
    color: var(--fx-nav-text-active) !important;
}

.fitpro-ui .club-nav-item--active .club-nav-item__icon,
.fitpro-ui .menu-item-active .club-nav-item__icon {
    background: var(--fx-nav-icon-bg-active) !important;
    color: var(--fx-nav-icon-active) !important;
}

/* Text-only & outline buttons — gray text, accent fill unchanged elsewhere */

.fitpro-ui button.text-brand-500:not(.bg-brand-500):not(.bg-brand-600),
.fitpro-ui button.text-brand-600:not(.bg-brand-500):not(.bg-brand-600),
.fitpro-ui .club-btn-ghost:not(.bg-brand-500),
.fitpro-ui .club-btn.club-btn-ghost:not(.bg-brand-500) {
    color: var(--fx-btn-text) !important;
    background: transparent;
}

.fitpro-ui button.text-brand-500:not(.bg-brand-500):hover,
.fitpro-ui button.text-brand-600:not(.bg-brand-600):hover,
.fitpro-ui .club-btn-ghost:hover {
    color: var(--fx-btn-text-hover) !important;
}

.fitpro-ui a.border-brand-500:not(.bg-brand-500),
.fitpro-ui button.border-brand-500:not(.bg-brand-500),
.fitpro-ui .border-brand-500.text-brand-500:not(.bg-brand-500) {
    border-color: var(--fx-btn-outline-border) !important;
    color: var(--fx-btn-outline-text) !important;
    background: transparent;
}

.fitpro-ui a.border-brand-500:not(.bg-brand-500):hover,
.fitpro-ui button.border-brand-500:not(.bg-brand-500):hover,
.fitpro-ui .border-brand-500.text-brand-500:not(.bg-brand-500):hover {
    background: var(--fx-btn-outline-hover-bg) !important;
    color: var(--fx-btn-text-hover) !important;
}

html[data-theme="dark"] .fitpro-ui .club-header-user__avatar {
    color: #fff;
}

html[data-theme="dark"] .fitpro-ui .club-dropdown__item .text-gray-500,
html[data-theme="dark"] .fitpro-ui .club-dropdown__item .text-gray-400 {
    color: var(--fx-text-muted) !important;
}

html[data-theme="dark"] .fitpro-ui .club-dropdown__header .text-gray-500 {
    color: var(--fx-text-muted) !important;
}