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

/* Import Magic Bubbles XPS custom colors and components (keeps magic_bubbles_* file/vars) */
@import 'magic_bubbles_colors.css';

/* Base styles */
@layer base {
  html {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  }
  
  body {
    @apply bg-gray-50 text-gray-900 antialiased;
  }
  
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-gray-100;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }
}

/* Component layer for reusable components */
@layer components {
  /* Authentication Layout Specific Styles */
  .auth-container {
    @apply min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8;
  }
  
  .auth-card {
    @apply max-w-md w-full space-y-8 bg-white p-8 rounded-xl shadow-lg border border-gray-200;
  }
  
  .auth-header {
    @apply text-center;
  }
  
  .auth-title {
    @apply text-3xl font-bold text-gray-900 mb-2;
  }
  
  .auth-subtitle {
    @apply text-gray-600 text-sm;
  }
  
  /* Form Components */
  .form-group {
    @apply space-y-2;
  }
  
  .form-field {
    @apply relative;
  }
  
  .form-icon {
    @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5;
  }
  
  /* Button Variants */
  .btn-lg {
    @apply px-8 py-4 text-lg;
  }
  
  .btn-sm {
    @apply px-4 py-2 text-sm;
  }
  
  .btn-xs {
    @apply px-3 py-1 text-xs;
  }
  
  /* Link Styles */
  .link-primary {
    @apply text-primary hover:text-primary-600 font-medium transition-colors duration-200;
  }
  
  .link-secondary {
    @apply text-secondary hover:text-secondary-600 font-medium transition-colors duration-200;
  }
  
  /* Loading States */
  .loading {
    @apply opacity-50 pointer-events-none;
  }
  
  .spinner {
    @apply animate-spin rounded-full h-4 w-4 border-b-2 border-primary;
  }
  
  /* Focus States */
  .focus-ring {
    @apply focus:ring-4 focus:ring-primary-200 focus:ring-opacity-50 focus:outline-none;
  }
  
  /* Pagy Pagination Styles */
  .pagy-nav {
    @apply isolate inline-flex -space-x-px rounded-md shadow-sm;
  }
  
  .pagy-nav a,
  .pagy-nav span {
    @apply relative inline-flex items-center px-4 py-2 text-sm font-medium transition-all duration-200;
  }
  
  /* Regular page links */
  .pagy-nav a {
    @apply text-gray-500 bg-white border border-stroke hover:bg-gray-50 hover:text-primary focus:z-20 focus:outline-offset-0;
  }
  
  /* Current page */
  .pagy-nav span.current {
    @apply relative z-10 text-white bg-primary border border-primary;
  }
  
  /* Disabled/gap elements */
  .pagy-nav span.gap {
    @apply text-gray-400 bg-white border border-stroke cursor-default;
  }
  
  /* First and last page buttons */
  .pagy-nav a:first-child {
    @apply rounded-l-md;
  }
  
  .pagy-nav a:last-child {
    @apply rounded-r-md;
  }
  
  .pagy-nav span:first-child {
    @apply rounded-l-md;
  }
  
  .pagy-nav span:last-child {
    @apply rounded-r-md;
  }
  
  /* Hover effects for better UX */
  .pagy-nav a:hover {
    @apply shadow-sm transform scale-105;
  }
  
  /* Active state styling */
  .pagy-nav span.current {
    @apply shadow-md;
  }

  /* Toast Notifications */
  .toast-notification {
    @apply transform transition-all duration-500 ease-in-out;
  }

  .toast-notification.entering {
    @apply translate-x-full opacity-0;
  }

  .toast-notification.entered {
    @apply translate-x-0 opacity-100;
  }

  .toast-notification.exiting {
    @apply translate-x-full opacity-0;
  }

  /* Toast container positioning */
  #toast-container {
    @apply pointer-events-none fixed inset-0 flex items-end px-4 py-6;
  }

  @media (min-width: 640px) {
    #toast-container {
      @apply items-start p-6;
    }
  }

  /* Toast animations */
  @keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes slideOutRight {
    from {
      transform: translateX(0);
      opacity: 1;
    }
    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  .toast-slide-in {
    animation: slideInRight 0.3s ease-out forwards;
  }

  .toast-slide-out {
    animation: slideOutRight 0.3s ease-in forwards;
  }
}

/* Utility layer for custom utilities */
@layer utilities {
  /* Text utilities */
  .text-balance {
    text-wrap: balance;
  }
  
  /* Layout utilities */
  .container-fluid {
    @apply w-full px-4 mx-auto;
  }
  
  /* Animation utilities */
  .transition-base {
    @apply transition-all duration-200 ease-in-out;
  }
  
  .transition-fast {
    @apply transition-all duration-150 ease-in-out;
  }
  
  .transition-slow {
    @apply transition-all duration-300 ease-in-out;
  }
  
  /* Shadow utilities */
  .shadow-soft {
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
  }
  
  .shadow-strong {
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  
  /* Gradient utilities */
  .gradient-primary {
    background: linear-gradient(135deg, var(--magic_bubbles-primary) 0%, var(--magic_bubbles-primary-dark) 100%);
  }
  
  .gradient-secondary {
    background: linear-gradient(135deg, var(--magic_bubbles-secondary) 0%, var(--magic_bubbles-secondary-dark) 100%);
  }
  
  /* Border utilities */
  .border-dashed-primary {
    border: 2px dashed var(--magic_bubbles-primary);
  }
  
  /* Responsive text utilities */
  .text-responsive {
    @apply text-sm sm:text-base lg:text-lg;
  }
  
  .text-responsive-lg {
    @apply text-lg sm:text-xl lg:text-2xl;
  }
}

/* Print styles */
@media print {
  @page {
    margin: 1in;
  }
  
  .print-break {
    page-break-after: always;
  }
  
  .print-avoid-break {
    page-break-inside: avoid;
  }
}