/* Vue liste CClientMission : gauche = statuts, centre = total rond, droite = types + classe */

.ccm-stats-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 0;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    align-items: stretch;
}
.ccm-stats-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
}
@media (max-width: 992px) {
    .ccm-stats-row {
        grid-template-columns: 1fr;
    }
}
/* Lignes supplémentaires : Classe (A,B,C,D) puis Types en bas (Externes, Internes, Portage) */
.ccm-stats-extra-row {
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}
.ccm-stats-extra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.ccm-stats-extra .ccm-stats-classe-panel,
.ccm-stats-classe .ccm-stats-classe-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Gauche : 4 cartes Statut */
.ccm-stats-left {
    display: flex;
    align-items: stretch;
}
.ccm-stats-left .statistics-panel.ccm-stats-status-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 0;
    padding: 0;
    background: transparent;
    width: 100%;
}
@media (max-width: 1200px) {
    .ccm-stats-left .statistics-panel.ccm-stats-status-panel {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Centre : Total dans un style rond */
.ccm-stats-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    text-align: center;
}
.ccm-stats-total-round {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #007bff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.35);
}
.ccm-stats-total-round .ccm-stats-total-value {
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}
.ccm-stats-center .ccm-stats-total-label {
    font-size: 0.8em;
    color: #6c757d;
    margin-top: 6px;
}

/* Droite : Types (Externes, Internes, Portage) + Classe (A, B, C, D) sur la même ligne */
.ccm-stats-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ccm-stats-right .statistics-panel.ccm-stats-type-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    background: transparent;
}
.ccm-stats-right .ccm-stats-classe-panel.ccm-stats-classe-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    margin-left: 4px;
    padding: 0;
    padding-left: 8px;
    border-left: 1px solid #e9ecef;
    background: transparent;
}

/* Cartes type + statut : même style que DemandeValidation */
.ccm-stats-wrapper .stat-card {
    background: white;
    padding: 6px 8px;
    border-radius: 3px;
    text-align: center;
    transition: all 0.2s;
}
.ccm-stats-wrapper .stat-card .stat-pct {
    display: block;
    font-size: 0.7em;
    color: #666;
    margin-top: 2px;
}
.ccm-stats-wrapper .stat-card.border-primary {
    border-left: 2px solid #007bff;
}
.ccm-stats-wrapper .stat-card.border-warning {
    border-left: 2px solid #ffc107;
}
.ccm-stats-wrapper .stat-card.border-success {
    border-left: 2px solid #28a745;
}
.ccm-stats-wrapper .stat-card.border-danger {
    border-left: 2px solid #dc3545;
}
.ccm-stats-wrapper .stat-card.border-info {
    border-left: 2px solid #17a2b8;
}
.ccm-stats-wrapper .stat-card .stat-value {
    font-size: 1.1em;
    font-weight: bold;
}
.ccm-stats-wrapper .stat-card .stat-label {
    color: #666;
    font-size: 0.7em;
}
.ccm-stats-wrapper .stat-card .stat-value.primary {
    color: #007bff;
}
.ccm-stats-wrapper .stat-card .stat-value.warning {
    color: #ffc107;
}
.ccm-stats-wrapper .stat-card .stat-value.success {
    color: #28a745;
}
.ccm-stats-wrapper .stat-card .stat-value.danger {
    color: #dc3545;
}
.ccm-stats-wrapper .stat-card .stat-value.info {
    color: #17a2b8;
}