/* ════════════════════════════════════════════════════════════════
   CRM MODERN UI  v7 — Ultra-clean, thorough light/dark support
   • Login screen (#loginScreen) → untouched
   • Sidebar (#sidebar) → always dark
   • App (#app) + Modal (#modalOverlay) + Toast (#toast) → adaptive
   ════════════════════════════════════════════════════════════════ */

/* ┌─────────────────────────────────────────────┐
   │  TOKEN SYSTEM                               │
   └─────────────────────────────────────────────┘ */
:root {
  /* Sidebar (always dark) */
  --sb-bg:      #0b0f1c;
  --sb-srf:     rgba(255,255,255,0.04);
  --sb-srf-hi:  rgba(255,255,255,0.08);
  --sb-bd:      rgba(255,255,255,0.07);
  --sb-t1:      rgba(255,255,255,0.90);
  --sb-t2:      rgba(255,255,255,0.42);
  --sb-t3:      rgba(255,255,255,0.18);
  --sb-acc:     #5b72f0;
  --sb-acc-bg:  rgba(91,114,240,0.16);
  --sb-acc-gl:  rgba(91,114,240,0.30);

  /* Content — dark default */
  --bg:    #0d1117;
  --s1:    #161c28;
  --s2:    #1c2338;
  --s3:    #222b42;
  --bd:    rgba(255,255,255,0.07);
  --bdh:   rgba(255,255,255,0.12);
  --t1:    #e8eeff;
  --t2:    #9eadc8;
  --t3:    #56637e;
  --t4:    #323e56;

  /* Accent */
  --acc:      #5b72f0;
  --acc-h:    #7086f6;
  --acc-s:    rgba(91,114,240,0.12);
  --acc-gl:   rgba(91,114,240,0.28);
  --acc-t:    #8fa3f8;

  /* Semantic */
  --g:    #34d399; --g-s: rgba(52,211,153,0.10);
  --y:    #f59e0b; --y-s: rgba(245,158,11,0.10);
  --r:    #f87171; --r-s: rgba(248,113,113,0.10);
  --b:    #38bdf8; --b-s: rgba(56,189,248,0.10);
  --p:    #a78bfa; --p-s: rgba(167,139,250,0.10);

  /* Elevation */
  --e1: 0 1px 3px rgba(0,0,0,.25);
  --e2: 0 2px 8px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.20);
  --e3: 0 4px 16px rgba(0,0,0,.40), 0 2px 4px rgba(0,0,0,.24);
  --e4: 0 8px 32px rgba(0,0,0,.48), 0 4px 8px rgba(0,0,0,.28);
  --ea: 0 4px 18px var(--acc-gl);

  /* Radius */
  --r2:4px; --r3:6px; --r4:8px; --r5:10px; --r6:12px;
  --r7:14px; --r8:16px; --r9:20px; --r10:24px; --rp:999px;

  /* Motion */
  --sp: cubic-bezier(0.34,1.56,0.64,1);
  --eo: cubic-bezier(0.16,1,0.3,1);
  --ds: 120ms; --dm: 180ms; --dl: 280ms;

  --sb-w: 256px;
}

/* ── LIGHT MODE TOKENS ────────────────────────────────────────── */
body.crm-light-theme {
  --bg:  #f0f2f9;
  --s1:  #ffffff;
  --s2:  #f4f6fc;
  --s3:  #e8ebf5;
  --bd:  rgba(30,42,80,.10);
  --bdh: rgba(30,42,80,.18);
  --t1:  #0e1527;
  --t2:  #2d3a5c;
  --t3:  #5a6a96;
  --t4:  #8e9dc0;
  --acc:    #4355d4;
  --acc-h:  #3347c2;
  --acc-s:  rgba(67,85,212,.10);
  --acc-gl: rgba(67,85,212,.22);
  --acc-t:  #4355d4;
  --e1: 0 1px 3px rgba(20,30,60,.07), 0 1px 1px rgba(20,30,60,.04);
  --e2: 0 2px 8px rgba(20,30,60,.09), 0 1px 2px rgba(20,30,60,.05);
  --e3: 0 4px 16px rgba(20,30,60,.10), 0 2px 4px rgba(20,30,60,.06);
  --e4: 0 8px 32px rgba(20,30,60,.13), 0 4px 8px rgba(20,30,60,.08);
  --ea: 0 4px 18px rgba(67,85,212,.24);
  --g:  #047857; --g-s: rgba(4,120,87,.09);
  --y:  #b45309; --y-s: rgba(180,83,9,.09);
  --r:  #b91c1c; --r-s: rgba(185,28,28,.08);
  --b:  #0369a1; --b-s: rgba(3,105,161,.08);
  --p:  #6d28d9; --p-s: rgba(109,40,217,.08);
  color-scheme: light;
}

/* ┌─────────────────────────────────────────────┐
   │  GLOBAL BASE                                │
   └─────────────────────────────────────────────┘ */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body.crm-light-theme { color-scheme: light; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 13px; line-height: 1.5;
}

#app {
  background: var(--bg) !important;
  transition: background var(--dl) var(--eo);
  color: var(--t2);
}

.noise-overlay { display: none !important; }

/* Scrollbar */
#app *, #modalOverlay *, .custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--bdh) transparent;
}
#app *::-webkit-scrollbar, #modalOverlay *::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
#app *::-webkit-scrollbar-track { background: transparent; }
#app *::-webkit-scrollbar-thumb { background: var(--bdh); border-radius: 99px; }
#app *::-webkit-scrollbar-thumb:hover { background: var(--t3); }

/* ┌─────────────────────────────────────────────┐
   │  LAYOUT                                     │
   └─────────────────────────────────────────────┘ */
.crm-sidebar {
  width: var(--sb-w) !important;
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-bd) !important;
  box-shadow: none !important;
  display: flex !important; flex-direction: column !important;
  position: fixed !important; top: 0; left: 0; bottom: 0;
  z-index: 40 !important; backdrop-filter: none !important;
}
body.crm-light-theme .crm-sidebar {
  background: var(--sb-bg) !important;
  border-right-color: var(--sb-bd) !important;
  box-shadow: 2px 0 12px rgba(0,0,0,.12) !important;
}

.crm-main {
  background: var(--bg) !important;
  margin-left: var(--sb-w);
  min-height: 100vh; flex: 1;
  display: flex; flex-direction: column;
  transition: background var(--dl) var(--eo);
}
.crm-main::before { display: none !important; }
.crm-main > [class*="absolute"][class*="blur"] { display: none !important; }

.crm-main-content, #mainContent {
  padding: 22px 26px !important;
  background: transparent !important;
}

@media (max-width: 768px) {
  .crm-main { margin-left: 0 !important; }
  .crm-main-content, #mainContent { padding: 14px 16px !important; }
}

/* ┌─────────────────────────────────────────────┐
   │  SIDEBAR HEADER / LOGO                     │
   └─────────────────────────────────────────────┘ */
.crm-sidebar > div:first-child {
  padding: 18px 18px 15px !important;
  border-bottom: 1px solid var(--sb-bd) !important;
  background: transparent !important; flex-shrink: 0 !important;
}
.crm-sidebar > div:first-child .font-display {
  font-size: 14.5px !important; font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  background: linear-gradient(135deg,#fff 0%,rgba(255,255,255,.55) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
}
.crm-sidebar > div:first-child svg {
  color: var(--sb-acc) !important;
  filter: drop-shadow(0 0 6px var(--sb-acc-gl)) !important;
  flex-shrink: 0 !important; width: 18px !important; height: 18px !important;
}
.crm-sidebar > div:first-child .text-slate-500 {
  color: var(--sb-t3) !important; font-size: 10px !important; font-weight: 500 !important;
}

/* ┌─────────────────────────────────────────────┐
   │  SIDEBAR PROFILE CARD                       │
   └─────────────────────────────────────────────┘ */
.crm-sidebar > div:nth-child(2) { padding: 12px 10px 6px !important; }

#sidebarProfileCard {
  background: var(--sb-srf) !important; border: 1px solid var(--sb-bd) !important;
  border-radius: 10px !important; padding: 10px 12px !important;
  cursor: pointer !important; gap: 9px !important;
  transition: background var(--ds), border-color var(--ds) !important;
}
#sidebarProfileCard:hover {
  background: var(--sb-srf-hi) !important; border-color: rgba(255,255,255,.13) !important;
}
#sidebarAvatar {
  width: 32px !important; height: 32px !important; border-radius: 8px !important;
  background: linear-gradient(135deg, var(--sb-acc), #9f7dff) !important;
  font-size: 12px !important; font-weight: 700 !important; color: #fff !important;
  flex-shrink: 0 !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
}
#sidebarName { font-size: 12px !important; font-weight: 600 !important; color: var(--sb-t1) !important; }
#sidebarRole { font-size: 10px !important; font-weight: 500 !important; color: var(--sb-acc) !important; opacity: .85 !important; }

/* ┌─────────────────────────────────────────────┐
   │  SIDEBAR NAV                                │
   └─────────────────────────────────────────────┘ */
#navMenu { padding: 4px 8px !important; flex: 1 !important; overflow-y: auto !important; }

