/* pwa-styles-simple.css */

/* Base PWA overrides - minimal changes from browser experience */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  /* Prevent pull-to-refresh and other mobile browser behaviors */
  html, body {
    overscroll-behavior: none;
    height: 100%;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Fix safe areas for notched phones */
  .safe-top {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .safe-left {
    padding-left: env(safe-area-inset-left, 0px);
  }
  .safe-right {
    padding-right: env(safe-area-inset-right, 0px);
  }
  
  /* Fix bottom navigation with safe area */
  .fixed.bottom-0 {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  
  /* Ensure proper sizing for fixed-position elements */
  .fixed {
    position: fixed;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }
  
  /* Make sure modals respect safe areas */
  #qrScannerModal,
  #editModal,
  #workflowModal {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
  
  /* For iOS height issues */
  @supports (-webkit-touch-callout: none) {
    .min-h-screen {
      min-height: -webkit-fill-available;
    }
  }
}

/* Offline indicator */
.offline-indicator {
  display: none;
  background-color: #fee2e2;
  color: #991b1b;
  text-align: center;
  padding: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
}

body.is-offline .offline-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Splash screen for PWA launch */
.pwa-splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.pwa-splash.hidden {
  opacity: 0;
  pointer-events: none;
}

.pwa-splash img {
  width: 120px;
  height: 120px;
  margin-bottom: 2rem;
}

.pwa-splash .loading-spinner {
  border: 3px solid rgba(59, 130, 246, 0.3);
  border-radius: 50%;
  border-top: 3px solid rgba(59, 130, 246, 1);
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Toast notifications */
.toast {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  display: flex;
  align-items: center;
}

.toast-success {
  background-color: rgba(16, 185, 129, 0.9);
  color: white;
}

.toast-error {
  background-color: rgba(239, 68, 68, 0.9);
  color: white;
}

/* Add to homescreen animation */
.add-to-home {
  position: fixed;
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: calc(1rem + env(safe-area-inset-right, 0px));
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 999;
  max-width: 250px;
  display: none;
}

.add-to-home.show {
  display: block;
  animation: bounce 1s ease-out;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}

/* Fix for Android scrolling issues */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .overflow-auto, .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
  }
}

/* Ensure modals don't overflow in PWA mode */
@media (max-width: 640px) {
  .max-w-2xl, .max-w-md {
    max-width: 95% !important;
  }
}