/*!
 * web/assets/css/index/02-responsive.css
 * 移动端响应式 / 统一搜索区 / 侧栏自适应
 *
 * 本文件由 tools/split_spa.py 从单文件 SPA 机械拆出，请勿手工改动切分边界。
 * 加载顺序由入口 HTML 统一控制（经典 script 共享全局词法环境）。
 */

/* ===== 移动端响应式优化 ===== */
@media(max-width:768px){
  .el-dialog{width:92%!important;max-width:92vw!important;margin:5vh auto!important}
  .el-drawer{width:85%!important}
  .el-table{font-size:12px}
  .el-table th>.cell,.el-table td>.cell{padding:6px 4px}
  .ep-cell-group{margin:8px!important}
  .pick-card{margin:6px 8px!important}
  .shiprec{margin:6px 8px!important}
  .ord-meta{grid-template-columns:1fr!important}
  /* 表格横向滚动 */
  .el-table__overflow{overflow-x:auto}
  /* 按钮组换行 */
  .el-button-group{flex-wrap:wrap}
  /* 输入框全宽
     ⚠️ 这条带 !important，会**反过来盖掉控件自己的行内 width**（行内样式本来一定赢）。
     后果：窄屏下"定宽下拉 + 自适应输入框"并排时，下拉被撑成整行、输入框挤到 0 宽，
     输入框的 append 按钮会被推出屏幕 —— 2026-09-26 在 /inventory 实测到
     （select 295px / input 0px / 「扫码」按钮右边界 489 > 视口 375，父行 scrollWidth 461）。
     2026-09-26 试过去掉 !important：全站 25 处行内宽度会同时生效，影响面没有测量手段兜住，已回退。
     **正确写法：定宽控件套一层 div 给宽度**，让 100% 落在那一层里面（inventory.js 已这么改）。 */
  .el-input,.el-select,.el-date-editor{width:100%!important}
  /* 卡片内边距收紧 */
  .el-card__body{padding:12px!important}
  /* 顶部导航 */
  .ep-nav-bar{height:48px!important}
  .ep-nav-bar__title{font-size:15px!important}
  /* tab文字缩小 */
  .el-tabs__item{font-size:13px!important;padding:0 12px!important}
  /* 统计卡片网格 */
  .stat-grid{grid-template-columns:repeat(2,1fr)!important}
  /* 弹窗footer按钮全宽 */
  .el-dialog__footer .el-button{flex:1;min-width:80px}
  /* 搜索框 */
  .ep-search{padding:6px 8px!important}
  /* 触屏可点区统一放在 14-ui-unify.css 末尾：本文件加载顺序早于 04-components.css，
     写在这里的同名选择器（如 .search-toggle）会被后者盖掉。 */
  /* ===== 统一搜索栏样式 ===== */
  .ep-search{display:flex;align-items:center;gap:6px}
  .ep-search .el-input{flex:1}
  .ep-search .el-input__wrapper{border-radius:20px!important;box-shadow:0 0 0 1px var(--bd) inset!important;height:36px}
  .ep-search .el-input__wrapper:hover{box-shadow:0 0 0 1px var(--pc) inset!important}
  .ep-search .el-input__wrapper.is-focus{box-shadow:0 0 0 1px var(--pc) inset!important}
  .ep-search .el-input__inner{height:36px;font-size:14px}
  .search-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:var(--cb);border-bottom:1px solid var(--br)}
  .search-bar .ep-search{padding:0!important;flex:1;min-width:200px}
  /* 图片预览 */
  .el-image-viewer__img{max-width:95vw!important}
}
/* 统一搜索区域（订单列表/发货记录/对账）：关键字 2 列布局，任意屏幕宽度均生效，保证宽度统一与对齐 */
.search-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;padding:4px 12px;background:var(--cb)}
.search-grid .ep-search{padding:0!important}
.search-grid .ep-search .el-input{flex:1}
.search-grid .ep-search .el-input__wrapper{border-radius:20px!important;box-shadow:0 0 0 1px var(--bd) inset!important;height:32px}
.search-grid .ep-search .el-input__wrapper:hover{box-shadow:0 0 0 1px var(--pc) inset!important}
.search-grid .ep-search .el-input__wrapper.is-focus{box-shadow:0 0 0 1px var(--pc) inset!important}
.search-grid .ep-search .el-input__inner{height:32px;font-size:13px}
@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr!important}
  .el-dialog{width:96%!important}
  .el-table{font-size:11px}
  .shiprec__hd{flex-wrap:wrap;gap:4px}
  .pick-card__hd{flex-wrap:wrap}
  /* 2026-10-02（#293）：手机上搜索框一律整行。2 列在 390 宽下每格只有 151px，
     扣掉前缀图标 22px + 后缀 34px + 内边距后**输入区只剩 73px**（实测宽度链：
     .search-grid 334 → .ep-search 151 → .el-input 151 → .el-input__wrapper 151 →
     prefix 22 / inner 73 / suffix 34）—— 占位文案「款号/商品/颜色/规格/备注」和
     英文 36 字符版本都读不全。§173 的"移动优先"在这里就体现在这一条。 */
  .search-grid{grid-template-columns:1fr!important}
  .search-grid .ep-search .el-input__inner{min-width:0}
}
/* Vant 主题对齐应用主色板：让 van-button/van-stepper/van-tab/van-tag 等使用 --pc(#007AFF) 而非 Vant 默认 #1989fa，消除双蓝不一致 */
/* 2026-09-22 多分辨率扫描：这里原本挂着一条 `:root{align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}`
   —— 选择器在早先的编辑里丢了，flex 属性落到 <html> 上（html 不是 flex 容器，全部无效），
   只留下一个真实的副作用：`<html>` 多了 10px 下边距（实测 getComputedStyle(documentElement).marginBottom='10px'）。
   注释描述的 Vant 变量覆盖也不属于本文件（主站是无构建 Vue，不引 Vant）。删掉这条死规则。 */
