/* 成本模块样式
 * 设计稿：设计稿/工作台-20260929/05-桌面-成本看板.png
 *
 * 两条纪律（与 report.css 同一套取值，不另起一套视觉）：
 *   1. 颜色 / 圆角 / 字号统一走 app.css 的变量与既有阶梯，不在这里发明新档位。
 *   2. **只有一种图形：横向条**（.cs-hbar）。BU 分布、成本构成、月度趋势全用它 ——
 *      同一个「比大小」场景出现两种画法，看的人就得学两遍。
 */

/* ⚠️ 2026-10-17：本页原有 `max-width: 1240px` 已删除 —— 宽度上界统一由
   `app.css` 的 `--page-max`（1440）接管。页面级封顶会让「切页跳宽」
   （成本 1240 → 人员 1632，跳 392px），🔴 不要再加回来。 */

/* ---------------- 工具条 ---------------- */

.cs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cs-bar-l, .cs-bar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-lab { font-size: var(--fs-sm); color: var(--text-3); }

.cs-select, .cs-input {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
  font-family: inherit;
}
.cs-select { cursor: pointer; }
.cs-select:focus, .cs-input:focus { border-color: var(--brand); }
.cs-input { min-width: 180px; font-weight: 400; }

/* 二级页 tab 与工具条之间的间距（.tabs 本体在 app.css） */
.cs-tabs { margin-bottom: 12px; }

.cs-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: var(--fs-base);
  color: var(--text-2);
  cursor: pointer;
}

/* ---------------- 横向条（全页唯一图形） ---------------- */

.cs-hbars { display: flex; flex-direction: column; gap: 10px; }

.cs-hbar {
  display: grid;
  grid-template-columns: minmax(92px, 148px) 1fr minmax(120px, auto);
  align-items: center;
  gap: 10px;
}

.cs-hbar-lab {
  font-size: var(--fs-base);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-hbar-track {
  height: 10px;
  border-radius: var(--r-sm);
  background: var(--line-2);
  overflow: hidden;
}

.cs-hbar-fill {
  height: 100%;
  border-radius: var(--r-sm);
  background: var(--chart-fill);
}

/* 第一条（最大项）用品牌色，其余浅蓝 —— 一眼看出「谁最大」 */
.cs-hbar:first-child .cs-hbar-fill { background: var(--brand); }

.cs-hbar-val {
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}

/* ---------------- 表格 ---------------- */

/* P1-2 收口（2026-10-18）：宽表横滚由 `.ui-tablewrap` 承担（wrapClass 追加在同一个 div 上）、
   整表 nowrap 由 `table({nowrap:true})` 的 `is-nowrap` 承担、合计行由 `tfoot` 公共规则承担
   ⇒ 旧表壳样式全删。`.th.r/.td.r` 的对齐已改 `align:"right"`（is-num），类名不再出现。
   只留「快照外」小标的贴紧间距 —— 公共层没有对应能力。 */
.cs-table td .tag { margin-left: 6px; }

.cs-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* ---------------- 杂项 ---------------- */

.cs-dim { color: var(--text-3); }

/* 5 张 KPI 卡：app.css 的 .stats 固定 4 列，这里覆盖成 5 列（窄屏再退 3 / 2 列）。
 * ⚠️ 只在成本页生效，不动公共的 .stats —— 别的页面仍是 4 列。 */
.cs-kpi { grid-template-columns: repeat(5, 1fr); }

/* 成本构成卡里「分项之和 ≠ 总成本」的小额差额提示（源表少数行未填合计列）。
 * 是**数据状态**提示，不是口径说明 —— 口径仍归 #/system/glossary。 */
.cs-gap {
  margin-top: 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--warn);
  background: #FFFCF5;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.6;
}

.cs-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
.cs-sub { font-size: var(--fs-sm); color: var(--text-3); padding-bottom: 6px; }

/* 构成图里被折叠的 0 值项说明（中性小字，不是警告 —— 用 .cs-gap 会显得像出错了） */
.cs-zero-note { margin-top: 10px; font-size: var(--fs-sm); color: var(--text-3); }

/* 「数据范围」提示（如：已排除灵活用工 3 条）——
   中性小字：它解释的是**数字的范围**，不是「出错了」，别用警告色 */
.cs-scope { margin: 10px 2px 0; font-size: var(--fs-sm); color: var(--text-3); }

/* ---------------- 轻提示 ---------------- */


/* ---------------- 手机端 ---------------- */

/* 5 张 KPI 卡在中等宽度先退回 3 列（5 列每列约 200px 时数字会被挤换行） */
@media (max-width: 1100px) {
  .cs-kpi { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  /* 横向条在窄屏把「数值」挤到第二行：标签 + 条一行，数值右对齐下一行 */
  .cs-hbar {
    grid-template-columns: minmax(72px, 108px) 1fr;
    row-gap: 2px;
  }
  .cs-hbar-val { grid-column: 2; text-align: right; }
  .cs-kpi { grid-template-columns: repeat(2, 1fr); }
  .cs-2col { grid-template-columns: 1fr; }
  .cs-input { min-width: 0; flex: 1; }
}