/* ========================================
   DARK THEME
   ======================================== */

/* ========================================
   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: #464b61;
    --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: #3783f2;
    --cb-accent-secondary: #4f46e5;
    --cb-accent-hover: #8b5cf6;
    --cb-accent-active: #7c3aed;

    /* Status Colors */
    --cb-success: #059669;
    --cb-success-light: #10b981;
    --cb-danger: #f44336;
    --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;
}

html[data-color-theme="dark"] .viewItr-logo {
    margin-left: 15px;
}

/* ========================================
   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:not(.fa-star),
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;
}

html[data-color-theme="dark"] .top-navbar .notification {
   background-color: transparent !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 .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;
}

/* 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 .navbar-nav-link i.fa-bell {
     color: var(--cb-warning-light) !important;
}

/* Notification item */
html[data-color-theme="dark"] .notification-item .alert span a {
    color: var(--cb-accent-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
   ======================================== */

/* Base styles for all status badges */
html[data-color-theme="dark"] .status-stuck,
html[data-color-theme="dark"] .status-processing,
html[data-color-theme="dark"] .status-ready,
html[data-color-theme="dark"] .status-completed,
html[data-color-theme="dark"] .status-error,
html[data-color-theme="dark"] .status-stopped,
html[data-color-theme="dark"] .status-login-failed,
html[data-color-theme="dark"] .status-permission-issue,
html[data-color-theme="dark"] .status-data-issue,
html[data-color-theme="dark"] .status-general-issue,
html[data-color-theme="dark"] .status-request-error {
    border: 0.5px solid !important;
}

/* ========================================
   1. STUCK - Soft Purple
   ======================================== */
html[data-color-theme="dark"] .status-stuck {
    background-color: rgba(168, 85, 247, 0.25) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #c084fc !important;
}

html[data-color-theme="dark"] .status-stuck a[style="color: rgba(143, 0, 255, 0.85);"] {
    color: #c084fc !important;
}

/* ========================================
   2. PROCESSING - Soft Yellow/Amber
   ======================================== */
html[data-color-theme="dark"] .status-processing {
    background-color: rgba(251, 191, 36, 0.25) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    color: #fcd34d !important;
}

html[data-color-theme="dark"] .status-processing a[class="text-warning fw-bold"]{
    color: #fcd34d !important;
}

/* ========================================
   3. READY TO GO - Soft Indigo
   ======================================== */
html[data-color-theme="dark"] .status-ready {
    background-color: #6db5ff45 !important;
    border-color: #6db5ff !important;
    color: #6db5ff !important;
}

/* ========================================
   4. COMPLETED - Soft Green
   ======================================== */
html[data-color-theme="dark"] .status-completed {
    background-color: rgba(52, 211, 153, 0.25) !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
    color: #6ee7b7 !important;
}

/* ========================================
   5. ERROR - Soft Red
   ======================================== */
html[data-color-theme="dark"] .status-error {
    background-color: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

html[data-color-theme="dark"] .status-error a[style="color:rgba(220, 53, 69, 0.85);"] {
    color: #fca5a5 !important;
}

/* ========================================
   6. STOPPED - Soft Gray
   ======================================== */
html[data-color-theme="dark"] .status-stopped {
    background-color: rgba(156, 163, 175, 0.20) !important;
    border-color: rgba(156, 163, 175, 0.3) !important;
    color: #c1bebe !important;
}

html[data-color-theme="dark"] .status-stopped a[style="color: gray; text-decoration: none;"] {
    color: #ababab !important;
}

/* ========================================
   7. LOGIN FAILED - Soft Dark Red
   ======================================== */
html[data-color-theme="dark"] .status-login-failed {
    background-color: rgba(220, 38, 38, 0.25) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    color: #fca5a5 !important;
}

html[data-color-theme="dark"] .status-login-failed [style="color:rgba(84, 6, 6, 0.85);"],
html[data-color-theme="dark"] .status-login-failed [style="color:rgba(198, 1, 31, 0.85);"],
html[data-color-theme="dark"] .status-login-failed [style="font-size: 10px; background-color:rgba(84, 6, 6, 0.50);"] a[style="color:rgba(84, 6, 6, 0.85);"] {
    color: #fca5a5 !important;
}

/* ========================================
   8. PERMISSION ISSUE - Soft Blue
   ======================================== */
html[data-color-theme="dark"] .status-permission-issue {
    background-color: rgba(59, 130, 246, 0.25) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #93c5fd !important;
}
html[data-color-theme="dark"] .status-permission-issue [style="color:rgb(0, 0, 139, 0.85);"] {
    color: #93c5fd !important;
}

/* ========================================
   9. DATA ISSUE - Soft Purple
   ======================================== */
html[data-color-theme="dark"] .status-data-issue {
    background-color: rgba(168, 85, 247, 0.25) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #c084fc !important;
}

html[data-color-theme="dark"] .status-data-issue [style="color:rgb(139, 0, 139, 0.85);"] {
    color: #c084fc !important;
}

/* ========================================
   10. GENERAL ISSUE - Soft Amber/Yellow
   ======================================== */
html[data-color-theme="dark"] .status-general-issue {
    background-color: rgba(251, 191, 36, 0.25) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    color: #fcd34d !important;
}

html[data-color-theme="dark"] .status-general-issue [style="color:rgb(176, 138, 25, 1);"] {
    color: #fcd34d !important;
}

/* ========================================
   11. REQUEST ERROR - Soft Violet
   ======================================== */
html[data-color-theme="dark"] .status-request-error {
    background-color: rgba(139, 92, 246, 0.25) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
    color: #c4b5fd !important;
}

/* ========================================
   workflow-sidebar-steps - Progress Page
   ======================================== */

html[data-color-theme="dark"] .workflow-sidebar-steps #sb-step6-circle [style="font-size:11px;color:rgba(84,6,6,0.85);"] {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .workflow-sidebar-steps #sb-step6-label [style="color:rgba(84,6,6,0.85);"]{
    color: #ff3737d9 !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;
    border-color: var(--cb-border-color) !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;
    border-color: var(--cb-border-color) !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;
}

/* 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;
    color: var(--cb-text-primary) !important;
}

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

/* Shared card styling (dark mode) */
html[data-color-theme="dark"] .account-overview .card.dashboard-card {
    border: 1px solid var(--card-accent-border) !important;
    box-shadow: none !important;
}

html[data-color-theme="dark"] .account-overview .card.dashboard-card * {
    color: #e5e9f0 !important;
}

/* Card 1 – pink/red (Total User) */
html[data-color-theme="dark"] .account-overview .card.card-1 {
    --card-accent-border: rgba(255, 90, 120, 0.35);
    background: linear-gradient(145deg, rgba(255, 90, 120, 0.20), rgba(255, 90, 120, 0.07)) #1a1d27 !important;
}

/* Card 2 – amber/orange (Execution This Month) */
html[data-color-theme="dark"] .account-overview .card.card-2 {
    --card-accent-border: rgba(255, 170, 90, 0.35);
    background: linear-gradient(145deg, rgba(255, 170, 90, 0.20), rgba(255, 170, 90, 0.07)) #1a1d27 !important;
}

/* Card 3 – green (Total Hours) */
html[data-color-theme="dark"] .account-overview .card.card-3 {
    --card-accent-border: rgba(60, 210, 120, 0.35);
    background: linear-gradient(145deg, rgba(60, 210, 120, 0.20), rgba(60, 210, 120, 0.07)) #1a1d27 !important;
}

/* Card 4 – purple (Account Expiry Date) */
html[data-color-theme="dark"] .account-overview .card.card-4 {
    --card-accent-border: rgba(185, 130, 255, 0.35);
    background: linear-gradient(145deg, rgba(185, 130, 255, 0.22), rgba(185, 130, 255, 0.08)) #1a1d27 !important;
}

/* Keep old-dashboard-info-cards with original styling */
html[data-color-theme="dark"] .old-dashboard-info-cards,
html[data-color-theme="dark"] .old-dashboard-info-cards * {
    background-color: transparent !important;
    border-color: inherit !important;
}


html[data-color-theme="dark"] .card form[action="assign_modules_to_multiple_companies"] .module_card .card,
html[data-color-theme="dark"] .card form[action="assign_modules_to_multiple_companies"] .module_card  .card-body,
html[data-color-theme="dark"] .card form[action="assign_modules_to_multiple_companies"] .module_card  .card-body tbody td,
html[data-color-theme="dark"] .card form[id="permissionForm"] .module_actions .card,
html[data-color-theme="dark"] .card form[id="permissionForm"] .module_actions .card .card-body,
html[data-color-theme="dark"] .card form[id="permissionForm"] .module_actions .card .card-body tbody td {
    background-color: #20242f !important;
}

html[data-color-theme="dark"] .card form[id="modulesForm"] .module_card .card {
      box-shadow: 0 0 0 0.2rem rgb(55 57 70 / 19%) !important;
}

/* ============================================================
   PERMISSION MATRIX — Dark Mode (colors only)
   ============================================================ */

/* ---------- Top banner ---------- */
html[data-color-theme="dark"] #Permissions .perm-header {
  background: #22252F !important;
  border-color: #3A3D4A !important;
  border-left-color: #7C8BF0 !important;
}

html[data-color-theme="dark"] #Permissions .perm-header-left h5 {
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] #Permissions .perm-header-left small {
  color: #A8B0C0 !important;
}

html[data-color-theme="dark"] #Permissions .perm-header-right .form-check-label {
  color: #D0D6E0 !important;
}

html[data-color-theme="dark"] #Permissions .perm-header-right .form-check-input:checked {
  background-color: #7C8BF0 !important;
  border-color: #7C8BF0 !important;
}

html[data-color-theme="dark"] #Permissions .perm-header-right .form-check-input:focus {
  border-color: #7C8BF0 !important;
  box-shadow: 0 0 0 0.2rem rgba(124, 139, 240, 0.25) !important;
}

/* ---------- Toolbar wrapper ---------- */
html[data-color-theme="dark"] #Permissions .row.g-2.mb-3.align-items-center {
  background: #1A1D27 !important;
  border-color: #2A2D3A !important;
  border-radius: 8px !important;
}

/* ---------- Search + filter inputs ---------- */
html[data-color-theme="dark"] #Permissions .input-group-text.bg-light {
  background-color: #22252F !important;
  color: #A8B0C0 !important;
  border-color: #3A3D4A !important;
}

html[data-color-theme="dark"] #Permissions .input-group-text.bg-light i {
  color: #A8B0C0 !important;
}

html[data-color-theme="dark"] #Permissions .input-group .chosen-single {
  background-color: #22252F !important;
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] #Permissions .input-group .chosen-container .chosen-results li:hover {
    background: #667eea !important;   /* match your accent */
    color: #fff !important;
}

html[data-color-theme="dark"] #Permissions .input-group .chosen-container .chosen-results li.result-selected {
    color: #fff !important;
    background: #667eea !important;
    font-weight: 600 !important;
}

html[data-color-theme="dark"] #Permissions .form-control.bg-light,
html[data-color-theme="dark"] #Permissions .form-select.bg-light {
  background-color: #22252F !important;
  color: #F1F5F9 !important;
  border-color: #3A3D4A !important;
}

html[data-color-theme="dark"] #Permissions .form-control.bg-light:focus,
html[data-color-theme="dark"] #Permissions .form-select.bg-light:focus {
  background-color: #22252F !important;
  color: #F1F5F9 !important;
  border-color: #7C8BF0 !important;
  box-shadow: 0 0 0 0.2rem rgba(124, 139, 240, 0.25) !important;
}

