/* 交易记录六页 · 精修皮肤
   IB 端：客户交易历史 / 客户持仓订单 / 客户限价订单（ib-trading-records.js）
   用户端：交易历史 / 持仓订单 / 限价订单（client-trading-records.js）
   六页共用 trading-records.css 那套 .records-* 结构，精修合成这一份。

   前缀用 body[data-records-view]：它的特异性（0,2,1）和共享文件里
   body:is([data-layout-page=...]) 那组规则完全相同，纯靠加载顺序压过去，
   所以 link 必须放在所有样式表最后。fusion 版页面也带这个属性，
   但它们走 .mft-* 那套外观、从不引这份文件，互不影响。

   只调排版尺度与密度，不动结构与配色语义；
   目标：收掉共享样式里「大字号 + 900/950 字重」造成的臃肿感，把信息密度提到一档。 */

/* ---------- 版心与栅格 ---------- */

body[data-records-view] .trading-records-page {
  padding: clamp(20px, 2.1vw, 32px) clamp(18px, 2.4vw, 40px) 64px;
}

body[data-records-view] .records-shell {
  gap: 16px;
}

body[data-records-view] .records-card {
  gap: 12px;
}

/* ---------- 页头 ---------- */

body[data-records-view] .records-heading {
  gap: 16px;
}

