/* GetFIT-Connect Styles */

:root,
[data-theme="dark"] {
    /* Brand -- aligned with the homepage's purple -> blue -> cyan
       gradient identity (--gf-purple / --gf-blue / --gf-cyan there) */
    --brand: #8B5CF6;
    --brand-rgb: 139, 92, 246;
    --brand-dark: #7440E8;
    --accent: #06B6D4;
    --accent-rgb: 6, 182, 212;
    --accent-dark: #0891B2;

    /* Colorful spectrum -- used to give icon badges, stat cards, and
       tags visual variety instead of one color repeated everywhere */
    --hue-1: #8B5CF6; /* violet   */
    --hue-1-rgb: 139, 92, 246;
    --hue-2: #2563EB; /* blue */
    --hue-2-rgb: 37, 99, 235;
    --hue-3: #06B6D4; /* cyan */
    --hue-3-rgb: 6, 182, 212;
    --hue-4: #FFB020; /* amber    */
    --hue-4-rgb: 255, 176, 32;
    --hue-5: #22D3A6; /* emerald  */
    --hue-5-rgb: 34, 211, 166;
    --hue-6: #EC4899; /* pink */
    --hue-6-rgb: 236, 72, 153;

    /* Legacy aliases (kept so any old var() references still resolve) */
    --primary: var(--brand);
    --primary-dark: var(--brand-dark);
    --secondary: var(--accent);
    --secondary-dark: var(--accent-dark);
    --white: #ffffff;

    /* Surfaces -- matches the homepage's near-black --gf-bg / --gf-bg-2 */
    --bg-rgb: 8, 11, 20;
    --bg: rgb(8, 11, 20);
    --bg-elevated: #0d1220;
    --bg-gradient: linear-gradient(160deg, #080b14 0%, #14101f 45%, #0d1220 100%);
    --panel-rgb: 13, 18, 32;
    --card: rgba(255, 255, 255, 0.065);
    --card-hover: rgba(255, 255, 255, 0.105);
    --border: rgba(255, 255, 255, 0.10);

    /* Text */
    --text: #EDEEF3;
    --text-muted: #A6ACBE;
    --text-faint: #767D91;
    --muted-foreground: rgba(237, 238, 243, 0.65);

    /* Status */
    --success: #22c55e;
    --success-rgb: 34, 197, 94;
    --danger: #f5647a;
    --danger-rgb: 245, 100, 122;
    --warning: #FFB020;

    --shadow-color: 0, 0, 0;
}

[data-theme="light"] {
    --brand: #7440E8;
    --brand-rgb: 116, 64, 232;
    --brand-dark: #5F2FC7;
    --accent: #0891B2;
    --accent-rgb: 8, 145, 178;
    --accent-dark: #0E7490;

    --hue-1: #7440E8;
    --hue-1-rgb: 116, 64, 232;
    --hue-2: #1D4ED8;
    --hue-2-rgb: 29, 78, 216;
    --hue-3: #0891B2;
    --hue-3-rgb: 8, 145, 178;
    --hue-4: #D98A00;
    --hue-4-rgb: 217, 138, 0;
    --hue-5: #0C9C7C;
    --hue-5-rgb: 12, 156, 124;
    --hue-6: #DB2777;
    --hue-6-rgb: 219, 39, 119;

    --primary: var(--brand);
    --primary-dark: var(--brand-dark);
    --secondary: var(--accent);
    --secondary-dark: var(--accent-dark);
    --white: #ffffff;

    --bg-rgb: 247, 248, 251;
    --bg: #f7f8fb;
    --bg-elevated: #ffffff;
    --bg-gradient: linear-gradient(160deg, #f8f7fb 0%, #f3eefc 45%, #eef0f7 100%);
    --panel-rgb: 255, 255, 255;
    --card: rgba(20, 24, 40, 0.035);
    --card-hover: rgba(20, 24, 40, 0.06);
    --border: rgba(20, 24, 40, 0.10);

    --text: #171A25;
    --text-muted: #565D72;
    --text-faint: #767D90;
    --muted-foreground: rgba(23, 26, 37, 0.65);

    --success: #16a34a;
    --success-rgb: 22, 163, 74;
    --danger: #dc2626;
    --danger-rgb: 220, 38, 38;
    --warning: #c2790a;

    --shadow-color: 20, 24, 40;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    background: var(--bg-gradient);
    color: var(--text);
    min-height: 100vh;
    transition: background 0.25s ease, color 0.25s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: -0.02em;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    background: rgba(var(--panel-rgb), 0.92);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(12px);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.logo::before {
    content: '\f44b'; /* fa-dumbbell */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 6px 18px rgba(var(--brand-rgb), 0.3);
    flex-shrink: 0;
}

.logo::after {
    content: '';
}

.nav {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.nav a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

.nav a:hover {
    color: var(--brand);
}

/* Buttons */
.btn-primary, .btn-secondary, .btn-outline {
    padding: 0.85rem 1.75rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    font-weight: 600;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(var(--shadow-color), 0.2);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--brand-rgb), 0.35);
    filter: brightness(1.06);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--hue-5) 0%, var(--hue-2) 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(var(--shadow-color), 0.2);
}

.btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--hue-5-rgb), 0.35);
    filter: brightness(1.06);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(6, 7, 12, 0.75), rgba(6, 7, 12, 0.8)), url('images/hero-gym.jpg') center/cover;
    padding: 6rem 0;
    text-align: center;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: #fff;
    letter-spacing: -0.02em;
    font-weight: 800;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.75);
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Sections */
.features, .pricing {
    padding: 5rem 0;
}

