@import "tailwindcss";
@import "tw-animate-css";

@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
}

@layer base {
  /* ========================================================================
     THEME: Purple (Default) - Vibrant purple with teal & pink accents
     ======================================================================== */
  :root,
  .theme-purple {
    --background: 270 50% 98%;
    --foreground: 270 50% 10%;
    --card: 0 0% 100%;
    --card-foreground: 270 50% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 270 50% 10%;
    --primary: 270 80% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 175 60% 45%;
    --secondary-foreground: 0 0% 100%;
    --muted: 270 30% 94%;
    --muted-foreground: 270 20% 45%;
    --accent: 330 80% 65%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 270 30% 88%;
    --input: 270 30% 88%;
    --ring: 270 80% 60%;
    --radius: 1rem;
    --theme-gradient: linear-gradient(135deg, hsl(270 80% 60%) 0%, hsl(330 85% 60%) 50%, hsl(175 70% 50%) 100%);
  }

  .dark.theme-purple,
  .dark:not([class*="theme-"]) {
    --background: 270 40% 8%;
    --foreground: 270 20% 95%;
    --card: 270 40% 12%;
    --card-foreground: 270 20% 95%;
    --popover: 270 40% 12%;
    --popover-foreground: 270 20% 95%;
    --primary: 270 80% 65%;
    --primary-foreground: 270 40% 8%;
    --secondary: 175 70% 50%;
    --secondary-foreground: 270 40% 8%;
    --muted: 270 30% 18%;
    --muted-foreground: 270 15% 65%;
    --accent: 330 85% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 270 30% 22%;
    --input: 270 30% 22%;
    --ring: 270 80% 65%;
  }

  /* ========================================================================
     THEME: Ocean - Deep blues with cyan accents
     ======================================================================== */
  .theme-ocean {
    --background: 210 50% 98%;
    --foreground: 210 50% 10%;
    --card: 0 0% 100%;
    --card-foreground: 210 50% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 210 50% 10%;
    --primary: 210 90% 55%;
    --primary-foreground: 0 0% 100%;
    --secondary: 185 80% 45%;
    --secondary-foreground: 0 0% 100%;
    --muted: 210 30% 94%;
    --muted-foreground: 210 20% 45%;
    --accent: 195 85% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 210 30% 88%;
    --input: 210 30% 88%;
    --ring: 210 90% 55%;
    --theme-gradient: linear-gradient(135deg, hsl(210 90% 55%) 0%, hsl(185 80% 45%) 50%, hsl(195 85% 50%) 100%);
  }

  .dark.theme-ocean {
    --background: 210 50% 6%;
    --foreground: 210 20% 95%;
    --card: 210 45% 10%;
    --card-foreground: 210 20% 95%;
    --popover: 210 45% 10%;
    --popover-foreground: 210 20% 95%;
    --primary: 210 85% 60%;
    --primary-foreground: 210 50% 6%;
    --secondary: 185 75% 50%;
    --secondary-foreground: 210 50% 6%;
    --muted: 210 35% 16%;
    --muted-foreground: 210 15% 65%;
    --accent: 195 80% 55%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 210 35% 20%;
    --input: 210 35% 20%;
    --ring: 210 85% 60%;
  }

  /* ========================================================================
     THEME: Sunset - Warm oranges and reds
     ======================================================================== */
  .theme-sunset {
    --background: 30 50% 98%;
    --foreground: 20 50% 10%;
    --card: 0 0% 100%;
    --card-foreground: 20 50% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 50% 10%;
    --primary: 25 95% 55%;
    --primary-foreground: 0 0% 100%;
    --secondary: 350 80% 55%;
    --secondary-foreground: 0 0% 100%;
    --muted: 30 30% 94%;
    --muted-foreground: 20 20% 45%;
    --accent: 45 90% 55%;
    --accent-foreground: 20 50% 10%;
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 30 30% 88%;
    --input: 30 30% 88%;
    --ring: 25 95% 55%;
    --theme-gradient: linear-gradient(135deg, hsl(25 95% 55%) 0%, hsl(350 80% 55%) 50%, hsl(45 90% 55%) 100%);
  }

  .dark.theme-sunset {
    --background: 20 40% 7%;
    --foreground: 30 20% 95%;
    --card: 20 40% 11%;
    --card-foreground: 30 20% 95%;
    --popover: 20 40% 11%;
    --popover-foreground: 30 20% 95%;
    --primary: 25 90% 58%;
    --primary-foreground: 20 40% 7%;
    --secondary: 350 75% 58%;
    --secondary-foreground: 0 0% 100%;
    --muted: 20 30% 16%;
    --muted-foreground: 30 15% 65%;
    --accent: 45 85% 58%;
    --accent-foreground: 20 50% 10%;
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 20 30% 20%;
    --input: 20 30% 20%;
    --ring: 25 90% 58%;
  }

  /* ========================================================================
     THEME: Forest - Earthy greens with warm accents
     ======================================================================== */
  .theme-forest {
    --background: 140 30% 97%;
    --foreground: 140 40% 10%;
    --card: 0 0% 100%;
    --card-foreground: 140 40% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 140 40% 10%;
    --primary: 145 70% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 85 55% 45%;
    --secondary-foreground: 0 0% 100%;
    --muted: 140 20% 93%;
    --muted-foreground: 140 15% 40%;
    --accent: 35 80% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 140 20% 87%;
    --input: 140 20% 87%;
    --ring: 145 70% 40%;
    --theme-gradient: linear-gradient(135deg, hsl(145 70% 40%) 0%, hsl(85 55% 45%) 50%, hsl(35 80% 50%) 100%);
  }

  .dark.theme-forest {
    --background: 140 35% 7%;
    --foreground: 140 15% 95%;
    --card: 140 35% 11%;
    --card-foreground: 140 15% 95%;
    --popover: 140 35% 11%;
    --popover-foreground: 140 15% 95%;
    --primary: 145 65% 45%;
    --primary-foreground: 140 35% 7%;
    --secondary: 85 50% 50%;
    --secondary-foreground: 140 35% 7%;
    --muted: 140 25% 16%;
    --muted-foreground: 140 10% 65%;
    --accent: 35 75% 55%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 140 25% 20%;
    --input: 140 25% 20%;
    --ring: 145 65% 45%;
  }

  /* ========================================================================
     THEME: Rose - Soft pinks with elegant accents
     ======================================================================== */
  .theme-rose {
    --background: 350 50% 98%;
    --foreground: 350 40% 10%;
    --card: 0 0% 100%;
    --card-foreground: 350 40% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 350 40% 10%;
    --primary: 350 80% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 320 70% 55%;
    --secondary-foreground: 0 0% 100%;
    --muted: 350 25% 94%;
    --muted-foreground: 350 20% 45%;
    --accent: 15 85% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 350 25% 88%;
    --input: 350 25% 88%;
    --ring: 350 80% 60%;
    --theme-gradient: linear-gradient(135deg, hsl(350 80% 60%) 0%, hsl(320 70% 55%) 50%, hsl(15 85% 60%) 100%);
  }

  .dark.theme-rose {
    --background: 350 35% 7%;
    --foreground: 350 15% 95%;
    --card: 350 35% 11%;
    --card-foreground: 350 15% 95%;
    --popover: 350 35% 11%;
    --popover-foreground: 350 15% 95%;
    --primary: 350 75% 62%;
    --primary-foreground: 350 35% 7%;
    --secondary: 320 65% 58%;
    --secondary-foreground: 0 0% 100%;
    --muted: 350 25% 16%;
    --muted-foreground: 350 12% 65%;
    --accent: 15 80% 62%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 350 25% 20%;
    --input: 350 25% 20%;
    --ring: 350 75% 62%;
  }

  /* ========================================================================
     THEME: Slate - Minimal and professional
     ======================================================================== */
  .theme-slate {
    --background: 0 0% 98%;
    --foreground: 220 15% 15%;
    --card: 0 0% 100%;
    --card-foreground: 220 15% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 15% 15%;
    --primary: 220 15% 25%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 10% 50%;
    --secondary-foreground: 0 0% 100%;
    --muted: 220 10% 94%;
    --muted-foreground: 220 10% 45%;
    --accent: 220 15% 35%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 10% 88%;
    --input: 220 10% 88%;
    --ring: 220 15% 25%;
    --theme-gradient: linear-gradient(135deg, hsl(220 15% 25%) 0%, hsl(220 10% 50%) 50%, hsl(220 15% 35%) 100%);
  }

  .dark.theme-slate {
    --background: 220 20% 6%;
    --foreground: 220 10% 95%;
    --card: 220 18% 10%;
    --card-foreground: 220 10% 95%;
    --popover: 220 18% 10%;
    --popover-foreground: 220 10% 95%;
    --primary: 220 12% 70%;
    --primary-foreground: 220 20% 6%;
    --secondary: 220 10% 55%;
    --secondary-foreground: 0 0% 100%;
    --muted: 220 15% 15%;
    --muted-foreground: 220 8% 60%;
    --accent: 220 12% 45%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 70% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 15% 18%;
    --input: 220 15% 18%;
    --ring: 220 12% 70%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 1400px;
    width: 100%;
  }
}

