/* IB 客户列表 · 页面精修皮肤
   整份以 body[data-layout-page="ib-clients"] 作用域覆盖 ib-clients.css，link 放在所有样式表最后。
   只调排版尺度与密度，不动结构与配色语义。 */

/* ---------- 版心与页头 ---------- */

body[data-layout-page="ib-clients"] .ib-clients-page {
  padding: clamp(18px, 2vw, 26px) clamp(16px, 2vw, 26px) 56px;
}

body[data-layout-page="ib-clients"] .ib-clients-heading {
  margin-bottom: 14px;
}

body[data-layout-page="ib-clients"] .ib-clients-heading h1 {
  font-size: 23px;
  line-height: 1.28;
  font-weight: 750;
  letter-spacing: -0.01em;
}

body[data-layout-page="ib-clients"] .ib-clients-heading p {
  max-width: 640px;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 450;
}

/* ---------- 快捷统计 ---------- */

body[data-layout-page="ib-clients"] .ib-client-metrics {
  gap: 10px;
  margin-bottom: 14px;
}

body[data-layout-page="ib-clients"] .ib-metric-card {
  min-height: 74px;
  gap: 7px;
  padding: 11px 13px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

body[data-layout-page="ib-clients"] .ib-metric-heading {
  gap: 8px;
}

body[data-layout-page="ib-clients"] .ib-metric-heading > span:last-child {
  font-size: 11.5px;
  font-weight: 600;
}

body[data-layout-page="ib-clients"] .ib-metric-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

body[data-layout-page="ib-clients"] .ib-metric-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

body[data-layout-page="ib-clients"] .ib-metric-card strong {
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ---------- 筛选区 ---------- */

body[data-layout-page="ib-clients"] .ib-client-filter {
  gap: 10px 12px;
  padding: 12px 14px;
  border-radius: 10px;
}

body[data-layout-page="ib-clients"] .ib-filter-heading {
  gap: 12px;
  padding-bottom: 0;
}

body[data-layout-page="ib-clients"] .ib-filter-heading h2,
body[data-layout-page="ib-clients"] .ib-table-heading h2 {
  font-size: 13.5px;
  line-height: 1.3;
  font-weight: 700;
}

body[data-layout-page="ib-clients"] .ib-filter-heading p,
body[data-layout-page="ib-clients"] .ib-table-heading p {
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 450;
}

body[data-layout-page="ib-clients"] .ib-client-filter label {
  gap: 5px;
  font-size: 11.5px;
  font-weight: 550;
}

body[data-layout-page="ib-clients"] .ib-client-filter label > span {
  font-size: 11.5px;
  font-weight: 600;
}

body[data-layout-page="ib-clients"] .ib-client-filter input,
body[data-layout-page="ib-clients"] .ib-client-filter select,
body[data-layout-page="ib-clients"] .ib-search-control {
  height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
}

/* 日期区间是三列栅格，只给外框最小高度，真正定高的是里面的输入框，
   窄屏若被压成竖排也不会把第二个日期框挤出盒子。 */
body[data-layout-page="ib-clients"] .ib-client-filter .ib-date-range {
  height: auto;
  min-height: 34px;
  padding: 0;
  border-radius: 7px;
}

body[data-layout-page="ib-clients"] .ib-client-filter .ib-date-range input {
  height: 32px;
  padding: 0 8px;
  border-radius: 0;
  font-size: 12.5px;
}

body[data-layout-page="ib-clients"] .ib-date-range i {
  font-size: 11px;
  font-weight: 600;
}

body[data-layout-page="ib-clients"] .ib-client-filter .ib-filter-check {
  min-height: 34px;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 550;
}

body[data-layout-page="ib-clients"] .ib-search-control {
  gap: 8px;
}

body[data-layout-page="ib-clients"] .ib-search-control svg {
  width: 15px;
  height: 15px;
}

body[data-layout-page="ib-clients"] .ib-search-control input {
  padding: 0;
  font-size: 13px;
  font-weight: 500;
}

/* ---------- 按钮 ---------- */

body[data-layout-page="ib-clients"] .ib-primary-action,
body[data-layout-page="ib-clients"] .ib-secondary-action,
body[data-layout-page="ib-clients"] .ib-client-filter .ib-primary-action,
body[data-layout-page="ib-clients"] .ib-client-filter .ib-secondary-action {
  height: 34px;
  gap: 6px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 650;
}

body[data-layout-page="ib-clients"] .ib-icon-action {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

body[data-layout-page="ib-clients"] .ib-primary-action svg,
body[data-layout-page="ib-clients"] .ib-secondary-action svg,
body[data-layout-page="ib-clients"] .ib-icon-action svg {
  width: 15px;
  height: 15px;
}

body[data-layout-page="ib-clients"] .ib-filter-actions,
body[data-layout-page="ib-clients"] .ib-table-tools,
body[data-layout-page="ib-clients"] .ib-footer-left {
  gap: 8px;
}

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

body[data-layout-page="ib-clients"] .ib-client-table-card {
  margin-top: 14px;
  border-radius: 10px;
}

body[data-layout-page="ib-clients"] .ib-client-table-toolbar {
  min-height: 48px;
  padding: 10px 14px;
}

body[data-layout-page="ib-clients"] .ib-client-table th,
body[data-layout-page="ib-clients"] .ib-client-table td {
  padding: 8px 12px;
}

body[data-layout-page="ib-clients"] .ib-client-table th {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

body[data-layout-page="ib-clients"] .ib-client-table td {
  font-size: 12.5px;
  line-height: 1.4;
}

body[data-layout-page="ib-clients"] .ib-client-name,
body[data-layout-page="ib-clients"] .ib-client-contact,
body[data-layout-page="ib-clients"] .ib-client-money,
body[data-layout-page="ib-clients"] .ib-client-date {
  gap: 2px;
  line-height: 1.32;
}

body[data-layout-page="ib-clients"] .ib-client-name strong,
body[data-layout-page="ib-clients"] .ib-client-contact strong,
body[data-layout-page="ib-clients"] .ib-client-money strong,
body[data-layout-page="ib-clients"] .ib-client-date strong,
body[data-layout-page="ib-clients"] .ib-client-amount {
  font-weight: 650;
}

body[data-layout-page="ib-clients"] .ib-client-name small,
body[data-layout-page="ib-clients"] .ib-client-contact small,
body[data-layout-page="ib-clients"] .ib-client-money small,
body[data-layout-page="ib-clients"] .ib-client-date small,
body[data-layout-page="ib-clients"] .ib-client-table td small {
  font-size: 11px;
  font-weight: 450;
}

body[data-layout-page="ib-clients"] .ib-client-email,
body[data-layout-page="ib-clients"] .ib-client-remark {
  font-weight: 500;
}

body[data-layout-page="ib-clients"] .ib-client-time {
  font-weight: 450;
}

body[data-layout-page="ib-clients"] .ib-client-empty,
body[data-layout-page="ib-clients"] .ib-client-tag-empty {
  font-weight: 450;
}

body[data-layout-page="ib-clients"] .ib-client-tags {
  gap: 5px;
}

body[data-layout-page="ib-clients"] .ib-client-tag {
  min-height: 18px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 700;
}

body[data-layout-page="ib-clients"] .ib-chip {
  min-height: 18px;
  gap: 4px;
  padding: 0 7px;
  font-size: 10.5px;
  font-weight: 700;
}

body[data-layout-page="ib-clients"] .ib-row-action {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 650;
}

body[data-layout-page="ib-clients"] .ib-empty-state {
  padding: 30px 16px;
  font-size: 13px;
  font-weight: 600;
}

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

body[data-layout-page="ib-clients"] .ib-table-footer {
  min-height: 44px;
  gap: 12px;
  padding: 9px 14px;
}

body[data-layout-page="ib-clients"] .ib-footer-left {
  font-size: 12px;
  font-weight: 500;
}

body[data-layout-page="ib-clients"] .ib-page-size select {
  height: 28px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
}

body[data-layout-page="ib-clients"] .ib-pager {
  border-radius: 7px;
}

body[data-layout-page="ib-clients"] .ib-pager button {
  min-width: 30px;
  height: 28px;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- 筛选栅格改用容器查询 ---------- */

/* 原来固定四列：8 个筛选格排两行、两个勾选框加搜索/重置又占掉第三行。
   控件收到 34px 后一行放得下六列，按主列自身宽度判断（视口断点会差一个侧栏的宽度）。 */
body[data-layout-page="ib-clients"] .ib-clients-shell {
  container-type: inline-size;
  container-name: ib-clients-main;
}

@container ib-clients-main (min-width: 1000px) {
  body[data-layout-page="ib-clients"] .ib-client-filter {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  /* 注册时间是两个原生日期框，给它两格才不会各自只剩 80px */
  body[data-layout-page="ib-clients"] .ib-client-filter .ib-date-filter {
    grid-column: span 2;
  }

  /* 第二行末位收搜索/重置，正好排满两行 */
  body[data-layout-page="ib-clients"] .ib-filter-actions {
    grid-column: 6;
  }
}

/* 共享文件把表格下限钉在 1880px，是按 14px/16px 的单元格内边距估的「15 列一行放完」。
   内边距和字号收了之后，把所有单元格的 max-width/ellipsis 摘掉实测，一行放完只要 ~1525px，
   钉死的 1880 等于凭空多出 ~350px 横向滚动。这里按实测值留一点余量。
   注意不能图省事写 min-width: min-content —— 姓名/邮箱这些单元格是 overflow:hidden + ellipsis，
   它们的 min-content 接近 0，列会被压到把姓名和账户ID 截成「石 宇奇 / 5555573…」。 */
body[data-layout-page="ib-clients"] .ib-client-table {
  min-width: 1560px;
}