/* app/assets/stylesheets/neumorphism.css */
/* Neumorphism (Soft UI) Design System for Landing Pages */

/* ===== COLOR TOKENS ===== */
:root {
  --neu-bg: #E0E5EC;
  --neu-text: #3D4852;
  --neu-muted: #6B7280;
  --neu-accent: #6C63FF;
  --neu-accent-light: #8B84FF;
  --neu-accent-secondary: #38B2AC;

  /* Shadow colors (RGBA for smooth blending) */
  --neu-shadow-dark: rgb(163, 177, 198, 0.6);
  --neu-shadow-dark-strong: rgb(163, 177, 198, 0.7);
  --neu-shadow-light: rgba(255, 255, 255, 0.5);
  --neu-shadow-light-strong: rgba(255, 255, 255, 0.6);
  /* Depth hierarchy — elevated surfaces are slightly brighter, recessed slightly darker */
  --neu-bg-elevated: #E8ECF3;
  --neu-bg-recessed: #D6DBE3;
  /* Inner highlight for top-left light source */
  --neu-highlight: rgba(255, 255, 255, 0.7);

  /* Subtle border / divider */
  --neu-border-subtle: rgba(163, 177, 198, 0.35);

  /* Fluid unit: 0.92rem @ 1024px → 1rem @ 1440px
     Derivation (breakpoints in rem at 16px root font size):
       slope     = (1.0 - 0.92) / (90 - 64) = 0.08/26 ≈ 0.3077vw coefficient
       intercept = 0.92rem − (0.08/26) × 64rem = 0.7231rem  */
  --fluid-unit: clamp(0.92rem, 0.7231rem + 0.3077vw, 1rem);

  /* ===== FLUID DESIGN TOKENS =====
     Single source of truth for responsive sizing.
     All values scale with viewport: clamp(min, preferred, max)
     min  = floor at ~1024px tablet
     pref = scales with vw
     max  = ceiling at ~1440px+ desktop */

  /* Typography scale */
  --fluid-xs:   clamp(0.625rem, 0.9vw, 0.875rem);   /* counts, helpers */
  --fluid-sm:   clamp(0.875rem, 1.2vw, 1.25rem);     /* labels, badges */
  --fluid-base: clamp(1rem, 1.4vw, 1.5rem);           /* body, buttons */
  --fluid-lg:   clamp(1.25rem, 1.7vw, 1.75rem);       /* subheadings */
  --fluid-xl:   clamp(1.5rem, 2.2vw, 2.5rem);         /* stat values */
  --fluid-2xl:  clamp(1.75rem, 2.5vw, 2.75rem);       /* emphasis numbers */
  --fluid-3xl:  clamp(2.25rem, 3.2vw, 3.5rem);        /* major headings */
  --fluid-4xl:  clamp(2.5rem, 3.8vw, 4rem);           /* giant display */

  /* Spacing scale */
  --fluid-gap-xs:  clamp(0.125rem, 0.2vw, 0.375rem);  /* micro gaps */
  --fluid-gap-sm:  clamp(0.25rem, 0.3vw, 0.5rem);     /* small gaps */
  --fluid-pad-sm:  clamp(0.375rem, 0.6vw, 1rem);       /* small padding */
  --fluid-pad-md:  clamp(0.75rem, 1vw, 1.25rem);       /* medium padding/gaps */
  --fluid-pad-lg:  clamp(1rem, 1.3vw, 1.75rem);        /* large padding */
  --fluid-pad-xl:  clamp(1.5rem, 2vw, 2.75rem);        /* XL padding */
  --fluid-gap-lg:  clamp(1rem, 1.8vw, 2.25rem);        /* large section gaps */

  /* Touch target sizes */
  --fluid-touch-sm: clamp(2.5rem, 2.5vw, 3.5rem);     /* small targets */
  --fluid-touch-md: clamp(3rem, 3vw, 4.5rem);          /* standard buttons */
  --fluid-touch-lg: clamp(4rem, 3.5vw, 5.5rem);        /* large buttons */
  --fluid-touch-xl: clamp(5rem, 4.5vw, 7rem);          /* XL buttons */

  /* Border radius */
  --fluid-radius:    clamp(0.75rem, 1vw, 1.25rem);     /* standard */
  --fluid-radius-lg: clamp(1rem, 1.3vw, 1.75rem);      /* large elements */

  /* Sidebar nav — min(vw, vh) ensures buttons shrink on short viewports */
  --fluid-sidebar-btn: clamp(2.25rem, min(3.2vw, 6vh), 5rem);

  /* Neumorphic shadow breathing room — must exceed neu-extruded-sm extent (5+10=15px) */
  --fluid-neu-space:  clamp(0.625rem, 1.1vw, 1.25rem);

  /* Icon / emoji */
  --fluid-icon: clamp(1rem, 1.8vw, 2rem);
}

/* ===== SHADOW TOKENS ===== */
/* Stepped bilateral shadow tokens — breakpoints mirror the --fluid-unit responsive range
   Tablet  ≤1279 px : 7 / 14 px  (~88 % of desktop)
   Laptop  1280–1439px: 8 / 16 px
   Desktop ≥1440 px : 9 / 16 px  (original values, no visual change) */
:root {
  --shadow-offset: 7px;
  --shadow-blur:   14px;
}

@media (min-width: 1280px) {
  :root {
    --shadow-offset: 8px;
    --shadow-blur:   16px;
  }
}

@media (min-width: 1440px) {
  :root {
    --shadow-offset: 9px;
    --shadow-blur:   16px;
  }
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --neu-bg: #2D3436;
  --neu-text: #E4E6E8;
  --neu-muted: #9CA3AF;
  --neu-accent: #7C73FF;
  --neu-accent-light: #9B94FF;
  --neu-accent-secondary: #4FD1C5;
  --neu-shadow-dark: rgba(0, 0, 0, 0.5);
  --neu-shadow-dark-strong: rgba(0, 0, 0, 0.6);
  --neu-shadow-light: rgba(69, 75, 78, 0.4);
  --neu-shadow-light-strong: rgba(69, 75, 78, 0.5);
  --neu-bg-elevated: #353B3D;
  --neu-bg-recessed: #252A2C;
  --neu-highlight: rgba(69, 75, 78, 0.5);
  --neu-border-subtle: rgba(0, 0, 0, 0.15);
}

