/**
 * PWA Global Styles
 * Mobile-first, native-feeling styles
 */

/* Safe Area Support (notch devices) */
@supports (padding: max(0px)) {
  .safe-area-top {
    padding-top: max(1rem, env(safe-area-inset-top));
  }
  
  .safe-area-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  
  .safe-area-left {
    padding-left: max(1rem, env(safe-area-inset-left));
  }
  
  .safe-area-right {
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* Touch Target Sizes (minimum 44x44px for iOS) */
button, a, [role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Prevent Text Selection on Buttons */
button {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Keyboard-Friendly Forms */
input, textarea, select {
  font-size: 16px; /* Prevents zoom on iOS */
}

/* Loading States */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Sheet Animations */
@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.animate-in {
  animation: slide-up 0.2s ease-out;
}

/* Focus States for Accessibility */
*:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

/* Prevent Layout Shift */
img {
  max-width: 100%;
  height: auto;
}

/* PWA Standalone Mode Adjustments */
@media (display-mode: standalone) {
  body {
    /* Remove browser chrome spacing */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}