/* ==========================================================================
   市场页（竞对商品排行）· 2026-10-24
   --------------------------------------------------------------------------
   2026-10-24 统一：结构、卡片、曲线图全部改用「首页 / 数据 / 成本」那一套现成件，
   所以这里只留市场页独有的东西，其余一律不重写：

     页头筛选行      → .page-head-row / .stat-time / .seg-tabs .seg / .sycm-select（sycm-theme.css）
     卡片            → .card > .card-head > h2 + .count（sycm-theme.css）
     KPI 卡          → .kpi-grid > .kpi-cell > .kpi-cell-l / .kpi-cell-r（sycm-theme.css）
     逐日趋势图      → app.js 的 dtTrendChart() 产出 .dt-trend-*（sycm-theme.css）
     商品表          → 全局 table / thead th / .table-wrap（style.css + sycm-theme.css）
     商品主图        → .dt-thumb-wrap / .dt-thumb（style.css），放大交互由 app.js 全局代理

   本文件只负责：三段药丸单选的行距、排名奖牌、榜单标签、升降标签、分页、商品标题两行截断。
   所有类名 mk- 前缀，避免和主样式冲突。
   ========================================================================== */

/* ---------- 商品排行卡里的三段单选（榜单类型 / 排序 / 范围） ---------- */
.mk-options { display: flex; flex-direction: column; gap: 10px; padding: 0 0 14px; }
.mk-option { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-option-title { flex: none; width: 60px; color: var(--color-text-title, #111); font-size: 12px; }

/* ---------- 商品单元格 ---------- */
.mk-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 商品主图：复用「数据 → 商品明细」的 .dt-thumb-wrap / .dt-thumb（36px 基准、无图占位、
   PC 悬停大图、移动端点击弹窗都由那份定义 + app.js 统一管），这里只覆盖尺寸。 */
.mk-item .dt-thumb-wrap { width: 40px; height: 40px; }
/* 商品标题：只显示前 5 个字（market.js 的 TITLE_CHARS），单行不换行、不占空间；
   完整标题在 title 属性里（桌面悬停可见），点一下复制全文（app.js 全局 [data-cp] 委托） */
.mk-title {
  color: var(--color-text-title, #333); line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: copy;                     /* 明确告诉用户"点了是复制" */
  border-radius: 3px; padding: 0 2px; margin-left: -2px;
  transition: background .12s, color .12s;
}
.mk-title:hover { background: var(--color-primary-light, #eaf1ff); color: var(--color-primary, #2062e6); }
.mk-title:active { background: var(--color-primary, #2062e6); color: #fff; }
/* 标题下的副行「店铺 · 榜单」：桌面端这两项有独立列，副行隐藏；
   移动端那两列被收掉，改由副行显示（见文末 @media）。 */
.mk-sub { display: none; color: var(--color-text-secondary, #999); font-size: 11px; margin-top: 2px; line-height: 16px; }

.mk-store { color: var(--color-text-title, #333); white-space: nowrap; }

/* ---------- 排名 + 奖牌（前三名） ---------- */
.mk-rank-cell { text-align: center; width: 64px; }
.mk-medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.mk-medal.g1 { background: #ffb400; }
.mk-medal.g2 { background: #c9ced7; }
.mk-medal.g3 { background: #d08a4e; }
.mk-rank-no { display: inline-block; min-width: 24px; color: var(--color-text-title, #333); font-weight: 600; }

/* ---------- 榜单标签（新品 / 销量） ---------- */
.mk-badge {
  display: inline-block; padding: 0 6px; height: 18px; line-height: 18px;
  border-radius: 2px; font-size: 11px;
}
.mk-badge.xp { background: var(--color-primary-light, #eaf1ff); color: var(--color-primary, #2062e6); }
.mk-badge.xl { background: #fff3e6; color: #e6801a; }

/* ---------- 升降标签：升红、降绿、持平灰（对齐生意参谋） ---------- */
.mk-delta { font-size: 12px; white-space: nowrap; }
.mk-delta.up { color: #f23c3c; }
.mk-delta.down { color: #08c45c; }
.mk-delta.flat { color: var(--color-text-secondary, #999); }
.mk-delta.isnew { color: var(--color-primary, #2062e6); }

/* ---------- 分页 ---------- */
.mk-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 0; font-size: 12px; color: var(--color-text-secondary, #666);
  flex-wrap: wrap; gap: 8px;
}
.mk-pager-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mk-pager-right button {
  min-width: 28px; height: 28px; border: 1px solid var(--color-border, #e6e6e6);
  background: #fff; color: var(--color-text-title, #333); border-radius: 4px;
  font-size: 12px; cursor: pointer; padding: 0 6px;
}
.mk-pager-right button:hover { border-color: var(--color-primary, #2062e6); color: var(--color-primary, #2062e6); }
.mk-pager-right button.on { background: var(--color-primary, #2062e6); border-color: var(--color-primary, #2062e6); color: #fff; }
.mk-pager-right button:disabled { color: #ccc; cursor: default; border-color: #eee; }
.mk-pager-right .gap { color: var(--color-text-secondary, #999); padding: 0 2px; }

/* ---------- 空态（表格里没有数据时那一行） ---------- */
.mk-empty { padding: 40px 0; text-align: center; color: var(--color-text-secondary, #999); font-size: 13px; }
.mk-empty b { color: var(--color-text-title, #333); }

/* ==========================================================================
   移动端（≤768px）
   外壳（顶栏收敛 / 底部导航 / 侧栏隐藏 / 卡片内边距 / KPI 单列 / 表格横滑 / 弹窗上滑）
   全部由 sycm-theme.css §15 统一接管，这里只补市场页自己的部分：
     · 榜单表：收掉「店铺」「榜单」两列，信息移到商品标题下面的副行 → 手机上只剩 4 列
     · 商品主图放大到 44px（触控安全区）
     · 三段单选：标题一行、药丸换行
     · 分页按钮拉到 36px
   ========================================================================== */
@media (max-width: 768px) {
  /* 三段单选 */
  .mk-options { gap: 12px; padding-bottom: 12px; }
  .mk-option { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mk-option-title { width: auto; line-height: 18px; }

  /* 商品排行表：店铺 / 榜单两列收起，信息进副行 */
  #mkRankTable th:nth-child(3), #mkRankTable td:nth-child(3),
  #mkRankTable th:nth-child(4), #mkRankTable td:nth-child(4) { display: none; }
  .mk-sub { display: block; }
  .mk-rank-cell { width: 40px; }
  .mk-item { gap: 8px; }
  .mk-item .dt-thumb-wrap { width: 44px; height: 44px; }
  .mk-title { line-height: 17px; }

  /* 分页 */
  .mk-pager { padding-top: 10px; }
  .mk-pager > span { flex: 1 1 100%; }
  .mk-pager-right { margin-left: 0; flex-wrap: wrap; }
  .mk-pager-right button { min-width: 36px; height: 36px; font-size: 13px; }

  .mk-empty { padding: 28px 0; font-size: 13px; line-height: 20px; }
}

/* 超窄屏（≤380px）：再省一点横向空间 */
@media (max-width: 380px) {
  .mk-medal { width: 22px; height: 22px; font-size: 11px; }
}