/* --- DARK MODE CONFIGURATION (Cleaned) --- */

/* 1. Variables & Global Overrides */
body.dark-mode {
    /* Backgrounds */
    --bg-body: #0b1120;       /* Very dark navy */
    --white: #1e293b;         /* Slate blue/grey (Cards) */
    
    /* Text */
    --text-main: #f1f5f9;     /* Off-white */
    --text-muted: #94a3b8;    /* Muted grey */
    --brand-navy: #3b82f6;    /* Lighter blue for contrast */
    
    /* UI Elements */
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

/* 2. Navigation & Header */
body.dark-mode nav {
    background-color: rgba(15, 23, 42, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .logo-text {
    color: #ffffff;
}

body.dark-mode .nav-links a {
    color: #e2e8f0;
}

body.dark-mode .nav-links a:hover {
    color: var(--action-orange);
}

/* Force Hero Text to be White in Dark Mode */
body.dark-mode header h1, 
body.dark-mode header p {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 3. Inputs & Dropdowns */
body.dark-mode .nav-select,
body.dark-mode #courseSelect,
body.dark-mode #languageSelect,
body.dark-mode #mobileLangSelect,
body.dark-mode #mobileCourseSelect {
    background-color: #0f172a;
    border-color: #334155 !important;
    color: #f1f5f9;
    
    /* White Arrow SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f1f5f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
}

/* Input Focus State */
body.dark-mode .nav-select:focus,
body.dark-mode select:focus {
    border-color: var(--action-orange) !important;
    outline: none;
}

/* Input Hover State */
body.dark-mode .nav-select:hover,
body.dark-mode #courseSelect:hover,
body.dark-mode #languageSelect:hover {
    background-color: #1e293b; 
    border-color: var(--action-orange) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

/* 4. Chat Widget */
body.dark-mode .chat-window,
body.dark-mode .chat-input-area {
    background-color: #1e293b;
    border-color: #334155;
}

body.dark-mode #user-input {
    background-color: #0f172a;
    color: white;
    border-color: #334155;
}

body.dark-mode .message.bot {
    background-color: #334155;
    color: #f1f5f9;
}

/* 5. Footer */
body.dark-mode footer {
    background-color: #020617 !important;
    border-top: 1px solid #1e293b;
}

body.dark-mode footer h4 {
    color: #f1f5f9;
}

body.dark-mode .footer-links a {
    color: #94a3b8;
}

body.dark-mode .footer-links a:hover {
    color: var(--action-orange);
}

/* 6. Mobile Menu & Theme Toggle */
body.dark-mode .mobile-menu-toggle {
    color: #ffffff !important;
}

body.dark-mode .hamburger-icon span {
    background-color: #ffffff !important;
}

body.dark-mode .mobile-theme-row {
    border-bottom: 1px solid #334155 !important;
}

body.dark-mode .mobile-theme-row span {
    color: #e2e8f0 !important;
}

body.dark-mode .mobile-theme-row:active {
    background-color: rgba(255,255,255,0.05);
}

/* 7. User Profile (Desktop & Mobile) */
body.dark-mode .nav-avatar,
body.dark-mode .mobile-avatar,
body.dark-mode .mobile-avatar-icon,
body.dark-mode .camera-icon {
    border-color: #334155;
}

body.dark-mode .nav-avatar:hover {
    border-color: var(--action-orange);
}

body.dark-mode .profile-dropdown {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-top-color: var(--action-orange);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

body.dark-mode .user-name,
body.dark-mode .mobile-username {
    color: #f1f5f9;
}

body.dark-mode .user-email,
body.dark-mode .mobile-email {
    color: #94a3b8;
}

body.dark-mode .profile-dropdown hr,
body.dark-mode .mobile-divider {
    border-top-color: #334155;
}

body.dark-mode .profile-dropdown a {
    color: #e2e8f0;
}

body.dark-mode .profile-dropdown a:hover {
    background-color: #0f172a;
    color: var(--action-orange);
}

body.dark-mode .profile-dropdown .logout-link {
    color: #f87171;
}

body.dark-mode .profile-dropdown .logout-link:hover {
    background-color: rgba(248, 113, 113, 0.1);
}

body.dark-mode .camera-icon {
    background: #1e293b;
    color: #fff;
}