/* 全局样式变量 */
:root {
  --primary: #4F46E5;
  --secondary: #10B981;
  --accent: #F59E0B;
  --danger: #EF4444;
  --neutral: #6B7280;
  --neutral-light: #F3F4F6;
  --primary-light: #EEF2FF;
}

/* 基础工具类 */
.content-auto {
  content-visibility: auto;
}

.shadow-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 侧边栏项目样式 */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.sidebar-item:hover {
  background-color: var(--primary-light);
  color: var(--primary);
}

.sidebar-item.active {
  background-color: var(--primary-light);
  color: var(--primary);
  font-weight: 500;
}

/* 按钮样式 */
.btn-primary {
  background-color: var(--primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all;
}

.btn-primary:hover {
  background-color: #4338ca;
}

.btn-secondary {
  background-color: var(--secondary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all;
}

.btn-secondary:hover {
  background-color: #059669;
}

.btn-outline {
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all;
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-danger {
  background-color: var(--danger);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all;
}

.btn-danger:hover {
  background-color: #dc2626;
}

/* 输入框样式 */
.input-field {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  transition: all;
}

.input-field:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}

/* 卡片样式 */
.card {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 1.25rem;
  transition: all;
}

.card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 徽章样式 */
.badge {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  font-weight: 500;
}

/* 分页项样式 */
.pagination-item {
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;
  color: #374151;
  cursor: pointer;
  transition: all;
}

.pagination-item:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pagination-item.active {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* 选项卡按钮样式 */
.tab-button {
  padding: 0.75rem 1rem;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all;
}

.tab-button:hover {
  color: var(--primary);
}

.tab-button.active {
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 500;
}

/* 设置项样式 */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  display: flex;
  align-items: center;
}

.setting-description {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.25rem;
  margin-left: 1.5rem;
}

/* 隐藏滚动条 */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 进度条样式 */
.progress-bar {
  height: 100%;
  border-radius: 0.5rem;
}

.progress-bar-full {
  width: 100%;
}

.progress-width-0 {
  width: 0%;
}

.progress-bg-secondary {
  background-color: var(--secondary);
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.progress-bg-danger {
  background-color: var(--danger);
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.progress-bg-primary {
  background-color: var(--primary);
}

/* 收入支出条样式 */
.income-expense-bar {
  height: 0.5rem;
  border-radius: 0.25rem;
}

.income-expense-bg {
  background-color: #e5e7eb;
}

/* 排名列表样式 */
.ranking-progress-bar {
  background-color: #e5e7eb;
  border-radius: 0.25rem;
  height: 0.5rem;
}

.ranking-progress-fill {
  background-color: var(--danger);
  height: 100%;
  border-radius: 0.25rem;
}

/* 收入来源颜色块 */
.income-source-color-block {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  margin-right: 0.5rem;
}

/* 收入来源进度条 */
.income-source-progress-bar {
  background-color: #e5e7eb;
  border-radius: 0.25rem;
  height: 0.5rem;
}

.income-source-progress-fill {
  height: 100%;
  border-radius: 0.25rem;
}

/* 上传进度条 */
.upload-progress-bar {
  height: 100%;
  border-radius: 0.5rem;
  background-color: var(--primary);
  width: 0%;
}