/* ============================================================
   任务进度看板样式(2026-11-03 新增)
   ------------------------------------------------------------
   作用域:全部规则前缀 .tp-page,只影响本页;
          不改 admin.css / ui-refresh.css / mobile-layer.css /
          tablet-layer.css 的既有规则。
   断点:桌面默认;≤1023px 表格容器内横滚;≤767px 统计卡 2 列、
         筛选行可横滑;表格卡片化沿用 mobile-tables.js + mobile-layer.css
         (.tbl.mt-card / data-label),本文件不重复实现。
   ============================================================ */

.tp-page {
  --tp-surface: var(--card, #fff);
  --tp-line: var(--line, #e6f2ed);
  --tp-ink: var(--ink, #163a2d);
  --tp-ink2: var(--ink-2, #497263);
  --tp-ink3: var(--ink-3, #73988a);
  --tp-brand: var(--green, #14A178);
  --tp-brand-soft: var(--green-light, #E7F7F0);
  --tp-blue: #2F6FED;
  --tp-blue-soft: #EAF0FE;
  --tp-green: #0B7552;
  --tp-green-soft: #E7F7F0;
  --tp-orange: #D97706;
  --tp-orange-soft: #FFF3E3;
  --tp-gray: #6B7280;
  --tp-gray-soft: #F1F3F5;
  --tp-shadow: 0 2px 14px rgba(22, 58, 45, .05);
  max-width: 100%;
}

[data-theme="dark"] .tp-page {
  --tp-blue: #8AB0FF;
  --tp-blue-soft: rgba(47, 111, 237, .2);
  --tp-green: #8FE0C4;
  --tp-green-soft: rgba(20, 161, 120, .18);
  --tp-orange: #FBBF24;
  --tp-orange-soft: rgba(245, 158, 11, .16);
  --tp-gray: #9AA8A3;
  --tp-gray-soft: #212D28;
  --tp-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}

.tp-page * { box-sizing: border-box; }

/* ---------- 顶部 5 个统计卡(含“已完成未部署”) ---------- */
.tp-page .tp-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.tp-page .tp-stat {
  background: var(--tp-surface);
  border: 1px solid var(--tp-line);
  border-radius: 14px;
  box-shadow: var(--tp-shadow);
  padding: 14px 16px;
  min-width: 0;
}

.tp-page .tp-stat-lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--tp-ink3);
  letter-spacing: .02em;
  margin-bottom: 6px;
}

.tp-page .tp-stat-num {
  display: block;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--tp-ink);
  font-variant-numeric: tabular-nums;
}

.tp-page .tp-stat.tone-run .tp-stat-num { color: var(--tp-blue); }
.tp-page .tp-stat.tone-done .tp-stat-num { color: var(--tp-green); }
.tp-page .tp-stat.tone-undeployed .tp-stat-num { color: var(--tp-orange); }
.tp-page .tp-stat.tone-pending .tp-stat-num { color: var(--tp-gray); }

/* ---------- 工具条 ---------- */
.tp-page .tp-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--tp-surface);
  border: 1px solid var(--tp-line);
  border-radius: 16px;
  box-shadow: var(--tp-shadow);
  min-width: 0;
}

.tp-page .tp-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.tp-page .tp-chip {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--tp-line);
  border-radius: 99px;
  background: var(--tp-surface);
  color: var(--tp-ink2);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.tp-page .tp-chip:hover { border-color: var(--tp-brand); color: var(--tp-brand); }
.tp-page .tp-chip.on {
  border-color: var(--tp-brand);
  background: var(--tp-brand-soft);
  color: var(--tp-brand);
}
.tp-page .tp-chip.on[data-status="in-progress"] { border-color: var(--tp-blue); background: var(--tp-blue-soft); color: var(--tp-blue); }
.tp-page .tp-chip.on[data-status="done"] { border-color: var(--tp-green); background: var(--tp-green-soft); color: var(--tp-green); }
.tp-page .tp-chip.on[data-status="done-not-deployed"] { border-color: var(--tp-orange); background: var(--tp-orange-soft); color: var(--tp-orange); }
.tp-page .tp-chip.on[data-status="blocked"] { border-color: var(--tp-orange); background: var(--tp-orange-soft); color: var(--tp-orange); }
.tp-page .tp-chip.on[data-status="pending"] { border-color: var(--tp-gray); background: var(--tp-gray-soft); color: var(--tp-gray); }

.tp-page .tp-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tp-page .tp-field-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--tp-ink3);
  white-space: nowrap;
}

