styles-shadcn-v2.css

<style>
/* Add these overrides at the top of the file to ensure maximum specificity */
.dark .flex.h-screen.w-full.flex-col.overflow-hidden.bg-slate-800,
.dark .shadcn-body.flex.max-h-screen.w-full.bg-opacity-25.sm:fixed.sm:left-0.sm:top-0.sm:max-h-full.sm:flex-col.min-h-screen.bg-gray-800,
.dark .canvas.project-preview.relative.z-10.mx-auto.flex.h-full.max-h-screen.w-full.flex-grow.flex-col.overflow-hidden.shadow.sm\:h-screen.bg-gray-900 {  
  background-color: hsl(var(--background)) !important;
}

/* Target parent containers */
.dark body,
.dark #root,
.dark #__next,
.dark .project-page,
.dark main,
.dark .main-content,
.dark .canvas,
.dark .project-preview,
.dark .simplebar-wrapper,
.dark .simplebar-mask,
.dark .simplebar-content-wrapper,
.dark .collection-view,
.dark [data-tour="canvas"],
.dark [data-testid="canvas"],
.dark [data-testid="project-canvas"],
.dark [data-testid="inner-project-canvas"],
.dark [data-testid="record-view-section"] {
  background-color: hsl(var(--background)) !important;
}

/* Target specific canvas elements */
.dark .canvas.h-100.project-preview,
.dark .canvas.project-preview.relative,
.dark [data-testid="canvas"].bg-gray-900,
.dark [data-testid="canvas"].bg-slate-800 {
  background-color: hsl(var(--background)) !important;
}

/* LIGHT MODE VARIABLES */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
  --radius: 0.5rem;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5% 26%;
  --sidebar-accent: 240 5% 96%;
  
  --badge-role-admin-bg: 240 5% 65%;
  --badge-role-admin-text: 240 5% 96%;
  --badge-role-admin-border: 240 5% 65%;
  --badge-role-account-executive-bg: 17 88% 40%;
  --badge-role-account-executive-text: 34 100% 92%;
  --badge-role-account-executive-border: 17 88% 40%;
  --badge-role-loan-processor-bg: 22 90% 37%;
  --badge-role-loan-processor-text: 48 96% 89%;
  --badge-role-loan-processor-border: 22 90% 37%;
  --badge-role-loan-opener-bg: 35 92% 33%;
  --badge-role-loan-opener-text: 55 97% 88%;
  --badge-role-loan-opener-border: 35 92% 33%;
  --badge-disposition-active-bg: 141 84% 93%; /* Green */
  --badge-disposition-active-text: 142 72% 29%;
  --badge-disposition-onhold-bg: 34 100% 92%; /* Orange */
  --badge-disposition-onhold-text: 17 88% 40%;
  --badge-disposition-dead-bg: 0 93% 94%; /* Red */
  --badge-disposition-dead-text: 0 74% 42%;
  --badge-dealstage1-lead-bg: 55 97% 88%; /* Yellow */
  --badge-dealstage1-lead-text: 35 92% 33%;
  --badge-dealstage1-scenario-bg: 185 96% 90%; /* Cyan */
  --badge-dealstage1-scenario-text: 193 82% 31%;
  --badge-dealstage1-deal-bg: 141 84% 93%; /* Green */
  --badge-dealstage1-deal-text: 142 72% 29%;

  /* Shadcn Zinc */
  --zinc-50: 0 0% 98%; /* White */
  --zinc-100: 240 4.8% 95.9%;
  --zinc-200: 240 5.9% 90%;
  --zinc-300: 240 4.9% 83.9%;
  --zinc-400: 240 5.0% 64.9%;
  --zinc-500: 240 3.8% 46.1%;
  --zinc-600: 240 5.2% 33.9%;
  --zinc-700: 240 5.3% 26.1%;
  --zinc-800: 240 3.7% 15.9%;
  --zinc-900: 240 5.9% 10%;
  --zinc-950: 240 10% 3.9%; /* Black */
  
  /* Hover Overlay */
  --background-hover-overlay: 0 0% 0% 0.03;
  --background-hover-overlay-inverse: 0 0% 100% 0.05;
}

