/* Dark Mode Styles for Coder World */

/* Base dark mode styles */
body.dark-mode {
    --bg-color: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #252525;
    --text-color: #e0e0e0;
    --text-secondary: #b0b0b0;
    --primary-color: #4f8cff;
    --primary-hover: #3a78e7;
    --secondary-color: #6c757d;
    --border-color: #333333;
    --card-bg: #1a1a2e;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --info-color: #17a2b8;
    --manual-primary: #6495ed;
    --manual-secondary: #2a2a2a;
    --manual-text: #e0e0e0;
    --manual-text-secondary: #b0b0b0;
    --manual-border: #444444;
    --manual-success: #3cb371;
    --manual-warning: #ffb74d;
    --manual-danger: #f48771;
    --manual-info: #56c8d8;
    --manual-code-bg: #333333;
    
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

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

/* Light mode overrides */
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) .dashboard-page,
body:not(.dark-mode) .main-content,
body:not(.dark-mode) .dashboard-container {
    background-color: var(--bg-light);
}

/* Force all cards to use proper light mode colors */
body:not(.dark-mode) .stat-card,
body:not(.dark-mode) .welcome-card,
body:not(.dark-mode) .project-card,
body:not(.dark-mode) .activity-card,
body:not(.dark-mode) .template-card,
body:not(.dark-mode) .code-editor,
body:not(.dark-mode) .repository-card,
body:not(.dark-mode) .workspace-card,
body:not(.dark-mode) .project-item,
body:not(.dark-mode) .code-templates-library {
    background-color: #ffffff;
    color: var(--text-dark);
    border-color: #e0e0e0;
}