.nav-section {
  font-size: 9px !important; font-weight: 800 !important; letter-spacing: .12em !important;
  text-transform: uppercase !important; color: var(--sb-t3) !important;
  padding: 16px 8px 4px !important; margin: 0 !important; line-height: 1 !important;
}

.crm-nav-item {
  display: flex !important; align-items: center !important; gap: 9px !important;
  padding: 7.5px 10px !important; margin: 1px 0 !important;
  border-radius: 8px !important; font-size: 12.5px !important; font-weight: 500 !important;
  color: var(--sb-t2) !important; cursor: pointer !important;
  position: relative !important; background: transparent !important;
  border: none !important; box-shadow: none !important; text-decoration: none !important;
  transition: background var(--ds), color var(--ds) !important;
}
.crm-nav-item::before { display: none !important; }
.crm-nav-item > span:first-child {
  font-size: 15px !important; width: 21px !important; text-align: center !important;
  flex-shrink: 0 !important; opacity: .7 !important; line-height: 1 !important;
  transition: opacity var(--ds), transform var(--ds) var(--sp) !important;
}
.crm-nav-item:hover {
  background: var(--sb-srf-hi) !important; color: var(--sb-t1) !important; transform: none !important;
}
.crm-nav-item:hover > span:first-child { opacity: 1 !important; transform: scale(1.1) !important; }
.crm-nav-item.is-active {
  background: var(--sb-acc-bg) !important; color: rgba(255,255,255,.95) !important; font-weight: 600 !important;
}
.crm-nav-item.is-active > span:first-child { opacity: 1 !important; }
.crm-nav-item.is-active::after {
  content: '' !important; position: absolute !important; left: -8px !important;
  top: 50% !important; transform: translateY(-50%) !important;
  width: 3px !important; height: 14px !important; border-radius: 0 3px 3px 0 !important;
  background: var(--sb-acc) !important; box-shadow: 0 0 8px var(--sb-acc-gl) !important;
}

/* ┌─────────────────────────────────────────────┐
   │  SIDEBAR FOOTER                             │
   └─────────────────────────────────────────────┘ */
.sp-sidebar-footer {
  padding: 8px 8px 14px !important; border-top: 1px solid var(--sb-bd) !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  background: transparent !important; margin-top: auto !important; flex-shrink: 0 !important;
}

#sp-theme-toggle {
  width: 100% !important; display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 8px 10px !important; border-radius: 8px !important;
  border: 1px solid var(--sb-bd) !important; background: var(--sb-srf) !important;
  color: var(--sb-t2) !important; font-size: 11.5px !important; font-weight: 500 !important;
  cursor: pointer !important; text-align: left !important; box-shadow: none !important;
  transition: background var(--ds), border-color var(--ds), color var(--ds) !important;
}
#sp-theme-toggle:hover { background: var(--sb-srf-hi) !important; color: var(--sb-t1) !important; transform: none !important; }
#sp-theme-toggle svg { flex-shrink: 0; color: var(--sb-t2) !important; }

.sp-toggle-pill {
  width: 30px !important; height: 17px !important; border-radius: 99px !important;
  background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.14) !important;
  position: relative !important; flex-shrink: 0 !important; margin-left: auto !important;
  transition: background var(--dm) !important;
}
.sp-toggle-pill::after {
  content: '' !important; position: absolute !important;
  width: 11px !important; height: 11px !important; border-radius: 50% !important;
  background: rgba(255,255,255,.38) !important; top: 2px !important; left: 2px !important;
  transition: transform var(--dm) var(--sp), background var(--dm) !important;
}
body.crm-light-theme .sp-toggle-pill { background: var(--sb-acc) !important; border-color: var(--sb-acc) !important; }
body.crm-light-theme .sp-toggle-pill::after { background: #fff !important; transform: translateX(13px) !important; }

.sp-logout-btn {
  display: flex !important; align-items: center !important; gap: 8px !important;
  width: 100% !important; padding: 8px 10px !important; border-radius: 8px !important;
  border: none !important; background: transparent !important;
  color: var(--sb-t2) !important; font-size: 11.5px !important; font-weight: 500 !important;
  cursor: pointer !important; text-align: left !important; box-shadow: none !important;
  transition: background var(--ds), color var(--ds) !important;
}
.sp-logout-btn:hover { background: rgba(248,113,113,.12) !important; color: #fca5a5 !important; transform: none !important; }
.sp-logout-btn svg { flex-shrink: 0; }

.sp-theme-icon-dark  { display: inline-block !important; }
.sp-theme-icon-light { display: none !important; }
body.crm-light-theme .sp-theme-icon-dark  { display: none !important; }
body.crm-light-theme .sp-theme-icon-light { display: inline-block !important; }

/* ┌─────────────────────────────────────────────┐
   │  TOPBAR                                     │
   └─────────────────────────────────────────────┘ */
.crm-header {
  height: 52px !important;
  background: var(--s1) !important;
  border-bottom: 1px solid var(--bd) !important;
  box-shadow: none !important; backdrop-filter: none !important;
  padding: 0 22px !important;
  display: flex !important; align-items: center !important;
  justify-content: space-between !important; gap: 12px !important;
  position: sticky !important; top: 0 !important; z-index: 30 !important;
  transition: background var(--dl) var(--eo), border-color var(--dl) var(--eo) !important;
}
body.crm-light-theme .crm-header {
  background: var(--s1) !important;
  border-bottom-color: var(--bd) !important;
  box-shadow: 0 1px 4px rgba(20,30,60,.06) !important;
}

#pageTitle {
  font-size: 13.5px !important; font-weight: 700 !important;
  color: var(--t1) !important; letter-spacing: -.015em !important;
}
#pageDate { font-size: 10px !important; color: var(--t3) !important; font-weight: 400 !important; }

#globalSearch {
  background: var(--bg) !important; border: 1px solid var(--bdh) !important;
  border-radius: var(--rp) !important; color: var(--t1) !important;
  font-size: 12px !important; height: 33px !important; padding: 0 14px 0 34px !important;
  transition: border-color var(--ds), box-shadow var(--ds) !important;
}
#globalSearch:focus {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 3px var(--acc-s) !important; outline: none !important;
}
#globalSearch::placeholder { color: var(--t3) !important; font-size: 11.5px !important; }
body.crm-light-theme #globalSearch {
  background: var(--s2) !important;
  border-color: var(--bd) !important;
}

#hamburgerBtn {
  background: var(--s2) !important; border: 1px solid var(--bd) !important;
  border-radius: 8px !important; color: var(--t2) !important;
  padding: 7px !important; box-shadow: none !important;
  transition: background var(--ds) !important;
}
#hamburgerBtn:hover { background: var(--s3) !important; color: var(--t1) !important; }

/* ┌─────────────────────────────────────────────┐
   │  BACKGROUND OVERRIDES (scoped to #app)      │
   └─────────────────────────────────────────────┘ */
#app [class~="bg-slate-950"],
#app [class~="bg-slate-950\/95"], #app [class~="bg-slate-950\/90"],
#app [class~="bg-slate-950\/80"], #app [class~="bg-slate-950\/70"],
#app [class~="bg-slate-950\/60"], #app [class~="bg-slate-950\/50"],
#app [class~="bg-slate-950\/40"] { background-color: var(--bg) !important; }

#app [class~="bg-slate-900"],
#app [class~="bg-slate-900\/95"], #app [class~="bg-slate-900\/90"],
#app [class~="bg-slate-900\/80"], #app [class~="bg-slate-900\/70"],
#app [class~="bg-slate-900\/60"], #app [class~="bg-slate-900\/50"],
#app [class~="bg-slate-900\/40"], #app [class~="bg-slate-900\/30"] { background-color: var(--s1) !important; }

#app [class~="bg-slate-800"],
#app [class~="bg-slate-800\/90"], #app [class~="bg-slate-800\/80"],
#app [class~="bg-slate-800\/70"], #app [class~="bg-slate-800\/60"],
#app [class~="bg-slate-800\/50"], #app [class~="bg-slate-800\/40"],
#app [class~="bg-slate-800\/30"], #app [class~="bg-slate-800\/20"] { background-color: var(--s2) !important; }

#app [class~="bg-slate-700"],
#app [class~="bg-slate-700\/60"], #app [class~="bg-slate-700\/50"],
#app [class~="bg-slate-700\/40"] { background-color: var(--s3) !important; }

/* Sidebar inner bg overrides → pass-through */
#app .crm-sidebar [class*="bg-slate-"] { background-color: transparent !important; }
#app .crm-sidebar #sidebarProfileCard { background: var(--sb-srf) !important; }

/* ── LIGHT MODE BACKGROUND OVERRIDES ─────────────────────────── */
body.crm-light-theme #app [class~="bg-slate-950"],
body.crm-light-theme #app [class~="bg-slate-950\/90"],
body.crm-light-theme #app [class~="bg-slate-950\/80"],
body.crm-light-theme #app [class~="bg-slate-950\/70"],
body.crm-light-theme #app [class~="bg-slate-950\/60"],
body.crm-light-theme #app [class~="bg-slate-950\/50"],
body.crm-light-theme #app [class~="bg-slate-950\/40"] { background-color: var(--s2) !important; }

