/* Import dark mode overrides */
@import './dark-mode-overrides.css';

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

/* Preemptive fixes for dynamically generated styles */
@layer base {
  /* Reset for any dynamically generated classes */
  [class^="go"]:where(:not(html)),
  [class*=" go"]:where(:not(html)) {
    /* Ensure vendor prefixes come FIRST */
    -webkit-text-size-adjust: inherit;
    text-size-adjust: inherit;
  }
}

/* COMPLETE BROWSER COMPATIBILITY FIXES - CORRECT VENDOR PREFIX ORDER */
@layer base {
  /* Fix text-size-adjust - Vendor prefix FIRST for proper compatibility */
  html {
    -webkit-text-size-adjust: 100%; /* Vendor prefix FIRST */
    text-size-adjust: 100%; /* Standard property LAST */
  }
  
  /* Enhanced line-clamp utilities - VENDOR PREFIXES FIRST */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* Vendor prefix FIRST */
    line-clamp: 1; /* Standard property LAST */
  }
  
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Vendor prefix FIRST */
    line-clamp: 2; /* Standard property LAST */
  }
  
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Vendor prefix FIRST */
    line-clamp: 3; /* Standard property LAST */
  }
}

:root {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure proper scrolling behavior */
html {
  overflow-x: hidden;
  overflow-y: visible;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
}

#root {
  min-height: 100vh;
}

/* Enhanced compatibility fixes */

/* Mask properties - Vendor prefixes for Edge 79+ compatibility */
.mask-compatible {
  -webkit-mask-image: var(--mask-image); /* Edge 79+ support */
  mask-image: var(--mask-image); /* Standard property */
  -webkit-mask-position: var(--mask-position, center); /* Edge 79+ support */
  mask-position: var(--mask-position, center); /* Standard property */
  -webkit-mask-repeat: var(--mask-repeat, no-repeat); /* Edge 79+ support */
  mask-repeat: var(--mask-repeat, no-repeat); /* Standard property */
}

