/* Modern responsive styles with multi-device support */
body {
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  /* Support for safe areas on mobile devices */
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Desktop and tablet specific adjustments */
@media (min-width: 1024px) {
  body {
    padding: 0; /* Remove safe area padding on desktop */
  }
}

.logs { 
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
}

.form-radio { 
  width: 1rem; 
  height: 1rem; 
}

.hidden { 
  display: none; 
}

/* Enhanced mobile touch targets */
button, input, [role="button"] {
  min-height: 44px;
}

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

/* Custom gradient animations */
@keyframes gradient {
  0%, 100% {
    background-size: 200% 200%;
    background-position: left center;
  }
  50% {
    background-size: 200% 200%;
    background-position: right center;
  }
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-10px); 
  }
}

@keyframes pulse-soft {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.8; 
  }
}

@keyframes success-glow {
  0% { 
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% { 
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% { 
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Responsive optimizations for all devices */

/* Mobile devices */
@media (max-width: 640px) {
  body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Ensure full viewport height usage with dynamic viewport */
  .min-h-screen {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
  }
  
  .min-h-\[100dvh\] {
    min-height: 100dvh;
  }
  
  /* Better scrolling for mobile */
  .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Ensure fixed bottom button stays at screen bottom */
  .sticky {
    position: -webkit-sticky;
    position: sticky;
  }
  
  /* Safe area support for bottom button */
  .pb-\[calc\(1rem\+env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  
  input[type="number"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;
  }
  
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
}

/* Tablet devices */
@media (min-width: 641px) and (max-width: 1023px) {
  /* Better touch targets for tablet */
  button, input, [role="button"] {
    min-height: 48px;
  }
  
  .min-h-screen {
    min-height: 100vh;
  }
  
  .min-h-\[100dvh\] {
    min-height: 100vh;
  }
}

/* Desktop devices */
@media (min-width: 1024px) {
  /* Remove mobile-specific optimizations */
  .min-h-screen {
    min-height: 100vh;
  }
  
  .min-h-\[100dvh\] {
    min-height: 100vh;
  }
  
  /* Desktop-specific layout adjustments */
  .lg\:my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  
  .lg\:min-h-\[calc\(100vh-2rem\)\] {
    min-height: calc(100vh - 2rem);
  }
  
  .lg\:rounded-3xl {
    border-radius: 1.5rem;
  }
  
  /* Remove safe area padding on desktop */
  .pb-\[calc\(1rem\+env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: 1rem;
  }
  
  /* Better hover effects on desktop */
  button:hover {
    transform: translateY(-1px);
  }
}

/* Large desktop screens */
@media (min-width: 1280px) {
  /* Additional spacing for larger screens */
  .xl\:max-w-xl {
    max-width: 36rem;
  }
}

/* Backdrop blur fallback */
@supports not (backdrop-filter: blur(12px)) {
  .backdrop-blur-lg {
    background-color: rgba(255, 255, 255, 0.95);
  }
  
  .backdrop-blur {
    background-color: rgba(255, 255, 255, 0.9);
  }
  
  .backdrop-blur-sm {
    background-color: rgba(0, 0, 0, 0.7);
  }
}

/* NFC Unsupported popup - prevent interaction with background */
#nfc-unsupported-popup {
  pointer-events: auto;
}

#nfc-unsupported-popup:not(.hidden) ~ * {
  pointer-events: none;
}

/* Ensure popup is always on top and cannot be dismissed */
#nfc-unsupported-popup .bg-white\/95 {
  pointer-events: auto;
}