/* ========================================
   Comprehensive Dark Mode Theme
   For all pages in the application
   ======================================== */

/* CSS Variables for Dark Theme */
[data-theme="dark"] {
    --primary-color: #667eea;
    --primary-color-dark: #5a6fd6;
    --secondary-color: #764ba2;
    --accent-color: #f093fb;
    --background-color: #000000;
    --surface-color: #000000;
    --surface-elevated: #000000;
    --surface-hover: #1a1a1a;
    --chat-bg: #000000;
    --user-message-bg: transparent;
    --chat-user-bg: transparent;
    --bot-message-bg: transparent;
    --text-primary: #FFFFFF;
    --text-secondary: #B8B8B8;
    --text-muted: #808080;
    --bg-muted: rgba(0, 0, 0, 0.6);
    --border-color: #333333;
    --border-light: #222222;
    --shadow-color: rgba(0, 0, 0, 0.5);
}

/* Base Elements */
[data-theme="dark"] body {
    background: #000000 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] html {
    background: #000000 !important;
}

/* Navigation */
[data-theme="dark"] .nav-instance,
[data-theme="dark"] nav,
[data-theme="dark"] .navbar {
    background: #000000 !important;
    border-bottom-color: #222222 !important;
}

[data-theme="dark"] .nav-logo span,
[data-theme="dark"] .navbar-brand {
    color: #FFFFFF !important;
}

/* Main Layout */
[data-theme="dark"] .main-layout,
[data-theme="dark"] .main-content,
[data-theme="dark"] main,
[data-theme="dark"] .container {
    background: #000000 !important;
}

/* Panels */
[data-theme="dark"] .left-panel,
[data-theme="dark"] .right-panel,
[data-theme="dark"] .side-panel,
[data-theme="dark"] .conversation-panel,
[data-theme="dark"] .panel {
    background: #000000 !important;
    border-color: #222222 !important;
}

/* Subtle separator line between left panel and main content (ChatGPT style) */
[data-theme="dark"] .conversation-panel,
[data-theme="dark"] #conversationPanel {
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative;
}

/* Add a subtle gradient glow effect for depth */
[data-theme="dark"] .conversation-panel::after,
[data-theme="dark"] #conversationPanel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.02) 100%
    );
    pointer-events: none;
}

/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .session-card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .quick-action-card,
[data-theme="dark"] .agent-card,
[data-theme="dark"] .mini-quick-card {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .action-card:hover,
[data-theme="dark"] .session-card:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Chat Area */
[data-theme="dark"] .chat-container,
[data-theme="dark"] .chat-section,
[data-theme="dark"] .chat-area,
[data-theme="dark"] .chat-messages,
[data-theme="dark"] #chatArea,
[data-theme="dark"] #log {
    background: #000000 !important;
}

