/* ============================================================================
   Cyberpunk Theme � Dark retro-futuristic synthwave/cyberpunk aesthetic
   Scoped under .dark.theme-cyberpunk and .light.theme-cyberpunk
   ============================================================================ */

.dark.theme-cyberpunk {
  --background: 240 18% 4%;
  --foreground: 210 40% 93%;
  --card: 240 15% 7%;
  --card-foreground: 210 40% 93%;
  --popover: 240 15% 7%;
  --popover-foreground: 210 40% 93%;
  --primary: 330 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 180 100% 50%;
  --secondary-foreground: 0 0% 0%;
  --muted: 240 12% 12%;
  --muted-foreground: 240 8% 55%;
  --accent: 260 80% 60%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 55%;
  --destructive-foreground: 0 0% 100%;
  --success: 110 100% 50%;
  --success-foreground: 0 0% 0%;
  --warning: 30 100% 55%;
  --warning-foreground: 0 0% 0%;
  --border: 270 30% 15%;
  --input: 240 12% 12%;
  --ring: 330 100% 50%;
  --radius: 0.5rem;
  --sidebar: 240 15% 3%;
  --sidebar-foreground: 210 40% 93%;
  --sidebar-primary: 330 100% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 10% 10%;
  --sidebar-accent-foreground: 210 40% 93%;
  --sidebar-border: 270 25% 12%;
  --sidebar-ring: 330 100% 50%;
}
.light.theme-cyberpunk {
  --background: 0 0% 98%;
  --foreground: 240 10% 15%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 15%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 15%;
  --primary: 330 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 180 100% 50%;
  --secondary-foreground: 0 0% 0%;
  --muted: 240 5% 94%;
  --muted-foreground: 240 4% 48%;
  --accent: 260 80% 60%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 55%;
  --destructive-foreground: 0 0% 100%;
  --success: 110 100% 50%;
  --success-foreground: 0 0% 0%;
  --warning: 30 100% 55%;
  --warning-foreground: 0 0% 0%;
  --border: 270 10% 88%;
  --input: 240 5% 92%;
  --ring: 330 100% 50%;
  --radius: 0.5rem;
  --sidebar: 0 0% 100%;
  --sidebar-foreground: 240 10% 15%;
  --sidebar-primary: 330 100% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 5% 94%;
  --sidebar-accent-foreground: 240 10% 15%;
  --sidebar-border: 270 10% 88%;
  --sidebar-ring: 330 100% 50%;
}

/* ============================================================================
   Cyberpunk Cityscape Background � High-tech digital grid with fixed parallax
   ============================================================================ */
.dark.theme-cyberpunk body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("https://images.unsplash.com/photo-1558009624-d1449e45e8b6?w=1920&q=80") no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.light.theme-cyberpunk body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: hsl(0, 0%, 98%);
}

@keyframes cyberpunk-bg {
  0% { background-position: 0% 0%; }
  25% { background-position: 5% 3%; }
  50% { background-position: 8% 6%; }
  75% { background-position: 3% 3%; }
  100% { background-position: 0% 0%; }
}
/* ============================================================================
   App Shell � Make the background transparent so body::before shows through
   ============================================================================ */