.features h2, .pricing h2 {
    text-align: center;
    font-size: 2.25rem;
    margin-bottom: 3rem;
    color: var(--text);
    letter-spacing: -0.02em;
    font-weight: 800;
}

.feature-grid, .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.feature-card, .pricing-card {
    background: var(--bg-elevated);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    border-top: 4px solid var(--brand);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 3px rgba(var(--shadow-color), 0.12);
}

.feature-grid .feature-card:nth-child(1) { border-top-color: var(--hue-1); }
.feature-grid .feature-card:nth-child(2) { border-top-color: var(--hue-3); }
.pricing-grid .pricing-card:nth-child(1) { border-top-color: var(--hue-1); }
.pricing-grid .pricing-card:nth-child(2) { border-top-color: var(--hue-2); }
.pricing-grid .pricing-card:nth-child(3) { border-top-color: var(--hue-6); }

.feature-card:hover, .pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(var(--shadow-color), 0.18);
}

.feature-card h3, .pricing-card h3 {
    color: var(--text);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.pricing-card .price {
    font-size: 2rem;
    color: var(--accent);
    margin: 1rem 0;
    font-weight: bold;
}

.pricing-card ul {
    list-style: none;
    margin: 1.5rem 0;
}

.pricing-card ul li {
    padding: 0.5rem 0;
    color: var(--text-muted);
}

.pricing-card ul li:before {
    content: "✓ ";
    color: var(--success);
    font-weight: bold;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h4 {
    margin-bottom: 1rem;
    color: var(--brand);
}

.footer-section p {
    color: var(--text-muted);
}

.footer-section a {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    margin: 0.5rem 0;
    opacity: 0.9;
    transition: opacity 0.3s, color 0.2s;
}

.footer-section a:hover {
    opacity: 1;
    color: var(--brand);
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-faint);
    flex-wrap: wrap;
    gap: 0.75rem;
}

.footer-bottom a {
    color: var(--text-faint);
    text-decoration: none;
    opacity: 0.9;
}

.footer-bottom a:hover {
    color: var(--brand);
}

/* Forms */
.form-container {
    max-width: 500px;
    margin: 3rem auto;
    padding: 2.5rem;
    background: var(--bg-elevated);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(var(--shadow-color), 0.12);
}

.form-container h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text);
    font-weight: 800;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-weight: 600;
}

.form-group input, .form-group select, .form-group textarea, .form-control {
    width: 100%;
    padding: 0.8rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 1rem;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.2s ease;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .form-control:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.15);
}

.location-status {
    text-align: center;
    padding: 1rem;
    margin: 1rem 0;
    background: rgba(var(--brand-rgb), 0.08);
    border-radius: 10px;
    border: 1px solid rgba(var(--brand-rgb), 0.3);
}