body[data-records-view] .records-kicker {
  min-height: 20px;
  margin-bottom: 7px;
  padding: 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body[data-records-view] .records-heading h1 {
  font-size: 23px;
  line-height: 1.28;
  font-weight: 750;
  letter-spacing: -0.01em;
}

body[data-records-view] .records-heading p {
  max-width: 640px;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.55;
}

/* 共享样式里这张卡没有任何规则，会散成一行长句，这里补成右上角的紧凑信息卡 */
body[data-records-view] .records-context-card {
  display: grid;
  gap: 3px;
  justify-items: end;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid #e2e9f4;
  border-radius: 8px;
  background: #fff;
  text-align: right;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

body[data-records-view] .records-context-card > span:first-child {
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body[data-records-view] .records-context-card strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

body[data-records-view] .records-context-card [data-current-agent-note] {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 450;
}

/* ---------- 统计条 ---------- */

body[data-records-view] .records-summary {
  gap: 10px;
}

body[data-records-view] .records-stat {
  min-height: 74px;
  gap: 7px;
  padding: 11px 12px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

body[data-records-view] .records-stat-top {
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #6b7a90;
}

body[data-records-view] .records-stat-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

body[data-records-view] .records-stat-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

body[data-records-view] .records-stat strong {
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 700;
  letter-spacing: -0.015em;
}

body[data-records-view] .records-stat-value-row {
  gap: 6px;
}

body[data-records-view] .records-stat-detail {
  width: 22px;
  height: 22px;
}

body[data-records-view] .records-stat-detail svg {
  width: 13px;
  height: 13px;
}

/* ---------- 筛选卡 ---------- */

body[data-records-view] .records-filter-card {
  padding: 12px;
}

body[data-records-view] .records-filter-grid {
  gap: 10px;
}

body[data-records-view] .records-field {
  gap: 5px;
}

body[data-records-view] .records-field > span {
  color: #6b7a90;
  font-size: 11.5px;
  font-weight: 600;
}

body[data-records-view] .records-field input:not([type="checkbox"]),
body[data-records-view] .records-field select,
body[data-records-view] .records-search,
body[data-records-view] .records-multi-trigger,
body[data-records-view] .records-account-range-input-wrap,
/* 账户范围那颗 chip 在共享文件里写死 42px，不一起压成 34px 的话它比同排控件高 8px，
   底对齐之后「账户范围」这行标题就比左右两个标题浮起来一截。 */
body[data-records-view] .records-fusion-range-field .mft-pf {
  height: 34px;
  min-height: 34px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
}

body[data-records-view] .records-fusion-range-field .mft-pf-btn {
  padding: 0 10px;
  border-radius: 7px;
  font-size: 13px;
}

/* 限价订单页的账户范围还是旧的两行式触发器（标题 + 范围统计），
   压成 34px 单行会把第二行裁掉，这里只收紧内边距和字号。 */
body[data-records-view] .scope-filter-trigger {
  min-height: 38px;
  gap: 1px 8px;
  padding: 5px 10px;
  border-radius: 7px;
}

body[data-records-view] .scope-filter-main {
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 700;
}

body[data-records-view] .scope-filter-trigger small {
  font-size: 11px;
  line-height: 1.3;
  font-weight: 450;
}

body[data-records-view] .scope-filter-trigger svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

body[data-records-view] .records-field input:not([type="checkbox"]),
body[data-records-view] .records-field select {
  padding: 0 10px;
}

body[data-records-view] .records-search {
  gap: 8px;
  padding: 0 10px;
}

/* 交易时间区间（用户端交易历史）也要跟其它控件一样高，否则它一个 42px 戳在一排 34px 里。
   高度给 min-height 而不是 height：万一以后窄屏把它从三列压成竖排，
   写死高度会把第二个日期框挤出盒子盖到下面（资金审核那页就是这么踩的）。 */
body[data-records-view] .records-date-range {
  height: auto;
  min-height: 34px;
  border-radius: 7px;
}

body[data-records-view] .records-field .records-date-range input {
  height: 32px;
  /* 上面那条统一控件高度的规则同时写了 min-height:34px，这里不一起放开的话
     内层输入框会被顶回 34px，外框连边框变成 36px，跟隔壁 34px 的选择框差 2px。 */
  min-height: 32px;
  font-size: 12.5px;
  font-weight: 500;
}

body[data-records-view] .records-date-range i {
  font-size: 11px;
  font-weight: 600;
}

body[data-records-view] .records-search svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

body[data-records-view] .records-search input {
  font-size: 13px;
  font-weight: 500;
}

body[data-records-view] .records-multi-trigger {
  padding: 0 10px;
}

body[data-records-view] .records-multi-option {
  min-height: 30px;
  font-size: 12.5px;
  font-weight: 550;
}

body[data-records-view] .records-account-range-input-wrap {
  padding-left: 10px;
}

body[data-records-view] .records-field .records-account-range-input-wrap input {
  height: 32px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 500;
}

body[data-records-view] .records-account-range-input-wrap input {
  height: 32px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 500;
}

body[data-records-view] .records-account-range-toggle {
  width: 30px;
  height: 32px;
}

body[data-records-view] .records-account-range-selection-scope {
  height: 19px;
  padding: 0 7px;
  font-size: 10.5px;
  font-weight: 700;
}

body[data-records-view] .records-account-range-option span,
body[data-records-view] .records-account-range-scope-option {
  font-size: 12.5px;
}

body[data-records-view] .records-action {
  height: 34px;
  gap: 6px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 650;
}

body[data-records-view] .records-action svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

/* ---------- 表格卡 ---------- */

body[data-records-view] .records-table-head {
  padding: 12px 14px;
}

/* 持仓 / 限价两页的表头只有一颗导出按钮，不需要标题行那么高 */
body[data-records-view] .records-table-head-actions-only {
  padding: 10px 14px;
}

body[data-records-view] .records-table-head h2 {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
}

body[data-records-view] .records-table-head p {
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 450;
}

body[data-records-view] .records-table {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

body[data-records-view] .records-table th {
  padding: 8px 12px;
  color: #64748b;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

body[data-records-view] .records-table td {
  padding: 8px 12px;
  font-size: 12.5px;
}

body[data-records-view] .records-table strong,
body[data-records-view] .records-tooltip-trigger {
  font-weight: 650;
}

body[data-records-view] .records-table small {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 450;
}

body[data-records-view] .records-table .account-meta {
  gap: 5px;
}

body[data-records-view] .side-chip,
body[data-records-view] .status-chip,
body[data-records-view] .account-chip,
body[data-records-view] .agent-chip,
body[data-records-view] .entry-type-chip {
  min-height: 19px;
  padding: 0 7px;
  font-size: 10.5px;
  font-weight: 700;
}

/* 数值列右对齐：手数 / 各类价格 / 止损止盈 / 盈亏 / 手续费 / 库存费。
   td 认 data-label，三页合起来取并集即可（同名列在哪页都是数值）；
   th 没有 data-label，只能按列序定位，各页列数不同：
   持仓订单 13 列（第 7-12 列），限价订单 13 列但末两列是到期/创建时间（第 7-11 列），
   用户端交易历史 MT5 第 7-12 列 / MT4 第 5-10 列。
   IB 客户交易历史能自定义列，列序会变，所以那页的表头改由控制器直接打 .is-num。 */
body[data-records-view] .records-table td[data-label="手数"],
body[data-records-view] .records-table td[data-label="开仓价"],
body[data-records-view] .records-table td[data-label="平仓价"],
body[data-records-view] .records-table td[data-label="盈亏"],
body[data-records-view] .records-table td[data-label="手续费"],
body[data-records-view] .records-table td[data-label="库存费"],
body[data-records-view] .records-table td[data-label="挂单价"],
body[data-records-view] .records-table td[data-label="现价"],
body[data-records-view] .records-table td[data-label="止损"],
body[data-records-view] .records-table td[data-label="止盈"],
body[data-records-view] .records-table th.is-num,
body[data-layout-page="ib-trading-records"] .records-table th:nth-child(n + 7):nth-child(-n + 12),
body[data-layout-page="ib-limit-orders"] .records-table th:nth-child(n + 7):nth-child(-n + 11),
body[data-layout-page="client-trading-history"][data-history-platform="mt5"] .records-table th:nth-child(n + 7):nth-child(-n + 12),
body[data-layout-page="client-trading-history"][data-history-platform="mt4"] .records-table th:nth-child(n + 5):nth-child(-n + 10),
body[data-layout-page="client-trading-records"] .records-table th:nth-child(n + 5):nth-child(-n + 10),
body[data-layout-page="client-limit-orders"] .records-table th:nth-child(n + 5):nth-child(-n + 9) {
  text-align: right;
}

/* ---------- 表格页脚 ---------- */

body[data-records-view] .records-table-footer {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 550;
}

/* 页脚是 justify-content: space-between 的三格：记录数 / 每页 / 分页器，
   「每页」被挤在正中间，读起来像浮着。给它一个 margin-right:auto，
   自动空白全被这条 margin 吃掉（auto margin 先于 justify-content 分配剩余空间），
   于是记录数 + 每页 并到左侧一组，右侧只留分页器——跟 ib-clients 的页脚是同一种排法。 */
body[data-records-view] .records-page-size {
  margin-right: auto;
}

body[data-records-view] .records-page-size select {
  height: 28px;
  padding: 0 22px 0 8px;
  font-size: 12px;
  font-weight: 600;
}

body[data-records-view] .records-pager button {
  min-width: 30px;
  height: 28px;
  font-size: 12px;
  font-weight: 600;
}

body[data-records-view] .records-empty {
  min-height: 160px;
  font-size: 13px;
  font-weight: 600;
}

body[data-records-view] .records-empty svg {
  width: 36px;
  height: 36px;
}

/* ---------- 弹窗（账户范围 / 金额明细） ---------- */

body[data-records-view] .records-modal-header {
  padding: 14px 18px 12px;
}

body[data-records-view] .records-modal-header h2 {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
}

body[data-records-view] .records-modal-header p {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 450;
}

body[data-records-view] .records-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

body[data-records-view] .records-modal-close svg {
  width: 16px;
  height: 16px;
}

body[data-records-view] .scope-modal-toolbar {
  padding: 12px 16px;
}

body[data-records-view] .scope-modal-body {
  gap: 12px;
  padding: 14px 16px;
}

body[data-records-view] .scope-modal-footer {
  padding: 12px 16px;
}

body[data-records-view] .scope-panel {
  gap: 10px;
  padding: 12px;
}

body[data-records-view] .scope-panel-head h3 {
  font-size: 13.5px;
  font-weight: 700;
}

body[data-records-view] .scope-panel-head p {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 450;
}

body[data-records-view] .scope-toggle {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
}

body[data-records-view] .scope-toggle input {
  width: 16px;
  height: 16px;
}

body[data-records-view] .scope-tree-row {
  padding: 8px 8px 8px calc(8px + var(--level, 0) * 16px);
}

body[data-records-view] .scope-tree-main strong,
body[data-records-view] .scope-account-pill strong {
  font-size: 12.5px;
  font-weight: 700;
}

body[data-records-view] .scope-tree-main small,
body[data-records-view] .scope-account-pill small {
  font-size: 11px;
  font-weight: 450;
}

body[data-records-view] .scope-tree-actions button,
body[data-records-view] .scope-account-pill {
  min-height: 26px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 650;
}

body[data-records-view] .scope-tree-empty {
  padding: 12px;
  font-size: 12px;
  font-weight: 550;
}

body[data-records-view] .range-summary > div {
  gap: 4px;
  padding: 10px;
}

body[data-records-view] .range-summary span {
  font-size: 11.5px;
  font-weight: 600;
}

body[data-records-view] .range-summary strong {
  font-size: 17px;
  font-weight: 700;
}

body[data-records-view] .volume-breakdown-table {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

body[data-records-view] .volume-breakdown-table th,
body[data-records-view] .volume-breakdown-table td {
  padding: 9px 14px;
}

body[data-records-view] .volume-breakdown-table th {
  font-size: 11px;
  font-weight: 650;
}

body[data-records-view] .volume-breakdown-table td {
  font-weight: 550;
}

body[data-records-view] .volume-breakdown-table tfoot td {
  font-weight: 700;
}

body[data-records-view] .volume-breakdown-empty {
  font-size: 13px;
  font-weight: 600;
}

/* ---------- 横向溢出修复：筛选栅格改用容器查询 ---------- */

/* 共享网格用 grid 项默认的 min-width:auto，表格/筛选的最小宽度会把整条主列撑爆，
   主列宽（1078）反而小于内容（1237），页头右侧那张视角卡就被推出视口。 */
body[data-records-view] .records-shell > *,
body[data-records-view] .records-card > * {
  min-width: 0;
}

body[data-records-view] .records-filter-card {
  container-type: inline-size;
  container-name: records-filters;
  /* inline-size 容器自带 layout containment，会新建层叠上下文；
     不抬 z-index 的话账户范围/持仓时长的浮层会被后面的表格卡盖住。 */
  position: relative;
  z-index: 5;
}

/* 统计条同理：共享样式按视口 1180 才收成三列，扣掉侧栏后主列早就不够排了，
   交易历史的净盈亏会被截成「+$12,175…」。改成按主列自身宽度判断。 */
body[data-records-view] .records-shell {
  container-type: inline-size;
  container-name: records-main;
}

/* 两端的交易历史都是 6 格，比持仓/限价的 4 格更早撑不下 */
@container records-main (max-width: 980px) {
  body:is([data-layout-page="ib-trading-history"], [data-layout-page="client-trading-history"]) .records-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container records-main (max-width: 640px) {
  body[data-records-view] .records-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 共享样式按「视口 ≥1280」就硬排七列，没扣掉侧栏那 ~280px，
   实际主列只有 ~1050 时仍按 ≥1211 的最小宽度排，于是整页出横向滚动条。
   这里先退回弹性换行，再按筛选卡自身宽度重新判断。 */
@media (min-width: 1280px) {
  body[data-records-view] .records-filter-grid {
    display: flex;
    grid-template-areas: none;
    grid-template-columns: none;
  }

  /* 用户端那条 mt5 共享规则只改 areas，特异性比上面高一档，单独抵消掉。
     IB 交易历史已经不用 areas 了（改成按 DOM 顺序自然填格），无需在这里抵消。 */
  body[data-layout-page="client-trading-history"][data-history-platform="mt5"] .records-filter-grid {
    grid-template-areas: none;
  }
}

@container records-filters (min-width: 1020px) {
  /* 六页共用的只有「进网格 + 间距」，模板必须各页分开写：
     每页的筛选项不是同一组，共用一份 grid-template-areas 会让缺席的区域名
     退化成「同名网格线」，凭空多出隐式轨道（见下面各页注释）。 */
  body[data-records-view] .records-filter-grid {
    display: grid;
    gap: 10px;
  }

  /* --- 用户端交易历史：没有账户范围/客户，改成一个「交易时间」区间占两格 --- */
  body[data-layout-page="client-trading-history"] .records-filter-grid {
    grid-template-areas:
      "server search account type side duration reset"
      "time time . . . . .";
    grid-template-columns:
      minmax(124px, 0.8fr)
      minmax(178px, 1.15fr)
      minmax(146px, 0.94fr)
      minmax(112px, 0.72fr)
      minmax(112px, 0.72fr)
      minmax(130px, 0.84fr)
      auto;
  }

  /* 共享文件里用户端这条 mt5 规则连 grid-template-columns 一起写了（八列，特异性 0,3,1），
     只覆盖 areas 的话列数会对不上，多出第 8 条 0px 轨道，所以这里把列也一并重写。
     IB 那条 mt5 规则只写了 areas，不需要这样。 */
  body[data-layout-page="client-trading-history"][data-history-platform="mt5"] .records-filter-grid {
    grid-template-areas:
      "server search account type side duration reset"
      "linked linked entry time time time .";
    grid-template-columns:
      minmax(124px, 0.8fr)
      minmax(178px, 1.15fr)
      minmax(146px, 0.94fr)
      minmax(112px, 0.72fr)
      minmax(112px, 0.72fr)
      minmax(130px, 0.84fr)
      auto;
  }

  /* 共享文件把这批指派锁在 @media (min-width:1280px) 里，而容器宽度 ≥1020 在
     「视口 1279 + 侧栏收起」时就已经成立了，那时共享指派还没生效。
     不补这一份的话，.records-filter-actions 的 grid-area:reset 会被当成
     「名为 reset 的网格线」，凭空多出隐式 0px 轨道把重置按钮挤到下一行。 */
  body[data-layout-page="client-trading-history"] .records-filter-server { grid-area: server; }
  body[data-layout-page="client-trading-history"] .records-filter-search { grid-area: search; }
  body[data-layout-page="client-trading-history"] .records-filter-account { grid-area: account; }
  body[data-layout-page="client-trading-history"] .records-filter-type { grid-area: type; }
  body[data-layout-page="client-trading-history"] .records-filter-side { grid-area: side; }
  body[data-layout-page="client-trading-history"] .records-filter-duration { grid-area: duration; }
  body[data-layout-page="client-trading-history"] .records-filter-linked { grid-area: linked; }
  body[data-layout-page="client-trading-history"] .records-filter-entry { grid-area: entry; }
  body[data-layout-page="client-trading-history"] .records-filter-time { grid-area: time; }
  body[data-layout-page="client-trading-history"] .records-filter-actions { grid-area: reset; }

  /* --- IB 持仓 / 限价：搜索·账户范围·客户·账号类型·服务器·方向·重置，无命名区域 --- */
  body:is([data-layout-page="ib-trading-records"], [data-layout-page="ib-limit-orders"]) .records-filter-grid {
    grid-template-areas: none;
    grid-template-columns:
      minmax(190px, 1.15fr)
      minmax(200px, 1.3fr)
      minmax(148px, 0.9fr)
      minmax(112px, 0.66fr)
      minmax(124px, 0.74fr)
      minmax(112px, 0.66fr)
      auto;
  }

  /* --- 用户端持仓 / 限价：只有搜索·交易账号·账号类型·服务器·方向·重置六格 --- */
  body:is([data-layout-page="client-trading-records"], [data-layout-page="client-limit-orders"]) .records-filter-grid {
    grid-template-areas: none;
    grid-template-columns:
      minmax(200px, 1.4fr)
      minmax(160px, 1fr)
      minmax(120px, 0.74fr)
      minmax(132px, 0.82fr)
      minmax(120px, 0.74fr)
      auto;
  }

  body[data-records-view] .records-field,
  body[data-records-view] .records-field.wide,
  body[data-records-view] .records-field.compact {
    min-width: 0;
  }
}

/* IB 交易历史去掉了「客户 / 交易账号 / 账号类型」三个筛选，剩下的项数比六页共用的
   1020 门槛要省得多，所以这页单开两档容器断点，让网格一路撑到主列 ~660 才交回弹性换行。
   继续跟着 1020 走的话，1280 视口（主列 ~926）就退回换行，「交易时间」会被 flex 拉成
   一整行 ~700px，两行也对不齐了。

   两档都不写 grid-template-areas：关联ID / 开平仓 只在 MT5 服务器下出现，
   用 areas 就得为两种状态各维护一张表，缺席的区域名还会退化成同名网格线多出隐式轨道。
   改成让筛选按 DOM 顺序自然填格，列边界在各行之间天然对齐。 */

/* 窄档：3 列。MT4 的 6 项正好排满 2 行；MT5 的 8 项排 3 行，末尾空一格。
   日期区间在 MT4 下落在第 3 列、MT5 下落在第 2 列，所以这两列都得留得下它。 */
@container records-filters (min-width: 660px) {
  body[data-layout-page="ib-trading-history"] .records-filter-grid {
    display: grid;
    gap: 10px;
    grid-template-columns:
      minmax(124px, 0.78fr)   /* 服务器 / 方向 / 开平仓 */
      minmax(200px, 1.2fr)    /* 搜索   / 持仓时长 / 交易时间 */
      minmax(200px, 1.2fr)    /* 账户范围 / 关联ID */
      auto;                   /* 重置 */
    grid-template-rows: repeat(2, auto);
  }

  /* MT5 多出关联ID / 开平仓，3 列要排 3 行 */
  body[data-layout-page="ib-trading-history"][data-history-platform="mt5"] .records-filter-grid {
    grid-template-rows: repeat(3, auto);
  }

  /* 重置整列包下来，自然填格就不会溜进最后一列 —— 这一列必须靠显式行数才占得住：
     行是隐式生成的话 grid-row: 1 / -1 会退化成只占一行，剩下几行的最后一格又会被
     筛选填进去（开/平仓被挤成 81px、交易时间被顶到下一行只剩半个日期框就是这么来的）。 */
  body[data-layout-page="ib-trading-history"] .records-filter-actions {
    grid-column: -2 / -1;
    grid-row: 1 / -1;
    align-self: end;
  }

  /* 共用的 min-width 归零锁在 @media 1280 / @container 1020 里，这两档门槛更低，自己补一份，
     否则 .records-field 的 min-width:158px 会把上面那几条 minmax 的下限顶掉。 */
  body[data-layout-page="ib-trading-history"] .records-field,
  body[data-layout-page="ib-trading-history"] .records-field.wide,
  body[data-layout-page="ib-trading-history"] .records-field.compact {
    min-width: 0;
  }
}

/* 宽档：MT4 维持 3 列（只是更宽松），MT5 改 4 列，8 项正好排满 2 行。 */
@container records-filters (min-width: 860px) {
  body[data-layout-page="ib-trading-history"] .records-filter-grid {
    grid-template-columns:
      minmax(124px, 0.8fr)    /* 服务器 / 持仓时长 */
      minmax(178px, 1.08fr)   /* 搜索   / 方向     */
      minmax(210px, 1.3fr)    /* 账户范围 / 交易时间 */
      auto;                   /* 重置 */
  }

  body[data-layout-page="ib-trading-history"][data-history-platform="mt5"] .records-filter-grid {
    grid-template-columns:
      minmax(124px, 0.8fr)    /* 服务器 / 持仓时长 */
      minmax(178px, 1.04fr)   /* 搜索   / 关联ID   */
      minmax(198px, 1.16fr)   /* 账户范围 / 开平仓 */
      minmax(210px, 1.24fr)   /* 方向   / 交易时间 */
      auto;                   /* 重置 */
    /* 多一列之后 8 项回到 2 行，撤掉窄档那条 3 行 */
    grid-template-rows: repeat(2, auto);
  }
}

@media (max-width: 760px) {
  /* 窄屏下 .records-heading 变成单列，这张卡会撑满宽度，右对齐就读着别扭 */
  body[data-records-view] .records-context-card {
    justify-items: start;
    text-align: left;
  }
}

/* ---------- 盈亏日历弹窗（仅用户端交易历史有） ---------- */

/* 弹窗里的 .pnl-* 是另一套 class，不跟着上面的 .records-* 一起缩，
   不补这一段的话，页面已经收到 12.5px 了，点开日历还是 19px/950 的旧尺度。 */

body[data-records-view] .pnl-calendar-toolbar {
  padding: 9px 14px;
}

body[data-records-view] .pnl-calendar-views {
  padding: 3px;
  gap: 3px;
}

body[data-records-view] .pnl-calendar-views button {
  height: 28px;
  font-size: 12.5px;
  font-weight: 650;
}

body[data-records-view] .pnl-calendar-nav button {
  height: 28px;
}

body[data-records-view] .pnl-calendar-nav strong {
  font-size: 13.5px;
  font-weight: 700;
}

body[data-records-view] .pnl-calendar-nav .pnl-calendar-today {
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 650;
}

body[data-records-view] .pnl-calendar-summary {
  gap: 8px;
  padding: 10px 14px 0;
}

body[data-records-view] .pnl-summary-card {
  gap: 3px;
  padding: 8px 10px;
}

body[data-records-view] .pnl-summary-card span,
body[data-records-view] .pnl-summary-card small {
  font-size: 11px;
  font-weight: 500;
}

body[data-records-view] .pnl-summary-card strong {
  font-size: 15px;
  font-weight: 700;
}

body[data-records-view] .pnl-calendar-content {
  padding: 10px 14px 14px;
}