/* =================================================================
   COMPOSANT STAT-CARD
   Carte de statistique réutilisable avec variantes de couleur

   Usage:
   - .stat-card                    : Carte de base (vertical par défaut)
   - .stat-card--primary/success/warning/info/muted : Variantes de couleur

   Structure HTML:
   <div class="stat-card stat-card--primary">
       <div class="stat-card__icon">...</div>
       <div class="stat-card__content">
           <p class="stat-card__label">Label</p>
           <p class="stat-card__value">123</p>
           <p class="stat-card__detail">Détail</p>
           <!-- Optionnel : progress bar -->
           <div class="stat-card__progress-wrapper">
               <div class="stat-card__progress-header">
                   <span class="stat-card__progress-label">Disponibles</span>
                   <span class="stat-card__progress-value">75%</span>
               </div>
               <div class="stat-card__progress">
                   <div class="stat-card__progress-bar" style="--progress: 75%"></div>
               </div>
           </div>
       </div>
   </div>
   ================================================================= */

/* =================================================================
   BASE
   ================================================================= */

.stat-card {
    background: var(--color-white);
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-2xl);
    border: 1px solid rgba(12, 129, 228, 0.12);
    box-shadow: 0 2px 8px rgba(12, 129, 228, 0.06);
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Barre colorée au survol */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--stat-card-color, var(--gradient-main));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(12, 129, 228, 0.15);
    border-color: rgba(12, 129, 228, 0.25);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

/* =================================================================
   ICÔNE
   ================================================================= */

.stat-card__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    background: var(--stat-card-icon-bg, rgba(12, 129, 228, 0.1));
    color: var(--stat-card-icon-color, var(--color-primary));
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-card:hover .stat-card__icon {
    transform: scale(1.08) rotate(3deg);
}

.stat-card__icon svg {
    width: 32px;
    height: 32px;
}

/* Icon two-tone colors */
.stat-card__icon svg .svg-primary {
    fill: var(--stat-card-icon-color, var(--color-primary));
    opacity: 1;
}

.stat-card__icon svg .svg-secondary {
    fill: var(--stat-card-icon-color, var(--color-primary));
    opacity: 0.45;
}

/* =================================================================
   CONTENU
   ================================================================= */

.stat-card__content p {
    margin: 0;
}

.stat-card__label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-dark);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: var(--spacing-sm);
}

.stat-card__value {
    font-family: var(--font-secondary);
    font-size: 2.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    line-height: 1;
    padding: var(--spacing-sm) 0 var(--spacing-md) 0;
    letter-spacing: -0.02em;
}

.stat-card__detail {
    font-size: var(--font-size-sm);
    color: var(--color-gray-dark);
    font-weight: var(--font-weight-semibold);
}

.stat-card__detail:empty {
    display: none;
}

/* =================================================================
   BARRE DE PROGRESSION (optionnelle)
   ================================================================= */

.stat-card__progress-wrapper {
    margin-top: var(--spacing-md);
}

.stat-card__progress-footer {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.stat-card__progress-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-medium);
    font-weight: var(--font-weight-medium);
}

.stat-card__progress-value {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--stat-card-icon-color, var(--color-primary));
}

.stat-card__progress {
    height: 10px;
    background: linear-gradient(90deg, rgba(12, 129, 228, 0.08), rgba(58, 158, 235, 0.08));
    border-radius: var(--border-radius-full);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-card__progress-bar {
    height: 100%;
    width: var(--progress, 0%);
    background: var(--stat-card-color, var(--gradient-main));
    border-radius: var(--border-radius-full);
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =================================================================
   VARIANTES DE COULEUR
   ================================================================= */

/* Primary (bleu) */
.stat-card--primary {
    --stat-card-color: linear-gradient(90deg, var(--color-primary), #3AB8E8);
    --stat-card-icon-bg: linear-gradient(135deg, rgba(12, 129, 228, 0.12), rgba(58, 158, 235, 0.08));
    --stat-card-icon-color: var(--color-primary);
}

/* Success (vert) */
.stat-card--success {
    --stat-card-color: linear-gradient(90deg, var(--color-success), #34D399);
    --stat-card-icon-bg: linear-gradient(135deg, rgba(48, 147, 68, 0.12), rgba(52, 211, 153, 0.08));
    --stat-card-icon-color: var(--color-success);
}

/* Warning (orange) */
.stat-card--warning {
    --stat-card-color: linear-gradient(90deg, #FF9800, #FFC107);
    --stat-card-icon-bg: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(255, 193, 7, 0.08));
    --stat-card-icon-color: #FF9800;
}

/* Info (bleu foncé) */
.stat-card--info {
    --stat-card-color: linear-gradient(90deg, #2962FF, #448AFF);
    --stat-card-icon-bg: linear-gradient(135deg, rgba(41, 98, 255, 0.12), rgba(68, 138, 255, 0.08));
    --stat-card-icon-color: #2962FF;
}

/* Muted (gris) */
.stat-card--muted {
    --stat-card-color: linear-gradient(90deg, #6B7280, #9CA3AF);
    --stat-card-icon-bg: linear-gradient(135deg, rgba(107, 114, 128, 0.12), rgba(156, 163, 175, 0.08));
    --stat-card-icon-color: #6B7280;
}

/* Error/Danger (rouge) */
.stat-card--error {
    --stat-card-color: linear-gradient(90deg, #dc2626, #ef4444);
    --stat-card-icon-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(248, 113, 113, 0.08));
    --stat-card-icon-color: #dc2626;
}

/* =================================================================
   GRILLE DE STATS
   ================================================================= */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.stats-grid--4cols {
    grid-template-columns: repeat(4, 1fr);
}

/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 1200px) {
    .stats-grid--4cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .stats-grid,
    .stats-grid--4cols {
        grid-template-columns: 1fr;
    }

    .stat-card__value {
        font-size: 2rem;
    }
}