/* ============================================================
 * 宽表自适应补丁 v4 — 2026-11-02
 *
 * v2 把字号压到 0.7rem 换「不溢出」，字太小看不清。
 * v4 反过来：字号先保住，宽度靠「按内容长度分配列宽 + 允许折行」去省。
 *
 * 五条策略：
 *   1. 字号：表头 12.8px / 单元格 13.6px
 *   2. 折行：所有单元格都允许折行，长文本排成两行
 *   3. 分档限宽：由 fix-wide.js 按文字长度打 class
 *        .pj-short  ≤8 字   5rem      （价格、库存、状态）
 *        .pj-mid    9~24 字 8.5rem    （账号ID、商品ID）
 *        .pj-long   >24 字  13rem     （商品标题、备注）
 *        .pj-ctl    含控件  16rem     （功能开关、操作）
 *   4. 按钮组 wrap：一行放不下就往下排，不横向撑爆
 *   5. 兜底：真的还溢出才 zoom，下限 0.88
 *
 * 依赖：/fix-wide.js（打分档 class + zoom 兜底）
 * ============================================================ */

/* ---- 1. 整页禁横向滚动 ---- */
html, body {
  overflow-x: hidden !important;
}

/* ---- 2. 表格：跟着容器走 ---- */
.table-ios {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: auto !important;
}

/* ---- 3. 表头：单行、不拆字 ---- */
.table-ios th {
  white-space: nowrap !important;
  padding: 0.5rem 0.4rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  vertical-align: middle !important;
}

/* ---- 4. 数据单元格：允许折行 ---- */
.table-ios td {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  padding: 0.5rem 0.4rem !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  vertical-align: middle !important;
  max-width: 8.5rem !important;
}

/* ---- 4b. 按内容长度分档限宽（class 由 fix-wide.js 打）----
 * 短列必须 nowrap：否则 auto 布局会把「已售罄」压成「已售/罄」、
 * 「¥17.91」压成「¥17.9/1」。nowrap 之后它的最小宽度就是整词宽，
 * 浏览器不会再去压它，腾出来的空间自然给长文本列。 */
.table-ios td.pj-short {
  max-width: 6rem   !important;
  min-width: 3.2rem !important;
  white-space: nowrap !important;
}
.table-ios td.pj-code {
  white-space: nowrap !important;
  max-width: 9rem !important;
}
.table-ios td.pj-mid  { max-width: 8.5rem !important; min-width: 4rem !important; }
.table-ios td.pj-long { max-width: 13rem !important; min-width: 6rem !important; }
.table-ios td.pj-ctl  { max-width: 16rem !important; min-width: 6rem !important; }

/* ---- 5. 表格容器不再横向滚动 ---- */
.table-ios-container,
.table-scroll {
  overflow-x: hidden !important;
}

/* ---- 6. 按钮组必须允许换行 ----
 * 「功能开关」这类列塞了 8~9 个按钮，不换行会把这列撑到 500px+。
 * 容器宽度上限跟 td 走（100%），超出就往下排，绝不横向溢出被裁掉。 */
.table-ios td .flex,
.table-ios td [class*="inline-flex"],
.table-ios td div:has(> button) {
  flex-wrap: wrap !important;
  gap: 4px !important;
  row-gap: 4px !important;
  align-items: center !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ---- 6b. 单元格内的小按钮 ---- */
.table-ios td button,
.table-ios td .btn,
.table-ios td a[class*="btn"],
.table-ios td [role="button"] {
  padding: 2px 5px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  height: auto !important;
  min-height: 0 !important;
  white-space: nowrap !important;
  border-radius: 4px !important;
  flex: 0 0 auto !important;
}

.table-ios td button svg,
.table-ios td .btn svg,
.table-ios td [role="button"] svg {
  width: 11px !important;
  height: 11px !important;
  margin-right: 1px !important;
  flex: 0 0 auto !important;
}

/* ---- 7. 弹性容器别被内容撑开（Tailwind 的 flex-1 默认 min-width:auto）---- */
.flex-1,
.min-w-0 {
  min-width: 0 !important;
}

/* ---- 8. 窄屏：收 padding 和列宽上限，字号只微降 ---- */
@media (max-width: 1500px) {
  .table-ios th { padding: 0.45rem 0.32rem !important; font-size: 0.78rem !important; }
  .table-ios td { padding: 0.45rem 0.32rem !important; font-size: 0.83rem !important; }
  .table-ios td.pj-short { max-width: 5.5rem !important; }
  .table-ios td.pj-mid   { max-width: 7.5rem !important; }
  .table-ios td.pj-long  { max-width: 11rem  !important; }
  .table-ios td.pj-ctl   { max-width: 14rem  !important; }
}

@media (max-width: 1280px) {
  .table-ios th { padding: 0.4rem 0.26rem !important; font-size: 0.76rem !important; }
  .table-ios td { padding: 0.4rem 0.26rem !important; font-size: 0.8rem !important; }
  .table-ios td.pj-short { max-width: 5rem   !important; }
  .table-ios td.pj-mid   { max-width: 7rem   !important; }
  .table-ios td.pj-long  { max-width: 10rem  !important; }
  .table-ios td.pj-ctl   { max-width: 13rem  !important; }
  .table-ios td button { font-size: 10.5px !important; padding: 2px 4px !important; }
}