.ord-no{font-weight:600;font-size:15px}
.ord-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px;color:var(--ts)}
.ord-meta b{color:var(--tc);font-weight:500}
.sret-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bd)}
.sret-row:last-child{border-bottom:none}
.sret-row--off{opacity:.5;cursor:not-allowed}
.sret-img{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:none;background:var(--bg);cursor:pointer}
.sret-img--ph{display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ts);background:var(--bg)}
.sret-info{flex:1;min-width:0}
.sret-nm{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sret-sn{color:var(--ts);font-weight:400;margin-left:4px}
.sret-meta{font-size:12px;color:var(--ts);margin-top:2px}
.sret-av{margin-left:6px;color:var(--pci)}
.sret-qty{text-align:right;flex:none}
.sret-amt{margin-top:4px;font-size:13px;color:var(--pci)}
.item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bd)}
.item .info{flex:1;min-width:0}
.item .nm{font-size:14px;font-weight:500}
.item .meta{font-size:12px;color:var(--ts);margin-top:2px}
.item .price{text-align:right;font-size:13px;white-space:nowrap}
.item .price .sub{color:var(--ts);font-size:12px}
@media(prefers-color-scheme:dark){body:not(.light) .credit-banner,.status-pending{background:#3A2010;color:#FFAB40!important}}
.credit-banner.dark{background:linear-gradient(135deg,#C62828,#E65100);color:#fff}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;background:var(--bg);color:var(--tc);-webkit-font-smoothing:antialiased}
.app{min-height:100vh;display:flex}
.sidebar{display:none}@media(min-width:768px){.sidebar{display:flex;flex-direction:column;width:var(--sbw,220px);height:100vh;background:var(--cd);border-right:1px solid var(--bd);position:fixed;left:0;top:0;z-index:100;transition:width .22s cubic-bezier(.22,.61,.36,1)}.main{margin-left:var(--sbw,220px);flex:1;padding:16px 24px 80px;transition:margin-left .22s cubic-bezier(.22,.61,.36,1)}}
/* 需求 #13：侧栏自适应收起/展开 —— 收起仅显示图标，展开图标+文字
 * 2026-09-13（送审反馈「收起后字体图标全部空白」）根因：
 *   EpIcon 走自托管 Material Symbols 字体时，根节点是 `<span class="ic">…</span>`，
 *   而下面的 `li>span{display:none}` / `.control-chip>span{display:none}` 会**连带把图标一起隐藏**，
 *   于是收起后整列空白。所有「隐藏文字」的选择器必须显式排除 `.ic`。 */
body.sb-collapsed{--sbw:64px}
body.sb-collapsed .sidebar-logo{text-align:center;padding:18px 0;font-size:16px;overflow:hidden;white-space:nowrap}
body.sb-collapsed .sidebar-controls{flex-direction:column;gap:6px;padding:10px 6px;align-items:center}
body.sb-collapsed .sidebar-controls .control-chip{width:36px;height:36px;justify-content:center;padding:0;border-radius:10px}
body.sb-collapsed .sidebar-controls .control-chip>span:not(.ic){display:none}
body.sb-collapsed .sidebar-nav li{justify-content:center;padding:10px 0;margin:1px 6px}
body.sb-collapsed .sidebar-nav li>span:not(.ic){display:none}
body.sb-collapsed .sidebar-nav .nav-section{font-size:0;padding:8px 0 0;text-align:center;border-top:1px solid var(--bd)}
body.sb-collapsed .sidebar-nav .nav-section::before{content:'···';font-size:12px;letter-spacing:1px}
body.sb-collapsed .sidebar-footer{justify-content:center;padding:12px 0}
body.sb-collapsed .sidebar-footer>span:not(.ic){display:none}
.sb-toggle{position:absolute;right:8px;top:16px;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ts);background:var(--bg);font-size:12px;line-height:1;user-select:none;z-index:2}
.sb-toggle .sb-ico{width:14px;height:14px;display:block;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb-toggle:hover{color:var(--pci);background:rgba(0,122,255,.12)}
body.sb-collapsed .sb-toggle{right:50%;top:auto;bottom:8px;transform:translateX(50%);width:36px}
@media(max-width:767px){.sidebar{position:relative}}
body.sb-collapsed .sidebar-logo{position:relative}
body.sb-collapsed .sb-logo-txt{display:none}
body.sb-collapsed .sb-logo-ico{font-size:20px}
.main{flex:1;padding:max(12px,env(safe-area-inset-top)) 12px 12px;max-width:100%;min-width:0;overflow-x:hidden}
/* #657：手机底栏自己占掉的高度，给所有"贴底的动作栏"预留用（唯一真身，别处只消费不再各写一个数）。
   实测 61（20-mobile-layout 把 .mobile-tab a 抬到 44px 触摸档 + 上下 8 + 1 描边），这里取 64 留余量。
   .mobile-tab 的 z 是 99，而 .pick-bar(10)/.ord-detail-bottom(60) 原来都是 bottom:0 ——
   <768 时 elementFromPoint 在按钮中心取到的是 tab 项，业主口径「动作不许藏」：看得见点不着，比置灰更坏。
   预留一律走 CSS（Batch 78：靠 JS 观察器让位有三种时机坑），安全区由底栏自己的 padding 承担。 */
:root{--mt-h:64px}
.mobile-tab{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--cd);border-top:1px solid var(--bd);z-index:99;padding:8px 0 calc(8px + env(safe-area-inset-bottom));overflow:hidden;min-height:56px}@media(min-width:768px){.mobile-tab{display:none}}
.mobile-tab a{flex:1 1 0%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;font-size:12px;color:var(--ts);text-decoration:none}.mobile-tab a.active{color:var(--pci);font-weight:500}.mobile-tab a .tab-icon{display:block;height:24px;line-height:24px;margin-bottom:3px}.mobile-tab a .tab-icon .el-icon{font-size:24px;display:block}.mobile-tab a .tab-label{display:block;font-size:12px;line-height:1.2;white-space:nowrap}
@media(max-width:374px){.mobile-tab a .tab-icon{height:22px;line-height:22px;margin-bottom:2px}.mobile-tab a .tab-icon .el-icon{font-size:22px}.mobile-tab a .tab-label{font-size:11px}}
.sidebar-logo{padding:20px 16px;font-size:18px;font-weight:600;color:var(--pci);border-bottom:1px solid var(--bd);position:relative}
/* #362（2026-10-06）手机「更多功能」抽屉复用的就是这一族规则，所以选中态在这里一次修好两端：
   原 `color:var(--pci)` + .12 蓝底，实测暗黑 4.24:1、亮色 3.37:1，都不过 AA 的 4.5 —— --pci 是
   "强调色/底色"，做字色要用同文件配套成对定义的 --pci（亮 #0069DC / 暗 #3596FF），并把底色
   收薄到 .08 让字底成对：改完亮 4.62:1、暗 5.22:1。同类问题全站还有 128 处，另立 #364 清点。 */
.sidebar-nav{list-style:none;padding:6px 0;flex:1 1 auto;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}.sidebar-nav::-webkit-scrollbar{width:5px}.sidebar-nav::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}.sidebar-nav::-webkit-scrollbar-track{background:transparent}.sidebar-nav li{padding:8px 14px;margin:1px 6px;border-radius:var(--rm);cursor:pointer;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tc);transition:all .2s}.sidebar-nav li:hover{background:rgba(0,122,255,.08)}.sidebar-nav li.active{background:rgba(0,122,255,.08);color:var(--pci);font-weight:500}.sidebar-nav li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-nav .nav-section{padding:10px 14px 4px;font-size:11px;color:var(--ts);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;opacity:0.6;border-top:1px solid var(--bd);margin-top:6px}.sidebar-nav .nav-section:first-child{border-top:none;margin-top:0}
.sidebar-footer{margin-top:auto;padding:12px 16px;border-top:1px solid var(--bd);cursor:pointer;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ts)}
.page{padding:12px 16px calc(80px + env(safe-area-inset-bottom))}.main .page{padding-left:0;padding-right:0;padding-top:0}.pageFade-enter-active,.pageFade-leave-active{transition:opacity .2s ease,transform .2s ease}
.pageFade-enter-from,.pageFade-leave-to{opacity:0;transform:translateX(8px)}
@media (prefers-reduced-motion:reduce){.pageFade-enter-active,.pageFade-leave-active{transition:none;transform:none}}

