/* ========================================
   MODULE MEMBRES — fiche d'une personne morale (EditMembre)
   ========================================
   Règles sorties du bloc <style> de la page le 04/10/2026 (lot smartphone 4a) : plus de trois
   règles responsive propres à la page, docs/ui-patterns.md §4. Paliers : mobile < 768,
   laptop 768–1599, desktop ≥ 1600 ; seule la grille des contacts a des règles ≥ 1600.

   Les sélecteurs de la grille des contacts sont ancrés sur table.contacts-grid : la fiche
   d'adhésion porte la même classe sur l'enveloppe de sa propre grille (.table-responsive
   .contacts-grid), qui a ses règles dans css/adhesions.css. Un sélecteur .contacts-grid nu
   masquait sa colonne Email en laptop.
*/

/* Permet au dropdown de la convention collective de s'étendre au-delà du conteneur */
.convention-select-container {
    position: relative;
}

.convention-select::part(listbox) {
    min-width: 500px;
    max-width: 80vw;
    width: max-content;
}

/* Laisse les lignes de la grille Contacts grandir en hauteur pour afficher tous les badges
   d'usages (pas de rognage en basse résolution).
   !important sur la cellule : FluentDataGrid y pose sa hauteur de rang en ligne
   (`height: 32px`), qui l'emportait. Les usages d'un contact débordaient alors de la ligne et
   la carte les rognait (signalement 477 ; même défaut qu'au 393 sur la fiche d'adhésion). */
table.contacts-grid .fluent-data-grid-row,
table.contacts-grid [role="row"] {
    height: auto;
    min-height: 32px;
}

