:root {
  /* Heading font: default Disseqt (Noto Serif HK) */
  --font-heading: var(--font-noto-serif-hk), serif;
  /* Base colors using the provided palette */
  --background: 200 12% 95%;
  --foreground: 240 4% 16%;
  --card: 0 0% 100%; /* FFFFFF - pure white cards */
  --card-foreground: 240 4% 16%;
  --popover: 252 100% 99%;
  --popover-foreground: 240 4% 16%;
  /* 2025-01-27: Updated primary color from 170 59% 19% to 170 70% 35%
       Reason: Better contrast and visibility in light mode, improved accessibility
       Impact: All buttons using bg-primary are now more vibrant and visible */
  --primary: 251 58% 66%; /* More vibrant teal for better contrast in light mode */
  --primary-foreground: 0 0% 100%; /* White text like sidebar nav links */
  --secondary: 234 100% 96%;
  --secondary-foreground: 251 58% 66%;
  --muted: 252 100% 99%;
  --muted-foreground: 240 4% 16%;
  --accent: 234 100% 97%;
  --accent-foreground: 240 4% 16%; /* Dark teal text on light accent */
  --destructive: 0 100% 68%;
  --destructive-foreground: 0 0% 98%;

  /* 2025-01-27: Added success and warning semantic color variables
       Reason: Standardize success/warning states across the app, consistent with --destructive pattern
       Impact: Components can now use text-success, bg-success, text-warning, bg-warning classes */
  --success: 142.1 76.2% 36.3%;
  --success-foreground: 210 40% 98%;
  --warning: 47.9 95.8% 53.1%;
  --warning-foreground: 222.2 47.4% 11.2%;

  --border: 234 100% 96%;
  --input: 195 8% 81%;
  /* 2025-01-27: Updated ring color to match new primary color
       Reason: Focus rings should match primary color for consistency
       Impact: Focus states now use the more vibrant teal color */
  --ring: 251 58% 66%; /* Primary color for focus rings */
  --radius: 0.5rem;

  /* Tab switch background */
  --tab-background: 252 100% 99%;

  /* Sidebar specific colors - Green theme */
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 0 0% 46%;
  --sidebar-muted: 170 45% 25%; /* Slightly lighter green for muted elements */
  --sidebar-muted-foreground: 0, 0%, 46%;
  --sidebar-accent: 234 100% 96%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-border: 170 45% 25%; /* Border color matches muted */
  --sidebar-primary: 0 0% 100%; /* White for primary elements */
  /* 2025-01-27: Updated sidebar primary foreground to match new primary
       Reason: Consistency with updated primary color
       Impact: Sidebar elements using primary foreground now use vibrant teal */
  --sidebar-primary-foreground: 251 58% 66%; /* Updated teal text on white */

  /* Selected sidebar nav item - light mode */
  --sidebar-selected-bg: 251 58% 66%; /* Purple background */

  /* Header specific colors - Green theme */
  --header-background: 0 0% 100%; /* Same green as sidebar */
  --header-foreground: 0 0% 46%;
  --header-border: 170 45% 25%; /* Matching border */

  /* Header input/selector specific colors - light mode optimized */
  --header-input-background: 234 100% 97%;
  --header-input-foreground: 240 4% 16%;
  --header-input-border: 234 100% 96%; /* Border */
  --header-input-hover-background: 234 100% 96%;
  --header-input-icon: 251 58% 66%;
  --header-input-icon-hover: 170 59% 25%;

  /* Organization selector dropdown specific colors - light mode */
  --org-dropdown-background: 0 0% 100%; /* Pure white background */
  --org-dropdown-border: 170 20% 80%; /* Very subtle border */
  --org-dropdown-item-hover: 170 25% 95%; /* Very light green hover */
  --org-dropdown-separator: 170 15% 90%; /* Subtle separator */

  /* Select/Command/Dropdown specific colors - light mode */
  --select-dropdown-background: 252 100% 99%; /* Matches --popover */
  --select-dropdown-foreground: 240 4% 16%; /* Dark teal text */
  --select-dropdown-border: 170 20% 85%; /* Light teal border */
  --select-dropdown-item-hover: 170 25% 95%; /* Very light teal hover */
  --select-dropdown-item-selected: 251 58% 66%; /* Match --primary for consistency */
  --select-dropdown-item-selected-text: 0 0% 100%; /* White text on selected */
  --select-dropdown-search-bg: 170 15% 98%; /* Very light background for search */

  /* Checkbox states - light mode */
  --checkbox-unchecked-border: 220 13% 91%; /* Light gray border for unchecked */
  --checkbox-unchecked-hover: 220 13% 78%; /* Darker gray on hover */
  --checkbox-checked-background: 142 76% 36%; /* Green background when checked */
  --checkbox-checked-border: 142 76% 36%; /* Green border when checked */
  --checkbox-checked-text: 0 0% 100%; /* White text/icon when checked */

  /* Project evaluation status colors - light mode */
  --evaluation-success: 142 76% 36%; /* Green for passed/high scores */
  --evaluation-success-bg: 142 76% 36%; /* Green background */
  --evaluation-warning: 45 93% 47%; /* Yellow for warnings/medium scores */
  --evaluation-warning-bg: 45 93% 47%; /* Yellow background */
  --evaluation-error: 0 84% 60%; /* Red for failed/low scores */
  --evaluation-error-bg: 0 84% 60%; /* Red background */
  --evaluation-neutral: 215 16% 47%; /* Blue for neutral states */
  --evaluation-neutral-bg: 215 16% 47%; /* Blue background */

  /* 2025-01-27: Added comprehensive badge color system
       Reason: Prompt packs feature needs consistent badge styling for status, scope, and severity
       Impact: Centralized badge colors, theme-aware, easy to use via utility classes
       Categories: Status badges (published, draft, official, etc.), Sharing scope badges, Severity badges */
  /* Badge status colors - consistent design system */
  --badge-published: 142 76% 36%; /* Green for published */
  --badge-published-text: 0 0% 100%; /* White text */
  --badge-draft: 45 93% 47%; /* Amber for drafts */
  --badge-draft-text: 0 0% 100%; /* White text */
  --badge-official: 271 81% 56%; /* Purple for official/Disseqt */
  --badge-official-text: 0 0% 100%; /* White text */
  --badge-project: 217 91% 60%; /* Blue for project */
  --badge-project-text: 0 0% 100%; /* White text */
  --badge-organization: 142 76% 36%; /* Green for organization */
  --badge-organization-text: 0 0% 100%; /* White text */
  --badge-public: 25 95% 53%; /* Orange for public */
  --badge-public-text: 0 0% 100%; /* White text */
  --badge-mine: 239 84% 67%; /* Indigo for mine */
  --badge-mine-text: 0 0% 100%; /* White text */

  /* Beta badge colors - theme-aware for visibility */
  --badge-beta-bg: 45 93% 90%; /* Light amber background for light mode */
  --badge-beta-text: 45 93% 25%; /* Dark amber text for light mode */
  --badge-beta-border: 45 93% 70%; /* Medium amber border for light mode */

  /* Sharing scope badge colors */
  --badge-scope-private: 100 6% 40%; /* Gray for private */
  --badge-scope-private-text: 0 0% 100%; /* White text */
  --badge-scope-project: 142 76% 36%; /* Green for project-shared */
  --badge-scope-project-text: 0 0% 100%; /* White text */
  --badge-scope-organization: 271 81% 56%; /* Purple for organization-shared */
  --badge-scope-organization-text: 0 0% 100%; /* White text */
  --badge-scope-public: 217 91% 60%; /* Blue for public (admin only) */
  --badge-scope-public-text: 0 0% 100%; /* White text */

  /* Severity badge colors - vibrant and consistent */
  --severity-critical: 0 90% 52%; /* Stronger red for Critical (pops more) */
  --severity-critical-text: 0 0% 100%; /* White text */
  --severity-high: 15 93% 55%; /* Orange/Red-orange for High severity */
  --severity-high-text: 0 0% 100%; /* White text */
  --severity-medium: 45 93% 47%; /* Amber/Yellow for Medium severity */
  --severity-medium-text: 0 0% 100%; /* White text */
  --severity-low: 142 76% 36%; /* Green for Low severity */
  --severity-low-text: 0 0% 100%; /* White text */
  --severity-mixed: 270 45% 58%; /* Neutral purple for mixed (less alarming) */
  --severity-mixed-text: 0 0% 100%; /* White text */

  /* Chart colors - light mode optimized (space-separated for hsl(var(--x) / opacity)) */
  --chart-primary: 251 58% 66%; /* Primary teal for main chart series */
  --chart-secondary: 142 76% 36%; /* Green for secondary series */
  --chart-accent: 217 91% 60%; /* Blue for accent series */
  --chart-warning: 45 93% 47%; /* Amber for warning data */
  --chart-error: 0 84% 60%; /* Red for error/negative data */
  --chart-success: 142 76% 36%; /* Green for success/positive data */
  --chart-info: 217 91% 60%; /* Blue for informational data */
  --chart-muted: 170 25% 60%; /* Muted teal for less important data */

  /* Chart series colors - for multi-series charts */
  --chart-series-1: 251 58% 66%; /* Primary teal */
  --chart-series-2: 142 76% 36%; /* Green */
  --chart-series-3: 217 91% 60%; /* Blue */
  --chart-series-4: 45 93% 47%; /* Amber */
  --chart-series-5: 271 81% 56%; /* Purple */
  --chart-series-6: 25 95% 53%; /* Orange */
  --chart-series-7: 239 84% 67%; /* Indigo */
  --chart-series-8: 280 70% 60%; /* Pink/Magenta */

  /* Chart background and grid colors */
  --chart-background: 0 0% 100%; /* White chart background */
  --chart-grid: 170 15% 85%; /* Light teal grid lines */
  --chart-axis: 170 25% 60%; /* Medium teal for axis lines */
  --chart-text: 240 4% 16%; /* Dark teal for chart text */
  --chart-text-muted: 170 40% 35%; /* Muted teal for secondary text */

  /* Alert Errors styling */
  --alert-background: 0 100% 96%;
  --alert-border: 0 100% 74%;
}

