/* Cards */
.card {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.budget-card {
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.card-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
}

.card-body {
  padding: var(--spacing-md);
}

.card-footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border-light);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.badge-primary {
  background-color: var(--color-bg-secondary);
  color: var(--color-primary);
  border: 1px solid var(--color-border-light);

}

.badge-success {
  color: var(--color-success);
  border: 1px solid var(--color-success-light);

}

.badge-danger {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
  border: 1px solid var(--color-border-light);

}

.badge-warning {
  color: var(--color-warning);
  border: 1px solid var(--color-border-light);

}

.badge-secondary {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.badge-info {
  color: var(--color-info);
  border: 1px solid var(--color-border-light);

}

/* 记录类型标签 */
.badge-intake {
  border: 1px solid var(--color-warning-light);
  color: var(--color-warning);
}

.badge-exercise {
  border: 1px solid var(--color-success-light);
  color: var(--color-success);
}

.badge-expense {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.badge-income {
  border: 1px solid var(--color-success-light);
  color: var(--color-success);
}

.badge-recurring {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

/* Badge 间距工具类 */
.badge-margin-left {
  margin-left: var(--spacing-xs);
}

.badge-margin-right {
  margin-right: var(--spacing-xs);
}

/* Progress Bar */
.progress {
  width: 100%;
  height: 8px;
  background-color: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: visible; /* 改为 visible，让分隔线可以超出显示 */
  display: flex; /* 支持多段进度条并排显示 */
  position: relative; /* 为绝对定位的子元素提供定位上下文 */
}

.progress-bar {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.progress-bar.warning { background-color: var(--color-warning); }
.progress-bar.danger { background-color: var(--color-danger); }
.progress-bar.success { background-color: var(--color-success); }

/* Progress Bar Fill - 用于多段进度条 */
.progress-bar-fill {
  height: 100%;
  border: 2px solid var(--color-primary);
  background-color: var(--color-bg-secondary);
  transition: width var(--transition-slow);
  flex-shrink: 0; /* 防止压缩 */
}

/* 第一段进度条：左侧圆角 */
.progress-bar-fill:first-child {
  border-top-left-radius: var(--radius-full);
  border-bottom-left-radius: var(--radius-full);
}

/* 最后一段进度条：右侧圆角 */
.progress-bar-fill:last-child {
  border-top-right-radius: var(--radius-full);
  border-bottom-right-radius: var(--radius-full);
}

/* 唯一段进度条：全部圆角 */
.progress-bar-fill:first-child:last-child,
.progress-bar-fill.single-segment {
  border-radius: var(--radius-full);
}

.progress-bar-fill.over-budget {
  border-color: var(--color-danger);
  border-left: 0;
}

/* 进度条分隔线 */
.progress-bar-fill.with-divider {
  position: relative;
  border-right-color: transparent;
}

.progress-bar-fill.with-divider::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -6px;
  height: calc(100% + 12px);
  width: 2px;
  background-color: var(--color-danger);
}