/* ==================================================================
 * 每日工作流稽查台（#/workflow）· 页面私有样式
 * ------------------------------------------------------------------
 * 为什么单独一个文件：`public/css/app.css` 是全站设计系统的**唯一一份样式真相**
 * （里面的类名与令牌被界面套件逐条钉住），所以这个新页面的样式不往里加，
 * 而是单独一份、只作用于 `.wf-*` 前缀的节点 —— 既不影响别的页面，也不会让
 * 既有断言变红。颜色 / 字号 / 间距一律取 `:root` 里的令牌（跟 app.css 同一套）。
 *
 * 视觉上的一个硬要求：**逾期必须"跳出来"** —— 逾期数字用危险色 + 实心徽标、
 * 逾期清单整条描红边，扫一眼就能看出"今天谁掉队了"，而不是靠读者去比数字大小。
 * ================================================================== */

/* ---------------- 页头工具行 ---------------- */
.wf-page { display: block; }
.wf-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.wf-bar-label { font-size: var(--fs-xs); color: var(--text-sub); white-space: nowrap; }
.wf-bar .input { height: 34px; }
.wf-bar-grow { flex: 1 1 auto; min-width: 8px; }
.wf-bar-note { font-size: var(--fs-xs); color: var(--text-mute); }

/* 域守卫（非运营账号）：一句人话 + 不要让人以为页面坏了 */
.wf-guard { max-width: 620px; margin: 40px auto; }
.wf-guard-title { font-size: var(--fs-xl); font-weight: 650; margin: 0 0 var(--sp-4); }

/* ---------------- 第一屏：汇总卡 ---------------- */
.wf-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.wf-sum {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-5); box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.wf-sum::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--wf-accent, var(--border-strong)); }
.wf-sum-label { font-size: var(--fs-xs); color: var(--text-sub); display: flex; align-items: center; gap: 6px; }
.wf-sum-value { font-size: var(--fs-3xl); font-weight: 650; line-height: 1.25; margin-top: 4px; color: var(--wf-accent, var(--text)); }
.wf-sum-value small { font-size: var(--fs-sm); font-weight: 400; color: var(--text-mute); margin-left: 3px; }
.wf-sum-hint { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 2px; }
.wf-sum.is-total { --wf-accent: var(--primary); }
.wf-sum.is-done { --wf-accent: var(--success); }
.wf-sum.is-late { --wf-accent: var(--danger); }
.wf-sum.is-pending { --wf-accent: var(--warning); }
.wf-sum.is-progress { --wf-accent: var(--purple); }

