styles-shadcn-v8.css

/* <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/akraut1/noloco@refs/heads/main/styles-shadcn-v8.css"> */
<style>

/* 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%;

  /* Hover Overlay */
  --background-hover-overlay: 0 0% 0% 0.03;
  --background-hover-overlay-inverse: 0 0% 100% 0.05;
  
  /* Badges */
  --badge-bg: 240 5.9% 10%;
  --badge-text: 0 0% 98%;
  --badge-role-border: 0 100% 0%;
  --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-active-border: 141 84% 93%;
  --badge-disposition-onhold-bg: 34 100% 92%; /* Orange */
  --badge-disposition-onhold-text: 17 88% 40%;
  --badge-disposition-onhold-border: 34 100% 92%;
  --badge-disposition-dead-bg: 0 93% 94%; /* Red */
  --badge-disposition-dead-text: 0 74% 42%;
  --badge-disposition-dead-border: 0 93% 94%;
  --badge-dealstage1-lead-bg: 55 97% 88%; /* Yellow */
  --badge-dealstage1-lead-text: 35 92% 33%;
  --badge-dealstage1-lead-border: 55 97% 88%;
  --badge-dealstage1-scenario-bg: 185 96% 90%; /* Cyan */
  --badge-dealstage1-scenario-text: 193 82% 31%;
  --badge-dealstage1-scenario-border: 185 96% 90%;
  --badge-dealstage1-deal-bg: 141 84% 93%; /* Green */
  --badge-dealstage1-deal-text: 142 72% 29%;
  --badge-dealstage1-deal-border: 141 84% 93%;

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

/* 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%;

  /* Badges */
  --badge-bg: 0 0% 98%;
  --badge-text: 240 5.9% 10%;
  --badge-role-border: 0 100% 0%;
  --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-text: 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-active-border: 145 80% 10%;
  --badge-disposition-onhold-bg: 13 81% 15%; /* Orange */
  --badge-disposition-onhold-text: 27 96% 61%;
  --badge-disposition-onhold-border: 13 81% 15%;
  --badge-disposition-dead-bg: 0 75% 15%; /* Red */
  --badge-disposition-dead-text: 0 91% 71%;
  --badge-disposition-dead-border: 0 75% 15%; 
  --badge-dealstage1-lead-bg: 26 83% 14%; /* Yellow */
  --badge-dealstage1-lead-text: 48 96% 53%;
  --badge-dealstage1-lead-border: 26 83% 14%;
  --badge-dealstage1-scenario-bg: 197 79% 15%; /* Cyan */
  --badge-dealstage1-scenario-text: 188 86% 53%;
  --badge-dealstage1-scenario-border: 197 79% 15%;
  --badge-dealstage1-deal-bg: 145 80% 10%; /* Green */
  --badge-dealstage1-deal-text: 142 69% 58%;
  --badge-dealstage1-deal-border: 145 80% 10%;

    /* 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(--primary)) !important;
} 
.text-gray-100, .text-slate-100 {
  color: hsl(var(--primary)) !important;
}
.text-gray-200, .text-slate-200 {
  color: hsl(var(--popover-foreground)) !important;
}
.text-gray-300, .text-slate-300 {
  color: hsl(var(--destructive-foreground)) !important;
}
.text-gray-400, .text-slate-400 {
  color: hsl(var(--primary-foreground)) !important;
}
.text-gray-500, .text-slate-500 {
  color: hsl(var(--secondary-foreground)) !important;
}
.text-gray-600, .text-slate-600 {
  color: hsl(var(--accent-foreground)) !important;
}
.text-gray-700, .text-slate-700 {
  color: hsl(var(--muted-foreground)) !important;
}
.text-gray-800, .text-slate-800 {
  color: hsl(var(--card-foreground)) !important;
}
.text-gray-900, .text-slate-900 {
  color: hsl(var(--foreground)) !important;
}
.text-gray-950, .text-slate-950 {
  color: hsl(var(--foreground)) !important;
}

/* Override Background Classes */
.bg-gray-50, .bg-slate-50, .bg-nlc_primary-50 {
  background-color: hsl(var(--primary)) !important;
}
.bg-gray-100, .bg-slate-100, .bg-nlc_primary-100 {
  background-color: hsl(var(--primary)) !important;
}
.bg-gray-200, .bg-slate-200, .bg-nlc_primary-200 {
  background-color: hsl(var(--ring)) !important;
}
.bg-gray-300, .bg-slate-300, .bg-nlc_primary-300 {
  background-color: hsl(var(--input)) !important;
}
.bg-gray-400, .bg-slate-400, .bg-nlc_primary-400 {
  background-color: hsl(var(--border)) !important;
}
.bg-gray-500, .bg-slate-500, .bg-nlc_primary-500 {
  background-color: hsl(var(--secondary)) !important;
}
.bg-gray-600, .bg-slate-600, .bg-nlc_primary-600 {
  background-color: hsl(var(--accent)) !important;
}
.bg-gray-700, .bg-slate-700, .bg-nlc_primary-700 {
  background-color: hsl(var(--muted)) !important;
}
.bg-gray-800, .bg-slate-800, .bg-nlc_primary-800 {
  background-color: hsl(var(--card)) !important;
}
.bg-gray-900, .bg-slate-900, .bg-nlc_primary-900 {
  background-color: hsl(var(--background)) !important;
}
.bg-gray-950, .bg-slate-950, .bg-nlc_primary-950 {
  background-color: hsl(var(--background)) !important;
}

