/* PAIEMENTS DES DÉCLARATIONS (/app/tax/paiements, lot AP4, 2026-10-05) — préfixe .pai-*.
   Les tuiles du gabarit (.mx-tuile) servent ici de FILTRE : ce sont des boutons. On leur retire
   l'habillage du bouton natif, on garde celui de la tuile, et l'état retenu se lit à la bordure
   pleine — jamais à une couleur seule (aria-pressed porte le même état pour un lecteur d'écran). */
.appgrid .pai-tuile { text-align: left; font: inherit; cursor: pointer; background: var(--et-surface); }
.appgrid .pai-tuile:hover { background: var(--et-rang); }
.appgrid .pai-tuile:focus-visible { outline: 2px solid var(--et-lien); outline-offset: 2px; }
.appgrid .pai-tuile.est-actif { box-shadow: inset 0 0 0 2px var(--et-lien); }

/* Régler / Rapproché (lot AQ4). La case est enveloppée d'un label qui porte la cible : cocher la
   case n'ouvre pas la déclaration (la cellule arrête le clic, cf. Tableau). */
.appgrid .pai-rapproche { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; cursor: pointer; }
.appgrid .pai-rapproche input { width: 16px; height: 16px; cursor: pointer; }
.appgrid .pai-regler { white-space: nowrap; }

@media (max-width: 1024px) {
    .appgrid .pai-tuile { min-height: 44px; }
    .appgrid .pai-rapproche, .appgrid .pai-regler { min-width: 44px; min-height: 44px; }
}

/* Rattrapage (lot AR2) : un geste ponctuel, discret, au-dessus de la liste. */
.appgrid .pai-rattacher { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 4px; }
.appgrid .pai-rattacher-res { color: var(--et-muted); }

/* Actions de ligne : « Régler » et l'historique côte à côte. */
.appgrid .pai-actions { display: inline-flex; align-items: center; gap: 6px; }

/* Fenêtre « Règlements » (lots AR1, AR5). L'historique défile en largeur sur un téléphone,
   la fenêtre non. Une ligne annulée ou d'annulation se lit barrée, sans couleur de plus. */
.appgrid .pai-hist-defile { overflow-x: auto; margin-top: 12px; }
.appgrid .pai-hist { min-width: 620px; margin-bottom: 0; }
.appgrid .pai-hist-barre td:nth-child(2) { text-decoration: line-through; }
.appgrid .pai-hist-motif { color: var(--et-muted); }
.appgrid .pai-hist-annulation td { background: var(--et-tint); }
.appgrid .pai-motif-lbl { display: block; margin-bottom: 4px; }
.appgrid .pai-motif { display: flex; flex-wrap: wrap; gap: 8px; }
.appgrid .pai-motif .mx-input { flex: 1 1 240px; }
.appgrid .pai-sugg-titre { font-size: var(--et-fs-tete, 14px); font-weight: 600; margin: 16px 0 8px; }
.appgrid .pai-sugg { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--et-hairline); }
.appgrid .pai-sugg-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--et-hairline); }
.appgrid .pai-sugg-txt { flex: 1 1 auto; }

@media (max-width: 1024px) {
    .appgrid .pai-historique, .appgrid .pai-annuler, .appgrid .pai-rapprocher-releve, .appgrid .pai-rattacher-btn { min-width: 44px; min-height: 44px; }
}
@media (max-width: 640px) {
    .appgrid .pai-sugg-ligne { flex-direction: column; align-items: stretch; }
}

/* Lot AT : la pénalité estimée sous la tuile « En retard », l'avis d'écriture déposée. */
.appgrid .pai-penalite { display: block; margin-top: 4px; font-size: var(--et-fs-cell, 13px); color: var(--et-danger-ink); }
.appgrid .pai-ecriture-ok { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--et-succes); background: var(--et-succes-bg); color: var(--et-succes-ink); }
.appgrid .pai-ecriture-ok.est-a-corriger { border-left-color: var(--et-avertissement-mark); background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.appgrid .pai-ecriture-erreurs { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 1024px) {
    .appgrid .pai-ecriture { min-width: 44px; min-height: 44px; }
}