/* Poppins font loaded via index.html */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. */

@layer base {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 217.2 32.6% 17.5%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 55%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 217.2 91.2% 59.8%;

    --radius: 0.75rem;

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 55%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  }
}

@layer components {
  /* Landing Page Inspired Design System */
  
  /* Primary Dark Buttons */
  .btn-primary {
    @apply relative inline-block px-6 py-3 font-light rounded-full transition-all duration-300 text-white;
    background: rgba(55, 65, 81, 0.8);
    border: 1px solid rgba(75, 85, 99, 0.5);
  }
  
  .btn-primary:hover {
    @apply shadow-lg;
    background: rgba(75, 85, 99, 0.9);
    border-color: rgba(107, 114, 128, 0.7);
  }
  
  .btn-primary:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  /* Account Button Style */
  .btn-account {
    @apply relative overflow-hidden px-4 py-2 text-base rounded-lg flex items-center gap-2 transition-all duration-300;
    position: relative;
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.56) 0%, rgba(40, 40, 60, 0.46) 100%),
              linear-gradient(120deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 32px 0 rgba(16, 16, 32, 0.18);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  .btn-account::before {
    content: '';
    position: absolute;
    inset: -36px;
    z-index: 0;
    pointer-events: none;
    border-radius: 0.5rem;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: radial-gradient(circle at 60% 40%, rgba(100, 150, 255, 0.13) 0%, rgba(59, 130, 246, 0.06) 60%, rgba(30, 80, 200, 0.03) 100%);
    filter: blur(44px);
  }

  .btn-account:hover::before,
  .btn-account:focus-within::before {
    opacity: 1;
  }

  .btn-account:hover {
    @apply scale-105;
    box-shadow: 0 4px 32px 0 rgba(16, 16, 32, 0.18), 0 0 20px rgba(59, 130, 246, 0.3);
  }

  .btn-account .btn-account-gradient {
    @apply absolute inset-0 bg-gradient-to-r from-blue-600 via-cyan-500 to-blue-600 opacity-30 blur-md pointer-events-none transition-all duration-300;
  }

  .btn-account:hover .btn-account-gradient {
    @apply opacity-50 blur-lg;
  }

  .btn-account .btn-account-text {
    @apply relative text-white flex items-center gap-2;
  }
  
  /* Secondary Dark Buttons */
  .btn-secondary {
    @apply relative inline-block px-6 py-3 font-light text-gray-300 rounded-full transition-all duration-300;
    background: rgba(31, 41, 55, 0.6);
    border: 1px solid rgba(55, 65, 81, 0.5);
  }
  
  .btn-secondary:hover {
    @apply text-white shadow-md;
    background: rgba(55, 65, 81, 0.8);
    border-color: rgba(75, 85, 99, 0.7);
  }
  
  .btn-secondary:disabled {
    @apply opacity-50 cursor-not-allowed;
  }
  
  /* Modern Card Enhancements - Dark Theme */
  .modern-card {
    @apply bg-gradient-to-br from-gray-900/50 to-gray-800/50 backdrop-blur-md border border-gray-700/40 shadow-2xl hover:shadow-gray-900/30 transition-all duration-300 rounded-2xl;
  }
  
  .modern-card-header {
    @apply bg-gradient-to-r from-gray-800/30 to-gray-700/30 border-b border-gray-600/30 relative overflow-hidden;
  }
  
  /* Animated Gradient Button */
.animated-gradient-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.animated-gradient {
  background: linear-gradient(270deg, #9333ea, #ec4899, #6366f1, #9333ea);
  background-size: 600% 600%;
  animation: animated-gradient-flow 3s linear infinite;
  opacity: 0.85;
}
@keyframes animated-gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Interactive Elements - Landing Page Style */
  .interactive-button {
    @apply transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] relative overflow-hidden font-light;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .interactive-button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  
  .interactive-button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  }
  
  .hover-lift {
    @apply transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-900/20;
  }
  
  .hover-glow {
    @apply transition-all duration-300 hover:drop-shadow-[0_0_20px_rgba(147,51,234,0.5)] hover:scale-[1.02];
  }
  
  /* Purple Theme Icon Hover */
  .icon-hover {
    @apply transition-colors duration-300 hover:text-purple-600;
  }
  
  /* Progress Bar Enhancements */
  .modern-progress {
    @apply bg-gradient-to-r from-primary/20 via-primary/40 to-primary/60 rounded-full relative overflow-hidden;
  }
  
  .modern-progress::after {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent translate-x-[-100%] transition-transform duration-1000;
  }
  
  .modern-progress:hover::after {
    @apply translate-x-[100%];
  }

  /* Glowing Purple Progress Bar */
  .glow-progress {
    animation: glow-pulse 2s ease-in-out infinite;
  }

  @keyframes glow-pulse {
    0%, 100% {
      box-shadow: 0 0 10px rgba(168, 85, 247, 0.6), 0 0 20px rgba(168, 85, 247, 0.4);
    }
    50% {
      box-shadow: 0 0 20px rgba(168, 85, 247, 0.8), 0 0 30px rgba(168, 85, 247, 0.6);
    }
  }
  
  /* Badge Enhancements - Purple Theme */
  .modern-badge {
    @apply border transition-all duration-300 hover:shadow-lg backdrop-blur-sm;
  }
  
  .modern-badge.colorless {
    @apply bg-white/5;
  }
  
  .modern-badge.colorless-darker {
    @apply bg-black/20;
  }
  
  /* Glassmorphism Effect - Landing Page Style */
  .glass-card {
    position: relative;
    @apply bg-gradient-to-br from-gray-900/70 to-gray-800/80 backdrop-blur-xl border border-gray-700/40 shadow-2xl relative overflow-hidden rounded-md p-1 md:p-2;
    box-shadow: 0 4px 32px 0 rgba(16, 16, 32, 0.18); /* persistent drop shadow only */
    background: linear-gradient(135deg, rgba(20,20,40,0.56) 0%, rgba(40,40,60,0.46) 100%),
              linear-gradient(120deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    transition: box-shadow 0.3s, background 0.3s;
  }

  /* Ultra slim card content */
  .card-content, .CardContent, .glass-card .card-content {
    @apply p-1 md:p-2;
  }
  
  /* Stats card - thinner variant */
  .stats-card {
    @apply glass-card p-1;
  }
  
  /* Blueish glass card for dropdown menu */
  .glass-card-blueish {
    position: relative;
    @apply backdrop-blur-xl border border-blue-500/20 shadow-2xl relative overflow-hidden rounded-md;
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.2) 0%, rgba(30, 60, 100, 0.15) 100%),
              linear-gradient(120deg, rgba(100, 150, 255, 0.03) 0%, rgba(59, 130, 246, 0.015) 100%);
    box-shadow: 0 4px 32px 0 rgba(16, 16, 32, 0.12);
    transition: box-shadow 0.3s, background 0.3s;
    /* Custom smooth animation */
    transform-origin: var(--radix-dropdown-menu-content-transform-origin);
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .glass-card-blueish::before {
    content: '';
    position: absolute;
    inset: -36px;
    z-index: 0;
    pointer-events: none;
    border-radius: 0.5rem;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1);
    background: radial-gradient(circle at 60% 40%, rgba(100, 150, 255, 0.08) 0%, rgba(59, 130, 246, 0.04) 60%, rgba(30, 80, 200, 0.02) 100%);
    filter: blur(44px);
  }
  
  .glass-card-blueish:hover::before,
  .glass-card-blueish:focus-within::before {
    opacity: 1;
  }
  
  /* Custom dropdown animation */
  @keyframes dropdownFadeIn {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(-10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  
  @keyframes dropdownFadeOut {
    from {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    to {
      opacity: 0;
      transform: scale(0.95) translateY(-10px);
    }
  }
  
  .dropdown-animate-in {
    animation: dropdownFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  .dropdown-animate-out {
    animation: dropdownFadeOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  
  .glass-card::before {
    content: '';
    position: absolute;
    inset: -36px;
    z-index: 0;
    pointer-events: none;
    border-radius: 1.5rem;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1);
    background: radial-gradient(circle at 60% 40%, rgba(255,255,255,0.13) 0%, rgba(147,51,234,0.06) 60%, rgba(59,130,246,0.03) 100%);
    filter: blur(44px);
  }
  .glass-card:hover::before,
  .glass-card:focus-within::before {
    opacity: 1;
  }

  @property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
  }

  .glass-card::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    inset: 0;
    border-radius: inherit; /* Use the same border-radius as the card */
    padding: 1px; /* The width of the border */
    background: conic-gradient(
        from var(--border-angle),
        rgba(170, 170, 170, 0.1),
        rgba(255, 255, 255, 0.25) 4%,
        rgba(170, 170, 170, 0.1) 12%
    );
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: --border-angle 0.4s ease-out;
    animation: border-spin 6s linear infinite;
    opacity: 0;
  }

  .glass-card:hover::after {
    opacity: 1;
  }

  @keyframes border-spin {
    to {
      --border-angle: 1turn;
    }
  }
}

  
  /* Animated Gradients - Purple Theme */
  .gradient-text {
    @apply bg-gradient-to-r from-purple-600 via-pink-500 to-purple-600 bg-clip-text text-transparent;
  }
  
  .gradient-text-elegant {
    @apply bg-gradient-to-r from-purple-600 via-pink-500 to-purple-400 bg-clip-text text-transparent transition-all duration-300 font-light;
    background-size: 200% 200%;
  }
  
  .gradient-text-elegant:hover {
    animation: gradientShift 2s ease infinite;
  }
  
  .gradient-text-animated {
    @apply bg-gradient-to-r from-purple-600 via-pink-500 to-purple-400 bg-clip-text text-transparent transition-all duration-300 font-light;
    background-size: 200% 200%;
  }
  
  .gradient-text-animated:hover {
    animation: gradientShift 2s ease infinite;
  }
  
  /* Focus States */
  .focus-ring {
    @apply focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-all duration-300;
  }
  
  /* Floating Animation - Only on hover */
  .float {
    @apply transition-transform duration-300;
  }
  
  .float:hover {
    animation: float 2s ease-in-out infinite;
  }
  
  .float-delay {
    @apply transition-transform duration-300;
  }
  
  .float-delay:hover {
    animation: float 2s ease-in-out infinite 0.5s;
  }
  
  /* Pulse - Only on hover */
  .pulse-on-hover:hover {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  /* Brand Font */
  .font-brand {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  }
  
  /* Spacing Utilities */
  .content-spacing {
    @apply space-y-12;
  }
  
  .section-spacing {
    @apply space-y-8;
  }
  
  /* Interactive Input */
  .input-magic {
    @apply transition-all duration-300 focus:scale-[1.02] focus:shadow-lg focus:shadow-primary/20;
  }
  
  /* Stagger Animation */
  .stagger-fade-in > * {
    @apply opacity-0 translate-y-4;
    animation: fadeInUp 0.6s ease-out forwards;
  }
  
  .stagger-fade-in > *:nth-child(1) { animation-delay: 0.1s; }
  .stagger-fade-in > *:nth-child(2) { animation-delay: 0.2s; }
  .stagger-fade-in > *:nth-child(3) { animation-delay: 0.3s; }
  .stagger-fade-in > *:nth-child(4) { animation-delay: 0.4s; }
  .stagger-fade-in > *:nth-child(5) { animation-delay: 0.5s; }

  /* Admin Privilege Disclaimer - Allow wrapping */
  .admin-privilege-disclaimer {
    @apply whitespace-normal;
  }

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

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

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Hide scrollbar everywhere while preserving scroll functionality */
::-webkit-scrollbar {
  display: none;
}

html, body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}