.emergency-distribution-container {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    flex-direction: row;
}

.emergency-distribution-left-column {
    max-width: 300px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.emergency-distribution-student-panel {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1rem;
    flex-grow: 1;
    overflow-y: auto;
}

.emergency-distribution-right-column {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.emergency-distribution-classroom-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: 100%;
    max-height: 100%;
    gap: 1.5rem;
    overflow-x: visible;
    align-content: flex-start;
    overflow: visible; /* Pour éviter que le hover soit tronqué */
    position: relative; /* Nécessaire si des enfants utilisent position:absolute */
    z-index: 1; /* Pour garantir que les enfants ont une base correcte */
    padding: 1rem;
}

.emergency-distribution-loading {
    padding: 2rem;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--primary-color);
}



/* ------------------ Blocs de disposition de classes ------------------ */

.emergency-distribution-classroom-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2rem;
    padding: 1rem;
    height: 100%;
}

/* Bloc individuel */
.classroom-disposition-item {
    background-color: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    min-width: 210px;
    max-width: 210px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Header avec le nom et les actions */
.classroom-disposition-header {
    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    /* Nom de la classe */
    .classroom-disposition-header span {
        font-size: 1.15rem;
        font-weight: bold;
    }

    /* Capacité */
    .classroom-disposition-header small {
        font-size: 0.75rem;
        color: #f0f0f0;
    }

.header-divider {
    width: 1px;
    height: 100%;
    background-color: #888;
}

/* Actions (Modifier / Activer-Désactiver) */
.classroom-disposition-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

    .classroom-disposition-actions button {
        background: transparent;
        border: none;
        color: var(--secondary-color);
        cursor: pointer;
        font-size: 1rem;
        transition: color 0.3s ease;
    }

        .classroom-disposition-actions button:hover {
            filter: brightness(1.4);
        }

.capacity-button {
    background: transparent;
    border: none;
    color: var(--secondary-color);
    font-size: 1.4rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .capacity-button:hover {
        filter: brightness(1.4);
    }

/* Quand capacité max atteinte */
.capacity-full {
    color: var(--secondary-color) !important;
    font-weight: bold;
}

/* Animation blink */
@keyframes blink-animation {
    0%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0.25;
    }

    50% {
        opacity: 1;
    }
}

.blink {
    animation: blink-animation 0.6s ease-in-out 1;
}

.classroom-dispostion-active-off {
    color: white !important;
}

/* Bouton fratries */
.fraternity-button {
    background: transparent;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

    /* Fratrie refusée : ajout d'une barre */
    .fraternity-button.no-fraternity::after {
        content: "";
        position: absolute;
        top: 40%;
        left: 15%;
        width: 70%;
        height: 3px;
        background-color: white;
        transform: rotate(-45deg);
    }

    /* Hover effet */
    .fraternity-button:hover {
        filter: brightness(1.2);
    }

/* Corps pour déposer les élèves */
.classroom-disposition-body {
    flex-grow: 1;
    background-color: #f9f9f9;
    padding: 0.5rem;
    overflow-y: auto;
    border-top: 1px solid #eee;
    border-top: 1px solid #eee;
}

/* Élève affecté */
.assigned-student-pill {
    background-color: rgba(var(--primary-color-rgb), 0.05);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: var(--primary-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: grab;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .assigned-student-pill:hover {
        background-color: rgba(var(--primary-color-rgb), 0.1);
    }

/* Bouton suppression élève */
.remove-assignment-button {
    background: transparent;
    border: none;
    color: var(--important-color); /* Couleur rouge danger */
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 0 0 0.5rem;
    display: flex;
    align-items: center;
}

    .remove-assignment-button:hover {
        filter: brightness(1.2);
    }

.assigned-student-name-container {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.assignement-student-name {
    font-size: 0.7rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

emergency-disposition-assignement-student-name {
    font-size: 0.9rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.group-leader-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 1.2rem;
    color: gold; /* couleur or pour l'étoile */
}

    .group-leader-button .bi-star {
        color: gray; /* étoile vide */
    }

    .group-leader-button .bi-star-fill {
        color: goldenrod; /* étoile remplie */
    }

.popup-date-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.popup-date-error-message {
    height: 1.2em; /* réserve l'espace même si vide */
    font-size: 0.75rem;
    line-height: 1.2;
}

.classroom-disposition-edit-toggle-button {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;
}

    .classroom-disposition-edit-toggle-button:hover {
        filter: brightness(1.2);
    }

    .classroom-disposition-edit-toggle-button:focus {
        background-color: rgba(var(--secondary-color-rgb), 0.8) !important;
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }