/* « Comptabilité » — des points, pas des phrases (Thomas, 17/09/2026).
   Un devis, une facture, une prestation type : UNE LIGNE. Tout tient à 390 px de large,
   sans débordement horizontal — la ligne se replie, elle ne pousse jamais la page. */

#view .compta-liste { display: flex; flex-direction: column; margin-top: 10px; }

#view .compta-ligne {
  display: grid;
  grid-template-columns: minmax(6.5em, auto) minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 6px 12px;
  width: 100%; min-width: 0; text-align: left;
  padding: 11px 4px; background: none; border: 0;
  border-bottom: 1px solid var(--bord); cursor: pointer;
  font-size: 13px; color: var(--graphite);
}
#view .compta-ligne:hover { background: var(--paper-2); }
#view .compta-ligne:focus-visible { outline: 2px solid var(--cuivre); outline-offset: -2px; }
#view .compta-ligne > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .compta-montant { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

#view .compta-points { list-style: none; margin: 0; padding: 0; }
#view .compta-points > li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 7px 0; border-bottom: 1px solid var(--bord); min-width: 0;
}
#view .compta-points > li:last-child { border-bottom: 0; }
#view .compta-points > li > span { color: var(--gris); font-size: 12px; flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }
#view .compta-points > li > b { font-size: 13px; overflow-wrap: anywhere; }

#view .compta-saisie {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0 12px; align-items: end;
  padding: 10px 0; border-top: 1px solid var(--bord);
}
#view .compta-saisie .fld { margin-bottom: 8px; }
#view .compta-saisie > button { margin-bottom: 8px; }

/* Téléphone : la ligne passe sur deux rangs plutôt que de déborder. */
@media (max-width: 560px) {
  #view .compta-ligne {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "numero statut" "client montant" "date montant";
    row-gap: 2px;
  }
  #view .compta-ligne > b { grid-area: numero; }
  #view .compta-ligne > span:nth-of-type(1) { grid-area: client; }
  #view .compta-ligne > span:nth-of-type(2) { grid-area: date; }
  #view .compta-ligne > .compta-montant { grid-area: montant; align-self: center; }
  #view .compta-ligne > .pill { grid-area: statut; justify-self: end; }
}