styles-shadcn-v4.css

/* <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/akraut1/noloco@refs/heads/main/styles-shadcn-v4.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;
  --table-row-bg: 0 0% 98%;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5% 26%;
  --sidebar-accent: 240 5% 96%;

  /* Custom gray spectrum for light mode */
  --gray-50: 0 0% 98%;
  --gray-100: 240 4.8% 95.9%;
  --gray-200: 240 5.9% 90%;
  --gray-300: 240 4.9% 83.9%;
  --gray-400: 240 5% 64.9%;
  --gray-500: 240 3.8% 46.1%;
  --gray-600: 240 5.2% 33.9%;
  --gray-700: 240 5.3% 26.1%;
  --gray-800: 240 3.7% 15.9%;
  --gray-900: 240 5.9% 10%;
  --gray-950: 240 10% 3.9%;

  /* Role-based badge colors */
  --role-admin-bg: 272 90% 60%;
  --role-admin-text: 272 85% 65%;
  --role-admin-border: 272 90% 40%;

  --role-ae-bg: 180 75% 45%;
  --role-ae-text: 180 70% 50%;
  --role-ae-border: 180 75% 35%;

  --role-lp-bg: 43 96% 50%;
  --role-lp-text: 43 90% 55%;
  --role-lp-border: 43 96% 40%;

  --role-loan-opener-bg: 231 83% 60%;
  --role-loan-opener-text: 231 78% 65%;
  --role-loan-opener-border: 231 83% 50%;

  /* Dashboard theme colors */
  --base-background: 240 10% 3.9%;
  --base-muted: 240 4% 16%;
  --alpha-40: 240 10% 3.9% / 0.6;

  /* Deal Disposition */
  --badge-active-bg: 142 76% 36%;
  --badge-active-text: 142 72% 29%;
  --badge-onhold-bg: 48 96% 89%;
  --badge-onhold-text: 48 96% 89%;

  /* Deal Stage 1 */
  --badge-stage1-bg: 221 83% 53%;
  --badge-stage1-text: 221 83% 53%;

  /* Deal Stage 2 */
  --badge-stage2-bg: 262 83% 58%;
  --badge-stage2-text: 262 83% 58%;
}

/* Dark mode variables */
.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 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 240 4.9% 83.9%;
  --table-row-bg: 240 10% 3.9%;
  --sidebar-background: 240 6% 10%;
  --sidebar-foreground: 240 5% 96%;
  --sidebar-accent: 240 4% 16%;

  /* Role-based badge colors - adjusted for dark mode */
  --role-admin-bg: 272 70% 45%;
  --role-admin-text: 272 65% 50%;
  --role-admin-border: 272 70% 35%;

  --role-ae-bg: 180 65% 35%;
  --role-ae-text: 180 60% 40%;
  --role-ae-border: 180 65% 25%;

  --role-lp-bg: 43 86% 45%;
  --role-lp-text: 43 80% 50%;
  --role-lp-border: 43 86% 35%;

  --role-loan-opener-bg: 231 73% 45%;
  --role-loan-opener-text: 231 68% 50%;
  --role-loan-opener-border: 231 73% 35%;

  /* Dashboard theme colors */
  --base-background: 240 10% 3.9%;
  --base-muted: 240 4% 16%;
  --alpha-40: 240 10% 3.9% / 0.6;

  /* Deal Disposition */
  --badge-active-bg: 142 76% 36%;
  --badge-active-text: 142 72% 29%;
  --badge-onhold-bg: 48 96% 89%;
  --badge-onhold-text: 48 96% 89%;

  /* Deal Stage 1 */
  --badge-stage1-bg: 221 83% 53%;
  --badge-stage1-text: 221 83% 53%;

  /* Deal Stage 2 */
  --badge-stage2-bg: 262 83% 58%;
  --badge-stage2-text: 262 83% 58%;
}

