/*
 * Listes de présences mobile — structure transversale canonique.
 * Source unique mobile/tablette pour la structure commune des sections et lignes.
 * Les variantes métier/visuelles propres à Pointage, Réservation et Historique
 * restent dans leurs feuilles spécialisées.
 */

@media (max-width:1050px){
  .participants-list-eyebrow,
  .reservation-list-eyebrow{
    display:none;
  }

  .lists-grid{
    display:block;
    width:100%;
    min-width:0;
  }

  .lists-grid .section{
    margin-top:24px;
    min-width:0;
  }

  .lists-grid .section-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin:18px 0 8px;
  }

  .lists-grid .section-title h2{
    margin:0;
    font:inherit;
    font-size:18px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    line-height:1.1;
    color:#8a7762;
  }

  .lists-grid .count{
    background:#e8ded2;
    border-radius:999px;
    padding:5px 10px;
    font-size:13px;
    font-weight:800;
  }

  .lists-grid .list{
    display:flex;
    flex-direction:column;
    gap:9px;
    min-width:0;
  }

  /*
   * Les lignes Historique / Absents excusés ont leur rendu propre dans
   * history-mobile.css : elles restent une liste continue et ne doivent pas
   * hériter de l'habillage générique en cartes. La liste reprend aussi toute
   * la largeur utile de l'application, comme avant le nettoyage CSS.
   */
  .app.course-closed #listExcused{
    gap:0;
    width:calc(100% + 28px);
    margin-left:-14px;
    margin-right:-14px;
    box-sizing:border-box;
  }

  /* Habillage commun des cartouches de présence. */
  .lists-grid .row:not(.history-excused-row){
    min-width:0;
    gap:10px;
    padding:12px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
  }

  /*
   * Grille générique uniquement pour les lignes qui n'ont pas leur géométrie
   * métier propre. Pointage déjà pointé et Réservation gardent leur grille
   * canonique dans leurs feuilles spécialisées.
   */
  .lists-grid .row:not(.history-excused-row):not(.mobile-pointed-row):not(.future-reservation-row){
    display:grid;
    grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,138px));
    align-items:stretch;
  }

  .lists-grid .row.state-present{
    background:#eef6ec;
    border-color:#d3e5cf;
  }

  .lists-grid .row.state-excused{
    background:#fbf0dc;
    border-color:#ead7b1;
  }

  .lists-grid .row.state-paid{
    background:#f7e5e5;
    border-color:#e8c9c9;
  }
}

@media (max-width:700px){
  .app.course-closed #listExcused{
    width:calc(100% + 20px);
    margin-left:-10px;
    margin-right:-10px;
  }

  .lists-grid .row:not(.history-excused-row){
    gap:6px;
    padding:9px;
  }

  .lists-grid .row:not(.history-excused-row):not(.mobile-pointed-row):not(.future-reservation-row){
    grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,88px));
  }
}

@media (max-width:420px){
  .lists-grid .row:not(.history-excused-row){
    gap:5px;
    padding:8px;
  }

  .lists-grid .row:not(.history-excused-row):not(.mobile-pointed-row):not(.future-reservation-row){
    grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,76px));
  }
}

@media (max-width:390px){
  .lists-grid .row:not(.history-excused-row){
    gap:4px;
    padding:7px;
  }

  .lists-grid .row:not(.history-excused-row):not(.mobile-pointed-row):not(.future-reservation-row){
    grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,1fr));
  }
}