/* GYM CRM Admin Panel Styles */

:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --primary-light: #6366f1;
    --secondary: #64748b;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    --dark: #1e293b;
    --light: #f8fafc;
    --white: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --sidebar-width: 260px;
    --header-height: 65px;
    --border-radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);

    /* Theme-specific Semantic Variables */
    --body-bg: var(--gray-100);
    --card-bg: var(--white);
    --card-footer-bg: var(--gray-50);
    --text-main: var(--gray-700);
    --text-title: var(--gray-800);
    --text-muted: var(--gray-500);
    /* Aliases some pages use (dashboard greeting, CRM, tutorials). Defined here
       so they follow the theme — undefined, they fell back to near-black and
       vanished in dark mode. Resolved on the same element as the dark overrides. */
    --text-primary: var(--text-title);
    --text-secondary: var(--text-muted);
    --border-color: var(--gray-200);
    --input-bg: var(--white);
    --input-border: var(--gray-300);
    --input-text: var(--gray-700);
    --header-bg: var(--white);
    --user-btn-bg: var(--gray-100);
    --user-btn-hover: var(--gray-200);
    --dropdown-bg: var(--white);
    --dropdown-hover: var(--gray-100);
    --table-header-bg: var(--gray-50);
    --table-hover-bg: var(--gray-50);
    --quick-action-bg: var(--gray-50);
}

[data-theme="dark"] {
    --dark: #090d16;
    --light: #111827;
    
    /* Semantic variable overrides */
    --body-bg: #090d16;
    --card-bg: #111827;
    --card-footer-bg: #1e293b;
    --text-main: #94a3b8;
    --text-title: #f8fafc;
    --text-muted: #64748b;
    --text-primary: var(--text-title);
    --text-secondary: var(--text-muted);
    --border-color: #1e293b;
    --input-bg: #1e293b;
    --input-border: #334155;
    --input-text: #f8fafc;
    --header-bg: #111827;
    --user-btn-bg: #1e293b;
    --user-btn-hover: #334155;
    --dropdown-bg: #111827;
    --dropdown-hover: #1e293b;
    --table-header-bg: #1e293b;
    --table-hover-bg: #1e293b;
    --quick-action-bg: #1e293b;

    /* Base grays overrides for general dark mode fallback compatibility */
    --gray-50: #1e293b;
    --gray-100: #111827;
    --gray-200: #1e293b;
    --gray-300: #334155;
    --gray-400: #64748b;
    --gray-500: #94a3b8;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #f1f5f9;
    --gray-900: #ffffff;
    
    /* Shadow modifications for dark mode */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-main);
    background: var(--body-bg);
    overflow-x: hidden;
    width: 100%;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary-dark);
}

/* Layout */
.admin-wrapper {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--dark);
    color: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
    transition: transform 0.3s ease, width 0.2s ease;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
}

.sidebar-logo i {
    font-size: 28px;
    color: var(--primary-light);
}

.sidebar-nav {
    padding: 15px 0;
}

.nav-section {
    padding: 10px 20px 5px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-500);
    margin-top: 10px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--gray-400);
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.nav-link:hover {
    background: rgba(255,255,255,0.05);
    color: var(--white);
}

.nav-link.active {
    background: rgba(79, 70, 229, 0.2);
    color: var(--white);
    border-left-color: var(--primary-light);
}

.nav-link i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    min-width: 0;
    transition: margin-left 0.2s ease;
}

/* Header */
.header {
    height: var(--header-height);
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.user-dropdown {
    position: relative;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--gray-100);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.2s;
}

.user-btn:hover {
    background: var(--gray-200);
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 8px 0;
    display: none;
    z-index: 1000;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--gray-700);
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.dropdown-item.text-danger {
    color: var(--danger);
}

/* Gym Selector */
.gym-selector {
    position: relative;
    margin-right: 10px;
}

.gym-selector-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.gym-selector-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.gym-selector-btn i:first-child {
    font-size: 14px;
}

.gym-selector-btn i:last-child {
    font-size: 10px;
    opacity: 0.8;
}

.gym-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    min-width: 280px;
    padding: 8px;
    display: none;
    z-index: 1001;
}

.gym-dropdown.show {
    display: block;
    animation: dropdownFade 0.2s ease;
}

@keyframes dropdownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gym-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    color: var(--gray-700);
    transition: all 0.2s;
}

.gym-dropdown-item:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.gym-dropdown-item.active {
    background: rgba(79, 70, 229, 0.1);
}

.gym-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.gym-item-info {
    flex: 1;
    min-width: 0;
}

.gym-item-info strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gym-item-info small {
    display: block;
    font-size: 12px;
    color: var(--gray-500);
}

.gym-dropdown-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 8px 0;
}

/* Content Area */
.content {
    flex: 1;
    padding: 24px;
    overflow-x: hidden;
    min-width: 0;
}

/* Cards */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02), inset 0 2px 4px rgba(255, 255, 255, 0.6);
    margin-bottom: 24px;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(10px);
}
.card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800);
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat-icon.primary {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary);
}

.stat-icon.success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.stat-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.stat-icon.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.stat-icon.info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}

.stat-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.stat-content p {
    color: var(--gray-500);
    font-size: 13px;
}

/* Tables */
.table-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-700);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

tr:hover {
    background: var(--gray-50);
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--gray-700);
}

.form-label.required::after {
    content: ' *';
    color: var(--danger);
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    border-radius: var(--border-radius);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-control::placeholder {
    color: var(--text-muted);
}

select.form-control {
    cursor: pointer;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-text {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 4px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-dark);
    color: var(--white);
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-300);
}

.btn-success {
    background: var(--success);
    color: var(--white);
}

.btn-success:hover {
    background: #16a34a;
    color: var(--white);
}

.btn-warning {
    background: var(--warning);
    color: var(--white);
}

.btn-danger {
    background: var(--danger);
    color: var(--white);
}

.btn-danger:hover {
    background: #dc2626;
    color: var(--white);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
}

.btn-outline:hover {
    background: var(--gray-100);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

.btn-icon {
    padding: 8px;
    width: 36px;
    height: 36px;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
}

.badge-primary {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary);
}

.badge-success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.badge-secondary {
    background: var(--gray-200);
    color: var(--gray-600);
}

/* Alerts */
.alert {
    padding: 14px 18px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    color: #166534;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-danger, .alert-error {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    color: #1e40af;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Modal */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-backdrop.show {
    display: flex;
}

.modal {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--gray-500);
    cursor: pointer;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 20px;
    padding: 16px 0;
}

.page-link {
    padding: 8px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    color: var(--gray-700);
    transition: all 0.2s;
}

.page-link:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.page-link.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* Search & Filters */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-box input {
    padding-left: 40px;
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
}

/* Action buttons */
.actions {
    display: flex;
    gap: 8px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state i {
    font-size: 64px;
    color: var(--gray-300);
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 18px;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--gray-500);
    margin-bottom: 20px;
}

/* Login Page */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 20px;
}