.dark.theme-cyberpunk .min-h-screen.bg-\[\#F8F8F8\],
.light.theme-cyberpunk .min-h-screen.bg-\[\#F8F8F8\] {
  background: transparent !important;
}
.dark.theme-cyberpunk .dark\:bg-\[\#0A0A0A\],
.light.theme-cyberpunk .dark\:bg-\[\#0A0A0A\] {
  background: transparent !important;
}
.light.theme-cyberpunk .min-h-screen {
  background: hsl(0, 0%, 98%) !important;
}

/* ============================================================================
   Top Navigation & Header Bar
   ============================================================================ */
.dark.theme-cyberpunk header.sticky {
  background: hsl(240, 15%, 3%) !important;
  border-bottom-color: hsl(270, 25%, 10%) !important;
}
.dark.theme-cyberpunk header .text-primary.font-bold.tracking-wide {
  color: hsl(330, 100%, 55%) !important;
  text-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
}
.dark.theme-cyberpunk header button:hover {
  background: hsla(330, 100%, 50%, 0.1) !important;
  color: hsl(330, 100%, 60%) !important;
}
.dark.theme-cyberpunk .dark\:bg-\[\#1E1E1E\] {
  background: hsl(240, 12%, 9%) !important;
}
.dark.theme-cyberpunk .dark\:border-\[\#222222\] {
  border-color: hsl(270, 20%, 12%) !important;
}
.dark.theme-cyberpunk input::placeholder {
  color: hsl(240, 8%, 40%) !important;
  font-size: 0.8rem;
}
.dark.theme-cyberpunk .rounded-full.bg-primary.text-\[10px\] {
  background: hsl(330, 100%, 50%) !important;
  box-shadow: 0 0 6px rgba(255, 0, 127, 0.6);
}
.dark.theme-cyberpunk header .w-\[6px\] {
  background: linear-gradient(180deg, hsl(330, 100%, 50%), hsl(180, 100%, 50%), hsl(260, 80%, 60%)) !important;
}
.dark.theme-cyberpunk header .w-\[6px\] > div {
  background: none !important;
}

/* ============================================================================
   Page Header � Dashboard title
   ============================================================================ */
.dark.theme-cyberpunk .border-l-4.border-\[\#C84B4B\],
.light.theme-cyberpunk .border-l-4.border-\[\#C84B4B\] {
  border-left-color: hsl(330, 100%, 50%) !important;
}
.dark.theme-cyberpunk .dark\:border-\[\#FF1111\],
.light.theme-cyberpunk .dark\:border-\[\#FF1111\] {
  border-left-color: hsl(330, 100%, 50%) !important;
}
.dark.theme-cyberpunk .dark\:text-white.text-2xl.font-bold {
  color: hsl(0, 0%, 97%) !important;
  text-shadow: 0 0 6px rgba(255, 0, 127, 0.15);
}
.light.theme-cyberpunk .text-2xl.font-bold {
  color: hsl(220, 20%, 12%) !important;
  font-weight: 800 !important;
}
.dark.theme-cyberpunk .dark\:text-\[\#AAAAAA\],
.light.theme-cyberpunk .text-\[\#AAAAAA\] {
  color: hsl(240, 8%, 50%) !important;
}

/* ============================================================================
   Section Subtitles � "Pipeline Overview" / "Analytics"
   ============================================================================ */
.dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest,
.light.theme-cyberpunk .text-xs.font-semibold.tracking-widest {
  color: hsl(240, 8%, 38%) !important;
  letter-spacing: 0.18em;
}

/* ============================================================================
   Left Navigation Sidebar
   ============================================================================ */
.dark.theme-cyberpunk aside.border-r {
  border-right-color: hsl(270, 25%, 10%) !important;
}
.dark.theme-cyberpunk aside .bg-sidebar {
  background: hsl(240, 15%, 3%) !important;
}

/* Active nav item � neon-pink pill */
.dark.theme-cyberpunk aside a.bg-sidebar-primary {
  background: hsl(330, 100%, 50%) !important;
  color: hsl(0, 0%, 100%) !important;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.3), 0 0 20px rgba(255, 0, 127, 0.1);
  border-radius: 9999px !important;
}
.dark.theme-cyberpunk aside a.bg-sidebar-primary svg {
  color: hsl(0, 0%, 100%) !important;
}

/* Active nav item collapsed */
.dark.theme-cyberpunk aside a.relative.h-10.w-10.bg-sidebar-primary {
  background: hsl(330, 100%, 50%) !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.4);
  border-radius: 9999px !important;
}

/* Inactive nav items */
.dark.theme-cyberpunk aside a.text-sidebar-foreground\/60 {
  color: hsl(240, 8%, 50%) !important;
}
.dark.theme-cyberpunk aside a.text-sidebar-foreground\/60:hover {
  background: hsla(330, 100%, 50%, 0.08) !important;
  color: hsl(0, 0%, 90%) !important;
}
.dark.theme-cyberpunk aside a.hover\:text-sidebar-accent-foreground:hover {
  color: hsl(0, 0%, 95%) !important;
}
.dark.theme-cyberpunk aside a svg.h-5 {
  color: hsl(240, 8%, 50%);
}

/* Sidebar borders */
.dark.theme-cyberpunk aside .border-b,
.dark.theme-cyberpunk aside .border-t {
  border-color: hsl(270, 25%, 10%) !important;
}

/* User profile avatar */
.dark.theme-cyberpunk aside [class*="AvatarFallback"] {
  background: hsl(330, 100%, 50%) !important;
  color: hsl(0, 0%, 100%) !important;
  box-shadow: 0 0 6px rgba(255, 0, 127, 0.3);
}
.dark.theme-cyberpunk aside .text-xs.text-sidebar-foreground\/60 {
  color: hsl(240, 8%, 45%) !important;
}

/* Unread badge � neon pink */
.dark.theme-cyberpunk aside .bg-red-500 {
  background: hsl(330, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.6) !important;
}
.dark.theme-cyberpunk aside .shadow-\[0_0_10px_\#ef4444\] {
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.6) !important;
}
.dark.theme-cyberpunk aside .shadow-\[0_0_8px_\#ef4444\] {
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.5) !important;
}

/* System monitor values */
.dark.theme-cyberpunk aside .text-\[var\(--theme-primary\, #3b91f7\)\] {
  color: hsl(180, 100%, 55%) !important;
}
.dark.theme-cyberpunk aside .text-red-400 {
  color: hsl(330, 100%, 55%) !important;
}
/* ============================================================================
   Stat Cards � Glass panels with neon-pink accents
   ============================================================================ */

/* Pipeline Overview metric cards � semi-transparent glass + neon-pink glow border */
.dark.theme-cyberpunk .group.h-full > .rounded-xl.border,
.light.theme-cyberpunk .group.h-full > .rounded-xl.border {
  background: rgba(20, 20, 25, 0.75) !important;
  backdrop-filter: blur(10px) !important;
  border: 2px solid hsl(330, 100%, 50%) !important;
  box-shadow: 0 0 0 1px hsla(330, 100%, 50%, 0.4),
              0 0 15px rgba(255, 0, 127, 0.2),
              0 0 40px rgba(255, 0, 127, 0.1),
              0 -2px 8px rgba(255, 0, 127, 0.15),
              0 4px 24px rgba(0, 0, 0, 0.5) !important;
}
.dark.theme-cyberpunk .group.h-full:hover > .rounded-xl.border,
.light.theme-cyberpunk .group.h-full:hover > .rounded-xl.border {
  border-color: hsl(330, 100%, 55%) !important;
  box-shadow: 0 0 0 2px hsla(330, 100%, 50%, 0.5),
              0 0 20px rgba(255, 0, 127, 0.3),
              0 0 50px rgba(255, 0, 127, 0.15),
              0 -4px 12px rgba(255, 0, 127, 0.25),
              0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* Neon-pink top border strip on every card */
.dark.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm,
.light.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm {
  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.3), 0 0 16px rgba(255, 0, 127, 0.1) !important;
}

/* Stat value � bright white with subtle glow */
.dark.theme-cyberpunk .text-3xl.font-bold.tracking-tight,
.light.theme-cyberpunk .text-3xl.font-bold.tracking-tight {
  color: hsl(0, 0%, 97%) !important;
  text-shadow: 0 0 8px rgba(255, 0, 127, 0.1);
}

/* Stat title � muted */
.dark.theme-cyberpunk .text-sm.font-medium.text-muted-foreground {
  color: hsl(240, 8%, 50%) !important;
}

/* Stat description */
.dark.theme-cyberpunk .text-xs.text-\[\#8A9078\] {
  color: hsl(240, 8%, 42%) !important;
}

/* Trend indicators � green up, red down */
.dark.theme-cyberpunk .text-emerald-500 {
  color: hsl(110, 100%, 50%) !important;
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
}
.dark.theme-cyberpunk .text-rose-500 {
  color: hsl(330, 100%, 50%) !important;
}

/* Icon containers � replace red/blue bg with dark glass */
.dark.theme-cyberpunk .flex.h-12.w-12.items-center.justify-center.rounded-xl {
  background: hsla(330, 100%, 50%, 0.08) !important;
  box-shadow: 0 0 6px rgba(255, 0, 127, 0.05);
}
.dark.theme-cyberpunk .flex.h-12.w-12.items-center svg.h-6 {
  color: hsl(330, 100%, 55%) !important;
}

/* Sparkline SVG � cyan glow */
.dark.theme-cyberpunk svg.opacity-60 path {
  stroke: hsl(180, 100%, 55%) !important;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.3));
}

