@import "tailwindcss";
@import "tw-animate-css";
@import "react-day-picker/style.css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Background fintech ultra-moderne avec dégradé vibrant */
  --background: oklch(0.98 0.008 280);
  --foreground: oklch(0.1 0.015 280);

  /* Cards avec glassmorphism très prononcé */
  --card: oklch(1 0 0 / 0.5);
  --card-foreground: oklch(0.1 0.015 280);
  --card-hover: oklch(1 0 0 / 0.65);

  /* Popover avec backdrop blur très fort */
  --popover: oklch(1 0 0 / 0.95);
  --popover-foreground: oklch(0.1 0.015 280);

  /* Primary: Bleu/violet fintech très vibrant avec gradient */
  --primary: oklch(0.6 0.25 270);
  --primary-foreground: oklch(0.99 0 0);
  --primary-gradient: linear-gradient(
    135deg,
    oklch(0.6 0.25 270) 0%,
    oklch(0.65 0.22 300) 50%,
    oklch(0.62 0.24 250) 100%
  );
  --primary-light: oklch(0.7 0.2 270);

  /* Secondary avec teinte subtile */
  --secondary: oklch(0.97 0.008 280);
  --secondary-foreground: oklch(0.25 0.015 280);

  /* Muted plus doux */
  --muted: oklch(0.96 0.006 280);
  --muted-foreground: oklch(0.5 0.012 280);

  /* Accent avec couleur très vibrante */
  --accent: oklch(0.95 0.015 260);
  --accent-foreground: oklch(0.6 0.25 270);

  /* Destructive moderne */
  --destructive: oklch(0.6 0.26 25);
  --destructive-foreground: oklch(0.99 0 0);

  /* Bordures fines et subtiles */
  --border: oklch(0.9 0.008 280 / 0.4);
  --input: oklch(0.97 0.006 280);
  --ring: oklch(0.6 0.25 270 / 0.5);

  /* Chart colors très vibrantes */
  --chart-1: oklch(0.65 0.25 270);
  --chart-2: oklch(0.7 0.22 180);
  --chart-3: oklch(0.75 0.2 120);
  --chart-4: oklch(0.7 0.25 320);
  --chart-5: oklch(0.65 0.22 40);

  /* Success et Warning pour fintech */
  --success: oklch(0.68 0.2 150);
  --success-foreground: oklch(0.99 0 0);
  --warning: oklch(0.78 0.2 80);
  --warning-foreground: oklch(0.1 0.015 280);

  --radius: 1.25rem;

  /* Sidebar moderne avec glassmorphism très prononcé */
  --sidebar: oklch(1 0 0 / 0.5);
  --sidebar-foreground: oklch(0.2 0.015 280);
  --sidebar-primary: oklch(0.6 0.25 270);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: oklch(0.96 0.015 260);
  --sidebar-accent-foreground: oklch(0.25 0.015 280);
  --sidebar-border: oklch(0.9 0.008 280 / 0.3);
  --sidebar-ring: oklch(0.6 0.25 270 / 0.4);
}

