/* ============================================================================
   itools 自建页面基础框架 v1  （2026-09-10 零号建，用户定规范）
   用途：所有自建内部页面（Vue3 + Element Plus）统一引入，保证页面框架一致：
     1) 内容区「自适应内容宽度 + 最小 1000px + 水平居中」——不占满屏幕
     2) 工具条控件（按钮/输入框/下拉框）一律居中，不左右两端分置
     3) 表格「内容自适应 + 最小 1000px + 居中」
     4) 单元格上下留空统一 7px（2026-09-10 用户定）
   引入：<link rel="stylesheet" href="./fw/itools-base.css">（放在页面自身 <style> 之后）
   说明：本文件用 body 前缀提高优先级，页面自身旧规则会被这里统一覆盖，便于存量页面平滑对齐。
   ========================================================================= */
:root { --fw-min-width: 1000px; }

/* ---------- 1. 页面内容容器 ---------- */
body .fw-page,
body .page,
body .wrap {
  width: fit-content;
  min-width: var(--fw-min-width);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 2. 工具条：控件居中 ---------- */
body .toolbar,
body .fw-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;   /* 居中，不两端分置 */
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  min-width: var(--fw-min-width);
  margin-left: auto;
  margin-right: auto;
}
/* 禁用「弹性占位把控件推向两侧」的旧做法 */
body .toolbar > .grow,
body .toolbar > .spacer,
body .fw-toolbar > .grow { display: none; }