/* Progress bar background */
.dark.theme-cyberpunk .w-full.h-1\.5.bg-muted.rounded-full {
  background: hsl(240, 12%, 14%) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Progress bar fill � pink to cyan gradient */
.dark.theme-cyberpunk .h-full.rounded-full.bg-gradient-to-r {
  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
  box-shadow: 0 0 6px rgba(255, 0, 127, 0.3);
}

/* Bottom glow bar on cards */
.dark.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1,
.light.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1 {
  background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.25), transparent) !important;
}

/* Stat card alternating patterns � override spidey red/blue with pink/cyan */
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
  background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(180, 100%, 65%), hsl(180, 100%, 50%)) !important;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 {
  background: hsla(330, 100%, 50%, 0.12) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 {
  background: hsla(180, 100%, 50%, 0.1) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg {
  color: hsl(330, 100%, 50%) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg {
  color: hsl(180, 100%, 50%) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 {
  background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.3), transparent) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 {
  background: linear-gradient(to right, transparent, hsla(180, 100%, 50%, 0.25), transparent) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r {
  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
}
/* ============================================================================
   Charts � Lead Status Donut & Leads Per Month Bar
   ============================================================================ */

/* Donut chart � card glass */
.dark.theme-cyberpunk .h-full .rounded-xl.border:has(svg) {
  background: hsla(240, 15%, 7%, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  border-color: hsla(270, 30%, 20%, 0.35) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px hsla(330, 100%, 50%, 0.06);
}

/* Donut center text */
.dark.theme-cyberpunk svg text[font-size="28"] {
  fill: hsl(0, 0%, 97%) !important;
  font-weight: 700;
}
.dark.theme-cyberpunk svg text[font-size="12"] {
  fill: hsl(240, 8%, 50%) !important;
}

/* Donut legend items � glass background with neon border */
.dark.theme-cyberpunk .grid.w-full.grid-cols-2.gap-2 > div {
  background: hsla(240, 15%, 8%, 0.6) !important;
  backdrop-filter: blur(4px);
  border: 1px solid hsla(270, 30%, 18%, 0.3) !important;
  border-radius: 12px !important;
}
.dark.theme-cyberpunk .grid.w-full.grid-cols-2.gap-2 > div:hover {
  border-color: hsla(330, 100%, 50%, 0.15) !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.05);
}

/* Legend name */
.dark.theme-cyberpunk .text-xs.font-medium {
  color: hsl(210, 40%, 85%) !important;
}
.dark.theme-cyberpunk .mt-0\.5.text-\[11px\] {
  color: hsl(240, 8%, 50%) !important;
}
.dark.theme-cyberpunk .text-xs.font-semibold:last-child {
  color: hsl(210, 40%, 80%) !important;
}

/* Bar chart � card glass */
.dark.theme-cyberpunk .h-full > .rounded-xl.border:has(.overflow-visible) {
  background: hsla(240, 15%, 7%, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  border-color: hsla(270, 30%, 20%, 0.35) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px hsla(330, 100%, 50%, 0.06);
}

/* Bar chart subtitle */
.dark.theme-cyberpunk .mt-1.text-sm.text-muted-foreground {
  color: hsl(240, 8%, 55%) !important;
}

/* Bar chart legend labels */
.dark.theme-cyberpunk .text-xs.text-muted-foreground {
  color: hsl(240, 8%, 55%) !important;
}

/* Year selector */
.dark.theme-cyberpunk .rounded-lg.border.px-2.py-1 {
  background: hsla(240, 12%, 10%, 0.6) !important;
  border-color: hsl(270, 25%, 15%) !important;
}
.dark.theme-cyberpunk .min-w-\[50px\].text-center.text-sm.font-semibold {
  color: hsl(0, 0%, 90%) !important;
}
.dark.theme-cyberpunk .rounded-lg.border button:hover {
  background: hsla(330, 100%, 50%, 0.1) !important;
  color: hsl(330, 100%, 55%) !important;
}

/* Bar chart grid lines */
.dark.theme-cyberpunk svg line[stroke="#d1d5db"],
.dark.theme-cyberpunk svg line[stroke="#e5e7eb"] {
  stroke: hsla(270, 25%, 20%, 0.3) !important;
}

/* Bar chart x-axis labels */
.dark.theme-cyberpunk svg text[fill="#6b7280"],
.dark.theme-cyberpunk svg text[fill="#9ca3af"] {
  fill: hsl(240, 8%, 45%) !important;
}
.dark.theme-cyberpunk svg text[fill="#374151"],
.dark.theme-cyberpunk svg text[fill="#4b5563"] {
  fill: hsl(210, 40%, 75%) !important;
}

/* New Leads bars — intense neon-pink with intense glow */
.dark.theme-cyberpunk svg rect[fill*="newLeadsGrad"] {
  fill: hsl(330, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(255, 0, 127, 0.5)) !important;
  rx: 4;
}

/* Closed bars — bright neon cyan with glow */
.dark.theme-cyberpunk svg rect[fill*="closedGrad"] {
  fill: hsl(186, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4)) !important;
  rx: 4;
}

/* Bar chart legend swatch — New Lead (intense neon pink #FF1493) */
.dark.theme-cyberpunk .items-start .gap-4 > :first-child .rounded-sm {
  background: hsl(330, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.7), 0 0 20px rgba(255, 0, 127, 0.25) !important;
  border: 1px solid hsl(330, 100%, 60%) !important;
}

/* Bar chart legend swatch — Closed (bright neon cyan #00F0FF) */
.dark.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .rounded-sm {
  background: hsl(186, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 20px rgba(0, 229, 255, 0.2) !important;
  border: 1px solid hsl(186, 100%, 55%) !important;
}

/* Bar chart legend label — New Lead (neon pink text) */
.dark.theme-cyberpunk .items-start .gap-4 > :first-child .text-xs {
  color: hsl(330, 100%, 65%) !important;
  font-weight: 600;
}

/* Bar chart legend label — Closed (neon cyan text) */
.dark.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .text-xs {
  color: hsl(186, 100%, 60%) !important;
  font-weight: 600;
}

/* Hover tooltip */
.dark.theme-cyberpunk .min-w-\[150px\].rounded-xl.border.p-3 {
  background: hsla(240, 15%, 8%, 0.95) !important;
  border-color: hsl(270, 30%, 20%) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px hsla(330, 100%, 50%, 0.1);
  backdrop-filter: blur(8px);
}
.dark.theme-cyberpunk .mb-1\.5.text-xs.font-semibold {
  color: hsl(0, 0%, 90%) !important;
}
/* ============================================================================
   Data Tables � Alternating obsidian rows, glowing status badges
   ============================================================================ */

/* Card wrapper */
.dark.theme-cyberpunk .rounded-xl.border:has(table) {
  background: hsla(240, 15%, 7%, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  border-color: hsla(270, 30%, 20%, 0.35) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Table header */
.dark.theme-cyberpunk table thead tr {
  border-bottom-color: hsl(270, 25%, 14%) !important;
}
.dark.theme-cyberpunk table thead th {
  color: hsl(240, 8%, 45%) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

/* Table body rows � alternating ultra-dark obsidian */
.dark.theme-cyberpunk table tbody tr {
  border-bottom-color: hsla(270, 25%, 12%, 0.4) !important;
}
.dark.theme-cyberpunk table tbody tr:nth-child(even) {
  background: hsla(240, 15%, 5%, 0.3) !important;
}
.dark.theme-cyberpunk table tbody tr:nth-child(odd) {
  background: hsla(240, 12%, 4%, 0.2) !important;
}
.dark.theme-cyberpunk table tbody tr:hover {
  background: hsla(330, 100%, 50%, 0.04) !important;
}

/* Company name link */
.dark.theme-cyberpunk table tbody td a.font-medium {
  color: hsl(210, 40%, 85%) !important;
}
.dark.theme-cyberpunk table tbody td a.font-medium:hover {
  color: hsl(330, 100%, 60%) !important;
  text-shadow: 0 0 6px rgba(255, 0, 127, 0.2);
}

/* Contact text */
.dark.theme-cyberpunk table tbody td.text-muted-foreground {
  color: hsl(240, 8%, 48%) !important;
}

/* Status Badges � rounded pills with glowing text */
.dark.theme-cyberpunk .bg-blue-500\/10 {
  background: hsla(180, 100%, 50%, 0.1) !important;
  border-color: hsla(180, 100%, 50%, 0.2) !important;
  color: hsl(180, 100%, 60%) !important;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
  border-radius: 9999px !important;
}

.dark.theme-cyberpunk .text-blue-600.dark\:text-blue-400 {
  color: hsl(180, 100%, 60%) !important;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

.dark.theme-cyberpunk .bg-amber-500\/10 {
  background: hsla(30, 100%, 55%, 0.1) !important;
  border-color: hsla(30, 100%, 55%, 0.2) !important;
  color: hsl(30, 100%, 60%) !important;
  text-shadow: 0 0 6px rgba(255, 165, 0, 0.4);
  border-radius: 9999px !important;
}

.dark.theme-cyberpunk .text-amber-600.dark\:text-amber-400 {
  color: hsl(30, 100%, 60%) !important;
  text-shadow: 0 0 6px rgba(255, 165, 0, 0.4);
}

.dark.theme-cyberpunk .bg-purple-500\/10 {
  background: hsla(260, 80%, 60%, 0.1) !important;
  border-color: hsla(260, 80%, 60%, 0.2) !important;
  color: hsl(260, 80%, 65%) !important;
  text-shadow: 0 0 6px rgba(139, 92, 246, 0.4);
  border-radius: 9999px !important;
}

.dark.theme-cyberpunk .text-purple-600.dark\:text-purple-400 {
  color: hsl(260, 80%, 65%) !important;
  text-shadow: 0 0 6px rgba(139, 92, 246, 0.4);
}

.dark.theme-cyberpunk .bg-emerald-500\/10 {
  background: hsla(110, 100%, 50%, 0.1) !important;
  border-color: hsla(110, 100%, 50%, 0.2) !important;
  color: hsl(110, 100%, 55%) !important;
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
  border-radius: 9999px !important;
}

.dark.theme-cyberpunk .text-emerald-600.dark\:text-emerald-400 {
  color: hsl(110, 100%, 55%) !important;
  text-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
}

.dark.theme-cyberpunk .bg-zinc-500\/10 {
  background: hsla(240, 8%, 50%, 0.08) !important;
  border-color: hsla(240, 8%, 50%, 0.15) !important;
  color: hsl(240, 8%, 50%) !important;
  border-radius: 9999px !important;
}

.dark.theme-cyberpunk .text-zinc-600.dark\:text-zinc-400 {
  color: hsl(240, 8%, 50%) !important;
}

/* Status dot inside badge */
.dark.theme-cyberpunk .mr-1\.5.h-1\.5.w-1\.5.rounded-full {
  box-shadow: 0 0 4px currentColor;
}

/* "View all" link */
.dark.theme-cyberpunk .text-primary.hover\:underline {
  color: hsl(330, 100%, 55%) !important;
}
.dark.theme-cyberpunk .text-primary.hover\:underline:hover {
  text-shadow: 0 0 6px rgba(255, 0, 127, 0.2);
}

/* ============================================================================
   Other Components
   ============================================================================ */

/* Badge component (generic) */
.dark.theme-cyberpunk .inline-flex.items-center.border.rounded-full {
  border-radius: 9999px !important;
}

/* DataTable pagination */
.dark.theme-cyberpunk .flex.items-center.justify-between.px-2 .text-sm.text-muted-foreground {
  color: hsl(240, 8%, 45%) !important;
}

/* Page size selector */
.dark.theme-cyberpunk .h-8.w-\[70px\] {
  border-color: hsl(270, 25%, 15%) !important;
  background: hsla(240, 12%, 10%, 0.6) !important;
}

/* Nav buttons (pagination) */
.dark.theme-cyberpunk .h-8.w-8.p-0,
.dark.theme-cyberpunk .h-8.w-8 {
  border-color: hsl(270, 25%, 15%) !important;
  color: hsl(240, 8%, 50%) !important;
}
.dark.theme-cyberpunk .h-8.w-8:hover {
  background: hsla(330, 100%, 50%, 0.1) !important;
  color: hsl(330, 100%, 55%) !important;
  border-color: hsla(330, 100%, 50%, 0.2) !important;
}

/* Loading skeleton */
.dark.theme-cyberpunk .h-4.animate-pulse.rounded.bg-muted {
  background: hsl(240, 12%, 14%) !important;
}

/* Toast notifications */
.dark.theme-cyberpunk [data-sonner-toaster] {
  --normal-bg: hsl(240, 15%, 7%);
  --normal-border: hsl(270, 30%, 15%);
  --normal-text: hsl(210, 40%, 93%);
}

/* Focus ring */
.dark.theme-cyberpunk button:focus-visible {
  box-shadow: 0 0 0 2px hsl(330, 100%, 50%), 0 0 8px rgba(255, 0, 127, 0.4);
}

/* Spidey watermark (DAILY BUGLE) */
.dark.theme-cyberpunk .absolute.top-12.right-4 {
  display: none !important;
}
/* ============================================================================
   Donut Chart — Lead Status Segment Colors (Cyberpunk Neon Overhaul)
   ============================================================================ */

/* Arc path 1 — Open → Neon Purple/Magenta (#BD00FF) */
.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(1) {
  fill: hsl(285, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(189, 0, 255, 0.4));
}

/* Arc path 2 — Contacted → Bright Cyberpunk Cyan (#00E5FF) */
.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(2) {
  fill: hsl(186, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
}

/* Arc path 3 — Pending → Electric Neon Yellow/Orange (#FFD700) */
.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(3) {
  fill: hsl(51, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
}

/* Arc path 4 — Closed → Glowing Lime Green (#39FF14) */
.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(4) {
  fill: hsl(110, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.4));
}

/* Arc path 5 — Ignored → Deep Neon Crimson (#FF0055) */
.dark.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(5) {
  fill: hsl(340, 100%, 50%) !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.3));
}

/* Legend dot 1 — Open (Neon Purple) */
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1) .rounded-full {
  background: hsl(285, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(189, 0, 255, 0.5) !important;
}

/* Legend dot 2 — Contacted (Bright Cyan) */
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2) .rounded-full {
  background: hsl(186, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
}

/* Legend dot 3 — Pending (Electric Yellow/Orange) */
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3) .rounded-full {
  background: hsl(51, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

/* Legend dot 4 — Closed (Lime Green) */
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4) .rounded-full {
  background: hsl(110, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.5) !important;
}

/* Legend dot 5 — Ignored (Deep Neon Crimson) */
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5) .rounded-full {
  background: hsl(340, 100%, 50%) !important;
  box-shadow: 0 0 8px rgba(255, 0, 85, 0.4) !important;
}

/* Legend container hover border — match segment color */
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1):hover {
  border-color: hsla(285, 100%, 50%, 0.35) !important;
}
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2):hover {
  border-color: hsla(186, 100%, 50%, 0.35) !important;
}
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3):hover {
  border-color: hsla(51, 100%, 50%, 0.35) !important;
}
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4):hover {
  border-color: hsla(110, 100%, 50%, 0.35) !important;
}
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5):hover {
  border-color: hsla(340, 100%, 50%, 0.35) !important;
}

/* Highlight text colors on hover */
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1):hover .text-xs.font-semibold {
  color: hsl(285, 100%, 55%) !important;
}
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2):hover .text-xs.font-semibold {
  color: hsl(186, 100%, 55%) !important;
}
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3):hover .text-xs.font-semibold {
  color: hsl(51, 100%, 50%) !important;
}
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4):hover .text-xs.font-semibold {
  color: hsl(110, 100%, 50%) !important;
}
.dark.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5):hover .text-xs.font-semibold {
  color: hsl(340, 100%, 55%) !important;
}
/* ============================================================================
   Sidebar — Toggle, icons, monitor, facebook
   ============================================================================ */