.dark {
  /* Background sombre fintech avec dégradé vibrant */
  --background: oklch(0.1 0.015 280);
  --foreground: oklch(0.97 0.005 280);

  /* Cards avec effet glassmorphism sombre très prononcé */
  --card: oklch(0.15 0.015 280 / 0.5);
  --card-foreground: oklch(0.97 0.005 280);
  --card-hover: oklch(0.18 0.015 280 / 0.65);

  /* Popover avec backdrop blur très fort */
  --popover: oklch(0.15 0.015 280 / 0.95);
  --popover-foreground: oklch(0.97 0.005 280);

  /* Primary: Bleu/violet très brillant pour dark mode */
  --primary: oklch(0.72 0.28 270);
  --primary-foreground: oklch(0.1 0.015 280);
  --primary-gradient: linear-gradient(
    135deg,
    oklch(0.72 0.28 270) 0%,
    oklch(0.75 0.25 300) 50%,
    oklch(0.73 0.27 250) 100%
  );
  --primary-light: oklch(0.78 0.23 270);

  /* Secondary avec plus de contraste */
  --secondary: oklch(0.22 0.015 280);
  --secondary-foreground: oklch(0.95 0.005 280);

  /* Muted plus visible */
  --muted: oklch(0.22 0.015 280);
  --muted-foreground: oklch(0.7 0.012 280);

  /* Accent très vibrant */
  --accent: oklch(0.26 0.02 260);
  --accent-foreground: oklch(0.72 0.28 270);

  /* Destructive moderne */
  --destructive: oklch(0.68 0.27 25);
  --destructive-foreground: oklch(0.97 0 0);

  /* Bordures subtiles */
  --border: oklch(0.25 0.015 280 / 0.4);
  --input: oklch(0.22 0.015 280);
  --ring: oklch(0.72 0.28 270 / 0.6);

  /* Chart colors très vibrantes pour dark */
  --chart-1: oklch(0.75 0.27 270);
  --chart-2: oklch(0.8 0.25 180);
  --chart-3: oklch(0.85 0.23 120);
  --chart-4: oklch(0.8 0.27 320);
  --chart-5: oklch(0.75 0.25 40);

  /* Success et Warning pour fintech dark */
  --success: oklch(0.73 0.22 150);
  --success-foreground: oklch(0.1 0.015 280);
  --warning: oklch(0.8 0.22 80);
  --warning-foreground: oklch(0.1 0.015 280);

  /* Sidebar dark moderne avec glassmorphism très prononcé */
  --sidebar: oklch(0.12 0.015 280 / 0.5);
  --sidebar-foreground: oklch(0.95 0.005 280);
  --sidebar-primary: oklch(0.72 0.28 270);
  --sidebar-primary-foreground: oklch(0.1 0.015 280);
  --sidebar-accent: oklch(0.26 0.02 260);
  --sidebar-accent-foreground: oklch(0.95 0.005 280);
  --sidebar-border: oklch(0.25 0.015 280 / 0.3);
  --sidebar-ring: oklch(0.72 0.28 270 / 0.5);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    letter-spacing: -0.02em;
    font-weight: 700;
  }

  p {
    letter-spacing: -0.005em;
  }

  /* Animations fintech modernes et fluides */
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-in {
    from {
      opacity: 0;
      transform: translateX(-12px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes scale-in {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

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

  @keyframes gradient-shift {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Transitions globales désactivées */
  * {
    transition: none !important;
  }

  /* Désactiver COMPLÈTEMENT toutes les animations pour les popovers et selects - APPROCHE AGRESSIVE */
  [data-slot="popover-content"],
  [data-slot="select-content"],
  [data-slot="dropdown-menu-content"],
  [data-slot="popover-content"] *,
  [data-slot="select-content"] *,
  [data-slot="dropdown-menu-content"] *,
  [data-radix-popper-content-wrapper],
  [data-radix-select-content],
  [data-radix-dropdown-menu-content] {
    animation: none !important;
    transition: none !important;
    /* Ne pas toucher au transform car il est utilisé pour le positionnement */
    opacity: 1 !important;
    will-change: auto !important;
  }

  /* Désactiver TOUTES les classes Tailwind d'animation - sélecteurs ultra-spécifiques */
  [data-slot="popover-content"].animate-in,
  [data-slot="select-content"].animate-in,
  [data-slot="dropdown-menu-content"].animate-in,
  [data-slot="popover-content"].animate-out,
  [data-slot="select-content"].animate-out,
  [data-slot="dropdown-menu-content"].animate-out,
  [data-slot="popover-content"][class*="fade"],
  [data-slot="select-content"][class*="fade"],
  [data-slot="dropdown-menu-content"][class*="fade"],
  [data-slot="popover-content"][class*="zoom"],
  [data-slot="select-content"][class*="zoom"],
  [data-slot="dropdown-menu-content"][class*="zoom"],
  [data-slot="popover-content"][class*="slide"],
  [data-slot="select-content"][class*="slide"],
  [data-slot="dropdown-menu-content"][class*="slide"],
  [data-slot="popover-content"][class*="animate"],
  [data-slot="select-content"][class*="animate"],
  [data-slot="dropdown-menu-content"][class*="animate"] {
    animation: none !important;
    transition: none !important;
    /* Ne pas toucher au transform car il est utilisé pour le positionnement */
    opacity: 1 !important;
    will-change: auto !important;
  }

  /* Override pour tous les états data-state */
  [data-slot="popover-content"][data-state="open"],
  [data-slot="popover-content"][data-state="closed"],
  [data-slot="select-content"][data-state="open"],
  [data-slot="select-content"][data-state="closed"],
  [data-slot="dropdown-menu-content"][data-state="open"],
  [data-slot="dropdown-menu-content"][data-state="closed"] {
    animation: none !important;
    transition: none !important;
    /* Ne pas toucher au transform car il est utilisé pour le positionnement */
    opacity: 1 !important;
  }

  /* Glassmorphism effect très prononcé */
  .glass {
    background: var(--card);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid var(--border);
    box-shadow:
      0 8px 32px -8px color-mix(in srgb, var(--primary) 10%, transparent),
      inset 0 1px 0 0 color-mix(in srgb, white 20%, transparent);
  }

  /* Gradient text effect */
  .gradient-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
  }

  /* Card hover effect désactivé */
  .card-hover {
    position: relative;
  }

  .card-hover::before {
    display: none;
  }

  /* Background fintech moderne avec dégradés animés et formes abstraites */
  .page-background {
    position: relative;
    background: linear-gradient(
      135deg,
      oklch(0.98 0.01 280) 0%,
      oklch(0.97 0.012 270) 50%,
      oklch(0.98 0.01 290) 100%
    );
    overflow: hidden;
  }

  /* Fonds personnalisables */
  .page-background.bg-default {
    background: linear-gradient(
      135deg,
      oklch(0.98 0.01 280) 0%,
      oklch(0.97 0.012 270) 50%,
      oklch(0.98 0.01 290) 100%
    );
  }

  .page-background.bg-gradient-blue {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
  }

  .page-background.bg-gradient-purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 50%, #d8b4fe 100%);
  }

  .page-background.bg-gradient-green {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 50%, #86efac 100%);
  }

  .page-background.bg-gradient-orange {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
  }

  .page-background.bg-solid-light {
    background: #ffffff;
  }

  .page-background.bg-solid-dark {
    background: #0f172a !important;
  }

  .page-background.bg-custom-image {
    background-image: var(--custom-background-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  .page-background.bg-custom-image::before,
  .page-background.bg-solid-light::before,
  .page-background.bg-solid-dark::before {
    display: none;
  }

  .page-background::before {
    content: "";
    position: fixed;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    z-index: 0;
    background: 
      /* Formes abstraites circulaires */
      radial-gradient(
        circle 800px at 10% 20%,
        color-mix(in srgb, var(--primary) 15%, transparent) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle 600px at 90% 80%,
        color-mix(in srgb, var(--chart-2) 12%, transparent) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle 500px at 50% 50%,
        color-mix(in srgb, var(--chart-3) 10%, transparent) 0%,
        transparent 60%
      ),
      radial-gradient(
        circle 400px at 20% 70%,
        color-mix(in srgb, var(--chart-4) 8%, transparent) 0%,
        transparent 65%
      ),
      radial-gradient(
        circle 300px at 80% 30%,
        color-mix(in srgb, var(--primary-light) 6%, transparent) 0%,
        transparent 70%
      );
    background-size: 200% 200%;
    pointer-events: none;
    opacity: 1;
  }

  .dark .page-background.bg-default {
    background: linear-gradient(
      135deg,
      oklch(0.1 0.015 280) 0%,
      oklch(0.11 0.018 270) 50%,
      oklch(0.1 0.015 290) 100%
    );
  }

  .dark .page-background.bg-gradient-blue {
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0369a1 100%);
  }

  .dark .page-background.bg-gradient-purple {
    background: linear-gradient(135deg, #581c87 0%, #6b21a8 50%, #7c3aed 100%);
  }

  .dark .page-background.bg-gradient-green {
    background: linear-gradient(135deg, #14532d 0%, #166534 50%, #16a34a 100%);
  }

  .dark .page-background.bg-gradient-orange {
    background: linear-gradient(135deg, #7c2d12 0%, #9a3412 50%, #c2410c 100%);
  }

  .dark .page-background.bg-solid-light {
    background: #f8fafc;
  }

  .dark .page-background.bg-solid-dark {
    background: #0f172a !important;
  }

  .dark .page-background::before {
    background:
      radial-gradient(
        circle 800px at 10% 20%,
        color-mix(in srgb, var(--primary) 22%, transparent) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle 600px at 90% 80%,
        color-mix(in srgb, var(--chart-2) 18%, transparent) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle 500px at 50% 50%,
        color-mix(in srgb, var(--chart-3) 15%, transparent) 0%,
        transparent 60%
      ),
      radial-gradient(
        circle 400px at 20% 70%,
        color-mix(in srgb, var(--chart-4) 12%, transparent) 0%,
        transparent 65%
      ),
      radial-gradient(
        circle 300px at 80% 30%,
        color-mix(in srgb, var(--primary-light) 10%, transparent) 0%,
        transparent 70%
      );
    opacity: 1;
  }

  .page-content {
    position: relative;
    z-index: 1;
  }

  /* Fintech card styles avec effet glassmorphism prononcé */
  .fintech-card {
    background: color-mix(in srgb, var(--card) 70%, transparent);
    backdrop-filter: blur(60px) saturate(200%) brightness(1.05);
    -webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.05);
    border: none;
    border-radius: calc(var(--radius) + 0.25rem);
    box-shadow:
      0 2px 8px 0 color-mix(in srgb, var(--foreground) 6%, transparent),
      0 8px 24px -4px color-mix(in srgb, var(--primary) 8%, transparent),
      0 16px 48px -8px color-mix(in srgb, var(--foreground) 3%, transparent),
      inset 0 1px 0 0 color-mix(in srgb, white 40%, transparent),
      inset 0 -1px 0 0 color-mix(in srgb, var(--foreground) 2%, transparent);
    position: relative;
    overflow: hidden;
  }

  /* Texture subtile avec grain/noise */
  .fintech-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
      circle at 1px 1px,
      color-mix(in srgb, var(--foreground) 2%, transparent) 1px,
      transparent 0
    );
    background-size: 20px 20px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
  }

  .dark .fintech-card::before {
    background-image: radial-gradient(
      circle at 1px 1px,
      color-mix(in srgb, white 3%, transparent) 1px,
      transparent 0
    );
    opacity: 0.1;
  }

  /* Texture plus prononcée pour les cards de statistiques */
  .stat-card-textured::before {
    background-image:
      radial-gradient(
        circle at 1px 1px,
        color-mix(in srgb, var(--foreground) 3%, transparent) 1px,
        transparent 0
      ),
      radial-gradient(
        circle at 11px 11px,
        color-mix(in srgb, var(--foreground) 1.5%, transparent) 1px,
        transparent 0
      );
    background-size:
      16px 16px,
      24px 24px;
    opacity: 0.2;
    z-index: 1;
  }

  .dark .stat-card-textured::before {
    background-image:
      radial-gradient(
        circle at 1px 1px,
        color-mix(in srgb, white 4%, transparent) 1px,
        transparent 0
      ),
      radial-gradient(
        circle at 11px 11px,
        color-mix(in srgb, white 2%, transparent) 1px,
        transparent 0
      );
    opacity: 0.15;
  }

  /* Effet glass renforcé pour les cards de contenu */
  .fintech-card.card-hover {
    background: color-mix(in srgb, var(--card) 60%, transparent);
    backdrop-filter: blur(80px) saturate(220%) brightness(1.08);
    -webkit-backdrop-filter: blur(80px) saturate(220%) brightness(1.08);
  }

  .dark .fintech-card.card-hover {
    background: color-mix(in srgb, var(--card) 55%, transparent);
    backdrop-filter: blur(80px) saturate(220%) brightness(0.92);
    -webkit-backdrop-filter: blur(80px) saturate(220%) brightness(0.92);
  }

  .dark .fintech-card {
    background: color-mix(in srgb, var(--card) 65%, transparent);
    backdrop-filter: blur(60px) saturate(200%) brightness(0.95);
    -webkit-backdrop-filter: blur(60px) saturate(200%) brightness(0.95);
    border: none;
    box-shadow:
      0 2px 8px 0 color-mix(in srgb, var(--foreground) 12%, transparent),
      0 8px 24px -4px color-mix(in srgb, var(--primary) 12%, transparent),
      0 16px 48px -8px color-mix(in srgb, black 50%, transparent),
      inset 0 1px 0 0 color-mix(in srgb, white 12%, transparent),
      inset 0 -1px 0 0 color-mix(in srgb, var(--foreground) 4%, transparent);
  }

  .fintech-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, white 60%, transparent) 20%,
      color-mix(in srgb, white 80%, transparent) 50%,
      color-mix(in srgb, white 60%, transparent) 80%,
      transparent 100%
    );
    opacity: 0.7;
    z-index: 2;
  }

  .dark .fintech-card::after {
    opacity: 0.25;
    background: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, white 30%, transparent) 20%,
      color-mix(in srgb, white 40%, transparent) 50%,
      color-mix(in srgb, white 30%, transparent) 80%,
      transparent 100%
    );
  }

  /* Gradient backgrounds for stat cards - design moderne et subtil */
  .stat-card-gradient-1 {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary) 8%, var(--card)) 0%,
      color-mix(in srgb, var(--primary-light) 5%, var(--card)) 50%,
      color-mix(in srgb, var(--primary) 4%, var(--card)) 100%
    );
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
  }

  .stat-card-gradient-1::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -20%;
    width: 150%;
    height: 150%;
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--primary) 15%, transparent) 0%,
      transparent 60%
    );
    opacity: 0.4;
  }

  .dark .stat-card-gradient-1 {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary) 12%, var(--card)) 0%,
      color-mix(in srgb, var(--primary-light) 8%, var(--card)) 50%,
      color-mix(in srgb, var(--primary) 6%, var(--card)) 100%
    );
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
  }

  .dark .stat-card-gradient-1::before {
    opacity: 0.25;
  }

  .stat-card-gradient-2 {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--success) 8%, var(--card)) 0%,
      color-mix(in srgb, var(--success) 5%, var(--card)) 50%,
      color-mix(in srgb, var(--success) 4%, var(--card)) 100%
    );
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--success) 20%, var(--border));
  }

  .stat-card-gradient-2::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -20%;
    width: 150%;
    height: 150%;
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--success) 15%, transparent) 0%,
      transparent 60%
    );
    opacity: 0.4;
  }

  .dark .stat-card-gradient-2 {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--success) 12%, var(--card)) 0%,
      color-mix(in srgb, var(--success) 8%, var(--card)) 50%,
      color-mix(in srgb, var(--success) 6%, var(--card)) 100%
    );
    border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  }

  .dark .stat-card-gradient-2::before {
    opacity: 0.25;
  }

  .stat-card-gradient-3 {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--destructive) 8%, var(--card)) 0%,
      color-mix(in srgb, var(--destructive) 5%, var(--card)) 50%,
      color-mix(in srgb, var(--destructive) 4%, var(--card)) 100%
    );
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--destructive) 20%, var(--border));
  }

  .stat-card-gradient-3::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -20%;
    width: 150%;
    height: 150%;
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--destructive) 15%, transparent) 0%,
      transparent 60%
    );
    opacity: 0.4;
  }

  .dark .stat-card-gradient-3 {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--destructive) 12%, var(--card)) 0%,
      color-mix(in srgb, var(--destructive) 8%, var(--card)) 50%,
      color-mix(in srgb, var(--destructive) 6%, var(--card)) 100%
    );
    border-color: color-mix(in srgb, var(--destructive) 30%, var(--border));
  }

  .dark .stat-card-gradient-3::before {
    opacity: 0.25;
  }

  .stat-card-gradient-4 {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--chart-4) 8%, var(--card)) 0%,
      color-mix(in srgb, var(--chart-4) 5%, var(--card)) 50%,
      color-mix(in srgb, var(--chart-4) 4%, var(--card)) 100%
    );
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--chart-4) 20%, var(--border));
  }

  .stat-card-gradient-4::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -20%;
    width: 150%;
    height: 150%;
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--chart-4) 15%, transparent) 0%,
      transparent 60%
    );
    opacity: 0.4;
  }

  .dark .stat-card-gradient-4 {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--chart-4) 12%, var(--card)) 0%,
      color-mix(in srgb, var(--chart-4) 8%, var(--card)) 50%,
      color-mix(in srgb, var(--chart-4) 6%, var(--card)) 100%
    );
    border-color: color-mix(in srgb, var(--chart-4) 30%, var(--border));
  }

  .dark .stat-card-gradient-4::before {
    opacity: 0.25;
  }

  .stat-card-gradient-5 {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--chart-5) 8%, var(--card)) 0%,
      color-mix(in srgb, var(--chart-5) 5%, var(--card)) 50%,
      color-mix(in srgb, var(--chart-5) 4%, var(--card)) 100%
    );
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--chart-5) 20%, var(--border));
  }

  .stat-card-gradient-5::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -20%;
    width: 150%;
    height: 150%;
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--chart-5) 15%, transparent) 0%,
      transparent 60%
    );
    opacity: 0.4;
  }

  .dark .stat-card-gradient-5 {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--chart-5) 12%, var(--card)) 0%,
      color-mix(in srgb, var(--chart-5) 8%, var(--card)) 50%,
      color-mix(in srgb, var(--chart-5) 6%, var(--card)) 100%
    );
    border-color: color-mix(in srgb, var(--chart-5) 30%, var(--border));
  }

  .dark .stat-card-gradient-5::before {
    opacity: 0.25;
  }
}