/* ---------- 2b. 弹窗底部操作按钮：右下角对齐（规范 16，2026-09-12 用户定，禁左下） ---------- */
body .mbtns,
body .modal-actions,
body .fw-modal-actions {
  display: flex;
  justify-content: flex-end;   /* 右下角对齐 */
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
/* 禁用「把关闭按钮单独推到左下角」的旧做法（margin-right:auto / .left） */
body .mbtns > .left,
body .modal-actions > .left,
body .fw-modal-actions > .left { margin-right: 0; margin-left: 0; }
/* 关闭按钮自动置末：加 data-fw-close 即生效（任意 flex 容器内排到最后，无需调 DOM 顺序） */
body [data-fw-close] { order: 999; }

/* ---------- 3. 表格 ---------- */
body .wrap table,
body .fw-table {
  width: max-content;
  min-width: var(--fw-min-width);
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  font-size: 13px;          /* 字号统一：对齐商品发布操作台 */
  color: #262626;           /* 字色统一：对齐商品发布操作台 */
}
body .wrap table th,
body .fw-table th { font-size: 13px; color: #374151; background: #f8fafc; }

/* ---------- 3b. 列表 zebra（偶数行浅底交替；2026-09-12 定：明快淡蓝 #e9f2ff，全站唯一来源） ---------- */
body .wrap table tbody tr:nth-child(even),
body .fw-table tbody tr:nth-child(even) { background: #e9f2ff; }

/* ---------- 3c. Excel 式选择高亮（配合 itools-base.js） ---------- */
/* 描边 + 内阴影双保险：即使行有背景色（斑马纹/分层色）也能明显看出选中 */
body .fw-sel {
  outline: 3px solid #2563eb !important;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 3px #2563eb !important;
  background: #dbeafe !important;
  position: relative;
  z-index: 2;
}

/* ---------- 3d. 单元格上下留空（统一 7px，2026-09-10 用户定；全局生效） ---------- */
body .wrap table th, body .wrap table td,
body .fw-table th, body .fw-table td,
body .tbl-wrap table th, body .tbl-wrap table td,
body .table-wrap table th, body .table-wrap table td,
body .perm-scroll table th, body .perm-scroll table td,
body .perm-card table th, body .perm-card table td {
  padding-top: 7px;
  padding-bottom: 7px;
}

/* ---------- 3d. 选择操作条（框架统一渲染；只显示对选中行可执行的操作） ---------- */
body .fw-selbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: #1c2733;
  color: #fff;
  padding: 7px 12px;
  border-radius: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  z-index: 300;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
body .fw-selbar .btn {
  background: #2563eb; border: 1px solid transparent; color: #fff;
  padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1.2;
}
body .fw-selbar .btn:hover { filter: brightness(1.08); }
body .fw-selbar .btn.danger { background: #dc2626; }
body .fw-selbar .btn.primary { background: #16a34a; }

/* ---------- 3e. 列表分页条（框架统一渲染：每页行数 10/20/50/100 + 总行数） ---------- */
/* 2026-09-10 用户定：列表下方可设置每页行数，并显示当前列表总行数；页面给表格加 data-fw-pager 即生效 */
body .fw-pager {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin: 8px auto 2px; font-size: 13px; color: #374151;
}
body .fw-pager .fw-pager-info { color: #6b7280; }
body .fw-pager .fw-pager-sep { color: #cbd5e1; }
body .fw-pager select.fw-pager-size {
  height: 26px; padding: 0 6px; border: 1px solid #d0d7e2; border-radius: 4px;
  background: #fff; font-size: 13px; color: #262626;
}
body .fw-pager button.fw-pager-btn {
  min-width: 26px; height: 26px; padding: 0 8px; border: 1px solid #d0d7e2;
  background: #fff; border-radius: 4px; cursor: pointer; font-size: 13px;
  color: #374151; line-height: 1;
}
body .fw-pager button.fw-pager-btn:not(:disabled):hover { border-color: #2563eb; color: #2563eb; }
body .fw-pager button.fw-pager-btn:disabled { color: #b6bdc9; background: #f7f9fc; cursor: not-allowed; }
/* 页码跳转框（2026-11-01 HGZ 定）：页数多的列表直接输入页码回车跳转 */
body .fw-pager input.fw-pager-jump {
  width: 58px; height: 26px; padding: 0 6px; border: 1px solid #d0d7e2; border-radius: 4px;
  background: #fff; font-size: 13px; color: #262626; text-align: center;
}
body .fw-pager input.fw-pager-jump:focus { border-color: #2563eb; outline: none; }

/* ---------- 3f. 列表排序（框架统一：双击表头 升序 ▲ → 降序 ▼ → 取消）---------- */
/* 2026-09-10 用户定：列表可按列内容正/反序排序，双击列表头字段实现；表格加 data-fw-sort 即生效 */
body table th.fw-sort-th {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
body table th.fw-sort-th:hover { background: #eef2f7; }
body table th .fw-sort-mark {
  margin-left: 4px;
  font-size: 10px;
  color: #b6c0cd;
  line-height: 1;
}
body table th.fw-sort-asc .fw-sort-mark,
body table th.fw-sort-desc .fw-sort-mark { color: #2563eb; }
body table th.fw-sort-asc,
body table th.fw-sort-desc { color: #1d4ed8; }

/* ---------- 4. 页头（标题 + 导航/入口按钮居中） ---------- */
body header,
body header.fw-header,
body .fw-header {
  display: flex;
  align-items: center;
  justify-content: center;   /* 页头内容居中，不左右两端分置 */
  gap: 14px;
}
body header > .grow { display: none; }
/* 类名式页头（.header/.page-header）仅校正水平分布，不改变 display，向后兼容 */
body .header,
body .page-header { justify-content: center; }
body .header > .grow,
body .page-header > .grow { display: none; }

/* ---------- 5. 汇总/状态行（表格上方信息行：居中 + 与表格同字号） ---------- */
/* 2026-09-11 用户定：表头汇总信息不得用小号灰字贴在屏幕左侧，统一居中 + 13px */
body .fw-stat,
body .fw-summary {
  display: flex;
  align-items: center;
  justify-content: center;   /* 居中，不贴左 */
  gap: 10px;
  flex-wrap: wrap;
  flex: none;                /* 处于 flex 列父容器时不伸缩 */
  width: fit-content;
  min-width: var(--fw-min-width);
  margin: 6px auto 2px;
  font-size: 13px;           /* 与表格同字号 */
  color: #374151;
}
body .fw-stat b,
body .fw-summary b { color: #111827; }

/* 文本选择模式（按住 Alt 拖动）：框架放行原生拖选，覆盖表格单元格的 user-select:none（2026-09-11） */
body table.fw-alt-textsel,
body table.fw-alt-textsel td,
body table.fw-alt-textsel th,
body table.fw-alt-textsel td *,
body table.fw-alt-textsel th * { user-select: text !important; -webkit-user-select: text !important; cursor: text; }

/* ===== ItoolsTips：页面自解释悬停提示（规范 13，2026-09-11 零号建） ===== */
body .fw-tipbox { position:fixed; z-index:9999; display:none; max-width:360px; padding:9px 12px;
  background:#fff; border:1px solid #dbe3ec; border-radius:8px; box-shadow:0 8px 24px rgba(15,23,42,.16);
  font-size:12.5px; line-height:1.65; color:#334155; pointer-events:none; }
body .fw-tipbox .h { font-size:13px; font-weight:700; color:#0f172a; margin-bottom:5px; }
body .fw-tipbox .r { display:flex; gap:6px; }
body .fw-tipbox .r b { flex:none; width:32px; color:#64748b; font-weight:600; }
body .fw-tipbox .r span { flex:1; word-break:break-word; }
body .fw-tipbox.danger { border-color:#fca5a5; background:#fff7f7; }
body .fw-tipbox.danger .h { color:#991b1b; }
body .fw-tipbox.danger .r.risk b, body .fw-tipbox.danger .r.risk span { color:#b91c1c; }

/* ===== ItoolsCheck：列表左侧勾选列（2026-09-11 用户定，规范 14） ===== */
/* 框架自动插入的勾选列：宽度固定、居中、不参与列排序；表头=全选/取消全选 */
body table th.fw-ck,
body table td.fw-ck {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
body table th.fw-ck { cursor: pointer; }
body table th.fw-ck:hover { background: #eef2f7; }
body table th.fw-ck input,
body table td.fw-ck input {
  width: 14px;
  height: 14px;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
  accent-color: #2490ef;
}
/* 勾选行左侧色条（与 Excel 式选中高亮一致的口径，避免页面 first-child 规则被勾选列抢走） */
body table tbody tr:has(td.fw-ck input:checked) td.fw-ck { box-shadow: inset 3px 0 0 #2490ef; }

/* ── ItoolsUI：规范 17 页内浮层（toast / alert / confirm）2026-09-19 零号 ────────── */
body .fw-ui-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1c2733; color: #fff; padding: 10px 20px; border-radius: 8px;
  font-size: 13px; z-index: 30050; max-width: 70vw; display: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); white-space: pre-wrap; word-break: break-word;
}
body .fw-ui-toast.err { background: #dc2626; }
body .fw-ui-mask {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.45);
  z-index: 30040; display: flex; justify-content: center; align-items: center;
}
body .fw-ui-dialog {
  background: #fff; border-radius: 8px; min-width: 360px; max-width: 560px; max-height: 80vh;
  display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(0,0,0,.2);
}
body .fw-ui-head { padding: 14px 20px 0; font-size: 15px; font-weight: 600; color: #262626; }
body .fw-ui-body { padding: 12px 20px; font-size: 13px; color: #262626; line-height: 1.7;
  overflow: auto; white-space: pre-wrap; word-break: break-word; }
body .fw-ui-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 16px; }
body .fw-ui-btn { height: 30px; padding: 0 14px; border: 1px solid #d9d9d9; border-radius: 4px;
  background: #fff; cursor: pointer; font-size: 13px; color: #262626; }
body .fw-ui-btn:hover { border-color: #2490ef; color: #2490ef; }
body .fw-ui-btn.primary { background: #2490ef; border-color: #2490ef; color: #fff; }
body .fw-ui-btn.primary:hover { background: #4aa3f2; color: #fff; }
body .fw-ui-btn.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
body .fw-ui-btn.danger:hover { background: #ef4444; color: #fff; }

/* ============================================================================
   子菜单/页签（规范 18，2026-09-21 用户定）
   口径：当前页 = 蓝底白字（.is-on）；非当前页 = 文字不变灰（近黑 #111）+ 虚线边框区分
   背景：灰字（如 #b6c2d1）会导致菜单内容看不清（2026-09-21 用户指出 reports 页）
   页面只写结构不写样式：<div class="fw-tabs"><div class="fw-tab is-on">当前</div><div class="fw-tab">其它</div></div>
   ========================================================================= */
body .fw-tabs { display: flex; justify-content: center; gap: 10px; margin: 2px 0 14px; }
body .fw-tabs .fw-tab {
  padding: 7px 16px; border-radius: 8px; font-size: 14px; line-height: 1.4;
  background: #fff; border: 1px solid #dbe6f6; color: #111; cursor: pointer;
  user-select: none; border-style: dashed;   /* 非当前页：虚线边框区分（不变灰） */
}
body .fw-tabs .fw-tab:hover { border-color: #2f80ed; color: #111; }
body .fw-tabs .fw-tab.is-on {
  background: #2f80ed; border-color: #2f80ed; color: #fff; font-weight: 600;
  border-style: solid;
}