/* Dark mode overrides for hardcoded Tailwind colors */
[data-theme="dark"] body,
[data-theme="dark"] .bg-\[\#E0E5EC\] { background-color: #2D3436 !important; }
[data-theme="dark"] .text-\[\#3D4852\] { color: #E4E6E8 !important; }
[data-theme="dark"] .text-\[\#6B7280\] { color: #9CA3AF !important; }
[data-theme="dark"] footer { background-color: #2D3436 !important; }
[data-theme="dark"] nav { background-color: #2D3436 !important; }

/* Dashboard background with subtle noise texture for depth */
.neu-dashboard-bg {
  background-color: var(--neu-bg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

[data-theme="dark"] .neu-dashboard-bg {
  background-color: var(--neu-bg);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ===== SHADOW UTILITIES ===== */
.neu-extruded {
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--shadow-blur) var(--neu-shadow-light);
}

/* Highlighted card with accent glow - no ring */
.neu-card-highlighted {
  box-shadow: 0 0 0 3px var(--neu-accent),
              calc(var(--shadow-offset) + 3px) calc(var(--shadow-offset) + 3px) calc(var(--shadow-blur) + 4px) var(--neu-shadow-dark-strong),
              calc(-1 * (var(--shadow-offset) + 3px)) calc(-1 * (var(--shadow-offset) + 3px)) calc(var(--shadow-blur) + 4px) var(--neu-shadow-light-strong);
}

.neu-extruded-hover {
  box-shadow: calc(var(--shadow-offset) + 3px) calc(var(--shadow-offset) + 3px) calc(var(--shadow-blur) + 4px) var(--neu-shadow-dark-strong),
              calc(-1 * (var(--shadow-offset) + 3px)) calc(-1 * (var(--shadow-offset) + 3px)) calc(var(--shadow-blur) + 4px) var(--neu-shadow-light-strong);
}

.neu-extruded-sm {
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
}

.neu-inset {
  box-shadow: inset calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
}

.neu-inset-deep {
  box-shadow: inset calc(var(--shadow-offset) + 1px) calc(var(--shadow-offset) + 1px) calc(var(--shadow-blur) + 4px) var(--neu-shadow-dark-strong),
              inset calc(-1 * (var(--shadow-offset) + 1px)) calc(-1 * (var(--shadow-offset) + 1px)) calc(var(--shadow-blur) + 4px) var(--neu-shadow-light-strong);
}

.neu-inset-sm {
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

/* ===== DEPTH HIERARCHY ===== */
/* Elevated surface — sits above the base plane */
.neu-elevated {
  background: var(--neu-bg-elevated);
  box-shadow: 8px 8px 16px var(--neu-shadow-dark),
              -8px -8px 16px var(--neu-shadow-light);
}

/* Recessed surface — sits below the base plane */
.neu-recessed {
  background: var(--neu-bg-recessed);
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark),
              inset -4px -4px 8px var(--neu-shadow-light);
}

/* Inner highlight for top-left light source on interactive elements */
.neu-interactive-highlight {
  position: relative;
}

.neu-interactive-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 50%;
  border-radius: inherit;
  background: radial-gradient(ellipse at 20% 20%, var(--neu-highlight) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.neu-interactive-highlight:hover::before {
  opacity: 1;
}

/* Neumorphic tinted button — accent color as surface tint + colored glow instead of opaque gradient */
.neu-btn-tinted {
  background: var(--neu-bg);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.neu-btn-tinted.btn-tint-green {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--neu-bg) 85%, #10B981 15%),
    color-mix(in srgb, var(--neu-bg) 80%, #059669 20%));
  box-shadow: 6px 6px 12px var(--neu-shadow-dark),
              -6px -6px 12px var(--neu-shadow-light),
              0 0 20px rgba(16, 185, 129, 0.15);
  color: #059669;
}

.neu-btn-tinted.btn-tint-green:hover {
  box-shadow: 8px 8px 16px var(--neu-shadow-dark),
              -8px -8px 16px var(--neu-shadow-light),
              0 0 30px rgba(16, 185, 129, 0.25);
  transform: translateY(-2px);
}

.neu-btn-tinted.btn-tint-green:active {
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark),
              inset -4px -4px 8px var(--neu-shadow-light),
              0 0 15px rgba(16, 185, 129, 0.1);
  transform: translateY(1px);
}

.neu-btn-tinted.btn-tint-blue {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--neu-bg) 85%, #3B82F6 15%),
    color-mix(in srgb, var(--neu-bg) 80%, #2563EB 20%));
  box-shadow: 6px 6px 12px var(--neu-shadow-dark),
              -6px -6px 12px var(--neu-shadow-light),
              0 0 20px rgba(59, 130, 246, 0.15);
  color: #2563EB;
}

.neu-btn-tinted.btn-tint-blue:hover {
  box-shadow: 8px 8px 16px var(--neu-shadow-dark),
              -8px -8px 16px var(--neu-shadow-light),
              0 0 30px rgba(59, 130, 246, 0.25);
  transform: translateY(-2px);
}

.neu-btn-tinted.btn-tint-blue:active {
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark),
              inset -4px -4px 8px var(--neu-shadow-light),
              0 0 15px rgba(59, 130, 246, 0.1);
  transform: translateY(1px);
}

.neu-btn-tinted.btn-tint-amber {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--neu-bg) 85%, #F59E0B 15%),
    color-mix(in srgb, var(--neu-bg) 80%, #D97706 20%));
  box-shadow: 6px 6px 12px var(--neu-shadow-dark),
              -6px -6px 12px var(--neu-shadow-light),
              0 0 20px rgba(245, 158, 11, 0.15);
  color: #D97706;
}

.neu-btn-tinted.btn-tint-amber:hover {
  box-shadow: 8px 8px 16px var(--neu-shadow-dark),
              -8px -8px 16px var(--neu-shadow-light),
              0 0 30px rgba(245, 158, 11, 0.25);
  transform: translateY(-2px);
}

.neu-btn-tinted.btn-tint-amber:active {
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark),
              inset -4px -4px 8px var(--neu-shadow-light),
              0 0 15px rgba(245, 158, 11, 0.1);
  transform: translateY(1px);
}

.neu-btn-tinted.btn-tint-red {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--neu-bg) 85%, #EF4444 15%),
    color-mix(in srgb, var(--neu-bg) 80%, #DC2626 20%));
  box-shadow: 6px 6px 12px var(--neu-shadow-dark),
              -6px -6px 12px var(--neu-shadow-light),
              0 0 20px rgba(239, 68, 68, 0.15);
  color: #DC2626;
}

.neu-btn-tinted.btn-tint-red:hover {
  box-shadow: 8px 8px 16px var(--neu-shadow-dark),
              -8px -8px 16px var(--neu-shadow-light),
              0 0 30px rgba(239, 68, 68, 0.25);
  transform: translateY(-2px);
}

.neu-btn-tinted.btn-tint-red:active {
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark),
              inset -4px -4px 8px var(--neu-shadow-light),
              0 0 15px rgba(239, 68, 68, 0.1);
  transform: translateY(1px);
}

.neu-btn-tinted.btn-tint-purple {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--neu-bg) 85%, #6366F1 15%),
    color-mix(in srgb, var(--neu-bg) 80%, #8B5CF6 20%));
  box-shadow: 6px 6px 12px var(--neu-shadow-dark),
              -6px -6px 12px var(--neu-shadow-light),
              0 0 20px rgba(99, 102, 241, 0.15);
  color: #6366F1;
}

.neu-btn-tinted.btn-tint-purple:hover {
  box-shadow: 8px 8px 16px var(--neu-shadow-dark),
              -8px -8px 16px var(--neu-shadow-light),
              0 0 30px rgba(99, 102, 241, 0.25);
  transform: translateY(-2px);
}

.neu-btn-tinted.btn-tint-purple:active {
  box-shadow: inset 4px 4px 8px var(--neu-shadow-dark),
              inset -4px -4px 8px var(--neu-shadow-light),
              0 0 15px rgba(99, 102, 241, 0.1);
  transform: translateY(1px);
}

/* ===== TYPOGRAPHY ===== */
/* Matches designprompts.dev/neumorphism reference exactly */
/* Hero: 800 weight | Section headings: 700 weight | Subheadings: 600 weight */

/* Section headings (h2) - 700 weight like reference */
.neu-heading {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  color: var(--neu-text);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* Hero heading (h1) - 800 weight extra bold */
.neu-heading-xl {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-variation-settings: "wght" 800;
  color: var(--neu-text);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* Subheadings (h3, h4, benefit titles) - 700 weight like reference */
.neu-heading-md {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  color: var(--neu-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.neu-body {
  font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  /* Color controlled by Tailwind utilities for flexibility */
}

.neu-muted {
  color: var(--neu-muted);
}

/* ===== TRANSITIONS ===== */
.neu-transition {
  transition: all 300ms ease-out;
}

/* Ensure all shadow utilities animate smoothly for neumorphic state changes */
.neu-extruded,
.neu-extruded-sm,
.neu-extruded-hover,
.neu-inset,
.neu-inset-deep,
.neu-inset-sm,
.neu-elevated,
.neu-recessed {
  transition: box-shadow 0.3s ease, transform 0.25s ease, background 0.3s ease;
}

/* ===== FOCUS STATES ===== */
.neu-focus {
  outline: none;
  ring: 2px solid var(--neu-accent);
  ring-offset: 2px;
  ring-offset-color: var(--neu-bg);
}

/* ===== SCROLL ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation utility classes */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.6s ease-out forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 0.6s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out forwards;
}

/* Scroll-triggered animations (initially hidden) */
[data-animate] {
  opacity: 0;
}

[data-animate].is-visible {
  animation-fill-mode: forwards;
}

[data-animate="fade-up"].is-visible {
  animation: fadeInUp 0.6s ease-out forwards;
}

[data-animate="fade-left"].is-visible {
  animation: fadeInLeft 0.6s ease-out forwards;
}

[data-animate="fade-right"].is-visible {
  animation: fadeInRight 0.6s ease-out forwards;
}

[data-animate="scale"].is-visible {
  animation: scaleIn 0.5s ease-out forwards;
}

/* Stagger delays */
[data-delay="100"] { animation-delay: 100ms; }
[data-delay="200"] { animation-delay: 200ms; }
[data-delay="300"] { animation-delay: 300ms; }
[data-delay="400"] { animation-delay: 400ms; }
[data-delay="500"] { animation-delay: 500ms; }
[data-delay="600"] { animation-delay: 600ms; }

/* ===== GRADIENT TEXT ===== */
.neu-gradient-text {
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== GLOW EFFECTS ===== */
.neu-glow {
  box-shadow: 0 0 40px rgba(108, 99, 255, 0.3),
              9px 9px 16px var(--neu-shadow-dark),
              -9px -9px 16px var(--neu-shadow-light);
}

.neu-glow-accent {
  box-shadow: 0 0 30px rgba(108, 99, 255, 0.4);
}

/* ===== FEATURE ICON STYLE ===== */
.neu-icon-box {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: var(--neu-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 4px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 4px) var(--neu-shadow-light);
}

.neu-icon-box-lg {
  width: 5rem;
  height: 5rem;
  border-radius: 1.25rem;
}

/* ===== STATS PILL ===== */
.neu-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: var(--neu-bg);
  font-weight: 600;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
}

/* ===== BADGE STYLES ===== */
.neu-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.neu-badge-accent {
  background: var(--neu-accent);
  color: white;
}

.neu-badge-success {
  background: #10B981;
  color: white;
}

.neu-badge-muted {
  background: var(--neu-bg);
  color: var(--neu-muted);
  box-shadow: inset 2px 2px 4px var(--neu-shadow-dark),
              inset -2px -2px 4px var(--neu-shadow-light);
}

/* Section label badge - indented/inset style like "Sponsors" */
.neu-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  background: var(--neu-bg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neu-muted);
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

.neu-section-badge-icon {
  color: var(--neu-accent);
}

/* Trust strip badge with green dot */
.neu-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  background: var(--neu-bg);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neu-muted);
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

.neu-trust-badge .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #10B981;
}

/* ===== DIVIDER ===== */
.neu-divider {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--neu-shadow-dark) 20%,
    var(--neu-shadow-dark) 80%,
    transparent 100%);
  border: none;
  margin: 3rem 0;
}

/* ===== QUOTE STYLE ===== */
.neu-quote {
  position: relative;
  padding-left: 1.5rem;
  border-left: 4px solid var(--neu-accent);
  font-style: italic;
}

.neu-quote::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  font-size: 3rem;
  color: var(--neu-accent);
  opacity: 0.3;
  font-family: Georgia, serif;
}

/* ===== FORM INPUT STYLES ===== */
/* Remove browser default focus rings on neumorphic inputs */
.neu-inset input,
.neu-inset select,
.neu-inset textarea {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.neu-inset input:focus,
.neu-inset select:focus,
.neu-inset textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Custom select dropdown arrow */
.neu-inset select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
}

/* ===== ANTI-FLICKER ===== */
/* Prevent flashing during page load - elements start visible, then animate on scroll */
[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}

/* Ensure smooth animation without flickering */
.is-visible {
  animation-fill-mode: forwards !important;
}

/* Reduce bubble animation intensity to prevent flicker */
@keyframes bubble-rise-smooth {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100vh) scale(1.1);
    opacity: 0;
  }
}

/* Override bubble animation with smoother version */
.animate-bubble-rise {
  animation: bubble-rise-smooth linear infinite;
  will-change: transform, opacity;
}

/* ===== SLIDER STYLES ===== */
/* Neumorphic range sliders for calculators */
.neu-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.75rem;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--neu-accent) 0%, var(--neu-accent) 50%, #C1CCD6 50%, #C1CCD6 100%);
  cursor: pointer;
  outline: none;
}

.neu-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light),
              0 0 0 3px var(--neu-accent);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.neu-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light),
              0 0 0 4px var(--neu-accent);
}

.neu-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(0.95);
}

.neu-slider::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light),
              0 0 0 3px var(--neu-accent);
  cursor: grab;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.neu-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
}

/* Red slider variant (for damage/cost inputs) */
.neu-slider-red::-webkit-slider-thumb {
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light),
              0 0 0 3px #EF4444;
}

.neu-slider-red::-moz-range-thumb {
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light),
              0 0 0 3px #EF4444;
}

/* Amber slider variant (for upsell rate) */
.neu-slider-amber::-webkit-slider-thumb {
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light),
              0 0 0 3px #F59E0B;
}

.neu-slider-amber::-moz-range-thumb {
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light),
              0 0 0 3px #F59E0B;
}

/* Purple slider variant (for time inputs) */
.neu-slider-purple::-webkit-slider-thumb {
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light),
              0 0 0 3px #8B5CF6;
}

.neu-slider-purple::-moz-range-thumb {
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light),
              0 0 0 3px #8B5CF6;
}

/* Focus state for accessibility */
.neu-slider:focus {
  outline: none;
}

.neu-slider:focus::-webkit-slider-thumb {
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light),
              0 0 0 4px var(--neu-accent),
              0 0 12px rgba(108, 99, 255, 0.4);
}