/* Alerts */
.alert {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.alert-error {
    background: rgba(var(--danger-rgb), 0.2);
    border: 1px solid var(--danger);
    color: var(--danger);
}

.alert-success {
    background: rgba(var(--success-rgb), 0.2);
    border: 1px solid var(--success);
    color: var(--success);
}

/* Footer */
.footer {
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    padding: 3rem 0;
    margin-top: 5rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.footer h4 {
    color: var(--brand);
    margin-bottom: 1rem;
}

.footer a {
    color: var(--text-muted);
    text-decoration: none;
    display: block;
    margin: 0.5rem 0;
    transition: color 0.3s;
}

.footer a:hover {
    color: var(--accent);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .feature-grid, .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .form-container {
        margin: 1rem;
        padding: 1.5rem;
    }
    
    .dashboard-nav {
        gap: 0.5rem;
    }
    
    .dashboard-nav a {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    .trainers-grid {
        grid-template-columns: 1fr;
    }
    
    .nav {
        gap: 1rem;
    }
    
    .header .container {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    table {
        font-size: 0.85rem;
    }
    
    table th, table td {
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.4rem;
    }
    
    .btn-primary, .btn-secondary, .btn-outline {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .card h3 {
        font-size: 1.4rem;
    }
}

/* Dashboard Styles */
.dashboard {
    min-height: 100vh;
    background: var(--bg-gradient);
}

.dashboard-header {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(var(--shadow-color), 0.1);
}

.dashboard-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.brand-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand-logo {
    text-decoration: none;
}

.brand-logo h1 {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.03em;
}

.brand-logo h1::before {
    content: '\f44b'; /* fa-dumbbell */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 6px 18px rgba(var(--brand-rgb), 0.3);
    flex-shrink: 0;
}

.brand-logo .tagline {
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: -2px;
    opacity: 0.9;
}

.user-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-section .user-name {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.user-section .user-id {
    color: var(--brand);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Burger Menu */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 2001;
    background: transparent;
    border: none;
}

.burger-menu span {
    width: 25px;
    height: 3px;
    background: var(--brand);
    margin: 3px 0;
    border-radius: 2px;
    transition: all 0.3s;
}

.burger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu.active span:nth-child(2) {
    opacity: 0;
}

.burger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.dashboard-nav {
    display: flex;
    gap: 0.7rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.6rem 0.1rem 0.85rem;
    border-top: 1px solid rgba(var(--accent-rgb), 0.2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}

.dashboard-nav::-webkit-scrollbar {
    display: none;
}

.dashboard-nav a {
    position: relative;
    flex-shrink: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 78px;
    color: var(--text);
    text-decoration: none;
    padding: 0.85rem 0.5rem 0.7rem;
    border-radius: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 3px 10px rgba(var(--shadow-color), 0.3);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    font-weight: 600;
    font-size: 0.68rem;
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
}

.nav-card-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--brand-rgb), 0.12);
    font-size: 1.25rem;
    transition: background 0.2s ease, transform 0.2s ease;
}

/* Rotate through the color spectrum so the nav feels varied and
   colorful at rest, not just a row of identical violet circles */
.dashboard-nav a:nth-child(6n+1) .nav-card-icon { background: rgba(var(--hue-1-rgb), 0.14); }
.dashboard-nav a:nth-child(6n+2) .nav-card-icon { background: rgba(var(--hue-2-rgb), 0.14); }
.dashboard-nav a:nth-child(6n+3) .nav-card-icon { background: rgba(var(--hue-3-rgb), 0.14); }
.dashboard-nav a:nth-child(6n+4) .nav-card-icon { background: rgba(var(--hue-4-rgb), 0.16); }
.dashboard-nav a:nth-child(6n+5) .nav-card-icon { background: rgba(var(--hue-5-rgb), 0.14); }
.dashboard-nav a:nth-child(6n+6) .nav-card-icon { background: rgba(var(--hue-6-rgb), 0.16); }

.dashboard-nav a:hover {
    background: var(--card-hover);
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.25);
}

.dashboard-nav a:hover .nav-card-icon {
    transform: scale(1.08);
}

.dashboard-nav a:active {
    transform: translateY(-1px) scale(0.97);
}

.dashboard-nav a.active {
    background: linear-gradient(160deg, var(--brand) 0%, var(--accent) 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(var(--brand-rgb), 0.35);
    border-color: transparent;
    transform: translateY(-2px);
}

.dashboard-nav a.active .nav-card-label {
    color: #fff;
    opacity: 1;
}

.dashboard-nav a.active .nav-card-icon {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.nav-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(var(--shadow-color), 0.5);
}

.nav-card-label {
    opacity: 0.95;
}

.gf-drawer-head {
    display: none;
}

.dashboard-content {
    padding: 2rem 0;
    min-height: calc(100vh - 200px);
}

/* Mobile Navigation -- slide-out drawer */
@media (max-width: 768px) {
    .burger-menu {
        display: flex;
    }

    .dashboard-header-top {
        position: relative;
    }

    /* The nav becomes a fixed off-canvas panel, hidden until opened.
       IMPORTANT: this element intentionally does NOT use `transform`
       for its slide animation. Combining `position: fixed` +
       `transform` + `overflow-y: auto` on the same element is a
       well-documented trap on mobile WebKit/Chrome -- taps and touch
       scrolling inside the element can silently stop working after
       the transform is applied, even though everything looks and
       behaves correctly in desktop devtools / desktop browser touch
       emulation. Animating `left` instead avoids the bug entirely.
    */
    .dashboard-nav {
        position: fixed;
        top: 0;
        left: -100vw;
        height: 100vh;
        width: min(80vw, 300px);
        max-width: 300px;
        margin: 0;
        padding: 1.5rem 0.75rem 1.5rem;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-y: scroll;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scroll-snap-type: none;
        background: var(--bg-elevated);
        border-top: none;
        border-right: 1px solid var(--border);
        box-shadow: 8px 0 30px rgba(var(--shadow-color), 0.35);
        transition: left 0.28s ease;
        z-index: 2000;
        mask-image: none;
        -webkit-transform: none;
        transform: none;
    }

    .dashboard-nav a {
        scroll-snap-align: none;
        touch-action: manipulation;
        pointer-events: auto;
        position: relative;
        z-index: 1;
    }

    .dashboard-nav.active {
        left: 0;
    }

    .gf-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.4rem 1rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid var(--border);
        color: var(--text);
        font-weight: 700;
        font-size: 1.05rem;
    }

    .gf-drawer-close {
        background: var(--card);
        border: 1px solid var(--border);
        color: var(--text);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Inside the drawer, each item is a full-width icon+label row
       instead of a small vertical pill -- far easier to scan and tap */
    .dashboard-nav a {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.85rem;
        padding: 0.85rem 0.9rem;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        text-align: left;
    }

    .dashboard-nav a .nav-card-icon {
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .dashboard-nav a .nav-badge {
        position: static;
        margin-left: auto;
        box-shadow: none;
    }

    .dashboard-nav a.active {
        transform: none;
    }

    .dashboard-nav a:hover {
        transform: none;
    }

    /* Dimmed backdrop behind the open drawer (injected by theme-toggle.js) */
    .gf-nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .gf-nav-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Background scroll lock while the drawer is open is handled in JS
       (theme-toggle.js) via a fixed-position body technique -- plain
       `overflow: hidden` on <body> is well known to be unreliable on
       iOS Safari and can interfere with touch-scrolling inside a fixed
       drawer like this one. */

    .brand-logo h1 {
        font-size: 1.5rem;
    }

    .brand-logo .tagline {
        font-size: 0.6rem;
        letter-spacing: 1px;
    }

    .user-section .user-name {
        display: none;
    }

    .dashboard-header {
        position: relative;
    }
}

.card {
    background: var(--bg-elevated);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(var(--shadow-color), 0.1);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    box-shadow: 0 4px 16px rgba(var(--shadow-color), 0.14);
}

.card h3, .card h4 {
    color: var(--text);
    margin-bottom: 1rem;
    font-weight: 700;
}

.card p {
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* Table Styles */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.table thead {
    background: rgba(var(--accent-rgb), 0.2);
}

.table th {
    padding: 1rem;
    text-align: left;
    color: var(--brand);
    font-weight: 600;
    border-bottom: 2px solid var(--accent);
}

.table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(var(--brand-rgb), 0.2);
    color: var(--text-muted);
}

.table tr:hover {
    background: rgba(var(--accent-rgb), 0.1);
}

/* On narrow screens, a plain data table either overflows the screen or
   crams every column into unreadable slivers. Below the mobile
   breakpoint, each row becomes its own card instead, with every cell
   labeled using its column header (via the `data-label` attribute set
   on each <td> -- see trainer-dashboard.php's customers table for the
   reference implementation). Falls back gracefully to a normal table
   for any markup that hasn't added `data-label` yet. */
@media (max-width: 768px) {
    .table.responsive-stack,
    .table.responsive-stack thead,
    .table.responsive-stack tbody,
    .table.responsive-stack th,
    .table.responsive-stack td,
    .table.responsive-stack tr {
        display: block;
    }

    .table.responsive-stack thead {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table.responsive-stack tr {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px;
        margin-bottom: 0.85rem;
        padding: 0.5rem 0.85rem;
    }

    .table.responsive-stack td {
        border: none;
        border-bottom: 1px solid var(--border);
        padding: 0.6rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        text-align: right;
    }

    .table.responsive-stack td:last-child {
        border-bottom: none;
    }

    .table.responsive-stack td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--brand);
        text-align: left;
        flex-shrink: 0;
    }

    /* Cells with multiple buttons (e.g. an "Actions" column) need the
       label on its own line and the buttons flowing normally below it.
       Add class="stack-actions" to any <td> containing more than one
       button/link to get this treatment. */
    .table.responsive-stack td.stack-actions {
        justify-content: flex-start;
        text-align: left;
    }

    .table.responsive-stack td.stack-actions::before {
        flex-basis: 100%;
        margin-bottom: 0.5rem;
    }

    .table.responsive-stack td.stack-actions > a {
        margin: 0 0.4rem 0.4rem 0;
    }
}

/* Badge Styles */
.badge {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
}

.badge-success {
    background: rgba(var(--success-rgb), 0.2);
    color: var(--success);
    border: 1px solid var(--success);
}

.badge-warning {
    background: rgba(var(--brand-rgb), 0.2);
    color: var(--brand);
    border: 1px solid var(--brand);
}

/* Trainer Card Styles */
.trainers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

.trainer-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 1px 3px rgba(var(--shadow-color), 0.12);
}

.trainer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(var(--shadow-color), 0.18);
    border-color: var(--brand);
}

.trainer-photo, .trainer-photo-placeholder {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.trainer-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
}

.trainer-info {
    padding: 1.5rem;
}

.trainer-info h4 {
    color: var(--brand);
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.trainer-info .gym-name,
.trainer-info .specialization,
.trainer-info .distance {
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.trainer-info .distance {
    color: var(--accent);
    font-weight: 600;
}

.trainer-info .bio {
    color: var(--text-faint);
    margin: 1rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* =====================================================================
   Theme toggle (floating button, injected by theme-toggle.js on every page)
   ===================================================================== */
.gf-theme-toggle {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 2000;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(var(--shadow-color), 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease, opacity 0.2s ease;
}

body.gf-nav-open .gf-theme-toggle {
    opacity: 0;
    pointer-events: none;
}

.gf-theme-toggle:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 28px rgba(var(--shadow-color), 0.45);
}

.gf-theme-toggle svg {
    width: 24px;
    height: 24px;
}

/* =====================================================================
   PWA install banner (injected by theme-toggle.js after `beforeinstallprompt`)
   ===================================================================== */
.gf-install-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1.25rem;
    z-index: 2100;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.9rem 1rem;
    box-shadow: 0 12px 32px rgba(var(--shadow-color), 0.4);
    animation: gf-banner-in 0.35s ease;
}

@keyframes gf-banner-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.gf-install-banner img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
}

.gf-install-banner .gf-install-text {
    flex: 1;
    min-width: 0;
}

.gf-install-banner .gf-install-title {
    font-weight: 700;
    color: var(--text);
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}

.gf-install-banner .gf-install-sub {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.gf-install-banner button {
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.gf-install-banner .gf-install-btn {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    color: #000;
}

.gf-install-banner .gf-install-dismiss {
    background: transparent;
    color: var(--text-faint);
    padding: 0.5rem;
}

@media (max-width: 480px) {
    .gf-theme-toggle {
        width: 46px;
        height: 46px;
        bottom: 1rem;
        right: 1rem;
    }
    .gf-install-banner {
        left: 0.6rem;
        right: 0.6rem;
        bottom: 1rem;
        padding: 0.75rem 0.85rem;
    }
}

/* =====================================================================
   Modern UI/UX layer -- scroll-reveal, hero depth, refined components
   ===================================================================== */

/* Scroll-reveal: elements start slightly lower + transparent, then
   settle into place as they enter the viewport (theme-toggle.js) */
.gf-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.gf-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .gf-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Hero: soft gradient blobs for depth (pure CSS, no images) */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::before,
.hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
}

.hero::before {
    width: 420px;
    height: 420px;
    background: rgba(var(--brand-rgb), 0.4);
    top: -120px;
    left: -80px;
}

.hero::after {
    width: 380px;
    height: 380px;
    background: rgba(var(--accent-rgb), 0.35);
    bottom: -140px;
    right: -60px;
}

.hero .container::before {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(var(--hue-4-rgb), 0.25);
    filter: blur(80px);
    top: 40%;
    right: 15%;
    z-index: 0;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(6px);
}

.hero-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    margin-right: 0.5rem;
}

/* Section eyebrow (small uppercase label above section headings) */
.section-eyebrow {
    display: block;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 0.6rem;
}

/* Icon-list: turns plain <ul><li> feature lists into a modern row
   layout with a colored check bullet */
.icon-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0;
    color: var(--text-muted);
    line-height: 1.4;
}

.icon-list li::before {
    content: '\2713';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--brand-rgb), 0.15);
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}

