/* ==========================================================================
   Sous-activités (#5064)
   - paramétrage du type d'activité : liste des types proposés
   - swal de création : choix du type, horaires, liste du personnel à cocher
   Aucune couleur en dur : le produit se rend en thème clair ET sombre, seules
   les variables de thème suivent les deux.
   ========================================================================== */

/* --- Paramétrage du type d'activité --------------------------------------
   Une seule ligne, dans la carte « Comportement » : libellé à gauche, liste
   déroulante à droite, comme les autres lignes de cette carte. Le sélecteur
   prend toute la largeur de sa colonne — sans cela bootstrap-select se réduit
   à la largeur de son texte et le contrôle flotte au milieu de la cellule. */

.eb-sousact-select {
    width: 100%;
}

/* --- Swal de création d'une sous-activité --------------------------------- */

.eb-sousact-form {
    text-align: left;
    max-width: 560px;
}

.eb-sousact-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.eb-sousact-ligne > label {
    flex: 0 0 130px;
    max-width: 130px;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 0.9em;
}

.eb-sousact-ligne > .eb-sousact-champ {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 8px;
}

.eb-sousact-ligne input.form-control,
.eb-sousact-ligne select.form-control {
    min-width: 0;
}

/* Les deux heures se partagent la ligne à parts égales plutôt que de laisser
   la première occuper toute la largeur disponible. */
.eb-sousact-heures > .eb-sousact-champ > input {
    flex: 1 1 50%;
}

.eb-sousact-personnel {
    border: 1px solid var(--bkg-color108);
    border-radius: 6px;
    margin-top: 4px;
}

.eb-sousact-personnel-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--bkg-color108);
    font-size: 0.9em;
}

.eb-sousact-personnel-actions {
    display: flex;
    gap: 6px;
}

/* Liste du personnel.

   SUR PETIT ÉCRAN, la hauteur est bornée : une garde de trente personnes
   pousserait sinon le bouton de validation hors de l'écran. La liste a donc
   son propre ascenseur.

   SUR GRAND ÉCRAN, la borne saute. Elle produisait DEUX ascenseurs verticaux
   côte à côte — celui de la liste et celui de la fenêtre — et il fallait
   deviner lequel faisait défiler quoi. La fenêtre garde le sien, qui suffit. */
.eb-sousact-personnel-liste {
    max-height: 220px;
    overflow-y: auto;
    padding: 6px 10px;
}

@media (min-height: 700px) {
    .eb-sousact-personnel-liste {
        max-height: none;
        overflow-y: visible;
    }
}

.eb-sousact-personne {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.eb-sousact-personne label {
    margin-bottom: 0;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eb-sousact-vide {
    padding: 10px;
    font-size: 0.9em;
    color: var(--txt-color3);
    opacity: 0.8;
}

.eb-sousact-erreur {
    color: var(--bs-red, #dc3545);
    font-size: 0.9em;
    margin-top: 6px;
    min-height: 1.2em;
}

/* --- Sous-activités listées sur la fiche de la source --------------------- */

.eb-sousact-rattachees {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.eb-sousact-puce {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--bkg-color108);
    border-radius: 12px;
    font-size: 0.85em;
    text-decoration: none;
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 767px) {
    .eb-sousact-ligne {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .eb-sousact-ligne > label {
        flex: 1 1 auto;
        max-width: 100%;
        text-align: left;
    }
}

/* --- Thèmes de formation (sous-onglet du module Formation) ---------------- */

.eb-theme-form {
    text-align: left;
}

.eb-theme-actif {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: normal;
}

/* Poignée de réordonnancement : discrète au repos, franche au survol de la
   ligne — l'ordre affiché est l'ordre proposé à la création, il faut que le
   geste se devine sans l'annoncer. */
.eb-theme-poignee {
    cursor: grab;
    opacity: 0.35;
    transition: opacity .15s;
    display: inline-block;
    width: 16px;
    color: var(--txt-color3);
}

tr:hover .eb-theme-poignee,
.eb-theme-poignee:hover {
    opacity: 1;
}

.sortable-chosen .eb-theme-poignee {
    cursor: grabbing;
    opacity: 1;
}

/* Sélecteur de fonction par participant : discret, aligné à droite de la ligne,
   il ne doit pas concurrencer le nom qu'il accompagne. */
.eb-sousact-personne .sousact-fonction {
    margin-left: auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 45%;
    font-size: 0.85em;
    padding: 1px 6px;
    height: auto;
}

.eb-sousact-ico-theme {
    color: var(--txt-color3);
    width: 16px;
}

/* Puce de remontée vers l'activité d'origine : même forme que les puces de
   descente, une teinte d'accent pour dire le sens du lien. */
.eb-sousact-puce-source {
    border-color: var(--eb-primary, #2563eb);
    color: var(--eb-primary, #2563eb);
}

.eb-sousact-puce-ico {
    transform: rotate(-90deg);
    font-size: 0.8em;
    opacity: 0.7;
}

/* Puces de navigation dans l'en-tête de la fiche activité : la ligne meta est
   une flexbox, la liste de puces doit pouvoir passer à la ligne sans étirer
   les autres items (date, horaires, adresse). */
.evd-hero-meta .eb-sousact-item {
    align-items: flex-start;
}

.evd-hero-meta .eb-sousact-rattachees {
    margin-top: 0;
}

/* Rappel de l'activité d'origine, en tête de la fenêtre de création : une
   phrase, pas un champ. Elle se distingue des lignes de saisie qui la suivent
   par sa pleine largeur et son fond léger — sans quoi elle se lisait comme un
   premier champ à remplir.

   DEUX LIGNES : l'intitulé au-dessus, la désignation datée en dessous. Sur une
   seule ligne la phrase devenait longue, et son début — le seul mot qui dit ce
   qu'on est en train de faire — se perdait au milieu. */
.eb-sousact-entete {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: var(--bkg-color108, #f1f5f9);
    line-height: 1.4;
}

.eb-sousact-entete-quoi {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--txt-color3);
    opacity: 0.85;
}

.eb-sousact-entete-source {
    font-size: 0.95em;
}

/* Boutons de la fenêtre : de l'air au-dessus ET EN DESSOUS. `mt-3` seul ne
   donnait qu'une marge haute, et les boutons se retrouvaient collés au bord
   inférieur de la fenêtre — on visait « Créer » à un ou deux pixels du vide. */
.eb-sousact-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 0;
    padding-bottom: 18px;
}