.dark {
  /* Dark theme using sophisticated color relationships */
  --background: 210 13% 6%;
  --foreground: 28 43% 93%;
  --card: 216 17% 12%;
  --card-foreground: 28 43% 93%;
  --popover: 218 17% 18%;
  --popover-foreground: 28 43% 93%;
  --primary: 251 58% 66%;
  --primary-foreground: 0 0% 100%; /* White text for consistency */
  --secondary: 218 17% 18%;
  --secondary-foreground: 28 43% 93%;
  --muted: 218 17% 18%;
  --muted-foreground: 0 0% 63%;
  --accent: 218 17% 22%;
  --accent-foreground: 28 43% 93%;
  /* 2025-01-27: Refined dark mode destructive, success, and warning colors
       Reason: Better contrast and consistency with light mode, improved accessibility
       Impact: Better visibility of semantic states in dark mode */
  --destructive: 0 100% 74%;
  --destructive-foreground: 210 40% 98%;

  /* Alert background - dark red tint for error states */
  --alert-background: 356 35% 19%;
  --alert-border: 0 100% 74%;

  --success: 142.1 60% 30%;
  --success-foreground: 210 40% 98%;
  --warning: 47.9 70% 40%;
  --warning-foreground: 210 40% 98%;

  /* 2025-01-27: Updated dark mode border, input, and ring colors
       Reason: Better contrast and visibility in dark mode, improved UX
       Impact: Inputs and borders are more visible, focus rings are clearer */
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;

  /* Tab switch background */
  --tab-background: 216 17% 12%;

  /* Sidebar specific colors - Green theme (same for dark mode) */
  --sidebar-background: 216 17% 12%;
  --sidebar-foreground: 0 0% 46%;
  --sidebar-muted: 170 45% 25%; /* Slightly lighter green for muted elements */
  --sidebar-muted-foreground: 0 0% 46%;
  --sidebar-accent: 218 17% 18%;
  --sidebar-accent-foreground: 0 0% 100%; /* White text on accent */
  --sidebar-border: 170 45% 25%; /* Border color matches muted */
  --sidebar-primary: 0 0% 100%; /* White for primary elements */
  /* 2025-01-27: Updated sidebar primary foreground to match new primary (dark mode)
       Reason: Consistency with updated primary color in dark mode
       Impact: Sidebar elements using primary foreground now use vibrant teal */
  --sidebar-primary-foreground: 251 58% 66%; /* Updated teal text on white */

  /* Selected sidebar nav item - dark mode (darker purple for contrast on dark sidebar) */
  --sidebar-selected-bg: 251 58% 66%;

  /* Header specific colors - Green theme (same for dark mode) */
  --header-background: 216 17% 12%;
  --header-foreground: 0 0% 100%; /* White text */
  --header-border: 170 45% 25%; /* Matching border */

  /* Header input/selector specific colors - dark mode optimized */
  --header-input-background: 218 17% 18%;
  --header-input-foreground: 0 0% 90%; /* Light text for dark mode */
  --header-input-border: 170 25% 25%; /* Darker border for dark mode */
  --header-input-hover-background: 218 17% 22%;
  --header-input-icon: 251 58% 66%;
  --header-input-icon-hover: 170 40% 70%; /* Even brighter on hover */

  /* Organization selector dropdown specific colors - dark mode optimized */
  --org-dropdown-background: 216 17% 12%;
  --org-dropdown-border: 170 20% 25%; /* Darker border */
  --org-dropdown-item-hover: 218 17% 18%;
  --org-dropdown-separator: 170 15% 25%; /* Darker separator */

  /* Select/Command/Dropdown specific colors - dark mode */
  --select-dropdown-background: 218 17% 18%; /* Matches --popover */
  --select-dropdown-foreground: 28 43% 93%; /* Light cream text */
  --select-dropdown-border: 217 33% 22%; /* Neutral dark border */
  --select-dropdown-item-hover: 218 17% 23%; /* Subtle hover above background */
  --select-dropdown-item-selected: 251 58% 66%; /* Match --primary for consistency */
  --select-dropdown-item-selected-text: 0 0% 100%; /* White text on selected */
  --select-dropdown-search-bg: 170 30% 15%; /* Darker background for search */

  /* Checkbox states - dark mode */
  --checkbox-unchecked-border: 220 13% 45%; /* Medium gray border for unchecked */
  --checkbox-unchecked-hover: 220 13% 60%; /* Lighter gray on hover */
  --checkbox-checked-background: 142 76% 36%; /* Green background when checked */
  --checkbox-checked-border: 142 76% 36%; /* Green border when checked */
  --checkbox-checked-text: 0 0% 100%; /* White text/icon when checked */

  /* Project evaluation status colors - dark mode */
  --evaluation-success: 142 70% 45%; /* Brighter green for dark mode */
  --evaluation-success-bg: 142 70% 45%; /* Green background */
  --evaluation-warning: 45 93% 58%; /* Brighter yellow for dark mode */
  --evaluation-warning-bg: 45 93% 58%; /* Yellow background */
  --evaluation-error: 0 84% 65%; /* Brighter red for dark mode */
  --evaluation-error-bg: 0 84% 65%; /* Red background */
  --evaluation-neutral: 215 25% 65%; /* Brighter blue for dark mode */
  --evaluation-neutral-bg: 215 25% 65%; /* Blue background */

  /* 2025-01-27: Added dark mode badge colors (same vibrant colors)
       Reason: Badge colors work well in both themes, maintaining consistency
       Impact: Badges look consistent across light and dark modes */
  /* Badge status colors - dark mode (same vibrant colors work well) */
  --badge-published: 142 76% 36%; /* Green for published */
  --badge-published-text: 0 0% 100%; /* White text */
  --badge-draft: 45 93% 47%; /* Amber for drafts */
  --badge-draft-text: 0 0% 100%; /* White text */
  --badge-official: 271 81% 56%; /* Purple for official/Disseqt */
  --badge-official-text: 0 0% 100%; /* White text */
  --badge-project: 217 91% 60%; /* Blue for project */
  --badge-project-text: 0 0% 100%; /* White text */
  --badge-organization: 142 76% 36%; /* Green for organization */
  --badge-organization-text: 0 0% 100%; /* White text */
  --badge-public: 25 95% 53%; /* Orange for public */
  --badge-public-text: 0 0% 100%; /* White text */
  --badge-mine: 239 84% 67%; /* Indigo for mine */
  --badge-mine-text: 0 0% 100%; /* White text */

  /* Beta badge colors - dark mode */
  --badge-beta-bg: 45 93% 20%; /* Dark amber background for dark mode */
  --badge-beta-text: 45 93% 75%; /* Light amber text for dark mode */
  --badge-beta-border: 45 93% 40%; /* Medium amber border for dark mode */

  /* Sharing scope badge colors - dark mode */
  --badge-scope-private: 100 6% 50%; /* Lighter gray for dark mode */
  --badge-scope-private-text: 0 0% 100%; /* White text */
  --badge-scope-project: 142 70% 45%; /* Brighter green for dark mode */
  --badge-scope-project-text: 0 0% 100%; /* White text */
  --badge-scope-organization: 271 75% 65%; /* Brighter purple for dark mode */
  --badge-scope-organization-text: 0 0% 100%; /* White text */
  --badge-scope-public: 217 85% 65%; /* Brighter blue for dark mode */
  --badge-scope-public-text: 0 0% 100%; /* White text */

  /* Severity badge colors - dark mode */
  --severity-critical: 0 88% 58%; /* Stronger red for dark mode */
  --severity-critical-text: 0 0% 100%; /* White text */
  --severity-high: 15 93% 65%; /* Brighter orange for dark mode */
  --severity-high-text: 0 0% 100%; /* White text */
  --severity-medium: 45 93% 58%; /* Brighter amber for dark mode */
  --severity-medium-text: 0 0% 100%; /* White text */
  --severity-low: 142 70% 45%; /* Brighter green for dark mode */
  --severity-low-text: 0 0% 100%; /* White text */
  --severity-mixed: 270 45% 62%; /* Neutral purple for dark mode */
  --severity-mixed-text: 0 0% 100%; /* White text */

  /* Chart colors - dark mode optimized */
  --chart-primary: 170 59% 45%; /* Brighter teal for dark backgrounds */
  --chart-secondary: 142 70% 50%; /* Brighter green for dark mode */
  --chart-accent: 217 85% 65%; /* Brighter blue for dark mode */
  --chart-warning: 45 93% 58%; /* Brighter amber for dark mode */
  --chart-error: 0 84% 65%; /* Brighter red for dark mode */
  --chart-success: 142 70% 50%; /* Brighter green for dark mode */
  --chart-info: 217 85% 65%; /* Brighter blue for dark mode */
  --chart-muted: 170 30% 50%; /* Brighter muted teal for dark mode */

  /* Chart series colors - dark mode (brighter for visibility) */
  --chart-series-1: 170 59% 45%; /* Primary teal */
  --chart-series-2: 142 70% 50%; /* Green */
  --chart-series-3: 217 85% 65%; /* Blue */
  --chart-series-4: 45 93% 58%; /* Amber */
  --chart-series-5: 271 75% 65%; /* Purple */
  --chart-series-6: 25 95% 63%; /* Orange */
  --chart-series-7: 239 80% 70%; /* Indigo */
  --chart-series-8: 280 70% 70%; /* Pink/Magenta */

  /* Chart background and grid colors - dark mode */
  --chart-background: 170 40% 10%; /* Dark teal chart background */
  --chart-grid: 170 20% 20%; /* Dark teal grid lines */
  --chart-axis: 170 30% 40%; /* Medium teal for axis lines */
  --chart-text: 28 43% 93%; /* Light cream for chart text */
  --chart-text-muted: 28 30% 70%; /* Muted cream for secondary text */
}