body.crm-light-theme #app [class~="bg-slate-900"],
body.crm-light-theme #app [class~="bg-slate-900\/95"],
body.crm-light-theme #app [class~="bg-slate-900\/90"],
body.crm-light-theme #app [class~="bg-slate-900\/80"],
body.crm-light-theme #app [class~="bg-slate-900\/70"],
body.crm-light-theme #app [class~="bg-slate-900\/60"],
body.crm-light-theme #app [class~="bg-slate-900\/50"],
body.crm-light-theme #app [class~="bg-slate-900\/40"],
body.crm-light-theme #app [class~="bg-slate-900\/30"] { background-color: var(--s1) !important; }

body.crm-light-theme #app [class~="bg-slate-800"],
body.crm-light-theme #app [class~="bg-slate-800\/80"],
body.crm-light-theme #app [class~="bg-slate-800\/60"],
body.crm-light-theme #app [class~="bg-slate-800\/50"],
body.crm-light-theme #app [class~="bg-slate-800\/40"],
body.crm-light-theme #app [class~="bg-slate-800\/30"],
body.crm-light-theme #app [class~="bg-slate-800\/20"] { background-color: var(--s2) !important; }

body.crm-light-theme #app [class~="bg-slate-700"],
body.crm-light-theme #app [class~="bg-slate-700\/50"],
body.crm-light-theme #app [class~="bg-slate-700\/40"] { background-color: var(--s3) !important; }

/* ┌─────────────────────────────────────────────┐
   │  GRADIENT BACKGROUNDS (dark-to-color)       │
   └─────────────────────────────────────────────┘ */
/* In dark mode: turn gradients into flat card bg */
#app [class*="from-slate-9"],
#app [class*="to-slate-9"],
#app [class*="to-indigo-950"],
#app [class*="to-brand-950"] { background: var(--s1) !important; }

/* In light mode: instead of flat white, use subtle contextual tints */
body.crm-light-theme #app [class*="from-slate-9"][class*="to-indigo-950"],
body.crm-light-theme #app [class*="via-slate-9"][class*="to-indigo-950"],
body.crm-light-theme #app [class*="from-slate-9"][class*="to-brand-950"] {
  background: linear-gradient(135deg, #f0f2fd 0%, #eef0fd 100%) !important;
}
body.crm-light-theme #app [class*="from-slate-9"] { background: var(--s1) !important; }
body.crm-light-theme #app [class*="to-slate-9"]   { background: var(--s1) !important; }

/* ┌─────────────────────────────────────────────┐
   │  TEXT OVERRIDES (scoped)                    │
   └─────────────────────────────────────────────┘ */
/* Primary text */
#app [class~="text-white"],
#app [class~="text-slate-50"],
#app [class~="text-slate-100"],
#app [class~="text-slate-200"] { color: var(--t1) !important; }
#app [class~="text-slate-300"]  { color: var(--t2) !important; }
#app [class~="text-slate-400"]  { color: var(--t3) !important; }
#app [class~="text-slate-500"],
#app [class~="text-slate-600"]  { color: var(--t4) !important; }

/* Protect text-white inside colored fill buttons — must come AFTER base overrides */
#app button[class*="bg-indigo"] [class~="text-white"],
#app button[class*="bg-brand"]  [class~="text-white"],
#app button[class*="bg-emerald"][class~="text-white"],
#app button[class*="bg-red"]    [class~="text-white"],
#app button[class*="bg-rose"]   [class~="text-white"],
#app button[class*="bg-amber"]  [class~="text-white"],
#app button[class*="bg-yellow"] [class~="text-white"],
#app a[class*="bg-indigo"]      [class~="text-white"],
#app [class~="bg-indigo-600"]   [class~="text-white"],
#app [class~="bg-indigo-500"]   [class~="text-white"],
#app [class~="bg-emerald-600"]  [class~="text-white"],
#app [class~="bg-red-600"]      [class~="text-white"],
#app [class~="bg-rose-600"]     [class~="text-white"] { color: #ffffff !important; }

/* Sidebar text — always dark-scheme */
#app .crm-sidebar [class*="text-"] { color: inherit !important; }
#app .crm-sidebar #sidebarName { color: var(--sb-t1) !important; }
#app .crm-sidebar #sidebarRole { color: var(--sb-acc) !important; }

/* Modal text */
#modalOverlay [class~="text-white"],
#modalOverlay [class~="text-slate-100"],
#modalOverlay [class~="text-slate-200"] { color: var(--t1) !important; }
#modalOverlay [class~="text-slate-300"] { color: var(--t2) !important; }
#modalOverlay [class~="text-slate-400"] { color: var(--t3) !important; }
#modalOverlay [class~="text-slate-500"] { color: var(--t4) !important; }

/* Accent / semantic text */
#app [class~="text-brand-300"],
#app [class~="text-brand-400"],
#app [class~="text-brand-500"]   { color: var(--acc-t) !important; }
#app [class~="text-indigo-300"],
#app [class~="text-indigo-400"]  { color: var(--acc-t) !important; }
#app [class~="text-indigo-500"],
#app [class~="text-indigo-600"]  { color: var(--acc) !important; }
#app [class~="text-emerald-300"],
#app [class~="text-emerald-400"] { color: var(--g) !important; }
#app [class~="text-emerald-500"],
#app [class~="text-emerald-600"] { color: var(--g) !important; }
#app [class~="text-amber-300"],
#app [class~="text-amber-400"],
#app [class~="text-yellow-300"],
#app [class~="text-yellow-400"]  { color: var(--y) !important; }
#app [class~="text-amber-500"],
#app [class~="text-yellow-500"]  { color: var(--y) !important; }
#app [class~="text-rose-300"],
#app [class~="text-rose-400"],
#app [class~="text-red-300"],
#app [class~="text-red-400"]     { color: var(--r) !important; }
#app [class~="text-red-500"],
#app [class~="text-rose-500"]    { color: var(--r) !important; }
#app [class~="text-sky-300"],
#app [class~="text-sky-400"],
#app [class~="text-cyan-300"],
#app [class~="text-cyan-400"]    { color: var(--b) !important; }
#app [class~="text-violet-300"],
#app [class~="text-violet-400"],
#app [class~="text-purple-300"],
#app [class~="text-purple-400"]  { color: var(--p) !important; }

/* Light mode: gradient text (bg-clip-text text-transparent) */
body.crm-light-theme #app [class~="text-transparent"][class~="bg-clip-text"] {
  background: linear-gradient(135deg, var(--t1) 0%, var(--acc) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ┌─────────────────────────────────────────────┐
   │  BORDER OVERRIDES                           │
   └─────────────────────────────────────────────┘ */
#app [class~="border-slate-800"],
#app [class~="border-slate-800\/60"],
#app [class~="border-slate-800\/50"],
#app [class~="border-slate-800\/40"] { border-color: var(--bd) !important; }
#app [class~="border-slate-700"],
#app [class~="border-slate-700\/60"],
#app [class~="border-slate-700\/50"] { border-color: var(--bdh) !important; }

#app [class~="divide-slate-800"] > * + * { border-top-color: var(--bd) !important; }
#app [class*="divide-slate-8"] > * + * { border-top-color: var(--bd) !important; }
#app [class*="divide-slate-7"] > * + * { border-top-color: var(--bdh) !important; }

#modalOverlay [class~="border-slate-800"],
#modalOverlay [class~="border-slate-700"] { border-color: var(--bd) !important; }

/* Light mode — colored accent borders stay visible */
body.crm-light-theme #app [class*="border-indigo-500"],
body.crm-light-theme #app [class*="border-indigo-400"] { border-color: rgba(67,85,212,.25) !important; }
body.crm-light-theme #app [class*="border-emerald-500"],
body.crm-light-theme #app [class*="border-emerald-400"] { border-color: rgba(4,120,87,.25) !important; }
body.crm-light-theme #app [class*="border-red-500"],
body.crm-light-theme #app [class*="border-rose-500"] { border-color: rgba(185,28,28,.22) !important; }
body.crm-light-theme #app [class*="border-yellow-500"],
body.crm-light-theme #app [class*="border-amber-500"] { border-color: rgba(180,83,9,.22) !important; }

/* ┌─────────────────────────────────────────────┐
   │  GLASS CARDS                                │
   └─────────────────────────────────────────────┘ */
#app .glass-card, #app .glass-panel {
  background: var(--s1) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r9) !important;
  box-shadow: var(--e2) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: box-shadow var(--dm) var(--eo), border-color var(--dm) var(--eo) !important;
}
#app .glass-card:hover, #app .glass-panel:hover {
  box-shadow: var(--e3) !important; border-color: var(--bdh) !important;
}
body.crm-light-theme #app .glass-card,
body.crm-light-theme #app .glass-panel {
  background: var(--s1) !important; border-color: var(--bd) !important;
  box-shadow: var(--e2) !important;
}

/* ┌─────────────────────────────────────────────┐
   │  TOPBAR BUTTONS                             │
   └─────────────────────────────────────────────┘ */
#topbarActions.lead-topbar-actions > .lead-topbar-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  height: 32px !important; padding: 0 12px !important;
  border-radius: var(--r5) !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  white-space: nowrap !important; cursor: pointer !important;
  border: 1px solid var(--bd) !important;
  background: var(--s2) !important; color: var(--t2) !important;
  transition: background var(--ds), color var(--ds), border-color var(--ds), box-shadow var(--ds) !important;
  box-shadow: none !important;
}
#topbarActions.lead-topbar-actions > .lead-topbar-btn:hover {
  background: var(--s3) !important; color: var(--t1) !important; transform: none !important;
}
#topbarActions.lead-topbar-actions > .lead-topbar-btn:active { transform: scale(0.96) !important; }

