/* ========================================
 * STATS INLINE BAR - Pharma Toolkit
 * Badges pills horizontaux visibles
 * 
 * Version : 4.1.0 - Design pills horizontaux
 * ======================================== */

/* ========================================
 * BARRE STATS - Pills Horizontaux
 * ======================================== */

.stats-bar-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    margin: 8px 0;
    background: transparent;
    flex-wrap: wrap;
}

.stats-bar-inline .stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: none;
}

/* Couleurs par type */
.stats-bar-inline .stat-pill.vigilance {
    background: #FFF3E0;
    border-color: #FFB74D;
    color: #E65100;
}

.stats-bar-inline .stat-pill.promo {
    background: #E8F5E9;
    border-color: #66BB6A;
    color: #2E7D32;
}

.stats-bar-inline .stat-pill.reclamation {
    background: #FFEBEE;
    border-color: #EF5350;
    color: #C62828;
}

.stats-bar-inline .stat-pill.traite {
    background: #ECEFF1;
    border-color: #78909C;
    color: #455A64;
}

.stats-bar-inline .stat-pill.total {
    background: #E3F2FD;
    border-color: #2196F3;
    color: #1565C0;
}

/* Pour Produits - couleurs expiration */
.stats-bar-inline .stat-pill.expired {
    background: #FFEBEE;
    border-color: #f44336;
    color: #C62828;
}

.stats-bar-inline .stat-pill.warning {
    background: #FFF3E0;
    border-color: #ff9800;
    color: #E65100;
}

.stats-bar-inline .stat-pill.caution {
    background: #FFFDE7;
    border-color: #ffc107;
    color: #F57F17;
}

.stats-bar-inline .stat-pill.ok {
    background: #E8F5E9;
    border-color: #4caf50;
    color: #2E7D32;
}

.stat-pill .stat-value {
    font-weight: 700;
}

.stat-pill .stat-label {
    font-weight: 500;
}

/* ========================================
 * RESPONSIVE - Mobile
 * ======================================== */

@media (max-width: 480px) {
    .stats-bar-inline {
        gap: 8px;
        padding: 6px 12px;
    }
    
    .stats-bar-inline .stat-pill {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ========================================
 * GRAPHIQUES HAUTE RÉSOLUTION
 * Performance par Catégorie
 * ======================================== */

/* Amélioration globale des graphiques */
.chart-section > div[style*="grid"] > div {
    min-height: 320px !important;
    padding: 24px !important;
}

.chart-section canvas {
    min-height: 250px !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Titres des sous-graphiques plus visibles */
.chart-section h4 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 20px !important;
    text-align: center;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Légende des seuils plus visible */
.chart-section > div[style*="grid"] > div > div[style*="margin-top: 12px"] {
    padding: 16px !important;
    background: #f8f9fa !important;
    border: 2px solid #e0e0e0 !important;
    margin-top: 16px !important;
}

.chart-section > div[style*="grid"] > div > div span {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
}

/* Couleurs des indicateurs de seuil */
.chart-section > div[style*="grid"] > div > div span[style*="color: #4CAF50"] {
    background: #e8f5e9 !important;
}

.chart-section > div[style*="grid"] > div > div span[style*="color: #FF9800"] {
    background: #fff3e0 !important;
}

.chart-section > div[style*="grid"] > div > div span[style*="color: #f44336"] {
    background: #ffebee !important;
}