/* Force sidebar styling - keep green theme for both light and dark */
.sidebar-container {
  background-color: hsl(var(--sidebar-background)) !important;
  border-color: hsl(var(--sidebar-border)) !important;
}

/* Style the sidebar navigation scroll area */
.sidebar-nav-scroll::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* 2025-01-27: Enhanced sidebar scrollbar visibility
   Reason: Previous opacity (0.3) was too subtle, users couldn't see scrollbar
   Impact: Better UX - scrollbar is now visible but still subtle */
.sidebar-nav-scroll::-webkit-scrollbar-thumb {
  background-color: hsl(
    var(--sidebar-accent) / 0.5
  ); /* Darker for better visibility */
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--sidebar-accent) / 0.7); /* Even darker on hover */
}

/* Firefox scrollbar styling for navigation area */
.sidebar-nav-scroll {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--sidebar-accent) / 0.5) transparent;
}

/* Apply white text specifically to sidebar elements only */
.sidebar-container a,
.sidebar-container button,
.sidebar-container h3,
.sidebar-container [data-radix-scroll-area-viewport] *,
.sidebar-container svg {
  color: hsl(var(--sidebar-foreground)) !important;
}

/* Beta badge in selected nav item: keep badge colors, don't inherit white */
.sidebar-container a.bg-sidebar-accent .badge-beta,
.sidebar-container a.bg-sidebar-accent .badge-beta * {
  color: hsl(var(--badge-beta-text)) !important;
}