/* ===== MICRO-INTERACTIONS ===== */

/* Card hover lift effect */
.neu-card-interactive {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.neu-card-interactive:hover {
  transform: translateY(-4px);
  box-shadow: calc(var(--shadow-offset) + 3px) calc(var(--shadow-offset) + 3px) calc(var(--shadow-blur) + 8px) var(--neu-shadow-dark-strong),
              calc(-1 * (var(--shadow-offset) + 3px)) calc(-1 * (var(--shadow-offset) + 3px)) calc(var(--shadow-blur) + 8px) var(--neu-shadow-light-strong);
}

/* Subtle card hover (less dramatic) */
.neu-card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.neu-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: calc(var(--shadow-offset) + 1px) calc(var(--shadow-offset) + 1px) calc(var(--shadow-blur) + 4px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) + 1px)) calc(-1 * (var(--shadow-offset) + 1px)) calc(var(--shadow-blur) + 4px) var(--neu-shadow-light);
}

/* Button press effect - extruded to inset */
.neu-btn-press {
  transition: all 0.15s ease;
  box-shadow: calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 4px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 4px) var(--neu-shadow-light);
}

.neu-btn-press:hover {
  box-shadow: calc(var(--shadow-offset) - 1px) calc(var(--shadow-offset) - 1px) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 1px)) calc(-1 * (var(--shadow-offset) - 1px)) var(--shadow-blur) var(--neu-shadow-light);
  transform: translateY(-1px);
}

.neu-btn-press:active {
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  transform: translateY(1px);
}

/* Icon pulse animation */
@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
                calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
  }
  50% {
    transform: scale(1.05);
    box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) calc(var(--shadow-blur) - 2px) var(--neu-shadow-dark),
                calc(-1 * (var(--shadow-offset) - 2px)) calc(-1 * (var(--shadow-offset) - 2px)) calc(var(--shadow-blur) - 2px) var(--neu-shadow-light);
  }
}

.neu-icon-pulse {
  animation: iconPulse 2s ease-in-out infinite;
}

.neu-icon-pulse-hover:hover {
  animation: iconPulse 1s ease-in-out infinite;
}

/* Accent icon with glow pulse */
@keyframes accentGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(108, 99, 255, 0.3);
  }
}

.neu-icon-glow {
  animation: accentGlow 2.5s ease-in-out infinite;
}

/* ===== GLASSMORPHISM ===== */
.neu-glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.neu-glass-subtle {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.neu-glass-card {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ===== ENHANCED QUOTE/TESTIMONIAL CARDS ===== */
.neu-testimonial {
  position: relative;
  padding: 2rem;
  border-radius: 1.5rem;
  background: var(--neu-bg);
  box-shadow: calc(var(--shadow-offset) - 1px) calc(var(--shadow-offset) - 1px) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 1px)) calc(-1 * (var(--shadow-offset) - 1px)) var(--shadow-blur) var(--neu-shadow-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.neu-testimonial:hover {
  transform: translateY(-3px);
  box-shadow: calc(var(--shadow-offset) + 1px) calc(var(--shadow-offset) + 1px) calc(var(--shadow-blur) + 4px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) + 1px)) calc(-1 * (var(--shadow-offset) + 1px)) calc(var(--shadow-blur) + 4px) var(--neu-shadow-light);
}

.neu-testimonial::before {
  content: '"';
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-size: 4rem;
  font-family: Georgia, serif;
  color: var(--neu-accent);
  opacity: 0.2;
  line-height: 1;
}

.neu-testimonial-accent {
  border-left: 4px solid var(--neu-accent);
}

/* Quote icon circle */
.neu-quote-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3);
}

/* ===== VERTICAL TIMELINE (Numbered Steps) ===== */
.neu-timeline-vertical {
  position: relative;
  padding-left: 0;
}

/* The connecting line */
.neu-timeline-vertical::before {
  content: '';
  position: absolute;
  left: 2.75rem;
  top: 3.5rem;
  bottom: 3.5rem;
  width: 4px;
  background: linear-gradient(180deg,
    var(--neu-accent) 0%,
    rgba(108, 99, 255, 0.3) 50%,
    var(--neu-accent) 100%);
  border-radius: 2px;
}

/* ===== HORIZONTAL TIMELINE (How It Works) ===== */
.neu-timeline-horizontal {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2rem;
}

/* Horizontal connecting line */
.neu-timeline-horizontal::before {
  content: '';
  position: absolute;
  top: calc(2rem + 2rem); /* padding-top + half of circle height */
  left: 15%;
  right: 15%;
  height: 4px;
  background: linear-gradient(90deg,
    var(--neu-accent) 0%,
    rgba(108, 99, 255, 0.5) 50%,
    var(--neu-accent) 100%);
  border-radius: 2px;
  z-index: 1;
}

@media (min-width: 768px) {
  .neu-timeline-horizontal::before {
    left: 10%;
    right: 10%;
  }
}

/* Timeline step for horizontal layout */
.neu-timeline-h-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 280px;
}

/* Large neumorphic circle with number (horizontal) */
.neu-timeline-h-number {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: calc(var(--shadow-offset) - 1px) calc(var(--shadow-offset) - 1px) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 1px)) calc(-1 * (var(--shadow-offset) - 1px)) var(--shadow-blur) var(--neu-shadow-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Inner accent circle */
.neu-timeline-h-number-inner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.3),
              0 4px 12px rgba(108, 99, 255, 0.4);
}

/* Timeline step item */
.neu-timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  position: relative;
  padding-bottom: 2rem;
}

.neu-timeline-step:last-child {
  padding-bottom: 0;
}

/* Large neumorphic circle with number */
.neu-timeline-number {
  flex-shrink: 0;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: calc(var(--shadow-offset) - 1px) calc(var(--shadow-offset) - 1px) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 1px)) calc(-1 * (var(--shadow-offset) - 1px)) var(--shadow-blur) var(--neu-shadow-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* Inner circle with accent color */
.neu-timeline-number-inner {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.3),
              0 4px 15px rgba(108, 99, 255, 0.4);
}

/* Red variant for pain points */
.neu-timeline-number-inner.is-red {
  background: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
  box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.3),
              0 4px 15px rgba(239, 68, 68, 0.4);
}

/* Timeline content card */
.neu-timeline-content {
  flex: 1;
  padding-top: 1rem;
}

/* ===== PDF PREVIEW EFFECTS ===== */
@keyframes floatSubtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.neu-float {
  animation: floatSubtle 4s ease-in-out infinite;
}

/* Gentle floating animation for stat cards */
@keyframes floatGently {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes floatGentlyDelayed {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.neu-float-gentle {
  animation: floatGently 3s ease-in-out infinite;
}

.neu-float-gentle-delayed {
  animation: floatGentlyDelayed 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

/* Shine effect overlay */
@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(25deg);
  }
  100% {
    transform: translateX(200%) rotate(25deg);
  }
}

.neu-shine {
  position: relative;
  overflow: hidden;
}

.neu-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(25deg);
  animation: shine 4s ease-in-out infinite;
  pointer-events: none;
}

/* ===== COUNTER ANIMATION ===== */
.neu-counter {
  font-variant-numeric: tabular-nums;
  transition: all 0.3s ease;
}

/* ===== STAGGERED GRID ANIMATION ===== */
.neu-grid-stagger > * {
  opacity: 0;
  transform: translateY(20px);
}

.neu-grid-stagger.is-visible > *:nth-child(1) { animation: fadeInUp 0.5s ease forwards 0.1s; }
.neu-grid-stagger.is-visible > *:nth-child(2) { animation: fadeInUp 0.5s ease forwards 0.2s; }
.neu-grid-stagger.is-visible > *:nth-child(3) { animation: fadeInUp 0.5s ease forwards 0.3s; }
.neu-grid-stagger.is-visible > *:nth-child(4) { animation: fadeInUp 0.5s ease forwards 0.4s; }
.neu-grid-stagger.is-visible > *:nth-child(5) { animation: fadeInUp 0.5s ease forwards 0.5s; }
.neu-grid-stagger.is-visible > *:nth-child(6) { animation: fadeInUp 0.5s ease forwards 0.6s; }
.neu-grid-stagger.is-visible > *:nth-child(7) { animation: fadeInUp 0.5s ease forwards 0.7s; }
.neu-grid-stagger.is-visible > *:nth-child(8) { animation: fadeInUp 0.5s ease forwards 0.8s; }

/* ===== KEY INSIGHT CARD (Glassmorphism) ===== */
.neu-insight-card {
  background: linear-gradient(135deg,
    rgba(108, 99, 255, 0.1) 0%,
    rgba(108, 99, 255, 0.05) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(108, 99, 255, 0.2);
  box-shadow: 0 8px 32px rgba(108, 99, 255, 0.15),
              8px 8px 16px var(--neu-shadow-dark),
              -8px -8px 16px var(--neu-shadow-light);
}

/* ===== FEATURE CARD WITH ICON ===== */
.neu-feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.neu-feature-card:hover {
  transform: translateY(-4px);
}

.neu-feature-card:hover .neu-feature-icon {
  animation: iconPulse 0.6s ease;
}

/* ===== ANIMATED GRADIENT ORBS ===== */
@keyframes orbFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(5%, 10%) scale(1.05);
  }
  50% {
    transform: translate(-5%, 5%) scale(0.95);
  }
  75% {
    transform: translate(10%, -5%) scale(1.02);
  }
}

@keyframes orbPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

.neu-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  will-change: transform, opacity;
}

.neu-orb-accent {
  background: radial-gradient(circle, var(--neu-accent) 0%, transparent 70%);
  animation: orbFloat 20s ease-in-out infinite, orbPulse 8s ease-in-out infinite;
}

.neu-orb-teal {
  background: radial-gradient(circle, var(--neu-accent-secondary) 0%, transparent 70%);
  animation: orbFloat 25s ease-in-out infinite reverse, orbPulse 10s ease-in-out infinite;
  animation-delay: -5s;
}

.neu-orb-success {
  background: radial-gradient(circle, #10B981 0%, transparent 70%);
  animation: orbFloat 22s ease-in-out infinite, orbPulse 9s ease-in-out infinite;
  animation-delay: -3s;
}

/* ===== ENHANCED CTA BUTTON ===== */
.neu-cta-primary {
  position: relative;
  background: linear-gradient(135deg, var(--neu-accent) 0%, #5B54E0 100%);
  border-radius: 1rem;
  padding: 1rem 2rem;
  font-weight: 600;
  color: white;
  border: none;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 10px 30px -5px rgba(108, 99, 255, 0.4),
    0 4px 6px -2px rgba(108, 99, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
}

.neu-cta-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), transparent);
  border-radius: 1rem 1rem 0 0;
  pointer-events: none;
}

