/* ============================================================
 * 分隔条 + 结算区网格列宽（独立 CSS + ?v=24 cache-bust）
 * 独立文件目的：避免 EdgeOne Pages 对 index.html 的内联 CSS
 * 持久缓存导致 hover 修复不生效；此文件走 ?v=N 直接从源站
 * 拉取新版本，覆盖任何缓存中的旧内联样式。
 * ============================================================ */

/* 结算区：左 A(结回费用·蓝) / 右 B(结出费用·红)，左右两列等宽自适应 */
/* 历史：原为 1fr 12px 1fr（中间 12px 给可拖拽分隔条），但 HTML 端未渲染分隔条 div，
 * 导致右列被空死列挤到 12px 出现"竖排红条"。2026-08-31 改为真正的两列等分。 */
.settle-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch;min-width:0}
.settle-grid .settle-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.settle-grid .settle-group{margin-bottom:0}

/* 中间可拖拽分隔条
 * - 默认：6% 品牌色淡底（隐约可见，提示此处可拖拽）+ 居中 3px 灰色细线
 * - hover：整条变品牌浅色 (--brand-l) + 细线变品牌色 + 加粗到 4px + 光标 ↔
 * - 拖拽中：同 hover 状态 + 加 .dragging 类
 */
.settle-splitter{
  width:12px;
  cursor:col-resize;
  background:rgba(13,148,136,.06);
  position:relative;
  border-radius:4px;
  transition:background .15s;
  user-select:none;
  touch-action:none;
  flex:0 0 12px;
  z-index:2;
}
.settle-splitter::after{
  content:'';
  position:absolute;
  left:50%;
  top:14%;
  bottom:14%;
  width:3px;
  transform:translateX(-50%);
  background:var(--line);
  border-radius:2px;
  transition:background .15s, width .15s;
}
.settle-splitter:hover{background:var(--brand-l)}
.settle-splitter:hover::after,
.settle-splitter.dragging::after{background:var(--brand);width:4px}
.settle-splitter.dragging{background:var(--brand-l)}

@media (max-width:1280px){
  .settle-splitter{display:none}
}

/* ============================================================
 * 待办分布图（chartTodo 改造）— HTML+CSS Grid 替代纯 SVG
 * 解决：标签截断 / 图例与末行重叠 / 类型-色块无关联 / 空状态弱
 * 视觉系统：类型色圆点 + 完整标签 + 堆叠条 + 总数+逾期角标
 * ============================================================ */
.tdc{display:flex;flex-direction:column;gap:12px;padding:4px 2px 2px}
.tdc-row{
  display:grid;
  grid-template-columns:minmax(112px,136px) 1fr 60px;
  align-items:center;
  gap:12px;
  font-size:12.5px;
}
.tdc-lab{
  display:flex;align-items:center;gap:8px;
  font-weight:600;color:#16292c;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tdc-lab .dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 9px;
  box-shadow:0 0 0 2px rgba(255,255,255,.65);
}
.tdc-lab .dot.c-work_f{background:#2563eb}
.tdc-lab .dot.c-work_z{background:#0ea5e9}
.tdc-lab .dot.c-xiehui{background:#7c3aed}
.tdc-lab .dot.c-private{background:#ea580c}
.tdc-bar{
  height:22px;background:#eef4f4;border-radius:11px;
  display:flex;overflow:hidden;position:relative;min-width:0;
}
.tdc-bar .seg{
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:11.5px;font-weight:700;
  min-width:0;padding:0 6px;white-space:nowrap;overflow:hidden;
  transition:filter .15s ease;
}
.tdc-bar .seg:hover{filter:brightness(1.08)}
.tdc-bar .seg.dn{background:linear-gradient(180deg,#14b8a6,#0d9488)}
.tdc-bar .seg.od{background:linear-gradient(180deg,#ef4444,#dc2626)}
.tdc-bar .seg.td{background:rgba(99,102,241,.18);color:#16292c}
.tdc-bar.empty{
  background:transparent;border:1.5px dashed #cfd9d9;
}
.tdc-meta{
  text-align:right;font-size:11.5px;color:#8ba3a6;
  display:flex;align-items:center;justify-content:flex-end;gap:4px;
}
.tdc-meta b{
  font-size:15px;color:#16292c;font-weight:700;
  font-feature-settings:'tnum' 1;
}
.tdc-meta .warn{
  color:#dc2626;font-weight:600;font-size:11px;
  padding:1px 5px;background:rgba(220,38,38,.08);border-radius:6px;
}
.tdc-legend{
  display:flex;gap:16px;padding-top:11px;margin-top:2px;
  border-top:1px solid #eef4f4;
  font-size:11.5px;color:#8ba3a6;
}
.tdc-legend .lg{display:flex;align-items:center;gap:6px}
.tdc-legend .lg .sw{
  width:11px;height:11px;border-radius:3px;flex:0 0 11px;
}