/* ========================================
   DARK THEME - For CodeBot Dashboard
   ======================================== */

/* ========================================
   CSS VARIABLES
   ======================================== */
html[data-color-theme="dark"] {
    /* Base Colors */
    --cb-bg-primary: #0f1117;
    --cb-bg-secondary: #15171e;
    --cb-bg-card: #1a1d27;
    --cb-bg-dropdown: #1a1d27;
    --cb-bg-input: #1a1d27;
    --cb-bg-hover: rgba(99, 102, 241, 0.1);
    --cb-bg-hover-strong: rgba(99, 102, 241, 0.15);
    --cb-bg-hover-active: rgba(99, 102, 241, 0.25);
    --cb-bg-hover-profile: rgba(99, 102, 241, 0.08);
    --cb-bg-hover-language: rgba(99, 102, 241, 0.12);
    --cb-bg-submenu: rgba(0, 0, 0, 0.3);
    --cb-bg-search: rgba(255, 255, 255, 0.05);

    /* Border Colors */
    --cb-border-color: #2a2d3a;
    --cb-border-input: #3a3d4a;

    /* Text Colors */
    --cb-text-primary: #ffffff;
    --cb-text-secondary: rgba(255, 255, 255, 0.7);
    --cb-text-muted: rgba(255, 255, 255, 0.6);
    --cb-text-muted-light: rgba(255, 255, 255, 0.5);
    --cb-text-disabled: rgba(255, 255, 255, 0.3);
    --cb-text-nav: rgba(255, 255, 255, 0.6);
    --cb-text-nav-hover: #ffffff;
    --cb-text-dropdown: rgba(255, 255, 255, 0.8);
    --cb-text-submenu: rgba(255, 255, 255, 0.5);
    --cb-text-icon: #ffffff;
    --cb-text-footer: rgba(255, 255, 255, 0.5);

    /* Accent Colors */
    --cb-accent-primary: #6366f1;
    --cb-accent-secondary: #4f46e5;
    --cb-accent-hover: #8b5cf6;
    --cb-accent-active: #7c3aed;

    /* Status Colors */
    --cb-success: #059669;
    --cb-success-light: #10b981;
    --cb-danger: #dc2626;
    --cb-danger-light: #ef4444;
    --cb-warning: #d97706;
    --cb-warning-light: #f59e0b;
    --cb-info: #0891b2;
    --cb-info-light: #06b6d4;
    --cb-pink: #db2777;
    --cb-pink-light: #ec4899;

    /* Shadows - Only for dark mode, keeping original structure */
    --cb-shadow-sm: 0 2px 20px rgba(0, 0, 0, 0.3);
    --cb-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.2);
    --cb-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
    --cb-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);

    /* Filters */
    --cb-filter-logo: brightness(1);
    --cb-filter-language: brightness(0.9);
    --cb-filter-close: invert(1);
    --cb-filter-chart: brightness(0.9);
}
html[data-color-theme="dark"] .logo-img {
    content: url('/static/web_assets/img/sfcodebot_new_logo_transparent(1)_white.png') !important;
    max-height: 35px !important;
}

/* ========================================
   BASE BACKGROUNDS
   ======================================== */
html[data-color-theme="dark"],
html[data-color-theme="dark"] body,
html[data-color-theme="dark"] .page-content,
html[data-color-theme="dark"] .content-wrapper,
html[data-color-theme="dark"] .main-content {
    background-color: var(--cb-bg-primary) !important;
    color: var(--cb-text-primary) !important;
}

/* ========================================
   SIDEBAR
   ======================================== */
