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

/* Safe Area Support for iOS and Android */
:root {
  /* Safe area insets for notched devices */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  
  /* Mobile-optimized spacing */
  --mobile-header-height: 56px;
  --mobile-bottom-nav-height: 72px;
  --desktop-header-height: 64px;
  
  /* Touch target sizes */
  --touch-target-min: 48px;
  --touch-target-comfortable: 56px;
  --touch-target-large: 64px;
}

@layer base {
  /* Prevent pull-to-refresh on iOS */
  body {
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Better text rendering on mobile */
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  /* Disable tap highlight on mobile */
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

@layer base {
  body {
    @apply bg-white text-gray-900 antialiased;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-serif;
    line-height: 1.2;
  }
  
  /* Mobile-first responsive typography */
  .display-1 {
    @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .display-2 {
    @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .display-3 {
    @apply text-lg sm:text-xl md:text-2xl lg:text-3xl;
    font-weight: 600;
    line-height: 1.3;
  }
  
  p {
    line-height: 1.6;
  }
  
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
  
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground;
  }
}

@layer components {
  /* Modern button styles with touch-friendly sizing */
  /* Mobile-optimized primary button */
  .btn-primary {
    @apply bg-gray-900 text-white px-4 py-3 sm:px-6 sm:py-2.5 rounded-lg hover:bg-gray-800 
           active:scale-95 transition-all duration-200 font-semibold text-sm sm:text-base
           shadow-sm hover:shadow-md;
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }

  /* Mobile-optimized secondary button */
  .btn-secondary {
    @apply bg-white border-2 border-gray-300 text-gray-700 px-4 py-3 sm:px-6 sm:py-2.5
           rounded-lg hover:bg-gray-50 active:scale-95 transition-all duration-200 
           font-semibold text-sm sm:text-base shadow-sm;
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }
  
  .btn-ghost {
    @apply bg-transparent text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-100 
           active:scale-95 transition-all duration-200 min-h-[44px] sm:min-h-[40px];
  }

  .card {
    @apply bg-white rounded-xl sm:rounded-lg shadow-sm border border-gray-200 
           p-4 sm:p-6 transition-shadow hover:shadow-md;
  }
  
  /* Touch-friendly interactive elements */
  .touch-target {
    @apply min-h-[44px] min-w-[44px] flex items-center justify-center;
  }
  
  /* Container with safe padding */
    /* Mobile-optimized container */
  .container-responsive {
    @apply px-3 sm:px-4 md:px-6 lg:px-8 mx-auto max-w-7xl;
  }
  
  /* Safe area utilities */
  .safe-top {
    padding-top: var(--safe-area-inset-top);
  }
  
  .safe-bottom {
    padding-bottom: var(--safe-area-inset-bottom);
  }
  
  /* Enhanced focus ring styles for accessibility (WCAG AA) */
  .focus-ring-strong {
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400;
  }
  
  /* Improved button states with better contrast */
  .btn-primary-enhanced {
    @apply bg-blue-600 text-white font-semibold px-6 py-4 sm:px-5 sm:py-3 rounded-xl sm:rounded-lg transition-all shadow-lg hover:bg-blue-700 hover:shadow-xl active:bg-blue-800 active:scale-98 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed disabled:grayscale min-h-[56px] sm:min-h-[48px];
  }
  
  .btn-secondary-enhanced {
    @apply bg-white text-gray-900 font-semibold px-6 py-4 sm:px-5 sm:py-3 border-3 border-gray-300 rounded-xl sm:rounded-lg transition-all shadow-md hover:bg-gray-50 hover:shadow-lg hover:border-gray-400 active:bg-gray-100 active:scale-98 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed disabled:grayscale min-h-[56px] sm:min-h-[48px];
  }
  
  /* Enhanced input focus states for better visibility */
  input:not([type="checkbox"]):not([type="radio"]):focus,
  select:focus,
  textarea:focus {
    @apply ring-2 ring-purple-400 ring-offset-2 border-purple-500 outline-none;
  }
  
  /* Better disabled state visibility */
  input:disabled,
  select:disabled,
  textarea:disabled {
    @apply bg-gray-100 text-gray-600 border-gray-400 cursor-not-allowed opacity-70;
  }
  
  button:disabled {
    @apply opacity-60 cursor-not-allowed;
  }
  
  /* Improved scrollbar for better UX */
  .scrollbar-enhanced::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  
  .scrollbar-enhanced::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
  }
  
  .scrollbar-enhanced::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full hover:bg-gray-500 active:bg-gray-600;
  }
  
  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .btn-primary-enhanced {
      @apply border-3 border-blue-900;
    }
    
    .btn-secondary-enhanced {
      @apply border-3 border-gray-900;
    }
  }

  /* Shimmer animation for skeleton loaders */
  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }

  .animate-shimmer {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(
      to right,
      #e5e7eb 0%,
      #f3f4f6 20%,
      #e5e7eb 40%,
      #e5e7eb 100%
    );
    background-size: 1000px 100%;
  }

  /* Fade in animation */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fadeIn 0.4s ease-out forwards;
  }

  .safe-left {
    padding-left: var(--safe-area-inset-left);
  }
  
  .safe-right {
    padding-right: var(--safe-area-inset-right);
  }
  
  /* Touch target utilities */
  .touch-target {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }
  
  .touch-target-comfortable {
    min-height: var(--touch-target-comfortable);
    min-width: var(--touch-target-comfortable);
  }
  
  .touch-target-large {
    min-height: var(--touch-target-large);
    min-width: var(--touch-target-large);
  }
  
  /* Responsive spacing utilities */
  .section-padding {
    @apply py-12 sm:py-16 md:py-20 lg:py-24;
  }
  
  .section-gap {
    @apply space-y-6 sm:space-y-8 md:space-y-10;
  }
  
  /* Header offset utilities for fixed header layout */
  .header-offset {
    padding-top: calc(var(--mobile-header-height) + 16px);
  }
  
  .header-offset-sm {
    @apply sm:pt-20 md:pt-24;
  }
  
  .header-offset-full {
    padding-top: calc(var(--mobile-header-height) + 16px);
    @apply sm:pt-20 md:pt-24 lg:pt-28;
  }
}

