/* Styles pour les modales d'erreur */

/* Styles communs pour les modales d'erreur */
.error-modal-container {
    text-align: center;
    padding: 20px;
    font-family: 'Roboto', Arial, sans-serif;
}

/* Modale de session expirée */
.session-expired-container {
    color: #333;
}

.session-expired-container p {
    margin-bottom: 20px;
    line-height: 1.5;
}

#session-expired-countdown {
    font-size: 1.1em;
    font-weight: bold;
    color: #d9534f;
    margin: 20px 0;
}

/* Modale d'erreur de connexion */
.connection-error-container {
    color: #333;
}

.connection-error-container p {
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Modale d'erreur serveur */
.server-error-container {
    color: #333;
}

.server-error-container p {
    margin-bottom: 20px;
    line-height: 1.5;
}

.error-modal-icon.server-error {
    color: #d9534f;
}

/* Styles pour les icônes */
.error-modal-icon {
    font-size: 48px;
    margin-bottom: 20px;
    display: block;
}

.error-modal-icon.session-expired {
    color: #d9534f;
}

.error-modal-icon.connection-error {
    color: #f0ad4e;
}

/* Animation pour le compte à rebours */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

#session-expired-countdown {
    animation: pulse 1s infinite;
}

/* --- États de modale (appliqués par JS) --- */
.modal-success-header {
    background-color: #2aa52a !important;
    color: #fff !important;
}

.modal-error-header {
    background-color: #f4b5b5 !important;
    color: #d9534f !important;
}

.modal-warning-header {
    background-color: #ffc107 !important;
    color: #fff !important;
}

/* Bordures/contours du container selon l'état */
.modal-content.modal-success-outline {
    /* Conserver la base visuelle des modales */
    box-shadow: -5px 5px 20px 5px #ffffff73, 0 0 0 4px rgba(42,165,42,0.25) !important;
    /* Couleurs structurelles comme dans modal.css mais adaptées au succès */
    border: 1px solid #2aa52a !important;
    border-left: 5px solid #2aa52a !important;
    border-bottom: 5px solid #2aa52a !important;
    outline: 2px solid #2aa52a !important;
    outline-offset: -1px !important;
}

.modal-content.modal-error-outline {
    /* Conserver la base visuelle des modales */
    box-shadow: -5px 5px 20px 5px #ffffff73, 0 0 0 4px rgba(217,83,79,0.25) !important;
    /* Couleurs structurelles comme dans modal.css mais adaptées à l'erreur */
    border: 1px solid #d9534f !important;
    border-left: 5px solid #d9534f !important;
    border-bottom: 5px solid #d9534f !important;
    outline: 2px solid #d9534f !important;
    outline-offset: -1px !important;
}

.modal-content.modal-warning-outline {
    /* Conserver la base visuelle des modales */
    box-shadow: -5px 5px 20px 5px #ffffff73, 0 0 0 4px rgba(255,193,7,0.25) !important;
    /* Couleurs structurelles comme dans modal.css mais adaptées au warning */
    border: 1px solid #ffc107 !important;
    border-left: 5px solid #ffc107 !important;
    border-bottom: 5px solid #ffc107 !important;
    outline: 2px solid #ffc107 !important;
    outline-offset: -1px !important;
}

/* Style spécifique de la croix (close) pour l'état erreur */
.modal-header.modal-error-header .close {
    color: #ffe5e5 !important;
    text-shadow: 3px 3px 0 #7a0000;
    padding-right: 20px;
}

.modal-header.modal-error-header .close:hover {
    text-shadow: -2px -2px 0 #7a0000;
    color: #d9534f !important;
}

/* Harmonisation des boutons (close/minimize) avec états success/error */
/* On ne change QUE outline-color pour garder tous les effets (box-shadow, outline-offset, etc.) */

/* Success */
.modal-header.modal-success-header .modal-header-right span,
.modal-content.modal-success-outline .modal-header-right span {
    outline-color: rgba(42,165,42,0.36);
}
.modal-header.modal-success-header .modal-header-right span:hover,
.modal-content.modal-success-outline .modal-header-right span:hover {
    outline-color: #2aa52a;
}

