/**
 * Cartes statistiques — composant réutilisable
 *
 * Usage :
 *   <div class="card stat-card stat-card-primary">     → gradient bleu (card principale)
 *   <div class="card stat-card stat-card-info">        → fond bleu léger
 *   <div class="card stat-card stat-card-success">     → fond vert léger
 *   <div class="card stat-card stat-card-danger">      → fond rouge léger
 *   <div class="card stat-card stat-card-purple">      → fond violet léger
 *
 *   <div class="stat-icon stat-icon-primary">          → rond blanc transparent (sur gradient)
 *   <div class="stat-icon stat-icon-info">             → rond bleu
 *   <div class="stat-icon stat-icon-success">          → rond vert
 *   <div class="stat-icon stat-icon-danger">           → rond rouge
 *   <div class="stat-icon stat-icon-purple">           → rond violet
 *
 *   <h2 class="text-stat-info">                        → texte bleu
 *   <h2 class="text-stat-success">                     → texte vert
 *   <h2 class="text-stat-danger">                      → texte rouge
 *   <h2 class="text-stat-purple">                      → texte violet
 */

/* ========================================
   VARIANTES DE FOND
   ======================================== */

.stat-card-primary {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}

.stat-card-info,
.stat-card-success,
.stat-card-danger,
.stat-card-purple {
    background: #fff;
    border: 1px solid #e5e7eb;
}

/* ========================================
   ICÔNES RONDES
   ======================================== */

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-primary { background: rgba(255, 255, 255, 0.2); }
.stat-icon-info    { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
.stat-icon-success { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.stat-icon-danger  { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.stat-icon-purple  { background: rgba(168, 85, 247, 0.1); color: #a855f7; }

/* ========================================
   COULEURS DE TEXTE POUR LES VALEURS
   ======================================== */

.text-stat-info    { color: #3B82F6; }
.text-stat-success { color: #22c55e; }
.text-stat-danger  { color: #ef4444; }
.text-stat-purple  { color: #a855f7; }

/* ========================================
   BARRE DE PROGRESSION QUOTA
   ======================================== */

.progress-quota {
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
}

.progress-bar-purple {
    background: #a855f7;
}

/* ========================================
   DARK MODE — Stat cards atténuées
   Les gradients vifs deviennent plus doux,
   les fonds blancs passent en gris foncé.
   ======================================== */

[data-theme=dark] .stat-card-primary {
    background: linear-gradient(135deg, #1E3A5F 0%, #1E40AF 100%);
}

[data-theme=dark] .stat-card-info,
[data-theme=dark] .stat-card-success,
[data-theme=dark] .stat-card-danger,
[data-theme=dark] .stat-card-purple {
    background: #1E293B !important;
    border: 1px solid #334155 !important;
}

/* Cards imbriquées dans d'autres cards (ex: e-MECeF, Activité) */
[data-theme=dark] .card .stat-card-info,
[data-theme=dark] .card .stat-card-success,
[data-theme=dark] .card .stat-card-danger,
[data-theme=dark] .card .stat-card-purple {
    background: #162032 !important;
    border: 1px solid #2D3B4F !important;
}

/* Card neutre imbriquée (ex: Annulées) */
[data-theme=dark] .card .card.border-0:not(.stat-card-primary):not(.stat-card-info):not(.stat-card-success):not(.stat-card-danger):not(.stat-card-purple) {
    background: #162032 !important;
}

/* Icônes : fond plus visible en sombre */
[data-theme=dark] .stat-icon-info    { background: rgba(59, 130, 246, 0.2); color: #60A5FA; }
[data-theme=dark] .stat-icon-success { background: rgba(34, 197, 94, 0.2); color: #4ADE80; }
[data-theme=dark] .stat-icon-danger  { background: rgba(239, 68, 68, 0.2); color: #F87171; }
[data-theme=dark] .stat-icon-purple  { background: rgba(168, 85, 247, 0.2); color: #C084FC; }
[data-theme=dark] .stat-icon-primary { background: rgba(255, 255, 255, 0.15); }

/* Texte des valeurs : couleurs plus claires pour contraste */
[data-theme=dark] .text-stat-info    { color: #60A5FA !important; }
[data-theme=dark] .text-stat-success { color: #4ADE80 !important; }
[data-theme=dark] .text-stat-danger  { color: #F87171 !important; }
[data-theme=dark] .text-stat-purple  { color: #C084FC !important; }

/* Texte h2/h3 dans les stat-cards non-primary : forcer la couleur au lieu du noir */
[data-theme=dark] .stat-card-info h2,
[data-theme=dark] .stat-card-info h3    { color: #60A5FA !important; }
[data-theme=dark] .stat-card-success h2,
[data-theme=dark] .stat-card-success h3 { color: #4ADE80 !important; }
[data-theme=dark] .stat-card-danger h2,
[data-theme=dark] .stat-card-danger h3  { color: #F87171 !important; }
[data-theme=dark] .stat-card-purple h2,
[data-theme=dark] .stat-card-purple h3  { color: #C084FC !important; }

/* Texte paragraphe dans stat-cards en dark */
[data-theme=dark] .stat-card-info p,
[data-theme=dark] .stat-card-success p,
[data-theme=dark] .stat-card-danger p,
[data-theme=dark] .stat-card-purple p {
    color: #94A3B8 !important;
}

[data-theme=dark] .stat-card-info small,
[data-theme=dark] .stat-card-success small,
[data-theme=dark] .stat-card-danger small,
[data-theme=dark] .stat-card-purple small {
    color: #64748B !important;
}