/* 
 * Optimisation des modales pour écrans Mac et résolutions limitées
 * Ce fichier réduit les paddings et marges pour maximiser l'espace disponible
 */
/* Surcharger la marge Bootstrap pour éviter le double scroll */
@media (min-width: 576px) {
    .modal {
        --pe-modal-margin: 0.5rem !important;
    }
    
    .modal-dialog {
        margin: 0.5rem auto !important;
    }
}

/* Centrer verticalement les modales */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
    max-height: none !important;
    overflow: none !important;
}

.modal-dialog-scrollable {
    display: flex;
    align-items: center;
    max-height: none !important;
    overflow: visible !important;
}

/* Empêcher le scroll sur modal-dialog-scrollable .modal-content */
.modal-dialog-scrollable .modal-content {
    max-height: none !important;
    overflow: visible !important;
}

/* Le scroll est uniquement sur le modal-body */
.modal-body {
    padding: 1.5rem !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Réduire les paddings des modal-header */
.modal-header {
    padding: 1rem 1.5rem !important;
}

/* Réduire les paddings des modal-footer */
.modal-footer {
    padding: 0.75rem 1.5rem !important;
}

/* Réduire l'espacement entre les éléments de formulaire */
.modal-body .row.g-3 {
    --bs-gutter-y: 0.75rem !important;
}

.modal-body .row.g-4 {
    --bs-gutter-y: 1rem !important;
}

/* Réduire les marges des form-label dans les modales */
.modal-body .form-label {
    margin-bottom: 0.25rem !important;
}

/* Réduire la hauteur des form-control dans les modales */
.modal-body .form-control,
.modal-body .form-select {
    padding: 0.375rem 0.75rem !important;
}

/* Réduire les marges des alertes dans les modales */
.modal-body .alert {
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

/* Réduire les marges des sections séparées par hr */
.modal-body hr {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

/* Optimiser les textarea */
.modal-body textarea.form-control {
    min-height: 60px !important;
}

/* Réduire l'espacement des titres h6 dans les modales */
.modal-body h6 {
    margin-bottom: 0.5rem !important;
}

/* Optimiser les cards internes aux modales */
.modal-body .card {
    margin-bottom: 0.75rem !important;
}

.modal-body .card-body {
    padding: 0.75rem !important;
}

/* Réduire l'espacement des boutons dans le footer */
.modal-footer .btn {
    padding: 0.5rem 1.25rem !important;
}

/* Fix pour Choices.js dans les modales et formulaires */
.choices {
    position: relative;
    z-index: 1;
}

.choices__list--dropdown {
    z-index: 1050 !important;
    max-height: 200px;
    overflow-y: auto;
}

/* Fix pour le bouton de sélection de client */
.btn-client-selector {
    position: relative;
    z-index: 2;
    margin-top: 0.5rem;
}

/* Assurer que le dropdown ne déborde pas de la modal */
.choices[data-type*="select-one"] .choices__list--dropdown,
.choices[data-type*="select-multiple"] .choices__list--dropdown {
    position: absolute;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Optimiser la hauteur maximale pour les écrans Mac (résolutions communes) */
@media (max-height: 900px) {
    .modal-dialog-scrollable .modal-body {
        max-height: calc(80vh - 120px) !important;
    }
}

@media (max-height: 800px) {
    .modal-dialog-scrollable .modal-body {
        max-height: calc(75vh - 100px) !important;
    }
    
    .modal-body {
        padding: 1rem !important;
    }
}

@media (max-height: 700px) {
    .modal-dialog-scrollable .modal-body {
        max-height: calc(70vh - 80px) !important;
    }
    
    .modal-body {
        padding: 0.75rem !important;
    }
    
    .modal-header {
        padding: 0.75rem 1rem !important;
    }
}

/* Optimiser les modales XL pour les petits écrans en hauteur */
@media (max-height: 900px) {
    .modal-xl {
        max-width: 1140px;
        margin: 0.5rem auto !important;
    }
}

@media (max-height: 800px) {
    .modal-xl {
        margin: 0.25rem auto !important;
    }
}