/* ========================================
   Dark Mode Theme - Professional Research Platform
   ======================================== */

/* ===== Global Dark Mode Variables ===== */
body.dark-mode {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --accent-color: #3b82f6;
    --accent-hover: #2563eb;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --shadow-color: rgba(0, 0, 0, 0.4);
}

/* ===== Base Styles ===== */
body.dark-mode {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode a {
    color: var(--accent-color) !important;
}

body.dark-mode a:hover {
    color: var(--accent-hover) !important;
}

/* ===== Login/Signup Pages (pwd_login.html, login.html, signup.html) ===== */

/* Body background for login/signup pages with form-bg class */
body.dark-mode.form-bg {
    background:
        radial-gradient(rgba(51, 65, 85, 0.3) 1px, transparent 1px),
        linear-gradient(180deg, #0f172a, #1e293b) !important;
    background-size: 22px 22px, auto !important;
}

/* Login/Signup container card */
body.dark-mode.form-bg .container {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.97)) !important;
    border: 1px solid rgba(71, 85, 105, 0.3) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important;
}

/* Logo text color */
body.dark-mode.form-bg .logo {
    color: #f1f5f9 !important;
}

/* Form inputs */
body.dark-mode.form-bg .form-group input,
body.dark-mode.form-bg .form-control {
    background-color: rgba(51, 65, 85, 0.96) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
    color: #f1f5f9 !important;
}

body.dark-mode.form-bg .form-group input::placeholder,
body.dark-mode.form-bg .form-control::placeholder {
    color: #94a3b8 !important;
}

/* Form labels */
body.dark-mode.form-bg .form-group label,
body.dark-mode.form-bg label {
    color: #cbd5e1 !important;
}

/* Primary button (Sign in / Sign up) */
body.dark-mode.form-bg .btn {
    background: linear-gradient(180deg, #b8a500, #9d8c00) !important;
    color: #ffffff !important;
    border: none !important;
}

body.dark-mode.form-bg .btn:hover {
    background: linear-gradient(180deg, #9d8c00, #8a7a00) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184, 165, 0, 0.3) !important;
}

/* Divider text and lines */
body.dark-mode.form-bg .divider {
    color: #64748b !important;
}

body.dark-mode.form-bg .divider::before,
body.dark-mode.form-bg .divider::after {
    background-color: #334155 !important;
}

/* Social login buttons */
body.dark-mode.form-bg .social-btn {
    background-color: rgba(51, 65, 85, 0.96) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
    color: #f1f5f9 !important;
}

body.dark-mode.form-bg .social-btn:hover {
    background-color: rgba(71, 85, 105, 0.8) !important;
}

/* Google button - keep blue but darker */
body.dark-mode.form-bg .google-btn {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border: none !important;
}

body.dark-mode.form-bg .google-btn:hover {
    background-color: #1d4ed8 !important;
}

/* LinkedIn button - keep brand color but darker */
body.dark-mode.form-bg .linkedin-btn {
    background-color: #005885 !important;
    color: #ffffff !important;
    border: none !important;
}

body.dark-mode.form-bg .linkedin-btn:hover {
    background-color: #004569 !important;
}

/* ORCID button */
body.dark-mode.form-bg .orcid-btn {
    background-color: #a6ce39 !important;
    color: #ffffff !important;
    border: none !important;
}

body.dark-mode.form-bg .orcid-btn:hover {
    background-color: #8fb32e !important;
}

/* Footer text and links */
body.dark-mode.form-bg .footer {
    color: #94a3b8 !important;
}

body.dark-mode.form-bg .footer a {
    color: #fbbf24 !important;
}

body.dark-mode.form-bg .footer a:hover {
    color: #f59e0b !important;
}

/* Error messages */
body.dark-mode.form-bg .error {
    color: #fca5a5 !important;
}

/* Signup page specific styles */
body.dark-mode.form-bg .form-half label,
body.dark-mode.form-bg .full-width label {
    color: #cbd5e1 !important;
}

body.dark-mode.form-bg .form-half input,
body.dark-mode.form-bg .full-width input {
    background-color: rgba(51, 65, 85, 0.96) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
    color: #f1f5f9 !important;
}

/* ===== Verify Code Page (verify_code.html) ===== */

/* Body background for verify code page */
body.dark-mode.verify-code-page,
body.dark-mode {
    /* Already handled by base styles */
}

/* Heading and text */
body.dark-mode h2 {
    color: #f1f5f9 !important;
}

body.dark-mode p {
    color: #cbd5e1 !important;
}

body.dark-mode p strong {
    color: #f1f5f9 !important;
}

/* Verification code input */
body.dark-mode input[type="text"] {
    background-color: rgba(51, 65, 85, 0.96) !important;
    border: 1px solid rgba(71, 85, 105, 0.6) !important;
    color: #f1f5f9 !important;
}

body.dark-mode input[type="text"]::placeholder {
    color: #94a3b8 !important;
}

/* Verify button */
body.dark-mode button[type="submit"] {
    background: linear-gradient(180deg, #b8a500, #9d8c00) !important;
    color: #ffffff !important;
    border: none !important;
}

body.dark-mode button[type="submit"]:hover {
    background: linear-gradient(180deg, #9d8c00, #8a7a00) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184, 165, 0, 0.3) !important;
}

/* Error messages */
body.dark-mode .messages {
    color: #fca5a5 !important;
}

/* Resend link */
body.dark-mode .resend-link {
    color: #fbbf24 !important;
}

body.dark-mode .resend-link:hover {
    color: #f59e0b !important;
}

body.dark-mode .resend-disabled {
    color: #475569 !important;
}

/* ===== Home Page (jQuery UI) ===== */

/* Body background for home page */
body.dark-mode.form-bg,
body.dark-mode#home {
    background:
        radial-gradient(rgba(51, 65, 85, 0.3) 1px, transparent 1px),
        linear-gradient(180deg, #0f172a, #1e293b) !important;
    background-size: 22px 22px, auto !important;
}

body.dark-mode#home::before {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 26%),
        radial-gradient(circle at left center, rgba(51, 65, 85, 0.15), transparent 24%),
        linear-gradient(180deg, rgba(30, 41, 59, 0.15), rgba(15, 23, 42, 0.08)) !important;
}

/* Main Search Box Container */
body.dark-mode #search-box {
    background-color: transparent !important;
}

/* jQuery UI Tabs Container - match unified-theme specificity */
body.dark-mode#home #tabs {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.96)) !important;
    border: 1px solid rgba(51, 65, 85, 0.5) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode #tabs {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .ui-tabs {
    background: transparent !important;
    border: none !important;
}

body.dark-mode .ui-tabs .ui-tabs-nav {
    background: transparent !important;
    border-color: transparent !important;
}

body.dark-mode .ui-tabs .ui-tabs-nav li {
    background: transparent !important;
    border-color: transparent !important;
}

body.dark-mode #tabs .ui-tabs-nav li a {
    background: rgba(51, 65, 85, 0.7) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode#home #tabs .ui-tabs-nav li a {
    background: rgba(51, 65, 85, 0.75) !important;
    border: 1px solid rgba(71, 85, 105, 0.45) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode #tabs .ui-tabs-nav li a i {
    color: #cbd5e1 !important;
}

body.dark-mode #tabs .ui-tabs-nav li.ui-tabs-active a,
body.dark-mode #tabs .ui-tabs-nav li.ui-state-active a {
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode#home #tabs .ui-tabs-nav li.ui-tabs-active a,
body.dark-mode#home #tabs .ui-tabs-nav li.ui-state-active a {
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.25) !important;
}

body.dark-mode#home #tabs .ui-tabs-nav li.ui-tabs-active a,
body.dark-mode#home #tabs .ui-tabs-nav li.ui-state-active a,
body.dark-mode#home #tabs .ui-tabs-nav li.ui-tabs-active a *,
body.dark-mode#home #tabs .ui-tabs-nav li.ui-state-active a * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

body.dark-mode #tabs .ui-tabs-nav li.ui-tabs-active a i,
body.dark-mode #tabs .ui-tabs-nav li.ui-state-active a i {
    color: #ffffff !important;
}

body.dark-mode .ui-tabs .ui-tabs-panel {
    background: transparent !important;
    border-color: transparent !important;
}

body.dark-mode #tabs .ui-tabs-panel {
    background: transparent !important;
}

/* Entity Search Panel - high specificity to override unified-theme */
body.dark-mode#home #tabs-6 .entity-search-panel,
body.dark-mode#home #tabs-6,
body.dark-mode #tabs-6 .entity-search-panel,
body.dark-mode .entity-search-panel {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 12px !important;
    padding: 30px !important;
}

body.dark-mode#home #tabs-6 .entity-search-panel h3,
body.dark-mode .entity-search-panel h3 {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
}

body.dark-mode#home #tabs-6 .entity-search-panel p,
body.dark-mode .entity-search-panel p {
    color: #cbd5e1 !important;
}

