/*
 * tables.css
 * -----------------------------------------------------------------------------
 * En-têtes de colonnes figés en haut des grands tableaux, pour garder le nom
 * des colonnes sous les yeux quand on descend loin dans la liste.
 *
 * Chargé par layouts/app.blade.php : s'applique à tous les tableaux .table
 * de l'application.
 *
 * Pourquoi limiter la hauteur de .table-responsive : ce conteneur défile
 * horizontalement (overflow-x), ce qui en fait le repère de position:sticky.
 * Un en-tête sticky ne peut donc pas se coller au haut de la PAGE, seulement
 * au haut de ce conteneur. On lui donne la hauteur de l'écran et un
 * défilement vertical propre : le tableau défile à l'intérieur et l'en-tête
 * reste visible. Les tableaux hors .table-responsive se collent, eux,
 * directement au haut de la fenêtre.
 */

.table-responsive {
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    /* Un fond opaque, sinon les lignes défilent visiblement sous l'en-tête
       (même teinte que .thead-light d'Argon). */
    background-color: #f6f9fc;
    /* Avec border-collapse, la bordure basse du th ne suit pas le sticky :
       on la redessine en ombre intérieure. */
    box-shadow: inset 0 -1px 0 #e9ecef;
}

/*
 * En-têtes triables (partials/th-sort.blade.php) : le lien garde l'apparence
 * de l'en-tête, l'icône signale la colonne et le sens du tri en cours.
 */
.th-sort {
    color: inherit;
}

.th-sort:hover,
.th-sort:focus,
.th-sort.active {
    color: #5e72e4;
}

.th-sort .fas {
    opacity: .35;
}

.th-sort:hover .fas,
.th-sort.active .fas {
    opacity: 1;
}