/* PWA Specific Styles */

/* Hide elements when running as standalone app */
@media (display-mode: standalone) {
  .pwa-hide-standalone {
    display: none !important;
  }
  
  /* Add padding to account for status bar on mobile */
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* PWA Install Banner */
#pwa-install-banner {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#pwa-install-banner button:hover {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Update Banner */
#pwa-update-banner {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Responsive design for PWA prompts */
@media (max-width: 768px) {
  #pwa-install-banner,
  #pwa-update-banner {
    margin: 0 10px !important;
    font-size: 14px;
  }
  
  #pwa-install-banner button,
  #pwa-update-banner button {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}

/* Loading state for offline content */
.offline-loading {
  opacity: 0.7;
  filter: grayscale(50%);
}

.offline-message {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
  text-align: center;
}

/* PWA theme integration */
:root {
  --pwa-primary: #ff6b6b;
  --pwa-secondary: #ff5252;
  --pwa-background: #000000;
  --pwa-text: #ffffff;
}

/* Custom scrollbar for PWA */
@media (display-mode: standalone) {
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--pwa-background);
  }
  
  ::-webkit-scrollbar-thumb {
    background: var(--pwa-primary);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--pwa-secondary);
  }
}