/* style.css —— 仿美团商家版经营数据风格（v2）
 * 品牌色：--mt-yellow:#FFC300; --mt-black:#1B1B1B; --bg:#F4F5F7;
 *          --card:#fff; --border:#EBEDF0
 */
:root {
  /* 品牌色：美团黄 / 闪购橙 / 京东红（官方主色）
   * 美团 #FFD100（KPI 营业额高亮与此一致）
   * 闪购橙 #FF7F24 系为即时零售主流橙（无官方色彩规范可核实，待产品确认）
   * 京东红 #E1251B */
  --mt-yellow: #FFD100;
  --mt-yellow-dark: #C79A00;
  --brand-meituan: #FFD100;
  --brand-shanguo: #FF7F24;
  --brand-jd: #E1251B;
  --mt-black: #1B1B1B;
  --mt-gray-900: #1B1B1B;
  --mt-gray-600: #5B616B;
  --mt-gray-500: #8A919F;
  --mt-gray-400: #B7BDC7;
  --mt-gray-300: #D7DBE1;
  --mt-gray-200: #EBEDF0;
  --mt-gray-100: #F4F5F7;
  --bg: #F4F5F7;
  --card: #FFFFFF;
  --border: #EBEDF0;
  --blue: #2E77D0;
  --green: #1FA56E;
  --red: #E34D59;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(27, 27, 27, 0.04), 0 4px 14px rgba(27, 27, 27, 0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--mt-gray-900);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 2026-09-14：**去掉 1200px 上限** —— 窗口变宽时容器随之变宽，页内表格/卡片一起变宽、
 * 展示更多内容（用户反馈：明细表 / 数据导入各模块 / 门店采购记录表在宽窗口下留大片空白）。
 * ⚠️ 本规则被顶栏 `.topbar-inner.container` 与各页 `<main class="container">` 共用，
 *    必须在共享样式表里统一改：若改用「逐页内联覆盖」，顶栏与正文会在不同页之间左右错位。 */
/* 2026-09-14 R9：宽度上限从 none 收敛到 1680px；
   2026-09-17 因「已通知 MM-DD」标签出现而**重标定为 1700px**。
   口径 = 「随窗口放大而增宽，增到内容**完全展示**为止就不再增」。
   1700 = 生产实测**最宽表格**（门店采购记录表，自然宽 **1606**，采购数据录入后金额列变宽）
          + 容器左右 padding 32 + 卡片左右 padding·边框 42 + **竖向滚动条 15**（.table-scroll 有
          max-height + overflow-y:auto，滚动条会吃掉可用宽；不留这 15px 表格底部会多出一条横向滚动条）
          + 5px 余量 → 到 1700 时该表正好不再横向溢出、也不出横向滚动条。
   2026-09-17 重标定说明：主表「操作」列新增「已通知 MM-DD」标签后，该列自然宽 **190 → 213px**
   （较「待通知」宽 23px），整表自然宽随之 **1586 → 1606px**，故容器上限 **1680 → 1700px**。
   （全部明细·每日明细 1535 / 汇总日均 1437 / 导入批次 1208 / 看板 KPI 767，均更窄。）
   注意：本规则被顶栏 .topbar-inner.container（common.js 注入）与各页 <main class="container"> 共用
   —— 属「全局布局类改动」，只能在共享样式表改（逐页内联覆盖会让顶栏与正文跨页错位）。 */
.container { max-width: 1700px; margin: 0 auto; padding: 0 16px; }

/* ---------------- 顶栏（黑） ---------------- */
#app-header {
  background: var(--mt-black);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.topbar-inner {
  display: flex;
  align-items: center;
  height: 56px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  /* 2026-09-07：与 nav 视觉分层——左加 padding-right + 右侧分隔线作为品牌区独立凸显 */
  padding-right: 20px;
  margin-right: 4px;
  position: relative;
}
.brand::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);  /* 半透明白色细线，柔和分隔 */
}

/* 旧 brand-dot 已废弃（2026-09-07 改为 SVG 三色柱状图）；保留以防旧缓存命中 */
.brand-dot { display: none; }

/* 新品牌 ICON：3 色柱状图（黄/橙/红 = 美团/闪购/京东，呼应平台色） */
.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 0;
}
.brand-icon svg { display: block; }

.brand-text {
  color: #FFFFFF;  /* 改为白色，更凸显（之前黄点+黄字，权重感不足） */
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 1px;  /* 加宽字距提升独立品牌感 */
}

.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.topnav a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 15px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s;
}

.topnav a:hover { color: #fff; }

.topnav a.active {
  color: var(--mt-yellow);
  font-weight: 600;
  border-bottom-color: var(--mt-yellow);
}

.top-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.user-name { font-weight: 600; }
.user-role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  padding: 1px 8px;
}

.logout-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}

.logout-btn:hover { background: rgba(255, 255, 255, 0.22); }

/* ---------------- 卡片通用 ---------------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-top: 16px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.card-head h3 {
  font-size: 16px;
  font-weight: 600;
}

.head-tip { color: var(--mt-gray-500); font-size: 12px; }

.head-controls { display: flex; align-items: center; gap: 10px; }

.page-footer {
  text-align: center;
  color: var(--mt-gray-400);
  font-size: 12px;
  padding: 28px 0 20px;
}

.empty-tip {
  color: var(--mt-gray-400);
  text-align: center;
  padding: 30px 10px;
  font-size: 13px;
}

/* ---------------- 环比 delta（红涨绿跌，A 股色板） ---------------- */
.delta-txt {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.delta-txt.up   { color: #E1251B; }
.delta-txt.down { color: #07C160; }
.delta-txt.flat { color: #8A9099; }

/* ---------------- 筛选行 ---------------- */
/* 桌面强制单行：flex-wrap:nowrap；只有 ≤768 媒体查询内才允许换行。
 * 控件均可收缩（min-width:0 + flex 0 1 auto），选“自定义”出现日期区间时仍一行排布。 */
.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 12px 16px;
  /* 2026-09-08：筛选栏吸顶贴顶栏下沿
   * 顶栏 #app-header height=56 + 0 间隔 → top:56
   * z-index 5 与 detail 页 .detail-filter 一致；高于顶栏 50 低于 card 6 */
  position: sticky;
  top: 56px;
  z-index: 5;
  background: #FFFFFF;
  box-shadow: 0 1px 0 var(--border, #EBEDF0);
}
.filter-bar > * { flex: 0 1 auto; min-width: 0; }
.filter-bar .segmented { flex: 0 0 auto; min-width: 0; }
.filter-bar .btn { flex: 0 0 auto; }

.segmented {
  display: inline-flex;
  background: var(--mt-gray-100);
  border: 1px solid var(--mt-gray-200);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.segmented button {
  border: none;
  background: transparent;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--mt-gray-600);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

/* 筛选行内时间 Segmented：收紧内边距，4 按钮不换行 */
.filter-bar .segmented button { padding: 6px 10px; font-size: 12px; }

.segmented button:hover { color: var(--mt-black); }

.segmented button.active {
  background: #fff;
  color: var(--mt-black);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(27, 27, 27, 0.12);
}

.segmented-sm button { padding: 4px 12px; font-size: 12px; }

.custom-range {
  display: none;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.custom-range.visible { display: flex; }

.custom-range input[type="date"] {
  border: 1px solid var(--mt-gray-300);
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 12px;
  color: var(--mt-gray-900);
  background: #fff;
  width: auto;
  min-width: 0;
  max-width: 150px;
}

.range-sep { color: var(--mt-gray-400); flex: 0 0 auto; }

.filter-spacer { flex: 1 1 auto; min-width: 0; }

.select-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mt-gray-600);
  white-space: nowrap;
  min-width: 0;
}

.select-label select,
.mini-select {
  border: 1px solid var(--mt-gray-300);
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  font-size: 13px;
  color: var(--mt-gray-900);
  min-width: 0;
  max-width: 200px;
  width: auto;
}
.select-label select { flex: 0 1 auto; }
.mini-select { flex: 0 0 auto; }

/* 客户名筛选：带搜索建议的 combobox 输入框（建议面板见下方 #accountSuggest） */
#accountSel {
  min-width: 120px;
  max-width: 200px;
  width: auto;
  border: 1px solid var(--mt-gray-300);
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  font-size: 13px;
  color: var(--mt-gray-900);
}
#accountSel:focus {
  outline: none;
  border-color: var(--mt-yellow);
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.2);
}

/* 客户名 combobox 搜索建议面板（.acct-label 为 relative 参照，JS 对齐输入框） */
.acct-label { position: relative; }

#accountSuggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 220;
  max-width: 360px;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--mt-gray-300);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(27, 27, 27, 0.16);
  display: none;
}