.login-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.login-logo {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo i {
    font-size: 48px;
    color: var(--primary);
}

.login-logo h1 {
    font-size: 24px;
    color: var(--gray-800);
    margin-top: 10px;
}

.login-logo p {
    color: var(--gray-500);
    font-size: 14px;
}

/* Utilities */
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-muted { color: var(--gray-500); }

.bg-primary { background-color: var(--primary); color: #fff; }
.bg-success { background-color: var(--success); color: #fff; }
.bg-warning { background-color: var(--warning); color: #333; }
.bg-danger { background-color: var(--danger); color: #fff; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }

.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }

.w-100 { width: 100%; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Desktop sidebar collapse — icon-only rail */
.sidebar-collapsed .sidebar {
    width: 60px;
    overflow: visible;
}
.sidebar-collapsed .sidebar .sidebar-header { padding: 12px 0; justify-content: center; }
.sidebar-collapsed .sidebar .sidebar-logo span,
.sidebar-collapsed .sidebar .sidebar-gym-logo { display: none; }
.sidebar-collapsed .sidebar .sidebar-logo { justify-content: center; }
.sidebar-collapsed .sidebar .sidebar-logo i { font-size: 22px; }
.sidebar-collapsed .sidebar .nav-link span,
.sidebar-collapsed .sidebar .group-title,
.sidebar-collapsed .sidebar .chevron,
.sidebar-collapsed .sidebar .new-badge,
.sidebar-collapsed .sidebar .sidebar-gym-selector,
.sidebar-collapsed .sidebar .branch-chip-label,
.sidebar-collapsed .sidebar .branch-chip-arrow { display: none; }
.sidebar-collapsed .sidebar .nav-link { padding: 12px 0; justify-content: center; }
.sidebar-collapsed .sidebar .nav-link i { width: auto; font-size: 18px; }
.sidebar-collapsed .sidebar .nav-group-header { padding: 10px 0; justify-content: center; }
.sidebar-collapsed .sidebar .nav-group-header .group-icon { font-size: 16px; }
.sidebar-collapsed .sidebar .nav-group-items { display: none !important; }
.sidebar-collapsed .sidebar .sidebar-close-btn { display: none !important; }
.sidebar-collapsed .sidebar .branch-chip { width: 36px; height: 36px; padding: 0; justify-content: center; margin: 8px auto; }
.sidebar-collapsed .sidebar .sidebar-nav { padding: 8px 0; }
.sidebar-collapsed .main-content {
    margin-left: 60px;
}

/* ── Compact desktop ────────────────────────────────────────────────
   Tightens spacing, fonts, and the sidebar for laptop-sized screens.
   Everything below 1024px is handled by the mobile breakpoints that
   follow — those remain untouched.
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    :root {
        --sidebar-width: 220px;
        --header-height: 48px;
    }

    body { font-size: 13px; }

    /* ── Sidebar ── */
    .sidebar-header { padding: 12px 14px; }
    .sidebar-logo { font-size: 15px; gap: 8px; }
    .sidebar-logo i { font-size: 20px; }
    .sidebar-nav { padding: 6px 0; }
    .sidebar-gym-logo { max-height: 52px; }

    .nav-link { padding: 8px 14px; gap: 10px; font-size: 13px; }
    .nav-link i { width: 16px; font-size: 14px; }

    .nav-group { margin-bottom: 2px; }
    .nav-group-header { padding: 7px 12px; font-size: 11px; margin: 0 6px; }
    .nav-group-header i.group-icon { width: 16px; margin-right: 8px; font-size: 12px; }
    .nav-group-items .nav-link { padding-left: 38px; font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; }
    .nav-group-items .nav-link i { width: 15px; font-size: 12px; }

    /* ── Header ── */
    .header { padding: 0 16px; }
    .header-left { gap: 10px; }
    .header-title { font-size: 15px; }
    .header-right { gap: 8px; }
    .user-btn { padding: 5px 10px; gap: 8px; font-size: 13px; }
    .user-avatar { width: 28px; height: 28px; font-size: 12px; }
    .gym-selector-btn { padding: 5px 10px; font-size: 12px; }

    /* ── Content area ── */
    .content { padding: 16px; }

    /* ── Cards ── */
    .card { margin-bottom: 16px; }
    .card-header { padding: 10px 14px; }
    .card-title { font-size: 14px; }
    .card-body { padding: 14px; }
    .card-footer { padding: 10px 14px; }

    /* ── Stats ── */
    .stats-grid { gap: 12px; margin-bottom: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .stat-card { padding: 12px; gap: 10px; }
    .stat-icon { width: 40px; height: 40px; border-radius: 10px; font-size: 16px; }
    .stat-content h3 { font-size: 18px; margin-bottom: 2px; }
    .stat-content p { font-size: 12px; }

    /* ── Tables ── */
    th, td { padding: 8px 12px; }
    th { font-size: 11px; letter-spacing: 0.4px; }

    /* ── Forms ── */
    .form-group { margin-bottom: 14px; }
    .form-label { margin-bottom: 4px; font-size: 13px; }
    .form-control { padding: 7px 10px; font-size: 13px; }
    textarea.form-control { min-height: 80px; }
    .form-row { gap: 14px; }
    .form-text { font-size: 11px; }

    /* ── Buttons ── */
    .btn { padding: 7px 14px; font-size: 13px; gap: 6px; }
    .btn-sm { padding: 4px 10px; font-size: 12px; }
    .btn-lg { padding: 10px 22px; font-size: 14px; }
    .btn-icon { padding: 6px; width: 30px; height: 30px; }

    /* ── Badges ── */
    .badge { padding: 3px 8px; font-size: 11px; }

    /* ── Alerts ── */
    .alert { padding: 10px 14px; margin-bottom: 14px; gap: 10px; font-size: 13px; }

    /* ── Modals ── */
    .modal-header { padding: 12px 16px; }
    .modal-title { font-size: 16px; }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 12px 16px; }

    /* ── Pagination ── */
    .pagination { margin-top: 14px; padding: 12px 0; }
    .page-link { padding: 6px 10px; font-size: 13px; }

    /* ── Filters ── */
    .filters-bar { gap: 10px; margin-bottom: 14px; }
    .search-box { min-width: 200px; }

    /* ── Tabs ── */
    .tabs { margin-bottom: 14px; }
    .tab { padding: 8px 16px; font-size: 13px; }

    /* ── Quick actions ── */
    .quick-actions { gap: 10px; }
    .quick-action-btn { padding: 14px; gap: 8px; font-size: 13px; }
    .quick-action-btn i { font-size: 20px; }

    /* ── Avatars ── */
    .avatar { width: 34px; height: 34px; }
    .avatar-sm { width: 28px; height: 28px; }
    .avatar-lg { width: 52px; height: 52px; }

    /* ── Empty state ── */
    .empty-state { padding: 40px 16px; }
    .empty-state i { font-size: 48px; margin-bottom: 12px; }
    .empty-state h3 { font-size: 16px; }

    /* ── Dropdown ── */
    .dropdown-item { padding: 8px 14px; font-size: 13px; gap: 8px; }
    .dropdown-menu { padding: 4px 0; }

    /* ── Spacing utilities ── */
    .mt-4 { margin-top: 16px; }
    .mb-4 { margin-bottom: 16px; }
}

/* Responsive */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .menu-toggle {
        display: block;
    }
}

@media (max-width: 768px) {
    .content {
        padding: 16px 12px;
    }

    .header {
        padding: 0 12px;
    }

    .header-left {
        gap: 10px;
    }

    .header-title {
        font-size: 15px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .filters-bar {
        flex-direction: column;
    }

    .search-box {
        width: 100%;
    }

    .card {
        margin-bottom: 16px;
    }

    .card-header {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-body {
        padding: 14px;
    }

    .card-title {
        font-size: 14px;
    }

    table th, table td {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* Quick Actions Grid */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: var(--gray-50);
    border-radius: var(--border-radius);
    color: var(--gray-700);
    transition: all 0.2s;
    text-align: center;
}

.quick-action-btn:hover {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-2px);
}

.quick-action-btn i {
    font-size: 24px;
}

/* Avatar */
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 96px; height: 96px; }

/* Member status colors */
.status-active { color: var(--success); }
.status-expired { color: var(--danger); }
.status-frozen { color: var(--info); }
.status-cancelled { color: var(--gray-500); }

/* Tabs */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 20px;
}

.tab {
    padding: 12px 20px;
    color: var(--gray-600);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
}

.tab:hover {
    color: var(--gray-900);
}

.tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Mobile Members List - Card Layout */
@media (max-width: 768px) {
    /* Members table: hide columns, show card layout */
    .members-table thead { display: none; }
    .members-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px 14px;
        border-bottom: 1px solid var(--gray-200);
        gap: 0;
        position: relative;
    }
    .members-table tbody tr:hover { background: none; }

    .members-table td { border: none; padding: 0; }

    /* Member column: full row */
    .members-table td.col-member {
        flex: 1;
        min-width: 0;
        padding-right: 8px;
    }
    .members-table td.col-member .d-flex { gap: 10px; }
    .members-table td.col-member strong {
        font-size: 14px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }
    .members-table td.col-member small { font-size: 11px; }

    /* Status column: pill badge on right */
    .members-table td.col-status {
        position: absolute;
        right: 14px;
        top: 14px;
    }
    .members-table td.col-status .badge { font-size: 10px; }

    /* Actions column: bottom row, full width */
    .members-table td.col-actions {
        width: 100%;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--gray-100);
        display: flex;
    }
    .members-table td.col-actions .actions {
        display: flex;
        gap: 6px;
        width: 100%;
    }
    .members-table td.col-actions .actions .btn {
        flex: 1;
        justify-content: center;
        font-size: 12px;
        padding: 6px 8px;
    }
    .members-table td.col-actions .actions form { flex: 1; display: flex; }
    .members-table td.col-actions .actions form .btn { width: 100%; }

    /* Hidden columns on mobile */
    .members-table td.col-contact,
    .members-table td.col-plan,
    .members-table td.col-expiry,
    .members-table td.col-login {
        display: none;
    }

    /* Mobile: show plan + expiry as subtitles under member name */
    .members-table .mobile-meta {
        display: flex;
        gap: 6px;
        align-items: center;
        margin-top: 3px;
        flex-wrap: wrap;
    }
    .members-table .mobile-meta .meta-plan {
        font-size: 11px;
        color: var(--gray-500);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }
    .members-table .mobile-meta .meta-expiry {
        font-size: 10px;
        padding: 1px 6px;
        border-radius: 4px;
        font-weight: 600;
    }
    .members-table .mobile-meta .meta-expiry.exp-ok { background: #dcfce7; color: #16a34a; }
    .members-table .mobile-meta .meta-expiry.exp-warn { background: #fef3c7; color: #d97706; }
    .members-table .mobile-meta .meta-expiry.exp-danger { background: #fee2e2; color: #dc2626; }

    /* ===== Members Filters Bar - Mobile ===== */
    .members-filters {
        flex-direction: column;
        gap: 10px;
    }

    /* Row 1: Search + Add button side by side */
    .members-filters .mf-row-search {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    .members-filters .mf-row-search .search-box {
        flex: 1;
        min-width: 0;
    }
    .members-filters .mf-row-search .search-box input {
        font-size: 13px;
        padding: 9px 10px 9px 34px;
    }
    .members-filters .mf-row-search .search-box i { left: 10px; }
    .members-filters .mf-add-btn {
        flex-shrink: 0;
        font-size: 13px;
        padding: 9px 12px;
        white-space: nowrap;
    }
    .members-filters .mf-add-text { display: none; }

    /* Row 2: Dropdowns + action buttons wrap into a scrollable row */
    .members-filters .mf-row-filters {
        display: flex;
        gap: 6px;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .members-filters .mf-row-filters::-webkit-scrollbar { display: none; }
    .members-filters .mf-row-filters > * {
        flex-shrink: 0;
    }
    .members-filters .mf-row-filters select.form-control {
        font-size: 12px;
        padding: 7px 8px;
        width: auto;
        min-width: 0;
    }
    .members-filters .mf-row-filters .btn {
        font-size: 11px;
        padding: 7px 10px;
        white-space: nowrap;
    }
    .members-filters .mf-btn-text { display: none; }
    .members-filters .mf-bulk-btn { display: none; }
}

/* =====================================================
   GENERIC MOBILE TABLE CARD LAYOUT
   class="mobile-table" on <table>
   Column roles on <td>:
     col-primary    — main identity, flex-grows
     col-badge      — status pill, top-right absolute
     col-secondary  — hidden; surface via .mobile-sub
     col-hide-mobile— hidden entirely
     col-actions    — bottom row, full-width flex buttons
   ===================================================== */
@media (max-width: 768px) {
    .mobile-table thead { display: none; }
    .mobile-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 10px 14px;
        border-bottom: 1px solid var(--gray-200);
        position: relative;
        gap: 0;
    }
    .mobile-table tbody tr:hover { background: none; }
    .mobile-table td { border: none; padding: 0; }

    .mobile-table td.col-primary {
        flex: 1;
        min-width: 0;
        padding-right: 70px;
    }
    .mobile-table td.col-primary strong,
    .mobile-table td.col-primary > a {
        display: block;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--gray-800);
        text-decoration: none;
    }
    .mobile-table td.col-primary small { font-size: 11px; }

    .mobile-table td.col-badge {
        position: absolute;
        right: 14px;
        top: 12px;
    }
    .mobile-table td.col-badge .badge { font-size: 10px; }

    .mobile-table td.col-secondary,
    .mobile-table td.col-hide-mobile { display: none; }

    .mobile-table td.col-actions {
        width: 100%;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--gray-100);
    }
    .mobile-table td.col-actions .actions {
        display: flex;
        gap: 6px;
        width: 100%;
    }
    .mobile-table td.col-actions .actions .btn,
    .mobile-table td.col-actions .actions > a,
    .mobile-table td.col-actions .actions > button {
        flex: 1;
        justify-content: center;
        font-size: 12px;
        padding: 6px 8px;
        text-align: center;
    }
    .mobile-table td.col-actions .actions form { flex: 1; display: flex; }
    .mobile-table td.col-actions .actions form .btn { width: 100%; }

    /* mobile-sub: subtitle line under primary */
    .mobile-table .mobile-sub {
        display: flex;
        flex-wrap: wrap;
        gap: 3px 8px;
        margin-top: 3px;
        align-items: center;
    }
    .mobile-table .mobile-sub .sub-item {
        font-size: 11px;
        color: var(--gray-500);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }
    .mobile-table .mobile-sub .sub-badge {
        font-size: 10px;
        padding: 1px 6px;
        border-radius: 4px;
        font-weight: 500;
        background: var(--gray-200);
        color: var(--gray-600);
    }

    /* Scrollable filters-bar variant */
    .filters-bar-scroll {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .filters-bar-scroll .fb-row-top {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    .filters-bar-scroll .fb-row-top .search-box {
        flex: 1;
        min-width: 0;
    }
    .filters-bar-scroll .fb-row-top .search-box input {
        font-size: 13px;
        padding: 9px 10px 9px 34px;
    }
    .filters-bar-scroll .fb-add-btn {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 13px;
        padding: 9px 12px;
    }
    .filters-bar-scroll .fb-row-filters {
        display: flex;
        gap: 6px;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .filters-bar-scroll .fb-row-filters::-webkit-scrollbar { display: none; }
    .filters-bar-scroll .fb-row-filters > * { flex-shrink: 0; }
    .filters-bar-scroll .fb-row-filters select.form-control {
        font-size: 12px;
        padding: 7px 8px;
        width: auto;
        min-width: 0;
    }
    .filters-bar-scroll .fb-row-filters .btn {
        font-size: 11px;
        padding: 7px 10px;
        white-space: nowrap;
    }

    /* Expenses grid collapse */
    .expenses-layout { grid-template-columns: 1fr !important; }
}

/* Desktop: hide mobile-only elements & layout defaults */
@media (min-width: 769px) {
    .members-table .mobile-meta { display: none; }
    .mobile-table .mobile-sub { display: none; }

    /* Members filters: flatten wrapper divs on desktop */
    .members-filters .mf-row-search,
    .members-filters .mf-row-filters {
        display: contents;
    }

    /* Generic filters-bar-scroll: flatten on desktop */
    .filters-bar-scroll .fb-row-top,
    .filters-bar-scroll .fb-row-filters {
        display: contents;
    }
}

/* Print styles */
@media print {
    .sidebar, .header, .btn, .actions {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* Dark Mode overrides for custom page-specific components */
[data-theme="dark"] .stat-card-custom,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .stat-box,
[data-theme="dark"] .service-card,
[data-theme="dark"] .generating-card,
[data-theme="dark"] .success-card,
[data-theme="dark"] .error-card,
[data-theme="dark"] .today-row,
[data-theme="dark"] .request-row,
[data-theme="dark"] .chart-container,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .gym-card {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .stat-card-custom h3,
[data-theme="dark"] .stat-card-custom strong,
[data-theme="dark"] .stat-card h3,
[data-theme="dark"] .stat-card strong,
[data-theme="dark"] .stat-box h2,
[data-theme="dark"] .stat-box h3,
[data-theme="dark"] .stat-box .value,
[data-theme="dark"] .today-row strong,
[data-theme="dark"] .request-row strong,
[data-theme="dark"] .service-card strong {
    color: var(--text-title) !important;
}

[data-theme="dark"] .stat-card-custom p,
[data-theme="dark"] .stat-card p,
[data-theme="dark"] .stat-box p,
[data-theme="dark"] .stat-box .label,
[data-theme="dark"] .today-row p,
[data-theme="dark"] .request-row p,
[data-theme="dark"] .service-card p {
    color: var(--text-muted) !important;
}

/* Custom styled report/dashboard color boxes overrides */
[data-theme="dark"] .stat-box-success {
    background: rgba(34, 197, 94, 0.15) !important;
}
[data-theme="dark"] .stat-box-success h2 {
    color: #22c55e !important;
}
[data-theme="dark"] .stat-box-success p {
    color: #4ade80 !important;
}

[data-theme="dark"] .stat-box-danger {
    background: rgba(239, 68, 68, 0.15) !important;
}
[data-theme="dark"] .stat-box-danger h2 {
    color: #ef4444 !important;
}
[data-theme="dark"] .stat-box-danger p {
    color: #f87171 !important;
}

[data-theme="dark"] .stat-box-warning {
    background: rgba(245, 158, 11, 0.15) !important;
}
[data-theme="dark"] .stat-box-warning h2 {
    color: #f59e0b !important;
}
[data-theme="dark"] .stat-box-warning p {
    color: #fbbf24 !important;
}

[data-theme="dark"] .stat-box-info {
    background: rgba(59, 130, 246, 0.15) !important;
}
[data-theme="dark"] .stat-box-info h2 {
    color: #3b82f6 !important;
}
[data-theme="dark"] .stat-box-info p {
    color: #60a5fa !important;
}

[data-theme="dark"] .stat-box-primary {
    background: rgba(79, 70, 229, 0.15) !important;
}
[data-theme="dark"] .stat-box-primary h2 {
    color: var(--primary-light) !important;
}
[data-theme="dark"] .stat-box-primary p {
    color: var(--text-main) !important;
}

/* GST Reports Dark Theme Overrides */
[data-theme="dark"] .gst-meta { color: var(--text-main); }
[data-theme="dark"] .gst-meta strong { color: var(--text-title); }
[data-theme="dark"] .gst-tabs { border-bottom-color: var(--border-color); }
[data-theme="dark"] .gst-tab { color: var(--text-muted); }
[data-theme="dark"] .gst-tab.active { color: var(--primary-light); border-bottom-color: var(--primary-light); }
[data-theme="dark"] .gst-tab:hover:not(.active) { color: var(--text-title); background: var(--gray-100); }
[data-theme="dark"] .gst-card { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .gst-card .value { color: var(--text-title); }
[data-theme="dark"] .gst-card.amber { background: rgba(245, 158, 11, 0.15); border-color: #fbbf24; }
[data-theme="dark"] .gst-card.green { background: rgba(34, 197, 94, 0.15); border-color: #4ade80; }
[data-theme="dark"] .gst-card.red { background: rgba(239, 68, 68, 0.15); border-color: #f87171; }
[data-theme="dark"] table.gst-table th { background: var(--table-header-bg); border-bottom-color: var(--border-color); color: var(--text-title); }
[data-theme="dark"] table.gst-table td { border-bottom-color: var(--border-color); color: var(--text-main); }
[data-theme="dark"] table.gst-table tfoot td { background: var(--table-header-bg); border-top-color: var(--border-color); color: var(--text-title); }

/* Face Attendance Dark Theme Overrides */
[data-theme="dark"] .camera-section { background: var(--card-bg); border-color: var(--border-color); box-shadow: var(--shadow); }
[data-theme="dark"] .camera-body { background: var(--card-bg); }
[data-theme="dark"] .status-bar.waiting { background: var(--gray-100); color: var(--text-muted); }
[data-theme="dark"] .status-bar.detected,
[data-theme="dark"] .status-bar.success { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
[data-theme="dark"] .status-bar.identifying { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
[data-theme="dark"] .status-bar.error { background: rgba(239, 68, 68, 0.15); color: #f87171; }
[data-theme="dark"] .result-card { background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.2)); border-color: #22c55e; }
[data-theme="dark"] .result-card.checkout { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.2)); border-color: #f59e0b; }
[data-theme="dark"] .result-card.error { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.2)); border-color: #ef4444; }
[data-theme="dark"] .result-card.warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.2)); border-color: #f59e0b; }
[data-theme="dark"] .result-avatar { background: var(--gray-200); color: var(--text-muted); }
[data-theme="dark"] .result-name,
[data-theme="dark"] .result-time { color: var(--text-title); }
[data-theme="dark"] .confidence-bar { color: var(--text-muted); }
[data-theme="dark"] .confidence-bar .bar { background: var(--gray-200); }
[data-theme="dark"] .attendance-list { background: var(--card-bg); border-color: var(--border-color); box-shadow: var(--shadow); }
[data-theme="dark"] .attendance-header { border-bottom-color: var(--border-color); }

/* Plans Page Dark Theme Overrides */
[data-theme="dark"] .plans-header h2 { color: var(--text-title); }
[data-theme="dark"] .layout-controls { background: var(--gray-100); border-color: var(--border-color); }
[data-theme="dark"] .layout-btn { color: var(--text-muted); }
[data-theme="dark"] .layout-btn.active { background: var(--gray-200); color: var(--primary-light); }
[data-theme="dark"] .plans-table-card { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .plans-table th { background: var(--table-header-bg); border-bottom-color: var(--border-color); color: var(--text-title); }
[data-theme="dark"] .plans-table td { border-bottom-color: var(--border-color); color: var(--text-main); }
[data-theme="dark"] .plans-table tr:hover td { background: var(--table-hover-bg); }
[data-theme="dark"] .table-plan-name,
[data-theme="dark"] .table-plan-price { color: var(--text-title); }
[data-theme="dark"] .table-btn.edit { background: var(--gray-200); color: var(--text-main); }
[data-theme="dark"] .table-btn.edit:hover { background: var(--gray-300); color: var(--primary-light); }
[data-theme="dark"] .plan-card-compact { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .plan-header-compact { border-bottom-color: var(--border-color); }
[data-theme="dark"] .plan-info-compact .name { color: var(--text-title); }
[data-theme="dark"] .plan-pricing-compact { background: var(--gray-50); border-bottom-color: var(--border-color); }
[data-theme="dark"] .plan-pricing-compact .duration { color: var(--text-muted); }
[data-theme="dark"] .plan-stats-compact { background: var(--gray-50); border-top-color: var(--border-color); color: var(--text-muted); }
[data-theme="dark"] .plan-stats-compact strong { color: var(--text-title); }
[data-theme="dark"] .plan-actions-compact { background: var(--card-bg); border-top-color: var(--border-color); }

/* Trainers Page Dark Theme Overrides */
[data-theme="dark"] .member-item { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .member-item:hover { background: var(--gray-100); border-color: var(--primary-light); }
[data-theme="dark"] .member-item.selected { background: rgba(79, 70, 229, 0.15); border-color: var(--primary); }
[data-theme="dark"] .member-name { color: var(--text-title); }
[data-theme="dark"] .member-details { color: var(--text-muted); }
[data-theme="dark"] .filter-btn { background: var(--card-bg); border-color: var(--border-color); color: var(--text-main); }
[data-theme="dark"] .filter-btn.active { background: var(--primary); color: #fff; border-color: transparent; }
[data-theme="dark"] .pagination-btn { background: var(--card-bg); border-color: var(--border-color); color: var(--text-main); }
[data-theme="dark"] .pagination-btn:hover { background: var(--gray-100); }
[data-theme="dark"] .pagination-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
[data-theme="dark"] .select-all-row { background: var(--gray-50); }
[data-theme="dark"] .trainer-card { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .trainer-avatar { background: var(--gray-50); color: var(--text-muted); }
[data-theme="dark"] .trainer-name { color: var(--text-title); }
[data-theme="dark"] .trainer-specialty { color: var(--text-muted); }
[data-theme="dark"] .trainer-meta { background: var(--border-color); }
[data-theme="dark"] .trainer-meta-item { background: var(--card-bg); }
[data-theme="dark"] .trainer-meta-value { color: var(--text-title); }
[data-theme="dark"] .trainer-meta-label { color: var(--text-muted); }
[data-theme="dark"] .trainer-contact-row { color: var(--text-main); }
[data-theme="dark"] .trainer-actions .btn-edit { background: var(--primary); color: #fff; }
[data-theme="dark"] .trainer-actions .btn-edit:hover { background: var(--primary-dark); }
[data-theme="dark"] .trainer-actions .btn-remove { background: var(--card-bg); border-color: var(--border-color); color: var(--text-muted); }
[data-theme="dark"] .trainer-actions .btn-remove:hover { color: var(--danger); border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.05); }

/* Autocomplete Dark Theme Overrides */
[data-theme="dark"] .ac-results { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .ac-row { border-bottom-color: var(--border-color); }
[data-theme="dark"] .ac-row:hover,
[data-theme="dark"] .ac-row.active { background: var(--gray-100); }
[data-theme="dark"] .ac-row .ac-avatar { background: var(--gray-200); color: var(--text-muted); }
[data-theme="dark"] .ac-row .ac-name { color: var(--text-title); }
[data-theme="dark"] .ac-selected { background: rgba(34, 197, 94, 0.15); border-color: #22c55e; color: var(--text-main); }
[data-theme="dark"] .ac-selected-meta { color: var(--text-muted); }

/* Balance Sheet Page Dark Theme Overrides */
[data-theme="dark"] .period-btn { background: var(--card-bg); border-color: var(--border-color); color: var(--text-main); }
[data-theme="dark"] .period-btn:hover { border-color: var(--primary); color: var(--primary-light); }
[data-theme="dark"] .period-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
[data-theme="dark"] .summary-card { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .summary-card-title { color: var(--text-muted); }
[data-theme="dark"] .summary-card.income .summary-card-value { color: #4ade80; }
[data-theme="dark"] .summary-card.expense .summary-card-value { color: #f87171; }
[data-theme="dark"] .summary-card.profit .summary-card-value { color: #60a5fa; }
[data-theme="dark"] .summary-card.loss .summary-card-value { color: #fbbf24; }
[data-theme="dark"] .breakdown-card { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .breakdown-header { border-bottom-color: var(--border-color); }
[data-theme="dark"] .breakdown-title { color: var(--text-title); }
[data-theme="dark"] .breakdown-total { color: var(--text-title); }
[data-theme="dark"] .breakdown-item { border-bottom-color: var(--border-color); }
[data-theme="dark"] .breakdown-item-label { color: var(--text-main); }
[data-theme="dark"] .breakdown-item-value { color: var(--text-title); }

/* WhatsApp Logs Dark Theme Overrides */
[data-theme="dark"] .wa-stat { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .wa-stat h4 { color: var(--text-title); }
[data-theme="dark"] .wa-stat p { color: var(--text-muted); }
[data-theme="dark"] .status-sent { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
[data-theme="dark"] .status-failed { background: rgba(239, 68, 68, 0.15); color: #f87171; }
[data-theme="dark"] .type-badge { background: var(--gray-100); color: var(--text-main); }

/* Rules Page & Summernote Editor Dark Theme Overrides */
[data-theme="dark"] .editor-container,
[data-theme="dark"] .preview-content { background: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
[data-theme="dark"] .preview-content h1,
[data-theme="dark"] .preview-content h2,
[data-theme="dark"] .preview-content h3 { color: var(--text-title) !important; }
[data-theme="dark"] .preview-content table td,
[data-theme="dark"] .preview-content table th { border-color: var(--border-color) !important; }
[data-theme="dark"] .preview-content table th { background: var(--table-header-bg) !important; }
[data-theme="dark"] .note-editor .note-toolbar,
[data-theme="dark"] .note-editor .note-statusbar { background: var(--gray-100) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .note-editor .note-editable { background: var(--card-bg) !important; color: var(--text-main) !important; }
[data-theme="dark"] .note-btn { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-main) !important; }
[data-theme="dark"] .note-btn:hover { background: var(--gray-200) !important; color: var(--text-title) !important; }
[data-theme="dark"] .note-dropdown-menu { background: var(--dropdown-bg) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
[data-theme="dark"] .note-dropdown-item:hover { background: var(--dropdown-hover) !important; }

/* Settings Layout Page Dark Theme Overrides */
[data-theme="dark"] .settings-tabs-nav { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .settings-tabs-nav .tab:hover { background: var(--gray-100); color: var(--text-title) !important; }
[data-theme="dark"] .card-custom { background: var(--card-bg) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .card-title-custom { color: var(--text-title) !important; }
[data-theme="dark"] .form-control-custom { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important; }
[data-theme="dark"] .logo-preview-avatar-container { background: var(--input-bg); border-color: var(--border-color); }
[data-theme="dark"] .upload-title { color: var(--text-title); }
[data-theme="dark"] .day-row-modern { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .day-row-modern:hover { border-color: var(--primary); }
[data-theme="dark"] .day-row-modern.is-closed { background: var(--gray-50); }
[data-theme="dark"] .day-indicator { background: var(--gray-100); color: var(--text-main); }
[data-theme="dark"] .day-row-modern.is-closed .day-indicator { background: var(--gray-200); color: var(--text-muted); }
[data-theme="dark"] .day-full-name { color: var(--text-title); }
[data-theme="dark"] .day-row-modern.is-closed .day-full-name { color: var(--text-muted); }

/* Storefront Settings overrides */
[data-theme="dark"] .settings-card { background: var(--card-bg) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .settings-card-header h3,
[data-theme="dark"] .setting-label { color: var(--text-title) !important; }
[data-theme="dark"] .setting-desc { color: var(--text-muted) !important; }

/* Payment Settings overrides */
[data-theme="dark"] .payment-header h2 { color: var(--text-title); }
[data-theme="dark"] .payment-section { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .payment-section-header { border-bottom-color: var(--border-color); }
[data-theme="dark"] .payment-section-header h3 { color: var(--text-title); }
[data-theme="dark"] .payment-item-label { color: var(--text-title); }
[data-theme="dark"] .payment-item-content { color: var(--text-main); }
[data-theme="dark"] .payment-item-content .value { background: var(--gray-200); color: var(--text-title); }
[data-theme="dark"] .qr-preview { border-color: var(--border-color); }
[data-theme="dark"] .btn-edit-sm { background: var(--gray-200); color: var(--text-main); }
[data-theme="dark"] .btn-edit-sm:hover { background: var(--gray-300); }

/* Attendance Report Overrides */
[data-theme="dark"] .att-stat,
[data-theme="dark"] .chart-card { background: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
[data-theme="dark"] .att-stat .value,
[data-theme="dark"] .chart-card h4 { color: var(--text-title) !important; }
[data-theme="dark"] .att-stat .label { color: var(--text-muted) !important; }

/* Attendance Log Badges */
[data-theme="dark"] .badge-gender-male { background: rgba(37, 99, 235, 0.15); color: #60a5fa; }
[data-theme="dark"] .badge-gender-female { background: rgba(219, 39, 119, 0.15); color: #f472b6; }
[data-theme="dark"] .duration-badge { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
[data-theme="dark"] .status-inGym { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
[data-theme="dark"] .status-inGym::before { background: #4ade80; }

/* Storefront Orders table */
[data-theme="dark"] .orders-table { background: var(--card-bg) !important; }

/* Global Wildcard Overrides to handle inline style backgrounds/borders */
[data-theme="dark"] [style*="background:#ecfdf5"],
[data-theme="dark"] [style*="background: #ecfdf5"],
[data-theme="dark"] [style*="background:#f0fdf4"],
[data-theme="dark"] [style*="background: #f0fdf4"] {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: #22c55e !important;
    color: #4ade80 !important;
}
[data-theme="dark"] [style*="background:#eff6ff"],
[data-theme="dark"] [style*="background: #eff6ff"],
[data-theme="dark"] [style*="background:#f0f9ff"],
[data-theme="dark"] [style*="background: #f0f9ff"],
[data-theme="dark"] [style*="background:#dbeafe"],
[data-theme="dark"] [style*="background: #dbeafe"] {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}
[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background: #fef3c7"],
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background: #fffbeb"],
[data-theme="dark"] [style*="background:#fde68a"],
[data-theme="dark"] [style*="background: #fde68a"] {
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background: #fee2e2"],
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background: #fef2f2"] {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #f87171 !important;
}
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#e5e7eb"],
[data-theme="dark"] [style*="background: #e5e7eb"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"] {
    background: var(--gray-50) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] [style*="border-bottom: 1px solid #f1f5f9"],
[data-theme="dark"] [style*="border-bottom: 1px solid #e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"] {
    border-color: var(--border-color) !important;
}

/* Header User button dark mode overrides */
[data-theme="dark"] .user-btn {
    background: var(--user-btn-bg) !important;
    color: var(--text-title) !important;
}
[data-theme="dark"] .user-btn:hover {
    background: var(--user-btn-hover) !important;
}
[data-theme="dark"] .user-btn i {
    color: var(--text-muted) !important;
}

/* Member Profile View Page Dark Theme Overrides */
[data-theme="dark"] .profile-summary-header { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .header-avatar { border-color: var(--card-bg); background: var(--gray-200); }
[data-theme="dark"] .header-profile-name { color: var(--text-title); }
[data-theme="dark"] .header-member-id { background: var(--gray-100); color: var(--text-muted); }
[data-theme="dark"] .contact-capsule { background: var(--gray-100); color: var(--text-main); }
[data-theme="dark"] .header-telemetry-block { background: var(--gray-50); border-color: var(--border-color); }
[data-theme="dark"] .telemetry-value { color: var(--text-title); }
[data-theme="dark"] .telemetry-label { color: var(--text-muted); }
[data-theme="dark"] .dashboard-compact-card { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .card-title-row { border-bottom-color: var(--border-color); }
[data-theme="dark"] .card-title-row h4 { color: var(--text-title); }
[data-theme="dark"] .details-row { border-bottom-color: var(--border-color); }
[data-theme="dark"] .row-label { color: var(--text-muted); }
[data-theme="dark"] .row-value { color: var(--text-title); }
[data-theme="dark"] .value-goal { background: var(--gray-50); border-color: var(--border-color); color: var(--text-main); }
[data-theme="dark"] .profile-dashboard-content { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .att-filter-btn { background: var(--gray-100) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
[data-theme="dark"] .att-filter-btn:hover { background: var(--gray-200) !important; }

/* AI Diet & Workout Generator Pages Overrides */
[data-theme="dark"] .btn-back { background: var(--gray-100) !important; color: var(--text-main) !important; }
[data-theme="dark"] .btn-back:hover { background: var(--gray-200) !important; }
[data-theme="dark"] .page-subtitle { color: var(--text-muted) !important; }
[data-theme="dark"] .form-label { color: var(--text-main) !important; }
[data-theme="dark"] .form-control { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--input-text) !important; }
[data-theme="dark"] .form-control:focus { border-color: var(--primary) !important; }
[data-theme="dark"] .card { background: var(--card-bg) !important; border-color: var(--border-color) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.05) !important; }
[data-theme="dark"] .card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important; }
[data-theme="dark"] .card-header { background: var(--table-header-bg) !important; border-bottom-color: var(--border-color) !important; }
[data-theme="dark"] .card-title { color: var(--text-title) !important; }
[data-theme="dark"] .radio-card-content,
[data-theme="dark"] .activity-content,
[data-theme="dark"] .goal-content,
[data-theme="dark"] .diet-type-content { background: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
[data-theme="dark"] .radio-card input:checked + .radio-card-content,
[data-theme="dark"] .activity-option input:checked + .activity-content,
[data-theme="dark"] .goal-option input:checked + .goal-content,
[data-theme="dark"] .diet-type-option input:checked + .diet-type-content { background: rgba(99, 102, 241, 0.15) !important; border-color: var(--primary-light) !important; color: var(--text-title) !important; }
[data-theme="dark"] .radio-card-content:hover,
[data-theme="dark"] .activity-content:hover,
[data-theme="dark"] .goal-content:hover,
[data-theme="dark"] .diet-type-content:hover { border-color: var(--primary) !important; }
[data-theme="dark"] .radio-card-content small,
[data-theme="dark"] .diet-type-content .desc { color: var(--text-muted) !important; }
[data-theme="dark"] .checkbox-item,
[data-theme="dark"] .checkbox-label { background: var(--gray-100) !important; color: var(--text-main) !important; }
[data-theme="dark"] .checkbox-item:hover,
[data-theme="dark"] .checkbox-label:hover { background: var(--gray-200) !important; }
[data-theme="dark"] .checkbox-item:has(input:checked),
[data-theme="dark"] .checkbox-label:has(input:checked) { background: var(--primary) !important; color: white !important; }
[data-theme="dark"] .checkbox-item.injury-item { background: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; }
[data-theme="dark"] .checkbox-item.injury-item:has(input:checked) { background: #dc3545 !important; color: white !important; }
[data-theme="dark"] .toggle-slider { background: var(--gray-300) !important; }
[data-theme="dark"] .toggle-label { color: var(--text-main) !important; }
[data-theme="dark"] .btn-outline { background: var(--card-bg) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .btn-outline:hover { border-color: var(--primary) !important; color: var(--primary-light) !important; }
[data-theme="dark"] .generating-card,
[data-theme="dark"] .success-card,
[data-theme="dark"] .error-card { background: var(--card-bg) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-lg) !important; color: var(--text-main) !important; }
[data-theme="dark"] .generating-card h2,
[data-theme="dark"] .success-card h2,
[data-theme="dark"] .error-card h2 { color: var(--text-title) !important; }
[data-theme="dark"] .progress { background: var(--border-color) !important; }
[data-theme="dark"] .form-actions { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%) !important; }

/* ── Member access chips ────────────────────────────────────────────────
   Shows what currently grants a member access: membership, PT, or both.
   Overlaid on the bottom-right of the member photo in every list layout,
   and rendered inline beside the status capsule on the member profile. */
.access-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 10px; line-height: 1; color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    vertical-align: middle; cursor: help;
    margin-left: 4px;
}
.access-chips-overlay .access-chip { margin-left: 0; }
.access-chip-mem    { background: #2563eb; }   /* membership — blue */
.access-chip-pt     { background: #e11d48; }   /* PT with gate access — red/pink */
.access-chip-nogate { background: #6b7280; }   /* PT without gate access — grey */

.avatar-wrap { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
.access-chips-overlay {
    position: absolute; right: -4px; bottom: -4px;
    display: flex; gap: 2px; line-height: 0;
}
.access-chips-overlay:empty { display: none; }
/* Small avatars (32px table rows) get smaller chips */
.access-chips-overlay.overlay-sm .access-chip {
    width: 16px; height: 16px; font-size: 8px; border-width: 1.5px;
}
/* Card view has a large square photo — bigger chips, inset from the corner */
.member-card-photo .access-chips-overlay { right: 8px; bottom: 8px; gap: 4px; }
.member-card-photo .access-chip { width: 26px; height: 26px; font-size: 13px; }


/* ─────────────────────────────────────────────────────────────
   DARK THEME: unstyled controls and hard-coded pastels
   Plain <input>/<select>/<textarea> that carry no class keep the
   browser's white; and many pages paint status chips with literal
   pastel hex values. Both stayed light while everything around them
   went dark. Handled once here rather than page by page.
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="image"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
    color-scheme: dark;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #64748b; }
[data-theme="dark"] option { background-color: var(--input-bg); color: var(--input-text); }

/* Pastel chips written inline: keep the meaning (green = active), lose the glare. */
[data-theme="dark"] [style*="#dcfce7"], [data-theme="dark"] [style*="#d1fae5"], [data-theme="dark"] [style*="#f0fdf4"] { background-color: rgba(34,197,94,.16) !important; color: #4ade80 !important; }
[data-theme="dark"] [style*="#fef2f2"], [data-theme="dark"] [style*="#fee2e2"], [data-theme="dark"] [style*="#ffe4e6"] { background-color: rgba(239,68,68,.16) !important; color: #fca5a5 !important; }
[data-theme="dark"] [style*="#fef9c3"], [data-theme="dark"] [style*="#fef3c7"], [data-theme="dark"] [style*="#fffbeb"] { background-color: rgba(245,158,11,.16) !important; color: #fcd34d !important; border-color: rgba(245,158,11,.35) !important; }
[data-theme="dark"] [style*="#eff6ff"], [data-theme="dark"] [style*="#dbeafe"], [data-theme="dark"] [style*="#e0f2fe"] { background-color: rgba(59,130,246,.16) !important; color: #93c5fd !important; }
[data-theme="dark"] [style*="#f3e8ff"], [data-theme="dark"] [style*="#ede9fe"] { background-color: rgba(139,92,246,.16) !important; color: #c4b5fd !important; }
[data-theme="dark"] [style*="#f3f4f6"], [data-theme="dark"] [style*="#f9fafb"], [data-theme="dark"] [style*="#f8fafc"], [data-theme="dark"] [style*="#f1f5f9"] { background-color: rgba(148,163,184,.14) !important; color: #cbd5e1 !important; }


/* ─────────────────────────────────────────────────────────────
   LIQUID GLASS: navigation chrome (iOS-style frosted panels)
   The sidebar and top bar become translucent and blur whatever
   scrolls behind them. Text stays on a dark/solid-enough layer,
   and browsers without backdrop-filter simply see the old solid
   colour, because the fallback background is declared first.
   ───────────────────────────────────────────────────────────── */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .sidebar {
        background: linear-gradient(180deg, rgba(30, 41, 59, .93) 0%, rgba(15, 23, 42, .90) 100%);
        -webkit-backdrop-filter: blur(26px) saturate(180%);
        backdrop-filter: blur(26px) saturate(180%);
        border-right: 1px solid rgba(255, 255, 255, .10);
        box-shadow: 1px 0 24px rgba(15, 23, 42, .18);
    }
    [data-theme="dark"] .sidebar {
        background: linear-gradient(180deg, rgba(22, 27, 38, .86) 0%, rgba(9, 13, 22, .82) 100%);
        border-right-color: rgba(255, 255, 255, .08);
    }

    /* Menu items: glass pills instead of flat fills */
    .sidebar .menu-item.active > a,
    .sidebar .menu-link.active,
    .sidebar a.active {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 18px rgba(0, 0, 0, .25);
    }

    .header {
        background: rgba(255, 255, 255, .72);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
        border-bottom: 1px solid rgba(120, 120, 128, .16);
    }
    [data-theme="dark"] .header {
        background: rgba(22, 27, 38, .70);
        border-bottom-color: rgba(255, 255, 255, .08);
    }
}


/* ─────────────────────────────────────────────────────────────
   LIQUID GLASS: surfaces (iOS-style), portal-wide
   A fixed colour wash sits behind every page, and the panels on
   top of it are frosted rather than solid. Only surfaces change —
   no layout, spacing or markup. Browsers without backdrop-filter
   fall back to the solid colours declared above this block.
   ───────────────────────────────────────────────────────────── */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {

    /* The wash the glass refracts. On body so every page gets it. */
    [data-surface="glass"] body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            radial-gradient(62vw 44vw at 10% -10%, rgba(10, 132, 255, .30), transparent 62%),
            radial-gradient(54vw 40vw at 94% 2%, rgba(191, 90, 242, .26), transparent 64%),
            radial-gradient(50vw 42vw at 80% 94%, rgba(48, 209, 88, .24), transparent 62%),
            radial-gradient(46vw 38vw at 2% 90%, rgba(255, 159, 10, .20), transparent 62%);
        filter: saturate(125%);
    }
    [data-theme="dark"][data-surface="glass"] body::before {
        background:
            radial-gradient(62vw 44vw at 10% -10%, rgba(10, 132, 255, .26), transparent 62%),
            radial-gradient(54vw 40vw at 94% 2%, rgba(191, 90, 242, .22), transparent 64%),
            radial-gradient(50vw 42vw at 80% 94%, rgba(48, 209, 88, .16), transparent 62%),
            radial-gradient(46vw 38vw at 2% 90%, rgba(255, 159, 10, .14), transparent 62%);
    }

    /* Panels */
    [data-surface="glass"] .card,
    [data-surface="glass"] .stat-card,
    [data-surface="glass"] .stat-box,
    [data-surface="glass"] .chart-container,
    [data-surface="glass"] .filter-card,
    [data-surface="glass"] .gym-card,
    [data-surface="glass"] .service-card {
        background: linear-gradient(150deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .46));
        -webkit-backdrop-filter: blur(26px) saturate(180%);
        backdrop-filter: blur(26px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, .8);
        border-radius: 22px;
        box-shadow:
            0 1px 1px rgba(15, 23, 42, .04),
            0 12px 30px rgba(15, 23, 42, .08),
            inset 0 1px 0 rgba(255, 255, 255, .85);
    }
    [data-theme="dark"][data-surface="glass"] .card,
    [data-theme="dark"][data-surface="glass"] .stat-card,
    [data-theme="dark"][data-surface="glass"] .stat-box,
    [data-theme="dark"][data-surface="glass"] .chart-container,
    [data-theme="dark"][data-surface="glass"] .filter-card,
    [data-theme="dark"][data-surface="glass"] .gym-card,
    [data-theme="dark"][data-surface="glass"] .service-card {
        background: linear-gradient(150deg, rgba(58, 58, 62, .68), rgba(28, 28, 30, .52)) !important;
        border-color: rgba(255, 255, 255, .13) !important;
        box-shadow:
            0 1px 1px rgba(0, 0, 0, .35),
            0 14px 34px rgba(0, 0, 0, .45),
            inset 0 1px 0 rgba(255, 255, 255, .10) !important;
    }

    /* Hairline dividers inside glass read better than solid greys */
    [data-surface="glass"] .card-header,
    [data-surface="glass"] .card-footer { border-color: rgba(120, 120, 128, .18); }
    [data-theme="dark"][data-surface="glass"] .card-header,
    [data-theme="dark"][data-surface="glass"] .card-footer { border-color: rgba(255, 255, 255, .10); }
    [data-surface="glass"] .card-footer { background: rgba(255, 255, 255, .28); }
    [data-theme="dark"][data-surface="glass"] .card-footer { background: rgba(255, 255, 255, .04); }

    /* Table headers: a frosted strip, not a solid block */
    [data-surface="glass"] .table thead th,
    [data-surface="glass"] table thead th {
        background: rgba(255, 255, 255, .55);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    [data-theme="dark"][data-surface="glass"] .table thead th,
    [data-theme="dark"][data-surface="glass"] table thead th { background: rgba(255, 255, 255, .06); }

    /* Controls stay readable: solid enough to type into */
    [data-surface="glass"] .form-control,
    [data-surface="glass"] .form-select,
    [data-surface="glass"] input,
    [data-surface="glass"] select,
    [data-surface="glass"] textarea {
        background-color: rgba(255, 255, 255, .78);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
    [data-theme="dark"][data-surface="glass"] .form-control,
    [data-theme="dark"][data-surface="glass"] .form-select,
    [data-theme="dark"][data-surface="glass"] input,
    [data-theme="dark"][data-surface="glass"] select,
    [data-theme="dark"][data-surface="glass"] textarea { background-color: rgba(28, 28, 30, .72); }

    /* Dialogs float above the same glass */
    [data-surface="glass"] .modal-content,
    [data-surface="glass"] .modal-backdrop > .modal,
    [data-surface="glass"] .dropdown-menu,
    [data-surface="glass"] .user-dropdown {
        background: linear-gradient(150deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .72)) !important;
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        backdrop-filter: blur(30px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, .8) !important;
        border-radius: 22px;
    }
    [data-theme="dark"][data-surface="glass"] .modal-content,
    [data-theme="dark"][data-surface="glass"] .modal-backdrop > .modal,
    [data-theme="dark"][data-surface="glass"] .dropdown-menu,
    [data-theme="dark"][data-surface="glass"] .user-dropdown {
        background: linear-gradient(150deg, rgba(48, 48, 52, .90), rgba(28, 28, 30, .78)) !important;
        border-color: rgba(255, 255, 255, .14) !important;
    }

    /* Phones: lighter blur so scrolling stays smooth */
    @media (max-width: 480px) {
    [data-surface="glass"] .card,
    [data-surface="glass"] .stat-card,
    [data-surface="glass"] .stat-box,
    [data-surface="glass"] .chart-container,
    [data-surface="glass"] .filter-card,
    [data-surface="glass"] .gym-card,
    [data-surface="glass"] .service-card {
            -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        }
    }
}

/* ===========================================================================
 * LIQUID GLASS, PANEL-WIDE
 *
 * The dashboard already had this treatment, inline in manage/index.php and
 * scoped to that page alone - which is why the dashboard looked like frosted
 * glass and every other page looked flat. This promotes the same language to
 * the whole panel, using the dashboard's own numbers (28px blur, 180%
 * saturate, 26px squircle, the same shadow stack) so the two cannot drift.
 *
 * It also adds the thing the dashboard was missing: a colour wash behind the
 * glass. Frosted glass over a flat grey is just a lighter grey - the blur has
 * to have something to pick up.
 *
 * Scoped to the large surfaces on purpose. backdrop-filter is GPU work on
 * every paint, and putting one on every badge is how a dashboard starts
 * dropping frames on a mid-range laptop.
 *
 * All inside @supports, so a browser without backdrop-filter keeps the solid
 * panel rather than a set of washed-out boxes.
 * ======================================================================== */

@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {

    :root:not([data-surface="flat"]) {
        --glass-top:    rgba(255, 255, 255, 0.70);
        --glass-bottom: rgba(255, 255, 255, 0.40);
        --glass-edge:   rgba(255, 255, 255, 0.85);
        --glass-blur:   blur(26px) saturate(185%) brightness(1.06);
        --glass-shadow: 0 1px 1px rgba(15, 23, 42, .04),
                        0 14px 34px rgba(15, 23, 42, .09),
                        inset 0 1px 0 rgba(255, 255, 255, .85);
    }
    [data-theme="dark"]:not([data-surface="flat"]) {
        --glass-blur:   blur(26px) saturate(165%) brightness(1.14);
        --glass-top:    rgba(58, 58, 62, 0.70);
        --glass-bottom: rgba(28, 28, 30, 0.55);
        --glass-edge:   rgba(255, 255, 255, 0.14);
        --glass-shadow: 0 1px 1px rgba(0, 0, 0, .35),
                        0 16px 38px rgba(0, 0, 0, .45),
                        inset 0 1px 0 rgba(255, 255, 255, .10);
    }

    /* -- the colour behind the glass -------------------------------------
     * Painted as the body's own background, not a ::before at z-index:-1 -
     * a negative layer sits behind the element's own background, so against
     * a solid --body-bg it is invisible. Fixed attachment so it stays put
     * while content scrolls, which is what makes a blurred surface read as
     * glass rather than as a tinted box.
     */
    :root:not([data-surface="flat"]) body {
        /* Stronger in light than instinct suggests: a pale tint under a 70%
           white card disappears entirely. These are the values at which the
           glass actually reads as glass rather than as a slightly warm box. */
        background-image:
            radial-gradient(50vmax 50vmax at 6% -6%,   rgba(99, 102, 241, 0.55), transparent 60%),
            radial-gradient(46vmax 46vmax at 98% 0%,   rgba(14, 165, 233, 0.48), transparent 60%),
            radial-gradient(56vmax 56vmax at 80% 104%, rgba(236, 72, 153, 0.40), transparent 62%),
            radial-gradient(60vmax 40vmax at 45% 50%,  rgba(129, 140, 248, 0.20), transparent 70%);
        background-attachment: fixed;
        background-repeat: no-repeat;
    }
    [data-theme="dark"]:not([data-surface="flat"]) body {
        background-image:
            radial-gradient(48vmax 48vmax at 8% -4%,  rgba(79, 70, 229, 0.42), transparent 58%),
            radial-gradient(44vmax 44vmax at 96% 2%,  rgba(13, 148, 136, 0.34), transparent 58%),
            radial-gradient(52vmax 52vmax at 78% 102%, rgba(157, 23, 77, 0.30), transparent 60%);
    }

    /* -- surfaces ---------------------------------------------------------
     *
     * Real glass is not a translucent rectangle. Four things sell it, and
     * each is one declaration here:
     *
     *   1. The backdrop is brightened and de-saturated slightly as well as
     *      blurred - frosted glass scatters light, it does not just smear it.
     *   2. The edge is lit: bright along the top-left where light catches the
     *      bevel, dark along the bottom-right where the pane has thickness.
     *      That is the ::after gradient border, not a flat 1px line.
     *   3. A specular sweep across the upper body, wide and very soft.
     *   4. Grain. A perfectly smooth translucent surface reads as plastic;
     *      real frosting has texture, so a faint noise layer goes on top.
     *
     * The !important on background is unavoidable: a dark-theme rule further
     * up the file forces .card back to an opaque --card-bg with !important,
     * which is why dark cards stayed solid on the first pass.
     */
    [data-surface="glass"] .card,
    [data-surface="glass"] .rpt-filter,
    [data-surface="glass"] .stat-card,
    [data-surface="glass"] .modal-content,
    [data-surface="glass"] .dropdown-menu,
    [data-surface="glass"] .user-dropdown {
        position: relative;
        background:
            linear-gradient(152deg,
                var(--glass-top) 0%,
                color-mix(in srgb, var(--glass-top) 72%, transparent) 46%,
                var(--glass-bottom) 100%) !important;
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        border: 1px solid transparent !important;
        box-shadow: var(--glass-shadow) !important;
        isolation: isolate;
    }
    [data-surface="glass"] .card,
    [data-surface="glass"] .rpt-filter { border-radius: 22px; }
    [data-surface="glass"] .stat-card  { border-radius: 20px; }

    /* The lit edge and the sheen. One pseudo-element so the dashboard's own
       ::before sheen on its stat cards is left alone. */
    [data-surface="glass"] .card::after,
    [data-surface="glass"] .rpt-filter::after,
    [data-surface="glass"] .modal-content::after,
    [data-surface="glass"] .dropdown-menu::after,
    [data-surface="glass"] .user-dropdown::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        z-index: 1;
        /* thickness: bright top-left bevel fading to a dark bottom-right */
        background:
            linear-gradient(152deg,
                rgba(255, 255, 255, .50) 0%,
                rgba(255, 255, 255, .06) 22%,
                rgba(255, 255, 255, 0)   45%),
            radial-gradient(120% 60% at 12% -10%, rgba(255, 255, 255, .35), transparent 60%);
        /* grain, so the surface is frosted rather than moulded */
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .60),
            inset 1px 0 0 rgba(255, 255, 255, .28),
            inset -1px 0 0 rgba(15, 23, 42, .06),
            inset 0 -1px 0 rgba(15, 23, 42, .10);
    }
    [data-theme="dark"][data-surface="glass"] .card::after,
    [data-theme="dark"][data-surface="glass"] .rpt-filter::after,
    [data-theme="dark"][data-surface="glass"] .modal-content::after,
    [data-theme="dark"][data-surface="glass"] .dropdown-menu::after,
    [data-theme="dark"][data-surface="glass"] .user-dropdown::after {
        background:
            linear-gradient(152deg,
                rgba(255, 255, 255, .16) 0%,
                rgba(255, 255, 255, .03) 22%,
                rgba(255, 255, 255, 0)   45%),
            radial-gradient(120% 60% at 12% -10%, rgba(255, 255, 255, .12), transparent 60%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .16),
            inset 1px 0 0 rgba(255, 255, 255, .07),
            inset -1px 0 0 rgba(0, 0, 0, .35),
            inset 0 -1px 0 rgba(0, 0, 0, .45);
    }

    /* Frosting texture. Kept as its own layer at a low opacity - baked into
       the gradient above it would tint the colour as well as the surface. */
    [data-surface="glass"] .card::after,
    [data-surface="glass"] .rpt-filter::after {
        background-image:
            linear-gradient(152deg,
                rgba(255, 255, 255, .50) 0%,
                rgba(255, 255, 255, .06) 22%,
                rgba(255, 255, 255, 0)   45%),
            radial-gradient(120% 60% at 12% -10%, rgba(255, 255, 255, .35), transparent 60%),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
        background-blend-mode: normal, normal, soft-light;
    }

    /* Card content must sit above the glass overlay. */
    [data-surface="glass"] .card > *,
    [data-surface="glass"] .rpt-filter > *,
    [data-surface="glass"] .modal-content > *,
    [data-surface="glass"] .dropdown-menu > * { position: relative; z-index: 2; }

    [data-surface="glass"] .card:hover {
        box-shadow: 0 1px 1px rgba(15, 23, 42, .04),
                    0 20px 46px rgba(15, 23, 42, .13),
                    inset 0 1px 0 rgba(255, 255, 255, .85);
    }
    [data-theme="dark"][data-surface="glass"] .card:hover {
        box-shadow: 0 1px 1px rgba(0, 0, 0, .35),
                    0 22px 50px rgba(0, 0, 0, .55),
                    inset 0 1px 0 rgba(255, 255, 255, .10);
    }

    /* The header sits over scrolling content - the one place glass is doing
       real work rather than decoration. Denser, so text stays readable. */
    [data-surface="glass"] .header {
        background: linear-gradient(150deg,
            color-mix(in srgb, var(--glass-top) 88%, white),
            var(--glass-top));
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        border-bottom: 1px solid var(--glass-edge);
    }
    [data-theme="dark"][data-surface="glass"] .header {
        background: linear-gradient(150deg, rgba(28, 28, 30, .86), rgba(28, 28, 30, .72));
    }

    /* The sidebar stays solid and dark.
     *
     * Frosting it let the light ambient wash bleed through and the whole rail
     * went murky grey - it stopped reading as the dark anchor the layout is
     * built around. Glass belongs on surfaces that float over content; the
     * sidebar is not one of them, it is the edge of the page.
     *
     * A hairline light edge and a faint top-to-bottom gradient keep it from
     * looking like a flat slab, without making it translucent.
     */
    [data-surface="glass"] .sidebar {
        background: linear-gradient(180deg, #1f2937 0%, #131a27 100%);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-right: 1px solid rgba(148, 163, 184, 0.10);
        box-shadow: 1px 0 0 rgba(0, 0, 0, 0.25);
    }
    [data-theme="dark"][data-surface="glass"] .sidebar {
        background: linear-gradient(180deg, #0d131f 0%, #070a11 100%);
        border-right: 1px solid rgba(148, 163, 184, 0.08);
    }

    /* A table painting its own white band over a glass card looks like a bug. */
    [data-surface="glass"] .card .table,
    [data-surface="glass"] .card table,
    [data-surface="glass"] .card thead th { background: transparent; }

    /* -- accessibility ----------------------------------------------------
     * Some people genuinely cannot read through translucency. Honour the
     * system setting instead of deciding for them.
     */
    @media (prefers-reduced-transparency: reduce) {
        body { background-image: none; }
        .card, .rpt-filter, .stat-card, .header,
        .modal-content, .dropdown-menu, .user-dropdown {
            background: var(--card-bg);
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
            border-color: var(--border-color);
            box-shadow: var(--shadow);
        }
        .sidebar { background: var(--dark); box-shadow: none; }
    }
}

/* ===========================================================================
 * FLAT SURFACES
 *
 * The second of two surface styles. Same palette, same layout, same tokens -
 * what changes is the material: solid fills instead of frosted glass, a
 * defined 1px border instead of a lit bevel, and a small honest shadow
 * instead of a deep one.
 *
 * Deliberately NOT a separate colour theme. data-theme stays light/dark and
 * data-surface stays glass/flat, so all four combinations work. Folding them
 * into one attribute would need four values and every rule would have to
 * enumerate them.
 *
 * Sits after the glass block so it wins on equal specificity, and carries
 * !important only where the glass rules do - a dark-theme rule further up the
 * file already forces .card with !important, so anything overriding it has to
 * match.
 * ======================================================================== */

[data-surface="flat"] {
    --flat-surface:   #ffffff;
    --flat-border:    #e2e8f0;
    --flat-shadow:    0 1px 2px rgba(15, 23, 42, .06);
    --flat-shadow-lg: 0 4px 12px rgba(15, 23, 42, .10);
    --flat-radius:    10px;
}
[data-theme="dark"][data-surface="flat"] {
    --flat-surface:   #111827;
    --flat-border:    #1f2937;
    --flat-shadow:    0 1px 2px rgba(0, 0, 0, .40);
    --flat-shadow-lg: 0 4px 12px rgba(0, 0, 0, .55);
}

/* No wash behind the surfaces - there is nothing translucent to see it. */
[data-surface="flat"] body {
    background-image: none;
    background-color: var(--body-bg);
}

[data-surface="flat"] .card,
[data-surface="flat"] .rpt-filter,
[data-surface="flat"] .stat-card,
[data-surface="flat"] .modal-content,
[data-surface="flat"] .dropdown-menu,
[data-surface="flat"] .user-dropdown {
    background: var(--flat-surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid var(--flat-border) !important;
    border-radius: var(--flat-radius) !important;
    box-shadow: var(--flat-shadow) !important;
}
[data-surface="flat"] .card:hover {
    box-shadow: var(--flat-shadow-lg) !important;
}
[data-surface="flat"] .modal-content,
[data-surface="flat"] .dropdown-menu,
[data-surface="flat"] .user-dropdown {
    box-shadow: var(--flat-shadow-lg) !important;
}

/* The bevel, sheen and grain overlay has nothing to do in a flat surface. */
[data-surface="flat"] .card::after,
[data-surface="flat"] .rpt-filter::after,
[data-surface="flat"] .modal-content::after,
[data-surface="flat"] .dropdown-menu::after,
[data-surface="flat"] .user-dropdown::after { display: none !important; }

[data-surface="flat"] .header {
    background: var(--flat-surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--flat-border) !important;
}

[data-surface="flat"] .sidebar {
    background: #1e293b !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-right: 1px solid rgba(148, 163, 184, .10);
    box-shadow: none;
}
[data-theme="dark"][data-surface="flat"] .sidebar { background: #0b1020 !important; }

/* Flat means flat: the panel is full of small frosted odds and ends that
   predate this - inputs, quick-action chips, the finance tiles. */
[data-surface="flat"] .fin-stat-card,
[data-surface="flat"] .dues-stat-card,
[data-surface="flat"] .stat-card-custom,
[data-surface="flat"] .chart-card,
[data-surface="flat"] .dash-panel,
[data-surface="flat"] .pulse-card,
[data-surface="flat"] .qa-item,
[data-surface="flat"] input,
[data-surface="flat"] select,
[data-surface="flat"] textarea {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
[data-surface="flat"] .fin-stat-card,
[data-surface="flat"] .dues-stat-card,
[data-surface="flat"] .stat-card-custom,
[data-surface="flat"] .chart-card,
[data-surface="flat"] .dash-panel,
[data-surface="flat"] .pulse-card {
    background: var(--flat-surface) !important;
    border: 1px solid var(--flat-border) !important;
    border-radius: var(--flat-radius) !important;
    box-shadow: var(--flat-shadow) !important;
}
[data-surface="flat"] .stat-card-custom::before,
[data-surface="flat"] .fin-stat-card::before,
[data-surface="flat"] .dues-stat-card::before { display: none !important; }

/* -- appearance popover ---------------------------------------------------- */
.appearance-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 10002;
    min-width: 248px;
    padding: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, .16);
}
[data-theme="dark"] .appearance-panel { box-shadow: 0 16px 44px rgba(0, 0, 0, .55); }
.appearance-panel[hidden] { display: none; }
.appearance-row { display: flex; flex-direction: column; gap: 7px; }
.appearance-row + .appearance-row { margin-top: 12px; }
.appearance-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.appearance-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    padding: 3px;
    background: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.appearance-seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font: 600 12.5px/1 inherit;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.appearance-seg button:hover { color: var(--text-title); background: var(--card-bg); }
.appearance-seg button[aria-pressed="true"] {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .14);
}
/* The panel is chrome, not content - it stays solid in both surface styles. */
[data-surface="glass"] .appearance-panel {
    background: var(--card-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}


/* ===========================================================================
 * LIQUID GLASS v2 — iOS 26 look (overrides the glass layers above)
 *
 * The earlier layers stacked three washes and three card treatments, which
 * made light mode pastel-blotchy and dark mode muddy brown. This block is the
 * single source of truth for the glass surface:
 *   - a calm neutral page with soft, low-saturation light glows (no pink wash)
 *   - clear, bright glass panels: one hairline edge, one top highlight,
 *     one soft shadow — no grain, no bevel
 *   - a smoked-glass sidebar that keeps white gym logos readable
 * Specificity (html[data-surface] …) beats both admin.css and the dashboard's
 * inline glass, so nothing else needs editing. Delete this block to revert.
 * ======================================================================== */
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {

  html[data-surface="glass"] {
    --lg-page:        #eef1f6;
    --lg-glow-1:      rgba(10, 132, 255, .16);
    --lg-glow-2:      rgba(94, 92, 230, .11);
    --lg-glow-3:      rgba(48, 209, 88, .09);
    --lg-glow-4:      rgba(255, 159, 10, .08);
    --lg-fill:        rgba(255, 255, 255, .64);
    --lg-fill-strong: rgba(255, 255, 255, .82);
    --lg-edge:        rgba(255, 255, 255, .78);
    --lg-hair:        rgba(15, 23, 42, .07);
    --lg-highlight:   rgba(255, 255, 255, .95);
    --lg-shadow:      0 1px 2px rgba(15, 23, 42, .04), 0 8px 28px rgba(15, 23, 42, .07);
    --lg-shadow-hover:0 2px 4px rgba(15, 23, 42, .05), 0 16px 40px rgba(15, 23, 42, .11);
    --lg-blur:        blur(30px) saturate(170%);
    --lg-label:       rgba(60, 60, 67, .60);
    --lg-text:        #1c1c1e;
  }
  html[data-theme="dark"][data-surface="glass"] {
    --lg-page:        #0b0d12;
    --lg-glow-1:      rgba(10, 132, 255, .20);
    --lg-glow-2:      rgba(94, 92, 230, .15);
    --lg-glow-3:      rgba(48, 209, 88, .07);
    --lg-glow-4:      rgba(100, 210, 255, .06);
    --lg-fill:        rgba(255, 255, 255, .055);
    --lg-fill-strong: rgba(36, 38, 44, .86);
    --lg-edge:        rgba(255, 255, 255, .10);
    --lg-hair:        rgba(255, 255, 255, .08);
    --lg-highlight:   rgba(255, 255, 255, .09);
    --lg-shadow:      0 1px 2px rgba(0, 0, 0, .30), 0 10px 32px rgba(0, 0, 0, .38);
    --lg-shadow-hover:0 2px 4px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .50);
    --lg-blur:        blur(30px) saturate(150%);
    --lg-label:       rgba(235, 235, 245, .58);
    --lg-text:        #f5f5f7;
  }

  /* -- page ------------------------------------------------------------- */
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body {
    background-color: var(--lg-page) !important;
    background-image:
      radial-gradient(60vmax 45vmax at 0% 0%,     var(--lg-glow-1), transparent 60%),
      radial-gradient(50vmax 40vmax at 100% 0%,   var(--lg-glow-2), transparent 62%),
      radial-gradient(55vmax 45vmax at 100% 100%, var(--lg-glow-3), transparent 62%),
      radial-gradient(45vmax 40vmax at 0% 100%,   var(--lg-glow-4), transparent 62%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
  }
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body::before { display: none !important; }

  /* -- panels (portal-wide + dashboard cards) --------------------------- */
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .card,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-card,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-box,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .chart-container,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .filter-card,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .rpt-filter,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-card-custom,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .fin-stat-card,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .dues-stat-card,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .chart-card,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .dash-panel,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .qa-strip {
    background: var(--lg-fill) !important;
    -webkit-backdrop-filter: var(--lg-blur) !important;
    backdrop-filter: var(--lg-blur) !important;
    border: 1px solid var(--lg-edge) !important;
    box-shadow: inset 0 1px 0 var(--lg-highlight), 0 0 0 .5px var(--lg-hair), var(--lg-shadow) !important;
  }
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .card,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .rpt-filter,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .chart-card,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .dash-panel { border-radius: 24px !important; }
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-card-custom,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .fin-stat-card,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .dues-stat-card,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-card { border-radius: 22px !important; }

  /* drop the old bevel/grain layer and the pastel colour blotch */
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .card::after,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .rpt-filter::after { background: none !important; box-shadow: none !important; }
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-card-custom::before,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .fin-stat-card::before,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .dues-stat-card::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%) !important;
    opacity: 1 !important;
  }
  html[data-theme="dark"][data-surface="glass"] body .stat-card-custom::before,
  html[data-theme="dark"][data-surface="glass"] body .fin-stat-card::before,
  html[data-theme="dark"][data-surface="glass"] body .dues-stat-card::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 45%) !important;
  }

  /* hover: lift, no coloured ring */
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-card-custom:hover,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .fin-stat-card:hover,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .dues-stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--lg-edge) !important;
    box-shadow: inset 0 1px 0 var(--lg-highlight), 0 0 0 .5px var(--lg-hair), var(--lg-shadow-hover) !important;
  }

  /* icon tiles: solid accent squircle with white glyph — iOS app-icon feel */
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-icon-custom,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .fin-stat-icon,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .dues-stat-icon {
    border-radius: 14px !important;
    border: 0 !important;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--icon-color, var(--fin-accent, #0a84ff)) 88%, #fff),
        var(--icon-color, var(--fin-accent, #0a84ff))) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
                0 4px 12px color-mix(in srgb, var(--icon-color, var(--fin-accent, #0a84ff)) 30%, transparent) !important;
  }
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-icon-custom i,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .fin-stat-icon i,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .dues-stat-icon i { color: #fff !important; }

  /* type */
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-content-custom h3,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .fin-stat-value,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .dues-stat-value {
    color: var(--lg-text) !important;
    font-weight: 700;
    letter-spacing: -.025em;
  }
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-content-custom p,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .fin-stat-label,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .dues-stat-label { color: var(--lg-label) !important; }

  /* quick actions: one glass shelf, quiet pills, colour only on the icon */
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .qa-strip { border-radius: 22px !important; }
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .qa-item {
    background: var(--lg-fill-strong) !important;
    border: 1px solid var(--lg-hair) !important;
    color: var(--lg-text) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
    border-radius: 999px !important;
  }
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .qa-item i { color: var(--qa-color) !important; }
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .qa-item:hover {
    background: var(--qa-hover) !important;
    border-color: var(--qa-hover) !important;
    color: #fff !important;
  }
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .qa-item:hover i { color: #fff !important; }
  html[data-theme="dark"][data-surface="glass"] body .qa-item {
    background: rgba(255, 255, 255, .07) !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"][data-surface="glass"] body .qa-item i {
    color: color-mix(in srgb, var(--qa-color) 70%, #fff) !important;
  }

  /* top bar: clear glass */
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .header {
    background: color-mix(in srgb, var(--lg-page) 62%, transparent) !important;
    -webkit-backdrop-filter: blur(24px) saturate(170%) !important;
    backdrop-filter: blur(24px) saturate(170%) !important;
    border-bottom: 1px solid var(--lg-hair) !important;
    box-shadow: none !important;
  }

  /* section labels */
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .crm-section-label,
  html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .pt-section-label { color: var(--lg-label) !important; }

  /* phones: lighter blur keeps scrolling smooth */
  @media (max-width: 480px) {
    html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .card,
    html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .stat-card-custom,
    html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .fin-stat-card,
    html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .dues-stat-card,
    html[data-surface="glass"]:is([data-theme], :not([data-theme])) body .qa-strip {
      -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
      backdrop-filter: blur(16px) saturate(160%) !important;
    }
  }
}


/* ===========================================================================
 * LIQUID GLASS v2 — colour shades (data-tint on <html>, picked in Appearance)
 * Each shade only swaps the page base and the four background glows; the
 * glass itself is shared. Light rules are :not([data-theme="dark"]) so they
 * never leak into dark mode, which has its own deeper version of each shade.
 * ======================================================================== */
html[data-surface="glass"]:not([data-theme="dark"]) { --lg-fill: rgba(255, 255, 255, .54); }

html[data-surface="glass"][data-tint="ocean"]:not([data-theme="dark"]) {
  --lg-page: #e3ecf7; --lg-glow-1: rgba(10,132,255,.34); --lg-glow-2: rgba(90,200,250,.28); --lg-glow-3: rgba(52,199,89,.16); --lg-glow-4: rgba(94,92,230,.18); }
html[data-surface="glass"][data-tint="lavender"]:not([data-theme="dark"]) {
  --lg-page: #ebe7f6; --lg-glow-1: rgba(175,82,222,.30); --lg-glow-2: rgba(94,92,230,.28); --lg-glow-3: rgba(255,45,85,.12); --lg-glow-4: rgba(90,200,250,.16); }
html[data-surface="glass"][data-tint="mint"]:not([data-theme="dark"]) {
  --lg-page: #e2f2ec; --lg-glow-1: rgba(52,199,89,.28); --lg-glow-2: rgba(48,176,199,.28); --lg-glow-3: rgba(0,199,190,.20); --lg-glow-4: rgba(255,204,0,.12); }
html[data-surface="glass"][data-tint="sunset"]:not([data-theme="dark"]) {
  --lg-page: #f6ece3; --lg-glow-1: rgba(255,149,0,.30); --lg-glow-2: rgba(255,59,48,.18); --lg-glow-3: rgba(255,204,0,.22); --lg-glow-4: rgba(255,45,85,.14); }
html[data-surface="glass"][data-tint="rose"]:not([data-theme="dark"]) {
  --lg-page: #f5e6eb; --lg-glow-1: rgba(255,45,85,.24); --lg-glow-2: rgba(175,82,222,.20); --lg-glow-3: rgba(255,149,0,.14); --lg-glow-4: rgba(255,55,95,.16); }
html[data-surface="glass"][data-tint="graphite"]:not([data-theme="dark"]) {
  --lg-page: #e4e6ea; --lg-glow-1: rgba(99,110,130,.22); --lg-glow-2: rgba(142,142,147,.20); --lg-glow-3: rgba(72,84,104,.14); --lg-glow-4: rgba(174,174,178,.18); }
/* "snow" keeps the bright white base from the first v2 pass */
html[data-surface="glass"][data-tint="snow"]:not([data-theme="dark"]) { --lg-fill: rgba(255, 255, 255, .64); }

html[data-theme="dark"][data-surface="glass"][data-tint="ocean"]    { --lg-page: #070c16; --lg-glow-1: rgba(10,132,255,.30); --lg-glow-2: rgba(90,200,250,.14); --lg-glow-3: rgba(48,209,88,.06); --lg-glow-4: rgba(94,92,230,.14); }
html[data-theme="dark"][data-surface="glass"][data-tint="lavender"] { --lg-page: #0d0a16; --lg-glow-1: rgba(175,82,222,.26); --lg-glow-2: rgba(94,92,230,.22); --lg-glow-3: rgba(255,45,85,.07); --lg-glow-4: rgba(90,200,250,.08); }
html[data-theme="dark"][data-surface="glass"][data-tint="mint"]     { --lg-page: #06100d; --lg-glow-1: rgba(48,209,88,.20); --lg-glow-2: rgba(48,176,199,.20); --lg-glow-3: rgba(0,199,190,.10); --lg-glow-4: rgba(255,214,10,.05); }
html[data-theme="dark"][data-surface="glass"][data-tint="sunset"]   { --lg-page: #120b07; --lg-glow-1: rgba(255,159,10,.22); --lg-glow-2: rgba(255,69,58,.14); --lg-glow-3: rgba(255,214,10,.08); --lg-glow-4: rgba(255,55,95,.08); }
html[data-theme="dark"][data-surface="glass"][data-tint="rose"]     { --lg-page: #12080c; --lg-glow-1: rgba(255,55,95,.22); --lg-glow-2: rgba(191,90,242,.16); --lg-glow-3: rgba(255,159,10,.06); --lg-glow-4: rgba(255,45,85,.08); }
html[data-theme="dark"][data-surface="glass"][data-tint="graphite"] { --lg-page: #0c0d0f; --lg-glow-1: rgba(142,142,147,.12); --lg-glow-2: rgba(99,110,130,.12); --lg-glow-3: rgba(72,84,104,.08); --lg-glow-4: rgba(174,174,178,.06); }

/* the picker */
.appearance-swatches { display: flex; gap: 6px; flex-wrap: nowrap; }
.appearance-swatches button {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid transparent; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(15,23,42,.12);
  transition: transform .15s ease;
}
.appearance-swatches button:hover { transform: scale(1.12); }
.appearance-swatches button[aria-pressed="true"] { border-color: var(--primary, #6366f1); box-shadow: 0 0 0 2px var(--card-bg, #fff) inset, 0 0 0 1px rgba(15,23,42,.12); }
html[data-surface="flat"] .appearance-row-tint { opacity: .45; pointer-events: none; }


/* ===========================================================================
 * Profile menu (top right). .user-dropdown is only the WRAPPER around the
 * avatar button; the earlier glass blocks styled it as a glass panel and set
 * the menu inside to position:relative, so the menu sat in the header row and
 * was pushed off the top of the screen. Wrapper: plain. Menu: floats below.
 * ======================================================================== */
html:is([data-theme], :not([data-theme])):is([data-surface], :not([data-surface])) body .user-dropdown {
  position: relative !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}
html:is([data-theme], :not([data-theme])):is([data-surface], :not([data-surface])) body .user-dropdown::after { display: none !important; }
html:is([data-theme], :not([data-theme])):is([data-surface], :not([data-surface])) body .user-dropdown > .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 200px;
  z-index: 10002 !important;
}
/* the top bar (and its menus) must sit above page content such as the
   dashboard's TV-mode / Hide-numbers buttons; dialogs (z 10000+) stay above */
html body .header { z-index: 1000 !important; }
/* menu surface: near-solid frosted, readable over anything behind it */
html:is([data-theme], :not([data-theme])):is([data-surface], :not([data-surface])) body .user-dropdown > .dropdown-menu {
  background: rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06) !important;
  padding: 6px !important;
}
html[data-theme="dark"]:is([data-surface], :not([data-surface])) body .user-dropdown > .dropdown-menu {
  background: rgba(30, 32, 38, .96) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55) !important;
}
html:is([data-theme], :not([data-theme])):is([data-surface], :not([data-surface])) body .user-dropdown > .dropdown-menu::after { display: none !important; }
html:is([data-theme], :not([data-theme])):is([data-surface], :not([data-surface])) body .user-dropdown > .dropdown-menu .dropdown-item {
  border-radius: 10px; background: transparent !important; border: 0 !important;
}
html:is([data-theme], :not([data-theme])):is([data-surface], :not([data-surface])) body .user-dropdown > .dropdown-menu .dropdown-item:hover {
  background: rgba(120, 120, 128, .12) !important;
}
/* Pop-up menus are fully opaque: text behind a menu must never show through. */
html:is([data-theme], :not([data-theme])):is([data-surface], :not([data-surface])) body .user-dropdown > .dropdown-menu,
html:is([data-theme], :not([data-theme])):is([data-surface], :not([data-surface])) body .dropdown-menu,
html:is([data-theme], :not([data-theme])):is([data-surface], :not([data-surface])) body .appearance-panel,
html:is([data-theme], :not([data-theme])):is([data-surface], :not([data-surface])) body #notifPanel {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-theme="dark"]:is([data-surface], :not([data-surface])) body .user-dropdown > .dropdown-menu,
html[data-theme="dark"]:is([data-surface], :not([data-surface])) body .dropdown-menu,
html[data-theme="dark"]:is([data-surface], :not([data-surface])) body .appearance-panel,
html[data-theme="dark"]:is([data-surface], :not([data-surface])) body #notifPanel {
  background: #1e2026 !important;
}