/* Error */
.modal-header.modal-error-header .modal-header-right span,
.modal-content.modal-error-outline .modal-header-right span {
    outline-color: rgba(217,83,79,0.36);
}

.modal-header.modal-error-header .modal-header-right span:hover,
.modal-content.modal-error-outline .modal-header-right span:hover {
    outline-color: #d9534f;
}

/* ==========================
 * Fond d'icône en blanc dans les headers pour succès/erreur
 * ========================== */
/* Font Awesome dans le header */
.modal-header.modal-success-header .icon > i.fa::before,
.modal-header.modal-error-header .icon > i.fa::before,
.modal-header.modal-warning-header .icon > i.fa::before {
    background-color: #ffffff !important;
    height: 40px;
    width: 40px;
    display: flex;
    font-size: 25px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

/* Icônes LIM dans le header */
.modal-header.modal-success-header .icon > i.lim,
.modal-header.modal-error-header .icon > i.lim,
.modal-header.modal-warning-header .icon > i.lim {
    background-color: #ffffff !important;
    border-radius: 50%;
}

/* Cas outline appliqué au container: forcer aussi le blanc si l'état est au niveau content */
.modal-content.modal-success-outline .modal-header .icon > i.fa::before,
.modal-content.modal-error-outline .modal-header .icon > i.fa::before,
.modal-content.modal-warning-outline .modal-header .icon > i.fa::before {
    background-color: #ffffff !important;
}
.modal-content.modal-success-outline .modal-header .icon > i.lim,
.modal-content.modal-error-outline .modal-header .icon > i.lim,
.modal-content.modal-warning-outline .modal-header .icon > i.lim {
    background-color: #ffffff !important;
}

/* Couleur des glyphes (Font Awesome) adaptée à l'état */
.modal-header.modal-success-header .icon > i.fa,
.modal-content.modal-success-outline .modal-header .icon > i.fa {
    color: #2aa52a !important;
}
.modal-header.modal-error-header .icon > i.fa,
.modal-content.modal-error-outline .modal-header .icon > i.fa {
    color: #d9534f !important;
}
.modal-header.modal-warning-header .icon > i.fa,
.modal-content.modal-warning-outline .modal-header .icon > i.fa {
    color: #ffc107 !important;
}

/* ==========================
 * Zebra stripes des tableaux dans les modales succès/erreur
 * ========================== */
/* Succès: si état appliqué sur le header OU via outline sur .modal-content */
.modal-header.modal-success-header + .modal-body > table > tr:nth-child(2n),
.modal-content.modal-success-outline .modal-body > table > tr:nth-child(2n) {
    background-color: rgba(42, 165, 42, 0.12) !important;
}

/* Erreur: si état appliqué sur le header OU via outline sur .modal-content */
.modal-header.modal-error-header + .modal-body > table > tr:nth-child(2n),
.modal-content.modal-error-outline .modal-body > table > tr:nth-child(2n) {
    background-color: rgba(217, 83, 79, 0.12) !important;
}

/* Warning: si état appliqué sur le header OU via outline sur .modal-content */
.modal-header.modal-warning-header + .modal-body > table > tr:nth-child(2n),
.modal-content.modal-warning-outline .modal-body > table > tr:nth-child(2n) {
    background-color: rgba(255, 193, 7, 0.12) !important;
}

.modal-header.modal-error-header + .modal-body,
.modal-content.modal-error-outline .modal-body,
.modal-header.modal-success-header + .modal-body,
.modal-content.modal-success-outline .modal-body,
.modal-header.modal-warning-header + .modal-body,
.modal-content.modal-warning-outline .modal-body {
    margin: 5px;
    padding: 5px !important;
}


.alert.alert-danger,
.alert.alert-success {
    padding: 10px 20px;
}

.modal-header.modal-error-header + .modal-body > table > tr > td,
.modal-content.modal-error-outline .modal-body > table > tr > td,
.modal-header.modal-success-header + .modal-body > table > tr > td,
.modal-content.modal-success-outline .modal-body > table > tr > td,
.modal-header.modal-warning-header + .modal-body > table > tr > td,
.modal-content.modal-warning-outline .modal-body > table > tr > td {
    padding: 10px 10px;
}