.neu-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 35px -5px rgba(108, 99, 255, 0.5),
    0 8px 12px -4px rgba(108, 99, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.neu-cta-primary:active {
  transform: translateY(0);
  box-shadow:
    0 6px 20px -3px rgba(108, 99, 255, 0.35),
    0 2px 4px -1px rgba(108, 99, 255, 0.2),
    inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ripple effect for CTA */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.neu-cta-primary .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* ===== TEXT DEPTH & SHADOWS ===== */
.neu-heading-shadow {
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.8),
    -1px -1px 2px rgba(163, 177, 198, 0.3);
}

.neu-heading-shadow-dark {
  text-shadow:
    2px 2px 4px rgba(163, 177, 198, 0.4),
    -1px -1px 2px rgba(255, 255, 255, 0.6);
}

/* Embossed text effect */
.neu-text-embossed {
  text-shadow:
    1px 1px 1px rgba(255, 255, 255, 0.9),
    -1px -1px 1px rgba(163, 177, 198, 0.5);
}

/* Inset text effect */
.neu-text-inset {
  text-shadow:
    -1px -1px 1px rgba(255, 255, 255, 0.6),
    1px 1px 1px rgba(163, 177, 198, 0.5);
}

/* ===== LINK HOVER EFFECTS ===== */
.neu-link {
  color: var(--neu-accent);
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}

.neu-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neu-accent), var(--neu-accent-secondary));
  transition: width 0.3s ease;
}

.neu-link:hover::after {
  width: 100%;
}

.neu-link:hover {
  color: var(--neu-accent-light);
}

/* ===== PAGE LOAD ANIMATION ===== */
@keyframes pageLoad {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.neu-page-enter {
  animation: pageLoad 0.5s ease-out;
}

/* ===== SMOOTH SCROLLBAR ===== */
.neu-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.neu-scrollbar::-webkit-scrollbar-track {
  background: var(--neu-bg);
  border-radius: 4px;
}

.neu-scrollbar::-webkit-scrollbar-thumb {
  background: var(--neu-shadow-dark);
  border-radius: 4px;
  border: 2px solid var(--neu-bg);
}

.neu-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--neu-accent);
}

/* ===== SKELETON LOADING ===== */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.neu-skeleton {
  background: linear-gradient(
    90deg,
    var(--neu-bg) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    var(--neu-bg) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.5rem;
}

/* ===== ACCENT GLOW BACKGROUND ===== */
.neu-bg-glow {
  position: relative;
  overflow: hidden;
}

.neu-bg-glow::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(108, 99, 255, 0.1) 0%,
    transparent 50%
  ),
  radial-gradient(
    circle at 70% 70%,
    rgba(56, 178, 172, 0.08) 0%,
    transparent 50%
  );
  pointer-events: none;
  animation: orbFloat 30s ease-in-out infinite;
}

/* ===== FOCUS RING UTILITY ===== */
.neu-focus-ring:focus {
  outline: none;
  box-shadow:
    0 0 0 3px var(--neu-bg),
    0 0 0 5px var(--neu-accent);
}

/* ===== SUBTLE BORDER GRADIENTS ===== */
.neu-border-gradient {
  position: relative;
  background: var(--neu-bg);
  border-radius: 1.5rem;
}

.neu-border-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(108, 99, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(56, 178, 172, 0.3) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ===== DASHBOARD-SPECIFIC STYLES ===== */

/* Dashboard Layout Background */
.neu-dashboard-bg {
  background-color: var(--neu-bg);
}

/* Dashboard Card (replaces card bg-base-100 shadow) */
.neu-card {
  background-color: var(--neu-bg);
  border-radius: 1.5rem; /* rounded-2xl equivalent */
  padding: 1.25rem;
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--shadow-blur) var(--neu-shadow-light);
  transition: all 300ms ease-out;
}

.neu-card:hover {
  transform: translateY(-2px);
  box-shadow: calc(var(--shadow-offset) + 3px) calc(var(--shadow-offset) + 3px) calc(var(--shadow-blur) + 4px) var(--neu-shadow-dark-strong),
              calc(-1 * (var(--shadow-offset) + 3px)) calc(-1 * (var(--shadow-offset) + 3px)) calc(var(--shadow-blur) + 4px) var(--neu-shadow-light-strong);
}

.neu-card-flat {
  background-color: var(--neu-bg);
  border-radius: 1.5rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--shadow-blur) var(--neu-shadow-light);
}

/* Dashboard Sidebar */
.neu-sidebar {
  background-color: var(--neu-bg);
  box-shadow: var(--shadow-offset) 0 var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * var(--shadow-offset) / 3) 0 calc(var(--shadow-blur) / 2) var(--neu-shadow-light);
}

.neu-sidebar-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  color: var(--neu-text);
  transition: all 200ms ease-out;
}

.neu-sidebar-menu-item:hover {
  background-color: rgba(108, 99, 255, 0.08);
  transform: translateX(2px);
}

.neu-sidebar-menu-item.active {
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  color: var(--neu-accent);
  font-weight: 600;
}

/* Sidebar Menu Item (for existing .menu-item class) */
.neu-sidebar .menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  color: var(--neu-muted);
  font-size: calc(var(--fluid-unit) * 0.875);
  transition: all 200ms ease-out;
}

.neu-sidebar .menu-item:hover {
  color: var(--neu-text);
}

.neu-sidebar .menu-item:hover .iconify {
  color: var(--neu-accent);
}

/* Active menu item - EXTRUDED (raised) appearance like Vuse Admin reference */
.neu-sidebar .menu-item.active {
  background-color: white;
  color: var(--neu-accent);
  font-weight: 600;
  box-shadow: calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 4px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 4px) var(--neu-shadow-light);
}

/* Sidebar Icons — plain SVG shapes from lucide_icons.css.
   mask-image: none prevents nexus.css --svg interference so new icons just work. */
.neu-sidebar .menu-item .iconify,
.neu-sidebar .collapse-title .iconify:first-child {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.325rem;
  border-radius: 0.5rem;
  background-color: transparent;
  box-shadow: none;
  color: #9CA3AF;
  transition: all 200ms ease-out;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Collapse-content sub-menu icons are smaller */
.neu-sidebar .collapse-content .menu-item {
  padding: 0.5rem 0.75rem;
  font-size: calc(var(--fluid-unit) * 0.8125);
}

.neu-sidebar .collapse-content .menu-item .iconify {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
}

/* Arrow and external-link icons — no padding/radius */
.neu-sidebar .collapse-title .arrow-icon,
.neu-sidebar .menu-item .iconify.lucide--external-link {
  padding: 0;
  border-radius: 0;
}

/* Hover: icon turns accent */
.neu-sidebar .menu-item:hover .iconify,
.neu-sidebar .collapse-title:hover .iconify:first-child {
  color: var(--neu-accent);
}

/* Active / expanded: filter colorizes SVG strokes to accent purple */
.neu-sidebar .menu-item.active .iconify,
.neu-sidebar .collapse:has(input:checked) > .collapse-title .iconify:first-child {
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(2047%) hue-rotate(230deg) brightness(97%) contrast(107%);
}

/* Collapse-content active icons just get accent color, no filter */
.neu-sidebar .collapse-content .menu-item.active .iconify {
  color: var(--neu-accent);
}

/* Allow box-shadow on active items to render outside the collapse boundary */
.neu-sidebar .collapse {
  overflow: visible;
}

.neu-sidebar .collapse-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  color: var(--neu-muted);
  font-size: calc(var(--fluid-unit) * 0.875);
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-sidebar .collapse-title:hover {
  color: var(--neu-text);
}

/* Expanded collapse menu — active parent styling */
.neu-sidebar .collapse:has(input:checked) > .collapse-title {
  color: var(--neu-text);
  font-weight: 600;
}

/* Area Chart Gradient Fill */
.neu-chart-gradient {
  fill: url(#neuGradient);
}

.neu-chart-line {
  stroke: var(--neu-accent);
  stroke-width: 2;
  fill: none;
}

/* Dashboard Topbar */
.neu-topbar {
  background-color: var(--neu-bg);
  box-shadow: 0 4px 12px var(--neu-shadow-dark);
}

/* Dashboard KPI Card - Matches reference image style */
.neu-kpi-card {
  position: relative;
  background-color: var(--neu-bg);
  border-radius: 1.25rem;
  padding: calc(var(--fluid-unit) * 1.25) calc(var(--fluid-unit) * 1.5);
  box-shadow: calc(var(--shadow-offset) - 1px) calc(var(--shadow-offset) - 1px) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 1px)) calc(-1 * (var(--shadow-offset) - 1px)) var(--shadow-blur) var(--neu-shadow-light);
  transition: all 300ms ease-out;
}

.neu-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: calc(var(--shadow-offset) + 3px) calc(var(--shadow-offset) + 3px) calc(var(--shadow-blur) + 4px) var(--neu-shadow-dark-strong),
              calc(-1 * (var(--shadow-offset) + 3px)) calc(-1 * (var(--shadow-offset) + 3px)) calc(var(--shadow-blur) + 4px) var(--neu-shadow-light-strong);
}

.neu-kpi-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.neu-kpi-icon {
  width: calc(var(--fluid-unit) * 2.5);
  height: calc(var(--fluid-unit) * 2.5);
  border-radius: 0.75rem;
  background-color: var(--neu-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

.neu-kpi-value {
  font-size: calc(var(--fluid-unit) * 1.75);
  font-weight: 700;
  color: var(--neu-text);
  letter-spacing: -0.02em;
}

.neu-kpi-label {
  font-size: calc(var(--fluid-unit) * 0.875);
  font-weight: 500;
  color: var(--neu-muted);
}

/* Dashboard Button Styles */
.neu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: calc(var(--fluid-unit) * 0.875);
  background-color: var(--neu-bg);
  color: var(--neu-text);
  border: none;
  cursor: pointer;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-btn:hover {
  transform: translateY(-1px);
  box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) calc(var(--shadow-blur) - 2px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 2px)) calc(-1 * (var(--shadow-offset) - 2px)) calc(var(--shadow-blur) - 2px) var(--neu-shadow-light);
}

.neu-btn:active {
  transform: translateY(1px);
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-btn-primary {
  background-color: var(--neu-accent);
  color: white;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light),
              0 4px 15px rgba(108, 99, 255, 0.3);
}

.neu-btn-primary:hover {
  background-color: var(--neu-accent-light);
  box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) calc(var(--shadow-blur) - 2px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 2px)) calc(-1 * (var(--shadow-offset) - 2px)) calc(var(--shadow-blur) - 2px) var(--neu-shadow-light),
              0 6px 20px rgba(108, 99, 255, 0.4);
}

