/* ============================================================
   V3.31  页面过渡动画层 · 位于 v330 之后加载
   承载四项升级，全部按类名/页面键作用，绝不全局覆盖：
   A. 切页过渡：#content 挂 .page-leave（退场 150ms）与
      .page-enter（入场 260ms，cubic-bezier(.2,.8,.2,1)），
      由 app.js v3.30 的 go() 负责加卸类；
   B. 首屏卡片一次性错峰入场：仅 .page-enter 上下文内的
      仪表盘统计卡/概览卡，fill:backwards 播完即还原，
      不压住既有悬浮抬升等组件动画；
   C. 微交互：玻璃按钮/导航项 :active 0.98 按压（.btn 沿用
      v316/v318 既有 0.95~0.96 规则，不重复声明）；
   D. 表格 data-th 移动卡片化：≤600px 且表格确含
      td[data-th] 时（:has 限定，未输出 data-th 的表格仍走
      v330 横向滚动策略）隐藏表头，单元格左列名右内容；
   E. prefers-reduced-motion:reduce 时上述动画全部关闭。
   红线遵守：不声明任何全局 * / 元素级 transition/animation
   覆盖；不触碰弹窗出入场、光斑漂浮等既有组件动画。
   ============================================================ */

/* ---------- A. 切页过渡（类挂在 #content 上，离开即还原） ---------- */
#content.page-leave{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .15s ease-out,transform .15s ease-out;
}
#content.page-enter{
  animation:v331PageIn .26s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes v331PageIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}

/* ---------- B. 首屏卡片一次性错峰入场（仅仪表盘首屏） ---------- */
.page-enter .stat-grid > .stat-card,
.page-enter .dash-grid > .card{
  animation:v331CardIn .34s cubic-bezier(.2,.8,.2,1) backwards;
}
.page-enter .stat-grid > .stat-card:nth-child(2),
.page-enter .dash-grid > .card:nth-child(2){ animation-delay:.05s; }
.page-enter .stat-grid > .stat-card:nth-child(3),
.page-enter .dash-grid > .card:nth-child(3){ animation-delay:.1s; }
.page-enter .stat-grid > .stat-card:nth-child(4),
.page-enter .dash-grid > .card:nth-child(4){ animation-delay:.15s; }
.page-enter .stat-grid > .stat-card:nth-child(5),
.page-enter .dash-grid > .card:nth-child(5){ animation-delay:.2s; }
.page-enter .stat-grid > .stat-card:nth-child(6){ animation-delay:.25s; }
@keyframes v331CardIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}

/* ---------- C. 微交互：玻璃件按压反馈（.btn 已有 v318 规则，勿动） ---------- */
.glass-btn:active{ transform:scale(.98); }
.nav-item:active{ transform:scale(.98); }
.side-collapse:active{ transform:scale(.92); }

/* ---------- D. 表格 data-th 移动卡片化（仅含 data-th 的表格） ----------
   前置：app.js v3.30 已为 products/arrivals/flow/suppliers/checks
   等核心表格输出 data-th 列名；未输出 data-th 的表格不匹配
   :has() 选择器，自动维持 v330 横向滚动，互不干扰 */
@media (max-width:600px){
  .table-wrap table:has(td[data-th]){ display:block; }
  .table-wrap table:has(td[data-th]) thead{ display:none; }
  .table-wrap table:has(td[data-th]) tbody{ display:block; }
  .table-wrap table:has(td[data-th]) tr{ display:block; padding:4px 2px; }
  .table-wrap table:has(td[data-th]) tr + tr{
    border-top:1px solid rgba(120,128,148,.16);
  }
  .table-wrap table:has(td[data-th]) td{
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; padding:8px 6px; white-space:normal;
  }
  .table-wrap table:has(td[data-th]) td[data-th]::before{
    content:attr(data-th);
    flex:0 0 auto; max-width:42%;
    font-size:12px; font-weight:600; color:var(--text-3);
  }
  /* colspan 占位行（空数据/展开明细容器）保持整行块级 */
  .table-wrap table:has(td[data-th]) td[colspan]{
    display:block; text-align:center; padding:16px 6px;
  }
}

/* ---------- E. 动效降级：系统偏好减少动态时全部关闭 ---------- */
@media (prefers-reduced-motion:reduce){
  #content.page-leave{ transition:none; }
  #content.page-enter,
  .page-enter .stat-grid > .stat-card,
  .page-enter .dash-grid > .card{ animation:none; }
  .glass-btn:active,.nav-item:active,.side-collapse:active{ transform:none; }
}

/* ============================================================
   收尾自查：
   · 无全局 * / 元素级 transition/animation 覆盖，动画均绑定
     在 .page-leave/.page-enter 类或 :active 伪类上，卸类即失效；
   · 入场动画 fill 仅 backwards，播完还原，不压 .stat-card
     hover transform 等既有组件动效；
   · data-th 卡片化以 :has(td[data-th]) 精确圈定，未改造表格
     不受影响；
   · prefers-reduced-motion:reduce 全量关闭本层动画。
   ============================================================ */