/* Montants et ventilation : le module fournit les valeurs, UiBundle leur présentation. */
@layer components {
    .value-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
        padding: var(--space-panel-content);
        border-top: 1px solid var(--color-line);
    }
    .value-summary__rows {
        display: flex;
        flex-direction: column;
        gap: var(--space-form-row);
        width: min(100%, 21rem);
        margin-inline-start: auto;
        font-variant-numeric: tabular-nums;
    }
    .value-summary__row,
    .value-summary__total {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: calc(var(--spacing) * 4);
        color: var(--color-ink-2);
        font-size: .8125rem;
    }
    .value-summary__row > :last-child { white-space: nowrap; }
    .value-summary__row small { color: var(--color-muted); font-size: var(--font-size-field-caption); }
    .value-summary__row.is-strong > :last-child { color: var(--color-ink); font-weight: 600; }
    .value-summary__row.is-margin { color: var(--color-success); font-size: var(--font-size-field-caption); }
    .value-summary__row.is-remaining { color: var(--color-danger); font-weight: 700; }
    .value-summary__row.is-settled { color: var(--color-success); font-weight: 600; }
    .value-summary__row .fad { margin-inline-end: var(--spacing); }
    .value-summary__total {
        margin-block-start: var(--spacing);
        padding-block-start: calc(var(--spacing) * 3);
        border-top: 1px solid var(--color-line);
        color: var(--color-ink);
        font-weight: 600;
    }
    .value-summary__total strong { font-size: 1.25rem; font-weight: 700; }

    .value-breakdown { flex: 1 1 15rem; max-width: 23rem; min-width: 0; }
    .value-breakdown__title {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        margin-block-end: calc(var(--spacing) * 2);
        color: var(--color-muted);
        font-size: var(--font-size-field-caption);
        font-weight: 600;
        text-transform: uppercase;
    }
    .value-breakdown__title [title] { cursor: help; }
    .value-breakdown__bar {
        display: flex;
        gap: calc(var(--spacing) / 2);
        height: calc(var(--spacing) * 1.5);
        overflow: hidden;
        border-radius: var(--radius-pill);
        background: var(--color-tile-2);
    }
    .value-breakdown__bar > span { min-width: var(--spacing); }
    .value-breakdown__legend { display: flex; flex-direction: column; gap: var(--spacing); margin-block-start: calc(var(--spacing) * 3); list-style: none; padding: 0; }
    .value-breakdown__legend > li { display: flex; align-items: center; gap: calc(var(--spacing) * 2); color: var(--color-ink-2); font-size: var(--font-size-field-caption); }
    .value-breakdown__dot { flex: none; width: calc(var(--spacing) * 2); height: calc(var(--spacing) * 2); border-radius: var(--radius-pill); }
    .value-breakdown__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .value-breakdown__value { color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
}