/* 报告寄出工作台。独立放在样式链最后，避免旧壳规则覆盖。
   2026-09-23 改版要点：
   ① 「顶栏 hero」与「概览三卡」已合并进面板头 —— 两者都在重复页面标题；且三张概览卡形似可点按钮却无响应，容易让人误点。
   ② 计数并入筛选项，筛选器成为本页**唯一**的可点分段控件，并居中。
   ③ 筛选器为液态玻璃样式，滑块位移由 CSS :has() 驱动（零 JS 依赖）。 */

.dispatch-workspace{max-width:1440px;margin:0 auto;padding:8px 4px 32px;color:var(--ink)}

/* ── 面板头：第一行标题 + 计数说明，第二行居中分段控件 ── */
.dispatch-panel{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.dispatch-panel__head{display:flex;flex-direction:column;gap:12px;padding:14px 20px 13px;border-bottom:1px solid var(--line)}
.dispatch-panel__title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dispatch-panel__title h3{font-size:14px;font-weight:650;letter-spacing:.01em}
.dispatch-panel__title p{color:var(--gray);font-size:11.5px}

/* ── 筛选器：液态玻璃分段控件（带计数），居中，本页唯一可点区域 ── */
.dispatch-filters{position:relative;display:grid;grid-template-columns:repeat(3,minmax(112px,1fr));align-self:center;padding:3px;border-radius:13px;background:color-mix(in srgb,var(--bg) 76%,var(--card));box-shadow:inset 0 1px 2px rgba(30,75,120,.07),inset 0 0 0 1px rgba(255,255,255,.5);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.dispatch-filters__thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:10px;background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.62));border:1px solid rgba(255,255,255,.85);box-shadow:0 6px 18px rgba(30,75,120,.14),0 1px 2px rgba(30,75,120,.08),inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(120,150,190,.10);-webkit-backdrop-filter:blur(16px) saturate(190%);backdrop-filter:blur(16px) saturate(190%);pointer-events:none;z-index:0;transition:transform .42s cubic-bezier(.22,1,.36,1)}
.dispatch-filters:has(button:nth-of-type(2).is-active) .dispatch-filters__thumb{transform:translateX(100%)}
.dispatch-filters:has(button:nth-of-type(3).is-active) .dispatch-filters__thumb{transform:translateX(200%)}
.dispatch-filters button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:0 14px;border-radius:10px;background:transparent;color:var(--gray);font-size:12.5px;font-weight:600;cursor:pointer;transition:color .28s var(--ease)}
.dispatch-filters button:hover{color:var(--ink)}
.dispatch-filters button.is-active{background:transparent;color:var(--ink);box-shadow:none}
.dispatch-filters button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dispatch-filters__count{font:650 12px/1 var(--font-num);color:var(--gray-2);letter-spacing:-.01em}
.dispatch-filters button.is-active .dispatch-filters__count{color:var(--blue)}

/* ── 清单 ── */
.dispatch-list-head,.dispatch-item{display:grid;grid-template-columns:minmax(240px,1.5fr) minmax(140px,.65fr) minmax(210px,1fr) 128px;gap:20px;align-items:center}
.dispatch-list-head{padding:8px 20px;background:color-mix(in srgb,var(--bg) 72%,var(--card));color:var(--gray);font-size:11px;font-weight:650;letter-spacing:.04em}
.dispatch-list-head span:last-child{text-align:right}
.dispatch-item{position:relative;min-height:74px;padding:13px 20px;border-top:1px solid var(--line-2);transition:background .18s var(--ease)}
.dispatch-item:first-child{border-top:0}
.dispatch-item:hover{background:color-mix(in srgb,var(--blue-050) 28%,var(--card))}
.dispatch-item:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--gray-3)}
.dispatch-item--ready:before{background:var(--blue)}
.dispatch-item--sent:before{background:var(--green)}
.dispatch-item--waiting:before{background:var(--amber)}
.dispatch-order strong,.dispatch-order span,.dispatch-status strong,.dispatch-status span{display:block}
.dispatch-order strong{font:650 14px/1.35 var(--font-num);letter-spacing:.01em}
.dispatch-order span{margin-top:4px;color:var(--gray);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dispatch-progress strong{font:650 14px/1.3 var(--font-num)}
.dispatch-progress span{display:block;margin-top:4px;color:var(--gray);font-size:11.5px}
.dispatch-progress__bar{height:4px;margin-top:7px;border-radius:99px;background:var(--line-2);overflow:hidden}
.dispatch-progress__bar i{display:block;height:100%;border-radius:inherit;background:var(--blue)}
.dispatch-status{display:flex;align-items:flex-start;gap:10px}
.dispatch-status__dot{flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--gray-3);box-shadow:0 0 0 4px color-mix(in srgb,var(--gray-3) 20%,transparent)}
.dispatch-item--ready .dispatch-status__dot{background:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent)}
.dispatch-item--sent .dispatch-status__dot{background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 14%,transparent)}
.dispatch-item--waiting .dispatch-status__dot{background:var(--amber);box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 18%,transparent)}
.dispatch-status strong{font-size:13px}
.dispatch-status span{margin-top:3px;color:var(--gray);font-size:11.5px;line-height:1.45}
.dispatch-action{text-align:right}
.dispatch-action .btn{min-width:104px}
.dispatch-empty{padding:56px 24px;text-align:center}
.dispatch-empty strong{display:block;font-size:16px}
.dispatch-empty span{display:block;margin-top:7px;color:var(--gray);font-size:13px}