/* Override for deprecation warning icon */
.sidebar-container .text-yellow-500 {
  color: #eab308 !important; /* Tailwind yellow-500 */
}

/* Specific targeting for navigation elements */
.sidebar-container div[class*='space-y'] h3 {
  color: hsl(var(--sidebar-muted-foreground)) !important;
}

.sidebar-container button:hover {
  background-color: hsl(var(--sidebar-accent)) !important;
  color: hsl(var(--sidebar-accent-foreground)) !important;
}

/* Selected/active sidebar nav item: theme-aware background (--sidebar-selected-bg), white text and icon */
.sidebar-container a.bg-sidebar-accent {
  background: hsl(var(--sidebar-selected-bg)) !important;
}
.sidebar-container a.bg-sidebar-accent,
.sidebar-container a.bg-sidebar-accent *,
.sidebar-container a.bg-sidebar-accent svg {
  color: hsl(var(--sidebar-accent-foreground)) !important;
}

/* Header styling - keep green theme */
.header-container {
  background-color: hsl(var(--header-background)) !important;
  color: hsl(var(--header-foreground)) !important;
  border-bottom: 0 !important;
  /* border-color: hsl(var(--header-border)) !important; */
}

/* Apply header colors to specific header elements */
.header-container button,
.header-container a,
.header-container svg,
.header-container nav * {
  color: hsl(var(--header-foreground)) !important;
}

/* Style search button and organization selector using custom header input variables */
.header-container button[class*='bg-gray-100'] {
  background-color: hsl(var(--header-input-background)) !important;
  border-color: hsl(var(--header-input-border)) !important;
  color: hsl(var(--header-input-foreground)) !important;
}

.header-container button[class*='bg-gray-100']:hover {
  background-color: hsl(var(--header-input-hover-background)) !important;
  color: hsl(var(--header-input-foreground)) !important;
}

.header-container button[class*='bg-gray-100']:hover * {
  color: hsl(var(--header-input-foreground)) !important;
}

/* Preserve white text on primary badges (e.g. active status) when parent is hovered */
.header-container button[class*='bg-gray-100']:hover .bg-primary,
.header-container button[class*='bg-gray-100']:hover [class*='bg-primary'] {
  color: white !important;
}

/* Style icons in header buttons using custom header input variables */
.header-container button[class*='bg-gray-100'] svg {
  color: hsl(var(--header-input-icon)) !important;
}

.header-container button[class*='bg-gray-100']:hover svg {
  color: hsl(var(--header-input-icon-hover)) !important;
}

/* Style the command key indicator in search button */
.header-container button[class*='bg-gray-100'] kbd {
  background-color: hsl(var(--header-background)) !important;
  color: hsl(var(--header-input-foreground)) !important;
  border-color: hsl(var(--header-background)) !important;
}

