/* @@SPLIT_HEADER@@
   css/pages/home.css —— 首页看板：明细浮窗 + #view-home
      由 redesign2.html 拆分而来（原行号 1323-1534），业务逻辑原样搬运；加载顺序见 index.html / README.md */
/* ==========================================================================
   12.4 明细浮窗（首页六张统计卡 -> 从被点的卡片位置「长出来」的浮动窗口）
   ★ 为什么从「右侧贴边抽屉」改成「浮动窗口」：用户原话是「像开个新窗口一样
     的从那个按钮跳出来（要有动画，窗口大小可以调整但是不是整个屏幕，按内容
     自动调整）」。贴边抽屉做不到的正是这几条：它从屏幕右缘滑进来，跟「点了
     哪张卡」没有任何空间联系；宽固定 560、高一屏，6 列退货明细会被挤成省略号；
     用户也没法拉大去看。
   ★ 为什么把 #drawerMask 整个删掉：真窗口不会把桌面压暗，而且用户要「边看
     窗口边看背景页面」。遮罩一去，「点遮罩关闭」这条出口就没了 —— 关闭方式
     改成 × / Esc / 点窗口外任意位置三条（见 JS）。
   ★ 为什么用 opacity+visibility+transform 而不是 display:none 切换：
     display:none -> block 时浏览器的初始 transform 会被跳过，第一帧直接出现
     在终点，缩放动画就没了（上一轮的抽屉在同一个坑里，注释还留着）。
   ★ 为什么缩放用原生 `resize:both`：拖拽手感、触摸、最小/最大尺寸都由浏览器
     实现，自己写要处理 pointer 捕获和边界，容易越写越乱。代价是它要求
     overflow 不能是 visible —— 所以外层 .floatwin 用 overflow:hidden，
     列表滚动交给内部的 .fw-bd（否则内容会被裁掉且没有滚动条）。
   ★ 网格列宽为什么仍写 px：px 是 11px 等宽字体的实测值（19 位订单号 ≈115px），
     比按比例分更稳；窗口拉宽时多出来的空间由 minmax(0,1fr) 的商品列吸收。
   ========================================================================== */
.floatwin{
  position:fixed;left:24px;top:96px;z-index:360;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 46px rgba(15,23,42,.20),0 2px 8px rgba(15,23,42,.06);
  /* 原生缩放：右下角可拖宽高。min/max 让「不是整个屏幕」变成硬约束：
     最宽 920（或 92vw，小屏优先）、最高 82vh。 */
  resize:both;overflow:hidden;
  min-width:420px;min-height:200px;
  max-width:min(920px,92vw);max-height:82vh;
  /* 关闭态缩到 .94（不是 .88）：关闭只需一点点动作，缩回 .88 会像被卡片吸回去 */
  opacity:0;visibility:hidden;pointer-events:none;transform:scale(.94);
  /* visibility 延迟 .18s：先缩完再消失，否则窗口会「啪」一下不见。
     transform 的缓动是需求点名的 cubic-bezier(.2,.8,.3,1)：起步快、收尾稳，
     比 ease-out 更像"窗口弹出来"而不是"滑块平移"。 */
  transition:transform .18s cubic-bezier(.2,.8,.3,1),opacity .14s ease-out,visibility 0s linear .18s;
}
.floatwin.show{
  opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),opacity .14s ease-out;
}
/* 容器是 tabindex="-1" 的对话框：聚焦它时不要默认 outline 圈住整个窗口
   （浏览器只在键盘 :focus-visible 时才画，但 Windows 上点开也会闪一圈） */
.floatwin:focus{outline:none}
/* 拖动中禁止选中标题文字，否则拖动会顺手把「今日已发货」拖成蓝色选中态 */
.floatwin.dragging{user-select:none}
/* 右下角的缩放角标：原生 resize 手柄在浅色底上几乎看不见，补一个只做视觉提示的
   角标。★ pointer-events:none 是必须的 —— 挡住的话 mousedown 落在角标上，
   Chrome 的原生 resize 就抓不到了（踩过：角标一加，右下角拖不动了）。 */