html[data-color-theme="dark"] .sidebar,
html[data-color-theme="dark"] .sidebar-dark,
html[data-color-theme="dark"] .sidebar-light {
    background-color: var(--cb-bg-card) !important;
    border-right-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .sidebar .nav-link,
html[data-color-theme="dark"] .sidebar .nav-link i,
html[data-color-theme="dark"] .sidebar-dark .nav-link,
html[data-color-theme="dark"] .sidebar-menu-item a {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .sidebar .nav-link:hover,
html[data-color-theme="dark"] .sidebar-dark .nav-link:hover,
html[data-color-theme="dark"] .sidebar-menu-item a:hover {
    color: var(--cb-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-color-theme="dark"] .sidebar .nav-link.active,
html[data-color-theme="dark"] .sidebar-dark .nav-link.active {
    color: var(--cb-text-primary) !important;
    background-color: rgba(99, 102, 241, 0.2) !important;
    border-left-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .sidebar .sidebar-menu-section {
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .sidebar .sub-menu,
html[data-color-theme="dark"] .sidebar .submenu {
    background-color: var(--cb-bg-submenu) !important;
}

html[data-color-theme="dark"] .sidebar .sub-menu .nav-link,
html[data-color-theme="dark"] .sidebar .submenu .nav-link {
    color: var(--cb-text-submenu) !important;
}

html[data-color-theme="dark"] .sidebar .sub-menu .nav-link:hover,
html[data-color-theme="dark"] .sidebar .submenu .nav-link:hover {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .sidebar .sub-menu .nav-link.active,
html[data-color-theme="dark"] .sidebar .submenu .nav-link.active {
    color: var(--cb-accent-primary) !important;
}

/* Sidebar Brand/Logo */
html[data-color-theme="dark"] .navbar-brand,
html[data-color-theme="dark"] .logo,
html[data-color-theme="dark"] .brand {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .navbar-brand span,
html[data-color-theme="dark"] .logo span {
    color: var(--cb-accent-primary) !important;
}

/* ========================================
   HEADER / TOP NAVBAR
   ======================================== */
html[data-color-theme="dark"] .top-navbar {
    background-color: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .top-navbar,
html[data-color-theme="dark"] .top-navbar {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .navbar-nav-link {
    color: var(--cb-text-nav) !important;
}

html[data-color-theme="dark"] .top-navbar .navbar-nav-link i{
    color: #ffffff !important;
}

html[data-color-theme="dark"] .top-navbar .navbar-nav-link:hover {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .top-navbar .navbar-nav-link span {
    color: #ffffff !important;
}

/* DROPDOWN MENUS */
html[data-color-theme="dark"] .top-navbar .dropdown-menu {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .top-navbar .dropdown-menu * {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .dropdown-item {
    color: var(--cb-text-dropdown) !important;
}

html[data-color-theme="dark"] .top-navbar .dropdown-item:hover {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .dropdown-item:active {
    background-color: var(--cb-bg-hover-active) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .dropdown-divider {
    border-color: var(--cb-border-color) !important;
}

/* PROFILE SECTION */
html[data-color-theme="dark"] .top-navbar .profile-name {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .company-name {
    color: var(--cb-text-muted-light) !important;
}

html[data-color-theme="dark"] .top-navbar .Fullname_user {
    color: var(--cb-text-dropdown) !important;
}

html[data-color-theme="dark"] .top-navbar .profileImage {
    background-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-primary) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

html[data-color-theme="dark"] .top-navbar .profileImage:hover {
    background-color: var(--cb-accent-hover) !important;
    border-color: var(--cb-accent-hover) !important;
}

html[data-color-theme="dark"] .top-navbar .profileImage .letter-icon {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .profile.dropdown-toggle:hover {
    background-color: var(--cb-bg-hover-profile) !important;
}

/* LANGUAGE DROPDOWN */
html[data-color-theme="dark"] .top-navbar .language-name {
    color: var(--cb-text-dropdown) !important;
}

html[data-color-theme="dark"] .top-navbar .language-img {
    filter: var(--cb-filter-language) !important;
}

html[data-color-theme="dark"] .top-navbar .language-option:hover {
    background-color: var(--cb-bg-hover-language) !important;
}

/* THEME TOGGLE BUTTON */
html[data-color-theme="dark"] .top-navbar #theme-toggle {
    background-color: transparent !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar #theme-toggle:hover {
    background-color: var(--cb-bg-hover-strong) !important;
    border-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .top-navbar #theme-toggle:active {
    background-color: var(--cb-bg-hover-active) !important;
}

/* CHEVRON ICONS */
html[data-color-theme="dark"] .top-navbar .fa-chevron-down {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* LOGO */
html[data-color-theme="dark"] .top-navbar .logo-img {
    filter: var(--cb-filter-logo) !important;
}

/* TIME ZONE BOX */
html[data-color-theme="dark"] .top-navbar .bg-orange-500 {
    background-color: rgba(99, 102, 241, 0.2) !important;
}

html[data-color-theme="dark"] .top-navbar .bg-orange-500 * {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar #getZone {
    color: var(--cb-text-nav) !important;
}

html[data-color-theme="dark"] .top-navbar .bg-orange-500:hover {
    background-color: rgba(99, 102, 241, 0.3) !important;
}

/* FORM SWITCH */
html[data-color-theme="dark"] .top-navbar .form-check-input {
    background-color: var(--cb-border-color) !important;
    border-color: var(--cb-border-input) !important;
}

html[data-color-theme="dark"] .top-navbar .form-check-input:checked {
    background-color: var(--cb-accent-primary) !important;
    border-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .dashboard-title {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .dropdown-toggle::after {
    color: rgba(255, 255, 255, 0.4) !important;
}

html[data-color-theme="dark"] .top-navbar .notif-dot {
    background-color: var(--cb-danger-light) !important;
}

html[data-color-theme="dark"] .top-navbar .btn {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .text-dark {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .text-muted {
    color: var(--cb-text-muted-light) !important;
}

html[data-color-theme="dark"] .top-navbar .dropdown-item i,
html[data-color-theme="dark"] .top-navbar .dropdown-item .fa,
html[data-color-theme="dark"] .top-navbar .dropdown-item .icon-user-plus,
html[data-color-theme="dark"] .top-navbar .dropdown-item .icon-switch2,
html[data-color-theme="dark"] .top-navbar .dropdown-item .fas,
html[data-color-theme="dark"] .top-navbar .dropdown-item .far {
    color: var(--cb-text-icon) !important;
}

html[data-color-theme="dark"] .top-navbar .dropdown-item:hover i,
html[data-color-theme="dark"] .top-navbar .dropdown-item:hover .fa,
html[data-color-theme="dark"] .top-navbar .dropdown-item:hover .icon-user-plus,
html[data-color-theme="dark"] .top-navbar .dropdown-item:hover .icon-switch2,
html[data-color-theme="dark"] .top-navbar .dropdown-item:hover .fas,
html[data-color-theme="dark"] .top-navbar .dropdown-item:hover .far {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .dropdown-header {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .top-navbar .dropdown-item.disabled,
html[data-color-theme="dark"] .top-navbar .dropdown-item:disabled {
    color: var(--cb-text-disabled) !important;
}

html[data-color-theme="dark"] .top-navbar .fa-bell {
    color: var(--cb-text-icon) !important;
}

html[data-color-theme="dark"] .top-navbar .fa-bell:hover {
    color: var(--cb-text-primary) !important;
}

/* SEARCH BAR */
html[data-color-theme="dark"] .sidebar-content .search-bar {
    background-color: var(--cb-bg-search) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .sidebar-content .search-bar input {
    background-color: transparent !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .sidebar-content .search-bar input::placeholder {
    color: var(--cb-text-disabled) !important;
}

html[data-color-theme="dark"] .sidebar-content .sidebar-menu-section-title ,
html[data-color-theme="dark"] .sidebar-content .search-bar .fa-search{
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] body.sidebar-collapsed .sidebar .search-bar {
    background-color: transparent !important;
}

html[data-color-theme="dark"] .sidebar .search-bar input {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .hstack {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .dropdown-menu .text-dark {
    color: var(--cb-text-primary) !important;
}

/* ========================================
   ITERATION STATUS BADGES - CLEAN
   ======================================== */

/* ========================================
   1. STUCK
   ======================================== */
html[data-color-theme="dark"] .status-stuck {
    background-color: rgba(168, 85, 247, 0.4) !important;
    border: 2px solid #a855f7 !important;
    color: #ffffff !important;
}

/* ========================================
   2. PROCESSING
   ======================================== */
html[data-color-theme="dark"] .status-processing {
    background-color: rgba(251, 191, 36, 0.4) !important;
    border: 2px solid #fbbf24 !important;
    color: #ffffff !important;
}

/* ========================================
   3. READY TO GO
   ======================================== */
html[data-color-theme="dark"] .status-ready {
    background-color: rgba(99, 102, 241, 0.4) !important;
    border: 2px solid #818cf8 !important;
    color: #ffffff !important;
}

/* ========================================
   4. COMPLETED
   ======================================== */
html[data-color-theme="dark"] .status-completed {
    background-color: rgba(52, 211, 153, 0.4) !important;
    border: 2px solid #34d399 !important;
    color: #ffffff !important;
}

/* ========================================
   5. ERROR
   ======================================== */
html[data-color-theme="dark"] .status-error {
    background-color: rgba(239, 68, 68, 0.4) !important;
    border: 2px solid #ef4444 !important;
    color: #ffffff !important;
}

/* ========================================
   6. STOPPED
   ======================================== */
html[data-color-theme="dark"] .status-stopped {
    background-color: rgba(156, 163, 175, 0.3) !important;
    border: 2px solid #9ca3af !important;
    color: #ffffff !important;
}

/* ========================================
   7. LOGIN FAILED
   ======================================== */
html[data-color-theme="dark"] .status-login-failed {
    background-color: rgba(220, 38, 38, 0.4) !important;
    border: 2px solid #ef4444 !important;
    color: #ffffff !important;
}

/* ========================================
   8. PERMISSION ISSUE
   ======================================== */
html[data-color-theme="dark"] .status-permission-issue {
    background-color: rgba(99, 102, 241, 0.4) !important;
    border: 2px solid #818cf8 !important;
    color: #ffffff !important;
}

/* ========================================
   9. DATA ISSUE
   ======================================== */
html[data-color-theme="dark"] .status-data-issue {
    background-color: rgba(168, 85, 247, 0.4) !important;
    border: 2px solid #a855f7 !important;
    color: #ffffff !important;
}

/* ========================================
   10. GENERAL ISSUE
   ======================================== */
html[data-color-theme="dark"] .status-general-issue {
    background-color: rgba(251, 191, 36, 0.4) !important;
    border: 2px solid #fbbf24 !important;
    color: #ffffff !important;
}

/* ========================================
   11. REQUEST ERROR
   ======================================== */
html[data-color-theme="dark"] .status-request-error {
    background-color: rgba(139, 92, 246, 0.4) !important;
    border: 2px solid #8b5cf6 !important;
    color: #ffffff !important;
}

/* ========================================
   CHOSEN DROPDOWN
   ======================================== */
html[data-color-theme="dark"] .chosen-container {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .chosen-container-single .chosen-single {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .chosen-container-single .chosen-single span {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-drop {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-search {
    background-color: var(--cb-bg-dropdown) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-search input[type="text"] {
    background-color: var(--cb-bg-input) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-search input[type="text"]::placeholder {
    color: var(--cb-text-disabled) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-search input[type="text"]:focus {
    border-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results {
    background-color: var(--cb-bg-dropdown) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results li {
    color: var(--cb-text-dropdown) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results li:hover {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results li.result-selected {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results li.result-selected:hover {
    background-color: rgba(99, 102, 241, 0.25) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results li.highlighted {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results li.disabled-result {
    color: var(--cb-text-disabled) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results li.disabled-result:hover {
    background-color: transparent !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results li.no-results {
    color: var(--cb-text-muted) !important;
    background-color: transparent !important;
}

html[data-color-theme="dark"] .chosen-container-active .chosen-single {
    border-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .chosen-container-active.chosen-with-drop .chosen-single {
    border-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .chosen-container-disabled .chosen-single {
    background-color: var(--cb-border-color) !important;
    opacity: 0.6 !important;
}

html[data-color-theme="dark"] .chosen-container-multi .chosen-choices {
    background-color: var(--cb-bg-input) !important;
}

html[data-color-theme="dark"] .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .chosen-container-multi .chosen-choices li.search-choice {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results li.group-result {
    color: var(--cb-accent-primary) !important;
    background-color: transparent !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .chosen-container .chosen-results::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}

/* BTN-SUCCESS OVERRIDE */
html[data-color-theme="dark"] .top-navbar .btn-success {
    background-color: var(--cb-accent-secondary) !important;
    border-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .top-navbar .btn-success:hover {
    background-color: var(--cb-accent-hover) !important;
    border-color: var(--cb-accent-hover) !important;
}

/* FAVORITES DROPDOWN */
html[data-color-theme="dark"] .top-navbar .favourite-dropdown {
    color: var(--cb-text-nav) !important;
}

html[data-color-theme="dark"] .top-navbar .favourite-dropdown:hover {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover-profile) !important;
}

/* ADMIN DROPDOWN */
html[data-color-theme="dark"] .top-navbar .language.dropdown-toggle {
    color: var(--cb-text-nav) !important;
}

html[data-color-theme="dark"] .top-navbar .language.dropdown-toggle:hover {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover-profile) !important;
}

/* ========================================
   NAVBAR / HEADER (General)
   ======================================== */
html[data-color-theme="dark"] .search-bar,
html[data-color-theme="dark"] .navbar,
html[data-color-theme="dark"] .header,
html[data-color-theme="dark"] .topbar,
html[data-color-theme="dark"] .navbar-light,
html[data-color-theme="dark"] .navbar-dark {
    background-color: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .page-header {
    background-color: var(--cb-bg-primary) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .navbar .nav-link,
html[data-color-theme="dark"] .page-header .nav-link {
    color: var(--cb-text-nav) !important;
}

html[data-color-theme="dark"] .navbar .nav-link:hover,
html[data-color-theme="dark"] .page-header .nav-link:hover {
    color: var(--cb-text-primary) !important;
}

/* ========================================
   CARDS
   ======================================== */
html[data-color-theme="dark"] .card,
html[data-color-theme="dark"] .card-body,
html[data-color-theme="dark"] .card-footer,
html[data-color-theme="dark"] .list-group {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .card-header {
    background-color: #2226338c !important
}

html[data-color-theme="dark"] .account-overview .card {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .card,
html[data-color-theme="dark"] .card * {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .inner-content-card,
html[data-color-theme="dark"] .inner-content-card .badge,
html[data-color-theme="dark"] .inner-content-card .card {
    background-color: var(--cb-bg-secondary) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .card .card-title {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .card .card-text,
html[data-color-theme="dark"] .card p {
    color: var(--cb-text-secondary) !important;
}

html[data-color-theme="dark"] .card .text-muted {
    color: var(--cb-text-muted) !important;
}

/* ========================================
   STAT CARDS - Colored
   ======================================== */
html[data-color-theme="dark"] .card.bg-primary {
    background-color: var(--cb-accent-secondary) !important;
}
html[data-color-theme="dark"] .card.bg-success {
    background-color: var(--cb-success) !important;
}
html[data-color-theme="dark"] .card.bg-danger {
    background-color: var(--cb-danger) !important;
}
html[data-color-theme="dark"] .card.bg-warning {
    background-color: var(--cb-warning) !important;
}
html[data-color-theme="dark"] .card.bg-info {
    background-color: var(--cb-info) !important;
}
html[data-color-theme="dark"] .card.bg-purple {
    background-color: var(--cb-accent-active) !important;
}
html[data-color-theme="dark"] .card.bg-pink {
    background-color: var(--cb-pink) !important;
}

html[data-color-theme="dark"] .card.bg-primary *,
html[data-color-theme="dark"] .card.bg-success *,
html[data-color-theme="dark"] .card.bg-danger *,
html[data-color-theme="dark"] .card.bg-warning *,
html[data-color-theme="dark"] .card.bg-info *,
html[data-color-theme="dark"] .card.bg-purple *,
html[data-color-theme="dark"] .card.bg-pink * {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .text-danger {
    color: var(--cb-danger-light) !important;
}

/* ========================================
   TABLES
   ======================================== */
html[data-color-theme="dark"] .table,
html[data-color-theme="dark"] .table tbody,
html[data-color-theme="dark"] .table tr,
html[data-color-theme="dark"] .table td,
html[data-color-theme="dark"] .table th {
    background-color: transparent !important;
    border-color: var(--cb-border-color) !important;
}



html[data-color-theme="dark"] .table {
    color: rgba(255, 255, 255, 0.85) !important;
}

html[data-color-theme="dark"] .table thead {
    color: var(--cb-text-primary) !important;
    background-color: #222633 !important
}

html[data-color-theme="dark"] .table thead th {
    color: var(--cb-text-primary) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

html[data-color-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

html[data-color-theme="dark"] .table tbody tr[title="Deprecated"],
html[data-color-theme="dark"] .table tbody tr[title="Deprecated"] td{
    background-color: #222633 !important
}


/* ========================================
   FORMS
   ======================================== */
html[data-color-theme="dark"] .form-control,
html[data-color-theme="dark"] .form-select,
html[data-color-theme="dark"] .input-group-text {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .form-control:focus,
html[data-color-theme="dark"] .form-select:focus {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .form-label {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .form-control::placeholder {
    color: var(--cb-text-disabled) !important;
}

/* ========================================
   DROPDOWNS (General)
   ======================================== */
html[data-color-theme="dark"] .dropdown-menu {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .dropdown-menu * {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .dropdown-item {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .dropdown-item:hover,
html[data-color-theme="dark"] .dropdown-item:focus {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .dropdown-divider {
    border-color: var(--cb-border-color) !important;
}

/* ========================================
   BOOTSTRAP UTILITY OVERRIDES
   ======================================== */
html[data-color-theme="dark"] .bg-white {
    background-color: var(--cb-bg-secondary) !important;
    color: var(--cb-text-primary) !important;
}
html[data-color-theme="dark"] .bg-light {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
}
html[data-color-theme="dark"] .bg-dark {
    background-color: var(--cb-bg-primary) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .text-white,
html[data-color-theme="dark"] .text-light,
html[data-color-theme="dark"] .text-dark,
html[data-color-theme="dark"] .text-body {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .text-muted {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .border,
html[data-color-theme="dark"] .border-top,
html[data-color-theme="dark"] .border-bottom,
html[data-color-theme="dark"] .border-start,
html[data-color-theme="dark"] .border-end {
    border-color: var(--cb-border-color) !important;
}

/* ========================================
   BUTTONS (General)
   ======================================== */
html[data-color-theme="dark"] .btn {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .btn-light {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .btn-light:hover {
    background-color: var(--cb-border-color) !important;
    border-color: var(--cb-border-input) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .btn-outline-secondary {
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .btn-primary {
    background-color: var(--cb-accent-secondary) !important;
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .btn-success {
    background-color: var(--cb-success) !important;
    border-color: var(--cb-success-light) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .btn-danger {
    background-color: var(--cb-danger) !important;
    border-color: var(--cb-danger-light) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .btn-warning {
    background-color: var(--cb-warning) !important;
    border-color: var(--cb-warning-light) !important;
    color: var(--cb-text-primary) !important;
}

/* ========================================
   MODALS
   ======================================== */
html[data-color-theme="dark"] .modal-content {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .modal-content * {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .modal-header,
html[data-color-theme="dark"] .modal-footer {
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .modal-title {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .btn-close {
    filter: var(--cb-filter-close) !important;
}

/* ========================================
   PAGINATION
   ======================================== */
html[data-color-theme="dark"] .pagination .page-link {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .pagination .page-link:hover {
    background-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--cb-accent-secondary) !important;
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-primary) !important;
}

/* ========================================
   ALERTS
   ======================================== */
html[data-color-theme="dark"] .alert {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .alert * {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .alert-primary {
    background-color: rgba(99, 102, 241, 0.2) !important;
    border-color: var(--cb-accent-primary) !important;
}
html[data-color-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    border-color: var(--cb-success-light) !important;
}
html[data-color-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    border-color: var(--cb-danger-light) !important;
}
html[data-color-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    border-color: var(--cb-warning-light) !important;
}
html[data-color-theme="dark"] .alert-info {
    background-color: rgba(6, 182, 212, 0.2) !important;
    border-color: var(--cb-info-light) !important;
}


/* ========================================
   PROGRESS BARS
   ======================================== */
html[data-color-theme="dark"] .progress {
    background-color: var(--cb-bg-card) !important;
}

html[data-color-theme="dark"] .progress-bar {
    background-color: var(--cb-accent-secondary) !important;
    color: var(--cb-text-primary) !important;
}

/* ========================================
   TOASTS / NOTIFICATIONS
   ======================================== */
html[data-color-theme="dark"] .toast {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .toast * {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .toast-header {
    background-color: transparent !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .toast-body {
    color: var(--cb-text-primary) !important;
}

/* ========================================
   FOOTER
   ======================================== */
html[data-color-theme="dark"] .footer,
html[data-color-theme="dark"] footer {
    background-color: var(--cb-bg-primary) !important;
    border-top-color: var(--cb-border-color) !important;
    color: var(--cb-text-footer) !important;
}

html[data-color-theme="dark"] .footer *,
html[data-color-theme="dark"] footer * {
    color: var(--cb-text-footer) !important;
}

/* ========================================
   SCROLLBAR
   ======================================== */
html[data-color-theme="dark"] ::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary);
}
html[data-color-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color);
}
html[data-color-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input);
}

/* ========================================
   CHARTS / GRAPHS
   ======================================== */
html[data-color-theme="dark"] .chart-container,
html[data-color-theme="dark"] [class*="chart"] {
    background-color: transparent !important;
}

html[data-color-theme="dark"] .chartjs-render-monitor {
    filter: var(--cb-filter-chart) !important;
}

/* ========================================
   LINKS
   ======================================== */
html[data-color-theme="dark"] a:not(.btn):not(.nav-link) {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] a:not(.btn):not(.nav-link):hover {
    color: var(--cb-text-primary) !important;
}

/* ========================================
   MODAL LOADER - SIMPLE FIX
   ======================================== */

/* Hide the white GIF */
html[data-color-theme="dark"] #loader img {
    display: none !important;
}

/* Only show spinner when loader is visible (display: block or flex) */
html[data-color-theme="dark"] #loader[style*="display: block"]::after,
html[data-color-theme="dark"] #loader[style*="display:flex"]::after {
    content: '' !important;
    display: inline-block !important;
    width: 40px !important;
    height: 40px !important;
    border: 3px solid var(--cb-border-color) !important;
    border-top: 3px solid var(--cb-accent-primary) !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
    margin: 20px auto !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* When loader is hidden, remove spinner */
html[data-color-theme="dark"] #loader[style*="display: none"]::after {
    display: none !important;
}

/* ========================================
   HEADINGS
   ======================================== */
html[data-color-theme="dark"] h1,
html[data-color-theme="dark"] h2,
html[data-color-theme="dark"] h3,
html[data-color-theme="dark"] h4,
html[data-color-theme="dark"] h5,
html[data-color-theme="dark"] h6 {
    color: var(--cb-text-primary) !important;
}

/* ========================================
   TEXTAREA
   ======================================== */

html[data-color-theme="dark"] textarea {
    background-color: var(--cb-bg-input) !important;
    color: var(--cb-text-primary) !important;
}


/* ========================================
   AI CONTENT PANEL WITH LOGS - DARK THEME (Colors Only)
   ======================================== */

html[data-color-theme="dark"] .cb-ai-layout aside h4{
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .cb-ai-layout .form-select{
    background-image: none !important;
}

/* Buttons - Color only */
html[data-color-theme="dark"] .btn-outline-none {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .btn-outline-none:hover {
    color: var(--cb-text-primary) !important;
}

/* Borders - Color only */
html[data-color-theme="dark"] .border {
    border-color: var(--cb-border-color) !important;
}

/* Text - Color only */
html[data-color-theme="dark"] .text-muted {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .fw-semibold {
    color: var(--cb-text-primary) !important;
}

/* Icons - Color only */
html[data-color-theme="dark"] .fas,
html[data-color-theme="dark"] .fa {
    color: var(--cb-text-icon) !important;
}

html[data-color-theme="dark"] .fas.fa-coins {
    color: #f59e0b !important;
}

html[data-color-theme="dark"] .fas.fa-ticket-alt {
    color: var(--cb-accent-primary) !important;
}

/* Status - Color only */
html[data-color-theme="dark"] #runStatus {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] #elapsed {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] #availableCredits {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] #queryCostDisplay {
    color: var(--cb-text-primary) !important;
}

/* AI Content Panel - Color only */
html[data-color-theme="dark"] .cb-ai-content-panel {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

/* AI Content Header - Color only */
html[data-color-theme="dark"] .cb-ai-content-header {
    background-color: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .cb-ai-content-header .ai-h {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .cb-ai-content-header .text-muted {
    color: var(--cb-text-muted) !important;
}

/* ========================================
   DIAGNOSIS BODY - DARK THEME (Colors Only)
   ======================================== */

/* Diagnosis container - Color only */
html[data-color-theme="dark"] .diagnosis-body {
    background-color: var(--cb-bg-secondary) !important;
    color: var(--cb-text-primary) !important;
}

/* Paragraphs - Color only */
html[data-color-theme="dark"] .diagnosis-body p {
    color: var(--cb-text-primary) !important;
}

/* Lists (ordered/unordered) - Color only */
html[data-color-theme="dark"] .diagnosis-body ol,
html[data-color-theme="dark"] .diagnosis-body ul {
    color: var(--cb-text-primary) !important;
}

/* List items - Color only */
html[data-color-theme="dark"] .diagnosis-body li {
    color: var(--cb-text-primary) !important;
}

/* Strong/bold text - Color only */
html[data-color-theme="dark"] .diagnosis-body strong {
    color: var(--cb-text-primary) !important;
}

/* Links - Color only */
html[data-color-theme="dark"] .diagnosis-body a {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .diagnosis-body a:hover {
    color: var(--cb-accent-hover) !important;
}

/* Code blocks - Color only */
html[data-color-theme="dark"] .diagnosis-body code {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
}

/* Blockquotes - Color only */
html[data-color-theme="dark"] .diagnosis-body blockquote {
    border-left-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-secondary) !important;
}

/* Horizontal rule - Color only */
html[data-color-theme="dark"] .diagnosis-body hr {
    border-color: var(--cb-border-color) !important;
}

/* Highlight/emphasized text - Color only */
html[data-color-theme="dark"] .diagnosis-body em {
    color: var(--cb-accent-primary) !important;
}

/* Example text - Color only */
html[data-color-theme="dark"] .diagnosis-body .example {
    color: var(--cb-text-muted) !important;
}

/* AI Tab Group - Color only */
html[data-color-theme="dark"] .cb-ai-tab-group {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .cb-ai-tab,
 html[data-color-theme="dark"] .ai-consoleTab.active {
    color: var(--cb-text-nav) !important;
}

html[data-color-theme="dark"] .cb-ai-tab:hover {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .cb-ai-tab.active {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover-strong) !important;
}

/* AI Content Body - Color only */
html[data-color-theme="dark"] .cb-ai-content-body {
    background-color: var(--cb-bg-secondary) !important;
    color: var(--cb-text-primary) !important;
}

/* AI Log Container - Color only */
html[data-color-theme="dark"] #c-log {
    background-color: var(--cb-bg-secondary) !important;
    color: var(--cb-text-primary) !important;
}

/* AI Text Muted - Color only */
html[data-color-theme="dark"] .cb-ai-text-muted {
    color: var(--cb-text-muted) !important;
}

/* AI Log Stream - Color only */
html[data-color-theme="dark"] .cb-ai-log-stream {
    background-color: var(--cb-bg-secondary) !important;
    color: var(--cb-text-primary) !important;
}

/* AI Log Line - Color only */
html[data-color-theme="dark"] .cb-ai-log-line {
    color: var(--cb-text-primary) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

/* AI Log Time - Color only */
html[data-color-theme="dark"] .cb-ai-log-time {
    color: var(--cb-text-muted) !important;
}

/* AI Log Level - Color only */
html[data-color-theme="dark"] .cb-ai-log-level {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .cb-ai-log-level.INFO {
    color: var(--cb-success-light) !important;
}

html[data-color-theme="dark"] .cb-ai-log-level.WARNING {
    color: var(--cb-warning-light) !important;
}

html[data-color-theme="dark"] .cb-ai-log-level.ERROR {
    color: var(--cb-danger-light) !important;
}

html[data-color-theme="dark"] .cb-ai-log-level.DEBUG {
    color: var(--cb-accent-primary) !important;
}

/* AI Log Message - Color only */
html[data-color-theme="dark"] .cb-ai-log-message {
    color: var(--cb-text-primary) !important;
}

/* AI Info Banner - Color only */
html[data-color-theme="dark"] .cb-ai-info-banner {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--cb-danger-light) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .cb-ai-info-banner strong {
    color: var(--cb-danger-light) !important;
}

html[data-color-theme="dark"] .cb-ai-info-banner div {
    color: var(--cb-text-primary) !important;
}

/* AI Accordion - Color only */
html[data-color-theme="dark"] .cb-ai-accordion {
    background-color: var(--cb-bg-secondary) !important;
    color: var(--cb-text-primary) !important;
}

/* Scrollbar - Color only */
html[data-color-theme="dark"] .cb-ai-content-body::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .cb-ai-content-body::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .cb-ai-content-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}

/* ========================================
   PAGE TITLES WITH GRADIENT
   ======================================== */
html[data-color-theme="dark"] .page-title,
html[data-color-theme="dark"] .section-title {
    background: linear-gradient(135deg, var(--cb-accent-primary), var(--cb-accent-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700 !important;
}

html[data-color-theme="dark"] .employee-recent-itr-div div {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .quality-score-card .employee-profile-item div {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .sidebar-item.active {
    color: #000 !important;
}

html[data-color-theme="dark"] .sidebar-item:hover {
    color: #000 !important;
}

html[data-color-theme="dark"] .sidebar-item:hover .sidebar-chevron-icon,
html[data-color-theme="dark"] .sidebar-item:hover i {
    color: #000 !important;
}

html[data-color-theme="dark"] .sidebar-item.active .sidebar-chevron-icon,
html[data-color-theme="dark"] .sidebar-item.active i {
    color: #000 !important;
}

/* ========================================
   TRACKING SECTION - COMPLETE DARK THEME
   ( - No Structural Changes)
   ======================================== */

/* ========================================
   TRACKING CONTAINER
   ======================================== */
html[data-color-theme="dark"] .divTracking {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTracking.border-top {
    border-top-color: var(--cb-border-color) !important;
}


/* ========================================
    TABS NAVIGATION
   ======================================== */
html[data-color-theme="dark"] .nav-tabs {
    border: none !important;
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .nav-tabs .nav-item .nav-link {
    color: var(--cb-text-primary) !important;
    background-color: transparent !important;
    border-bottom-color: transparent !important;
}

html[data-color-theme="dark"] .nav-tabs .nav-item .nav-link:hover {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover) !important;
    border-bottom-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .nav-tabs .nav-item .nav-link.active {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-accent-primary) !important;

}

html[data-color-theme="dark"] .nav-tabs .nav-item .nav-link i {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .nav-tabs .nav-item .nav-link.active i {
    color: var(--cb-accent-primary) !important;
}

/* ========================================
   TRACKING TABS NAVIGATION
   ======================================== */
html[data-color-theme="dark"] .divTracking .nav-tabs {
    border-bottom-color: var(--cb-border-color) !important;
    background-color: transparent !important;
}

html[data-color-theme="dark"] .divTracking .nav-tabs .nav-item .nav-link {
    color: var(--cb-text-nav) !important;
    background-color: transparent !important;
    border-bottom-color: transparent !important;
}

html[data-color-theme="dark"] .divTracking .nav-tabs .nav-item .nav-link:hover {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover) !important;
    border-bottom-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .divTracking .nav-tabs .nav-item .nav-link.active {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .divTracking .nav-tabs .nav-item .nav-link i {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .divTracking .nav-tabs .nav-item .nav-link.active i {
    color: var(--cb-accent-primary) !important;
}


/* ========================================
   TAB CONTENT
   ======================================== */
html[data-color-theme="dark"] .divTracking .tab-content {
    background-color: var(--cb-bg-secondary) !important;
}

html[data-color-theme="dark"] .divTracking .tab-pane {
    background-color: var(--cb-bg-secondary) !important;
}

/* ========================================
   CARD HEADER IN TRACKING
   ======================================== */
html[data-color-theme="dark"] .divTracking .card-header {
    background-color: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTracking .card-header .card-title {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking .card-header .card-title .text-muted {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .divTracking .card-header .card-title .text-primary {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .divTracking .card-header .card-title .text-primary:hover {
    color: var(--cb-accent-hover) !important;
}

/* ========================================
   TEXT COLORS IN TRACKING
   ======================================== */
html[data-color-theme="dark"] .divTracking .text-dark {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking .text-muted {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .divTracking .text-dark.text-muted {
    color: var(--cb-text-muted) !important;
}

/* ========================================
   DROPDOWN IN TRACKING HEADER
   ======================================== */
html[data-color-theme="dark"] .divTracking .dropdown-toggle {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-toggle:hover {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-toggle i {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-toggle:hover i {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .divTracking .fa-ellipsis-h {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking .fa-ellipsis-h:hover {
    color: var(--cb-accent-primary) !important;
}

/* ========================================
   DROPDOWN MENU IN TRACKING
   ======================================== */
html[data-color-theme="dark"] .divTracking .dropdown-menu {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-menu * {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-item {
    color: var(--cb-text-dropdown) !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-item:hover {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-item i,
html[data-color-theme="dark"] .divTracking .dropdown-item .fa,
html[data-color-theme="dark"] .divTracking .dropdown-item .far,
html[data-color-theme="dark"] .divTracking .dropdown-item .fas,
html[data-color-theme="dark"] .divTracking .dropdown-item .icon-download {
    color: var(--cb-text-icon) !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-item:hover i,
html[data-color-theme="dark"] .divTracking .dropdown-item:hover .fa,
html[data-color-theme="dark"] .divTracking .dropdown-item:hover .far,
html[data-color-theme="dark"] .divTracking .dropdown-item:hover .fas,
html[data-color-theme="dark"] .divTracking .dropdown-item:hover .icon-download {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-item.bg-white {
    background-color: transparent !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-item.bg-white:hover {
    background-color: var(--cb-bg-hover-strong) !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-divider {
    border-color: var(--cb-border-color) !important;
}

/* SVG icons in dropdown */
html[data-color-theme="dark"] .divTracking .dropdown-item svg path {
    stroke: var(--cb-text-icon) !important;
}

html[data-color-theme="dark"] .divTracking .dropdown-item:hover svg path {
    stroke: var(--cb-text-primary) !important;
}

/* ========================================
   LIST ICONS
   ======================================== */
html[data-color-theme="dark"] .divTracking .list-icons {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking .list-icons-item {
    color: var(--cb-text-primary) !important;
    background: none !important;
}

html[data-color-theme="dark"] .divTracking .list-icons-item:hover {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .divTracking .header-elements {
    color: var(--cb-text-primary) !important;
}

/* ========================================
   CARD BODY
   ======================================== */
html[data-color-theme="dark"] .divTracking .card-body {
    background-color: var(--cb-bg-secondary) !important;
}

html[data-color-theme="dark"] .divTracking .card-body.p-0 {
    background-color: var(--cb-bg-secondary) !important;
}

/* ========================================
   IFRAME CONTAINER & IFRAME
   ======================================== */
html[data-color-theme="dark"] .divTracking .iframe-container {
    background-color: var(--cb-bg-secondary) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking[border="0"] {
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking[src=""],
html[data-color-theme="dark"] .divTracking iframe.frameTracking:not([src]) {
    background-color: var(--cb-bg-secondary) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking[data-src] {
    background-color: var(--cb-bg-secondary) !important;
}

/* ========================================
   TABLE INSIDE IFRAME (if accessible)
   ======================================== */
html[data-color-theme="dark"] .divTracking iframe.frameTracking body {
    background-color: var(--cb-bg-secondary) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking .container,
html[data-color-theme="dark"] .divTracking iframe.frameTracking .row,
html[data-color-theme="dark"] .divTracking iframe.frameTracking .col {
    background-color: transparent !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking table {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking th,
html[data-color-theme="dark"] .divTracking iframe.frameTracking td {
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking th {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking .card {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking .card-body {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking .card-header {
    background-color: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking .card-footer {
    background-color: var(--cb-bg-card) !important;
    border-top-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

/* ========================================
   IFRAME SCROLLBAR
   ======================================== */
html[data-color-theme="dark"] .divTracking iframe.frameTracking::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTracking iframe.frameTracking::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}

/* ========================================
   TRACKING TABS SCROLLBAR
   ======================================== */
html[data-color-theme="dark"] .divTracking .tracking-tabs-scrollable::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .divTracking .tracking-tabs-scrollable::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTracking .tracking-tabs-scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}

/* ========================================
   TRACKING GRID TABLE (Main Table)
   ======================================== */
html[data-color-theme="dark"] .divTrackingGrid {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table thead {
    background-color: var(--cb-bg-card) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table thead th {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table thead.bg-light {
    background-color: var(--cb-bg-card) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table thead.bg-light th {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody {
    background-color: var(--cb-bg-secondary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody tr {
    background-color: var(--cb-bg-secondary) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody tr:hover {
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td {
    color: var(--cb-text-primary) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td span {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td .text-danger {
    color: var(--cb-danger-light) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td .text-violet {
    color: var(--cb-accent-hover) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td .text-muted {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td .text-primary {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td .text-primary:hover {
    color: var(--cb-accent-hover) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td a {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td a:hover {
    color: var(--cb-accent-hover) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td a i {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td a:hover i {
    color: var(--cb-accent-hover) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td i {
    color: var(--cb-text-icon) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td i.fa-camera {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td i.fa-camera:hover {
    color: var(--cb-accent-hover) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td.text-nowrap {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody td .spn_frame_log_time {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .LogDetails {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .LogDetails .img_text {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .LogDetails .attachment_text {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .table tbody tr.active {
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .card-title {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .card-title .text-dark {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .card-title .text-muted {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .btn {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .btn:hover {
    background-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .btn i {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .btn-download-log {
    background-color: var(--cb-accent-secondary) !important;
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid .btn-download-log:hover {
    background-color: var(--cb-accent-hover) !important;
    border-color: var(--cb-accent-hover) !important;
}

/* ========================================
   TRACKING GRID SCROLLBAR
   ======================================== */
html[data-color-theme="dark"] .divTrackingGrid::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .divTrackingGrid::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .divTrackingGrid::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}


/* ========================================
   OFFCANVAS WITH TABS - DARK THEME 
   ======================================== */

/* Offcanvas Container - Color only */
html[data-color-theme="dark"] .offcanvas {
    background-color: var(--cb-bg-secondary) !important;
    color: var(--cb-text-primary) !important;
    border-left-color: var(--cb-border-color) !important;
}

/* Offcanvas Header - Color only */
html[data-color-theme="dark"] .offcanvas .offcanvas-header {
    background-color: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

/* Tabs Container - Color only */
html[data-color-theme="dark"] .offcanvas .offcanvas-header .nav-tabs {
    border-bottom-color: transparent !important;
    background-color: transparent !important;
}

/* Tab Links - Color only */
html[data-color-theme="dark"] .offcanvas .offcanvas-header .nav-tabs .nav-link {
    color: var(--cb-text-nav) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

html[data-color-theme="dark"] .offcanvas .offcanvas-header .nav-tabs .nav-link:hover {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .offcanvas .offcanvas-header .nav-tabs .nav-link.active {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover-strong) !important;
    border-color: transparent !important;
}

/* Tab Icons - Color only */
html[data-color-theme="dark"] .offcanvas .offcanvas-header .nav-tabs .nav-link .text-primary {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .offcanvas .offcanvas-header .nav-tabs .nav-link .text-success {
    color: var(--cb-success-light) !important;
}

html[data-color-theme="dark"] .offcanvas .offcanvas-header .nav-tabs .nav-link.active .text-primary,
html[data-color-theme="dark"] .offcanvas .offcanvas-header .nav-tabs .nav-link.active .text-success {
    color: var(--cb-text-primary) !important;
}

/* Tab Text - Color only */
html[data-color-theme="dark"] .offcanvas .offcanvas-header .nav-tabs .nav-link span {
    color: inherit !important;
}

/* Close Button - Color only */
html[data-color-theme="dark"] .offcanvas .offcanvas-header .btn-close {
    filter: var(--cb-filter-close) !important;
}

/* Offcanvas Body - Color only */
html[data-color-theme="dark"] .offcanvas .offcanvas-body {
    background-color: var(--cb-bg-secondary) !important;
}

/* Tab Content - Color only */
html[data-color-theme="dark"] .offcanvas .tab-content {
    background-color: var(--cb-bg-secondary) !important;
}

html[data-color-theme="dark"] .offcanvas .tab-pane {
    background-color: var(--cb-bg-secondary) !important;
}

/* Iframes - Color only */
html[data-color-theme="dark"] .offcanvas iframe {
    background-color: var(--cb-bg-secondary) !important;
}

/* Backdrop - Color only */
html[data-color-theme="dark"] .offcanvas-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Text Colors - Color only */
html[data-color-theme="dark"] .offcanvas .text-primary {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .offcanvas .text-success {
    color: var(--cb-success-light) !important;
}

html[data-color-theme="dark"] .offcanvas .text-muted {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .offcanvas .text-danger {
    color: var(--cb-danger-light) !important;
}

html[data-color-theme="dark"] .offcanvas .text-warning {
    color: var(--cb-warning-light) !important;
}

html[data-color-theme="dark"] .offcanvas .text-dark {
    color: var(--cb-text-primary) !important;
}

/* ========================================
   SCROLLBAR - Color only
   ======================================== */
html[data-color-theme="dark"] .offcanvas .offcanvas-body::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .offcanvas .offcanvas-body::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}

/* ========================================
   ACCORDION HEADER - DARK THEME 
   ======================================== */

/* Accordion header container - Color only */
html[data-color-theme="dark"] .accordion-header {
    background-color: transparent !important;
}

/* Accordion button - Color only */
html[data-color-theme="dark"] .accordion-header .accordion-button {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
    border-color: var(--cb-border-color) !important;
}

/* Accordion button - collapsed state - Color only */
html[data-color-theme="dark"] .accordion-header .accordion-button.collapsed {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
}

/* Accordion button - hover - Color only */
html[data-color-theme="dark"] .accordion-header .accordion-button:hover {
    background-color: var(--cb-bg-hover) !important;
    color: var(--cb-text-primary) !important;
}

/* Accordion button - active/expanded - Color only */
html[data-color-theme="dark"] .accordion-header .accordion-button:not(.collapsed) {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
}

/* Accordion button - focus - Color only */
html[data-color-theme="dark"] .accordion-header .accordion-button:focus {
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}


/* Accordion header title - Color only */
html[data-color-theme="dark"] .accordion-header .card-title {
    color: var(--cb-text-primary) !important;
}

/* Accordion header text - Color only */
html[data-color-theme="dark"] .accordion-header .accordion-button * {
    color: var(--cb-text-primary) !important;
}

/* Accordion header icons - Color only */
html[data-color-theme="dark"] .accordion-header .accordion-button i,
html[data-color-theme="dark"] .accordion-header .accordion-button .far,
html[data-color-theme="dark"] .accordion-header .accordion-button .fas {
    color: var(--cb-text-icon) !important;
}

/* Accordion header user name - Color only */
html[data-color-theme="dark"] .accordion-header .fa-user {
    color: var(--cb-text-icon) !important;
}

/* Accordion header calendar icon - Color only */
html[data-color-theme="dark"] .accordion-header .fa-calendar-alt {
    color: var(--cb-text-icon) !important;
}

/* Accordion header - background override for inline style */
html[data-color-theme="dark"] .accordion-header .accordion-button[style*="background: #F7F7F7;"] {
    background-color: var(--cb-bg-card) !important;
}

html[data-color-theme="dark"] .accordion-header .accordion-button.collapsed[style*="background: #F7F7F7;"] {
    background-color: var(--cb-bg-card) !important;
}

/* ========================================
   MULTISELECT DROPDOWN - DARK THEME 
   ======================================== */

/* Multiselect container - Color only */
html[data-color-theme="dark"] .btn-group .multiselect {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

/* Multiselect dropdown button - Color only */
html[data-color-theme="dark"] .btn-group .multiselect.dropdown-toggle {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

/* Multiselect selected text - Color only */
html[data-color-theme="dark"] .btn-group .multiselect .multiselect-selected-text {
    color: var(--cb-text-primary) !important;
}

/* Multiselect caret/arrow - Color only */
html[data-color-theme="dark"] .btn-group .multiselect .caret {
    color: var(--cb-text-muted) !important;
    border-top-color: var(--cb-text-muted) !important;
}

/* Multiselect dropdown menu - Color only */
html[data-color-theme="dark"] .multiselect-container.dropdown-menu {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
}

/* Multiselect dropdown items - Color only */
html[data-color-theme="dark"] .multiselect-container .dropdown-item,
html[data-color-theme="dark"] .multiselect-container label {
    color: var(--cb-text-dropdown) !important;
    background-color: transparent !important;
}

/* Multiselect dropdown items - hover - Color only */
html[data-color-theme="dark"] .multiselect-container .dropdown-item:hover,
html[data-color-theme="dark"] .multiselect-container label:hover {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

/* Multiselect checkbox - Color only */
html[data-color-theme="dark"] .multiselect-container input[type="checkbox"] {
    accent-color: var(--cb-accent-primary) !important;
}

/* Multiselect checkbox label - Color only */
html[data-color-theme="dark"] .multiselect-container .checkbox {
    color: var(--cb-text-dropdown) !important;
}

/* Multiselect - active/checked state - Color only */
html[data-color-theme="dark"] .multiselect-container input[type="checkbox"]:checked + label {
    color: var(--cb-accent-primary) !important;
}

/* Multiselect - form-label - Color only */
html[data-color-theme="dark"] .form-label.fw-semibold {
    color: var(--cb-text-primary) !important;
}

/* Multiselect - dropdown toggle when open - Color only */
html[data-color-theme="dark"] .btn-group .multiselect.dropdown-toggle.show {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-accent-primary) !important;
}

/* Multiselect - dropdown toggle hover - Color only */
html[data-color-theme="dark"] .btn-group .multiselect.dropdown-toggle:hover {
    background-color: var(--cb-bg-hover) !important;
    border-color: var(--cb-accent-primary) !important;
}

/* Multiselect scrollbar - Color only */
html[data-color-theme="dark"] .multiselect-container.dropdown-menu::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .multiselect-container.dropdown-menu::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .multiselect-container.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}

/* ========================================
   BOOTSTRAP SELECT DROPDOWN - DARK THEME
   ======================================== */

/* Dropdown items - normal state */
html[data-color-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--cb-text-dropdown) !important;
    background-color: transparent !important;
}

/* Dropdown items - hover state */
html[data-color-theme="dark"] .dropdown-menu .dropdown-item:hover {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

/* Dropdown items - active/selected state */
html[data-color-theme="dark"] .dropdown-menu .dropdown-item.active,
html[data-color-theme="dark"] .dropdown-menu .dropdown-item:active {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: var(--cb-text-primary) !important;
}

/* Check mark in dropdown items */
html[data-color-theme="dark"] .dropdown-menu .dropdown-item .bs-ok-default {
    color: var(--cb-accent-primary) !important;
}

/* Dropdown item text */
html[data-color-theme="dark"] .dropdown-menu .dropdown-item .text {
    color: var(--cb-text-primary) !important;
}

/* Inner dropdown container */
html[data-color-theme="dark"] .dropdown-menu.inner {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
}

/* Scrollbar */
html[data-color-theme="dark"] .dropdown-menu.inner::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .dropdown-menu.inner::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .dropdown-menu.inner::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}

/* ========================================
   DATE RANGE INFO - DARK THEME 
   ======================================== */

/* Date range container - Color only */
html[data-color-theme="dark"] .date-range-info {
    color: var(--cb-text-primary) !important;
    background: var(--cb-border-input) !important;
}

/* ========================================
   MODULE TABS - DARK THEME 
   ======================================== */

/* Tabs container - Color only */
html[data-color-theme="dark"] .tab.card-header {
    background-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* Tab nav - Color only */
html[data-color-theme="dark"] .tab .nav-tabs {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Tab nav items - Color only */
html[data-color-theme="dark"] .tab .nav-tabs .nav-item {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Tab links - Color only */
html[data-color-theme="dark"] .tab .nav-tabs .nav-link {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-nav) !important;
}

/* Tab links - hover - Color only */
html[data-color-theme="dark"] .tab .nav-tabs .nav-link:hover {
    background-color: var(--cb-bg-hover) !important;
    color: var(--cb-text-primary) !important;
    border-color: var(--cb-border-color) !important;
}

/* Tab links - active - Color only */
html[data-color-theme="dark"] .tab .nav-tabs .nav-link.active {
    background-color: var(--cb-accent-secondary) !important;
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-primary) !important;
}

/* Tab links - active hover - Color only */
html[data-color-theme="dark"] .tab .nav-tabs .nav-link.active:hover {
    background-color: var(--cb-accent-hover) !important;
    border-color: var(--cb-accent-hover) !important;
    color: var(--cb-text-primary) !important;
}

/* Tab text bold - Color only */
html[data-color-theme="dark"] .tab .nav-tabs .nav-link b,
html[data-color-theme="dark"] .tab .nav-tabs .nav-link .fw-semibold {
    color: inherit !important;
}

/* Rounded pills - Color only */
html[data-color-theme="dark"] .tab .nav-tabs .nav-link.rounded-start-pill {
    border-radius: 50rem 0 0 50rem !important;
}

html[data-color-theme="dark"] .tab .nav-tabs .nav-link.rounded-end-pill {
    border-radius: 0 50rem 50rem 0 !important;
}

/* Tab nav with border-0 - Color only */
html[data-color-theme="dark"] .tab .nav-tabs.border-0 {
    border-color: transparent !important;
}

html[data-color-theme="dark"] .tab .nav-tabs .nav-item.border-0 {
    border-color: transparent !important;
}

/* ========================================
   ACE EDITOR - DARK THEME 
   ======================================== */

/* Ace Editor container - Color only */
html[data-color-theme="dark"] #editor,
html[data-color-theme="dark"] .ace_editor {
    background-color: var(--cb-bg-secondary) !important;
    color: var(--cb-text-primary) !important;
}

/* Ace Editor text area - Color only */
html[data-color-theme="dark"] .ace_editor .ace_text-input {
    color: var(--cb-text-primary) !important;
}

/* Ace Editor gutter (line numbers) - Color only */
html[data-color-theme="dark"] .ace_editor .ace_gutter {
    background-color: var(--cb-bg-card) !important;
    border-right-color: var(--cb-border-color) !important;
}

/* Ace Editor gutter cells (line numbers) - Color only */
html[data-color-theme="dark"] .ace_editor .ace_gutter-cell {
    color: var(--cb-text-muted) !important;
}

/* Ace Editor active line number - Color only */
html[data-color-theme="dark"] .ace_editor .ace_gutter-active-line {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: var(--cb-accent-primary) !important;
}

/* Ace Editor active line highlight - Color only */
html[data-color-theme="dark"] .ace_editor .ace_active-line {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Ace Editor cursor - Color only */
html[data-color-theme="dark"] .ace_editor .ace_cursor {
    color: var(--cb-text-primary) !important;
    border-left-color: var(--cb-accent-primary) !important;
}

/* Ace Editor selected text - Color only */
html[data-color-theme="dark"] .ace_editor .ace_selection {
    background-color: rgba(99, 102, 241, 0.3) !important;
}

/* Ace Editor print margin - Color only */
html[data-color-theme="dark"] .ace_editor .ace_print-margin {
    background-color: var(--cb-border-color) !important;
}

/* Ace Editor scrollbar - Color only */
html[data-color-theme="dark"] .ace_editor .ace_scrollbar::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .ace_editor .ace_scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .ace_editor .ace_scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}

/* Ace Editor - Indent guide - Color only */
html[data-color-theme="dark"] .ace_editor .ace_indent-guide {
    border-left-color: rgba(255, 255, 255, 0.1) !important;
}

/* Ace Editor - Invisible characters - Color only */
html[data-color-theme="dark"] .ace_editor .ace_invisible {
    color: var(--cb-text-disabled) !important;
}

/* Ace Editor - Fold markers - Color only */
html[data-color-theme="dark"] .ace_editor .ace_fold-widget {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .ace_editor .ace_fold-widget:hover {
    color: var(--cb-accent-primary) !important;
}

/* Ace Editor - Marker layer - Color only */
html[data-color-theme="dark"] .ace_editor .ace_marker-layer {
    background-color: transparent !important;
}

/* ========================================
   ACE EDITOR - SYNTAX HIGHLIGHTING (Twilight Theme)
   ======================================== */

/* Twilight theme specific colors - if editor has ace-twilight class */
html[data-color-theme="dark"] .ace-twilight .ace_marker-layer .ace_selection {
    background-color: rgba(99, 102, 241, 0.3) !important;
}

html[data-color-theme="dark"] .ace-twilight .ace_marker-layer .ace_step {
    background-color: var(--cb-bg-card) !important;
}

html[data-color-theme="dark"] .ace-twilight .ace_marker-layer .ace_bracket {
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .ace-twilight .ace_marker-layer .ace_active-line {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-color-theme="dark"] .ace-twilight .ace_gutter-active-line {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ========================================
   ACE EDITOR - CONTAINER
   ======================================== */
html[data-color-theme="dark"] .container #editor {
    background-color: var(--cb-bg-secondary) !important;
}


/* ========================================
   MODULE ACTIONS CARDS - DARK THEME 
   ======================================== */

/* Module actions container - Color only */
html[data-color-theme="dark"] .div_steps .module_actions .col-sm-12 {
    background-color: var(--cb-bg-primary) !important;
}

/* ========================================
   TOKENFIELD / EMAIL INPUT - DARK THEME 
   ======================================== */

/* Tokenfield container - Color only */
html[data-color-theme="dark"] .tokenfield {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

/* Tokenfield form-control - Color only */
html[data-color-theme="dark"] .tokenfield.form-control {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

/* Tokenfield textarea - Color only */
html[data-color-theme="dark"] .tokenfield textarea {
    background-color: var(--cb-bg-input) !important;
    color: var(--cb-text-primary) !important;
}

/* Tokenfield input - Color only */
html[data-color-theme="dark"] .tokenfield .token-input {
    background-color: transparent !important;
    color: var(--cb-text-primary) !important;
}

/* Tokenfield input placeholder - Color only */
html[data-color-theme="dark"] .tokenfield .token-input::placeholder {
    color: var(--cb-text-disabled) !important;
}

/* Token items - Color only */
html[data-color-theme="dark"] .tokenfield .token {
    background-color: rgba(99, 102, 241, 0.2) !important;
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .tokenfield .token .token-label {
    color: var(--cb-text-primary) !important;
}

/* Token close button - Color only */
html[data-color-theme="dark"] .tokenfield .token .close {
    color: var(--cb-text-primary) !important;
    opacity: 0.7 !important;
}

html[data-color-theme="dark"] .tokenfield .token .close:hover {
    opacity: 1 !important;
    color: var(--cb-danger-light) !important;
}

/* Tokenfield - hover state - Color only */
html[data-color-theme="dark"] .tokenfield:hover {
    border-color: var(--cb-accent-primary) !important;
}

/* Tokenfield - focus state - Color only */
html[data-color-theme="dark"] .tokenfield:focus-within {
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Twitter Typeahead dropdown - Color only */
html[data-color-theme="dark"] .tt-dropdown-menu {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: var(--cb-shadow-lg) !important;
}

html[data-color-theme="dark"] .tt-dropdown-menu .tt-suggestion {
    color: var(--cb-text-dropdown) !important;
}

html[data-color-theme="dark"] .tt-dropdown-menu .tt-suggestion:hover {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .tt-dropdown-menu .tt-suggestion.tt-cursor {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

/* Tokenfield - disabled state - Color only */
html[data-color-theme="dark"] .tokenfield.disabled {
    background-color: var(--cb-border-color) !important;
    opacity: 0.6 !important;
}

/* Tokenfield - readonly state - Color only */
html[data-color-theme="dark"] .tokenfield[readonly] {
    background-color: var(--cb-border-color) !important;
    opacity: 0.6 !important;
}

/* ========================================
   BLOCKUI OVERLAY & SPINNER - DARK THEME 
   ======================================== */

/* BlockUI overlay - Color only */
html[data-color-theme="dark"] .blockUI.blockOverlay {
    background-color: rgba(15, 17, 23, 0.85) !important;
    opacity: 0.9 !important;
}

/* ========================================
   LIMIT DROPDOWN - DARK THEME (Minimal)
   ======================================== */

html[data-color-theme="dark"] #pagination-container .limit-custom-select,
html[data-color-theme="dark"] .pagination .limit-selector button {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] #pagination-container .limit-custom-select .custom-select-trigger {
    background-color: var(--cb-bg-input) !important;
    color: var(--cb-text-primary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] #pagination-container .limit-custom-select .custom-select-label {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] #pagination-container .limit-custom-select .custom-select-arrow {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] #pagination-container .limit-custom-select .custom-select-options,
html[data-color-theme="dark"] .pagination .limit-selector .custom-select-options {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] #pagination-container .limit-custom-select .custom-select-option,
html[data-color-theme="dark"] .pagination .limit-selector .custom-select-option {
    color: var(--cb-text-dropdown) !important;
}

html[data-color-theme="dark"] #pagination-container .limit-custom-select .custom-select-option:hover,
html[data-color-theme="dark"] .pagination .limit-selector .custom-select-option:hover {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] #pagination-container .limit-custom-select .custom-select-option.active,
 html[data-color-theme="dark"] .pagination .limit-selector .custom-select-option.active {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: var(--cb-accent-primary) !important;
}

/* ========================================
   IMAGE VIEWER OVERLAY
   ======================================== */

html[data-color-theme="dark"] #giv-zoom-controls button,
html[data-color-theme="dark"] #giv-close-btn,
html[data-color-theme="dark"] #giv-download-btn,
html[data-color-theme="dark"] .giv-nav-btn,
html[data-color-theme="dark"] #giv-counter {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-card) !important
}

html[data-color-theme="dark"] #giv-download-btn svg {
    stroke: var(--cb-text-primary) !important;
}

/* Loader - Color only */
html[data-color-theme="dark"] #giv-loader {
    border-color: var(--cb-border-color) !important;
    border-top-color: var(--cb-accent-primary) !important;
}

/* ========================================
   LOADING OVERLAY - DARK THEME (Colors Only)
   ======================================== */

/* Loading overlay - Color only */
html[data-color-theme="dark"] .loading-overlay {
    background-color: rgba(15, 17, 23, 0.85) !important;
}

/* Spinner - Color only */
html[data-color-theme="dark"] .loading-overlay .spinner-border {
    color: var(--cb-accent-primary) !important;
    border-color: var(--cb-border-color) !important;
    border-right-color: var(--cb-accent-primary) !important;
}

/* Spinner text - Color only */
html[data-color-theme="dark"] .loading-overlay .visually-hidden {
    color: var(--cb-text-primary) !important;
}


/* ========================================
   COMPLIANCE DASHBOARD - DARK THEME (Colors Only)
   ======================================== */

/* ========================================
   ROOT LAYOUT - Background card color
   ======================================== */
html[data-color-theme="dark"] .comp-root-layout {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
}

/* ========================================
   TOPBAR
   ======================================== */
html[data-color-theme="dark"] .comp-topbar {
    background-color: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-topbar .navbar {
    background-color: var(--cb-bg-card) !important;
}

html[data-color-theme="dark"] .comp-topbar .navbar-brand {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-topbar .comp-brand-text {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-topbar .comp-brand-sub {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-topbar .nav-link {
    color: var(--cb-text-nav) !important;
}

html[data-color-theme="dark"] .comp-topbar .nav-link:hover {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .comp-topbar .nav-link.active {
    color: var(--cb-text-primary) !important;
    border-bottom-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .comp-topbar .form-label {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-topbar .comp-instance-select {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-topbar .comp-audit-note {
    color: var(--cb-text-muted) !important;
}

/* ========================================
   VIEW TABS
   ======================================== */
html[data-color-theme="dark"] .comp-view-tabs {
    background-color: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-view-tabs .nav-tabs {
    background-color: transparent !important;
}

html[data-color-theme="dark"] .comp-view-tabs .nav-tabs .nav-link {
    color: var(--cb-text-nav) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

html[data-color-theme="dark"] .comp-view-tabs .nav-tabs .nav-link:hover {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .comp-view-tabs .nav-tabs .nav-item .nav-link.active {
    color: var(--cb-text-primary) !important;
    background-color: none !important;
}

/* ========================================
   TAB CONTENT
   ======================================== */

/*
html[data-color-theme="dark"] .tab-content {
    background-color: var(--cb-bg-card) !important;
}

html[data-color-theme="dark"] .tab-pane {
    background-color: var(--cb-bg-card) !important;
}
*/


/* ========================================
   KPI ROW - DARK THEME (Colors Only)
   ======================================== */

/* KPI Row container - Color only */
html[data-color-theme="dark"] .comp-kpi-row {
    background-color: transparent !important;
    border-color: var(--cb-accent-primary) !important;
}

/* KPI Card - Color only */
html[data-color-theme="dark"] .comp-kpi {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

/* KPI Label - Color only */
html[data-color-theme="dark"] .comp-kpi .comp-kpi-label {
    color: var(--cb-text-muted) !important;
}

/* KPI Value - Color only */
html[data-color-theme="dark"] .comp-kpi .comp-kpi-value {
    color: var(--cb-text-primary) !important;
}

/* KPI Value with inline style - Color only */
html[data-color-theme="dark"] .comp-kpi .comp-kpi-value[style*="color:var(--comp-low);"] {
    color: var(--cb-text-primary) !important;
}

/* KPI Value small text - Color only */
html[data-color-theme="dark"] .comp-kpi .comp-kpi-value .small {
    color: var(--cb-text-muted) !important;
}

/* KPI Trend - Color only */
html[data-color-theme="dark"] .comp-kpi .comp-kpi-trend {
    color: var(--cb-text-muted) !important;
}

/* KPI Trend Up - Color only */
html[data-color-theme="dark"] .comp-kpi .comp-trend-up {
    color: var(--cb-success-light) !important;
}

/* KPI Trend Down - Color only */
html[data-color-theme="dark"] .comp-kpi .comp-trend-down {
    color: var(--cb-danger-light) !important;
}

/* ========================================
   PAGE HEADER
   ======================================== */
html[data-color-theme="dark"] .comp-page-meta {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-page-title {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-page-title em {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .comp-page-sub {
    color: var(--cb-text-secondary) !important;
}

html[data-color-theme="dark"] .comp-audit-badge {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: var(--cb-danger-light) !important;
    color: var(--cb-danger-light) !important;
}

/* ========================================
   KPI CARDS
   ======================================== */
html[data-color-theme="dark"] .comp-kpi {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-kpi-label {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-kpi-value {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-kpi-trend {
    color: var(--cb-text-muted) !important;
}

/* ========================================
   FILTER BAR
   ======================================== */
html[data-color-theme="dark"] .comp-filter-label {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-chip {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-nav) !important;
}

html[data-color-theme="dark"] .comp-chip:hover {
    background-color: var(--cb-bg-hover) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-chip.active {
    background-color: var(--cb-accent-secondary) !important;
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-chip .count {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-chip.active .count {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-year-select {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

/* ========================================
   TIMELINE
   ======================================== */
html[data-color-theme="dark"] .comp-timeline-wrap {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-timeline-head {
    background-color: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-tl-head-label {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-month-cell {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-month-cell.comp-qend {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-tl-head-summary {
    color: var(--cb-text-primary) !important;
}

/* ========================================
   TIMELINE LOADER
   ======================================== */
html[data-color-theme="dark"] .comp-timeline-loader {
    background-color: var(--cb-bg-secondary) !important;
}

html[data-color-theme="dark"] .comp-timeline-loader .comp-spinner {
    border-color: var(--cb-border-color) !important;
    border-top-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .comp-timeline-loader .comp-loader-text {
    color: var(--cb-text-muted) !important;
}

/* ========================================
   NO DATA STATE
   ======================================== */
html[data-color-theme="dark"] .text-center.py-5 h4 {
    color: var(--cb-text-secondary) !important;
}

html[data-color-theme="dark"] .text-center.py-5 p {
    color: var(--cb-text-muted) !important;
}

/* ========================================
   LEGEND
   ======================================== */
html[data-color-theme="dark"] .comp-legend-label {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-legend-item {
    color: var(--cb-text-primary) !important;
}

/* ========================================
   DRAWER
   ======================================== */
html[data-color-theme="dark"] .comp-drawer {
    background-color: var(--cb-bg-secondary) !important;
    border-left-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-drawer-header {
    background-color: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-drawer-sub {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-drawer-close {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-drawer-close:hover {
    color: var(--cb-danger-light) !important;
}

html[data-color-theme="dark"] .comp-drawer-body {
    background-color: var(--cb-bg-secondary) !important;
}

/* ========================================
   DRAWER META GRID
   ======================================== */
html[data-color-theme="dark"] .comp-meta-label {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-meta-val {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-meta-val.mono {
    color: var(--cb-text-muted) !important;
}

/* ========================================
   DRAWER TABS
   ======================================== */
html[data-color-theme="dark"] .comp-drawer-body .nav-tabs .nav-link {
    color: var(--cb-text-nav) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

html[data-color-theme="dark"] .comp-drawer-body .nav-tabs .nav-link:hover {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .comp-drawer-body .nav-tabs .nav-link.active {
    color: var(--cb-text-primary) !important;
    border-bottom-color: var(--cb-accent-primary) !important;
}

/* ========================================
   DRAWER LOADER
   ======================================== */
html[data-color-theme="dark"] .drawer-loader .spinner {
    border-color: var(--cb-border-color) !important;
    border-top-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .drawer-loader p {
    color: var(--cb-text-muted) !important;
}

/* ========================================
   SEARCH / AUTOCOMPLETE
   ======================================== */
html[data-color-theme="dark"] #permissionsSearch {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] #permissionsSearch::placeholder {
    color: var(--cb-text-disabled) !important;
}

html[data-color-theme="dark"] .autocomplete-suggestions {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .btn-outline-secondary {
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] #permissionsClearBtn {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] #permissionsClearBtn:hover {
    color: var(--cb-text-primary) !important;
}

/* ========================================
   DATA MODEL ENTITIES
   ======================================== */
html[data-color-theme="dark"] .comp-entity {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-entity-head {
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-entity-name {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-entity-tag {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-entity-desc {
    color: var(--cb-text-secondary) !important;
}

html[data-color-theme="dark"] .comp-entity .comp-field {
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-entity .comp-field-name {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-entity .comp-field-type {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-entity .comp-field-note {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-entity .comp-field-name .pk {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .comp-entity .comp-field-name .fk {
    color: var(--cb-success-light) !important;
}

html[data-color-theme="dark"] .comp-entity .required {
    color: var(--cb-danger-light) !important;
}

html[data-color-theme="dark"] .comp-entity.primary {
    border-color: var(--cb-accent-primary) !important;
}

/* ========================================
   SQL BLOCK
   ======================================== */
html[data-color-theme="dark"] .comp-sql-block {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-sql-head {
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-sql-title {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-sql-code {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-secondary) !important;
}

html[data-color-theme="dark"] .comp-sql-cmt {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-sql-kw {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .comp-sql-type {
    color: var(--cb-success-light) !important;
}

html[data-color-theme="dark"] .comp-sql-str {
    color: var(--cb-warning-light) !important;
}

/* ========================================
   INTERACTION CARDS
   ======================================== */
html[data-color-theme="dark"] .comp-ix-card {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-ix-num {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .comp-ix-title {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-ix-desc {
    color: var(--cb-text-secondary) !important;
}

html[data-color-theme="dark"] .comp-ix-tag {
    background-color: var(--cb-bg-hover) !important;
    color: var(--cb-text-muted) !important;
}

/* ========================================
   RELATIONSHIPS
   ======================================== */
html[data-color-theme="dark"] .comp-rel-item {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-rel-from {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-rel-to {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-rel-arrow {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .comp-rel-note {
    color: var(--cb-text-muted) !important;
}

/* ========================================
   SECTION TITLES
   ======================================== */
html[data-color-theme="dark"] .comp-section-title {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-section-sub {
    color: var(--cb-text-secondary) !important;
}

/* ========================================
   FOOTER
   ======================================== */
html[data-color-theme="dark"] .comp-footer {
    background-color: var(--cb-bg-card) !important;
    border-top-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

/* ========================================
   BACKDROP
   ======================================== */
html[data-color-theme="dark"] .comp-backdrop {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ========================================
   SCROLLBAR
   ======================================== */
html[data-color-theme="dark"] .comp-timeline-wrap::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .comp-timeline-wrap::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-timeline-wrap::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}

html[data-color-theme="dark"] .comp-drawer-body::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .comp-drawer-body::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-drawer-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}

/* ========================================
   DEPENDENCY ANALYZER - DARK THEME (Colors Only)
   ======================================== */

/* App Container */
html[data-color-theme="dark"] .app {
    background-color: var(--cb-bg-primary) !important;
    color: var(--cb-text-primary) !important;
}

/* Topbar */
html[data-color-theme="dark"] .app .topbar {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app .topbar h1 {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .topbar .fa-arrow-left {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .topbar .fa-arrow-left:hover {
    color: var(--cb-accent-primary) !important;
}

/* Tabs */
html[data-color-theme="dark"] .app .tabs {
    background-color: var(--cb-bg-primary) !important;
    color: var(--cb-text-nav) !important;
    border: none !important;
}

html[data-color-theme="dark"] .app .tabs .tab {
    color: var(--cb-text-nav) !important;
    border: none !important;
}

html[data-color-theme="dark"] .app .tabs .tab:hover {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .app .tabs .tab.active {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-accent-primary) !important;
}

/* Toolbar */
html[data-color-theme="dark"] .app .toolbar .input {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .toolbar .input::placeholder {
    color: var(--cb-text-disabled) !important;
}

html[data-color-theme="dark"] .app .toolbar .input:focus {
    border-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .app .toolbar .btn {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .toolbar .btn:hover {
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .app .toolbar .btn-export {
    background-color: var(--cb-accent-secondary) !important;
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .toolbar .btn-export:hover {
    background-color: var(--cb-accent-hover) !important;
}

/* Search autocomplete */
html[data-color-theme="dark"] .app .autocomplete-suggestions {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
}

/* Form elements */
html[data-color-theme="dark"] .app .form-label {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .form-select {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

/* Badge / Status */
html[data-color-theme="dark"] .app .badge {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .badge.bg-primary {
    background-color: var(--cb-accent-secondary) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .text-muted {
    color: var(--cb-text-muted) !important;
}

/* Pages */
html[data-color-theme="dark"] .app .page {
    background-color: var(--cb-bg-primary) !important;
}

/* Panels */
html[data-color-theme="dark"] .app .panel {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app .panel .panel-header {
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app .panel .panel-title {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .panel .sub {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .app .panel .content {
    background-color: var(--cb-bg-card) !important;
}

/* Chosen select container - Color only */
html[data-color-theme="dark"] .app .chosen-select {
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

/* KPI Cards */
html[data-color-theme="dark"] .app .kpis .kpi {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app .kpis .kpi .label {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .app .kpis .kpi .value {
    color: var(--cb-text-primary) !important;
}

/* Chips */
html[data-color-theme="dark"] .app .chip {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-nav) !important;
}

html[data-color-theme="dark"] .app .chip:hover {
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .app .chip.muted {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .app .chip.bad {
    color: var(--cb-danger-light) !important;
    border-color: var(--cb-danger-light) !important;
}

html[data-color-theme="dark"] .app .chip.warn {
    color: var(--cb-warning-light) !important;
    border-color: var(--cb-warning-light) !important;
}

/* Callout */
html[data-color-theme="dark"] .app .callout {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app .callout h3 {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .callout p {
    color: var(--cb-text-secondary) !important;
}

/* Divider */
html[data-color-theme="dark"] .app .divider {
    border-color: var(--cb-border-color) !important;
}

/* Diff */
html[data-color-theme="dark"] .app .diff {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app .diff .diff-header {
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app .diff .diff-title {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .diff thead th {
    background: none !important;
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
    border-bottom-color: var(--cb-border-color) !important;
    border-bottom: 2px solid var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app .diff .diff-body {
    color: var(--cb-text-secondary) !important;
}

/* Table */
html[data-color-theme="dark"] .app table {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .offcanvas .table thead th {
    background: none !important;
    color: var(--cb-text-primary) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app table td {
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app table tbody tr:hover {
    background-color: var(--cb-bg-hover) !important;
}

/* Graph */
html[data-color-theme="dark"] .app .graph {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

/* Inspector Card */
html[data-color-theme="dark"] .app .card {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app .card h3 {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .card .small {
    color: var(--cb-text-secondary) !important;
}

/* List */
html[data-color-theme="dark"] .app .list li {
    color: var(--cb-text-secondary) !important;
}

/* Dropdown */
html[data-color-theme="dark"] .app .dropdown-menu {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app .dropdown-item {
    color: var(--cb-text-dropdown) !important;
}

html[data-color-theme="dark"] .app .dropdown-item:hover {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

/* Pill / Risk colors */
html[data-color-theme="dark"] .app .pill.amber {
    color: var(--cb-warning-light) !important;
}

html[data-color-theme="dark"] .app .pill.red {
    color: var(--cb-danger-light) !important;
}

html[data-color-theme="dark"] .app .pill.green {
    color: var(--cb-success-light) !important;
}

/* Mono text */
html[data-color-theme="dark"] .app .mono {
    color: var(--cb-text-muted) !important;
}

/* Scrollbar */
html[data-color-theme="dark"] .app ::-webkit-scrollbar-track {
    background-color: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .app ::-webkit-scrollbar-thumb {
    background-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app ::-webkit-scrollbar-thumb:hover {
    background-color: var(--cb-border-input) !important;
}

/* Button outline */
html[data-color-theme="dark"] .app .btn-outline-secondary {
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .btn-outline-secondary:hover {
    background-color: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .app .btn-outline-primary {
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .app .btn-outline-primary:hover {
    background-color: var(--cb-bg-hover-strong) !important;
}

/* History button */
html[data-color-theme="dark"] .app #btnExecutionHistory {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app #btnExecutionHistory:hover {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .app #btnOpenAnalysisModal {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app #btnOpenAnalysisModal:hover {
    color: var(--cb-accent-primary) !important;
}

/* Chosen dropdown inside app */
html[data-color-theme="dark"] .app .chosen-container .chosen-single {
    background: none !important;
    background-color: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .chosen-container .chosen-drop {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .app .chosen-container .chosen-results li {
    color: var(--cb-text-dropdown) !important;
}

html[data-color-theme="dark"] .app .chosen-container .chosen-results li:hover {
    background-color: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app .chosen-container .chosen-results li.result-selected {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: var(--cb-accent-primary) !important;
}

/* Iteration status badge */
html[data-color-theme="dark"] .app #currentIterationStatusBadge {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .app #currentIterationStatusBadge.bg-primary {
    background-color: rgba(99, 102, 241, 0.2) !important;
}