/*
 * Pointage — mode Pointage mobile
 * Source de vérité CSS pour les éléments propres au pointage mobile.
 *
 * Périmètre :
 * - actions Présent / Absent excusé / Absent décompté sur une réservation à pointer ;
 * - statut compact d'une ligne déjà pointée ;
 * - bouton de retour à Réservé ;
 * - suppression d'un Drop-in en mode Pointage ;
 * - géométrie des lignes déjà pointées et gestion de leurs alertes.
 *
 * Le bandeau, les compteurs, l'identité, les alertes, le paiement, la provenance,
 * la progression et la structure générique des listes restent dans leurs
 * composants transversaux dédiés.
 */

@media (max-width:1050px){
  .action.state-icon-only{
    width:100%;
    min-width:0;
    height:70px;
    min-height:70px;
    border:1px solid transparent;
    border-radius:13px;
    padding:5px 4px;
    gap:0;
    font-size:12px;
    line-height:1.05;
    align-self:center;
    justify-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:none;
  }

  .action.state-icon-only .ico{
    width:36px;
    height:36px;
    border-radius:0;
    background:transparent;
    color:currentColor;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0;
    border:0;
    box-shadow:none;
  }

  .action.state-icon-only .ico svg{
    display:block;
    width:36px;
    height:36px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.15;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .mobile-presence-status{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
  }

  .mobile-presence-status.status-reserved{background:#e7eef9;color:#315f9b;}
  .mobile-presence-status.status-present{background:#e4f2e7;color:#2f7d3e;}
  .mobile-presence-status.status-excused{background:#fff0d8;color:#aa6a13;}
  .mobile-presence-status.status-paid{background:#f7dddd;color:#a53d3d;}

  .row.mobile-pointed-row,
  .lists-grid .row.mobile-pointed-row{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 58px;
    align-items:center;
  }

  .row.mobile-pointed-row .person,
  .lists-grid .row.mobile-pointed-row .person{
    grid-column:1;
    grid-row:1;
  }

  .row.mobile-pointed-row .mobile-presence-status,
  .lists-grid .row.mobile-pointed-row .mobile-presence-status{
    grid-column:1;
    grid-row:1;
  }

  .app.course-mode-pointage .row.mobile-pointed-row .action.mobile-reset-state,
  .app.course-mode-pointage .lists-grid .row.mobile-pointed-row .action.mobile-reset-state{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:center;
    width:58px;
    min-width:58px;
    max-width:58px;
    height:58px;
    min-height:58px;
    max-height:58px;
    margin:0;
    padding:0;
    border:1px solid #cbdaf0;
    border-radius:13px;
    background:#e7eef9;
    color:#315f9b;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:none;
  }

  .app.course-mode-pointage .row.mobile-pointed-row .action.mobile-reset-state svg,
  .app.course-mode-pointage .lists-grid .row.mobile-pointed-row .action.mobile-reset-state svg{
    display:block;
    width:34px;
    height:34px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.25;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .app.course-mode-pointage .row.mobile-pointed-row :is(.regularize-bar,.empty-card-bar,.expired-card-bar,.last-course-bar),
  .app.course-mode-pointage .lists-grid .row.mobile-pointed-row :is(.regularize-bar,.empty-card-bar,.expired-card-bar,.last-course-bar){
    grid-column:1 / -1;
    grid-row:1;
  }

  .app.course-mode-pointage .row.mobile-pointed-row:has(:is(.regularize-bar,.empty-card-bar,.expired-card-bar,.last-course-bar)) .person,
  .app.course-mode-pointage .lists-grid .row.mobile-pointed-row:has(:is(.regularize-bar,.empty-card-bar,.expired-card-bar,.last-course-bar)) .person,
  .app.course-mode-pointage .row.mobile-pointed-row:has(:is(.regularize-bar,.empty-card-bar,.expired-card-bar,.last-course-bar)) .mobile-presence-status,
  .app.course-mode-pointage .lists-grid .row.mobile-pointed-row:has(:is(.regularize-bar,.empty-card-bar,.expired-card-bar,.last-course-bar)) .mobile-presence-status{
    grid-row:2;
  }

  .app.course-mode-pointage .row.mobile-pointed-row:has(:is(.regularize-bar,.empty-card-bar,.expired-card-bar,.last-course-bar)) .action.mobile-reset-state,
  .app.course-mode-pointage .lists-grid .row.mobile-pointed-row:has(:is(.regularize-bar,.empty-card-bar,.expired-card-bar,.last-course-bar)) .action.mobile-reset-state{
    grid-row:2;
  }

  .action.mobile-dropin-delete{
    width:54px;
    height:54px;
    min-width:54px;
    min-height:54px;
    border-radius:50%;
    padding:0;
    justify-self:end;
    margin-right:10px;
    align-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#cf4545;
    border:1px solid #b83f3f;
    color:#fff;
  }

  .action.mobile-dropin-delete svg{
    display:block;
    width:27px;
    height:27px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.5;
    stroke-linecap:round;
  }
}

@media (max-width:700px){
  .action.state-icon-only{
    height:64px;
    min-height:64px;
    padding:4px 3px;
    font-size:11.5px;
  }
}

@media (max-width:430px){
  .action.state-icon-only{
    height:60px;
    min-height:60px;
    padding:3px 2px;
    font-size:10.5px;
  }

  .row.mobile-pointed-row,
  .lists-grid .row.mobile-pointed-row{
    grid-template-columns:minmax(0,1fr) 52px;
  }

  .app.course-mode-pointage .row.mobile-pointed-row .action.mobile-reset-state,
  .app.course-mode-pointage .lists-grid .row.mobile-pointed-row .action.mobile-reset-state{
    width:52px;
    min-width:52px;
    max-width:52px;
    height:52px;
    min-height:52px;
    max-height:52px;
    margin:0;
  }

  .app.course-mode-pointage .row.mobile-pointed-row .action.mobile-reset-state svg,
  .app.course-mode-pointage .lists-grid .row.mobile-pointed-row .action.mobile-reset-state svg{
    width:30px;
    height:30px;
  }

  .action.mobile-dropin-delete{
    width:50px;
    height:50px;
    min-width:50px;
    min-height:50px;
  }

  .action.mobile-dropin-delete svg{
    width:25px;
    height:25px;
  }
}

@media (min-width:1051px){
  .mobile-presence-status,
  .mobile-reset-state,
  .mobile-dropin-delete{
    display:none;
  }
}