/* DARK MODE VARIABLRES */
.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 5% 96%;
  --sidebar-accent: 240 4% 16%;
  
  --badge-role-admin-bg: 240 4% 16%;
  --badge-role-admin-text: 240 4% 46%;
  --badge-role-admin-border: 240 4% 16%;
  --badge-role-account-executive-bg: 13 81% 15%;
  --badge-role-account-executive-text: 27 96% 61%;
  --badge-role-account-executive-border: 13 81% 15%;
  --badge-role-loan-processor-bg: 21 92% 14%;
  --badge-role-loan-processor-text: 43 96% 56%;
  --badge-role-loan-processor-border: 21 92% 14%;
  --badge-role-loan-opener-bg: 26 83% 14%;
  --badge-role-loan-opener-to: 48 96% 53%;
  --badge-role-loan-opener-border: 26 83% 14%;
  --badge-disposition-active-bg: 145 80% 10%; /* Green */
  --badge-disposition-active-text: 142 69% 58%;
  --badge-disposition-onhold-bg: 13 81% 15%; /* Orange */
  --badge-disposition-onhold-text: 27 96% 61%;
  --badge-disposition-dead-bg: 0 75% 15%; /* Red */
  --badge-disposition-dead-text: 0 91% 71%;
  --badge-dealstage1-lead-bg: 26 83% 14%; /* Yellow */
  --badge-dealstage1-lead-text: 48 96% 53%;
  --badge-dealstage1-scenario-bg: 197 79% 15%; /* Cyan */
  --badge-dealstage1-scenario-text: 188 86% 53%;
  --badge-dealstage1-deal-bg: 145 80% 10%; /* Green */
  --badge-dealstage1-deal-text: 142 69% 58%;

    /* Shadcn Zinc */
  --zinc-50: 0 0% 98%; /* White */
  --zinc-100: 240 4.8% 95.9%;
  --zinc-200: 240 5.9% 90%;
  --zinc-300: 240 4.9% 83.9%;
  --zinc-400: 240 5.0% 64.9%;
  --zinc-500: 240 3.8% 46.1%;
  --zinc-600: 240 5.2% 33.9%;
  --zinc-700: 240 5.3% 26.1%;
  --zinc-800: 240 3.7% 15.9%;
  --zinc-900: 240 5.9% 10%;
  --zinc-950: 240 10% 3.9%; /* Black */
  
  /* Hover Overlay */
  --background-hover-overlay: 0 0% 100% 0.05;
  --background-hover-overlay-inverse: 0 0% 0% 0.03;
}

/* Override Text Classes */
.text-gray-50,
.text-slate-50 {
  color: hsl(var(--zinc-50)) !important;
} 
.text-gray-100,
.text-slate-100 {
  color: hsl(var(--zinc-100)) !important;
}
.text-gray-200,
.text-slate-200 {
  color: hsl(var(--zinc-200)) !important;
}
.text-gray-300,
.text-slate-300 {
  color: hsl(var(--zinc-300)) !important;
}
.text-gray-400,
.text-slate-400 {
  color: hsl(var(--zinc-400)) !important;
}
.text-gray-500,
.text-slate-500 {
  color: hsl(var(--zinc-500)) !important;
}
.text-gray-600,
.text-slate-600 {
  color: hsl(var(--zinc-600)) !important;
}
.text-gray-700,
.text-slate-700 {
  color: hsl(var(--zinc-700)) !important;
}
.text-gray-800,
.text-slate-800 {
  color: hsl(var(--zinc-800)) !important;
}
.text-gray-900,
.text-slate-900 {
  color: hsl(var(--zinc-900)) !important;
}
.text-gray-950,
.text-slate-950 {
  color: hsl(var(--zinc-950)) !important;
}