/* Main page background with gradient */
.dark .project-page.bg-gray-lightest.shadcn-body.relative.flex.h-screen.max-h-screen.w-screen.overflow-hidden,
.dark .flex.h-screen.w-16.flex-col.border-r.border-slate-700.bg-slate-900.text-white.sm:hidden 
",
.dark .flex.h-screen.w-full.flex-col.overflow-hidden.bg-slate-800,
.dark main,
.dark .main-content,
.dark body,
.dark #root,
.dark #__next {
  background: linear-gradient(0deg, hsl(var(--alpha-40)) 0%, hsl(var(--alpha-40)) 100%),
    linear-gradient(0deg, hsl(var(--base-muted)) 0%, hsl(var(--base-muted)) 100%), hsl(var(--base-background)) !important;
}

/* Component backgrounds */
.dark [class*="bg-slate-50"],
.dark [class*="bg-slate-100"],
.dark [class*="bg-slate-200"],
.dark [class*="bg-slate-300"],
.dark [class*="bg-slate-400"],
.dark [class*="bg-slate-500"],
.dark [class*="bg-slate-600"],
.dark [class*="bg-slate-700"],
.dark [class*="bg-slate-800"],
.dark [class*="bg-slate-900"],
.dark [class*="bg-gray-50"],
.dark [class*="bg-gray-100"],
.dark [class*="bg-gray-200"],
.dark [class*="bg-gray-300"],
.dark [class*="bg-gray-400"],
.dark [class*="bg-gray-500"],
.dark [class*="bg-gray-600"],
.dark [class*="bg-gray-700"],
.dark [class*="bg-gray-800"],
.dark [class*="bg-gray-900"] {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* Sidebar */
.dark [data-testid="navigation-sidebar"] {
  background-color: hsl(var(--sidebar-background)) !important;
  color: hsl(var(--sidebar-foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
}

/* Component Backgrounds */
.dark .collection-view-table > div,
.dark [data-testid="collection-group-header"],
.dark .card,
.dark [class*="bg-card"] {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}

.dark [data-testid="details-section"] {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}

.dark [data-testid="stages-section"] {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
}

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

/* Data Tables Shadcn Match */
[data-testid="view-collection"]
  > div
  > div
  > div
  > div
  > .focus\:outline-none.focus\:shadow-none.w-full.shadow-lg.mb-2.overflow-y-hidden.overflow-x-auto.border.rounded-lg,
.collection-view-table > div {
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  width: 100%;
  overflow: hidden;
}

/* Table Header */
[data-testid="view-collection"] thead,
.collection-view-table thead {
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted));
}

/* Table Header Row */
[data-testid="view-collection"] thead tr,
.collection-view-table thead tr {
  border: 1px solid hsl(var(--border));
}

/* Table Header Cells */
[data-testid="view-collection"] th,
.collection-view-table th {
  height: 2.5rem;
  padding: 0 1rem;
  text-align: left;
  vertical-align: middle;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  border-right: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted));
  transition: background-color 0.2s;
}

[data-testid="view-collection"] th:last-child,
.collection-view-table th:last-child {
  border-right: none;
}

/* Table Body */
[data-testid="view-collection"] tbody,
.collection-view-table tbody {
  background-color: hsl(var(--background));
}

/* Table Body Rows */
[data-testid="view-collection"] tbody tr,
.collection-view-table tbody tr,
tr[class*="record-"][data-test-id="collection-record"] {
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  transition: background-color 0.2s;
}

[data-testid="view-collection"] tbody tr:hover,
.collection-view-table tbody tr:hover,
tr[class*="record-"][data-test-id="collection-record"]:hover {
  background-color: hsl(var(--muted));
}

/* Table Body Cells */
[data-testid="view-collection"] td,
.collection-view-table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--foreground));
}

/* Table Cell Content Styling */
[data-testid="field-cell"] span {
  display: inline-block;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--foreground));
}

