@tailwind base;
@tailwind components;
@tailwind utilities;

/* Component-specific styles with proper isolation */

/* Ensure Tailwind hidden class works properly */
[hidden],
.hidden {
  display: none !important;
}

/* Alert animations - scoped */
@keyframes alert-slide-in-top {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes alert-slide-in-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

[data-alert].animate-slide-in-top {
  animation: alert-slide-in-top 0.3s ease-out;
}

[data-alert].animate-slide-in-bottom {
  animation: alert-slide-in-bottom 0.3s ease-out;
}

/* Tab navigation scrollbar */
[role="tablist"]::-webkit-scrollbar {
  height: 4px;
}

[role="tablist"]::-webkit-scrollbar-track {
  background: transparent;
}

[role="tablist"]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

[role="tablist"]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Modal animations */
[data-controller="modal"][data-modal-target="modal"] {
  transition: opacity 0.3s ease-out;
}

[data-controller="modal"][data-modal-target="modal"] [data-modal-target="content"] {
  transition: all 0.3s ease-out;
}

[data-controller="modal"][data-modal-target="modal"]:not(.hidden) [data-modal-target="content"] {
  animation: modal-slide-in 0.3s ease-out;
}

@keyframes modal-slide-in {
  from {
    transform: scale(0.95) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Dropdown animations */
[data-dropdown-target="menu"] {
  transform-origin: top;
  transition: all 0.2s ease-out;
}

[data-dropdown-target="arrow"] {
  transition: transform 0.2s ease-out;
}

/* Code block styling */
pre code {
  display: block;
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
  line-height: 1.5;
}

/* Prevent style conflicts */
.alert-component {
  isolation: isolate;
}

/* Image Card improvements */
[data-image-card] img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Stats grid responsive */
@media (max-width: 768px) {
  [data-stats-grid] {
    grid-template-columns: 1fr !important;
  }
}

/* Glassmorphism Components */
@layer components {
  /* Glass card with backdrop blur effect */
  .glass-card {
    @apply bg-white/5 backdrop-blur-lg border border-white/10 rounded-xl shadow-2xl;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  }
  
  /* Glass button styles */
  .glass-button {
    @apply px-6 py-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-lg text-white font-medium transition-all duration-300 hover:bg-white/20 hover:border-white/30 hover:shadow-lg;
  }
  
  /* Glass input styles */
  .glass-input {
    @apply w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300;
  }
  
  /* Glass navigation */
  .glass-nav {
    @apply bg-black/30 backdrop-blur-md border-b border-white/10;
  }
  
  /* Purple gradient button */
  .btn-gradient {
    @apply bg-gradient-to-r from-purple-600 to-purple-700 text-white font-semibold rounded-lg hover:from-purple-700 hover:to-purple-800 transition-all duration-300 shadow-lg hover:shadow-xl;
  }
  
  /* Stats card glass effect */
  .stat-glass {
    @apply bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-md border border-white/10 rounded-xl p-6 hover:border-white/20 transition-all duration-300;
  }
  
  /* Table glass effect */
  .table-glass {
    @apply bg-white/5 backdrop-blur-sm rounded-lg overflow-hidden;
  }
  
  .table-glass thead {
    @apply bg-white/10 backdrop-blur-md;
  }
  
  .table-glass tbody tr {
    @apply border-b border-white/5 hover:bg-white/10 transition-colors duration-200;
  }
  
  /* Alert glass styles */
  .alert-glass {
    @apply bg-white/10 backdrop-blur-md border border-white/20 rounded-lg p-4;
  }
  
  .alert-glass.error {
    @apply bg-red-500/20 border-red-500/50 text-red-300;
  }
  
  .alert-glass.success {
    @apply bg-green-500/20 border-green-500/50 text-green-300;
  }
  
  .alert-glass.warning {
    @apply bg-yellow-500/20 border-yellow-500/50 text-yellow-300;
  }
  
  /* Badge glass styles */
  .badge-glass {
    @apply px-2 py-1 text-xs rounded-full backdrop-blur-sm;
  }
  
  .badge-glass.purple {
    @apply bg-purple-600/20 text-purple-400 border border-purple-600/30;
  }
  
  .badge-glass.green {
    @apply bg-green-600/20 text-green-400 border border-green-600/30;
  }
  
  .badge-glass.blue {
    @apply bg-blue-600/20 text-blue-400 border border-blue-600/30;
  }
  
  .badge-glass.red {
    @apply bg-red-600/20 text-red-400 border border-red-600/30;
  }
  
  .badge-glass.yellow {
    @apply bg-yellow-600/20 text-yellow-400 border border-yellow-600/30;
  }

  /* Header Component Styles */
  .header-container {
    @apply fixed top-0 left-0 right-0 bg-white border-b border-gray-200 z-[1000];
  }

  .header-wrapper {
    @apply max-w-full px-10;
  }

  .header-content {
    @apply flex items-center justify-between h-20;
  }

  .header-logo-group {
    @apply flex items-center gap-3;
  }

  .header-logo-icon {
    @apply w-8 h-8 relative;
  }

  .header-logo-text {
    @apply text-xl font-bold text-black no-underline;
    font-family: 'Inter', sans-serif;
  }

  .header-nav {
    @apply flex items-center;
  }

  .header-nav-link {
    @apply text-base text-gray-600 no-underline font-medium mx-5 transition-colors duration-200 hover:text-black;
  }

  .header-actions {
    @apply flex items-center gap-4;
  }

  .header-signin-link {
    @apply text-base text-gray-600 no-underline font-medium transition-colors duration-200 hover:text-black;
  }

  .header-getstarted-btn {
    @apply inline-flex items-center px-5 py-2.5 bg-black text-white text-base font-semibold rounded-lg no-underline transition-all duration-200 hover:bg-gray-800 hover:-translate-y-px;
  }

  /* Footer Component Styles */
  .footer-container {
    @apply relative w-full overflow-hidden mt-24;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-gradient-bg {
    @apply absolute inset-0 pointer-events-none;
  }

  .footer-gradient-top {
    @apply absolute w-96 h-96 rounded-full;
    top: -96px;
    right: -96px;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(236, 72, 153, 0.2));
    filter: blur(60px);
  }

  .footer-gradient-bottom {
    @apply absolute w-96 h-96 rounded-full;
    bottom: -96px;
    left: -96px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(6, 182, 212, 0.2));
    filter: blur(60px);
  }

  .footer-content {
    @apply relative z-10 max-w-7xl mx-auto px-4 py-16;
  }

  .footer-main-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12;
  }

  .footer-company-section {
    @apply flex flex-col gap-4;
  }

  .footer-company-header {
    @apply flex items-center gap-3;
  }

  .footer-company-logo {
    @apply w-10 h-10 rounded-xl flex items-center justify-center;
    background: linear-gradient(135deg, #9333ea, #ec4899);
  }

  .footer-company-logo-text {
    @apply text-white font-bold text-lg;
  }

  .footer-company-name {
    @apply text-xl font-bold text-white m-0;
  }

  .footer-company-desc {
    @apply text-gray-400 text-sm leading-relaxed m-0;
  }

  .footer-social-links {
    @apply flex gap-3;
  }

  .footer-social-link {
    @apply w-10 h-10 rounded-lg flex items-center justify-center no-underline transition-all duration-200;
    background: rgba(255, 255, 255, 0.1);
  }

  .footer-social-link:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .footer-social-icon {
    @apply w-5 h-5 fill-white;
  }

  .footer-links-section h4 {
    @apply text-white font-semibold mb-4 text-base;
  }

  .footer-links-list {
    @apply list-none p-0 m-0 flex flex-col gap-3;
  }

  .footer-link {
    @apply text-gray-400 text-sm no-underline transition-colors duration-200 hover:text-white;
  }

  .footer-newsletter-title {
    @apply text-white font-semibold mb-4 text-base;
  }

  .footer-newsletter-desc {
    @apply text-gray-400 text-sm mb-4 leading-relaxed;
  }

  .footer-newsletter-form {
    @apply flex flex-col gap-3;
  }

  .footer-newsletter-input {
    @apply w-full px-4 py-2.5 text-white text-sm outline-none transition-all duration-200 rounded-lg;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .footer-newsletter-input:focus {
    border-color: #9333ea;
  }

  .footer-newsletter-submit {
    @apply w-full px-4 py-2.5 text-white font-medium rounded-lg text-sm border-none cursor-pointer transition-all duration-200;
    background: linear-gradient(135deg, #9333ea, #ec4899);
  }

  .footer-newsletter-submit:hover {
    background: linear-gradient(135deg, #7c3aed, #db2777);
  }

  .footer-bottom {
    @apply pt-8;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-bottom-content {
    @apply flex flex-wrap justify-between items-center gap-4;
  }

  .footer-copyright {
    @apply text-gray-400 text-sm m-0;
  }

  .footer-bottom-links {
    @apply flex gap-6 flex-wrap;
  }

  .footer-bottom-link {
    @apply text-gray-400 text-sm no-underline transition-colors duration-200 hover:text-white;
  }

  /* Reveal Animation Styles */
  /* Smooth transitions for reveal animations */
  [data-reveal-target="element"] {
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  }
  
  /* Ensure smooth animations */
  .transition-all {
    transition-property: all;
  }
  
  .duration-700 {
    transition-duration: 700ms;
  }
  
  .duration-800 {
    transition-duration: 800ms;
  }
  
  .ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  /* Disable animations for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    [data-controller="reveal"] [data-reveal-target="element"] {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
      transition: none !important;
    }
  }
}