#topbarActions.lead-topbar-actions > .lead-topbar-btn--primary {
  background: var(--acc) !important; border-color: transparent !important;
  color: #fff !important; box-shadow: var(--ea) !important;
}
#topbarActions.lead-topbar-actions > .lead-topbar-btn--primary:hover { background: var(--acc-h) !important; }

#topbarActions.lead-topbar-actions > .lead-topbar-btn--success {
  background: var(--g) !important; border-color: transparent !important;
  color: #fff !important;
}
#topbarActions.lead-topbar-actions > .lead-topbar-btn--success:hover { filter: brightness(1.06) !important; }

#topbarActions.lead-topbar-actions > .lead-topbar-btn--ghost {
  background: transparent !important;
  border-color: var(--bd) !important; color: var(--t3) !important;
}
#topbarActions.lead-topbar-actions > .lead-topbar-btn--ghost:hover {
  background: var(--s2) !important; color: var(--t2) !important; border-color: var(--bdh) !important;
}

/* ┌─────────────────────────────────────────────┐
   │  CONTENT BUTTONS (generic)                  │
   └─────────────────────────────────────────────┘ */
#mainContent button, #modalOverlay button {
  transition: background var(--ds) var(--eo), color var(--ds) var(--eo),
    border-color var(--ds) var(--eo), box-shadow var(--ds) var(--eo),
    transform var(--ds) var(--sp), filter var(--ds) !important;
}
#mainContent button:active:not(:disabled),
#modalOverlay button:active:not(:disabled) { transform: scale(0.97) !important; }

/* Accent fill buttons */
#mainContent [class~="bg-indigo-600"],
#mainContent [class~="bg-brand-600"] {
  background: var(--acc) !important; border-color: transparent !important;
  color: #fff !important; box-shadow: var(--ea) !important;
}
#mainContent [class~="bg-indigo-600"]:hover,
#mainContent [class~="bg-brand-600"]:hover { background: var(--acc-h) !important; }

#mainContent [class~="bg-indigo-500"] {
  background: var(--acc) !important; border-color: transparent !important; color: #fff !important;
}
#mainContent [class~="bg-indigo-500"]:hover { background: var(--acc-h) !important; }

#mainContent [class~="bg-emerald-600"],
#mainContent [class~="bg-green-600"] {
  background: var(--g) !important; border-color: transparent !important; color: #fff !important;
}
#mainContent [class~="bg-emerald-500"] {
  background: var(--g) !important; border-color: transparent !important; color: #fff !important;
}
#mainContent [class~="bg-rose-600"],
#mainContent [class~="bg-red-600"] {
  background: var(--r) !important; border-color: transparent !important; color: #fff !important;
}

/* Light: fix colored fill button shadows */
body.crm-light-theme #mainContent [class~="bg-indigo-600"],
body.crm-light-theme #mainContent [class~="bg-brand-600"],
body.crm-light-theme #mainContent [class~="bg-indigo-500"] {
  box-shadow: 0 2px 8px rgba(67,85,212,.28) !important;
}
body.crm-light-theme #mainContent [class~="bg-emerald-600"],
body.crm-light-theme #mainContent [class~="bg-green-600"],
body.crm-light-theme #mainContent [class~="bg-emerald-500"] {
  box-shadow: 0 2px 8px rgba(4,120,87,.22) !important;
}

/* Ghost / secondary buttons */
#mainContent [class~="bg-slate-800"][class~="hover:bg-slate-700"]:not(.crm-nav-item),
#modalOverlay [class~="bg-slate-800"][class~="hover:bg-slate-700"] {
  background: var(--s2) !important; border: 1px solid var(--bd) !important;
  color: var(--t2) !important; box-shadow: none !important;
}
#mainContent [class~="bg-slate-800"][class~="hover:bg-slate-700"]:not(.crm-nav-item):hover,
#modalOverlay [class~="bg-slate-800"][class~="hover:bg-slate-700"]:hover {
  background: var(--s3) !important; color: var(--t1) !important;
}

/* modern-btn */
.modern-btn {
  position: relative !important; overflow: hidden !important;
  transition: all var(--dm) var(--eo) !important;
}
.modern-btn::after { display: none !important; }
.modern-btn:hover { filter: brightness(1.06) !important; }
.modern-btn:active { transform: scale(0.97) !important; filter: brightness(.98) !important; }

/* crm-btn */
.crm-btn {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  border-radius: var(--r5) !important; padding: 7px 14px !important;
  font-size: 12px !important; font-weight: 600 !important; min-height: 0 !important;
  transition: background var(--ds), color var(--ds), box-shadow var(--ds) !important;
}
.crm-btn:hover { transform: none !important; filter: brightness(1.06) !important; }
.crm-btn-soft {
  background: var(--s2) !important; border: 1px solid var(--bd) !important;
  color: var(--t2) !important;
}
.crm-btn-strong {
  background: var(--acc) !important; border: none !important;
  color: #fff !important; box-shadow: var(--ea) !important;
}
.crm-btn-strong:hover { background: var(--acc-h) !important; filter: none !important; }

/* ┌─────────────────────────────────────────────┐
   │  FORM INPUTS                                │
   └─────────────────────────────────────────────┘ */
#app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
#app textarea, #app select,
#modalOverlay input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
#modalOverlay textarea, #modalOverlay select {
  background: var(--bg) !important; border: 1px solid var(--bdh) !important;
  border-radius: var(--r5) !important; color: var(--t1) !important;
  font-size: 12.5px !important; box-shadow: none !important;
  transition: border-color var(--ds), box-shadow var(--ds) !important;
}
#app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
#app textarea:focus, #app select:focus,
#modalOverlay input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
#modalOverlay textarea:focus, #modalOverlay select:focus {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 3px var(--acc-s) !important; outline: none !important;
}
#app input::placeholder, #app textarea::placeholder,
#modalOverlay input::placeholder, #modalOverlay textarea::placeholder {
  color: var(--t4) !important; font-size: 12px !important;
}
#app select option, #modalOverlay select option {
  background: var(--s2) !important; color: var(--t1) !important;
}

/* Light mode inputs */
body.crm-light-theme #app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.crm-light-theme #app textarea,
body.crm-light-theme #app select,
body.crm-light-theme #modalOverlay input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.crm-light-theme #modalOverlay textarea,
body.crm-light-theme #modalOverlay select {
  background: var(--s1) !important;
  border-color: var(--bdh) !important;
}
body.crm-light-theme #app select option,
body.crm-light-theme #modalOverlay select option {
  background: var(--s1) !important; color: var(--t1) !important;
}

/* Range input */
#app input[type="range"] { accent-color: var(--acc) !important; }

/* Checkbox & radio */
#app input[type="checkbox"], #app input[type="radio"],
#modalOverlay input[type="checkbox"], #modalOverlay input[type="radio"] {
  accent-color: var(--acc) !important; background: transparent !important; border: none !important;
}

/* ┌─────────────────────────────────────────────┐
   │  DENSE TABLE                                │
   └─────────────────────────────────────────────┘ */
.dense-table-wrap {
  overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
  border-radius: 0 0 var(--r8) var(--r8) !important;
}
.dense-table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; }

.dense-table thead tr { background: var(--s2) !important; }
.dense-table th {
  padding: 10px 14px !important; font-size: 9px !important;
  font-weight: 800 !important; text-transform: uppercase !important;
  letter-spacing: .10em !important; color: var(--t3) !important;
  white-space: nowrap !important; border-bottom: 1px solid var(--bdh) !important;
  background: var(--s2) !important;
}
.dense-table td {
  padding: 10px 14px !important; font-size: 12px !important;
  color: var(--t2) !important; vertical-align: middle !important;
  background: transparent !important; line-height: 1.4 !important;
}
.dense-table tbody tr { border-bottom: 1px solid var(--bd) !important; transition: background var(--ds) !important; }
.dense-table tbody tr:hover { background: var(--s2) !important; }
.dense-table.compact th { padding: 8px 12px !important; }
.dense-table.compact td { padding: 8px 12px !important; font-size: 11.5px !important; }
.dense-table.tight th  { padding: 6px 10px !important; font-size: 8.5px !important; }
.dense-table.tight td  { padding: 6px 10px !important; font-size: 11px !important; }

/* Light mode table */
body.crm-light-theme .dense-table thead tr { background: var(--s3) !important; }
body.crm-light-theme .dense-table th { background: var(--s3) !important; color: var(--t3) !important; }
body.crm-light-theme .dense-table td { color: var(--t2) !important; }
body.crm-light-theme .dense-table tbody tr:hover { background: var(--s2) !important; }

/* Dense table container */
.bg-slate-900.border.border-slate-800.rounded-2xl,
#mainContent > div[class*="bg-slate-900"][class*="rounded-2xl"],
#mainContent > div[class*="bg-slate-900"][class*="border"][class*="rounded"] {
  background: var(--s1) !important; border: 1px solid var(--bd) !important;
  border-radius: var(--r8) !important; box-shadow: var(--e2) !important; overflow: hidden !important;
}

