/**
 * Bootstrap-table — overrides globaux eBrigade.
 *
 * Objectif : zéro scroll horizontal sur toutes les tables bootstrap-table.
 *
 * Chargé après bootstrap-table.min.css (qui pose overflow-x:auto nativement),
 * ce fichier l'écrase avec des sélecteurs plus spécifiques + !important.
 *
 * Principe :
 *   1. overflow-x:hidden sur les conteneurs (.fixed-table-header / .fixed-table-body).
 *   2. table-layout:fixed + width:100% sur les <table> internes → la table reste
 *      dans son conteneur ; les colonnes respectent leur data-width en px.
 *   3. Toutes les cellules tronquent leur texte (ellipsis).
 *   4. Les cellules interactives (checkbox) gardent overflow-y:visible seulement.
 *   5. Au survol, le texte déborde PAR DESSUS la cellule voisine (z-index)
 *      sans déclencher de scroll (overflow-x reste hidden).
 */

/* ── 1. Conteneurs ───────────────────────────────────────────────────────── */
.bootstrap-table .fixed-table-container .fixed-table-header,
.bootstrap-table .fixed-table-container .fixed-table-body {
    overflow-x: hidden !important;
}

/* ── 2. Tables internes ──────────────────────────────────────────────────── */
.bootstrap-table .fixed-table-container .fixed-table-header > table,
.bootstrap-table .fixed-table-container .fixed-table-body  > table,
.bootstrap-table .fixed-table-container .fixed-table-body table.table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

/* ── 3. Cellules : truncation globale ────────────────────────────────────── */
.bootstrap-table .fixed-table-container .fixed-table-header table > thead > tr > th,
.bootstrap-table .fixed-table-container .fixed-table-body  table > thead > tr > th,
.bootstrap-table .fixed-table-container .fixed-table-body  table > tbody > tr > td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ── 3bis. Cellules image (avatar, vignette) : pas d'ellipsis ────────────── */
/* Une cellule dont le contenu est une image (avatar perso, logo, vignette)
   ne doit jamais afficher le « … » : en table-layout:fixed l'image, plus
   large que la colonne, déborde et déclenche un ellipsis fantôme à sa droite.
   On garde overflow:hidden (clip) mais on retire le glyphe ; l'image, centrée
   et de taille fixe, reste lisible. */
.bootstrap-table .fixed-table-container .fixed-table-body table > tbody > tr > td:has(> img),
.bootstrap-table .fixed-table-container .fixed-table-body table > tbody > tr > td:has(> a > img),
.bootstrap-table .fixed-table-container .fixed-table-body table > tbody > tr > td:has(> svg) {
    text-overflow: clip !important;
}

/* ── 4. Cellules checkbox : overflow-y visible, overflow-x toujours caché ── */
.bootstrap-table .fixed-table-container .fixed-table-header table > thead > tr > th.bs-checkbox,
.bootstrap-table .fixed-table-container .fixed-table-body  table > thead > tr > th.bs-checkbox,
.bootstrap-table .fixed-table-container .fixed-table-body  table > tbody > tr > td.bs-checkbox {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    text-overflow: clip !important;
}

