/* =====================================================================
   FLOWFIT — THEME SYSTEM (FIXED)
   
   Dark mode is the default (:root in each page's <style> block).
   This file only defines what changes in light mode.
   
   FIXES APPLIED:
   - ✅ Removed ALL yellow hue in light mode
   - ✅ Perfect text visibility in both modes
   - ✅ Cleaner backgrounds (pure white/grays)
   - ✅ Smaller theme toggle button (28px)
   - ✅ Better contrast ratios
   ===================================================================== */

/* ── LIGHT MODE ROOT OVERRIDES ─────────────────────────────────────── */
html.light-mode {
    /* Backgrounds - PURE WHITE, NO YELLOW TINT */
    --ink:          #fafafa;          /* Very light gray instead of yellow-tinged */
    --ink-1:        #ffffff;          /* Pure white */
    --ink-2:        #f5f5f5;          /* Light gray */
    --g-card:       linear-gradient(145deg, #ffffff, #fafafa);
    --surface:      rgba(255,255,255,0.98);
    --surface-deep: rgba(250,250,250,0.99);
    --surface-2:    rgba(245,245,245,0.95);
    --card:         rgba(255,255,255,0.98);
    --bg-card:      linear-gradient(145deg, #ffffff, #fafafa);
    --bg-deep:      #fafafa;
    --bg-primary:   #fafafa;
    --bg-surface:   #ffffff;
    --bg-sidebar:   #ffffff;
    --bg-elevated:  #f5f5f5;
    --bg-dark:      #fafafa;
    --sid:          #ffffff;

    /* Text - HIGH CONTRAST FOR PERFECT READABILITY */
    --t1:           #0a0a0a;          /* Almost black for headings */
    --t2:           #404040;          /* Dark gray for body text */
    --t3:           #737373;          /* Medium gray for secondary text */
    --t4:           #262626;          /* Dark for emphasis */
    --text-primary: #0a0a0a;
    --text-secondary:#404040;
    --text-dim:     #737373;
    --text-muted:   #a3a3a3;
    --s:            #404040;
    --smoke:        #737373;

    /* Borders - NEUTRAL GRAYS, NO YELLOW */
    --b1:           rgba(0,0,0,0.08);  /* Very subtle */
    --b2:           rgba(0,0,0,0.12);  /* Subtle */
    --b3:           rgba(0,0,0,0.06);  /* Extra subtle */
    --b4:           rgba(0,0,0,0.10);  /* Light */
    --border:       rgba(0,0,0,0.08);
    --border-gold:  rgba(184,134,11,0.25);  /* Gold border when needed */
    --border-gold-hover: rgba(184,134,11,0.40);
    --border-subtle: rgba(0,0,0,0.06);

    /* Gold — Rich but not overwhelming */
    --Au:           #B8860B;          /* Dark goldenrod */
    --Au-hi:        #D4AF37;          /* Brighter gold */
    --Au-lo:        #8B6914;          /* Darker gold */

    /* Au alpha tints → NEUTRAL GRAYS (prevents yellow wash) */
    --Au-04:        rgba(0,0,0,0.02);
    --Au-06:        rgba(0,0,0,0.03);
    --Au-07:        rgba(0,0,0,0.04);
    --Au-mist:      rgba(0,0,0,0.03);
    --Au-09:        rgba(0,0,0,0.04);
    --Au-10:        rgba(0,0,0,0.05);
    --Au-12:        rgba(0,0,0,0.06);
    --Au-14:        rgba(0,0,0,0.07);
    --Au-15:        rgba(0,0,0,0.08);
    --Au-20:        rgba(0,0,0,0.09);
    --Au-25:        rgba(184,134,11,0.08);  /* Only show gold at higher opacity */
    --Au-28:        rgba(184,134,11,0.10);
    --Au-30:        rgba(184,134,11,0.12);
    --Au-35:        rgba(184,134,11,0.15);
    --Au-38:        rgba(184,134,11,0.18);
    --Au-40:        rgba(184,134,11,0.20);
    --Au-44:        rgba(184,134,11,0.22);
    --Au-50:        rgba(184,134,11,0.25);
    --Au-60:        rgba(184,134,11,0.30);
    --Au-glow:      rgba(184,134,11,0.08);
    --Au-rim:       rgba(184,134,11,0.20);

    /* White overlays → dark overlays for light mode */
    --white-02:     rgba(0,0,0,0.02);
    --white-03:     rgba(0,0,0,0.03);
    --white-04:     rgba(0,0,0,0.04);
    --white-05:     rgba(0,0,0,0.05);
    --white-06:     rgba(0,0,0,0.06);
    --white-08:     rgba(0,0,0,0.08);
    --white-10:     rgba(0,0,0,0.10);
    --white-12:     rgba(0,0,0,0.12);
    --white-15:     rgba(0,0,0,0.15);
    --white-20:     rgba(0,0,0,0.18);
    --white-22:     rgba(0,0,0,0.20);
    --white-28:     rgba(0,0,0,0.22);
    --white-38:     rgba(0,0,0,0.25);

    /* Shadows - SOFT AND SUBTLE */
    --shadow-card:       0 2px 16px rgba(0,0,0,0.08);
    --shadow-gold-glow:  0 0 24px rgba(184,134,11,0.12);

    /* Gradients - CLEAN, NO YELLOW WASH */
    --gradient-gold-soft: linear-gradient(135deg,rgba(0,0,0,0.03),rgba(0,0,0,0.01));
}

/* ── THEME TOGGLE BUTTON (SMALLER & CLEANER) ───────────────────────── */
.theme-toggle-btn {
    background: var(--Au-12);
    border: 1px solid var(--Au-rim);
    color: var(--Au);
    width: 28px;            /* ✅ REDUCED from 38px */
    height: 28px;           /* ✅ REDUCED from 38px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;     /* ✅ SMALLER icon */
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
}
.theme-toggle-btn:hover {
    background: var(--Au-25);
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(184,134,11,0.2);
}
.theme-toggle-btn:active {
    transform: scale(0.95);
}

/* ── LIGHT MODE BODY & BACKGROUND (NO YELLOW HUE) ───────────────────── */
html.light-mode body {
    background-image: none !important;
    background-color: #fafafa !important;  /* ✅ PURE GRAY, NO YELLOW */
}

/* ── SIDEBAR & NAV (CLEAN WHITE) ───────────────────────────────────── */
html.light-mode .sidebar,
html.light-mode nav,
html.light-mode .top-nav,
html.light-mode #mainNav {
    background: rgba(255,255,255,0.98) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

html.light-mode .sidebar .nav-link {
    color: #404040 !important;
}
html.light-mode .sidebar .nav-link:hover {
    color: #B8860B !important;
    background: rgba(0,0,0,0.04) !important;
}
html.light-mode .sidebar .nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg,#B8860B,#D4AF37) !important;
}
html.light-mode .sidebar .user-info h4,
html.light-mode .sidebar .logo,
html.light-mode .sidebar .nav-link span {
    color: #0a0a0a !important;
}

/* ── CARDS (PURE WHITE, NO YELLOW TINT) ──────────────────────────────── */
html.light-mode .stat-card,
html.light-mode .chart-card,
html.light-mode .panel-card,
html.light-mode .workout-preview,
html.light-mode .pricing-card,
html.light-mode .plan-card,
html.light-mode .continue-banner,
html.light-mode .wpoints-card,
html.light-mode .section,
html.light-mode .content-grid .card,
html.light-mode .feature-card,
html.light-mode .stat-badge {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* ── INNER ITEMS (CLEAN SEPARATION) ──────────────────────────────────── */
html.light-mode .workout-item,
html.light-mode .wp-hist-row,
html.light-mode .quick-nav-card,
html.light-mode .achievement-badge,
html.light-mode .exercise-item,
html.light-mode .plan-feature-list li {
    background: #fafafa !important;
    border-color: rgba(0,0,0,0.06) !important;
    color: #0a0a0a !important;
}

/* ── TEXT VISIBILITY (PERFECT CONTRAST) ────────────────────────────── */
html.light-mode .workout-info h4,
html.light-mode .achievement-info h4,
html.light-mode .wp-hist-label,
html.light-mode .ff-confirm-title,
html.light-mode h1, 
html.light-mode h2, 
html.light-mode h3,
html.light-mode h4, 
html.light-mode h5, 
html.light-mode h6,
html.light-mode .hero-text h1,
html.light-mode .page-title,
html.light-mode .section-title {
    color: #0a0a0a !important;
    background: none !important;
    -webkit-text-fill-color: unset !important;
}

html.light-mode .qn-label,
html.light-mode .wp-key,
html.light-mode p,
html.light-mode label,
html.light-mode .hero-text p,
html.light-mode .feature-desc,
html.light-mode .stat-label,
html.light-mode span:not(.nav-icon):not(.plan-badge):not([class*="badge"]) {
    color: #404040 !important;
}

/* Secondary text */
html.light-mode .text-secondary,
html.light-mode .stat-sublabel,
html.light-mode .meta,
html.light-mode .timestamp {
    color: #737373 !important;
}

/* ── HERO SECTION (CLEAN WHITE, NO YELLOW OVERLAY) ────────────────── */
html.light-mode .hero::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(250, 250, 250, 0.92) 50%,
        rgba(255, 255, 255, 0.97) 100%
    ) !important;
}

