/* Classes CSS reutilisables pour rendre un tableau perso du module utilisable sur mobile.
   A inclure via custom_css. (en plus de style.css) sur toute page qui en a besoin, et a poser sur
   le <table> concerne en plus de ses classes existantes (ex. class="list table-caisse
   table-mobile-compact"). Voir Conseils.md, section "CSS dans les gabarits de page admin". */

/* Wrapper a poser autour du <table> (<div class="table-scroll"><table>...</table></div>) pour
   permettre un defilement horizontal si jamais le tableau reste plus large que l'ecran malgre
   table-mobile-compact. */
.table-scroll {
    overflow-x: auto;
}

/* Corrige un bug connu de rendu Paheko : un tableau perso peut afficher ses colonnes empilees
   verticalement sur mobile (chaque td sur sa propre ligne, façon fiche) sans qu'aucune media
   query ne l'explique. Cause exacte non trouvee - ce forçage de display corrige le symptome quel
   qu'en soit la cause. */
.table-mobile-compact {
    display: table !important;
    width: 100%;
}

.table-mobile-compact tr {
    display: table-row !important;
}

.table-mobile-compact th,
.table-mobile-compact td {
    display: table-cell !important;
}

/* En table-layout: auto (par defaut), le navigateur base la largeur de chaque colonne sur son
   contenu le plus large, en-tete inclus - un en-tete long peut ainsi voler de la place a une
   colonne de montant voisine et la faire passer a la ligne. A poser sur toute cellule qui ne doit
   jamais se couper (montant, date courte...) : force le navigateur a lui reserver assez de
   largeur plutot que de laisser une autre colonne l'affamer. */
.cell-nowrap {
    white-space: nowrap;
}

/* Le reste (padding/police reduits, select natifs resserres) est volontairement limite au
   mobile : sur PC on reste au plus pres du rendu natif Paheko. th et td partagent le meme
   font-size (sinon le style natif Paheko rend les entetes disproportionnes) ; le gras des
   entetes est conserve explicitement (sinon perdu au passage en !important). */
@media (max-width: 600px) {
    .table-mobile-compact th,
    .table-mobile-compact td {
        padding: 0.15em 0.1em;
        font-size: 0.8em !important;
        /* Contenu centre verticalement : une cellule sur 2 lignes (date, libelle long) ne colle
           plus en haut a cote d'une cellule d'une seule ligne (Olivier, 2026-09-26). !important :
           sans lui, la regle native "table.list td" (plus specifique) reste appliquee, sans effet
           visible. */
        vertical-align: middle !important;
    }

    .table-mobile-compact th {
        font-weight: bold !important;
    }

    .table-mobile-compact select {
        max-width: 100%;
        padding: 1px 2px;
        font-size: inherit;
    }

    /* Date en 2 lignes sur mobile : a poser sur le <span> qui contient "/AAAA", colle juste apres
       le jour et le mois ("19/08" puis "/2026" en dessous). Sur PC le span reste en ligne, donc
       rendu identique a date_short. Exemple : jour/mois via date_format '%d/%m', puis le span avec
       l'annee via date_format '%Y' (voir bilan/index.html ou rechercher.html). */
    .date-annee-mobile {
        display: block;
    }
}

/* Colonne Mél (vue Présence, inscription.html) : masquée en portrait mobile uniquement quand
   les inscriptions sont fermées, pour laisser la place à la colonne P A E qui apparaît à ce
   moment-là (Olivier, 2026-08-12). Sélecteur aussi précis que la règle table-mobile-compact
   ci-dessus (2 classes) pour l'emporter malgré le display:table-cell !important commun. */
@media (max-width: 600px) and (orientation: portrait) {
    .table-mobile-compact th.col-hide-portrait-fermees,
    .table-mobile-compact td.col-hide-portrait-fermees {
        display: none !important;
    }
}