.account-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--mt-gray-900);
}
.account-suggest-item.active { background: #FFF7D6; }
.account-suggest-item .as-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-suggest-item .as-cnt {
  flex: none;
  color: var(--mt-gray-500);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.account-suggest-empty {
  padding: 10px 12px;
  color: var(--mt-gray-400);
  font-size: 13px;
  text-align: center;
}

/* ---------------- KPI ---------------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* 2026-09-08：min-height 锁住 KPI 卡高度，消除 setLoading(true) 切换选项时
 *   KPI 数字隐藏 → 高度骤变 → sticky filter-bar 下方 trend 区域跟着 layout shift
 *   → 用户感知的"筛选栏下移错位"顿挫。min-height = 正常态高度（≈116px），
 *   loading 态与正常态同高 → 0 layout shift → 0 抖动。 */
.kpi-card { margin-top: 16px; min-height: 116px; }

.kpi-label {
  color: var(--mt-gray-600);
  font-size: 14px;
  margin-bottom: 8px;
}

.kpi-value {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.kpi-note {
  color: var(--mt-gray-500);
  font-size: 12px;
  margin-top: 8px;
}

/* KPI 卡环比 delta（红涨绿跌） */
.kpi-delta {
  margin-top: 6px;
  min-height: 16px;
  font-variant-numeric: tabular-nums;
}
.kpi-delta:empty { display: none; }
.kpi-delta .delta-txt { font-size: 12px; }

.kpi-accent .kpi-value { color: var(--mt-yellow-dark); }
.kpi-accent { border-top: 3px solid var(--mt-yellow); }

/* KPI 卡点击联动趋势。
 * 高亮统一用 kpi-accent（= 当前选中指标卡）；4 张卡均可点击切趋势线。 */
.kpi-card.kpi-clickable { cursor: pointer; transition: box-shadow 0.15s; }
.kpi-card.kpi-clickable:hover { box-shadow: var(--shadow), inset 0 0 0 1px var(--mt-yellow); }

/* ---------------- 通用搜索建议面板（全局基础规则，2026-09-10）----------------
 * common.js L.attachSuggest 会把面板 append 到 <body>，脱离 .detail-acct 等后代
 * 选择器的作用域，故此处给出全局兜底：限制高度 + 溢出滚动，避免项目(≤20)/客户名(≤50)
 * 建议项过多时面板拉得过长。优先级(0,1,0)低于 .detail-acct .acct-suggest(0,2,0)，
 * 不会覆盖 detail 页既有样式。 */
.acct-suggest { max-height: 260px; overflow-y: auto; }

/* ---------------- 趋势 ---------------- */
#trendChartWrap {
  position: relative;
  min-height: 300px;
}

#trendChartWrap.empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

#trendCanvas {
  display: block;
  max-width: 100%;
}

/* ---------------- 下半区 ---------------- */
/* 2026-09-08：项目汇总 + 店铺/账号排行 两 card 等高（min-height 与排行 10 行 + header 高度一致）
 * 项目汇总容器内部 max-height + overflow-y:auto → 全量展示 + 容器滚动
 * 排行 card 自身内容由 limit 10 决定高度（10 行 + header ≈ 550-600px） */
.grid-bottom {
  display: grid;
  grid-template-columns: 2fr 3fr;   /* 项目汇总(2) + 排行(3)，2026-09-07 左右对调 */
  gap: 16px;
  align-items: stretch;            /* 显式声明 stretch，避免某些浏览器默认 start 导致不等高 */
}
.project-card,
.rank-card {
  display: flex;
  flex-direction: column;
  min-height: 800px;               /* 2026-09-08：两 card 高 800（约可容纳 14 行项目/12 行排行） */
  max-height: 800px;               /* 2026-09-08 关键：固定上限，溢出由内部容器滚，不撑开 card */
}
.project-card .card-head,
.rank-card .card-head { flex: 0 0 auto; }
/* 项目汇总容器：内部 max-height + overflow-y:auto 容器内滚动，card 高度恒定 */
#projectList {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;                   /* flex 子项 min-height 默认 auto 会撑开，强制 0 才能 flex 收缩 */
  max-height: 100%;                /* 2026-09-08 关键：继承父 card max-height - card-head 高度 */
}
/* 排行 card 内部：table-scroll 自身有 max-height + overflow-x，flex 1 继承 card 剩余空间 */
.rank-card .table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;                /* 2026-09-08 关键 */
}

.rank-card, .project-card { margin-top: 16px; }