/* Table header bar */
#mainContent [class*="px-5"][class*="py-3"][class*="border-b"][class*="border-slate-800"],
#mainContent [class*="px-6"][class*="py-4"][class*="border-b"][class*="border-slate-800"] {
  background: var(--s1) !important; border-bottom-color: var(--bd) !important;
  padding: 12px 16px !important;
}

/* Pagination */
#leadsPagination, [id*="Pagination"] {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 10px 16px !important; gap: 8px !important;
  border-top: 1px solid var(--bd) !important; background: var(--s1) !important;
  font-size: 11.5px !important; color: var(--t3) !important;
}
[id*="Pagination"] button {
  height: 28px !important; padding: 0 10px !important;
  border-radius: var(--r4) !important; border: 1px solid var(--bd) !important;
  background: var(--s2) !important; color: var(--t2) !important;
  font-size: 11px !important; font-weight: 600 !important; cursor: pointer !important;
}
[id*="Pagination"] button:hover { background: var(--s3) !important; color: var(--t1) !important; }
[id*="Pagination"] button[class*="bg-brand"],
[id*="Pagination"] button[class*="bg-indigo"] {
  background: var(--acc) !important; border-color: transparent !important; color: #fff !important;
}

/* ┌─────────────────────────────────────────────┐
   │  KANBAN                                     │
   └─────────────────────────────────────────────┘ */
.kanban-pipeline-tab {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 6px 13px !important; border-radius: var(--r5) !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--t3) !important; background: transparent !important;
  border: none !important; cursor: pointer !important; white-space: nowrap !important;
  transition: background var(--ds), color var(--ds) !important;
}
.kanban-pipeline-tab:hover { background: var(--s2) !important; color: var(--t2) !important; }
.kanban-pipeline-tab.is-active {
  background: var(--s2) !important; color: var(--t1) !important;
  font-weight: 700 !important; box-shadow: var(--e1) !important;
}

.kanban-category-chip {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 3px 9px !important; border-radius: var(--rp) !important;
  font-size: 10.5px !important; font-weight: 600 !important;
  color: var(--t3) !important; background: var(--s1) !important;
  border: 1px solid var(--bd) !important; cursor: pointer !important;
  white-space: nowrap !important;
  transition: background var(--ds), color var(--ds), border-color var(--ds) !important;
}
.kanban-category-chip:hover { background: var(--s2) !important; color: var(--t2) !important; }
.kanban-category-chip.is-active {
  background: color-mix(in srgb, var(--kanban-chip-color,#5b72f0) 13%, transparent) !important;
  border-color: color-mix(in srgb, var(--kanban-chip-color,#5b72f0) 30%, transparent) !important;
  color: var(--t1) !important; font-weight: 700 !important;
}
.kanban-category-chip__dot {
  width: 6px !important; height: 6px !important; border-radius: 50% !important;
  background: var(--kanban-chip-color,#5b72f0) !important; flex-shrink: 0 !important;
}

[id^="kanban-col-"] {
  background: var(--s1) !important; border: 1px solid var(--bd) !important;
  border-radius: var(--r8) !important; box-shadow: none !important; overflow: hidden !important;
}
[id^="kanban-col-"] > div:first-child {
  background: var(--s2) !important; border-bottom: 1px solid var(--bd) !important;
  padding: 10px 12px 8px !important; position: sticky !important; top: 0 !important; z-index: 5 !important;
}
.kanban-drop-zone {
  padding: 8px !important; gap: 5px !important;
  display: flex !important; flex-direction: column !important; min-height: 60px !important;
}
.kanban-drop-zone.drag-over {
  background: var(--acc-s) !important;
  outline: 2px dashed var(--acc) !important; outline-offset: -4px !important;
  border-radius: var(--r4) !important;
}
[id^="kanban-search-"] {
  background: var(--bg) !important; border: 1px solid var(--bd) !important;
  border-radius: var(--r4) !important; font-size: 10.5px !important;
  color: var(--t2) !important; padding-left: 24px !important; height: 26px !important;
}
body.crm-light-theme [id^="kanban-search-"] { background: var(--s1) !important; border-color: var(--bdh) !important; }
[id^="kanban-search-"]:focus {
  border-color: var(--acc) !important; box-shadow: 0 0 0 2px var(--acc-s) !important;
}

.kanban-card-draggable {
  background: var(--bg) !important;
  border: 1px solid var(--bdh) !important; border-left-width: 2.5px !important;
  border-radius: var(--r5) !important; padding: 8px 9px !important;
  cursor: pointer !important; box-shadow: var(--e1) !important;
  transition: box-shadow var(--ds), transform var(--ds) var(--sp) !important;
}
.kanban-card-draggable:hover { box-shadow: var(--e2) !important; transform: translateY(-1px) !important; }
.kanban-card-draggable.kanban-card-dragging {
  opacity: .5 !important; transform: scale(.97) rotate(1deg) !important; box-shadow: var(--e4) !important;
}
body.crm-light-theme .kanban-card-draggable { background: #fff !important; box-shadow: var(--e2) !important; }
body.crm-light-theme [id^="kanban-col-"] { background: var(--s2) !important; box-shadow: var(--e1) !important; }
body.crm-light-theme [id^="kanban-col-"] > div:first-child { background: var(--s3) !important; }
body.crm-light-theme .kanban-category-chip { background: var(--s1) !important; border-color: var(--bdh) !important; }

.kanban-card-action {
  width: 22px !important; height: 22px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: var(--r3) !important; font-size: 10px !important;
  border: 1px solid var(--bd) !important; background: var(--s2) !important;
  color: var(--t3) !important; cursor: pointer !important; padding: 0 !important;
  transition: background var(--ds), color var(--ds) !important;
}
.kanban-card-action:hover { background: var(--s3) !important; color: var(--t1) !important; }
.kanban-card-action--next:hover   { background: var(--g-s) !important; color: var(--g) !important; }
.kanban-card-action--danger:hover { background: var(--r-s) !important; color: var(--r) !important; }
.kanban-card-action--note:hover   { background: var(--acc-s) !important; color: var(--acc-t) !important; }

.kanban-program-select {
  background: var(--s1) !important; border: 1px solid var(--bdh) !important;
  border-radius: var(--r5) !important; color: var(--t2) !important;
  font-size: 11px !important; height: 30px !important; padding: 0 8px !important;
}

/* ┌─────────────────────────────────────────────┐
   │  BADGES & SEMANTIC CHIPS                    │
   └─────────────────────────────────────────────┘ */
#app [class~="px-2"][class~="py-0.5"][class~="rounded"],
#app [class~="px-2"][class~="py-1"][class~="rounded"],
#app [class~="px-2.5"][class~="py-0.5"][class~="rounded"],
#app [class~="px-2.5"][class~="py-1"][class~="rounded"],
#app [class~="px-3"][class~="py-0.5"][class~="rounded"],
#app [class~="px-3"][class~="py-1"][class~="rounded"],
#modalOverlay [class~="px-2"][class~="py-0.5"][class~="rounded"],
#modalOverlay [class~="px-2.5"][class~="py-0.5"][class~="rounded"] {
  font-size: 10px !important; font-weight: 700 !important;
  padding: 2px 7px !important; border-radius: var(--r3) !important;
}
#app [class~="rounded-full"][class~="px-2"],
#app [class~="rounded-full"][class~="px-2.5"],
#app [class~="rounded-full"][class~="px-3"],
#modalOverlay [class~="rounded-full"][class~="px-2"],
#modalOverlay [class~="rounded-full"][class~="px-2.5"] {
  border-radius: var(--rp) !important; font-size: 10px !important; font-weight: 700 !important;
}

/* Semantic tint backgrounds — unified light/dark via CSS vars */
#app [class~="bg-rose-500\/20"],
#app [class~="bg-rose-500\/10"]   { background-color: var(--r-s) !important; }
#app [class~="bg-amber-500\/20"],
#app [class~="bg-amber-500\/10"],
#app [class~="bg-yellow-500\/20"],
#app [class~="bg-yellow-500\/10"] { background-color: var(--y-s) !important; }
#app [class~="bg-sky-500\/20"],
#app [class~="bg-sky-500\/10"]    { background-color: var(--b-s) !important; }
#app [class~="bg-emerald-500\/20"],
#app [class~="bg-emerald-500\/10"]{ background-color: var(--g-s) !important; }
#app [class~="bg-violet-500\/20"],
#app [class~="bg-violet-500\/10"] { background-color: var(--p-s) !important; }
#app [class~="bg-red-500\/20"],
#app [class~="bg-red-500\/10"]    { background-color: var(--r-s) !important; }
#app [class~="bg-indigo-500\/20"],
#app [class~="bg-indigo-500\/10"],
#app [class~="bg-brand-500\/10"]  { background-color: var(--acc-s) !important; }
#app [class~="bg-blue-500\/10"],
#app [class~="bg-blue-500\/20"]   { background-color: var(--b-s) !important; }

/* Light mode — tint backgrounds need slightly more saturation */
body.crm-light-theme #app [class~="bg-indigo-500\/5"],
body.crm-light-theme #app [class~="bg-indigo-950\/40"],
body.crm-light-theme #app [class~="bg-brand-500\/5"]  { background-color: rgba(67,85,212,.06) !important; }
body.crm-light-theme #app [class~="bg-emerald-500\/5"],
body.crm-light-theme #app [class~="bg-emerald-950\/40"] { background-color: rgba(4,120,87,.06) !important; }
body.crm-light-theme #app [class~="bg-red-500\/5"],
body.crm-light-theme #app [class~="bg-red-950\/40"]    { background-color: rgba(185,28,28,.06) !important; }
body.crm-light-theme #app [class~="bg-yellow-500\/5"],
body.crm-light-theme #app [class~="bg-amber-950\/40"]  { background-color: rgba(180,83,9,.06) !important; }

/* ┌─────────────────────────────────────────────┐
   │  SECTION HEADER TYPOGRAPHY                  │
   └─────────────────────────────────────────────┘ */
#mainContent [class*="uppercase"][class*="tracking-widest"],
#mainContent [class*="uppercase"][class*="tracking-[0."],
#mainContent [class*="font-black"][class*="uppercase"] {
  font-size: 9px !important; letter-spacing: .14em !important;
  color: var(--acc-t) !important; font-weight: 800 !important;
}
body.crm-light-theme #mainContent [class*="uppercase"][class*="tracking-widest"],
body.crm-light-theme #mainContent [class*="uppercase"][class*="tracking-[0."],
body.crm-light-theme #mainContent [class*="font-black"][class*="uppercase"] {
  color: var(--acc) !important;
}

#mainContent [class~="text-2xl"],
#mainContent [class~="text-3xl"],
#mainContent [class~="text-xl"] { color: var(--t1) !important; letter-spacing: -.02em !important; line-height: 1.2 !important; }
#mainContent [class~="text-2xl"]  { font-size: 20px !important; }
#mainContent [class~="text-3xl"]  { font-size: 24px !important; }
#mainContent [class~="text-xl"]   { font-size: 17px !important; }
#mainContent [class~="text-lg"]   { font-size: 15px !important; }
#mainContent [class~="text-base"] { font-size: 13.5px !important; }
#mainContent [class~="text-sm"]   { font-size: 12.5px !important; }
#mainContent [class~="text-xs"]   { font-size: 11.5px !important; }

/* ┌─────────────────────────────────────────────┐
   │  MODAL                                      │
   └─────────────────────────────────────────────┘ */
#modalOverlay {
  backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
  background: rgba(0,0,0,.55) !important;
}
body.crm-light-theme #modalOverlay { background: rgba(10,20,60,.28) !important; }

#modal {
  background: var(--s1) !important; border: 1px solid var(--bdh) !important;
  border-radius: var(--r8) !important; box-shadow: var(--e4) !important;
}
#modal h2, #modal h3 {
  color: var(--t1) !important; font-size: 14.5px !important;
  font-weight: 700 !important; letter-spacing: -.01em !important;
}
#modal .crm-modal-header {
  background: var(--s1) !important; border-bottom: 1px solid var(--bd) !important;
  padding: 14px 20px !important;
}
#modal .crm-modal-footer {
  background: var(--s2) !important; border-top: 1px solid var(--bd) !important;
  padding: 12px 20px !important;
}