/* ── 5. Survol : révèle le contenu par-dessus la cellule voisine ─────────── */
/* overflow-x reste hidden → pas de scroll horizontal déclenché au hover. */
.bootstrap-table .fixed-table-container .fixed-table-body table > tbody > tr > td:hover {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    position: relative;
    z-index: 5;
    background: var(--bkg-color-1, #fff);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

/* ── 6. Liste des sociétés (company.php → #company_stats) ─────────────────── */
/* Demande #10395 (suivi) : le nom du client ne doit JAMAIS être tronqué.
   On annule l'ellipsis globale (§3) sur la colonne "Nom" (2e colonne — les
   <td> du corps n'ont pas de data-field, seul le <th> en porte un) : on
   élargit la colonne et on autorise le retour à la ligne au lieu de couper.
   Scopé à #company_stats pour ne pas impacter les autres tables. */
#company_stats .fixed-table-body table > thead > tr > th[data-field="nom"],
#company_stats .fixed-table-body table > tbody > tr > td:nth-child(2) {
    width: 24% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
}

/* ── 7. Fiche personnel — onglet Activité (#10525) ────────────────────────── */
/* Desktop : sans largeur explicite, bootstrap-table laissait la colonne IMAGE
   absorber l'espace libre (icône 40px noyée dans une cellule très large). On la
   pince au strict nécessaire ; le surplus revient aux colonnes ACTIVITÉ /
   DESCRIPTION. La règle mobile ci-dessous (50px) reste prioritaire en dessous
   de 992px. */
th.eb-col-activity-icon,
td.eb-col-activity-icon {
    width: 64px !important;
    max-width: 64px !important;
}
/* Sur mobile, l'icône d'activité (img-max-35 → 35px) prenait jusqu'à 1/4 de
   l'écran faute de contrainte de largeur, ce qui poussait la colonne BOUTON
   à être tronquée (tampon TERMINÉ / boutons inscription coupés à droite).
   On pince la colonne au strict nécessaire pour rendre la place gagnée
   aux colonnes ACTIVITÉ et BOUTON, sans introduire de scroll horizontal. */
@media (max-width: 992px) {
    th.eb-col-activity-icon,
    td.eb-col-activity-icon {
        width: 50px !important;
        max-width: 50px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
}

/* ── 8. Liste d'activités (planning → #table) : colonne Localisation ──────── */
/* La troncature globale (§3) force white-space:nowrap + ellipsis sur TOUT <td>.
   L'adresse est rendue en plusieurs <div class="adresse_td"> (rue / ville) :
   chaque ligne se faisait donc couper en plein milieu ("rue amiral courbet
   56100…") avec une longueur différente d'une cellule à l'autre, d'où un rendu
   irrégulier. On autorise le retour à la ligne sur cette seule colonne pour
   afficher l'adresse complète proprement. Scopé au tableau de la liste
   d'activités (#table — 3e colonne : Id, Activité, Localisation). */
#table > tbody > tr > td:nth-child(3) {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.35;
}
#table > tbody > tr > td:nth-child(3) .adresse_td {
    white-space: normal !important;
}

/* ── 9. Paramétrage interventions (#10708) : colonnes Nom ────────────────── */
/* Les libellés longs de statuts et types d'intervention doivent rester lisibles
   dans les cards étroites de la page de paramétrage. On annule la troncature
   globale uniquement sur la colonne Nom de ces deux tables.
   ⚠ La 1re colonne (« Code ») est data-visible="false" → bootstrap-table la
   retire du DOM, donc « Nom » est rendu en td:nth-child(1), pas (2). Le premier
   correctif ciblait (2) = la colonne Couleur/Catégorie, sans effet sur Nom. */
#tableStatus > thead > tr > th[data-field="name"],
#tableStatus > tbody > tr > td:nth-child(1),
#type_intervention_table > thead > tr > th[data-field="name"],
#type_intervention_table > tbody > tr > td:nth-child(1) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.35;
}

/* ── 10. Liste activités d'une personne (#10525) : colonne BOUTON ─────────── */
/* La largeur fixe (numberButton × 60 = 180px) + la troncature globale
   (§3 : overflow:hidden + white-space:nowrap) clippaient le CTA d'inscription
   (« Se désinscrir|e » coupé) et son bandeau FERMÉE/TERMINÉE en biais. On lève
   la troncature ET la largeur fixe sur cette seule colonne (desktop comme
   mobile) pour que le bouton s'affiche en entier, la colonne se dimensionnant à
   son contenu. overflow:visible laisse le bandeau déborder du bouton. Scopé à
   la classe data-class dédiée → aucun impact sur les autres tables partageant
   l'id générique #table. */
#table > tbody > tr > td.eb-col-activity-button {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}
@media (max-width: 992px) {
    /* Sur mobile la colonne se dimensionne à son contenu et le libellé peut
       repasser à la ligne si l'écran est très étroit. */
    #table > tbody > tr > td.eb-col-activity-button {
        width: auto !important;
        max-width: none !important;
        min-width: 96px !important;
        white-space: normal !important;
    }
}