/* ---------------- 趋势图：3 平台勾选 + 单日摘要 ---------------- */
.head-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.plat-toggles {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.plat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  background: #F8F9FB;
  color: #6B7280;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms, color 120ms, border-color 120ms, opacity 120ms;
}
.plat-toggle:hover { background: #F0F2F5; }
.plat-toggle.active {
  background: #FFFFFF;
  color: #1B1B1B;
  border-color: #C7CCD4;
  font-weight: 500;
}
.plat-toggle-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #FFFFFF, 0 0 0 3px rgba(0,0,0,0.05);  /* 白色描边提升可读性 */
}
.plat-toggle-dot.plat-dot-meituan { background: #FFD100; }
.plat-toggle-dot.plat-dot-shanguo { background: #FF7F24; }
.plat-toggle-dot.plat-dot-jd      { background: #E1251B; }
.plat-toggles.disabled .plat-toggle { opacity: 0.45; cursor: not-allowed; }

.trend-single-day {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #4B5563;
  padding: 4px 10px;
  border-radius: 6px;
  background: #F8F9FB;
  border: 1px solid #E5E7EB;
}
.trend-single-day .t-sum-label { color: #8A9099; }
.trend-single-day .t-sum-prev  { color: #1B1B1B; font-weight: 500; }
.trend-single-day .t-sum-delta.up   { color: #E1251B; }   /* 红涨 */
.trend-single-day .t-sum-delta.down { color: #07C160; }   /* 绿跌 */
.trend-single-day .t-sum-delta.flat { color: #8A9099; }

/* 排行表 */
.rank-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.rank-table th {
  text-align: left;
  color: var(--mt-gray-500);
  font-weight: 500;
  font-size: 12px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--mt-gray-200);
}

.rank-table th.num, .rank-table td.num { text-align: right; }

.rank-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--mt-gray-100);
  vertical-align: middle;
}

.rank-table tbody tr:hover { background: var(--mt-gray-100); }
.rank-table tbody tr:last-child td { border-bottom: none; }

.rank-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--mt-gray-200);
  color: var(--mt-gray-600);
  font-size: 12px;
  font-weight: 600;
}

.rank-no.rank-top { background: var(--mt-black); color: var(--mt-yellow); }
.rank-no.rank-top:nth-of-type(2) { background: var(--mt-yellow); color: var(--mt-black); }

.rank-name-cell { width: 48%; }
.rank-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-sub {
  color: #6b7280;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 3px;
}
/* 账号维度 sub 单行：平台 chips · 门店ID · 项目名 同一行；
   超宽时整行 flex 自然换行回退；长段各自 ellipsis（title 看全） */
.rank-sub-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 2px;
  min-width: 0;
}
.rank-item {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  max-width: 100%;
}
.rank-item .rank-sep { flex: 0 0 auto; }
.rank-sub-inline .plat-chips { margin-left: 0; }
.rank-sub-inline .store-id { margin-left: 0; }
.rank-sep { color: var(--mt-gray-300); margin: 0 2px; }
.rank-sub-proj {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: #6b7280;
}
td.num.gmv { font-weight: 600; }

/* 排行环比列 */
.rank-delta-cell .delta-txt { font-size: 12px; }
.rank-delta-cell { white-space: nowrap; }

/* 平台标签 */
.plat-chip {
  display: inline-block;
  background: var(--mt-gray-100);
  border: 1px solid var(--mt-gray-200);
  color: var(--mt-gray-600);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 11px;
  margin-right: 4px;
  white-space: nowrap;
}

.plat-chip-lg { padding: 3px 10px; font-size: 13px; border-radius: 6px; }
.plat-chips { margin-left: 4px; }

/* 平台官方品牌色 chip（plat-meituan 美团黄 / plat-shanguo 闪购橙 / plat-jd 京东红） */
.plat-chip.plat-meituan {
  background: #FFF6D1;
  border-color: rgba(255, 209, 0, 0.85);
  color: #7A6200;
}
.plat-chip.plat-shanguo {
  background: #FFF1E3;
  border-color: rgba(255, 127, 36, 0.75);
  color: #A65300;
}
.plat-chip.plat-jd {
  background: #FDECEB;
  border-color: rgba(225, 37, 27, 0.5);
  color: #A8231B;
}

/* 账号维度：平台门店 ID（置于 sub 行 chips 之后，浅灰 tabular-nums） */
.store-id {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 500;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* 加载更多 / 折叠 */
.load-more-row { text-align: center; padding: 8px 0 0; }
.load-more-row .btn { min-width: 140px; }

/* 项目汇总 */
.project-row { padding: 6px 0 10px; border-bottom: 1px dashed var(--mt-gray-200); }
.project-row:last-child { border-bottom: none; }

.project-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.project-name { font-weight: 600; }
.project-gmv { font-weight: 700; font-variant-numeric: tabular-nums; }

/* 项目行右侧：gmv + 环比 delta 竖排右对齐 */
.project-right {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.project-delta {
  font-size: 11px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.project-delta .delta-txt { font-size: 11px; }

.project-bar {
  height: 8px;
  background: var(--mt-gray-100);
  border-radius: 8px;
  overflow: hidden;
}

.project-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mt-yellow), #FFA940);
  border-radius: 8px;
  transition: width 0.4s ease;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  color: var(--mt-gray-500);
  font-size: 12px;
  margin-top: 5px;
}

.project-meta .share { color: var(--mt-yellow-dark); font-weight: 600; }

/* ---------------- 登录 overlay ---------------- */
#login-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 18, 0.62);
  backdrop-filter: blur(3px);
  z-index: 999;
  align-items: center;
  justify-content: center;
}

#login-overlay.visible { display: flex; }

.login-box {
  width: 380px;
  background: #fff;
  border-radius: 16px;
  padding: 36px 36px 32px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 800;
  color: #1B1B1B;  /* 2026-09-07 改为品牌深色，与顶栏品牌区独立凸显保持一致 */
  letter-spacing: 1.5px;
}
.login-brand .brand-icon { width: 26px; height: 26px; }
.login-brand .brand-icon svg { width: 26px; height: 26px; }

.login-sub {
  text-align: center;
  color: var(--mt-gray-500);
  font-size: 13px;
  margin: 8px 0 26px;
}

.login-field { margin-bottom: 16px; }

.login-field label {
  display: block;
  font-size: 13px;
  color: var(--mt-gray-600);
  margin-bottom: 6px;
}

.login-field input {
  width: 100%;
  border: 1px solid var(--mt-gray-300);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}

.login-field input:focus {
  outline: none;
  border-color: var(--mt-yellow);
  box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.18);
}

.login-error {
  background: #FDEBEC;
  color: var(--red);
  font-size: 13px;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}

.btn-primary {
  background: var(--mt-yellow);
  color: var(--mt-black);
  font-weight: 600;
}

.btn-primary:hover { background: var(--mt-yellow-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-block { width: 100%; padding: 11px; margin-top: 6px; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--mt-gray-300);
  color: var(--mt-gray-600);
}

.btn-ghost:hover { border-color: var(--mt-black); color: var(--mt-black); }
.btn-sm { padding: 4px 12px; font-size: 12px; }

/* ---------------- 导入页 ---------------- */
.upload-zone {
  border: 2px dashed var(--mt-gray-300);
  border-radius: var(--radius);
  padding: 42px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  background: #FDFDFD;
}

.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--mt-yellow-dark);
  background: #FFFBEB;
}

.upload-icon {
  font-size: 34px;
  color: var(--mt-yellow-dark);
  transform: translateY(2px);
}

.upload-title { font-size: 16px; margin: 12px 0 6px; }
.upload-link { color: var(--blue); font-weight: 600; }
.upload-sub { color: var(--mt-gray-500); font-size: 13px; }

