/*!
 * ui-skeleton.css —— 工作台骨架层
 * 建立日期：2026-11-08
 *
 * 分工（不要混）：
 *   work-rail.css    → 轨道：内容有多宽（1080，唯一值）
 *   ui-workbench.css → 组件：卡、行、条、徽章长什么样
 *   ui-skeleton.css  → 骨架：这些块在一行里怎么排（本文件）
 *
 * 只允许三种骨架。新页面开工第一件事是先选骨架，选不出来说明这页还没想清楚。
 *
 *   S1 概览 overview —— 顶部 KPI 行 + 主次两栏（左主右次，等高）
 *       /agent(center) /agent/points /m/home /m/collab /m/advisor
 *       /m/quota /m/vip /m/me /m/profile
 *
 *   S2 列表 list —— 顶部筛选 + 满宽表格/行列表 + 分页
 *       /agent/channel /agent/contracts /agent/money /agent/pacts
 *       /agent/special /agent/team /agent/material /agent/package
 *       /agent/customers /agent/renewals /m/cases /m/orders /messages
 *
 *   S3 详情 detail —— 轨道内收窄到 720 的阅读区（单条详情 / 单张表单）
 *       /agent/recharge /agent/apply /m/subscribe
 *       注：/agent/company 实测是 3 列表单，收窄到 720 会把三列挤坏，
 *           该页保持轨道满宽，不算 S3。
 *       注：/agent/apply 当前无路由（GET 返回 404），模板为孤儿，待确认后再归位。
 *
 * 三种骨架共用的四条硬约束（违反任何一条，页面立刻显歪）：
 *   1) KPI 行一律 4 列节奏。只有 3 张卡时不拉伸成 3 个超宽壳，缺位留白。
 *   2) 两栏一律等高。左右两张卡不许一高一矮，内容少的用 flex 撑开。
 *   3) 空态一律限宽 560 居中。整条 1080 的空框里飘一行字，是本轮"最丑"的成因。
 *   4) 表格一律满宽，但列宽按内容分配，不平均分摊。
 *
 * 加载：view/layout/m.html，在 ui-workbench.css 之后。
 */

/* ============================================================
   S1 · 概览：KPI 行 4 列节奏
   问题：/agent/points 用 .ag-kpis.three → repeat(3,1fr)，3 张卡各 352 宽，
        卡内只有「标签/数字/说明」三行左对齐，右侧 200px 全是空 → 读作"发空"。
   做法：3 张卡也走 4 列轨道，缺的那格留白。与 4 卡页面节奏一致。
   ============================================================ */
.content .ag-kpis,
.content .ag-kpis.three{grid-template-columns:repeat(4,minmax(0,1fr))}

/* 只有 1 张卡时不要占满 1/4 轨道（261 宽已在可读范围，但仍限死 261） */
.content .ag-kpis:has(> :only-child){grid-template-columns:minmax(0,261px)}

/* KPI 行「整行排满」原则：卡数超出 4 张不许掉到第二行孤零零一张。
   问题：/m/orders 有 5 张（4 个计数 + 服务金额），5 张塞 4 列 → 第 5 张单独
        占 261 宽，右侧空 819，读作"表格没做完"。
   做法：卡数决定列数，每行必须排满。 */
.content .m-stats:has(> :nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
.content .m-stats:has(> :nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
.content .ag-kpis:has(> :nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}

/* 单卡内容不许被拉成一行散字：说明文字限宽，右侧留白而不是拉开字距 */
.content .ag-kpi .foot{max-width:220px}
.content .ag-kpi b{font-variant-numeric:tabular-nums}

/* ============================================================
   S1 · 概览：两栏等高
   问题：/agent 首页 .ag-cols（1.35fr 1fr）左图表卡柱区写死 150px，
        卡片本身被右侧列表撑到 400+，于是柱子上方正常、下方一大片空白。
   做法：卡片 flex 纵向，柱区 flex:1 吃掉剩余高度。
   ============================================================ */
.content .ag-cols{align-items:stretch}
.content .ag-cols > .ag-card{height:100%;display:flex;flex-direction:column;min-width:0}
.content .ag-cols > .ag-card > .ag-chart{flex:1;min-height:150px}
.content .ag-cols > .ag-card > .ag-list{flex:1;min-height:0}
.content .ag-cols > .ag-card > .ag-card-h{flex:none}

/* 概览页里独立成行的图表卡同样撑满（原 .ag-chart 固定 150 → 扁） */
.content .ag-card > .ag-chart{flex:1;min-height:160px}

/* ============================================================
   S2 · 列表：表格列宽按内容分配
   问题：表格 columns 平均分摊时，时间列宽到能放下三倍内容，事件列却被挤断。
   做法：数值/时间列 nowrap 不吃宽度，文本列吃掉剩余。
   ============================================================ */
.content .ag-table td.mono,
.content .ag-table th:first-child{white-space:nowrap}
.content .ag-table td.ag-dimtxt{max-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.content .ag-tablewrap{width:100%}

/* ============================================================
   S2 · 列表：快捷入口块必须排满一行
   问题：.ag-quick 写死 repeat(4,1fr)，但各页项数不同：
        points/pacts/special/team/counselor 只 2 项 → 各占 1/4，右侧空一半；
        material/package 3 项 → 右侧空 1 格。
   做法：项数决定列数，2/3/4/5 项分别 2/3/4/5 等分，6 项走 3 列两行。
   ============================================================ */
.content .ag-quick{grid-template-columns:repeat(4,minmax(0,1fr))}
.content .ag-quick:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.content .ag-quick:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.content .ag-quick:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
.content .ag-quick:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}

/* 列表空态：卡内一行「暂无记录」横贯 1080，同样是最丑的成因之一 */
.content .ag-card > .ag-empty{max-width:560px;margin-left:auto;margin-right:auto;
  padding:56px 0 60px;line-height:1.8}

/* ============================================================
   S2 · 列表：空态限宽
   问题：/messages 空态是 1080 × 300 的虚线大框，中间一行字，横向"一整条"。
   做法：限宽 560 居中；剩余宽度留白，不硬撑。
   ============================================================ */
.content .sv-page .msg-empty{max-width:560px;margin-left:auto;margin-right:auto;
  min-height:250px;padding:48px 28px 44px}
/* 图标与文字脱节：原 ::before 用 absolute top:32px 定位，文字走 flex 居中，
   260 高时两者相隔 46px。改为流式排列，图标作为第一个 flex 子项。 */
.content .sv-page .msg-empty::before{position:static;transform:none;flex:none;
  margin:0 auto 16px}

/* 列表页里只有一个空态卡时，外层不再画框（避免"框套框"两层虚线） */
.content > .m-card:has(> .m-empty){background:transparent;border:0;box-shadow:none}

/* ============================================================
   S3 · 详情：轨道内收窄阅读区
   用法：页面容器加 .sk-detail，或在轨道内套 .rail-narrow（720）。
   现存量：/agent/company /agent/recharge /agent/apply /m/subscribe
   ============================================================ */
.content .sk-detail{max-width:720px}
.content .sk-detail .ag-tablewrap{overflow-x:auto}

/* ============================================================
   窄屏
   ============================================================ */
@media(max-width:900px){
  .content .ag-kpis,
  .content .ag-kpis.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content .ag-cols{grid-template-columns:1fr}
}