/* Featured pricing card gets a ribbon + highlighted border */
.pricing-card.featured {
    border-color: var(--brand);
    position: relative;
    box-shadow: 0 8px 24px rgba(var(--brand-rgb), 0.18);
}

.pricing-card.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(var(--brand-rgb), 0.35);
}

/* Refined stat cards (dashboard overview tiles) */
.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

.stat-card .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(var(--brand-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 0.9rem;
}

.stat-card .stat-value {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.stat-card .stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

/* Each stat card in a row gets its own accent color -- turns a grid of
   identical tiles into a colorful, easy-to-scan dashboard */
.stat-card:nth-of-type(5n+1)::before { background: linear-gradient(90deg, var(--hue-1), var(--hue-3)); }
.stat-card:nth-of-type(5n+1) .stat-icon { background: rgba(var(--hue-1-rgb), 0.14); }
.stat-card:nth-of-type(5n+2)::before { background: linear-gradient(90deg, var(--hue-2), var(--hue-5)); }
.stat-card:nth-of-type(5n+2) .stat-icon { background: rgba(var(--hue-2-rgb), 0.14); }
.stat-card:nth-of-type(5n+3)::before { background: linear-gradient(90deg, var(--hue-3), var(--hue-4)); }
.stat-card:nth-of-type(5n+3) .stat-icon { background: rgba(var(--hue-3-rgb), 0.14); }
.stat-card:nth-of-type(5n+4)::before { background: linear-gradient(90deg, var(--hue-4), var(--hue-6)); }
.stat-card:nth-of-type(5n+4) .stat-icon { background: rgba(var(--hue-4-rgb), 0.16); }
.stat-card:nth-of-type(5n+5)::before { background: linear-gradient(90deg, var(--hue-5), var(--hue-2)); }
.stat-card:nth-of-type(5n+5) .stat-icon { background: rgba(var(--hue-5-rgb), 0.14); }

/* Empty states -- friendlier than a bare line of text */
/* Consistent "back" link used at the top of every sub-page, replacing
   the previous mix of plain text links, buttons, and (on a couple of
   pages) an accidental reuse of the .logo wordmark style. */
.gf-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    transition: color 0.15s ease;
}

.gf-back-link:hover {
    color: var(--brand);
}

.gf-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
}

