/* PWA Styles for PhysioTRAQ */

/* Safe area insets for notched phones (iPhone X+, etc.) */
.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);
}

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

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

/* Bottom navigation with safe area */
.bottom-nav {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* Standalone mode optimizations (when installed as PWA) */
@media (display-mode: standalone) {
  /* Full height for monitoring views */
  .monitor-view {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  /* Hide elements that shouldn't appear in PWA */
  .hide-in-pwa {
    display: none !important;
  }
  
  /* Prevent overscroll bounce effect for app-like feel */
  body {
    overscroll-behavior-y: contain;
  }
  
  /* Adjust header for status bar on iOS */
  .pwa-header {
    padding-top: calc(0.75rem + env(safe-area-inset-top));
  }
}

/* Large touch targets for mobile (Apple HIG recommends 44x44pt minimum) */
@media (max-width: 768px) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
  
  .monitor-btn {
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
  }
}

/* Prevent text selection for app-like feel in PWA mode */
.pwa-mode * {
  -webkit-user-select: none;
  user-select: none;
}

/* But allow text selection in inputs and textareas */
.pwa-mode input,
.pwa-mode textarea,
.pwa-mode [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* PWA Install Banner Animation */
.pwa-install-banner {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* iOS modal animation */
#ios-install-modal > div {
  animation: slideUp 0.3s ease-out;
}