/* 经营数据三页共用（经营总览 /mgmt、客户盘点 /mgmt-cust、团队情况 /mgmt-team）。颜色只用 tokens.css 变量（UI 门禁）。
   数和口径文字都由 /api/mgmt* 随数据返回（只给管理员），页面只画。图表零件用 shared/viz.css（SquViz），这里只补月度柱子、卡片和表格。 */
[hidden] { display: none !important; }
body { background: var(--canvas); color: var(--text-primary); margin: 0; }
.mg-app { margin: 0 auto; padding: 20px 16px 48px; max-width: 1400px; display: flex; flex-direction: column; gap: 12px; }
.mg-head h1 { margin: 0 0 4px; font-size: 22px; }
.mg-head p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }

/* 吸顶条：时间段 + 跳段标签 + 数据截至（祖先不能有 overflow；z < 10 让跳段标签在上） */
.mg-bar { position: sticky; top: 0; z-index: 6; background: var(--canvas); padding: 8px 0;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mg-app .mg-bar .sq-sectabs { flex: 1 1 auto; padding: 0; border-bottom: 0; }
.mg-fresh { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.mg-top { display: flex; }      /* 经营总览没有跳段标签，数据截至那行不吸顶 */
.mg-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mg-seg button { border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
  padding: 6px 12px; cursor: pointer; white-space: nowrap; font: inherit; font-size: 13px; }
.mg-seg button:first-child { border-left: 0; }
.mg-seg button.on { background: var(--accent); color: var(--text-on-accent); }
.mg-seg-note { color: var(--text-muted); font-size: 12px; }
.mg-empty { color: var(--text-muted); padding: 28px; text-align: center; }
.mg-busy { opacity: .5; transition: opacity .2s; }

/* 一段：白底卡片，标题左边图标、右边「去哪看 →」 */
.mg-sec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px 16px 14px; min-width: 0; }
.mg-sec-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mg-sec-h .sqv-h { flex: 1 1 auto; margin: 12px 0 4px; }
.mg-sub { color: var(--text-muted); font-size: 12px; margin: 0 0 6px; line-height: 1.6; }
.mg-go { color: var(--accent); font-size: 13px; text-decoration: none; white-space: nowrap; }
.mg-go:hover { text-decoration: underline; }
.mg-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mg-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mg-box { min-width: 0; }
.mg-box h3 { margin: 10px 0 6px; font-size: 14px; color: var(--text-secondary); font-weight: 600; }

/* 「怎么算的」：每段最下面一行，点开看口径（文字由后端给） */
.mg-rule { margin-top: 10px; color: var(--text-muted); font-size: 12px; }
.mg-rule summary { cursor: pointer; width: max-content; }
.mg-rule p { margin: 4px 0 0; line-height: 1.7; }

/* 经营总览：四块（工资 · 盈亏 · 客户 · 团队） */
.mg-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mg-pillar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px 16px 14px;
  display: flex; flex-direction: column; min-width: 0; }
/* 「¥25.5万 比上月 ↑4%」放不下时整段换行，别把「万」折到下一行 */
.mg-app .sqv-kpi-v { flex-wrap: wrap; white-space: nowrap; }
/* 数字卡窄的时候走势线跟着缩（等比，圆点不变形） */
.mg-app .sqv-kpi .sqv-spark { max-width: 100%; height: auto; }
.mg-pillar .sqv-kpis { margin: 6px 0; }
.mg-pillar .sqv-kpi { flex-basis: 130px; }
.mg-lead { border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 6px; }
.mg-lead h3 { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); font-weight: 600; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mg-lead h3 small { color: var(--text-muted); font-weight: 400; }
.mg-be { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-secondary); margin: 2px 0 4px; }
.mg-be .sqv-meter { flex: 1 1 auto; }
.mg-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary);
  border-radius: var(--radius-full); padding: 6px 14px; font-size: 13px; text-decoration: none; }
.mg-chip:hover { border-color: var(--accent); color: var(--accent); }

/* 要点列表（今天值得看的、该回访的、留意的人） */
.mg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mg-list li { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; line-height: 1.6; }
.mg-list li:last-child { border-bottom: 0; }
.mg-list .t { flex: 1 1 auto; min-width: 0; }
.mg-list .t b { font-weight: 600; }
.mg-list .t small { display: block; color: var(--text-muted); font-size: 12px; }
.mg-list .v { flex: none; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.mg-list a { color: var(--text-primary); text-decoration: none; }
.mg-list a:hover { color: var(--accent); text-decoration: underline; }
.mg-names { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }

/* 月度柱子（SquViz 没有）：HTML 画，宽度跟容器走，字不会被拉变形；悬停看数 */
.mg-cols { display: flex; align-items: stretch; gap: 3px; height: 160px; padding-top: 6px; }
.mg-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; cursor: default; }
.mg-col-bar { flex: 1 1 auto; display: flex; flex-direction: column-reverse; gap: 1px; border-bottom: 1px solid var(--chart-axis); }
.mg-col-bar.group { flex-direction: row; align-items: flex-end; gap: 2px; }
.mg-col-bar > i { display: block; min-height: 0; border-radius: 2px 2px 0 0; }
.mg-col-bar.group > i { flex: 1 1 0; }
.mg-col:hover .mg-col-bar { background: var(--surface-hover); }
.mg-col.cur .mg-col-bar > i { opacity: .55; }
.mg-col-l { height: 14px; font-size: 11px; line-height: 14px; color: var(--text-muted); text-align: center; white-space: nowrap; overflow: visible; }
.mg-col-l.hide { visibility: hidden; }

/* 表格：放不下就横着滚（只在表格自己的框里滚，不影响吸顶） */
.mg-wrap { overflow-x: auto; }
.mg-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.mg-table th { background: var(--surface-sunken); color: var(--text-secondary); font-weight: 600; text-align: left; padding: 7px 8px;
  white-space: nowrap; border-bottom: 1px solid var(--border); }
.mg-table th:first-child { border-top-left-radius: 8px; }
.mg-table th:last-child { border-top-right-radius: 8px; }
.mg-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.mg-table th.num, .mg-table td.num { text-align: right; }
.mg-table td.wrap { white-space: normal; min-width: 180px; }
.mg-table td a { color: var(--text-primary); text-decoration: none; }
.mg-table td a:hover { color: var(--accent); text-decoration: underline; }
.mg-table td small { color: var(--text-muted); margin-left: 4px; }
.mg-table tr.bad td:first-child { box-shadow: inset 3px 0 0 var(--danger-fg); }
.mg-neg { color: var(--danger-fg); }
.mg-warn { color: var(--warning-fg); }
.mg-muted { color: var(--text-muted); }
.mg-dot { color: var(--text-disabled); }

.mg-how { color: var(--text-secondary); font-size: 13px; }
.mg-how summary { cursor: pointer; color: var(--text-muted); }
.mg-how li { margin: 4px 0; line-height: 1.6; }

@media (max-width: 1100px) { .mg-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .mg-bar { position: static; }
  .mg-pillars, .mg-grid2, .mg-grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mg-app { padding: 12px 10px 40px; }
  .mg-sec, .mg-pillar { padding: 2px 12px 12px; }
  .mg-seg button { font-size: 16px; padding: 6px 10px; }
  .mg-cols { height: 120px; gap: 2px; }
  .mg-col-l { font-size: 10px; }
  .mg-table { font-size: 12px; }
  .mg-fresh { margin-left: 0; }
}