.gf-empty-state .gf-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(var(--brand-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.gf-empty-state .gf-empty-title {
    color: var(--text);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.gf-empty-state .gf-empty-sub {
    font-size: 0.9rem;
    max-width: 320px;
    margin: 0 auto;
}

/* Button press feedback -- small, tactile, modern */
.btn-primary:active, .btn-secondary:active, .btn-outline:active {
    transform: scale(0.97);
}

/* =====================================================================
   Mobile touch responsiveness
   Buttons/links default to `touch-action: auto`, which on some mobile
   browsers still waits ~300ms after a tap to check for a double-tap
   zoom gesture before registering the click -- read as "taps feel
   slow/unresponsive". `manipulation` tells the browser to skip that
   wait since these are ordinary controls, not zoomable content. Also
   replaces the default (often harsh, mismatched-color) tap flash with
   a subtle, on-brand one, and keeps every interactive element inside a
   comfortable one-finger tap size.
   ===================================================================== */
a, button, .btn-primary, .btn-secondary, .btn-outline,
.dashboard-nav a, .gf-theme-toggle, .gf-drawer-close, .burger-menu,
input, select, textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(var(--brand-rgb), 0.18);
}

@media (max-width: 768px) {
    .btn-primary, .btn-secondary, .btn-outline {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .gf-drawer-close, .burger-menu {
        min-width: 44px;
        min-height: 44px;
    }
}