/* 聚端 —— 模块可用的组件契约。
 *
 * 这个文件是**对第三方应用模块的公开 API**，跟 console.css 的区别不在样式，
 * 在承诺：这里的 class 只增不改，改名或删除等于让已经发布的模块当场变形。
 * 模块作者能用的全部东西都在这里，清单见 docs/module-development.md。
 *
 * 平台自己的外壳（导航、登录页、工单、商城卡片等）在 console.css，
 * 那些随时可以改，模块不该依赖。
 */

/* 聚端控制台 —— 界面范式与配色对照微擎 2.5.7，CSS 逐行原创手写 */
:root {
  --bg: #f2f2f2;
  --surface: #fff;
  --line: #e8eaec;
  --line-soft: #f0f2f5;
  --ink: #333;
  --ink-soft: #666;
  --muted: #999;
  --accent: #3296fa;
  --accent-hover: #1c7ee0;
  --accent-wash: #ecf5ff;
  --ok: #19be6b;
  --warn: #ff9900;
  --danger: #ed4014;
}
/* ============ 页内 tab 条（对照微擎 we7-page-tab，46px） ============ */
.page-tabs { display: flex; gap: 26px; height: 46px; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.page-tabs a { color: var(--ink-soft); font-size: 14px; height: 46px; display: flex; align-items: center; border-bottom: 2px solid transparent; }
.page-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
/* ============ 卡片面板 ============ */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 16px; }
.panel-h {
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; font-size: 14px;
}
.panel-h .t { position: relative; padding-left: 10px; font-weight: 600; }
.panel-h .t::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; background: var(--accent); border-radius: 2px; }
.panel-h .acts { font-size: 13px; display: flex; gap: 14px; }
.panel-b { padding: 18px; }
.panel-b.flush { padding: 0; }
/* ============ 数据条（今日/昨日） ============ */
.metrics { display: flex; }
.metric { flex: 1; text-align: center; padding: 22px 10px; border-right: 1px solid var(--line-soft); }
.metric:last-child { border-right: none; }
.metric .t { color: var(--ink-soft); font-size: 13px; margin-bottom: 8px; }
.metric .n { font-size: 30px; color: var(--ink); font-variant-numeric: tabular-nums; }
.metric .n small { font-size: 18px; color: var(--muted); }
/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; border-radius: 3px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent); cursor: pointer; font-size: 13px;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn.ghost { background: #fff; color: var(--ink-soft); border-color: #dcdee2; }
.btn.ghost:hover { color: var(--accent); border-color: var(--accent); background: #fff; }
.btn.danger { background: #fff; color: var(--danger); border-color: #f7c4b6; }
.btn.danger:hover { background: #fef2ef; color: var(--danger); border-color: var(--danger); }
.btn.sm { padding: 3px 10px; font-size: 12px; }
/* ============ 表格 ============ */
table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.list th, table.list td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); text-align: left; }
table.list th { background: #fafbfc; color: var(--ink-soft); font-weight: 400; font-size: 13px; }
table.list tr:last-child td { border-bottom: none; }
table.list tr:hover td { background: #fafcff; }
/* ============ 表单 ============ */
.form-row { display: flex; margin-bottom: 18px; }
.form-row > label { width: 130px; padding-top: 7px; text-align: right; padding-right: 16px; color: var(--ink-soft); font-size: 13px; flex-shrink: 0; }
.form-row > div { flex: 1; max-width: 520px; }
textarea { min-height: 84px; }
.help { color: var(--muted); font-size: 12px; margin-top: 5px; }
.err { color: var(--danger); font-size: 12px; margin-top: 5px; }
/* ============ 徽标 / 提示 ============ */
.tag { display: inline-block; padding: 1px 8px; border-radius: 2px; font-size: 12px; white-space: nowrap; }
.tag.ok { background: #f0faf4; color: var(--ok); border: 1px solid #c4f0d7; }
.tag.off { background: #f7f7f7; color: var(--muted); border: 1px solid #e8eaec; }
.tag.blue { background: var(--accent-wash); color: var(--accent); border: 1px solid #b8dcff; }
.tag.warn { background: #fff8e6; color: var(--warn); border: 1px solid #ffe0a3; }
.flash { padding: 10px 16px; background: #f0faf4; border: 1px solid #c4f0d7; color: var(--ok); border-radius: 3px; margin-bottom: 16px; font-size: 13px; }
.flash.err-flash { background: #fef2ef; border-color: #f7c4b6; color: var(--danger); }
.flash.warn-flash { background: #fff8e6; border-color: #ffe0a3; color: var(--warn); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flash.warn-flash .grow { flex: 1; min-width: 180px; }
/* 说明块。好几个视图一直在用它，但从来没定义过 —— 渲染出来是无样式裸 div */
.hint {
  background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 3px; padding: 12px 14px;
  font-size: 12.5px; line-height: 1.9; color: var(--ink-soft);
}
.hint b { color: var(--ink); }
.hint code { background: #fff; padding: 1px 5px; border-radius: 2px; font-size: 12px; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 13px; }
/* ============ 消息模拟器 ============ */
.muted { color: var(--muted); font-size: 12px; }
/* ============ 首页仪表盘 ============ */
.dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dash-row > .panel { margin-bottom: 16px; }
@media (max-width: 1100px) { .dash-row { grid-template-columns: 1fr; } }
.card-note { padding: 12px 18px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.metric .n.big-num { font-size: 34px; }
/* 状态卡：大字 + 说明 + 操作 */
.state-card { display: flex; align-items: center; gap: 20px; }
.state-card .big { font-size: 30px; font-weight: 300; color: var(--accent); min-width: 92px; text-align: center; }
.state-card .big.warn-text { color: var(--warn); }
.state-card .big.ok-text { color: var(--ok); }
.state-card > div:nth-child(2) { flex: 1; }
.state-card .state-title { font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.state-card form { margin: 0; }
/* 面板头里的内联 tab */
.page-tabs.inline { border-bottom: none; height: auto; margin: 0 0 0 30px; gap: 22px; flex: 1; }
.page-tabs.inline a { height: auto; padding-bottom: 3px; font-size: 13px; }
.tag.danger { background: #fef2ef; color: var(--danger); border: 1px solid #f7c4b6; }
/* ============ 翻页条 ============ */
.pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0 2px; font-size: 13px; }
.pager-info { color: var(--muted); font-variant-numeric: tabular-nums; }
.pager-btns { margin-left: auto; display: flex; gap: 6px; }
.pg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 9px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--surface); color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
a.pg:hover { border-color: var(--accent); color: var(--accent); }
.pg.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg.off { color: var(--muted); opacity: .55; cursor: not-allowed; }
.pg.dots { border-color: transparent; background: none; }

/* ============ 文字与数字
 *
 * 下面这几个不是「觉得可能有用」，是从视图里数出来的：1403 处行内 style 中，
 * color:var(--muted);font-size:12px 出现 66 次、color:var(--ink-soft) 55 次、
 * font-variant-numeric:tabular-nums 36 次。没有它们，每个模块作者都会
 * 各自写一遍行内样式，最后后台的字号和灰度全是花的。
 * ============ */
.hint-sm { color: var(--muted); font-size: 12px; }
.soft    { color: var(--ink-soft); }
/* 数字列。等宽数字让上下行的位数对齐，金额和计数看着才不跳 */
.num     { font-variant-numeric: tabular-nums; }

/* ============ 行内提交表单
 *
 * 「一个按钮就是一次 POST」是这套后台里最高频的模式（display:inline 出现 43 次）。
 * 不给 class 的话，每处都要记得写 style="display:inline"，忘一次那一行就断行。
 * ============ */
form.inline { display: inline; margin: 0; }

/* ============ 表格列宽档位
 *
 * 视图里 width:90/100/110/120/140/150px 合计出现约 200 次，值是随手挑的，
 * 同一种列在不同页面宽度不一样。收敛成五档，超出档位的再写行内。
 * ============ */
table.list th.w-xs { width: 90px; }
table.list th.w-sm { width: 110px; }
table.list th.w-md { width: 130px; }
table.list th.w-lg { width: 160px; }
table.list th.w-xl { width: 200px; }