body.dark-mode {
    --bg-color: #0f172a !important;
    --bg-main: #0f172a !important;
    --bg-body: #0f172a !important;
    --bg-card: #1e293b !important;
    --text-main: #f8fafc !important;
    --text-dark: #f8fafc !important;
    --text-muted: #94a3b8 !important;
    --border: #334155 !important;
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

body.dark-mode div.nav-links, body.dark-mode div.top-nav {
    background-color: var(--bg-card) !important;
}

body.dark-mode .card, body.dark-mode nav, body.dark-mode header, body.dark-mode .top-nav, 
body.dark-mode .stat-card, body.dark-mode .accordion-box, body.dark-mode .paper, 
body.dark-mode .mcq-card, body.dark-mode .ide-left, body.dark-mode .ide-right, 
body.dark-mode .ide-tabs, body.dark-mode .console-panel, body.dark-mode .console-header, 
body.dark-mode .tabs, body.dark-mode .editor-navbar {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

body.dark-mode .nav-link, body.dark-mode .nav-item {
    color: var(--text-muted) !important;
}
body.dark-mode .nav-link:hover, body.dark-mode .nav-item:hover {
    color: var(--text-main) !important;
    background-color: rgba(255,255,255,0.05) !important;
}

body.dark-mode .accordion-header {
    background-color: #1e293b !important;
    color: #fff !important;
}

body.dark-mode .accordion-body {
    background-color: #0f172a !important;
}

body.dark-mode input, body.dark-mode textarea {
   background-color: #0f172a !important;
   color: #fff !important;
   border-color: #334155 !important;
}

body.dark-mode .tab.active, body.dark-mode .filter-pill.active {
   background-color: #3b82f6 !important;
   color: #fff !important;
}

body.dark-mode .example-box, body.dark-mode .input-hint, body.dark-mode .alert-box {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Light mode overrides for originally dark pages */
body:not(.dark-mode) .dashboard-sidebar {
    background: #fff;
    color: #111;
}

body:not(.dark-mode) .chat-container {
    background: #fff;
    color: #111;
}

/* Utility Class */
.theme-toggle {
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.3s;
}
.theme-toggle:hover {
    transform: rotate(30deg);
}