.stats-wrapper.graphique {
    --chart-text: #1d2830;
    --chart-muted-text: #51606d;
    --chart-grid: #d9e2ea;
    --chart-axis: #8ca0b2;
    --chart-tooltip-bg: rgba(29, 40, 48, 0.95);
    --chart-tooltip-text: #ffffff;
    --chart-series-1: #ff2424;
    --chart-series-2: #ff9b18;
    --chart-series-3: #028eb1;

    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
    min-width: 0;
}

.dark .stats-wrapper.graphique {
    --chart-text: #fafafa;
    --chart-muted-text: #fafafa;
    --chart-grid: rgba(250, 250, 250, 0.14);
    --chart-axis: rgba(250, 250, 250, 0.35);
    --chart-tooltip-bg: rgba(10, 10, 10, 0.92);
    --chart-tooltip-text: #ffffff;
}

.chart-toolbar {
    display: flex;
    gap: 10px;
    justify-content: flex-end;

    .chart-toggle {
        border: 1px solid var(--cts-main);
        background: transparent;
        color: var(--cts-main);
        border-radius: 8px;
        padding: 6px 10px;
        cursor: pointer;
        font-weight: 700;
        margin: 0;
        width: 120px;

        &:hover {
            color: white;
            border: 1px solid var(--cts-alt);
        }
    }

    .chart-toggle.active {
        background: var(--cts-main);
        color: #fafafa;
        pointer-events: none;
    }
}

.chart-canvas-wrap {
    width: 100%;
    height: 150px;
    flex: 1 1 auto;
    min-width: 0;
}

.pro-chart-canvas {
    width: 100%;
    height: 100%;
    display: block;
}