/* Navigation */
body.dark-mode .navbar {
    background-color: var(--bg-secondary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .nav-links a {
    color: var(--text-color);
}

body.dark-mode .nav-links a:hover {
    color: var(--primary-color);
}

body.dark-mode .nav-links a.active {
    color: var(--primary-color);
}

body.dark-mode .login-btn,
body.dark-mode .signup-btn {
    background-color: var(--bg-tertiary);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

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

body.dark-mode .menu-toggle {
    color: var(--text-color);
}

/* Hero Section */
body.dark-mode .hero {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-color) 100%);
}

body.dark-mode .hero-content h1,
body.dark-mode .hero-content p {
    color: var(--text-color);
}

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

/* Feature Tabs */
body.dark-mode .feature-tabs {
    background-color: var(--bg-tertiary);
}

body.dark-mode .tab-button {
    color: var(--text-secondary);
}

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

body.dark-mode .feature-card {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
    color: var(--text-color);
}

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

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

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

/* Demo Section */
body.dark-mode .demo-section {
    background-color: var(--bg-secondary);
}

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

body.dark-mode .demo-options .option {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

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

body.dark-mode .pricing-card.popular {
    border-color: var(--primary-color);
}

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

/* Testimonials */
body.dark-mode .testimonial-card {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
}

body.dark-mode .testimonial-author img {
    border: 2px solid var(--border-color);
}

/* Tools Section */
body.dark-mode .tools-grid {
    background-color: var(--bg-tertiary);
}

body.dark-mode .tool-logo {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* Updates Section */
body.dark-mode .update-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

/* Call to Action */
body.dark-mode .cta-section {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}

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

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

/* About Page */
body.dark-mode .about-hero {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-color) 100%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .about-overview {
    background-color: var(--bg-color);
}

body.dark-mode .about-stats {
    background-color: var(--bg-secondary);
}

body.dark-mode .about-mission {
    background-color: var(--bg-color);
}

body.dark-mode .about-values {
    background-color: var(--bg-secondary);
}

body.dark-mode .about-team {
    background-color: var(--bg-color);
}

body.dark-mode .about-partners {
    background-color: var(--bg-secondary);
}

body.dark-mode .overview-card,
body.dark-mode .mission-box,
body.dark-mode .value-card,
body.dark-mode .team-member,
body.dark-mode .stat-card {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
    border-color: var(--border-color);
}

body.dark-mode .overview-card p,
body.dark-mode .mission-box p,
body.dark-mode .value-card p,
body.dark-mode .team-member p,
body.dark-mode .partner-logo {
    color: var(--text-secondary);
}

body.dark-mode h2,
body.dark-mode h3 {
    color: var(--text-color);
}

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

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

body.dark-mode .mission-icon,
body.dark-mode .value-card i {
    color: var(--primary-color);
    opacity: 0.3;
}

body.dark-mode .timeline-item {
    border-left: 2px solid var(--border-color);
}

body.dark-mode .timeline-item::before {
    background-color: var(--primary-color);
    border: 3px solid var(--bg-color);
}

/* FAQ Page */
body.dark-mode .faq-hero {
    background: linear-gradient(135deg, #1a1a4a 0%, #2a2a72 100%);
}

body.dark-mode .faq-search input {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

body.dark-mode .faq-search i {
    color: var(--text-secondary);
}

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

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

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

body.dark-mode .faq-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

body.dark-mode .faq-question {
    color: var(--text-color);
}

body.dark-mode .faq-question h3 {
    color: var(--text-color);
}

body.dark-mode .faq-answer p,
body.dark-mode .faq-answer ul,
body.dark-mode .faq-answer ol,
body.dark-mode .faq-answer li {
    color: var(--text-secondary);
}

body.dark-mode .faq-not-found {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

/* Contact Page */
body.dark-mode .contact-hero {
    background: linear-gradient(135deg, #1a1a4a 0%, #2a2a72 100%);
}

body.dark-mode .contact-options {
    background-color: var(--bg-color);
}

body.dark-mode .contact-card {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
}

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

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

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

body.dark-mode .response-time {
    color: var(--text-secondary);
}

body.dark-mode .contact-form-section {
    background-color: var(--bg-color);
}

body.dark-mode .contact-form-container {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
}

body.dark-mode .form-header {
    background-color: var(--primary-color);
}

body.dark-mode .form-group label {
    color: var(--text-color);
}

body.dark-mode .checkbox-group label {
    color: var(--text-secondary);
}

body.dark-mode .faq-preview {
    background-color: var(--bg-color);
}

body.dark-mode .faq-preview h2 {
    color: var(--text-color);
}

body.dark-mode .faq-preview > p {
    color: var(--text-secondary);
}

body.dark-mode .faq-preview-item {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

body.dark-mode .faq-preview-item h3 {
    color: var(--primary-color);
}

body.dark-mode .faq-preview-item p {
    color: var(--text-secondary);
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-secondary);
}

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

body.dark-mode .info-card {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
}

/* Dashboard */
body.dark-mode.dashboard-page {
    background-color: var(--bg-color);
}

body.dark-mode .sidebar {
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
}

body.dark-mode .sidebar-nav li a {
    color: var(--text-secondary);
}

body.dark-mode .sidebar-nav li.active a {
    background-color: var(--bg-tertiary);
    color: var(--primary-color);
}

body.dark-mode .sidebar-nav li a:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-color);
}

body.dark-mode .content-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

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

body.dark-mode .search-bar input {
    background-color: transparent;
    color: var(--text-color);
}

body.dark-mode .action-btn {
    background-color: var(--bg-tertiary);
    color: var(--text-color);
}

body.dark-mode .welcome-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

body.dark-mode .stat-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

body.dark-mode .project-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

body.dark-mode .activity-item {
    border-left: 2px solid var(--border-color);
}

/* Projects Page */
body.dark-mode .project-filters {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

body.dark-mode .filter-option.active {
    background-color: var(--primary-color);
    color: white;
}

/* Dark mode toggle button specific styles */
.dark-mode-toggle .fa-moon,
.dark-mode-toggle .fa-sun {
    font-size: 1.5rem;
}

/* Print styles for dark mode */
@media print {
    body.dark-mode {
        --bg-color: white;
        --text-color: black;
        --border-color: #ddd;
        background-color: white;
        color: black;
    }
}