body.dark-mode .entity-search-row input {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body.dark-mode .entity-search-row input::placeholder {
    color: #94a3b8 !important;
}

body.dark-mode .entity-search-note {
    color: #94a3b8 !important;
}

/* jQuery UI Autocomplete dropdown - dark mode */
/* IMPORTANT: Autocomplete is appended directly to <body> by jQuery UI, not inside #home */
/* So we CANNOT use body.dark-mode#home - must use body.dark-mode directly */

/* Override jQuery UI .ui-widget-content color (#222222) */
body.dark-mode .ui-widget-content,
body.dark-mode .ui-widget-content.ui-autocomplete,
body.dark-mode .ui-autocomplete.ui-widget-content {
    color: #ffffff !important;
}

/* Autocomplete container */
body.dark-mode .ui-autocomplete,
body.dark-mode ul.ui-autocomplete,
body.dark-mode ul.ui-autocomplete.ui-menu,
body.dark-mode ul.ui-menu.ui-autocomplete {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: #475569 !important;
    border-top: 1px solid #475569 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Autocomplete li items - ALL items */
body.dark-mode .ui-autocomplete li,
body.dark-mode .ui-autocomplete li.ui-menu-item,
body.dark-mode .ui-autocomplete li.ui-widget-content,
body.dark-mode ul.ui-menu li,
body.dark-mode ul.ui-menu li.ui-menu-item,
body.dark-mode ul.ui-menu li.ui-widget-content {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

/* Autocomplete item wrapper - ALL items */
body.dark-mode .ui-autocomplete .ui-menu-item-wrapper,
body.dark-mode .ui-autocomplete li .ui-menu-item-wrapper,
body.dark-mode ul.ui-menu .ui-menu-item-wrapper,
body.dark-mode ul.ui-menu li .ui-menu-item-wrapper {
    color: #ffffff !important;
    background-color: #1e293b !important;
    background: #1e293b !important;
}

/* Force ALL text in autocomplete items to be white - override jQuery UI defaults */
body.dark-mode .ui-autocomplete li,
body.dark-mode .ui-autocomplete li *,
body.dark-mode .ui-autocomplete li > span,
body.dark-mode .ui-autocomplete li > div,
body.dark-mode .ui-autocomplete li .ac-label,
body.dark-mode .ui-autocomplete li .ac-value,
body.dark-mode .ui-autocomplete span,
body.dark-mode .ui-autocomplete div,
body.dark-mode .ui-autocomplete p,
body.dark-mode .ui-widget-content.ui-autocomplete *,
body.dark-mode ul.ui-menu li,
body.dark-mode ul.ui-menu li *,
body.dark-mode ul.ui-menu li > span,
body.dark-mode ul.ui-menu span,
body.dark-mode ul.ui-menu div,
body.dark-mode ul.ui-menu p {
    color: #ffffff !important;
}

/* Hover and active states */
body.dark-mode .ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
body.dark-mode .ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
body.dark-mode .ui-autocomplete .ui-state-active,
body.dark-mode .ui-autocomplete .ui-state-focus,
body.dark-mode ul.ui-menu .ui-menu-item-wrapper.ui-state-active,
body.dark-mode ul.ui-menu .ui-menu-item-wrapper.ui-state-focus,
body.dark-mode ul.ui-menu .ui-state-active,
body.dark-mode ul.ui-menu .ui-state-focus,
body.dark-mode .ui-autocomplete li.ui-state-active,
body.dark-mode .ui-autocomplete li.ui-state-focus,
body.dark-mode .ui-autocomplete li:hover {
    background-color: #3b82f6 !important;
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.dark-mode .ui-autocomplete .ui-state-active .ui-menu-item-wrapper,
body.dark-mode .ui-autocomplete .ui-state-focus .ui-menu-item-wrapper,
body.dark-mode ul.ui-menu .ui-state-active .ui-menu-item-wrapper,
body.dark-mode ul.ui-menu .ui-state-focus .ui-menu-item-wrapper,
body.dark-mode .ui-autocomplete li.ui-state-active .ui-menu-item-wrapper,
body.dark-mode .ui-autocomplete li:hover .ui-menu-item-wrapper {
    color: #ffffff !important;
    background-color: #3b82f6 !important;
    background: #3b82f6 !important;
}

/* Selected/hover state text */
body.dark-mode .ui-autocomplete .ui-state-active .ac-label,
body.dark-mode .ui-autocomplete .ui-state-active .ac-value,
body.dark-mode ul.ui-menu .ui-state-active .ac-label,
body.dark-mode ul.ui-menu .ui-state-active .ac-value,
body.dark-mode .ui-autocomplete li.ui-state-active .ac-label,
body.dark-mode .ui-autocomplete li.ui-state-active .ac-value,
body.dark-mode .ui-autocomplete li:hover .ac-label,
body.dark-mode .ui-autocomplete li:hover .ac-value {
    color: #ffffff !important;
}

/* Network List Panel - high specificity to override unified-theme */
body.dark-mode#home #tabs-2 .network-list-panel,
body.dark-mode#home #tabs-2,
body.dark-mode #tabs-2 .network-list-panel,
body.dark-mode .network-list-panel {
    background: transparent !important;
    background-color: transparent !important;
    padding: 30px !important;
    border-radius: 12px !important;
}

body.dark-mode#home #tabs-2 .network-list-panel h3,
body.dark-mode .network-list-panel h3 {
    color: var(--text-primary) !important;
}

body.dark-mode#home #tabs-2 .network-list-panel p,
body.dark-mode .network-list-panel p {
    color: var(--text-secondary) !important;
}

/* Batch Search Panel */
body.dark-mode #tabs-4 > div {
    color: var(--text-secondary) !important;
}

body.dark-mode .bgcolor {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode textarea.bgcolor {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode textarea.bgcolor::placeholder {
    color: var(--text-muted) !important;
}

body.dark-mode .batch-search-result-panel {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .batch-search-result-empty {
    color: var(--text-muted) !important;
}

body.dark-mode .batch-search-summary {
    color: var(--text-muted) !important;
}

/* Buttons - override unified-theme */
body.dark-mode .btn,
body.dark-mode .button,
body.dark-mode button,
body.dark-mode input[type="submit"] {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .btn:hover,
body.dark-mode .button:hover,
body.dark-mode button:hover,
body.dark-mode input[type="submit"]:hover {
    background: linear-gradient(180deg, var(--accent-hover), var(--accent-color)) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 12px 22px rgba(59, 130, 246, 0.25) !important;
}

body.dark-mode .btn:disabled,
body.dark-mode .button.disabled {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    color: var(--text-muted) !important;
    border-color: rgba(71, 85, 105, 0.3) !important;
    box-shadow: none !important;
    opacity: 0.6 !important;
}

/* Inputs and forms - override unified-theme */
body.dark-mode .form-group input,
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="date"],
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .bgcolor {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(71, 85, 105, 0.6) !important;
    border-radius: 14px !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-control:focus,
body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="date"]:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body.dark-mode .bgcolor:focus {
    outline: none !important;
    border-color: rgba(59, 130, 246, 0.6) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 1 !important;
}

/* Tables */
body.dark-mode .table {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .table thead th {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .table tbody td {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(51, 65, 85, 0.5) !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Alerts */
body.dark-mode .alert {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .alert-info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: var(--accent-color) !important;
    color: var(--text-secondary) !important;
}

/* Select2 Dropdowns */
body.dark-mode .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}

body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important;
}

body.dark-mode .select2-dropdown {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .select2-results__option {
    color: var(--text-primary) !important;
}

body.dark-mode .select2-results__option--highlighted {
    background-color: var(--accent-color) !important;
    color: #ffffff !important;
}

/* Headings */
body.dark-mode h3, body.dark-mode h4, body.dark-mode h5 {
    color: var(--text-primary) !important;
}

/* QR Code Container */
body.dark-mode #qr-container {
    background-color: var(--bg-secondary) !important;
    padding: 20px !important;
    border-radius: 12px !important;
}

body.dark-mode #qr-container p {
    color: var(--text-secondary) !important;
}

body.dark-mode #pay_result {
    color: var(--success-color) !important;
}

/* ===== ExtJS Trigger Buttons - Dark Mode Base Styles ===== */
body.dark-mode .x-form-trigger,
body.dark-mode .x-trigger-cell,
body.dark-mode .x-form-trigger-wrap .x-form-trigger {
    background-color: var(--bg-tertiary) !important;
    background-image: none !important;
    border-color: var(--border-color) !important;
    position: relative !important;
}

/* ===== ExtJS Spinner/Numberfield Trigger - Dark Mode ===== */
/* ExtJS spinner has TWO separate buttons: .x-form-spinner-up and .x-form-spinner-down */
body.dark-mode .x-form-trigger.x-form-spinner-up,
body.dark-mode .x-form-trigger.x-form-spinner-down {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    background-image: none !important;
    position: relative !important;
}

/* Spinner triggers should be half height each */
body.dark-mode .x-form-trigger.x-form-spinner-up,
body.dark-mode .x-form-trigger.x-form-spinner-down {
    height: 13px !important;
    line-height: 13px !important;
}

/* UP arrow - .x-form-spinner-up (the up button) */
body.dark-mode .x-form-trigger.x-form-spinner-up::after {
    content: '\25B2' !important;
    display: block !important;
    font-size: 9px !important;
    color: #60a5fa !important;
    font-weight: bold !important;
    pointer-events: none !important;
    position: absolute !important;
    top: 2px !important;
    left: 4px !important;
    width: 11px !important;
    height: 11px !important;
    line-height: 11px !important;
    text-align: center !important;
}

/* DOWN arrow - .x-form-spinner-down (the down button) */
body.dark-mode .x-form-trigger.x-form-spinner-down::after {
    content: '\25BC' !important;
    display: block !important;
    font-size: 9px !important;
    color: #60a5fa !important;
    font-weight: bold !important;
    pointer-events: none !important;
    position: absolute !important;
    top: 2px !important;
    left: 4px !important;
    width: 11px !important;
    height: 11px !important;
    line-height: 11px !important;
    text-align: center !important;
}

/* ===== ExtJS Combobox/Dropdown Trigger Arrow - Dark Mode ===== */
/* Combobox triggers should have a single DOWN arrow */
/* Target triggers that are NOT spinner and NOT combobox wrapper */
body.dark-mode .x-form-trigger-wrap:not(.x-trigger-spin) .x-form-trigger:not(.x-form-spinner-up):not(.x-form-spinner-down)::after,
body.dark-mode .x-trigger-cell:not(.x-trigger-spin):not(.x-form-spinner-up):not(.x-form-spinner-down)::after {
    content: '\25BC' !important;
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    color: #60a5fa !important;
    line-height: 1.6 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-weight: bold !important;
    pointer-events: none !important;
}

/* Forms and Inputs */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* Buttons */
body.dark-mode button,
body.dark-mode .btn,
body.dark-mode .ui-button {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode button:hover,
body.dark-mode .btn:hover,
body.dark-mode .ui-button:hover {
    background: linear-gradient(180deg, var(--accent-hover), var(--accent-color)) !important;
    border-color: var(--accent-color) !important;
}

/* Tables - high specificity to override unified-theme */
body.dark-mode table,
body.dark-mode#home table {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode th,
body.dark-mode#home th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode td,
body.dark-mode#home td {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Table links and text inside cells */
body.dark-mode table a,
body.dark-mode table td span,
body.dark-mode table td div {
    color: var(--text-primary) !important;
}

body.dark-mode tr:hover td {
    background-color: rgba(51, 65, 85, 0.7) !important;
}

/* Network list table specific hover - high specificity with dark gray-blue */
body.dark-mode#home #tabs-2 table tr:hover td,
body.dark-mode #tabs-2 table tr:hover td {
    background: rgba(51, 65, 85, 0.7) !important;
    background-color: rgba(51, 65, 85, 0.7) !important;
}

/* Batch search results table hover */
body.dark-mode #batch-search-results table tr:hover td {
    background: rgba(51, 65, 85, 0.7) !important;
    background-color: rgba(51, 65, 85, 0.7) !important;
}

/* User network table hover override */
body.dark-mode #user-network-table tbody tr:hover {
    background-color: rgba(51, 65, 85, 0.7) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Cards and Panels */
body.dark-mode .card,
body.dark-mode .panel {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 6px var(--shadow-color) !important;
}

/* Select2 Dropdown - deep dark background */
body.dark-mode .select2-dropdown,
body.dark-mode .select2-container--default .select2-results {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

body.dark-mode .select2-results__option,
body.dark-mode .select2-container--default .select2-results__option {
    color: #e2e8f0 !important;
    background-color: transparent !important;
}

body.dark-mode .select2-results__option--highlighted,
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Selected option in dropdown - darker background */
body.dark-mode .select2-results__option[aria-selected="true"],
body.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* Status badges - darker background, better contrast */
body.dark-mode .badge,
body.dark-mode .status-badge,
body.dark-mode #batch-search-results .badge,
body.dark-mode table .badge,
body.dark-mode .batch-search-status-pill,
body.dark-mode#home .batch-search-status-pill {
    background-color: #475569 !important;
    color: #f1f5f9 !important;
    border: 1px solid #64748b !important;
    font-weight: 600 !important;
}

/* Multiple/Ambiguous status badge - specific style with darker gray */
body.dark-mode .badge.multiple,
body.dark-mode .status-badge.multiple,
body.dark-mode #batch-search-results .badge.multiple,
body.dark-mode table .badge.multiple,
body.dark-mode .batch-search-status-pill.ambiguous,
body.dark-mode#home .batch-search-status-pill.ambiguous {
    background-color: #374151 !important;
    color: #f1f5f9 !important;
    border: 1px solid #4b5563 !important;
}

/* Matched status badge */
body.dark-mode .batch-search-status-pill.matched,
body.dark-mode#home .batch-search-status-pill.matched {
    background-color: #065f46 !important;
    color: #a7f3d0 !important;
    border-color: #047857 !important;
}

/* Not found status badge */
body.dark-mode .batch-search-status-pill.not_found,
body.dark-mode#home .batch-search-status-pill.not_found {
    background-color: #7f1d1d !important;
    color: #fca5a5 !important;
    border-color: #991b1b !important;
}

/* Pagination */
body.dark-mode .page-link {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--accent-color) !important;
}

body.dark-mode .page-link:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--accent-color) !important;
}

body.dark-mode .page-link.active {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}

/* ===== Settings Popups (General Settings, Profile, Password) - high specificity ===== */
body.dark-mode .profile-popup,
body.dark-mode .login-popup,
body.dark-mode .password-popup,
body.dark-mode#home .profile-popup,
body.dark-mode#home .login-popup,
body.dark-mode#home .password-popup,
body.dark-mode#home #general-settings-box {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.97)) !important;
    border-color: rgba(71, 85, 105, 0.3) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important;
    color: #f1f5f9 !important;
}

/* Override any inline background colors in popup elements */
body.dark-mode .profile-popup *,
body.dark-mode .login-popup *,
body.dark-mode .password-popup *,
body.dark-mode#home .profile-popup *,
body.dark-mode#home .login-popup *,
body.dark-mode#home .password-popup *,
body.dark-mode#home #general-settings-box * {
    /* Ensure text is visible on dark background */
}

/* General Settings specific overrides for inline styles */
body.dark-mode#home #general-settings-box h3,
body.dark-mode#home #general-settings-box label,
body.dark-mode#home #general-settings-box small {
    color: #e2e8f0 !important;
}

/* Override inline style colors in General Settings labels */
body.dark-mode#home #general-settings-box label[style*="color:#fff"],
body.dark-mode#home #general-settings-box label[style*="color: #fff"] {
    color: #e2e8f0 !important;
}

body.dark-mode#home #general-settings-box label[style*="color:#334155"],
body.dark-mode#home #general-settings-box label[style*="color: #334155"] {
    color: #cbd5e1 !important;
}

body.dark-mode#home #general-settings-box small[style*="color:#aaa"],
body.dark-mode#home #general-settings-box small[style*="color: #aaa"],
body.dark-mode#home #general-settings-box small[style*="color:#64748b"],
body.dark-mode#home #general-settings-box small[style*="color: #64748b"] {
    color: #94a3b8 !important;
}

body.dark-mode#home #general-settings-box select {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* Override inline styles on General Settings selects */
body.dark-mode#home #general-settings-box select[style*="background:#fff"],
body.dark-mode#home #general-settings-box select[style*="background: #fff"],
body.dark-mode#home #general-settings-box select[style*="border:1px solid #ddd"] {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body.dark-mode#home #general-settings-box select option {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

body.dark-mode .profile-popup h3,
body.dark-mode .password-popup h3,
body.dark-mode#home .profile-popup h3,
body.dark-mode#home .password-popup h3 {
    color: #f1f5f9 !important;
}

body.dark-mode .profile-popup input,
body.dark-mode .password-popup input,
body.dark-mode .login-popup input,
body.dark-mode#home .profile-popup input,
body.dark-mode#home .password-popup input,
body.dark-mode#home .login-popup input {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    border-radius: 4px !important;
    padding: 8px !important;
}

body.dark-mode .profile-popup input::placeholder,
body.dark-mode .password-popup input::placeholder,
body.dark-mode .login-popup input::placeholder,
body.dark-mode#home .profile-popup input::placeholder,
body.dark-mode#home .password-popup input::placeholder,
body.dark-mode#home .login-popup input::placeholder {
    color: #94a3b8 !important;
    opacity: 0.7 !important;
}

body.dark-mode .profile-popup .profile-section-title,
body.dark-mode#home .profile-popup .profile-section-title {
    color: #e2e8f0 !important;
}

body.dark-mode .profile-popup label span,
body.dark-mode#home .profile-popup label span {
    color: #cbd5e1 !important;
}

/* Profile popup inline styles override */
body.dark-mode .profile-section-group,
body.dark-mode#home .profile-section-group {
    border-bottom-color: rgba(71, 85, 105, 0.3) !important;
}

body.dark-mode .connected-account,
body.dark-mode#home .connected-account {
    border-bottom-color: rgba(71, 85, 105, 0.25) !important;
}

/* Profile popup field labels (from inline styles) */
body.dark-mode .profile-field span,
body.dark-mode#home .profile-field span {
    color: #94a3b8 !important;
}

body.dark-mode .profile-field input,
body.dark-mode#home .profile-field input {
    background: rgba(51, 65, 85, 0.96) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
    border-bottom-color: rgba(71, 85, 105, 0.6) !important;
    border-left-color: rgba(71, 85, 105, 0.6) !important;
    border-right-color: rgba(71, 85, 105, 0.6) !important;
    border-top-color: rgba(71, 85, 105, 0.6) !important;
    color: #f1f5f9 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #f1f5f9 !important;
}

/* Override inline style backgrounds in profile popup sections */
body.dark-mode#home #profile-box div[style*="background:rgba(255,255,255"],
body.dark-mode#home #profile-box div[style*="background: rgba(255,255,255"] {
    background: rgba(51, 65, 85, 0.3) !important;
}

/* Profile popup connected accounts status text */
body.dark-mode#home #profile-box span[style*="color:#aaa"],
body.dark-mode#home #profile-box span[style*="color: #aaa"] {
    color: #94a3b8 !important;
}

/* Profile popup section title colors from inline styles */
body.dark-mode#home #profile-box .profile-section-title,
body.dark-mode#home #profile-box label.profile-section-title {
    color: #e2e8f0 !important;
}

/* Readonly inputs in profile (email field) */
body.dark-mode .profile-popup input[readonly],
body.dark-mode#home .profile-popup input[readonly],
body.dark-mode .profile-popup input[readonly][style*="background"],
body.dark-mode#home .profile-popup input[readonly][style*="background"] {
    background: rgba(51, 65, 85, 0.7) !important;
    cursor: not-allowed !important;
}

/* Specific override for email field with inline background:#f5f5f5 */
body.dark-mode#home #profile-email,
body.dark-mode#home #profile-box input[readonly][style*="background:#f5f5f5"],
body.dark-mode#home #profile-box input[readonly][style*="background: #f5f5f5"] {
    background: rgba(51, 65, 85, 0.7) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
    color: #f1f5f9 !important;
}

/* Select dropdowns inside popups */
body.dark-mode .profile-popup select,
body.dark-mode .password-popup select,
body.dark-mode .login-popup select {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

body.dark-mode .profile-popup select option,
body.dark-mode .password-popup select option,
body.dark-mode .login-popup select option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* ===== Password Popup - Ultra-high specificity to override inline styles ===== */
/* Target #password-box directly with higher specificity than inline styles */
body.dark-mode#home #password-box label,
body.dark-mode#home #password-box fieldset label,
body.dark-mode#home #password-box form label {
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-opacity: 1 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}

/* Force override inline style: color:#fff on labels */
body.dark-mode#home #password-box label[style*="color:#fff"],
body.dark-mode#home #password-box label[style*="color: #fff"] {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Override inline background:#fff on inputs */
body.dark-mode#home #password-box input,
body.dark-mode#home #password-box input[type="password"],
body.dark-mode#home #password-box input[type="text"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
}

/* Override inline style: background:#fff on inputs */
body.dark-mode#home #password-box input[style*="background:#fff"],
body.dark-mode#home #password-box input[style*="background: #fff"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
}

/* Override inline style: background:#1e293b on inputs (ensure consistency) */
body.dark-mode#home #password-box input[style*="background:#1e293b"],
body.dark-mode#home #password-box input[style*="background: #1e293b"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
}

/* Override inline border styles */
body.dark-mode#home #password-box input[style*="border:1px solid #ddd"] {
    border-color: #475569 !important;
}

/* Override inline small text colors */
body.dark-mode#home #password-box small[style*="color: #aaa"],
body.dark-mode#home #password-box small[style*="color:#aaa"] {
    color: #94a3b8 !important;
}

/* Override submit button inline styles */
body.dark-mode#home #password-box button.submit,
body.dark-mode#home #password-box .submit.button {
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
}

body.dark-mode#home #password-box button.submit:hover,
body.dark-mode#home #password-box .submit.button:hover {
    background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
}

/* CRITICAL: Force password popup labels to be bright white */
body.dark-mode#home #password-box form label,
body.dark-mode#home #password-box form fieldset label,
body.dark-mode#home #password-box label[style] {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}

