/* 营销大脑对客页面 · 图表 tooltip 样式
 *
 * ECharts 的 tooltip.formatter 返回的是 HTML，ECharts 只负责外层的底色、圆角、
 * 投影（见 chart-theme.js），内部排版全靠这里的 CSS。
 * 只抄 chart-theme.js 不抄本文件，tooltip 会是没有排版的裸文本。
 *
 * 结构约定（formatter 生成的 HTML 用这套 class）：
 *   .migration-chart-tooltip                外层容器
 *     .migration-chart-tooltip__head        顶部标题行（日期居左、车系居右）
 *     .migration-chart-tooltip__asset-row   数据行（色点 + 名称 + 右对齐数值 + 环比）
 *       .migration-chart-tooltip__asset-name  名称，内含 <i> 色点，色值走 --tip-color
 *     .migration-chart-tooltip__group       分组（重合分析用，本品 / 竞品各一组）
 *     .migration-chart-tooltip__divider     组间分隔线
 *
 * 修饰类：--standard 两列 / --composition 三列 / --flow 加宽 / --overlap-groups 分组版
 */

.migration-chart-tooltip{min-width:150px;color:var(--text-default);font-family:var(--font-family-default);font-size:var(--body-caption-font-size)}
.migration-chart-tooltip__date{margin-bottom:var(--spacer-8);font-weight:var(--font-weight-medium)}
.migration-chart-tooltip__row{display:flex;align-items:center;gap:var(--spacer-8);margin-top:var(--spacer-4)}
.migration-chart-tooltip__row i{width:8px;height:8px;flex:0 0 auto;background:var(--tip-color);border-radius:var(--radius-full)}
.migration-chart-tooltip__row strong{margin-left:auto;padding-left:var(--spacer-16);font-weight:var(--font-weight-medium)}
.migration-chart-tooltip--flow{min-width:220px}
.migration-chart-tooltip__event{margin-bottom:var(--spacer-8);padding:var(--spacer-4) var(--spacer-8);color:var(--brand-primary);background:var(--brand-primary-a10);border-radius:var(--migration-control-radius)}
.migration-chart-tooltip--composition{min-width:300px}
.migration-chart-tooltip--standard{min-width:240px}
.migration-chart-tooltip__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacer-16);font-size:14px}
.migration-chart-tooltip__head strong{font-weight:var(--font-weight-medium)}
.migration-chart-tooltip__asset-row{display:grid;grid-template-columns:minmax(76px,1fr) 92px 82px;align-items:center;gap:var(--spacer-12);margin-top:var(--spacer-8)}
.migration-chart-tooltip--standard .migration-chart-tooltip__asset-row{grid-template-columns:minmax(100px,1fr) 92px}
.migration-chart-tooltip__asset-name{display:flex;align-items:center;gap:var(--spacer-8)}
.migration-chart-tooltip__asset-name>i{width:8px;height:8px;flex:0 0 auto;background:var(--tip-color);border-radius:var(--radius-full)}
.migration-chart-tooltip__asset-row>strong{text-align:right;font-weight:var(--font-weight-default)}
.migration-chart-tooltip__asset-row>em{display:flex;align-items:center;justify-content:flex-end;gap:var(--spacer-4);font-style:normal;font-weight:var(--font-weight-medium);white-space:nowrap}
.migration-chart-tooltip__asset-row>em.is-neutral{color:var(--text-secondary)}
.migration-chart-tooltip--overlap{min-width:320px}
/* 2026-08-17 V4 重合分析 hover 弹窗：本品/竞品元数据两组；样式对齐其他图表 hover 卡（标题 14px/21px/下边距 16px、行距 8px、gap 12px、标签默认色、值字重 400）。 */
.migration-chart-tooltip--overlap-meta{min-width:250px}
/* 2026-08-18 V5 重合分析 tooltip 分组版：按 MasterGo 652:108431 的展示逻辑——
   日期两组共用，提到顶部当总标题；下面「本品 / 竞品」两组，中间 rgba(17,30,54,.1) 细线分隔；
   每组先一行「车系 · 资产范围」作为副标题，再是 uv / 重叠uv 两行数值。
   行本身复用 __asset-row / __asset-name（色点 + 名称 + 右对齐数值），保证与其他 popover 同款。 */
.migration-chart-tooltip--overlap-groups{min-width:260px}
/* 2026-08-19 分层调整：原来分组头 12px、和组内数值行同字号同色，三层信息压成一层，
   扫读时分不清「本品 / 竞品」是标题还是数据。改成三级——
   顶部日期 14px/600 > 分组头 14px（分组名 500 / 车系范围 400）> 数值行 12px。
   车系与资产范围是这一组数据的口径，和分组名同等重要，所以同字号同色，
   只用字重区分「谁是组名、谁是口径」，不置灰。
   分组名与「车系 · 范围」仍在同一行，排布与顶部 __head 保持一致。 */
.migration-chart-tooltip__group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--spacer-16);
  font-size:var(--body-base-font-size);
  line-height:var(--body-base-line-height);
  color:var(--text-default);
}
.migration-chart-tooltip__group-title{font-weight:var(--font-weight-medium)}
.migration-chart-tooltip__group-meta{font-weight:var(--font-weight-default)}
/* 组内节奏：分组头到首行 8px（比组间的分隔线 16px 近一半），组内行间 8px，
   靠「近的成组、远的分组」把两组拉开，而不是靠更多分隔线。 */
.migration-chart-tooltip--overlap-groups .migration-chart-tooltip__group-head{margin-bottom:var(--spacer-4)}
.migration-chart-tooltip__group .migration-chart-tooltip__asset-row{margin-top:var(--spacer-8)}
.migration-chart-tooltip--overlap-groups .migration-chart-tooltip__asset-name{color:var(--text-regular)}
.migration-chart-tooltip--overlap-groups .migration-chart-tooltip__asset-row>strong{color:var(--text-default);font-weight:var(--font-weight-medium)}
.migration-chart-tooltip--overlap-groups .migration-chart-tooltip__head{margin-bottom:var(--spacer-12)}
.migration-chart-tooltip--overlap-groups .migration-chart-tooltip__head strong{font-weight:var(--font-weight-strong)}
.migration-chart-tooltip__divider{
  height:1px;
  margin:var(--spacer-16) 0;
  background:rgba(17,30,54,.1);
}