.upload-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px 0;
  color: var(--mt-gray-600);
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--mt-gray-200);
  border-top-color: var(--mt-yellow-dark);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.upload-error {
  background: #FDEBEC;
  color: var(--red);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 12px;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.result-item {
  border: 1px solid var(--mt-gray-200);
  background: var(--mt-gray-100);
  border-radius: 10px;
  padding: 12px 14px;
}

.result-item-wide { grid-column: span 2; }

/* 导入结果 · 归属变更告警明细（2026-09-08 新增） */
.mapping-alert {
  margin: 2px 4px 14px;
  padding: 10px 14px;
  background: #FFF8E6;
  border: 1px solid #F2D48B;
  border-radius: 8px;
  font-size: 12px;
  max-height: 220px;
  overflow-y: auto;
}
.mapping-alert .ma-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px dashed #F2D48B;
}
.mapping-alert .ma-row:last-of-type { border-bottom: none; }
.mapping-alert .ma-id { flex: 0 0 auto; color: #5B616B; font-weight: 600; white-space: nowrap; }
.mapping-alert .ma-arrow { color: #9A6700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapping-alert .ma-more { color: #9A6700; margin-top: 6px; opacity: 0.8; }

.ri-label { color: var(--mt-gray-500); font-size: 12px; margin-bottom: 6px; }
.ri-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ri-value.ok { color: var(--green); }
.ri-value.warn { color: var(--mt-yellow-dark); }

.result-batch {
  color: var(--mt-gray-500);
  font-size: 13px;
  background: var(--mt-gray-100);
  border-radius: 20px;
  padding: 3px 12px;
}

/* 数据表 */
.table-wrap { overflow-x: auto; }

/* 手机端表格横向滚动容器（兼容不支持 overflow 的旧内核） */
/* 2026-09-08 修复"滚动后字体变化 + 跨 page 滚表头吸顶"：
 * table-wrap 自身 max-height + overflow-y:auto 让表格内部独立垂直滚动，
 * 原 thead position:sticky top:0 持续吸顶（不再需要 shadow fixed → 无字体抗锯齿变化）。
 * calc(100vh - 162px) = 视口高 - 顶栏56 - 筛选行(约104) - 留 2px 间隔 */
.table-scroll {
  /* 2026-09-08 修复"页面滚动时表头跨越筛选行"：
   * table-wrap 自身 position:sticky top:108 让表格容器吸顶在筛选行下方，
   * 内部 thead position:sticky top:0 永远停在 table-wrap 顶 = y=108（=filter 底）。
   * max-height + overflow-y: auto 让表格内部独立垂直滚（不依赖 fixed → 无字体副作用） */
  position: sticky;
  top: 108px;
  z-index: 4;
  max-height: calc(100vh - 162px);
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table th {
  text-align: left;
  background: var(--mt-gray-100);
  color: var(--mt-gray-600);
  font-weight: 500;
  font-size: 12px;
  padding: 9px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--mt-gray-200);
}

.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--mt-gray-100);
  white-space: nowrap;
}

.data-table th.num, .data-table td.num { text-align: right; }
.data-table td.ok { color: var(--green); font-weight: 600; }
.td-file { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.sub-text { color: var(--mt-gray-400); font-size: 11px; margin-left: 6px; }

.tag {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 12px;
}

.tag-ok { background: #E8F7EF; color: var(--green); }
.tag-warn { background: #FFF4DC; color: var(--mt-yellow-dark); }
.tag-pending { background: var(--mt-gray-100); color: var(--mt-gray-600); }
.tag-running { background: #E8F0FE; color: var(--blue); }
.tag-failed { background: #FDEBEC; color: var(--red); }

/* ---------------- 数据管理-下载列表 ---------------- */
.export-tip { margin-bottom: 12px; }
.export-ok {
  background: #E8F7EF;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 0;
}
.export-ok .export-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}
.export-ok .export-link:hover { text-decoration: underline; }
.export-err { color: var(--red); margin-top: 3px; }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(27, 27, 27, 0.92);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  /* R23c（2026-09-20）：1000 → 1200。原来 1000 会被所有 1100 层弹层盖住
     （supply.html：采购录入/编辑 #purchaseEntryOverlay、列头筛选面板、解散向导 #dismissOverlay、
     组采购入口 #groupPurchasesOverlay 都是 1100）→ 弹层开着时任何 toast 都看不见，
     例如「请选择采购日期」「采购金额需为非负数字」「已阻止保存以免漏记」全被吞掉。
     ⚠️ 必须保持在 .proj-msel-panel(9999) 之下；新增弹层若高于 1200 请同步上调本值。 */
  z-index: 1200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  display: none;
  max-width: 70vw;
}

.toast.success { background: rgba(31, 165, 110, 0.95); }
.toast.error { background: rgba(227, 77, 89, 0.95); }

/* ---------------- 断网提示条（common.js initNetworkBanner 创建/控制显隐） ---------------- */
.net-banner {
  display: none;               /* 默认隐藏，仅离线时显示 */
  position: sticky;
  top: 56px;                   /* 桌面端 #app-header 固定 56px，横幅紧贴其下 */
  z-index: 300;
  background: #E1251B;
  color: #fff;
  text-align: center;
  padding: 7px 16px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* ---------------- 加载态 ---------------- */
.js-loading-zone.is-loading { position: relative; pointer-events: none; }
.js-loading-zone.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
  border-radius: inherit;
  z-index: 3;
}

/* ---------------- 弹层 / Modal ---------------- */
.modal-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 18, 0.5);
  backdrop-filter: blur(2px);
  z-index: 900;
  align-items: center;
  justify-content: center;
}
.modal-mask.visible { display: flex; }
.modal-box {
  width: 520px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  max-height: calc(100vh - 60px);
  overflow: auto;
}
.modal-box h3 { font-size: 16px; margin-bottom: 12px; }
.modal-note { color: var(--mt-gray-500); font-size: 13px; margin-bottom: 14px; line-height: 1.6; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* 导出按钮层 */
.export-range { color: var(--mt-gray-600); font-weight: 600; }
.export-warn { color: var(--mt-yellow-dark); font-size: 12px; margin-top: 6px; }

/* ---------------- 页内 tab ---------------- */
.tabs-bar { display: flex; gap: 0; margin-top: 16px; border-bottom: 1px solid var(--border); }
.tab-btn {
  background: transparent;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--mt-gray-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--mt-black); }
.tab-btn.active {
  color: var(--mt-black);
  font-weight: 600;
  border-bottom-color: var(--mt-yellow-dark);
}

/* ---------------- 分页 / 表单控件 ---------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 2px;
  color: var(--mt-gray-500);
  font-size: 13px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}
.form-grid .field-full { grid-column: span 2; }
.form-field label {
  display: block;
  font-size: 12px;
  color: var(--mt-gray-500);
  margin-bottom: 4px;
}
.form-field input {
  width: 100%;
  border: 1px solid var(--mt-gray-300);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13px;
  color: var(--mt-gray-900);
}
.form-field select {
  width: 100%;
  border: 1px solid var(--mt-gray-300);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 13px;
  color: var(--mt-gray-900);
  background: #fff;
}
.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--mt-yellow);
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.2);
}

/* 门店ID关系维护：搜索框（卡片头部控件） */
.mini-input {
  border: 1px solid var(--mt-gray-300);
  border-radius: 6px;
  padding: 6px 8px;
  background: #fff;
  font-size: 13px;
  color: var(--mt-gray-900);
  flex: 1 1 240px;
  min-width: 180px;
  max-width: 320px;
  width: auto;
}
.mini-input:focus {
  outline: none;
  border-color: var(--mt-yellow);
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.2);
}
.rel-sid { color: var(--mt-gray-500); font-weight: 400; font-size: 13px; }