.neu-btn-sm {
  padding: 0.5rem 1rem;
  font-size: calc(var(--fluid-unit) * 0.8125);
  border-radius: 0.625rem;
}

.neu-btn-lg {
  padding: 1rem 1.5rem;
  font-size: calc(var(--fluid-unit) * 1.125);
  border-radius: 1rem;
  min-height: 3.5rem;
}

.neu-btn-giant {
  padding: 1.5rem 2rem;
  font-size: 1.375rem;
  border-radius: 1.5rem;
  min-height: 5rem;
  font-weight: 800;
}

/* Dashboard Input Styles */
.neu-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: none;
  background-color: var(--neu-bg);
  color: var(--neu-text);
  font-size: 0.875rem;
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-input:focus {
  outline: none;
  box-shadow: inset calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 4px) var(--neu-shadow-dark-strong),
              inset calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 4px) var(--neu-shadow-light-strong),
              0 0 0 3px rgba(108, 99, 255, 0.2);
}

.neu-input::placeholder {
  color: var(--neu-muted);
}

/* Input wrapper for icon positioning */
.neu-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.neu-input-wrapper > .iconify:first-child {
  position: absolute;
  left: 0.75rem;
  z-index: 10;
  pointer-events: none;
}

.neu-input-wrapper .neu-input {
  padding-left: 2.5rem;
}

.neu-select {
  width: 100%;
  padding: 0.75rem 1rem;
  padding-right: 2.5rem;
  border-radius: 0.75rem;
  border: none;
  background-color: var(--neu-bg);
  color: var(--neu-text);
  font-size: 0.875rem;
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-select:focus {
  outline: none;
  box-shadow: inset calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 4px) var(--neu-shadow-dark-strong),
              inset calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 4px) var(--neu-shadow-light-strong),
              0 0 0 3px rgba(108, 99, 255, 0.2);
}

/* Dashboard Toggle Group (Date presets) - Matches reference image */
.neu-toggle-group {
  display: inline-flex;
  gap: 0.5rem;
  background-color: var(--neu-bg);
  border-radius: 2rem;
  padding: 0.375rem;
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

.neu-toggle-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--neu-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-toggle-btn:hover {
  color: var(--neu-text);
}

.neu-toggle-btn.active {
  background-color: var(--neu-bg);
  color: var(--neu-text);
  font-weight: 600;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
}

/* Custom Date Range Container */
.neu-date-range-container {
  background-color: var(--neu-bg);
  color: var(--neu-text);
}

.neu-date-range-label {
  color: var(--neu-text);
}

.neu-date-range-separator {
  color: var(--neu-muted);
}

/* Card Menu Icon (three dots) */
.neu-card-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-card-menu:hover {
  background-color: rgba(108, 99, 255, 0.1);
}

.neu-card-menu-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--neu-muted);
}

/* Circular Progress (neumorphism style) */
.neu-progress-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 4px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 4px) var(--neu-shadow-light),
              calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 4px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 4px) var(--neu-shadow-light);
}

.neu-progress-value {
  font-size: calc(var(--fluid-unit) * 1.5);
  font-weight: 700;
  color: var(--neu-accent);
}

/* Toggle Switch (neumorphism style) */
.neu-switch {
  position: relative;
  width: 3.5rem;
  height: 1.75rem;
  border-radius: 1rem;
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-switch-knob {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--neu-bg);
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-switch.active .neu-switch-knob {
  left: calc(100% - 1.5rem);
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
}

.neu-switch.active {
  background: linear-gradient(135deg, rgba(108, 99, 255, 0.2) 0%, rgba(108, 99, 255, 0.1) 100%);
}

/* Dashboard Chart Card */
.neu-chart-card {
  background-color: var(--neu-bg);
  border-radius: 1.5rem;
  padding: calc(var(--fluid-unit) * 1.5);
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--shadow-blur) var(--neu-shadow-light);
  height: 100%;
}

.neu-chart-title {
  font-size: calc(var(--fluid-unit) * 1);
  font-weight: 600;
  color: var(--neu-text);
  margin-bottom: 0.25rem;
}

.neu-chart-subtitle {
  font-size: calc(var(--fluid-unit) * 0.8125);
  color: var(--neu-muted);
}

/* ===== SOFT UI CHART ENHANCEMENTS ===== */

/* Chart container with inset shadow for depth */
.neu-chart-container {
  position: relative;
  padding: calc(var(--fluid-unit) * 1);
  margin-top: 1rem;
  border-radius: 1rem;
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

/* Chart value displays (like reference Temperature/Energy values) */
.neu-chart-value {
  font-size: calc(var(--fluid-unit) * 2);
  font-weight: 700;
  color: var(--neu-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.neu-chart-value-sm {
  font-size: calc(var(--fluid-unit) * 1.5);
}

.neu-chart-value-lg {
  font-size: calc(var(--fluid-unit) * 2.5);
}

.neu-chart-label {
  font-size: calc(var(--fluid-unit) * 0.8125);
  font-weight: 500;
  color: var(--neu-muted);
  margin-top: 0.25rem;
}

.neu-chart-timestamp {
  font-size: calc(var(--fluid-unit) * 0.75);
  color: var(--neu-muted);
  opacity: 0.7;
}

/* Chart time filter pills (Today/Week/Month like reference) */
.neu-chart-filters {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: var(--neu-bg);
  border-radius: 2rem;
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-chart-filter-btn {
  padding: 0.5rem 1rem;
  border-radius: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--neu-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-chart-filter-btn:hover {
  color: var(--neu-text);
}

.neu-chart-filter-btn.active {
  background-color: var(--neu-bg);
  color: var(--neu-text);
  font-weight: 600;
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

/* Chart action buttons (download svg like reference) */
.neu-chart-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--neu-muted);
  background-color: var(--neu-bg);
  border: none;
  cursor: pointer;
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-chart-action:hover {
  color: var(--neu-accent);
  transform: translateY(-1px);
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

.neu-chart-action:active {
  transform: translateY(0);
  box-shadow: inset 2px 2px 4px var(--neu-shadow-dark),
              inset -2px -2px 4px var(--neu-shadow-light);
}

/* Chart legend styling for Soft UI */
.neu-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(163, 177, 198, 0.2);
}

.neu-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--neu-muted);
}

.neu-chart-legend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.neu-chart-legend-dot.primary {
  background: linear-gradient(135deg, #E8B4CB 0%, #9B8AC4 100%);
}

.neu-chart-legend-dot.secondary {
  background: linear-gradient(135deg, #82D9D9 0%, #5BC0C0 100%);
}

.neu-chart-legend-dot.tertiary {
  background: linear-gradient(135deg, #F5A962 0%, #E08942 100%);
}

/* Soft UI metric cards row (like reference KPI cards) */
.neu-metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.neu-metric-card {
  background-color: var(--neu-bg);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 4px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 4px) var(--neu-shadow-light);
  position: relative;
}

.neu-metric-card::after {
  content: '';
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--neu-muted);
  box-shadow: 0 6px 0 var(--neu-muted), 0 12px 0 var(--neu-muted);
  opacity: 0.5;
}

.neu-metric-value {
  font-size: calc(var(--fluid-unit) * 1.75);
  font-weight: 700;
  color: var(--neu-text);
  letter-spacing: -0.02em;
}

.neu-metric-label {
  font-size: calc(var(--fluid-unit) * 0.8125);
  font-weight: 500;
  color: var(--neu-muted);
  margin-top: 0.25rem;
}

.neu-metric-timestamp {
  font-size: calc(var(--fluid-unit) * 0.6875);
  color: var(--neu-muted);
  opacity: 0.6;
  margin-top: 0.5rem;
}

/* Chart canvas wrapper for proper sizing */
.neu-chart-canvas-wrapper {
  position: relative;
  min-height: 250px;
  margin-top: 1rem;
}

.neu-chart-canvas-wrapper canvas {
  max-width: 100%;
}

/* Soft UI area chart gradient animation */
@keyframes chartFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.neu-chart-animated {
  animation: chartFadeIn 0.6s ease-out forwards;
}

/* Chart loading skeleton */
.neu-chart-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--neu-bg) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    var(--neu-bg) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 1rem;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.neu-chart-skeleton-line {
  height: 3px;
  background-color: rgba(163, 177, 198, 0.3);
  border-radius: 2px;
  margin: 0.5rem 0;
}

.neu-chart-skeleton-area {
  height: 200px;
  background: linear-gradient(
    180deg,
    rgba(232, 180, 203, 0.2) 0%,
    transparent 100%
  );
  border-radius: 0.5rem;
}

/* Dashboard Section Headers */
.neu-section-title {
  font-size: calc(var(--fluid-unit) * 1.125);
  font-weight: 700;
  color: var(--neu-text);
}

.neu-section-subtitle {
  font-size: calc(var(--fluid-unit) * 0.875);
  color: var(--neu-muted);
}

/* ===== DASHBOARD SHADOW-SAFE LAYOUT UTILITIES ===== */
/*
 * Neumorphic shadows (box-shadow offset + blur) extend OUTSIDE element
 * border-box. Grid gaps and container padding must exceed the maximum shadow
 * reach so shadows are never visually clipped at cell or container edges.
 *
 * At 1440 px: hover shadow = (9+3)px offset + (16+4)px blur/2 = 22px reach.
 * At 1024 px: hover shadow = (7+3)px offset + (14+4)px blur/2 = 19px reach.
 * Gap of 1.75 × fluid-unit = 28px at 1440px / 25.8px at 1024px → safe buffer.
 */

/* Explicit overflow: visible on all neumorphic card primitives ensures no
   ancestor with border-radius clips painted shadows on WebKit. */
.neu-card,
.neu-card-flat,
.neu-kpi-card,
.neu-chart-card {
  overflow: visible;
}

/* Responsive 3-column operations grid with tablet support and shadow-safe gap */
.neu-ops-grid {
  display: grid;
  gap: calc(var(--fluid-unit) * 1.75);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .neu-ops-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .neu-ops-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Responsive 2-column chart grid — last odd item spans full width at lg+ */
.neu-chart-grid {
  display: grid;
  gap: calc(var(--fluid-unit) * 1.75);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .neu-chart-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .neu-chart-grid > .neu-chart-full {
    grid-column: span 2;
  }
}

/* KPI card grid: 2-up on sm+, 4-up on xl with shadow-safe gap */
.neu-kpi-grid {
  display: grid;
  gap: calc(var(--fluid-unit) * 1.75);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .neu-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .neu-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Dashboard Progress Bar */
.neu-progress-bar {
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--neu-bg);
  box-shadow: inset 2px 2px 4px var(--neu-shadow-dark),
              inset -2px -2px 4px var(--neu-shadow-light);
  overflow: hidden;
}

.neu-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--neu-accent) 0%, var(--neu-accent-secondary) 100%);
  transition: width 500ms ease-out;
}

/* Dashboard Avatar/User Circle */
.neu-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
  color: white;
  font-weight: 600;
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

.neu-avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.75rem;
}

