/* ==========================================================================
   SHUNTING GLOBAL THEME SYSTEM — Premium Dark Themes
   ==========================================================================
   Apply on ANY page. Persisted via localStorage. 
   6 options: Default (white) + 5 dark glass themes.
   EVERY element is themed: nav, header, cards, tables, forms, buttons,
   badges, modals, dropdowns, tabs, alerts, tooltips, scrollbars, etc.
   
   Apply:  document.body.className = 'theme-neon';
   Reset:  document.body.className = '';
   ========================================================================== */


/* ==========================================================================
   SHARED DARK FOUNDATIONS (applies to ALL theme-* classes)
   ========================================================================== */

/* Animated mesh background — floating orbs */
body[class*="theme-"]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.4;
    pointer-events: none;
}

/* Glass cards */
body[class*="theme-"] .card {
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
body[class*="theme-"] .card:hover { transform: translateY(-2px); }
body[class*="theme-"] .card { position: relative; overflow: hidden; }

/* Gradient border glow on card hover */
body[class*="theme-"] .card::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: inherit; padding: 1px;
    opacity: 0; transition: opacity 0.4s ease;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    z-index: 1;
}
body[class*="theme-"] .card:hover::before { opacity: 1; }

/* Inner shimmer on hover */
body[class*="theme-"] .card::after {
    content: '';
    position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.5s ease;
    pointer-events: none; z-index: 0;
}
body[class*="theme-"] .card:hover::after { opacity: 1; }
body[class*="theme-"] .card > * { position: relative; z-index: 2; }