/* Style organization selector dropdown using refined variables */
[data-radix-popover-content] {
  background-color: hsl(var(--org-dropdown-background)) !important;
  border-color: hsl(var(--org-dropdown-border)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  border-width: 1px !important;
}

/* Style command input inside organization dropdown */
[data-radix-popover-content] input {
  color: hsl(var(--header-input-foreground)) !important;
  background-color: hsl(var(--org-dropdown-background)) !important;
  border-color: hsl(var(--org-dropdown-border)) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
}

/* Style command items in organization dropdown */
[data-radix-popover-content] [cmdk-item] {
  color: hsl(var(--header-input-foreground)) !important;
  transition: background-color 0.15s ease !important;
}

[data-radix-popover-content] [cmdk-item]:hover,
[data-radix-popover-content] [data-selected='true'] {
  background-color: hsl(var(--org-dropdown-item-hover)) !important;
  color: hsl(var(--header-input-foreground)) !important;
}

/* Preserve white text on primary badges (e.g. active status) in command items on hover */
[data-radix-popover-content] [cmdk-item]:hover .bg-primary,
[data-radix-popover-content] [data-selected='true'] .bg-primary,
[data-radix-popover-content] [cmdk-item]:hover [class*='bg-primary'],
[data-radix-popover-content] [data-selected='true'] [class*='bg-primary'] {
  color: white !important;
}

/* Style command separator in organization dropdown */
[data-radix-popover-content] [cmdk-separator] {
  background-color: hsl(var(--org-dropdown-separator)) !important;
  border: none !important;
  height: 1px !important;
  margin: 4px 0 !important;
}

/* Remove unwanted borders and improve spacing in organization dropdown */
[data-radix-popover-content] [cmdk-group] {
  border: none !important;
}

[data-radix-popover-content] [cmdk-item] {
  border: none !important;
  margin: 0 !important;
  border-radius: 6px !important;
  margin: 2px 4px !important;
}

/* Style the create organization button specifically */
[data-radix-popover-content] [cmdk-group] [cmdk-item]:first-child {
  background-color: hsl(31 85% 50%) !important;
  color: hsl(0 0% 100%) !important;
}

[data-radix-popover-content] [cmdk-group] [cmdk-item]:first-child:hover {
  background-color: hsl(31 85% 45%) !important;
  color: hsl(0 0% 100%) !important;
}

[data-radix-popover-content] [cmdk-group] [cmdk-item]:first-child * {
  color: hsl(0 0% 100%) !important;
}

/* Style other header inputs */
.header-container input:not([data-radix-popover-content] input) {
  color: hsl(var(--header-input-foreground)) !important;
  background-color: hsl(var(--header-input-background)) !important;
  border-color: hsl(var(--header-input-border)) !important;
}

.header-container input:focus {
  background-color: hsl(var(--header-input-hover-background)) !important;
  border-color: hsl(var(--header-input-icon)) !important;
}

/* Theme-aware skeleton utilities using CSS variables */
.skeleton-sidebar {
  background-color: hsl(var(--sidebar-accent) / 0.3);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-sidebar-container {
  background-color: hsl(var(--sidebar-accent) / 0.15);
  border-color: hsl(var(--sidebar-accent) / 0.2);
}

/* Override default skeleton colors in header context */
.header-container .animate-pulse {
  background-color: hsl(var(--header-input-border)) !important;
}

/* Ensure sidebar background is accessible as a Tailwind class */
.bg-sidebar-background {
  background-color: hsl(var(--sidebar-background)) !important;
}

/* Ensure dashboard content uses proper theme colors */
#main-content {
  color: hsl(var(--foreground)) !important;
}

/* Override any hardcoded dark text that might be invisible in light mode */
#main-content .text-gray-900 {
  color: hsl(var(--foreground)) !important;
}

/* Dark mode text-white override */
.dark #main-content .text-white,
#main-content [class*='dark:text-white'] {
  color: hsl(var(--foreground)) !important;
}

/* 2025-01-27: Added fix for custom LLM type badges
   Reason: Override hardcoded Tailwind colors to ensure proper visibility in both themes
   Impact: LLM type badges (green/yellow) are now visible in both light and dark modes */
/* Fix for custom LLM type badges - override the global text color */
#main-content .rounded-full.text-green-800,
#main-content span.rounded-full.text-green-800,
.custom-llm-type-badge.text-green-800 {
  color: #166534 !important;
}

#main-content .rounded-full.text-yellow-800,
#main-content span.rounded-full.text-yellow-800,
.custom-llm-type-badge.text-yellow-800 {
  color: #92400e !important;
}

/* Dark mode fixes for type badges */
.dark #main-content .rounded-full.text-green-800,
.dark #main-content span.rounded-full.text-green-800,
.dark .custom-llm-type-badge.text-green-800 {
  color: #bbf7d0 !important;
}

.dark #main-content .rounded-full.text-yellow-800,
.dark #main-content span.rounded-full.text-yellow-800,
.dark .custom-llm-type-badge.text-yellow-800 {
  color: #fef3c7 !important;
}

/* Project evaluation status utility classes */
.evaluation-success {
  color: hsl(var(--evaluation-success)) !important;
}

.evaluation-success-bg {
  background-color: hsl(var(--evaluation-success-bg)) !important;
}

.evaluation-warning {
  color: hsl(var(--evaluation-warning)) !important;
}

.evaluation-warning-bg {
  background-color: hsl(var(--evaluation-warning-bg)) !important;
}

.evaluation-error {
  color: hsl(var(--evaluation-error)) !important;
}

.evaluation-error-bg {
  background-color: hsl(var(--evaluation-error-bg)) !important;
}

.evaluation-neutral {
  color: hsl(var(--evaluation-neutral)) !important;
}

.evaluation-neutral-bg {
  background-color: hsl(var(--evaluation-neutral-bg)) !important;
}

/* 2025-01-27: Added badge utility classes
   Reason: Easy-to-use classes for badges, no need to remember HSL values
   Impact: Components can use simple class names like "badge-published" or "severity-critical"
   Usage: <div className="badge-published">Published</div> */
/* Badge status utility classes - reusable across the app */
.badge-published {
  background-color: hsl(var(--badge-published)) !important;
  color: hsl(var(--badge-published-text)) !important;
}

.badge-draft {
  background-color: hsl(var(--badge-draft)) !important;
  color: hsl(var(--badge-draft-text)) !important;
}

.badge-official {
  background-color: hsl(var(--badge-official)) !important;
  color: hsl(var(--badge-official-text)) !important;
}

.badge-project {
  background-color: hsl(var(--badge-project)) !important;
  color: hsl(var(--badge-project-text)) !important;
}

.badge-organization {
  background-color: hsl(var(--badge-organization)) !important;
  color: hsl(var(--badge-organization-text)) !important;
}

.badge-public {
  background-color: hsl(var(--badge-public)) !important;
  color: hsl(var(--badge-public-text)) !important;
}

.badge-mine {
  background-color: hsl(var(--badge-mine)) !important;
  color: hsl(var(--badge-mine-text)) !important;
}