/* ✅ CRITICAL FIX: Remove yellow hue from background blobs */
html.light-mode .blob-1,
html.light-mode .blob-2,
html.light-mode .blob-3,
html.light-mode .hero::after {
    opacity: 0 !important;  /* ✅ COMPLETELY HIDDEN in light mode */
    display: none !important;
}

/* ── HEADERS & SECTIONS (NO YELLOW TINT) ────────────────────────────── */
html.light-mode .header,
html.light-mode .page-header,
html.light-mode .section-header {
    background: rgba(255,255,255,0.98) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* ── EMPTY STATES ────────────────────────────────────────────────────── */
html.light-mode .empty-state,
html.light-mode .empty-section {
    color: #737373 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}

/* ── MODALS (CLEAN BACKGROUNDS) ──────────────────────────────────────── */
html.light-mode .ai-modal,
html.light-mode .ff-confirm-backdrop {
    background: rgba(0,0,0,0.40) !important;  /* Dark overlay for modals */
}

html.light-mode .ai-coach-content,
html.light-mode .ai-modal-content,
html.light-mode .ff-confirm-box {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

html.light-mode .chat-messages { 
    background: #fafafa !important; 
}

html.light-mode .quick-suggestions,
html.light-mode .chat-input-area {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}

html.light-mode .chat-input-area input,
html.light-mode .ai-input {
    background: #fafafa !important;
    color: #0a0a0a !important;
    border-color: rgba(0,0,0,0.08) !important;
}

html.light-mode .ai-coach-header,
html.light-mode .ai-modal-header { 
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* ── INPUTS & FORMS ────────────────────────────────────────────────── */
html.light-mode input,
html.light-mode select,
html.light-mode textarea {
    background: #ffffff !important;
    color: #0a0a0a !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}

html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
    color: #a3a3a3 !important;
}

html.light-mode input:focus,
html.light-mode select:focus,
html.light-mode textarea:focus {
    border-color: #B8860B !important;
    box-shadow: 0 0 0 3px rgba(184,134,11,0.10) !important;
}

/* ── TABLES ──────────────────────────────────────────────────────────── */
html.light-mode table th {
    background: #fafafa !important;
    color: #0a0a0a !important;
    border-bottom: 2px solid rgba(0,0,0,0.08) !important;
}

html.light-mode table td { 
    color: #404040 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

html.light-mode table tr:hover {
    background: rgba(0,0,0,0.02) !important;
}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
html.light-mode .btn-primary {
    background: linear-gradient(135deg, #B8860B, #D4AF37) !important;
    color: #ffffff !important;
    border: none !important;
}

html.light-mode .btn-ghost {
    background: transparent !important;
    color: #404040 !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}

html.light-mode .btn-ghost:hover {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.20) !important;
}

/* ── NOTIFICATIONS ───────────────────────────────────────────────────── */
html.light-mode .notif-panel {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
}

html.light-mode .notif-item { 
    border-bottom: 1px solid rgba(0,0,0,0.06) !important; 
}

html.light-mode .notif-item:hover { 
    background: rgba(0,0,0,0.03) !important; 
}

html.light-mode .notif-item.unread { 
    background: rgba(184,134,11,0.05) !important; 
}

html.light-mode .notif-title { 
    color: #0a0a0a !important; 
}

html.light-mode .notif-body { 
    color: #404040 !important; 
}

html.light-mode .notif-panel-title { 
    color: #0a0a0a !important; 
}

/* ── WPOINTS ─────────────────────────────────────────────────────────── */
html.light-mode .wpoints-circle { 
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}

html.light-mode .wp-row { 
    border-bottom: 1px solid rgba(0,0,0,0.06) !important; 
}

html.light-mode .wpoints-rule { 
    background: #fafafa !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
}

/* =====================================================================
   LAYOUT & OVERFLOW FIXES (APPLIES TO BOTH MODES)
   ===================================================================== */
body, html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure grids never overflow */
.stats-grid,
.features-grid,
.pricing-grid,
.hero-content,
.footer-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Grid containers must not overflow */
.stats-grid,
.features-grid {
    overflow: hidden !important;
    max-width: calc(100vw - 2rem) !important;
}

/* =====================================================================
   NAV BAR IMPROVEMENTS
   ===================================================================== */
#mainNav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.75rem 2rem !important;
    gap: 2rem !important;
}

.logo-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    text-decoration: none !important;
}

.nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Nav right section with buttons + theme toggle */
.nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* =====================================================================
   SMOOTH MODE TRANSITIONS
   ===================================================================== */
html {
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

html.light-mode * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* =====================================================================
   ACCESSIBILITY IMPROVEMENTS
   ===================================================================== */
html.light-mode a {
    color: #B8860B !important;
}

html.light-mode a:hover {
    color: #8B6914 !important;
    text-decoration: underline !important;
}

html.light-mode .btn:focus,
html.light-mode button:focus,
html.light-mode input:focus,
html.light-mode select:focus,
html.light-mode textarea:focus {
    outline: 2px solid #B8860B !important;
    outline-offset: 2px !important;
}