/* ==========================================================================
   统计数值组件 (Statistic)
   ========================================================================== */

.zuoekai-stat {
  display: flex;
  flex-direction: column;
}

.zuoekai-stat {
  --zuoekai-stat-bg: var(--zuoekai-color-surface-panel);
  --zuoekai-stat-border: var(--zuoekai-color-border);
  --zuoekai-stat-value: var(--zuoekai-color-text);
  --zuoekai-stat-label: var(--zuoekai-color-text-secondary);
}

/* 标题/标签 */
.zuoekai-stat__label {
  font-size: 14px;
  color: var(--zuoekai-stat-label);
  margin-bottom: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* 数值 */
.zuoekai-stat__value {
  font-size: 24px;
  font-weight: 700;
  color: var(--zuoekai-color-text);
  line-height: 1.2;
  font-feature-settings: "tnum"; /* Tabular nums for alignment */
}

.zuoekai-stat__value {
  color: var(--zuoekai-stat-value);
}

/* 辅助描述/趋势 */
.zuoekai-stat__desc {
  font-size: 13px;
  color: var(--zuoekai-color-text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 趋势颜色 */
.zuoekai-stat__trend--up {
  color: var(--zuoekai-color-success-600);
}

.zuoekai-stat__trend--down {
  color: var(--zuoekai-color-error-600);
}

.zuoekai-stat__trend--neutral {
  color: var(--zuoekai-color-text-secondary);
}

/* --- 尺寸 (Sizes) --- */

.zuoekai-stat--sm .zuoekai-stat__value {
  font-size: 20px;
}

.zuoekai-stat--lg .zuoekai-stat__value {
  font-size: 36px;
}

/* --- 布局变体 (Variants) --- */

/* 水平布局 (Horizontal) - 适合紧凑空间 */
.zuoekai-stat--horizontal {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
}

.zuoekai-stat--horizontal .zuoekai-stat__label {
  margin-bottom: 0;
  order: 2; /* Label after value */
  font-size: 13px;
}

.zuoekai-stat--horizontal .zuoekai-stat__value {
  order: 1;
}

/* 居中对齐 (Center) */
.zuoekai-stat--center {
  align-items: center;
  text-align: center;
}

.zuoekai-stat--center .zuoekai-stat__desc {
  justify-content: center;
}

/* 统计组 (Stat Group) - 简单的 Flex 容器 */
.zuoekai-stat-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
  padding: 24px;
  background-color: var(--zuoekai-color-surface-panel);
  border: 1px solid var(--zuoekai-color-border);
  border-radius: var(--zuoekai-radius-lg);
}

.zuoekai-stat-group--cards {
  background-color: transparent;
  border: 0;
  padding: 0;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.zuoekai-stat-group--cards .zuoekai-stat {
  padding: 16px;
  background-color: var(--zuoekai-stat-bg);
  border: 1px solid var(--zuoekai-stat-border);
  border-radius: var(--zuoekai-radius-lg);
}

.zuoekai-stat-group--fixed-light .zuoekai-stat {
  --zuoekai-stat-label: #6b7280;
}

.zuoekai-stat-group--fixed-light .zuoekai-stat:not(.zuoekai-stat--primary):not(.zuoekai-stat--success):not(.zuoekai-stat--warning):not(.zuoekai-stat--error):not(.zuoekai-stat--info):not(.zuoekai-stat--purple) {
  --zuoekai-stat-bg: #ffffff;
  --zuoekai-stat-border: rgba(15, 23, 42, 0.08);
  --zuoekai-stat-value: #111827;
}

/* --- 颜色语义 (Colors) --- */

.zuoekai-stat--primary {
  --zuoekai-stat-bg: var(--zuoekai-color-brand-50);
  --zuoekai-stat-border: var(--zuoekai-color-brand-200);
  --zuoekai-stat-value: var(--zuoekai-color-brand-700);
}

.zuoekai-stat--success {
  --zuoekai-stat-bg: #dcfce7;
  --zuoekai-stat-border: #bbf7d0;
  --zuoekai-stat-value: var(--zuoekai-color-success-600);
}

.zuoekai-stat--warning {
  --zuoekai-stat-bg: #fef3c7;
  --zuoekai-stat-border: #fde68a;
  --zuoekai-stat-value: var(--zuoekai-color-warning-600);
}

.zuoekai-stat--error {
  --zuoekai-stat-bg: #fee2e2;
  --zuoekai-stat-border: #fecaca;
  --zuoekai-stat-value: var(--zuoekai-color-error-600);
}

.zuoekai-stat--info {
  --zuoekai-stat-bg: #e0f2fe;
  --zuoekai-stat-border: #bae6fd;
  --zuoekai-stat-value: var(--zuoekai-color-info-600);
}

.zuoekai-stat--purple {
  --zuoekai-stat-bg: rgba(99, 102, 241, 0.10);
  --zuoekai-stat-border: rgba(99, 102, 241, 0.22);
  --zuoekai-stat-value: var(--zuoekai-color-brand-700);
}

@media (max-width: 480px) {
  .zuoekai-stat-group--cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px;
  }

  .zuoekai-stat-group--cards .zuoekai-stat {
    padding: 12px;
    scroll-snap-align: start;
  }

  .zuoekai-stat__label {
    font-size: 13px;
  }

  .zuoekai-stat__value {
    font-size: 22px;
  }

  .zuoekai-stat__desc {
    font-size: 12px;
  }
}

/* --- 行式变体 (Row) ---
   标签在左、数值在右的两端对齐行，适合卡片内的 KPI 列表。
   用法：.zuoekai-stat.zuoekai-stat--row > .zuoekai-stat__label + .zuoekai-stat__value
   颜色：追加 zuoekai-stat--primary / --success / --error 即可着色数值
   ========================================================================== */
.zuoekai-stat--row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--zuoekai-color-border-light, rgba(0,0,0,0.06));
}

.zuoekai-stat--row:last-child {
  border-bottom: none;
}

.zuoekai-stat--row .zuoekai-stat__label {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--zuoekai-color-text-secondary);
}

.zuoekai-stat--row .zuoekai-stat__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--zuoekai-stat-value, var(--zuoekai-color-text));
  font-feature-settings: "tnum";
}

/* 行式变体 - 小尺寸 */
.zuoekai-stat--row.zuoekai-stat--sm .zuoekai-stat__value {
  font-size: 15px;
  font-weight: 600;
}

/* 带有分隔线的组 (Divided) */
@media (min-width: 640px) {
  .zuoekai-stat-group--divided {
    display: flex;
    padding: 0;
    overflow: hidden;
  }
  
  .zuoekai-stat-group--divided .zuoekai-stat {
    flex: 1;
    padding: 24px;
    border-right: 1px solid var(--zuoekai-color-border);
    border-radius: 0;
  }
  
  .zuoekai-stat-group--divided .zuoekai-stat:last-child {
    border-right: none;
  }
}