html[data-color-theme="dark"] #Permissions .form-control.bg-light::placeholder {
  color: #8892A4 !important;
}

html[data-color-theme="dark"] #Permissions .form-select.bg-light option {
  background: #22252F !important;
  color: #F1F5F9 !important;
}

/* ---------- Toolbar button group ---------- */
html[data-color-theme="dark"] #Permissions .btn-group .btn {
  color: #A5B4FC !important;
  border-color: #6B7BE0 !important;
  background-color: #22252F !important;
}

/* ---------- Matrix ---------- */
html[data-color-theme="dark"] #Permissions .perm-matrix {
  background: #15171E !important;
  border-color: #2A2D3A !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

html[data-color-theme="dark"] #Permissions .perm-matrix::-webkit-scrollbar-thumb {
  background: rgba(124, 139, 240, 0.4) !important;
}

/* Left column */
html[data-color-theme="dark"] #Permissions .perm-left {
  background: #15171E !important;
  border-right-color: #2A2D3A !important;
}

html[data-color-theme="dark"] #Permissions .perm-left-head {
  background: #1A1D27 !important;
  color: #F1F5F9 !important;
  border-bottom-color: #2A2D3A !important;
}

html[data-color-theme="dark"] #Permissions .perm-left-head i {
  color: #7C8BF0 !important;
}

/* Module heads */
html[data-color-theme="dark"] #Permissions .perm-module-head {
  background: #1A1D27 !important;
  border-bottom-color: #2A2D3A !important;
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] #Permissions .perm-module-head:hover {
  background: #22252F !important;
}

html[data-color-theme="dark"] #Permissions .perm-module-title {
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] #Permissions .perm-module-count {
  color: #A5B4FC !important;
  background: rgba(124, 139, 240, 0.15) !important;
}

html[data-color-theme="dark"] #Permissions .perm-collapse-btn {
  color: #8A94A6 !important;
}

html[data-color-theme="dark"] #Permissions .perm-collapse-btn:hover {
  background: rgba(124, 139, 240, 0.15) !important;
  color: #7C8BF0 !important;
}

/* Action labels */
html[data-color-theme="dark"] #Permissions .perm-action-label {
  background: #15171E !important;
  color: #B8C0CC !important;
  border-bottom-color: #22252F !important;
}

html[data-color-theme="dark"] #Permissions .perm-action-label:hover {
  background: rgba(124, 139, 240, 0.06) !important;
}

html[data-color-theme="dark"] #Permissions .perm-action-label i {
  color: #6B7280 !important;
}

html[data-color-theme="dark"] #Permissions .perm-action-text {
  color: #B8C0CC !important;
}

/* Column headers */
html[data-color-theme="dark"] #Permissions .perm-col-head {
  background: #1A1D27 !important;
  color: #F1F5F9 !important;
  border-bottom-color: #2A2D3A !important;
}

html[data-color-theme="dark"] #Permissions .perm-col-head:hover {
  background: #22252F !important;
}

/* Filler */
html[data-color-theme="dark"] #Permissions .perm-grid-module-filler {
  background: #1A1D27 !important;
  border-bottom-color: #2A2D3A !important;
}

/* Rows + cells */
html[data-color-theme="dark"] #Permissions .perm-grid-row {
  background: #15171E !important;
}

html[data-color-theme="dark"] #Permissions .perm-grid-row:hover {
  background: rgba(124, 139, 240, 0.06) !important;
}

html[data-color-theme="dark"] #Permissions .perm-cell {
  border-bottom-color: #22252F !important;
}

/* Checkboxes */
html[data-color-theme="dark"] #Permissions .perm-module-checkbox,
html[data-color-theme="dark"] #Permissions .perm-col-checkbox,
html[data-color-theme="dark"] #Permissions .perm-cell input[type="checkbox"] {
  accent-color: #7C8BF0 !important;
}

html[data-color-theme="dark"] #Permissions .perm-cell input[type="checkbox"] {
  background-color: #22252F;
  border-color: #3A3D4A;
}

html[data-color-theme="dark"] #Permissions .perm-cell input[type="checkbox"]:checked {
  background-color: #7C8BF0 !important;
  border-color: #7C8BF0 !important;
}

/* Disabled module */
html[data-color-theme="dark"] #Permissions .perm-module-head.is-disabled {
  background: #131519 !important;
}

html[data-color-theme="dark"] #Permissions .perm-module-head.is-disabled .perm-module-title {
  color: #5A6274 !important;
}

/* ---------- Save bar ---------- */
html[data-color-theme="dark"] #Permissions .perm-save-bar {
  background: #1A1D27 !important;
  border-color: #2A2D3A !important;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.4) !important;
}

html[data-color-theme="dark"] #Permissions .perm-selected-pill {
  color: #A5B4FC !important;
  background: rgba(124, 139, 240, 0.15) !important;
}

html[data-color-theme="dark"] #Permissions .perm-save-bar .text-muted {
  color: #8A94A6 !important;
}

html[data-color-theme="dark"] #Permissions .perm-save-bar .btn-light {
  background-color: #22252F !important;
  color: #F1F5F9 !important;
  border-color: #3A3D4A !important;
}

html[data-color-theme="dark"] #Permissions .perm-save-bar .btn-light:hover {
  background-color: #2A2D3A !important;
  border-color: #4A4D5A !important;
  color: #FFFFFF !important;
}

/* ---------- No results ---------- */
html[data-color-theme="dark"] #noResultsMsg {
  color: #8A94A6 !important;
}


/* ========================================
   WORKSPACE CARD - DARK THEME (Compact)
   ======================================== */

/* Card */

/* Text */
html[data-color-theme="dark"] .Div_WorkSpace .workspace-name,
html[data-color-theme="dark"] .Div_WorkSpace .clientName span {
    color: var(--cb-text-primary) !important;
}

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

/* Link */
html[data-color-theme="dark"] .Div_WorkSpace a[href*="/ViewClient"] {
    color: #818cf8 !important;
}

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

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

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

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

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

html[data-color-theme="dark"] .Div_WorkSpace .workspace-itemarchived_ws .card {
    background-color: #2e3442 !important;
}

html[data-color-theme="dark"] #table-container tr.archived_ws {
    background-color: #2e3442 !important;
}

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


html[data-color-theme="dark"] .inner-content-card .pinned-bar .badge:not(.border-light) {
    background-color: #2196f3 !important;
    border: none  !important;
}

html[data-color-theme="dark"] .inner-content-card #module-dropdown .pinned {
    color: var(--cb-accent-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:not(.text-danger) {
    color: var(--cb-text-secondary) !important;
}

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

html[data-color-theme="dark"] .Div_WorkSpace .card {
    background-color: #20242f !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;
    background: none !important;
    border-color: var(--cb-border-color) !important;
}

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

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

html[data-color-theme="dark"] .table th .btn-link {
    color: var(--cb-accent-primary) !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: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .table thead .column-fixed-right {
    background-color: var(--cb-bg-primary) !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: #767676 !important;
}

html[data-color-theme="dark"] .table tbody tr[data-comp-user-status="2"][style*="background: whitesmoke"] td,
html[data-color-theme="dark"] .table tbody tr[data-company-active="2"][style*="background: whitesmoke"] td {
    background-color: #20242f !important;
}

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

html[data-color-theme="dark"] .table tbody [href]:not([href="#"]):not([data-status]),
html[data-color-theme="dark"] .table tbody [href]:not([href="#"]):not([.float-start]) *,
html[data-color-theme="dark"] .table tbody [data-href],
html[data-color-theme="dark"] .table tbody .float-start * {
    color: #3783f2 !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;
    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-danger {
    color: var(--cb-danger-light) !important;
}
html[data-color-theme="dark"] .text-danger.fw-semibold {
    color: var(--cb-danger-light) !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"] button {
    color: var(--cb-text-primary) !important;
}

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

/* ========================================
   MODALS
   ======================================== */
html[data-color-theme="dark"] .modal-content {
    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"] .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;
}

/* Confirm and Start button - Keep yellow color */
html[data-color-theme="dark"] .modal-content i {
    color: var(--cb-text-primary) !important;
}

/* modal Bulk Delete Confirm Label */
html[data-color-theme="dark"] .modal-content .modal-header #modalBulkDeleteConfirmLabel i,
html[data-color-theme="dark"] .modal-content .modal-footer #btnConfirmBulkDelete,  #btnConfirmBulkDelete i{
    color: var(--cb-danger) !important;
}

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


/* Confirm and Start button - Keep yellow color */
html[data-color-theme="dark"]  [id*="Automation"] .modal-content .modal-footer .btnConfirmSubmit,
html[data-color-theme="dark"] [id*="Automation"] .modal-content .modal-footer .btnConfirmSubmit i {
    color: #000000 !important;
}

/* Other Action Dropdown - Keep default color */
html[data-color-theme="dark"] [id*="Automation"] .modal-content .modal-footer .otherActionDropdown .bg-light,
html[data-color-theme="dark"] [id*="Automation"] .modal-content .modal-footer button[data-bs-dismiss="modal"] {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-bg-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-primary) !important;
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-primary) !important;
}


/* ========================================
   ALERTS
   ======================================== */