/* Beta badge utility class - theme-aware for visibility in light and dark modes */
.badge-beta {
  background-color: hsl(var(--badge-beta-bg)) !important;
  color: hsl(var(--badge-beta-text)) !important;
  border-color: hsl(var(--badge-beta-border)) !important;
}

/* Sharing scope badge utility classes - for scope visibility badges */
.badge-scope-private {
  background-color: hsl(var(--badge-scope-private)) !important;
  color: hsl(var(--badge-scope-private-text)) !important;
}

.badge-scope-project {
  background-color: hsl(var(--badge-scope-project)) !important;
  color: hsl(var(--badge-scope-project-text)) !important;
}

.badge-scope-organization {
  background-color: hsl(var(--badge-scope-organization)) !important;
  color: hsl(var(--badge-scope-organization-text)) !important;
}

.badge-scope-public {
  background-color: hsl(var(--badge-scope-public)) !important;
  color: hsl(var(--badge-scope-public-text)) !important;
}

/* Severity badge utility classes - reusable across the app */
.severity-critical {
  background-color: hsl(var(--severity-critical)) !important;
  color: hsl(var(--severity-critical-text)) !important;
}

.severity-high {
  background-color: hsl(var(--severity-high)) !important;
  color: hsl(var(--severity-high-text)) !important;
}

.severity-medium {
  background-color: hsl(var(--severity-medium)) !important;
  color: hsl(var(--severity-medium-text)) !important;
}

.severity-low {
  background-color: hsl(var(--severity-low)) !important;
  color: hsl(var(--severity-low-text)) !important;
}

.severity-mixed {
  background-color: hsl(var(--severity-mixed)) !important;
  color: hsl(var(--severity-mixed-text)) !important;
}

/* Chart color utility classes - for use in chart components */
.chart-primary {
  color: hsl(var(--chart-primary)) !important;
}

.chart-secondary {
  color: hsl(var(--chart-secondary)) !important;
}

.chart-accent {
  color: hsl(var(--chart-accent)) !important;
}

.chart-warning {
  color: hsl(var(--chart-warning)) !important;
}

.chart-error {
  color: hsl(var(--chart-error)) !important;
}

.chart-success {
  color: hsl(var(--chart-success)) !important;
}

.chart-info {
  color: hsl(var(--chart-info)) !important;
}

.chart-muted {
  color: hsl(var(--chart-muted)) !important;
}

/* Chart series color utilities */
.chart-series-1 {
  color: hsl(var(--chart-series-1)) !important;
}

.chart-series-2 {
  color: hsl(var(--chart-series-2)) !important;
}

.chart-series-3 {
  color: hsl(var(--chart-series-3)) !important;
}

.chart-series-4 {
  color: hsl(var(--chart-series-4)) !important;
}

.chart-series-5 {
  color: hsl(var(--chart-series-5)) !important;
}

.chart-series-6 {
  color: hsl(var(--chart-series-6)) !important;
}

.chart-series-7 {
  color: hsl(var(--chart-series-7)) !important;
}

.chart-series-8 {
  color: hsl(var(--chart-series-8)) !important;
}

/* Chart background and text utilities */
.chart-bg {
  background-color: hsl(var(--chart-background)) !important;
}

.chart-grid {
  stroke: hsl(var(--chart-grid)) !important;
}

.chart-axis {
  stroke: hsl(var(--chart-axis)) !important;
}

.chart-text {
  color: hsl(var(--chart-text)) !important;
}

.chart-text-muted {
  color: hsl(var(--chart-text-muted)) !important;
}

/* KBar search component styling using header input variables */
[data-kbar-search] {
  background-color: hsl(var(--org-dropdown-background)) !important;
  color: hsl(var(--header-input-foreground)) !important;
  border-color: hsl(var(--org-dropdown-border)) !important;
}

[data-kbar-search]:focus {
  outline: none !important;
  border-color: hsl(var(--header-input-icon)) !important;
  box-shadow: 0 0 0 2px hsl(var(--header-input-icon) / 0.1) !important;
}

[data-kbar-search]::placeholder {
  color: hsl(var(--header-input-foreground) / 0.6) !important;
}

/* KBar results container styling */
[data-kbar-results] {
  background-color: hsl(var(--org-dropdown-background)) !important;
  color: hsl(var(--header-input-foreground)) !important;
}

/* KBar result items styling */
[data-kbar-item] {
  color: hsl(var(--header-input-foreground)) !important;
  transition: all 0.15s ease !important;
}

[data-kbar-item] [data-subtitle] {
  color: hsl(var(--header-input-foreground) / 0.6) !important;
}

/* KBar active result item */
[data-kbar-item][aria-selected='true'] {
  background-color: hsl(var(--org-dropdown-item-hover)) !important;
  color: hsl(var(--header-input-foreground)) !important;
}

/* KBar section headers */
[data-kbar-results] .text-primary-foreground {
  color: hsl(var(--header-input-foreground) / 0.7) !important;
}

/* KBar keyboard shortcuts styling */
[data-kbar-item] kbd {
  background-color: hsl(var(--org-dropdown-border)) !important;
  color: hsl(var(--header-input-foreground)) !important;
  border-color: hsl(var(--org-dropdown-separator)) !important;
}

/* Primary button styles - removed to prevent overriding dashboard components */

/* Dashboard Content Area - Popover & Dropdown Styling */
/* All popover styles are now handled by dedicated dashboard components with inline styles */
/* This ensures no conflicts with header components */

/* Checkbox styling within dashboard popovers */
.dashboard-popover .group\/checkbox {
  position: relative;
}

.dashboard-popover .group\/checkbox[data-state='checked'] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.dashboard-popover .group\/checkbox[data-state='checked']:hover {
  background-color: hsl(var(--primary) / 0.9);
  color: hsl(var(--primary-foreground));
}

