/* ============ WEHERE BSS 浅色主题（浅底 + 橙色强调） ============ */
:root {
  --primary-color: #F97316 !important;
  --primary-hover: #EA580C !important;
  --bg-color: #F6F8FB !important;
  --sidebar-bg: #FFFFFF !important;
  --header-bg: #FFFFFF !important;
  --text-color: #1F2937 !important;
  --text-light: #64748B !important;
  --border-color: #E6EAF0 !important;
  --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  --success-color: #16A34A !important;
  --warning-color: #D97706 !important;
  --danger-color: #DC2626 !important;
  --font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', Arial, sans-serif;
}

body {
  background: linear-gradient(180deg, #FAFBFF 0%, #F1F5F9 100%) !important;
  color: #1F2937 !important;
}

/* ============ 结构层 ============ */
.header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E6EAF0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
.sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid #E6EAF0 !important;
}
.main-container, .content, .page, .page.active { background: transparent !important; color: #1F2937 !important; }

/* ============ 导航 ============ */
.nav-item { color: #64748B !important; }
.nav-item:hover { color: #F97316 !important; background: #FFF3E8 !important; }
.nav-item.active {
  color: #F97316 !important;
  background: #FFF3E8 !important;
  border-right: 3px solid #F97316 !important;
  font-weight: 700;
}
.collapse-btn {
  background: #F1F5F9 !important;
  color: #64748B !important;
  border: 1px solid #E6EAF0 !important;
}
.collapse-btn:hover { background: #FFF3E8 !important; color: #F97316 !important; }

/* ============ 容器/卡片 ============ */
.card, .chart-card, .settings-card, .target-card, .feedback-form,
.ranking-list, .targets-grid .target-card, .comparison-section,
.year-comparison, .quarter-target-section, .month-target-section,
.target-completion-section, .ranking-section, .filter-bar, .pagination,
.settings-section, .chart-section, .comparison-grid {
  background-color: #FFFFFF !important;
  color: #1F2937 !important;
  border-color: #E6EAF0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}
.card h3, .chart-card h3, .target-card h3 { color: #1F2937 !important; }
.card .value { color: #F97316 !important; font-weight: 800; }
.card .value.cyan { color: #0EA5E9 !important; }

/* ============ 表格 ============ */
.table-container {
  background: #FFFFFF !important;
  border: 1px solid #E6EAF0 !important;
  border-radius: 10px !important;
}
.data-table th {
  background: #F8FAFC !important;
  color: #64748B !important;
  border-bottom: 1px solid #E6EAF0 !important;
}
.data-table td {
  border-bottom: 1px solid #EFF2F6 !important;
  color: #1F2937 !important;
}
.data-table tbody tr:hover, .data-table tr:hover { background: #FFF7ED !important; }
.data-table tbody tr:nth-child(even) { background: #FBFCFE !important; }

/* ============ 排行 ============ */
.ranking-item {
  background: #FFFFFF !important;
  border: 1px solid #E6EAF0 !important;
  color: #1F2937 !important;
}
.ranking-item:hover { background: #FFF7ED !important; }
.rank-number { background: #F1F5F9 !important; color: #64748B !important; }
.ranking-item:nth-child(1) .rank-number { background: #F59E0B !important; color: #FFFFFF !important; }
.ranking-item:nth-child(2) .rank-number { background: #94A3B8 !important; color: #FFFFFF !important; }
.ranking-item:nth-child(3) .rank-number { background: #D97706 !important; color: #FFFFFF !important; }
.employee-rank { color: #64748B !important; }
.employee-score { color: #F97316 !important; font-weight: 700 !important; }

/* ============ 按钮 ============ */
.btn-primary {
  background: #F97316 !important;
  color: #FFFFFF !important;
}
.btn-primary:hover { background: #EA580C !important; }
.btn-secondary {
  background: #FFFFFF !important;
  color: #374151 !important;
  border: 1px solid #D8DEE7 !important;
}
.btn-secondary:hover { background: #FFF3E8 !important; color: #F97316 !important; border-color: #F97316 !important; }

/* ============ 表单 ============ */
input[type="text"], input[type="number"], input[type="date"], input[type="password"], input[type="search"],
select, textarea {
  background-color: #FFFFFF !important;
  color: #1F2937 !important;
  border-color: #D8DEE7 !important;
}
input:focus, select:focus, textarea:focus { border-color: #F97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12) !important; outline: none; }
input::placeholder { color: #9CA3AF !important; }
.form-group label { color: #4B5563 !important; }
.filter-bar input, .filter-bar select { background-color: #FFFFFF !important; color: #1F2937 !important; }

/* ============ 弹窗 ============ */
.modal-content {
  background: #FFFFFF !important;
  color: #1F2937 !important;
  border: 1px solid #E6EAF0 !important;
}
.modal-content h3 { color: #111827 !important; }
.modal-content label { color: #4B5563 !important; }
.modal-content small { color: #6B7280 !important; }
.modal { background: rgba(15, 23, 42, 0.45) !important; }

/* ============ 进度条 ============ */
.progress-bar { background: #F1F5F9 !important; }
.progress { background: linear-gradient(90deg, #FB923C, #F97316) !important; }
.progress-text { color: #64748B !important; }

/* ============ 状态 ============ */
.status-tag { border-radius: 6px; }
.status-completed { background: #F0FDF4 !important; color: #16A34A !important; }
.status-processing { background: #FFF7ED !important; color: #F97316 !important; }
.status-pending { background: #FFFBEB !important; color: #D97706 !important; }
.growth-up { color: #16A34A !important; }
.growth-down { color: #DC2626 !important; }

/* ============ 杂项 ============ */
.page-header h2 { color: #111827 !important; }
.page-header h2::before { color: #F97316 !important; }
.username { color: #1F2937 !important; }
.pagination button {
  background: #FFFFFF !important;
  color: #374151 !important;
  border: 1px solid #D8DEE7 !important;
}
.pagination button:hover { background: #FFF3E8 !important; color: #F97316 !important; }
.comparison-table { border: 1px solid #E6EAF0 !important; }
.comparison-table th { background: #F8FAFC !important; color: #64748B !important; }
.target-subtext { color: #64748B !important; }
.target-hierarchy { color: #1F2937 !important; }

/* ============ 首页电视风看板（浅色版） ============ */
.tv-dash {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
.tv-panel {
  background: #FFFFFF;
  border: 1px solid #E6EAF0;
  border-radius: 14px;
  padding: 18px 20px;
  flex: 1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.04);
}
.tv-panel-title {
  font-size: 14px;
  color: #64748B;
  letter-spacing: 2px;
  margin-bottom: 12px;
  border-left: 4px solid #F97316;
  padding-left: 10px;
  font-weight: 600;
}
.tv-kpi { margin-bottom: 14px; }
.tv-kpi .tv-num {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tv-kpi .tv-num.gold { color: #F97316; }
.tv-kpi .tv-num.cyan { color: #0EA5E9; }
.tv-kpi .tv-label { font-size: 12px; color: #94A3B8; margin-top: 2px; }

.tv-goal { margin-bottom: 12px; }
.tv-goal .goal-label { font-size: 12px; color: #64748B; margin-bottom: 4px; }
.tv-goal .goal-num { font-size: 18px; font-weight: 700; color: #111827; }
.tv-goal .goal-num small { font-size: 12px; color: #94A3B8; font-weight: 400; }
.tv-goal .bar { height: 12px; background: #F1F5F9; border-radius: 6px; overflow: hidden; margin-top: 6px; }
.tv-goal .bar .fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #FB923C, #F97316);
  transition: width 0.8s ease;
}
.tv-goal .pct-text { font-size: 11px; color: #94A3B8; margin-top: 3px; text-align: right; }

.tv-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: #1F2937;
}
.tv-rank-row:hover { background: #FFF7ED; }
.tv-rank-row .pos {
  width: 22px; height: 22px; border-radius: 50%;
  background: #F1F5F9; color: #64748B;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.tv-rank-row.r1 .pos { background: #F59E0B; color: #FFFFFF; }
.tv-rank-row.r2 .pos { background: #94A3B8; color: #FFFFFF; }
.tv-rank-row.r3 .pos { background: #D97706; color: #FFFFFF; }
.tv-rank-row .name { width: 90px; color: #1F2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-rank-row .rbar { flex: 1; height: 6px; background: #F1F5F9; border-radius: 3px; overflow: hidden; }
.tv-rank-row .rbar .fill { height: 100%; background: linear-gradient(90deg, #FB923C, #F97316); border-radius: 3px; }
.tv-rank-row .amt { color: #F97316; font-weight: 700; font-variant-numeric: tabular-nums; }

.tv-feed { max-height: 300px; overflow: hidden; font-size: 12px; color: #64748B; line-height: 2; }
.tv-feed .item { border-bottom: 1px dashed #E6EAF0; padding: 4px 0; }
.tv-feed .item b { color: #F97316; font-weight: 600; }
.tv-feed .item .amt { color: #F97316; }

@media (max-width: 900px) {
  .tv-dash { flex-direction: column; }
}