#modalOverlay [class~="bg-slate-900"],
#modalOverlay [class~="bg-slate-900\/90"],
#modalOverlay [class~="bg-slate-900\/80"] { background-color: var(--s1) !important; }
#modalOverlay [class~="bg-slate-800"],
#modalOverlay [class~="bg-slate-800\/80"],
#modalOverlay [class~="bg-slate-800\/60"] { background-color: var(--s2) !important; }

/* ┌─────────────────────────────────────────────┐
   │  TOAST                                      │
   └─────────────────────────────────────────────┘ */
#toast {
  background: var(--s2) !important; border: 1px solid var(--bdh) !important;
  border-radius: var(--r6) !important; box-shadow: var(--e4) !important;
  color: var(--t1) !important; font-size: 12.5px !important;
  padding: 10px 16px !important;
}
body.crm-light-theme #toast {
  background: var(--s1) !important; border-color: var(--bdh) !important;
  box-shadow: var(--e4) !important;
}

/* ┌─────────────────────────────────────────────┐
   │  TAB BARS (generic)                         │
   └─────────────────────────────────────────────┘ */
#mainContent div[class~="p-1"][class*="bg-slate-9"],
#mainContent div[class~="p-1"][class*="rounded-2xl"],
#mainContent div[class~="p-1"][class*="rounded-xl"],
#mainContent div[class~="p-1"][class*="border-slate-8"] {
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important; border-radius: var(--r6) !important;
  padding: 3px !important; gap: 2px !important; overflow-x: auto !important;
}
#mainContent div[class~="p-1"][class*="bg-slate-9"] button,
#mainContent div[class~="p-1"][class*="rounded-2xl"] button,
#mainContent div[class~="p-1"][class*="rounded-xl"] button,
#mainContent div[class~="p-1"][class*="border-slate-8"] button {
  border-radius: var(--r4) !important; font-size: 11.5px !important;
  font-weight: 600 !important; padding: 6px 13px !important;
  color: var(--t3) !important; background: transparent !important;
  border: none !important; white-space: nowrap !important;
  transition: background var(--ds), color var(--ds) !important; box-shadow: none !important;
}
#mainContent div[class~="p-1"][class*="bg-slate-9"] button:hover,
#mainContent div[class~="p-1"][class*="rounded-2xl"] button:hover,
#mainContent div[class~="p-1"][class*="rounded-xl"] button:hover,
#mainContent div[class~="p-1"][class*="border-slate-8"] button:hover {
  background: var(--s3) !important; color: var(--t2) !important; transform: none !important;
}

/* Active tab — high contrast in both modes */
#mainContent div[class~="p-1"] button[class*="bg-indigo-6"],
#mainContent div[class~="p-1"] button[class*="bg-brand-6"],
#mainContent div[class~="p-1"] button[class*="bg-emerald-6"],
#mainContent div[class~="p-1"] button[class*="bg-rose-6"],
#mainContent div[class~="p-1"] button[class*="bg-indigo-5"],
#mainContent div[class~="p-1"] button[class*="bg-emerald-5"],
#mainContent div[class~="p-1"] button[class*="bg-blue-5"] {
  background: var(--acc) !important; color: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.15) !important;
}

/* Light mode tab bar — slightly different active look */
body.crm-light-theme #mainContent div[class~="p-1"] button[class*="bg-indigo-6"],
body.crm-light-theme #mainContent div[class~="p-1"] button[class*="bg-brand-6"],
body.crm-light-theme #mainContent div[class~="p-1"] button[class*="bg-indigo-5"] {
  background: var(--acc) !important; color: #fff !important;
  box-shadow: 0 1px 6px rgba(67,85,212,.30) !important;
}
body.crm-light-theme #mainContent div[class~="p-1"] button[class*="bg-emerald-6"],
body.crm-light-theme #mainContent div[class~="p-1"] button[class*="bg-emerald-5"] {
  background: var(--g) !important; color: #fff !important;
}
body.crm-light-theme #mainContent div[class~="p-1"] button[class*="bg-rose-6"] {
  background: var(--r) !important; color: #fff !important;
}

/* ┌─────────────────────────────────────────────┐
   │  STAT / KPI CARDS                           │
   └─────────────────────────────────────────────┘ */
#mainContent [class~="rounded-2xl"][class~="border"][class~="p-5"],
#mainContent [class~="rounded-2xl"][class~="border"][class~="p-6"],
#mainContent [class~="rounded-3xl"][class~="border"][class~="p-6"],
#mainContent [class~="rounded-2xl"][class~="border"][class~="p-4"] {
  border-radius: var(--r8) !important; border-color: var(--bd) !important; box-shadow: var(--e2) !important;
}
#mainContent [class~="rounded-xl"][class~="border"][class~="p-4"],
#mainContent [class~="rounded-xl"][class~="border"][class~="p-5"] {
  border-radius: var(--r7) !important; border-color: var(--bd) !important;
}

/* Light: stat cards get subtle shadow */
body.crm-light-theme #mainContent [class~="rounded-2xl"][class~="border"][class~="p-5"],
body.crm-light-theme #mainContent [class~="rounded-2xl"][class~="border"][class~="p-6"],
body.crm-light-theme #mainContent [class~="rounded-3xl"][class~="border"][class~="p-6"],
body.crm-light-theme #mainContent [class~="rounded-2xl"][class~="border"][class~="p-4"] {
  box-shadow: var(--e2) !important;
}

/* KPI metric numbers */
#mainContent [class~="text-3xl"][class~="font-black"],
#mainContent [class~="text-4xl"][class~="font-black"],
#mainContent [class~="text-2xl"][class~="font-black"] {
  color: var(--t1) !important; letter-spacing: -.03em !important;
}

/* ┌─────────────────────────────────────────────┐
   │  PROGRESS BARS                              │
   └─────────────────────────────────────────────┘ */
