/* ============================================================
   Recette V6 — Avoirs : badge des listes, pastilles « Soldée par
   avoir » / « Trop-perçu », encart de la fiche, écran de création,
   rappel de la commande sur la facture d'acompte.
   Fichier séparé d'app.css : il reprend les jetons Aurora (--grad,
   --v1…, --r-lg…) sans toucher aux règles communes.
   ============================================================ */

/* ---------- Badge « Avoir partiel / total » à côté du numéro ---------- */
.avoir-badge {
    display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; vertical-align: middle;
    margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px;
    font-family: var(--font-display); font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums;
    cursor: help;
}
.avoir-badge i { font-size: .8em; }
.avoir-badge.is-partiel {
    color: #7c3aed; background: linear-gradient(135deg, rgba(124,92,255,.13), rgba(91,141,239,.10));
    border: 1px solid rgba(124,92,255,.22);
}
.avoir-badge.is-total {
    color: #fff; background: var(--grad); border: 1px solid transparent;
    box-shadow: 0 4px 12px rgba(124,92,255,.28);
}

/* ---------- Pastilles de règlement propres aux avoirs ---------- */
.pay-dot.is-credit {
    background: linear-gradient(135deg, rgba(124,92,255,.16), rgba(34,211,238,.14)); color: #5b3fd6;
}
.pay-dot.is-refund { background: rgba(236,72,153,.13); color: #be185d; }

/* ---------- Encart « Avoirs émis » de la fiche facture ---------- */
.avoirs-encart { position: relative; overflow: hidden; }
.avoirs-encart::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .8;
}
.avoir-compteur {
    display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .35rem;
    border-radius: 999px; background: var(--grad); color: #fff; font-size: .72rem; font-weight: 700;
}
.avoir-reste strong { font-family: var(--font-display); color: var(--v1); }
.avoir-reste.is-epuise strong { color: var(--ink-faint); }
.avoir-ligne { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.avoir-ligne__num { font-weight: 600; color: var(--ink); white-space: nowrap; }
.avoir-ligne__motif { flex: 1 1 14rem; min-width: 0; font-size: .86rem; }
.avoir-ligne__mt { font-family: var(--font-display); font-weight: 700; color: #b91c1c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.avoir-ligne.is-annule .avoir-ligne__num,
.avoir-ligne.is-annule .avoir-ligne__mt { text-decoration: line-through; color: var(--ink-faint); }

.avoirs-bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; }
.avoirs-bilan__case {
    display: flex; flex-direction: column; gap: .1rem; padding: .5rem .65rem;
    border-radius: var(--r-md); background: #fafaff; border: 1px solid var(--line); min-width: 0;
}
.avoirs-bilan__case span { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.avoirs-bilan__case strong { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.avoirs-bilan__case.is-main { background: var(--grad-soft); border-color: rgba(124,92,255,.2); }
.avoirs-bilan__case.is-refund { background: rgba(236,72,153,.08); border-color: rgba(236,72,153,.25); }
.avoirs-bilan__case.is-refund strong { color: #be185d; }

/* ---------- Fiche de l'avoir : imputation ---------- */
.avoir-montant-pill {
    font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: #b91c1c;
    padding: .12rem .6rem; border-radius: 999px; background: rgba(239,68,68,.1); white-space: nowrap;
}
.avoir-motif { padding: .55rem .75rem; border-radius: var(--r-md); background: var(--grad-soft); border: 1px solid rgba(124,92,255,.14); }
.avoir-motif__lbl {
    font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--v1); margin-right: .45rem;
}

/* ---------- Rappel de la commande (facture d'acompte) ---------- */
.rappel-commande { border-style: dashed; background: rgba(255,255,255,.75); }
.rappel-commande .card-header { background: linear-gradient(90deg, rgba(124,92,255,.07), transparent 70%); }
.rappel-commande .table { font-size: .86rem; color: var(--ink-soft); }
.rappel-commande__note {
    font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-faint);
    padding: .12rem .55rem; border-radius: 999px; border: 1px dashed #d6d7e6;
}

/* ---------- Écran de création d'un avoir ---------- */
.avoir-bandeau { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.avoir-metrique {
    display: flex; flex-direction: column; gap: .15rem; min-width: 0;
    padding: .7rem .85rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--sh-sm);
}
.avoir-metrique__lbl { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.avoir-metrique__val { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.avoir-metrique__sub { font-size: .76rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avoir-metrique.is-main { background: var(--grad-soft); border-color: rgba(124,92,255,.22); }
.avoir-metrique.is-main .avoir-metrique__val {
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.5rem;
}
.avoir-metrique.is-depasse { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.35); }
.avoir-metrique.is-depasse .avoir-metrique__val { background: none; color: #b91c1c; }
@media (max-width: 575.98px) { .avoir-bandeau { grid-template-columns: 1fr; } }

.avoir-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-bottom: .9rem; }
@media (max-width: 767.98px) { .avoir-modes { grid-template-columns: 1fr; } }
.avoir-mode {
    position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; align-items: center;
    padding: .75rem .9rem; border-radius: var(--r-lg); cursor: pointer;
    background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--sh-sm);
    transition: border-color .16s, box-shadow .16s, transform .12s;
}
.avoir-mode:hover { border-color: #cfc4ff; }
.avoir-mode:focus-within { box-shadow: var(--ring); }
.avoir-mode.is-actif { border-color: transparent; box-shadow: 0 0 0 2px var(--v1), var(--sh-md); background: linear-gradient(180deg, rgba(124,92,255,.06), #fff); }
.avoir-mode__icone {
    grid-row: span 2; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--grad-soft); color: var(--v1); font-size: 1.1rem; border: 1px solid rgba(124,92,255,.14);
}
.avoir-mode.is-actif .avoir-mode__icone { background: var(--grad); color: #fff; border-color: transparent; }
.avoir-mode__titre { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.avoir-mode__aide { font-size: .78rem; color: var(--ink-faint); }
.avoir-mode.is-indisponible { cursor: not-allowed; opacity: .55; box-shadow: none; background: #f8f8fc; }

.avoir-panneau { margin-bottom: .9rem; }
.avoir-total-recap {
    display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: var(--r-lg);
    background: var(--grad-soft); border: 1px solid rgba(124,92,255,.18); color: var(--ink);
}
.avoir-total-recap i { font-size: 1.3rem; color: var(--v1); }
.avoir-lignes tr.is-deduction { opacity: .6; }
.avoir-lignes input[type="text"] { max-width: 7rem; margin-left: auto; }
.avoir-montant-saisie { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.avoir-apercu {
    display: flex; flex-wrap: wrap; gap: .4rem .9rem; padding: .55rem .8rem; border-radius: var(--r-md);
    background: #fafaff; border: 1px solid var(--line); font-size: .82rem;
}
.avoir-apercu strong { font-family: var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }

.avoir-pied {
    position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-top: .5rem; padding: .75rem 1rem; border-radius: var(--r-lg);
    background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--sh-md);
}
.avoir-pied__montant { display: flex; flex-direction: column; }
.avoir-pied__montant span { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.avoir-pied__montant strong { font-family: var(--font-display); font-size: 1.45rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.avoir-pied__message { flex: 1 1 14rem; font-size: .86rem; color: var(--ink-soft); }
.avoir-pied__message.is-erreur { color: #b91c1c; font-weight: 600; }
.avoir-form.is-depasse .avoir-pied { border-color: rgba(239,68,68,.35); box-shadow: 0 0 0 3px rgba(239,68,68,.12), var(--sh-md); }

.avoir-refus {
    display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--r-lg);
    background: var(--grad-soft); border: 1px solid rgba(124,92,255,.2); color: var(--ink);
}
.avoir-refus > i { font-size: 1.5rem; color: var(--v1); }

/* ---------- Avoirs en excédent (historique antérieur au plafond) ---------- */
.avoirs-bilan__case.is-exces { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.28); }
.avoirs-bilan__case.is-exces strong { color: #b91c1c; }
.avoir-badge.is-exces {
    color: #b91c1c; background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(236,72,153,.10));
    border: 1px solid rgba(239,68,68,.3);
}

/* ---------- Lignes déjà créditées (écran de création) ---------- */
.avoir-lignes .avoir-deja-credite { color: #b91c1c; font-weight: 600; }
.avoir-lignes tr.is-epuisee td { color: var(--ink-faint); }
.avoir-lignes tr.is-epuisee label { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }

/* ---------- Chaîne héritée incohérente (DR-2) : document d'une autre société ----------
   Ni montant ni numéro : une pastille neutre, qui dit seulement qu'un avoir existe. */
.avoir-badge.is-masque {
    color: var(--ink-soft); background: rgba(100,116,139,.10);
    border: 1px dashed rgba(100,116,139,.35);
}
.avoir-ligne.is-masque { color: var(--ink-faint); background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(100,116,139,.05) 8px 16px); }
.avoir-ligne.is-masque .avoir-ligne__num { color: var(--ink-faint); font-weight: 600; }