/* Fil de l'affaire (InvoiceableFlow/view) : un point par pièce, dans l'ordre, puis ce qui reste à faire.
   Couleurs par nature : neutre pour le commercial, orange pour partielles et acomptes, vert pour le solde
   et l'encaissement, rouge pour les avoirs. L'étape en cours est un point plein, sombre. */
@layer components {
.affaire-thread > ol { margin: 0; padding: 4px 0 0; list-style: none; }
.affaire-thread__node { position: relative; display: grid; grid-template-columns: 78px 36px minmax(0, 1fr); column-gap: 16px; padding-bottom: 14px; }
.affaire-thread__node::before { content: ""; position: absolute; top: 40px; bottom: 2px; left: calc(78px + 16px + 17px); width: 2px; border-radius: 2px; background: var(--color-muted-2); }
.affaire-thread__node:is(.is-now, .is-todo)::before { background: repeating-linear-gradient(var(--color-tile-2) 0 4px, transparent 4px 8px); }
.affaire-thread__node.is-end { padding-bottom: 0; }
.affaire-thread__node.is-end::before { display: none; }
.affaire-thread__node.is-now { padding-bottom: 22px; }

.affaire-thread__node > time { padding-top: 9px; color: var(--color-muted); font-size: 12px; font-weight: 600; line-height: 1.25; text-align: right; white-space: nowrap; }
.affaire-thread__node > time span { display: block; font-size: 11px; font-weight: 500; opacity: .75; }

.affaire-thread__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); color: var(--color-ink-2); font-size: 13px; }
.affaire-thread__node.is-branch .affaire-thread__dot { background: var(--color-warning-soft); color: var(--color-warning); }
.affaire-thread__node.is-solde .affaire-thread__dot { background: var(--color-success-soft); color: var(--color-success); }
.affaire-thread__node.is-credit .affaire-thread__dot { background: var(--color-danger-soft); color: var(--color-danger); }
.affaire-thread__node.is-ref .affaire-thread__dot { background: var(--color-accent-soft); color: var(--color-accent); }
.affaire-thread__node.is-ref .affaire-thread__row { box-shadow: inset 0 0 0 1.5px var(--color-accent-soft); }
.affaire-thread__node.is-now .affaire-thread__dot { background: var(--color-night); color: var(--color-on-night, #fff); }
.affaire-thread__node.is-todo .affaire-thread__dot { background: none; color: var(--color-muted-2); box-shadow: inset 0 0 0 1.5px var(--color-tile-2); }
.affaire-thread__node.is-archive .affaire-thread__dot { background: var(--color-tile); color: var(--color-muted); }

/* Une pièce : libellé et numéro à gauche (le lien couvre toute la ligne), état au milieu, montant à droite. */
.affaire-thread__row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 8px 16px; border-radius: var(--radius-item, 14px); background: var(--color-surface); color: var(--color-ink); transition: box-shadow .15s; }
.affaire-thread__row:hover { box-shadow: 0 0 0 1.5px var(--color-muted-2); }
.affaire-thread__id { display: grid; flex: 1; min-width: 0; color: var(--color-ink); line-height: 1.2; }
.affaire-thread__id::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
a.affaire-thread__id:hover { color: var(--color-ink); }
.affaire-thread__id small { color: var(--color-muted); font-size: 11px; }
.affaire-thread__id b { font-size: 14px; }
.affaire-thread__tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; }
.affaire-thread__amount { min-width: 100px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.affaire-thread__amount small { color: var(--color-muted); font-size: 10.5px; font-weight: 600; }
.affaire-thread__tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--color-tile); color: var(--color-ink-2); font-size: 11px; font-weight: 700; white-space: nowrap; }
.affaire-thread__tag .fas { font-size: 9px; }
.affaire-thread__tag.is-ref { background: var(--color-accent-soft); color: var(--color-accent); }
.affaire-thread__tag.is-branch { background: var(--color-warning-soft); color: var(--color-warning); }
.affaire-thread__tag.is-solde { background: var(--color-success-soft); color: var(--color-success); }
.affaire-thread__tag.is-paid { padding: 0; background: none; color: var(--color-success); }
.affaire-thread__tag.is-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.affaire-thread__tag.is-late { background: var(--color-danger-soft); color: var(--color-danger); }
.affaire-thread__prog { display: inline-flex; align-items: center; gap: 8px; color: var(--color-warning); font-size: 12px; font-weight: 700; white-space: nowrap; }
.affaire-thread__gauge { display: block; width: 90px; height: 6px; overflow: hidden; border-radius: 6px; background: var(--color-tile-2); }
.affaire-thread__gauge > span { display: block; height: 100%; background: var(--color-warning-solid); }
.affaire-thread__change a { color: var(--color-muted); font-size: 12px; font-weight: 600; }
.affaire-thread__unlink { position: absolute; z-index: 1; top: -9px; right: -9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-tile-2); color: var(--color-muted); font-size: 11px; opacity: 0; transition: opacity .15s, background .15s; }
.affaire-thread__row:hover .affaire-thread__unlink, .affaire-thread__unlink:focus-visible { opacity: 1; }
.affaire-thread__unlink:hover { background: var(--color-danger-soft); color: var(--color-danger); }

