/* Touch-friendly interactions and animations */

/* Smooth scrolling for better mobile experience */
html {
  scroll-behavior: smooth;
}

/* Touch feedback states */
.touch-pressed {
  @apply bg-opacity-90;
}

/* Better touch targets */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Card hover and interaction states */
.card-interactive {
  @apply transform transition-all duration-200 cursor-pointer;
}

.card-interactive:hover {
  @apply shadow-lg -translate-y-1;
}

.card-interactive:active {
  @apply scale-95;
}

/* Gradient animations */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-animate {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

/* Pull to refresh indicator */
.pull-to-refresh {
  @apply fixed top-20 left-1/2 transform -translate-x-1/2 bg-emerald-500 text-white px-4 py-2 rounded-full text-sm font-medium z-50 transition-all duration-300;
}

/* Swipe indicator */
.swipe-indicator {
  @apply absolute top-1/2 transform -translate-y-1/2 opacity-0 transition-opacity duration-200;
}

.swipe-indicator.show {
  @apply opacity-100;
}

/* Modern loading states */
.loading-shimmer {
  @apply animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-size-200 bg-pos-0;
  animation: shimmer 1.5s infinite;
}

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

/* Glass morphism effects */
.glass {
  @apply bg-white bg-opacity-20 backdrop-blur-sm border border-white border-opacity-30;
}

.glass-dark {
  @apply bg-gray-900 bg-opacity-20 backdrop-blur-sm border border-gray-700 border-opacity-30;
}

/* Safe area handling for iOS */
.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-left {
  padding-left: env(safe-area-inset-left);
}

.safe-area-right {
  padding-right: env(safe-area-inset-right);
}

/* Custom scrollbars for webkit browsers */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
}

/* Focus styles for accessibility */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2;
}

/* Modern button styles */
.btn-primary {
  @apply bg-gradient-to-r from-emerald-500 to-emerald-600 text-white px-6 py-3 rounded-2xl font-semibold shadow-sm hover:shadow-md transition-all duration-200 active:scale-95 focus-ring;
}

.btn-secondary {
  @apply bg-gray-100 text-gray-700 px-6 py-3 rounded-2xl font-semibold hover:bg-gray-200 transition-all duration-200 active:scale-95 focus-ring;
}

.btn-outline {
  @apply border-2 border-emerald-500 text-emerald-600 px-6 py-3 rounded-2xl font-semibold hover:bg-emerald-50 transition-all duration-200 active:scale-95 focus-ring;
}

/* Card styles with better depth */
.card-elevated {
  @apply bg-white rounded-2xl shadow-sm border border-gray-50 hover:shadow-md transition-shadow duration-200;
}

.card-floating {
  @apply bg-white rounded-3xl shadow-lg border border-gray-50 hover:shadow-xl transition-all duration-300 hover:-translate-y-1;
}

/* Status indicators */
.status-dot {
  @apply w-2 h-2 rounded-full;
}

.status-active {
  @apply bg-green-500;
}

.status-inactive {
  @apply bg-gray-400;
}

.status-warning {
  @apply bg-yellow-500;
}

.status-error {
  @apply bg-red-500;
}

/* Typography enhancements */
.text-gradient {
  @apply bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent;
}

/* Responsive text sizing */
@responsive {
  .text-dynamic {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
  }
  
  .text-dynamic-lg {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* Mobile performance optimizations */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* Hardware acceleration for smooth animations */
.hardware-accelerate {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Mobile-optimized scrolling */
.smooth-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Optimize repaints for mobile */
.contain-layout {
  contain: layout;
}

.contain-paint {
  contain: paint;
}

.contain-strict {
  contain: strict;
}

/* Mobile-first input enhancements */
input[type="number"],
input[type="tel"],
input[type="text"] {
  font-size: 16px; /* Prevents zoom on iOS */
  -webkit-appearance: none;
  border-radius: 12px;
  padding: 12px 16px;
  transition: border-color 0.2s ease;
}

input[type="number"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus {
  outline: none;
  border-color: theme('colors.emerald.500');
  box-shadow: 0 0 0 3px theme('colors.emerald.500' / 0.1);
}

/* Touch-friendly select elements */
select {
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  padding: 12px 40px 12px 16px;
  border-radius: 12px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
}

/* Mobile-optimized buttons */
.btn-mobile {
  @apply min-h-12 px-6 py-3 text-base font-semibold rounded-xl transition-all duration-200;
  min-width: 44px; /* Apple HIG minimum touch target */
}

.btn-mobile:active {
  transform: scale(0.97);
}

/* Thumb-friendly navigation */
.bottom-nav-item {
  @apply min-h-16 min-w-16 flex flex-col items-center justify-center text-xs font-medium;
  touch-action: manipulation;
}

/* Loading states optimized for mobile */
.loading-skeleton {
  @apply bg-gradient-to-r from-gray-200 via-gray-100 to-gray-200 rounded animate-pulse;
  background-size: 400% 100%;
}

.loading-dots {
  @apply flex space-x-1;
}

.loading-dots > div {
  @apply w-2 h-2 bg-current rounded-full animate-bounce;
}

.loading-dots > div:nth-child(2) {
  animation-delay: 0.1s;
}

.loading-dots > div:nth-child(3) {
  animation-delay: 0.2s;
}

/* Mobile-optimized tables */
@media (max-width: 640px) {
  .mobile-table {
    display: block;
  }
  
  .mobile-table thead {
    display: none;
  }
  
  .mobile-table tbody,
  .mobile-table tr,
  .mobile-table td {
    display: block;
  }
  
  .mobile-table tr {
    @apply border border-gray-200 rounded-lg mb-4 p-4;
  }
  
  .mobile-table td {
    @apply flex justify-between items-center py-2;
    border: none !important;
  }
  
  .mobile-table td::before {
    content: attr(data-label) ": ";
    @apply font-medium text-gray-600 mr-2;
  }
}

/* Swipe gesture indicators */
.swipe-hint {
  @apply absolute top-1/2 transform -translate-y-1/2 opacity-30 transition-opacity duration-300;
  pointer-events: none;
}

.swipe-hint.left {
  left: 16px;
}

.swipe-hint.right {
  right: 16px;
}

.swipe-hint.show {
  @apply opacity-70;
}

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

/* Network-aware optimizations */
@media (max-width: 640px) and (max-resolution: 2dppx) {
  .hi-res-image {
    display: none;
  }
}

/* Battery-aware optimizations */
@media (prefers-reduced-motion: reduce) {
  .battery-intensive {
    animation: none !important;
    transform: none !important;
  }
}

/* Connection status indicator */
.connection-indicator {
  @apply fixed top-4 right-4 z-50 flex items-center gap-2 px-3 py-2 rounded-full text-xs font-medium backdrop-blur-sm transition-all duration-300;
}

.connection-indicator.online {
  @apply bg-emerald-500/10 text-emerald-700 border border-emerald-500/20;
}

.connection-indicator.offline {
  @apply bg-amber-500/10 text-amber-700 border border-amber-500/20;
}

/* Progressive enhancement classes */
.js-only {
  display: none;
}

.js .js-only {
  display: block;
}

.no-js .no-js-fallback {
  display: block;
}

/* Accessibility improvements for mobile */
@media (max-width: 640px) {
  .sr-only-mobile {
    @apply sr-only;
  }
  
  .focus-visible-mobile:focus {
    @apply ring-2 ring-emerald-500 ring-offset-2;
  }
}

/* iOS safe area support */
.safe-area-padding {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}