/* Liste Case : cartes gauche = même disposition / taille de base que la droite */
.case-scope-status-stats {
    /* Accent « pro » : bleu ardoise, pas le bleu vif Bootstrap */
    --case-stat-active-accent: #2563eb;
    --case-stat-active-ring: rgba(37, 99, 235, 0.45);
    --case-stat-active-glow: rgba(37, 99, 235, 0.12);
}

/* Répartition propre sans scroll horizontal : gauche majoritaire, droite auto. */
.case-scope-status-stats .ccm-stats-row {
    display: grid;
    grid-template-columns: minmax(0, 55%) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.case-scope-status-stats .ccm-stats-left,
.case-scope-status-stats .ccm-stats-right {
    min-width: 0;
}

.case-scope-status-stats .ccm-stats-left .statistics-panel.ccm-stats-status-panel,
.case-scope-status-stats .ccm-stats-right .statistics-panel.ccm-stats-type-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: stretch;
    margin: 0;
    padding: 0;
    background: transparent;
    width: 100%;
}

@media (max-width: 1280px) {
    .case-scope-status-stats .ccm-stats-row {
        grid-template-columns: 1fr;
    }
}

/* Même gabarit minimal pour toutes les cartes cliquables (gauche + droite) */
.case-scope-status-stats .ccm-stats-left .statistics-panel.ccm-stats-status-panel .stat-card,
.case-scope-status-stats .ccm-stats-right .statistics-panel.ccm-stats-type-panel .stat-card {
    min-width: 92px;
    flex: 0 1 auto;
    box-sizing: border-box;
}

.case-scope-status-stats .case-right-round {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 8px;
}

.case-scope-status-stats .ccm-stats-total-round.ccm-stats-total-round-green {
    background: #28a745;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.35);
}

.case-scope-status-stats .ccm-stats-total-label.ccm-stats-total-label-green {
    color: #28a745;
    font-weight: 600;
}

.ccm-stats-wrapper .case-status-stat-click {
    cursor: pointer;
}

.case-scope-status-stats .stat-card.case-status-stat-click {
    transition:
        box-shadow 0.22s ease,
        background 0.22s ease,
        transform 0.18s ease,
        border-color 0.22s ease;
}

.ccm-stats-wrapper .stat-card.case-status-stat-click:hover {
    opacity: 0.95;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.case-scope-status-stats .stat-card.case-status-stat-click.case-stat-filter-active:hover {
    opacity: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 1px var(--case-stat-active-ring),
        0 6px 18px var(--case-stat-active-glow),
        0 1px 3px rgba(15, 23, 42, 0.06);
}

.case-scope-status-stats .stat-card.case-status-stat-click:hover:not(.case-stat-filter-active) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07);
}

.ccm-stats-wrapper .ccm-stats-total-round.case-status-stat-click:hover {
    box-shadow: 0 4px 14px rgba(0, 123, 255, 0.45);
}

/* Filtre actif : rendu sobre (élévation + fin liséré, pas gros cadre plat) */
.case-scope-status-stats .stat-card.case-stat-filter-active {
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 42%, #f1f5f9 100%);
    border-left-color: var(--case-stat-active-accent) !important;
    border-left-width: 3px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 1px var(--case-stat-active-ring),
        0 4px 14px var(--case-stat-active-glow),
        0 1px 3px rgba(15, 23, 42, 0.06);
    transform: translateY(0);
    z-index: 1;
    position: relative;
}

.case-scope-status-stats .stat-card.case-stat-filter-active .stat-value {
    color: #0f172a;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.case-scope-status-stats .stat-card.case-stat-filter-active .stat-label {
    color: #475569;
    font-weight: 600;
    font-size: 0.72em;
}

.case-scope-status-stats .ccm-stats-total-round {
    transition: box-shadow 0.22s ease, transform 0.18s ease;
}

.case-scope-status-stats .ccm-stats-total-round.case-stat-filter-active {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 3px var(--case-stat-active-ring),
        0 6px 20px var(--case-stat-active-glow),
        0 2px 8px rgba(15, 23, 42, 0.08);
    transform: scale(1.03);
}