/**
 * 📅 STYLES RESPONSIFS POUR MODAL DE RENDEZ-VOUS - LMP
 * 
 * Améliorations CSS spécifiques pour assurer une parfaite responsivité
 * du modal de prise de rendez-vous sur tous les appareils
 * 
 * @author LMP Team
 * @version 1.0.0
 */

/* ============================================
   VARIABLES CSS PERSONNALISEES
   ============================================ */

:root {
  --modal-padding-mobile: 0.75rem;
  --modal-padding-desktop: 1.5rem;
  --modal-border-radius: 0.75rem;
  --modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --animation-duration: 0.2s;
}

/* ============================================
   AMÉLIORATIONS GÉNÉRALES DU MODAL
   ============================================ */

#appointmentModal {
  /* Support pour les navigateurs plus anciens */
  -webkit-overflow-scrolling: touch;
}

#appointmentModal[role="dialog"] {
  /* Force le modal à rester au centre même lors du resize */
  align-items: center !important;
  justify-content: center !important;
}

/* Container principal du modal */
#appointmentModal > div {
  /* Transition fluide pour les changements de taille */
  transition: all var(--animation-duration) ease-in-out;
  
  /* Support Safari pour le backdrop-filter */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ============================================
   AMÉLIORATIONS MOBILE (< 640px)
   ============================================ */

@media (max-width: 639px) {
  #appointmentModal {
    /* Réduction du padding sur mobile */
    padding: 0.5rem !important;
  }
  
  #appointmentModal > div {
    /* Modal pleine hauteur sur mobile */
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  /* Calendrier plus compact */
  #calendarDays .day-cell {
    min-height: 32px;
    font-size: 0.875rem;
  }
  
  /* Créneaux horaires optimisés pour mobile */
  .time-slot {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.5rem !important;
    min-height: 32px !important;
  }
  
  /* Formulaire plus compact */
  #appointmentForm input,
  #appointmentForm select,
  #appointmentForm textarea {
    font-size: 16px !important; /* Évite le zoom sur iOS */
    padding: 0.75rem !important;
  }
  
  /* Boutons d'action optimisés */
  #appointmentSubmitBtn,
  button[onclick="AppointmentModal.close()"] {
    min-height: 48px !important;
    font-size: 1rem !important;
  }
}

/* ============================================
   AMÉLIORATIONS TABLETTE (640px - 1023px)
   ============================================ */

@media (min-width: 640px) and (max-width: 1023px) {
  #appointmentModal > div {
    max-width: 90vw !important;
    max-height: 95vh !important;
  }
  
  /* Layout en colonnes pour tablette */
  .lg\:flex-row {
    flex-direction: column !important;
  }
  
  .lg\:border-r {
    border-right: none !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
}

/* ============================================
   AMÉLIORATIONS DESKTOP (> 1024px)
   ============================================ */

@media (min-width: 1024px) {
  #appointmentModal > div {
    min-height: 600px;
    max-height: 90vh;
  }
  
  /* Calendrier plus spacieux sur desktop */
  #calendarDays .day-cell {
    min-height: 40px;
    padding: 0.75rem;
  }
  
  /* Créneaux plus généreux */
  .time-slot {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
}

/* ============================================
   ANIMATIONS ET TRANSITIONS
   ============================================ */

/* Animation d'ouverture du modal */
#appointmentModal:not(.hidden) {
  animation: modalFadeIn var(--animation-duration) ease-out;
}

#appointmentModal:not(.hidden) > div {
  animation: modalSlideIn var(--animation-duration) ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================
   AMÉLIORATIONS ACCESSIBILITÉ
   ============================================ */

/* Amélioration du contraste pour les éléments focusables */
#appointmentModal button:focus,
#appointmentModal input:focus,
#appointmentModal select:focus,
#appointmentModal textarea:focus {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
}

/* Indicateurs visuels pour les éléments interactifs */
.day-cell:hover:not(.cursor-not-allowed),
.time-slot:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Support pour les mouvements réduits */
@media (prefers-reduced-motion: reduce) {
  #appointmentModal,
  #appointmentModal > div,
  .day-cell,
  .time-slot {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   CORRECTIONS SPÉCIFIQUES NAVIGATEURS
   ============================================ */

/* Fix pour Safari sur iOS */
@supports (-webkit-touch-callout: none) {
  #appointmentModal {
    -webkit-overflow-scrolling: touch;
  }
  
  #appointmentModal > div {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Fix pour Edge */
@supports (-ms-ime-align: auto) {
  #appointmentModal > div {
    max-width: calc(100vw - 2rem);
  }
}

/* ============================================
   UTILITAIRES DE DEBUG (développement uniquement)
   ============================================ */

.debug-responsive #appointmentModal::before {
  content: "Mobile: < 640px";
  position: fixed;
  top: 10px;
  left: 10px;
  background: #ef4444;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 9999;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .debug-responsive #appointmentModal::before {
    content: "Tablette: 640px - 1023px";
    background: #f59e0b;
  }
}

@media (min-width: 1024px) {
  .debug-responsive #appointmentModal::before {
    content: "Desktop: > 1024px";
    background: #10b981;
  }
}