/* Complete Dark Mode Styles */

/* Dark Mode Base */
body.dark-mode {
    background-color: #1a202c !important;
    color: #f7fafc !important;
}

/* Text Colors */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode li,
body.dark-mode label,
body.dark-mode th,
body.dark-mode td {
    color: #f7fafc !important;
}

body.dark-mode .text-muted {
    color: #a0aec0 !important;
}

body.dark-mode .text-secondary {
    color: #cbd5e0 !important;
}

/* Links */
body.dark-mode a {
    color: #63b3ed !important;
}

body.dark-mode a:hover {
    color: #90cdf4 !important;
}

/* Cards */
body.dark-mode .card {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #f7fafc !important;
}

body.dark-mode .card-header {
    background-color: #374151 !important;
    border-bottom-color: #4a5568 !important;
    color: #f7fafc !important;
}

body.dark-mode .card-body {
    color: #f7fafc !important;
}

body.dark-mode .card-footer {
    background-color: #374151 !important;
    border-top-color: #4a5568 !important;
    color: #f7fafc !important;
}

/* Forms */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea,
body.dark-mode input {
    background-color: #374151 !important;
    border-color: #4a5568 !important;
    color: #f7fafc !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode textarea:focus,
body.dark-mode input:focus {
    background-color: #374151 !important;
    border-color: #ff922b !important;
    color: #f7fafc !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 146, 43, 0.25) !important;
}

body.dark-mode .form-control::placeholder {
    color: #a0aec0 !important;
}

/* Buttons */
body.dark-mode .btn-secondary {
    background-color: #4a5568 !important;
    border-color: #4a5568 !important;
    color: #f7fafc !important;
}

body.dark-mode .btn-secondary:hover {
    background-color: #718096 !important;
    border-color: #718096 !important;
}

body.dark-mode .btn-outline-primary {
    color: #ff922b !important;
    border-color: #ff922b !important;
}

body.dark-mode .btn-outline-primary:hover {
    background-color: #ff922b !important;
    border-color: #ff922b !important;
    color: #1a202c !important;
}

/* Tables */
body.dark-mode .table {
    color: #f7fafc !important;
}

body.dark-mode .table thead th {
    background-color: #374151 !important;
    color: #cbd5e0 !important;
    border-color: #4a5568 !important;
}

body.dark-mode .table td {
    border-color: #4a5568 !important;
    color: #f7fafc !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: #374151 !important;
    color: #f7fafc !important;
}

/* List Groups */
body.dark-mode .list-group-item {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #f7fafc !important;
}

body.dark-mode .list-group-item:hover {
    background-color: #374151 !important;
}

body.dark-mode .list-group-item-action:hover {
    background-color: #374151 !important;
    color: #f7fafc !important;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.dark-mode .dropdown-item {
    color: #f7fafc !important;
}

body.dark-mode .dropdown-item:hover {
    background-color: #374151 !important;
    color: #ff922b !important;
}

body.dark-mode .dropdown-divider {
    border-color: #4a5568 !important;
}

/* Alerts */
body.dark-mode .alert-success {
    background-color: rgba(72, 187, 120, 0.1) !important;
    color: #68d391 !important;
    border-color: #68d391 !important;
}

body.dark-mode .alert-danger {
    background-color: rgba(245, 101, 101, 0.1) !important;
    color: #fc8181 !important;
    border-color: #fc8181 !important;
}

body.dark-mode .alert-warning {
    background-color: rgba(237, 137, 54, 0.1) !important;
    color: #f6ad55 !important;
    border-color: #f6ad55 !important;
}

body.dark-mode .alert-info {
    background-color: rgba(66, 153, 225, 0.1) !important;
    color: #63b3ed !important;
    border-color: #63b3ed !important;
}

/* Badges */
body.dark-mode .badge {
    color: #f7fafc !important;
}

/* Pagination */
body.dark-mode .page-link {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #f7fafc !important;
}

body.dark-mode .page-link:hover {
    background-color: #374151 !important;
    border-color: #4a5568 !important;
    color: #ff922b !important;
}

body.dark-mode .page-item.active .page-link {
    background-color: #ff922b !important;
    border-color: #ff922b !important;
    color: #1a202c !important;
}

/* Breadcrumb */
body.dark-mode .breadcrumb {
    background-color: transparent !important;
}

body.dark-mode .breadcrumb-item a {
    color: #cbd5e0 !important;
}

body.dark-mode .breadcrumb-item.active {
    color: #a0aec0 !important;
}

/* Nav Tabs */
body.dark-mode .nav-tabs {
    border-bottom-color: #4a5568 !important;
}

body.dark-mode .nav-tabs .nav-link {
    color: #cbd5e0 !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
    border-color: #4a5568 !important;
    color: #f7fafc !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    background-color: #2d3748 !important;
    border-color: #4a5568 #4a5568 #2d3748 !important;
    color: #ff922b !important;
}

/* Modal */
body.dark-mode .modal-content {
    background-color: #2d3748 !important;
    color: #f7fafc !important;
}

body.dark-mode .modal-header {
    border-bottom-color: #4a5568 !important;
}

body.dark-mode .modal-footer {
    border-top-color: #4a5568 !important;
}

body.dark-mode .close,
body.dark-mode .btn-close {
    color: #f7fafc !important;
    opacity: 0.8;
}

/* Footer */
body.dark-mode .footer {
    background-color: #2d3748 !important;
    border-top-color: #4a5568 !important;
}

/* Hero Section */
body.dark-mode .hero-section {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
}

/* Feature Cards */
body.dark-mode .feature-card {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.dark-mode .feature-card:hover {
    border-color: #ff922b !important;
}

body.dark-mode .icon-container {
    background-color: rgba(255, 146, 43, 0.1) !important;
}

/* Comments */
body.dark-mode .comment-form-wrapper {
    background-color: #374151 !important;
}

body.dark-mode .comment-card {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.dark-mode .comment-header {
    border-bottom-color: #4a5568 !important;
}

body.dark-mode .comment-username {
    color: #f7fafc !important;
}

body.dark-mode .comment-time {
    color: #a0aec0 !important;
}

body.dark-mode .comment-actions {
    border-top-color: #4a5568 !important;
}

body.dark-mode .comment-action-btn {
    color: #cbd5e0 !important;
}

body.dark-mode .comment-action-btn:hover {
    background-color: #374151 !important;
    color: #ff922b !important;
}

/* Board Specific */
body.dark-mode .post-item {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

body.dark-mode .post-item:hover {
    background-color: #374151 !important;
}

/* Bootstrap Background Classes Override */
body.dark-mode .bg-light {
    background-color: #374151 !important;
}

body.dark-mode .bg-white {
    background-color: #2d3748 !important;
}

body.dark-mode .border {
    border-color: #4a5568 !important;
}

/* Custom Scrollbar for Dark Mode */
body.dark-mode::-webkit-scrollbar {
    width: 12px;
}

body.dark-mode::-webkit-scrollbar-track {
    background: #1a202c;
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 6px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* Code Blocks */
body.dark-mode pre,
body.dark-mode code {
    background-color: #1a202c !important;
    color: #f8f8f2 !important;
}

/* Shadows */
body.dark-mode .shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .3) !important;
}

body.dark-mode .shadow {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3) !important;
}

body.dark-mode .shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3) !important;
}