.salaries-chart {
    width: 95%;
    margin: 10px auto;
    position: relative;
    display: flex;
    /* Keep row heights stable across columns (prevents drift on browser zoom). */
    --cts-row-h: 1.1rem;
    --cts-row-gap: 3px;
    --cts-cell-pad-x: 10px;
    --cts-bar-h: 0.65rem;

    .chart-cols {
        display: flex;
        flex-direction: column;
        gap: var(--cts-row-gap);
    }

    .salarie-name,
    .bar-container,
    .salarie-row {
        white-space: nowrap;
        font-size: .8em;
        padding: 0 var(--cts-cell-pad-x);
        margin: 0;
        box-sizing: border-box;
        min-height: var(--cts-row-h);
        line-height: var(--cts-row-h);
    }

    .salarie-name {
        text-align: right;
        /* Make text "cell" height deterministic (pairs with min-height above). */

        &:first-child:not(.repartition) {
            text-align: center;
            border-bottom: 1px solid black;
        }
    }

    .bars {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--cts-row-gap);

        .avg-line {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: red;
            z-index: 1;
            pointer-events: none;
        }

        .avg-line span {
            position: sticky;
            top: 80px;
            left: 0;
            display: inline-block;
            padding: 5px;
            background: red;
            color: white;
            white-space: nowrap;
            font-size: .8em;
            z-index: 1;
        }

        .avg-line.avg-line-left span {
            transform: translateX(0);
        }

        .avg-line.avg-line-right span {
            transform: translateX(-100%);
        }

        .bar-container,
        .bar {
            box-sizing: border-box;
        }

        .bar-container {
            background: transparent;
            /* Spacing is handled by the column gap to keep rows aligned across columns. */
            min-height: 0;
            height: var(--cts-row-h);
            position: relative;
            align-items: center;
        }

        /* The thin track draws the "container" and clips the colored bar for tiny values. */
        .bar-track {
            width: 100%;
            height: var(--cts-bar-h);
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            align-items: stretch;
        }

        .bar {
            background: linear-gradient(90deg, var(--cts-main), var(--cts-alt));
            color: white;
            height: 100%;
            padding: 0;
            white-space: nowrap;
            border-radius: inherit;
        }

        .stacked-bar {
            display: flex;
            height: 18px;
            overflow: hidden;
            background: var(--cts-alt-light);
            margin: 0;
        }

        .bar-part {
            background-color: var(--cts-main);
            height: 100%;
        }

        .bar-pro {
            background-color: var(--cts-alt);
            height: 100%;
        }

        .bar-part,
        .bar-pro {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: .7em;
        }

        .bar-container,
        .repartition-bars-container {
            border-radius: 4px;
            display: flex;
        }

        .bar-container {
            padding: 0 var(--cts-cell-pad-x);
        }

        .repartition-bars-container {
            flex: 1;
            align-items: center;
            padding: 0;
        }
    }

    .nb {
        text-align: right;
    }
}

/* First 4 panels (nb_controles, prix_moyen, temps_moyen, taux_refus): thinner rows/bars. */
.stats-container > .stats-wrapper:nth-child(-n+4) .salaries-chart {
    --cts-row-h: 1.1rem;
    --cts-row-gap: 3px;
    --cts-bar-h: 0.45rem;
}