/* Override Border and Divide Colors */
[class^="border-gray-"], 
[class*=" border-gray-"], 
[class^="divide-gray-"], 
[class*=" divide-gray-"] {
  border-color: hsl(var(--border)) !important;
}

/* Navigation Sidebar */
.dark .simplebar-wrapper,
.dark .simplebar-mask,
.dark .simplebar-content-wrapper,
.dark [data-testid="navigation-sidebar"],
.dark [data-testid="navigation-sidebar"] > div,
.dark [data-testid="sidebar-logo"] {
  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;
}

/* 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;
  color: hsl(var(--foreground)) !important;
}

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

.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 {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-bottom: 1px solid hsl(var(--border));
}

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

.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 {
  background-color: var(--badge-bg);
  color: var(--badge-text);
  border-color: hsla(var(--badge-role-border), 0.3);
}

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

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

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

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

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

/* Badges - Deal Disposition*/
[data-testid="field-cell"] span.rounded:has(div:contains("Active")) {
  background-color: hsla(var(--badge-disposition-active-bg), 1);
  color: hsl(var(--badge-disposition-active-text));
  border-color: hsla(var(--badge-disposition-active-border));
}

[data-testid="field-cell"] span.rounded:has(div:contains("On Hold")) {
  background-color: hsla(var(--badge-disposition-onhold-bg), 1);
  color: hsl(var(--badge-disposition-onhold-text));
  border-color: hsla(var(--badge-disposition-onhold-border));
}

[data-testid="field-cell"] span.rounded:has(div:contains("Dead")) {
  background-color: hsla(var(--badge-disposition-dead-bg), 1);
  color: hsl(var(--badge-disposition-dead-text));
  border-color: hsla(var(--badge-disposition-dead-border));
}

/* Badges - Deal Stage 1 */
[data-testid="field-cell"] span.rounded:has(div:contains("Lead")) {
  background-color: hsla(var(--badge-dealstage1-lead-bg), 1);
  color: hsl(var(--badge-dealstage1-lead-text));
  border-color: hsla(var(--badge-dealstage1-lead-border));
}

[data-testid="field-cell"] span.rounded:has(div:contains("Scenario")) {
  background-color: hsla(var(--badge-dealstage1-scenario-bg), 1);
  color: hsl(var(--badge-dealstage1-scenario-text));
  border-color: hsla(var(--badge-dealstage1-scenario-border));
}

[data-testid="field-cell"] span.rounded:has(div:contains("Deal")) {
  background-color: hsla(var(--badge-dealstage1-deal-bg), 1);
  color: hsl(var(--badge-dealstage1-deal-text));
  border-color: hsla(var(--badge-dealstage1-deal-border));
}

/* 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"] {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  transition: all 150ms;
}

[data-testid="action-button"]:focus {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
  
[data-testid="action-button"].bg-gray-700 {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border));
}

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

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

/* 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 [class*="bg-gray-900"],
.dark [class*="bg-gray-800"],
.dark [class*="bg-slate-800"],
.dark div[class*="bg-slate-800"] {
  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 Background Colors */
.dark .bg-gray-50,
.dark .bg-slate-50,
.dark .bg-nlc_primary-50 {
  background-color: hsl(var(--primary)) !important;
}
.dark .bg-gray-100,
.dark .bg-slate-100,
.dark .bg-nlc_primary-100 {
  background-color: hsl(var(--primary)) !important;
}
.dark .bg-gray-200,
.dark .bg-slate-200,
.dark .bg-nlc_primary-200 {
  background-color: hsl(var(--ring)) !important;
}
.dark .bg-gray-300,
.dark .bg-slate-300,
.dark .bg-nlc_primary-300 {
  background-color: hsl(var(--input)) !important;
}
.dark .bg-gray-400,
.dark .bg-slate-400,
.dark .bg-nlc_primary-400 {
  background-color: hsl(var(--border)) !important;
}
.dark .bg-gray-500,
.dark .bg-slate-500,
.dark .bg-nlc_primary-500 {
  background-color: hsl(var(--secondary)) !important;
}
.dark .bg-gray-600,
.dark .bg-slate-600,
.dark .bg-nlc_primary-600 {
  background-color: hsl(var(--accent)) !important;
}
.dark .bg-gray-700,
.dark .bg-slate-700,
.dark .bg-nlc_primary-700 {
  background-color: hsl(var(--muted)) !important;
}
.dark .bg-gray-800,
.dark .bg-slate-800,
.dark .bg-nlc_primary-800 {
  background-color: hsl(var(--card)) !important;
}
.dark .bg-gray-900,
.dark .bg-slate-900,
.dark .bg-nlc_primary-900 {
  background-color: hsl(var(--background)) !important;
}
.dark .bg-gray-950,
.dark .bg-slate-950,
.dark .bg-nlc_primary-950 {
  background-color: hsl(var(--background)) !important;
}

/* Add specific attribute selectors for inline styles */
.dark [style*="background-color"]:not([data-exempt]) {
  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>