/* Custom checkbox styling within command items */
.dashboard-popover .group\/checkbox .custom-checkbox {
  border: 1px solid hsl(var(--primary));
  border-radius: 0.125rem;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.dashboard-popover .group\/checkbox[data-state='checked'] .custom-checkbox {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.dashboard-popover .group\/checkbox .custom-checkbox .check-icon {
  color: hsl(var(--primary-foreground));
  width: 0.75rem;
  height: 0.75rem;
}

/* Sheet and Drawer primary buttons - removed to prevent overriding dashboard components */

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}

/* Refined shadow utilities for better layering */
@layer utilities {
  .shadow-card-dark {
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.2),
      0 1px 2px rgba(0, 0, 0, 0.4);
  }

  .shadow-elevation-dark {
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.2),
      0 5px 15px rgba(0, 0, 0, 0.4);
  }

  /* New utility for subtle hover states */
  .hover-elevation-dark {
    transition: background-color 0.2s ease;
  }
  .hover-elevation-dark:hover {
    background-color: rgba(255, 255, 255, 0.03);
  }

  /* Visible scrollbar utility - Always visible scrollbar */
  .visible-scrollbar {
    scrollbar-width: thin !important;
    scrollbar-color: hsl(var(--muted-foreground) / 0.7) hsl(var(--muted) / 0.5) !important;
    /* Force scrollbar to always be visible by using scroll instead of auto */
    overflow-y: scroll !important;
  }

  .visible-scrollbar::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    -webkit-appearance: none !important;
    /* Force scrollbar to always be visible */
    display: block !important;
  }

  .visible-scrollbar::-webkit-scrollbar-track {
    background: hsl(var(--muted) / 0.5) !important;
    border-radius: 4px !important;
    /* Ensure track is always visible with a subtle border */
    border: 1px solid hsl(var(--muted) / 0.3) !important;
  }

  .visible-scrollbar::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted-foreground) / 0.7) !important;
    border-radius: 4px !important;
    /* Ensure thumb is always visible with a border */
    border: 1px solid hsl(var(--muted-foreground) / 0.3) !important;
    min-height: 20px !important;
    /* Force thumb to be visible */
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1) !important;
  }

  .visible-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground) / 0.9) !important;
    border-color: hsl(var(--muted-foreground) / 0.5) !important;
  }

  /* Ensure scrollbar is visible even when not scrolling - make track more prominent */
  .visible-scrollbar:hover::-webkit-scrollbar-track {
    background: hsl(var(--muted) / 0.6) !important;
  }

  /* Subtle fade gradient at bottom of scrollable dropdowns */
  .has-scroll-fade {
    position: relative;
  }

  .has-scroll-fade::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 8px; /* Account for scrollbar width */
    height: 20px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      hsl(var(--select-dropdown-background) / 0.3) 50%,
      hsl(var(--select-dropdown-background)) 100%
    );
    pointer-events: none;
    z-index: 1;
    border-radius: 0 0 6px 0; /* Match dropdown border radius on left side */
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  /* Hide fade when hovering (user is actively interacting) */
  .has-scroll-fade:hover::after {
    opacity: 0;
  }
}

@layer utilities {
  .min-h-screen {
    min-height: 100vh; /* Fallback */
    min-height: 100dvh;
  }
  .h-screen {
    height: 100vh; /* Fallback */
    height: 100dvh;
  }
}

/* Utility class for horizontal scrollable tabs */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

/* Add smooth scrolling utility */
.scroll-smooth {
  scroll-behavior: smooth;
}

/* Custom, app-wide scrollbar styling */
::-webkit-scrollbar {
  height: 8px; /* Height of the horizontal scrollbar */
  width: 8px; /* Width of the vertical scrollbar */
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted) / 0.3); /* Lighter track for better contrast */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: hsl(
    var(--muted-foreground) / 0.5
  ); /* Much darker default state */
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.7); /* Very dark on hover */
  background-clip: content-box;
}

.metrics-table-wrapper {
  position: relative;
}

.metrics-table-container {
  scrollbar-width: thin;
}

.metrics-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

/* Header styles */
.metrics-table thead th {
  position: sticky;
  top: 0;
  background-color: hsl(var(--background));
  z-index: 40 !important;
  border-bottom: 1px solid hsl(var(--border));
  font-weight: 500;
}

/* Scrollbar styling */
.metrics-table-container::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.metrics-table-container::-webkit-scrollbar-thumb {
  background-color: hsl(
    var(--muted-foreground) / 0.5
  ); /* Much darker default state */
  border-radius: 8px;
}

.metrics-table-container::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground) / 0.7); /* Very dark on hover */
}

.metrics-table-container::-webkit-scrollbar-track {
  background: hsl(var(--muted) / 0.3); /* Lighter track for contrast */
}

/* ============================================
   METRICS TABLE - Sticky Columns Styling
   Scoped to .metrics-table-container to avoid affecting other tables
   ============================================ */

/* Base sticky column styling */
.metrics-table-container .sticky-col {
  position: sticky;
  background-color: hsl(var(--background));
}

/* Ensure headers with sticky-col are sticky both horizontally and vertically */
.metrics-table-container thead th.sticky-col,
.metrics-table-container thead th.checkbox-col {
  position: sticky;
  top: 0;
  background-color: hsl(var(--background)) !important;
}

/* Checkbox column - always first when present */
.metrics-table-container .checkbox-col {
  position: sticky;
  left: 0;
  background-color: hsl(var(--background));
  border-right: 1px solid hsl(var(--border));
}

/* First column (Prompt) - offset by checkbox if present */
.metrics-table-container .first-col {
  left: 0;
  border-right: 1px solid hsl(var(--border));
}

.metrics-table-container:has(.checkbox-col) .first-col {
  left: 48px; /* w-12 = 48px */
}

/* Second column (Response) */
.metrics-table-container .second-col {
  left: 260px;
  border-right: 1px solid hsl(var(--border));
}

.metrics-table-container:has(.checkbox-col) .second-col {
  left: 308px; /* 48px + 260px */
}

/* Third column (Overall Status) */
.metrics-table-container .third-col {
  left: 520px; /* 260px + 260px */
  border-right: 1px solid hsl(var(--border));
}

.metrics-table-container:has(.checkbox-col) .third-col {
  left: 568px; /* 48px + 260px + 260px */
}

/* Smooth scrolling container */
.metrics-table-container {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted)) transparent;
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
}

