/**
 * Simplified theme styles for DocumentVault
 * Focused on critical elements to prevent flickering
 */

:root {
    /* These variables will be set via JavaScript for immediate loading */
    --navbar-bg: #ffffff;
    --navbar-text: #333333;
    --body-bg: #f8f9fa;
    --body-text: #212529;
    --sidebar-bg: #ffffff;
    --sidebar-text: #333333;
    --border-color: #e0e0e0;
    
    /* Card and panel colors */
    --card-bg: #ffffff;
    --card-text: #212529;
    --secondary-text: #6c757d;
    --panel-bg: #ffffff;
    --panel-header-bg: #f8f9fa;
    
    /* Additional theme variables */
    --primary-color: #1976d2;
    --error-color: #f44336;
    --success-color: #4caf50;
    --warning-color: #ff9800;
    --shadow-color: rgba(0, 0, 0, 0.15);
    --transition-speed: 0.3s;
    
    /* Form colors */
    --input-bg: #ffffff;
    --input-text: #212529;
    --input-border: #ced4da;
    --input-focus-border: #86b7fe;
    --input-focus-shadow: rgba(13, 110, 253, 0.25);
}

/* Critical styling applied to prevent flickering */
body {
    background-color: var(--body-bg);
    color: var(--body-text);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* Top navbar styling */
.top-row.fixed-top-nav {
    background-color: var(--navbar-bg) !important;
    color: var(--navbar-text) !important;
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-speed), color var(--transition-speed);
    z-index: 1000;
}

/* Sidebar styling */
.sidebar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--border-color);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* Fix navigation menu text color in dark mode */
.dark-theme .sidebar .nav-link,
.dark-theme .sidebar .nav-item a,
.dark-theme .nav-menu .nav-link,
.dark-theme .nav-menu a {
    color: #ffffff !important;
}

/* Fix for any nested menu items */
.dark-theme .sidebar .nav-item .nav-item a,
.dark-theme .sidebar .nav-link .nav-link,
.dark-theme .sidebar .sub-menu a,
.dark-theme .sidebar .sub-nav a {
    color: #ffffff !important;
}

.dark-theme .sidebar .nav-link:hover,
.dark-theme .sidebar .nav-item a:hover,
.dark-theme .nav-menu .nav-link:hover,
.dark-theme .nav-menu a:hover,
.dark-theme .mud-nav-link:hover,
.dark-theme .mud-nav-item a:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .sidebar .nav-link.active,
.dark-theme .sidebar .nav-item a.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    font-weight: 500;
}

/* Logo text in navbar */
.logo-text {
    color: var(--navbar-text) !important;
    transition: color var(--transition-speed);
}

