/* ==========================================================================
   MOLECULES / stat-card / stat-card.css
   --------------------------------------------------------------------------
   HTML PATTERN:
     <div class="stat-card">
       <div class="stat-card-header">
         <span class="stat-card-label">Total Pengguna</span>
         <span class="stat-card-icon icon-brand"><!-- svg users --></span>
       </div>
       <p class="stat-card-value">24,521</p>
       <div class="stat-card-trend stat-card-trend-up">
         <span class="stat-card-trend-icon">↑</span>
         <span>12% dari bulan lalu</span>
       </div>
     </div>
   ========================================================================== */

.stat-card {
  display:          flex;
  flex-direction:   column;
  gap:              var(--size-300);
  padding:          var(--spacing-card-sm);
  background-color: var(--color-bg-surface);
  border:           1px solid var(--color-border-default);
  border-radius:    var(--radius-xl);
  box-shadow:       var(--shadow-sm);
}

.stat-card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--size-300);
}

.stat-card-label {
  font-size:      var(--text-label-sm-size);
  font-weight:    var(--font-weight-medium);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.stat-card-icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            var(--size-1000);
  height:           var(--size-1000);
  background-color: var(--color-brand-subtle);
  color:            var(--color-brand);
  border-radius:    var(--radius-lg);
  flex-shrink:      0;
}
.stat-card-icon svg { width: var(--size-icon-md); height: var(--size-icon-md); }

.stat-card-value {
  font-size:   var(--text-heading-lg-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
  margin:      0;
  line-height: var(--leading-tight);
}

.stat-card-trend {
  display:     flex;
  align-items: center;
  gap:         var(--size-100);
  font-size:   var(--text-body-sm-size);
  font-weight: var(--font-weight-medium);
  color:       var(--color-text-secondary);
}

.stat-card-trend-up   { color: var(--color-success-text); }
.stat-card-trend-down { color: var(--color-error-text); }

.stat-card-sub {
  font-size: var(--text-caption-size);
  color:     var(--color-text-disabled);
  margin:    0;
}