/* Navigation glass */
body[class*="theme-"] .nxl-navigation {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Header glass */
body[class*="theme-"] .nxl-header {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Progress bars glow */
body[class*="theme-"] .progress-bar { box-shadow: 0 0 8px currentColor; }

/* Activity items spring hover */
body[class*="theme-"] .activity-clickable {
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
body[class*="theme-"] .activity-clickable:hover {
    transform: translateY(-3px) scale(1.01) !important;
}

/* Avatar glow */
body[class*="theme-"] .avatar-text { transition: box-shadow 0.3s ease, transform 0.3s ease; }
body[class*="theme-"] .avatar-text:hover { transform: scale(1.08); }

/* Thin scrollbar */
body[class*="theme-"] ::-webkit-scrollbar { width: 5px; height: 5px; }
body[class*="theme-"] ::-webkit-scrollbar-track { background: transparent; }
body[class*="theme-"] ::-webkit-scrollbar-thumb { border-radius: 10px; }

/* Theme customizer sidebar stays white */
body[class*="theme-"] .theme-customizer .customizer-sidebar-wrapper { background: #fff !important; }
body[class*="theme-"] .theme-customizer .customizer-sidebar-wrapper * { color: initial; }
body[class*="theme-"] .theme-customizer .customizer-sidebar-header { background: #fff !important; }

/* Override light-theme UI upgrade for dark themes */
body[class*="theme-"] .card { border-top: none !important; }
body[class*="theme-"] .card-footer { background: initial !important; }
body[class*="theme-"] .modal-header, body[class*="theme-"] .modal-footer { background: initial !important; }
body[class*="theme-"] .table thead tr { background: initial !important; }
body[class*="theme-"] .nxl-container .nxl-content { background: initial !important; }
body[class*="theme-"] .reportrange-picker { background: initial !important; border-color: initial !important; color: initial !important; }
body[class*="theme-"] .card-header-tint-primary, body[class*="theme-"] .card-header-tint-success,
body[class*="theme-"] .card-header-tint-warning, body[class*="theme-"] .card-header-tint-danger,
body[class*="theme-"] .card-header-tint-info, body[class*="theme-"] .card-header-tint-teal,
body[class*="theme-"] .card-header-tint-purple { background: transparent !important; border-bottom-color: inherit !important; }
body[class*="theme-"] .card-header-tint-primary h5, body[class*="theme-"] .card-header-tint-success h5,
body[class*="theme-"] .card-header-tint-warning h5, body[class*="theme-"] .card-header-tint-danger h5,
body[class*="theme-"] .card-header-tint-info h5, body[class*="theme-"] .card-header-tint-teal h5,
body[class*="theme-"] .card-header-tint-purple h5 { color: inherit !important; }



/* ==========================================================================
   THEME MACRO: Each theme defines CSS custom properties, then shared rules
   use them. This makes adding new themes trivial.
   ========================================================================== */


/* ========================================================================== */
/* THEME 1 — NEON COSMOS                                                      */
/* Electric indigo + magenta on deep-space black                              */
/* ========================================================================== */
body.theme-neon {
    --t-bg:       #04060e;
    --t-surface:  rgba(10,15,30,0.7);
    --t-surface2: rgba(15,20,40,0.5);
    --t-surface3: rgba(15,20,40,0.4);
    --t-nav:      rgba(4,6,14,0.92);
    --t-header:   rgba(4,6,14,0.88);
    --t-accent:   99,102,241;     /* indigo RGB */
    --t-accent2:  168,85,247;     /* purple RGB */
    --t-accent3:  236,72,153;     /* pink RGB */
    --t-text:     #c7d2fe;
    --t-text-bright: #e0e7ff;
    --t-text-muted:  #4b5280;
    --t-text-link:   #818cf8;
    --t-text-heading: #a5b4fc;
    --t-nav-text:    rgba(165,180,220,0.7);
    --t-nav-hover:   #818cf8;
    --t-border:   rgba(99,102,241,0.12);
    --t-border-h: rgba(129,140,248,0.3);
    --t-glow:     rgba(99,102,241,0.08);
    --t-footer:   #3b3f6b;
    background: var(--t-bg);
}
body.theme-neon::before {
    background:
        radial-gradient(ellipse 600px 600px at 15% 20%, rgba(59,130,246,0.15), transparent),
        radial-gradient(ellipse 500px 500px at 85% 75%, rgba(168,85,247,0.12), transparent),
        radial-gradient(ellipse 400px 400px at 50% 50%, rgba(236,72,153,0.08), transparent);
    animation: neonOrbs 20s ease-in-out infinite alternate;
}
@keyframes neonOrbs {
    0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
    50%  { background-position: 30% 70%, 70% 30%, 20% 80%; }
    100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
}
body.theme-neon .nxl-container .nxl-content { background: linear-gradient(170deg, #04060e, #0a0f1e 40%, #0d0a18 70%, #060810) !important; }
body.theme-neon .card::before { background: linear-gradient(135deg, rgba(var(--t-accent),0.4), rgba(var(--t-accent2),0.3), rgba(var(--t-accent3),0.2)); }


/* ========================================================================== */
/* THEME 2 — AURORA GLASS                                                     */
/* Northern lights: teal + emerald + cyan on obsidian                         */
/* ========================================================================== */
body.theme-aurora {
    --t-bg:       #020a0a;
    --t-surface:  rgba(4,18,16,0.65);
    --t-surface2: rgba(6,24,20,0.4);
    --t-surface3: rgba(6,24,20,0.4);
    --t-nav:      rgba(2,10,10,0.93);
    --t-header:   rgba(2,10,10,0.88);
    --t-accent:   16,185,129;
    --t-accent2:  6,182,212;
    --t-accent3:  52,211,153;
    --t-text:     #a7f3d0;
    --t-text-bright: #d1fae5;
    --t-text-muted:  #2d6b55;
    --t-text-link:   #34d399;
    --t-text-heading: #6ee7b7;
    --t-nav-text:    rgba(150,210,190,0.7);
    --t-nav-hover:   #34d399;
    --t-border:   rgba(16,185,129,0.12);
    --t-border-h: rgba(52,211,153,0.25);
    --t-glow:     rgba(16,185,129,0.06);
    --t-footer:   #1e5a47;
    background: var(--t-bg);
}
body.theme-aurora::before {
    background:
        radial-gradient(ellipse 800px 400px at 20% 10%, rgba(16,185,129,0.14), transparent),
        radial-gradient(ellipse 600px 600px at 80% 80%, rgba(6,182,212,0.1), transparent),
        radial-gradient(ellipse 500px 300px at 55% 40%, rgba(52,211,153,0.08), transparent);
    animation: auroraWave 25s ease-in-out infinite alternate;
}
@keyframes auroraWave {
    0%   { opacity: 0.3; transform: scale(1) rotate(0deg); }
    50%  { opacity: 0.5; transform: scale(1.05) rotate(1deg); }
    100% { opacity: 0.3; transform: scale(1) rotate(0deg); }
}
body.theme-aurora .nxl-container .nxl-content { background: linear-gradient(160deg, #020a0a, #041612 35%, #030e10 65%, #020808) !important; }
body.theme-aurora .card::before { background: linear-gradient(135deg, rgba(var(--t-accent),0.35), rgba(var(--t-accent2),0.25), rgba(var(--t-accent3),0.2)); }


/* ========================================================================== */
/* THEME 3 — MOLTEN EMBER                                                     */
/* Volcanic: fiery orange + amber + rose on charcoal                          */
/* ========================================================================== */
body.theme-ember {
    --t-bg:       #0a0504;
    --t-surface:  rgba(18,10,8,0.7);
    --t-surface2: rgba(22,12,10,0.4);
    --t-surface3: rgba(22,12,10,0.4);
    --t-nav:      rgba(10,5,4,0.93);
    --t-header:   rgba(10,5,4,0.88);
    --t-accent:   251,146,60;
    --t-accent2:  239,68,68;
    --t-accent3:  245,158,11;
    --t-text:     #fdba74;
    --t-text-bright: #fed7aa;
    --t-text-muted:  #6b4a30;
    --t-text-link:   #fb923c;
    --t-text-heading: #fb923c;
    --t-nav-text:    rgba(220,180,150,0.7);
    --t-nav-hover:   #fb923c;
    --t-border:   rgba(251,146,60,0.12);
    --t-border-h: rgba(251,146,60,0.28);
    --t-glow:     rgba(251,146,60,0.06);
    --t-footer:   #5a3d25;
    background: var(--t-bg);
}
body.theme-ember::before {
    background:
        radial-gradient(ellipse 700px 500px at 25% 85%, rgba(239,68,68,0.1), transparent),
        radial-gradient(ellipse 500px 500px at 75% 15%, rgba(251,146,60,0.12), transparent),
        radial-gradient(ellipse 400px 400px at 50% 50%, rgba(245,158,11,0.06), transparent);
    animation: emberGlow 18s ease-in-out infinite alternate;
}
@keyframes emberGlow { 0% { opacity: 0.35; } 50% { opacity: 0.55; } 100% { opacity: 0.35; } }
body.theme-ember .nxl-container .nxl-content { background: linear-gradient(160deg, #0a0504, #15090a 40%, #120806 70%, #0a0504) !important; }
body.theme-ember .card::before { background: linear-gradient(135deg, rgba(var(--t-accent2),0.3), rgba(var(--t-accent),0.35), rgba(var(--t-accent3),0.2)); }


/* ========================================================================== */
/* THEME 4 — VELVET LUXE                                                      */
/* Royal purple + rose-gold + champagne on velvet black                       */
/* ========================================================================== */
body.theme-velvet {
    --t-bg:       #08050e;
    --t-surface:  rgba(14,8,24,0.65);
    --t-surface2: rgba(18,10,32,0.4);
    --t-surface3: rgba(18,10,32,0.4);
    --t-nav:      rgba(8,5,14,0.93);
    --t-header:   rgba(8,5,14,0.88);
    --t-accent:   168,85,247;
    --t-accent2:  236,72,153;
    --t-accent3:  244,114,182;
    --t-text:     #d8b4fe;
    --t-text-bright: #f3e8ff;
    --t-text-muted:  #5e3d80;
    --t-text-link:   #c084fc;
    --t-text-heading: #c084fc;
    --t-nav-text:    rgba(195,170,230,0.7);
    --t-nav-hover:   #c084fc;
    --t-border:   rgba(168,85,247,0.12);
    --t-border-h: rgba(192,132,252,0.28);
    --t-glow:     rgba(168,85,247,0.06);
    --t-footer:   #4a2d6b;
    background: var(--t-bg);
}
body.theme-velvet::before {
    background:
        radial-gradient(ellipse 600px 600px at 20% 30%, rgba(168,85,247,0.12), transparent),
        radial-gradient(ellipse 500px 400px at 80% 70%, rgba(236,72,153,0.1), transparent),
        radial-gradient(ellipse 700px 300px at 50% 90%, rgba(217,119,194,0.06), transparent);
    animation: velvetShimmer 22s ease-in-out infinite alternate;
}
@keyframes velvetShimmer { 0% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.02); } 100% { opacity: 0.3; transform: scale(1); } }
body.theme-velvet .nxl-container .nxl-content { background: linear-gradient(160deg, #08050e, #120a1e 35%, #0e0816 65%, #08050e) !important; }
body.theme-velvet .card::before { background: linear-gradient(135deg, rgba(var(--t-accent),0.3), rgba(var(--t-accent2),0.25), rgba(var(--t-accent3),0.2)); }


/* ========================================================================== */
/* THEME 5 — STEEL FROST                                                      */
/* Cool silver on graphite. Industrial premium.                               */
/* ========================================================================== */
body.theme-frost {
    --t-bg:       #0a0c10;
    --t-surface:  rgba(16,18,24,0.7);
    --t-surface2: rgba(20,22,30,0.4);
    --t-surface3: rgba(20,22,30,0.4);
    --t-nav:      rgba(10,12,16,0.93);
    --t-header:   rgba(10,12,16,0.88);
    --t-accent:   148,163,184;
    --t-accent2:  100,116,139;
    --t-accent3:  203,213,225;
    --t-text:     #cbd5e1;
    --t-text-bright: #e2e8f0;
    --t-text-muted:  #475569;
    --t-text-link:   #94a3b8;
    --t-text-heading: #94a3b8;
    --t-nav-text:    rgba(170,180,200,0.7);
    --t-nav-hover:   #cbd5e1;
    --t-border:   rgba(148,163,184,0.1);
    --t-border-h: rgba(203,213,225,0.2);
    --t-glow:     rgba(148,163,184,0.04);
    --t-footer:   #334155;
    background: var(--t-bg);
}
body.theme-frost::before {
    background:
        radial-gradient(ellipse 700px 500px at 30% 20%, rgba(148,163,184,0.1), transparent),
        radial-gradient(ellipse 500px 500px at 70% 80%, rgba(100,116,139,0.08), transparent),
        radial-gradient(ellipse 600px 300px at 50% 50%, rgba(203,213,225,0.05), transparent);
    animation: frostBreath 20s ease-in-out infinite alternate;
}
@keyframes frostBreath { 0% { opacity: 0.4; } 50% { opacity: 0.55; } 100% { opacity: 0.4; } }
body.theme-frost .nxl-container .nxl-content { background: linear-gradient(160deg, #0a0c10, #111318 35%, #0d0f14 65%, #0a0c10) !important; }
body.theme-frost .card::before { background: linear-gradient(135deg, rgba(var(--t-accent3),0.2), rgba(var(--t-accent),0.15), rgba(var(--t-accent2),0.1)); }


/* ==========================================================================
   SHARED ELEMENT STYLES — Using CSS custom properties from each theme
   One set of rules covers ALL 5 themes.
   ========================================================================== */

/* ---- Navigation ---- */
body[class*="theme-"] .nxl-navigation {
    background: var(--t-nav) !important;
    border-right: 1px solid var(--t-border);
}
body[class*="theme-"] .nxl-navigation .m-header {
    border-bottom: 1px solid var(--t-border);
}
body[class*="theme-"] .nxl-navigation .m-header .b-brand .logo { filter: brightness(0) invert(1); }

/* Nav links — default state */
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-link,
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-mtext,
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-micon i,
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-arrow i { 
    color: var(--t-nav-text) !important; 
    transition: all 0.25s ease;
}

/* Nav links — hover (glow + color) */
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-link:hover,
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-link:hover .nxl-mtext,
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-link:hover .nxl-micon i,
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-link:hover .nxl-arrow i {
    color: var(--t-nav-hover) !important;
    text-shadow: 0 0 12px rgba(var(--t-accent), 0.35);
}

/* Nav links — active page */
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-item.active > .nxl-link,
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-item.active > .nxl-link .nxl-mtext,
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-item.active > .nxl-link .nxl-micon i {
    color: var(--t-nav-hover) !important;
    background: rgba(var(--t-accent), 0.08);
    border-radius: 10px;
}

/* Nav hover background effect */
body[class*="theme-"] .nxl-navigation .navbar-content .nxl-navbar .nxl-link:hover {
    background: rgba(var(--t-accent), 0.06) !important;
    border-radius: 10px;
}

/* Nav caption labels */
body[class*="theme-"] .nxl-caption label { color: rgba(var(--t-accent), 0.3) !important; }

/* Submenu */
body[class*="theme-"] .nxl-submenu { background: rgba(0,0,0,0.2); }
body[class*="theme-"] .nxl-submenu .nxl-link { color: rgba(255,255,255,0.5) !important; }
body[class*="theme-"] .nxl-submenu .nxl-link:hover { color: var(--t-nav-hover) !important; background: rgba(var(--t-accent), 0.06) !important; }


/* ---- Header ---- */
body[class*="theme-"] .nxl-header {
    background: var(--t-header) !important;
    border-bottom: 1px solid var(--t-border);
}
body[class*="theme-"] .nxl-header .header-wrapper * { color: var(--t-text); }
body[class*="theme-"] .nxl-header .nxl-head-link { color: var(--t-text) !important; transition: all 0.25s ease; }
body[class*="theme-"] .nxl-header .nxl-head-link:hover { color: var(--t-nav-hover) !important; text-shadow: 0 0 8px rgba(var(--t-accent), 0.3); }
body[class*="theme-"] .nxl-header .nxl-lavel-mega,
body[class*="theme-"] .nxl-header .page-header-title h5 { color: var(--t-text-heading) !important; }

/* Header search */
body[class*="theme-"] .nxl-header .header-search .form-control {
    background: rgba(var(--t-accent), 0.06) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text) !important;
}
body[class*="theme-"] .nxl-header .header-search .form-control::placeholder { color: var(--t-text-muted) !important; }

/* Header dropdowns */
body[class*="theme-"] .nxl-h-dropdown {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border) !important;
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}
body[class*="theme-"] .nxl-h-dropdown * { color: var(--t-text); }
body[class*="theme-"] .nxl-h-dropdown .dropdown-header { border-color: var(--t-border) !important; }
body[class*="theme-"] .nxl-h-dropdown .dropdown-divider { border-color: var(--t-border) !important; }


/* ---- Cards ---- */
body[class*="theme-"] .card {
    background: var(--t-surface);
    border: 1px solid var(--t-border);
    box-shadow: 0 4px 30px rgba(0,0,0,0.4), 0 0 40px var(--t-glow);
}
body[class*="theme-"] .card:hover {
    border-color: var(--t-border-h);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 60px var(--t-glow);
}
body[class*="theme-"] .card-header {
    background: var(--t-surface2);
    border-bottom: 1px solid var(--t-border);
}
body[class*="theme-"] .card-title, body[class*="theme-"] .card-header h5,
body[class*="theme-"] .card-header h6 { color: var(--t-text-bright) !important; }
body[class*="theme-"] .card-footer {
    background: rgba(var(--t-accent), 0.03) !important;
    border-top: 1px solid var(--t-border);
}
body[class*="theme-"] .card-footer a { color: var(--t-text-link) !important; }
body[class*="theme-"] .card-body { color: var(--t-text); }


/* ---- Text Hierarchy ---- */
body[class*="theme-"] .text-dark,
body[class*="theme-"] .fw-bold.text-dark,
body[class*="theme-"] .fw-semibold.text-dark,
body[class*="theme-"] h1, body[class*="theme-"] h2, body[class*="theme-"] h3,
body[class*="theme-"] h4, body[class*="theme-"] h5, body[class*="theme-"] h6,
body[class*="theme-"] .fs-4.fw-bold, body[class*="theme-"] .fw-semibold,
body[class*="theme-"] .fw-medium, body[class*="theme-"] .fw-bold { color: var(--t-text) !important; }
body[class*="theme-"] .text-muted { color: var(--t-text-muted) !important; }
body[class*="theme-"] .fs-12.text-dark { color: var(--t-text-heading) !important; }
body[class*="theme-"] a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.nxl-link) { color: var(--t-text-link); }

/* Page header */
body[class*="theme-"] .page-header { border-color: var(--t-border) !important; }
body[class*="theme-"] .page-header-title h5 { color: var(--t-text-heading) !important; }
body[class*="theme-"] .breadcrumb-item a { color: var(--t-text-link) !important; }
body[class*="theme-"] .breadcrumb-item { color: var(--t-text-muted) !important; }
body[class*="theme-"] .breadcrumb-item.active { color: var(--t-text-muted) !important; }


/* ---- Tables (full coverage) ---- */
body[class*="theme-"] .table { color: var(--t-text); }
body[class*="theme-"] .table thead tr { background: rgba(var(--t-accent), 0.06) !important; }
body[class*="theme-"] .table thead th { color: var(--t-text-heading) !important; border-color: var(--t-border) !important; }
body[class*="theme-"] .table tbody tr { border-color: var(--t-border) !important; }
body[class*="theme-"] .table tbody tr:hover { background: rgba(var(--t-accent), 0.06); }
body[class*="theme-"] .table tbody td { color: var(--t-text); border-color: var(--t-border) !important; }
body[class*="theme-"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(var(--t-accent), 0.03); }
body[class*="theme-"] .dataTables_info { color: var(--t-text-muted) !important; }
body[class*="theme-"] .dataTables_wrapper .dataTables_length label,
body[class*="theme-"] .dataTables_wrapper .dataTables_filter label { color: var(--t-text-muted) !important; }


/* ---- Forms (inputs, selects, textareas) ---- */
body[class*="theme-"] .form-control, body[class*="theme-"] .form-select,
body[class*="theme-"] textarea.form-control,
body[class*="theme-"] .dataTables_wrapper .dataTables_length select,
body[class*="theme-"] .dataTables_wrapper .dataTables_filter input {
    background: var(--t-surface2) !important;
    border-color: var(--t-border) !important;
    color: var(--t-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body[class*="theme-"] .form-control:focus, body[class*="theme-"] .form-select:focus,
body[class*="theme-"] textarea.form-control:focus {
    border-color: rgba(var(--t-accent), 0.4) !important;
    box-shadow: 0 0 0 3px rgba(var(--t-accent), 0.1) !important;
}
body[class*="theme-"] .form-control::placeholder { color: var(--t-text-muted) !important; }
body[class*="theme-"] .form-label, body[class*="theme-"] label:not(.nxl-caption label) { color: var(--t-text) !important; }
body[class*="theme-"] .form-check-label { color: var(--t-text) !important; }
body[class*="theme-"] .input-group-text { background: var(--t-surface3) !important; border-color: var(--t-border) !important; color: var(--t-text-muted) !important; }

/* Select2 */
body[class*="theme-"] .select2-container--default .select2-selection--single { background: var(--t-surface2) !important; border-color: var(--t-border) !important; }
body[class*="theme-"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--t-text) !important; }
body[class*="theme-"] .select2-dropdown { background: var(--t-surface) !important; border-color: var(--t-border) !important; }
body[class*="theme-"] .select2-results__option { color: var(--t-text) !important; }
body[class*="theme-"] .select2-results__option--highlighted { background: rgba(var(--t-accent), 0.15) !important; }


/* ---- Buttons ---- */
body[class*="theme-"] .btn-outline-light { border-color: var(--t-border) !important; color: var(--t-text) !important; }
body[class*="theme-"] .btn-outline-light:hover { background: rgba(var(--t-accent), 0.1) !important; border-color: rgba(var(--t-accent), 0.3) !important; }
body[class*="theme-"] .btn-light { background: var(--t-surface3) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; }
body[class*="theme-"] .btn-light:hover { background: rgba(var(--t-accent), 0.12) !important; }
body[class*="theme-"] .btn-white { background: var(--t-surface2) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; }


/* ---- Badges (preserve colored, darken soft) ---- */
body[class*="theme-"] .badge.bg-primary { background-color: #3454d1 !important; color: #fff !important; }
body[class*="theme-"] .badge.bg-success { background-color: #25b865 !important; color: #fff !important; }
body[class*="theme-"] .badge.bg-warning { background-color: #f4a100 !important; color: #000 !important; }
body[class*="theme-"] .badge.bg-danger { background-color: #ea4d4d !important; color: #fff !important; }
body[class*="theme-"] .badge.bg-info { background-color: #1976d2 !important; color: #fff !important; }
body[class*="theme-"] .badge.bg-dark { background-color: #475569 !important; color: #fff !important; }
body[class*="theme-"] .badge.bg-soft-primary { background-color: rgba(52,84,209,0.2) !important; }
body[class*="theme-"] .badge.bg-soft-success { background-color: rgba(37,184,101,0.2) !important; }
body[class*="theme-"] .badge.bg-soft-warning { background-color: rgba(244,161,0,0.2) !important; }
body[class*="theme-"] .badge.bg-soft-danger { background-color: rgba(234,77,77,0.2) !important; }
body[class*="theme-"] .badge.bg-soft-info { background-color: rgba(25,118,210,0.2) !important; }
body[class*="theme-"] .badge.bg-soft-secondary { background-color: rgba(108,117,125,0.2) !important; }
body[class*="theme-"] .badge.bg-gray-200 { background-color: rgba(var(--t-accent), 0.1) !important; color: var(--t-text) !important; }
body[class*="theme-"] .badge.bg-gray-100 { background-color: rgba(var(--t-accent), 0.08) !important; color: var(--t-text) !important; }


/* ---- Avatars ---- */
body[class*="theme-"] .avatar-text.bg-gray-200 { background: rgba(var(--t-accent), 0.15) !important; color: var(--t-text-link) !important; box-shadow: 0 0 15px rgba(var(--t-accent), 0.15); }
body[class*="theme-"] .avatar-text.bg-soft-primary { background-color: rgba(52,84,209,0.15) !important; }
body[class*="theme-"] .avatar-text.bg-soft-success { background-color: rgba(37,184,101,0.15) !important; }
body[class*="theme-"] .avatar-text.bg-soft-warning { background-color: rgba(244,161,0,0.15) !important; }
body[class*="theme-"] .avatar-text.bg-soft-danger { background-color: rgba(234,77,77,0.15) !important; }
body[class*="theme-"] .avatar-text.bg-soft-info { background-color: rgba(25,118,210,0.15) !important; }
body[class*="theme-"] .avatar-text.bg-soft-dark { background-color: rgba(71,85,105,0.2) !important; }
body[class*="theme-"] .icon-bubble-primary { background: rgba(var(--t-accent), 0.12) !important; color: var(--t-text-link) !important; border-color: rgba(var(--t-accent), 0.2) !important; }
body[class*="theme-"] .icon-bubble-success { background: rgba(37,184,101,0.12) !important; border-color: rgba(37,184,101,0.2) !important; }
body[class*="theme-"] .icon-bubble-warning { background: rgba(244,161,0,0.12) !important; border-color: rgba(244,161,0,0.2) !important; }
body[class*="theme-"] .icon-bubble-danger { background: rgba(234,77,77,0.12) !important; border-color: rgba(234,77,77,0.2) !important; }


/* ---- Borders ---- */
body[class*="theme-"] .border-dashed, body[class*="theme-"] hr.border-dashed,
body[class*="theme-"] .border-bottom.border-dashed, body[class*="theme-"] .border.border-dashed { border-color: var(--t-border) !important; }
body[class*="theme-"] .p-3.border.border-dashed, body[class*="theme-"] .p-2.hstack.border,
body[class*="theme-"] .p-2.rounded.border { background: var(--t-surface3); border-color: var(--t-border) !important; }
body[class*="theme-"] .border { border-color: var(--t-border) !important; }
body[class*="theme-"] .border-bottom { border-color: var(--t-border) !important; }
body[class*="theme-"] .border-top { border-color: var(--t-border) !important; }
body[class*="theme-"] hr { border-color: var(--t-border); opacity: 0.5; }


/* ---- Progress ---- */
body[class*="theme-"] .progress { background-color: rgba(var(--t-accent), 0.08); }
body[class*="theme-"] .bg-primary.text-white { background: linear-gradient(135deg, rgba(var(--t-accent),0.8), rgba(var(--t-accent2),0.7)) !important; }


/* ---- Modals ---- */
body[class*="theme-"] .modal-content {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border);
    box-shadow: 0 25px 80px rgba(0,0,0,0.6), 0 0 100px var(--t-glow);
    backdrop-filter: blur(20px);
}
body[class*="theme-"] .modal-header { border-color: var(--t-border) !important; background: var(--t-surface2) !important; }
body[class*="theme-"] .modal-footer { border-color: var(--t-border) !important; background: var(--t-surface2) !important; }
body[class*="theme-"] .modal-title { color: var(--t-text-bright) !important; }
body[class*="theme-"] .modal-body { color: var(--t-text); }
body[class*="theme-"] .modal-body .detail-label { color: var(--t-text-muted) !important; }
body[class*="theme-"] .modal-body .detail-value { color: var(--t-text) !important; }
body[class*="theme-"] .btn-close { filter: invert(1) brightness(0.8); }


/* ---- Dropdowns ---- */
body[class*="theme-"] .dropdown-menu {
    background: var(--t-surface) !important;
    border: 1px solid var(--t-border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    backdrop-filter: blur(20px);
}
body[class*="theme-"] .dropdown-item { color: var(--t-text) !important; transition: all 0.2s ease; }
body[class*="theme-"] .dropdown-item:hover { background: rgba(var(--t-accent), 0.12) !important; color: var(--t-nav-hover) !important; }
body[class*="theme-"] .dropdown-item.active, body[class*="theme-"] .dropdown-item:active { background: rgba(var(--t-accent), 0.18) !important; }
body[class*="theme-"] .dropdown-divider { border-color: var(--t-border) !important; }
body[class*="theme-"] .dropdown-header { color: var(--t-text-muted) !important; }


/* ---- Tabs / Nav Pills / Nav Tabs ---- */
body[class*="theme-"] .nav-tabs { border-color: var(--t-border); }
body[class*="theme-"] .nav-tabs .nav-link { color: var(--t-text-muted); transition: all 0.2s ease; }
body[class*="theme-"] .nav-tabs .nav-link:hover { color: var(--t-text); border-color: rgba(var(--t-accent), 0.2); background: rgba(var(--t-accent), 0.04); }
body[class*="theme-"] .nav-tabs .nav-link.active { color: var(--t-nav-hover); background: rgba(var(--t-accent), 0.1); border-color: var(--t-border) var(--t-border) transparent; }
body[class*="theme-"] .nav-pills .nav-link { color: var(--t-text-muted); }
body[class*="theme-"] .nav-pills .nav-link:hover { background: rgba(var(--t-accent), 0.06); color: var(--t-text); }
body[class*="theme-"] .nav-pills .nav-link.active { background: rgba(var(--t-accent), 0.18); color: var(--t-nav-hover); }
body[class*="theme-"] .tab-content { color: var(--t-text); }


/* ---- Alerts ---- */
body[class*="theme-"] .alert-success { background: rgba(37,184,101,0.15) !important; border-color: rgba(37,184,101,0.3) !important; color: #6ee7b7 !important; }
body[class*="theme-"] .alert-danger { background: rgba(234,77,77,0.15) !important; border-color: rgba(234,77,77,0.3) !important; color: #fca5a5 !important; }
body[class*="theme-"] .alert-warning { background: rgba(244,161,0,0.15) !important; border-color: rgba(244,161,0,0.3) !important; color: #fcd34d !important; }
body[class*="theme-"] .alert-info { background: rgba(25,118,210,0.15) !important; border-color: rgba(25,118,210,0.3) !important; color: #93c5fd !important; }
body[class*="theme-"] .alert-primary { background: rgba(52,84,209,0.15) !important; border-color: rgba(52,84,209,0.3) !important; color: #93b4fd !important; }


/* ---- Pagination ---- */
body[class*="theme-"] .page-link { background: rgba(var(--t-accent), 0.04); border-color: var(--t-border); color: var(--t-text-muted); }
body[class*="theme-"] .page-link:hover { background: rgba(var(--t-accent), 0.12); color: var(--t-text); }
body[class*="theme-"] .page-item.active .page-link { background: rgba(var(--t-accent), 0.25); border-color: rgba(var(--t-accent), 0.4); color: var(--t-text-bright); }
body[class*="theme-"] .page-item.disabled .page-link { background: transparent; color: var(--t-text-muted); opacity: 0.4; }


/* ---- Tooltips ---- */
body[class*="theme-"] .tooltip-inner { background: var(--t-surface); color: var(--t-text); border: 1px solid var(--t-border); }
body[class*="theme-"] .bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--t-border); }


/* ---- List Groups ---- */
body[class*="theme-"] .list-group-item { background: transparent; border-color: var(--t-border); color: var(--t-text); }
body[class*="theme-"] .list-group-item:hover { background: rgba(var(--t-accent), 0.04); }
body[class*="theme-"] .list-group-item.active { background: rgba(var(--t-accent), 0.15); border-color: rgba(var(--t-accent), 0.3); color: var(--t-text-bright); }


/* ---- Accordions ---- */
body[class*="theme-"] .accordion-item { background: transparent; border-color: var(--t-border); }
body[class*="theme-"] .accordion-button { background: var(--t-surface2); color: var(--t-text); }
body[class*="theme-"] .accordion-button:not(.collapsed) { background: rgba(var(--t-accent), 0.08); color: var(--t-nav-hover); }
body[class*="theme-"] .accordion-body { background: var(--t-surface3); color: var(--t-text); }


/* ---- Offcanvas / Sidebar panels ---- */
body[class*="theme-"] .offcanvas { background: var(--t-surface) !important; color: var(--t-text); border-color: var(--t-border) !important; }
body[class*="theme-"] .offcanvas-header { border-color: var(--t-border) !important; }
body[class*="theme-"] .offcanvas-title { color: var(--t-text-bright); }


/* ---- Activity / Clickable items ---- */
body[class*="theme-"] .activity-clickable:hover { background-color: rgba(var(--t-accent), 0.08) !important; box-shadow: 0 4px 20px var(--t-glow); }


/* ---- Date picker / Report range ---- */
body[class*="theme-"] .reportrange-picker { background: rgba(var(--t-accent), 0.08) !important; border-color: rgba(var(--t-accent), 0.2) !important; color: var(--t-text-heading) !important; }
body[class*="theme-"] .daterangepicker { background: var(--t-surface) !important; border-color: var(--t-border) !important; }
body[class*="theme-"] .daterangepicker td, body[class*="theme-"] .daterangepicker th { color: var(--t-text); }
body[class*="theme-"] .daterangepicker td.active { background: rgba(var(--t-accent), 0.3) !important; }
body[class*="theme-"] .daterangepicker .calendar-table { background: transparent; border-color: var(--t-border); }


/* ---- DataTables special elements ---- */
body[class*="theme-"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--t-text-muted) !important; }
body[class*="theme-"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(var(--t-accent), 0.1) !important; color: var(--t-text) !important; border-color: var(--t-border) !important; }
body[class*="theme-"] .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: rgba(var(--t-accent), 0.2) !important; color: var(--t-text-bright) !important; border-color: rgba(var(--t-accent), 0.3) !important; }
body[class*="theme-"] .dataTables_empty { color: var(--t-text-muted) !important; }


/* ---- Footer ---- */
body[class*="theme-"] footer.footer { border-top: 1px solid var(--t-border); background: transparent; }
body[class*="theme-"] footer.footer * { color: var(--t-footer) !important; }
body[class*="theme-"] footer.footer a:hover { color: var(--t-text-link) !important; }


/* ---- Scrollbar ---- */
body[class*="theme-"] ::-webkit-scrollbar-thumb { background: rgba(var(--t-accent), 0.22); }
body[class*="theme-"] ::-webkit-scrollbar-thumb:hover { background: rgba(var(--t-accent), 0.35); }


/* ---- Chat page specific ---- */
body[class*="theme-"] .chat-content { background: var(--t-surface3) !important; }
body[class*="theme-"] .chat-sidebar { background: var(--t-surface) !important; border-color: var(--t-border) !important; }
body[class*="theme-"] .chat-header { background: var(--t-surface2) !important; border-color: var(--t-border) !important; }
body[class*="theme-"] .chat-footer { background: var(--t-surface2) !important; border-color: var(--t-border) !important; }
body[class*="theme-"] .chat-item { color: var(--t-text); }
body[class*="theme-"] .chat-item:hover { background: rgba(var(--t-accent), 0.06); }
body[class*="theme-"] .msg-sent .msg-bubble { background: rgba(var(--t-accent), 0.18) !important; color: var(--t-text) !important; }
body[class*="theme-"] .msg-received .msg-bubble { background: var(--t-surface2) !important; color: var(--t-text) !important; }


/* ---- Miscellaneous ---- */
body[class*="theme-"] .bg-gray-100 { background-color: rgba(var(--t-accent), 0.04) !important; }
body[class*="theme-"] .bg-gray-200 { background-color: rgba(var(--t-accent), 0.08) !important; }
body[class*="theme-"] .bg-white { background-color: var(--t-surface) !important; }
body[class*="theme-"] .text-body { color: var(--t-text) !important; }
body[class*="theme-"] .mini-icon-primary .avatar-text,
body[class*="theme-"] .mini-icon-success .avatar-text,
body[class*="theme-"] .mini-icon-warning .avatar-text { border-color: var(--t-border) !important; }
body[class*="theme-"] .stretch-full { border-color: var(--t-border); }
body[class*="theme-"] code { background: rgba(var(--t-accent), 0.1); color: var(--t-text-link); }
body[class*="theme-"] .toast { background: var(--t-surface) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; }
body[class*="theme-"] .toast-header { background: var(--t-surface2) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; }



/* ==========================================================================
   THEME SWITCHER — PREMIUM FLOATING PANEL
   ========================================================================== */
.theme-switcher-fab {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99999;
}

.theme-switcher-fab .fab-btn {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
    border: none; color: #fff; font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(99,102,241,0.4), 0 0 40px rgba(139,92,246,0.15);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
    position: relative; overflow: hidden;
}
.theme-switcher-fab .fab-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
    transform: translateX(-100%); transition: transform 0.6s ease;
}
.theme-switcher-fab .fab-btn:hover::before { transform: translateX(100%); }
.theme-switcher-fab .fab-btn:hover {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 8px 32px rgba(99,102,241,0.5), 0 0 60px rgba(139,92,246,0.2);
}
.theme-switcher-fab .fab-btn i { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); position: relative; z-index: 1; }
.theme-switcher-fab.open .fab-btn i { transform: rotate(180deg); }

.theme-switcher-panel {
    position: absolute; bottom: 64px; left: 0; width: 300px;
    background: rgba(15,15,25,0.96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(99,102,241,0.08);
    padding: 20px; display: none;
    animation: themePanelIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.theme-switcher-fab.open .theme-switcher-panel { display: block; }
@keyframes themePanelIn {
    from { opacity: 0; transform: translateY(16px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.theme-switcher-panel h6 {
    margin: 0 0 16px; font-size: 10px; text-transform: uppercase;
    letter-spacing: 2.5px; color: rgba(255,255,255,0.35); font-weight: 700;
}

.theme-option {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 12px; border-radius: 14px; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    border: 2px solid transparent; margin-bottom: 4px;
    position: relative; overflow: hidden;
}
.theme-option::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    transform: translateX(-100%); transition: transform 0.5s ease;
}
.theme-option:hover::before { transform: translateX(100%); }
.theme-option:hover { background: rgba(255,255,255,0.05); transform: translateX(4px); }
.theme-option.active {
    background: rgba(99,102,241,0.12);
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 0 20px rgba(99,102,241,0.1);
}
.theme-option .theme-swatch {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
.theme-option:hover .theme-swatch { transform: scale(1.1); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.theme-option.active .theme-swatch { border-color: rgba(99,102,241,0.5); box-shadow: 0 0 16px rgba(99,102,241,0.2); }
.theme-option.active .theme-swatch::after {
    content: '\2713'; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%); color: #fff; font-size: 16px; font-weight: bold; text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.theme-option .theme-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); position: relative; z-index: 1; }
.theme-option .theme-desc { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 1px; position: relative; z-index: 1; }


/* ==========================================================================
   THEME SETTINGS — DYNAMIC OPTION CLASSES
   These are applied to <body> by the Theme Settings panel JS.
   Each section adds/removes a single class.
   ========================================================================== */


/* ---- Settings Panel UI ---- */
.st-theme-opt { transition: all 0.25s ease; border: 2px solid transparent; }
.st-theme-opt:hover { background: rgba(52,84,209,0.04); }
.st-theme-opt.st-active { background: rgba(52,84,209,0.08); border-color: #3454d1; }
.st-theme-opt.st-active .st-swatch { box-shadow: 0 0 0 3px rgba(52,84,209,0.3); }

.st-radio-swatch { transition: all 0.2s ease; cursor: pointer; }
.st-radio-swatch:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.st-radio-swatch.st-active { box-shadow: 0 0 0 2px #3454d1 !important; border-color: #3454d1 !important; }

.st-color-dot { transition: all 0.25s ease; cursor: pointer; }
.st-color-dot:hover { transform: scale(1.15); }
.st-color-dot.st-dot-active { border-color: #1e293b !important; box-shadow: 0 0 0 3px rgba(52,84,209,0.4); transform: scale(1.1); }

/* Wider customizer sidebar */
.theme-customizer .customizer-sidebar-wrapper { width: 340px !important; }


/* ---- CONTENT BACKGROUND (Section 2) ---- */
body.cbg-white .nxl-container .nxl-content { background: #ffffff !important; }
body.cbg-cream .nxl-container .nxl-content { background: #faf7f2 !important; }
body.cbg-lavender .nxl-container .nxl-content { background: #f0eef8 !important; }
body.cbg-mint .nxl-container .nxl-content { background: #edf8f4 !important; }
body.cbg-slate .nxl-container .nxl-content { background: #e8eaef !important; }


/* ---- CARD HEADER COLORS (Section 3) ---- */
body.ch-primary .card-header { background: linear-gradient(135deg, #eef1fc, #dbeafe) !important; border-bottom-color: #c7d2fe !important; }
body.ch-primary .card-header h5, body.ch-primary .card-header h6, body.ch-primary .card-header .card-title { color: #3454d1 !important; }

body.ch-success .card-header { background: linear-gradient(135deg, #eaf8f0, #d1fae5) !important; border-bottom-color: #a7f3d0 !important; }
body.ch-success .card-header h5, body.ch-success .card-header h6, body.ch-success .card-header .card-title { color: #25b865 !important; }

body.ch-info .card-header { background: linear-gradient(135deg, #e7f1fc, #dbeafe) !important; border-bottom-color: #93c5fd !important; }
body.ch-info .card-header h5, body.ch-info .card-header h6, body.ch-info .card-header .card-title { color: #1976d2 !important; }

body.ch-purple .card-header { background: linear-gradient(135deg, #f1ebfe, #ede9fe) !important; border-bottom-color: #c4b5fd !important; }
body.ch-purple .card-header h5, body.ch-purple .card-header h6, body.ch-purple .card-header .card-title { color: #7c3aed !important; }

/* Gradient combos — Ocean */
body.ch-ocean .card-header { background: linear-gradient(135deg, #e0f2fe, #ccfbf1, #dbeafe) !important; border-bottom-color: #99f6e4 !important; }
body.ch-ocean .card-header h5, body.ch-ocean .card-header h6, body.ch-ocean .card-header .card-title {
    background: linear-gradient(135deg, #0284c7, #0d9488); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Gradient combos — Sunset */
body.ch-sunset .card-header { background: linear-gradient(135deg, #fff7ed, #fce7f3, #fef3c7) !important; border-bottom-color: #fdba74 !important; }
body.ch-sunset .card-header h5, body.ch-sunset .card-header h6, body.ch-sunset .card-header .card-title {
    background: linear-gradient(135deg, #f97316, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Gradient combos — Berry */
body.ch-berry .card-header { background: linear-gradient(135deg, #fae8ff, #fce7f3, #f1ebfe) !important; border-bottom-color: #e879f9 !important; }
body.ch-berry .card-header h5, body.ch-berry .card-header h6, body.ch-berry .card-header .card-title {
    background: linear-gradient(135deg, #a855f7, #ec4899, #f43f5e); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Gradient combos — Forest */
body.ch-forest .card-header { background: linear-gradient(135deg, #ecfdf5, #d1fae5, #ccfbf1) !important; border-bottom-color: #6ee7b7 !important; }
body.ch-forest .card-header h5, body.ch-forest .card-header h6, body.ch-forest .card-header .card-title {
    background: linear-gradient(135deg, #059669, #0d9488, #0891b2); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Gradient combos — Dawn (amber→rose) */
body.ch-dawn .card-header { background: linear-gradient(135deg, #fef3c7, #fce7f3, #fde8f3) !important; border-bottom-color: #fbbf24 !important; }
body.ch-dawn .card-header h5, body.ch-dawn .card-header h6, body.ch-dawn .card-header .card-title {
    background: linear-gradient(135deg, #d97706, #e11d48); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Gradient combos — Cosmic (indigo→purple→pink) */
body.ch-cosmic .card-header { background: linear-gradient(135deg, #eef1fc, #f1ebfe, #fde8f3) !important; border-bottom-color: #ddd6fe !important; }
body.ch-cosmic .card-header h5, body.ch-cosmic .card-header h6, body.ch-cosmic .card-header .card-title { 
    background: linear-gradient(135deg, #3454d1, #7c3aed, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
}

/* Gradient combos — Arctic (slate→sky→cyan) */
body.ch-arctic .card-header { background: linear-gradient(135deg, #f0f9ff, #e0f2fe, #ecfeff) !important; border-bottom-color: #7dd3fc !important; }
body.ch-arctic .card-header h5, body.ch-arctic .card-header h6, body.ch-arctic .card-header .card-title {
    background: linear-gradient(135deg, #475569, #0284c7, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Gradient combos — Fire (red→orange→amber) */
body.ch-fire .card-header { background: linear-gradient(135deg, #fef2f2, #fff7ed, #fffbeb) !important; border-bottom-color: #fca5a5 !important; }
body.ch-fire .card-header h5, body.ch-fire .card-header h6, body.ch-fire .card-header .card-title {
    background: linear-gradient(135deg, #ef4444, #f97316, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}


/* ---- CARD BODY / BACKGROUND GRADIENTS (Section NEW) ---- */
body.cg-ocean .card .card-body { background: linear-gradient(160deg, #f0f9ff, #ecfeff, #f0fdfa) !important; }
body.cg-ocean .card { border-color: rgba(14,165,233,0.1) !important; }

body.cg-sunset .card .card-body { background: linear-gradient(160deg, #fffbeb, #fff1f2, #fdf4ff) !important; }
body.cg-sunset .card { border-color: rgba(249,115,22,0.1) !important; }

body.cg-lavender .card .card-body { background: linear-gradient(160deg, #faf5ff, #fce7f3, #eff6ff) !important; }
body.cg-lavender .card { border-color: rgba(168,85,247,0.1) !important; }

body.cg-mint .card .card-body { background: linear-gradient(160deg, #ecfdf5, #f0fdfa, #f0f9ff) !important; }
body.cg-mint .card { border-color: rgba(16,185,129,0.1) !important; }

body.cg-peach .card .card-body { background: linear-gradient(160deg, #fff7ed, #fef2f2, #fdf4ff) !important; }
body.cg-peach .card { border-color: rgba(251,146,60,0.1) !important; }

body.cg-slate .card .card-body { background: linear-gradient(160deg, #f8fafc, #f1f5f9, #e2e8f0) !important; }
body.cg-slate .card { border-color: rgba(100,116,139,0.1) !important; }

body.cg-aurora .card .card-body { background: linear-gradient(160deg, #ecfdf5, #eff6ff, #faf5ff) !important; }
body.cg-aurora .card { border-color: rgba(52,211,153,0.1) !important; }

body.cg-rose .card .card-body { background: linear-gradient(160deg, #fff1f2, #fce7f3, #faf5ff) !important; }
body.cg-rose .card { border-color: rgba(244,63,94,0.1) !important; }

body.cg-golden .card .card-body { background: linear-gradient(160deg, #fffbeb, #fef3c7, #fff7ed) !important; }
body.cg-golden .card { border-color: rgba(245,158,11,0.1) !important; }


/* ---- CARD TOP BORDER (Section 4) ---- */
body.cb-primary .card { border-top: 3px solid #3454d1 !important; }
body.cb-success .card { border-top: 3px solid #25b865 !important; }
body.cb-warning .card { border-top: 3px solid #f4a100 !important; }
body.cb-danger .card { border-top: 3px solid #ea4d4d !important; }
body.cb-rainbow .card { border-top: 3px solid transparent !important; border-image: linear-gradient(90deg, #3454d1, #7c3aed, #ec4899, #f4a100, #25b865) 1; border-image-slice: 1; }
body.cb-rainbow .card { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
/* Keep other borders normal for rainbow */
body.cb-rainbow .card { border-left: 1px solid rgba(0,0,0,0.045); border-right: 1px solid rgba(0,0,0,0.045); border-bottom: 1px solid rgba(0,0,0,0.045); }


/* ---- CARD STYLE (Section 5) ---- */
body.cs-flat .card { box-shadow: none !important; border: 1px solid rgba(0,0,0,0.06) !important; }
body.cs-flat .card:hover { box-shadow: none !important; transform: none !important; }

body.cs-elevated .card { box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04) !important; }
body.cs-elevated .card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06) !important; transform: translateY(-3px); }

body.cs-bordered .card { box-shadow: none !important; border: 2px solid #cbd5e1 !important; }
body.cs-bordered .card:hover { border-color: #94a3b8 !important; }

body.cs-soft-shadow .card { box-shadow: 0 2px 20px rgba(52,84,209,0.06), 0 0 40px rgba(52,84,209,0.03) !important; border: 1px solid rgba(52,84,209,0.06); }
body.cs-soft-shadow .card:hover { box-shadow: 0 4px 30px rgba(52,84,209,0.1), 0 0 50px rgba(52,84,209,0.04) !important; }

body.cs-glass .card { background: rgba(255,255,255,0.7) !important; backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255,255,255,0.4) !important; }
body.cs-glass .card:hover { background: rgba(255,255,255,0.8) !important; }


/* ---- TABLE HEADER (Section 6) ---- */
body.th-primary .table thead tr { background: #3454d1 !important; }
body.th-primary .table thead th { color: #fff !important; border-color: rgba(255,255,255,0.15) !important; }

body.th-dark .table thead tr { background: #1e293b !important; }
body.th-dark .table thead th { color: #fff !important; border-color: rgba(255,255,255,0.1) !important; }

body.th-soft-blue .table thead tr { background: #eef1fc !important; }
body.th-soft-blue .table thead th { color: #3454d1 !important; border-color: #dbeafe !important; }

body.th-soft-purple .table thead tr { background: #f1ebfe !important; }
body.th-soft-purple .table thead th { color: #7c3aed !important; border-color: #ede9fe !important; }

body.th-gradient .table thead tr { background: linear-gradient(135deg, #3454d1, #7c3aed) !important; }
body.th-gradient .table thead th { color: #fff !important; border-color: rgba(255,255,255,0.12) !important; }


/* ---- BORDER RADIUS (Section 7) ---- */
body.br-sharp .card { border-radius: 2px !important; }
body.br-sharp .card-header:first-child { border-radius: 1px 1px 0 0 !important; }
body.br-sharp .btn { border-radius: 2px !important; }
body.br-sharp .form-control, body.br-sharp .form-select { border-radius: 2px !important; }
body.br-sharp .badge { border-radius: 2px !important; }
body.br-sharp .modal-content { border-radius: 4px !important; }
body.br-sharp .dropdown-menu { border-radius: 2px !important; }
body.br-sharp .avatar, body.br-sharp .avatar-text { border-radius: 2px !important; }

body.br-rounded .card { border-radius: 20px !important; }
body.br-rounded .card-header:first-child { border-radius: 19px 19px 0 0 !important; }
body.br-rounded .btn { border-radius: 12px !important; }
body.br-rounded .form-control, body.br-rounded .form-select { border-radius: 12px !important; }
body.br-rounded .badge { border-radius: 12px !important; }
body.br-rounded .modal-content { border-radius: 20px !important; }
body.br-rounded .dropdown-menu { border-radius: 16px !important; }

body.br-pill .card { border-radius: 28px !important; }
body.br-pill .card-header:first-child { border-radius: 27px 27px 0 0 !important; }
body.br-pill .btn { border-radius: 50px !important; }
body.br-pill .form-control, body.br-pill .form-select { border-radius: 50px !important; }
body.br-pill .badge { border-radius: 50px !important; }
body.br-pill .modal-content { border-radius: 28px !important; }
body.br-pill .dropdown-menu { border-radius: 20px !important; }


/* ---- FONT SIZE (Section 8) ---- */
body.fz-xs { font-size: 12px !important; }
body.fz-xs .table { font-size: 11.5px; }
body.fz-xs .table thead th { font-size: 11px; }
body.fz-xs .form-control, body.fz-xs .form-select { font-size: 12px; }
body.fz-xs .btn { font-size: 12px; }
body.fz-xs h5, body.fz-xs .h5 { font-size: 0.9rem !important; }
body.fz-xs h6, body.fz-xs .h6 { font-size: 0.8rem !important; }
body.fz-xs .nxl-navigation .nxl-mtext { font-size: 12px !important; }

body.fz-sm { font-size: 13px !important; }
body.fz-sm .table { font-size: 12.5px; }
body.fz-sm .table thead th { font-size: 12px; }
body.fz-sm .form-control, body.fz-sm .form-select { font-size: 13px; }
body.fz-sm .btn { font-size: 13px; }
body.fz-sm h5, body.fz-sm .h5 { font-size: 0.95rem !important; }
body.fz-sm h6, body.fz-sm .h6 { font-size: 0.85rem !important; }
body.fz-sm .nxl-navigation .nxl-mtext { font-size: 13px !important; }

body.fz-lg { font-size: 16px !important; }
body.fz-lg .table { font-size: 15px; }
body.fz-lg .table thead th { font-size: 14px; }
body.fz-lg .form-control, body.fz-lg .form-select { font-size: 16px; }
body.fz-lg .btn { font-size: 15px; }
body.fz-lg h5, body.fz-lg .h5 { font-size: 1.2rem !important; }
body.fz-lg h6, body.fz-lg .h6 { font-size: 1.05rem !important; }
body.fz-lg .card-title { font-size: 1.1rem !important; }
body.fz-lg .nxl-navigation .nxl-mtext { font-size: 15px !important; }
body.fz-lg .breadcrumb-item { font-size: 14px; }

body.fz-xl { font-size: 18px !important; }
body.fz-xl .table { font-size: 16px; }
body.fz-xl .table thead th { font-size: 15px; }
body.fz-xl .form-control, body.fz-xl .form-select { font-size: 17px; }
body.fz-xl .btn { font-size: 16px; }
body.fz-xl h5, body.fz-xl .h5 { font-size: 1.35rem !important; }
body.fz-xl h6, body.fz-xl .h6 { font-size: 1.15rem !important; }
body.fz-xl .card-title { font-size: 1.25rem !important; }
body.fz-xl .nxl-navigation .nxl-mtext { font-size: 16px !important; }
body.fz-xl .nxl-navigation .nxl-link { padding: 12px 18px !important; }
body.fz-xl .breadcrumb-item { font-size: 15px; }
body.fz-xl .page-header-title h5 { font-size: 1.4rem !important; }


/* ---- NAV ACCENT COLORS (Section 12) ---- */
body.na-teal .nxl-navigation .nxl-item.active > .nxl-link { color: #0ab39c !important; }
body.na-teal .nxl-navigation .nxl-link:hover { color: #0ab39c !important; }
body.na-teal .cutomizer-open-trigger { background: #0ab39c !important; }

body.na-purple .nxl-navigation .nxl-item.active > .nxl-link { color: #7c3aed !important; }
body.na-purple .nxl-navigation .nxl-link:hover { color: #7c3aed !important; }
body.na-purple .cutomizer-open-trigger { background: #7c3aed !important; }

body.na-rose .nxl-navigation .nxl-item.active > .nxl-link { color: #ec4899 !important; }
body.na-rose .nxl-navigation .nxl-link:hover { color: #ec4899 !important; }
body.na-rose .cutomizer-open-trigger { background: #ec4899 !important; }

body.na-orange .nxl-navigation .nxl-item.active > .nxl-link { color: #f97316 !important; }
body.na-orange .nxl-navigation .nxl-link:hover { color: #f97316 !important; }
body.na-orange .cutomizer-open-trigger { background: #f97316 !important; }

body.na-emerald .nxl-navigation .nxl-item.active > .nxl-link { color: #10b981 !important; }
body.na-emerald .nxl-navigation .nxl-link:hover { color: #10b981 !important; }
body.na-emerald .cutomizer-open-trigger { background: #10b981 !important; }

body.na-sky .nxl-navigation .nxl-item.active > .nxl-link { color: #0ea5e9 !important; }
body.na-sky .nxl-navigation .nxl-link:hover { color: #0ea5e9 !important; }
body.na-sky .cutomizer-open-trigger { background: #0ea5e9 !important; }

body.na-red .nxl-navigation .nxl-item.active > .nxl-link { color: #ef4444 !important; }
body.na-red .nxl-navigation .nxl-link:hover { color: #ef4444 !important; }
body.na-red .cutomizer-open-trigger { background: #ef4444 !important; }


/* ---- BUTTON STYLE (Section 13) ---- */
body.btn-rounded .btn { border-radius: 50px !important; }
body.btn-outline-mode .btn-primary { background: transparent !important; border: 2px solid #3454d1 !important; color: #3454d1 !important; }
body.btn-outline-mode .btn-primary:hover { background: #3454d1 !important; color: #fff !important; }
body.btn-outline-mode .btn-success { background: transparent !important; border: 2px solid #25b865 !important; color: #25b865 !important; }
body.btn-outline-mode .btn-success:hover { background: #25b865 !important; color: #fff !important; }
body.btn-outline-mode .btn-danger { background: transparent !important; border: 2px solid #ea4d4d !important; color: #ea4d4d !important; }
body.btn-outline-mode .btn-danger:hover { background: #ea4d4d !important; color: #fff !important; }
body.btn-outline-mode .btn-warning { background: transparent !important; border: 2px solid #f4a100 !important; color: #f4a100 !important; }
body.btn-outline-mode .btn-warning:hover { background: #f4a100 !important; color: #fff !important; }
body.btn-outline-mode .btn-info { background: transparent !important; border: 2px solid #1976d2 !important; color: #1976d2 !important; }
body.btn-outline-mode .btn-info:hover { background: #1976d2 !important; color: #fff !important; }


/* ---- Dark theme overrides for settings options ---- */
/* Card headers in dark themes get transparent override */
body[class*="theme-"].ch-primary .card-header,
body[class*="theme-"].ch-success .card-header,
body[class*="theme-"].ch-info .card-header,
body[class*="theme-"].ch-purple .card-header,
body[class*="theme-"].ch-ocean .card-header,
body[class*="theme-"].ch-sunset .card-header,
body[class*="theme-"].ch-berry .card-header,
body[class*="theme-"].ch-forest .card-header,
body[class*="theme-"].ch-dawn .card-header,
body[class*="theme-"].ch-cosmic .card-header,
body[class*="theme-"].ch-arctic .card-header,
body[class*="theme-"].ch-fire .card-header {
    background: rgba(var(--t-accent), 0.08) !important;
    border-bottom-color: var(--t-border) !important;
}
body[class*="theme-"].ch-primary .card-header h5,
body[class*="theme-"].ch-success .card-header h5,
body[class*="theme-"].ch-info .card-header h5,
body[class*="theme-"].ch-purple .card-header h5,
body[class*="theme-"].ch-ocean .card-header h5,
body[class*="theme-"].ch-sunset .card-header h5,
body[class*="theme-"].ch-berry .card-header h5,
body[class*="theme-"].ch-forest .card-header h5,
body[class*="theme-"].ch-dawn .card-header h5,
body[class*="theme-"].ch-cosmic .card-header h5,
body[class*="theme-"].ch-arctic .card-header h5,
body[class*="theme-"].ch-fire .card-header h5 { color: var(--t-text-heading) !important; -webkit-text-fill-color: unset; }

/* Card body gradient in dark themes */
body[class*="theme-"].cg-ocean .card .card-body,
body[class*="theme-"].cg-sunset .card .card-body,
body[class*="theme-"].cg-lavender .card .card-body,
body[class*="theme-"].cg-mint .card .card-body,
body[class*="theme-"].cg-peach .card .card-body,
body[class*="theme-"].cg-slate .card .card-body,
body[class*="theme-"].cg-aurora .card .card-body,
body[class*="theme-"].cg-rose .card .card-body,
body[class*="theme-"].cg-golden .card .card-body { background: transparent !important; }
body[class*="theme-"].cg-ocean .card,
body[class*="theme-"].cg-sunset .card,
body[class*="theme-"].cg-lavender .card,
body[class*="theme-"].cg-mint .card,
body[class*="theme-"].cg-peach .card,
body[class*="theme-"].cg-slate .card,
body[class*="theme-"].cg-aurora .card,
body[class*="theme-"].cg-rose .card,
body[class*="theme-"].cg-golden .card { border-color: var(--t-border) !important; }

/* Card border in dark themes */
body[class*="theme-"].cb-primary .card { border-top-color: rgba(var(--t-accent), 0.5) !important; }
body[class*="theme-"].cb-success .card { border-top-color: rgba(16,185,129,0.5) !important; }
body[class*="theme-"].cb-warning .card { border-top-color: rgba(244,161,0,0.5) !important; }
body[class*="theme-"].cb-danger .card { border-top-color: rgba(234,77,77,0.5) !important; }
body[class*="theme-"].cb-rainbow .card { border-image: linear-gradient(90deg, rgba(var(--t-accent),0.6), rgba(var(--t-accent2),0.5), rgba(var(--t-accent3),0.4)) 1; }

/* Content bg in dark themes overridden */
body[class*="theme-"].cbg-white .nxl-container .nxl-content,
body[class*="theme-"].cbg-cream .nxl-container .nxl-content,
body[class*="theme-"].cbg-lavender .nxl-container .nxl-content,
body[class*="theme-"].cbg-mint .nxl-container .nxl-content,
body[class*="theme-"].cbg-slate .nxl-container .nxl-content { background: initial !important; }

/* Table header in dark themes */
body[class*="theme-"].th-primary .table thead tr { background: rgba(var(--t-accent), 0.15) !important; }
body[class*="theme-"].th-primary .table thead th { color: var(--t-text-heading) !important; }
body[class*="theme-"].th-dark .table thead tr { background: rgba(0,0,0,0.3) !important; }
body[class*="theme-"].th-dark .table thead th { color: var(--t-text-bright) !important; }
body[class*="theme-"].th-soft-blue .table thead tr { background: rgba(var(--t-accent), 0.08) !important; }
body[class*="theme-"].th-soft-blue .table thead th { color: var(--t-text-heading) !important; }
body[class*="theme-"].th-soft-purple .table thead tr { background: rgba(var(--t-accent2), 0.08) !important; }
body[class*="theme-"].th-soft-purple .table thead th { color: var(--t-text-heading) !important; }
body[class*="theme-"].th-gradient .table thead tr { background: linear-gradient(135deg, rgba(var(--t-accent),0.2), rgba(var(--t-accent2),0.15)) !important; }
body[class*="theme-"].th-gradient .table thead th { color: var(--t-text-bright) !important; }

/* Glass card style override in dark theme */
body[class*="theme-"].cs-glass .card { background: rgba(255,255,255,0.05) !important; backdrop-filter: blur(20px) saturate(200%); }

/* Settings panel itself stays white in dark themes */
body[class*="theme-"] .theme-customizer .customizer-sidebar-body .st-theme-opt .fw-semibold,
body[class*="theme-"] .theme-customizer .customizer-sidebar-body .st-radio-swatch span,
body[class*="theme-"] .theme-customizer .customizer-sidebar-body .fs-11.text-muted { color: initial; }


/* ==========================================================================
   COMPREHENSIVE DARK THEME FULL COVERAGE
   Ensures zero white/light gaps on any page element
   ========================================================================== */

/* ---- bg-light / bg-body ---- */
body[class*="theme-"] .bg-light { background-color: var(--t-surface3) !important; }
body[class*="theme-"] .bg-body { background-color: var(--t-surface3) !important; }

/* ---- badge.bg-light ---- */
body[class*="theme-"] .badge.bg-light { background-color: rgba(var(--t-accent), 0.1) !important; color: var(--t-text) !important; }

/* ---- bg-soft-teal (missing from badge/avatar sets) ---- */
body[class*="theme-"] .badge.bg-soft-teal { background-color: rgba(10,179,156,0.2) !important; color: #5eead4 !important; }
body[class*="theme-"] .avatar-text.bg-soft-teal { background-color: rgba(10,179,156,0.15) !important; color: #5eead4 !important; }

/* ---- Generic bg-soft-* on divs (non-badge, non-avatar, non-btn) ---- */
body[class*="theme-"] div.bg-soft-primary,
body[class*="theme-"] p.bg-soft-primary,
body[class*="theme-"] section.bg-soft-primary,
body[class*="theme-"] .bg-soft-primary:not(.badge):not(.avatar-text):not(.btn):not(.btn-soft-primary) { background-color: rgba(52,84,209,0.12) !important; }
body[class*="theme-"] div.bg-soft-success,
body[class*="theme-"] p.bg-soft-success,
body[class*="theme-"] .bg-soft-success:not(.badge):not(.avatar-text):not(.btn):not(.btn-soft-success) { background-color: rgba(37,184,101,0.12) !important; }
body[class*="theme-"] div.bg-soft-danger,
body[class*="theme-"] p.bg-soft-danger,
body[class*="theme-"] .bg-soft-danger:not(.badge):not(.avatar-text):not(.btn):not(.btn-soft-danger) { background-color: rgba(234,77,77,0.12) !important; }
body[class*="theme-"] div.bg-soft-warning,
body[class*="theme-"] p.bg-soft-warning,
body[class*="theme-"] .bg-soft-warning:not(.badge):not(.avatar-text):not(.btn):not(.btn-soft-warning) { background-color: rgba(244,161,0,0.12) !important; }
body[class*="theme-"] div.bg-soft-info,
body[class*="theme-"] p.bg-soft-info,
body[class*="theme-"] .bg-soft-info:not(.badge):not(.avatar-text):not(.btn):not(.btn-soft-info) { background-color: rgba(25,118,210,0.12) !important; }
body[class*="theme-"] div.bg-soft-teal,
body[class*="theme-"] .bg-soft-teal:not(.badge):not(.avatar-text):not(.btn) { background-color: rgba(10,179,156,0.12) !important; }
body[class*="theme-"] div.bg-soft-secondary,
body[class*="theme-"] .bg-soft-secondary:not(.badge):not(.avatar-text):not(.btn) { background-color: rgba(100,116,139,0.12) !important; }

/* ---- card.bg-soft-* (reports page) ---- */
body[class*="theme-"] .card.bg-soft-primary { background-color: rgba(52,84,209,0.1) !important; }
body[class*="theme-"] .card.bg-soft-success { background-color: rgba(37,184,101,0.1) !important; }
body[class*="theme-"] .card.bg-soft-warning { background-color: rgba(244,161,0,0.1) !important; }
body[class*="theme-"] .card.bg-soft-info { background-color: rgba(25,118,210,0.1) !important; }
body[class*="theme-"] .card.bg-soft-danger { background-color: rgba(234,77,77,0.1) !important; }

/* ---- card-header.bg-soft-* ---- */
body[class*="theme-"] .card-header.bg-soft-primary { background-color: rgba(52,84,209,0.1) !important; border-bottom-color: var(--t-border) !important; }
body[class*="theme-"] .card-header.bg-soft-success { background-color: rgba(37,184,101,0.1) !important; border-bottom-color: var(--t-border) !important; }
body[class*="theme-"] .card-header.bg-soft-danger { background-color: rgba(234,77,77,0.1) !important; border-bottom-color: var(--t-border) !important; }
body[class*="theme-"] .card-header.bg-soft-warning { background-color: rgba(244,161,0,0.1) !important; border-bottom-color: var(--t-border) !important; }
body[class*="theme-"] .card-header.bg-soft-info { background-color: rgba(25,118,210,0.1) !important; border-bottom-color: var(--t-border) !important; }

/* ---- modal-header.bg-soft-* ---- */
body[class*="theme-"] .modal-header[class*="bg-soft-"] { background-color: rgba(var(--t-accent), 0.08) !important; border-bottom-color: var(--t-border) !important; }
body[class*="theme-"] .modal-header[class*="bg-soft-"] * { color: var(--t-text-heading) !important; }

/* ---- content-sidebar-header (job board) ---- */
body[class*="theme-"] .content-sidebar-header { background: var(--t-surface) !important; border-color: var(--t-border) !important; }

/* ---- Chat module deep overrides ---- */
body[class*="theme-"] .chat-user-item { border-color: var(--t-border) !important; }
body[class*="theme-"] .chat-user-item:hover { background: rgba(var(--t-accent), 0.06) !important; }
body[class*="theme-"] .chat-user-item.active { background: rgba(var(--t-accent), 0.12) !important; border-left-color: rgb(var(--t-accent)) !important; }
body[class*="theme-"] .chat-messages { background: var(--t-surface3) !important; }
body[class*="theme-"] .chat-input-bar { background: var(--t-surface) !important; border-color: var(--t-border) !important; }
body[class*="theme-"] .chat-input-bar .btn-send { border-color: var(--t-border) !important; color: var(--t-text-link) !important; }
body[class*="theme-"] .chat-input-bar .btn-send:hover { background: rgba(var(--t-accent), 0.06) !important; }
body[class*="theme-"] .sidebar-header { border-color: var(--t-border) !important; background: var(--t-surface2) !important; }
body[class*="theme-"] .msg-item.received .msg-bubble { background: var(--t-surface2) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; }

/* ---- Additional Bootstrap utility overrides ---- */
body[class*="theme-"] .bg-gray-50 { background-color: rgba(var(--t-accent), 0.02) !important; }
body[class*="theme-"] .bg-gray-300 { background-color: rgba(var(--t-accent), 0.1) !important; }
body[class*="theme-"] .bg-gray-400 { background-color: rgba(var(--t-accent), 0.12) !important; }
body[class*="theme-"] .bg-gray-500 { background-color: rgba(var(--t-accent), 0.15) !important; }
body[class*="theme-"] .border-light { border-color: var(--t-border) !important; }
body[class*="theme-"] .border-white { border-color: var(--t-border) !important; }

/* ---- Text corrections for dark themes ---- */
body[class*="theme-"] .text-muted { color: var(--t-text-muted) !important; }
body[class*="theme-"] .text-secondary { color: var(--t-text-muted) !important; }
body[class*="theme-"] .text-body-secondary { color: var(--t-text-muted) !important; }
body[class*="theme-"] small:not(.theme-customizer small) { color: var(--t-text-muted); }
body[class*="theme-"] .fs-11:not(.theme-customizer .fs-11) { color: var(--t-text-muted); }
body[class*="theme-"] .fw-normal.text-truncate { color: var(--t-text); }

/* ---- Card footer area ---- */
body[class*="theme-"] .card-footer { background: var(--t-surface2) !important; border-top-color: var(--t-border) !important; }

/* ---- Table zebra & hover rows ---- */
body[class*="theme-"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(var(--t-accent), 0.03); color: var(--t-text); }
body[class*="theme-"] .table-hover > tbody > tr:hover > * { background-color: rgba(var(--t-accent), 0.06); color: var(--t-text); }

/* ---- Breadcrumb ---- */
body[class*="theme-"] .breadcrumb-item a { color: var(--t-text-link) !important; }
body[class*="theme-"] .breadcrumb-item.active { color: var(--t-text-muted) !important; }
body[class*="theme-"] .breadcrumb-item + .breadcrumb-item::before { color: var(--t-text-muted) !important; }

/* ---- Icon bubble overrides for dark themes ---- */
body[class*="theme-"] [class*="icon-bubble-"] { background: rgba(var(--t-accent), 0.12) !important; border-color: rgba(var(--t-accent), 0.2) !important; }
body[class*="theme-"] [class*="mini-icon-"] .avatar-text { background: rgba(var(--t-accent), 0.08) !important; }

/* ---- Stat cards & KPI values ---- */
body[class*="theme-"] .counter-value,
body[class*="theme-"] .counter-label { color: var(--t-text-bright) !important; }
body[class*="theme-"] .hstack,
body[class*="theme-"] .vstack { color: var(--t-text); }

/* ---- Report range / filter bars ---- */
body[class*="theme-"] .reportrange-text { color: var(--t-text-heading) !important; }

/* ---- Select2 full override ---- */
body[class*="theme-"] .select2-container--default .select2-selection--single { background: var(--t-surface3) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; }
body[class*="theme-"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--t-text) !important; }
body[class*="theme-"] .select2-dropdown { background: var(--t-surface) !important; border-color: var(--t-border) !important; }
body[class*="theme-"] .select2-results__option { color: var(--t-text) !important; }
body[class*="theme-"] .select2-results__option--highlighted { background: rgba(var(--t-accent), 0.12) !important; }
body[class*="theme-"] .select2-search__field { background: var(--t-surface3) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; }

/* ---- Empty state / placeholders ---- */
body[class*="theme-"] .empty-state,
body[class*="theme-"] .no-data,
body[class*="theme-"] .text-center.py-5 p { color: var(--t-text-muted) !important; }

/* ---- Card tint backgrounds from shunting-ui-upgrade.css ---- */
body[class*="theme-"] [class*="card-tint-"] { background: var(--t-surface) !important; }
body[class*="theme-"] [class*="card-header-tint-"] { background: rgba(var(--t-accent), 0.06) !important; }

/* ---- Full-width containers & wrappers ---- */
body[class*="theme-"] .container-fluid,
body[class*="theme-"] .container { color: var(--t-text); }

/* ---- Well / panel type elements ---- */
body[class*="theme-"] .well,
body[class*="theme-"] .panel,
body[class*="theme-"] .panel-body { background: var(--t-surface2) !important; border-color: var(--t-border) !important; color: var(--t-text) !important; }

/* ---- Popover ---- */
body[class*="theme-"] .popover { background: var(--t-surface) !important; border-color: var(--t-border) !important; }
body[class*="theme-"] .popover-header { background: var(--t-surface2) !important; border-color: var(--t-border) !important; color: var(--t-text-heading) !important; }
body[class*="theme-"] .popover-body { color: var(--t-text) !important; }
body[class*="theme-"] .bs-popover-top > .popover-arrow::after { border-top-color: var(--t-surface) !important; }
body[class*="theme-"] .bs-popover-bottom > .popover-arrow::after { border-bottom-color: var(--t-surface) !important; }

/* ---- Misc catch-all for remaining whites ---- */
body[class*="theme-"] .bg-white-50 { background-color: rgba(var(--t-accent), 0.03) !important; }
body[class*="theme-"] hr { border-color: var(--t-border) !important; opacity: 0.3; }
body[class*="theme-"] .border { border-color: var(--t-border) !important; }
body[class*="theme-"] .border-top { border-top-color: var(--t-border) !important; }
body[class*="theme-"] .border-bottom { border-bottom-color: var(--t-border) !important; }
body[class*="theme-"] .border-start { border-left-color: var(--t-border) !important; }
body[class*="theme-"] .border-end { border-right-color: var(--t-border) !important; }
body[class*="theme-"] .border-gray-2 { border-color: var(--t-border) !important; }
body[class*="theme-"] .shadow-sm,
body[class*="theme-"] .shadow { box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; }
body[class*="theme-"] .rounded-3.p-3.bg-light,
body[class*="theme-"] .rounded.p-3.bg-light { background: var(--t-surface3) !important; }

/* ---- Content area deep override — no white leaks ---- */
body[class*="theme-"] .nxl-container .nxl-content * {
    border-color: var(--t-border);
}
body[class*="theme-"] .nxl-container .nxl-content .card,
body[class*="theme-"] .nxl-container .nxl-content .card-body { color: var(--t-text); }