.tp-page .tp-select {
  height: 32px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--tp-line);
  border-radius: 9px;
  background: var(--tp-surface);
  color: var(--tp-ink);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  max-width: 100%;
}
.tp-page .tp-select:focus { outline: none; border-color: var(--tp-brand); box-shadow: 0 0 0 3px rgba(20, 161, 120, .16); }

.tp-page .tp-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--tp-line);
  border-radius: 9px;
  background: var(--tp-surface);
}
.tp-page .tp-search:focus-within { border-color: var(--tp-brand); box-shadow: 0 0 0 3px rgba(20, 161, 120, .16); }
.tp-page .tp-search-ico { font-size: 13px; line-height: 1; flex: none; }
.tp-page .tp-search input {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tp-ink);
  font-size: 13px;
  font-family: inherit;
}
.tp-page .tp-search input::placeholder { color: var(--tp-ink3); }

.tp-page .tp-refresh {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--tp-brand);
  border-radius: 9px;
  background: var(--tp-brand);
  color: var(--on-accent, #fff);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease;
}
.tp-page .tp-refresh:hover { background: var(--green-deep, #0B7552); border-color: var(--green-deep, #0B7552); }
.tp-page .tp-refresh:active { transform: translateY(1px); }
.tp-page .tp-refresh:disabled { opacity: .6; cursor: default; transform: none; }
.tp-page .tp-refresh-ico { display: inline-block; margin-right: 2px; }
.tp-page .tp-refresh.is-loading .tp-refresh-ico { animation: tp-spin .9s linear infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }

/* 两个时间:数据文件更新于 / 上次刷新,让用户分清“文件没更新”还是“页面没刷新” */
.tp-page .tp-times {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--tp-ink3);
  line-height: 1.5;
}
.tp-page .tp-time-item { overflow-wrap: anywhere; }
.tp-page .tp-time-item b { color: var(--tp-ink2); font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-page .tp-time-sep { color: var(--tp-line); }

/* 读取失败错误条 + 重试,不再静默保留旧数据 */
.tp-page .tp-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -4px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(230, 71, 61, .35);
  border-radius: 12px;
  background: #FFF6F5;
  color: #B42318;
  font-size: 12px;
  line-height: 1.6;
}
.tp-page .tp-error[hidden] { display: none; }
.tp-page .tp-error-ico { flex: none; }
.tp-page .tp-error-msg { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.tp-page .tp-retry {
  flex: none;
  height: 28px;
  padding: 0 12px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.tp-page .tp-retry:hover { background: rgba(230, 71, 61, .08); }
[data-theme="dark"] .tp-page .tp-error { background: rgba(230, 71, 61, .12); color: #FFB3AD; }

/* ---------- 表格 ---------- */
.tp-page .tp-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--tp-surface);
  border: 1px solid var(--tp-line);
  border-radius: 16px;
  box-shadow: var(--tp-shadow);
}

.tp-page .tp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--tp-ink);
}

@media (min-width: 768px) {
  /* 9 列在窄桌面/平板档不硬挤,容器内横滚,页面不横向溢出 */
  .tp-page .tp-table { min-width: 1040px; }
}

/* ≥1024 桌面:按 colgroup 百分比定宽,整表落在容器内,不出现横向裁切 */
@media (min-width: 1024px) {
  .tp-page .tp-table { min-width: 0; table-layout: fixed; }
}

.tp-page .tp-table th,
.tp-page .tp-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--tp-line);
}

.tp-page .tp-table thead th {
  background: #F6FAF8;
  color: var(--tp-ink3);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .02em;
}