html[data-color-theme="dark"] .alert {
    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 {
    border-color: var(--cb-accent-primary) !important;
}
html[data-color-theme="dark"] .alert-success {
    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 {
    border-color: var(--cb-warning-light) !important;
}
html[data-color-theme="dark"] .alert-info {
    border-color: var(--cb-info-light) !important;
}

/* ========================================
   ALERTS — Scoped to .flash-message-container
   ======================================== */

html[data-color-theme="dark"] .flash-message-container .alert-primary {
  background-color: #cfe2ff !important;
  border-color: #b6d4fe !important;
  color: #084298 !important;
}
html[data-color-theme="dark"] .flash-message-container .alert-secondary {
  background-color: #e2e3e5 !important;
  border-color: #d3d6d8 !important;
  color: #41464b !important;
}
html[data-color-theme="dark"] .flash-message-container .alert-success {
  background-color: #d1e7dd !important;
  border-color: #badbcc !important;
  color: #0f5132 !important;
}
html[data-color-theme="dark"] .flash-message-container .alert-danger {
  background-color: #f8d7da !important;
  border-color: #f5c2c7 !important;
  color: #842029 !important;
}
html[data-color-theme="dark"] .flash-message-container .alert-warning {
  background-color: #fff3cd !important;
  border-color: #ffecb5 !important;
  color: #664d03 !important;
}
html[data-color-theme="dark"] .flash-message-container .alert-info {
  background-color: #cff4fc !important;
  border-color: #b6effb !important;
  color: #055160 !important;
}
html[data-color-theme="dark"] .flash-message-container .alert-light {
  background-color: #fefefe !important;
  border-color: #fdfdfe !important;
  color: #636464 !important;
}
html[data-color-theme="dark"] .flash-message-container .alert-dark {
  background-color: #d3d3d4 !important;
  border-color: #bcbebf !important;
  color: #141619 !important;
}

/* Prevent any child color hijacking */
html[data-color-theme="dark"] .flash-message-container .alert * {
  color: inherit !important;
}

/* Keep the close button's original dark icon */
html[data-color-theme="dark"] .flash-message-container .alert .btn-close,
html[data-color-theme="dark"] .flash-message-container .alert .close_msg_box {
  filter: none !important;
  opacity: 0.5 !important;
}
html[data-color-theme="dark"] .flash-message-container .alert .btn-close:hover,
html[data-color-theme="dark"] .flash-message-container .alert .close_msg_box:hover {
  opacity: 0.75 !important;
}

/* Neutralize color-scheme so browser doesn't auto-invert */
html[data-color-theme="dark"] .flash-message-container .alert {
  color-scheme: light !important;
}

/* Message text — keep it inheriting alert's own color */
html[data-color-theme="dark"] .flash-message-container .spn_msg {
  color: inherit !important;
}

/* ============================================================
   DIV_MSG_BOX — Colors only (keep light-mode appearance)
   ============================================================ */

html[data-color-theme="dark"] .div_msg_box .alert {
  color-scheme: light !important;
}

html[data-color-theme="dark"] .div_msg_box .alert-success {
  background-color: #d1e7dd !important;
}

html[data-color-theme="dark"] .div_msg_box .alert-danger {
  background-color: #f8d7da !important;
}

html[data-color-theme="dark"] .div_msg_box .alert-warning {
  background-color: #fff3cd !important;
}

html[data-color-theme="dark"] .div_msg_box .alert-info {
  background-color: #cff4fc !important;
}

html[data-color-theme="dark"] .div_msg_box .alert-primary {
  background-color: #cfe2ff !important;
}

html[data-color-theme="dark"] .div_msg_box .spn_msg,
html[data-color-theme="dark"] .div_msg_box .close_msg_box {
  color: inherit !important;
}

/* ---------- Force text color per variant ---------- */
html[data-color-theme="dark"] .div_msg_box .alert-success .spn_msg,
html[data-color-theme="dark"] .div_msg_box .alert-success .close_msg_box {
  color: #0f5132 !important;
}

html[data-color-theme="dark"] .div_msg_box .alert-danger .spn_msg,
html[data-color-theme="dark"] .div_msg_box .alert-danger .close_msg_box {
  color: #842029 !important;
}

html[data-color-theme="dark"] .div_msg_box .alert-warning .spn_msg,
html[data-color-theme="dark"] .div_msg_box .alert-warning .close_msg_box {
  color: #664d03 !important;
}

html[data-color-theme="dark"] .div_msg_box .alert-info .spn_msg,
html[data-color-theme="dark"] .div_msg_box .alert-info .close_msg_box {
  color: #055160 !important;
}

html[data-color-theme="dark"] .div_msg_box .alert-primary .spn_msg,
html[data-color-theme="dark"] .div_msg_box .alert-primary .close_msg_box {
  color: #084298 !important;
}

/* ---------- Close button icon (background SVG) ---------- */
html[data-color-theme="dark"] .div_msg_box .btn-close.close_msg_box {
  filter: none !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 — Body Color Only
   ======================================== */

/* Base Dark Mode Toast */
html[data-color-theme="dark"] #toastContainer .toast {
    background-color: #1A1D27 !important;
    border: 1px solid #2A2D3A !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html[data-color-theme="dark"] #toastContainer .toast .toast-header {
    background-color: #22252F !important;
    border-bottom: 1px solid #2A2D3A !important;
    color: #F1F5F9 !important;
}

html[data-color-theme="dark"] #toastContainer .toast .toast-header strong {
    color: #F1F5F9 !important;
}

html[data-color-theme="dark"] #toastContainer .toast .toast-header small {
    color: #8A94A6 !important;
}

html[data-color-theme="dark"] #toastContainer .toast .btn-close {
    filter: invert(1) brightness(1.5) !important;
    opacity: 0.7 !important;
}

/* ---------- DANGER (Red) ---------- */
html[data-color-theme="dark"] #toastContainer .toast.bg-danger .toast-body {
    background-color: #7F1D1D !important;
    color: #FEE2E2 !important;
}

/* ---------- SUCCESS (Green) ---------- */
html[data-color-theme="dark"] #toastContainer .toast.bg-success .toast-body {
    background-color: #064E3B !important;
    color: #D1FAE5 !important;
}

/* ---------- WARNING (Amber) ---------- */
html[data-color-theme="dark"] #toastContainer .toast.bg-warning .toast-body {
    background-color: #78350F !important;
    color: #FEF3C7 !important;
}

/* ---------- INFO (Blue) ---------- */
html[data-color-theme="dark"] #toastContainer .toast.bg-info .toast-body {
    background-color: #0C4A6E !important;
    color: #E0F2FE !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;
}

/* ========================================
   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;
}

html[data-color-theme="dark"] .cc-1uzwc textarea {
    background-color: white !important;
    color: #000 !important;
}

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

html[data-color-theme="dark"] .cb-ai-layout aside,
html[data-color-theme="dark"] .cb-ai-layout main{
    background-color: var(--cb-bg-card) !important;
}

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;
}

html[data-color-theme="dark"] .cb-ai-layout .form-control.bg-white,
html[data-color-theme="dark"] .cb-ai-layout .form-select.bg-white {
    background-color: var(--cb-bg-card) !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;
}

html[data-color-theme="dark"] .text-success.fw-semibold {
    color: var(--cb-success-light) !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"] .fw-semibold.credits-low {
    color: var(--cb-danger) !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 table thead tr {
    background-color: transparent !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,
html[data-color-theme="dark"] .quality-score-card .top3-module-view-all-btn {
    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;
}

html[data-color-theme="dark"] .view-progress-header .history-btn i {
    color: var(--cb-accent-primary) !important;
}
html[data-color-theme="dark"] .view-progress-header .close-btn {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .view-progress-header .history-btn:hover {
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

html[data-color-theme="dark"] .view-progress-header .close-btn:hover {
    color: var(--cb-danger) !important;
    transition: all 0.25s ease-in-out !important;
}

html[data-color-theme="dark"] .view-progress-header #hdr-attachment-zip-btn {
    color: var(--cb-accent-primary) !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;
    border-radius: 0 !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;
}

/* ========================================
   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-card) !important;
    border-color: var(--cb-border-color) !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-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 *:not(href) {
    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;
}

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

html[data-color-theme="dark"] .dropdown-menu .dropdown-item.text-danger:hover {
    color: var(--cb-danger) !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;
}

/* Module actions container - Color only */
html[data-color-theme="dark"] .div_steps .sortable .ui-state-default td [href^="javascript:"] {
    color: var(--cb-accent-primary) !important;
}

/* ========================================
   STEP DETAILS LINK - DARK THEME
   ======================================== */

/* Details link */
html[data-color-theme="dark"] td a[href="javascript:;"] {
    color: #818cf8 !important;  /* Light indigo/purple */
    text-decoration: none !important;
}

html[data-color-theme="dark"] td a[href="javascript:;"]:hover {
    color: #a78bfa !important;  /* Lighter purple on hover */
    text-decoration: underline !important;
}

/* Tooltip styling (the popup) */
html[data-color-theme="dark"] .tooltip-inner {
    background-color: var(--cb-bg-primary) !important;
    color: var(--cb-text-primary) !important;
}

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

html[data-color-theme="dark"] .tooltip-inner .fw-semibold {
    color: var(--cb-accent-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.65) !important;
    opacity: 0.5 !important;
    box-shadow: none !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,
html[data-color-theme="dark"] #pagination-container .page-indicator {
    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
   ======================================== */

/* Image Viewer Controls - Dark Theme with enhanced hover */
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;
    border: 1px solid var(--cb-border-color) !important;
    transition: all 0.25s ease-in-out !important;
}

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

/* Hover states */
html[data-color-theme="dark"] #giv-zoom-controls button:hover,
html[data-color-theme="dark"] #giv-close-btn:hover,
html[data-color-theme="dark"] #giv-download-btn:hover,
html[data-color-theme="dark"] .giv-nav-btn:hover {
    background-color: rgba(99, 102, 241, 0.3) !important;
    border-color: #818cf8 !important;
    color: var(--cb-text-primary) !important;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.25) !important;
}

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

/* Close button specific hover (optional red tint) */
html[data-color-theme="dark"] #giv-close-btn:hover {
    background-color: rgba(239, 68, 68, 0.3) !important;
    border-color: #ef4444 !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-hover) !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-item .nav-link.active {
    background-color: transparent !important;
}

html[data-color-theme="dark"] .comp-view-tabs .nav-tabs .nav-item .nav-link:hover {
    background-color: transparent !important;
    border-bottom-color: transparent !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 {
    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 {
    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;
}

/* ========================================
   MODULE CARD - DARK THEME (Compact)
   ======================================== */

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

html[data-color-theme="dark"] .Skip_module .card.bg-white:hover {
   background-color: var(--cb-bg-hover-strong) !important;
    border-color: var(--cb-accent-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.25) !important;

}

html[data-color-theme="dark"] .dropdown-search-wrapper {
    background: none !important;
}

/*
html[data-color-theme="dark"] .Modal_Form_Inner_Body {
    background-color: var(--cb-bg-primary) !important;
    padding-top: 15px !important;
    margin-bottom: 10px !important;
}
*/

/* ========================================
   SERVICE SELECTION CARDS - DARK THEME
   ======================================== */

/* Card container */
html[data-color-theme="dark"] .SelectServiceCards .card.bg-white {
    background-color: var(--cb-bg-card) !important;
    border: 1px solid var(--cb-border-color) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease-in-out !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Hover effect */
html[data-color-theme="dark"] .SelectServiceCards .card.bg-white:hover {
    background-color: var(--cb-bg-hover-strong) !important;
    border-color: var(--cb-accent-primary) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.25) !important;
}

/* Active/click effect */
html[data-color-theme="dark"] .SelectServiceCards .card.bg-white:active {
    transform: scale(0.96) !important;
    transition-duration: 0.1s !important;
}

/* Logo images */
html[data-color-theme="dark"] .SelectServiceCards .card img {
    transition: all 0.3s ease-in-out !important;
    filter: brightness(0.9) !important;
}

html[data-color-theme="dark"] .SelectServiceCards .card.bg-white:hover img {
    filter: brightness(1.1) !important;
    transform: scale(1.02) !important;
}

/* Specific logo adjustments */
html[data-color-theme="dark"] .SelectServiceCards .card .sn-logo {
    filter: brightness(1) !important;
}

html[data-color-theme="dark"] .SelectServiceCards .card.bg-white:hover .sn-logo {
    filter: brightness(1.1) !important;
}

/* Card link */
html[data-color-theme="dark"] .SelectServiceCards .card.newcard {
    text-decoration: none !important;
}

html[data-color-theme="dark"] .SelectServiceCards .card.newcard:hover {
    text-decoration: none !important;
}

/* Optional: Glow effect on hover */
html[data-color-theme="dark"] .SelectServiceCards .card.bg-white:hover {
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.25),
                inset 0 0 30px rgba(99, 102, 241, 0.05) !important;
}

/* Optional: Border glow animation */
html[data-color-theme="dark"] .SelectServiceCards .card.bg-white:hover {
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.15),
                0 8px 30px rgba(99, 102, 241, 0.2) !important;
}

/* ========================================
   UPGRADE PREVIEW - DARK THEME
   ======================================== */

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

/* Brand / Header */
html[data-color-theme="dark"] .upgrage-preview-page .brand h1 {
    color: var(--cb-text-primary) !important;
}

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

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

/* Instance button */
html[data-color-theme="dark"] .upgrage-preview-page .insbtn {
    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"] .upgrage-preview-page .insbtn:hover {
    background-color: var(--cb-bg-hover) !important;
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-primary) !important;
}

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

/* Dropdown menus */
html[data-color-theme="dark"] .upgrage-preview-page .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"] .upgrage-preview-page .menu .item {
    color: var(--cb-text-dropdown) !important;
}

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

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

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

/* Dropdown select */
html[data-color-theme="dark"] .upgrage-preview-page .form-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"] .upgrage-preview-page .form-select:focus {
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Iteration status badge */
html[data-color-theme="dark"] .upgrage-preview-page #currentIterationStatusBadge {
    background-color: var(--cb-bg-card) !important;
    border: 1px solid var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

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

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

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

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