.wf-progress-card {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-5); margin-bottom: var(--sp-5); box-shadow: var(--shadow-sm);
}
.wf-progress-main { flex: 1 1 320px; min-width: 240px; }
.wf-progress-title { font-size: var(--fs-sm); color: var(--text-sub); margin-bottom: 6px; }
.wf-progress-num { font-size: var(--fs-xl); font-weight: 650; }
.wf-progress-side { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* ---------------- 第二屏：逐店稽查 ---------------- */
.wf-hotel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: var(--sp-3); overflow: hidden; box-shadow: var(--shadow-sm);
}
.wf-hotel.is-late { border-color: #F0C2B8; }
.wf-hotel.is-empty { border-style: dashed; }
.wf-hotel-head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); cursor: pointer;
}
.wf-hotel-head:hover { background: var(--bg-soft); }
.wf-caret { color: var(--text-mute); font-size: var(--fs-xs); width: 14px; flex: none; }
.wf-hotel-name { font-weight: 650; font-size: var(--fs-lg); }
.wf-hotel-city { font-size: var(--fs-xs); color: var(--text-mute); }
.wf-hotel-progress { flex: 1 1 220px; min-width: 160px; }
.wf-hotel-counts { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.wf-count { font-size: var(--fs-xs); color: var(--text-sub); white-space: nowrap; }
.wf-count b { font-size: var(--fs-sm); }
.wf-count.is-done b { color: var(--success-ink); }
.wf-count.is-late b { color: var(--danger-ink); }
.wf-count.is-pending b { color: var(--warning-ink); }
.wf-count.is-skipped b { color: var(--text-mute); }

.wf-hotel-body { border-top: 1px dashed var(--border); padding: var(--sp-4) var(--sp-5) var(--sp-5); background: var(--bg-soft); }
.wf-run { margin-bottom: var(--sp-5); }
.wf-run:last-child { margin-bottom: 0; }
.wf-run-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.wf-run-title { font-weight: 600; font-size: var(--fs-sm); }
.wf-run-meta { font-size: var(--fs-xs); color: var(--text-mute); }

/* 节点明细：一行一个节点，左侧一条状态色带 */
.wf-node {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: var(--sp-3);
  align-items: start; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: var(--sp-2);
}
.wf-node-band { align-self: stretch; border-radius: var(--radius-pill); background: var(--border-strong); }
.wf-node.st-pending .wf-node-band { background: var(--warning); }
.wf-node.st-done .wf-node-band { background: var(--success); }
.wf-node.st-skipped .wf-node-band { background: var(--text-mute); }
.wf-node.st-late { border-color: #EEB4A6; background: #FFF8F6; }
.wf-node.st-late .wf-node-band { background: var(--danger); box-shadow: 0 0 0 3px rgba(217, 80, 63, .18); }
.wf-node-main { min-width: 0; }
.wf-node-title { font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wf-node-desc { font-size: var(--fs-xs); color: var(--text-sub); margin-top: 2px; }
.wf-node-meta { font-size: var(--fs-xs); color: var(--text-mute); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.wf-node-note { font-size: var(--fs-xs); color: var(--text-sub); margin-top: 4px; background: var(--bg-soft); border-radius: var(--radius-xs); padding: 5px 8px; }
.wf-node-note.is-review { background: var(--purple-soft); color: var(--purple-ink); }
.wf-node-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }

/* ---------------- 第三屏：逾期清单 + 责任人 ---------------- */
.wf-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-4); }
.wf-late-item {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  border: 1px solid #EEB4A6; border-left: 4px solid var(--danger); border-radius: var(--radius-sm);
  background: #FFF8F6; padding: 9px 12px; margin-bottom: var(--sp-2);
}
.wf-late-item.lv-high { border-left-color: var(--danger); background: #FFF4F1; }
.wf-late-item .t { font-size: var(--fs-sm); font-weight: 600; }
.wf-late-item .who { font-size: var(--fs-xs); color: var(--text-sub); }
.wf-late-item .due { font-size: var(--fs-xs); color: var(--danger-ink); font-weight: 600; margin-left: auto; }
.wf-late-scroll { max-height: 460px; overflow-y: auto; margin-right: -6px; padding-right: 6px; }

.wf-owner { display: flex; align-items: center; gap: var(--sp-3); padding: 9px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.wf-owner:last-child { border-bottom: none; }
.wf-owner-name { font-size: var(--fs-sm); font-weight: 600; min-width: 84px; }
.wf-owner-track { flex: 1 1 140px; height: 10px; background: var(--track); border-radius: var(--radius-pill); overflow: hidden; display: flex; min-width: 90px; }
.wf-owner-track > i { display: block; height: 100%; }
.wf-owner-track > i.done { background: var(--success); }
.wf-owner-track > i.late { background: var(--danger); }
.wf-owner-track > i.pending { background: var(--warning); }
.wf-owner-legend { font-size: var(--fs-xs); color: var(--text-sub); white-space: nowrap; }

/* ---------------- 第四屏：近 7 天趋势 ---------------- */
.wf-trend-kpis { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.wf-trend-kpi { font-size: var(--fs-xs); color: var(--text-sub); }
.wf-trend-kpi b { display: block; font-size: var(--fs-xl); color: var(--text); }

/* ---------------- 提示 / 错误 ---------------- */
.wf-hint { font-size: var(--fs-xs); color: var(--text-mute); margin-top: var(--sp-2); }
.wf-err-title { font-weight: 650; margin-bottom: 4px; }
.wf-err-detail { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-mute); word-break: break-all; margin-top: 6px; }
.wf-inline-err { margin-bottom: var(--sp-3); }

/* ---------------- 窄屏 ---------------- */
@media (max-width: 1200px) {
  .wf-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wf-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .wf-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-node { grid-template-columns: 4px minmax(0, 1fr); }
  .wf-node-actions { grid-column: 2; justify-content: flex-start; }
  .wf-hotel-head { align-items: flex-start; }
}