/* Track */
#mainContent [class~="rounded-full"][class*="h-1"],
#mainContent [class~="rounded-full"][class*="h-1.5"],
#mainContent [class~="rounded-full"][class*="h-2"],
#mainContent [class~="rounded-full"][class*="h-3"] {
  background: var(--s3) !important;
}
/* In light mode, track needs more contrast */
body.crm-light-theme #mainContent [class~="rounded-full"][class*="h-1"],
body.crm-light-theme #mainContent [class~="rounded-full"][class*="h-1.5"],
body.crm-light-theme #mainContent [class~="rounded-full"][class*="h-2"],
body.crm-light-theme #mainContent [class~="rounded-full"][class*="h-3"] {
  background: rgba(30,42,80,.12) !important;
}
/* Fill bar */
#mainContent [class~="rounded-full"][class*="h-1"] [class*="bg-"],
#mainContent [class~="rounded-full"][class*="h-1.5"] [class*="bg-"],
#mainContent [class~="rounded-full"][class*="h-2"] [class*="bg-"],
#mainContent [class~="rounded-full"][class*="h-3"] [class*="bg-"] {
  border-radius: var(--rp) !important; min-width: 3px !important;
}

/* ┌─────────────────────────────────────────────┐
   │  MOBILE NAV                                 │
   └─────────────────────────────────────────────┘ */
#mobileBottomNav {
  background: var(--s1) !important; border-top: 1px solid var(--bd) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18) !important; backdrop-filter: none !important;
}
body.crm-light-theme #mobileBottomNav {
  background: var(--s1) !important; border-top-color: var(--bd) !important;
  box-shadow: 0 -2px 12px rgba(20,30,60,.08) !important;
}
#sidebarBackdrop {
  background: rgba(0,0,0,.58) !important;
  backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important;
}

/* ┌─────────────────────────────────────────────┐
   │  ACADEMIC YEAR                              │
   └─────────────────────────────────────────────┘ */
#academicYearContainer select, #academicYearContainer button {
  background: var(--s2) !important; border: 1px solid var(--bdh) !important;
  border-radius: var(--rp) !important; color: var(--t2) !important;
  font-size: 10.5px !important; font-weight: 600 !important;
  padding: 0 10px !important; height: 26px !important; cursor: pointer !important;
}
body.crm-light-theme #academicYearContainer select,
body.crm-light-theme #academicYearContainer button {
  background: var(--s1) !important; border-color: var(--bdh) !important;
  box-shadow: var(--e1) !important;
}

/* ┌─────────────────────────────────────────────┐
   │  FLOATING DIGEST WIDGET                     │
   └─────────────────────────────────────────────┘ */
#floatingDigestBtn {
  background: var(--acc) !important; border: none !important;
  box-shadow: var(--e3), var(--ea) !important;
  transition: transform var(--ds) var(--sp), box-shadow var(--ds) !important;
}
#floatingDigestBtn:hover { transform: scale(1.1) translateY(-2px) !important; }
#floatingDigestPanel {
  background: var(--s1) !important; border: 1px solid var(--bdh) !important;
  border-radius: var(--r8) !important; box-shadow: var(--e4) !important;
}
body.crm-light-theme #floatingDigestPanel { border-color: var(--bd) !important; }

/* ┌─────────────────────────────────────────────┐
   │  PAGE TRANSITION / SKELETON                 │
   └─────────────────────────────────────────────┘ */
#mainContent { animation: pgIn var(--dl) var(--eo); }
@keyframes pgIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
#mainContent .animate-pulse[class*="bg-slate-8"],
#mainContent .animate-pulse[class*="bg-slate-7"] { background: var(--s2) !important; }
body.crm-light-theme #mainContent .animate-pulse[class*="bg-slate-8"],
body.crm-light-theme #mainContent .animate-pulse[class*="bg-slate-7"] { background: var(--s3) !important; }

/* ┌─────────────────────────────────────────────┐
   │  LIGHT MODE — COMPREHENSIVE OVERRIDES       │
   └─────────────────────────────────────────────┘ */

/* Table-like inner header rows (bg-slate-950/40 used as thead bg in inline tables) */
body.crm-light-theme #app [class~="bg-slate-950\/40"],
body.crm-light-theme #app [class~="bg-slate-950\/30"] {
  background-color: var(--s3) !important;
}

/* Overflow wrappers: bg-slate-900/60 + rounded → card surface */
body.crm-light-theme #app [class~="bg-slate-900\/60"][class~="overflow-hidden"],
body.crm-light-theme #app [class~="bg-slate-900\/60"][class~="rounded-xl"],
body.crm-light-theme #app [class~="bg-slate-900\/60"][class~="rounded-2xl"] {
  background: var(--s1) !important;
  box-shadow: var(--e2) !important;
}

/* Inner card header rows (bg-slate-800/60 used for card subheaders) */
body.crm-light-theme #app [class~="bg-slate-800\/60"][class~="px-4"],
body.crm-light-theme #app [class~="bg-slate-800\/60"][class~="px-5"],
body.crm-light-theme #app [class~="bg-slate-800\/60"][class~="py-3"] {
  background-color: var(--s2) !important;
  border-bottom: 1px solid var(--bd) !important;
}

/* Input inside dark cards */
body.crm-light-theme #app [class~="bg-slate-800"][class~="border"][class~="border-slate-700"],
body.crm-light-theme #app [class~="bg-slate-800"][class~="border-slate-700"] {
  background: var(--s1) !important; border-color: var(--bdh) !important;
}

/* "ghost" inline button variant (bg-slate-900/50 border-slate-800) used in stat cards */
body.crm-light-theme #app [class~="bg-slate-900\/50"][class~="border"][class~="border-slate-800"] {
  background: var(--s2) !important; border-color: var(--bd) !important;
}

/* Standalone table rows hover */
body.crm-light-theme #app [class~="hover:bg-slate-800\/30"]:hover { background: var(--s3) !important; }
body.crm-light-theme #app [class~="hover:bg-slate-800\/20"]:hover { background: var(--s2) !important; }
body.crm-light-theme #app [class~="hover:bg-slate-900\/30"]:hover { background: var(--s2) !important; }

/* Dividers */
body.crm-light-theme #app [class~="divide-y"][class~="divide-slate-800"] > * + * { border-top-color: var(--bd) !important; }
body.crm-light-theme #app [class~="divide-slate-800"] > * + * { border-top-color: var(--bd) !important; }

/* Flat dark bg used as section accent bg → tinted light */
body.crm-light-theme #app [class*="bg-indigo-950"],
body.crm-light-theme #app [class*="bg-brand-950"]  { background-color: rgba(67,85,212,.07) !important; }
body.crm-light-theme #app [class*="bg-emerald-950"]{ background-color: rgba(4,120,87,.07) !important; }
body.crm-light-theme #app [class*="bg-red-950"],
body.crm-light-theme #app [class*="bg-rose-950"]   { background-color: rgba(185,28,28,.06) !important; }
body.crm-light-theme #app [class*="bg-yellow-950"],
body.crm-light-theme #app [class*="bg-amber-950"]  { background-color: rgba(180,83,9,.06) !important; }

/* Gradient text fix in light mode — title in section headers */
body.crm-light-theme #app .font-display[class~="text-white"],
body.crm-light-theme #app [class~="text-3xl"][class~="font-black"][class~="text-white"],
body.crm-light-theme #app [class~="text-2xl"][class~="font-black"][class~="text-white"] {
  color: var(--t1) !important;
}

/* Accent text in section header eyebrows */
body.crm-light-theme #app [class~="text-indigo-400"],
body.crm-light-theme #app [class~="text-brand-400"],
body.crm-light-theme #app [class~="text-indigo-300"] { color: var(--acc) !important; }
body.crm-light-theme #app [class~="text-emerald-400"],
body.crm-light-theme #app [class~="text-emerald-300"] { color: var(--g) !important; }
body.crm-light-theme #app [class~="text-red-400"],
body.crm-light-theme #app [class~="text-rose-400"]   { color: var(--r) !important; }
body.crm-light-theme #app [class~="text-yellow-400"],
body.crm-light-theme #app [class~="text-amber-400"]  { color: var(--y) !important; }
body.crm-light-theme #app [class~="text-blue-400"],
body.crm-light-theme #app [class~="text-sky-400"],
body.crm-light-theme #app [class~="text-cyan-400"]   { color: var(--b) !important; }
body.crm-light-theme #app [class~="text-violet-400"],
body.crm-light-theme #app [class~="text-purple-400"] { color: var(--p) !important; }

/* Slate text in light mode: text-slate-400 should be readable */
body.crm-light-theme #app [class~="text-slate-300"]  { color: var(--t2) !important; }
body.crm-light-theme #app [class~="text-slate-400"]  { color: var(--t3) !important; }
body.crm-light-theme #app [class~="text-slate-500"],
body.crm-light-theme #app [class~="text-slate-600"]  { color: var(--t4) !important; }

/* Shadows on light cards inside light bg */
body.crm-light-theme #app [class~="shadow-lg"][class~="rounded-2xl"],
body.crm-light-theme #app [class~="shadow-xl"][class~="rounded-2xl"],
body.crm-light-theme #app [class~="shadow-2xl"][class~="rounded-2xl"] {
  box-shadow: var(--e3) !important;
}

/* Shadow color classes — remove dark-mode-only colored shadows in light */
body.crm-light-theme #app [class*="shadow-indigo-500"],
body.crm-light-theme #app [class*="shadow-brand-500"],
body.crm-light-theme #app [class*="shadow-emerald-500"],
body.crm-light-theme #app [class*="shadow-red-500"] { box-shadow: var(--e2) !important; }