/* Table Cell Hyperlink Styling */
[data-testid="field-cell"] a,
[data-testid="view-collection"] td a,
.collection-view-table td a {
  color: #2563eb;
  transition: color 0.2s;
  text-decoration: none;
}

[data-testid="field-cell"] a:hover,
[data-testid="field-cell"] a:active,
[data-testid="view-collection"] td a:hover,
[data-testid="view-collection"] td a:active,
.collection-view-table td a:hover,
.collection-view-table td a:active {
  color: #1e40af;
  text-decoration: underline;
}

/* Dark mode link colors */
.dark [data-testid="field-cell"] a,
.dark [data-testid="view-collection"] td a,
.dark .collection-view-table td a {
  color: #38bdf8; /* Sky 400 */
}

.dark.dark [data-testid="field-cell"] a,
.dark [data-testid="view-collection"] td a,
.dark .collection-view-table td a {
  color: #38bdf8; /* Sky 400 */
}

.dark [data-testid="field-cell"] a:hover,
.dark [data-testid="field-cell"] a:active,
.dark [data-testid="view-collection"] td a:hover,
.dark [data-testid="view-collection"] td a:active,
.dark .collection-view-table td a:hover,
.dark .collection-view-table td a:active {
  color: #0891b2; /* Sky 600 */
}

/* Checkbox Column */
[data-testid="view-collection"] th:first-child,
[data-testid="view-collection"] td:first-child,
.collection-view-table th:first-child,
.collection-view-table td:first-child {
  width: 40px;
  padding-left: 1rem;
  padding-right: 1rem;
  border-right: 1px solid hsl(var(--border));
}

/* Filter Input */
[data-testid="view-collection"] input[type="text"],
.collection-view-table input[type="text"] {
  width: 100%;
  height: 2.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
}

[data-testid="view-collection"] input[type="text"]:focus,
.collection-view-table input[type="text"]:focus {
  outline: none;
  ring: 2px solid hsl(var(--ring));
  border-color: hsl(var(--ring));
}

/* Pagination Controls */
[data-testid="view-collection"] .pagination,
.collection-view-table .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* Status Badges */
[data-testid="view-collection"] .status-badge,
.collection-view-table .status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
}

/* Role Badges */
[class*="px-3 py-0 rounded bg-green-700"],
[data-testid="field-cell"] span.rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 500;
  white-space: nowrap;
  transition: all 150ms;
  height: 1.5rem;
}

/* Role-specific badge styles */
[data-testid="field-cell"] span.rounded:has(div:contains("Admin")) {
  background: linear-gradient(135deg, hsla(var(--role-admin-bg), 0.9), hsla(var(--role-admin-text), 0.8));
  border-color: hsla(var(--role-admin-border), 0.3);
  color: hsl(var(--background));
}

[data-testid="field-cell"] span.rounded:has(div:contains("Account Executive")) {
  background: linear-gradient(135deg, hsla(var(--role-ae-bg), 0.9), hsla(var(--role-ae-text), 0.8));
  border-color: hsla(var(--role-ae-border), 0.3);
  color: hsl(var(--background));
}

[data-testid="field-cell"] span.rounded:has(div:contains("Loan Processor")) {
  background: linear-gradient(135deg, hsla(var(--role-lp-bg), 0.9), hsla(var(--role-lp-text), 0.8));
  border-color: hsla(var(--role-lp-border), 0.3);
  color: hsl(var(--background));
}

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

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

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

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

[data-testid="field-cell"] span.rounded:has(div:contains("Stage 2")) {
  background-color: hsl(var(--badge-stage2-bg));
  color: hsl(var(--badge-stage2-text));
}

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

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

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

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

/* Action Buttons */
[data-testid="action-button"] {
  border-radius: var(--radius);
  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(--secondary));
  color: hsl(var(--secondary-foreground));
  border-color: hsl(var(--border));
}

[data-testid="action-button"].bg-gray-700:hover {
  opacity: 0.9;
}

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

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

