/* Versions d'un document, sur sa fiche : une barre blanche, sans séparateur, avec une ligne d'onglets
   (page-tabs du socle, une version par onglet) ; les actions sont à côté, hors de la barre (document-cycle-row).
   Le cycle de facturation, lui, est une frise (document-flow, plus bas). */
@layer components {
    .document-cycle-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--spacing) * 3); }
    .document-cycle-row > .document-cycle { min-width: 0; }
    /* La barre épouse son contenu (pas toute la largeur) : les actions collent aux onglets. */
    .document-cycle { display: flex; align-items: center; gap: calc(var(--spacing) * 3); width: fit-content; max-width: 100%; padding: calc(var(--spacing) * 1.25); background: var(--color-surface); border-radius: var(--radius-tabs); }
    .document-cycle > nav { flex: 0 1 auto; min-width: 0; }
    .document-cycle__icon { flex: none; padding-inline-start: calc(var(--spacing) * 2.5); color: var(--color-muted); font-size: 1rem; line-height: 1.75rem; }
    /* Les onglets ne portent plus leur propre fond : c'est la barre qui le donne. */
    .document-cycle__tabs.page-tabs { flex-wrap: nowrap; max-width: 100%; padding: 0; overflow-x: auto; scrollbar-width: none; background: none; }
    .document-cycle__tabs .page-tab { white-space: nowrap; }
    .document-cycle__tabs .page-tab.is-ghost { opacity: .55; }
    @media (max-width: 768px) {
        .document-cycle-row > .document-cycle { flex: 1 1 100%; }
        .document-cycle { flex-wrap: wrap; width: auto; }
        .document-cycle > nav { flex: 1 1 0; }
    }
}

/* Cycle de facturation sur la fiche d'une pièce : une barre fine, une pièce par onglet (icône teintée, type au-dessus
   du numéro), la pièce affichée soulignée en accent ; à droite Facturé / Encaissé avec leur trait, et « Voir le cycle ».
   Couleurs de la page du cycle : violet commercial, orange acompte / partielle, vert facture, rouge avoir. */
@layer components {
    .document-tabs { display: flex; align-items: stretch; gap: 20px; min-height: 56px; padding: 0 8px 0 10px; border-radius: var(--radius-tabs); background: var(--color-surface); }
    .document-tabs__list { display: flex; align-items: stretch; min-width: 0; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
    .document-tabs__list > li { display: flex; align-items: center; gap: 4px; }
    .document-tabs__list > li + li::before { content: "\f054"; margin: 0 4px; color: var(--color-muted-2); font-family: "Font Awesome 6 Pro"; font-size: 9px; font-weight: 300; }
    .document-tabs__tab { --tone: var(--color-accent); --tone-soft: var(--color-accent-soft); position: relative; display: flex; align-self: stretch; align-items: center; gap: 9px; padding: 0 10px; color: var(--color-ink-2); white-space: nowrap; }
    .document-tabs__tab.is-partial { --tone: var(--color-warning); --tone-soft: var(--color-warning-soft); }
    .document-tabs__tab.is-invoice { --tone: var(--color-success); --tone-soft: var(--color-success-soft); }
    .document-tabs__tab.is-credit { --tone: var(--color-danger); --tone-soft: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface)); }
    .document-tabs__tab::after { content: ""; position: absolute; inset: auto 8px 0; height: 2.5px; border-radius: 3px 3px 0 0; }
    a.document-tabs__tab:hover { color: var(--color-ink); }
    a.document-tabs__tab:hover::after { background: var(--color-field); }
    .document-tabs__tab.is-current { color: var(--color-accent); }
    .document-tabs__tab.is-current::after { background: var(--color-accent); }
    .document-tabs__icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--tone-soft); color: var(--tone); font-size: 12px; }
    .document-tabs__tab.is-current .document-tabs__icon { background: var(--color-accent); color: #fff; }
    .document-tabs__tab.is-transformed:not(.is-current) .document-tabs__icon { background: var(--color-success-soft); color: var(--color-success); }
    .document-tabs__text { display: grid; line-height: 1.2; }
    .document-tabs__text small { color: var(--color-muted); font-size: 11px; }
    .document-tabs__text small em { color: var(--color-accent); font-style: normal; font-weight: 700; }
    .document-tabs__text small em.is-draft { color: var(--color-warning); }
    .document-tabs__text b { font-size: 13.5px; font-weight: 700; }
    .document-tabs__paid { color: var(--color-success); font-size: 12px; }
    .document-tabs__tab.is-ghost { opacity: .55; }
    .document-tabs__tab.is-next { color: var(--color-muted); }
    .document-tabs__tab.is-next .document-tabs__icon { border: 1.5px dashed var(--color-field-hover); background: none; color: var(--color-muted-2); }
    /* Annuler une transformation récente : rond, collé à la pièce créée ; le temps restant s'écoule en bas. */
    .document-tabs__undo { position: relative; display: grid; flex: none; align-self: center; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-tile); color: var(--color-ink-2); font-size: 11.5px; }
    .document-tabs__undo:hover { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface)); color: var(--color-danger); }
    .document-tabs__undo-timer { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; background: var(--color-warning); transition: width 1s linear; }
    .document-tabs__figures { display: flex; flex: none; align-items: center; gap: 22px; margin-left: auto; }
    .document-tabs__figure { display: grid; gap: 1px; min-width: 128px; line-height: 1.2; white-space: nowrap; }
    .document-tabs__figure small { color: var(--color-muted); font-size: 11px; }
    .document-tabs__figure em { color: var(--color-accent); font-style: normal; font-weight: 700; }
    .document-tabs__figure em.is-settled { color: var(--color-success); }
    .document-tabs__figure em.is-remaining { color: var(--color-danger); }
    .document-tabs__figure b { color: var(--color-ink); font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
    .document-tabs__figure b span { color: var(--color-muted); font-size: 11px; font-weight: 600; }
    .document-tabs__gauge { display: block; height: 3px; margin-top: 3px; overflow: hidden; border-radius: 3px; background: var(--color-tile-2); }
    .document-tabs__gauge > span { display: block; height: 100%; background: var(--color-accent); }
    .document-tabs__gauge.is-paid > span { background: var(--color-success); }
    .document-tabs__more { flex: none; align-self: center; margin-left: auto; }
    .document-tabs__figures + .document-tabs__more { margin-left: 0; }
    @media (max-width: 768px) {
        .document-tabs { flex-wrap: wrap; padding-bottom: 8px; }
        .document-tabs__list { flex: 1 1 100%; min-height: 52px; }
        .document-tabs__figures { margin-left: 2px; }
    }
}