/* Conteneur principal du plugin */
.propagation-plugin-wrapper {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Style des boutons */
.propagation-button {
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s;
    margin: 5px;
}

.propagation-button:hover {
    background-color: #005a87;
}

.propagation-button:disabled {
    background-color: #a0a5aa;
    cursor: not-allowed;
}

/* Section des choix de statut */
#propagation-status-choices {
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Classe pour cacher des éléments */
.hidden {
    display: none !important;
}

/* Zone pour les messages d'erreur ou de succès */
.propagation-message-area {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    min-height: 1.5em; /* Pour éviter le décalage de la mise en page */
}

.propagation-message-area.success {
    background-color: #dff0d8;
    color: #3c763d;
    border: 1px solid #d6e9c6;
}

.propagation-message-area.error {
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
}

/* Couleurs spécifiques pour les boutons de statut */
.status-4 { background-color: #428bca; } /* Excellente */
.status-3 { background-color: #5cb85c; } /* Bonne */
.status-2 { background-color: #f0ad4e; } /* Moyenne */
.status-1 { background-color: #d9534f; } /* Médiocre */
.status-0 { background-color: #BEBEBE; color: #333; } /* Nulle */
.status-5 { background-color: #5bc0de; } /* Variable */

.status-4:hover { background-color: #3071a9; }
.status-3:hover { background-color: #449d44; }
.status-2:hover { background-color: #ec971f; }
.status-1:hover { background-color: #c9302c; }
.status-0:hover { background-color: #a9a9a9; }
.status-5:hover { background-color: #31b0d5; }
/* --- Styles pour la légende --- */
.propagation-legend {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur les petits écrans */
    justify-content: center; /* Centre les éléments */
    gap: 15px; /* Espace entre les éléments */
    margin-top: 20px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.legend-item {
    display: flex;
    align-items: center; /* Aligne verticalement la boîte de couleur et le texte */
    font-size: 0.9em;
}

.legend-color-box {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    margin-right: 8px;
    border: 1px solid rgba(0,0,0,0.2);
}