/* Tabs */
html[data-color-theme="dark"] .upgrage-preview-page .tabs {
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .upgrage-preview-page .tab {
    color: var(--cb-text-nav) !important;
    background-color: transparent !important;
}

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

html[data-color-theme="dark"] .upgrage-preview-page .tab[aria-selected="true"] {
    color: var(--cb-text-primary) !important;
    border-bottom-color: var(--cb-accent-primary) !important;
}

/* Cards / Tiles */
html[data-color-theme="dark"] .upgrage-preview-page .card {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

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

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

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

html[data-color-theme="dark"] .upgrage-preview-page .card .val[style*="color:var(--good)"] {
    color: var(--cb-success-light) !important;
}

html[data-color-theme="dark"] .upgrage-preview-page .card .val[style*="color:var(--critical)"] {
    color: var(--cb-danger-light) !important;
}

/* Funnel / Stats */
html[data-color-theme="dark"] .upgrage-preview-page .funnel .tile {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

/* Note box */
html[data-color-theme="dark"] .upgrage-preview-page .note-box {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-secondary) !important;
}

html[data-color-theme="dark"] .upgrage-preview-page .note-box b {
    color: var(--cb-text-primary) !important;
}

/* Section headers */
html[data-color-theme="dark"] .upgrage-preview-page .sechead h2 {
    color: var(--cb-text-primary) !important;
}

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

/* Filters / Chips */
html[data-color-theme="dark"] .upgrage-preview-page .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"] .upgrage-preview-page .chip:hover {
    background-color: var(--cb-bg-hover) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .upgrage-preview-page .chip[aria-pressed="true"] {
    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"] .upgrage-preview-page .chip .count {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .upgrage-preview-page .chip[aria-pressed="true"] .count {
    color: var(--cb-text-primary) !important;
}

/* Search input */
html[data-color-theme="dark"] .upgrage-preview-page #q {
    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"] .upgrage-preview-page #q::placeholder {
    color: var(--cb-text-disabled) !important;
}

html[data-color-theme="dark"] .upgrage-preview-page #q:focus {
    border-color: var(--cb-accent-primary) !important;
}

/* Decision filter select */
html[data-color-theme="dark"] .upgrage-preview-page #decf {
    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"] .upgrage-preview-page #decf:focus {
    border-color: var(--cb-accent-primary) !important;
}

/* Checkbox */
html[data-color-theme="dark"] .upgrage-preview-page .cb {
    accent-color: var(--cb-accent-primary) !important;
}

/* Foot / Footer */
html[data-color-theme="dark"] .upgrage-preview-page .foot {
    color: var(--cb-text-muted) !important;
    border-top-color: var(--cb-border-color) !important;
}

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

