/* ============================================================
   全站统一「内容区美化」work-content.css
   ------------------------------------------------------------
   适用：律所端 / 推广员端（dk-*）· 协作端（cb-*）· 会员端（m-*）
   只改中间的表格与卡片，头尾不动（头尾见 work-frame.css）。

   规则来源（国内外法律科技行业共识）：
     ① 数字右对齐 + 等宽数字      —— 后台表格规范：文字左对齐、数据右对齐
                                     GLAW 设计系统：IBM Plex Mono for numbers
     ② 长文本截断 + hover 可见    —— 表格规范：超出宽度用省略号，悬浮看全部
     ③ 表格瘦身                  —— 列间去竖线、去斑马线、用留白与层级
     ④ 状态徽章淡底              —— 状态永远「文字 + 色」双编码，不用实心块
     ⑤ 卡片等高 + 数字层级        —— 动态卡片组件：指标卡突出数字、说明退次级
     ⑥ 行高与留白                —— 间距基数 4px，密度紧凑但透气

   实现：同一套规则写三遍前缀（dk / cb / m），共用 :root 全站 token。
   ============================================================ */

/* ============================================================
   规则 ① 数字右对齐 + 等宽数字
   ============================================================ */
.dk-table td.r, .cb-table td.r, .m-table td.r,
.dk-table th.r, .cb-table th.r, .m-table th.r{
  text-align:right !important;
}
/* 所有数字用等宽数字，避免列内跳动 */
.dk-table td, .cb-table td, .m-table td,
.dk-stat .n, .cb-stat .n, .m-stat .n,
.dk-row-r b, .cb-item-m .money, .m-row-end b{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
/* 金额类：加粗 + 等宽数字，但不做主色强调。
   理由（行业调研）：统计卡是「当前可用/总额」这类决策指标，用主色；
   列表里的金额是逐条记录里的普通数值，用主色会和统计卡撞层级、
   一屏几十条橙色反而看不清。列表金额用墨色加粗即可。 */
.dk-row-r b, .cb-item-m .money{
  font-size:14.5px !important;
  font-weight:700 !important;
  letter-spacing:-.2px;
  color:var(--ink) !important;
  font-variant-numeric:tabular-nums;
}
/* 金额旁的说明文字 / 状态退为次级中性色
   注意：.dk-row-r 里的 .dk-row-s 装的是「待受理 · 进行中」这类状态，
   不能跟着金额一起变橙 —— 金额是主体，状态是辅助信息。 */
.dk-row-r .dk-row-s,
.dk-row-r > span,
.cb-item-m span,
.cb-item-m .cb-item-s{
  font-size:11.5px !important;
  color:var(--g2) !important;
  font-weight:400 !important;
  margin-top:3px !important;
}

/* ============================================================
   规则 ② 长文本截断（表格里的长领域列等）
   ============================================================ */
/* 长文本截断：不能用 display:-webkit-box（会破坏 <td> 的表格布局，
   实测导致整表散架）。改用 max-width + overflow + text-overflow 单行省略，
   这是表格规范推荐的做法。 */
.dk-table td, .cb-table td, .m-table td{
  max-width:340px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 首列（姓名/标题）不截断 */
.dk-table td:first-child, .cb-table td:first-child, .m-table td:first-child{
  max-width:none;
  white-space:normal;
}
/* 第一列主标识加粗 */
.dk-table td:first-child b, .cb-table td:first-child b, .m-table td:first-child b{
  font-weight:600;
  color:var(--ink);
}

/* ============================================================
   规则 ③ 表格瘦身：去竖线、去斑马线、表头区分
   ============================================================ */
.dk-table, .cb-table, .m-table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}
.dk-table th, .cb-table th, .m-table th{
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--g1) !important;
  background:var(--side) !important;
  padding:9px 12px !important;
  border-bottom:1px solid var(--line) !important;
  white-space:nowrap;
}
.dk-table td, .cb-table td, .m-table td{
  padding:11px 12px !important;
  border-bottom:1px solid var(--line-2) !important;
  vertical-align:top;
  font-size:13px;
  color:var(--ink-2);
  line-height:1.65;
}
/* 去掉列之间的竖分隔线（靠留白建立层级） */
.dk-table td, .cb-table td, .m-table td{
  border-right:none !important;
}
/* 行悬浮：淡底，不用斑马线 */
.dk-table tbody tr:hover td, .cb-table tbody tr:hover td, .m-table tbody tr:hover td{
  background:var(--side);
}
/* 表体最后一列不额外加底边框 */
.dk-table tbody tr:last-child td, .cb-table tbody tr:last-child td, .m-table tbody tr:last-child td{
  border-bottom:none !important;
}