/* Even more specific - target the exact inline style */
body.dark-mode#home #password-box label[style*="color:#fff"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

/* Force label icons to white */
body.dark-mode#home #password-box label i,
body.dark-mode#home #password-box label i[style] {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Batch search select dropdown dark mode */
body.dark-mode .batch-search-select {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
    border-radius: 8px !important;
}

body.dark-mode .batch-search-select option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* No entity matched text */
body.dark-mode #batch-search-results span[style*="#991b1b"],
body.dark-mode .batch-search-candidate-meta {
    color: #cbd5e1 !important;
}

/* Mask overlay for popups */
body.dark-mode #mask {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ===== ExtJS Components ===== */

/* Background */
body.dark-mode html,
body.dark-mode body {
    background: 
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 30%),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.1), transparent 24%),
        linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}

/* Panels and Windows */
body.dark-mode .x-panel,
body.dark-mode .x-window {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 12px 30px var(--shadow-color) !important;
}

body.dark-mode .x-panel-body,
body.dark-mode .x-window-body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .x-panel-header,
body.dark-mode .x-window-header,
body.dark-mode .x-toolbar {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Header tools and collapse controls - restore contrast in dark mode */
body.dark-mode .x-panel-header .x-tool,
body.dark-mode .x-window-header .x-tool,
body.dark-mode .x-panel-header .x-tool-over,
body.dark-mode .x-window-header .x-tool-over {
    width: 19px !important;
    height: 19px !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.22), rgba(71, 85, 105, 0.24)) !important;
    border: 1px solid rgba(148, 163, 184, 0.42) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1px 3px rgba(2, 6, 23, 0.35) !important;
}

body.dark-mode .x-panel-header .x-tool img,
body.dark-mode .x-window-header .x-tool img {
    opacity: 1 !important;
    filter: brightness(0) invert(1) contrast(1.08) !important;
}

body.dark-mode .x-panel-header .x-tool img[class*="x-tool-collapse"],
body.dark-mode .x-window-header .x-tool img[class*="x-tool-collapse"],
body.dark-mode .x-panel-header .x-tool img[class*="x-tool-expand"],
body.dark-mode .x-window-header .x-tool img[class*="x-tool-expand"] {
    background-image: none !important;
    background-color: #e2e8f0 !important;
    display: block !important;
    margin: 4px auto 0 !important;
    filter: none !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18) !important;
}

body.dark-mode .x-panel-header .x-tool img.x-tool-collapse-top,
body.dark-mode .x-window-header .x-tool img.x-tool-collapse-top,
body.dark-mode .x-panel-header .x-tool img.x-tool-expand-top,
body.dark-mode .x-window-header .x-tool img.x-tool-expand-top {
    width: 10px !important;
    height: 7px !important;
    clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
}

body.dark-mode .x-panel-header .x-tool img.x-tool-collapse-bottom,
body.dark-mode .x-window-header .x-tool img.x-tool-collapse-bottom,
body.dark-mode .x-panel-header .x-tool img.x-tool-expand-bottom,
body.dark-mode .x-window-header .x-tool img.x-tool-expand-bottom {
    width: 10px !important;
    height: 7px !important;
    clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
}

body.dark-mode .x-panel-header .x-tool img.x-tool-collapse-left,
body.dark-mode .x-window-header .x-tool img.x-tool-collapse-left,
body.dark-mode .x-panel-header .x-tool img.x-tool-expand-left,
body.dark-mode .x-window-header .x-tool img.x-tool-expand-left {
    width: 7px !important;
    height: 10px !important;
    clip-path: polygon(0 50%, 100% 0, 100% 100%) !important;
}

body.dark-mode .x-panel-header .x-tool img.x-tool-collapse-right,
body.dark-mode .x-window-header .x-tool img.x-tool-collapse-right,
body.dark-mode .x-panel-header .x-tool img.x-tool-expand-right,
body.dark-mode .x-window-header .x-tool img.x-tool-expand-right {
    width: 7px !important;
    height: 10px !important;
    clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
}

body.dark-mode .x-panel-header .x-tool img.x-tool-close,
body.dark-mode .x-window-header .x-tool img.x-tool-close {
    width: 11px !important;
    height: 11px !important;
    margin: 3px auto 0 !important;
    background-color: transparent !important;
    background-image:
        linear-gradient(45deg, transparent 42%, #e2e8f0 42%, #e2e8f0 58%, transparent 58%),
        linear-gradient(-45deg, transparent 42%, #e2e8f0 42%, #e2e8f0 58%, transparent 58%) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    filter: none !important;
}

body.dark-mode .x-panel-header .x-tool-over,
body.dark-mode .x-window-header .x-tool-over {
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.32), rgba(59, 130, 246, 0.28)) !important;
    border-color: rgba(96, 165, 250, 0.55) !important;
}

/* Splitter handles - make the mini collapse controls visible on dark surfaces */
body.dark-mode .x-splitter,
body.dark-mode .x-splitter-horizontal,
body.dark-mode .x-splitter-vertical {
    background-color: rgba(30, 41, 59, 0.92) !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
}

body.dark-mode .x-splitter .x-collapse-el,
body.dark-mode .x-layout-split-left,
body.dark-mode .x-layout-split-right,
body.dark-mode .x-layout-split-top,
body.dark-mode .x-layout-split-bottom {
    position: relative !important;
    border-radius: 999px !important;
    background-color: rgba(148, 163, 184, 0.18) !important;
    background-image: none !important;
    border: 1px solid rgba(148, 163, 184, 0.38) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 6px rgba(2, 6, 23, 0.35) !important;
    filter: none !important;
}

body.dark-mode .x-splitter:hover .x-collapse-el,
body.dark-mode .x-splitter .x-collapse-el:hover,
body.dark-mode .x-splitter:hover .x-layout-split-left,
body.dark-mode .x-splitter:hover .x-layout-split-right,
body.dark-mode .x-splitter:hover .x-layout-split-top,
body.dark-mode .x-splitter:hover .x-layout-split-bottom {
    background-color: rgba(96, 165, 250, 0.22) !important;
    border-color: rgba(96, 165, 250, 0.52) !important;
}

body.dark-mode .x-layout-split-left::before,
body.dark-mode .x-layout-split-right::before,
body.dark-mode .x-layout-split-top::before,
body.dark-mode .x-layout-split-bottom::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    margin: auto !important;
    background: #e2e8f0 !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18) !important;
}

body.dark-mode .x-layout-split-top::before {
    width: 10px !important;
    height: 7px !important;
    clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
}

body.dark-mode .x-layout-split-bottom::before {
    width: 10px !important;
    height: 7px !important;
    clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
}

body.dark-mode .x-layout-split-left::before {
    width: 7px !important;
    height: 10px !important;
    clip-path: polygon(0 50%, 100% 0, 100% 100%) !important;
}

body.dark-mode .x-layout-split-right::before {
    width: 7px !important;
    height: 10px !important;
    clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
}

/* Graph Legend Window - dark mode (ultra-high specificity to override ext.html !important styles) */
body.dark-mode .graph-legend-window,
body.dark-mode div.graph-legend-window,
body.dark-mode .x-window.graph-legend-window {
    border-color: var(--border-color) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4) !important;
    border-radius: 18px !important;
}

body.dark-mode .graph-legend-window .x-window-body,
body.dark-mode .x-window.graph-legend-window .x-window-body,
body.dark-mode .graph-legend-window .x-window-body-default,
body.dark-mode .x-window-body.graph-legend-window,
body.dark-mode div.graph-legend-window div.x-window-body,
body.dark-mode .x-window.graph-legend-window > .x-window-body,
body.dark-mode .graph-legend-window > .x-window-body {
    background: linear-gradient(180deg, var(--bg-secondary), var(--bg-tertiary)) !important;
    background-color: var(--bg-secondary) !important;
    border: none !important;
}

/* Inner legend container - override ext.html color: #1f2937 */
body.dark-mode .graph-legend,
body.dark-mode .graph-legend-window .graph-legend,
body.dark-mode div.graph-legend {
    color: var(--text-primary) !important;
    background: transparent !important;
}

/* Override ext.html .graph-legend__heading color: #0f172a */
body.dark-mode .graph-legend__heading,
body.dark-mode .graph-legend-window .graph-legend__heading {
    color: var(--text-primary) !important;
}