/* Record View Section Styles */
[data-test-id="record-view-section"] {
  background-color: hsl(var(--background));
}

/* Target the outer wrapper */
[data-test-id="record-view-section"] > div {
  border: 1px solid hsl(var(--border));
}

/* Target the inner content wrapper */
[data-test-id="record-view-section"] > div > div {
  padding: 3.0rem;
}

/* Target the flex column container */
[data-test-id="record-view-section"] .mb-2.px-4.sm\:p-0.flex.flex-col {
  padding: 3.0rem;
}

/* Target the icon container */
[data-test-id="record-view-section"]
  .relative.hidden.h-10.w-10.items-center.justify-center.rounded-lg.border.p-2.sm\:flex {
  padding: 3.0rem;
}

/* Ensure proper background color for all record view sections */
[data-test-id="record-view-section"],
.dark [data-test-id="record-view-section"],
[id="FNLvmEeio"] [data-test-id="record-view-section"] {
  background-color: hsl(var(--background)) !important;
}

/* Record View Tabs */
[data-testid="record-view-tabs"] {
  border-bottom: 1px solid hsl(var(--border));
}

.dark [data-testid="record-view-tabs"] button {
  color: #a1a1aa;
  transition: color 0.2s ease;
}

.dark [data-testid="record-view-tabs"] button:hover {
  color: hsl(var(--foreground));
}

[data-testid="record-view-tabs"] button[aria-selected="true"] {
  color: hsl(var(--foreground));
  border-bottom-width: 2px;
  border-image: linear-gradient(90deg, #f72121 24%, #ff9500 71%, #f0d047 100%) 1;
}

/* Pivot Table Styles */
.collection-view.collection-view-pivot_table {
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  width: 100%;
  overflow: hidden;
}

.collection-view.collection-view-pivot_table thead {
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted));
}

.collection-view.collection-view-pivot_table th {
  height: 2.5rem;
  padding: 0 1rem;
  text-align: left;
  vertical-align: middle;
  font-size: 0.875rem;
  font-weight: 500;
  color: #a1a1aa;
  border-right: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted));
  transition: background-color 0.2s;
}

.collection-view.collection-view-pivot_table td {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--foreground));
  border-right: 1px solid hsl(var(--border));
}

/* Style for the SUM row */
.collection-view.collection-view-pivot_table tr:last-child td {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

/* Navigation Sidebar - Shadcn Style */
[data-testid="navigation-sidebar"] {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem 1rem;
  background-color: hsl(var(--sidebar-background));
  border-right: 1px solid hsl(var(--border));
}

[data-testid="navigation-sidebar"] [data-testid="sidebar-nav-item"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

[data-testid="navigation-sidebar"] [data-testid="sidebar-nav-item"] > div > a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
}

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

[data-testid="navigation-sidebar"] [data-testid="sidebar-nav-item"] > div > a.active,
[data-testid="navigation-sidebar"] [data-testid="sidebar-nav-item"] > div > a[aria-current="page"] {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Sidebar Group Headers */
[data-testid="navigation-sidebar"] [data-testid="sidebar-nav-group"] > div:first-child {
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sidebar Icons */
[data-testid="navigation-sidebar"] [data-testid="sidebar-nav-item"] svg {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.5;
  transition: opacity 0.2s;
}

[data-testid="navigation-sidebar"] [data-testid="sidebar-nav-item"] > div > a:hover svg,
[data-testid="navigation-sidebar"] [data-testid="sidebar-nav-item"] > div > a.active svg,
[data-testid="navigation-sidebar"] [data-testid="sidebar-nav-item"] > div > a[aria-current="page"] svg {
  opacity: 1;
}

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

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

.sticky.top-0.z-40.flex.w-full.flex-col.overflow-hidden.border-b.sm\:static.bg-gray-800.border-gray-700.px-3 {
  background-color: hsl(var(--background));
  border-color: hsl(var(--border));
}

</style>