/* Animated gradient background - uses theme gradient */
.gradient-bg {
  background: linear-gradient(
    135deg,
    hsl(var(--primary) / 0.08) 0%,
    hsl(var(--secondary) / 0.08) 50%,
    hsl(var(--accent) / 0.08) 100%
  );
  animation: gradient-shift 8s ease infinite;
  background-size: 200% 200%;
}

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

/* Card hover effects */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  box-shadow: 0 20px 40px -12px hsl(var(--primary) / 0.25);
}

/* Glassmorphism card */
.glass-card {
  background: hsl(var(--card) / 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--border) / 0.5);
}

/* Gradient text - uses theme colors */
.gradient-text {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 50%, hsl(var(--secondary)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow effects - use theme primary */
.glow-primary {
  box-shadow: 0 0 20px hsl(var(--primary) / 0.3), 0 0 40px hsl(var(--primary) / 0.1);
}

.glow-secondary {
  box-shadow: 0 0 20px hsl(var(--secondary) / 0.3), 0 0 40px hsl(var(--secondary) / 0.1);
}

.glow-accent {
  box-shadow: 0 0 20px hsl(var(--accent) / 0.3), 0 0 40px hsl(var(--accent) / 0.1);
}

/* Item row hover */
.item-row {
  transition: all 0.2s ease;
}

.item-row:hover {
  background: hsl(var(--muted) / 0.8);
}

/* Status badges */
.badge-success {
  background: linear-gradient(135deg, hsl(160 80% 40% / 0.2) 0%, hsl(175 70% 50% / 0.2) 100%);
  color: hsl(160 80% 40%);
  border: 1px solid hsl(160 80% 40% / 0.3);
}

.dark .badge-success {
  background: linear-gradient(135deg, hsl(160 70% 45% / 0.2) 0%, hsl(175 70% 50% / 0.2) 100%);
  color: hsl(160 70% 65%);
}

.badge-warning {
  background: linear-gradient(135deg, hsl(45 90% 50% / 0.2) 0%, hsl(35 90% 55% / 0.2) 100%);
  color: hsl(35 90% 40%);
  border: 1px solid hsl(45 90% 50% / 0.3);
}

.dark .badge-warning {
  background: linear-gradient(135deg, hsl(45 90% 50% / 0.2) 0%, hsl(35 90% 55% / 0.2) 100%);
  color: hsl(45 90% 65%);
}

/* Pulse animation for loader */
.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px hsl(var(--primary) / 0.5)); }
  50% { opacity: 0.7; filter: drop-shadow(0 0 16px hsl(var(--primary) / 0.8)); }
}

/* Theme picker swatch */
.theme-swatch {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
}

.theme-swatch:hover {
  transform: scale(1.1);
}

.theme-swatch.active {
  border-color: hsl(var(--foreground));
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--foreground) / 0.3);
}

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); }
  to { height: 0; }
}