/* PWA Mobile App Styles */

/* Prevent text selection on mobile for app-like feel */
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Allow text selection for input fields and content areas */
input, textarea, [contenteditable], .selectable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Remove tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
  outline: none;
}

/* Smooth scrolling for app-like feel */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Prevent zoom on input focus (iOS) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-size: 16px; /* Prevents zoom on iOS */
}

/* Full height for mobile app experience */
html, body, #root {
  height: 100%;
  overflow-x: hidden;
}

/* Hide scrollbars for cleaner app look */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Safe area handling for devices with notches */
body {
  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);
}

/* Prevent overscroll bounce on iOS */
body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* App-like button interactions */
button, .clickable {
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease;
}

button:active, .clickable:active {
  transform: scale(0.98);
}

/* Status bar overlay for iOS */
@supports (padding-top: env(safe-area-inset-top)) {
  .status-bar-overlay {
    padding-top: env(safe-area-inset-top);
  }
}

/* Fullscreen mode adjustments */
@media (display-mode: standalone) {
  /* App is running in standalone mode */
  body {
    background-color: #f8fafc;
  }
  
  /* Hide any web-specific elements when in app mode */
  .web-only {
    display: none !important;
  }
}

/* Landscape orientation handling */
@media screen and (orientation: landscape) and (max-height: 500px) {
  /* Adjust layout for landscape on small screens */
  .mobile-landscape-adjust {
    padding-top: 0;
  }
}

/* Prevent pull-to-refresh on mobile */
body {
  overscroll-behavior-y: contain;
}

/* App loading screen */
.pwa-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  color: white;
}

.pwa-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}