/* Disabled buttons */
html[data-color-theme="dark"] .upgrage-preview-page .btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Tables */
html[data-color-theme="dark"] .upgrage-preview-page .tbl {
    background-color: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .upgrage-preview-page .tbl th {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .upgrage-preview-page .tbl td {
    color: var(--cb-text-primary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .upgrage-preview-page .tbl tr:hover td {
    background-color: var(--cb-bg-hover) !important;
}

/* Chart containers */
html[data-color-theme="dark"] .upgrage-preview-page #chart-auto,
html[data-color-theme="dark"] .upgrage-preview-page #chart-rev {
    background-color: var(--cb-bg-secondary) !important;
}

/* Clusters / Groups */
html[data-color-theme="dark"] .upgrage-preview-page #clusters {
    background-color: var(--cb-bg-secondary) !important;
}

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

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

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

/* Spinner */
html[data-color-theme="dark"] .upgrage-preview-page .fa-spinner {
    color: var(--cb-accent-primary) !important;
}

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

/* Badge */
html[data-color-theme="dark"] .upgrage-preview-page .badge {
    background-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

/* ========================================
   BOOTSTRAP SELECT - DARK THEME (Compact)
   ======================================== */

/* Button */
html[data-color-theme="dark"] .bootstrap-select .btn-light {
    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"] .bootstrap-select .btn-light:hover {
    background-color: var(--cb-bg-hover) !important;
    border-color: var(--cb-accent-primary) !important;
}

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

/* Actions box */
html[data-color-theme="dark"] .bootstrap-select .bs-actionsbox {
    background-color: var(--cb-bg-dropdown) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

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

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

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

html[data-color-theme="dark"] .bootstrap-select .dropdown-item.selected {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: var(--cb-accent-primary) !important;
}

/* ========================================
   COMPANY PROFILE TABS - ACTIVE TAB ONLY
   ======================================== */

html[data-color-theme="dark"] #companyTabs .nav-link.active {
    color: var(--cb-text-primary) !important;
    background-color: var(--cb-accent-primary) !important;
    border-bottom: 2px solid var(--cb-accent-primary) !important;
}

/* ========================================
   PASSWORD EXPIRY NOTIFICATIONS - DARK MODE
   ======================================== */

/* Notification container - Color only */
html[data-color-theme="dark"] .password-notification {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: var(--cb-shadow-lg) !important;
}

/* Warning notification - Color only */
html[data-color-theme="dark"] .password-notification.warning {
    background-color: rgb(245, 158, 11) !important;
    border-left: 4px solid var(--cb-warning-light) !important;
    color: var(--cb-text-primary) !important;
}

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

html[data-color-theme="dark"] .password-notification.warning button {
    background-color: rgb(245, 158, 11) !important;
    color: var(--cb-text-primary) !important;
    border-color: var(--cb-warning-light) !important;
}

html[data-color-theme="dark"] .password-notification.warning button:hover {
    background-color: rgb(245, 158, 11) !important;
}

/* Expired notification - Color only */
html[data-color-theme="dark"] .password-notification.expired {
    background-color: rgb(239, 68, 68) !important;
    border-left: 4px solid var(--cb-danger-light) !important;
    color: var(--cb-text-primary) !important;
}

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

html[data-color-theme="dark"] .password-notification.expired button {
    background-color: rgb(239, 68, 68) !important;
    color: var(--cb-text-primary) !important;
    border-color: var(--cb-danger-light) !important;
}

html[data-color-theme="dark"] .password-notification.expired button:hover {
    background-color: rgba(239, 68, 68, 0.3) !important;
}

/* Error notification - Color only */
html[data-color-theme="dark"] .password-notification.error {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-left: 4px solid var(--cb-danger-light) !important;
    color: var(--cb-text-primary) !important;
}

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

html[data-color-theme="dark"] .password-notification.error button {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: var(--cb-text-primary) !important;
    border-color: var(--cb-danger-light) !important;
}

html[data-color-theme="dark"] .password-notification.error button:hover {
    background-color: rgba(239, 68, 68, 0.3) !important;
}

/* Close button - Color only */
html[data-color-theme="dark"] .password-notification button {
    background: var(--cb-bg-input) !important;
    border: 1px solid var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}

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

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


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

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

/* Month grid - Color only */
html[data-color-theme="dark"] .comp-month-grid {
    background-color: transparent !important;
}

/* Month cells - Color only */
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;
}

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

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

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

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

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

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

/* Markers - Color only */
html[data-color-theme="dark"] .comp-marker {
    background-color: var(--cb-accent-primary) !important;
    border-color: var(--cb-accent-primary) !important;
}

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

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

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

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

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

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

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

}

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

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

/* Drawer header - Color only */
html[data-color-theme="dark"] .comp-drawer .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 .comp-drawer-sub {
    color: var(--cb-text-primary) !important;
}

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

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

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

/* Tabs in drawer - Color only */
html[data-color-theme="dark"] .comp-drawer .nav-tabs {
    background-color: transparent !important;
    border-bottom-color: var(--cb-border-color) !important;
}

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

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

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

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

html[data-color-theme="dark"] .comp-drawer .form-control {
    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-drawer .form-control::placeholder {
    color: var(--cb-text-disabled) !important;
}

html[data-color-theme="dark"] .comp-drawer .form-control:focus {
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Buttons in drawer - Color only */
html[data-color-theme="dark"] .comp-drawer .btn-outline-secondary {
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

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

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

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

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

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

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

/* Accordion inside drawer - Color only */
html[data-color-theme="dark"] .comp-drawer .accordion-item {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

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

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

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

html[data-color-theme="dark"] .comp-drawer .accordion-button.collapsed {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-drawer .accordion-button:not(.collapsed) {
    background-color: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .comp-drawer .accordion-button::after {
    filter: invert(1) !important;
}

html[data-color-theme="dark"] .comp-drawer .accordion-body,
html[data-color-theme="dark"] .comp-drawer .accordion-body [style="margin-bottom: 20px; padding: 16px; background: #ffffff; border: 1px solid #e6edf4; border-radius: 8px;"] {
    background-color: var(--cb-bg-secondary) !important;
    color: var(--cb-text-primary) !important;
    border-color: var(--cb-border-color) !important;
}

/* Badges in drawer - Color only */
html[data-color-theme="dark"] .comp-diff-row {
    border-color: var(--cb-border-color) !important;
}

/* Badges in drawer - Color only */
html[data-color-theme="dark"] .comp-drawer .badge {
    color: var(--cb-text-primary) !important;
}

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

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

/* Shadow in drawer - Color only */
html[data-color-theme="dark"] .comp-drawer .shadow-lg {
    box-shadow: var(--cb-shadow-lg) !important;
}

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

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

/* Autocomplete suggestions - Color only */
html[data-color-theme="dark"] .comp-drawer .autocomplete-suggestions {
    background-color: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

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

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

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

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

/* Diff container in drawer - Color only */
html[data-color-theme="dark"] .comp-drawer .comp-diff {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-bg-card) !important;
}

html[data-color-theme="dark"] .comp-drawer .comp-diff div[style*="background:#fff"] {
    background-color: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .comp-drawer .comp-diff div[style*="border:1px solid #e6edf4"] {
    border-color: var(--cb-border-color) !important;
}

/* ========================================
   TOAST NOTIFICATIONS - DARK MODE
   Full colored theme per type
   ======================================== */

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

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

/* ==========================================
   SUCCESS — green theme
   ========================================== */
html[data-color-theme="dark"] .toast.bg-success .toast-header strong {
    color: #4ade80 !important;
}
html[data-color-theme="dark"] .toast.bg-success .toast-header small {
    color: #6ee7b7 !important;
}
html[data-color-theme="dark"] .toast.bg-success .toast-header .btn-close {
    filter: invert(72%) sepia(56%) saturate(471%) hue-rotate(93deg) brightness(98%) contrast(92%) !important;
    opacity: 0.8 !important;
}
html[data-color-theme="dark"] .toast.bg-success .toast-header .btn-close:hover {
    opacity: 1 !important;
}
html[data-color-theme="dark"] .toast.bg-success .toast-body {
    background-color: rgba(25, 135, 84, 0.15) !important;
    color: #6ee7b7 !important;
    border-top: 2px solid #198754 !important;
}

/* ==========================================
   DANGER — red theme
   ========================================== */
html[data-color-theme="dark"] .toast.bg-danger .toast-header strong {
    color: #f87171 !important;
}
html[data-color-theme="dark"] .toast.bg-danger .toast-header small {
    color: #fca5a5 !important;
}
html[data-color-theme="dark"] .toast.bg-danger .toast-header .btn-close {
    filter: invert(60%) sepia(55%) saturate(3000%) hue-rotate(340deg) brightness(100%) contrast(92%) !important;
    opacity: 0.8 !important;
}
html[data-color-theme="dark"] .toast.bg-danger .toast-header .btn-close:hover {
    opacity: 1 !important;
}
html[data-color-theme="dark"] .toast.bg-danger .toast-body {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: #fca5a5 !important;
    border-top: 2px solid #dc3545 !important;
}

/* ==========================================
   WARNING — yellow theme
   ========================================== */
html[data-color-theme="dark"] .toast.bg-warning .toast-header strong {
    color: #fbbf24 !important;
}
html[data-color-theme="dark"] .toast.bg-warning .toast-header small {
    color: #fde047 !important;
}
html[data-color-theme="dark"] .toast.bg-warning .toast-header .btn-close {
    filter: invert(82%) sepia(60%) saturate(1500%) hue-rotate(2deg) brightness(105%) contrast(95%) !important;
    opacity: 0.8 !important;
}
html[data-color-theme="dark"] .toast.bg-warning .toast-header .btn-close:hover {
    opacity: 1 !important;
}
html[data-color-theme="dark"] .toast.bg-warning .toast-body {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: #fde047 !important;
    border-top: 2px solid #ffc107 !important;
}

/* ==========================================
   INFO — cyan theme
   ========================================== */
html[data-color-theme="dark"] .toast.bg-info .toast-header strong {
    color: #22d3ee !important;
}
html[data-color-theme="dark"] .toast.bg-info .toast-header small {
    color: #67e8f9 !important;
}
html[data-color-theme="dark"] .toast.bg-info .toast-header .btn-close {
    filter: invert(75%) sepia(85%) saturate(1500%) hue-rotate(150deg) brightness(100%) contrast(92%) !important;
    opacity: 0.8 !important;
}
html[data-color-theme="dark"] .toast.bg-info .toast-header .btn-close:hover {
    opacity: 1 !important;
}
html[data-color-theme="dark"] .toast.bg-info .toast-body {
    background-color: rgba(13, 202, 240, 0.15) !important;
    color: #67e8f9 !important;
    border-top: 2px solid #0dcaf0 !important;
}

/* ==========================================
   PRIMARY — blue theme
   ========================================== */
html[data-color-theme="dark"] .toast.bg-primary .toast-header strong {
    color: #60a5fa !important;
}
html[data-color-theme="dark"] .toast.bg-primary .toast-header small {
    color: #93c5fd !important;
}
html[data-color-theme="dark"] .toast.bg-primary .toast-header .btn-close {
    filter: invert(60%) sepia(90%) saturate(2000%) hue-rotate(200deg) brightness(105%) contrast(95%) !important;
    opacity: 0.8 !important;
}
html[data-color-theme="dark"] .toast.bg-primary .toast-header .btn-close:hover {
    opacity: 1 !important;
}
html[data-color-theme="dark"] .toast.bg-primary .toast-body {
    background-color: rgba(13, 110, 253, 0.15) !important;
    color: #93c5fd !important;
    border-top: 2px solid #0d6efd !important;
}


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

/* ========================================
   PROCESS FLOW - DARK THEME (Complete)
   Prefix: .process-overflow
   ======================================== */

/* ==========================================
   CSS VARIABLE OVERRIDES
   ========================================== */
html[data-color-theme="dark"] .process-overflow {
    --ink: #ffffff;
    --muted: rgba(255, 255, 255, 0.7);
    --soft: rgba(255, 255, 255, 0.5);
    --line: #2a2d3a;
    --line2: #3a3d4a;
    --bg: #0f1117;
    --card: #1a1d27;
    --navy: #15171e;
    --blue: #6366f1;
    --blue2: #4f46e5;
    --blueSoft: rgba(99, 102, 241, 0.15);
    --teal: #14b8a6;
    --tealSoft: rgba(20, 184, 166, 0.15);
    --purple: #a855f7;
    --purpleSoft: rgba(168, 85, 247, 0.15);
    --amber: #f59e0b;
    --amberSoft: rgba(245, 158, 11, 0.15);
    --green: #10b981;
    --greenSoft: rgba(16, 185, 129, 0.15);
    --red: #ef4444;
    --redSoft: rgba(239, 68, 68, 0.15);
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
    background-color: var(--cb-bg-primary) !important;
    color: var(--cb-text-primary) !important;
}

/* ==========================================
   APP SHELL
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-app {
    background-color: var(--cb-bg-primary) !important;
}

/* ==========================================
   TOPBAR
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-topbar {
    background: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
    border-bottom: 1px solid var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-topbar .pflow-back,
html[data-color-theme="dark"] .process-overflow .pflow-topbar .pflow-iconbtn {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-topbar .pflow-back:hover,
html[data-color-theme="dark"] .process-overflow .pflow-topbar .pflow-iconbtn:hover {
    background: var(--cb-bg-hover) !important;
    color: var(--cb-text-primary) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .pflow-status {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-switch {
    background: rgba(255, 255, 255, 0.15) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-switch i {
    background: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-switch.on {
    background: var(--cb-accent-primary) !important;
}

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

/* ==========================================
   BUTTONS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-btn {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-btn:hover {
    background: var(--cb-bg-hover) !important;
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-btn.pflow-primary {
    background: var(--cb-accent-primary) !important;
    border-color: var(--cb-accent-primary) !important;
    color: #ffffff !important;
}

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

html[data-color-theme="dark"] .process-overflow .pflow-btn.darkghost {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-btn.darkghost:hover {
    background: rgba(255, 255, 255, 0.13) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ==========================================
   SUBBAR / TABS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-subbar {
    background: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-subbar::before {
    background: var(--cb-bg-card) !important;
    border-right-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-tab {
    color: var(--cb-text-nav) !important;
}

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

html[data-color-theme="dark"] .process-overflow .pflow-tab.active {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-tab.active::after {
    background: var(--cb-accent-primary) !important;
}

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

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

/* ==========================================
   CONTEXT BAR
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-contextbar {
    background: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2) !important;
}

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

html[data-color-theme="dark"] .process-overflow .pflow-platform-button {
    background: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-button:hover,
html[data-color-theme="dark"] .process-overflow .pflow-platform-button.open {
    border-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-button b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-button small {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-button > svg {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-logo {
    background: var(--cb-bg-hover) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-menu {
    background: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: var(--cb-shadow-lg) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-option {
    background: transparent !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-option:hover {
    background: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-option.active {
    background: var(--cb-bg-hover-strong) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-option b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-option span {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-platform-check {
    color: var(--cb-accent-primary) !important;
}

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

html[data-color-theme="dark"] .process-overflow .pflow-context-note svg {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-context-pill {
    background: var(--cb-bg-hover) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-cadence-chip {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-cadence-chip svg {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-cadence-chip b {
    color: var(--cb-text-primary) !important;
}

/* ==========================================
   VIEW SWITCH
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-viewswitch {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

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

html[data-color-theme="dark"] .process-overflow .pflow-viewswitch button.active {
    background: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================
   GLOBAL RAIL (Sidebar)
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-globalrail {
    background: var(--cb-bg-card) !important;
    border-right-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-globalrail .pflow-railgroup-title {
    color: var(--cb-text-muted) !important;
}

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

html[data-color-theme="dark"] .process-overflow .pflow-globalrail .pflow-railitem:hover {
    background: var(--cb-bg-hover) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-globalrail .pflow-railitem.active {
    background: var(--cb-bg-hover-strong) !important;
    border-color: var(--cb-accent-primary) !important;
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-globalrail .pflow-railitem .pflow-rail-count {
    background: var(--cb-bg-hover) !important;
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-globalrail .pflow-railitem.active .pflow-rail-count {
    background: var(--cb-bg-hover-strong) !important;
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-globalrail .railsep {
    background: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-globalrail .pflow-railitem[data-tip]::after {
    background: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
    box-shadow: var(--cb-shadow-lg) !important;
}

/* ==========================================
   PAGE HOST
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pagehost {
    background: var(--cb-bg-primary) !important;
}

/* ==========================================
   BUILDER BAR
   ========================================== */
html[data-color-theme="dark"] .process-overflow .builderbar {
    background: var(--cb-bg-card) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

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

html[data-color-theme="dark"] .process-overflow .builderbar-title svg {
    color: var(--cb-accent-primary) !important;
}

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

/* ==========================================
   STEP SCROLL / CANVAS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .stepscroll {
    background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 1.25px) 0 0/24px 24px, var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .stepcanvas {
    background: transparent !important;
}

/* ==========================================
   TRIGGER CARD
   ========================================== */
html[data-color-theme="dark"] .process-overflow .trigger {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .trigger:hover {
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

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

html[data-color-theme="dark"] .process-overflow .triggerinfo svg {
    color: var(--cb-accent-primary) !important;
}

/* ==========================================
   STEP CARD
   ========================================== */
html[data-color-theme="dark"] .process-overflow .stepcard {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .stepcard:hover {
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

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

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

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

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

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

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

html[data-color-theme="dark"] .process-overflow .details svg {
    color: var(--cb-accent-primary) !important;
}

/* ==========================================
   ACTION ICON TONES
   ========================================== */
html[data-color-theme="dark"] .process-overflow .actionicon {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #818cf8 !important;
}

html[data-color-theme="dark"] .process-overflow .tone-workbook {
    color: #14b8a6 !important;
    background: rgba(20, 184, 166, 0.15) !important;
    border-color: rgba(20, 184, 166, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .viewiter {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .viewiter:hover {
    background: var(--cb-bg-hover) !important;
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
}

html[data-color-theme="dark"] .process-overflow .tone-compare {
    color: #a855f7 !important;
    background: rgba(168, 85, 247, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .tone-decision {
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .tone-deploy {
    color: #818cf8 !important;
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .tone-validate {
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .tone-notify {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .tone-trigger {
    color: var(--cb-text-primary) !important;
    background: var(--cb-bg-hover) !important;
    border-color: var(--cb-border-color) !important;
}

/* ==========================================
   OUTPUT PILLS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .outpill {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

/* ==========================================
   CONDITION CARD
   ========================================== */
html[data-color-theme="dark"] .process-overflow .condition {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), var(--cb-bg-card)) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .summarypill {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

/* ==========================================
   CONNECTOR
   ========================================== */
html[data-color-theme="dark"] .process-overflow .connector {
    background: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .connector::after {
    background: var(--cb-bg-primary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .insert {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-accent-primary) !important;
}

/* ==========================================
   NUMBER RAIL
   ========================================== */
html[data-color-theme="dark"] .process-overflow .num {
    background: var(--cb-bg-hover-strong) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .numline {
    background: var(--cb-border-color) !important;
}

/* ==========================================
   BRANCH WRAP
   ========================================== */
html[data-color-theme="dark"] .process-overflow .branchstem,
html[data-color-theme="dark"] .process-overflow .branchbar {
    background: var(--cb-border-color) !important;
}

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

html[data-color-theme="dark"] .process-overflow .branchcol::before {
    background: var(--cb-border-color) !important;
}

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

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

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

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

html[data-color-theme="dark"] .process-overflow .brancharrow {
    background: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .addbranch {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-accent-primary) !important;
}

/* ==========================================
   FLOW END
   ========================================== */
html[data-color-theme="dark"] .process-overflow .flowend {
    color: var(--cb-text-muted) !important;
}

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

/* ==========================================
   INSPECTOR
   ========================================== */
html[data-color-theme="dark"] .process-overflow .inspector {
    background: var(--cb-bg-card) !important;
    border-left-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .insphead {
    border-bottom-color: var(--cb-border-color) !important;
}

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

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

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

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

html[data-color-theme="dark"] .process-overflow .insptabs {
    border-bottom-color: var(--cb-border-color) !important;
}

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

html[data-color-theme="dark"] .process-overflow .insptabs button.active {
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .insptabs button.active::after {
    background: var(--cb-accent-primary) !important;
}

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

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

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

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

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

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

/* ==========================================
   FORM FIELDS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .field label {
    color: var(--cb-text-muted) !important;
}

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

html[data-color-theme="dark"] .process-overflow .field input:focus,
html[data-color-theme="dark"] .process-overflow .field select:focus,
html[data-color-theme="dark"] .process-overflow .field textarea:focus {
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

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

/* ==========================================
   TOKEN BOX
   ========================================== */
html[data-color-theme="dark"] .process-overflow .tokenbox {
    background: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .token {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

/* ==========================================
   TOGGLE / SWITCH
   ========================================== */
html[data-color-theme="dark"] .process-overflow .togglerow {
    border-bottom-color: var(--cb-border-color) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .miniswitch {
    background: var(--cb-border-color) !important;
}

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

html[data-color-theme="dark"] .process-overflow .miniswitch.on {
    background: var(--cb-accent-primary) !important;
}

/* ==========================================
   INLINE NOTE
   ========================================== */
html[data-color-theme="dark"] .process-overflow .inline-note {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .inline-note b {
    color: var(--cb-text-primary) !important;
}

/* ==========================================
   SOURCE OUTPUT CARD
   ========================================== */
html[data-color-theme="dark"] .process-overflow .source-output-card {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .source-state {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

/* ==========================================
   SEGMENTED CONTROL
   ========================================== */
html[data-color-theme="dark"] .process-overflow .segmented {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

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

html[data-color-theme="dark"] .process-overflow .segmented button.active {
    background: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================
   FILTER ROWS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .logicbar span {
    color: var(--cb-text-muted) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .filter-index {
    background: var(--cb-bg-hover) !important;
    color: var(--cb-text-muted) !important;
}

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

html[data-color-theme="dark"] .process-overflow .remove-filter:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

html[data-color-theme="dark"] .process-overflow .add-filter {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .add-filter:hover {
    background: var(--cb-bg-hover) !important;
    border-color: var(--cb-accent-primary) !important;
}

/* ==========================================
   COLOR CONFIG
   ========================================== */
html[data-color-theme="dark"] .process-overflow .color-config {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

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

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

/* ==========================================
   MATCH BOX
   ========================================== */
html[data-color-theme="dark"] .process-overflow .match-box {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .match-box > div:first-child {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .match-box > div:first-child svg {
    color: #fbbf24 !important;
}

html[data-color-theme="dark"] .process-overflow .condition-line select,
html[data-color-theme="dark"] .process-overflow .condition-line input {
    background: var(--cb-bg-input) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: var(--cb-text-primary) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .branch-label.true b {
    color: #34d399 !important;
}

/* ==========================================
   PREVIEW CARD
   ========================================== */
html[data-color-theme="dark"] .process-overflow .preview-card {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .preview-head {
    background: var(--cb-bg-secondary) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .preview-count {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

html[data-color-theme="dark"] .process-overflow .preview-head b {
    color: var(--cb-text-primary) !important;
}

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

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

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

html[data-color-theme="dark"] .process-overflow .preview-table th {
    background: var(--cb-bg-card) !important;
    color: var(--cb-text-muted) !important;
}

/* ==========================================
   OUTPUT ROWS / MULTI CHECKS / DATA CHIPS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .output-row {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .output-row code {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .multi-check b {
    color: var(--cb-text-primary) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .data-chip.target {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}

/* ==========================================
   LIBRARY (Canvas view)
   ========================================== */
html[data-color-theme="dark"] .process-overflow .library {
    background: var(--cb-bg-card) !important;
    border-right-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .libhead {
    border-bottom-color: var(--cb-border-color) !important;
}

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

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

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

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

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

html[data-color-theme="dark"] .process-overflow .libtabs button {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .libtabs button.active {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .palette:hover {
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .grip {
    color: var(--cb-border-input) !important;
}

html[data-color-theme="dark"] .process-overflow .libfooter {
    background: var(--cb-bg-secondary) !important;
    border-top-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .template {
    background: rgba(99, 102, 241, 0.12) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #a5b4fc !important;
}

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

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

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

html[data-color-theme="dark"] .process-overflow .canvashelp svg {
    color: var(--cb-accent-primary) !important;
}

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

html[data-color-theme="dark"] .process-overflow .world {
    background: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .edge {
    stroke: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .edge.active {
    stroke: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .edgelabelbg {
    fill: var(--cb-bg-card) !important;
    stroke: var(--cb-border-color) !important;
}

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

/* ==========================================
   NODES (Canvas)
   ========================================== */
html[data-color-theme="dark"] .process-overflow .node {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.4) !important;
}

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

html[data-color-theme="dark"] .process-overflow .node.selected {
    border-color: var(--cb-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 8px 21px rgba(0, 0, 0, 0.4) !important;
}

html[data-color-theme="dark"] .process-overflow .node.pending {
    border-color: var(--cb-accent-hover) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 8px 21px rgba(0, 0, 0, 0.4) !important;
}

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

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

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

html[data-color-theme="dark"] .process-overflow .nodefoot {
    background: var(--cb-bg-secondary) !important;
    border-top-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .nodestatus {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

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

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

/* ==========================================
   PORTS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .port {
    background: var(--cb-border-input) !important;
    border-color: var(--cb-bg-card) !important;
    box-shadow: 0 0 0 1px var(--cb-border-input) !important;
}

html[data-color-theme="dark"] .process-overflow .port:hover,
html[data-color-theme="dark"] .process-overflow .port.pending {
    background: var(--cb-accent-primary) !important;
    box-shadow: 0 0 0 1px var(--cb-accent-primary), 0 0 0 5px rgba(99, 102, 241, 0.15) !important;
}

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

/* ==========================================
   CONTROLS / MINIMAP
   ========================================== */
html[data-color-theme="dark"] .process-overflow .controls {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: var(--cb-shadow-lg) !important;
}

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

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

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

html[data-color-theme="dark"] .process-overflow .minimap {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: var(--cb-shadow-lg) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .mininode {
    background: var(--cb-border-input) !important;
}

html[data-color-theme="dark"] .process-overflow .mininode.selected {
    background: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .miniview {
    border-color: var(--cb-accent-primary) !important;
    background: rgba(99, 102, 241, 0.05) !important;
}

/* ==========================================
   MODALS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-modal {
    background: var(--cb-bg-card) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-modalhead {
    border-bottom-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-modalicon {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-modaltitle h2 {
    color: var(--cb-text-primary) !important;
}

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

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

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

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

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

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

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

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

html[data-color-theme="dark"] .process-overflow .pflow-runsummary .metric {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

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

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

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

html[data-color-theme="dark"] .process-overflow .runstep {
    border-bottom-color: var(--cb-border-color) !important;
}

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

html[data-color-theme="dark"] .process-overflow .runstep.running .runbullet {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

html[data-color-theme="dark"] .process-overflow .runstep.success .runbullet {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

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

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

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

html[data-color-theme="dark"] .process-overflow .runstep.running .runstatus {
    color: #818cf8 !important;
}

html[data-color-theme="dark"] .process-overflow .runstep.success .runstatus {
    color: #34d399 !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-variable-form .field input,
html[data-color-theme="dark"] .process-overflow .pflow-variable-form .field select,
html[data-color-theme="dark"] .process-overflow .pflow-variable-form .field textarea {
    background: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

/* ==========================================
   TOAST
   ========================================== */
html[data-color-theme="dark"] .process-overflow .toast {
    background: var(--cb-bg-card) !important;
    color: var(--cb-text-primary) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .toasticon {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

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

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

/* ==========================================
   NODE MENU (Floating)
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-node-menu {
    background: var(--cb-bg-dropdown) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-node-menu button {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-node-menu button:hover {
    background: var(--cb-bg-hover) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-node-menu button.danger {
    color: #ef4444 !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-node-menu button.danger:hover {
    background: rgba(239, 68, 68, 0.15) !important;
}

/* ==========================================
   PAGE CONTENT (History, Variables, etc.)
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-page-content {
    background: var(--cb-bg-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-page-heading h2 {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-page-heading p {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-page-detail {
    background: var(--cb-bg-card) !important;
    border-left-color: var(--cb-border-color) !important;
}

/* KPI CARDS */
html[data-color-theme="dark"] .process-overflow .kpi-card {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: 0 3px 11px rgba(0, 0, 0, 0.3) !important;
}

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

html[data-color-theme="dark"] .process-overflow .kpi-label svg {
    color: var(--cb-accent-primary) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .positive {
    color: #34d399 !important;
}

/* FEATURE KPI */
html[data-color-theme="dark"] .process-overflow .feature-kpi {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: 0 3px 11px rgba(0, 0, 0, 0.3) !important;
}

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

html[data-color-theme="dark"] .process-overflow .feature-kpi-top svg {
    color: var(--cb-accent-primary) !important;
}

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

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

/* TABLE CARDS */
html[data-color-theme="dark"] .process-overflow .pflow-table-card {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

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

html[data-color-theme="dark"] .process-overflow .pflow-table-toolbar h3 {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-compact-search input {
    background: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-compact-search svg {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-tinyselect {
    background: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-data-table th {
    background: var(--cb-bg-secondary) !important;
    color: var(--cb-text-muted) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

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

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

/* STATUS PILLS */
html[data-color-theme="dark"] .process-overflow .pflow-statuspill.success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-statuspill.running {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-statuspill.failed {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-statuspill.review {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

/* ENV BADGE */
html[data-color-theme="dark"] .process-overflow .envbadge {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

/* SECTION CARDS */
html[data-color-theme="dark"] .process-overflow .pflow-section-card {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-section-card-head {
    border-bottom-color: var(--cb-border-color) !important;
}

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

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

/* LIBRARY ROWS */
html[data-color-theme="dark"] .process-overflow .library-row {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .library-row:hover,
html[data-color-theme="dark"] .process-overflow .library-row.selected {
    background: var(--cb-bg-hover) !important;
    border-color: var(--cb-accent-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .library-row-copy b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .library-row-copy span {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .library-row-meta b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .library-row-meta span {
    color: var(--cb-text-muted) !important;
}

/* DETAIL RULES */
html[data-color-theme="dark"] .process-overflow .pflow-detail-rule {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-detail-rule small {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-detail-rule b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-detail-rule span {
    color: var(--cb-text-muted) !important;
}

/* RULE CHIPS */
html[data-color-theme="dark"] .process-overflow .rule-chip {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

/* ==========================================
   TEMPLATE CARDS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-template-filter {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-template-filter.active {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #818cf8 !important;
}

html[data-color-theme="dark"] .process-overflow .template-card {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: 0 3px 11px rgba(0, 0, 0, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .template-visual {
    background: linear-gradient(135deg, #1e2130, #1a1d27) !important;
}

html[data-color-theme="dark"] .process-overflow .template-visual.purple {
    background: linear-gradient(135deg, #2d1b4e, #1a1d27) !important;
}

html[data-color-theme="dark"] .process-overflow .template-visual.green {
    background: linear-gradient(135deg, #1a3d2e, #1a1d27) !important;
}

html[data-color-theme="dark"] .process-overflow .template-visual.amber {
    background: linear-gradient(135deg, #3d2e1a, #1a1d27) !important;
}

html[data-color-theme="dark"] .process-overflow .mini-flow i {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .mini-flow em {
    background: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .mini-flow em::after {
    border-left-color: var(--cb-border-color) !important;
}

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

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

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

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

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

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

html[data-color-theme="dark"] .process-overflow .template-foot button {
    padding: 0px 10px !important;
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #818cf8 !important;
}

.process-overflow .template-foot button {
    padding: 0px 10px !important;
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #818cf8 !important;
}

/* ==========================================
   POLICY CARDS (Governance)
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-policy-card {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-policy-icon {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .pflow-policy-state {
    color: #34d399 !important;
}

/* ==========================================
   SECURITY MATRIX
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-security-role {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-security-role b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-security-role span {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-security-role strong {
    color: #818cf8 !important;
}

/* ==========================================
   ARCHITECTURE SECTION
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-arch-status-card {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: 0 3px 11px rgba(0, 0, 0, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-service-icon {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-status-copy b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-status-copy span {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-health {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

html[data-color-theme="dark"] .process-overflow .arch-diagram {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .arch-diagram-head h3 {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .arch-diagram-head p {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-legend span {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-node {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-node.pflow-primary {
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-node.worker {
    background: rgba(20, 184, 166, 0.08) !important;
    border-color: rgba(20, 184, 166, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-node.data {
    background: rgba(168, 85, 247, 0.08) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-node.trigger {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-node b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-node span {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .arch-arrow {
    background: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .arch-arrow::after {
    border-left-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-subsystem {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-subsystem b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-arch-subsystem span {
    color: var(--cb-text-muted) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .arch-card-head svg {
    color: var(--cb-accent-primary) !important;
}

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

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

/* MAPPING TABLE */
html[data-color-theme="dark"] .process-overflow .mapping-table th {
    background: var(--cb-bg-secondary) !important;
    color: var(--cb-text-muted) !important;
    border-bottom-color: var(--cb-border-color) !important;
}

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

html[data-color-theme="dark"] .process-overflow .mapping-table code {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

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

html[data-color-theme="dark"] .process-overflow .mapping-mode {
    background: var(--cb-bg-hover) !important;
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .mapping-mode.map {
    background: rgba(168, 85, 247, 0.15) !important;
    color: #c084fc !important;
}

html[data-color-theme="dark"] .process-overflow .mapping-mode.callback {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

/* API CONNECT */
html[data-color-theme="dark"] .process-overflow .api-connect input {
    background: var(--cb-bg-input) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .api-mode-row {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .api-mode-copy b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .api-mode-copy span {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .api-state {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

html[data-color-theme="dark"] .process-overflow .api-state.connected {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

html[data-color-theme="dark"] .process-overflow .endpoint span {
    background: var(--cb-bg-hover) !important;
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .endpoint span.post {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

html[data-color-theme="dark"] .process-overflow .endpoint span.put {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

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

/* MySQL MODEL */
html[data-color-theme="dark"] .process-overflow .mysql-table {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .mysql-table b {
    color: var(--cb-text-primary) !important;
}

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

/* DELIVERY LIST */
html[data-color-theme="dark"] .process-overflow .pflow-delivery-number {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-delivery-copy b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-delivery-copy span {
    color: var(--cb-text-muted) !important;
}

/* API WORKFLOW ROW */
html[data-color-theme="dark"] .process-overflow .api-workflow-row {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .api-workflow-row span {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .api-workflow-row code {
    color: var(--cb-text-primary) !important;
}

/* ==========================================
   CHANNELS (Notifications)
   ========================================== */
html[data-color-theme="dark"] .process-overflow .channel-card {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .channel-icon {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

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

html[data-color-theme="dark"] .process-overflow .channel-top span {
    color: #34d399 !important;
}

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

html[data-color-theme="dark"] .process-overflow .pflow-channel-actions button {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-channel-actions button:hover {
    color: var(--cb-accent-primary) !important;
    border-color: var(--cb-accent-primary) !important;
}

/* ==========================================
   CONNECTIONS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .connector-summary {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .connector-logo {
    background: linear-gradient(145deg, #1e2130, #1a1d27) !important;
    color: #818cf8 !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .connector-health {
    color: #34d399 !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .connection-card-top span {
    color: #34d399 !important;
}

html[data-color-theme="dark"] .process-overflow .connection-detail {
    background: var(--cb-bg-secondary) !important;
}

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

html[data-color-theme="dark"] .process-overflow .connection-detail b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .connection-card-actions button {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-text-muted) !important;
}

/* ==========================================
   AUDIT
   ========================================== */
html[data-color-theme="dark"] .process-overflow .audit-card {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

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

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

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

html[data-color-theme="dark"] .process-overflow .artifact-icon {
    background: rgba(168, 85, 247, 0.15) !important;
    color: #c084fc !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .inline-action {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
    color: var(--cb-accent-primary) !important;
}

/* ==========================================
   SETTINGS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-settings-menu {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-settings-menu button {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-settings-menu button.active {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-settings-panel {
    background: var(--cb-bg-card) !important;
    border-color: var(--cb-border-color) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .settings-section > p {
    color: var(--cb-text-muted) !important;
}

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

html[data-color-theme="dark"] .process-overflow .setting-copy b {
    color: var(--cb-text-primary) !important;
}

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

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

html[data-color-theme="dark"] .process-overflow .setting-switch {
    background: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .setting-switch i {
    background: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .setting-switch.on {
    background: var(--cb-accent-primary) !important;
}

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

html[data-color-theme="dark"] .process-overflow .schedule-icon {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

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

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

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

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

html[data-color-theme="dark"] .process-overflow .schedule-line strong {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .toggle-mini {
    background: var(--cb-border-color) !important;
}

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

html[data-color-theme="dark"] .process-overflow .toggle-mini.on {
    background: var(--cb-accent-primary) !important;
}

/* ==========================================
   UPCOMING
   ========================================== */
html[data-color-theme="dark"] .process-overflow .upcoming-time {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .upcoming-track::after {
    background: var(--cb-border-color) !important;
}

html[data-color-theme="dark"] .process-overflow .upcoming-copy b {
    color: var(--cb-text-primary) !important;
}

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

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

/* ==========================================
   TIMELINE
   ========================================== */
html[data-color-theme="dark"] .process-overflow .pflow-timeline-copy b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-timeline-copy span {
    color: var(--cb-text-muted) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-timeline-dot::after {
    background: var(--cb-border-color) !important;
}

/* ==========================================
   DETAIL SECTIONS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .detail-head {
    border-bottom-color: var(--cb-border-color) !important;
}

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

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

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

html[data-color-theme="dark"] .process-overflow .detail-stat {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

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

html[data-color-theme="dark"] .process-overflow .detail-stat b {
    color: var(--cb-text-primary) !important;
}

html[data-color-theme="dark"] .process-overflow .pflow-detail-foot {
    border-top-color: var(--cb-border-color) !important;
}

/* ==========================================
   KEBAB / MISC ICON BUTTONS
   ========================================== */
html[data-color-theme="dark"] .process-overflow .kebab {
    color: var(--cb-text-muted) !important;
}

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

/* ==========================================
   EMPTY STATE
   ========================================== */
html[data-color-theme="dark"] .process-overflow .empty {
    color: var(--cb-text-muted) !important;
}

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

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

/* ==========================================
   BACKEND MAPPING - DARK THEME
   ========================================== */

/* Panel body - Color only */
html[data-color-theme="dark"] .process-overflow .backend-map-panel .panelbody {
    background: var(--cb-bg-card) !important;
}

/* Backend map grid - Color only */
html[data-color-theme="dark"] .process-overflow .backend-map-grid {
    background: transparent !important;
}

/* Grid items - Color only */
html[data-color-theme="dark"] .process-overflow .backend-map-grid > div {
    background: var(--cb-bg-secondary) !important;
    border-color: var(--cb-border-color) !important;
}

/* Labels (Workflow node, Action type, etc.) - Color only */
html[data-color-theme="dark"] .process-overflow .backend-map-grid span {
    color: var(--cb-text-muted) !important;
}

/* Code values (step_mub5medn7rrd, compare_workbooks) - Color only */
html[data-color-theme="dark"] .process-overflow .backend-map-grid code {
    background: var(--cb-bg-input) !important;
    border: 1px solid var(--cb-border-color) !important;
    color: var(--cb-text-primary) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
    font-size: 8.5px !important;
}

/* Bold values (Task + Retry, Action Adapter) - Color only */
html[data-color-theme="dark"] .process-overflow .backend-map-grid b {
    color: var(--cb-text-primary) !important;
}

/* Note box - Color only */
html[data-color-theme="dark"] .process-overflow .backend-map-note {
    background: rgba(99, 102, 241, 0.1) !important;
    border-left-color: var(--cb-accent-primary) !important;
    color: var(--cb-text-muted) !important;
    border-radius: 0 8px 8px 0 !important;
}

/* ============================================================
   PFLOW CONFIRM DIALOG — Dark Mode
   Dark theme, but keeps each variant's accent color
   ============================================================ */

/* ---------- Overlay ---------- */
html[data-color-theme="dark"] .pflow-confirm-overlay {
  background: rgba(0, 0, 0, 0.70) !important;
}

/* ---------- Card ---------- */
html[data-color-theme="dark"] .pflow-confirm-card {
  background: #15171E !important;
  color: #F1F5F9 !important;
  border: 1px solid #2A2D3A !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

/* ---------- Icon — info (blue) ---------- */
html[data-color-theme="dark"] .pflow-confirm-icon {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3B82F6 !important;
  border: 1px solid rgba(59, 130, 246, 0.30) !important;
}

/* ---------- Icon — danger (red) ---------- */
html[data-color-theme="dark"] .pflow-confirm-icon.danger {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.30) !important;
}

/* ---------- Text ---------- */
html[data-color-theme="dark"] .pflow-confirm-card h3 {
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] .pflow-confirm-card p {
  color: #B8C0CC !important;
}

/* ---------- Cancel button (neutral dark) ---------- */
html[data-color-theme="dark"] .pflow-confirm-actions .pflow-btn {
  background: #1A1D27 !important;
  color: #F1F5F9 !important;
  border: 1px solid #2A2D3A !important;
}

html[data-color-theme="dark"] .pflow-confirm-actions .pflow-btn:hover {
  background: #22252F !important;
  border-color: #3A3D4A !important;
  color: #FFFFFF !important;
}

/* ---------- Primary — Reset (BLUE, kept) ---------- */
html[data-color-theme="dark"] .pflow-confirm-actions .pflow-btn.pflow-primary:not(.danger) {
  background: #2563EB !important;
  color: #FFFFFF !important;
  border: 1px solid #2563EB !important;
}

html[data-color-theme="dark"] .pflow-confirm-actions .pflow-btn.pflow-primary:not(.danger):hover {
  background: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
}

/* ---------- Primary — Delete (RED, kept) ---------- */
html[data-color-theme="dark"] .pflow-confirm-actions .pflow-btn.pflow-primary.danger {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  border: 1px solid #DC2626 !important;
}

html[data-color-theme="dark"] .pflow-confirm-actions .pflow-btn.pflow-primary.danger:hover {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
}

/* ============================================================
   PFLOW TEMPLATE PREVIEW — Dark Mode (complete)
   ============================================================ */

/* ---------- Overlay ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-overlay {
  background: rgba(0, 0, 0, 0.70) !important;
}

/* ---------- Card ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-card {
  background: #15171E !important;
  color: #F1F5F9 !important;
  border: 1px solid #2A2D3A !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

/* ---------- Head ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-head {
  border-bottom-color: #2A2D3A !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-head h3 {
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-head p {
  color: #B8C0CC !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-close {
  color: #8A94A6 !important;
  background: transparent !important;
  border: 0 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-close:hover {
  color: #F1F5F9 !important;
}

/* ---------- Body ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-body,
html[data-color-theme="dark"] .pflow-tplpreview-body .stepcanvas {
  background: #15171E !important;
  color: #F1F5F9 !important;
}

/* ---------- Section titles ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-body .sectiontitle {
  color: #8A94A6 !important;
}
html[data-color-theme="dark"] .pflow-tplpreview-body .sectiontitle:after {
  background: linear-gradient(90deg, #373a3e, transparent) !important;
}

/* ---------- Trigger + step cards ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-body .trigger,
html[data-color-theme="dark"] .pflow-tplpreview-body .stepcard {
  background: #1A1D27 !important;
  border: 1px solid #2A2D3A !important;
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .trigger:hover,
html[data-color-theme="dark"] .pflow-tplpreview-body .stepcard:hover {
  border-color: #3A3D4A !important;
}

/* ---------- Card copy ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-body .kicker,
html[data-color-theme="dark"] .pflow-tplpreview-body .steptype {
  color: #8A94A6 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .cardtitle,
html[data-color-theme="dark"] .pflow-tplpreview-body .steptitle {
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .cardsub {
  color: #B8C0CC !important;
}


/* ---------- Action icons ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-body .actionicon {
  background: #22252F !important;
  color: #B8C0CC !important;
  border: 1px solid #2A2D3A !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .actionicon svg,
html[data-color-theme="dark"] .pflow-tplpreview-body .actionicon svg * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Tone — trigger (indigo) */
html[data-color-theme="dark"] .pflow-tplpreview-body .actionicon.tone-trigger {
  background: rgba(124, 139, 240, 0.15) !important;
  color: #A5B4FC !important;
  border-color: rgba(124, 139, 240, 0.30) !important;
}

/* Tone — workbook (teal) */
html[data-color-theme="dark"] .pflow-tplpreview-body .actionicon.tone-workbook {
  background: rgba(20, 184, 166, 0.15) !important;
  color: #5EEAD4 !important;
  border-color: rgba(20, 184, 166, 0.30) !important;
}

/* Tone — compare (purple) */
html[data-color-theme="dark"] .pflow-tplpreview-body .actionicon.tone-compare {
  background: rgba(167, 139, 250, 0.15) !important;
  color: #C4B5FD !important;
  border-color: rgba(167, 139, 250, 0.30) !important;
}

/* Tone — decision (amber) */
html[data-color-theme="dark"] .pflow-tplpreview-body .actionicon.tone-decision {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #FCD34D !important;
  border-color: rgba(251, 191, 36, 0.30) !important;
}

/* Tone — deploy (indigo/sky) */
html[data-color-theme="dark"] .pflow-tplpreview-body .actionicon.tone-deploy {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #93C5FD !important;
  border-color: rgba(96, 165, 250, 0.30) !important;
}

/* Tone — validate (green) */
html[data-color-theme="dark"] .pflow-tplpreview-body .actionicon.tone-validate {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #6EE7B7 !important;
  border-color: rgba(52, 211, 153, 0.30) !important;
}

/* Tone — notify (red) */
html[data-color-theme="dark"] .pflow-tplpreview-body .actionicon.tone-notify {
  background: rgba(248, 113, 113, 0.15) !important;
  color: #FCA5A5 !important;
  border-color: rgba(248, 113, 113, 0.30) !important;
}

/* ---------- Number rail ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-body .numberrail .num {
  background: #22252F !important;
  color: #F1F5F9 !important;
  border: 1px solid #3A3D4A !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .numberrail .numline {
  background: #2A2D3A !important;
}

/* ---------- Connectors ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-body .connector {
  background: #2A2D3A !important;
}

/* ---------- Condition block ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-body .condition {
  background: #1A1D27 !important;
  border: 1px solid #2A2D3A !important;
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .condition .steptitle {
  color: #F1F5F9 !important;
}

/* Condition summary pills (Checking: Compare workbooks) */
html[data-color-theme="dark"] .pflow-tplpreview-body .condition-summary .summarypill {
  background: #22252F !important;
  color: #B8C0CC !important;
  border: 1px solid #2A2D3A !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .condition-summary .summarypill svg {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ---------- Branch wrap ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-body .branchstem,
html[data-color-theme="dark"] .pflow-tplpreview-body .branchbar {
  background: #2A2D3A !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .brancharrow {
  background: #2A2D3A !important;
}

/* Branch columns */
html[data-color-theme="dark"] .pflow-tplpreview-body .branchcol {
  background: #1A1D27 !important;
  border: 1px solid #2A2D3A !important;
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .branchname {
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .branchname i {
  background: #34D399 !important;
}

/* "No matching rows" branch dot — neutral grey */
html[data-color-theme="dark"] .pflow-tplpreview-body .branchcol.no .branchname i {
  background: #6B7280 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .branchhead .rule {
  background: #22252F !important;
  color: #B8C0CC !important;
  border: 1px solid #2A2D3A !important;
}

/* Branch steps */
html[data-color-theme="dark"] .pflow-tplpreview-body .branchstep {
  background: #15171E !important;
  border: 1px solid #2A2D3A !important;
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .branchstep .steptitle {
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .branchstep .cardsub {
  color: #B8C0CC !important;
}

/* Inline note ("Ends the playbook.") */
html[data-color-theme="dark"] .pflow-tplpreview-body .inline-note {
  background: #22252F !important;
  color: #B8C0CC !important;
  border: 1px solid #2A2D3A !important;
}

/* ---------- Flow end ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-body .flowend {
  color: #8A94A6 !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .flowend .enddot {
  background: #1A1D27 !important;
  color: #8A94A6 !important;
  border: 1px solid #2A2D3A !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-body .flowend .enddot svg,
html[data-color-theme="dark"] .pflow-tplpreview-body .flowend .enddot svg * {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ---------- Foot ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-foot {
  background: #15171E !important;
  border-top-color: #2A2D3A !important;
}

/* ---------- Buttons ---------- */
html[data-color-theme="dark"] .pflow-tplpreview-foot .pflow-btn {
  background: #1A1D27 !important;
  color: #F1F5F9 !important;
  border: 1px solid #2A2D3A !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-foot .pflow-btn:hover {
  background: #22252F !important;
  border-color: #3A3D4A !important;
  color: #FFFFFF !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-foot .pflow-btn.pflow-primary {
    background: var(--cb-accent-primary) !important;
    border-color: var(--cb-accent-primary) !important;
    color: #ffffff !important;
}

html[data-color-theme="dark"] .pflow-tplpreview-foot .pflow-btn.pflow-primary:hover {
  background: var(--cb-accent-hover) !important;
  border-color: var(--cb-accent-hover) !important;
}
/* ============================================================
   AUTOMATION MODAL
   ============================================================ */

html[data-color-theme="dark"] .on_off_modal_form .modal-content {
  background: var(--cb-bg-card, #15171E) !important;
  border: 1px solid var(--cb-border-color, rgba(255,255,255,0.10)) !important;
  color: var(--cb-text-primary, #F1F5F9) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

html[data-color-theme="dark"] .on_off_modal_form .card {
  background: var(--cb-bg-card, #15171E) !important;
  border: 1px solid var(--cb-border-color, #2A2D3A) !important;
  color: var(--cb-text-primary, #F1F5F9) !important;
}

html[data-color-theme="dark"] .on_off_modal_form .card-header,
html[data-color-theme="dark"] .on_off_modal_form .card-header.bg-light,
html[data-color-theme="dark"] .on_off_modal_form .card-header.bg-light.fw-semibold {
  background: #20242f !important;
  border-bottom: 1px solid var(--cb-border-color, #2A2D3A) !important;
  color: var(--cb-text-primary, #F1F5F9) !important;
}

/* ============================================================
   DATE RANGE PICKER — Dark Mode (Complete)
   ============================================================ */

/* ---------- Container ---------- */
html[data-color-theme="dark"] .daterangepicker {
  background-color: #15171E !important;
  border-color: #2A2D3A !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  color: #F1F5F9 !important;
}

/* ---------- Wrappers (fixes the white gaps) ---------- */
html[data-color-theme="dark"] .daterangepicker .calendar,
html[data-color-theme="dark"] .daterangepicker .calendar-table,
html[data-color-theme="dark"] .daterangepicker .calendar-time,
html[data-color-theme="dark"] .daterangepicker .calendar-table table {
  background-color: #1A1D27 !important;
  border-color: #2A2D3A !important;
}

/* ---------- Calendar Table rows ---------- */
html[data-color-theme="dark"] .daterangepicker .calendar-table thead,
html[data-color-theme="dark"] .daterangepicker .calendar-table tbody,
html[data-color-theme="dark"] .daterangepicker .calendar-table tr {
  background-color: transparent !important;
  border: none !important;
}

/* ---------- Header (Month/Year, arrows, day names) ---------- */
html[data-color-theme="dark"] .daterangepicker .calendar-table th {
  background-color: transparent !important;
  color: #F1F5F9 !important;
  border: none !important;
}

/* ---------- Days ---------- */
html[data-color-theme="dark"] .daterangepicker .calendar-table td {
  background-color: transparent !important;
  color: #B8C0CC !important;
  border: none !important;
}

/* Disabled/Off days */
html[data-color-theme="dark"] .daterangepicker .calendar-table td.off {
  color: #5A6274 !important;
}

/* Hover */
html[data-color-theme="dark"] .daterangepicker td.available:hover {
  background-color: #22252F !important;
  color: #F1F5F9 !important;
}

/* In-range */
html[data-color-theme="dark"] .daterangepicker td.in-range {
  background-color: rgba(124, 139, 240, 0.15) !important;
  color: #F1F5F9 !important;
}

/* Active (Start / End dates) */
html[data-color-theme="dark"] .daterangepicker td.active,
html[data-color-theme="dark"] .daterangepicker td.active:hover {
  background-color: #0d6efd !important;
  color: #FFFFFF !important;
}

/* ---------- Time Selects ---------- */
html[data-color-theme="dark"] .daterangepicker .calendar-time {
  border-top-color: #2A2D3A !important;
}

html[data-color-theme="dark"] .daterangepicker .calendar-time select {
  background-color: #22252F !important;
  color: #F1F5F9 !important;
  border-color: #3A3D4A !important;
}

html[data-color-theme="dark"] .daterangepicker .calendar-time select option {
  background-color: #22252F !important;
  color: #F1F5F9 !important;
}

/* ---------- Footer / Ranges ---------- */
html[data-color-theme="dark"] .daterangepicker .ranges {
  border-top-color: #2A2D3A !important;
}

/* Labels */
html[data-color-theme="dark"] .daterangepicker .daterangepicker-inputs span {
  color: #8A94A6 !important;
}

/* Inputs */
html[data-color-theme="dark"] .daterangepicker .daterangepicker-inputs input {
  background-color: #22252F !important;
  color: #F1F5F9 !important;
  border-color: #3A3D4A !important;
}

html[data-color-theme="dark"] .daterangepicker .daterangepicker-inputs input:focus {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

/* ---------- Buttons ---------- */
html[data-color-theme="dark"] .daterangepicker .range_inputs .btn {
  border-color: #3A3D4A !important;
}

/* Cancel button */
html[data-color-theme="dark"] .daterangepicker .cancelBtn {
  background-color: #1A1D27 !important;
  color: #F1F5F9 !important;
}

html[data-color-theme="dark"] .daterangepicker .cancelBtn:hover {
  background-color: #22252F !important;
}

/* Apply button */
html[data-color-theme="dark"] .daterangepicker .applyBtn,
html[data-color-theme="dark"] .daterangepicker .applyBtn:focus {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #FFFFFF !important;
}

html[data-color-theme="dark"] .daterangepicker .applyBtn:hover,
html[data-color-theme="dark"] .daterangepicker .applyBtn:active {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
}