/**
 * GymMeet Pro PWA-specific styles
 * These styles are applied when the app is in standalone mode (installed as PWA)
 */

/* PWA Mode - applies when in standalone or fullscreen mode */
@media (display-mode: standalone), (display-mode: fullscreen) {
  body {
    /* Adjust for safe areas on iOS */
    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);
    /* Ensure the body extends to the bottom of the screen */
    min-height: 100vh;
  }
  
  /* Hide elements not needed in PWA mode */
  .pwa-hide {
    display: none !important;
  }
  
  /* Make navbar more app-like */
  .navbar {
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  
  /* Add padding for bottom nav on smaller screens */
  main {
    /* Add padding to avoid content being hidden behind bottom nav */
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
  }
  
  /* Hide standard footer in PWA mode on mobile */
  @media (max-width: 767.98px) {
    footer {
      display: none;
    }
  }
  
  /* Bottom navigation for mobile PWA mode */
  .pwa-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: var(--shadow);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom, 0);
    border-top: 1px solid var(--gray-200);
  }
  
  .pwa-bottom-nav-item {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    color: var(--gray-600);
    text-decoration: none;
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
  }
  
  .pwa-bottom-nav-item.active {
    color: var(--bs-primary);
    font-weight: 600;
  }
  
  .pwa-bottom-nav-item i {
    font-size: 1.25rem;
    margin-bottom: 4px;
  }
  
  /* Active state with bottom indicator */
  .pwa-bottom-nav-item.active:after {
    content: '';
    position: absolute;
    bottom: env(safe-area-inset-bottom, 0);
    width: 100%;
    max-width: 50px;
    height: 3px;
    background-color: var(--bs-primary);
    border-radius: 1.5px 1.5px 0 0;
  }
}

/* PWA expanded view for larger screens */
@media (min-width: 768px) {
  @media (display-mode: standalone), (display-mode: fullscreen) {
    /* Hide bottom navigation on larger screens */
    .pwa-bottom-nav {
      display: none;
    }
    
    /* Show traditional navigation */
    .pwa-only-mobile {
      display: none !important;
    }
    
    /* Adjust footer for desktop PWA */
    footer {
      margin-top: 2rem;
    }
  }
}

/* Offline mode styles */
.offline-mode .online-only {
  display: none !important;
}

.offline-badge {
  display: none;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background-color: var(--bs-warning);
  color: white;
  margin-left: 0.5rem;
}

.offline-mode .offline-badge {
  display: inline-block;
}

/* Cached content indicator */
.offline-mode .cached-indicator {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--gray-600);
  margin-left: 0.5rem;
}

.offline-mode .cached-indicator i {
  margin-right: 0.25rem;
}

/* Offline notification banner */
#offline-notification {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--bs-warning);
  color: white;
  text-align: center;
  padding: 5px;
  z-index: 9999;
  transition: transform 0.3s ease;
}

#offline-notification .offline-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

#offline-notification i {
  margin-right: 8px;
}

/* Install button */
#install-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  border-radius: 20px;
  padding: 10px 20px;
  background-color: var(--bs-primary);
  color: white;
  border: none;
  box-shadow: var(--shadow-lg);
}

/* iOS install banner */
#ios-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bs-primary);
  color: white;
  text-align: center;
  padding: 10px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ios-install-banner .btn-close {
  margin-left: 8px;
  filter: invert(1);
}

/* App update toast */
.update-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bs-primary);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  display: flex;
  align-items: center;
}

.update-toast .update-toast-content {
  display: flex;
  align-items: center;
}

.update-toast p {
  margin: 0 10px 0 0;
}

.update-toast button {
  background-color: white;
  color: var(--bs-primary);
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
}

/* Pending sync indicator */
.pending-sync {
  position: relative;
}

.pending-sync::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--bs-warning);
}

/* Music player for PWA - if needed in the future */
.pwa-music-player {
  position: fixed;
  bottom: 70px;
  left: 0;
  right: 0;
  background-color: white;
  border-top: 1px solid var(--gray-200);
  padding: 10px;
  z-index: 999;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow);
}

.pwa-music-player-info {
  flex: 1;
  min-width: 0;
  padding-right: 10px;
}

.pwa-music-player-title {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.pwa-music-player-artist {
  font-size: 0.875rem;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pwa-music-player-controls {
  display: flex;
  align-items: center;
}

.pwa-music-player-controls button {
  background: none;
  border: none;
  font-size: 1.5rem;
  padding: 5px;
  color: var(--bs-primary);
  cursor: pointer;
}

.pwa-music-player-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: var(--bs-primary);
  width: 0%;
  transition: width 0.1s linear;
}

/* iOS safe area fix for PWA */
@media (display-mode: standalone) {
  /* Create background that fills safe area with brand color */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0);
    background-color: var(--bs-primary);
    z-index: 1030; /* Above navbar */
  }

  /* Prevent navbar from retreating into safe area */
  .navbar {
    position: fixed !important;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    z-index: 1020;
  }

  /* The fixed navbar cannot grow past the screen, so the expanded phone menu
     (site links plus the Admin Mode panel) scrolls inside itself instead of
     being cut off below the fold. */
  @media (max-width: 991.98px) {
    .navbar .navbar-collapse.show {
      max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 56px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
  }
  
  /* Adjust body to account for fixed navbar */
  body {
    padding-top: calc(env(safe-area-inset-top, 0) + 56px) !important; /* 56px = navbar height */
  }

  /* Fix Bootstrap modals to respect safe areas */
  .modal-dialog,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-sm {
    margin-top: calc(1.75rem + env(safe-area-inset-top, 0)) !important;
    margin-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0)) !important;
    margin-left: calc(1.75rem + env(safe-area-inset-left, 0)) !important;
    margin-right: calc(1.75rem + env(safe-area-inset-right, 0)) !important;
  }
  
  /* Ensure modals don't get cut off on smaller screens */
  @media (max-width: 575.98px) {
    .modal-dialog,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-sm {
      margin-top: calc(1rem + env(safe-area-inset-top, 0)) !important;
      margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0)) !important;
      margin-left: calc(1rem + env(safe-area-inset-left, 0)) !important;
      margin-right: calc(1rem + env(safe-area-inset-right, 0)) !important;
    }
  }
}