/* 业绩榜（老板 10-04：周榜 / 月榜 / 年榜 / 每月实收具体数值，全员可见）。颜色只用 tokens.css 变量。口径在 app/leaderboard.py */
[hidden] { display: none !important; }
body { background: var(--canvas); color: var(--text-primary); margin: 0; }
.lb-app { margin: 0 auto; padding: 20px 16px 48px; max-width: 1400px; display: flex; flex-direction: column; gap: 12px; }
.lb-head h1 { margin: 0 0 4px; font-size: 22px; }
.lb-head p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.lb-fresh { color: var(--text-muted); font-size: 12px; }
.lb-empty { color: var(--text-muted); padding: 28px; text-align: center; }

.lb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lb-bar .lb-lab { font-size: 13px; color: var(--text-secondary); }
.lb-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lb-seg button { border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.lb-seg button:first-child { border-left: 0; }
.lb-seg button.on { background: var(--accent); color: var(--text-on-accent); }

.lb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.lb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.lb-card-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.lb-card-h h2 { margin: 0; font-size: 17px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lb-card-h h2 .sqv-ico { color: var(--accent); }
.lb-sel { margin-left: auto; border: 1px solid var(--border-control); border-radius: 8px; background: var(--surface); color: var(--text-primary);
  font: inherit; font-size: 13px; padding: 4px 8px; max-width: 100%; }
.lb-sum { font-size: 12px; color: var(--text-muted); margin: 0 0 8px; }
.lb-note { font-size: 12px; color: var(--warning-fg); background: var(--warning-bg); border-radius: 6px; padding: 4px 8px; margin: 0 0 8px; }

.lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lb-row { display: grid; grid-template-columns: 26px 30px minmax(64px, 1.2fr) minmax(28px, 1fr) auto 36px; gap: 7px; align-items: center;
  padding: 6px 4px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.lb-row:last-child { border-bottom: 0; }
.lb-row.me { background: var(--accent-soft-bg); border-radius: 8px; }
.lb-rk { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--text-secondary); background: var(--surface-sunken); }
.lb-rk.r1 { background: var(--tag-2-bg); color: var(--tag-2-fg); box-shadow: inset 0 0 0 1.5px var(--tag-2-fg); }
.lb-rk.r2 { background: var(--tag-7-bg); color: var(--tag-7-fg); box-shadow: inset 0 0 0 1.5px var(--tag-7-fg); }
.lb-rk.r3 { background: var(--tag-3-bg); color: var(--tag-3-fg); box-shadow: inset 0 0 0 1.5px var(--tag-3-fg); }
.lb-who { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }   /* 标签放名字下面，名字别被挤成「Va…」 */
.lb-who b { max-width: 100%; }
.lb-tags { display: flex; gap: 3px; flex-wrap: wrap; }
.lb-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-who small, .lb-nm small { font-size: 10px; line-height: 15px; white-space: nowrap; border-radius: 4px; padding: 0 4px; }
.lb-tm.b { color: var(--tag-1-fg); background: var(--tag-1-bg); }
.lb-tm.c { color: var(--tag-4-fg); background: var(--tag-4-bg); }
/* 飞书头像（老板 10-05「加上她们本人的飞书头像」）；没有就显示名字第一个字 */
.lb-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--surface-sunken); display: inline-flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--text-secondary); flex: none; }
.lb-av.sm { width: 22px; height: 22px; font-size: 11px; }
.lb-av0 { border: 1px solid var(--border); }
.lb-row.top .lb-av { box-shadow: 0 0 0 2px var(--tag-2-fg); }
.lb-left { color: var(--text-muted); background: var(--surface-sunken); }
.lb-me { color: var(--text-on-accent); background: var(--accent); }
.lb-barw { height: 8px; background: var(--chart-grid); border-radius: 4px; overflow: hidden; }
.lb-barw i { display: block; height: 100%; background: var(--chart-2); border-radius: 4px; }
.lb-row.top .lb-barw i { background: var(--chart-1); }
/* 老板 10-05「实收写得明显一些，签单可以弱一点点」：排名用的那个数是大字，另一个是灰色小字 */
.lb-amt { text-align: right; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-primary); }
.lb-amt.recv { color: var(--accent); }
.lb-amt small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.lb-sum-r { color: var(--accent); }
.lb-gap { margin-left: 8px; }
.lb-mv { font-size: 11px; text-align: right; white-space: nowrap; }
.lb-mv.up { color: var(--success-fg); }
.lb-mv.dn { color: var(--danger-fg); }
.lb-mv.new { color: var(--accent); }
.lb-mv.eq { color: var(--text-disabled); }
.lb-more { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }

/* 每月实收：一行一个人、一列一个月，具体到元 */
.lb-monthly { margin-top: 12px; }
.lb-wrap { overflow-x: auto; }
.lb-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.lb-table th, .lb-table td { padding: 6px 8px; white-space: nowrap; border-bottom: 1px solid var(--border-subtle); }
.lb-table thead th { background: var(--surface-sunken); color: var(--text-secondary); font-weight: 600; text-align: right; }
.lb-table thead th:first-child { text-align: left; border-top-left-radius: 8px; }
.lb-table thead th:last-child { border-top-right-radius: 8px; }
.lb-table td { text-align: right; }
.lb-table .nm { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; font-weight: 600; }
.lb-nm { display: inline-flex; align-items: center; gap: 6px; }
.lb-table thead .nm { background: var(--surface-sunken); z-index: 2; }
.lb-table td.cur, .lb-table th.cur { background: var(--accent-soft-bg); }
.lb-table td.t1 { background: var(--tag-2-bg); color: var(--tag-2-fg); font-weight: 700; }
.lb-table td.t2 { background: var(--tag-7-bg); color: var(--tag-7-fg); font-weight: 700; }
.lb-table td.t3 { background: var(--tag-3-bg); color: var(--tag-3-fg); font-weight: 700; }
.lb-table td sup { font-size: 10px; margin-left: 2px; }
.lb-table td.neg { color: var(--danger-fg); }
.lb-table td.zero { color: var(--text-disabled); }
.lb-table td.tot, .lb-table th.tot { border-left: 1px solid var(--border); font-weight: 700; }
.lb-table tr.me td, .lb-table tr.me .nm { background: var(--accent-soft-bg); }
.lb-table tfoot td { font-weight: 700; border-top: 2px solid var(--border-strong); border-bottom: 0; background: var(--surface-sunken); }
.lb-table tfoot .nm { background: var(--surface-sunken); }
.lb-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin-top: 8px; }
.lb-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.lb-legend .t1 { background: var(--tag-2-bg); box-shadow: inset 0 0 0 1px var(--tag-2-fg); }
.lb-legend .t2 { background: var(--tag-7-bg); box-shadow: inset 0 0 0 1px var(--tag-7-fg); }
.lb-legend .t3 { background: var(--tag-3-bg); box-shadow: inset 0 0 0 1px var(--tag-3-fg); }
.lb-legend .cur { background: var(--accent-soft-bg); }

@media (max-width: 640px) {
  .lb-app { padding: 12px 10px 40px; }
  .lb-sel, .lb-seg button { font-size: 16px; }      /* 手机上小于 16px 一点就整页放大 */
  .lb-row { grid-template-columns: 26px 28px minmax(60px, 1fr) minmax(24px, 0.6fr) auto 34px; gap: 5px; }
  .lb-av { width: 28px; height: 28px; }
}