/* Leading text: large white headings inside gradient header panels */
body.crm-light-theme #app [class~="rounded-2xl"] [class~="text-white"][class~="font-black"],
body.crm-light-theme #app [class~="rounded-3xl"] [class~="text-white"][class~="font-black"] {
  color: var(--t1) !important;
}
body.crm-light-theme #app [class~="rounded-2xl"] [class~="text-slate-400"],
body.crm-light-theme #app [class~="rounded-3xl"] [class~="text-slate-400"] { color: var(--t3) !important; }

/* Inline code/pre in light mode */
body.crm-light-theme #app pre,
body.crm-light-theme #app code {
  background: var(--s2) !important; color: var(--t2) !important;
  border: 1px solid var(--bd) !important;
}

/* Empty state text */
body.crm-light-theme #app .empty-state { color: var(--t3) !important; }

/* ┌─────────────────────────────────────────────┐
   │  LIGHT MODE — BUTTON OVERRIDES              │
   └─────────────────────────────────────────────┘ */
/* All solid dark buttons become proper light UI buttons */
body.crm-light-theme #mainContent button[class*="bg-slate-800"],
body.crm-light-theme #mainContent button[class*="bg-slate-900"],
body.crm-light-theme #mainContent button[class*="bg-slate-700"] {
  background: var(--s1) !important; border: 1px solid var(--bdh) !important;
  color: var(--t2) !important; box-shadow: var(--e1) !important;
}
body.crm-light-theme #mainContent button[class*="bg-slate-800"]:hover,
body.crm-light-theme #mainContent button[class*="bg-slate-900"]:hover,
body.crm-light-theme #mainContent button[class*="bg-slate-700"]:hover {
  background: var(--s2) !important; color: var(--t1) !important;
}

/* Colored icon/action buttons in light mode */
body.crm-light-theme #mainContent button[class~="bg-slate-800"][class~="rounded-full"],
body.crm-light-theme #mainContent button[class~="bg-slate-900"][class~="rounded-full"] {
  background: var(--s2) !important; border: 1px solid var(--bd) !important;
  color: var(--t2) !important;
}

/* Text inside colored fill buttons stays white */
body.crm-light-theme #mainContent [class~="bg-indigo-600"],
body.crm-light-theme #mainContent [class~="bg-brand-600"],
body.crm-light-theme #mainContent [class~="bg-indigo-500"] {
  background: var(--acc) !important; color: #fff !important;
}
body.crm-light-theme #mainContent [class~="bg-emerald-600"],
body.crm-light-theme #mainContent [class~="bg-emerald-500"] {
  background: var(--g) !important; color: #fff !important;
}
body.crm-light-theme #mainContent [class~="bg-red-600"],
body.crm-light-theme #mainContent [class~="bg-rose-600"] {
  background: var(--r) !important; color: #fff !important;
}

/* ┌─────────────────────────────────────────────────────────────────┐
   │  LIGHT MODE — "Soft pill" buttons/badges readability fix        │
   │  Pattern: bg-{color}-500/10 + text-{color}-300 + border-{color} │
   │  Appended last so it wins cascade ties over earlier rules.      │
   └─────────────────────────────────────────────────────────────────┘ */
body.crm-light-theme #app [class~="bg-brand-500\/10"],
body.crm-light-theme #app [class~="bg-brand-500\/20"],
body.crm-light-theme #app [class~="bg-indigo-500\/10"],
body.crm-light-theme #app [class~="bg-indigo-500\/20"],
body.crm-light-theme #app [class~="bg-blue-500\/10"],
body.crm-light-theme #app [class~="bg-blue-500\/20"],
body.crm-light-theme #app [class~="bg-sky-500\/10"],
body.crm-light-theme #app [class~="bg-sky-500\/20"],
body.crm-light-theme #app [class~="bg-cyan-500\/10"],
body.crm-light-theme #app [class~="bg-cyan-500\/20"] { background-color: rgba(67,85,212,.10) !important; }
body.crm-light-theme #app [class~="text-brand-300"],
body.crm-light-theme #app [class~="text-indigo-300"],
body.crm-light-theme #app [class~="text-blue-300"],
body.crm-light-theme #app [class~="text-sky-300"],
body.crm-light-theme #app [class~="text-cyan-300"] { color: #3142a8 !important; }
body.crm-light-theme #app [class~="border-brand-500\/30"],
body.crm-light-theme #app [class~="border-indigo-500\/30"],
body.crm-light-theme #app [class~="border-blue-500\/30"],
body.crm-light-theme #app [class~="border-sky-500\/30"],
body.crm-light-theme #app [class~="border-cyan-500\/30"] { border-color: rgba(67,85,212,.35) !important; }

body.crm-light-theme #app [class~="bg-emerald-500\/10"],
body.crm-light-theme #app [class~="bg-emerald-500\/20"],
body.crm-light-theme #app [class~="bg-teal-500\/10"],
body.crm-light-theme #app [class~="bg-teal-500\/20"],
body.crm-light-theme #app [class~="bg-green-500\/10"],
body.crm-light-theme #app [class~="bg-green-500\/20"] { background-color: rgba(5,150,105,.10) !important; }
body.crm-light-theme #app [class~="text-emerald-300"],
body.crm-light-theme #app [class~="text-teal-300"],
body.crm-light-theme #app [class~="text-green-300"] { color: #0f6b4f !important; }
body.crm-light-theme #app [class~="border-emerald-500\/30"],
body.crm-light-theme #app [class~="border-teal-500\/30"],
body.crm-light-theme #app [class~="border-green-500\/30"] { border-color: rgba(5,150,105,.35) !important; }

body.crm-light-theme #app [class~="bg-amber-500\/10"],
body.crm-light-theme #app [class~="bg-amber-500\/20"],
body.crm-light-theme #app [class~="bg-yellow-500\/10"],
body.crm-light-theme #app [class~="bg-yellow-500\/20"],
body.crm-light-theme #app [class~="bg-orange-500\/10"],
body.crm-light-theme #app [class~="bg-orange-500\/20"] { background-color: rgba(180,83,9,.10) !important; }
body.crm-light-theme #app [class~="text-amber-300"],
body.crm-light-theme #app [class~="text-yellow-300"],
body.crm-light-theme #app [class~="text-orange-300"] { color: #9a5b09 !important; }
body.crm-light-theme #app [class~="border-amber-500\/30"],
body.crm-light-theme #app [class~="border-yellow-500\/30"],
body.crm-light-theme #app [class~="border-orange-500\/30"] { border-color: rgba(180,83,9,.35) !important; }

body.crm-light-theme #app [class~="bg-rose-500\/10"],
body.crm-light-theme #app [class~="bg-rose-500\/20"],
body.crm-light-theme #app [class~="bg-red-500\/10"],
body.crm-light-theme #app [class~="bg-red-500\/20"],
body.crm-light-theme #app [class~="bg-pink-500\/10"],
body.crm-light-theme #app [class~="bg-pink-500\/20"] { background-color: rgba(190,18,60,.10) !important; }
body.crm-light-theme #app [class~="text-rose-300"],
body.crm-light-theme #app [class~="text-red-300"],
body.crm-light-theme #app [class~="text-pink-300"] { color: #b3123d !important; }
body.crm-light-theme #app [class~="border-rose-500\/30"],
body.crm-light-theme #app [class~="border-red-500\/30"],
body.crm-light-theme #app [class~="border-pink-500\/30"] { border-color: rgba(190,18,60,.35) !important; }

body.crm-light-theme #app [class~="bg-violet-500\/10"],
body.crm-light-theme #app [class~="bg-violet-500\/20"],
body.crm-light-theme #app [class~="bg-purple-500\/10"],
body.crm-light-theme #app [class~="bg-purple-500\/20"],
body.crm-light-theme #app [class~="bg-fuchsia-500\/10"],
body.crm-light-theme #app [class~="bg-fuchsia-500\/20"] { background-color: rgba(126,34,206,.10) !important; }
body.crm-light-theme #app [class~="text-violet-300"],
body.crm-light-theme #app [class~="text-purple-300"],
body.crm-light-theme #app [class~="text-fuchsia-300"] { color: #7424ad !important; }
body.crm-light-theme #app [class~="border-violet-500\/30"],
body.crm-light-theme #app [class~="border-purple-500\/30"],
body.crm-light-theme #app [class~="border-fuchsia-500\/30"] { border-color: rgba(126,34,206,.35) !important; }

body.crm-light-theme #app [class~="bg-slate-500\/10"],
body.crm-light-theme #app [class~="bg-slate-500\/20"],
body.crm-light-theme #app [class~="bg-gray-500\/10"],
body.crm-light-theme #app [class~="bg-gray-500\/20"] { background-color: rgba(71,85,105,.10) !important; }
body.crm-light-theme #app [class~="text-slate-300"][class*="bg-slate-"],
body.crm-light-theme #app [class~="text-gray-300"] { color: #475569 !important; }
body.crm-light-theme #app [class~="border-slate-500\/30"],
body.crm-light-theme #app [class~="border-gray-500\/30"] { border-color: rgba(71,85,105,.35) !important; }

/* Hover state on soft pills: solid fill, white text always wins (covers any color family above) */
body.crm-light-theme #app button[class*="hover:bg-"][class*="hover:text-white"]:hover {
  color: #fff !important;
}