/* Historique du client à l'écran (Clients › Historique) : filtres, 4 cartes, tableau groupé par moto ; une carte par facture sur téléphone */
.hi-filtres{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--esp-2) var(--esp-3);margin:var(--esp-2) 0;padding:var(--esp-2) var(--esp-3)}
.hi-filtres .field{min-width:0}
.hi-filtres select.inp{min-width:180px;max-width:260px}
.hi-filtres input[type=date]{width:auto}
.hi-case{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-texte);padding-bottom:7px;cursor:pointer}
.hi-note{flex-basis:100%;margin:0}
.hi-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--esp-3)}
.content .kpi.hi-rouge{border-color:var(--bad);background:var(--bad-soft)}
.kpi.hi-rouge .val,.kpi.hi-rouge .lab{color:var(--bad)}
.hi-lien{background:none;border:0;padding:0;font:inherit;font-weight:var(--g-fort);color:var(--copper);cursor:pointer;text-align:left}
.hi-lien:hover{text-decoration:underline}
.hi-panel{padding:0}
.hi-t td{vertical-align:top}
.hi-t .hi-date{white-space:nowrap}
.hi-t .hi-no{white-space:nowrap}
.hi-t .hi-detail{font-size:var(--t-petit);min-width:180px}
.hi-t .hi-detail div+div{margin-top:2px}
.hi-t tr.hi-g>td{background:var(--panel2);font-size:var(--t-petit);text-transform:uppercase;letter-spacing:.04em;border-top:1px solid var(--line)}
.hi-t tr.hi-g .hi-lien{text-transform:uppercase}
.hi-t tr.hi-st>td{font-weight:var(--g-fort);font-size:var(--t-petit);border-bottom:2px solid var(--line)}
.hi-t tfoot td{font-weight:var(--g-fort);background:var(--panel2);border-top:2px solid var(--ink)}
.hi-t .hi-reste b{color:var(--ink)}
.hi-t .hi-act .actions{flex-wrap:nowrap;gap:4px;justify-content:flex-end}
.hi-t td,.hi-t th{padding-left:8px;padding-right:8px}

@media (max-width:860px){.hi-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Téléphone : chaque facture devient une petite fiche (numéro et reste en haut, détail, montants, statut, boutons) */
@media (max-width:640px){
  .hi-filtres .field{flex:1 1 140px}
  .hi-filtres .field:first-child{flex-basis:100%}
  .hi-filtres select.inp{min-width:0;max-width:none;width:100%}
  .hi-filtres input[type=date]{width:100%}
  .hi-t thead{display:none}
  .hi-t,.hi-t tbody,.hi-t tfoot{display:block}
  .hi-t tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:var(--esp-3) var(--esp-4);border-bottom:1px solid var(--line)}
  .tw .hi-t td{display:block;padding:0;border:0;white-space:normal;background:none}
  .hi-t tr.hi-g{background:var(--panel2)}
  .hi-t tr.hi-g>td,.hi-t tr.hi-st>td,.hi-t tfoot td{border:0}
  .hi-t tr.hi-st,.hi-t tfoot tr{background:var(--panel2)}
  .hi-t tr.hi-st>td:first-child,.hi-t tfoot td:first-child{flex-basis:100%}
  .hi-t td:empty{display:none}
  .hi-t .hi-no{order:1;flex:1 1 0;min-width:0}
  .hi-t .hi-statut{order:2}
  .hi-t .hi-date{order:3;flex-basis:100%;font-size:var(--t-petit);color:var(--muted)}
  .hi-t .hi-detail{order:4;flex-basis:100%;min-width:0}
  .hi-t td[data-l]:not(.hi-date)::before{content:attr(data-l) " ";font-size:var(--t-etiq);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
  .hi-t .hi-mt{order:5}.hi-t .hi-paye{order:6}.hi-t .hi-reste{order:7}
  .hi-t .hi-act{order:8;flex-basis:100%}
  .hi-t .hi-act .actions{flex-direction:row;justify-content:flex-end}
  .tw .hi-t td.r{text-align:left}
}
/* Ordinateur : colonnes à largeur fixe pour que tout tienne (le détail prend la place restante, les actions ne sont jamais coupées) */
@media (min-width:641px){
  .hi-t{table-layout:fixed;width:100%}
  .hi-t th:nth-child(1){width:96px}.hi-t th:nth-child(2){width:150px}
  .hi-t th:nth-child(4),.hi-t th:nth-child(5){width:88px}.hi-t th:nth-child(6){width:118px}
  .hi-t th:nth-child(7){width:96px}.hi-t th:nth-child(8){width:76px}
  .hi-t .hi-no .sub,.hi-t .hi-no small,.hi-t .hi-no span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Téléphone : boutons des factures (voir, encaisser) faciles à toucher */
@media (max-width:640px){
  .tw .hi-t .hi-act .btn.ico,.tw .hi-t .hi-act .btn.sm{min-width:40px;min-height:40px;height:40px}
  .hi-t .hi-act .actions{gap:8px}
}