/* PWA Specific Styles */
@media (display-mode: standalone) {
  /* Styles when app is installed and running in standalone mode */
  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);
  }
  
  /* Hide install button when in standalone mode */
  .pwa-install-button {
    display: none !important;
  }
  
  /* Adjust header for standalone mode */
  .page-header,
  .page-header-2 {
    padding-top: calc(20px + env(safe-area-inset-top));
  }
}

/* PWA Install Button Styles */
.pwa-install-button {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #1f3c6d;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: all 0.3s ease;
}

.pwa-install-button:hover {
  background: #2a4f85;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Network Status Indicator */
.pwa-network-status {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  z-index: 1000;
  transition: all 0.3s ease;
}

/* Offline Mode Styles */
.pwa-offline {
  filter: grayscale(0.3);
}

.pwa-offline .fleet-card {
  opacity: 0.8;
}

.pwa-offline .fleet-card:hover {
  opacity: 1;
}

/* Loading animations for PWA */
.pwa-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: pwa-spin 1s ease-in-out infinite;
}

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

/* Update notification styles */
.pwa-update-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1f3c6d;
  color: white;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 1001;
  text-align: center;
  max-width: 300px;
  animation: pwa-slide-down 0.3s ease;
}

@keyframes pwa-slide-down {
  from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.pwa-update-notification button {
  margin: 8px 4px 0;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.pwa-update-notification .btn-primary {
  background: white;
  color: #1f3c6d;
  border: none;
}

.pwa-update-notification .btn-secondary {
  background: transparent;
  color: white;
  border: 1px solid white;
}

/* Toast notification styles */
.pwa-toast {
  position: fixed;
  top: 80px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 1001;
  max-width: 300px;
  animation: pwa-toast-in 0.3s ease;
}

@keyframes pwa-toast-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.pwa-toast.success {
  background: #4CAF50;
  color: white;
}

.pwa-toast.warning {
  background: #FF9800;
  color: white;
}

.pwa-toast.error {
  background: #F44336;
  color: white;
}

.pwa-toast.info {
  background: #2196F3;
  color: white;
}

/* Mobile optimizations for PWA */
@media (max-width: 768px) {
  .pwa-install-button {
    top: 10px;
    right: 10px;
    padding: 10px 16px;
    font-size: 12px;
  }
  
  .pwa-network-status {
    bottom: 10px;
    left: 10px;
    font-size: 11px;
    padding: 6px 12px;
  }
  
  .pwa-update-notification {
    left: 10px;
    right: 10px;
    transform: none;
    max-width: none;
  }
  
  .pwa-toast {
    right: 10px;
    max-width: calc(100% - 20px);
  }
}

/* iOS specific PWA styles */
@supports (-webkit-touch-callout: none) {
  .pwa-install-button {
    /* Adjust for iOS safe areas */
    top: calc(20px + env(safe-area-inset-top));
    right: calc(20px + env(safe-area-inset-right));
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .pwa-install-button {
    border: 2px solid white;
  }
  
  .pwa-network-status {
    border: 1px solid rgba(255,255,255,0.5);
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .pwa-install-button,
  .pwa-toast,
  .pwa-update-notification,
  .pwa-loading {
    animation: none;
    transition: none;
  }
  
  .pwa-install-button:hover {
    transform: none;
  }
}