/* Factures réglées repliées. */
.affaire-thread__stack > summary { cursor: pointer; list-style: none; }
.affaire-thread__stack > summary::-webkit-details-marker { display: none; }
.affaire-thread__stack[open] > summary .fa-chevron-down { rotate: 180deg; }
.affaire-thread__stack-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; margin-top: 4px; padding: 6px 16px; border-radius: var(--radius-item, 14px); background: var(--color-surface); color: var(--color-ink); font-size: 13px; }
.affaire-thread__stack-row span { color: var(--color-muted); }
.affaire-thread__stack-row:hover { color: var(--color-ink); box-shadow: 0 0 0 1.5px var(--color-muted-2); }

/* Ce qui reste à faire. */
.affaire-thread__body h4 { margin: 0; padding-top: 8px; color: var(--color-ink-2); font-size: 14px; font-weight: 600; }
.affaire-thread__body h4 b { color: var(--color-ink); }
.affaire-thread__node.is-todo h4 { color: var(--color-muted); }
.affaire-thread__node.is-todo h4 b { color: inherit; }
.affaire-thread__due { display: block; margin-top: 2px; color: var(--color-muted); font-size: 12.5px; }
.affaire-thread__due.is-late { color: var(--color-danger); font-weight: 600; }
.affaire-thread__hint { margin: 12px 0 0; color: var(--color-muted); font-size: 12.5px; }
.affaire-thread__hint a { color: var(--color-ink); font-weight: 600; text-decoration: underline; }

/* Les façons de facturer : cartes du socle (.card, .card-icon, .badge, .btn), teinte orange (partielle, acompte)
   ou verte (solde) portée par l'icône et la barre. */
.affaire-thread__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.affaire-thread__card { display: flex; flex-direction: column; gap: 6px; padding: 1.25rem; }
.affaire-thread__card.is-off { background: none; box-shadow: inset 0 0 0 1px var(--color-line); }
.affaire-thread__card.is-off > :not(.affaire-thread__actions) { opacity: .55; }
.affaire-thread__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.affaire-thread__card .card-sub { margin: 0; line-height: 1.45; }
.affaire-thread__from { margin: 0; color: var(--color-muted); font-size: .78125rem; }
.affaire-thread__from a { color: var(--color-ink); font-weight: 600; }
.affaire-thread__bar { display: flex; height: 6px; margin: 6px 0 4px; overflow: hidden; border-radius: 6px; background: var(--color-tile-2); }
.affaire-thread__bar > .is-done { background: var(--color-muted-2); }
.affaire-thread__bar > .is-add { background: var(--tone-solid, var(--tone)); }
.affaire-thread__actions { margin-top: auto; padding-top: 4px; }
.affaire-thread__actions .btn.is-disabled { color: var(--color-muted); cursor: not-allowed; }
.affaire-thread__why { display: block; padding: 9px 0; color: var(--color-muted); font-size: 12.5px; text-align: center; }
.affaire-thread__card .affaire-fref { margin-top: 0; }

/* Facturation en plusieurs fois, en frise : accolade de la pièce au-dessus de la barre, une accolade par facture
   dessous, à sa place. */
