/* =========================================
   Variables
   ========================================= */
:root {
    --paired-class-a: #2e7d32; /* vert classe A */
    --paired-class-b: #1e88e5; /* bleu classe B */
    --paired-group-width: 320px; /* largeur fixe d’une carte Groupe */
}

/* =========================================
   Layout de page (2 colonnes)
   ========================================= */
/* Forcer 2 colonnes quand .content impose un display */
.content.paired-classes-container {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: 2rem;
    align-items: stretch;
    min-height: 0;
}

    .content.paired-classes-container .paired-left-column {
        border-right: 1px solid #e9ecef;
        padding-right: 1rem;
        min-width: 0;
        display: flex; /* prépare le scroll interne */
        flex-direction: column;
        min-height: 0;
    }

    .content.paired-classes-container .paired-classes-right-column {
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

/* Grille interne (Classe associée | Groupes) */
.paired-main-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    min-height: 0;
}

.paired-associated-col,
.paired-groups-col {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* =========================================
   Header de classe DS (partagé A & B)
   ========================================= */

.pc-classroom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.8rem;
    background: var(--mts-primary-600, #124e5d);
    border-radius: 8px;
}

.pc-classroom-header-label {
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mts-secondary-400, #d4a017);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-classroom-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    flex-shrink: 0;
}

/* =========================================
   Items élèves DS (partagés A & B)
   ========================================= */

.pc-student-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
    padding-right: 0.1rem;
}

.pc-student-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: color-mix(in srgb, var(--mts-primary-500, #155767) 8%, white);
    border: 1px solid color-mix(in srgb, var(--mts-primary-500, #155767) 15%, white);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    cursor: grab;
    transition: background 0.15s;
    min-width: 0;
}

.pc-student-item:hover {
    background: color-mix(in srgb, var(--mts-primary-500, #155767) 16%, white);
}

.pc-student-name {
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.pc-drag-icon {
    font-size: 1rem;
    color: var(--mts-secondary-500, #b8860b);
    flex-shrink: 0;
}

/* =========================================
   Racines des composants de listes (A & B)
   ========================================= */
.paired-classroom-list-container,
.paired-associated-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* indispensable pour permettre le scroll interne */
    min-width: 0;
}

/* Zone de scroll interne pour listes élèves (A et B) */
.paired-student-scroll {
    flex: 1;
    min-height: 260px;
    min-width: 0;
    overflow: auto;
    padding-right: .25rem; /* évite chevauchement scrollbar */
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

/* =========================================
   Bandeaux & en-têtes
   ========================================= */
.paired-help-alert {
    margin-bottom: .8rem;
}

.paired-help-content {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.06rem;
    padding: .8rem 1rem;
    border-radius: 12px;
    font-weight: 600;
}

    .paired-help-content.info {
        background: #e8f1ff;
        color: #0b4bb3;
        border: 1px solid #cfe1ff;
    }

    .paired-help-content.success {
        background: #e8f7ee;
        color: #136e39;
        border: 1px solid #cfeedd;
    }

.classroom-disposition-header.pretty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem .6rem .35rem .8rem;
    border-radius: 10px;
    border: 1px solid #e8edf3;
    margin-bottom: .5rem;
}

    .classroom-disposition-header.pretty .title {
        font-weight: 700;
        font-size: 1.05rem;
    }

/* Fieldset “Classe associée” avec légende */
.paired-fieldset {
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    padding: .75rem 1rem 1rem;
    margin: 0;
    min-width: 0;
}

    .paired-fieldset > legend {
        font-weight: 700;
        font-size: .95rem;
        padding: 0 .5rem;
        color: #2e3c4c;
    }

/* =========================================
   Zone Groupes
   ========================================= */
/* Scroll global vertical uniquement pour les groupes */
.paired-groups-scroll {
    overflow: auto;
    min-height: 0;
    flex: 1;
    padding-right: .25rem;
}

/* Les cartes de groupes : affichage en ligne, wrap automatique */
.paired-groups-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    align-content: start;
    min-width: 0;
}

/* Carte Groupe */
.paired-group-card {
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(16,24,40,.06);
    transition: box-shadow .2s ease, transform .2s ease;
    position: relative;
    min-width: 0;
}

    .paired-group-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--important-color);
        opacity: .7;
    }

    .paired-group-card:hover {
        box-shadow: 0 6px 18px rgba(16,24,40,.12);
        transform: translateY(-1px);
    }

/* Header de carte */
.paired-group-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem .35rem .6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: var(--mts-primary-700, #0e3f4a);
}

.paired-group-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--mts-secondary-400, #d4a017);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge compact */
.badge-light-compact,
.badge.badge-light-compact {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 .5rem;
    border-radius: 999px;
    font-size: .8rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Bouton supprimer dans le header sombre */
.paired-group-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}

.paired-group-delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Corps de carte : 2 colonnes A|B */
.paired-group-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    padding: .45rem .6rem .6rem .6rem;
    min-width: 0;
}

    /* Distinction visuelle des colonnes A / B */
    .paired-group-body > ul:first-child {
        background: rgba(46,125,50,.06);
        border: 1px solid rgba(46,125,50,.15);
        border-radius: 10px;
        padding: .4rem;
    }

    .paired-group-body > ul:last-child {
        background: rgba(30,136,229,.06);
        border: 1px solid rgba(30,136,229,.15);
        border-radius: 10px;
        padding: .4rem;
    }

/* Listes verticales (sans scroll interne) + correctif du décalage des prénoms */
.paired-student-vertical {
    display: flex;
    flex-direction: column; /* vertical */
    gap: .25rem; /* espace vertical entre prénoms */
    align-items: flex-start; /* bien aligné à gauche */
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}
    /* Neutralise la marge horizontale héritée des pills en contexte vertical */
    .paired-student-vertical .pill + .pill {
        margin-left: 0;
    }

/* Pills élèves */
.pill {
    display: inline-flex;
    align-items: center;
    padding: .24rem .45rem;
    border-radius: 999px;
    font-size: .85rem;
    line-height: 1;
    border: 1px solid #e6eaf0;
    background: #fff;
    color: #2e3c4c;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
    /* Espace horizontal entre pills en contexte horizontal (non vertical) */
    .pill + .pill {
        margin-left: .35rem;
    }

    /* Couleurs A/B */
    .pill.a-item {
        border-color: rgba(46, 125, 50, .25);
        background: rgba(46, 125, 50, .08);
        color: #215628;
    }

    .pill.b-item {
        border-color: rgba(30, 136, 229, .25);
        background: rgba(30, 136, 229, .08);
        color: #0e4f8b;
    }

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 1200px) {
    .content.paired-classes-container {
        column-gap: 1rem;
    }
}

@media (max-width: 992px) {
    /* La grille interne passe en 1 colonne */
    .paired-main-grid {
        grid-template-columns: 1fr;
    }

    .paired-groups-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    /* La colonne gauche passe au-dessus si besoin */
    .content.paired-classes-container {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

        .content.paired-classes-container .paired-left-column {
            border-right: none;
            border-bottom: 1px solid #e7e7e7;
            padding-right: 0;
            padding-bottom: 1rem;
        }

    .paired-groups-list {
        grid-template-columns: 1fr;
    }
}