.neu-avatar-md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
}

/* Dashboard Dropdown */
.neu-dropdown {
  background-color: var(--neu-bg);
  border-radius: 1rem;
  padding: 0.5rem;
  box-shadow: calc(var(--shadow-offset) + 3px) calc(var(--shadow-offset) + 3px) calc(var(--shadow-blur) + 8px) var(--neu-shadow-dark-strong),
              calc(-1 * (var(--shadow-offset) + 3px)) calc(-1 * (var(--shadow-offset) + 3px)) calc(var(--shadow-blur) + 8px) var(--neu-shadow-light-strong);
}

.neu-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--neu-text);
  font-size: 0.875rem;
  transition: all 200ms ease-out;
}

.neu-dropdown-item:hover {
  background-color: rgba(108, 99, 255, 0.08);
}

/* Dashboard Table Styles */
.neu-table-container {
  background-color: var(--neu-bg);
  border-radius: 1.5rem;
  padding: 0;
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--shadow-blur) var(--neu-shadow-light);
  overflow: hidden;
}

.neu-table-header {
  background-color: var(--neu-bg);
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neu-muted);
  border-bottom: 1px solid rgba(163, 177, 198, 0.3);
}

.neu-table-row {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(163, 177, 198, 0.2);
  transition: background-color 200ms ease-out;
}

.neu-table-row:last-child {
  border-bottom: none;
}

.neu-table-row:hover {
  background-color: rgba(108, 99, 255, 0.04);
}

/* Dashboard Footer */
.neu-footer {
  background-color: var(--neu-bg);
  box-shadow: 0 -4px 12px var(--neu-shadow-dark);
}

/* Dashboard Alert/Flash Messages */
.neu-alert {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
}

.neu-alert-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.neu-alert-error {
  background-color: rgba(239, 68, 68, 0.15);
  color: #DC2626;
}

/* Dashboard Icon Button */
.neu-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: var(--neu-bg);
  color: var(--neu-text);
  border: none;
  cursor: pointer;
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 4px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 4px) var(--neu-shadow-light);
}

.neu-icon-btn:active {
  transform: translateY(0);
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-icon-btn-sm {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
}

/* Dashboard Scrollbar */
.neu-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.neu-scrollbar::-webkit-scrollbar-track {
  background: var(--neu-bg);
  border-radius: 4px;
}

.neu-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(163, 177, 198, 0.5);
  border-radius: 4px;
}

.neu-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(163, 177, 198, 0.7);
}

/* Dashboard Pill/Tag */
.neu-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--neu-bg);
  color: var(--neu-text);
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-pill-accent {
  background-color: var(--neu-accent);
  color: white;
}

.neu-pill-success {
  background-color: #10B981;
  color: white;
}

.neu-pill-warning {
  background-color: #F59E0B;
  color: white;
}

.neu-pill-error {
  background-color: #EF4444;
  color: white;
}

.neu-pill-info {
  background-color: #3B82F6;
  color: white;
}

/* ===== PAGE HEADER STYLES ===== */
.neu-page-header {
  margin-bottom: 1.5rem;
}

.neu-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--neu-text);
  letter-spacing: -0.02em;
}

.neu-page-subtitle {
  font-size: 0.875rem;
  color: var(--neu-muted);
  margin-top: 0.25rem;
}

/* Breadcrumbs */
.neu-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--neu-muted);
}

.neu-breadcrumbs a {
  color: var(--neu-muted);
  transition: color 200ms ease-out;
}

.neu-breadcrumbs a:hover {
  color: var(--neu-accent);
}

.neu-breadcrumbs-separator {
  color: rgba(163, 177, 198, 0.6);
}

.neu-breadcrumbs-current {
  color: var(--neu-text);
  font-weight: 500;
}

/* ===== TABLE STYLES ===== */
.neu-table-card {
  background-color: var(--neu-bg);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--shadow-blur) var(--neu-shadow-light);
  overflow: hidden;
}

.neu-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--neu-bg);
}

.neu-table thead {
  background-color: var(--neu-bg);
}

.neu-table th {
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neu-muted);
  text-align: left;
  border-bottom: 1px solid rgba(163, 177, 198, 0.3);
}

.neu-table td {
  padding: 1rem 1.25rem;
  color: var(--neu-text);
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(163, 177, 198, 0.2);
}

.neu-table tbody tr:last-child td {
  border-bottom: none;
}

.neu-table tbody tr {
  transition: background-color 200ms ease-out;
}

.neu-table tbody tr:hover {
  background-color: rgba(108, 99, 255, 0.04);
}

/* Table Sort Link */
.neu-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--neu-muted);
  transition: color 200ms ease-out;
}

.neu-sort-link:hover {
  color: var(--neu-accent);
}

/* ===== BADGE STYLES ===== */
.neu-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--neu-bg);
  color: var(--neu-text);
  box-shadow: 2px 2px 4px var(--neu-shadow-dark),
              -2px -2px 4px var(--neu-shadow-light);
}

.neu-badge-ghost {
  background-color: rgba(163, 177, 198, 0.2);
  color: var(--neu-muted);
  box-shadow: none;
}

.neu-badge-outline {
  background-color: transparent;
  border: 1px solid rgba(163, 177, 198, 0.4);
  color: var(--neu-muted);
  box-shadow: none;
}

.neu-badge-success {
  background-color: rgba(16, 185, 129, 0.15);
  color: #059669;
  box-shadow: none;
}

.neu-badge-warning {
  background-color: rgba(245, 158, 11, 0.15);
  color: #D97706;
  box-shadow: none;
}

.neu-badge-error {
  background-color: rgba(239, 68, 68, 0.15);
  color: #DC2626;
  box-shadow: none;
}

.neu-badge-info {
  background-color: rgba(59, 130, 246, 0.15);
  color: #2563EB;
  box-shadow: none;
}

.neu-badge-primary {
  background-color: rgba(108, 99, 255, 0.15);
  color: var(--neu-accent);
  box-shadow: none;
}

/* ===== ACTION BUTTON GROUP ===== */
.neu-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background-color: var(--neu-bg);
  color: var(--neu-muted);
  border: none;
  cursor: pointer;
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-action-btn:hover {
  color: var(--neu-accent);
  transform: translateY(-1px);
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

.neu-action-btn:active {
  transform: translateY(0);
  box-shadow: inset 2px 2px 4px var(--neu-shadow-dark),
              inset -2px -2px 4px var(--neu-shadow-light);
}

/* ===== EMPTY STATE ===== */
.neu-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}

.neu-empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.5rem;
  border-radius: 1.25rem;
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 4px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 4px) var(--neu-shadow-light);
  color: var(--neu-muted);
}

.neu-empty-state-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neu-text);
  margin-bottom: 0.5rem;
}

.neu-empty-state-desc {
  font-size: 0.875rem;
  color: var(--neu-muted);
}

/* ===== PAGINATION ===== */
.neu-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem;
}

.neu-pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: var(--neu-bg);
  color: var(--neu-muted);
  border: none;
  cursor: pointer;
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-pagination-btn:hover {
  color: var(--neu-accent);
}

.neu-pagination-btn.active {
  background-color: var(--neu-accent);
  color: white;
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light),
              0 4px 12px rgba(108, 99, 255, 0.3);
}

.neu-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.neu-pagination-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  color: var(--neu-muted);
  font-size: 0.875rem;
}

/* ===== FORM LABEL ===== */
.neu-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--neu-text);
  margin-bottom: 0.375rem;
}

/* ===== FORM GROUP ===== */
.neu-form-group {
  margin-bottom: 1rem;
}

/* ===== LINK STYLES ===== */
.neu-link {
  color: var(--neu-accent);
  transition: color 200ms ease-out;
}

.neu-link:hover {
  color: var(--neu-accent-light);
}

/* ===== DETAIL/SHOW PAGE STYLES ===== */
.neu-detail-card {
  background-color: var(--neu-bg);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--shadow-blur) var(--neu-shadow-light);
}

.neu-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(163, 177, 198, 0.3);
}

.neu-detail-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--neu-text);
}

.neu-detail-row {
  display: flex;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(163, 177, 198, 0.15);
}

.neu-detail-row:last-child {
  border-bottom: none;
}

.neu-detail-label {
  flex-shrink: 0;
  width: 10rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neu-muted);
}

.neu-detail-value {
  flex: 1;
  font-size: 0.875rem;
  color: var(--neu-text);
}

/* ===== TABS ===== */
.neu-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: var(--neu-bg);
  border-radius: 0.75rem;
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-tab {
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neu-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-tab:hover {
  color: var(--neu-text);
}

.neu-tab.active {
  background-color: var(--neu-bg);
  color: var(--neu-accent);
  font-weight: 600;
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

/* ===== STAT CARD (for index pages) ===== */
.neu-stat-card {
  background-color: var(--neu-bg);
  border-radius: 1.5rem;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--shadow-blur) var(--neu-shadow-light);
}

.neu-stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neu-muted);
}

.neu-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--neu-text);
  margin-top: 0.5rem;
  letter-spacing: -0.02em;
}

.neu-stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

.neu-stat-desc {
  font-size: 0.8125rem;
  color: var(--neu-muted);
  margin-top: 0.5rem;
}

/* ===== VEHICLE/LICENSE PLATE BADGE ===== */
.neu-plate-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: monospace;
  background-color: var(--neu-bg);
  color: var(--neu-text);
  box-shadow: 2px 2px 4px var(--neu-shadow-dark),
              -2px -2px 4px var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-plate-badge:hover {
  color: var(--neu-accent);
  transform: translateY(-1px);
}

/* ===== SEARCH BOX ===== */
.neu-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-search-input {
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: var(--neu-text);
  min-width: 0;
}

.neu-search-input::placeholder {
  color: var(--neu-muted);
}

/* ===== SIZE VARIANTS ===== */
.neu-input-sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}

.neu-select-sm {
  padding: 0.5rem 0.75rem;
  padding-right: 2rem;
  font-size: 0.8125rem;
}

.neu-select-xs {
  padding: 0.375rem 0.5rem;
  padding-right: 1.5rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
}