/* ============================================================================
 * 2026-09-13（送审反馈 #2）：手动收起后，鼠标移入侧栏图标区 → 自动展开；移出 → 收起
 *   前提：**只有「手动点击收起」这个状态才生效**（body.sb-collapsed 由 toggleSidebar 写入，
 *         并持久化到 localStorage）—— 手动展开时不会因为移入移出而反复收放。
 *   做法：hover 时给 body 加 .sb-hover，侧栏临时恢复完整宽度并作为**覆盖层**浮在内容之上
 *         （不改变 .main 的 margin，避免主内容来回抖动）；移出即移除 class。
 *   动画：复用 .sidebar 上的 width transition。
 * ============================================================================ */
body.sb-collapsed.sb-hover .sidebar{
  width:220px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  z-index:120;
}
body.sb-collapsed.sb-hover .sidebar-logo{text-align:left;padding:18px 16px}
body.sb-collapsed.sb-hover .sb-logo-txt{display:inline}
body.sb-collapsed.sb-hover .sb-toggle{right:8px;top:16px;bottom:auto;transform:none;width:22px}
body.sb-collapsed.sb-hover .sidebar-controls{flex-direction:row;gap:6px;padding:10px 12px;align-items:center}
body.sb-collapsed.sb-hover .sidebar-controls .control-chip{width:auto;height:auto;padding:4px 10px;border-radius:10px}
body.sb-collapsed.sb-hover .sidebar-controls .control-chip>span:not(.ic){display:inline}
body.sb-collapsed.sb-hover .sidebar-nav li{justify-content:flex-start;padding:8px 14px;margin:1px 6px}
body.sb-collapsed.sb-hover .sidebar-nav li>span:not(.ic){display:inline}
body.sb-collapsed.sb-hover .sidebar-nav .nav-section{
  font-size:11px;padding:10px 14px 4px;text-align:left;letter-spacing:.5px;
}
body.sb-collapsed.sb-hover .sidebar-nav .nav-section::before{content:none}
body.sb-collapsed.sb-hover .sidebar-footer{justify-content:flex-start;padding:12px 16px}
body.sb-collapsed.sb-hover .sidebar-footer>span:not(.ic){display:inline}

/* 2026-10-05（#346）子账户页「打印授权账户」：桌面表格 ⇄ 手机卡片，两套版式按视口切换
   （与 #115 结算账单双版式同一套路）。这张表 860px 宽在手机上被 302px 的父级裁掉，
   列宽是 160/100/280 这类固定值压不动，所以手机上换卡片；桌面一张都不多渲染。 */
.pa-cards{display:none}
@media(max-width:767px){.pa-cards{display:block}.pa-table{display:none}}