/**
 * 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;
  }
  
  /* 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;
    }
  }
}