/* Performance-optimized CSS with Tailwind CSS */
@import "tailwindcss";

/* Critical CSS - Load first */
@layer base {
  * {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    line-height: 1.6;
    color: #f8fafc;
    background-color: #0f172a;
  }
}

/* Component optimizations */
@layer components {
  .btn-primary {
    background: linear-gradient(to right, #2563eb, #7c3aed);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
    transform: scale(1);
  }
  
  .btn-primary:hover {
    background: linear-gradient(to right, #1d4ed8, #6d28d9);
    transform: scale(1.05);
  }
  
  .btn-secondary {
    background: linear-gradient(to right, #ea580c, #eab308);
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
    transform: scale(1);
  }
  
  .btn-secondary:hover {
    background: linear-gradient(to right, #dc2626, #d97706);
    transform: scale(1.05);
  }
  
  .card-hover {
    transition: all 0.3s;
    border: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
  
  .card-hover:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
  }
  
  .gradient-text {
    background: linear-gradient(to right, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

/* Performance optimizations */
@layer utilities {
  .will-change-transform {
    will-change: transform;
  }
  
  .gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }
  
  .reduce-motion {
    @media (prefers-reduced-motion: reduce) {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* Critical animations - only load when needed */
@media (prefers-reduced-motion: no-preference) {
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.6s ease-out;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown z-index fixes */
@layer components {
  .select-content {
    z-index: 9999 !important;
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  }
  
  .select-trigger {
    position: relative;
    z-index: 10;
  }
  
  .select-dropdown {
    position: relative;
    z-index: 10;
  }
  
  /* Ensure dropdown items have proper background */
  .select-item {
    background-color: white !important;
  }
  
  .select-item:hover {
    background-color: #f3f4f6 !important;
  }
}

/* Fancy Navigation Animations */
@layer components {
  .nav-glow {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
  }
  
  .nav-link-hover {
    position: relative;
    overflow: hidden;
  }
  
  .nav-link-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }
  
  .nav-link-hover:hover::before {
    left: 100%;
  }
  
  .gradient-text-animated {
    background: linear-gradient(-45deg, #3b82f6, #8b5cf6, #06b6d4, #10b981);
    background-size: 400% 400%;
    animation: gradientShift 3s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Checkbox styling for dark theme */
  .checkbox-container {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
  }
  
  .checkbox-container:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
  }
  
  .checkbox-container[data-state="checked"] {
    background-color: rgba(59, 130, 246, 0.8) !important;
    border-color: rgba(59, 130, 246, 1) !important;
  }
  
  .checkbox-indicator {
    color: white !important;
  }

  /* Dropdown styling for dark theme */
  select {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    backdrop-filter: blur(8px) !important;
  }

  select option {
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: white !important;
    border: none !important;
  }

  select:focus {
    outline: none !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
  }

  /* Shadcn Select component styling */
  [data-radix-select-content] {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
  }

  [data-radix-select-item] {
    color: white !important;
    background-color: transparent !important;
  }

  [data-radix-select-item]:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  [data-radix-select-item][data-highlighted] {
    background-color: rgba(59, 130, 246, 0.2) !important;
  }

  [data-radix-select-trigger] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    backdrop-filter: blur(8px) !important;
  }

  [data-radix-select-trigger]:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
  }

  [data-radix-select-trigger]:focus {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
  }

  /* Additional dropdown styling for all pages */
  .select-dropdown {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(12px) !important;
  }

  .select-dropdown option {
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: white !important;
    padding: 8px 12px !important;
  }

  .select-dropdown option:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Force all select elements to use dark theme */
  select, select * {
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: white !important;
  }

  /* Override any light theme dropdowns */
  .dropdown-content, .dropdown-menu, .select-content {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(12px) !important;
  }

  .dropdown-item, .select-item {
    color: white !important;
    background-color: transparent !important;
  }

  .dropdown-item:hover, .select-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Universal dropdown styling for all pages */
  .SelectContent, .SelectViewport, .SelectItem {
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: white !important;
  }

  .SelectItem:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  .SelectTrigger {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    backdrop-filter: blur(8px) !important;
  }

  /* Additional universal selectors - only for dropdowns and selects */
  select[class*="select"], div[class*="dropdown"], div[class*="Select"] {
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: white !important;
  }

  select[class*="select"] option, div[class*="dropdown"] option {
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: white !important;
  }

  /* Force only select elements to use dark theme */
  select, option, datalist {
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }

  /* Override only dropdown-related light theme elements */
  select[style*="background-color: white"], select[style*="background: white"] {
    background-color: rgba(15, 23, 42, 0.95) !important;
  }

  select[style*="color: black"], select[style*="color: #000"] {
    color: white !important;
  }

  /* Page-specific dropdown fixes - only for select elements */
  .generator-page select,
  .image-prompt-page select,
  .ai-json-builder-page select {
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  /* Component-specific dropdown fixes - only for select elements */
  .AdvancedPromptSystem select,
  .ToolSelectionBoxes select,
  .ImagePromptPage select {
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: white !important;
  }

  /* Override any inline styles */
  select[style] {
    background-color: rgba(15, 23, 42, 0.95) !important;
    color: white !important;
  }

  /* Ensure dropdowns work on all screen sizes */
  @media (max-width: 768px) {
    select, option {
      background-color: rgba(15, 23, 42, 0.95) !important;
      color: white !important;
    }
  }

  /* Ensure labels are not affected by dropdown styling */
  label, .label, [class*="label"] {
    background-color: transparent !important;
    color: inherit !important;
  }
}

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

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

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}