/* ===================================
   NIVEAU 1: STYLES DE BASE COMMUNS
   Appliqués à TOUS les dialogs
   =================================== */

/* IMPORTANT: Supprime le padding par défaut de Syncfusion */
.e-dialog .e-dlg-header-content + .e-dlg-content {
    padding-top: 6px !important;
    padding-bottom: 0px !important;
}

/* Structure de base du dialog */
.custom-dialog {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

    /* Header commun */
    .custom-dialog .e-dlg-header {
        color: white;
    }

    .custom-dialog .e-dialog .e-dlg-header-content {
        background-color: #3f51b5;
    }

/* Container principal */
.dialog-content-container {
    max-height: 100%;
    overflow-y: auto;
    padding: 0rem;
    width: 100%;
}

.content-wrapper {
    padding: 6px 0;
    width: 100%;
}

.form-content {
    width: 100%;
}

/* Sections de formulaire */
.form-section {
    padding: 0 1rem;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

    .form-section:last-child {
        margin-bottom: 0;
    }

/* Groupes de formulaire*/
.form-group {
    margin-bottom: 0;
    min-width: 0;
    /* FIX: Assure que les inputs prennent toute la largeur */
    display: flex;
    flex-direction: column;
}

    .form-group label {
        display: block;
        font-weight: 600;
        margin-bottom: 4px;
        color: #495057;
        font-size: 0.875rem;
    }

    /* FIX: Force les inputs Syncfusion à prendre 100% de la largeur */
    .form-group .e-input-group,
    .form-group .e-textbox,
    .form-group .e-control.e-textbox,
    .form-group .e-control.e-input-group {
        width: 100% !important;
        box-sizing: border-box;
    }

/* Lignes de formulaire */
.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 0.75rem;
    align-items: flex-start;
    width: 100%; /* FIX: Force la largeur complète */
}

    .form-row:last-child {
        margin-bottom: 0;
    }

/* Système de colonnes - FIX avec calc() pour tenir compte du gap */
.col-md-2 {
    flex: 0 0 calc(16.666% - 12.5px); /* 15px gap * 5/6 colonnes */
    min-width: 0;
}

.col-md-3 {
    flex: 0 0 calc(25% - 11.25px); /* 15px gap * 3/4 colonnes */
    min-width: 0;
}

.col-md-4 {
    flex: 0 0 calc(33.333% - 10px); /* 15px gap * 2/3 colonnes */
    min-width: 0;
}

.col-md-5 {
    flex: 0 0 calc(41.666% - 9px);
    min-width: 0;
}

.col-md-6 {
    flex: 0 0 calc(50% - 8px); /* 15px gap / 2 */
    min-width: 0;
}

.col-md-7 {
    flex: 0 0 calc(58.333% - 6.43px);
    min-width: 0;
}

.col-md-8 {
    flex: 0 0 calc(66.666% - 5px);
    min-width: 0;
}

.col-md-9 {
    flex: 0 0 calc(75% - 3.75px);
    min-width: 0;
}

.col-md-12 {
    flex: 0 0 100%;
    min-width: 0;
}

/* Footer des dialogs */
.custom-dialog .e-footer-content {
    padding: 0.5rem 1.5rem;
    background-color: #f7fafc;
    border-top: 1px solid #e2e8f0;
}

    .custom-dialog .e-footer-content .e-btn {
        margin-left: 0.5rem;
    }

        /* Bouton primaire */
        .custom-dialog .e-footer-content .e-btn.e-primary {
            background: #764ba2;
            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.4);
        }

            .custom-dialog .e-footer-content .e-btn.e-primary:hover {
                background: #764ba2;
                box-shadow: 0 4px 8px rgba(102, 126, 234, 0.5);
            }

/* Checkbox container générique */
.checkbox-container {
    margin-top: 8px;
    display: flex;
    align-items: center;
    height: 40px;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 10px;
    }

    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .custom-dialog {
        width: 95vw !important;
        max-height: 90vh !important;
    }

    .dialog-content-container {
        padding: 0.5rem;
    }

    .form-section {
        padding: 6px 10px;
    }
}