/* ── 三阶段状态：待签字 → 3 天窗口内已寄出 → 窗口结束已归档 ── */
.dispatch-item--archived:before{background:var(--gray-3)}
.dispatch-item--archived .dispatch-status__dot{background:var(--gray-3);box-shadow:0 0 0 4px color-mix(in srgb,var(--gray-3) 20%,transparent)}
.dispatch-countdown{display:inline-block;width:136px;text-align:left}
.dispatch-countdown__meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dispatch-countdown__meta strong{font-size:12px;color:var(--ink)}
.dispatch-countdown__meta span{font:650 12px/1 var(--font-num);color:var(--green-d)}
.dispatch-countdown__track{height:7px;margin:7px 0 5px;border-radius:999px;background:var(--line-2);overflow:hidden}
.dispatch-countdown__fill{display:block;width:100%;height:100%;border-radius:inherit;background:var(--green);transform-origin:left center;transition:transform .35s var(--ease-out)}
.dispatch-countdown small{display:block;color:var(--gray);font-size:10.5px;white-space:nowrap}

/* ── 深色主题 ── */
[data-theme="dark"] .dispatch-filters{background:rgba(255,255,255,.05);box-shadow:inset 0 1px 2px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.05)}
[data-theme="dark"] .dispatch-filters__thumb{background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.10));border-color:rgba(255,255,255,.24);box-shadow:0 6px 18px rgba(0,0,0,.38),0 1px 2px rgba(0,0,0,.3),inset 0 1px 1px rgba(255,255,255,.30)}

/* ── 超管「改寄出日期」（2026-09-24，测试辅助）────────────────────────
   已寄出卡片上的入口按钮 + 对应弹窗（弹窗复用 .app-confirm 外壳）。
   窗口口径与后端一致：deadline = 签字日 + 2 天（3 个自然日含当天）。 */
.dispatch-date-btn { margin-left: 8px; }
.dispatch-date-dialog__body { padding: 4px 0 8px; display: grid; gap: 10px; }
.dispatch-date-dialog__label { font-size: 13px; color: var(--gray); }
.dispatch-date-dialog__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.dispatch-date-dialog__hint { margin: 0; font-size: 12px; line-height: 1.6; color: var(--gray); }

/* ── 响应式与动效降级（媒体查询一律排到文件最末，避免被块外同名规则覆盖）── */
@media(max-width:1050px){.dispatch-list-head{display:none}.dispatch-item{grid-template-columns:1fr 1fr}.dispatch-action{text-align:left}}
@media(max-width:680px){.dispatch-workspace{padding:0 0 24px}.dispatch-panel__head{padding:14px 16px}.dispatch-filters{width:100%;align-self:stretch;grid-template-columns:repeat(3,minmax(0,1fr))}.dispatch-filters button{padding:0 6px;font-size:12px}.dispatch-item{grid-template-columns:1fr;padding:14px 16px;gap:12px}.dispatch-action{text-align:left}.dispatch-action .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.dispatch-item,.dispatch-filters button,.dispatch-filters__thumb{transition:none}.dispatch-countdown__fill{transition:none}}