/* ---------------- 门店ID关系维护表（rel-table；2026 UX 二轮 7 列 fixed 布局） ---------------- */
/* 2026-09-14：去掉 1180px 上限 —— 容器不再封顶后，若这里仍封顶会出现
 * 「卡片很宽、表格只占一半」的空缺；改用 width:100% 让 .rel-c-name（width:auto）吸收富余。 */
.rel-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.rel-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fafbfc;
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 8px;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rel-table td {
  padding: 10px 8px;
  font-size: 13px;
  color: var(--mt-gray-900);
  vertical-align: middle;
  border-bottom: 1px solid #f1f5f9;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* 行内编辑入口仅“编辑”按钮（行点击不触发）；hover 高亮由 data-table 基础样式保留 */
/* 列宽（9 列 fixed：门店名称 flex 剩余；固定宽约 860px ≤ 1180 视口） */
.rel-table th.rel-c-id       { width: 120px; }
.rel-table th.rel-c-name     { width: auto; }
.rel-table th.rel-c-platform { width: 70px; }
.rel-table th.rel-c-project  { width: 110px; }
.rel-table th.rel-c-account  { width: 160px; }
.rel-table th.rel-c-date     { width: 95px; }
.rel-table th.rel-c-edited   { width: 140px; }
.rel-table th.rel-c-action   { width: 70px; }
.rel-table td.rel-td-id {
  white-space: nowrap;
  overflow: visible;
  font-variant-numeric: tabular-nums;
}
/* 警示/置顶行：仅近30天活跃且 project/account_name 为空（服务端 top=true）→ 浅黄底 + ⚠ */
.rel-table tbody tr.rel-row--warn { background: #fff7e6; }
.rel-warn-flag { margin-right: 4px; }
/* 空值占位（灰） */
.rel-empty { color: var(--mt-gray-400); }
/* 时间列：等宽数字 */
.rel-table td.rel-td-date { color: var(--mt-gray-700); white-space: nowrap; }
/* 门店名称/客户名/项目：单行省略（title 悬浮看全），避免压扁其它列 */
.rel-table td.rel-td-name,
.rel-table td.rel-td-project,
.rel-table td.rel-td-account {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 最后编辑：短时间格式，窄列不换行 */
.rel-table td.rel-td-edited { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 操作列：编辑按钮窄列不换行 */
.rel-table td.rel-td-action { white-space: nowrap; text-align: left; }
.rel-edit-btn { white-space: nowrap; }

/* 蓝色小按钮（操作列「编辑」） */
.btn-blue {
  display: inline-block;
  border: 1px solid var(--blue);
  color: var(--blue);
  background: #fff;
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}
.btn-blue:hover { background: var(--blue); color: #fff; }

/* ---------------- 2026-09-08 门店ID关系维护（复合键 + 整行锁） ---------------- */
/* 复合键：平台 chip + 门店ID 同行展示 */
.rel-cell-compound { white-space: nowrap; }
.rel-cell-compound .rel-cell-sid { margin-left: 2px; color: var(--mt-gray-700); }
/* 编辑弹层：只读信息行 */
.rel-ro {
  color: var(--mt-gray-500);
  font-size: 12px;
  margin-bottom: 4px;
  line-height: 1.6;
}
.rel-ro b { color: var(--mt-gray-800); font-weight: 600; }
/* 弹层内小开关行（status / locked） */
.rel-switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rel-switch-row label { margin-bottom: 0; }
.rel-inline-field { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* 编辑弹层：身份只读区 + 高级纠正平台 + 告警分级 */
.rel-identity-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f6f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.rel-platform-badge { display: inline-flex; align-items: center; }
.rel-sid-big { color: var(--mt-gray-900); font-size: 16px; font-weight: 600; }
.modal-note.compact-note { margin: 6px 0 0; color: var(--mt-gray-500); }
.rel-adv { margin-top: 14px; border-top: 1px dashed #e5e7eb; padding-top: 10px; }
.rel-adv-summary { cursor: pointer; color: var(--red); font-size: 12px; user-select: none; }
.rel-adv-body { margin-top: 10px; }
.rel-switch-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.rel-move-result { margin: 6px 0; font-size: 13px; line-height: 1.6; }
.rel-move-ok { color: var(--green); }
.rel-move-err { color: var(--red); }
.danger-btn { border-color: var(--red); color: var(--red); }
.danger-btn:hover { background: var(--red); color: #fff; }
/* 导入结果告警分级（info 普通；warning/danger 黄/红） */
.result-card .ri-label { white-space: normal; }
#resMappingItem.alert-warn { background: #fff4dc; border-color: #f5d789; }
.ma-row.ma-warning .ma-msg { color: var(--mt-yellow-dark); }
.ma-row.ma-danger .ma-msg { color: var(--red); font-weight: 600; }
.ma-row.ma-info .ma-msg { color: var(--mt-gray-700); }

/* ---------------- 待维护「连续处理」（方案 b：store_id 粒度 + 部分完成回队尾） ----------------
 * 标题区进度徽标（如「第 2 / 共 5 条」）
 * 弹层提示区（展示「正在保存并转正…」/「连续维护模式…」等）
 * 当前处理行高亮（.pend-row-active） */
.rel-progress {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--mt-gray-500);
  font-variant-numeric: tabular-nums;
}
.rel-create-hint {
  margin-top: 12px;
  padding: 8px 10px;
  background: #EEF4FF;
  border: 1px solid #D6E4FF;
  border-radius: 6px;
  color: #3059A8;
  font-size: 12px;
  line-height: 1.6;
}
.pend-row-active td { background: #EEF4FF; }
.pend-row-active:hover td { background: #E3ECFF; }



/* ============================================================
 * 响应式（断点体系）
 *   桌面 >1024px 布局完全不变；
 *   ≤1024px 平板、≤768px 手机、≤480px 小屏 逐级收紧。
 * ============================================================ */

/* ---------------- ≤1024px 平板 ---------------- */
@media (max-width: 1024px) {
  .topnav a { padding: 0 12px; }

  /* 4 张 KPI 在平板压缩到 2×2，避免 4 卡过挤 */
  .kpi-row { grid-template-columns: repeat(2, 1fr); }

  /* 导入结果摘要由 4 列收为 2 列 */
  .result-grid { grid-template-columns: repeat(2, 1fr); }
  .result-item-wide { grid-column: span 1; }

  /* 表格类内容允许横向滚动，避免页面被撑破 */
  .table-wrap .data-table,
  .table-scroll .rank-table { min-width: 720px; }
}

/* ---------------- ≤768px 手机 ---------------- */
@media (max-width: 768px) {
  /* 页面容器收紧 */
  .container { padding: 0 12px; }
  .card { padding: 14px 14px; }

  /* ---- 顶栏：第一行 logo+用户，第二行导航可横向滚动 ---- */
  .topbar-inner {
    flex-wrap: wrap;
    height: auto;
    min-height: 52px;
    padding: 8px 12px;
    gap: 4px 8px;
  }
  .brand { font-size: 16px; gap: 6px; }
  .brand-text { font-size: 15px; }
  .topnav {
    order: 10;
    width: 100%;
    height: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .topnav a {
    height: auto;
    padding: 8px 12px 6px;
    white-space: nowrap;
  }
  .top-user { gap: 8px; }
  .user-name { font-size: 13px; }
  .user-role { font-size: 11px; padding: 1px 6px; }
  .logout-btn { min-height: 32px; padding: 3px 10px; font-size: 13px; }
  /* 断网提示条：移动端顶栏可换行高度不定，横幅改普通流式（不吸顶重叠） */
  .net-banner { position: static; top: auto; }

  /* ---- 筛选行：≤768 才允许换行堆叠、控件触控高度 ---- */
  .filter-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .filter-bar .segmented { flex: 1 1 auto; }
  .filter-bar .segmented button {
    flex: 1;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .select-label { flex: 1 1 40%; min-width: 0; }
  .select-label select,
  .mini-select {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 40px;
    font-size: 13px;
  }
  /* 卡片头部内的 select 保持内容宽度（不无限拉伸） */
  .head-controls .mini-select { flex: 0 0 auto; width: auto; min-width: 110px; }
  /* 趋势图勾选框/单日摘要：768 换行，≤480 整行宽 */
  .trend-card .head-controls { flex-wrap: wrap; row-gap: 6px; }
  .plat-toggles { flex-wrap: wrap; }
  .trend-single-day { flex-wrap: wrap; }
  .filter-spacer { display: none; }
  .custom-range { width: 100%; }
  .custom-range input[type="date"] {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    font-size: 13px;
  }
  .select-label input[type="date"] {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    font-size: 13px;
  }
  .select-label input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    min-height: 40px;
    font-size: 13px;
  }
  .filter-bar > .btn { min-height: 40px; padding: 0 14px; }

  /* ---- KPI：2×2 网格，字号保持可读 ---- */
  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-card { padding: 12px 14px; }
  .kpi-label { font-size: 13px; margin-bottom: 6px; }
  .kpi-value { font-size: 26px; }
  .kpi-note { font-size: 11px; margin-top: 5px; }

  /* ---- 卡片头部允许换行 ---- */
  .card-head { flex-wrap: wrap; gap: 8px 10px; }
  .head-controls { flex-wrap: wrap; gap: 8px; }

  /* ---- 趋势图容器高度（Canvas 实际 180px，逻辑由 JS 控制） ---- */
  #trendChartWrap { min-height: 180px; }

  /* ---- 页内 Tab 允许横向滚动 ---- */
  .tabs-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab-btn { white-space: nowrap; padding: 10px 14px; }

  /* ---- 排行 sub/项目汇总文字收紧 ---- */
  .rank-sub { font-size: 11px; }
  .project-meta { font-size: 11px; }

  /* ---- 下半区（排行+项目汇总）改单列堆叠 ---- */
  .grid-bottom { grid-template-columns: 1fr; gap: 12px; }

  /* ---- 弹层：底部全宽卡片 + 表单单列 ---- */
  .modal-mask { align-items: flex-end; }
  .modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    padding: 18px 16px;
  }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field-full { grid-column: span 1; }

  /* ---- 按钮触控高度 ---- */
  .btn { min-height: 40px; font-size: 14px; padding: 6px 14px; }
  .btn-sm { min-height: 36px; padding: 5px 10px; font-size: 13px; }
  .load-more-row .btn { min-width: 120px; }

  /* ---- 各类表格：确保最小宽度，交给滚动容器 ---- */
  .table-wrap .data-table,
  .table-scroll .rank-table { min-width: 840px; }
  .rank-name-cell { width: auto; }

  /* ---- 客户名搜索建议面板：窄屏不溢出视口 ---- */
  #accountSuggest { max-width: calc(100vw - 24px); max-height: 220px; }
  .kpi-delta .delta-txt { font-size: 11px; }

  /* ---- 数据表单元格横向内边距略减，节省窄屏空间 ---- */
  .data-table th,
  .data-table td { padding: 8px 8px; }
  .rank-table th,
  .rank-table td { padding: 7px 6px; }
}

/* ---------------- ≤480px 小屏手机 ---------------- */
@media (max-width: 480px) {
  .container { padding: 0 10px; }
  .card { padding: 12px 12px; margin-top: 12px; }
  .brand-text { font-size: 14px; letter-spacing: 0.5px; }
  .brand { padding-right: 12px; gap: 6px; }
  .brand-icon { width: 18px; height: 18px; }
  .brand-icon svg { width: 18px; height: 18px; }
  .brand::after { height: 16px; }
  .user-name { display: none; }
  .topnav a { padding: 8px 9px 6px; font-size: 14px; }

  /* 辅助文字隐藏/降级 */
  .head-tip { font-size: 11px; }
  .upload-sub { display: none; }
  .rank-sub { font-size: 11px; }

  /* KPI 数值进一步收紧但保持 22px+ 可读 */
  .kpi-value { font-size: 24px; }
  .kpi-card { padding: 10px 12px; }
  .kpi-row { gap: 8px; }

  /* 卡片头部/标题收紧 */
  .card-head h3 { font-size: 15px; }
  .export-warn { font-size: 11px; }

  /* 登录框：小屏宽度自适应 */
  .login-box { width: calc(100vw - 32px); max-width: 380px; padding: 26px 22px 22px; }
  .login-brand { font-size: 20px; }

  /* 分页按钮行触控 */
  .pagination .btn { min-height: 36px; }
}

/* ==========================================================================
   全部明细页 /detail（2026-09-07 新增）
   ========================================================================== */
.detail-card .card-head { flex-wrap: wrap; row-gap: 8px; }

/* 表头上方区域冻结：滚动时「全部明细」标题+模式切换+筛选行 保持可见（2026-09-07）
 * 顶栏 #app-header 56px 固定；card-head 贴顶栏下沿 top: 56px；筛选行紧贴其下 top: 106px */
.detail-card .card-head {
  position: sticky;
  top: 56px;
  background: #fff;
  z-index: 6;
  margin: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  box-shadow: 0 1px 0 var(--border, #EBEDF0);
}
.detail-filter {
  /* 2026-09-08：合并两个 .detail-filter 块（旧"位置版"被新"视觉版"覆盖导致 sticky 失效）
   * - 视觉与 .filter-bar 1:1（padding/gap/字体/边框）
   * - 滚动时吸顶：top 108 = 顶栏 56 + 自身 z 间隔 2（card-head 在 56-106 区间），卡内滚出时筛选行仍贴顶栏下沿 */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #EBEDF0);
  background: #FFFFFF;
  position: sticky;
  top: 108px;
  z-index: 5;
}

/* 全部明细页筛选行（2026-09-08：复用看板 .filter-bar 视觉与控件风格，行为/数据接口仍走 detail 端点）
 * - 容器 padding/gap 与 .filter-bar 一致
 * - input/select 边框/字号/圆角复用 .custom-range/.select-label select 风格
 * - 门店ID/名称 输入框收窄到 max-width:130（用户要求优先压缩），确保重置按钮完整显示
 * 注：.detail-filter 块已合并到上方（带 position:sticky 吸顶），这里不再重复定义。 */
.detail-filter > * { flex: 0 1 auto; min-width: 0; }
.detail-filter > * { flex: 0 1 auto; min-width: 0; }
.detail-filter .lbl {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--mt-gray-600, #5B616B);
  white-space: nowrap;
}
.detail-filter input[type="date"] {
  border: 1px solid var(--mt-gray-300, #D7DBE1);
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 12px;
  color: var(--mt-gray-900, #1B1B1B);
  background: #fff;
  width: auto;
  min-width: 100px;
  max-width: 140px;
}
.detail-filter input[type="text"] {
  border: 1px solid var(--mt-gray-300, #D7DBE1);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--mt-gray-900, #1B1B1B);
  background: #fff;
  min-width: 120px;
  max-width: 180px;
}
/* 门店 ID/名称 输入框：用户要求优先压缩，确保重置按钮完整显示 */
#dStoreQ {
  max-width: 130px;
}
.detail-filter select {
  border: 1px solid var(--mt-gray-300, #D7DBE1);
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 12px;
  color: var(--mt-gray-900, #1B1B1B);
  background: #fff;
  min-width: 100px;
  max-width: 130px;
}
.detail-filter .range-sep { color: var(--mt-gray-400, #B7BDC7); padding: 0 2px; }
.detail-filter .btn { min-height: 30px; padding: 0 12px; font-size: 12px; }

/* 客户名建议（detail 页轻量 datalist 风格） */
.detail-acct { position: relative; }
.detail-acct .acct-suggest {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border, #EBEDF0);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 80;
  display: none;
}
.detail-acct .acct-suggest.visible { display: block; }
/* 2026-09-08（统一收口）：建议项渲染/样式已抽到 common.js 共享函数 + style.css 全局
 * .account-suggest-item / .as-name / .as-cnt（见上方首页 combobox 段），首页与明细页共用同一套
 * CSS，本页不再定义私有 .sg-item 项样式，杜绝两套实现的视觉漂移。 */
.detail-acct .acct-suggest .account-suggest-item.active { background: #FFF7D6; }
/* 门店搜索清除按钮 */
.detail-acct .sg-clear-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: none;
  background: #E5E7EB;
  color: #6B7280;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.detail-acct .sg-clear-btn:hover { background: #D1D5DB; color: #1B1B1B; }
.detail-acct input[type="text"] { padding-right: 26px; }   /* 给清除按钮留位 */

/* 可排序表头：未激活时也显示 ↕ 灰色提示，激活后变实色箭头指示方向 */
.sortable-table th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-table th .sort-arrow { color: var(--mt-gray-400, #B7BDC7); font-size: 10px; margin-left: 3px; }
.sortable-table th .sort-arrow::before { content: '↕'; }
.sortable-table th:hover { color: var(--mt-gray-900, #1B1B1B); }
.sortable-table th:hover .sort-arrow { color: var(--mt-gray-600, #5B616B); }
.sortable-table th.sorted-asc .sort-arrow::before { content: '▲'; color: #1B1B1B; }
.sortable-table th.sorted-desc .sort-arrow::before { content: '▼'; color: #1B1B1B; }

/* 表头列名吸顶（2026-09-08 根治方案）：
 * 关键：border-collapse: separate + 原 thead 在 .table-scroll 内 sticky top:0
 * table-scroll 自身 max-height + overflow-y:auto 让表格内部独立垂直滚动，
 * page 整体滚动时 table-scroll 停在视口内不滚出 → 原 thead 持续吸顶可见。
 * z-index 6（≥筛选行 5）避免被覆盖，background #fff 防数据穿透。 */
.sortable-table {
  border-collapse: separate;
  border-spacing: 0;
}
.sortable-table thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border, #EBEDF0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
.sortable-table tbody tr td {
  border-bottom: 1px solid #F2F4F7;
}

/* 明细表格：列宽（colgroup）+ 单元格样式 + 长文本两行省略
 * table-layout: fixed 让 colgroup width 强制生效；colgroup 由 detail.js 按 mode 动态生成
 * 关键：2026-09-08 修复"滚动后字体变化"
 *   - 旧实现用 .detail-thead-shadow position:fixed 跨 page 滚吸顶 → Chrome fixed 元素 +
 *     transform 会创建新合成层，subpixel 字体抗锯齿变成 grayscale → 视觉"字体变化"
 *   - 新实现：table-wrap max-height + overflow-y:auto 让 table 内部独立垂直滚动，
 *     原 thead position:sticky top:0 在 table-wrap 顶部持续可见，page 整体滚时 table-wrap
 *     停在视口内不滚出 → 表头持续吸顶且不触发 fixed 元素副作用（字体稳定） */
.detail-table { table-layout: fixed; }
.detail-table col.c-date     { width: 100px; }
.detail-table col.c-name     { width: 280px; }
.detail-table col.c-id       { width: 100px; }
.detail-table col.c-money    { width: 120px; }
.detail-table col.c-num      { width: 95px; }
.detail-table col.c-platform { width: 90px; }
.detail-table col.c-proj     { width: 130px; }
.detail-table col.c-acct     { width: 240px; }

/* 数值列右对齐（不变） */
.detail-table td.store-id-cell { color: var(--mt-gray-600, #5B616B); font-variant-numeric: tabular-nums; }
.detail-table td.num.gmv-strong { font-weight: 600; color: var(--mt-gray-900, #1B1B1B); }
.detail-table td.pct-cell { color: var(--mt-gray-600, #5B616B); }
.detail-table td.date-cell { color: var(--mt-gray-600, #5B616B); }
.detail-table tr:hover td { background: #FAFBFD; }
/* 长文本列：允许换行，max-height 限定 2 行（替代 line-clamp 兼容性更稳），hover title 看全 */
.detail-table td.dim-cell {
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
  max-height: 3em;            /* = line-height × 2，强制最多 2 行 */
  overflow: hidden;
}

/* 明细页底部（计数 + 分页） */
.detail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
}
.detail-count { font-size: 12px; color: var(--mt-gray-500, #8A919F); }
.detail-empty { padding: 30px 0; text-align: center; color: #9ca3af; font-size: 13px; }

/* ================= 重点项目看板（2026-09-09） ================= */
.kp-card { margin-bottom: 16px; }
.kp-filters { display: flex; align-items: center; gap: 6px; margin-left: 18px; }
.kp-filter-lbl { font-size: 13px; color: #6b7280; }
.kp-range-tip { margin-left: auto; font-size: 12px; color: #8A919F; }
.kp-range-tip b { color: #4b5563; font-weight: 500; }
/* 2026-09-09 v5：行高紧凑 + 渐变条降为 10px 居中矮条（上下留白呼吸感） */
.kp-table-wrap { max-height: none; overflow: visible; }
.kp-table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; }
.kp-table th, .kp-table td { white-space: nowrap; }
.kp-table th { font-weight: 500; font-size: 12px; color: #6b7280; text-align: center; padding: 8px 6px 9px; border-bottom: 1px solid #e5e7eb; }
.kp-table th.kp-th-left { text-align: left; padding-left: 10px; }
.kp-table td { padding: 4px 6px; font-size: 13px; vertical-align: middle; text-align: center; border-bottom: 0.5px solid #f0f1f3; }
.kp-table tr:last-child td { border-bottom: 0; }
.kp-table td.dim-cell { text-align: left; padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-table tr:hover td { background-color: rgba(0, 0, 0, 0.02); }
/* 数据条列：10px 居中矮条（::before）+ 数字叠上层 */
.kp-table td.kp-cell { position: relative; isolation: isolate; background: none; }
.kp-table td.kp-plain { text-align: center; background: none; }
.kp-table td.kp-cell::before {
  content: '';
  position: absolute; left: 4px; right: 4px; top: 50%;
  height: 10px; transform: translateY(-50%);
  border-radius: 5px; z-index: -1;
  background: linear-gradient(to right,
    var(--bar-c, rgba(27,27,27,0.14)) 0%,
    var(--bar-c, rgba(27,27,27,0.14)) var(--w, 0%),
    transparent var(--w, 0%), transparent 100%);
}
.kp-noval { color: #c0c6cf; }
/* 5 列配色：日收入 蓝（2026-09-09 v7 用户指定）/ 日订单 绿 / 进店率 黄 / 下单率 红 / 单均收入 橙 */
.kp-cell-gmv   { --bar-c: rgba(46,119,208,0.16); color: #185FA5; }
.kp-cell-order { --bar-c: rgba(31,165,110,0.16); color: #0E7A4E; }
.kp-cell-vc    { --bar-c: rgba(255,179,0,0.22);  color: #8a6200; }
.kp-cell-oc    { --bar-c: rgba(225,37,27,0.14);  color: #C92018; }
.kp-cell-po    { --bar-c: rgba(255,127,36,0.18); color: #B85A12; }

/* 多选下拉 */
.kp-multisel { position: relative; display: inline-block; }
.kp-multisel-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #1f2937;
  background: #fff; border: 1px solid #d9dde3; border-radius: 8px;
  padding: 6px 12px; cursor: pointer; max-width: 300px;
}
.kp-multisel-btn:hover { border-color: #b6bdc7; }
.kp-caret { color: #8A919F; font-size: 11px; }
.kp-multisel-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  min-width: 280px; max-width: 380px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.kp-panel-head {
  display: flex; gap: 12px; padding: 8px 10px;
  border-bottom: 1px solid #f0f1f3;
}
.kp-link-btn {
  border: 0; background: none; color: #2E77D0; font-size: 12px; cursor: pointer; padding: 2px 4px;
}
.kp-link-btn:hover { text-decoration: underline; }
.kp-panel-list { max-height: 280px; overflow-y: auto; padding: 4px; }
.kp-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.kp-opt:hover { background: #f5f7fa; }
.kp-opt.on { background: #f0f5ff; }
.kp-opt input { margin: 0; accent-color: #2E77D0; pointer-events: none; }
.kp-opt-name { color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-opt-cnt { margin-left: auto; font-size: 11px; color: #8A919F; white-space: nowrap; }
.kp-empty-opt { padding: 12px; color: #8A919F; font-size: 12px; text-align: center; }

/* =====================================================================
 * 供应链 · 采购设置（T02）—— 提示条 / 多行输入 / 库存核算项目清单
 * 复用既有 .card / .data-table / .form-grid / .btn / .tag 等基础样式。
 * ===================================================================== */
.settings-note {
  margin: 12px 0 8px;
  padding: 10px 14px;
  background: #FFF4DC;
  color: var(--mt-yellow-dark);
  border: 1px solid #F6E3AE;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.settings-note b { color: #A87F00; }

/* 多行文本域（产品服务项目 / 组成员），与 .mini-input 视觉一致 */
.mini-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--mt-black);
  resize: vertical;
  outline: none;
}
.mini-textarea:focus { border-color: var(--mt-yellow); }

/* 库存核算项目：新增行 + 勾选清单 */
.stock-add-row { display: flex; gap: 8px; margin: 8px 0; align-items: center; }
.stock-add-row .mini-input { flex: 0 1 300px; }
.stock-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 6px 2px;
  min-height: 24px;
}
.stock-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mt-black);
  cursor: pointer;
}
.stock-item input { margin: 0; accent-color: var(--mt-yellow-dark); cursor: pointer; }
.muted-dash { color: var(--mt-gray-500); }

/* 可搜索多选框（T02 验收反馈：产品服务项目 / 组成员项目 / 库存核算项目 三处统一复用）
 * 【2026-09-11 性能改造】面板改为挂 body + position:fixed 浮层（见 supply.js ensureMsel）：
 *   脱离文档流 → 展开不改变弹层高度，消除 overflow:auto 重排导致的卡顿；
 *   面板自身限高 + 列表内部滚动。
 *   注意：本组件节点较多（数十项 × 3~4 子节点），故禁用 transition / animation / backdrop-filter。 */
.proj-msel { position: relative; }
.proj-msel-btn {
  display: flex; align-items: center; gap: 6px;
  width: 100%; box-sizing: border-box; text-align: left;
  font-size: 13px; color: var(--mt-black);
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; cursor: pointer;
}
.proj-msel-btn:hover { border-color: #b6bdc7; }
.proj-msel-summary { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-msel-btn .caret { flex: 0 0 auto; color: var(--mt-gray-500); font-size: 11px; }
.proj-msel-panel {
  display: none;                 /* 收起态：彻底不参与布局 */
  position: fixed; z-index: 9999; box-sizing: border-box;
  max-height: 260px;
  padding: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.proj-msel-panel.open { display: flex; flex-direction: column; }
.proj-msel-search {
  flex: 0 0 auto;
  width: 100%; box-sizing: border-box; outline: none;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; font-size: 13px; margin-bottom: 6px; color: var(--mt-black);
}
.proj-msel-search:focus { border-color: var(--mt-yellow); }
.proj-msel-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.proj-msel-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.proj-msel-opt:hover { background: #f5f7fa; }
.proj-msel-opt input { margin: 0; accent-color: var(--mt-yellow-dark); cursor: pointer; }
.proj-msel-opt .name { color: var(--mt-black); }
.proj-msel-opt .cnt { margin-left: auto; font-size: 11px; color: var(--mt-gray-500); white-space: nowrap; }
.proj-msel-extra {
  margin-left: 6px; font-size: 11px; color: var(--mt-yellow-dark);
  background: #FFF4DC; border-radius: 4px; padding: 0 4px; white-space: nowrap;
}
.proj-msel-empty { padding: 10px; text-align: center; color: var(--mt-gray-500); font-size: 12px; }

/* ===== R64（2026-10-30）：平台标签 =====
   用于「推广余额」候选表与「发送记录」表的「平台」列（两处共用同一套 class）。
   🔴 禁用红/绿：红已被「发送失败」占用、绿已被「已发送」占用（见 goods_status.html 的 .gs-badge），
      平台标签混用红绿会让运营误读发送状态。这里用弱化的黄/橙系（Ant gold-1 / orange-1）。
   .gs-plat 是基础形状；未知/空平台由 gsPlatTag() 输出 `class="gs-plat"` + 灰色「—」，保持不动。 */
.gs-plat {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; line-height: 1.6; white-space: nowrap;
  color: #595959; background: #FAFAFA; border: 1px solid #D9D9D9;
}
.gs-plat-meituan { color: #874D00; background: #FFF7E6; border-color: #FFD591; }
.gs-plat-shanguo { color: #AD4E00; background: #FFF2E8; border-color: #FFBB96; }