/* Sidebar toggle button hover state */
.dark.theme-cyberpunk aside button:hover svg {
  color: hsl(330, 100%, 55%) !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.3));
}

/* Bottom-left sidebar icon/badge catch-all — any SVG icon near user area gets neon pink */
.dark.theme-cyberpunk aside .border-t + div svg,
.dark.theme-cyberpunk aside .border-t ~ div svg {
  color: hsl(330, 100%, 50%) !important;
  filter: drop-shadow(0 0 4px rgba(255, 0, 127, 0.2));
}

/* System monitor values — neon cyan */
.dark.theme-cyberpunk aside .text-\[var\(--theme-primary\, #3b91f7\)\] {
  color: hsl(180, 100%, 55%) !important;
}

/* Force any Facebook icon / blue circular button in sidebar to neon pink */
.dark.theme-cyberpunk aside button:has(.lucide-facebook),
.dark.theme-cyberpunk aside [class*="facebook"] {
  background: hsl(330, 100%, 50%) !important;
  border-color: hsl(330, 100%, 50%) !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
}
.dark.theme-cyberpunk aside button:has(.lucide-facebook) svg,
.dark.theme-cyberpunk aside [class*="facebook"] svg {
  color: hsl(0, 0%, 100%) !important;
}

/* ============================================================================
   1. METRIC CARDS — Balanced Glowing Pink Highlights (Top & Bottom)
============================================================================ */
.dark.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
.dark.theme-cyberpunk [class*="bg-card"],
.dark.theme-cyberpunk .rounded-xl.border.bg-card,
.light.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
.light.theme-cyberpunk [class*="bg-card"],
.light.theme-cyberpunk .rounded-xl.border.bg-card {
  border-top: 2px solid hsl(330, 100%, 50%) !important;
  border-bottom: 2px solid hsl(330, 100%, 50%) !important;
  box-shadow: 0 4px 20px rgba(255, 0, 127, 0.15) !important;
}

/* ============================================================================
   2. TOP RIGHT NAV + SIDEBAR + TABLE — All Avatar Fallbacks → Neon Pink
   Targets: .bg-muted span that is a direct child of the Avatar root
   (Avatar root always has shrink-0 + overflow-hidden classes)
============================================================================ */
.dark.theme-cyberpunk [class*="shrink-0"][class*="overflow-hidden"] > .bg-muted {
  background: hsl(330, 100%, 50%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
}

/* ============================================================================
   3. BOTTOM LEFT SIDEBAR — Lightning / Zap Icons
============================================================================ */
.dark.theme-cyberpunk aside [class*="lucide-zap"],
.dark.theme-cyberpunk aside svg[class*="text-blue"],
.dark.theme-cyberpunk aside [class*="lightning"] {
  background: hsl(330, 100%, 50%) !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  box-shadow: 0 0 6px rgba(255, 0, 127, 0.3) !important;
}

/* ============================================================================
   4. STATUS BADGES — Neon Cyberpunk Pills (Recent Leads Table)
============================================================================ */

/* Open → Bright Cyan */
.dark.theme-cyberpunk [class*="bg-blue-500/10"] {
  background: hsla(186, 100%, 50%, 0.12) !important;
  color: hsl(186, 100%, 55%) !important;
  border-color: hsla(186, 100%, 50%, 0.25) !important;
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.15) !important;
}

/* Contacted → Cyberpunk Purple/Magenta */
.dark.theme-cyberpunk [class*="bg-amber-500/10"] {
  background: hsla(285, 100%, 50%, 0.12) !important;
  color: hsl(285, 100%, 55%) !important;
  border-color: hsla(285, 100%, 50%, 0.25) !important;
  box-shadow: 0 0 6px rgba(189, 0, 255, 0.15) !important;
}

/* Pending → Cyberpunk Orange/Yellow */
.dark.theme-cyberpunk [class*="bg-purple-500/10"] {
  background: hsla(40, 100%, 55%, 0.12) !important;
  color: hsl(40, 100%, 55%) !important;
  border-color: hsla(40, 100%, 55%, 0.25) !important;
  box-shadow: 0 0 6px rgba(255, 170, 0, 0.15) !important;
}

/* Closed → Cyberpunk Crimson/Deep Red */
.dark.theme-cyberpunk [class*="bg-emerald-500/10"] {
  background: hsla(350, 75%, 45%, 0.12) !important;
  color: hsl(350, 75%, 50%) !important;
  border-color: hsla(350, 75%, 45%, 0.25) !important;
  box-shadow: 0 0 6px rgba(200, 30, 60, 0.15) !important;
}

/* Ignored — subtle muted grey */
.dark.theme-cyberpunk [class*="bg-zinc-500/10"] {
  background: hsla(0, 0%, 40%, 0.08) !important;
  color: hsl(0, 0%, 50%) !important;
  border-color: hsla(0, 0%, 40%, 0.15) !important;
}

/* Status dot — matches badge color (LeadStatusBadge component) */
.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-blue-500 {
  background: hsl(186, 100%, 50%) !important;
}
.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-amber-500 {
  background: hsl(285, 100%, 50%) !important;
}
.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-purple-500 {
  background: hsl(40, 100%, 55%) !important;
}
.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-emerald-500 {
  background: hsl(350, 75%, 45%) !important;
}
.dark.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-zinc-500 {
  background: hsl(0, 0%, 40%) !important;
}

/* (Covered by section 2 — universal [data-radix-avatar-fallback] rule) */

/* ============================================================================
   6. SECTION HEADERS — "Pipeline Overview" & "Analytics" → High Contrast
============================================================================ */
.dark.theme-cyberpunk .text-xs.font-semibold.tracking-widest.uppercase {
  color: hsl(210, 20%, 88%) !important;
}
.dark.theme-cyberpunk .dark\:text-\[\#666666\].text-xs.font-semibold.tracking-widest.uppercase {
  color: hsl(210, 20%, 88%) !important;
}
.light.theme-cyberpunk .text-xs.font-semibold.tracking-widest.uppercase {
  color: hsl(220, 15%, 20%) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em;
}

/* ============================================================================
   Pipeline Color Bars — Cyberpunk neon pink/cyan
   ============================================================================ */
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
  background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(180, 100%, 65%), hsl(180, 100%, 50%)) !important;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 {
  background: hsla(330, 100%, 50%, 0.12) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 {
  background: hsla(180, 100%, 50%, 0.1) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg {
  color: hsl(330, 100%, 50%) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg {
  color: hsl(180, 100%, 50%) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 {
  background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.3), transparent) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 {
  background: linear-gradient(to right, transparent, hsla(180, 100%, 50%, 0.25), transparent) !important;
}
.dark.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r {
  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
}

.dark.theme-cyberpunk .growth-word,
.light.theme-cyberpunk .growth-word {
  -webkit-text-fill-color: #1BB0CE !important;
  color: #1BB0CE !important;
  background: none !important;
}

/* Progress bar background track — light theme */
.light.theme-cyberpunk .w-full.h-1\.5.bg-muted.rounded-full {
  background: hsl(240, 5%, 90%) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}
/* Progress bar fill — red/faded-red → neon pink */
.light.theme-cyberpunk .h-full.rounded-full.bg-gradient-to-r {
  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
  box-shadow: 0 0 6px rgba(255, 0, 127, 0.3) !important;
}
/* Progress bar fill — blue → neon cyan */
.light.theme-cyberpunk .h-full.rounded-full {
  background: hsl(180, 100%, 50%) !important;
}
/* Percentage text above progress bars — dark slate */
.light.theme-cyberpunk .text-sm.font-semibold {
  color: hsl(220, 15%, 20%) !important;
}

/* ============================================================================
   LIGHT THEME — Metric Card Icons & Indicator Lines Override
   ============================================================================ */
.light.theme-cyberpunk .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-3.gap-4 > div,
.light.theme-cyberpunk [class*="bg-card"],
.light.theme-cyberpunk .rounded-xl.border.bg-card {
  border-top: 2px solid hsl(330, 100%, 50%) !important;
  border-bottom: 2px solid hsl(330, 100%, 50%) !important;
  box-shadow: 0 4px 20px rgba(255, 0, 127, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  background: hsl(0, 0%, 100%) !important;
}
.light.theme-cyberpunk .group.h-full > .rounded-xl.border {
  background: hsl(0, 0%, 100%) !important;
  border: 2px solid hsl(330, 100%, 50%) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 20px rgba(255, 0, 127, 0.1) !important;
}
.light.theme-cyberpunk .group.h-full:hover > .rounded-xl.border {
  border-color: hsl(330, 100%, 55%) !important;
  box-shadow: 0 4px 24px rgba(255, 0, 127, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.light.theme-cyberpunk .h-1.w-full.bg-gradient-to-r.shadow-sm {
  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.2) !important;
}
.light.theme-cyberpunk .text-3xl.font-bold.tracking-tight {
  color: hsl(240, 10%, 15%) !important;
}
.light.theme-cyberpunk .text-sm.font-medium.text-muted-foreground {
  color: hsl(240, 4%, 48%) !important;
}
.light.theme-cyberpunk .flex.h-12.w-12.items-center.justify-center.rounded-xl {
  background: hsla(330, 100%, 50%, 0.08) !important;
}
.light.theme-cyberpunk .flex.h-12.w-12.items-center.justify-center.rounded-xl svg.h-6 {
  color: hsl(330, 100%, 50%) !important;
}
.light.theme-cyberpunk .absolute.bottom-0.left-0.right-0.h-1 {
  background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.2), transparent) !important;
}

/* Pipeline accent lines — odd cards neon pink */
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .h-1.w-full {
  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(330, 100%, 65%), hsl(330, 100%, 50%)) !important;
  box-shadow: 0 0 8px rgba(255, 0, 127, 0.3) !important;
}
/* Pipeline accent lines — even cards neon cyan */
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .h-1.w-full {
  background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(180, 100%, 65%), hsl(180, 100%, 50%)) !important;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3) !important;
}
/* Icon containers — odd neon pink, even neon cyan */
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 {
  background: hsla(330, 100%, 50%, 0.12) !important;
}
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 {
  background: hsla(180, 100%, 50%, 0.1) !important;
}
/* Icon SVG colors — odd neon pink, even neon cyan */
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .rounded-xl.shrink-0 svg {
  color: hsl(330, 100%, 50%) !important;
}
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .rounded-xl.shrink-0 svg {
  color: hsl(180, 100%, 50%) !important;
}
/* Bottom glow bars — odd neon pink, even neon cyan */
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(odd) .group .absolute.bottom-0.h-1 {
  background: linear-gradient(to right, transparent, hsla(330, 100%, 50%, 0.3), transparent) !important;
}
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 > .relative:nth-child(even) .group .absolute.bottom-0.h-1 {
  background: linear-gradient(to right, transparent, hsla(180, 100%, 50%, 0.25), transparent) !important;
}
.light.theme-cyberpunk .sm\:grid-cols-2.lg\:grid-cols-3.gap-4.mt-4 .rounded-full.bg-gradient-to-r {
  background: linear-gradient(to right, hsl(330, 100%, 50%), hsl(180, 100%, 50%)) !important;
}