table.contacts-grid [role="gridcell"] {
    height: auto !important;
    min-height: 32px;
    /* Sans étirement, chaque cellule garde sa propre hauteur dès qu'une ligne grandit, et les
       traits de séparation se décalent en escalier. */
    align-self: stretch;
    align-items: center;
    overflow: visible;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* La pastille de statut mesure 28px avec son cadre de survol : sous la marge commune, une
   ligne sans usage passait de 32 à 37px. */
table.contacts-grid td:nth-child(6) {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* Cellules-menu (colonnes Usages et Statut) : affordance de clic + chevron au survol */
.cell-menu {
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.cell-menu:hover {
    background: var(--neutral-fill-stealth-hover);
    border-color: var(--neutral-stroke-rest);
}

.cell-menu-chevron {
    display: inline-flex;
    align-items: center;
    opacity: 0.3;
    transition: opacity 0.1s ease;
}

.cell-menu:hover .cell-menu-chevron {
    opacity: 0.9;
}

.contacts-hint {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin: 2px 2px 6px;
}

.contacts-hint strong {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.statut-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    color: var(--error);
}

.statut-menu-item:hover {
    background: var(--neutral-fill-stealth-hover);
}

/* Affiliations patronales : deux cases 50/50 sur la largeur, alignées en haut
   (évite le décalage vertical quand un libellé passe sur deux lignes). */
.responsive-field-group.affiliations-row {
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

@media (max-width: 767.98px) {
    .responsive-field-group.affiliations-row {
        grid-template-columns: 1fr;
    }
}

/* Sous le palier Desktop (1600px), la carte Contacts est étroite : on masque la colonne
   Intitulé (souvent vide) pour laisser respirer les usages. */
@media (max-width: 1599.98px) {
    table.contacts-grid [role="row"] > :nth-child(4) {
        display: none !important;
    }
}

/* Portable (768–1599px) : la carte Contacts offre 536px à la grille sur un écran de 1366px,
   443px à 1200px. L'ancien gabarit en demandait 576 au minimum : à 1366px la colonne Statut
   sortait de la carte, le chevron de sa pastille rogné. Avec des marges de 16px, cinq
   colonnes ne laissaient par ailleurs que 370px au contenu ; ce qui suit rend de la largeur
   au texte sans retirer de colonne. */
@media (min-width: 768px) and (max-width: 1599.98px) {
    /* 6 pistes (les cellules ont un grid-column explicite, les lignes sont en
       display:contents) : Intitulé (4e) à 0, Statut à la largeur de sa pastille, le reste
       partagé. Aucun plancher en pixels : chaque piste a pour plancher son contenu
       insécable, c'est-à-dire son en-tête et, pour Usages, sa plus large étiquette. */
    table.contacts-grid {
        grid-template-columns: 1.6fr 1fr 1fr 0px 2fr max-content !important;
    }

    /* Les en-têtes portent un min-width de 100px en ligne, qui devenait le plancher de leur
       piste et faisait déborder le dernier hors de la grille. */
    table.contacts-grid thead th {
        min-width: auto !important;
    }

    /* Marges latérales de 8px ; les en-têtes suivent pour rester alignés sur leurs cellules. */
    table.contacts-grid [role="gridcell"],
    table.contacts-grid thead .col-title {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* FluentDataGrid réserve en ligne 10px à droite de chaque titre : l'en-tête se tronquait
       (« Fonc… ») sur une piste qui avait la place de le montrer. Le titre d'une colonne
       triable est un bouton, dont la marge est dans son part. */
    table.contacts-grid thead .col-title,
    table.contacts-grid thead .col-sort-button {
        width: 100% !important;
    }

    table.contacts-grid thead .col-sort-button::part(control) {
        padding-left: 6px;
        padding-right: 2px;
    }

    /* Nom, Position, Fonction : les cellules de cette grille sont en overflow visible (badges
       d'usages sur plusieurs rangs) et un texte long passait sur la colonne voisine, jusque
       sous les étiquettes d'usages. Il se tronque, la valeur entière est dans l'infobulle.
       Sans marge droite : celle de la colonne suivante sépare, et « Elu titulaire » tient
       à 1366px. */
    table.contacts-grid td:nth-child(-n+3) {
        overflow: hidden;
        padding-right: 0;
    }

    /* Usages : deux étiquettes par rang à 1366px. La marge gauche aligne sur l'en-tête. */
    table.contacts-grid td:nth-child(5) {
        padding-right: 4px;
    }

    /* Statut : le cadre de survol de la pastille porte déjà sa propre marge. */
    table.contacts-grid td:nth-child(6) {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Smartphone : le gabarit laptop de la grille Contacts demandait 576px au minimum et forçait
   toute la colonne de cartes à cette largeur (la fiche débordait de 230px). Restent Nom,
   Usages et Statut. Position, déjà réduite à « Coll… », ne laissait que 98px aux usages, une
   étiquette par rang : elle suit Fonction et Intitulé hors écran et se lit sur la fiche du
   contact (signalement 477). Statut prend la largeur de sa pastille, « Terminé » compris :
   à 60px, « Actif » en débordait sur un iPhone. */
@media (max-width: 767.98px) {
    table.contacts-grid {
        grid-template-columns: minmax(84px, 0.8fr) 0px 0px 0px minmax(140px, 2fr) minmax(60px, max-content) !important;
    }

    table.contacts-grid [role="row"] > :nth-child(2),
    table.contacts-grid [role="row"] > :nth-child(3) {
        display: none !important;
    }

    /* Nom : les cellules de cette grille sont en overflow visible (badges d'usages sur
       plusieurs rangs) ; un nom long chevauchait la colonne voisine. Il se tronque, les usages
       gardent leur retour à la ligne. */
    table.contacts-grid td:nth-child(1) {
        overflow: hidden !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Usages : deux étiquettes par rang. La cellule et son cadre de survol gardaient 46px de
       marges latérales sur 171px de colonne, et « Principal » ne tenait pas à côté de
       « Facturation ». La marge gauche reste : elle aligne les étiquettes sur l'en-tête. */
    table.contacts-grid td:nth-child(5) {
        padding-right: 4px;
    }

    table.contacts-grid td:nth-child(5) .cell-menu {
        padding-left: 2px;
        padding-right: 2px;
    }

    /* Statut : la pastille « Actif » suffit, le chevron de menu dépassait de la carte.
       L'en-tête prend la marge de sa cellule : à 16px il se réduisait à « St… ». */
    table.contacts-grid td:nth-child(6),
    table.contacts-grid thead th:nth-child(6) .col-title {
        padding-left: 8px;
        padding-right: 8px;
    }

    table.contacts-grid td:nth-child(6) .cell-menu {
        padding: 2px;
    }

    table.contacts-grid td:nth-child(6) .cell-menu-chevron {
        display: none;
    }

    /* En-têtes de carte à boutons (Identification, Contacts) : le titre et les boutons se
       rangent sur deux rangées plutôt que d'imposer 420px à la carte. */
    .fiche-entete-carte {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Menu « Détacher ce contact » : entrée à 40px pour le doigt. */
    .statut-menu-item {
        min-height: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* Bureau (1600px et plus) : les cellules de cette grille sont insécables et en débordement
   visible, pour les badges d'usages sur plusieurs rangs. Chaque piste `auto` prenait donc la
   largeur de son texte le plus long : un intitulé long poussait Usages et Statut hors de la
   carte, qui rogne (colonnes invisibles à 1920px), et la grille en sortait encore à 2560px.
   Les quatre colonnes de texte redeviennent tronquables, la valeur entière est dans
   l'infobulle : une piste `auto` a alors son en-tête pour plancher et son contenu pour
   plafond, et la place qui manque se partage entre les colonnes trop longues. Des pistes
   en `fr`, comme au palier portable, tronqueraient un intitulé long sur un écran 4K où il
   tient : ici, quand tout tient, chaque colonne garde la largeur de son contenu. */
@media (min-width: 1600px) {
    /* Les pistes posées en ligne par FluentDataGrid, avec un plancher sur Nom : le partage
       se fait à parts égales depuis les en-têtes, et le nom, qui identifie la ligne, se
       tronquait autant qu'un intitulé. */
    table.contacts-grid {
        grid-template-columns: minmax(170px, auto) auto auto auto auto 96px !important;
    }

    /* Les en-têtes portent un min-width de 100px en ligne : à 1600px la carte offre 683px,
       six planchers de 100px ne laissaient rien à partager, et celui de Statut dépassait de
       sa piste de 96px. */
    table.contacts-grid thead th {
        min-width: auto !important;
    }

    /* FluentDataGrid réserve en ligne 10px à droite de chaque titre : sur une colonne vide,
       réduite à son en-tête, « Fonction » devenait « Fonc… ». Le bouton de tri est centré
       dans cette réserve : il garde ses 5px de gauche, sans quoi son titre quitte l'aplomb
       des cellules. */
    table.contacts-grid thead .col-title {
        width: 100% !important;
    }

    table.contacts-grid thead .col-sort-button {
        width: calc(100% - 5px) !important;
        margin-left: 5px;
    }

    table.contacts-grid td:nth-child(-n+4) {
        overflow: hidden;
    }

    /* Statut : avec la marge commune de 16px, la cellule de 96px ne laissait que 64px à une
       pastille de 73, dont le chevron dépassait du cadre de survol. */
    table.contacts-grid td:nth-child(6) {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* De 1600 à 1919px la carte n'est pas plus large que sur un portable (683px à 1600px comme
   à 1599px) : six colonnes y tenaient, mais « Collaborateur » se réduisait à « Collabor… »
   sur chaque ligne et les usages passaient un par rang. Intitulé reste donc masqué, comme
   sous 1600px, jusqu'à ce que la carte atteigne 875px ; il se lit sur la fiche du contact.
   Seuil propre à cette grille, hors des trois paliers (docs/ui-patterns.md §4). */
@media (min-width: 1600px) and (max-width: 1919.98px) {
    table.contacts-grid {
        grid-template-columns: minmax(170px, auto) auto auto 0px auto 96px !important;
    }

    table.contacts-grid [role="row"] > :nth-child(4) {
        display: none !important;
    }
}