/* ============================================================
   任务完成情况面板（C2.140）
   ------------------------------------------------------------
   只读：一次看一个看板任务，范围内每个账号走到哪一站。
   上面汇总条（七档计数，点击即筛），中间筛选，下面一行一个账号。
   颜色只走 token；状态色沿用矩阵六色（done=绿 / run=琥珀 / no=红 / 其余灰）。
   ============================================================ */

.tp{display:flex;flex-direction:column;gap:10px}
.tp-sum{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tp-total{font-size:12px;color:var(--txt2);padding:2px 9px;border-radius:999px;background:var(--soft);
  border:1px solid var(--line)}
.tp-total b{font-variant-numeric:tabular-nums}
.tp-total.is-ok{color:var(--green);background:var(--green-d);border-color:var(--line-green)}

/* 汇总条上的计数：点一下按这一档筛，再点取消 */
.tp-chip{font:inherit;font-size:12px;cursor:pointer;padding:2px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--txt2);white-space:nowrap}
.tp-chip b{font-variant-numeric:tabular-nums;margin-left:2px}
.tp-chip:hover:not(:disabled){border-color:var(--line3)}
.tp-chip:disabled{opacity:.45;cursor:default}
.tp-chip.on{box-shadow:inset 0 0 0 1px currentColor}
.tp-chip.is-ok{color:var(--green);border-color:var(--line-green);background:var(--green-d)}
.tp-chip.is-run{color:var(--amber);border-color:var(--line-amber);background:var(--amber-d)}
.tp-chip.is-pend{color:var(--blue);border-color:var(--line-blue);background:var(--blue-d)}
.tp-chip.is-no{color:var(--red);border-color:var(--line-red);background:var(--red-d)}

.tp-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 弹窗里的 input/select 默认 width:100%（全局样式），这里必须收回固有宽度，
   否则每加一个筛选就多占一整行，四个控件把面板顶得很长 */
.tp-filters input,.tp-filters select{width:auto;min-width:132px;max-width:190px;flex:0 0 auto;height:30px;font-size:12.5px}
.tp-toggle{font:inherit;font-size:12px;cursor:pointer;padding:4px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--txt2)}
.tp-toggle.on{color:var(--blue);border-color:var(--line-blue);background:var(--blue-d);font-weight:600}

/* 列表不自己滚：交给 .modal-b（本来就有 72vh 上限）。
   自己滚会把最后一行切成半截贴在页脚上，看着像渲染坏了。 */
.tp-list{display:flex;flex-direction:column;
  border:1px solid var(--line-soft);border-radius:10px;overflow:hidden}
/* 列：账号 / 归属 / 归属设备 / 状态 / 进度 / 关键时间 /（佣金）/ 备注
   C2.143 去掉行尾「看任务条」后，备注吃满剩下的宽度——原来它被按钮列挤在中间，
   备注稍长就折成两行，右侧却空着 76px。
   C2.195 加「归属设备」：运营对号认的是机器（pool_01 / tt_ca04），列宽给 84px，
   设备号比这长就省略号 + 悬浮全称，不折行（折了整行高度会参差）。 */
.tp-row{display:grid;grid-template-columns:112px minmax(84px,1fr) 84px 72px 76px 92px minmax(0,1.6fr);
  gap:8px;align-items:center;padding:7px 10px;font-size:12.5px;border-bottom:1px solid var(--line-soft)}
/* 管理员多一列佣金：宽度只给这一列加，不改两端的对齐 */
.tp-row.has-money{grid-template-columns:108px minmax(78px,1fr) 80px 68px 72px 88px 74px minmax(0,1.5fr)}
.tp-head{position:sticky;top:0;z-index:1;background:var(--panel2);color:var(--txt3);font-size:11px;
  border-bottom:1px solid var(--line)}
.tp-head:hover{background:var(--panel2)}
.tp-money{font-size:12px;color:var(--txt2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tp-row:last-child{border-bottom:0}
.tp-row:hover{background:var(--soft2)}
.tp-h{font-size:12px;color:var(--txt2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-owner{color:var(--txt2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 设备号是纯标识（pool_01 / tt_ca04 / 机型），用等宽字且不折行：折了行高参差，扫一列就对不齐 */
.tp-dev{font-size:11.5px;color:var(--txt3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tp-pt{font-style:normal;font-size:10.5px;margin-left:5px;padding:0 5px;border-radius:999px;
  color:var(--amber);background:var(--amber-d);border:1px solid var(--line-amber)}
.tp-stage{font-size:12px;font-weight:600}
.tp-stage.is-ok{color:var(--green)}
.tp-stage.is-run{color:var(--amber)}
.tp-stage.is-pend{color:var(--blue)}
.tp-stage.is-no{color:var(--red)}
.tp-stage.is-mute{color:var(--txt3)}
.tp-prog,.tp-time{font-size:12px;color:var(--txt2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tp-note{font-size:11.5px;color:var(--txt3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-foot{display:flex;align-items:center;gap:8px}

/* 窄屏：折成两列、按「账号 / 归属 / 进度 / 备注」四行铺开，别让列把内容挤没 */
@media(max-width:720px){
  .tp-row{grid-template-columns:1fr auto;gap:2px 8px;padding:8px 10px}
  .tp-h{grid-column:1}
  .tp-stage{grid-column:2;text-align:right}
  .tp-owner{grid-column:1}
  .tp-dev{grid-column:2;text-align:right}
  .tp-owner,.tp-dev,.tp-prog,.tp-time,.tp-note{font-size:11.5px}
  .tp-prog{grid-column:1}
  .tp-time{grid-column:2;text-align:right}
  .tp-note{grid-column:1 / -1;text-align:left}
  .tp-row [data-bar]{grid-column:1 / -1;justify-self:start;margin-top:2px}
}

/* 卡片上那颗「@11 个账号 · 完成 4」（C2.140）：看着像标签，其实是入口 */
.bd-prog{font:inherit;font-size:11.5px;cursor:pointer;padding:0 7px;line-height:18px;border-radius:999px;
  color:var(--green);background:var(--green-d);border:1px solid var(--line-green);white-space:nowrap}
.bd-prog:hover{border-color:var(--green);text-decoration:underline}
.bd-prog:focus-visible{outline:2px solid var(--green);outline-offset:1px}