/* ============================================================
   规则 ④ 状态徽章淡底（不用实心块）
   ============================================================ */
.dk-tag, .cb-tag, .m-tag{
  font-size:11px !important;
  font-weight:500 !important;
  padding:2px 9px !important;
  border-radius:var(--r-pill) !important;
  border:1px solid transparent;
  background:var(--side) !important;
  color:var(--g1) !important;
  line-height:1.65;
}
/* 语义色：淡底 + 深字（文字本身即双编码，不依赖颜色单独传达） */
.dk-tag.ok, .cb-tag.ok, .m-tag.ok{
  background:color-mix(in srgb, var(--green) 11%, transparent) !important;
  color:var(--green) !important;
  border-color:color-mix(in srgb, var(--green) 22%, transparent);
}
.dk-tag.warn, .cb-tag.warn, .m-tag.warn{
  background:color-mix(in srgb, var(--amber) 13%, transparent) !important;
  color:var(--amber) !important;
  border-color:color-mix(in srgb, var(--amber) 24%, transparent);
}
.dk-tag.bad, .cb-tag.bad, .m-tag.bad{
  background:color-mix(in srgb, var(--red) 10%, transparent) !important;
  color:var(--red) !important;
  border-color:color-mix(in srgb, var(--red) 22%, transparent);
}
.dk-tag.pri, .cb-tag.pri, .m-tag.pri{
  background:var(--orange-50) !important;
  color:var(--orange-d) !important;
  border-color:var(--orange-200);
}
/* dim 变体：中性灰 */
.dk-tag.dim, .cb-tag.dim, .m-tag.dim{
  background:var(--side) !important;
  color:var(--g2) !important;
  border-color:var(--line);
}

/* ============================================================
   规则 ⑤ 卡片等高 + 数字层级
   ============================================================ */
.dk-stats, .cb-stats, .m-stats{
  align-items:stretch !important;
}
.dk-stats > *, .cb-stats > *, .m-stats > *{
  height:100%;
}
/* 统计卡：数字放大加粗，说明退次级 */
.dk-stat .n, .cb-stat .n, .m-stat .n{
  font-size:26px !important;
  font-weight:700 !important;
  letter-spacing:-.8px !important;
  line-height:1.2 !important;
  color:var(--ink) !important;
}
.dk-stat .t, .cb-stat .t, .m-stat .t{
  font-size:12px !important;
  color:var(--g2) !important;
  margin-top:5px !important;
  font-weight:400 !important;
}
/* 统计卡内小单位不跟着放大 */
.dk-stat .n small, .cb-stat .n small, .m-stat .n small{
  font-size:13px !important;
  font-weight:400 !important;
  color:var(--g2) !important;
  letter-spacing:0 !important;
}
/* 卡片内边距与圆角统一 */
.dk-card-b, .cb-card-b, .m-card-b{
  padding:16px 18px !important;
}

/* ============================================================
   规则 ⑥ 行高与留白
   ============================================================ */
/* 行式条目：行高与内边距统一 */
.dk-row, .cb-item, .m-row{
  padding:13px 0 !important;
  min-height:52px;
}
.dk-row-main, .cb-item-m, .m-row-main{ min-width:0; }
.dk-row-t, .cb-item-t, .m-row-t{
  font-size:13.5px !important;
  font-weight:500 !important;
  color:var(--ink) !important;
  line-height:1.5;
}
.dk-row-s, .cb-item-s, .m-row-s{
  font-size:12px !important;
  color:var(--g2) !important;
  margin-top:3px !important;
  line-height:1.6;
}
/* 条目之间的分隔线：实线（连续列表感） */
.dk-rows > * + *, .cb-list > * + *, .m-rows > * + *{
  border-top:1px solid var(--line-2);
}
/* 分隔线下的条目要补上上边距 */
.dk-rows > * + * > .dk-row:first-child,
.cb-list > * + * > .cb-item:first-child,
.m-rows > * + * > .m-row:first-child{
  padding-top:13px !important;
}

/* ============================================================
   空态：限宽居中（与会员端统一）
   ============================================================ */
.dk-empty, .cb-empty, .m-empty{
  max-width:520px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
}

/* ============================================================
   表格容器：窄屏可横向滚动（保留首列）
   ============================================================ */
.dk-tablewrap, .cb-tablewrap, .m-tablewrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.dk-table, .cb-table, .m-table{
  min-width:100%;
}