/* ===== CHECKBOX ===== */
.neu-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.25rem;
  background-color: var(--neu-bg);
  border: none;
  box-shadow: inset 2px 2px 4px var(--neu-shadow-dark),
              inset -2px -2px 4px var(--neu-shadow-light);
  appearance: none;
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-checkbox:checked {
  background-color: var(--neu-accent);
  box-shadow: 2px 2px 4px var(--neu-shadow-dark),
              -2px -2px 4px var(--neu-shadow-light);
}

.neu-checkbox:checked::after {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
}

/* ===== BUTTON VARIANTS ===== */
.neu-btn-ghost {
  background: transparent;
  box-shadow: none;
  color: var(--neu-muted);
}

.neu-btn-ghost:hover {
  background-color: rgba(108, 99, 255, 0.1);
  color: var(--neu-accent);
  box-shadow: none;
  transform: none;
}

.neu-btn-outline {
  background: transparent;
  border: 1px solid rgba(163, 177, 198, 0.4);
  box-shadow: none;
  color: var(--neu-text);
}

.neu-btn-outline:hover {
  border-color: var(--neu-accent);
  color: var(--neu-accent);
  box-shadow: none;
  transform: none;
}

/* Colored neumorphic variants */
.neu-btn-warning {
  background: linear-gradient(145deg, #f59e0b, #d97706);
  color: white;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
}

.neu-btn-warning:hover {
  transform: translateY(-1px);
  box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) calc(var(--shadow-blur) - 2px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 2px)) calc(-1 * (var(--shadow-offset) - 2px)) calc(var(--shadow-blur) - 2px) var(--neu-shadow-light);
}

.neu-btn-warning:focus-visible {
  outline: none;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light),
              0 0 0 3px rgba(245, 158, 11, 0.3);
}

.neu-btn-warning:active {
  transform: translateY(1px);
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-btn-error {
  background: linear-gradient(145deg, #ec4899, #db2777);
  color: white;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
}

.neu-btn-error:hover {
  transform: translateY(-1px);
  box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) calc(var(--shadow-blur) - 2px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 2px)) calc(-1 * (var(--shadow-offset) - 2px)) calc(var(--shadow-blur) - 2px) var(--neu-shadow-light);
}

.neu-btn-error:focus-visible {
  outline: none;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light),
              0 0 0 3px rgba(236, 72, 153, 0.3);
}

.neu-btn-error:active {
  transform: translateY(1px);
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

/* Inset display (for amount field) */
.neu-inset {
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  background-color: var(--neu-bg);
}

/* ===== MODAL ===== */
/* For native <dialog> elements, respect the open state */
dialog.neu-modal {
  display: none;
  border: none;
  padding: 0;
  max-width: none;
  max-height: none;
}

dialog.neu-modal[open] {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  z-index: 9999;
}

/* For non-dialog modals (legacy support) */
.neu-modal:not(dialog) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  z-index: 9999;
}

.neu-modal-box {
  background-color: var(--neu-bg);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 15px 15px 30px var(--neu-shadow-dark-strong),
              -15px -15px 30px var(--neu-shadow-light-strong);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.neu-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--neu-bg);
  color: var(--neu-muted);
  border: none;
  cursor: pointer;
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-modal-close:hover {
  color: var(--neu-text);
}

/* ===== FORM CONTROL ===== */
.neu-form-control {
  display: flex;
  flex-direction: column;
}

.neu-label-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--neu-text);
  margin-bottom: 0.375rem;
}

/* ===== PAGINATION ACTIVE/DISABLED STATES ===== */
.neu-pagination-active {
  background-color: var(--neu-accent);
  color: white;
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light),
              0 4px 12px rgba(108, 99, 255, 0.3);
}

.neu-pagination-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== BREADCRUMB LINKS ===== */
.neu-breadcrumb-link {
  color: var(--neu-muted);
  font-size: 0.875rem;
  transition: color 200ms ease-out;
}

.neu-breadcrumb-link:hover {
  color: var(--neu-accent);
}

.neu-breadcrumb-separator {
  color: rgba(163, 177, 198, 0.5);
  margin: 0 0.25rem;
}

.neu-breadcrumb-current {
  color: var(--neu-text);
  font-weight: 500;
  font-size: 0.875rem;
}

/* ===== EMPTY STATE ELEMENTS ===== */
.neu-empty-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--neu-text);
  margin-top: 1rem;
}

.neu-empty-desc {
  font-size: 0.875rem;
  color: var(--neu-muted);
  margin-top: 0.5rem;
}

/* ===== FILTER TOOLBAR ===== */
.neu-filter-toolbar {
  background-color: var(--neu-bg);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
}

/* ===== ALERT STYLES ===== */
.neu-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  font-size: 0.875rem;
  color: var(--neu-text);
}

.neu-alert-info {
  background-color: rgba(59, 130, 246, 0.1);
  color: #2563EB;
}

.neu-alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #D97706;
}

.neu-alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.neu-alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

/* ===== RADIO BUTTONS ===== */
.neu-radio {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--neu-bg);
  border: none;
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
  cursor: pointer;
  transition: all 200ms ease-out;
  position: relative;
}

.neu-radio:checked {
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
}

.neu-radio:focus {
  outline: none;
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light),
              0 0 0 3px rgba(108, 99, 255, 0.2);
}

/* ===== NAVIGATION ARROWS ===== */
.neu-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: var(--neu-bg);
  color: var(--neu-muted);
  border: none;
  cursor: pointer;
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-nav-arrow:hover {
  color: var(--neu-accent);
  transform: translateY(-1px);
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
}

.neu-nav-arrow:active {
  transform: translateY(0);
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-nav-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.neu-nav-arrow-sm {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
}

/* ===== CALENDAR/DATE PICKER ===== */
.neu-calendar {
  background-color: var(--neu-bg);
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--neu-shadow-dark),
              calc(-1 * var(--shadow-offset)) calc(-1 * var(--shadow-offset)) var(--shadow-blur) var(--neu-shadow-light);
}

.neu-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.neu-calendar-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neu-text);
}

.neu-calendar-nav {
  display: flex;
  gap: 0.5rem;
}

.neu-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.neu-calendar-weekday {
  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--neu-muted);
  text-transform: lowercase;
}

.neu-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: var(--neu-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-calendar-day:hover {
  background-color: rgba(108, 99, 255, 0.1);
  color: var(--neu-accent);
}

.neu-calendar-day.active {
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
  color: white;
  box-shadow: 2px 2px 4px var(--neu-shadow-dark),
              -2px -2px 4px var(--neu-shadow-light);
}

.neu-calendar-day.today {
  font-weight: 700;
  color: var(--neu-accent);
}

.neu-calendar-day.other-month {
  color: var(--neu-muted);
  opacity: 0.5;
}

/* ===== VERTICAL SLIDER BARS ===== */
.neu-slider-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.neu-slider-track-vertical {
  width: 0.75rem;
  height: 150px;
  border-radius: 0.5rem;
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
  position: relative;
  overflow: hidden;
}

.neu-slider-fill-vertical {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 0.5rem;
  background: linear-gradient(180deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
  transition: height 300ms ease-out;
}

.neu-slider-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--neu-muted);
}

/* Horizontal slider */
.neu-slider {
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--neu-bg);
  box-shadow: inset 2px 2px 4px var(--neu-shadow-dark),
              inset -2px -2px 4px var(--neu-shadow-light);
  appearance: none;
  cursor: pointer;
}

.neu-slider::-webkit-slider-thumb {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
  cursor: pointer;
  transition: transform 200ms ease-out;
}

.neu-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.neu-slider::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
  border: none;
  cursor: pointer;
}

/* ===== DROPDOWN MENU ===== */
.neu-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  background-color: var(--neu-bg);
  border-radius: 1rem;
  padding: 0.5rem;
  margin-top: 0.5rem;
  box-shadow: calc(var(--shadow-offset) + 3px) calc(var(--shadow-offset) + 3px) calc(var(--shadow-blur) + 8px) var(--neu-shadow-dark-strong),
              calc(-1 * (var(--shadow-offset) + 3px)) calc(-1 * (var(--shadow-offset) + 3px)) calc(var(--shadow-blur) + 8px) var(--neu-shadow-light-strong);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 200ms ease-out;
}

.neu-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.neu-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  color: var(--neu-text);
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-dropdown-item:hover {
  background-color: rgba(108, 99, 255, 0.08);
  color: var(--neu-accent);
}

.neu-dropdown-item.active {
  background-color: var(--neu-bg);
  color: var(--neu-accent);
  font-weight: 500;
  box-shadow: inset 2px 2px 4px var(--neu-shadow-dark),
              inset -2px -2px 4px var(--neu-shadow-light);
}

.neu-dropdown-divider {
  height: 1px;
  background-color: rgba(163, 177, 198, 0.3);
  margin: 0.5rem 0;
}

/* ===== ICON BUTTON GRID ===== */
.neu-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
  gap: 0.75rem;
}

.neu-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  background-color: var(--neu-bg);
  color: var(--neu-muted);
  border: none;
  cursor: pointer;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-icon-button:hover {
  color: var(--neu-accent);
  transform: translateY(-2px);
  box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) calc(var(--shadow-blur) - 2px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 2px)) calc(-1 * (var(--shadow-offset) - 2px)) calc(var(--shadow-blur) - 2px) var(--neu-shadow-light);
}

.neu-icon-button:active {
  transform: translateY(0);
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-icon-button.active {
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
  color: white;
  box-shadow: calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light),
              0 4px 15px rgba(108, 99, 255, 0.3);
}

.neu-icon-button-sm {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
}

.neu-icon-button-lg {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
}

/* ===== MEDIA CONTROLS ===== */
.neu-media-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.neu-media-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--neu-bg);
  color: var(--neu-muted);
  border: none;
  cursor: pointer;
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-media-btn:hover {
  color: var(--neu-accent);
}

.neu-media-btn:active {
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-media-btn-play {
  width: 3.5rem;
  height: 3.5rem;
  background: linear-gradient(135deg, var(--neu-accent) 0%, var(--neu-accent-light) 100%);
  color: white;
}

.neu-media-btn-play:hover {
  color: white;
  transform: scale(1.05);
}

/* ===== TEXTAREA ===== */
.neu-textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  border: none;
  background-color: var(--neu-bg);
  color: var(--neu-text);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  resize: vertical;
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  transition: all 200ms ease-out;
}

.neu-textarea:focus {
  outline: none;
  box-shadow: inset calc(var(--shadow-offset) - 3px) calc(var(--shadow-offset) - 3px) calc(var(--shadow-blur) - 4px) var(--neu-shadow-dark-strong),
              inset calc(-1 * (var(--shadow-offset) - 3px)) calc(-1 * (var(--shadow-offset) - 3px)) calc(var(--shadow-blur) - 4px) var(--neu-shadow-light-strong),
              0 0 0 3px rgba(108, 99, 255, 0.2);
}