/* Override Background Classes */
.bg-gray-50,
.bg-slate-50,
.bg-nlc_primary-50 {
  background-color: hsl(var(--zinc-50)) !important;
}
.bg-gray-100,
.bg-slate-100, 
.bg-nlc_primary-100 {
  background-color: hsl(var(--zinc-100)) !important;
}
.bg-gray-200,
.bg-slate-200,
.bg-nlc_primary-200 {
  background-color: hsl(var(--zinc-200)) !important;
}
.bg-gray-300,
.bg-slate-300,
.bg-nlc_primary-300 {
  background-color: hsl(var(--zinc-300)) !important;
}
.bg-gray-400,
.bg-slate-400,
.bg-nlc_primary-400 {
  background-color: hsl(var(--zinc-400)) !important;
}
.bg-gray-500,
.bg-slate-500,
.bg-nlc_primary-500 {
  background-color: hsl(var(--zinc-500)) !important;
}
.bg-gray-600,
.bg-slate-600,
.bg-nlc_primary-600 {
  background-color: hsl(var(--zinc-600)) !important;
}
.bg-gray-700,
.bg-slate-700,
.bg-nlc_primary-700 {
  background-color: hsl(var(--zinc-700)) !important;
}
.bg-gray-800,
.bg-slate-800,
.bg-nlc_primary-800 {
  background-color: hsl(var(--zinc-800)) !important;
}
.bg-gray-900,
.bg-slate-900,
.bg-nlc_primary-900 {
  background-color: hsl(var(--zinc-900)) !important;
}
.bg-gray-950,
.bg-slate-950,
.bg-nlc_primary-950 {
  background-color: hsl(var(--zinc-950)) !important;
}

/* Project Canvas */
[data-testid="project-canvas"] {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground));
}

/* Sidebar */
.dark [data-testid="navigation-sidebar"],
.dark [data-testid="navigation-sidebar"] > div,
.dark [data-testid="sidebar-logo"] {
  background-color: hsl(var(--background)) !important;
}

/* Table Styles */
.collection-view,
.collection-view-table,
.collection-view.collection-view-table,
.collection-view.collection-view-table > .w-full > .collection-view.collection-view-table  {
  background-color: hsl(var(--background)) !important;
  border-color: hsl(var(--border)) !important;
}

.collection-view.collection-view-table .mb-2.pb-2.mb-4.px-4.sm\:p-0.flex.flex-col,
.collection-view.collection-view-table .my-3.flex.flex-wrap.items-end.justify-end.gap-y-2,
.collection-view.collection-view-table .focus:outline-none.focus:shadow-none.bg-gray-800.w-full.shadow-lg.mb-2.overflow-y-hidden.overflow-x-auto.border.border-gray-700.rounded-lg {
    padding: 24px;
    border: 1px solid hsl(var(--border));
}

.collection-view-table tbody {
  background-color: hsl(var(--background)) !important;
}

.collection-view-table > div {
  background-color: hsl(var(--background)) !important;
  border-color: hsl(var(--border)) !important;
  border-radius: var(--radius);
}

.dark .collection-view-table > div {
  background-color: hsl(var(--background)) !important;
}

.collection-view-table thead th.table-fixed {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.collection-view-table tbody tr {
  border-bottom: 1px solid hsl(var(--border));
}

.dark .collection-view-table tbody tr {
  border-bottom: 1px solid hsl(var(--border));
}

.collection-view-table tbody tr:hover {
  background-color: hsl(var(--accent)) !important;
}

.dark collection-view-table tbody tr:hover {
  background-color: hsl(var(--accent)) !important;
}

.collection-view-table tbody td {
  color: hsl(var(--foreground));
}

.collection-view-table tbody td a,
[data-testid="field-cell"] a {
  color: hsl(217 91% 60%) !important;
}

/* Badge Styles */
[data-testid="field-cell"] span.rounded {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  gap: 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-clip: padding-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
}

[data-testid="field-cell"] span.rounded:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-radius: var(--border-radius-rounded-md, 6px);
}

/* Badges - User Role */
[data-testid="field-cell"] span.rounded:has(div:contains("Admin")) {
  background-color: hsla(var(--badge-role-admin-bg), 1);
  color: hsl(var(--badge-role-admin-text));
  border-color: hsla(var(--badge-role-admin-border), 0.3);
}

[data-testid="field-cell"] span.rounded:has(div:contains("Admin")):hover {
  background: 
    linear-gradient(
      0deg, 
      hsla(var(--background-hover-overlay)) 0%, 
      hsla(var(--background-hover-overlay)) 100%
    ), 
    hsla(var(--badge-role-admin-bg), 1);
}