/* ============================================================================
   LIGHT THEME — Donut Chart Segment Colors (mirrors dark mode)
   ============================================================================ */
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(1) {
  fill: hsl(285, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(189, 0, 255, 0.4));
}
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(2) {
  fill: hsl(186, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4));
}
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(3) {
  fill: hsl(51, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
}
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(4) {
  fill: hsl(110, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.4));
}
.light.theme-cyberpunk svg path[stroke="#000000"]:nth-of-type(5) {
  fill: hsl(340, 100%, 50%) !important;
  filter: drop-shadow(0 0 6px rgba(255, 0, 85, 0.3));
}

/* Legend dots — match dark mode colors */
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(1) .rounded-full {
  background: hsl(285, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(189, 0, 255, 0.5) !important;
}
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(2) .rounded-full {
  background: hsl(186, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
}
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(3) .rounded-full {
  background: hsl(51, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(4) .rounded-full {
  background: hsl(110, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.5) !important;
}
.light.theme-cyberpunk .grid.grid-cols-2.gap-2 > div:nth-child(5) .rounded-full {
  background: hsl(340, 100%, 50%) !important;
  box-shadow: 0 0 8px rgba(255, 0, 85, 0.4) !important;
}

/* ============================================================================
   LIGHT THEME — Bar Chart (mirrors dark mode)
   ============================================================================ */
.light.theme-cyberpunk svg rect[fill*="newLeadsGrad"] {
  fill: hsl(330, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(255, 0, 127, 0.5)) !important;
  rx: 4;
}
.light.theme-cyberpunk svg rect[fill*="closedGrad"] {
  fill: hsl(186, 100%, 50%) !important;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.4)) !important;
  rx: 4;
}
.light.theme-cyberpunk .items-start .gap-4 > :first-child .rounded-sm {
  background: hsl(330, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.7), 0 0 20px rgba(255, 0, 127, 0.25) !important;
  border: 1px solid hsl(330, 100%, 60%) !important;
}
.light.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .rounded-sm {
  background: hsl(186, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 20px rgba(0, 229, 255, 0.2) !important;
  border: 1px solid hsl(186, 100%, 55%) !important;
}
.light.theme-cyberpunk .items-start .gap-4 > :first-child .text-xs {
  color: hsl(330, 100%, 65%) !important;
  font-weight: 600;
}
.light.theme-cyberpunk .items-start .gap-4 > :nth-child(2) .text-xs {
  color: hsl(186, 100%, 60%) !important;
  font-weight: 600;
}

/* ============================================================================
   LIGHT THEME — Status Badges (mirrors dark mode neon pills)
   ============================================================================ */
.light.theme-cyberpunk [class*="bg-blue-500/10"] {
  background: hsla(186, 100%, 50%, 0.12) !important;
  color: hsl(186, 100%, 40%) !important;
  border-color: hsla(186, 100%, 50%, 0.25) !important;
  border-radius: 9999px !important;
}
.light.theme-cyberpunk [class*="bg-amber-500/10"] {
  background: hsla(285, 100%, 50%, 0.12) !important;
  color: hsl(285, 100%, 45%) !important;
  border-color: hsla(285, 100%, 50%, 0.25) !important;
  border-radius: 9999px !important;
}
.light.theme-cyberpunk [class*="bg-purple-500/10"] {
  background: hsla(40, 100%, 55%, 0.12) !important;
  color: hsl(40, 90%, 40%) !important;
  border-color: hsla(40, 100%, 55%, 0.25) !important;
  border-radius: 9999px !important;
}
.light.theme-cyberpunk [class*="bg-emerald-500/10"] {
  background: hsla(350, 75%, 45%, 0.12) !important;
  color: hsl(350, 75%, 40%) !important;
  border-color: hsla(350, 75%, 45%, 0.25) !important;
  border-radius: 9999px !important;
}
.light.theme-cyberpunk [class*="bg-zinc-500/10"] {
  background: hsla(0, 0%, 40%, 0.08) !important;
  color: hsl(0, 0%, 40%) !important;
  border-color: hsla(0, 0%, 40%, 0.15) !important;
  border-radius: 9999px !important;
}
.light.theme-cyberpunk .text-blue-600.dark\:text-blue-400 {
  color: hsl(186, 100%, 40%) !important;
}
.light.theme-cyberpunk .text-amber-600.dark\:text-amber-400 {
  color: hsl(285, 100%, 45%) !important;
}
.light.theme-cyberpunk .text-purple-600.dark\:text-purple-400 {
  color: hsl(40, 90%, 40%) !important;
}
.light.theme-cyberpunk .text-emerald-600.dark\:text-emerald-400 {
  color: hsl(350, 75%, 40%) !important;
}
.light.theme-cyberpunk .text-zinc-600.dark\:text-zinc-400 {
  color: hsl(0, 0%, 40%) !important;
}

/* Status dots — light theme */
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-blue-500 {
  background: hsl(186, 100%, 50%) !important;
}
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-amber-500 {
  background: hsl(285, 100%, 50%) !important;
}
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-purple-500 {
  background: hsl(40, 100%, 55%) !important;
}
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-emerald-500 {
  background: hsl(350, 75%, 45%) !important;
}
.light.theme-cyberpunk span.h-1\.5.w-1\.5.rounded-full.bg-zinc-500 {
  background: hsl(0, 0%, 40%) !important;
}

/* ============================================================================
   Client Portal Overrides — Cyberpunk background for portal pages
   ============================================================================ */

/* Make the outer portal container transparent so body::before background shows */
.dark.theme-cyberpunk .min-h-screen.bg-background {
  background: transparent !important;
}

/* Portal sidebar — dark glass */
.dark.theme-cyberpunk aside.bg-card.border-r.border-border {
  background: hsl(240, 15%, 3%) !important;
  border-right-color: hsl(270, 25%, 10%) !important;
}

/* Portal sidebar nav items — muted text */
.dark.theme-cyberpunk aside .text-muted-foreground {
  color: hsl(240, 8%, 50%) !important;
}
.dark.theme-cyberpunk aside button:hover {
  background: hsla(330, 100%, 50%, 0.08) !important;
  color: hsl(0, 0%, 90%) !important;
}

/* Portal sidebar active nav item — neon pink pill */
.dark.theme-cyberpunk aside .bg-primary\/10.text-primary {
  background: hsl(330, 100%, 50%) !important;
  color: hsl(0, 0%, 100%) !important;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.3), 0 0 20px rgba(255, 0, 127, 0.1);
  border-color: hsl(330, 100%, 50%) !important;
}
.dark.theme-cyberpunk aside .bg-primary\/10.text-primary svg {
  color: hsl(0, 0%, 100%) !important;
}

/* Portal header — dark glass */
.dark.theme-cyberpunk header.bg-card\/80 {
  background: hsl(240, 15%, 3%) !important;
  border-bottom-color: hsl(270, 25%, 10%) !important;
}

/* Portal card backgrounds — semi-transparent glass */
.dark.theme-cyberpunk .bg-card {
  background: hsla(240, 15%, 7%, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  border-color: hsla(270, 30%, 20%, 0.35) !important;
}

/* Portal borders */
.dark.theme-cyberpunk .border-border {
  border-color: hsl(270, 25%, 12%) !important;
}

/* Portal input fields */
.dark.theme-cyberpunk .bg-muted {
  background: hsl(240, 12%, 9%) !important;
}
.dark.theme-cyberpunk .border-border:focus {
  border-color: hsl(330, 100%, 50%) !important;
}

/* Portal primary buttons */
.dark.theme-cyberpunk .bg-primary {
  background: hsl(330, 100%, 50%) !important;
  box-shadow: 0 0 10px rgba(255, 0, 127, 0.2);
}
.dark.theme-cyberpunk .bg-primary:hover {
  background: hsl(330, 100%, 55%) !important;
  box-shadow: 0 0 15px rgba(255, 0, 127, 0.4);
}

/* Portal primary text highlights */
.dark.theme-cyberpunk .text-primary {
  color: hsl(330, 100%, 55%) !important;
}

/* Portal muted text */
.dark.theme-cyberpunk .text-muted-foreground {
  color: hsl(240, 8%, 50%) !important;
}