/* ========================================
   FOCUS MODE - Subtle Focus (v4.0)
   Muted brand colors, reduced intensity
   NO GRAYSCALE - keeps brand identity
   ======================================== */

/* Focus Mode Color Overrides - Subtle muted palette */
body.focus-mode {
    /* Muted brand colors (30% less saturation) */
    --color-primary: #4CAF7A;
    --color-primary-hover: #5BBF88;
    --color-primary-glow: rgba(76, 175, 122, 0.12);
    --color-accent-gold: #C9A857;

    /* Reduced intensity glows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.12);

    /* Subtle glass effects */
    --color-glass: rgba(30, 30, 35, 0.6);
    --color-glass-hover: rgba(40, 40, 45, 0.7);
    --color-glass-border: rgba(255, 255, 255, 0.06);
}

/* Light mode focus overrides - data-theme is on html element */
html[data-theme="light"] body.focus-mode {
    --color-primary: #3D9E6A;
    --color-primary-hover: #4CAF7A;
    --color-primary-glow: rgba(61, 158, 106, 0.1);
    --color-accent-gold: #B89A4A;

    --color-glass: rgba(255, 255, 255, 0.85);
    --color-glass-hover: rgba(255, 255, 255, 0.95);
    --color-glass-border: rgba(0, 0, 0, 0.06);
}

/* Light mode focus - ensure top controls use light theme */
html[data-theme="light"] body.focus-mode .mode-toggle,
html[data-theme="light"] body.focus-mode .settings-group,
html[data-theme="light"] body.focus-mode .streak-badge {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Light mode focus - stat cards */
html[data-theme="light"] body.focus-mode .stat-mini {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Light mode focus - resume cards */
html[data-theme="light"] body.focus-mode .resume-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Hide community/social features in Focus Mode */
body.focus-mode .stories-section,
body.focus-mode .community-grid {
    display: none !important;
}

/* Subtle focus indicator - thin gradient line at top */
body.focus-mode .main-content::before {
    content: '';
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-gold));
    opacity: 0.6;
    z-index: 50;
}

[dir="ltr"] body.focus-mode .main-content::before {
    left: 0;
    right: auto;
    margin-left: 260px;
}

body.sidebar-collapsed.focus-mode .main-content::before {
    left: 60px;
}

[dir="ltr"] body.sidebar-collapsed.focus-mode .main-content::before {
    margin-left: 60px;
}

/* NO grayscale on main content - use variable overrides instead */
body.focus-mode .main-content {
    transition: all 0.3s ease;
}

/* Resume cards - keep thumbnails colorful */
body.focus-mode .resume-card {
    box-shadow: var(--shadow-md);
    border-color: var(--color-glass-border);
}

body.focus-mode .resume-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    border-color: rgba(76, 175, 122, 0.3);
}

/* Course thumbnails stay full color */
body.focus-mode .resume-card .resume-thumb,
body.focus-mode .resume-card img,
body.focus-mode .course-thumbnail {
    filter: none !important;
}

/* Progress bars - muted but visible */
body.focus-mode .progress-fill {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent-gold)) !important;
    opacity: 0.85;
}

body.focus-mode .resume-card:hover .progress-fill {
    opacity: 1;
}

/* Hide distracting badges */
body.focus-mode .notification-badge,
body.focus-mode .notification-count {
    display: none !important;
}

/* Keep streak badge but toned down */
body.focus-mode .streak-badge {
    opacity: 0.7;
    box-shadow: none;
}

body.focus-mode .streak-badge:hover {
    opacity: 1;
}

/* Sidebar - slightly muted, not grayscale */
body.focus-mode .sidebar {
    opacity: 0.95;
}

body.focus-mode .sidebar:hover {
    opacity: 1;
}

/* Top bar - uses CSS variable overrides, no filter */
body.focus-mode .top-bar {
    filter: none;
}

/* Mode toggle stays fully colorful */
body.focus-mode .mode-toggle {
    filter: none;
    opacity: 1;
}

body.focus-mode .mode-btn.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    box-shadow: 0 4px 12px var(--color-primary-glow);
}

/* Stats row - slightly reduced intensity */
body.focus-mode .stats-row {
    opacity: 0.9;
}

body.focus-mode .stats-row:hover {
    opacity: 1;
}

/* Reduce glow effects by 50% */
body.focus-mode .mode-btn.active {
    animation: none;
    /* Stop pulsing animation */
}

body.focus-mode [class*="glow"] {
    --glow-intensity: 0.5;
}

/* Reduce animated glows - don't remove completely */
body.focus-mode [class*="pulse"] {
    animation-duration: 4s;
    /* Slower, less distracting */
}

/* Cards - reduced shadow, not removed */
body.focus-mode .resume-card,
body.focus-mode .stat-mini {
    box-shadow: var(--shadow-sm);
}

body.focus-mode .resume-card:hover {
    box-shadow: var(--shadow-lg);
}