[data-testid="field-cell"] span.rounded:has(div:contains("Account Executive")) {
  background-color: hsla(var(--badge-role-account-executive-bg), 1);
  color: hsl(var(--badge-role-account-executive-text));
  border-color: hsla(var(--badge-role-account-executive-border), 0.3);
}

[data-testid="field-cell"] span.rounded:has(div:contains("Account Executive")):hover {
  background: 
    linear-gradient(
      0deg, 
      hsla(var(--background-hover-overlay)) 0%, 
      hsla(var(--background-hover-overlay)) 100%
    ), 
    hsla(var(--badge-role-account-executive-bg), 1);
}

[data-testid="field-cell"] span.rounded:has(div:contains("Loan Processor")) {
  background-color: hsla(var(--badge-role-loan-processor-bg), 1);
  color: hsl(var(--badge-role-loan-processor-text));
  border-color: hsla(var(--badge-role-loan-processor-border), 0.3);
}

[data-testid="field-cell"] span.rounded:has(div:contains("Loan Processor")):hover {
  background: 
    linear-gradient(
      0deg, 
      hsla(var(--background-hover-overlay)) 0%, 
      hsla(var(--background-hover-overlay)) 100%
    ), 
    hsla(var(--badge-role-loan-processor-bg), 1);
}

[data-testid="field-cell"] span.rounded:has(div:contains("Loan Opener")) {
  background-color: hsla(var(--badge-role-loan-opener-bg), 1);
  color: hsl(var(--badge-role-loan-opener-text));
  border-color: hsla(var(--badge-role-loan-opener-border), 0.3);
}

[data-testid="field-cell"] span.rounded:has(div:contains("Loan Opener")):hover {
  background: 
    linear-gradient(
      0deg, 
      hsla(var(--background-hover-overlay)) 0%, 
      hsla(var(--background-hover-overlay)) 100%
    ), 
    hsla(var(--badge-role-loan-opener-bg), 1);
}

/* Group header count badges */
[data-testid="collection-group-header"] span.rounded {
  background: hsla(var(--muted), 0.8);
  border: 1px solid hsla(var(--border), 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Action Buttons */
[data-testid="action-button"] {
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  transition: all 150ms;
}

[data-testid="action-button"].bg-gray-700 {
  background-color: hsl(var(--zinc-700));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border));
}

[data-testid="action-button"].bg-gray-700:hover {
  background-color: hsl(var(--zinc-700));
  opacity: 0.9;
}

[data-testid="action-button"].bg-red-500 {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

/* Navigation Sidebar */
[data-testid="navigation-sidebar"],
[data-testid="navigation-sidebar"] > div {
  background-color: hsl(var(--sidebar-background)) !important;
  border-right: 1px solid hsl(var(--border));
}

[data-testid="sidebar-nav-item"] > div > a {
  color: hsl(var(--muted-foreground));
  transition: color 0.2s;
}

[data-testid="sidebar-nav-item"] > div > a:hover {
  color: hsl(var(--foreground));
  background-color: hsl(var(--accent));
}

[data-testid="sidebar-nav-item"] > div > a.bg-nlc_primary-900 {
  background-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

/* Theme Toggle Switch */
[data-testid="dark-mode-switch"] {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border));
}

/* Group Headers */
[data-testid="collection-group-header"] {
  background-color: hsl(var(--muted));
  border-color: hsl(var(--border));
}

[data-testid="collection-group-header"] .text-gray-400 {
  color: hsl(var(--muted-foreground));
}

/* Force override any existing background colors */
.dark [data-testid="project-canvas"],
.dark .bg-gray-900,
.dark [class*="bg-gray-900"] {
  background-color: hsl(var(--background)) !important;
}

/* Override Tailwind Slate Backgrounds */
.dark .bg-slate-800,
.dark [class*="bg-slate-800"],
.dark [class*="bg-slate-800"],
.dark div[class*="bg-slate-800"] {
  background-color: hsl(var(--background)) !important;
}

.dark .bg-slate-900,
.dark [class*="bg-slate-900"],
.dark div[class*="bg-slate-900"] {
  background-color: hsl(var(--background)) !important;
}

/* Target the specific flex container causing the blue background */
.dark .flex.h-screen.w-full.flex-col.overflow-hidden.bg-slate-800 {
  background-color: hsl(var(--background)) !important;
}

