/* Styles PWA spécifiques */

/* Mode standalone (PWA installée) */
@media (display-mode: standalone) {
  body {
    user-select: none; /* Éviter la sélection accidentelle */
  }
  
  /* Masquer le bouton d'installation quand l'app est installée */
  #install-button {
    display: none !important;
  }
}

/* Styles pour les notifications PWA */
.pwa-notification {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Animation pour l'installation */
@keyframes installPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

#install-button:hover {
  animation: installPulse 0.3s ease-in-out;
}

/* Styles pour le mode sombre en PWA */
@media (prefers-color-scheme: dark) and (display-mode: standalone) {
  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
  }
}

/* Optimisations tactiles pour PWA */
@media (display-mode: standalone) {
  button, a {
    min-height: 44px; /* Taille minimale recommandée pour le tactile */
  }
  
  /* Éviter le zoom sur les inputs en mode PWA */
  input, select, textarea {
    font-size: 16px;
  }
}

/* Indicateur de connexion - masqué par défaut */
.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #f59e0b;
  color: white;
  text-align: center;
  padding: 8px;
  font-size: 14px;
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  display: none;
}

.offline-indicator.show {
  transform: translateY(0);
  display: block;
}

/* Styles pour les cartes en mode PWA */
@media (display-mode: standalone) {
  .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
  }
}

/* Animation de chargement PWA */
.pwa-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #009639;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}