.affaire-thread__sub { margin: 20px 0 0; color: var(--color-ink-2); font-size: 13px; font-weight: 600; }
.affaire-thread__from .fa-star { color: var(--color-accent); font-size: 11px; }
/* La carte « Facturation en plusieurs fois » : en-tête, frise, puis une bande grise en pied pour les actions. */
.affaire-multi { overflow: hidden; }
.affaire-multi__head { display: flex; align-items: center; gap: 12px; padding: 1.125rem 1.25rem 0; }
.affaire-multi__head .card-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; font-size: 1.05rem; }
.affaire-multi__title { flex: 1; min-width: 0; }
.affaire-multi__title .card-sub { margin: 1px 0 0; }
.affaire-multi__title .card-sub a { color: var(--color-ink); font-weight: 600; }
.affaire-multi__head .badge { font-size: 12px; padding: .35rem .6rem; }
.affaire-multi__foot { padding: 1.125rem 1.25rem 1.25rem; border-top: 1px solid var(--color-line); background: var(--color-tile); }
.affaire-multi__sub { margin: 0; color: var(--color-ink-2); font-size: 13px; font-weight: 700; }
.affaire-multi__foot .affaire-thread__cards { margin-top: 12px; }
.affaire-multi__foot .affaire-thread__card.is-off { box-shadow: inset 0 0 0 1px var(--color-tile-2); }
.affaire-frieze { padding: 1.25rem 1.75rem 1.75rem; }
.affaire-frieze__top { display: grid; justify-items: center; gap: 10px; }
.affaire-frieze__ref { display: inline-flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: 12.5px; }
.affaire-frieze__ref b { color: var(--color-ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.affaire-frieze__ref:hover { color: var(--color-ink); }
.affaire-frieze__top .affaire-frieze__brace { justify-self: stretch; }
.affaire-frieze__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--c, var(--color-muted-2)) 16%, var(--color-surface)); color: var(--i, var(--color-muted)); font-size: 12px; }
.affaire-frieze__ico.is-ref { background: var(--color-accent-soft); color: var(--color-accent); }
.affaire-frieze__label { display: grid; justify-items: center; gap: 3px; color: var(--color-ink); line-height: 1.25; text-align: center; white-space: nowrap; }
.affaire-frieze__label .affaire-frieze__ico { margin-bottom: 3px; }
a.affaire-frieze__label:hover { color: var(--color-ink); }
a.affaire-frieze__label:hover small { color: var(--color-ink); text-decoration: underline; }
.affaire-frieze__label b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.affaire-frieze__label small { color: var(--color-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.affaire-frieze__label small strong { color: var(--color-ink-2); font-weight: 700; }
.affaire-frieze__label .badge { margin-top: 4px; }
/* Accolade : un trait et deux retours vers la barre, un bec au milieu vers le libellé. */
.affaire-frieze__brace { position: relative; display: block; height: 9px; border: 2px solid var(--b, var(--color-tile-2)); }
.affaire-frieze__brace.is-up { border-bottom: 0; border-radius: 6px 6px 0 0; }
.affaire-frieze__brace.is-down { border-top: 0; border-radius: 0 0 6px 6px; }
.affaire-frieze__brace::after { content: ""; position: absolute; left: 50%; width: 2px; height: 7px; margin-left: -1px; background: var(--b, var(--color-tile-2)); }
.affaire-frieze__brace.is-up::after { top: -9px; }
.affaire-frieze__brace.is-down::after { bottom: -9px; }
/* Pas de gap : les largeurs en % de la barre et des accolades doivent tomber pile ; l'écart est pris dedans. */
.affaire-frieze__bar { display: flex; height: 28px; margin: 6px 0; }
.affaire-frieze__bar > span + span { border-left: 3px solid var(--color-surface); background-clip: padding-box; }
.affaire-frieze__bar > span { flex: none; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: var(--c); color: #fff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.affaire-frieze__bar > .is-branch, .affaire-frieze__part.is-branch { --c: var(--color-warning-solid); --b: var(--color-warning-solid); --i: var(--color-warning); }
.affaire-frieze__bar > .is-solde, .affaire-frieze__part.is-solde { --c: var(--color-success); --b: var(--color-success); --i: var(--color-success); }
.affaire-frieze__bar > .is-due { background: color-mix(in srgb, var(--c) 35%, var(--color-surface)); color: var(--i); }
.affaire-frieze__bar > .is-draft { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c) 40%, var(--color-surface)) 0 5px, var(--color-surface) 5px 10px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); color: var(--i); }
.affaire-frieze__bar > .is-left { background: repeating-linear-gradient(-45deg, var(--color-tile) 0 6px, var(--color-tile-2) 6px 12px); color: var(--color-muted); }
.affaire-frieze__parts { display: flex; }
.affaire-frieze__part + .affaire-frieze__part { padding-left: 3px; }
.affaire-frieze__part { flex: none; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-width: 0; }
.affaire-frieze__part.is-narrow .affaire-frieze__label { justify-items: start; text-align: left; }
.affaire-frieze__part.is-left .affaire-frieze__label b { color: var(--color-muted); }
.affaire-frieze__credit { display: block; margin-top: 14px; color: var(--color-danger); font-size: 12.5px; font-weight: 600; }

@media (max-width: 1199.98px) {
    .affaire-thread__cards { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}
@media (max-width: 767.98px) {
    /* Sans la date : le point, puis la pièce sur toute la largeur restante. */
    .affaire-thread__node { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; }
    .affaire-thread__node::before { left: 17px; }
    .affaire-thread__node > time { display: none; }
    .affaire-thread__row { flex-wrap: wrap; row-gap: 6px; }
    .affaire-thread__id { flex: 1 1 auto; }
    .affaire-thread__amount { min-width: 0; margin-left: auto; }
    .affaire-thread__tags { order: 3; flex-basis: 100%; justify-content: flex-start; }
    .affaire-multi__head { flex-wrap: wrap; padding: 1rem 1rem 0; }
    .affaire-multi__foot { padding: 1rem; }
    .affaire-frieze { padding: 1rem; }
    /* Les factures sous la barre : trop étroites côte à côte, elles passent en liste, un filet de leur couleur à gauche. */
    .affaire-frieze__parts { flex-direction: column; gap: 12px; margin-top: 14px; }
    .affaire-frieze__part, .affaire-frieze__part + .affaire-frieze__part { width: auto !important; padding-left: 10px; border-left: 3px solid var(--b, var(--color-tile-2)); }
    .affaire-frieze__part > .affaire-frieze__brace { display: none; }
    .affaire-frieze__label, .affaire-frieze__part.is-narrow .affaire-frieze__label { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; justify-items: start; align-items: center; text-align: left; white-space: normal; }
    .affaire-frieze__label .affaire-frieze__ico { grid-row: span 2; margin: 0; }
    .affaire-frieze__label > b, .affaire-frieze__label > small { grid-column: 2; }
    .affaire-frieze__label small strong { white-space: nowrap; }
    .affaire-frieze__label > .badge { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}
}