/**
 * Statistik-rutor (Stat Cards)
 * Gemensam styling för alla statistik-/KPI-rutor i systemet
 * 
 * Användning:
 * <div class="stat-cards">
 *   <div class="stat-card stat-card--success">
 *     <div class="stat-card__label">Etikett</div>
 *     <div class="stat-card__value">123</div>
 *   </div>
 * </div>
 * 
 * Varianter (modifier-klasser):
 *   --success : Grön (positiva värden, lyckade, godkända)
 *   --warning : Gul/Orange (varningar, väntar)
 *   --danger  : Röd (fel, kritiskt, slut)
 *   --info    : Blå (information, summor)
 *   --primary : Lila/Rosa (primär KPI)
 *   --neutral : Grå (neutral information)
 */

/* Container för stat-cards */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Bas-styling för enskild stat-card */
.stat-card {
  border-radius: 8px;
  padding: 1rem 1.25rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  background: #f8fafc;
  border-left-color: #94a3b8;
  color: #475569;
}

.stat-card__label {
  font-size: 0.75rem;
  opacity: 0.85;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.stat-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Variant: Success (grön) */
.stat-card--success {
  background: #dcfce7;
  border-left-color: #22c55e;
  color: #166534;
}

/* Variant: Warning (gul/orange) */
.stat-card--warning {
  background: #fef3c7;
  border-left-color: #f59e0b;
  color: #92400e;
}

/* Variant: Danger (röd) */
.stat-card--danger {
  background: #fee2e2;
  border-left-color: #ef4444;
  color: #991b1b;
}

/* Variant: Info (blå) */
.stat-card--info {
  background: #dbeafe;
  border-left-color: #3b82f6;
  color: #1e40af;
}

/* Variant: Primary (lila/rosa) */
.stat-card--primary {
  background: #fce7f3;
  border-left-color: #ec4899;
  color: #9d174d;
}

/* Variant: Neutral (grå) */
.stat-card--neutral {
  background: #f1f5f9;
  border-left-color: #64748b;
  color: #334155;
}

/* Responsiv anpassning */
@media (max-width: 640px) {
  .stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 0.75rem !important;
  }
  
  .stat-card {
    padding: 8px 10px !important;
    border-radius: 8px !important;
    border-left-width: 3px !important;
  }
  
  .stat-card__value {
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }
  
  .stat-card__label {
    font-size: 0.6rem !important;
    margin-bottom: 2px !important;
  }
}

@media (max-width: 400px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }
}