/*!
 * web/assets/css/index/06-dark-patch.css
 * 暗黑补齐 / 销售开单分卡 / 商品卡片
 *
 * 本文件由 tools/split_spa.py 从单文件 SPA 机械拆出，请勿手工改动切分边界。
 * 加载顺序由入口 HTML 统一控制（经典 script 共享全局词法环境）。
 */

/* 子页面顶部导航栏暗黑兼容 */
:root.dark .ep-navbar .el-icon{color:var(--tc)}
/* 对账预览弹窗内硬编码灰色文字 */
/* 弹窗/浮层内联硬编码浅色背景与深色文字：暗黑模式下统一替换为主题变量（很多弹窗“不兼容暗黑”的根因） */
:root.dark [style*="background:#fff"],:root.dark [style*="background: #fff"],:root.dark [style*="background:#ffffff"]{background:var(--cd)!important}
:root.dark [style*="color:#000"],:root.dark [style*="color: #000"],:root.dark [style*="color:#333"],:root.dark [style*="color:#666"]{color:var(--ts)!important}
/* 打印/三联单在暗黑下仍有白底黑字，强制跟随主题 */
:root.dark .print-paper{background:var(--cd);color:var(--tc);border-color:var(--bd)}
:root.dark .preview-triplicate .tri-receipt{background:#fff;color:#000}
:root.dark .preview-triplicate .tri-receipt .tri-label,:root.dark .preview-triplicate .tri-receipt .tri-contact,:root.dark .preview-triplicate .tri-receipt .tri-bank{color:#333}
:root.dark .preview-triplicate .tri-receipt .tri-table th,:root.dark .preview-triplicate .tri-receipt .tri-table td{color:#000;border-color:#333}
:root.dark .preview-triplicate .tri-receipt .tri-table th{background:#f5f5f5}
/* 日历选择浮层：去掉多余边框（列表/弹窗） */
/* 搜索框在暗黑下确保浮于内容之上，避免被遮挡 */
:root.dark .preview-content{background:var(--cd);color:var(--tc)}
:root.dark .credit-banner{color:#fff}
/* 供应商余额行：各金额之间留间距，避免数字连在一起 */
.sup-balance{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 16px;font-size:13px;color:var(--ts);background:var(--bg);border-radius:8px;margin:0 16px 8px}
.sup-balance span{white-space:nowrap}
.sup-balance__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;width:100%}
.sup-balance__cell{display:inline-flex;flex-direction:column;gap:2px;min-width:0}
.sup-balance__cell.main .sup-balance__val{color:var(--pci);font-size:16px}
.sup-balance__lbl{font-size:12px;color:var(--ts);line-height:1.2}
.sup-balance__val{font-size:14px;color:var(--tc);font-weight:600;line-height:1.2}
.sup-balance__cell.c-red .sup-balance__val{color:#ee0a24}
.sup-balance__cell.c-green .sup-balance__val{color:#07c160}
/* 销售开单：四大区块分卡（门店/客户选择条、商品、购物车） */
.pos-bar{display:flex;gap:10px;margin-bottom:10px}
.pos-bar__item{position:relative;flex:1;display:flex;flex-direction:column;gap:2px;background:var(--cd);border:1px solid var(--bd);border-radius:12px;padding:12px;box-shadow:0 2px 10px rgba(0,0,0,.06);cursor:pointer}
.pos-bar__label{font-size:12px;color:var(--ts)}
.pos-bar__val{font-size:14px;font-weight:600;color:var(--tc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:16px}
/* #173 收银台顶部的门店名/客户名实测截掉 32px（"流程测试批发…"），开单时认错门店的代价比多一行大得多。 */
@media(max-width:767px){.pos-bar__val{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-all;line-height:1.3;padding-right:8px}}
.pos-bar__val.muted{color:var(--ts);font-weight:400}
.pos-bar__item .el-icon{position:absolute;right:12px;top:12px;color:var(--ts)}
.pos-cart{background:var(--cd);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;margin-top:10px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.pos-cart__head{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:6px;color:var(--tc)}
.pos-cart__clear{font-size:12px;color:var(--pci);cursor:pointer;font-weight:400}
.pos-cart__item{padding:8px 0;border-bottom:1px solid var(--bd)}
.pos-cart__item:last-child{border-bottom:none}
.pos-cart__row{display:flex;justify-content:space-between;align-items:center}
.pos-cart__name{font-weight:600;color:var(--tc)}
.pos-cart__del{color:var(--ts);font-size:18px}
.pos-cart__meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ts);margin:2px 0}
.pos-cart__ctrl{margin-top:6px}
/* 批次86 续四 #366③：轨道数原来写在 pos.js 模板的行内 style 上（压死了 19-pos-cart.css
   在 max-width:360px 里改的 1fr 1fr，那条只能靠 !important 抢回来）。声明搬进基础规则，
   值沿用行内那份（auto-fit + 136px 下限），断点规则不再需要强权。 */
.pos-cart__ctrl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:6px}
.pos-cart__ctrl-item{display:flex;flex-direction:column;gap:2px}
.pos-cart__ctrl-label{font-size:11px;color:var(--ts);font-weight:500}
.pos-cart__subtotal{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--bd);font-size:13px}
.pos-cart__subtotal b{color:var(--pci);font-size:15px}
/* 客户-商品上次成交价提示（销售开单） */
.pos-cart__hints{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;margin-top:3px}
.cpp-tag{padding:1px 6px;border-radius:8px;line-height:1.6;white-space:nowrap}
.cpp-tag--last{background:rgba(0,122,255,.12);color:var(--pci)}
.cpp-tag--manual{background:rgba(255,149,0,.16);color:var(--wc)}
.cpp-tag--disc{background:rgba(52,199,89,.16);color:var(--sc)}
.cpp-clear{margin-left:auto;color:var(--ts);cursor:pointer;text-decoration:underline}
:root.dark .cpp-tag--last{background:rgba(10,132,255,.26)}
:root.dark .cpp-tag--manual{background:rgba(255,159,10,.26)}
:root.dark .cpp-tag--disc{background:rgba(48,209,88,.26)}
.pos-cart__line{display:flex;align-items:flex-start;gap:8px}
.pos-cart__img{width:48px;height:48px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--cb)}
.pos-cart__main{flex:1;min-width:0}
/* 商品卡片（销售开单） */
.pos-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
/* 2026-09-26（#86 窄屏实测）：销售开单工具条 5 个控件在 375px 下不换行，
   最后一个「补换下单」按钮右边界 380 > 视口 375（被切 5px，且父级 overflow:visible
   所以既滚不到也点不全）。窄屏允许换行；宽屏保持一行不变。 */
/* #173 收银台工具条：原来 ≤420px 直接换行，5 个控件占 94px 两行，
   第一个商品卡被推到 319px —— 手机上开单要先把首屏让给商品。改成单行横滑（控件一个不少，高度砍半）。 */
@media(max-width:767px){.pos-toolbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .pos-toolbar::-webkit-scrollbar{display:none}
  .pos-toolbar > *{flex:none}}
.pos-toolbar__label{font-size:13px;color:var(--tc);font-weight:600}
.pos-layout-toggle{margin-left:auto;display:inline-flex;border:1px solid var(--bd);border-radius:16px;overflow:hidden}
.pos-layout-toggle span{font-size:12px;padding:4px 12px;color:var(--ts);cursor:pointer;transition:all .15s ease}
.pos-layout-toggle span.on{background:var(--pc);color:#fff;font-weight:600}
/* #86（2026-09-26 实测）：POS 的「左图右文 / 上图下文」切换器被父级 flex 挤成 61px 宽，
   两个按钮各 36px 装不下 4 个字 → 竖排成 36×76（一行一个字）。
   原以为是 44px 触摸下限那批改动撑坏的，用 CSSOM 临时禁用 14-ui-unify 复测：带/不带完全一致，
   确认是既有缺陷。这里补两样：按钮不许换行、整个切换器不许被压缩。
   窄屏另给一份更小的水平内边距，避免为了不换行把整行顶出视口（已实测 375 宽 scrollWidth 仍为 375）。 */
.pos-layout-toggle{flex:none;white-space:nowrap}
.pos-layout-toggle span{white-space:nowrap}
@media(max-width:768px){.pos-layout-toggle span{padding:4px 8px}}
.pos-sec-title{font-size:13px;color:var(--ts);font-weight:600;margin:6px 2px}
.pos-grid-left{display:flex;flex-direction:column;gap:10px}
.pos-grid-top{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pos-card{background:var(--cd);border:1px solid var(--bd);border-radius:12px;padding:10px;box-shadow:0 2px 10px rgba(0,0,0,.05);position:relative}
.pos-card--incart{box-shadow:inset 3px 0 0 var(--pc)}
.pos-card__badge{position:absolute;top:8px;right:8px;min-width:18px;height:18px;padding:0 5px;background:var(--pc);color:#fff;font-size:11px;border-radius:9px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.pos-card--left{display:flex;gap:10px;align-items:stretch}
.pos-card__img{width:64px;height:64px;border-radius:10px;object-fit:contain;background:var(--cb);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--ts);cursor:pointer;overflow:hidden}
/* 2026-09-15（送审反馈）：原为 object-fit:cover —— 商品图（尤其竖版）被裁成一条，
   用户看到的是「半截衣服」。改为 contain 自适应完整显示，容器底色兜住留白。 */
.pos-card__img img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.pos-card--top .pos-card__img{width:100%;height:150px}
.pos-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pos-card__name{font-weight:600;color:var(--tc);font-size:14px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pos-card__meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ts)}
.pos-card__price{font-weight:700;color:var(--pci);font-size:15px}
.pos-card__stock{font-size:12px;color:var(--ts)}
/* #182：价格与库存同一行（两列商品卡要靠这一行省出来的高度换密度，信息不减） */
.pos-card__sum{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pos-card__ctrl{display:flex;align-items:center;gap:8px;margin-top:6px}
.pos-card--left .pos-card__ctrl{justify-content:space-between}
/* 2026-09-22 多分辨率扫描（390px 实测）：pos-card--left 是「图 + 文字 + 操作按钮」一行三列的
   flex 布局，窄屏下两个按钮（加入购物车 / 分享商品）要掉 230px+，把 .pos-card__body 压到 40px，
   结果价格「¥120.00」和「库存：-18」直接被裁掉 —— 收银台看不到价格属于严重可用性缺陷。
   窄屏让操作区换行独占一行，文字区拿回应有宽度；宽屏布局完全不变。 */
@media (max-width:767px){
  .pos-card--left{flex-wrap:wrap}
  .pos-card--left .pos-card__ctrl{flex:0 0 100%;justify-content:flex-start;margin-left:0}
  .pos-card--left .pos-card__ctrl .el-button:first-child{flex:1}
  .pos-card--left .pos-card__ctrl .el-button+.el-button{margin-left:0}
}
.pos-card--top .pos-card__ctrl{flex-direction:column;align-items:stretch;gap:6px}
.pos-card--top .pos-card__ctrl .el-button{width:100%;margin-left:0}
.pos-cart__price,.pos-cart__disc{flex:1;min-width:120px}.pos-prod-tip{text-align:center;color:var(--ts);font-size:13px;padding:24px 12px}.pos-footer{display:flex;gap:10px;margin-top:12px}.pos-footer .el-button{flex:1;margin-left:0}.pos-due{color:var(--dc)!important;font-weight:600}
.pos-prod--incart{box-shadow:inset 3px 0 0 var(--pc)}
.pos-prod__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-right:6px;background:var(--pc);color:#fff;font-size:11px;border-radius:9px;font-weight:600}
.pos-pm-wrap{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pos-pm{display:inline-flex;align-items:center;padding:4px 12px;border:1px solid var(--bd);border-radius:16px;font-size:13px;color:var(--ts);background:var(--cb);cursor:pointer;transition:all .15s ease}
.return-pick-item{display:flex;align-items:center;gap:10px;padding:12px 6px;border-bottom:1px solid var(--bd);cursor:pointer}
.return-pick-item:hover{background:var(--cb)}
.return-pick-item>b{font-size:14px;color:var(--tc)}
.return-pick-cust{flex:1;color:var(--ts);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.return-pick-amt{color:var(--pci);font-weight:600;font-size:13px}
.return-pick-list{max-height:46vh;overflow:auto;border:1px solid var(--bd);border-radius:10px;margin-top:8px;background:var(--cd)}
.return-pick-list .return-pick-item{padding:10px 12px;border-bottom:1px solid var(--bd)}
.return-pick-list .return-pick-item:last-child{border-bottom:none}
.return-pick-item__main{flex:1;min-width:0}
.return-pick-item__no{display:flex;align-items:center;gap:8px;font-size:14px}
.return-pick-item__no b{color:var(--tc)}
.return-pick-item__meta{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:12px;color:var(--ts)}
.return-pick-status{padding:1px 6px;border-radius:4px;background:var(--cb);font-size:11px}
.pos-pm.on{background:var(--pc);border-color:var(--pc);color:#fff;font-weight:600}
.pos-pay{background:var(--cb);border:1px solid var(--bd);border-radius:10px;padding:10px;margin-top:8px}
.pos-pay__head{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--tc);font-weight:600;margin-bottom:8px}
.pos-pay__sum{font-size:12px;color:var(--ts);font-weight:400}
.pos-pay__sum.warn{color:var(--danger)}
.pos-pay__row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pos-pay__method{display:flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--bd);border-radius:8px;font-size:13px;color:var(--tc);background:var(--cd);cursor:pointer;min-width:96px;justify-content:space-between}
.pos-pay__amt{flex:1;min-width:80px}
.pos-pay__custom{flex:1;min-width:80px}
.pos-pay__del{color:var(--ts);font-size:18px;flex:0 0 auto}
.pos-pay__add{display:inline-flex;align-items:center;gap:4px;color:var(--pci);font-size:13px;cursor:pointer;margin-top:2px}
.pos-pay__bal{font-size:12px;color:var(--ts);margin-top:6px}
.pos-sheet__head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pos-sheet__img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.pos-sheet__info{flex:1;min-width:0}
.pos-sheet__name{font-weight:600;color:var(--tc);font-size:15px}
.pos-sheet__meta{display:flex;gap:8px;font-size:12px;color:var(--ts);margin:2px 0}
.pos-sheet__price{color:var(--pci);font-weight:700;font-size:16px}
.pos-sheet__stock b{font-variant-numeric:tabular-nums}
.pos-sheet__lowstock{margin-top:8px;padding:8px 10px;border-radius:8px;background:rgba(198,40,40,.08);border:1px solid rgba(198,40,40,.35);color:#C62828;line-height:1.5}
.pos-sheet__lowstock .el-button{margin-left:0}
.pos-sheet__close{font-size:20px;color:var(--ts);flex:0 0 auto}
.pos-sheet__sec{margin-bottom:14px}
.pos-sheet__label{font-size:13px;color:var(--ts);margin-bottom:8px}
.pos-sheet__opts{display:flex;gap:8px;flex-wrap:wrap}
.pos-sheet__opt{padding:6px 14px;border:1px solid var(--bd);border-radius:8px;font-size:13px;color:var(--tc);background:var(--cb);cursor:pointer;transition:all .15s ease}
.pos-sheet__opt.on{border-color:var(--pc);background:var(--pc);color:#fff;font-weight:600}
:root.dark .pos-pm,.root.dark .pos-pm:root.dark .pos-sheet__opt,.root.dark .pos-sheet__opt{background:var(--bg)}
.c-red{color:var(--danger)!important}.c-green{color:var(--success)!important}.c-blue{color:var(--pci)!important}

/* ===== 2026-09-07：销售开单门店体系 ===== */
.pos-toolbar__all{display:inline-flex;align-items:center;gap:4px;margin-left:12px}
.pos-card__store{font-size:11px;color:var(--pci);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pos-card__store.muted{color:var(--ts)}
.pos-card--nosell .pos-card__img,.pos-card--nosell .pos-card__body{opacity:.55;filter:grayscale(.3)}
.pos-card--nosell .pos-card__ctrl{opacity:.85}
.pos-card--top .pos-card__ctrl .el-button{width:100%;margin-left:0}
.pos-card--top .pos-card__ctrl .el-button+.el-button{margin-top:6px;flex:none;width:100%}
.pos-footer .el-button{flex:1;margin-left:0}

/* ============================================================
 * 2026-09-22（图3 反馈：下拉选择暗黑模式未兼容，选中项文字与背景同色看不见）
 * 实测（本机 Chrome + 真实登录态，销售提成页）：popper 底色已经是深色 #1D1E1F，
 * 但 .el-select-dropdown__item 的计算色是浅色主题的 #1C1C1E —— 等于黑底黑字。
 * 不再依赖 Element Plus 的 dark 变量链（它和本站 token 是两套），弹层一律用项目自己的变量钉死。
 * 覆盖：select / dropdown / cascader / date-picker / autocomplete 的面板、条目、悬停与选中态。
 * ==========================================================*/
html.dark .el-popper,
html.dark .el-select-dropdown,
html.dark .el-dropdown-menu,
html.dark .el-picker-panel,
html.dark .el-autocomplete-suggestion,
html.dark .el-cascader__dropdown,
html.dark .el-select__popper,
html.dark .el-popper.is-light{
  background:var(--cd);
  color:var(--tc);
  border-color:var(--bd);
}
html.dark .el-popper .el-popper__arrow::before{background:var(--cd);border-color:var(--bd)}
html.dark .el-select-dropdown__item,
html.dark .el-dropdown-menu__item,
html.dark .el-cascader-node,
html.dark .el-autocomplete-suggestion__list li,
html.dark .el-picker-panel__body,
html.dark .el-date-table td,
html.dark .el-month-table td,
html.dark .el-year-table td{color:var(--tc)}
html.dark .el-select-dropdown__item.is-disabled,
html.dark .el-dropdown-menu__item.is-disabled{color:var(--ts)}
html.dark .el-select-dropdown__item.is-hovering,
html.dark .el-dropdown-menu__item:not(.is-disabled):hover,
html.dark .el-dropdown-menu__item:focus,
html.dark .el-cascader-node:not(.is-disabled):focus,
html.dark .el-cascader-node:not(.is-disabled):hover{background:var(--cb);color:var(--tc)}
html.dark .el-select-dropdown__item.is-selected{color:var(--pci);font-weight:600}
html.dark .el-select-dropdown__empty,
html.dark .el-picker-panel__link-btn{color:var(--ts)}

/* ==========================================================
 * 2026-09-22（送审反馈）：暗黑模式下「下拉已经选了东西但看不出来」。
 * 上面那段只钉住了弹层（dropdown 面板），触发器（框体本身）没管，于是：
 *   · Element Plus 2.x 把选中项的标签渲染在 .el-select__placeholder 里（跟占位符同一个节点，
 *     靠 .is-transparent 区分「没选」与「已选」），暗黑下它走的是 EP 自己的灰字变量，
 *     已选和未选看起来一模一样 —— 用户反馈就是「看不到已选择的内容」。
 *   · 不可搜索（无 filterable）的 el-select 没有 .el-select__input，标签落在
 *     .el-select__selected-item 上，而 .el-select__selection 在暗黑下继承到的颜色接近底色；
 *     多选模式的 .el-tag 同样继承它 → 文字跟着背景走。
 * 一律用项目自己的 token 钉死：已选=主文本色，未选=次要色，多选标签=主文本色 + 卡片底。
 * ==========================================================*/
html.dark .el-select__selection,
html.dark .el-select__selected-item{color:var(--tc)}
html.dark .el-select__placeholder:not(.is-transparent){color:var(--tc)}
html.dark .el-select__placeholder.is-transparent{color:var(--ts);opacity:1}
html.dark .el-select__input{color:var(--tc)}
html.dark .el-select__input::placeholder{color:var(--ts)}
html.dark .el-select__tags .el-tag{background:var(--cb);color:var(--tc);border-color:var(--bd)}
html.dark .el-select__tags .el-tag .el-tag__close{color:var(--ts);background:transparent}
html.dark .el-select__wrapper{background:var(--cd);box-shadow:0 0 0 1px var(--bd) inset}
html.dark .el-select.is-disabled .el-select__wrapper{background:var(--cb)}
html.dark .el-select.is-disabled .el-select__placeholder,
html.dark .el-select.is-disabled .el-select__selected-item{color:var(--ts)}
/* 已选项在弹层里要有颜色差（以前只靠 font-weight，深色下几乎看不出哪条是选中的） */
html.dark .el-select-dropdown__item.is-selected{color:var(--pci);font-weight:600;background:var(--cb)}

/* 2026-09-22（真机 Edge headless 截图取证）：暗黑下「已选中的值」整个不显示 —— 不是颜色问题。
   Element Plus 把选中标签渲染成 `.el-select__placeholder{position:absolute;z-index:-1}`，
   而 `.el-select__wrapper` 没有形成层叠上下文，负 z-index 于是落到祖先背景之后：
   `document.elementFromPoint(文字位置)` 返回的是 `.el-select__input`，像素上什么都看不见，
   但 DOM 里 innerText、color(#F5F5F7)、opacity、宽高全正常 —— 所以只看 DOM/computed 会误判成「已修好」。
   实测：亮色模式正常（EP 自己的白底不遮），只有暗黑出问题，与用户反馈一致。
   试过 `isolation:isolate`（无效），把占位标签抬到 z-index:1 才真正显示。
   只抬「已选中」（:not(.is-transparent)），占位符仍按 EP 原分层，避免输入时压住查询文字。 */
html.dark .el-select__placeholder:not(.is-transparent){z-index:1}