/* ===========================================================
   STYLES POUR DIALOGS DE VISUALISATION
   Appliqués uniquement aux dialogs avec classe .view-dialog
   =========================================================== */

/* Content wrapper et structure des onglets */
.view-dialog .content-wrapper {
    padding: 10px 20px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Ensure SfTab takes full available space */
.view-dialog .e-tab {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.view-dialog .e-tab .e-tab-header {
    flex-shrink: 0;
}

.view-dialog .e-tab .e-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.view-dialog .e-tab .e-content .e-item {
    display: flex;
    flex-direction: column;
}

/* Sections de formulaire avec bordure et fond gris */
.view-dialog .form-section {
    margin-bottom: 10px;
    padding: 9px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fafafa;
}

.view-dialog .form-section h4 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: #633699;
    border-bottom: 2px solid #633699;
}

/* Contenu du formulaire */
.view-dialog .form-content {
    padding-bottom: 0px;
}

/* Champs readonly */
.view-dialog .readonly-field {
    background-color: #f5f5f5 !important;
}

.view-dialog .e-outline.readonly-field .e-input {
    background-color: #f5f5f5 !important;
    cursor: not-allowed;
}

/* Système de colonnes amélioré */
.view-dialog .col-md-3 {
    flex: 0 0 calc(25% - 11.25px); /* 25% moins 3/4 du gap */
    max-width: calc(25% - 11.25px);
}

.view-dialog .col-md-4 {
    flex: 0 0 calc(33.333% - 10px); /* 33.333% moins 2/3 du gap */
    max-width: calc(33.333% - 10px);
}

.view-dialog .col-md-6 {
    flex: 0 0 calc(50% - 7.5px); /* 50% moins 1/2 du gap */
    max-width: calc(50% - 7.5px);
}

.view-dialog .col-md-8 {
    flex: 0 0 calc(66.666% - 5px); /* 66.666% moins 1/3 du gap */
    max-width: calc(66.666% - 5px);
}

.view-dialog .col-md-9 {
    flex: 0 0 calc(75% - 3.75px); /* 75% moins 1/4 du gap */
    max-width: calc(75% - 3.75px);
}

.view-dialog .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Fix pour l'alignement des contrôles sur une même ligne */
.view-dialog .e-textbox,
.view-dialog .e-input-group {
    width: 100% !important; /* Force la largeur à 100% du container */
    box-sizing: border-box;
}

/* Champs en lecture seule */
.view-dialog .readonly-field {
    height: 32px; /* Hauteur fixe pour uniformité */
}

.view-dialog e-control e-textarea e-lib e-resize-xy e-input e-disabled {
    resize: none;
}

/* Checkbox - alignement amélioré */
.view-dialog .checkbox-container,
.view-dialog .form-group > div:has(.e-checkbox) {
    display: flex;
    align-items: center;
    height: 32px; /* Même hauteur que les textbox */
}

.view-dialog .readonly-checkbox {
    pointer-events: none;
    opacity: 0.7;
}

.view-dialog .e-multiline.e-textbox {
    height: auto !important;
    min-height: 60px !important;
}

/* Fix spécifique pour la ligne Code postal / Ville / Statut */
.view-dialog .form-row:has(.readonly-checkbox) {
    align-items: flex-end; /* Aligne les éléments en bas */
}

    .view-dialog .form-row:has(.readonly-checkbox) .form-group:last-child {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

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

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

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