.fw-grip{position:absolute;right:3px;bottom:3px;width:12px;height:12px;pointer-events:none;color:#c3c9d4}
.fw-grip .i{width:12px;height:12px;stroke-width:1.4}
/* 标题栏 = 拖动把手：cursor 从 grab 变 grabbing，用户才知道这块能拖 */
.fw-hd{flex:none;display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);cursor:grab}
.floatwin.dragging .fw-hd{cursor:grabbing}
.fw-hd .dt{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap}
.fw-hd .dn{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.fw-x{
  margin-left:auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  /* ★ 原来是 var(--faint)（浅到几乎看不见，实测截图里 × 要放大 8 倍才认得出），
     改成 text-2 灰并加大图标到 14px —— 关闭按钮是这个抽屉唯一的出口，不能靠猜。 */
  border:0;background:none;border-radius:6px;color:var(--text-2);cursor:pointer;padding:0;
}
.fw-x .i{width:14px;height:14px;stroke-width:1.8}
.fw-x:hover{background:var(--bg);color:var(--text)}
/* ★ 焦点框：默认是浏览器黑色 outline，在浅色抽屉头上很丑。
   统一成和卡片一样的蓝色描边（只有键盘 Tab 出来才显示）。 */
.fw-x:focus-visible,.stat.clickable:focus-visible,#drawerGo:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
/* 列表区：纵向滚动（27 行必须能滚完），横向也留 auto 兜底极窄屏 */
.fw-bd{flex:1;min-height:0;overflow:auto;padding:0 10px 8px}
/* 列头 sticky：滚起来以后仍然知道每列是什么 */
.dhead{
  position:sticky;top:0;z-index:1;display:grid;align-items:center;
  padding:9px 0 7px;background:var(--card);border-bottom:1px solid var(--line);
  font-size:11px;color:var(--faint);
}
.dhead span,.drow > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlist{padding-top:2px}
.drow{
  display:grid;align-items:center;min-height:34px;padding:4px 0;
  border-bottom:1px solid #f6f7f9;font-size:12px;color:var(--text-2);
}
.drow:hover{background:var(--hover)}
.drow .mono{font-size:11px;color:var(--text)}
.drow .d-time{font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.drow .d-amt{text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
.drow .d-rcpt{color:var(--text)}
.d-pd{color:var(--text-2)}
/* 四套列宽：分别对应 订单类 / 今日已发货 / 今日销售额 / 今日退货 */
.dcols-order{grid-template-columns:120px minmax(0,1fr) 48px 60px 56px;gap:8px}
.dcols-shipped{grid-template-columns:120px minmax(0,1fr) 48px 46px 100px;gap:8px}
.dcols-sales{grid-template-columns:120px minmax(0,1fr) 62px 60px 60px;gap:8px}
/* 退货只有 6 列 5 个间隙，gap 缩到 4px，否则 19 位单号 + 退货单号放不下一行 */
.dcols-returns{grid-template-columns:116px 120px 62px minmax(0,1fr) 50px 64px;gap:4px}
/* 买家退货单号：全抽屉最该被一眼看到的值，用强调色 + 复制按钮 */
.d-ret{display:flex;align-items:center;min-width:0;color:var(--accent);font-weight:600}
.d-ret .mono{color:var(--accent)}
.d-ret.blank{color:var(--faint);font-weight:400}
.d-cp{
  flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  margin-left:2px;border:0;background:none;border-radius:4px;color:var(--faint);cursor:pointer;padding:0;
}
.d-cp:hover{background:var(--accent-weak);color:var(--accent)}
/* 空值统一灰色小字（不是破折号，能直接说明「为什么没有」） */
.d-empty{font-style:normal;font-size:11px;color:var(--faint);font-weight:400}
/* 底部：左汇总（只有销售额抽屉有）+ 右跳转按钮（次要样式，白底描边） */
.fw-ft{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);background:#fbfcfe}
.fw-ft .dsum{margin-right:auto;font-size:12px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.fw-ft .dsum b{color:var(--text);font-weight:600}
.fw-ft .dsum .tot{color:var(--accent);font-size:14px}
.fw-ft .dsum .dsep{display:inline-block;width:1px;height:11px;margin:0 10px;background:var(--line);vertical-align:-1px}
.fw-ft .btn{flex:none}

/* ==========================================================================
   12.5 首页看板（#view-home）
   ◆ 为什么允许纵向滚、不允许横向滚：内容天然比打单页长（4 个区），
     1920×1080 下刚好不滚，更矮的屏幕让它纵向滚比压字号更好读；
     横向一律不许滚（需求硬指标），所以宽度都用 % / flex。
   ========================================================================== */
#view-home{overflow-y:auto;overflow-x:hidden}
/* —— 卡片通用头部（首页 / 售后都用，和打单页的 .tagbar 视觉语言一致） —— */
.hd{flex:none;display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #f1f3f6}
.hd .t{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.hd .n{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd .r{margin-left:auto;display:flex;align-items:center;gap:12px;white-space:nowrap}
.hd .lnk{font-size:12px;color:var(--accent);cursor:pointer}
.hd .lnk:hover{text-decoration:underline}

/* —— A. 六个统计卡片：一行等宽，白底 + 细边框 + 左侧 3px 彩色竖条 —— */
/* ★ 2026-11-02：卡片从 6 张变 5 张。原来写死 repeat(6,1fr)，删一张会留个空洞。
   改成 auto-fit + minmax：有几张排几张，宽度自动拉伸；窄屏自动换行，不会挤成一团。 */
.statrow{flex:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.stat{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:11px 14px 10px;overflow:hidden;
}
/* 左侧 3px 彩色竖条：用 ::before 而不是 border-left，
   因为 border-left 会占盒宽、六张卡内部的文字起点就不齐（3px × 6 的误差）。
   颜色由 --bar 提供，六张卡分别是蓝/橙/红/绿/灰/紫。 */
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bar,#2563eb)}
.stat.c-blue{--bar:#2563eb}
.stat.c-orange{--bar:#ea580c}
.stat.c-red{--bar:#dc2626}
.stat.c-green{--bar:#059669}
.stat.c-gray{--bar:#94a3b8}
.stat.c-purple{--bar:#7c3aed}
.stat .lb{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v{font-size:32px;font-weight:700;line-height:1.16;margin-top:1px;letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:var(--text)}
.stat .ft{font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 可点卡片（六张全部可点）：hover 轻微上浮 + 阴影加深 + 边框变蓝。
   ◆ 为什么六张用同一套：上一轮只有前 3 张能点、后 3 张是死的，六张卡长得一样
     却只有一半有反馈，用户第一反应是「这三张坏了」。现在都能点，反馈必须一致。
   ◆ 为什么上浮只有 2px：卡片高 ~78px，位移再大就会和下面「紧急待办」的间距打架，
     看着像整行在跳；2px 足够表达「能按」。
   ◆ :active 回落到 0 —— 按下时贴合页面，配合阴影变浅，点击有「按下去」的手感。 */
.stat.clickable{cursor:pointer;transition:transform .15s ease-out,border-color .12s,box-shadow .15s}
.stat.clickable:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 20px rgba(15,23,42,.12)}
.stat.clickable:hover .lb{color:var(--accent)}
.stat.clickable:active{transform:translateY(0);box-shadow:0 2px 8px rgba(15,23,42,.10)}
/* 键盘焦点框：卡片是 div[role=button]，浏览器默认不给焦点框，必须手动画一个 */
.stat.clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* B/C 中间一行：紧急待办 + 近 7 天趋势，左右 1.12 : 1
   注意: 这一行 flex:1 吃掉纵向剩余空间，但给 max-height 470 封顶 ——
   否则 1080 的屏会把柱状图拉到 500px 以上，比例失真；封顶后多出来的高度
   交给下面「最近售后」卡片吃掉，整页刚好铺满不出现灰边。 */
.homemid{flex:1;min-height:220px;max-height:470px;display:flex;gap:10px;align-items:stretch}
.halfcard{display:flex;flex-direction:column;min-width:0;min-height:0}
.halfcard.wide{flex:1.12}
.halfcard.narrow{flex:1}
/* 紧急待办行：订单号 / 商品 / 红色倒计时 / 去处理；底注钉在卡片底部 */
.urgent{flex:1;min-height:0;display:flex;flex-direction:column;padding:4px 6px 0}
.urow{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:8px}
.urow:hover{background:var(--hover)}
.uc-oid{flex:none;width:158px;font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-pd{flex:1;min-width:0;font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-left{flex:none;font-size:12px;font-weight:600;color:var(--danger);font-variant-numeric:tabular-nums;white-space:nowrap}
.uc-time{flex:none;font-size:11px;color:var(--faint);white-space:nowrap}
/* 底注紧跟列表行后面（不钉卡片底部）：钉底会把「只有 1 条紧急单」的留白框起来，
   看着像内容缺失；紧跟上文则只是列表下方的一片空白，属于正常留白。 */
.ufoot{margin-top:6px;padding:8px 10px;border-top:1px solid var(--line);font-size:12px;color:var(--faint)}
/* 7 天柱状图：纯 CSS，柱高 = 当日单量 / 最高单量 */
.chart{flex:1;min-height:0;display:flex;align-items:stretch;gap:10px;padding:16px 14px 8px}
.bar-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
/* 轨道用 flex:1 拿到确定高度，柱子再按百分比算 ——
   这样卡片被拉高时柱子跟着长，且不会踩「父级不定高导致 % 失效」的坑。 */
/* ★ 2026-11-02 加：柱子上面那行「N单 · ¥金额」。
   常显（不再 hover 才出现）—— 用户要的就是"标注出来"，藏起来等于没标。
   字号 10.5px + nowrap：7 根柱子每根约 90px 宽，再大就换行了。 */
.bar-amt{font-size:10.5px;line-height:1.2;color:var(--mut);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bar-track{width:100%;flex:1;min-height:110px;display:flex;align-items:flex-end;justify-content:center}
.bar{
  position:relative;width:100%;max-width:46px;min-height:4px;
  background:var(--accent);border-radius:6px 6px 2px 2px;transition:background .12s;
}
.bar-col:hover .bar{background:#1d4ed8}
/* hover 数字气泡：默认透明，鼠标进该柱才显形（比 title 提示更直观） */
.bar-val{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  background:#0f172a;color:#fff;font-size:11px;line-height:16px;padding:0 6px;border-radius:5px;
  opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .12s;
  font-variant-numeric:tabular-nums;
}
.bar-col:hover .bar-val{opacity:1}
.bar-x{font-size:11px;color:var(--mut);white-space:nowrap}
/* 图下方的 7 天汇总：合计单量 / 合计金额 / 均价 */
.trend-sum{flex:none;padding:6px 14px 10px;font-size:12px;color:var(--mut);
  text-align:center;border-top:1px dashed var(--line);margin:0 14px 8px}
.trend-sum b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* —— D. 最近售后小列表：五列按比例分，行高 42；卡片吃掉剩余高度，底注钉底 —— */
.recentcard{flex:1;min-height:240px;display:flex;flex-direction:column;min-width:0}
.recent{flex:1;min-height:0;display:flex;flex-direction:column;padding:2px 0 0}
/* 行高弹性 46~62：卡片被拉高时行跟着长，避免「5 行挤在顶部 + 底部一条孤零零的底注」 */
.rrow{display:grid;grid-template-columns:24% 28% 13% 15% 20%;align-items:center;gap:10px;flex:1;min-height:46px;max-height:62px;padding:0 14px;font-size:12px}
.rrow.head{flex:none;height:26px;color:var(--faint);font-size:11px;border-bottom:1px solid #f1f3f6}
.rrow:not(.head):hover{background:var(--hover)}
.rrow.foot{flex:none;margin-top:auto;height:32px;border-top:1px solid var(--line);color:var(--faint);font-size:11px}
.rrow .oidc{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .asc{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}