/* Dark Mode Styles for ForumHub */

/* Dark Mode Variables */
body.dark-mode {
    --bg-color: #1f2937;
    --bg-light: #111827;
    --bg-dark: #374151;
    --text-color: #f9fafb;
    --text-light: #d1d5db;
    --border-color: #4b5563;
    --primary-color: #818cf8;
    --primary-hover: #a5b4fc;
    --navbar-bg: #111827;
    --navbar-border: #374151;
    /* Improved hover colors */
    --hover-bg: rgba(255, 255, 255, 0.08);
    --hover-bg-strong: rgba(255, 255, 255, 0.12);
    --hover-bg-card: rgba(255, 255, 255, 0.05);
    --hover-text: #ffffff;
    --hover-border: rgba(129, 140, 248, 0.3);
}

/* Base Elements */
body.dark-mode {
    background-color: var(--bg-light);
    color: var(--text-color);
}

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

        body.dark-mode a:hover {
            color: #fff;
        }

    /* Header */
    body.dark-mode .main-header {
        background-color: var(--navbar-bg);
        border-color: var(--navbar-border);
    }

    body.dark-mode .logo-icon {
        background-color: var(--primary-color);
    }

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

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

    /* Search */
    body.dark-mode .search-container input {
        background-color: var(--bg-dark);
        border-color: var(--border-color);
        color: var(--text-color);
    }

    body.dark-mode .search-btn {
        color: var(--text-light);
    }

    /* Cards */
    body.dark-mode .card {
        background-color: var(--bg-color);
        border-color: var(--border-color);
        transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    body.dark-mode .card:hover {
        background-color: rgba(31, 41, 55, 0.8);
        border-color: rgba(129, 140, 248, 0.3);
        transform: translateY(-2px);
    }

    body.dark-mode .card-header {
        background-color: rgba(0, 0, 0, 0.2);
        border-color: var(--border-color);
    }

    /* Category Cards */
    body.dark-mode .category-card {
        background-color: var(--bg-color);
        border-color: var(--border-color);
    }

    body.dark-mode .category-icon {
        background-color: var(--bg-dark);
    }

    /* Post Items */
    body.dark-mode .post-item {
        background-color: var(--bg-color);
        border-color: var(--border-color);
        transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    body.dark-mode .post-item:hover {
        background-color: var(--hover-bg-card);
        border-color: var(--hover-border);
    }

    /* Topic Tags */
    body.dark-mode .topic-count {
        background-color: var(--bg-dark);
        color: var(--text-light);
    }

    body.dark-mode .post-tag {
        background-color: var(--bg-dark);
    }

        body.dark-mode .post-tag.technology {
            background-color: rgba(59, 130, 246, 0.2);
        }

        body.dark-mode .post-tag.gaming {
            background-color: rgba(139, 92, 246, 0.2);
        }

        body.dark-mode .post-tag.creative-arts {
            background-color: rgba(236, 72, 153, 0.2);
        }

        body.dark-mode .post-tag.general {
            background-color: rgba(99, 102, 241, 0.2);
        }

    /* Active Category */
    body.dark-mode .active-category {
        background-color: var(--bg-dark);
        color: var(--text-color);
    }

        body.dark-mode .active-category:hover {
            background-color: rgba(129, 140, 248, 0.2);
            color: var(--primary-hover);
            border-color: var(--hover-border);
        }

    /* More Users */
    body.dark-mode .more-users {
        background-color: var(--bg-dark);
        color: var(--text-color);
    }

    /* Footer */
    body.dark-mode .main-footer {
        background-color: var(--bg-color);
        border-color: var(--border-color);
    }

    body.dark-mode .social-icons a {
        background-color: var(--bg-dark);
        color: var(--text-color);
    }

        body.dark-mode .social-icons a:hover {
            background-color: rgba(129, 140, 248, 0.2);
            color: var(--primary-hover);
            transform: translateY(-2px);
        }

    /* Form Elements */
    body.dark-mode .form-control {
        background-color: var(--bg-dark);
        border-color: var(--border-color);
        color: var(--text-color);
    }

        body.dark-mode .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(129, 140, 248, 0.25);
        }

    body.dark-mode .input-group-text {
        background-color: var(--bg-dark);
        border-color: var(--border-color);
        color: var(--text-light);
    }

    /* Buttons */
    body.dark-mode .btn-primary {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

        body.dark-mode .btn-primary:hover {
            background-color: var(--primary-hover);
            border-color: var(--primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
        }

    body.dark-mode .btn-outline-secondary {
        color: var(--text-color);
        border-color: var(--border-color);
    }

        body.dark-mode .btn-outline-secondary:hover {
            background-color: var(--hover-bg);
            color: var(--text-color);
            border-color: rgba(129, 140, 248, 0.4);
        }

    /* Dropdown Menu */
    body.dark-mode .dropdown-menu {
        background-color: var(--bg-color);
        border-color: var(--border-color);
    }

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

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

    body.dark-mode .dropdown-divider {
        border-color: var(--border-color);
    }

    /* Modal */
    body.dark-mode .modal-content {
        background-color: var(--bg-color);
        border-color: var(--border-color);
    }

    body.dark-mode .modal-header,
    body.dark-mode .modal-footer {
        border-color: var(--border-color);
    }

    body.dark-mode .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* List Group */
    body.dark-mode .list-group-item {
        background-color: var(--bg-color);
        border-color: var(--border-color);
        color: var(--text-color);
        transition: background-color 0.2s ease;
    }

    body.dark-mode .list-group-item:hover {
        background-color: var(--hover-bg);
        color: var(--text-color);
    }

    /* Scrollbar */
    body.dark-mode ::-webkit-scrollbar-track {
        background: var(--bg-dark);
    }

    body.dark-mode ::-webkit-scrollbar-thumb {
        background: var(--border-color);
    }

        body.dark-mode ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-color);
        }

/* Dark Mode Toggle Animation */
.dark-mode-toggle {
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

    .dark-mode-toggle:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

body.dark-mode .dark-mode-toggle:hover {
    background-color: var(--hover-bg);
    transform: scale(1.05);
}

.dark-mode-toggle i {
    font-size: 1.25rem;
    transition: transform 0.5s ease;
}

body.dark-mode .dark-mode-toggle .fa-moon {
    display: none;
}

body.dark-mode .dark-mode-toggle .fa-sun {
    display: inline-block;
    color: #fbbf24;
}

.dark-mode-toggle .fa-sun {
    display: none;
}

.dark-mode-toggle .fa-moon {
    display: inline-block;
    color: #6366f1;
}

/* Dark Mode Transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card,
.main-header,
.main-footer,
.form-control,
.btn,
.dropdown-menu {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* Add these rules to dark-mode.css */

/* Base text colors */
body.dark-mode {
    color: var(--text-color);
}

    /* Override Bootstrap's text utilities */
    body.dark-mode .text-muted {
        color: var(--text-light) !important;
    }

    body.dark-mode .text-dark {
        color: var(--text-color) !important;
    }

    /* Card text colors */
    body.dark-mode .card,
    body.dark-mode .card-title,
    body.dark-mode .card-text {
        color: var(--text-color);
    }

    /* Form text colors */
    body.dark-mode .form-control,
    body.dark-mode .form-label,
    body.dark-mode .input-group-text {
        color: var(--text-color);
    }

    /* List items */
    body.dark-mode .list-group-item {
        color: var(--text-color);
    }

    /* Footer text */
    body.dark-mode .main-footer,
    body.dark-mode .main-footer a:not(.btn) {
        color: var(--text-color);
    }

    /* Badges */
    body.dark-mode .badge {
        color: white;
    }

    /* Override any direct color usage */
    body.dark-mode small,
    body.dark-mode .small {
        color: var(--text-light);
    }

    /*x2*/
/* Posts.cshtml Dark Mode Additions - Add to dark-mode.css */

/* Connect Posts.cshtml variables with dark mode */
body.dark-mode {
    /* Add these to your existing dark-mode variables */
    --card-bg: var(--bg-color);
    --text-lighter: #9ca3af;
}

    /* Post-specific elements not covered in main dark-mode.css */
    body.dark-mode .sidebar-card,
    body.dark-mode .post-content-card,
    body.dark-mode .comments-container,
    body.dark-mode .comment-form {
        background-color: var(--bg-color);
        border-color: var(--border-color);
    }

    /* Community-specific elements */
    body.dark-mode .community-item {
        border-color: var(--border-color);
    }

    body.dark-mode .community-number,
    body.dark-mode .community-description,
    body.dark-mode .trending-name,
    body.dark-mode .stat-label {
        color: var(--text-light);
    }

    /* Premium promo - unique to Posts.cshtml */
    body.dark-mode .premium-promo {
        background-color: #7e2d00; /* Darker shade of orange */
    }

    body.dark-mode .premium-button {
        background-color: white;
        color: #7e2d00;
    }

    /* Comment section */
    body.dark-mode .comments-header,
    body.dark-mode .comment {
        border-color: var(--border-color);
    }

    body.dark-mode .comment-input {
        background-color: var(--bg-dark);
        border-color: var(--border-color);
        color: var(--text-color);
    }

    body.dark-mode .comment-body,
    body.dark-mode .comment-author {
        color: var(--text-color);
    }

    body.dark-mode .comment-time {
        color: var(--text-light);
    }

    body.dark-mode .comment-action {
        color: var(--text-light);
    }

        body.dark-mode .comment-action:hover {
            color: var(--primary-hover);
            background-color: var(--hover-bg);
        }

    /* Nested comments */
    body.dark-mode .nested-comments {
        border-color: var(--border-color);
    }

    /* Post elements */
    body.dark-mode .post-header {
        background-color: var(--bg-color);
        border-color: var(--border-color);
    }

    body.dark-mode .post-title,
    body.dark-mode .post-body,
    body.dark-mode .post-username,
    body.dark-mode .post-community {
        color: var(--text-color);
    }

    body.dark-mode .post-time {
        color: var(--text-light);
    }

    body.dark-mode .post-tag {
        background-color: var(--bg-dark);
        color: var(--text-light);
    }

    /* Post actions */
    body.dark-mode .post-actions {
        background-color: var(--bg-color);
        border-color: var(--border-color);
    }

    body.dark-mode .vote-button,
    body.dark-mode .action-button {
        color: var(--text-light);
    }

        body.dark-mode .vote-button:hover,
        body.dark-mode .action-button:hover {
            background-color: var(--hover-bg);
            color: var(--primary-hover);
            transform: scale(1.05);
            color: var(--primary-hover);
            background-color: rgba(255, 255, 255, 0.05);
        }

    /* Community sidebar elements */
    body.dark-mode .community-title {
        color: var(--text-color);
    }

    body.dark-mode .community-rules li {
        background-color: var(--bg-dark);
        color: var(--text-light);
    }

    body.dark-mode .trending-community {
        border-color: var(--border-color);
    }

    /* Sort dropdown */
    body.dark-mode .sort-dropdown {
        background-color: transparent;
        color: var(--primary-color);
    }
body.dark-mode .text-body{
    color:#fff !important;
}
input::placeholder {
    color: red;
    opacity: 1; /* For Firefox */
}

/* Stories Strip Card Style Dark Mode */
[data-theme="dark"] .stories-strip.card-style,
body.dark-mode .stories-strip.card-style {
    background: var(--bg-color);
    border-color: var(--border-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* Sponsor Sections Dark Mode */
[data-theme="dark"] .sponsor-item,
body.dark-mode .sponsor-item {
    background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 100%);
    color: white;
}

[data-theme="dark"] .sponsor-item:nth-child(2),
body.dark-mode .sponsor-item:nth-child(2) {
    background: linear-gradient(135deg, #831843 0%, #9f1239 100%);
}

[data-theme="dark"] .sponsor-badge,
body.dark-mode .sponsor-badge {
    background: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .sponsor-title,
body.dark-mode .sponsor-title {
    color: white;
}

[data-theme="dark"] .sponsor-text,
body.dark-mode .sponsor-text {
    color: rgba(255, 255, 255, 0.95);
}

/* Top Contributors Dark Mode */
[data-theme="dark"] .top-contributors,
body.dark-mode .top-contributors {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .top-contributors .section-title,
body.dark-mode .top-contributors .section-title {
    color: var(--text-color);
}

[data-theme="dark"] .contributor-item,
body.dark-mode .contributor-item {
    background: var(--bg-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .contributor-item:hover,
body.dark-mode .contributor-item:hover {
    background: var(--hover-bg);
    transform: translateX(3px);
    border-color: var(--hover-border);
}

[data-theme="dark"] .contributor-name,
body.dark-mode .contributor-name {
    color: var(--text-color);
}

[data-theme="dark"] .contributor-stats,
body.dark-mode .contributor-stats {
    color: var(--text-light);
}

[data-theme="dark"] .contributors-card,
body.dark-mode .contributors-card {
    background: var(--bg-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .contributors-card .card-header,
body.dark-mode .contributors-card .card-header {
    background: rgba(0, 0, 0, 0.2);
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .contributor-rank,
body.dark-mode .contributor-rank {
    color: var(--text-color);
}

[data-theme="dark"] .contributor-karma,
body.dark-mode .contributor-karma {
    color: var(--text-color);
}

/* Sidebar Card Dark Mode */
[data-theme="dark"] .sidebar-card,
body.dark-mode .sidebar-card {
    background: var(--bg-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .sidebar-header,
body.dark-mode .sidebar-header {
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .stat-label,
body.dark-mode .stat-label {
    color: var(--text-light);
}

[data-theme="dark"] .stat-number,
body.dark-mode .stat-number {
    color: var(--text-color);
}

/* Contribution Sections Dark Mode */
[data-theme="dark"] .contribution-item,
body.dark-mode .contribution-item {
    background: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .contribution-section,
body.dark-mode .contribution-section {
    background: var(--bg-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .contribution-section .card-header,
body.dark-mode .contribution-section .card-header {
    background: rgba(0, 0, 0, 0.2);
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}

/* Additional Hover Improvements for Common Elements */
[data-theme="dark"] .btn:hover,
body.dark-mode .btn:hover {
    transition: all 0.2s ease;
}

[data-theme="dark"] .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:hover {
    background-color: rgba(129, 140, 248, 0.15);
    border-color: var(--primary-hover);
    color: var(--primary-hover);
}

[data-theme="dark"] .btn-outline-success:hover,
body.dark-mode .btn-outline-success:hover {
    background-color: rgba(34, 197, 94, 0.15);
    border-color: #4ade80;
    color: #4ade80;
}

[data-theme="dark"] .btn-outline-danger:hover,
body.dark-mode .btn-outline-danger:hover {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: #f87171;
    color: #f87171;
}

[data-theme="dark"] .card:hover,
body.dark-mode .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] a:hover,
body.dark-mode a:hover {
    color: var(--primary-hover);
}

[data-theme="dark"] .badge:hover,
body.dark-mode .badge:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

[data-theme="dark"] .table tbody tr:hover,
body.dark-mode .table tbody tr:hover {
    background-color: var(--hover-bg);
}

[data-theme="dark"] .pagination .page-link:hover,
body.dark-mode .pagination .page-link:hover {
    background-color: var(--hover-bg);
    border-color: var(--hover-border);
    color: var(--primary-hover);
}