.neu-textarea::placeholder {
  color: var(--neu-muted);
}

/* ===== FILE INPUT ===== */
.neu-file-input {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.875rem;
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-file-input:hover {
  box-shadow: inset calc(var(--shadow-offset) - 4px) calc(var(--shadow-offset) - 4px) calc(var(--shadow-blur) - 6px) var(--neu-shadow-dark-strong),
              inset calc(-1 * (var(--shadow-offset) - 4px)) calc(-1 * (var(--shadow-offset) - 4px)) calc(var(--shadow-blur) - 6px) var(--neu-shadow-light-strong);
}

.neu-file-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: var(--neu-bg);
  color: var(--neu-accent);
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-file-input-text {
  font-size: 0.875rem;
  color: var(--neu-muted);
}

.neu-file-input input[type="file"] {
  display: none;
}

/* ===== STEPPER/NUMBER INPUT ===== */
.neu-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background-color: var(--neu-bg);
  border-radius: 0.75rem;
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

.neu-stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  color: var(--neu-muted);
  border: none;
  cursor: pointer;
  transition: all 200ms ease-out;
}

.neu-stepper-btn:first-child {
  border-radius: 0.75rem 0 0 0.75rem;
}

.neu-stepper-btn:last-child {
  border-radius: 0 0.75rem 0.75rem 0;
}

.neu-stepper-btn:hover {
  color: var(--neu-accent);
  background-color: rgba(108, 99, 255, 0.08);
}

.neu-stepper-btn:active {
  box-shadow: inset 2px 2px 4px var(--neu-shadow-dark),
              inset -2px -2px 4px var(--neu-shadow-light);
}

.neu-stepper-value {
  min-width: 3rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--neu-text);
  padding: 0 0.5rem;
  border-left: 1px solid rgba(163, 177, 198, 0.3);
  border-right: 1px solid rgba(163, 177, 198, 0.3);
}

/* ===== TOOLTIP ===== */
.neu-tooltip {
  position: relative;
  display: inline-block;
}

.neu-tooltip-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 0.5rem 0.875rem;
  border-radius: 0.625rem;
  background-color: var(--neu-text);
  color: white;
  font-size: 0.8125rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 200ms ease-out;
  z-index: 100;
}

.neu-tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--neu-text);
}

.neu-tooltip:hover .neu-tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-12px);
}

/* ===== AVATAR GROUP ===== */
.neu-avatar-group {
  display: flex;
  align-items: center;
}

.neu-avatar-group .neu-avatar {
  margin-left: -0.75rem;
  border: 3px solid var(--neu-bg);
}

.neu-avatar-group .neu-avatar:first-child {
  margin-left: 0;
}

.neu-avatar-more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -0.75rem;
  border: 3px solid var(--neu-bg);
  background-color: var(--neu-bg);
  color: var(--neu-muted);
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

/* ===== NOTIFICATION DOT ===== */
.neu-notification-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: #EF4444;
  border: 2px solid var(--neu-bg);
}

.neu-notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  background-color: #EF4444;
  color: white;
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--neu-bg);
}

/* ===== VISIT STATUS STYLES ===== */

/* Proposed visits (in_progress) - dimmed with pulsing indicator */
.proposed-visit {
  opacity: 0.6;
}

.proposed-visit:hover {
  opacity: 0.8;
}

/* Status indicators with emoji and tooltip */
.visit-status-indicator {
  cursor: help;
  font-size: 1rem;
}

.visit-status-indicator[data-status="proposed"] {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .neu-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .neu-stat-card {
    padding: 1rem;
  }

  .neu-stat-value {
    font-size: 1.5rem;
  }

  .neu-table-card {
    border-radius: 1rem;
  }

  .neu-table th,
  .neu-table td {
    padding: 0.75rem;
    font-size: 0.8125rem;
  }

  .neu-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ===== CPW WIZARD ===== */
/* Using hardcoded RGBA shadows (not CSS vars) to guarantee visibility */

.cpw-wizard {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 4rem);
  margin-top: -1.5rem;
  margin-bottom: -5rem;
}

.cpw-wizard-content {
  flex: 1 1 0%;
  padding: 1rem 1.5rem;
}

.cpw-wizard-inner {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Two-column grid: narrow left (upload) + wide right (form) */
.cpw-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 1.25rem;
  align-items: start;
}

/* Equal two-column grid */
.cpw-grid-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 767px) {
  .cpw-grid,
  .cpw-grid-equal {
    grid-template-columns: 1fr;
  }
}

/* Force visible neumorphic shadows inside CPW wizard — hardcoded RGBA */
.cpw-wizard .neu-card-flat {
  background-color: #E0E5EC;
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: 8px 8px 16px rgba(163, 177, 198, 0.6),
              -8px -8px 16px rgba(255, 255, 255, 0.5) !important;
}

.cpw-wizard .neu-inset-sm {
  background-color: #E0E5EC;
  border-radius: 1rem;
  box-shadow: inset 4px 4px 8px rgba(163, 177, 198, 0.5),
              inset -4px -4px 8px rgba(255, 255, 255, 0.45) !important;
}

/* CPW header bar */
.cpw-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0.5rem 1.5rem;
  background-color: #E0E5EC;
  box-shadow: 0 3px 10px rgba(163, 177, 198, 0.45);
}

.cpw-header-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* CPW footer bar */
.cpw-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 0.625rem 1.5rem;
  background-color: #E0E5EC;
  box-shadow: 0 -3px 10px rgba(163, 177, 198, 0.35);
}

.cpw-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Step description bar — neumorphic inset strip */
.cpw-step-desc {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: #6B7280;
  background-color: #E0E5EC;
  border-radius: 1rem;
  box-shadow: inset 3px 3px 6px rgba(163, 177, 198, 0.45),
              inset -3px -3px 6px rgba(255, 255, 255, 0.4);
  line-height: 1.5;
}

.cpw-step-desc .cpw-step-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: #3D4852;
}

/* Upload drop zone — larger padding, dashed border hint */
.cpw-wizard .cpw-upload-drop {
  border: 2px dashed rgba(163, 177, 198, 0.5);
  border-radius: 1rem;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 200ms ease;
  background-color: rgba(224, 229, 236, 0.5);
  box-shadow: inset 3px 3px 6px rgba(163, 177, 198, 0.35),
              inset -3px -3px 6px rgba(255, 255, 255, 0.3);
}

.cpw-wizard .cpw-upload-drop:hover {
  border-color: rgba(108, 99, 255, 0.4);
  background-color: rgba(108, 99, 255, 0.03);
}

/* Utility fallbacks for Tailwind classes missing from nexus.css JIT build */
.cpw-wizard .flex-shrink-0 { flex-shrink: 0; }
.cpw-wizard .flex-1 { flex: 1 1 0%; }
.cpw-wizard .overflow-auto { overflow: auto; }

/* Dark mode CPW overrides */
[data-theme="dark"] .cpw-wizard .neu-card-flat {
  background-color: #2D3436;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5),
              -8px -8px 16px rgba(69, 75, 78, 0.4) !important;
}

[data-theme="dark"] .cpw-wizard .neu-inset-sm,
[data-theme="dark"] .cpw-step-desc {
  background-color: #2D3436;
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.5),
              inset -4px -4px 8px rgba(69, 75, 78, 0.4) !important;
}

[data-theme="dark"] .cpw-header,
[data-theme="dark"] .cpw-footer {
  background-color: #2D3436;
}

[data-theme="dark"] .cpw-step-desc .cpw-step-title { color: #E4E6E8; }
[data-theme="dark"] .cpw-step-desc { color: #9CA3AF; }

/* ===== DASHBOARD COMPONENT UTILITIES ===== */

/* Inset stat/metric box — used for summary grids inside cards */
.neu-stat-box {
  text-align: center;
  padding: 0.875rem 1rem;
  border-radius: 0.875rem;
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light);
}

.neu-stat-box-title {
  font-size: calc(var(--fluid-unit) * 0.6875);
  font-weight: 600;
  color: var(--neu-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}

.neu-stat-box-value {
  font-size: calc(var(--fluid-unit) * 1.375);
  font-weight: 700;
  color: var(--neu-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Actionable insight callout boxes */
.neu-insight-box {
  padding: 1rem;
  border-radius: 0.875rem;
  background-color: var(--neu-bg);
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
}

.neu-insight-box-success {
  background-color: rgba(16, 185, 129, 0.08);
  box-shadow: none;
  border-left: 3px solid rgba(16, 185, 129, 0.5);
}

.neu-insight-box-warning {
  background-color: rgba(245, 158, 11, 0.08);
  box-shadow: none;
  border-left: 3px solid rgba(245, 158, 11, 0.5);
}

/* Subtle divider line */
.neu-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--neu-border-subtle), transparent);
  margin: 1rem 0;
  border: none;
}

/* Neumorphic override for DaisyUI btn-group inside chart cards.
   Keeps Stimulus controller JS working (class names unchanged) while
   making the toggle group visually consistent with the design system. */
.neu-chart-card .btn-group {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 0.75rem;
  background-color: var(--neu-bg) !important;
  box-shadow: inset calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              inset calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light);
  border: none !important;
}

.neu-chart-card .btn-group .btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0.5rem !important;
  color: var(--neu-muted) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: none !important;
  min-height: unset;
  height: auto;
  padding: 0.375rem 0.875rem;
  transition: all 200ms ease-out;
}

.neu-chart-card .btn-group .btn-primary {
  background-color: var(--neu-bg) !important;
  color: var(--neu-text) !important;
  font-weight: 600 !important;
  box-shadow: calc(var(--shadow-offset) - 5px) calc(var(--shadow-offset) - 5px) calc(var(--shadow-blur) - 8px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 5px)) calc(-1 * (var(--shadow-offset) - 5px)) calc(var(--shadow-blur) - 8px) var(--neu-shadow-light) !important;
}

.neu-chart-card .btn-group .btn:hover:not(.btn-primary) {
  color: var(--neu-text) !important;
}

/* Day-of-week checkbox label buttons inside chart cards */
.neu-chart-card .btn-xs.btn-outline {
  background-color: var(--neu-bg) !important;
  border: none !important;
  border-radius: 0.5rem !important;
  color: var(--neu-muted) !important;
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: calc(var(--shadow-offset) - 6px) calc(var(--shadow-offset) - 6px) calc(var(--shadow-blur) - 10px) var(--neu-shadow-dark),
              calc(-1 * (var(--shadow-offset) - 6px)) calc(-1 * (var(--shadow-offset) - 6px)) calc(var(--shadow-blur) - 10px) var(--neu-shadow-light) !important;
  padding: 0.25rem 0.5rem;
  min-height: unset;
  height: auto;
}