/* ========================================= */
/* Fichier CSS dédié aux MODALES / POPUPS    */
/* ========================================= */

/* Fond de la modale (BACKDROP) */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-backdrop);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

    .modal-backdrop.hidden {
        display: none;
    }

/* --- CONTENEURS DE MODALE (TAILLES SPÉCIFIQUES) --- */

/* 1. Conteneur Grande Modale (Pleine Page ou Formulaire Complexe) - FORMAT EXISTANT */
.modal-container {
    min-height: 90vh;
    max-height: 90vh;
    max-width: 1200px;
    width: 50%;
    background-color: var(--color-white);
    border-radius: var(--radius-double);
    box-shadow: var(--shadow-modal);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

/* 2. Conteneur Modale de Dialogue / Alerte (Compacte) - NOUVEAU FORMAT */
.modal-dialog {
    /* Dimensions pour un dialogue standard et compact */
    max-height: 95vh;
    max-width: 500px;
    width: 90%;
    background-color: var(--color-white);
    border-radius: var(--radius-double);
    box-shadow: var(--shadow-modal);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}


/* --- STRUCTURE INTERNE COMMUNE (Utilisée par .modal-container et .modal-dialog) --- */

/* 1. Header (Titre, Icône, Fermeture) */
.modal-header {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    gap: 1rem;
    align-items: center;
    font-size: 1.5rem;
}

    .modal-header .title {
        flex-grow: 1;
        font-size: 1.5rem;
    }

/* 2. Corps (Contenu) */
.modal-body {
    flex-grow: 1;
    overflow: hidden;
    padding: 1rem;
    color:black;
}

    /* Scrollable interne du corps de la modale */
    .modal-body .scrollable {
        overflow: auto;
        height: 100%;
        white-space: pre-line;
    }

/* 3. Footer (Actions) */
.modal-footer {
    display: flex;
    flex-direction: row;
    padding: 1rem;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* --- Icones de Contexte --- */

/*.modal-icon-wrapper ::deep svg {
    height: 2rem;
    width: 2rem;
}

.modal-icon-wrapper.info ::deep svg path {
    fill: var(--color-info);
}

.modal-icon-wrapper.warning ::deep svg path {
    fill: var(--color-warning);
}

.modal-icon-wrapper.error ::deep svg path {
    fill: var(--color-error);
}

.modal-icon-wrapper.success ::deep svg path {
    fill: var(--color-success);
}
*/

/* --- Styles Spécifiques à la Modale de Dialogue/Alerte --- */

/* Le Fond de la modale (.modal-bg) est maintenant géré par la classe Lib .modal-backdrop 
qui a le même comportement et le même Z-Index. Le code HTML/Razor doit utiliser .modal-backdrop. */

.modal-bg {
    /* Maintien de l'alignement spécifique si nécessaire, bien que .modal-backdrop fasse déjà center/center */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .modal-bg.hidden {
        display: none;
    }

/* Conteneur de la modale de Dialogue/Alerte - Classe .modal d'origine */
.modal {
    display: flex;
    flex-direction: column;
    max-height: 95vh;
    /* On utilise les variables de la Lib pour le fond, le shadow et les coins */
    background-color: var(--color-white);
    border-radius: var(--radius); /* Coin simple pour ce dialogue */
    box-shadow: var(--shadow-modal);
    /* Dimensions spécifiques à ce Dialogue (Compact) */
    max-width: 600px;
    width: 90%;
    /* On retire z-index: 2000 car il est sur .modal-backdrop (le fond) */
    overflow: hidden;
}

    /* Corps de la modale - Classe .modal article d'origine */
    .modal article {
        /* C'est la max-width du contenu qui est spécifique à cette modale d'alerte. */
        max-width: 40rem;
        flex-grow: 1;
        overflow: hidden;
        padding: 1rem;
    }


/* --- Icones de Contexte --- */

/* ::deep - voir class scoped Modal.razor.css */

/* Les styles du header, footer, icônes, boutons sont maintenant gérés par les classes Lib :
   - .modal-header
   - .modal-body
   - .modal-footer
   - .modal-icon-wrapper
   - .btn-close-circle
   - .btn-secondary-light
*/