/* Écran : facturation — factures (liste, détail, avoir), livre des recettes,
   Réglages › Connexions (facturation, SumUp), page publique /payer/{jeton}.
   Réutiliser les tokens et composants de app.css / admin.css (ne jamais redéfinir de token).
   Liée par layouts/admin.php ; la page publique /payer la charge elle-même (<link> dans la vue). */

/* ---------- Commun ---------- */
.billing .billing-seg { display: flex; width: 100%; margin: 0 0 16px; }
.billing .list-search { margin: 0; }
.billing .inv-total .item__title,
.billing .inv-total .item__value { font-weight: 600; color: var(--label); }
.billing .item__value { max-width: 60%; }

/* ---------- Liste des factures ---------- */
.inv-row { gap: 10px; }
.inv-row__client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row__sub { -webkit-line-clamp: 1; line-clamp: 1; }
.inv-row__end { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; }
.inv-row__amount { font: var(--t-body); color: var(--label); white-space: nowrap; }
.inv-row__status { font: var(--t-sub); color: var(--label-2); white-space: nowrap; margin-top: 1px; }
.inv-row__status.is-due, .inv-status.is-due { color: var(--orange); }
.inv-row__status.is-muted, .inv-status.is-muted { color: var(--label-2); }
.inv-list__foot { margin-top: calc(-1 * var(--section-gap) + var(--header-gap)); }
.inv-list .inv-month:last-of-type { margin-bottom: var(--section-gap); }

/* ---------- Détail d'une facture ---------- */
.inv-head { margin: 4px 0 20px; }
.inv-head__client { font: var(--t-headline); color: var(--label); margin: 0; overflow-wrap: anywhere; }
.inv-head__amount { font: var(--t-large); margin: 2px 0 0; color: var(--label); }
.inv-head__amount small { font: var(--t-title3); color: var(--label-2); }
.inv-head__sub { font: var(--t-sub); color: var(--label-2); margin: 4px 0 0; }
.inv-status { font-weight: 600; color: var(--label-2); }
.inv-status.is-paid { color: var(--green); }
.inv-status.is-muted { font-weight: 400; }
.inv-actions { margin-bottom: var(--section-gap); }
.inv-actions .is-disabled { color: var(--label-3); cursor: default; pointer-events: none; }
.inv-line__detail { -webkit-line-clamp: 2; line-clamp: 2; }
.inv-integrity.is-bad { color: var(--red); font-weight: 600; }
.inv-hash { margin: 8px 0 0; }
details.more.inv-hash > summary { color: var(--label-2); font: var(--t-foot); min-height: var(--hit); padding: 0 16px; }
.inv-hash__code { margin: 0 16px; font: var(--t-foot); color: var(--label-2); overflow-wrap: anywhere; }
.inv-hash__code code { font-family: var(--font-mono); }
.btn--plain.inv-danger { color: var(--red); }

/* ---------- Livre des recettes ---------- */
.rec-hero { text-align: center; margin: 8px 0 var(--section-gap); }
.rec-hero__label { font: var(--t-sub); color: var(--label-2); margin: 0; }
.rec-hero__value { font: var(--t-large); color: var(--label); margin: 2px 0 0; }
.rec-hero__sub { font: var(--t-foot); color: var(--label-2); margin: 4px 0 0; }
.rec-vat { padding-top: 11px; padding-bottom: 11px; }
.rec-vat__head { display: flex; align-items: baseline; gap: 12px; }
.rec-vat__head .item__title { flex: 1; min-width: 0; }
.rec-vat__bar { margin: 8px 0 6px; }
.rec-vat.is-warn .progress__bar { background: var(--orange); }
.rec-vat.is-over .progress__bar { background: var(--red); }
.rec-vat.is-over .rec-vat__msg { color: var(--red); }
.rec-vat__msg { -webkit-line-clamp: 3; line-clamp: 3; }
.rec-list__sub { -webkit-line-clamp: 2; line-clamp: 2; }
.rec-list .item__value { color: var(--label); }
.rec-list .rec-refund { color: var(--red); }

/* ---------- Réglages › Connexions › Paiements ---------- */
.billing-settings .frow .input[type=password] { letter-spacing: normal; }
.billing-settings__notice { margin: 0 0 var(--section-gap); }
.billing-settings__notice a { font-weight: 600; position: relative; }
.billing-settings__notice a::after { content: ""; position: absolute; inset: -13px -6px; }
.billing-settings__help code { overflow-wrap: anywhere; font-family: var(--font-mono); }

/* ---------- Page publique /payer/{jeton} et appel aux arrhes ---------- */
/* Page transactionnelle : un seul bouton plein, pas de « Réserver » dans l'en-tête */
body:has(.pay-page) .site-header .btn--brand { display: none; }
.pay-page .done-hero__check--due { background: var(--brand-tinted); color: var(--brand-text); }
.pay-page .done-hero__check--failed { background: var(--red-bg); color: var(--red); }
.pay-page .done-hero .pay-page__amount { font: var(--t-large); color: var(--label); margin-top: 4px; }
.pay-page .item__value.pay-page__due { color: var(--label); font-weight: 600; }
.pay-page__notice { margin: 0 0 var(--section-gap); }
.pay-page__actions { display: grid; gap: 12px; margin: 0 0 var(--section-gap); }
.pay-page__secure { text-align: center; margin: 0; }
.deposit-cta .item__value { color: var(--label); font-weight: 600; }

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .billing .billing-seg { max-width: 360px; }
    .rec-hero { text-align: left; }
}

/* Rangées dans « Plus d'options » : séparateurs inset comme le reste du groupe */
:is(.billing, .billing-settings) .group > details.more[open] > :not(summary) { position: relative; }
:is(.billing, .billing-settings) .group > details.more[open] > :not(summary)::before {
    content: ""; position: absolute; z-index: 1; top: 0; left: var(--sep-inset); right: 0;
    border-top: var(--hairline) solid var(--separator); pointer-events: none;
}
.billing .frow .appt-money .input { text-align: right; }

/* Références de pièce (FAC-…, AV-…) : jamais coupées au tiret */
.inv-no { white-space: nowrap; }
.deposit-cta__action { margin-top: 16px; }
/* « Preuve d'intégrité » : détail d'archivage, inutile sur iPhone (le pied « Copie archivée conforme » suffit) */
@media (max-width: 599px) { .inv-hash { display: none; } }
.billing-settings .frow__label.billing-settings__nowrap { white-space: nowrap; flex: none; }