/* ==========================================================================
   弹层统一：全部改成「右侧抽屉」
   --------------------------------------------------------------------------
   用户要求（2026-11-02）：
     「更多功能里面弹出不统一（有的要么是侧弹，要么是将近满屏弹，
       统一侧弹除非空间不够用了）」

   现状实测（1600x1000 视口，逐个点开量的）：
     预发货 / 物流监控 / 面单查询 / 自动打单   .xxvii-page   1600x1000  满屏
     面单统计 / 对账单 / 销售统计 / 打印日志   .xiii-drawer   900x1000  右侧抽屉 ✅ 已经是标准
     备货单                                  .bk-sheet     1100x780   居中大窗
     打印拿货标签                             .plb-sheet     760x242   居中横条

   ★ 只覆盖「显示时」的布局，**不动各模块的显隐机制**。
     四个遮罩的显隐写法各不相同（.show 加 display:block / flex / 默认 flex），
     直接改它们的 display 会让面板常显 —— 那是灾难级 bug。
     所以每条规则都用 `.xxx-mask.show` 前缀，只在"该显示"时生效。

   ★ 两档宽度（用户说"除非空间不够用了"）：
       窄档 900px  —— 表单/设置/日志类
       宽档 1220px —— 带多列表格的（备货单、物流监控、预发货…）
     两者都 `max-width:96vw`，小屏自动收窄；高度统一 100%，像真抽屉。

   ★ 为什么放一个独立文件而不是改各模块的 css：
     这些样式分散在 logistics/picksheet/pick-label/reports 四个 css 里，
     各自还有移动端媒体查询。集中一个覆盖文件，以后调只改这里，
     也一眼能看出"统一规则在哪儿"。
   ========================================================================== */

/* ---------- 遮罩层：显示时改成「右对齐、拉伸铺满」 ---------- */
.bk-mask.show,
.plb-mask.show {
  align-items: stretch;          /* 不再垂直居中 → 抽屉贴顶贴底 */
  justify-content: flex-end;     /* 贴右边 */
  padding: 0;                    /* 去掉原来的 20px 内边距，抽屉要贴边 */
}

/* xxvii 系列原本是 display:block + 内部 absolute inset:0（整页替换式），
   改成 flex + 右对齐；内部 .xxvii-page 由下面的规则改成抽屉尺寸 */
.xxvii-mask.show {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

/* ---------- 面板本体：统一成抽屉 ---------- */

/* 宽档：备货单（里面是商品清单大表） */
.bk-mask.show .bk-sheet {
  width: min(1220px, 96vw);
  height: 100%;
  max-height: none;
  border-radius: 0;
  box-shadow: -6px 0 28px rgba(0, 0, 0, .14);
}

/* 宽档：预发货 / 物流监控 / 面单查询 / 自动打单（多列表格） */
.xxvii-mask.show .xxvii-page {
  position: relative;            /* 原来是 absolute inset:0 铺满整个视口 */
  inset: auto;
  width: min(1220px, 96vw);
  height: 100%;
  background: var(--card);
  box-shadow: -6px 0 28px rgba(0, 0, 0, .14);
}

/* 窄档：拿货标签（设置类，内容矮 → 高度跟随内容，不要拉成一根空条） */
.plb-mask.show .plb-sheet {
  width: min(900px, 96vw);
  max-height: 96vh;
  height: auto;
  border-radius: 0;
  box-shadow: -6px 0 28px rgba(0, 0, 0, .14);
}
.plb-mask.show .plb-sheet.wide {
  width: min(1220px, 96vw);
}

/* ---------- 参考标准：reports.css 里的 .xiii-drawer 已经是抽屉 ----------
   这里只把它和上面几档的"入场动画/阴影"对齐，视觉上完全一致 */
.xiii-drawer {
  box-shadow: -6px 0 28px rgba(0, 0, 0, .14);
}
.bk-mask.show .bk-sheet,
.xxvii-mask.show .xxvii-page,
.plb-mask.show .plb-sheet {
  animation: dshDrawerIn .16s ease;
}
@keyframes dshDrawerIn {
  from { transform: translateX(26px); opacity: .5; }
  to   { transform: none; opacity: 1; }
}

/* ---------- 小屏兜底：窄屏时抽屉占满（本来就是"空间不够"的情况） ---------- */
@media (max-width: 760px) {
  .bk-mask.show .bk-sheet,
  .xxvii-mask.show .xxvii-page,
  .plb-mask.show .plb-sheet,
  .plb-mask.show .plb-sheet.wide {
    width: 100vw;
    max-width: 100vw;
  }
}