/* ==========================================================================
   Astra 倒计时条 · 紫色（2026-09-28 落地）
   --------------------------------------------------------------------------
   ⚠️ 为什么要写在这里而不是 app.css：
      本文件在 index.html 中**排在 app.css 之后**加载，因此 67 行的
      `.dispatch-countdown__fill{ background:var(--green) }` 会**后写覆盖**
      app.css 末尾那套紫色 `background-image`（`background` 简写会清空
      background-image）。这是「改了没反应、依旧是绿色」的真正根因。
      修法遵循铁律「新 CSS 追加到文件末尾、靠写在后面取胜」，**不删旧规则**。
   ⚠️ 不得声明 transform / width：进度由 JS 写 style="transform:scaleX(p)"。
   ⚠️ ::after 已被老条纹层占用（app.css 4371），此处只用 ::before。
   ========================================================================== */
.dispatch-countdown__fill {
  background: none;
  background-image: linear-gradient(90deg,
    #3b1d8f 0%, #4a24a8 10%, #6234c6 22%, #7d4ae0 33%,
    #9b6bf2 44%, #a97cf8 50%, #9b6bf2 56%,
    #7d4ae0 67%, #6234c6 78%, #4a24a8 90%, #3b1d8f 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.dispatch-countdown__fill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(60% 150% at 50% 50%,
    rgba(255, 255, 255, .34) 0%,
    rgba(255, 255, 255, .16) 38%,
    rgba(255, 255, 255, 0) 72%);
  background-size: 70% 100%;
  background-repeat: no-repeat;
  animation: dispatch-astra-spot 4.2s ease-in-out infinite alternate;
}
@keyframes dispatch-astra-spot {
  0%   { background-position: 12% 0; }
  100% { background-position: 88% 0; }
}
.dispatch-item--archived .dispatch-countdown__fill {
  background-image: none;
  background: var(--gray);
}
.dispatch-item--archived .dispatch-countdown__fill::before { animation: none; opacity: 0; }
[data-theme="dark"] .dispatch-countdown__fill {
  background-image: linear-gradient(90deg,
    #2c1470 0%, #39208a 10%, #4e28ab 22%, #663bc9 33%,
    #8b5ae8 44%, #9a6bf2 50%, #8b5ae8 56%,
    #663bc9 67%, #4e28ab 78%, #39208a 90%, #2c1470 100%);
}
[data-theme="dark"] .dispatch-countdown__fill::before {
  background-image: radial-gradient(60% 150% at 50% 50%,
    rgba(255, 255, 255, .26) 0%,
    rgba(255, 255, 255, .12) 38%,
    rgba(255, 255, 255, 0) 72%);
}
@media(prefers-reduced-motion:reduce) {
  .dispatch-countdown__fill::before { animation: none; background-position: 50% 0; }
}

/* ==========================================================================
   ⚠️⚠️ 2026-09-29（用户第三轮反馈）：关掉「滚动感」的两层，粒子才看得出来
   --------------------------------------------------------------------------
   现象：用户看实机 →「还是有点像滚动条的效果，看不出是粒子来」。
   归因（6 倍放大 A/B 实测，`tmp/_astra_why_stripe.html` / `_why_stripe3.png`）：
     · `::after` = 斜向流动条纹（`dispatch-bar-flow`，32px 周期向左跑）
       → 观感就是「滚动条在滚」；这是最像滚动条的一层。
     · `::before` = 70% 宽的移动亮斑（`dispatch-astra-spot`，左右滑动）
       → 观感就是「滚动的高光」，中段一条亮带，会把粒子淹没。
   两层亮度都远高于 1~3px 的粒子 ⇒ **只把粒子调大治不好，必须先关掉这两层**。
   ⇒ 最终只保留「V 形紫底（`.fill` 自身的 background-image）+ 粒子」两件事。
   ⚠️ 按项目铁律**只覆盖、不删除**：原规则留在原位，删掉下面这两行即可整层回退。
   ⚠️ 原先要靠 `dispatch-bar-flow` 表达的「在持续变化、没卡住」语义，
      现在由**粒子自身的位移**承担（粒子向左漂移，本身就是动的信号）。
   ⚠️ 归档态（`.dispatch-item--archived`）已有独立规则停动效，不受影响。
   ========================================================================== */
.dispatch-countdown__fill::after { animation: none; opacity: 0; }
.dispatch-countdown__fill::before { animation: none; opacity: 0; }