/* Tout en couleur var(--fg) */
.clients-analytics, .clients-analytics * {
    color: var(--fg);
}

.clients-analytics .filters {
    display: grid;
    gap: .5rem;
    margin-bottom: 12px;
}

    .clients-analytics .filters .labels,
    .clients-analytics .filters .inputs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px 16px;
        align-items: end;
    }

    .clients-analytics .filters .labels label {
        font-size: 0.85rem;
        font-weight: 600;
    }

    .clients-analytics .filters .inputs .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .clients-analytics .filters .inputs .label-compact {
        display: none;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .clients-analytics .filters input,
    .clients-analytics .filters select {
        height: var(--ctl-h);
        line-height: calc(var(--ctl-h) - 16px);
    }

/* KPI colors */
.pnl.pos {
    color: #17c964;
}

.pnl.neg {
    color: #f31260;
}

.wr.bin0 {
    color: #f31260;
}

.wr.bin1 {
    color: #f39c12;
}

.wr.bin2 {
    color: #f1c40f;
}

.wr.bin3 {
    color: #2ecc71;
}

.wr.bin4 {
    color: #17c964;
    font-weight: 700;
}

.dd.bin0 {
    color: #17c964;
}

.dd.bin1 {
    color: #2ecc71;
}

.dd.bin2 {
    color: #f39c12;
}

.dd.bin3 {
    color: #f31260;
    font-weight: 700;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 10px;
}

    .toolbar .left button, .toolbar .right a {
        border: 1px solid var(--color2);
        background: var(--bg);
        border-radius: 10px;
        padding: 10px 18px;
        color: var(--fg);
        text-decoration: none;
        height: 38px;
        display: inline-flex;
        align-items: center;
    }

        .toolbar .left button:hover, .toolbar .right a:hover {
            border-color: var(--color1);
        }

.alignTable, #alignTable {
    text-align: right;
}

@media (max-width: 1100px) {
    .clients-analytics .filters .labels {
        display: none;
    }

    .clients-analytics .filters .inputs .label-compact {
        display: block;
    }

    .clients-analytics .filters .inputs {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}