/* ── 10b. Liste activités d'une personne : colonne ACTIVITÉ (badge fonction) ── */
/* Le badge fonction (.eb-chip, ex. « Responsable des Opérations de Secours »)
   débordait sur DESCRIPTION car la troncature globale (§3) le forçait sur une
   seule ligne. On l'autorise à passer à la ligne dans sa cellule. La colonne
   est par ailleurs élargie (DATE / TYPE bornées en data-width côté PHP). */
#table > tbody > tr > td .eb-chip {
    white-space: normal !important;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* ── 11. Dotation (fiche personnel, onglet 5) : colonne Type / Nom ───────── */
/* Les tables de dotation (Tenue / Matériel / Véhicule / Animal) affichent un
   libellé long en 2e colonne (« Dotation - Cache-col XL »…). La troncature
   globale (§3) le coupait en plein milieu (« Dotation - Cac »). On autorise le
   retour à la ligne sur cette seule colonne pour afficher le type complet.
   Scopé aux ids des 4 tables → aucun impact ailleurs. Le <th> porte le
   data-field ; le <td> du corps n'en a pas → ciblé en nth-child(2). */
#tenue_dotation > thead > tr > th[data-field="type"],
#tenue_dotation > tbody > tr > td:nth-child(2),
#materiel_dotation > thead > tr > th[data-field="type"],
#materiel_dotation > tbody > tr > td:nth-child(2),
#vehicule_dotation > thead > tr > th[data-field="type"],
#vehicule_dotation > tbody > tr > td:nth-child(2),
#animal_dotation > thead > tr > th[data-field="nom"],
#animal_dotation > tbody > tr > td:nth-child(2) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.35;
}

/* ── 11b. Activité > Véhicule : colonne Propriété ───────────────────────── */
/* La cellule contient plusieurs indicateurs courts (assurance, révision, km...)
   rendus en flex. La troncature globale (§3) les gardait sur une seule ligne et
   rognait les derniers indicateurs. On limite l'exception à cette structure
   métier pour conserver le comportement des autres colonnes bootstrap-table. */
#table > tbody > tr > td:has(> .ensemble_propriete_vehicule) {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35;
}
#table > tbody > tr > td > .ensemble_propriete_vehicule {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 10px;
}
#table > tbody > tr > td > .ensemble_propriete_vehicule .propriete_vehicule {
    min-width: max-content;
    margin-left: 0;
}

/* ── 12. Dotation — gain de largeur sur mobile ───────────────────────────── */
/* Sur petit écran, les tables de dotation n'avaient que ~272px (sur 375) : le
   reste partait en padding emboîté (grille 16px + card-body 20px + container
   4px de chaque côté). La colonne Type était écrasée et la colonne Bouton
   tronquait ses 2 actions. On récupère ce padding pour élargir la table, et on
   compacte les cellules (padding interne + boutons d'action) afin que Type
   reste lisible et que les boutons tiennent. Scopé à la grille de dotation. */
@media (max-width: 767.98px) {
    /* cellules plus compactes pour rendre la largeur aux colonnes utiles
       (la réduction du padding de la card est dans upd_personnel_modern.css,
       où elle peut battre la règle hero-lite plus spécifique). */
    .upd-personnel-dotation-grid .fixed-table-body table > tbody > tr > td,
    .upd-personnel-dotation-grid .fixed-table-header table > thead > tr > th {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    /* colonne Bouton : on empile les 2 actions verticalement → la colonne tient
       dans peu de largeur sans tronquer (le scaling table-layout:fixed la
       comprimait sous 60px et coupait la corbeille). */
    #tenue_dotation > tbody > tr > td:last-child,
    #materiel_dotation > tbody > tr > td:last-child,
    #vehicule_dotation > tbody > tr > td:last-child,
    #animal_dotation > tbody > tr > td:last-child {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        overflow: visible !important;
    }
    #tenue_dotation > tbody > tr > td:last-child form,
    #materiel_dotation > tbody > tr > td:last-child form,
    #vehicule_dotation > tbody > tr > td:last-child form,
    #animal_dotation > tbody > tr > td:last-child form {
        margin: 0;
    }
}