/* Table structure */
.metrics-table-container .metrics-table {
  position: relative;
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Z-index stacking: headers above body, left to right */
/* Sticky headers must be above all scrolling content */
.metrics-table-container thead th.checkbox-col {
  z-index: 200 !important;
}

.metrics-table-container thead th.first-col {
  z-index: 201 !important;
}

.metrics-table-container thead th.second-col {
  z-index: 202 !important;
}

.metrics-table-container thead th.third-col {
  z-index: 203 !important;
}

/* Scrolling metric headers - much lower z-index so they stay behind sticky headers */
.metrics-table-container
  thead
  th:not(.sticky-col):not(.checkbox-col):not(.first-col):not(.second-col):not(
    .third-col
  ) {
  z-index: 10 !important;
  position: relative;
}

/* Ensure header row itself is sticky */
.metrics-table-container thead {
  position: sticky;
  top: 0;
  background-color: hsl(var(--background));
  z-index: 100;
}

.metrics-table-container tbody td.checkbox-col {
  z-index: 10 !important;
}

.metrics-table-container tbody td.first-col {
  z-index: 11 !important;
}

.metrics-table-container tbody td.second-col {
  z-index: 12 !important;
}

.metrics-table-container tbody td.third-col {
  z-index: 13 !important;
}

/* Ensure sticky columns have solid backgrounds */
.metrics-table-container thead th.sticky-col,
.metrics-table-container tbody td.sticky-col,
.metrics-table-container thead th.checkbox-col,
.metrics-table-container tbody td.checkbox-col,
.metrics-table-container thead th.first-col,
.metrics-table-container tbody td.first-col,
.metrics-table-container thead th.second-col,
.metrics-table-container tbody td.second-col,
.metrics-table-container thead th.third-col,
.metrics-table-container tbody td.third-col {
  background-color: hsl(var(--background)) !important;
}

/* Enforce fixed widths and prevent expansion */
.metrics-table-container .metrics-table th.checkbox-col,
.metrics-table-container .metrics-table td.checkbox-col {
  width: 48px !important;
  max-width: 48px !important;
  min-width: 48px !important;
}

.metrics-table-container .metrics-table th.first-col,
.metrics-table-container .metrics-table td.first-col,
.metrics-table-container .metrics-table th.second-col,
.metrics-table-container .metrics-table td.second-col {
  width: 260px !important;
  max-width: 260px !important;
  min-width: 260px !important;
  overflow: hidden;
}

.metrics-table-container .metrics-table th.third-col,
.metrics-table-container .metrics-table td.third-col {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 120px !important;
}

/* Row hover - but sticky cells keep their background */
.metrics-table-container tbody tr:hover {
  background-color: hsl(var(--muted) / 0.3);
}

.metrics-table-container tbody tr:hover td.checkbox-col,
.metrics-table-container tbody tr:hover td.first-col,
.metrics-table-container tbody tr:hover td.second-col,
.metrics-table-container tbody tr:hover td.third-col,
.metrics-table-container tbody tr:hover td.sticky-col {
  background-color: hsl(var(--background)) !important;
}

/* Subtle shadow for sticky columns */
.metrics-table-container th.checkbox-col,
.metrics-table-container td.checkbox-col,
.metrics-table-container th.first-col,
.metrics-table-container td.first-col,
.metrics-table-container th.second-col,
.metrics-table-container td.second-col,
.metrics-table-container th.third-col,
.metrics-table-container td.third-col {
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1);
}

/* Cell styling - more compact (scoped to metrics-table-container) */
.metrics-table-container .metrics-table td,
.metrics-table-container .metrics-table th {
  padding: 8px 10px;
  font-size: 0.875rem;
}

/* Compact header styling - don't override font-size to preserve text visibility */
.metrics-table-container .metrics-table thead th {
  padding: 10px;
  font-weight: 600;
}

/* Compact overall status column */
.metrics-table-container .metrics-table .third-col {
  min-width: 100px;
  padding: 8px 6px;
}

/* Compact metric columns */
.metrics-table-container
  .metrics-table
  th:not(.sticky-col):not(.checkbox-col):not(.first-col):not(.second-col):not(
    .third-col
  ),
.metrics-table-container
  .metrics-table
  td:not(.sticky-col):not(.checkbox-col):not(.first-col):not(.second-col):not(
    .third-col
  ) {
  min-width: 120px;
  padding: 8px 8px;
  font-size: 0.8125rem;
}

/* Fixed height for rows - more compact */
.metrics-table-container .metrics-table tbody tr {
  height: auto;
  min-height: 60px;
}

/* Ensure badges don't wrap */
.metrics-table-container .metrics-table td .badge {
  white-space: nowrap;
}

/* ============================================
   TOOLTIPS - PORTAL RENDERING & Z-INDEX FIX
   Date: 2025-01-XX
   Issue: Tooltips appearing behind sticky columns (z-index 203)
   Solution: TooltipPrimitive.Portal wrapper + CSS z-index override
   ============================================ */

/* 2025-01-XX: Portal container z-index - ensures tooltips render above sticky columns */
/* Portal renders at document.body level, but needs explicit z-index above sticky columns (203) */
[data-radix-portal] {
  z-index: 1000;
}

/* 2025-01-XX: Tooltip content z-index override - must be above sticky columns */
/* Overrides default z-50 from tooltip component to ensure visibility above sticky columns */
[data-radix-tooltip-content] {
  z-index: 1000 !important;
}

/* Dialog/Modal scrollbar styling - Override Radix UI defaults */
[data-radix-dialog-content]::-webkit-scrollbar,
[data-radix-dialog-overlay]::-webkit-scrollbar,
[role='dialog']::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

[data-radix-dialog-content]::-webkit-scrollbar-track,
[data-radix-dialog-overlay]::-webkit-scrollbar-track,
[role='dialog']::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track,
.overflow-x-auto::-webkit-scrollbar-track {
  background: hsl(var(--muted) / 0.3); /* Lighter track for contrast */
  border-radius: 10px;
}

[data-radix-dialog-content]::-webkit-scrollbar-thumb,
[data-radix-dialog-overlay]::-webkit-scrollbar-thumb,
[role='dialog']::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb {
  background: hsl(
    var(--muted-foreground) / 0.5
  ); /* Much darker default state */
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

[data-radix-dialog-content]::-webkit-scrollbar-thumb:hover,
[data-radix-dialog-overlay]::-webkit-scrollbar-thumb:hover,
[role='dialog']::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover,
.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.7); /* Very dark on hover */
  background-clip: content-box;
}