/* BuddyMU Dark Mode Style Sheet Overrides */

.dark-mode {
    --bg-color: #0F172A;
    --card-bg: #1E293B;
    --text-color: #F8FAFC;
    --text-muted: #94A3B8;
    --border-color: #334155;
    --input-bg: #0F172A;
    --glass-bg: rgba(15, 23, 42, 0.75);
    --glass-border: rgba(255, 255, 255, 0.05);
}

/* Dark mode overrides for common HTML components */
.dark-mode body {
    color: var(--text-color);
}

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

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

.dark-mode .bg-white {
    background-color: var(--card-bg) !important;
}

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

.dark-mode .border-bottom {
    border-color: var(--border-color) !important;
}

/* Forms controls in Dark Mode */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.2);
}

.dark-mode .form-control::placeholder {
    color: #475569;
}

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

/* Dropdown menus */
.dark-mode .dropdown-menu {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

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

.dark-mode .dropdown-item:hover {
    background-color: var(--input-bg);
    color: var(--primary-light);
}

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

/* Custom components */
.dark-mode .custom-navbar {
    border-bottom: 1px solid var(--glass-border);
}

.dark-mode .btn-user {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .btn-user span {
    color: var(--text-color) !important;
}

.dark-mode .sidebar {
    background-color: var(--card-bg) !important;
}

.dark-mode .sidebar .nav-link {
    color: var(--text-color) !important;
}

.dark-mode .sidebar .nav-link.active {
    color: #FFFFFF !important;
}

.dark-mode .sidebar .nav-link:hover:not(.active) {
    background-color: var(--input-bg);
}

/* Leaderboard Rank items */
.dark-mode .rank-other {
    background-color: #334155;
    color: #94A3B8;
}

.dark-mode .table {
    --bs-table-color: var(--text-color);
    --bs-table-bg: var(--card-bg);
    --bs-table-border-color: var(--border-color);
}

.dark-mode .table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--text-color);
    --bs-table-bg-type: rgba(255, 255, 255, 0.02);
}

.dark-mode .table-hover>tbody>tr:hover>* {
    --bs-table-color-type: var(--text-color);
    --bs-table-bg-type: rgba(255, 255, 255, 0.05);
}

/* Modals */
.dark-mode .modal-content {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.dark-mode .modal-header {
    border-bottom: 1px solid var(--border-color);
}

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

.dark-mode .btn-close {
    filter: invert(1);
}

/* Accordions (FAQ) */
.dark-mode .accordion-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .accordion-button {
    background-color: var(--card-bg);
    color: var(--text-color);
    box-shadow: none;
}

.dark-mode .accordion-button:not(.collapsed) {
    background-color: rgba(11, 78, 162, 0.15);
    color: var(--primary-light);
}

.dark-mode .accordion-button::after {
    filter: invert(1);
}

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

/* List Groups */
.dark-mode .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Breadcrumbs */
.dark-mode .breadcrumb-item+.breadcrumb-item::before {
    color: var(--text-muted);
}

/* Page titles and badges */
.dark-mode .bg-light {
    background-color: var(--input-bg) !important;
}

.dark-mode .badge {
    background-color: rgba(11, 78, 162, 0.2);
    color: var(--primary-light);
}

/* Charts / Graph Container */
.dark-mode .chart-container {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}