/* Enhanced animations with smooth easing */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes zoom-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.animate-zoom-in {
  animation: zoom-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-slide-up {
  animation: slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.animate-slide-in-right {
  animation: slide-in-right 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 5px rgba(124, 58, 237, 0.2);
  }
}
.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Modern custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.7);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

/* Fix for React Image Crop */
.react-crop__drag-handle {
  @apply bg-gray-900;
}

/* Mobile-first responsive enhancements */
@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
  
  /* Prevent text selection on touch devices for better UX */
  button, .btn-primary, .btn-secondary {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  
  /* Improve touch scrolling */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
  .safe-container {
    @apply px-6;
  }
}

/* Ensure full height for flex layouts */
html, body, #root {
  height: 100%;
  overflow-x: hidden;
}

/* Fix for fixed header overlap */
body {
  padding-top: 0 !important;
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
    position: relative;
  }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* Improve contrast for better accessibility */
@media (prefers-contrast: high) {
  .btn-primary {
    @apply border-2 border-white;
  }
  
  .btn-secondary {
    @apply border-2 border-gray-900;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Enhanced Mobile Device Optimizations */
@layer utilities {
  /* iPhone and Samsung specific optimizations */
  .mobile-optimized {
    /* Enhanced touch scrolling */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    
    /* Better text rendering on mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    
    /* Prevent accidental zoom on inputs */
    font-size: 16px;
  }
  
  /* Mobile keyboard optimizations */
  .mobile-input {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px 16px;
    border-radius: 12px;
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Better mobile button states */
  .mobile-button {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Enhanced safe area utilities for notched devices */
  .safe-area-top {
    padding-top: max(env(safe-area-inset-top), 16px);
  }
  
  .safe-area-bottom {
    padding-bottom: max(env(safe-area-inset-bottom), 16px);
  }
  
  .safe-area-left {
    padding-left: max(env(safe-area-inset-left), 16px);
  }
  
  .safe-area-right {
    padding-right: max(env(safe-area-inset-right), 16px);
  }
  
  .safe-area-full {
    padding-top: max(env(safe-area-inset-top), 16px);
    padding-bottom: max(env(safe-area-inset-bottom), 16px);
    padding-left: max(env(safe-area-inset-left), 16px);
    padding-right: max(env(safe-area-inset-right), 16px);
  }
  
  /* Mobile container with proper spacing */
  .mobile-container {
    @apply px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16;
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Responsive text sizes optimized for mobile readability */
  .text-mobile-xs { font-size: 12px; line-height: 1.4; }
  .text-mobile-sm { font-size: 14px; line-height: 1.4; }
  .text-mobile-base { font-size: 16px; line-height: 1.5; }
  .text-mobile-lg { font-size: 18px; line-height: 1.5; }
  .text-mobile-xl { font-size: 20px; line-height: 1.4; }
  .text-mobile-2xl { font-size: 24px; line-height: 1.3; }
  .text-mobile-3xl { font-size: 28px; line-height: 1.2; }
  
  /* Better mobile spacing utilities */
  .mobile-section { @apply py-8 sm:py-12 md:py-16 lg:py-20; }
  .mobile-gap { @apply space-y-4 sm:space-y-6 md:space-y-8; }
  
  /* Mobile image optimization */
  .mobile-image {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
  }
  
  /* Enhanced focus states for mobile accessibility */
  .mobile-focus:focus {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
    border-radius: 8px;
  }
  
  /* Mobile card styling */
  .mobile-card {
    @apply bg-white rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-6;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* Optimized for touch gestures */
  .touch-gesture {
    touch-action: pan-x pan-y;
    -webkit-user-select: none;
    user-select: none;
  }
  
  /* Better mobile modal/sheet animations */
  .mobile-sheet-enter {
    transform: translateY(100%);
    opacity: 0;
  }
  
  .mobile-sheet-enter-active {
    transform: translateY(0);
    opacity: 1;
    transition: transform 300ms ease-out, opacity 300ms ease-out;
  }
  
  .mobile-sheet-exit {
    transform: translateY(0);
    opacity: 1;
  }
  
  .mobile-sheet-exit-active {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 250ms ease-in, opacity 250ms ease-in;
  }
}

/* Device-specific optimizations */
@media screen and (max-width: 428px) {
  /* iPhone Pro Max and similar large phones */
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media screen and (max-width: 390px) {
  /* iPhone 12/13/14 standard */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media screen and (max-width: 375px) {
  /* iPhone SE and smaller devices */
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  .text-sm { font-size: 13px; }
  .text-base { font-size: 15px; }
}

/* Samsung specific optimizations */
@media screen and (min-width: 360px) and (max-width: 414px) {
  /* Samsung Galaxy standard sizes */
  .samsung-optimized {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* Landscape orientation optimizations */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .landscape-mobile {
    height: 100vh;
    overflow-y: auto;
  }
  
  .landscape-mobile .mobile-section {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}