/* Messages */
[data-theme="dark"] .message.bot,
[data-theme="dark"] .bot-message {
    background: transparent !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .message-content {
    background: transparent !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .message.user,
[data-theme="dark"] .user-message {
    background: transparent !important;
    color: #FFFFFF !important;
}

/* Input Areas */
[data-theme="dark"] .input-container,
[data-theme="dark"] .chat-input-container,
[data-theme="dark"] .input-wrapper,
[data-theme="dark"] .message-input-container {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .message-input,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-control {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .message-input::placeholder {
    color: #808080 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: #667eea !important;
    outline-color: #667eea !important;
}

/* Buttons */
[data-theme="dark"] button,
[data-theme="dark"] .btn {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] button:hover,
[data-theme="dark"] .btn:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .send-button,
[data-theme="dark"] .form-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: #667eea !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .send-button:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%) !important;
}

/* Suggestion Cards */
[data-theme="dark"] .suggestion-card {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .suggestion-card:hover {
    background: #667eea !important;
    border-color: #667eea !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .suggestion-cards-container,
[data-theme="dark"] #suggestionCards {
    background: transparent !important;
}

/* Tables */
[data-theme="dark"] table {
    border-color: #333333 !important;
}

[data-theme="dark"] th {
    background: #000000 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

[data-theme="dark"] td {
    background: #000000 !important;
    color: #B8B8B8 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] tr:hover td {
    background: #1a1a1a !important;
}

[data-theme="dark"] tbody tr:nth-child(even) td {
    background: #0a0a0a !important;
}

/* Modals */
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .teams-modal-content {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-title {
    background: #000000 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .modal-body {
    background: #000000 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .modal-footer {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .user-dropdown {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .user-dropdown-item {
    color: #FFFFFF !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .user-dropdown-item:hover {
    background: #1a1a1a !important;
}

/* Toggle Buttons */
[data-theme="dark"] .mode-toggle-btn,
[data-theme="dark"] .teams-btn {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .mode-toggle-btn:hover,
[data-theme="dark"] .teams-btn:hover {
    background: #1a1a1a !important;
}

[data-theme="dark"] .toggle-switch {
    background: #333333 !important;
}

[data-theme="dark"] .toggle-switch.active {
    background: #667eea !important;
}

/* Headers and Text */
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #FFFFFF !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted {
    color: #B8B8B8 !important;
}

[data-theme="dark"] a {
    color: #8BB4F0 !important;
}

[data-theme="dark"] a:hover {
    color: #667eea !important;
}

/* Code Blocks */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: #000000 !important;
    color: #B8B8B8 !important;
    border-color: #333333 !important;
}

/* Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #000000 !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #333333 !important;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #444444 !important;
}

/* Sections */
[data-theme="dark"] .section,
[data-theme="dark"] .panel-section,
[data-theme="dark"] .collapsible-section {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .section-header {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .section-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .section-content {
    background: #000000 !important;
}

/* Left Navigation */
[data-theme="dark"] .left-nav,
[data-theme="dark"] .sidebar {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .left-nav .home-btn,
[data-theme="dark"] .left-nav .progress-btn,
[data-theme="dark"] .left-nav .category-card,
[data-theme="dark"] .left-nav .option-item,
[data-theme="dark"] .nav-item,
[data-theme="dark"] .sidebar-item {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .left-nav .home-btn:hover,
[data-theme="dark"] .left-nav .progress-btn:hover,
[data-theme="dark"] .left-nav .category-card:hover,
[data-theme="dark"] .left-nav .option-item:hover,
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .sidebar-item:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Category and Option Cards */
[data-theme="dark"] .category-card,
[data-theme="dark"] .option-item {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

/* Action Items */
[data-theme="dark"] .action-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .action-item:hover {
    background: #1a1a1a !important;
}

[data-theme="dark"] .action-title,
[data-theme="dark"] .action-description {
    color: #FFFFFF !important;
}

/* Badges and Tags */
[data-theme="dark"] .badge,
[data-theme="dark"] .tag {
    background: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .action-badge {
    background: #667eea !important;
    color: #FFFFFF !important;
}

/* Form Elements */
[data-theme="dark"] .form-container,
[data-theme="dark"] .form-group {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .form-label {
    color: #B8B8B8 !important;
}

/* Avatar Panel */
[data-theme="dark"] .avatar-chat-panel {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .avatar-chat-header {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .avatar-option {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .avatar-option:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .avatar-name {
    color: #FFFFFF !important;
}

/* Source Items */
[data-theme="dark"] .sources-container,
[data-theme="dark"] .sources-panel {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .source-item {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .source-item:hover {
    background: #1a1a1a !important;
}

/* Stats and Info */
[data-theme="dark"] .conversation-stats,
[data-theme="dark"] .stats-container {
    background: #000000 !important;
    border-color: #222222 !important;
    color: #B8B8B8 !important;
}

/* Hover Messages */
[data-theme="dark"] .hover-message {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

/* Focus Mode */
[data-theme="dark"] .focus-mode-container {
    background: #000000 !important;
}

[data-theme="dark"] .focus-mode-panel {
    background: #000000 !important;
    border-color: #222222 !important;
}

/* New Chat Button */
[data-theme="dark"] .new-chat-btn,
[data-theme="dark"] #newChatBtn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}

/* Dividers */
[data-theme="dark"] hr,
[data-theme="dark"] .divider {
    border-color: #333333 !important;
}

/* Alerts */
[data-theme="dark"] .alert {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .alert-success {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10B981 !important;
}

[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-error {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #EF4444 !important;
}

[data-theme="dark"] .alert-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: #F59E0B !important;
}

[data-theme="dark"] .alert-info {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: #3B82F6 !important;
}

/* Progress Bars */
[data-theme="dark"] .progress {
    background: #1a1a1a !important;
}

[data-theme="dark"] .progress-bar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Tooltips */
[data-theme="dark"] .tooltip,
[data-theme="dark"] .tooltip-inner {
    background: #000000 !important;
    color: #FFFFFF !important;
}

/* Loading States */
[data-theme="dark"] .loading,
[data-theme="dark"] .spinner-container {
    background: rgba(0, 0, 0, 0.9) !important;
}

/* Tabs */
[data-theme="dark"] .nav-tabs {
    border-color: #333333 !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

/* Page-specific elements that might have inline styles */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background: rgba(255, 255, 255"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"] {
    background: #000000 !important;
}

/* Assessment specific */
[data-theme="dark"] .assessment-container,
[data-theme="dark"] .assessment-card,
[data-theme="dark"] .question-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .assessment-header {
    background: #000000 !important;
}

[data-theme="dark"] .answer-option {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .answer-option:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Roleplay specific */
[data-theme="dark"] .roleplay-container,
[data-theme="dark"] .scenario-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .roleplay-header {
    background: #000000 !important;
}

/* Scoring specific */
[data-theme="dark"] .scoring-container,
[data-theme="dark"] .score-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Knowledge base specific */
[data-theme="dark"] .kb-container,
[data-theme="dark"] .kb-card,
[data-theme="dark"] .kb-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Team management specific */
[data-theme="dark"] .team-container,
[data-theme="dark"] .team-card,
[data-theme="dark"] .member-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Diagram specific */
[data-theme="dark"] .diagram-container {
    background: #000000 !important;
}

/* Report specific */
[data-theme="dark"] .report-container,
[data-theme="dark"] .report-card,
[data-theme="dark"] .report-section {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Content recommendation specific */
[data-theme="dark"] .content-container,
[data-theme="dark"] .content-card,
[data-theme="dark"] .video-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Certificate specific */
[data-theme="dark"] .certificate-container,
[data-theme="dark"] .certificate-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Admin view specific */
[data-theme="dark"] .admin-container,
[data-theme="dark"] .admin-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* User profile specific */
[data-theme="dark"] .profile-container,
[data-theme="dark"] .profile-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* ========================================
   UI.html Specific Dark Mode Overrides
   ======================================== */

/* Root CSS Variable Overrides for Dark Theme */
[data-theme="dark"] {
    --surface-color: #000000 !important;
    --surface-elevated: #000000 !important;
    --background-color: #000000 !important;
    --chat-bot-bg: transparent !important;
    --border-light: #222222 !important;
    --text-primary: #FFFFFF !important;
    --text-secondary: #B8B8B8 !important;
}

/* Quick Action Cards with inline styles */
[data-theme="dark"] .quick-action-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .quick-action-card:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .quick-action-title,
[data-theme="dark"] .quick-action-description {
    color: #FFFFFF !important;
}

/* Mini Quick Cards */
[data-theme="dark"] .mini-quick-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .mini-quick-card:hover {
    background: #1a1a1a !important;
}

[data-theme="dark"] .mini-quick-cards-container {
    background: #000000 !important;
    border-color: #222222 !important;
}

/* Conversation Panel */
[data-theme="dark"] .conversation-panel {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .conversation-header {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .conversation-content {
    background: #000000 !important;
}

[data-theme="dark"] .conversation-list {
    background: #000000 !important;
}

[data-theme="dark"] .conversation-action-strip {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .conversation-action-strip:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Left Panel Edge Button */
[data-theme="dark"] .left-panel-edge-btn,
[data-theme="dark"] #leftPanelEdgeCloseBtn,
[data-theme="dark"] #leftPanelEdgeOpenerBtn {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .left-panel-edge-btn:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Chat Section */
[data-theme="dark"] .chat-section {
    background: #000000 !important;
}

[data-theme="dark"] .chat-header {
    background: #000000 !important;
    border-color: #222222 !important;
}

/* Right Panel / Sources Panel */
[data-theme="dark"] .right-panel,
[data-theme="dark"] .sources-panel {
    background: #000000 !important;
    border-color: #222222 !important;
}

/* Welcome Screen */
[data-theme="dark"] .welcome-screen,
[data-theme="dark"] .welcome-container {
    background: #000000 !important;
}

[data-theme="dark"] .welcome-header,
[data-theme="dark"] .welcome-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .welcome-subtitle {
    color: #B8B8B8 !important;
}

/* Session Cards */
[data-theme="dark"] .session-card,
[data-theme="dark"] .new-conversation-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .session-card:hover,
[data-theme="dark"] .new-conversation-card:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .session-title,
[data-theme="dark"] .session-preview {
    color: #FFFFFF !important;
}

[data-theme="dark"] .session-time,
[data-theme="dark"] .session-meta {
    color: #808080 !important;
}

/* Category Cards and Options */
[data-theme="dark"] .category-section {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .category-header {
    background: #000000 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .options-list,
[data-theme="dark"] .sub-options {
    background: #000000 !important;
}

/* Strip elements */
[data-theme="dark"] .strip-content,
[data-theme="dark"] .strip-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .strip-subtitle {
    color: #B8B8B8 !important;
}

/* Message Bubbles - user messages only, bot messages are transparent */
[data-theme="dark"] .user-message .message-bubble {
    background: #2a2a2a !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .bot-message-bubble {
    background: transparent !important;
    color: #FFFFFF !important;
}

/* Action Icons and Badges */
[data-theme="dark"] .action-icon {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .action-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .action-description {
    color: #B8B8B8 !important;
}

/* Teams Modal */
[data-theme="dark"] .teams-modal,
[data-theme="dark"] .teams-modal-content {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .teams-modal-header {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .teams-list {
    background: #000000 !important;
}

[data-theme="dark"] .team-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .team-item:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .team-name {
    color: #FFFFFF !important;
}

[data-theme="dark"] .teams-empty {
    background: #000000 !important;
    color: #B8B8B8 !important;
}

/* Avatar Chat Panel */
[data-theme="dark"] .avatar-chat-panel,
[data-theme="dark"] .avatar-chat-area {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .avatar-video-container {
    background: #000000 !important;
}

[data-theme="dark"] .avatar-status {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .avatar-interrupt-button {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

/* Voice Visualizer */
[data-theme="dark"] .voice-visualizer-container {
    background: #000000 !important;
    border-color: #222222 !important;
}

/* Input Container */
[data-theme="dark"] .message-input-container,
[data-theme="dark"] .input-area {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .message-input {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .message-input:focus {
    border-color: #667eea !important;
}

/* Suggestion Cards Container */
[data-theme="dark"] .suggestion-cards-container {
    background: transparent !important;
}

/* Toggle and Settings Buttons */
[data-theme="dark"] .toggle-slider {
    background: #FFFFFF !important;
}

/* Collapsible Sections */
[data-theme="dark"] .collapsible-header {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .collapsible-content {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Override any remaining white inline backgrounds */
[data-theme="dark"] [style*="background: rgba(255, 255, 255"],
[data-theme="dark"] [style*="background:rgba(255, 255, 255"],
[data-theme="dark"] [style*="background-color: rgba(255, 255, 255"],
[data-theme="dark"] [style*="background-color:rgba(255, 255, 255"] {
    background: #000000 !important;
}

[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"] {
    background: #000000 !important;
}

[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:white"] {
    background-color: #000000 !important;
}

/* Override color: #000 or black text */
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:black"],
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#0f172a"] {
    color: #FFFFFF !important;
}

/* Home and Progress buttons */
[data-theme="dark"] .home-btn,
[data-theme="dark"] .progress-btn {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .home-btn:hover,
[data-theme="dark"] .progress-btn:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Search and Filter Elements */
[data-theme="dark"] .search-container,
[data-theme="dark"] .search-input,
[data-theme="dark"] .filter-container {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

/* Popover and Floating Elements */
[data-theme="dark"] .popover,
[data-theme="dark"] .floating-panel {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* List Items */
[data-theme="dark"] .list-item,
[data-theme="dark"] .item-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .list-item:hover,
[data-theme="dark"] .item-card:hover {
    background: #1a1a1a !important;
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb-item {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .breadcrumb-item.active {
    color: #FFFFFF !important;
}

/* Status Indicators */
[data-theme="dark"] .status-indicator {
    border-color: #000000 !important;
}

/* Empty States */
[data-theme="dark"] .empty-state,
[data-theme="dark"] .no-data {
    background: #000000 !important;
    color: #808080 !important;
}

/* Hamburger Menu Icon */
[data-theme="dark"] .hamburger-icon span {
    background: #FFFFFF !important;
}

/* Overflow menu */
[data-theme="dark"] .overflow-menu,
[data-theme="dark"] .context-menu {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .overflow-menu-item,
[data-theme="dark"] .context-menu-item {
    color: #FFFFFF !important;
}

[data-theme="dark"] .overflow-menu-item:hover,
[data-theme="dark"] .context-menu-item:hover {
    background: #1a1a1a !important;
}

/* STT Toast */
[data-theme="dark"] .stt-toast {
    background: rgba(0, 0, 0, 0.95) !important;
    color: #FFFFFF !important;
}

/* Focus ring */
[data-theme="dark"] .focus-ring:focus {
    outline-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3) !important;
}

/* Misc containers that might still be white */
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .page-content,
[data-theme="dark"] .wrapper {
    background: #000000 !important;
}

/* Chat typing indicator - transparent */
[data-theme="dark"] .typing-indicator {
    background: transparent !important;
    background-color: transparent !important;
}

[data-theme="dark"] .typing-indicator span {
    background: #667eea !important;
}

/* Hover message tooltip */
[data-theme="dark"] .hover-message-tooltip {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

/* Voice controls */
[data-theme="dark"] .voice-btn,
[data-theme="dark"] .mic-btn {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .voice-btn:hover,
[data-theme="dark"] .mic-btn:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Attachments area */
[data-theme="dark"] .attachments-container,
[data-theme="dark"] .attachment-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Quick Actions Grid */
[data-theme="dark"] .quick-actions-grid {
    background: transparent !important;
}

/* Panel headers */
[data-theme="dark"] .panel-header {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

/* Chip / Tag elements */
[data-theme="dark"] .chip,
[data-theme="dark"] .tag-item {
    background: #333333 !important;
    color: #FFFFFF !important;
}

/* Rating stars */
[data-theme="dark"] .rating-star {
    color: #808080 !important;
}

[data-theme="dark"] .rating-star.active {
    color: #FFD700 !important;
}

/* Markdown rendered content */
[data-theme="dark"] .markdown-body,
[data-theme="dark"] .rendered-markdown {
    background: transparent !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .markdown-body h1,
[data-theme="dark"] .markdown-body h2,
[data-theme="dark"] .markdown-body h3,
[data-theme="dark"] .markdown-body h4,
[data-theme="dark"] .markdown-body h5,
[data-theme="dark"] .markdown-body h6 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .markdown-body p,
[data-theme="dark"] .markdown-body li {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .markdown-body blockquote {
    background: #000000 !important;
    border-left-color: #667eea !important;
    color: #B8B8B8 !important;
}

/* Mermaid diagrams */
[data-theme="dark"] .mermaid {
    background: #000000 !important;
}

/* Icons that need color adjustment */
[data-theme="dark"] .icon-wrapper,
[data-theme="dark"] .icon-container {
    color: #FFFFFF !important;
}

/* Ensure SVG icons are visible */
[data-theme="dark"] svg {
    fill: currentColor;
}

[data-theme="dark"] svg path {
    fill: currentColor;
}

/* ========================================
   UI Assessment CSS Dark Mode Overrides
   ======================================== */

/* Assessment containers */
[data-theme="dark"] .assessment-container,
[data-theme="dark"] .assessment-wrapper,
[data-theme="dark"] .quiz-container {
    background: #000000 !important;
}

[data-theme="dark"] .assessment-sidebar,
[data-theme="dark"] .sidebar-container {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .question-panel,
[data-theme="dark"] .question-container,
[data-theme="dark"] .question-box {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .answer-options,
[data-theme="dark"] .option-container {
    background: #000000 !important;
}

[data-theme="dark"] .answer-option,
[data-theme="dark"] .option-item,
[data-theme="dark"] .choice-option {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .answer-option:hover,
[data-theme="dark"] .option-item:hover,
[data-theme="dark"] .choice-option:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .answer-option.selected,
[data-theme="dark"] .option-item.selected {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Assessment navigation */
[data-theme="dark"] .assessment-nav,
[data-theme="dark"] .question-nav {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .nav-item,
[data-theme="dark"] .question-nav-item {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .question-nav-item:hover {
    background: #1a1a1a !important;
}

[data-theme="dark"] .nav-item.active,
[data-theme="dark"] .question-nav-item.active {
    background: #667eea !important;
    color: #FFFFFF !important;
}

/* Assessment results */
[data-theme="dark"] .results-container,
[data-theme="dark"] .score-container {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .result-card,
[data-theme="dark"] .score-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* ========================================
   Focus Mode CSS Dark Mode Overrides
   ======================================== */

/* Focus mode variables override */
[data-theme="dark"] {
    --chat-bg: #000000 !important;
    --soft-white: #FFFFFF !important;
}

/* Focus mode containers */
[data-theme="dark"] .focus-container,
[data-theme="dark"] .focus-mode-wrapper {
    background: #000000 !important;
}

[data-theme="dark"] .executive-dashboard {
    background: #000000 !important;
}

[data-theme="dark"] .dashboard-header {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .dashboard-content {
    background: #000000 !important;
}

/* Focus mode panels */
[data-theme="dark"] .ongoing-courses-panel,
[data-theme="dark"] .plan-path-panel {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .courses-header,
[data-theme="dark"] .section-header {
    background: #000000 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .courses-content,
[data-theme="dark"] .section-content {
    background: #000000 !important;
}

/* Course items */
[data-theme="dark"] .course-item,
[data-theme="dark"] .course-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .course-item:hover,
[data-theme="dark"] .course-card:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Plan content */
[data-theme="dark"] .plan-content {
    background: #000000 !important;
}

[data-theme="dark"] .plan-stats {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .stat-item {
    background: #000000 !important;
}

[data-theme="dark"] .plan-features,
[data-theme="dark"] .plan-features-benefits-container {
    background: transparent !important;
}

[data-theme="dark"] .feature {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

/* Focus mode buttons */
[data-theme="dark"] .back-button {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .back-button:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Loading containers */
[data-theme="dark"] .loading-container {
    background: #000000 !important;
}

[data-theme="dark"] .loading-text,
[data-theme="dark"] .loading-subtext {
    color: #B8B8B8 !important;
}

/* ========================================
   Enhanced Links CSS Dark Mode Overrides
   ======================================== */

[data-theme="dark"] .enhanced-link,
[data-theme="dark"] .link-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .enhanced-link:hover,
[data-theme="dark"] .link-card:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .link-preview,
[data-theme="dark"] .link-tooltip {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

/* ========================================
   Additional Global Overrides
   ======================================== */

/* Override any linear-gradient backgrounds with white */
[data-theme="dark"] [style*="linear-gradient"][style*="#fff"],
[data-theme="dark"] [style*="linear-gradient"][style*="white"] {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
}

/* Generic white background overrides */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .background-white {
    background: #000000 !important;
}

/* Gray backgrounds that need darkening */
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 {
    background: #000000 !important;
}

[data-theme="dark"] .bg-gray-200 {
    background: #000000 !important;
}

/* Tailwind specific overrides */
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600 {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
    border-color: #333333 !important;
}

/* Shadow adjustments for dark mode */
[data-theme="dark"] [class*="shadow"] {
    --tw-shadow-color: rgba(0, 0, 0, 0.5) !important;
}

/* Ring color for focus states */
[data-theme="dark"] .ring-primary,
[data-theme="dark"] .focus\:ring-primary:focus {
    --tw-ring-color: #667eea !important;
}

/* ========================================
   UI.html Embedded Styles Dark Mode Fixes
   ======================================== */

/* Mini quick cards - embedded in UI.html <style> */
[data-theme="dark"] .mini-quick-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .mini-quick-card:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .mini-quick-card .quick-action-content h4 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .mini-quick-card .quick-action-content p {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .mini-quick-cards-container {
    background: #000000 !important;
    border-color: #222222 !important;
}

/* Left navigation items */
[data-theme="dark"] .left-nav .home-btn,
[data-theme="dark"] .left-nav .progress-btn,
[data-theme="dark"] .left-nav .category-card,
[data-theme="dark"] .left-nav .option-item {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .left-nav .home-btn:hover,
[data-theme="dark"] .left-nav .progress-btn:hover,
[data-theme="dark"] .left-nav .category-card:hover,
[data-theme="dark"] .left-nav .option-item:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
    color: #667eea !important;
}

[data-theme="dark"] .left-nav .view-header .view-title,
[data-theme="dark"] #leftSidebarProfileName {
    color: #FFFFFF !important;
}

/* Hover message bubble */
[data-theme="dark"] .hover-message {
    background: #2a2a2a !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .hover-message::after {
    background: #2a2a2a !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .hover-message .hover-text {
    color: #FFFFFF !important;
}

/* Chat input pill */
[data-theme="dark"] {
    --chat-pill-bg: #000000 !important;
    --chat-pill-border-color: #333333 !important;
}

[data-theme="dark"] .chat-input {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .message-input {
    color: #FFFFFF !important;
    background: transparent !important;
}

[data-theme="dark"] .message-input::placeholder {
    color: #808080 !important;
}

/* Code blocks in messages */
[data-theme="dark"] .message-content pre.code-block {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .message-content code.inline-code {
    background: #1a1a1a !important;
    color: #B8B8B8 !important;
}

/* Toggle switch/slider */
[data-theme="dark"] .toggle-slider {
    background: #FFFFFF !important;
}

/* Avatar interrupt button - already has gradient, just ensure dark mode compatibility */
[data-theme="dark"] .avatar-interrupt-button {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* STT cancel chip */
[data-theme="dark"] .stt-cancel-chip {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

/* Conversation stats and list */
[data-theme="dark"] .conversation-stats {
    background: #000000 !important;
    border-color: #222222 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .conversation-list {
    background: #000000 !important;
}

/* Left panel edge buttons with inline styles */
[data-theme="dark"] #leftPanelEdgeCloseBtn,
[data-theme="dark"] #leftPanelEdgeOpenerBtn,
[data-theme="dark"] .left-panel-edge-btn {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}

/* New conversation card/button */
[data-theme="dark"] .new-conversation-card,
[data-theme="dark"] #newConversationBtn {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .new-conversation-card:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Session cards in conversation list */
[data-theme="dark"] .session-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .session-card:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .session-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .session-preview,
[data-theme="dark"] .session-time {
    color: #808080 !important;
}

/* User welcome/dropdown in nav */
[data-theme="dark"] .user-welcome {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .user-welcome:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .welcome-text {
    color: #FFFFFF !important;
}

[data-theme="dark"] .user-dropdown {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .user-dropdown-item {
    color: #FFFFFF !important;
    border-color: #222222 !important;
    background: transparent !important;
}

[data-theme="dark"] .user-dropdown-item:hover {
    background: #1a1a1a !important;
}

/* Navigation instance */
[data-theme="dark"] .nav-instance {
    background: #000000 !important;
    border-color: #222222 !important;
}

/* Teams button */
[data-theme="dark"] .teams-btn {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .teams-btn:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
    color: #667eea !important;
}

/* Teams modal */
[data-theme="dark"] .teams-modal {
    background: rgba(0, 0, 0, 0.9) !important;
}

[data-theme="dark"] .teams-modal-content {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .teams-modal-header {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .teams-modal-header h3 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .teams-list {
    background: #000000 !important;
}

[data-theme="dark"] .team-item {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .team-item:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .team-name {
    color: #FFFFFF !important;
}

[data-theme="dark"] .team-description,
[data-theme="dark"] .team-members {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .teams-empty {
    background: #000000 !important;
    color: #808080 !important;
}

/* Mode toggle button */
[data-theme="dark"] .mode-toggle-btn {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .mode-toggle-btn:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .mode-label {
    color: #FFFFFF !important;
}

[data-theme="dark"] .toggle-switch {
    background: #333333 !important;
}

[data-theme="dark"] .toggle-switch.active {
    background: #667eea !important;
}

/* Chat section background */
[data-theme="dark"] .chat-section {
    background: #000000 !important;
}

/* Welcome screen */
[data-theme="dark"] .welcome-screen,
[data-theme="dark"] #welcomeScreen {
    background: #000000 !important;
}

[data-theme="dark"] .welcome-header h1,
[data-theme="dark"] .welcome-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .welcome-subtitle {
    color: #B8B8B8 !important;
}

/* Quick actions */
[data-theme="dark"] .quick-actions-grid,
[data-theme="dark"] #quickActionsGrid {
    background: transparent !important;
}

[data-theme="dark"] .quick-action-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .quick-action-card:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .quick-action-content h4,
[data-theme="dark"] .quick-action-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .quick-action-content p,
[data-theme="dark"] .quick-action-description {
    color: #B8B8B8 !important;
}

/* Suggestion cards */
[data-theme="dark"] .suggestion-card {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .suggestion-card:hover {
    background: #667eea !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .suggestion-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .suggestion-description {
    color: #B8B8B8 !important;
}

/* Avatar chat panel */
[data-theme="dark"] .avatar-chat-panel,
[data-theme="dark"] #avatarChatPanel {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .avatar-chat-header {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .avatar-chat-header h3 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .avatar-chat-area,
[data-theme="dark"] #avatarChatArea {
    background: #000000 !important;
}

[data-theme="dark"] .avatar-video-container {
    background: #000000 !important;
}

[data-theme="dark"] .avatar-status {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .avatar-status-indicator {
    border-color: #000000 !important;
}

[data-theme="dark"] #avatarStatusText {
    color: #B8B8B8 !important;
}

/* Sources panel */
[data-theme="dark"] .sources-panel,
[data-theme="dark"] #sourcesPanel {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .sources-header {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .source-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .source-item:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .source-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .source-url,
[data-theme="dark"] .source-description {
    color: #808080 !important;
}

/* Right panel */
[data-theme="dark"] .right-panel {
    background: #000000 !important;
    border-color: #222222 !important;
}

/* Main layout background */
[data-theme="dark"] .main-layout,
[data-theme="dark"] #mainLayout {
    background: #000000 !important;
}

/* Conversation toggle button */
[data-theme="dark"] .conversation-toggle,
[data-theme="dark"] .conversation-toggle-hamburger {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .conversation-toggle:hover,
[data-theme="dark"] .conversation-toggle-hamburger:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Hamburger icon lines */
[data-theme="dark"] .hamburger-icon span {
    background: #FFFFFF !important;
}

/* Conversation header */
[data-theme="dark"] .conversation-header {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .conversation-header h2 {
    color: #FFFFFF !important;
}

/* Conversation action strips */
[data-theme="dark"] .conversation-action-strip {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .conversation-action-strip:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .strip-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .strip-subtitle {
    color: #B8B8B8 !important;
}

/* Category sections */
[data-theme="dark"] .category-section {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .category-header {
    background: #000000 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .category-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .options-list,
[data-theme="dark"] .sub-options {
    background: #000000 !important;
}

/* Action items */
[data-theme="dark"] .action-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .action-item:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .action-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .action-description {
    color: #B8B8B8 !important;
}

/* Bot/user messages */
[data-theme="dark"] .message.bot,
[data-theme="dark"] .message-bot,
[data-theme="dark"] .bot-message {
    background: transparent !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .message.user,
[data-theme="dark"] .message-user,
[data-theme="dark"] .user-message {
    background: transparent !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .message-content {
    color: #FFFFFF !important;
}

[data-theme="dark"] .message-content p {
    color: #FFFFFF !important;
}

[data-theme="dark"] .message-content li {
    color: #B8B8B8 !important;
}

/* ========================================
   BOT MESSAGE - TRANSPARENT BACKGROUND
   ======================================== */
[data-theme="dark"] .bot-message,
[data-theme="dark"] .bot-message div,
[data-theme="dark"] .bot-message .message-bubble,
[data-theme="dark"] .bot-message .message-content,
[data-theme="dark"] .bot-message .message-text,
[data-theme="dark"] .bot-message .message-body,
[data-theme="dark"] .bot-message .message-wrapper,
[data-theme="dark"] .bot-message .content-wrapper,
[data-theme="dark"] .bot-message .text-content,
[data-theme="dark"] .bot-message .response-content,
[data-theme="dark"] .bot-message .bot-response,
[data-theme="dark"] .bot-message .ai-response,
[data-theme="dark"] .message.bot-message,
[data-theme="dark"] .message.bot-message div,
[data-theme="dark"] .message.bot-message .message-bubble,
[data-theme="dark"] .message.bot-message .message-content,
[data-theme="dark"] .message.bot-message > div,
[data-theme="dark"] .message.bot-message > div > div,
[data-theme="dark"] .message.bot-message div div,
[data-theme="dark"] .message.bot,
[data-theme="dark"] .message.bot div,
[data-theme="dark"] .message.bot .message-bubble,
[data-theme="dark"] .message.bot .message-content {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* Bot message bubble specifically - transparent */
[data-theme="dark"] .bot-message .message-bubble,
[data-theme="dark"] .message.bot-message .message-bubble,
[data-theme="dark"] .message.bot .message-bubble {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
}

/* Bot message content specifically */
[data-theme="dark"] .bot-message .message-content,
[data-theme="dark"] .message.bot-message .message-content,
[data-theme="dark"] .message.bot .message-content {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* ========================================
   USER MESSAGE - ALL NESTED DIVS DARK
   ======================================== */
/* User message - container transparent, only bubble has background */
[data-theme="dark"] .user-message,
[data-theme="dark"] .message.user-message,
[data-theme="dark"] .message.user {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* User message bubble - grey background */
[data-theme="dark"] .user-message .message-bubble,
[data-theme="dark"] .message.user-message .message-bubble,
[data-theme="dark"] .message.user .message-bubble {
    background: #2a2a2a !important;
    background-color: #2a2a2a !important;
    color: #FFFFFF !important;
}

/* User message content - transparent to show bubble */
[data-theme="dark"] .user-message .message-content,
[data-theme="dark"] .user-message .message-text,
[data-theme="dark"] .message.user-message .message-content,
[data-theme="dark"] .message.user .message-content {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* User message timestamp - transparent */
[data-theme="dark"] .user-message .message-timestamp,
[data-theme="dark"] .message.user-message .message-timestamp,
[data-theme="dark"] .message.user .message-timestamp {
    background: transparent !important;
    background-color: transparent !important;
    color: #B8B8B8 !important;
}

/* User message bubble specifically */
[data-theme="dark"] .user-message .message-bubble,
[data-theme="dark"] .message.user-message .message-bubble,
[data-theme="dark"] .message.user .message-bubble {
    background: #2a2a2a !important;
    border-color: #404040 !important;
    color: #FFFFFF !important;
}

/* User message content specifically */
[data-theme="dark"] .user-message .message-content,
[data-theme="dark"] .message.user-message .message-content,
[data-theme="dark"] .message.user .message-content {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* Message timestamp */
[data-theme="dark"] .message-time,
[data-theme="dark"] .message-timestamp {
    color: #808080 !important;
}

/* Typing indicator - transparent */
[data-theme="dark"] .typing-indicator {
    background: transparent !important;
    background-color: transparent !important;
}

[data-theme="dark"] .typing-indicator span {
    background: #667eea !important;
}

/* Send button - white icon */
[data-theme="dark"] .send-button {
    color: #FFFFFF !important;
}

[data-theme="dark"] .send-button i,
[data-theme="dark"] .send-button .fa-paper-plane {
    color: #FFFFFF !important;
}

[data-theme="dark"] .send-button:hover {
    color: #B8B8B8 !important;
}

/* Microphone button */
[data-theme="dark"] .microphone-button {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .microphone-button:hover {
    color: #667eea !important;
}

/* Plus menu button */
[data-theme="dark"] .plus-menu-button {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .plus-menu-button:hover {
    color: #667eea !important;
}

/* Any remaining var() with fallback white values */
[data-theme="dark"] [style*="var(--surface-color, #ffffff)"],
[data-theme="dark"] [style*="var(--surface-color,#ffffff)"],
[data-theme="dark"] [style*="var(--surface-elevated, #ffffff)"],
[data-theme="dark"] [style*="var(--surface-elevated,#ffffff)"] {
    background: #000000 !important;
}

/* Override text colors with fallback dark values */
[data-theme="dark"] [style*="var(--text-primary, #1f2937)"],
[data-theme="dark"] [style*="var(--dark, #1f2937)"] {
    color: #FFFFFF !important;
}

/* Icon wrappers with gradient backgrounds - keep as is, they look good in dark mode */

/* General override for any remaining white backgrounds in the document */
[data-theme="dark"] [style*="#ffffff"],
[data-theme="dark"] [style*="#fff;"],
[data-theme="dark"] [style*="white;"] {
    background-color: #000000 !important;
}

/* ========================================
   ui-main.css Specific Dark Mode Overrides
   ======================================== */

/* Session cards in conversation list */
[data-theme="dark"] .conversation-list .session-card {
    background: #000000 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .conversation-list .session-card:hover {
    background: #1a1a1a !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25) !important;
}

[data-theme="dark"] .conversation-list .session-card.active {
    background: #1a1a1a !important;
}

/* Plus menu */
[data-theme="dark"] .plus-menu {
    background: #000000 !important;
    border-color: #333333 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .plus-menu-item {
    color: #FFFFFF !important;
}

[data-theme="dark"] .plus-menu-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%) !important;
}

/* Video modal */
[data-theme="dark"] .video-modal-content {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .video-modal-header {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .video-modal-body {
    background: #000000 !important;
    color: #B8B8B8 !important;
}

/* File input and attachment areas */
[data-theme="dark"] .file-input-container,
[data-theme="dark"] .attachment-preview {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Session content text */
[data-theme="dark"] .session-card .session-content {
    color: #FFFFFF !important;
}

[data-theme="dark"] .session-card .session-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .session-card .session-preview {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .session-card .session-time {
    color: #808080 !important;
}

/* Action strips */
[data-theme="dark"] .conversation-action-strip {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .conversation-action-strip:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

/* Strip icon */
[data-theme="dark"] .strip-icon {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Agent panel */
[data-theme="dark"] .agent-panel {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .agent-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .agent-card:hover {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .agent-name {
    color: #FFFFFF !important;
}

[data-theme="dark"] .agent-description {
    color: #B8B8B8 !important;
}

/* Message action buttons */
[data-theme="dark"] .message-actions button {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .message-actions button:hover {
    background: #333333 !important;
    color: #FFFFFF !important;
}

/* Code block dark mode */
[data-theme="dark"] .code-block,
[data-theme="dark"] pre code {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .code-block-header {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .copy-button {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .copy-button:hover {
    background: #333333 !important;
    color: #FFFFFF !important;
}

/* New conversation card */
[data-theme="dark"] .new-conversation-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(102, 126, 234, 0.08) 100%) !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .new-conversation-card:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(102, 126, 234, 0.15) 100%) !important;
}

/* Streaming indicator */
[data-theme="dark"] .streaming-indicator {
    background: #2a2a2a !important;
}

/* Toast notifications */
[data-theme="dark"] .toast,
[data-theme="dark"] .notification {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

/* Search container */
[data-theme="dark"] .search-container {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .search-input {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .search-input::placeholder {
    color: #808080 !important;
}

/* Dropdown and select elements */
[data-theme="dark"] .dropdown-container,
[data-theme="dark"] .select-wrapper {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .dropdown-option,
[data-theme="dark"] option {
    background: #000000 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .dropdown-option:hover,
[data-theme="dark"] option:hover {
    background: #1a1a1a !important;
}

/* Ensure all remaining rgba(255,255,255) backgrounds are handled */
[data-theme="dark"] [style*="rgba(255, 255, 255, 0.6)"],
[data-theme="dark"] [style*="rgba(255, 255, 255, 0.8)"],
[data-theme="dark"] [style*="rgba(255, 255, 255, 0.9)"],
[data-theme="dark"] [style*="rgba(255,255,255,0.6)"],
[data-theme="dark"] [style*="rgba(255,255,255,0.8)"],
[data-theme="dark"] [style*="rgba(255,255,255,0.9)"] {
    background: #000000 !important;
}

/* ========================================
   Admin View Page Dark Mode
   ======================================== */

[data-theme="dark"] .admin-container,
[data-theme="dark"] .admin-content,
[data-theme="dark"] .admin-main {
    background: #000000 !important;
}

[data-theme="dark"] .admin-sidebar {
    background: #000000 !important;
    border-color: #222222 !important;
}

[data-theme="dark"] .admin-card,
[data-theme="dark"] .admin-panel {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .course-card,
[data-theme="dark"] .assignment-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .admin-card:hover,
[data-theme="dark"] .course-card:hover {
    background: #333333 !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .course-title,
[data-theme="dark"] .assignment-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .course-description,
[data-theme="dark"] .assignment-description {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .user-card,
[data-theme="dark"] .member-list-item,
[data-theme="dark"] .learner-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .user-card:hover,
[data-theme="dark"] .learner-card:hover {
    background: #333333 !important;
}

[data-theme="dark"] .user-name,
[data-theme="dark"] .learner-name {
    color: #FFFFFF !important;
}

[data-theme="dark"] .user-email,
[data-theme="dark"] .learner-email {
    color: #808080 !important;
}

[data-theme="dark"] .filter-section,
[data-theme="dark"] .search-section {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .filter-chip {
    background: #333333 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .filter-chip:hover {
    background: #333333 !important;
}

[data-theme="dark"] .clear-all-chip {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

[data-theme="dark"] .progress-table,
[data-theme="dark"] .data-table {
    background: #000000 !important;
}

[data-theme="dark"] .progress-table th,
[data-theme="dark"] .data-table th {
    background: #000000 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .progress-table td,
[data-theme="dark"] .data-table td {
    background: #000000 !important;
    color: #B8B8B8 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .progress-table tr:hover td,
[data-theme="dark"] .data-table tr:hover td {
    background: #000000 !important;
}

/* ========================================
   Team Details / Manage Organization Dark Mode
   ======================================== */

[data-theme="dark"] .team-container,
[data-theme="dark"] .organization-container {
    background: #000000 !important;
}

[data-theme="dark"] .team-header,
[data-theme="dark"] .org-header {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .team-info-card,
[data-theme="dark"] .org-info-card,
[data-theme="dark"] .stats-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .member-card,
[data-theme="dark"] .team-member {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .member-card:hover,
[data-theme="dark"] .team-member:hover {
    background: #333333 !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .member-name {
    color: #FFFFFF !important;
}

[data-theme="dark"] .member-role,
[data-theme="dark"] .member-email {
    color: #808080 !important;
}

[data-theme="dark"] .invite-section,
[data-theme="dark"] .add-member-section {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .invite-form input,
[data-theme="dark"] .invite-form select {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .activity-list,
[data-theme="dark"] .activity-log {
    background: #000000 !important;
}

[data-theme="dark"] .activity-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .pending-invites {
    background: #000000 !important;
}

[data-theme="dark"] .pending-invite-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* ========================================
   Content Recommendation Page Dark Mode
   ======================================== */

[data-theme="dark"] .content-container,
[data-theme="dark"] .recommendation-container {
    background: #000000 !important;
}

[data-theme="dark"] .chat-container {
    background: #000000 !important;
}

[data-theme="dark"] .right-panel,
[data-theme="dark"] .content-panel {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .video-card,
[data-theme="dark"] .content-card,
[data-theme="dark"] .article-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .video-card:hover,
[data-theme="dark"] .content-card:hover,
[data-theme="dark"] .article-card:hover {
    background: #333333 !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .video-title,
[data-theme="dark"] .content-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .video-description,
[data-theme="dark"] .content-description {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .video-meta,
[data-theme="dark"] .content-meta {
    color: #808080 !important;
}

[data-theme="dark"] .category-tag {
    background: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .recommendation-section {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .recommendation-header {
    color: #FFFFFF !important;
}

[data-theme="dark"] .chat-message.bot {
    background: transparent !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .source-card,
[data-theme="dark"] .reference-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .source-card:hover,
[data-theme="dark"] .reference-card:hover {
    background: #333333 !important;
}

/* ========================================
   My Progress Page Dark Mode
   ======================================== */

[data-theme="dark"] .progress-container,
[data-theme="dark"] .progress-page {
    background: #000000 !important;
}

[data-theme="dark"] .progress-header {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .progress-card,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .achievement-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .progress-card:hover {
    background: #333333 !important;
}

[data-theme="dark"] .progress-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .progress-value,
[data-theme="dark"] .stats-value {
    color: #FFFFFF !important;
}

[data-theme="dark"] .progress-label,
[data-theme="dark"] .stats-label {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .course-progress-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .course-progress-item:hover {
    background: #333333 !important;
}

[data-theme="dark"] .progress-bar-track {
    background: #333333 !important;
}

[data-theme="dark"] .learning-history,
[data-theme="dark"] .activity-timeline {
    background: #000000 !important;
}

[data-theme="dark"] .history-item,
[data-theme="dark"] .timeline-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* ========================================
   Generic Page Elements Dark Mode
   ======================================== */

/* Body backgrounds with light gradients */
[data-theme="dark"] body {
    background: #000000 !important;
}

/* Containers with white/light backgrounds */
[data-theme="dark"] .container,
[data-theme="dark"] .wrapper,
[data-theme="dark"] .page-container,
[data-theme="dark"] .main-container {
    background: #000000 !important;
}

/* All card variants */
[data-theme="dark"] .card,
[data-theme="dark"] [class*="-card"] {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* All panel variants */
[data-theme="dark"] .panel,
[data-theme="dark"] [class*="-panel"] {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* All section variants */
[data-theme="dark"] .section,
[data-theme="dark"] [class*="-section"] {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* All list variants */
[data-theme="dark"] .list,
[data-theme="dark"] [class*="-list"] {
    background: #000000 !important;
}

/* All item variants */
[data-theme="dark"] .item,
[data-theme="dark"] [class*="-item"] {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* All header variants */
[data-theme="dark"] .header,
[data-theme="dark"] [class*="-header"]:not([class*="gradient"]) {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* All content variants */
[data-theme="dark"] .content,
[data-theme="dark"] [class*="-content"] {
    background: #000000 !important;
}

/* All form containers */
[data-theme="dark"] .form,
[data-theme="dark"] .form-container,
[data-theme="dark"] .form-wrapper {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* All input groups */
[data-theme="dark"] .input-group,
[data-theme="dark"] .form-group {
    background: transparent !important;
}

/* All table elements */
[data-theme="dark"] table {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] thead {
    background: #000000 !important;
}

[data-theme="dark"] th {
    background: #000000 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

[data-theme="dark"] td {
    background: #000000 !important;
    color: #B8B8B8 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] tr:nth-child(even) td {
    background: #1f1f1f !important;
}

[data-theme="dark"] tr:hover td {
    background: #000000 !important;
}

/* All empty states */
[data-theme="dark"] .empty-state,
[data-theme="dark"] .no-results,
[data-theme="dark"] .no-data {
    background: #000000 !important;
    color: #808080 !important;
}

/* Skeleton loaders */
[data-theme="dark"] .skeleton,
[data-theme="dark"] .skeleton-loader {
    background: linear-gradient(90deg, #000000 25%, #333333 50%, #000000 75%) !important;
}

/* Gray background utilities */
[data-theme="dark"] [class*="bg-gray"],
[data-theme="dark"] [class*="bg-slate"] {
    background: #000000 !important;
}

/* Light background utilities */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background: #000000 !important;
}

/* All box shadows should be darker */
[data-theme="dark"] [class*="shadow"] {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Text color overrides */
[data-theme="dark"] [class*="text-gray-8"],
[data-theme="dark"] [class*="text-gray-9"],
[data-theme="dark"] [class*="text-slate-8"],
[data-theme="dark"] [class*="text-slate-9"] {
    color: #FFFFFF !important;
}

[data-theme="dark"] [class*="text-gray-5"],
[data-theme="dark"] [class*="text-gray-6"],
[data-theme="dark"] [class*="text-gray-7"],
[data-theme="dark"] [class*="text-slate-5"],
[data-theme="dark"] [class*="text-slate-6"],
[data-theme="dark"] [class*="text-slate-7"] {
    color: #B8B8B8 !important;
}

/* Override var() CSS variables with white fallbacks */
[data-theme="dark"] {
    --gray-50: #000000 !important;
    --gray-100: #000000 !important;
    --gray-200: #333333 !important;
    --gray-300: #333333 !important;
    --gray-400: #555555 !important;
    --gray-500: #808080 !important;
    --gray-600: #B8B8B8 !important;
    --gray-700: #CCCCCC !important;
    --gray-800: #FFFFFF !important;
    --gray-900: #FFFFFF !important;
    --chat-bg: #000000 !important;
    --background-color: #000000 !important;
    --border-color: #333333 !important;
}

/* ========================================
   Manage Organization Page Dark Mode
   ======================================== */

/* Dashboard cards */
[data-theme="dark"] .dashboard {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .dashboard:hover {
    background: #2a2a2a !important;
}

[data-theme="dark"] .dashboard-header {
    border-color: #333333 !important;
}

[data-theme="dark"] .dashboard-header h2 {
    color: #FFFFFF !important;
}

/* Teams header */
[data-theme="dark"] .teams-header {
    border-color: #333333 !important;
}

[data-theme="dark"] .teams-header h2 {
    color: #FFFFFF !important;
}

/* Config sections */
[data-theme="dark"] .config-section {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .config-section h3 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .config-label {
    color: #B8B8B8 !important;
}

/* Team cards */
[data-theme="dark"] .team-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .team-card:hover {
    background: #2a2a2a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .team-card-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .team-card-preview {
    background: #000000 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .team-card:hover .team-card-preview {
    background: rgba(102, 126, 234, 0.1) !important;
}

[data-theme="dark"] .team-card-meta-item {
    color: #808080 !important;
}

/* Team stats */
[data-theme="dark"] .team-stats {
    background: #000000 !important;
}

[data-theme="dark"] .stat-box {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .stat-box-label {
    color: #808080 !important;
}

[data-theme="dark"] .stat-box-value {
    color: #667eea !important;
}

/* User table */
[data-theme="dark"] .user-table {
    background: #000000 !important;
}

[data-theme="dark"] .user-table tbody tr {
    background: #000000 !important;
}

[data-theme="dark"] .user-table tbody tr:nth-child(even) {
    background: #1f1f1f !important;
}

[data-theme="dark"] .user-table tbody tr:hover {
    background: #000000 !important;
}

[data-theme="dark"] .user-table td {
    color: #B8B8B8 !important;
    border-color: #333333 !important;
}

/* Modal content */
[data-theme="dark"] .modal-content {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .modal-header {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .modal-header h3,
[data-theme="dark"] .modal-title {
    color: #FFFFFF !important;
}

/* Domain tags */
[data-theme="dark"] .domain-tag {
    background: rgba(102, 126, 234, 0.15) !important;
    color: #8BB4F0 !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

[data-theme="dark"] .domain-tag-editable {
    background: #000000 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

/* View toggle section */
[data-theme="dark"] #viewToggleSection {
    background: rgba(102, 126, 234, 0.1) !important;
    border-color: rgba(102, 126, 234, 0.2) !important;
}

/* Button secondary */
[data-theme="dark"] .btn-secondary {
    background: #333333 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: #333333 !important;
}

/* Admin container */
[data-theme="dark"] .admin-container {
    background: transparent !important;
}

/* Expand icon */
[data-theme="dark"] .expand-icon {
    color: #667eea !important;
}

/* Input and form elements - specific to manage-organization */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #000000 !important;
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #808080 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

/* Member inline cards */
[data-theme="dark"] .member-inline,
[data-theme="dark"] .user-inline {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Error badge */
[data-theme="dark"] .error-badge {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

/* Teams grid */
[data-theme="dark"] .teams-grid {
    background: transparent !important;
}

/* Stat cards with inline styles */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"] {
    background: #000000 !important;
}

/* ========================================
   Admin View Page Dark Mode
   ======================================== */

/* Filters section */
[data-theme="dark"] .filters-section {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .filters-section::before {
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.05) 0%, 
        rgba(118, 75, 162, 0.05) 100%) !important;
}

[data-theme="dark"] .filters-title {
    color: #FFFFFF !important;
}

/* Filter group */
[data-theme="dark"] .filter-group {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .filter-group:hover {
    border-color: rgba(102, 126, 234, 0.5) !important;
}

[data-theme="dark"] .filter-group::before {
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.08) 0%, 
        rgba(118, 75, 162, 0.08) 100%) !important;
}

[data-theme="dark"] .filter-label {
    color: #FFFFFF !important;
}

/* Multi-select dropdown */
[data-theme="dark"] .multi-select-trigger {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .multi-select-trigger:hover {
    border-color: #667eea !important;
}

[data-theme="dark"] .multi-select-trigger.active {
    background: rgba(102, 126, 234, 0.1) !important;
}

[data-theme="dark"] .multi-select-dropdown-menu {
    background: #000000 !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

[data-theme="dark"] .multi-select-option {
    color: #FFFFFF !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .multi-select-option:hover {
    background: #333333 !important;
}

[data-theme="dark"] .multi-select-option.selected {
    background: rgba(102, 126, 234, 0.2) !important;
}

/* Button styles */
[data-theme="dark"] .btn {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn:hover {
    background: #333333 !important;
}

[data-theme="dark"] .btn-outline {
    background: #000000 !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    color: #8BB4F0 !important;
}

[data-theme="dark"] .btn-outline:hover {
    background: #333333 !important;
}

[data-theme="dark"] .btn-ghost {
    background: transparent !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Filter select all/clear buttons */
[data-theme="dark"] .filter-select-all,
[data-theme="dark"] .filter-clear {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .filter-select-all:hover {
    background: #3b82f6 !important;
}

[data-theme="dark"] .filter-clear:hover {
    background: #ef4444 !important;
}

/* Publish course section */
[data-theme="dark"] .publish-course-section {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .publish-course-section::before {
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.05) 0%, 
        rgba(34, 197, 94, 0.05) 100%) !important;
}

[data-theme="dark"] .publish-course-title {
    color: #FFFFFF !important;
}

/* User select label */
[data-theme="dark"] .user-select-label {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .user-select-label:hover {
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.1) !important;
}

/* Panel title */
[data-theme="dark"] .panel-title {
    color: #FFFFFF !important;
}

/* Course list */
[data-theme="dark"] .course-list {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .course-item {
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .course-item:hover {
    background: rgba(16, 185, 129, 0.1) !important;
}

[data-theme="dark"] .course-item.selected {
    background: rgba(16, 185, 129, 0.15) !important;
}

[data-theme="dark"] .course-item label {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .course-item.selected label {
    color: #10b981 !important;
}

/* Users section */
[data-theme="dark"] .users-section {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .users-header {
    color: #FFFFFF !important;
}

/* User card */
[data-theme="dark"] .user-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .user-card:hover {
    background: #2a2a2a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .user-name {
    color: #FFFFFF !important;
}

[data-theme="dark"] .user-email,
[data-theme="dark"] .user-role {
    color: #808080 !important;
}

/* Learner list */
[data-theme="dark"] .learner-list {
    background: #000000 !important;
}

[data-theme="dark"] .learner-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .learner-item:hover {
    background: #333333 !important;
}

[data-theme="dark"] .learner-name {
    color: #FFFFFF !important;
}

[data-theme="dark"] .learner-email {
    color: #808080 !important;
}

/* Selected counter and actions */
[data-theme="dark"] .selected-counter {
    background: #000000 !important;
    color: #FFFFFF !important;
}

/* Filter chips */
[data-theme="dark"] .filter-chip {
    background: #333333 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .filter-chips .clear-all-chip {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

/* Summary section */
[data-theme="dark"] .summary-section,
[data-theme="dark"] .publish-summary {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .summary-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .summary-item {
    background: #000000 !important;
    border-color: #333333 !important;
}

/* Assignment section */
[data-theme="dark"] .assignment-section {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .assignment-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .assignment-card:hover {
    background: #2a2a2a !important;
}

/* Filter toggle chip */
[data-theme="dark"] .filter-toggle-chip {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .filter-toggle-chip:hover {
    background: #333333 !important;
}

[data-theme="dark"] .filter-toggle-chip.active {
    background: rgba(102, 126, 234, 0.2) !important;
    border-color: #667eea !important;
}

/* Users controls */
[data-theme="dark"] .users-controls {
    background: #000000 !important;
}

/* Search input */
[data-theme="dark"] .search-input-wrapper {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .search-input-wrapper input {
    background: transparent !important;
    color: #FFFFFF !important;
}

/* Skeleton loading */
[data-theme="dark"] .skeleton-row,
[data-theme="dark"] .skeleton-item {
    background: linear-gradient(90deg, #000000 25%, #333333 50%, #000000 75%) !important;
}

/* Empty state */
[data-theme="dark"] .empty-state-card {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .empty-state-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .empty-state-description {
    color: #808080 !important;
}

/* ========================================
   LEFT NAV COLLAPSED STATE - DARK MODE
   ======================================== */

/* Hover effect for collapsed buttons in dark mode */
[data-theme="dark"] .app-container.collapsed .conversation-panel .progress-btn:hover,
[data-theme="dark"] .app-container.collapsed .conversation-panel .category-card:hover,
[data-theme="dark"] .app-container.collapsed .conversation-panel .option-item:hover,
[data-theme="dark"] .app-container.collapsed .conversation-panel .new-conversation-card:hover,
[data-theme="dark"] .app-container.collapsed .conversation-panel .collapsed-new-chat-icon:hover {
    background: rgba(102, 126, 234, 0.25) !important;
}

/* New Chat Icon - Dark Mode */
[data-theme="dark"] .collapsed-new-chat-icon {
    background: transparent !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .collapsed-new-chat-icon:hover {
    color: #8BB4F0 !important;
}

/* Collapsed left nav background in dark mode */
[data-theme="dark"] .app-container.collapsed .conversation-panel .left-nav,
[data-theme="dark"] .app-container.collapsed .conversation-panel .conversation-list {
    background: #000000 !important;
}

/* New chat button gradient in dark mode */
[data-theme="dark"] .app-container.collapsed .conversation-panel .new-conversation-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
}

/* Collapsed logo container dark mode */
[data-theme="dark"] .collapsed-logo-container {
    background: rgba(30, 30, 30, 0.95) !important;
    border-color: rgba(102, 126, 234, 0.25) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .collapsed-logo-container:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(107, 157, 232, 0.25)) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

[data-theme="dark"] .collapsed-logo-container .collapsed-expand-icon,
[data-theme="dark"] .collapsed-logo-container .collapsed-expand-arrow {
    color: #8BB4F0 !important;
}

/* ========================================
   ASSESSMENT PAGE COMPREHENSIVE DARK MODE
   ======================================== */

/* Assessment Navigation */
[data-theme="dark"] .assessment-nav {
    background: #000000 !important;
    border-bottom-color: #333333 !important;
}

[data-theme="dark"] .nav-container {
    background: transparent !important;
}

[data-theme="dark"] .nav-logo {
    color: #FFFFFF !important;
}

[data-theme="dark"] .nav-subtitle {
    color: #808080 !important;
}

/* Assessment Status Badge - Remove white gradient */
[data-theme="dark"] .assessment-status-badge {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

[data-theme="dark"] .status-text {
    color: #B8B8B8 !important;
}

/* Assessment Loading */
[data-theme="dark"] .assessment-loading {
    background: rgba(102, 126, 234, 0.1) !important;
    border-color: rgba(102, 126, 234, 0.2) !important;
    color: #B8B8B8 !important;
}

/* Assessment Details */
[data-theme="dark"] .assessment-details {
    background: rgba(102, 126, 234, 0.15) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

[data-theme="dark"] .assessment-topic {
    color: #FFFFFF !important;
}

[data-theme="dark"] .assessment-meta {
    color: #B8B8B8 !important;
}

/* Connection Status */
[data-theme="dark"] .connection-status {
    background: transparent !important;
}

[data-theme="dark"] .status-label {
    color: #B8B8B8 !important;
}

/* Nav Buttons */
[data-theme="dark"] .nav-button.secondary {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .nav-button.secondary:hover {
    background: #333333 !important;
    border-color: #667eea !important;
}

/* Instructions Panel */
[data-theme="dark"] .instructions-panel {
    background: #000000 !important;
    border-left-color: #333333 !important;
}

[data-theme="dark"] .instructions-content {
    background: #000000 !important;
}

[data-theme="dark"] .instructions-header {
    border-bottom-color: #333333 !important;
}

[data-theme="dark"] .instructions-header h3 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .close-instructions {
    color: #808080 !important;
}

[data-theme="dark"] .close-instructions:hover {
    background: #333333 !important;
    color: #FFFFFF !important;
}

/* Instruction Items - Remove light gradients */
[data-theme="dark"] .instruction-item {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .instruction-item strong {
    color: #FFFFFF !important;
}

[data-theme="dark"] .instruction-item p {
    color: #B8B8B8 !important;
}

/* Chat Interface */
[data-theme="dark"] .chat-interface {
    background: #000000 !important;
    border-right-color: #333333 !important;
}

/* Chat Header - Remove light gradient */
[data-theme="dark"] .chat-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
    border-bottom-color: #333333 !important;
}

[data-theme="dark"] .title-content h2 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .title-content p {
    color: #808080 !important;
}

[data-theme="dark"] .control-btn {
    border-color: #333333 !important;
    color: #808080 !important;
    background: transparent !important;
}

[data-theme="dark"] .control-btn:hover {
    background: #333333 !important;
    border-color: #667eea !important;
    color: #667eea !important;
}

/* Chat Messages - Remove light gradient */
[data-theme="dark"] .chat-messages {
    background: linear-gradient(135deg, #0a0a0a 0%, #000000 100%) !important;
}

/* Welcome Message */
[data-theme="dark"] .welcome-message {
    background: #1a1a1a !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .welcome-content h3 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .welcome-content p {
    color: #B8B8B8 !important;
}

/* Message Content */
[data-theme="dark"] .message-content {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .message-content::before {
    border-color: transparent #1a1a1a transparent transparent !important;
}

/* System Messages - Fix white gradients */
[data-theme="dark"] .system-message {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(0, 0, 0, 0.9) 100%) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .system-message.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(0, 0, 0, 0.9) 100%) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .system-message.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(0, 0, 0, 0.9) 100%) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .system-message.processing-message {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(0, 0, 0, 0.95) 100%) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

/* Typing Dots */
[data-theme="dark"] .typing-dots {
    background: #1a1a1a !important;
    border-color: #333333 !important;
}

/* Chat Input Container */
[data-theme="dark"] .chat-input-container {
    background: #000000 !important;
    border-top-color: #333333 !important;
}

[data-theme="dark"] .chat-input {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .chat-input:focus {
    border-color: #667eea !important;
}

[data-theme="dark"] .chat-input:disabled {
    background: #0a0a0a !important;
    color: #555555 !important;
}

/* Input Hints */
[data-theme="dark"] .hint-item {
    color: #808080 !important;
}

[data-theme="dark"] .hint-item kbd {
    background: #333333 !important;
    border-color: #444444 !important;
    color: #B8B8B8 !important;
}

/* Progress Sidebar */
[data-theme="dark"] .progress-sidebar {
    background: #000000 !important;
    border-left-color: #333333 !important;
}

/* Progress Header - Remove light gradient */
[data-theme="dark"] .progress-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
    border-bottom-color: #333333 !important;
}

[data-theme="dark"] .progress-header h3 {
    color: #FFFFFF !important;
}

/* Progress Summary - Remove light gradient */
[data-theme="dark"] .progress-summary {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
    border-bottom-color: #333333 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .progress-text {
    color: #FFFFFF !important;
}

/* Progress Content */
[data-theme="dark"] .progress-content {
    background: #000000 !important;
}

[data-theme="dark"] .progress-placeholder {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .progress-placeholder p {
    color: #808080 !important;
}

/* Question Items */
[data-theme="dark"] .question-item {
    background: #1a1a1a !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .question-item:hover {
    background: #252525 !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .question-item.active {
    background: rgba(102, 126, 234, 0.15) !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .question-item.completed {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .question-number {
    color: #FFFFFF !important;
}

[data-theme="dark"] .question-preview {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .question-status {
    color: #808080 !important;
}

/* Toast Container */
[data-theme="dark"] .toast-container {
    background: transparent !important;
}

[data-theme="dark"] .toast {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .toast.success {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

[data-theme="dark"] .toast.error {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
}

/* Loading Overlay */
[data-theme="dark"] .loading-overlay {
    background: rgba(0, 0, 0, 0.95) !important;
}

[data-theme="dark"] .loading-content {
    background: transparent !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .loading-content h3 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .loading-content p {
    color: #B8B8B8 !important;
}

/* Assessment Info Card */
[data-theme="dark"] .assessment-info-card {
    background: transparent !important;
}

/* Separator */
[data-theme="dark"] .separator {
    color: #333333 !important;
}

/* Fix all assessment gradients with rgba(255, 255, 255) */
[data-theme="dark"] [style*="linear-gradient"][style*="255, 255, 255"],
[data-theme="dark"] [style*="linear-gradient"][style*="#fff"],
[data-theme="dark"] [style*="linear-gradient"][style*="#ffffff"] {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%) !important;
}

/* Assessment question cards */
[data-theme="dark"] .question-card {
    background: #1a1a1a !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .question-card:hover {
    border-color: #667eea !important;
}

[data-theme="dark"] .question-text {
    color: #FFFFFF !important;
}

[data-theme="dark"] .question-meta {
    color: #808080 !important;
}

/* Answer Options */
[data-theme="dark"] .answer-option,
[data-theme="dark"] .option-button {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .answer-option:hover,
[data-theme="dark"] .option-button:hover {
    background: #252525 !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .answer-option.selected,
[data-theme="dark"] .option-button.selected {
    background: rgba(102, 126, 234, 0.2) !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .answer-option.correct {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

[data-theme="dark"] .answer-option.incorrect {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

/* Score display */
[data-theme="dark"] .score-display,
[data-theme="dark"] .score-container {
    background: #1a1a1a !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .score-value {
    color: #FFFFFF !important;
}

[data-theme="dark"] .score-label {
    color: #B8B8B8 !important;
}

/* Assessment results */
[data-theme="dark"] .results-panel,
[data-theme="dark"] .results-container {
    background: #000000 !important;
}

[data-theme="dark"] .result-item {
    background: #1a1a1a !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .result-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .result-value {
    color: #B8B8B8 !important;
}

/* Assessment complete screen */
[data-theme="dark"] .complete-screen,
[data-theme="dark"] .completion-panel {
    background: #000000 !important;
}

[data-theme="dark"] .complete-message {
    color: #FFFFFF !important;
}

[data-theme="dark"] .complete-stats {
    background: #1a1a1a !important;
    border-color: #333333 !important;
}

/* Fix body background */
[data-theme="dark"] body {
    background: #000000 !important;
}

/* Fix main container */
[data-theme="dark"] .assessment-container {
    background: #000000 !important;
}

/* Assessment badge styles */
[data-theme="dark"] .badge-container {
    background: transparent !important;
}

/* Question indicators in progress sidebar */
[data-theme="dark"] .question-indicator {
    background: #333333 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .question-indicator.current {
    background: #667eea !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .question-indicator.answered {
    background: rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
}

/* Assessment navigation buttons */
[data-theme="dark"] .assessment-nav-btn {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .assessment-nav-btn:hover {
    background: #333333 !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .assessment-nav-btn.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: transparent !important;
}

/* Back to Dashboard Button - Dark Mode */
[data-theme="dark"] .back-to-dashboard-btn {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .back-to-dashboard-btn:hover {
    background: #667eea !important;
    border-color: #667eea !important;
    color: #FFFFFF !important;
}

/* ========================================
   LEFT PANEL ICONS POSITION ADJUSTMENT
   ======================================== */

/* Move left panel icons up by 25px */
[data-theme="dark"] .app-container.collapsed .categories-section,
[data-theme="dark"] .main-layout.collapsed .categories-section {
    margin-top: -25px !important;
}

/* ========================================
   CREATE-ORG PAGE DARK MODE STYLES
   ======================================== */

/* Progress Sidebar */
[data-theme="dark"] .progress-sidebar {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .progress-steps {
    background: #000000 !important;
}

[data-theme="dark"] .progress-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .step {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .step-circle {
    background: #333333 !important;
    color: #B8B8B8 !important;
}

[data-theme="dark"] .step.active .step-circle {
    background: #667eea !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

[data-theme="dark"] .step.completed .step-circle {
    background: #10b981 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .step-label {
    color: #FFFFFF !important;
}

[data-theme="dark"] .step-description {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .step.active .step-label {
    color: #667eea !important;
}

/* Content Area */
[data-theme="dark"] .content-area {
    background: #000000 !important;
}

[data-theme="dark"] .form-section {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .section-header {
    background: #000000 !important;
}

[data-theme="dark"] .section-title h3 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .section-title p {
    color: #B8B8B8 !important;
}

/* Form Elements */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select {
    background: #000000 !important;
    border-color: #333333 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

[data-theme="dark"] .form-input::placeholder {
    color: #808080 !important;
}

[data-theme="dark"] .form-help {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .form-label {
    color: #FFFFFF !important;
}

/* Info Box */
[data-theme="dark"] .info-box {
    background: #1a1a1a !important;
    border-color: #333333 !important;
    color: #B8B8B8 !important;
}

/* Config Sections */
[data-theme="dark"] .config-section {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .config-section h4 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .config-section-desc {
    color: #B8B8B8 !important;
}

/* Tool Cards */
[data-theme="dark"] .tool-card-content {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .tool-card input:checked + .tool-card-content {
    background: #1a1a1a !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .tool-card-label {
    color: #FFFFFF !important;
}

/* Toggle Switches */
[data-theme="dark"] .toggle-switch-row {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .toggle-info h4 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .toggle-info p {
    color: #B8B8B8 !important;
}

/* Expandable Sections */
[data-theme="dark"] .expandable-section {
    border-color: #333333 !important;
}

[data-theme="dark"] .expandable-header {
    background: #000000 !important;
}

[data-theme="dark"] .expandable-header:hover {
    background: #1a1a1a !important;
}

[data-theme="dark"] .expandable-body {
    background: #000000 !important;
}

/* Success and Error Messages */
[data-theme="dark"] .success-details {
    background: #000000 !important;
    border-color: #333333 !important;
}

[data-theme="dark"] .success-detail-label {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .success-detail-value {
    color: #FFFFFF !important;
}

[data-theme="dark"] .error-box {
    background: #1a1a1a !important;
    border-color: #333333 !important;
}

/* Footer */
[data-theme="dark"] .footer-link {
    color: #B8B8B8 !important;
}

[data-theme="dark"] .footer-link a {
    color: #667eea !important;
}