/* Light Mode Overrides for Coder World Dashboard */

/* Base light mode styles */
body:not(.dark-mode) {
    /* General variables */
    --bg-dark: #f0f7ff; /* Changed from dark color to light blue for hero gradient */
    --bg-light: #ffffff;
    --text-dark: #333333;
    --text-light: #333333; /* Changed from white to dark for better contrast in light mode */
    --bg-color: #f5f9ff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f4fa;
    --text-color: #333333;
    --text-secondary: #666666;
    --border-color: #e0e0e0;
    --card-bg: #ffffff;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Ensure all sections get proper light mode background */
body:not(.dark-mode) section,
body:not(.dark-mode) .section,
body:not(.dark-mode) .container,
body:not(.dark-mode) .content-area,
body:not(.dark-mode) .wrapper,
body:not(.dark-mode) .content-body,
body:not(.dark-mode) .stats-section,
body:not(.dark-mode) .welcome-section,
body:not(.dark-mode) .recent-projects,
body:not(.dark-mode) .activity-section,
body:not(.dark-mode) .code-templates-section,
body:not(.dark-mode) .editor-section,
body:not(.dark-mode) .git-section,
body:not(.dark-mode) .project-management-section,
body:not(.dark-mode) .library-section {
    background-color: var(--bg-color);
}

/* Card backgrounds in light mode */
body:not(.dark-mode) .card,
body:not(.dark-mode) .welcome-card,
body:not(.dark-mode) .stat-card,
body:not(.dark-mode) .project-card,
body:not(.dark-mode) .activity-card,
body:not(.dark-mode) .template-card,
body:not(.dark-mode) .dropdown-menu,
body:not(.dark-mode) .template-category {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

/* Text colors in light mode */
body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
body:not(.dark-mode) h4,
body:not(.dark-mode) h5,
body:not(.dark-mode) h6 {
    color: var(--text-color);
}

body:not(.dark-mode) p,
body:not(.dark-mode) span,
body:not(.dark-mode) div {
    color: var(--text-color);
}

/* Dropdown menu in light mode */
body:not(.dark-mode) .dropdown-menu {
    background-color: var(--bg-secondary);
}

body:not(.dark-mode) .dropdown-item {
    color: var(--text-color);
}

body:not(.dark-mode) .dropdown-item:hover {
    background-color: var(--bg-tertiary);
}

/* Main content area in light mode */
body:not(.dark-mode) .main-content {
    background-color: var(--bg-color);
}

/* Content body in light mode */
body:not(.dark-mode) .content-body {
    background-color: var(--bg-color);
}

/* Fix for template cards in light mode */
body:not(.dark-mode) .template-card {
    background-color: var(--bg-secondary);
}

/* Fix for stat icons in light mode */
body:not(.dark-mode) .stat-icon {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Fix for buttons in light mode */
body:not(.dark-mode) .secondary-btn {
    color: var(--text-color);
    border-color: var(--border-color);
}

body:not(.dark-mode) .secondary-btn:hover {
    background-color: var(--bg-tertiary);
}

/* Hero section specific light mode overrides */
body:not(.dark-mode) .hero {
    background: linear-gradient(135deg, var(--bg-dark) 0%, #e0eafc 100%);
}

body:not(.dark-mode) .hero-content h1 {
    background: linear-gradient(90deg, var(--primary-dark), var(--accent-color));
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body:not(.dark-mode) .hero-content h2 {
    color: var(--text-dark);
}

body:not(.dark-mode) .hero-content p {
    color: var(--text-dark);
    background-color: rgba(0, 102, 255, 0.08);
}

body:not(.dark-mode) .stat-label {
    color: var(--text-dark);
}

body:not(.dark-mode) .cta-secondary {
    color: var(--text-dark);
    border-color: rgba(0, 0, 0, 0.2);
}

body:not(.dark-mode) .cta-secondary:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: var(--text-dark);
}

body:not(.dark-mode) .stat-number {
    color: var(--primary-color);
}

/* Features section specific light mode overrides */
body:not(.dark-mode) .features {
    background-color: var(--bg-light);
}

body:not(.dark-mode) .feature-tabs {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

body:not(.dark-mode) .tab-btn {
    color: var(--text-dark);
}

body:not(.dark-mode) .tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

body:not(.dark-mode) .feature-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

body:not(.dark-mode) .feature-card h3 {
    color: var(--text-dark);
}

body:not(.dark-mode) .feature-card p {
    color: var(--text-secondary);
}

body:not(.dark-mode) .feature-card .feature-link {
    color: var(--primary-color);
}

/* Demo section specific light mode overrides */
body:not(.dark-mode) .demo {
    background-color: var(--bg-tertiary);
}

body:not(.dark-mode) .demo-content h2 {
    color: var(--text-dark);
}

body:not(.dark-mode) .demo-subtitle {
    color: var(--text-secondary);
}

body:not(.dark-mode) .demo-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

body:not(.dark-mode) .demo-card h3 {
    color: var(--text-dark);
}

body:not(.dark-mode) .demo-card p {
    color: var(--text-secondary);
}

body:not(.dark-mode) .demo-link {
    background-color: var(--primary-color);
    color: white;
}

body:not(.dark-mode) .demo-link:hover {
    background-color: var(--primary-hover);
}

/* Pricing section specific light mode overrides */
body:not(.dark-mode) .pricing {
    background-color: var(--bg-light);
}

body:not(.dark-mode) .pricing h2 {
    color: var(--text-dark);
}

body:not(.dark-mode) .pricing-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

body:not(.dark-mode) .pricing-card h3 {
    color: var(--text-dark);
}

body:not(.dark-mode) .price {
    color: var(--primary-color);
}

body:not(.dark-mode) .price span {
    color: var(--text-secondary);
}

body:not(.dark-mode) .pricing-card ul li {
    color: var(--text-dark);
}

body:not(.dark-mode) .pricing-btn {
    background-color: var(--primary-color);
    color: white;
}

body:not(.dark-mode) .pricing-btn:hover {
    background-color: var(--primary-hover);
}

/* Footer section specific light mode overrides */
body:not(.dark-mode) footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

body:not(.dark-mode) .footer-top {
    background-color: var(--bg-secondary);
}

body:not(.dark-mode) .footer-brand h2 {
    color: var(--text-dark);
}

body:not(.dark-mode) .footer-brand p {
    color: var(--text-secondary);
}

body:not(.dark-mode) .footer-col h4 {
    color: var(--text-dark);
}

body:not(.dark-mode) .footer-col ul li a {
    color: var(--text-secondary);
}

body:not(.dark-mode) .footer-col ul li a:hover {
    color: var(--primary-color);
}

body:not(.dark-mode) .footer-bottom {
    border-top: 1px solid var(--border-color);
}

body:not(.dark-mode) .footer-bottom p {
    color: var(--text-secondary);
}

body:not(.dark-mode) .footer-badges .badge {
    background-color: var(--bg-tertiary);
    color: var(--text-dark);
}

/* Fix for any remaining links in the footer that might still be using .html extension */
body:not(.dark-mode) a[href$='.html'] {
    color: inherit; /* Inherit the color from parent */
}

/* Updates section specific light mode overrides */
body:not(.dark-mode) .latest-updates {
    background-color: var(--bg-light);
}

body:not(.dark-mode) .latest-updates h2 {
    color: var(--text-dark);
}

body:not(.dark-mode) .section-subtitle {
    color: var(--text-secondary);
    background-color: rgba(0, 102, 255, 0.05);
}

body:not(.dark-mode) .update-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

body:not(.dark-mode) .update-card h3 {
    color: var(--text-dark);
}

body:not(.dark-mode) .update-card p {
    color: var(--text-secondary);
    background-color: rgba(0, 102, 255, 0.05);
}

body:not(.dark-mode) .update-link {
    color: var(--primary-color);
}

body:not(.dark-mode) .updates-all {
    background-color: var(--primary-color);
    color: white;
}

body:not(.dark-mode) .updates-all:hover {
    background-color: var(--primary-hover);
}

/* Tech cards in light mode */
body:not(.dark-mode) .tech-stack {
    background-color: var(--bg-light);
}

body:not(.dark-mode) .tech-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
}

body:not(.dark-mode) .tech-card h3 {
    color: var(--text-dark);
}

body:not(.dark-mode) .tech-description {
    color: var(--text-secondary);
}

body:not(.dark-mode) .tech-feature {
    background-color: rgba(0, 102, 255, 0.05);
    color: var(--text-dark);
}

/* CTA section in light mode */
body:not(.dark-mode) .cta-section {
    background: linear-gradient(135deg, var(--bg-light) 0%, #e0eafc 100%);
}

body:not(.dark-mode) .cta-content h2 {
    color: var(--text-dark);
}

body:not(.dark-mode) .cta-content p {
    color: var(--text-secondary);
}

body:not(.dark-mode) .cta-feature {
    color: var(--text-dark);
}