/* Header specific override */
.dark [data-testid="header"],
.dark header,
.dark .header {
  background-color: hsl(var(--zinc-950)) !important;
  border-bottom: 1px solid hsl(var(--border));
}

/* Override Main Content Area */
.dark main,
.dark .main-content {
  background-color: hsl(var(--background)) !important;
}

/* Additional specific overrides for any remaining blue backgrounds */
.dark [class*="bg-blue"],
.dark [class*="bg-indigo"],
.dark [style*="background-color: rgb(30, 41, 59)"],
.dark [style*="background-color: #1e293b"] {
  background-color: hsl(var(--background)) !important;
}

/* Override Text Colors */
.dark .text-gray-50,
.dark .text-slate-50 {
  color: hsl(var(--zinc-50)) !important;
}
.dark .text-gray-100,
.dark .text-slate-100 {
  color: hsl(var(--zinc-100)) !important;
}
.dark .text-gray-200,
.dark .text-slate-200 {
  color: hsl(var(--zinc-200)) !important;
}
.dark .text-gray-300,
.dark .text-slate-300 {
  color: hsl(var(--zinc-300)) !important;
}
.dark .text-gray-400,
.dark .text-slate-400 {
  color: hsl(var(--zinc-400)) !important;
}
.dark .text-gray-500,
.dark .text-slate-500 {
  color: hsl(var(--zinc-500)) !important;
}
.dark .text-gray-600,
.dark .text-slate-600 {
  color: hsl(var(--zinc-600)) !important;
}
.dark .text-gray-700,
.dark .text-slate-700 {
  color: hsl(var(--zinc-700)) !important;
}
.dark .text-gray-800,
.dark .text-slate-800 {
  color: hsl(var(--zinc-800)) !important;
}
.dark .text-gray-900,
.dark .text-slate-900 {
  color: hsl(var(--zinc-900)) !important;
}
.dark .text-gray-950,
.dark .text-slate-950 {
  color: hsl(var(--zinc-950)) !important;
}

/* Override Background Colors */
.dark .bg-gray-50,
.dark .bg-slate-50,
.dark .bg-nlc_primary-50 {
  background-color: hsl(var(--zinc-50)) !important;
}
.dark .bg-gray-100,
.dark .bg-slate-100,
.dark .text-gray-100,
.dark .text-slate-100,
.dark .bg-nlc_primary-100 {
  background-color: hsl(var(--zinc-100)) !important;
}
.dark .bg-gray-200,
.dark .bg-slate-200,
.dark .bg-nlc_primary-200 {
  background-color: hsl(var(--zinc-200)) !important;
}
.dark .bg-gray-300,
.dark .bg-slate-300,
.dark .bg-nlc_primary-300 {
  background-color: hsl(var(--zinc-300)) !important;
}
.dark .bg-gray-400,
.dark .bg-slate-400,
.dark .bg-nlc_primary-400 {
  background-color: hsl(var(--zinc-400)) !important;
}
.dark .bg-gray-500,
.dark .bg-slate-500,
.dark .bg-nlc_primary-500 {
  background-color: hsl(var(--zinc-500)) !important;
}
.dark .bg-gray-600,
.dark .bg-slate-600,
.dark .bg-nlc_primary-600 {
  background-color: hsl(var(--zinc-600)) !important;
}
.dark .bg-gray-700,
.dark .bg-slate-700,
.dark .bg-nlc_primary-700 {
  background-color: hsl(var(--zinc-700)) !important;
}
.dark .bg-gray-800,
.dark .bg-slate-800,
.dark .bg-nlc_primary-800 {
  background-color: hsl(var(--zinc-800)) !important;
}
.dark .bg-gray-900,
.dark .bg-slate-900,
.dark .bg-nlc_primary-900 {
  background-color: hsl(var(--zinc-900)) !important;
}
.dark .bg-gray-950,
.dark .bg-slate-950,
.dark .bg-nlc_primary-950 {
  background-color: hsl(var(--zinc-950)) !important;
}

/* Add specific attribute selectors for inline styles */
.dark [style*="background-color"] {
  background-color: hsl(var(--background)) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  [data-testid="record-view-body"] {
    padding: 0.75rem;
  }

  .collection-view-table .collection-filter input {
    width: 100%;
  }
}

</style>