/* Override ext.html .graph-legend__badge background: rgba(37,99,235,0.1); color: #1d4ed8 */
body.dark-mode .graph-legend__badge,
body.dark-mode .graph-legend-window .graph-legend__badge {
    background: rgba(59, 130, 246, 0.2) !important;
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

/* Override ext.html .graph-legend__header border-bottom */
body.dark-mode .graph-legend__header,
body.dark-mode .graph-legend-window .graph-legend__header {
    border-bottom-color: var(--border-color) !important;
}

/* Override ext.html .graph-legend__title color: #64748b */
body.dark-mode .graph-legend__title,
body.dark-mode .graph-legend-window .graph-legend__title {
    color: var(--text-muted) !important;
}

/* Override ext.html .graph-legend__item hover background */
body.dark-mode .graph-legend__item,
body.dark-mode .graph-legend-window .graph-legend__item {
    background: transparent !important;
}

/* Override ext.html .graph-legend__item span color: #1e293b */
body.dark-mode .graph-legend__item span,
body.dark-mode .graph-legend-window .graph-legend__item span {
    color: var(--text-primary) !important;
}

body.dark-mode .graph-legend__item:hover,
body.dark-mode .graph-legend-window .graph-legend__item:hover {
    background: rgba(51, 65, 85, 0.6) !important;
}

/* Override ext.html .graph-legend__section border-top */
body.dark-mode .graph-legend__section + .graph-legend__section,
body.dark-mode .graph-legend-window .graph-legend__section + .graph-legend__section {
    border-top-color: var(--border-color) !important;
}

/* Legacy table-based legend (GraphLegendWindow.js) */
body.dark-mode .graph-legend-window table,
body.dark-mode .graph-legend-window table td,
body.dark-mode .graph-legend-window table tr td:last-child {
    color: var(--text-primary) !important;
    background: transparent !important;
}

/* Tabs */
body.dark-mode .x-tab-bar {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-tab,
body.dark-mode .x-tab-default-top,
body.dark-mode .x-tab-default-bottom {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-tab button,
body.dark-mode .x-tab .x-tab-inner {
    color: var(--text-secondary) !important;
}

body.dark-mode .x-tab-active,
body.dark-mode .x-tab-default-top-active,
body.dark-mode .x-tab-default-bottom-active {
    background: linear-gradient(180deg, var(--accent-color), var(--accent-hover)) !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .x-tab-active button,
body.dark-mode .x-tab-active .x-tab-inner {
    color: #ffffff !important;
}

/* Tab close button - dark mode */
body.dark-mode .x-tab-close-btn {
    background-image: none !important;
    filter: none !important;
    opacity: 0.9 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-align: center !important;
}

body.dark-mode .x-tab-close-btn::before {
    content: '\00d7' !important;
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    line-height: 11px !important;
    font-weight: bold !important;
}

body.dark-mode a.x-tab-close-btn:hover {
    opacity: 1 !important;
    color: #ffffff !important;
}

/* For disabled tabs */
body.dark-mode .x-tab-default-disabled a.x-tab-close-btn {
    opacity: 0.4 !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Buttons */
body.dark-mode .x-btn-default-toolbar-small {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 6px 14px var(--shadow-color) !important;
}

body.dark-mode .x-btn-default-toolbar-small .x-btn-inner {
    color: var(--text-primary) !important;
}

body.dark-mode .x-btn-default-toolbar-small-over {
    background: linear-gradient(180deg, var(--accent-hover), var(--accent-color)) !important;
    border-color: var(--accent-color) !important;
}

/* Split button dropdown arrow - dark mode */
body.dark-mode .x-btn-split-right,
body.dark-mode .x-btn-over .x-btn-split-right,
body.dark-mode .x-btn-menu-active .x-btn-split-right,
body.dark-mode .x-btn-pressed .x-btn-split-right {
    background-image: none !important;
    position: relative;
}

body.dark-mode .x-btn-split-right::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0 !important;
    height: 0 !important;
    transform: translate(-50%, -35%);
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 6px solid rgba(255, 255, 255, 0.86) !important;
    line-height: 0 !important;
    pointer-events: none !important;
}

body.dark-mode .x-btn-over .x-btn-split-right::after,
body.dark-mode .x-btn-menu-active .x-btn-split-right::after,
body.dark-mode .x-btn-pressed .x-btn-split-right::after {
    border-top-color: #ffffff !important;
}

/* Toolbar split button arrow */
body.dark-mode .x-toolbar .x-btn-split-right,
body.dark-mode .x-toolbar .x-btn-over .x-btn-split-right {
    background-image: none !important;
}

body.dark-mode .report-chat-export .x-btn-arrow-right {
    background-image: none !important;
    position: relative !important;
    padding-right: 14px !important;
}

body.dark-mode .report-chat-export .x-btn-arrow-right::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    width: 0 !important;
    height: 0 !important;
    transform: translateY(-40%) !important;
    border-left-width: 3px !important;
    border-right-width: 3px !important;
    border-top-width: 5px !important;
    border-left-style: solid !important;
    border-right-style: solid !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-style: solid !important;
    border-top-color: rgba(255, 255, 255, 0.92) !important;
    line-height: 0 !important;
    pointer-events: none !important;
}

body.dark-mode .report-chat-export.x-btn-over .x-btn-arrow-right::after,
body.dark-mode .report-chat-export.x-btn-menu-active .x-btn-arrow-right::after,
body.dark-mode .report-chat-export.x-btn-pressed .x-btn-arrow-right::after {
    border-top-color: #ffffff !important;
}

body.dark-mode .pathfinder-report-btn .x-btn-arrow-right {
    background-image: none !important;
    position: relative !important;
    display: inline-block !important;
    width: 14px !important;
    min-width: 14px !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

body.dark-mode .pathfinder-report-btn .x-btn-arrow-right::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 0 !important;
    height: 0 !important;
    transform: translate(-50%, -30%) !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 6px solid rgba(255, 255, 255, 0.92) !important;
    pointer-events: none !important;
}

body.dark-mode .pathfinder-report-btn.x-btn-over .x-btn-arrow-right::after,
body.dark-mode .pathfinder-report-btn.x-btn-menu-active .x-btn-arrow-right::after,
body.dark-mode .pathfinder-report-btn.x-btn-pressed .x-btn-arrow-right::after {
    border-top-color: #ffffff !important;
}

/* Split button bottom arrow */
body.dark-mode .x-btn-split-bottom,
body.dark-mode .x-btn-over .x-btn-split-bottom,
body.dark-mode .x-btn-menu-active .x-btn-split-bottom,
body.dark-mode .x-btn-pressed .x-btn-split-bottom {
    background-image: none !important;
}

/* Grids */
body.dark-mode .x-grid-view {
    background-color: var(--bg-secondary) !important;
}

body.dark-mode .x-grid-body {
    background-color: var(--bg-secondary) !important;
}

body.dark-mode .x-grid-header-ct {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-grid-row {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-grid-cell {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Special cells: row numberer column, checkbox column */
body.dark-mode .x-grid-cell-special,
body.dark-mode .x-grid-cell-row-checker,
body.dark-mode .x-grid-row-numberer,
body.dark-mode .x-row-numberer {
    background: linear-gradient(left, var(--bg-tertiary), var(--bg-secondary)) !important;
    background: linear-gradient(to right, var(--bg-tertiary), var(--bg-secondary)) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Grid checkbox column cells */
body.dark-mode .x-grid-cell-row-checker .x-grid-cell-inner,
body.dark-mode .x-grid-cell-checkcolumn .x-grid-cell-inner,
body.dark-mode .x-grid-cell.x-grid-cell-row-checker,
body.dark-mode .x-grid-cell.x-grid-cell-checkcolumn {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

/* Checkbox styling in dark mode */
body.dark-mode .x-grid-checkcolumn,
body.dark-mode .x-grid-checkcolumn-cell-inner,
body.dark-mode input[type="checkbox"] {
    accent-color: #60a5fa !important;
}

body.dark-mode .x-grid-checkcolumn .x-grid-checkcolumn-cell-inner {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #475569 !important;
}

body.dark-mode .x-grid-checkcolumn .x-grid-checkcolumn-cell-inner.x-grid-checkcolumn-checked {
    background-color: #60a5fa !important;
    border-color: #60a5fa !important;
}

/* Grid row checker / checkbox column - ensure visibility in dark mode */
body.dark-mode .x-grid-row-checker,
body.dark-mode .x-grid-checkcolumn,
body.dark-mode .x-grid-cell.x-grid-checkcolumn-cell {
    background-color: var(--bg-tertiary) !important;
}

/* ===== ExtJS Radio Buttons - Dark Mode ===== */
/* Radio button base style - circular border */
body.dark-mode input.x-form-radio[type="button"],
body.dark-mode .x-form-radio {
    background-color: rgba(15, 23, 42, 0.9) !important;
    background-image: none !important;
    background: rgba(15, 23, 42, 0.9) !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    box-shadow: none !important;
    outline: none !important;
    overflow: hidden !important;
}

/* Radio button hover */
body.dark-mode input.x-form-radio[type="button"]:hover,
body.dark-mode .x-form-radio:hover {
    border-color: #60a5fa !important;
}

/* CHECKED state: Draw blue dot on parent container using pseudo-element */
body.dark-mode .x-form-cb-checked,
body.dark-mode .x-radio-checked {
    position: relative !important;
}

/* Blue dot on parent */
body.dark-mode .x-form-cb-checked::after,
body.dark-mode .x-radio-checked::after {
    content: '' !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #3b82f6 !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    z-index: 100 !important;
    pointer-events: none !important;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.8) !important;
}

/* Also try to style the input itself */
body.dark-mode .x-form-cb-checked input.x-form-radio[type="button"],
body.dark-mode .x-form-cb-checked .x-form-radio,
body.dark-mode input.x-form-radio.x-form-cb-checked,
body.dark-mode .x-radio-checked input.x-form-radio[type="button"] {
    background-color: #3b82f6 !important;
    background-image: none !important;
    background: #3b82f6 !important;
    border: 3px solid #93c5fd !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.9) !important;
}

/* Radio label text visibility */
body.dark-mode .x-form-cb-label,
body.dark-mode .x-form-cb-label-after,
body.dark-mode .x-form-cb-label-before {
    color: #e2e8f0 !important;
}

/* Radio group container */
body.dark-mode .x-form-radio-group,
body.dark-mode .x-checkboxgroup-form-item {
    background-color: transparent !important;
}
/* Unchecked state - strong visible border */
body.dark-mode .x-grid-row-checker,
body.dark-mode .x-grid-cell-row-checker .x-grid-cell-inner,
/* ===== Grid Row Checker (Checkbox Column) - Dark Mode ===== */
/* Base checkbox style - UNCHECKED */
body.dark-mode .x-grid-row-checker,
body.dark-mode .x-grid-row:not(.x-grid-row-selected) .x-grid-row-checker {
    background-color: rgba(15, 23, 42, 0.8) !important;
    background-image: none !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 3px !important;
    width: 16px !important;
    height: 16px !important;
    margin: 1px auto !important;
    display: inline-block !important;
    position: relative !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* CHECKED checkbox - WHITE background with blue border */
body.dark-mode .x-grid-row-selected .x-grid-row-checker,
body.dark-mode .x-grid-row-checker.x-grid-row-checker-checked,
body.dark-mode .x-grid-row-checker[checked],
body.dark-mode .x-grid-row-checker.x-item-checked {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.8) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* CHECKMARK for checked state - target ALL possible structures */
body.dark-mode .x-grid-row-selected .x-grid-row-checker::after,
body.dark-mode .x-grid-row-checker.x-grid-row-checker-checked::after,
body.dark-mode .x-grid-row-checker[checked]::after,
body.dark-mode .x-grid-row-checker.x-item-checked::after {
    content: '\2713' !important;
    color: #3b82f6 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    display: block !important;
    text-align: center !important;
    line-height: 16px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Additional override for ExtJS checkbox cell inner content */
body.dark-mode .x-grid-cell-row-checker .x-grid-cell-inner {
    text-align: center !important;
    padding: 0 !important;
    vertical-align: middle !important;
    background: transparent !important;
}

/* 普通checkbox选中状态 - 高对比度 */
body.dark-mode .x-grid-checkcolumn .x-grid-checkcolumn-cell-inner.x-grid-checkcolumn-checked {
    background-color: #ffffff !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.9) !important;
    background-image: none !important;
}

/* Dark mode下修复边标签显示 - 深色背景白色文字 */
body.dark-mode g.edge-label rect.edge-label-bg {
    fill: rgba(15, 23, 42, 0.9) !important; /* 深色半透明背景 */
    stroke: rgba(71, 85, 105, 0.8) !important; /* 深色边框 */
}

body.dark-mode g.edge-label text.edge-label-text {
    fill: #ffffff !important; /* 白色文字 */
    stroke: #0f172a !important; /* 深色文字描边增加对比度 */
    stroke-width: 2px !important;
    paint-order: stroke fill !important;
}

/* Dark mode下内容区链接样式 - 明显可点击，排除顶部导航栏 */
body.dark-mode .x-panel-body a:not(.x-btn),
body.dark-mode #mainContent a:not(.x-btn),
body.dark-mode .x-window-body a:not(.x-btn) {
    color: #60a5fa !important; /* 亮蓝色，和浅色模式的链接颜色一致 */
    text-decoration: underline !important; /* 下划线，明确是可点击链接 */
    font-weight: 500 !important; /* 稍粗，更醒目 */
}

body.dark-mode .x-panel-body a:not(.x-btn):hover,
body.dark-mode #mainContent a:not(.x-btn):hover,
body.dark-mode .x-window-body a:not(.x-btn):hover {
    color: #93c5fd !important; /* 悬停时更亮的蓝色 */
    text-decoration: underline !important;
}

/* 顶部导航栏链接保持原样，不应用上面的样式 */
body.dark-mode .myheaderNav a,
body.dark-mode #myheader a {
    color: rgba(255,255,255,0.9) !important;
    text-decoration: none !important;
    font-weight: bold !important; /* 恢复原来的粗体 */
    font-size: inherit !important; /* 继承父元素的字体大小，和原来完全一致 */
    font-family: inherit !important; /* 继承字体，保持原样 */
    line-height: inherit !important; /* 继承行高 */
}

body.dark-mode .x-grid-checkcolumn .x-grid-cell-inner {
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

/* Grid checkbox column (checkcolumn) - style actual ExtJS checkbox rendering in dark mode */
body.dark-mode .x-grid-checkcolumn .x-grid-checkcolumn-cell-inner {
    cursor: pointer;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    text-align: center;
    vertical-align: middle;
    position: relative !important;
    box-sizing: border-box !important;
    border-radius: 3px !important;
}

/* Unchecked checkbox - bright border visible on dark background */
body.dark-mode .x-grid-checkcolumn .x-grid-checkcolumn-cell-inner:not(.x-grid-checkcolumn-checked) {
    border: 2px solid #e2e8f0 !important;
    border-radius: 3px !important;
    width: 16px !important;
    height: 16px !important;
    background-color: rgba(15, 23, 42, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) !important;
}

/* Checked checkbox - WHITE background for maximum contrast, with blue checkmark */
body.dark-mode .x-grid-checkcolumn .x-grid-checkcolumn-cell-inner.x-grid-checkcolumn-checked,
body.dark-mode .x-grid-checkcolumn-checked .x-grid-checkcolumn-cell-inner {
    background-color: #ffffff !important;
    border: 2px solid #3b82f6 !important;
    border-radius: 3px !important;
    width: 16px !important;
    height: 16px !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.8), 0 0 2px rgba(255, 255, 255, 0.3) !important;
}

/* Checkmark symbol for checked state - force visibility */
body.dark-mode .x-grid-checkcolumn .x-grid-checkcolumn-cell-inner.x-grid-checkcolumn-checked::after,
body.dark-mode .x-grid-checkcolumn-checked .x-grid-checkcolumn-cell-inner::after,
body.dark-mode .x-grid-checkcolumn .x-grid-cell-inner.x-grid-checkcolumn-checked::after,
body.dark-mode .x-grid-cell-inner.x-grid-checkcolumn-checked::after {
    content: '\2713' !important;
    color: #3b82f6 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    display: block !important;
    text-align: center !important;
    line-height: 16px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* Force ExtJS checkcolumn inner to allow pseudo-element */
body.dark-mode .x-grid-checkcolumn .x-grid-checkcolumn-cell-inner,
body.dark-mode .x-grid-checkcolumn .x-grid-cell-inner {
    position: relative !important;
}

/* Ensure checkmark is not hidden by ExtJS background images */
body.dark-mode .x-grid-checkcolumn .x-grid-checkcolumn-cell-inner.x-grid-checkcolumn-checked,
body.dark-mode .x-grid-checkcolumn-checked .x-grid-checkcolumn-cell-inner,
body.dark-mode .x-grid-checkcolumn .x-grid-cell-inner.x-grid-checkcolumn-checked,
body.dark-mode .x-grid-cell-inner.x-grid-checkcolumn-checked {
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* In Graph / Not Shown badge styles - dark mode */
body.dark-mode .x-grid-cell-inner .badge-in-graph,
body.dark-mode .x-grid-cell .badge-in-graph,
body.dark-mode .badge-in-graph {
    display: inline-block !important;
    padding: 1px 8px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    background: #059669 !important;
    background-color: #059669 !important;
    color: #ffffff !important;
}

body.dark-mode .x-grid-cell-inner .badge-not-shown,
body.dark-mode .x-grid-cell .badge-not-shown,
body.dark-mode .badge-not-shown {
    display: inline-block !important;
    padding: 1px 8px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    background: #475569 !important;
    background-color: #475569 !important;
    color: #e2e8f0 !important;
}

/* Row numberer text */
body.dark-mode .x-grid-row-numberer .x-grid-cell-inner,
body.dark-mode .x-row-numberer .x-grid-cell-inner {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
}

body.dark-mode .x-grid-row-alt {
    background-color: var(--bg-tertiary) !important;
}

body.dark-mode .x-grid-row-over {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

body.dark-mode .x-grid-row-selected {
    background-color: rgba(59, 130, 246, 0.2) !important;
    border-color: var(--accent-color) !important;
}

body.dark-mode .x-column-header {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .x-column-header-over,
body.dark-mode .x-column-header-open,
body.dark-mode .x-column-header-sort-ASC,
body.dark-mode .x-column-header-sort-DESC {
    background: linear-gradient(180deg, #334155, #243246) !important;
    background-color: #2b384d !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
    box-shadow: inset 0 -2px 0 rgba(96, 165, 250, 0.18) !important;
}

body.dark-mode .x-column-header-text {
    color: var(--text-primary) !important;
}

/* Column header trigger button (menu dropdown arrow) - dark mode */
body.dark-mode .x-column-header-trigger,
body.dark-mode .x-column-header-over .x-column-header-trigger,
body.dark-mode .x-column-header-open .x-column-header-trigger {
    background-image: none !important;
    background-color: rgba(30, 41, 59, 0.94) !important;
    border-left: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.04) !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 22px !important;
    height: 100% !important;
    z-index: 2 !important;
}

body.dark-mode .x-column-header-trigger::after,
body.dark-mode .x-column-header-over .x-column-header-trigger::after,
body.dark-mode .x-column-header-open .x-column-header-trigger::after {
    content: '\25BE' !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    z-index: 3 !important;
}

body.dark-mode .x-column-header-over .x-column-header-trigger::after,
body.dark-mode .x-column-header-open .x-column-header-trigger::after {
    color: #ffffff !important;
}

body.dark-mode .x-column-header-over .x-column-header-trigger,
body.dark-mode .x-column-header-open .x-column-header-trigger {
    background-color: rgba(71, 85, 105, 0.72) !important;
    border-left-color: rgba(148, 163, 184, 0.28) !important;
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.05),
        inset 0 -2px 0 rgba(96, 165, 250, 0.18) !important;
}

/* Sort direction icons - dark mode */
body.dark-mode .x-column-header-sort-ASC .x-column-header-text {
    background-image: none !important;
    padding-right: 16px !important;
    position: relative;
}

body.dark-mode .x-column-header-sort-ASC .x-column-header-text::after {
    content: '\25B2' !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 10px !important;
}

body.dark-mode .x-column-header-sort-DESC .x-column-header-text {
    background-image: none !important;
    padding-right: 16px !important;
    position: relative;
}

body.dark-mode .x-column-header-sort-DESC .x-column-header-text::after {
    content: '\25BC' !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 10px !important;
}

/* Grid header row container */
body.dark-mode .x-grid-header-row {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    background-color: var(--bg-tertiary) !important;
}

/* Grid special cells: row numberer, checkbox, action columns */
body.dark-mode .x-grid-cell-special,
body.dark-mode .x-grid-cell-row-checker,
body.dark-mode .x-grid-row-numberer,
body.dark-mode .x-row-numberer,
body.dark-mode .x-grid-cell-row-numberer,
body.dark-mode .x-grid-dirty-cell {
    background-color: var(--bg-tertiary) !important;
    background: linear-gradient(to right, var(--bg-tertiary), var(--bg-secondary)) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .x-grid-row-numberer .x-grid-cell-inner,
body.dark-mode .x-row-numberer .x-grid-cell-inner {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
}

/* Grid header column headers - top row */
body.dark-mode .x-grid-header-ct {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-grid-header-ct .x-column-header {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    background-color: var(--bg-tertiary) !important;
}

/* AI Assistant and other panel content areas */
body.dark-mode .x-panel-body-default,
body.dark-mode .x-panel-body-framed,
body.dark-mode .x-panel-body-default-framed,
body.dark-mode .x-panel-body-default-body,
body.dark-mode .x-panel-body-default-frame-info,
body.dark-mode .x-panel-body,
body.dark-mode .x-panel .x-panel-body,
body.dark-mode .x-panel-default .x-panel-body,
body.dark-mode .x-panel-framed .x-panel-body {
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* AI Assistant specific - override light backgrounds */
body.dark-mode .x-panel-body-default > *,
body.dark-mode .x-panel-body > *,
body.dark-mode #ai-assistant-panel,
body.dark-mode .ai-assistant-container {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Force all inner divs in panel body to be dark */
body.dark-mode .x-panel-body-default div,
body.dark-mode .x-panel-body div,
body.dark-mode .x-panel-body-default span,
body.dark-mode .x-panel-body span {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* AI Assistant header text */
body.dark-mode .x-panel-body-default h1,
body.dark-mode .x-panel-body-default h2,
body.dark-mode .x-panel-body-default h3,
body.dark-mode .x-panel-body h1,
body.dark-mode .x-panel-body h2,
body.dark-mode .x-panel-body h3 {
    color: #e2e8f0 !important;
}

/* ExtJS component inner containers */
body.dark-mode .x-component,
body.dark-mode .x-box-inner,
body.dark-mode .x-container,
body.dark-mode .x-fit-item {
    background-color: transparent !important;
}

/* AI chat/message areas */
body.dark-mode .x-message-box,
body.dark-mode .x-msg-box .x-msg-box-body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* AI Assistant content area - fix white background */
body.dark-mode .report-chat-bubble--assistant,
body.dark-mode .report-chat-message--assistant,
body.dark-mode .report-chat-bubble--assistant *,
body.dark-mode .report-chat-message--assistant * {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .report-chat-bubble--assistant h1,
body.dark-mode .report-chat-bubble--assistant h2,
body.dark-mode .report-chat-bubble--assistant h3,
body.dark-mode .report-chat-bubble--assistant h4,
body.dark-mode .report-chat-bubble--assistant p,
body.dark-mode .report-chat-bubble--assistant span,
body.dark-mode .report-chat-bubble--assistant div {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

/* AI Assistant content area - fix white background */
body.dark-mode .report-chat-bubble--assistant,
body.dark-mode .report-chat-message--assistant,
body.dark-mode .report-chat-bubble--assistant *,
body.dark-mode .report-chat-message--assistant * {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .report-chat-bubble--assistant h1,
body.dark-mode .report-chat-bubble--assistant h2,
body.dark-mode .report-chat-bubble--assistant h3,
body.dark-mode .report-chat-bubble--assistant h4,
body.dark-mode .report-chat-bubble--assistant p,
body.dark-mode .report-chat-bubble--assistant span,
body.dark-mode .report-chat-bubble--assistant div {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

/* AI Assistant content area - fix white background */
body.dark-mode .report-chat-bubble--assistant,
body.dark-mode .report-chat-message--assistant,
body.dark-mode .report-chat-bubble--assistant *,
body.dark-mode .report-chat-message--assistant * {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .report-chat-bubble--assistant h1,
body.dark-mode .report-chat-bubble--assistant h2,
body.dark-mode .report-chat-bubble--assistant h3,
body.dark-mode .report-chat-bubble--assistant h4,
body.dark-mode .report-chat-bubble--assistant p,
body.dark-mode .report-chat-bubble--assistant span,
body.dark-mode .report-chat-bubble--assistant div {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

/* Override any remaining white/light areas in ExtJS panels */
body.dark-mode .x-panel .x-panel-body-default,
body.dark-mode .x-window .x-window-body,
body.dark-mode .x-panel .x-panel-body,
body.dark-mode .x-window .x-panel-body,
body.dark-mode .x-container .x-container,
body.dark-mode .x-box-target {
    background-color: var(--bg-secondary) !important;
}

/* AI Assistant and Report chat content areas - force dark background */
body.dark-mode .x-panel-body-default,
body.dark-mode .x-panel-body,
body.dark-mode .x-panel-default .x-panel-body,
body.dark-mode .report-chat-area,
body.dark-mode .x-panel-body > div,
body.dark-mode .x-panel-body-default > div {
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
}

/* Force all inner elements in panel body to have transparent background */
body.dark-mode .x-panel-body-default *,
body.dark-mode .x-panel-body * {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--text-primary) !important;
}

/* Report chat header and status - force opaque background */
body.dark-mode .report-chat-header,
body.dark-mode .report-chat-headrow,
body.dark-mode .report-chat-headmeta,
body.dark-mode .report-chat-title,
body.dark-mode .report-chat-subtitle,
body.dark-mode .report-chat-status {
    background-color: #1e293b !important; /* 完全不透明的深色背景 */
    background: #1e293b !important; /* 覆盖原来的transparent透明设置 */
    background-image: none !important; /* 移除任何渐变 */
    opacity: 1 !important; /* 强制不透明 */
    color: var(--text-primary) !important;
}

/* Override the .x-panel-body * transparent rule for report headers */
body.dark-mode .x-panel-body .report-chat-header,
body.dark-mode .x-panel-body .report-chat-headrow,
body.dark-mode .x-panel-body .report-chat-headmeta {
    background-color: #1e293b !important;
    background: #1e293b !important;
    background-image: none !important;
    opacity: 1 !important;
}

body.dark-mode .report-chat-title {
    color: #e2e8f0 !important;
    font-weight: 700;
}

body.dark-mode .report-chat-subtitle {
    color: #94a3b8 !important;
}

/* Disabled toolbar buttons - fix dark text on dark button */
body.dark-mode .x-btn-disabled,
body.dark-mode .x-item-disabled,
body.dark-mode .x-btn-default-toolbar-small.x-btn-disabled,
body.dark-mode .x-btn-default-toolbar-medium.x-btn-disabled,
body.dark-mode .x-btn-default-toolbar-large.x-btn-disabled {
    background: linear-gradient(180deg, #475569, #334155) !important;
    border-color: #64748b !important;
    opacity: 0.7 !important;
}

body.dark-mode .x-btn-disabled .x-btn-inner,
body.dark-mode .x-item-disabled .x-btn-inner,
body.dark-mode .x-btn-default-toolbar-small.x-btn-disabled .x-btn-inner,
body.dark-mode .x-btn-default-toolbar-medium.x-btn-disabled .x-btn-inner {
    color: #cbd5e1 !important;
}

body.dark-mode .x-btn-disabled .x-btn-icon-el,
body.dark-mode .x-item-disabled .x-btn-icon-el {
    color: #cbd5e1 !important;
}

/* Panel header titles - brighten text on dark background */
body.dark-mode .x-panel-header-text,
body.dark-mode .x-panel-header-text-default,
body.dark-mode .x-panel-header-text-default-top,
body.dark-mode .x-panel-header .x-panel-header-text,
body.dark-mode .x-panel-header-default .x-panel-header-text,
body.dark-mode .x-panel-header-default-top .x-panel-header-text,
body.dark-mode .x-panel-header-title-text {
    color: #e2e8f0 !important;
    text-shadow: none !important;
}

/* Tab text styling */
body.dark-mode .x-tab-inner,
body.dark-mode .x-tab .x-tab-inner,
body.dark-mode .x-tab-default-top .x-tab-inner {
    color: var(--text-primary) !important;
}

body.dark-mode .x-tab-active .x-tab-inner,
body.dark-mode .x-tab-active button .x-tab-inner {
    color: #ffffff !important;
}

/* Window tabs - ensure visible text color */
body.dark-mode .x-window .x-tab,
body.dark-mode .x-window .x-tab-btn,
body.dark-mode .x-window .x-tab-inner,
body.dark-mode .x-window .x-tab-default-top .x-tab-inner,
body.dark-mode .x-window .x-tab-default .x-tab-inner {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Window tab background - ensure visible on white/light backgrounds */
body.dark-mode .x-window .x-tab,
body.dark-mode .x-window .x-tab-default-top {
    background: linear-gradient(180deg, #475569, #334155) !important;
    border-color: #475569 !important;
}

/* Claim Evidence popup - fix text visibility in dark mode */
body.dark-mode .claim-evidence-window div[style*="color:#0f172a"],
body.dark-mode .claim-evidence-window div[style*="color:#1f2937"],
body.dark-mode .claim-evidence-summary div[style*="color:#0f172a"],
body.dark-mode .claim-evidence-summary div[style*="color:#1f2937"],
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary div[style*="color:#0f172a"],
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary div[style*="color:#1f2937"] {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Claim Evidence white cards - make backgrounds darker in dark mode - HIGH PRIORITY */
body.dark-mode .claim-evidence-window div[style*="background:#ffffff"],
body.dark-mode .claim-evidence-summary div[style*="background:#ffffff"],
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary div[style*="background:#ffffff"],
body.dark-mode div[style*="background:#ffffff"][style*="border-radius:10px"],
body.dark-mode div[style*="background:#ffffff"][style*="border:1px solid #e2e8f0"] {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

/* Fallback: Force dark background for ALL white elements inside claim evidence window */
body.dark-mode .claim-evidence-window *[style*="background:#ffffff"],
body.dark-mode .claim-evidence-summary *[style*="background:#ffffff"],
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary *[style*="background:#ffffff"] {
    background: #1e293b !important;
    background-color: #1e293b !important;
}

/* Force ALL divs with border-radius:10px inside claim evidence to have dark background */
body.dark-mode .claim-evidence-window div[style*="border-radius:10px"],
body.dark-mode .claim-evidence-summary div[style*="border-radius:10px"],
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary div[style*="border-radius:10px"] {
    background: #1e293b !important;
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

/* ULTIMATE FALLBACK: Target ANY div with white background in dark mode */
body.dark-mode div[style*="background:#ffffff"],
body.dark-mode div[style*="background: #ffffff"],
body.dark-mode div[style*="background-color:#ffffff"],
body.dark-mode div[style*="background-color: #ffffff"] {
    background: #1e293b !important;
    background-color: #1e293b !important;
}

/* Claim Evidence text that should be visible */
body.dark-mode .claim-evidence-window div[style*="color:#475569"],
body.dark-mode .claim-evidence-summary div[style*="color:#475569"],
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary div[style*="color:#475569"] {
    color: #cbd5e1 !important;
}

/* Tab active background - fill entire tab with blue, not just border */
body.dark-mode .x-tab-active,
body.dark-mode .x-tab-default-top.x-tab-active,
body.dark-mode .x-tab-active .x-tab-btn,
body.dark-mode .x-tab-btn-default.x-tab-btn-active,
body.dark-mode .x-tab-default-top .x-tab-btn,
body.dark-mode .x-tab-btn,
body.dark-mode .x-tab-default-top .x-tab-btn {
    background-color: #2563eb !important;
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    background-image: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    border-color: #3b82f6 !important;
}

body.dark-mode .x-tab-active.x-tab-over .x-tab-btn,
body.dark-mode .x-tab-active:hover .x-tab-btn {
    background-color: #3b82f6 !important;
    background: linear-gradient(180deg, #60a5fa, #3b82f6) !important;
    background-image: linear-gradient(180deg, #60a5fa, #3b82f6) !important;
}

/* Override tab inner body to be transparent */
body.dark-mode .x-tab-active .x-tab-inner,
body.dark-mode .x-tab-btn .x-tab-inner,
body.dark-mode .x-tab-default-top .x-tab-inner {
    background-color: transparent !important;
    background: transparent !important;
}

/* Paging toolbar (bottom bar) - stronger overrides */
body.dark-mode .x-pagingtoolbar,
body.dark-mode .x-toolbar-paging,
body.dark-mode .x-toolbar-default {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-pagingtoolbar .x-toolbar-text,
body.dark-mode .x-pagingtoolbar .x-form-display-field,
body.dark-mode .x-pagingtoolbar .x-item-text,
body.dark-mode .x-pagingtoolbar span,
body.dark-mode .x-pagingtoolbar .x-component {
    color: #cbd5e1 !important;
}

body.dark-mode .x-pagingtoolbar .x-btn-default-toolbar-small {
    background: linear-gradient(180deg, #334155, #1e293b) !important;
    border-color: #475569 !important;
}

body.dark-mode .x-pagingtoolbar .x-btn-default-toolbar-small .x-btn-inner {
    color: #e2e8f0 !important;
}

/* Grid cell tooltip on hover - fix light gray on dark background */
body.dark-mode .x-tip,
body.dark-mode .x-tip-default,
body.dark-mode .x-tip-default .x-tip-body,
body.dark-mode .x-tip-default .x-panel-body,
body.dark-mode .x-grid-cell-tip,
body.dark-mode .x-grid-cell-tip .x-tip-body {
    background-color: #1e293b !important;
    background: linear-gradient(180deg, #1e293b, #0f172a) !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

body.dark-mode .x-tip .x-panel-body,
body.dark-mode .x-tip-default .x-panel-body {
    background-color: transparent !important;
}

/* Menu dropdown container - fix white background */
body.dark-mode .x-menu,
body.dark-mode .x-menu-default,
body.dark-mode .x-menu-body,
body.dark-mode .x-menu-default .x-menu-body,
body.dark-mode .x-menu-list,
body.dark-mode .x-menu-list-default,
body.dark-mode ul.x-menu-list,
body.dark-mode .x-menu-plain,
body.dark-mode .x-column-header-trigger-menu {
    background-color: var(--bg-secondary) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 16px 32px rgba(2, 6, 23, 0.45) !important;
    border-radius: 14px !important;
}

/* Menu dropdown items - fix invisible text */
body.dark-mode .x-menu-item-text,
body.dark-mode .x-menu-item-default .x-menu-item-text,
body.dark-mode .x-menu-item-text-default,
body.dark-mode .x-menu .x-menu-item-text,
body.dark-mode .x-menu-default .x-menu-item-text {
    color: #e2e8f0 !important;
}

body.dark-mode .x-menu-item-link,
body.dark-mode .x-menu-item-link:link,
body.dark-mode .x-menu-item-link:visited {
    color: #e2e8f0 !important;
}

body.dark-mode .x-menu-item-icon,
body.dark-mode .x-menu-item-icon-default {
    color: #94a3b8 !important;
}

body.dark-mode .x-menu-item-over .x-menu-item-text,
body.dark-mode .x-menu-item-active .x-menu-item-text {
    color: #ffffff !important;
}

body.dark-mode .x-menu-item,
body.dark-mode .x-menu-item-default {
    background-color: var(--bg-secondary) !important;
}

body.dark-mode .x-menu-item-over,
body.dark-mode .x-menu-item-active {
    background-color: rgba(51, 65, 85, 0.92) !important;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(51, 65, 85, 0.96)) !important;
    border-color: rgba(96, 165, 250, 0.18) !important;
}

body.dark-mode .x-menu-item-over .x-menu-item-link,
body.dark-mode .x-menu-item-active .x-menu-item-link,
body.dark-mode .x-menu-item-over .x-menu-item-text,
body.dark-mode .x-menu-item-active .x-menu-item-text {
    color: #ffffff !important;
}

body.dark-mode .x-menu-icon-separator,
body.dark-mode .x-menu-item-separator,
body.dark-mode .x-menu-item-indent,
body.dark-mode .x-menu-item-indent-default {
    background-color: rgba(148, 163, 184, 0.12) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

body.dark-mode .x-menu-item-arrow,
body.dark-mode .x-menu-item-arrow-right,
body.dark-mode .x-menu-item-active .x-menu-item-arrow,
body.dark-mode .x-menu-item-over .x-menu-item-arrow {
    filter: brightness(0) invert(1) contrast(1.1) !important;
    opacity: 1 !important;
}

/* Ensure menu icons are visible in dark mode */
/* Restore icon visibility and adjust colors */
body.dark-mode .x-menu-item-icon,
body.dark-mode .x-menu-item-icon-default,
body.dark-mode .x-menu-item .x-menu-item-icon {
    opacity: 1 !important;
    filter: brightness(0) invert(1) contrast(1.08) !important;
}

/* Make sure icon images are visible */
body.dark-mode .x-menu-item-icon img,
body.dark-mode .x-menu-item-icon-default img {
    opacity: 1 !important;
    filter: brightness(0) invert(1) contrast(1.08) !important;
}

/* TreeView and TreeGrid - fix light text on dark background */
body.dark-mode .x-tree-node-text,
body.dark-mode .x-grid-tree-node-expanded .x-tree-node-text,
body.dark-mode .x-tree-view .x-grid-cell-inner,
body.dark-mode .x-tree-panel .x-grid-cell-inner {
    color: #e2e8f0 !important;
}

body.dark-mode .x-tree-node-text.x-tree-node-leaf,
body.dark-mode .x-tree-view .x-grid-tree-node-leaf .x-grid-cell-inner {
    color: #cbd5e1 !important;
}

/* Tree group headers - fix background and text */
body.dark-mode .x-grid-group-hd,
body.dark-mode .x-grid-group-hd-default,
body.dark-mode .x-grid-group-title,
body.dark-mode .x-grid-group-title-default {
    color: #cbd5e1 !important;
}

body.dark-mode .x-grid-group-hd .x-grid-cell-inner,
body.dark-mode .x-grid-group-hd-default .x-grid-cell-inner {
    background-color: var(--bg-tertiary) !important;
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    color: #cbd5e1 !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-grid-group-hd .x-grid-group-title,
body.dark-mode .x-grid-group-hd-default .x-grid-group-title {
    color: #cbd5e1 !important;
    text-shadow: none !important;
}

/* Tree row backgrounds */
body.dark-mode .x-tree-row,
body.dark-mode .x-grid-row,
body.dark-mode .x-grid-row-alt {
    background-color: var(--bg-secondary) !important;
}

/* Selected row - strong override for dark theme */
body.dark-mode .x-grid-row-selected,
body.dark-mode .x-tree-row-selected,
body.dark-mode .x-grid-row.x-grid-row-selected,
body.dark-mode .x-tree-row.x-tree-row-selected,
body.dark-mode tr.x-grid-row-selected,
body.dark-mode tr.x-tree-row-selected,
body.dark-mode .x-grid-view .x-grid-row-selected,
body.dark-mode .x-tree-view .x-grid-row-selected {
    background-color: #2563eb !important;
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
}

body.dark-mode .x-grid-row-selected .x-grid-cell-inner,
body.dark-mode .x-tree-row-selected .x-tree-node-text,
body.dark-mode .x-grid-row-selected .x-tree-node-text,
body.dark-mode .x-grid-row-selected td,
body.dark-mode .x-tree-row-selected td,
body.dark-mode .x-grid-row-selected .x-grid-cell,
body.dark-mode .x-tree-row-selected .x-grid-cell,
body.dark-mode .x-tree-row-selected .x-tree-node-text * {
    color: #ffffff !important;
    font-weight: 500;
}

/* Text elements in selected rows - but NOT icons */
body.dark-mode .x-grid-row-selected .x-grid-cell-inner {
    color: #ffffff !important;
    font-weight: 500;
}

body.dark-mode .x-grid-row-selected td {
    color: #ffffff !important;
    font-weight: 500;
}

/* Exclude icons from selected row white text override */
body.dark-mode .x-grid-row-selected .x-grid-cell-inner .x-tree-icon,
body.dark-mode .x-grid-row-selected .x-grid-cell-inner .x-glyph,
body.dark-mode .x-grid-row-selected .x-grid-cell-inner .x-fa,
body.dark-mode .x-grid-row-selected .x-grid-cell-inner .x-font-icon,
body.dark-mode .x-grid-row-selected .x-grid-cell-inner svg,
body.dark-mode .x-grid-row-selected .x-grid-cell-inner img,
body.dark-mode .x-grid-row-selected .x-grid-cell-inner span[class*="icon"],
body.dark-mode .x-grid-row-selected .x-grid-cell-inner span[class*="glyph"],
body.dark-mode .x-grid-row-selected .x-grid-cell-inner i,
body.dark-mode .x-grid-row-selected .x-grid-cell-inner b {
    color: inherit !important;
    opacity: 1 !important;
    filter: brightness(1.3) !important;
}

/* Ensure entity type icons remain visible in selected rows */
body.dark-mode .x-grid-row-selected .x-grid-cell-inner .x-tree-icon,
body.dark-mode .x-grid-row-selected .x-grid-cell-inner .x-glyph {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Override any white/light backgrounds in selected cells */
body.dark-mode .x-grid-row-selected .x-grid-cell-inner,
body.dark-mode .x-tree-row-selected .x-tree-node-text,
body.dark-mode .x-grid-row-selected .x-grid-cell,
body.dark-mode .x-tree-row-selected .x-grid-cell {
    background-color: transparent !important;
    background: transparent !important;
}

/* Fix input/field backgrounds in selected rows */
body.dark-mode .x-grid-row-selected input,
body.dark-mode .x-tree-row-selected input,
body.dark-mode .x-grid-row-selected .x-form-text,
body.dark-mode .x-tree-row-selected .x-form-text,
body.dark-mode .x-grid-row-selected .x-form-field,
body.dark-mode .x-tree-row-selected .x-form-field {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Panel titles and headers text */
body.dark-mode .x-panel-header-title-default,
body.dark-mode .x-panel-header-title,
body.dark-mode .x-panel .x-panel-header-title-default-text,
body.dark-mode .x-panel-header-text,
body.dark-mode .x-panel-header-text-default,
body.dark-mode .x-panel-header-text-default-top {
    color: var(--text-primary) !important;
}

/* Tab text in dark mode */
body.dark-mode .x-tab-inner,
body.dark-mode .x-tab .x-tab-inner,
body.dark-mode .x-tab-default-top .x-tab-inner,
body.dark-mode .x-tab-default-bottom .x-tab-inner {
    color: var(--text-primary) !important;
}

body.dark-mode .x-tab-active .x-tab-inner {
    color: #ffffff !important;
}

/* Grid paging toolbar - bottom bar */
body.dark-mode .x-pagingtoolbar,
body.dark-mode .x-toolbar-paging {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-pagingtoolbar .x-toolbar-text,
body.dark-mode .x-pagingtoolbar .x-form-display-field,
body.dark-mode .x-pagingtoolbar span,
body.dark-mode .x-pagingtoolbar .x-item-disabled {
    color: var(--text-secondary) !important;
}

body.dark-mode .x-pagingtoolbar .x-btn-default-toolbar-small .x-btn-inner {
    color: var(--text-primary) !important;
}

/* Tooltip styles */
body.dark-mode .x-tip,
body.dark-mode .x-tip-default,
body.dark-mode .x-tip-anchor {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .x-tip .x-tip-body,
body.dark-mode .x-tip-default .x-tip-body {
    color: var(--text-primary) !important;
}

/* Grid cell tooltips */
body.dark-mode .x-grid-cell-tip,
body.dark-mode .x-grid-tip {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Panel header titles - fix dark text on dark background */
body.dark-mode .x-panel-header-text,
body.dark-mode .x-panel-header-text-default,
body.dark-mode .x-panel-header-text-default-top,
body.dark-mode .x-panel-header .x-panel-header-text,
body.dark-mode .x-panel-header-default .x-panel-header-text,
body.dark-mode .x-panel-header-default-top .x-panel-header-text {
    color: #e2e8f0 !important;
    text-shadow: none !important;
}

/* Specific fix for panel title elements with inline styles */
body.dark-mode .x-panel-header-title-text,
body.dark-mode .x-panel-header-title-default-text {
    color: #e2e8f0 !important;
}

/* Override ExtJS default panel header styling */
body.dark-mode .x-panel-header-default {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-panel-header-default-top {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    border-color: var(--border-color) !important;
}

/* Tab panel headers and titles */
body.dark-mode .x-tab-panel-header,
body.dark-mode .x-tab-panel-header-default-top {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-tab-panel-header-default-top .x-panel-header-text {
    color: #e2e8f0 !important;
}

/* Paging toolbar - stronger overrides */
body.dark-mode .x-pagingtoolbar,
body.dark-mode .x-toolbar-paging,
body.dark-mode .x-toolbar-default,
body.dark-mode .x-toolbar {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-pagingtoolbar .x-toolbar-text,
body.dark-mode .x-pagingtoolbar .x-form-display-field,
body.dark-mode .x-pagingtoolbar .x-item-text,
body.dark-mode .x-pagingtoolbar .x-toolbar-item,
body.dark-mode .x-pagingtoolbar .x-component,
body.dark-mode .x-toolbar .x-toolbar-text,
body.dark-mode .x-toolbar .x-form-display-field,
body.dark-mode .x-toolbar .x-item-text {
    color: #cbd5e1 !important;
}

body.dark-mode .x-pagingtoolbar .x-btn-default-toolbar-small,
body.dark-mode .x-toolbar .x-btn-default-toolbar-small {
    background: linear-gradient(180deg, #334155, #1e293b) !important;
    border-color: #475569 !important;
}

body.dark-mode .x-pagingtoolbar .x-btn-default-toolbar-small .x-btn-inner,
body.dark-mode .x-toolbar .x-btn-default-toolbar-small .x-btn-inner {
    color: #e2e8f0 !important;
}

/* Tooltip override for grid cells - force dark theme */
body.dark-mode .x-tip,
body.dark-mode .x-tip-default,
body.dark-mode .x-tip-default .x-tip-body,
body.dark-mode .x-tip-default .x-panel-body,
body.dark-mode .x-grid-cell-tip .x-tip-body,
body.dark-mode .x-grid-tip .x-tip-body {
    background-color: #1e293b !important;
    background: linear-gradient(180deg, #1e293b, #0f172a) !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

/* Override any light backgrounds in tooltips */
body.dark-mode .x-tip .x-panel-body,
body.dark-mode .x-tip-default .x-panel-body {
    background-color: transparent !important;
    background: transparent !important;
}

/* Panel header titles - fix dark text on dark background */
body.dark-mode .x-panel-header-text,
body.dark-mode .x-panel-header-text-default,
body.dark-mode .x-panel-header-text-default-top,
body.dark-mode .x-panel-header .x-panel-header-text,
body.dark-mode .x-panel-header-default .x-panel-header-text,
body.dark-mode .x-panel-header-default-top .x-panel-header-text {
    color: #e2e8f0 !important;
    text-shadow: none !important;
}

/* Specific fix for panel title elements with inline styles */
body.dark-mode .x-panel-header-title-text,
body.dark-mode .x-panel-header-title-default-text {
    color: #e2e8f0 !important;
}

/* Override ExtJS default panel header styling */
body.dark-mode .x-panel-header-default {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-panel-header-default-top {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    border-color: var(--border-color) !important;
}

/* Tab panel headers and titles */
body.dark-mode .x-tab-panel-header,
body.dark-mode .x-tab-panel-header-default-top {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-tab-panel-header-default-top .x-panel-header-text {
    color: #e2e8f0 !important;
}

/* Paging toolbar - stronger overrides */
body.dark-mode .x-pagingtoolbar,
body.dark-mode .x-toolbar-paging,
body.dark-mode .x-toolbar-default,
body.dark-mode .x-toolbar {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-pagingtoolbar .x-toolbar-text,
body.dark-mode .x-pagingtoolbar .x-form-display-field,
body.dark-mode .x-pagingtoolbar .x-item-text,
body.dark-mode .x-pagingtoolbar .x-toolbar-item,
body.dark-mode .x-pagingtoolbar .x-component,
body.dark-mode .x-toolbar .x-toolbar-text,
body.dark-mode .x-toolbar .x-form-display-field,
body.dark-mode .x-toolbar .x-item-text {
    color: #cbd5e1 !important;
}

body.dark-mode .x-pagingtoolbar .x-btn-default-toolbar-small,
body.dark-mode .x-toolbar .x-btn-default-toolbar-small {
    background: linear-gradient(180deg, #334155, #1e293b) !important;
    border-color: #475569 !important;
}

body.dark-mode .x-pagingtoolbar .x-btn-default-toolbar-small .x-btn-inner,
body.dark-mode .x-toolbar .x-btn-default-toolbar-small .x-btn-inner {
    color: #e2e8f0 !important;
}

/* Tooltip override for grid cells - force dark theme */
body.dark-mode .x-tip,
body.dark-mode .x-tip-default,
body.dark-mode .x-tip-default .x-tip-body,
body.dark-mode .x-tip-default .x-panel-body,
body.dark-mode .x-grid-cell-tip .x-tip-body,
body.dark-mode .x-grid-tip .x-tip-body {
    background-color: #1e293b !important;
    background: linear-gradient(180deg, #1e293b, #0f172a) !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

/* Override any light backgrounds in tooltips */
body.dark-mode .x-tip .x-panel-body,
body.dark-mode .x-tip-default .x-panel-body {
    background-color: transparent !important;
    background: transparent !important;
}

/* Forms */
body.dark-mode .x-form-text {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .x-form-field-wrap {
    background-color: transparent !important;
}

body.dark-mode .x-form-focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

body.dark-mode .x-form-item-label {
    color: var(--text-secondary) !important;
}

/* Combo Boxes */
body.dark-mode .x-boundlist {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 16px 32px rgba(2, 6, 23, 0.42) !important;
}

body.dark-mode .x-boundlist-item {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

body.dark-mode .x-boundlist-item-over {
    background-color: var(--accent-color) !important;
    color: #ffffff !important;
}

body.dark-mode .x-boundlist-selected {
    background-color: var(--accent-hover) !important;
    color: #ffffff !important;
}

/* Messages and Notifications */
body.dark-mode .x-msg-box {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-msg-box .x-msg-box-body {
    color: var(--text-primary) !important;
}

/* Tooltips */
body.dark-mode .x-tip {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Loading Mask */
body.dark-mode .x-mask {
    background-color: rgba(15, 23, 42, 0.7) !important;
}

body.dark-mode .x-loading-spinner {
    border-color: var(--accent-color) !important;
}

/* ===== Login Page Specific Styles ===== */
body.dark-mode .container {
    background-color: var(--bg-secondary) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .logo {
    color: var(--text-primary) !important;
}

body.dark-mode .form-group input {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .divider {
    color: var(--text-muted) !important;
}

body.dark-mode .divider::before,
body.dark-mode .divider::after {
    background-color: var(--border-color) !important;
}

body.dark-mode .social-btn {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .social-btn:hover {
    background-color: var(--bg-secondary) !important;
}

body.dark-mode .footer {
    color: var(--text-secondary) !important;
}

body.dark-mode .google-btn {
    background-color: #4285F4 !important;
}

body.dark-mode .linkedin-btn {
    background-color: #0077b5 !important;
}

body.dark-mode .orcid-btn {
    background-color: #a6ce39 !important;
}

/* ===== D3.js Visualizations ===== */

/* General SVG text - but exclude network graph which has its own styling */
body.dark-mode svg text:not(.nodetext):not(.pathroletext):not(.edge-label-text) {
    fill: var(--text-secondary) !important;
}

body.dark-mode svg .axis line,
body.dark-mode svg .axis path {
    stroke: var(--border-color) !important;
}

body.dark-mode svg .node circle {
    stroke: var(--border-color) !important;
}

body.dark-mode svg .link {
    stroke: var(--border-color) !important;
    opacity: 0.6;
}

/* ===== Network Graph Dark Mode ===== */

/* Network graph node text - ensure visibility in dark mode 
   Use attribute selector to override inline styles set by JavaScript */
body.dark-mode .nodetext,
body.dark-mode text.nodetext,
body.dark-mode svg text.nodetext,
body.dark-mode g.node text.nodetext,
body.dark-mode text[class="nodetext"],
body.dark-mode text[class*="nodetext"] {
    fill: #e2e8f0 !important;
    stroke: #1e293b !important;
    stroke-width: 3px !important;
    paint-order: stroke fill !important;
}

/* Network graph path role text (above nodes) */
body.dark-mode .pathroletext,
body.dark-mode text.pathroletext,
body.dark-mode svg text.pathroletext,
body.dark-mode g.node text.pathroletext,
body.dark-mode text[class="pathroletext"],
body.dark-mode text[class*="pathroletext"] {
    fill: #94a3b8 !important;
    stroke: #1e293b !important;
    stroke-width: 2px !important;
    paint-order: stroke fill !important;
}

/* Network graph edge/link lines - make them more visible */
body.dark-mode path.link,
body.dark-mode svg path.link,
body.dark-mode g.link path,
body.dark-mode .link,
body.dark-mode path[class="link"],
body.dark-mode path[class*="link"] {
    stroke: #475569 !important;
    stroke-width: 1.25px !important;
    opacity: 0.8 !important;
}

/* Network graph selected/highlighted links - must come after base link rule */
body.dark-mode path.link.state-selected,
body.dark-mode path.link.state-highlight,
body.dark-mode path[class*="link"].state-selected,
body.dark-mode path[class*="link"].state-highlight {
    stroke: #60a5fa !important;
    stroke-width: 3px !important;
    opacity: 1 !important;
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.5)) !important;
}

/* Network graph edge labels - high priority selectors */
body.dark-mode .edge-label-text,
body.dark-mode text.edge-label-text,
body.dark-mode svg text.edge-label-text,
body.dark-mode g.edge-label text,
body.dark-mode .edge-label text,
body.dark-mode text[class="edge-label-text"],
body.dark-mode text[class*="edge-label-text"],
body.dark-mode svg .edge-label-layer text,
body.dark-mode g.edge-label-layer text,
body.dark-mode svg g.edge-label text.edge-label-text {
    fill: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    stroke: #1e293b !important;
    stroke-width: 2.5px !important;
    paint-order: stroke fill !important;
    font-weight: bold !important;
}

/* Network graph reference badges */
body.dark-mode g.edge-ref-badge,
body.dark-mode .edge-ref-badge,
body.dark-mode .edge-ref-layer {
    opacity: 0.9 !important;
}

body.dark-mode g.edge-ref-badge text,
body.dark-mode .edge-ref-badge text,
body.dark-mode g[class*="edge-ref-badge"] text {
    fill: #e2e8f0 !important;
}

body.dark-mode g.edge-ref-badge circle,
body.dark-mode .edge-ref-badge circle,
body.dark-mode g[class*="edge-ref-badge"] circle {
    stroke: #475569 !important;
    fill: #1e293b !important;
}

/* Network graph edge label background rectangles */
body.dark-mode rect.edge-label-bg,
body.dark-mode g.edge-label rect,
body.dark-mode rect[class="edge-label-bg"],
body.dark-mode rect[class*="edge-label-bg"] {
    fill: rgba(30, 41, 59, 0.9) !important;
    stroke: rgba(71, 85, 105, 0.5) !important;
}

/* Network graph node circles */
body.dark-mode g.node circle,
body.dark-mode .node circle,
body.dark-mode circle.gene,
body.dark-mode circle.rna,
body.dark-mode circle.protein,
body.dark-mode circle.chemical,
body.dark-mode circle.microbe,
body.dark-mode circle.phenotype,
body.dark-mode circle.functional {
    stroke-width: 2px !important;
}

/* Network graph selected/highlighted nodes */
body.dark-mode g.node.highlight circle,
body.dark-mode .node.highlight circle,
body.dark-mode g.node.selected circle,
body.dark-mode .node.selected circle {
    stroke: #fbbf24 !important;
    stroke-width: 3px !important;
}

/* ===== Theme Toggle Button ===== */
.theme-toggle-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.theme-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

/* Theme toggle button in dark mode - light background for visibility */
body.dark-mode .theme-toggle-btn {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.5) !important;
    color: #1e293b !important;
}

body.dark-mode .theme-toggle-btn:hover {
    box-shadow: 0 6px 16px rgba(251, 191, 36, 0.7) !important;
}

/* Logo switching based on theme */
body.dark-mode .logo-light {
    display: none !important;
}

body.dark-mode .logo-dark {
    display: block !important;
}

body:not(.dark-mode) .logo-light {
    display: block !important;
}

body:not(.dark-mode) .logo-dark {
    display: none !important;
}

/* Smooth transition for theme switching */
body,
body *,
body *::before,
body *::after {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}

/* Exclude certain elements from transition to avoid performance issues */
body canvas,
body svg,
body img,
body video {
    transition: none !important;
}

/* ===== ExtJS Grid RowExpander +/- Icons ===== */

/* Hide background images and the &#160; space text inside the expander div */
body.dark-mode .x-grid-row-expander,
body.dark-mode .x-grid-cell-rowexpander,
body.dark-mode .x-grid-cell-rowexpander .x-grid-cell-inner {
    background-image: none !important;
    background: transparent !important;
    filter: none !important;
}

/* Make the space character invisible */
body.dark-mode .x-grid-row-expander {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    position: relative !important;
    vertical-align: middle !important;
}

/* Show + icon using ::after (to avoid conflict with ::before) */
body.dark-mode .x-grid-row-expander::after {
    content: '+' !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    font-family: Arial, sans-serif !important;
    line-height: 16px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 16px !important;
    height: 16px !important;
    text-align: center !important;
    display: block !important;
}

/* Show - icon for expanded rows */
body.dark-mode .x-grid-row:not(.x-grid-row-collapsed) .x-grid-row-expander::after {
    content: '-' !important;
}

/* TreeGrid expand/collapse icons */
body.dark-mode .x-tree-expander,
body.dark-mode .x-tree-expander:before {
    color: #cbd5e1 !important;
}

body.dark-mode .x-grid-cell-inner .x-tree-expander {
    color: #cbd5e1 !important;
}

/* Row expander cell background */
body.dark-mode .x-grid-cell-rowexpander {
    background-color: transparent !important;
}

/* Row line separators - make them visible */
body.dark-mode .x-grid-row,
body.dark-mode .x-grid-row-alt {
    border-bottom-color: var(--border-color) !important;
}

/* Row hover state */
body.dark-mode .x-grid-row-over {
    background-color: var(--bg-tertiary) !important;
}

/* ===== ExtJS Window Global Fixes ===== */

/* Window title text - fix dark text on dark background */
body.dark-mode .x-window .x-window-header-text,
body.dark-mode .x-window .x-window-header-text-default,
body.dark-mode .x-window .x-window-header-text-default-top,
body.dark-mode .x-window-header-default .x-window-header-text,
body.dark-mode .x-window-header-default-top .x-window-header-text,
body.dark-mode .x-window-header-title-text,
body.dark-mode .x-window-header-title-default-text {
    color: #e2e8f0 !important;
    text-shadow: none !important;
}

/* Window header background */
body.dark-mode .x-window-header,
body.dark-mode .x-window-header-default,
body.dark-mode .x-window-header-default-top {
    background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary)) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

/* Window body backgrounds */
body.dark-mode .x-window .x-window-body,
body.dark-mode .x-window .x-panel-body,
body.dark-mode .x-window .x-panel-body-default {
    background-color: var(--bg-secondary) !important;
}



/* ===== Claim Evidence Window ===== */

/* Claim Evidence summary area background */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary {
    background-color: var(--bg-tertiary) !important;
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

/* Claim Evidence summary text - loading and description */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary div {
    color: #cbd5e1 !important;
}

/* Claim Evidence grid empty text */
body.dark-mode #selectedRelationsConnectionClaimEvidenceGrid .x-grid-empty {
    color: #94a3b8 !important;
}

/* RowExpander row body detail text */
body.dark-mode .x-grid-rowbody div {
    color: #cbd5e1 !important;
}

body.dark-mode .x-grid-rowbody b {
    color: #e2e8f0 !important;
}

/* ===== Claim Evidence Window ===== */

/* Claim Evidence summary area background */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary {
    background-color: var(--bg-tertiary) !important;
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

/* Force override ALL inline colors in summary */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary div,
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary span,
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary p {
    color: #cbd5e1 !important;
}

/* Claim Evidence grid empty text */
body.dark-mode #selectedRelationsConnectionClaimEvidenceGrid .x-grid-empty,
body.dark-mode #selectedRelationsConnectionClaimEvidenceGrid .x-grid-empty * {
    color: #94a3b8 !important;
}

/* RowExpander row body detail text */
body.dark-mode .x-grid-rowbody div,
body.dark-mode .x-grid-rowbody span,
body.dark-mode .x-grid-rowbody p {
    color: #cbd5e1 !important;
}

body.dark-mode .x-grid-rowbody b,
body.dark-mode .x-grid-rowbody strong {
    color: #e2e8f0 !important;
}

/* ===== Report Snapshot Window (History View) ===== */

/* Window body and panel backgrounds */
body.dark-mode .x-window.report-snapshot-window .x-window-body,
body.dark-mode .x-window.report-snapshot-window .x-panel-body,
body.dark-mode .x-window.report-snapshot-window .x-panel-body-default {
    background-color: var(--bg-secondary) !important;
}

/* Report Snapshot north region (header info) */
body.dark-mode .x-window.report-snapshot-window .report-snapshot-header {
    background-color: var(--bg-tertiary) !important;
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

/* Report title text */
body.dark-mode .x-window.report-snapshot-window .report-snapshot-title {
    color: #e2e8f0 !important;
}

/* Report metadata (type, time, status) */
body.dark-mode .x-window.report-snapshot-window .report-snapshot-meta {
    color: #94a3b8 !important;
}

/* Report question text */
body.dark-mode .x-window.report-snapshot-window .report-snapshot-question,
body.dark-mode .x-window.report-snapshot-window .report-snapshot-question b {
    color: #cbd5e1 !important;
}

/* Report preview content area */
body.dark-mode .x-window.report-snapshot-window .report-snapshot-preview {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Report preview content text */
body.dark-mode .x-window.report-snapshot-window .report-snapshot-preview *,
body.dark-mode .x-window.report-snapshot-window .report-snapshot-preview div,
body.dark-mode .x-window.report-snapshot-window .report-snapshot-preview p,
body.dark-mode .x-window.report-snapshot-window .report-snapshot-preview h1,
body.dark-mode .x-window.report-snapshot-window .report-snapshot-preview h2,
body.dark-mode .x-window.report-snapshot-window .report-snapshot-preview h3,
body.dark-mode .x-window.report-snapshot-window .report-snapshot-preview h4,
body.dark-mode .x-window.report-snapshot-window .report-snapshot-preview span {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Report Markdown textarea */
body.dark-mode .x-window.report-snapshot-window .x-textareafield {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Tab panel in report snapshot */
body.dark-mode .x-window.report-snapshot-window .x-tab-panel-header,
body.dark-mode .x-window.report-snapshot-window .x-tab-panel-header-default-top {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-window.report-snapshot-window .x-tab-panel-header .x-panel-header-text {
    color: #e2e8f0 !important;
}

/* ===== Claim Evidence Window ===== */

/* Claim Evidence summary area - override inline background */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary,
body.dark-mode .claim-evidence-summary {
    background-color: var(--bg-tertiary) !important;
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Claim Evidence summary text - override inline color */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary *,
body.dark-mode .claim-evidence-summary-text {
    color: #cbd5e1 !important;
}

/* Claim Evidence summary title - override inline color #1f2937 */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary div[style*="#1f2937"],
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary div[style*="font-weight:700"] {
    color: #e2e8f0 !important;
}

/* Claim Evidence summary description - override inline color #475569 */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary div[style*="#475569"] {
    color: #cbd5e1 !important;
}

/* ===== Claim Evidence Filter Chips ===== */
/* Override inline background and text colors for verdict chips in dark mode */

/* Partial support chip: #eff6ff bg + #1d4ed8 text → dark blue chip */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary span[style*="#eff6ff"] {
    background-color: #1e3a5f !important;
    background: #1e3a5f !important;
    color: #93c5fd !important;
    border-color: #2563eb !important;
}

/* Mention only chip: #f8fafc bg + #475569 text → dark gray chip */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary span[style*="#f8fafc"] {
    background-color: #334155 !important;
    background: #334155 !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}

/* Unreviewed chip: #ede9fe bg + #6d28d9 text → dark purple chip */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary span[style*="#ede9fe"] {
    background-color: #3b0764 !important;
    background: #3b0764 !important;
    color: #a78bfa !important;
    border-color: #7c3aed !important;
}

/* Direct support chip: #ecfdf5 bg + #047857 text → dark green chip */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary span[style*="#ecfdf5"] {
    background-color: #064e3b !important;
    background: #064e3b !important;
    color: #6ee7b7 !important;
    border-color: #059669 !important;
}

/* Contradictory chip: #fef2f2 bg + #991b1b text → dark red chip */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary span[style*="#fef2f2"] {
    background-color: #7f1d1d !important;
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border-color: #dc2626 !important;
}

/* Indirect support chip: #fff7ed bg + #c2410c text → dark orange chip */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary span[style*="#fff7ed"] {
    background-color: #7c2d12 !important;
    background: #7c2d12 !important;
    color: #fdba74 !important;
    border-color: #ea580c !important;
}

/* Not supportive chip: #fff1f2 bg + #be123c text → dark pink chip */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary span[style*="#fff1f2"] {
    background-color: #881337 !important;
    background: #881337 !important;
    color: #fda4af !important;
    border-color: #e11d48 !important;
}

/* Insufficient support / False positive chip: #e2e8f0 bg + #334155 text → dark slate chip */
body.dark-mode #selectedRelationsConnectionClaimEvidenceSummary span[style*="#e2e8f0"] {
    background-color: #334155 !important;
    background: #334155 !important;
    color: #cbd5e1 !important;
    border-color: #475569 !important;
}

/* Claim Evidence grid empty text */
body.dark-mode #selectedRelationsConnectionClaimEvidenceGrid .x-grid-empty {
    color: #94a3b8 !important;
}

/* RowExpander row body text */
body.dark-mode .x-grid-rowbody,
body.dark-mode .x-grid-rowbody * {
    color: #cbd5e1 !important;
}

body.dark-mode .x-grid-rowbody i {
    color: #94a3b8 !important;
}

/* ===== Verify Introduction/Discussion Sentence Window ===== */

/* Reference item containers - override inline background:#f8fafc and border:#e2e8f0 */
body.dark-mode .x-window .x-container[style*="background:#f8fafc"],
body.dark-mode .x-window .x-container[style*="background: #f8fafc"] {
    background: rgba(51, 65, 85, 0.5) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
}

/* Reference item PMD/ID text - override inline color:#9a3412 */
body.dark-mode .x-window div[style*="color:#9a3412"],
body.dark-mode .x-window div[style*="color: #9a3412"] {
    color: #fbbf24 !important;
}

/* Reference item title text - override inline color:#0f172a */
body.dark-mode .x-window div[style*="color:#0f172a"] {
    color: #f1f5f9 !important;
}

/* ===== Radio Buttons in Verify Window ===== */

/* ExtJS radiogroup label text - MUST be bright */
body.dark-mode .x-window .x-form-cb-label,
body.dark-mode .x-window .x-form-cb-label-over,
body.dark-mode .x-window .x-field-default .x-form-cb-label,
body.dark-mode .x-window .x-form-item .x-form-cb-label,
body.dark-mode .x-window .x-radiogroup .x-form-cb-label,
body.dark-mode .x-window .x-radiogroup .x-form-cb-label-over {
    color: #f1f5f9 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    background: none !important;
}

/* ExtJS radio button label text via inner span */
body.dark-mode .x-window .x-form-cb-label .x-form-cb-label-inner,
body.dark-mode .x-window .x-form-cb-label span,
body.dark-mode .x-window .x-radiogroup .x-form-cb-label span,
body.dark-mode .x-window .x-radiogroup .x-form-cb-label-inner span {
    color: #f1f5f9 !important;
}

/* ExtJS radio button input element itself */
body.dark-mode .x-window input[type="radio"] {
    accent-color: #60a5fa !important;
    filter: brightness(1.5) !important;
}

/* ExtJS radio button checkbox element (custom rendered) */
body.dark-mode .x-window .x-form-cb {
    background-color: rgba(51, 65, 85, 0.96) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
}

body.dark-mode .x-window .x-form-cb-after {
    color: #f1f5f9 !important;
    background: none !important;
}

/* ExtJS checkbox label wrapper */
body.dark-mode .x-window .x-form-check-wrap {
    color: #f1f5f9 !important;
    background: none !important;
}

/* Verify window field labels */
body.dark-mode .x-window .x-form-item-label,
body.dark-mode .x-window .x-form-item-label-text {
    color: #e2e8f0 !important;
}

/* Verify window display field text - sentence box override inline background:#f8fafc, border:#e2e8f0, color:#0f172a */
body.dark-mode .x-window .x-form-display-field-default {
    color: #f1f5f9 !important;
}

body.dark-mode .x-window .x-form-display-field-default div[style*="background:#f8fafc"],
body.dark-mode .x-window .x-form-display-field-default div[style*="background: #f8fafc"] {
    background: rgba(51, 65, 85, 0.5) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
    color: #f1f5f9 !important;
}

/* Connection box override inline background:#fff7ed, border:#fdba74 */
body.dark-mode .x-window div[style*="background:#fff7ed"],
body.dark-mode .x-window div[style*="background: #fff7ed"] {
    background: rgba(120, 53, 15, 0.3) !important;
    border-color: rgba(251, 146, 60, 0.5) !important;
}

body.dark-mode .x-window div[style*="color:#c2410c"] {
    color: #fb923c !important;
}

body.dark-mode .x-window div[style*="color:#9a3412"] {
    color: #fdba74 !important;
}

/* Verify window textarea override inline fieldStyle */
body.dark-mode .x-window textarea[style*="color:#334155"] {
    background: rgba(51, 65, 85, 0.96) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
    color: #f1f5f9 !important;
}

/* ===== Bottom Toolbar Buttons ===== */

/* Verify window footer toolbar background */
body.dark-mode .x-window .x-toolbar-footer {
    background: rgba(30, 41, 59, 0.98) !important;
    border-top: 1px solid rgba(71, 85, 105, 0.6) !important;
}

/* Footer toolbar buttons - base state */
body.dark-mode .x-window .x-toolbar-footer .x-btn-default-toolbar-small {
    background: linear-gradient(180deg, #334155, #1e293b) !important;
    border-color: #475569 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Window buttons - general (not just in footer toolbar) */
body.dark-mode .x-window .x-btn,
body.dark-mode .x-window .x-btn-default-small,
body.dark-mode .x-window .x-btn-default-medium {
    background: linear-gradient(180deg, #334155, #1e293b) !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

/* Button inner text - MUST be visible in dark mode - use maximum specificity */
body.dark-mode .x-window .x-btn .x-btn-inner,
body.dark-mode .x-window .x-btn-default-small .x-btn-inner,
body.dark-mode .x-window .x-btn-default-medium .x-btn-inner,
body.dark-mode .x-window .x-btn-default-toolbar-small .x-btn-inner,
body.dark-mode .x-window .x-btn-inner-default-small,
body.dark-mode .x-window .x-btn-inner-default-medium,
body.dark-mode .x-window .x-btn-inner-default-toolbar-small {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

/* Hover state */
body.dark-mode .x-window .x-toolbar-footer .x-btn-default-toolbar-small-over,
body.dark-mode .x-window .x-toolbar-footer .x-btn-default-toolbar-small.x-btn-over {
    background: linear-gradient(180deg, #475569, #334155) !important;
    border-color: #64748b !important;
}

body.dark-mode .x-window .x-toolbar-footer .x-btn-default-toolbar-small-over .x-btn-inner,
body.dark-mode .x-window .x-toolbar-footer .x-btn-default-toolbar-small.x-btn-over .x-btn-inner,
body.dark-mode .x-window .x-toolbar-footer .x-btn-over .x-btn-inner {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* Focus state */
body.dark-mode .x-window .x-toolbar-footer .x-btn-default-toolbar-small-focus {
    border-color: #60a5fa !important;
}

/* Pressed state */
body.dark-mode .x-window .x-toolbar-footer .x-btn-default-toolbar-small-pressed {
    background: linear-gradient(180deg, #1e293b, #334155) !important;
    border-color: #475569 !important;
}

/* Review hint text override inline color:#475569 */
body.dark-mode .x-window div[style*="color:#475569"] {
    color: #cbd5e1 !important;
}

/* ===== Project Report Progress Bar - Dark Mode ===== */
/* ExtJS ProgressBar component styling for dark mode */
body.dark-mode .x-progress,
body.dark-mode .x-progress-default {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .x-progress-bar,
body.dark-mode .x-progress-bar-default {
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    border-right-color: #1d4ed8 !important;
    border-top-color: #60a5fa !important;
}

body.dark-mode .x-progress-text,
body.dark-mode .x-progress-text-front {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .x-progress-text-back {
    color: var(--text-secondary) !important;
}

/* Animated progress bar (waiting state) */
body.dark-mode .x-progress-animated .x-progress-bar {
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #3b82f6 100%) !important;
    background-size: 200% 100% !important;
    animation: progress-shimmer 2s ease-in-out infinite !important;
}

@keyframes progress-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Django Forms (Change Password, Profile Edit, etc.) ===== */
/* Userena password change form and other Django forms */
body.dark-mode #password_change_form,
body.dark-mode form fieldset {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode #password_change_form legend,
body.dark-mode fieldset legend {
    color: var(--text-primary) !important;
    font-weight: bold !important;
}

/* Form labels - make them clearly visible */
body.dark-mode #password_change_form label,
body.dark-mode form label,
body.dark-mode .x-form-item-label {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
}

/* Required field indicators */
body.dark-mode #password_change_form label.required,
body.dark-mode form label.required {
    color: #fca5a5 !important;
}

/* Input fields in Django forms */
body.dark-mode #password_change_form input[type="text"],
body.dark-mode #password_change_form input[type="password"],
body.dark-mode #password_change_form input[type="email"],
body.dark-mode form input[type="text"],
body.dark-mode form input[type="password"],
body.dark-mode form input[type="email"] {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 8px 12px !important;
}

body.dark-mode #password_change_form input:focus,
body.dark-mode form input:focus {
    border-color: var(--accent-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* Submit button */
body.dark-mode #password_change_form input[type="submit"],
body.dark-mode form input[type="submit"] {
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
}

body.dark-mode #password_change_form input[type="submit"]:hover,
body.dark-mode form input[type="submit"]:hover {
    background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Error messages */
body.dark-mode #password_change_form .errorlist,
body.dark-mode form .errorlist {
    color: #fca5a5 !important;
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-left: 3px solid #ef4444 !important;
    padding: 8px 12px !important;
    margin: 8px 0 !important;
}

/* Help text */
body.dark-mode #password_change_form .helptext,
body.dark-mode form .helptext {
    color: var(--text-muted) !important;
    font-size: 0.875em !important;
}

/* ===== Home Page Password Popup - Dark Mode ===== */
/* Target the custom password change modal in home.html */
body.dark-mode #password-box {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.97)) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
}

body.dark-mode #password-box h3 {
    color: #ffffff !important;
}

body.dark-mode #password-box label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Force override any inline styles on password popup labels */
body.dark-mode #password-box fieldset label[style*="color"],
body.dark-mode #password-box label[style*="color"] {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Override inline styles on inputs */
body.dark-mode #password-box input[type="password"],
body.dark-mode #password-box input[type="text"] {
    background-color: #334155 !important;
    border: 1px solid #475569 !important;
    color: #f1f5f9 !important;
    background: #334155 !important;
}

body.dark-mode #password-box input[type="password"]::placeholder,
body.dark-mode #password-box input[type="text"]::placeholder {
    color: #94a3b8 !important;
}

body.dark-mode #password-box small {
    color: #94a3b8 !important;
}

body.dark-mode #password-box button.submit {
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
}

body.dark-mode #password-box button.submit:hover {
    background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
}

/* ===== Home Page Profile Popup - Dark Mode ===== */
body.dark-mode #profile-box {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.97)) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
}

body.dark-mode #profile-box h3 {
    color: #ffffff !important;
}

body.dark-mode #profile-box .profile-section-title {
    color: #f1f5f9 !important;
}

body.dark-mode #profile-box .profile-field span {
    color: #cbd5e1 !important;
}

body.dark-mode #profile-box .profile-field input {
    background-color: #334155 !important;
    border: 1px solid #475569 !important;
    color: #f1f5f9 !important;
}

body.dark-mode #profile-box button.submit {
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
}

body.dark-mode #profile-box button.submit:hover {
    background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
}

/* ===== Home Page General Settings Popup - Dark Mode ===== */
body.dark-mode #general-settings-box {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.97)) !important;
    border: 1px solid rgba(71, 85, 105, 0.4) !important;
}

body.dark-mode #general-settings-box h3 {
    color: #ffffff !important;
}

body.dark-mode #general-settings-box .profile-section-title {
    color: #f1f5f9 !important;
}

body.dark-mode #general-settings-box label {
    color: #f1f5f9 !important;
}

body.dark-mode #general-settings-box select,
body.dark-mode #general-settings-box input[type="text"] {
    background-color: #334155 !important;
    border: 1px solid #475569 !important;
    color: #f1f5f9 !important;
}

body.dark-mode #general-settings-box small {
    color: #94a3b8 !important;
}

body.dark-mode #general-settings-box button.submit {
    background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
}

body.dark-mode #general-settings-box button.submit:hover {
    background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
}

/* ===== Home Page Stats Cards - Dark Mode ===== */
/* Use html tag selector for highest specificity */
html body.dark-mode#home .stats-container,
html body.dark-mode .stats-container,
body.dark-mode#home .stats-container,
body.dark-mode .stats-container {
    background: linear-gradient(180deg, #1e293b, #0f172a) !important;
    background-color: #1e293b !important;
    border: 1px solid #475569 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

html body.dark-mode#home .stat-card,
html body.dark-mode .stat-card,
body.dark-mode#home .stat-card,
body.dark-mode .stat-card {
    background: linear-gradient(180deg, #334155, #2d3748) !important;
    background-color: #334155 !important;
    border: 1px solid #475569 !important;
    color: #f1f5f9 !important;
}

html body.dark-mode#home .stat-card:hover,
html body.dark-mode .stat-card:hover,
body.dark-mode#home .stat-card:hover,
body.dark-mode .stat-card:hover {
    background: linear-gradient(180deg, #3d4f65, #334155) !important;
    background-color: #3d4f65 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-2px);
}

html body.dark-mode#home .stat-label,
html body.dark-mode .stat-label,
body.dark-mode#home .stat-label,
body.dark-mode .stat-label {
    color: #cbd5e1 !important;
}

html body.dark-mode#home .stat-value,
html body.dark-mode .stat-value,
body.dark-mode#home .stat-value,
body.dark-mode .stat-value {
    color: #3b82f6 !important;
}

html body.dark-mode#home .stat-value i,
html body.dark-mode .stat-value i,
body.dark-mode#home .stat-value i,
body.dark-mode .stat-value i {
    color: #3b82f6 !important;
}

html body.dark-mode#home .num,
html body.dark-mode .num,
body.dark-mode#home .num,
body.dark-mode .num {
    color: #3b82f6 !important;
}

/* ===== Reference Bucket Badges - Dark Mode ===== */
/* Override inline styles for reference source badges (Edge, Background, Database, Excluded, Claim) */
body.dark-mode span[style*="border-radius:999px"][style*="font-weight:700"] {
    color: #f1f5f9 !important;
}

/* Edge badge - change from light blue #dbeafe to darker blue */
body.dark-mode span[style*="background:#dbeafe"] {
    background-color: #1e3a5f !important;
    background: #1e3a5f !important;
    color: #93c5fd !important;
}

/* Background badge - change from light green #dcfce7 to darker green */
body.dark-mode span[style*="background:#dcfce7"] {
    background-color: #14532d !important;
    background: #14532d !important;
    color: #86efac !important;
}

/* Database badge - change from light yellow #fde68a to darker yellow */
body.dark-mode span[style*="background:#fde68a"] {
    background-color: #713f12 !important;
    background: #713f12 !important;
    color: #fde68a !important;
}

/* Claim badge - change from light orange #ffedd5 to darker orange */
body.dark-mode span[style*="background:#ffedd5"] {
    background-color: #7c2d12 !important;
    background: #7c2d12 !important;
    color: #fdba74 !important;
}

/* Excluded badge - change from light red #fee2e2 to darker red */
body.dark-mode span[style*="background:#fee2e2"] {
    background-color: #7f1d1d !important;
    background: #7f1d1d !important;
    color: #fca5a5 !important;
}

html body.dark-mode#home .clickable:hover,
html body.dark-mode .clickable:hover,
body.dark-mode#home .clickable:hover,
body.dark-mode .clickable:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #2563eb !important;
    border-radius: 3px;
    padding: 2px 4px;
}

html body.dark-mode#home #entity-detail-container,
html body.dark-mode #entity-detail-container,
body.dark-mode#home #entity-detail-container,
body.dark-mode #entity-detail-container {
    background: linear-gradient(180deg, #1e293b, #0f172a) !important;
    background-color: #1e293b !important;
    border: 1px solid #475569 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Entity detail container table styles in dark mode */
body.dark-mode #entity-detail-container table {
    background-color: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(71, 85, 105, 0.5) !important;
    color: var(--text-primary) !important;
}

body.dark-mode #entity-detail-container table th {
    background-color: rgba(51, 65, 85, 0.95) !important;
    border-color: rgba(71, 85, 105, 0.5) !important;
    color: var(--text-primary) !important;
}

body.dark-mode #entity-detail-container table td {
    border-color: rgba(71, 85, 105, 0.4) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode #entity-detail-container table tr:hover td {
    background-color: rgba(51, 65, 85, 0.6) !important;
}

/* ===== Notification Popup - Dark Mode ===== */
body.dark-mode .notification-popup {
    background: #1e293b !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .notification-header {
    background: #334155 !important;
    border-bottom-color: #475569 !important;
}

body.dark-mode .notification-header h3,
body.dark-mode .notification-header h3 i {
    color: #ffffff !important;
}

body.dark-mode .notification-table thead {
    background-color: #334155 !important;
}

body.dark-mode .notification-table th {
    color: #ffffff !important;
    border-bottom-color: #475569 !important;
}

body.dark-mode .notification-table td {
    border-bottom-color: #475569 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .notification-table tbody tr:hover {
    background-color: #334155 !important;
}

body.dark-mode .notification-table tbody tr.unread {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

body.dark-mode .notification-table tbody tr.unread:hover {
    background-color: rgba(59, 130, 246, 0.25) !important;
}

body.dark-mode .notification-empty {
    color: #94a3b8 !important;
}

body.dark-mode .notification-footer {
    background: #334155 !important;
    border-top-color: #475569 !important;
}

body.dark-mode .notification-time-cell {
    color: #94a3b8 !important;
}

/* Notification type badges */
body.dark-mode .notification-type.announcement {
    background-color: rgba(251, 146, 60, 0.2) !important;
    color: #fb923c !important;
}

body.dark-mode .notification-type.comment {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

body.dark-mode .notification-status.unread {
    background-color: #ef4444 !important;
}

body.dark-mode .notification-status.read {
    background-color: #10b981 !important;
}

/* ===== Hide specific ExtJS tool buttons ===== */
/* Hide collapse-top button */
body.dark-mode .x-tool-collapse-top,
body.dark-mode img.x-tool-collapse-top {
    display: none !important;
}