/* ============================================================
   FIXES MOBILE (Safari iOS/Mac + Android Chrome) - Bugs viewport et caret (2024)
   ============================================================
   Ces fixes corrigent les problèmes spécifiques aux navigateurs mobiles
   (Safari iOS, Safari Mac, Chrome Android) sans affecter les autres navigateurs.
   ============================================================ */

/* Fix 1: Viewport height dynamique pour Mobile (Safari iOS + Android Chrome) */
/* Les navigateurs mobiles calculent mal 100vh avec les barres d'adresse */
/* Utilise dvh (dynamic viewport height) avec fallback vh */

/* Fallback pour navigateurs sans support dvh */
.popup,
.gk-modal,
.modal,
.popup-menu-container {
  height: 100vh; /* Fallback */
  min-height: 100vh; /* Fallback */
}

/* Support dvh (Safari iOS 15.4+, Chrome 108+, Android Chrome) */
@supports (height: 100dvh) {
  .popup,
  .gk-modal,
  .modal,
  .popup-menu-container {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

/* Fix pour tous les navigateurs mobiles (Safari iOS + Android) */
@media (max-width: 768px) {
  .popup,
  .gk-modal,
  .modal,
  .popup-menu-container {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  
  /* Les toasts gardent leur position originale (bottom: 16px, right: 16px) */
  /* On ne modifie PAS leur position ni leur hauteur */
  
  /* Fallback si dvh n'est pas supporté */
  @supports not (height: 100dvh) {
    .popup,
    .gk-modal,
    .modal,
    .popup-menu-container {
      height: 100vh !important;
      min-height: -webkit-fill-available !important; /* Fix Android Chrome */
    }
  }
}

/* Fix spécifique Safari iOS */
@supports (-webkit-touch-callout: none) {
  .popup,
  .gk-modal,
  .modal,
  .popup-menu-container {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  
  /* Les toasts gardent leur position originale - on ne modifie PAS leur position */
  
  /* Fix pour les overlays avec position fixed */
  .popup[style*="height: 100vh"],
  .gk-modal[style*="height: 100vh"],
  .modal[style*="height: 100vh"] {
    height: 100dvh !important;
  }
  
  /* Fix pour les conteneurs avec min-height: 100vh */
  .contientMenu[style*="min-height: 100vh"],
  body[style*="height: 100vh"] {
    min-height: 100dvh !important;
  }
}

/* Fix 2: Position fixed avec inset pour Mobile (Safari + Android) */
/* Les navigateurs mobiles ont des problèmes avec inset: 0 sur certains éléments */

/* Fix pour tous les navigateurs mobiles */
/* NOTE: Les styles de positionnement du popup sont gérés dans app.css */
@media (max-width: 768px) {
  .popup,
  .gk-modal,
  .modal {
    /* Position et taille gérées dans app.css - on ne force plus ici */
    /* On garde seulement les fixes pour pointer-events et z-index */
  }
  
  /* Assure que les boutons de fermeture sont cliquables - SANS modifier leur position */
  .close-icon,
  .close-edit-icon,
  .gk-modal__close,
  [onclick*="closePopup"],
  [onclick*="closeModal"],
  [onclick*="fermerPopup"] {
    pointer-events: auto !important;
    z-index: 10001 !important;
    /* NE PAS modifier position - garde la position originale du CSS (absolute) */
    cursor: pointer !important;
    touch-action: manipulation !important; /* Fix Android - évite le double-tap */
  }
  
  /* Fix spécifique pour les boutons dans popup-content - SANS modifier position */
  .popup-content .close-icon,
  .popup-content .close-edit-icon {
    pointer-events: auto !important;
    z-index: 10002 !important;
    /* NE PAS modifier position - garde la position originale du CSS (absolute) */
    cursor: pointer !important;
    touch-action: manipulation !important; /* Fix Android */
  }
  
  /* Assure que le contenu popup permet les clics */
  .popup-content {
    pointer-events: auto !important;
  }
  
  /* Fix pour les popups avec position fixed */
  .popup,
  .popup-container {
    pointer-events: auto !important;
  }
  
  /* Le backdrop du popup doit permettre les clics sur les boutons */
  .popup > *,
  .popup-container > * {
    pointer-events: auto !important;
  }
  
  /* IMPORTANT: Les boutons de fermeture doivent TOUJOURS être cliquables */
  .popup-content .close-icon,
  .popup-content .close-edit-icon,
  .popup .close-icon,
  .popup .close-edit-icon,
  .popup-container .close-icon,
  .popup-container .close-edit-icon {
    pointer-events: auto !important;
    z-index: 99999 !important; /* Z-index très élevé pour être au-dessus de tout */
  }
}

/* Fix spécifique Safari iOS */
@supports (-webkit-touch-callout: none) {
  .popup,
  .gk-modal,
  .modal {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
  }
}

/* Fix 3: Curseur (caret) décalé dans les inputs */
/* Les navigateurs mobiles ont des problèmes avec le positionnement du caret */

/* Fix pour tous les navigateurs mobiles */
@media (max-width: 768px) {
  /* Fix pour tous les inputs */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select,
  .form-container input,
  .form-container textarea,
  .form-container select,
  .form-group input,
  .form-group textarea,
  .form-group select,
  .form-group-cate input,
  .form-group-cate textarea,
  .form-group-cate select {
    /* Assure un line-height cohérent */
    line-height: 1.5 !important;
    /* Padding vertical symétrique */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    /* Évite les transforms qui peuvent décaler le caret */
    transform: none !important;
    /* Assure un box-sizing correct */
    box-sizing: border-box !important;
      /* Fix spécifique mobile pour le caret */
      -webkit-appearance: none;
      appearance: none;
      /* Fix Android Chrome - évite le zoom au focus */
      font-size: 16px !important;
    }
    
    /* Fix spécifique pour les inputs avec padding personnalisé */
    input[style*="padding"],
    textarea[style*="padding"] {
      /* Force un padding vertical cohérent */
      padding-top: 10px !important;
      padding-bottom: 10px !important;
    }
}

/* Fix spécifique Safari iOS */
@supports (-webkit-touch-callout: none) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    line-height: 1.5 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    transform: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
  }
}

/* Fix 4: Viewport units pour les éléments avec vh */
@supports (-webkit-touch-callout: none) {
  /* Remplace les vh par dvh pour les éléments critiques */
  [style*="100vh"],
  [style*="height: 100vh"],
  [style*="min-height: 100vh"],
  [style*="max-height: 100vh"] {
    /* Note: Ceci nécessite un fix JavaScript pour modifier les styles inline */
  }
}

/* Fix 5: Overlay blanc en bas de l'écran */
/* Les navigateurs mobiles laissent parfois un espace blanc avec position: fixed */

/* Fallback général */
html,
body {
  height: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Support dvh */
@supports (height: 100dvh) {
  html,
  body {
    min-height: 100dvh !important;
  }
}

/* Fix pour tous les navigateurs mobiles */
@media (max-width: 768px) {
  html,
  body {
    /* Assure que le body prend toute la hauteur */
    height: 100% !important;
    min-height: 100dvh !important;
    /* Fallback Android si dvh non supporté */
    min-height: -webkit-fill-available !important;
    /* Évite le scroll horizontal */
    overflow-x: hidden !important;
  }
  
  /* Fix pour les modales qui laissent un espace blanc */
  .popup,
  .gk-modal,
  .modal {
    /* Force la hauteur complète */
    height: 100dvh !important;
    max-height: 100dvh !important;
    /* Fallback Android */
    height: -webkit-fill-available !important;
    /* Assure que le backdrop couvre tout */
    background: rgba(0, 0, 0, 0.55) !important;
    /* Position absolue par rapport au viewport */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
}

/* Fix spécifique Safari iOS */
@supports (-webkit-touch-callout: none) {
  html,
  body {
    min-height: 100dvh !important;
  }
}

/* Fix 6: Safe area pour iPhone avec encoche */
@supports (-webkit-touch-callout: none) {
  /* Respecte les safe areas sur iPhone */
  .popup,
  .gk-modal,
  .modal {
    padding-top: env(safe-area-inset-top, 0) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
  }
}

/* Fix 7: Input focus sur Mobile (Safari + Android) */
@media (max-width: 768px) {
  input:focus,
  textarea:focus,
  select:focus {
    /* Évite le zoom automatique sur focus (si viewport est bien configuré) */
    font-size: 16px !important;
    /* Assure un positionnement correct du caret */
    transform: none !important;
    /* Fix pour le caret décalé */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}