/* ============================================================================
   DARK MODE
   ============================================================================ */

body.dark-mode {
    background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #171026 100%) !important;
    background-attachment: fixed !important;
    color: #f8fafc !important;
}

body.dark-mode .app-container,
body.dark-mode .page,
body.dark-mode .dashboard-container,
body.dark-mode .login-container {
    background: #0f172a !important;
}

/* CARDS & CONTAINERS */
body.dark-mode .login-card,
body.dark-mode .assignment-card,
body.dark-mode .class-card,
body.dark-mode .class-info-card,
body.dark-mode .stat-card,
body.dark-mode .badge-card,
body.dark-mode .audit-logs-section,
body.dark-mode .modal-content,
body.dark-mode .navbar {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .class-code {
    background: #0f172a !important;
    color: #c084fc !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* NAVBAR */
body.dark-mode .navbar-brand h2 {
    background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* TEXT */
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 {
    color: #f9fafb !important;
}

body.dark-mode .text-muted,
body.dark-mode small,
body.dark-mode .form-group small,
body.dark-mode .assignment-meta,
body.dark-mode .assignment-description,
body.dark-mode .class-info,
body.dark-mode .class-info-card .label,
body.dark-mode .stat-label {
    color: #94a3b8 !important;
}

/* FORMS */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #818cf8 !important;
    /* indigo-400 */
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2) !important;
}

body.dark-mode label {
    color: #d1d5db !important;
    /* gray-300 */
}

/* BUTTONS */
body.dark-mode .btn-secondary {
    background: #4b5563 !important;
    color: #f3f4f6 !important;
}

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

body.dark-mode .demo-account-btn {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

body.dark-mode .demo-account-btn:hover {
    background: #4b5563 !important;
    border-color: #818cf8 !important;
}

/* TABLES & LISTS */
body.dark-mode .audit-log-item {
    border-bottom-color: #374151 !important;
}

body.dark-mode .audit-log-action {
    color: #f9fafb !important;
}

body.dark-mode .audit-log-details,
body.dark-mode .audit-log-time {
    color: #9ca3af !important;
}

/* TABS */
body.dark-mode .teacher-tabs {
    border-bottom-color: #334155 !important;
}

body.dark-mode .tab-btn {
    color: #94a3b8 !important;
    background: transparent !important;
    border-color: transparent !important;
}

body.dark-mode .tab-btn:hover {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .tab-btn.active {
    color: #a78bfa !important;
    border-bottom-color: #a78bfa !important;
    background: rgba(167, 139, 250, 0.1) !important;
}

/* ALERTS & STATUS */
body.dark-mode .status-pending {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border-color: #b45309 !important;
}

body.dark-mode .status-submitted {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border-color: #1d4ed8 !important;
}

body.dark-mode .status-graded {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border-color: #047857 !important;
}

body.dark-mode .status-needs-retake {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border-color: #b91c1c !important;
}

/* ============================================================================
   BADGE SYSTEM (DARK MODE)
   ============================================================================ */

body.dark-mode .badge-card.badge-unlocked {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(31, 41, 55, 1) 100%) !important;
    border-color: #3b82f6 !important;
}

body.dark-mode .badge-card .badge-title {
    color: #f9fafb !important;
}

body.dark-mode .badge-card .badge-desc {
    color: #9ca3af !important;
}