/* Line clamp compatibility for all browsers */
.line-clamp-fallback {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Field sizing and form element compatibility - ONLY for supporting browsers */
@supports (field-sizing: content) {
  input, textarea, select {
    field-sizing: content;
  }
}

/* Universal form element styling */
input, textarea, select {
  box-sizing: border-box;
  min-width: 0;
}

/* Background-clip - Vendor prefix FIRST for proper compatibility */
.bg-clip-text {
  -webkit-background-clip: text; /* Vendor prefix FIRST */
  background-clip: text; /* Standard property LAST */
}

/* Add additional browser support fixes */
* {
  box-sizing: border-box;
}

/* Global fixes for third-party libraries - Vendor prefix FIRST */
[class*="go"] {
  -webkit-background-clip: text !important; /* Vendor prefix FIRST */
  background-clip: text !important; /* Standard property LAST */
}

/* User-select compatibility for Safari */
.user-select-none {
  -webkit-user-select: none; /* Safari 3+ support */
  user-select: none; /* Standard property */
}

/* Performance optimized animations - avoid layout triggers */
@keyframes optimized-fade {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes optimized-slide {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==================== PROJECTHUB-MCP CUSTOM BRANDING ==================== */
@layer base {
  :root {
    --projecthub-orange: #ff6500;
    --projecthub-orange-dark: #cc5200;
    --projecthub-orange-light: #ff8533;
    --projecthub-black: #0a0a0a;
    --projecthub-gray-dark: #0a0a0a;
    --projecthub-gray: #1a1a1a;
    --projecthub-gray-light: #2a2a2a;
  }

  /* Override default body background */
  body {
    @apply bg-gray-50 dark:bg-black;
    background-image: 
      radial-gradient(circle at 20% 50%, rgba(255, 101, 0, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(255, 101, 0, 0.03) 0%, transparent 50%);
  }
}

@layer components {
  /* ProjectHub Header Gradient */
  .projecthub-header {
    background: linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    border-bottom: 3px solid #ff6500;
    box-shadow: 0 4px 12px rgba(255, 101, 0, 0.2);
  }

  /* ProjectHub Logo Styling */
  .projecthub-logo {
    background: linear-gradient(135deg, #0a0a0a 0%, #2a2a2a 100%);
    border: 2px solid rgba(255, 101, 0, 0.5);
    box-shadow: 
      0 0 20px rgba(255, 101, 0, 0.3),
      inset 0 0 10px rgba(255, 101, 0, 0.1);
  }

  /* Primary Button Styling */
  .projecthub-btn-primary {
    background: linear-gradient(135deg, #ff6500 0%, #cc5200 100%);
    border: 1px solid rgba(255, 101, 0, 0.3);
    box-shadow: 
      0 4px 15px rgba(255, 101, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }

  .projecthub-btn-primary:hover {
    background: linear-gradient(135deg, #ff8533 0%, #ff6500 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
      0 6px 20px rgba(255, 101, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  /* Navigation Link Styling */
  .projecthub-nav-link {
    position: relative;
    transition: all 0.3s ease;
  }

  .projecthub-nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff6500, transparent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .projecthub-nav-link:hover::after,
  .projecthub-nav-link.active::after {
    transform: scaleX(1);
  }

  /* Card Styling with Gradient Border */
  .projecthub-card {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.05) 0%, rgba(255, 101, 0, 0.05) 100%);
    border: 1px solid rgba(255, 101, 0, 0.2);
    position: relative;
    overflow: hidden;
  }

  .projecthub-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #ff6500, #cc5200, #ff6500);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: inherit;
  }

  .projecthub-card:hover::before {
    opacity: 0.3;
  }

  /* Loading Spinner with Branding */
  .projecthub-spinner {
    border: 4px solid rgba(255, 101, 0, 0.1);
    border-top-color: #ff6500;
    border-right-color: #ff6500;
  }

  /* Text Gradient Effect */
  .projecthub-text-gradient {
    background: linear-gradient(135deg, #0a0a0a 0%, #ff6500 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Badge Styling */
  .projecthub-badge {
    background: rgba(255, 101, 0, 0.1);
    border: 1px solid rgba(255, 101, 0, 0.3);
    color: #ff6500;
  }

  /* Dark Mode Specific Styles */
  .dark .projecthub-card {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.3) 0%, rgba(255, 101, 0, 0.1) 100%);
    border-color: rgba(255, 101, 0, 0.3);
  }

  .dark body {
    background-image: 
      radial-gradient(circle at 20% 50%, rgba(255, 101, 0, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(255, 101, 0, 0.05) 0%, transparent 50%);
  }
  
  /* Enhanced dark mode table styling */
  .dark table {
    background: transparent; /* Let table classes control the background */
  }
  
  /* Dark mode table header with orange theme */
  .dark thead {
    background: linear-gradient(90deg, #0a0a0a 0%, rgba(255, 101, 0, 0.15) 50%, #0a0a0a 100%) !important;
    border-bottom: 2px solid rgba(255, 101, 0, 0.3);
  }
  
  .dark tbody tr {
    border-color: rgba(255, 101, 0, 0.2);
  }
  
  .dark tbody tr:hover {
    background: rgba(255, 101, 0, 0.1);
    box-shadow: inset 0 0 20px rgba(255, 101, 0, 0.1);
  }
}

/* Animation Classes */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(255, 101, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 101, 0, 0.8);
  }
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

/* Override problematic third-party animations that trigger layout */
@keyframes go651618207 {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* Specific fixes for goober-generated styles */
[class*="go"]:not([class*="text"]) {
  /* Fix mask properties - vendor prefix FIRST */
  -webkit-mask-image: var(--tw-mask-image, none) !important;
  mask-image: var(--tw-mask-image, none) !important;
  -webkit-mask-position: var(--tw-mask-position, center) !important;
  mask-position: var(--tw-mask-position, center) !important;
  -webkit-mask-repeat: var(--tw-mask-repeat, no-repeat) !important;
  mask-repeat: var(--tw-mask-repeat, no-repeat) !important;
  -webkit-mask-size: var(--tw-mask-size, auto) !important;
  mask-size: var(--tw-mask-size, auto) !important;
}

/* Fix field-sizing warnings - use @supports for progressive enhancement */
@supports not (field-sizing: content) {
  /* Fallback for browsers that don't support field-sizing */
  input, textarea, select {
    width: 100%;
    box-sizing: border-box;
  }
  
  textarea {
    resize: vertical;
    min-height: 2.5rem;
  }
}
