/**
 * badou-toggle.css — Composant partagé « liste à interrupteurs »
 *
 * Le toggle iOS (input[type=checkbox] restylé, piste + pastille en ::before)
 * et les pastilles « Tous / Aucun », extraits du dialog « Vue & plannings »
 * de planning_equipe_hebdo (source unique des styles depuis le 16/07/2026).
 *
 * Deux jeux de sélecteurs pour le même rendu :
 *  - .peh4-* : classes historiques du planning équipe hebdo (inchangées) ;
 *  - .bb-*   : classes neutres pour les nouveaux usages (dialog d'activation
 *              du hub Équipe, wizard « Créer mon équipe »…), généralement
 *              posées par js/modules/BadouToggleList.js.
 */

/* --- Pastilles « Tous / Aucun » --- */
.peh4-view-pills,
.bb-toggle-pills { display: inline-flex; gap: 0.35rem; }

.peh4-view-pill,
.bb-toggle-pill {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #007ca1;
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.peh4-view-pill:hover,
.bb-toggle-pill:hover { background: #e6f6fb; border-color: #007ca1; }

.peh4-view-pill:active,
.bb-toggle-pill:active { background: #007ca1; color: #fff; border-color: #007ca1; }

.peh4-view-pill:disabled,
.bb-toggle-pill:disabled { opacity: 0.45; cursor: default; background: #f1f5f9; }

.peh4-view-pill:disabled:hover,
.bb-toggle-pill:disabled:hover { background: #f1f5f9; border-color: #cbd5e1; color: #007ca1; }

/* --- Ligne « libellé + interrupteur » --- */
.peh4-switch-row,
.bb-switch-row { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.92rem; color: #334155; }

.peh4-switch-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Variante bb- : lisibilité renforcée (public 60+) — taille pleine, PAS
   d'ellipsis : le sous-libellé (l'email) passe à la ligne, complet et
   suffisamment gros pour être vérifié avant d'envoyer le lien d'activation */
.bb-switch-row { font-size: 1rem; }

.bb-switch-label { flex: 1 1 auto; min-width: 0; }

.bb-switch-sub {
    display: block;
    color: #475569;
    font-size: 0.95em;
    font-weight: normal;
    overflow-wrap: anywhere;
}

.peh4-switch,
.bb-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 23px;
    margin: 0;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.18s ease;
}

.peh4-switch::before,
.bb-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease;
}

.peh4-switch:checked,
.bb-switch:checked { background: #007ca1; }

.peh4-switch:checked::before,
.bb-switch:checked::before { transform: translateX(17px); }

.peh4-switch:focus-visible,
.bb-switch:focus-visible { outline: 2px solid #007ca1; outline-offset: 2px; }

.peh4-switch:disabled,
.bb-switch:disabled { cursor: default; opacity: 0.5; }

/* --- Habillage de liste (nouveaux usages via BadouToggleList) --- */
.bb-toggle-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.bb-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 300px;
    overflow-y: auto;
    text-align: left;
}

.bb-toggle-list .bb-switch-row {
    padding: 0.35rem 0.2rem;
    border-bottom: 1px solid #eef2f7;
}

.bb-toggle-count {
    margin-top: 0.7rem;
    font-weight: 600;
    color: #007ca1;
    text-align: center;
}