[data-theme="dark"] .tp-page .tp-table thead th { background: #1C2823; }

.tp-page .tp-table tbody tr:last-child td { border-bottom: 0; }
.tp-page .tp-table tbody tr:hover td { background: rgba(20, 161, 120, .045); }
[data-theme="dark"] .tp-page .tp-table tbody tr:hover td { background: rgba(20, 161, 120, .09); }

.tp-page .tp-name { font-weight: 700; color: var(--tp-ink); overflow-wrap: anywhere; }
/* 时间轴列:等宽数字,未知灰显 */
.tp-page .tp-when {
  color: var(--tp-ink2);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tp-page .tp-when-unknown { color: var(--tp-ink3); font-weight: 600; }
.tp-page .tp-endpoint { white-space: nowrap; color: var(--tp-ink2); }
.tp-page .tp-session { color: var(--tp-ink2); }
.tp-page .tp-time { color: var(--tp-ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-page .tp-next { color: var(--tp-ink2); overflow-wrap: anywhere; }

.tp-page .tp-loading {
  padding: 30px 14px !important;
  text-align: center;
  color: var(--tp-ink3);
}

/* ---------- 状态色块 ---------- */
.tp-page .tp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.tp-page .tp-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.tp-page .tp-badge.run { color: var(--tp-blue); background: var(--tp-blue-soft); }
.tp-page .tp-badge.done { color: var(--tp-green); background: var(--tp-green-soft); }
/* 已完成(未部署):橙,与“已完成”明确区分 */
.tp-page .tp-badge.undeployed { color: var(--tp-orange); background: var(--tp-orange-soft); }
.tp-page .tp-badge.blocked { color: var(--tp-orange); background: var(--tp-orange-soft); }
.tp-page .tp-badge.pending { color: var(--tp-gray); background: var(--tp-gray-soft); }

/* ---------- 进度条 ---------- */
.tp-page .tp-prog {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 110px;
}
.tp-page .tp-prog-bar {
  position: relative;
  flex: 1 1 auto;
  min-width: 56px;
  height: 8px;
  border-radius: 99px;
  background: rgba(22, 58, 45, .08);
  overflow: hidden;
}
[data-theme="dark"] .tp-page .tp-prog-bar { background: rgba(255, 255, 255, .12); }
.tp-page .tp-prog-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--tp-gray);
  transition: width .3s ease;
}
.tp-page .tp-prog.run .tp-prog-fill { background: var(--tp-blue); }
.tp-page .tp-prog.done .tp-prog-fill { background: var(--tp-green); }
.tp-page .tp-prog.undeployed .tp-prog-fill { background: var(--tp-orange); }
.tp-page .tp-prog.blocked .tp-prog-fill { background: var(--tp-orange); }
.tp-page .tp-prog.pending .tp-prog-fill { background: var(--tp-gray); }
.tp-page .tp-prog-txt {
  flex: none;
  min-width: 36px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--tp-ink2);
  font-variant-numeric: tabular-nums;
}

/* ---------- 产出列 ---------- */
.tp-page .tp-outputs { min-width: 0; }
.tp-page .tp-outs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}
.tp-page .tp-out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid var(--tp-line);
  border-radius: 8px;
  background: #F8FBF9;
  color: var(--tp-ink2);
  font-size: 12px;
  font-family: inherit;
  line-height: 1.55;
  text-align: left;
  text-decoration: none;
  cursor: default;
}
[data-theme="dark"] .tp-page .tp-out { background: #1B2722; }
.tp-page .tp-out-name {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tp-page .tp-out-tag {
  flex: none;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--tp-ink3);
  background: rgba(22, 58, 45, .06);
}
[data-theme="dark"] .tp-page .tp-out-tag { background: rgba(255, 255, 255, .08); }

.tp-page .tp-out-page { cursor: pointer; border-color: rgba(20, 161, 120, .35); color: var(--tp-brand); }
.tp-page .tp-out-page:hover { background: var(--tp-brand-soft); }
.tp-page .tp-out-page .tp-out-tag { color: var(--tp-brand); background: var(--tp-brand-soft); }
.tp-page .tp-out-url { cursor: pointer; border-color: rgba(47, 111, 237, .4); color: var(--tp-blue); }
.tp-page .tp-out-url:hover { background: var(--tp-blue-soft); }
.tp-page .tp-out-url .tp-out-tag { color: var(--tp-blue); background: var(--tp-blue-soft); }

.tp-page .tp-out-file { cursor: pointer; }
.tp-page .tp-out-file:hover { border-color: var(--tp-brand); background: var(--tp-brand-soft); }
/* 服务器路径:不可点击、无「复制路径」,只标来源,避免用户复制到本地打不开 */
.tp-page .tp-out-server {
  cursor: default;
  border-style: dashed;
  color: var(--tp-ink2);
  background: rgba(0, 0, 0, .02);
}
.tp-page .tp-out-server .tp-out-tag { color: var(--tp-ink3); background: rgba(0, 0, 0, .06); }
[data-theme="dark"] .tp-page .tp-out-server { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .tp-page .tp-out-server .tp-out-tag { color: var(--tp-ink2); background: rgba(255, 255, 255, .08); }
.tp-page .tp-out-act { flex: none; font-size: 11px; font-weight: 700; color: var(--tp-brand); white-space: nowrap; }

.tp-page .tp-out-pending { border-style: dashed; color: var(--tp-gray); background: var(--tp-gray-soft); cursor: default; }
.tp-page .tp-out-pending .tp-out-tag { color: var(--tp-gray); background: transparent; }
.tp-page .tp-noout { color: var(--tp-ink3); }

/* ---------- 空状态 / 底部说明 ---------- */
.tp-page .tp-empty {
  padding: 40px 16px;
  text-align: center;
  background: var(--tp-surface);
  border: 1px solid var(--tp-line);
  border-radius: 16px;
  box-shadow: var(--tp-shadow);
}
.tp-page .tp-empty-ico { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.tp-page .tp-empty-title { font-size: 15px; font-weight: 700; color: var(--tp-ink); margin-bottom: 6px; }
.tp-page .tp-empty-desc { font-size: 13px; color: var(--tp-ink3); line-height: 1.7; overflow-wrap: anywhere; }

.tp-page .tp-foot {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed var(--tp-line);
  border-radius: 12px;
  background: var(--tp-surface);
  color: var(--tp-ink3);
  font-size: 12px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.tp-page .tp-foot b { color: var(--tp-ink2); }

/* ---------- 手机端 ≤767px ---------- */
@media (max-width: 767px) {
  .tp-page .tp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .tp-page .tp-stat { padding: 12px 14px; }
  .tp-page .tp-stat-num { font-size: 23px; }

  .tp-page .tp-toolbar {
    padding: 12px;
    gap: 10px;
  }
  .tp-page .tp-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    padding-bottom: 2px;
  }
  .tp-page .tp-chip { flex: none; height: 34px; }
  .tp-page .tp-field { flex: 1 1 auto; }
  .tp-page .tp-search { flex: 1 1 100%; height: 38px; }
  .tp-page .tp-refresh { flex: 1 1 auto; height: 38px; }
  .tp-page .tp-times { flex: 1 1 100%; }
  .tp-page .tp-error { flex-wrap: wrap; }
  .tp-page .tp-retry { margin-left: 24px; }
  .tp-page .tp-table-wrap { border-radius: 14px; }

  /* 卡片流里的产出区:整行纵向排列,路径/文件名可换行,不横向溢出 */
  .tp-page .tp-outputs { max-width: 100%; }
  .tp-page .tp-outs { width: 100%; }
  .tp-page .tp-out { width: 100%; display: flex; }
  .tp-page .tp-out-name { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-page .tp-prog-fill,
  .tp-page .tp-chip,
  .tp-page .tp-refresh { transition: none; }
  .tp-page .tp-refresh.is-loading .tp-refresh-ico { animation: none; }
}