/* User menu styling */
.avatar-menu {
    background-color: var(--card-bg) !important;
    color: var(--body-text);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px var(--shadow-color);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.dark-theme .avatar-menu {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

.menu-header {
    background-color: var(--sidebar-bg) !important;
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-speed);
}

.dark-theme .menu-header {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid #333333 !important;
}

.dark-theme .user-info h4 {
    color: #ffffff !important;
}

.dark-theme .user-info p {
    color: #bdbdbd !important;
}

.dark-theme .menu-label {
    color: #bdbdbd !important;
}

.menu-footer {
    background-color: var(--card-bg);
    transition: background-color var(--transition-speed);
}

.dark-theme .menu-footer {
    background-color: #1e1e1e !important;
    border-top: 1px solid #333333 !important;
}

/* Form controls in menus */
.form-select, .form-control {
    background-color: var(--card-bg);
    color: var(--body-text);
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.dark-theme .form-select, .dark-theme .form-control {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

/* Menu links */
.menu-link {
    color: var(--body-text) !important;
    transition: color var(--transition-speed), background-color var(--transition-speed);
}

.dark-theme .menu-link {
    color: #ffffff !important;
}

.menu-link:hover {
    color: var(--primary-color) !important;
    background-color: rgba(25, 118, 210, 0.1);
}

.dark-theme .menu-link:hover {
    background-color: rgba(144, 202, 249, 0.1);
}

/* Dark theme modifications */
.dark-theme .user-avatar {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 2px solid #444444 !important;
}

/* Light theme specific styles */
.light-theme .user-avatar {
    background-color: #e0e0e0;
}

/* Optimize content transition */
.content {
    background-color: var(--body-bg);
    transition: background-color var(--transition-speed);
}

/* Ensure good contrast for links */
a {
    color: var(--primary-color);
    transition: color var(--transition-speed);
}

.dark-theme a {
    color: #90caf9;
}

/* Override link color specifically for navigation */
.dark-theme .sidebar a,
.dark-theme .nav-menu a,
.dark-theme .mud-nav-link,
.dark-theme .mud-navmenu .mud-nav-link,
.dark-theme .mud-nav-group .mud-nav-link,
.dark-theme .mud-nav-item a,
.dark-theme .mud-nav-item-text,
.dark-theme .mud-navmenu .mud-nav-item .mud-nav-link,
.dark-theme .mud-nav-group-title,
.dark-theme .mud-navmenu .mud-nav-group .mud-nav-group-title {
    color: #ffffff !important;
}

/* Fix for MudBlazor navigation icons */
.dark-theme .mud-nav-link-icon,
.dark-theme .mud-nav-link .mud-icon-root,
.dark-theme .mud-nav-item .mud-icon-root {
    color: #ffffff !important;
}

/* Fix for MudBlazor table icons and controls */
.dark-theme .mud-table-sort-label-icon,
.dark-theme .mud-table-toolbar .mud-icon-button,
.dark-theme .mud-table-toolbar .mud-icon-root {
    color: #e0e0e0 !important;
}

/* Document toolbar and filters in dark mode */
.dark-theme .document-toolbar,
.dark-theme .documents-toolbar,
.dark-theme .mud-table-toolbar,
.dark-theme .search-bar,
.dark-theme .filter-bar {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Toolbar inputs in dark mode */
.dark-theme .document-toolbar input,
.dark-theme .documents-toolbar input,
.dark-theme .mud-table-toolbar input,
.dark-theme .search-bar input,
.dark-theme .filter-bar input,
.dark-theme .mud-input-root.mud-input-root-adorned-end {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

/* Document preview in dark mode */
.dark-theme .document-preview,
.dark-theme .file-preview,
.dark-theme .preview-panel,
.dark-theme .document-viewer,
.dark-theme .pdf-viewer {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Document chat styles in dark mode */
.dark-theme .chat-container,
.dark-theme .document-chat,
.dark-theme .chat-panel,
.dark-theme .chat-window {
    background-color: #121212 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

/* Chat message bubbles in dark mode */
.dark-theme .chat-message,
.dark-theme .message {
    border-color: #333333 !important;
}

/* User message bubble */
.dark-theme .chat-message.user-message,
.dark-theme .message.user-message,
.dark-theme .chat-message.outgoing,
.dark-theme .message.outgoing {
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

/* AI/System message bubble */
.dark-theme .chat-message.ai-message,
.dark-theme .message.ai-message,
.dark-theme .chat-message.incoming,
.dark-theme .message.incoming,
.dark-theme .chat-message.system-message,
.dark-theme .message.system-message {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

/* Chat input area in dark mode */
.dark-theme .chat-input,
.dark-theme .message-input,
.dark-theme .chat-composer,
.dark-theme .message-composer {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

.dark-theme .chat-input textarea,
.dark-theme .message-input textarea,
.dark-theme .chat-composer textarea,
.dark-theme .message-composer textarea,
.dark-theme .chat-input input,
.dark-theme .message-input input {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

/* Chat timestamp and metadata */
.dark-theme .chat-timestamp,
.dark-theme .message-timestamp,
.dark-theme .chat-metadata,
.dark-theme .message-metadata {
    color: #bdbdbd !important;
}

/* Code blocks in chat messages */
.dark-theme .chat-message pre,
.dark-theme .message pre,
.dark-theme .chat-message code,
.dark-theme .message code {
    background-color: #212121 !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Chat buttons in dark mode */
.dark-theme .chat-button,
.dark-theme .message-button,
.dark-theme .chat-action,
.dark-theme .chat-send-button,
.dark-theme .send-button {
    background-color: #1976d2 !important;
    color: #ffffff !important;
    border-color: #1976d2 !important;
}

.dark-theme .chat-button:hover,
.dark-theme .message-button:hover,
.dark-theme .chat-action:hover,
.dark-theme .chat-send-button:hover,
.dark-theme .send-button:hover {
    background-color: #1565c0 !important;
    border-color: #1565c0 !important;
}

/* File attachments in chat */
.dark-theme .chat-attachment,
.dark-theme .message-attachment,
.dark-theme .file-attachment,
.dark-theme .attachment-preview {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

.dark-theme .attachment-filename,
.dark-theme .attachment-name,
.dark-theme .file-name {
    color: #ffffff !important;
}

.dark-theme .attachment-size,
.dark-theme .attachment-type,
.dark-theme .file-size,
.dark-theme .file-type {
    color: #bdbdbd !important;
}

/* Document reference sidebar in chat */
.dark-theme .document-references,
.dark-theme .chat-references,
.dark-theme .reference-panel,
.dark-theme .reference-sidebar {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

.dark-theme .reference-item,
.dark-theme .document-reference,
.dark-theme .citation {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

.dark-theme .reference-title,
.dark-theme .citation-title {
    color: #ffffff !important;
    font-weight: 500 !important;
}

.dark-theme .reference-content,
.dark-theme .citation-content {
    color: #bdbdbd !important;
}

/* Message typing indicator */
.dark-theme .typing-indicator,
.dark-theme .chat-typing {
    color: #bdbdbd !important;
}

/* MudBlazor chat components in dark mode */
.dark-theme .mud-chat,
.dark-theme .mud-chat-container {
    background-color: #121212 !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

.dark-theme .mud-chat-messages-container {
    background-color: #1e1e1e !important;
}

.dark-theme .mud-chat-message-mine {
    background-color: #1976d2 !important;
    color: #ffffff !important;
}

.dark-theme .mud-chat-message-others {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

.dark-theme .mud-chat-message-time {
    color: #bdbdbd !important;
}

.dark-theme .mud-chat-input-field {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

/* Chat tabs in dark mode */
.dark-theme .mud-tabs-toolbar {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

.dark-theme .mud-tab {
    color: #bdbdbd !important;
}

.dark-theme .mud-tab.mud-tab-active {
    color: #ffffff !important;
}

.dark-theme .mud-tabs-toolbar-content .mud-tabs-toolbar-slider {
    background-color: #1976d2 !important;
}

/* Fix for reconnection modal dialog - ensure dark text regardless of theme */
.components-reconnect-modal,
.components-reconnect-modal *,
.components-reconnect-hide,
.components-reconnect-show,
.components-reconnect-failed,
.components-reconnect-rejected,
.reconnect-modal,
.blazor-reconnect-modal {
    color: #333333 !important;
}

.components-reconnect-modal .reconnect-modal__header,
.reconnect-modal__header {
    color: #333333 !important;
    font-weight: bold !important;
}

.components-reconnect-modal .reconnect-modal__message,
.reconnect-modal__message {
    color: #333333 !important;
}

/* Ensure modal body and content have proper contrast */
.components-reconnect-modal .modal-body,
.components-reconnect-modal .modal-content,
.reconnect-modal .modal-body,
.reconnect-modal .modal-content,
.blazor-reconnect-modal .modal-body,
.blazor-reconnect-modal .modal-content {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #cccccc !important;
}

/* Even more specific selectors to ensure text stays dark */
.dark-theme .components-reconnect-modal,
.dark-theme .components-reconnect-modal *,
.dark-theme .reconnect-modal,
.dark-theme .reconnect-modal *,
.dark-theme .blazor-reconnect-modal,
.dark-theme .blazor-reconnect-modal *,
.components-reconnect-hide,
.components-reconnect-show,
.components-reconnect-rejected,
.components-reconnect-failed,
.reconnect-show,
.reconnect-failed,
.reconnect-rejected,
.blazor-reconnect-show,
.blazor-reconnect-failed,
.blazor-reconnect-rejected {
    color: #333333 !important;
}

/* Target all possible text elements that might show 'Rejoining the server...' */
.components-reconnect-show > div,
.reconnect-show > div,
.blazor-reconnect-show > div,
#components-reconnect-show,
#components-reconnect-failed,
#components-reconnect-rejected,
#blazor-error-ui,
.reconnect-show h5,
.reconnect-show div,
.reconnect-show p,
.reconnect-show span,
.blazor-reconnect-show h5,
.blazor-reconnect-show div,
.blazor-reconnect-show p,
.blazor-reconnect-show span,
.components-reconnect-show h5,
.components-reconnect-show div,
.components-reconnect-show p,
.components-reconnect-show span {
    color: #333333 !important;
}

/* Force white background to ensure contrast */
.components-reconnect-show,
.reconnect-show,
.blazor-reconnect-show,
#blazor-error-ui,
.reconnect-modal,
.components-reconnect-modal,
.blazor-reconnect-modal {
    background-color: #ffffff !important;
}

/* Ultra-aggressive styling for Blazor reconnection UI - target all possible selectors */
#components-reconnect-modal,
.components-reconnect-modal,
#components-reconnect-show,
div[id*="reconnect"],
div[class*="reconnect"],
.blazor-reconnect-modal,
.reconnect-modal {
    background-color: #ffffff !important;
    border: 2px solid #333333 !important;
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
    color: #333333 !important;
    font-weight: bold !important;
}

/* Target text content directly */
#components-reconnect-modal *,
.components-reconnect-modal *,
#components-reconnect-show *,
div[id*="reconnect"] *,
div[class*="reconnect"] *,
.blazor-reconnect-modal *,
.reconnect-modal * {
    color: #333333 !important;
    font-weight: normal !important;
    text-shadow: none !important;
}

/* Explicitly target h5 elements which often contain the main message */
#components-reconnect-modal h5,
.components-reconnect-modal h5,
#components-reconnect-show h5,
div[id*="reconnect"] h5,
div[class*="reconnect"] h5,
.blazor-reconnect-modal h5,
.reconnect-modal h5 {
    color: #333333 !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/* Special override for reconnecting message */
.components-reconnect-show,
.reconnect-show,
.blazor-reconnect-show,
div[id*="reconnect-show"],
div[class*="reconnect-show"] {
    color: #333333 !important;
    background-color: #ffffff !important;
    padding: 10px !important;
    margin: 10px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    text-align: center !important;
    border-radius: 4px !important;
    border: 2px solid #333333 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
    text-shadow: none !important;
}

/* Target the exact text content */
.components-reconnect-show:after,
.reconnect-show:after,
.blazor-reconnect-show:after,
div[id*="reconnect-show"]:after,
div[class*="reconnect-show"]:after {
    content: "Rejoining the server..." !important;
    color: #333333 !important;
    font-weight: bold !important;
    display: block !important;
    text-shadow: none !important;
}

/* Fix KPI tooltips in dark mode */
.dark-theme .tooltip,
.dark-theme .tooltip-inner,
.dark-theme [data-bs-toggle="tooltip"],
.dark-theme .bs-tooltip-auto,
.dark-theme .bs-tooltip-top,
.dark-theme .bs-tooltip-bottom,
.dark-theme .bs-tooltip-start,
.dark-theme .bs-tooltip-end,
.dark-theme .mud-tooltip,
.dark-theme .mud-tooltip-root,
.dark-theme .mud-tooltip-text,
.dark-theme .mud-popover,
.dark-theme .mud-popover-paper {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

/* Style tooltip arrows */
.dark-theme .tooltip .arrow::before,
.dark-theme .tooltip-arrow::before,
.dark-theme .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.dark-theme .bs-tooltip-top .tooltip-arrow::before,
.dark-theme .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.dark-theme .bs-tooltip-bottom .tooltip-arrow::before,
.dark-theme .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,
.dark-theme .bs-tooltip-start .tooltip-arrow::before,
.dark-theme .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.dark-theme .bs-tooltip-end .tooltip-arrow::before {
    border-color: transparent !important;
    border-top-color: #333333 !important;
    border-bottom-color: #333333 !important;
}

/* Target KPI component tooltips specifically */
.dark-theme .kpi-card .tooltip,
.dark-theme .kpi-card .tooltip-inner,
.dark-theme .kpi-value .tooltip,
.dark-theme .kpi-value .tooltip-inner,
.dark-theme .kpi-label .tooltip,
.dark-theme .kpi-label .tooltip-inner,
.dark-theme .kpi-container .tooltip,
.dark-theme .kpi-container .tooltip-inner,
.dark-theme [data-kpi] .tooltip,
.dark-theme [data-kpi] .tooltip-inner,
.dark-theme .dashboard-kpi .tooltip,
.dark-theme .dashboard-kpi .tooltip-inner,
.dark-theme .mud-chart-tooltip,
.dark-theme .dashboard-chart .tooltip,
.dark-theme [data-toggle="tooltip"],
.dark-theme [data-toggle="tooltip"] .tooltip,
.dark-theme .stats-card .tooltip,
.dark-theme .metric-card .tooltip {
    background-color: #333333 !important;
    color: #ffffff !important;
    font-weight: normal !important;
    text-shadow: none !important;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    max-width: 300px !important;
    z-index: 9999 !important;
}

/* Direct fix for Bootstrap tooltips - using !important with the highest specificity possible */
.tooltip,
.tooltip.show,
.tooltip.fade,
.tooltip.bs-tooltip-auto,
div.tooltip,
span.tooltip,
.tooltip[class*="bs-tooltip"],
.chartjs-tooltip,
.chart-tooltip {
    --bs-tooltip-bg: #333333 !important;
    --bs-tooltip-color: #ffffff !important;
    background-color: #333333 !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Fix for chart.js tooltips specifically */
canvas + .chartjs-tooltip,
.chartjs-tooltip,
#chartjs-tooltip,
div[class*="chartjs"],
.chart-tooltip,
.chart-tooltip div,
.chart-tooltip span,
[id^="chart"] + div,
.tooltip[style*="position: absolute"],
.tooltip[style*="z-index"] {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
    font-weight: normal !important;
    text-shadow: none !important;
}

/* Force all chartjs tooltips text to be white */
.chartjs-tooltip-key,
.chartjs-tooltip-body,
.chartjs-tooltip-title,
#tokenUsageChart + div,
#tokenUsageChart + div *,
.chartjs-tooltip-body-item,
div[id^="chartjs-tooltip"] * {
    color: #ffffff !important;
    background-color: #333333 !important;
}

/* Direct override for tooltip inner content */
.tooltip-inner,
.tooltip > .tooltip-inner,
div.tooltip-inner,
span.tooltip-inner {
    background-color: #333333 !important;
    color: #ffffff !important;
    border-color: #555555 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/* Fix Blazor-specific tooltips */
.dark-theme .blazored-tooltip,
.dark-theme .blazored-tooltip-content,
.dark-theme .tooltip-content,
.dark-theme .tooltip-popup,
.dark-theme .blazor-tooltip,
.dark-theme .tooltip-wrapper,
.dark-theme .mud-tooltip-root .mud-tooltip {
    background-color: #333333 !important;
    color: #ffffff !important;
    font-weight: normal !important;
    text-shadow: none !important;
    border: 1px solid #555555 !important;
}

/* Fix tooltip arrows with direct Bootstrap variable override */
.tooltip .tooltip-arrow::before {
    border-top-color: #333333 !important;
    border-bottom-color: #333333 !important;
    border-left-color: #333333 !important;
    border-right-color: #333333 !important;
}

/* Direct fix specifically for Recent Activity panel */
.dark-theme .card-header:has(h5:contains("Recent Activity")) + .card-body,
.dark-theme .card-header:has(.card-title:contains("Recent Activity")) + .card-body,
.dark-theme div:has(> h5:contains("Recent Activity")) + div,
.dark-theme .activity-list,
.dark-theme .activity-item,
.dark-theme .activity-content,
.dark-theme .recent-activity,
.dark-theme [id*="recent-activity"],
.dark-theme .col-md-6 .card .card-body,
.dark-theme .recent-activity .card-body,
.dark-theme .joined-organization,
.dark-theme .activity-timestamp {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Ultra-specific fix for the joined organization item in Recent Activity */
.dark-theme .activity-item,
.dark-theme .card-body .activity-item,
.dark-theme .activity-item[class*="joined"],
.dark-theme .activity-item:contains("Joined"),
.dark-theme [class*="activity-item"],
.dark-theme [class*="activity"] [class*="item"],
.dark-theme [class*="recent"] [class*="item"],
.dark-theme .user-profile,
.dark-theme div:has(> span:contains("William Daugherty")),
.dark-theme div:has(> span:contains("May 21")),
.dark-theme div:has(> i.bi-people-fill),
.dark-theme div:has(> .bi),
.dark-theme .joined-organization,
.dark-theme .activity-content,
.dark-theme .activity-meta,
.dark-theme .activity-item .d-flex,
.dark-theme .activity-list > div {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Fix all children inside activity items */
.dark-theme .activity-item *,
.dark-theme .activity-content *,
.dark-theme .activity-meta *,
.dark-theme .activity-list * {
    background-color: transparent !important;
    color: inherit !important;
}

/* Additional force override for activity panel */
.dark-theme [role="main"] .card,
.dark-theme div.container-fluid div.row div.col-md-6 div.card {
    background-color: #1e1e1e !important;
}

/* Target recent activity items and notes */
.dark-theme .activity-item,
.dark-theme .activity-content,
.dark-theme .activity-timestamp,
.dark-theme .recent-note,
.dark-theme .note-item,
.dark-theme .note-content,
.dark-theme .note-timestamp {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
    border-color: #333333 !important;
}

/* Fix chart panels and cards in dark mode */
.dark-theme .card,
.dark-theme .mud-card,
.dark-theme .mud-paper,
.dark-theme .mud-expansion-panel,
.dark-theme .mud-grid,
.dark-theme .mud-container {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

/* Improve table styling in dark mode */
.dark-theme table,
.dark-theme .table,
.dark-theme .mud-table,
.dark-theme .mud-table-root,
.dark-theme .mud-table-container {
    background-color: var(--card-bg) !important;
    color: #e0e0e0 !important;
}

.dark-theme table th,
.dark-theme .table th,
.dark-theme .mud-table th,
.dark-theme .mud-table-head,
.dark-theme .mud-table-cell,
.dark-theme .mud-table-header-cell,
.dark-theme .mud-table-sort-label {
    color: #ffffff !important;
    background-color: #2d2d2d !important;
    font-weight: 500 !important;
}

.dark-theme table td,
.dark-theme .table td,
.dark-theme .mud-table td,
.dark-theme .mud-table-cell,
.dark-theme .mud-table-body-cell {
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Table hover and selected states */
.dark-theme .mud-table-row:hover,

/* Make SystemLogs table match TokenUsage by removing all background colors */
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-danger,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-warning,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-info,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-light,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-success,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-primary,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-secondary,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-dark,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * tr[class*="table-"],
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * td[class*="table-"],
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * th[class*="table-"] {
    background-color: inherit !important;
    background: none !important;
}

/* Force all rows to have no background colors */
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * table tr,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table tr {
    background-color: inherit !important;
    background: none !important;
}

/* Match table styling to TokenUsage */
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * table,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table {
    color: #e0e0e0 !important;
}

/* Override any table-cell styling as well */
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-danger td,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-warning td,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-info td,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-light td,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-success td,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-secondary td,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-primary td,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .table-dark td {
    background-color: transparent !important;
    color: #e0e0e0 !important;
}

/* Target all table cells and headers regardless of context */
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * table td,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * tr,
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * tbody {
    color: #e0e0e0 !important;
    border-color: #333333 !important;
}

/* Match card styles to TokenUsage page */
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .card {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .card-header {
    background-color: #2d2d2d !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .card-header.bg-primary {
    background-color: #1976d2 !important;
}

.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .card-body {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* Ensure buttons are visible */
.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .btn-primary {
    background-color: #1976d2 !important;
    border-color: #1976d2 !important;
    color: #ffffff !important;
}

.dark-theme [href*="/CoreTeam/SystemLogs"] ~ * .btn-light {
    background-color: #e0e0e0 !important;
    border-color: #cccccc !important;
    color: #333333 !important;
}

/* Ensure text is visible in log entries */
.dark-theme .log-entry-content,
.dark-theme .log-details,
.dark-theme .log-entry-row,
.dark-theme .log-entry-cell,
.dark-theme .log-entry a,
.dark-theme .log-info,
.dark-theme .log-warning,
.dark-theme .log-error,
.dark-theme .log-debug,
.dark-theme .log-trace {
    color: #e0e0e0 !important;
}

/* Table hover and selected states */
.dark-theme .mud-table-row:hover,
.dark-theme .table tr:hover,
.dark-theme tr:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-theme .mud-table-row.mud-selected,
.dark-theme .table tr.selected,
.dark-theme tr.selected {
    background-color: rgba(144, 202, 249, 0.16) !important;
}

/* Pagination controls in dark mode */
.dark-theme .mud-table-pagination,
.dark-theme .mud-table-pagination-actions,
.dark-theme .pagination,
.dark-theme .page-item {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

.dark-theme .mud-table-pagination-select,
.dark-theme .mud-table-pagination-select-input,
.dark-theme .pagination-select {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

.dark-theme .mud-table-pagination-caption,
.dark-theme .pagination-text {
    color: #bdbdbd !important;
}

/* Action buttons in document tables */
.dark-theme .document-actions .mud-button,
.dark-theme .document-actions .btn,
.dark-theme .mud-table-cell .mud-button,
.dark-theme .mud-table-cell .btn,
.dark-theme .table-actions .mud-button,
.dark-theme .table-actions .btn {
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

/* Document metadata styling */
.dark-theme .document-metadata,
.dark-theme .document-info,
.dark-theme .file-info,
.dark-theme .file-metadata {
    color: #bdbdbd !important;
}

.dark-theme .document-tags .mud-chip,
.dark-theme .document-tags .tag,
.dark-theme .file-tags .mud-chip,
.dark-theme .file-tags .tag {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

.dark-theme .card-header,
.dark-theme .mud-card-header,
.dark-theme .mud-expansion-panel-header,
.dark-theme .mud-expansion-panel-content,
.dark-theme .mud-tab-panel {
    background-color: var(--panel-header-bg) !important;
    color: var(--card-text) !important;
    border-bottom: 1px solid var(--border-color);
}

/* Make sure all MudBlazor panels and surfaces use our theme */
.dark-theme .mud-drawer,
.dark-theme .mud-appbar,
.dark-theme .mud-dialog,
.dark-theme .mud-table,
.dark-theme .mud-tabs,
.dark-theme .mud-alert {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

/* Fix secondary text colors in dark mode */
.dark-theme .text-muted,
.dark-theme .mud-text-secondary,
.dark-theme .mud-typography-body2,
.dark-theme small,
.dark-theme .small {
    color: #bdbdbd !important;
}

/* Fix form inputs in dark mode */
.dark-theme input, 
.dark-theme select, 
.dark-theme textarea {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

.dark-theme input:focus, 
.dark-theme select:focus, 
.dark-theme textarea:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 0.25rem var(--input-focus-shadow) !important;
}

/* Fix for login/register forms specifically */
.auth-container input,
.login-container input,
.register-container input,
.mud-input input,
.mud-input-control input,
.mud-text-field input {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
}

/* Override any form styling in light theme mode */
.light-theme input,
.light-theme select,
.light-theme textarea,
.light-theme .mud-input input {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Override any form styling in dark theme mode */
.dark-theme input,
.dark-theme select,
.dark-theme textarea,
.dark-theme .mud-input input {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

/* Login and register screens */
.dark-theme .mud-container,
.dark-theme .auth-container,
.dark-theme .login-container,
.dark-theme .register-container {
    background-color: var(--body-bg) !important;
    color: var(--body-text) !important;
}

.dark-theme .mud-container .mud-card,
.dark-theme .auth-container .card,
.dark-theme .login-container .card,
.dark-theme .register-container .card {
    background-color: var(--card-bg) !important;
    color: var(--card-text) !important;
}

/* Target MudBlazor specific form components */
.dark-theme .mud-input,
.dark-theme .mud-input-control,
.dark-theme .mud-form-control,
.dark-theme .mud-input-slot,
.dark-theme .mud-input-outlined-border {
    color: var(--card-text) !important;
}

.dark-theme .mud-input-outlined-border {
    border-color: var(--input-border) !important;
}

/* Fix the floating labels - ensure proper contrast and positioning */
.dark-theme .mud-input-label,
.dark-theme .mud-input-helper-text,
.dark-theme .mud-input-adornment {
    color: #bdbdbd !important;
}

.dark-theme .mud-input-label.mud-shrink {
    background-color: var(--card-bg) !important;
    padding: 0 4px !important;
    color: #ffffff !important;
    transform: translate(14px, -9px) scale(0.75) !important;
}

.dark-theme .mud-input-root {
    color: var(--card-text) !important;
    caret-color: var(--card-text) !important;
}

/* Ensure MudBlazor text fields have the right background */
.dark-theme .mud-input-outlined {
    background-color: var(--input-bg) !important;
    border-radius: 4px;
}

/* Fix specifically for login/register forms */
.dark-theme .mud-input {
    margin-top: 16px !important;
}

/* Fix placeholder text to ensure it doesn't overlap with label */
.dark-theme input::placeholder {
    color: transparent !important;
}

.dark-theme .mud-input-root:focus::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Make sure the checkbox label is visible */
.dark-theme .mud-checkbox-text {
    color: var(--card-text) !important;
}

/* Fix chart colors */
.dark-theme .apexcharts-text tspan,
.dark-theme .apexcharts-legend-text,
.dark-theme .apexcharts-title-text,
.dark-theme .apexcharts-subtitle-text {
    fill: var(--card-text) !important;
    color: var(--card-text) !important;
}

.dark-theme .apexcharts-gridline,
.dark-theme .apexcharts-grid line {
    stroke: var(--border-color) !important;
}

.dark-theme .apexcharts-xaxis-tick,
.dark-theme .apexcharts-yaxis-tick {
    stroke: var(--border-color) !important;
}