/* [4.190] 客户 / 品种「打字就能找」的样式，配 static/pick-search.js。 */

/* ---- 原生下拉藏起来，原位换成一个长得一样的按钮 ---- */
.cx-pick-native{display:none !important}

/* 按钮会带上原 select 的 class（sl-select / sl-date-input …）和行内样式，那些规则照常生效；
   :where() 零权重的这一段只给「没有 class 可抄」的地方兜底，谁写了都压得住它。 */
:where(.cx-pick-btn){display:block;width:100%;padding:10px 12px;border:1.5px solid var(--border,#e5e7eb);
  border-radius:8px;font-size:15px;background-color:#fafbfc}
.cx-pick-btn{position:relative;min-width:0;text-align:left;color:var(--text,#1f2937);font-family:inherit;
  line-height:1.15;overflow:hidden;cursor:pointer;background-image:none !important;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
/* 字放在里层 span，给箭头让位靠它的右边距——按钮自己的内边距与原 select 一模一样，
   在 flex 行里（出库/销售筛选那一排两个下拉）分到的宽度才和原来一样 */
.cx-pick-txt{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:14px}
/* 还没有选项（文字为空）时也要有一行高，不然塌成一条缝 */
.cx-pick-txt::before{content:'\200b'}
/* 下拉箭头：和原 select 用的是同一张小图（.field select / .sl-select 那张） */
.cx-pick-btn::after{content:'';position:absolute;right:10px;top:50%;width:12px;height:12px;margin-top:-6px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center}
.sl-select.cx-pick-btn::after{right:8px}
.field .cx-pick-btn::after{right:12px}
.cx-pick-btn:focus{outline:none;border-color:var(--pri,#2d6a4f)}
.cx-pick-btn:disabled{opacity:.55;cursor:not-allowed}
.cx-pick-btn[hidden]{display:none !important}   /* 原 select 被 hidden 藏起来时跟着藏（上面 display:block 会压过浏览器默认） */

/* 原 select 靠「标签选择器」拿到的样式（.field select、.lp select），按钮是 button 吃不到，照抄一份 */
.field .cx-pick-btn{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;
  font-size:15px;background-color:#fafbfc}
.lp .cx-pick-btn{display:block;width:100%;margin:5px 0 9px;padding:9px 10px;border:1.5px solid #ded5c7;
  border-radius:9px;background-color:#fff;font-size:14px;font-weight:400;line-height:1.35}
/* 这两处原 select 是浏览器原生外观，自带内边距，比同字号按钮高两三像素；它们旁边就挨着原生下拉，补齐免得高低不平 */
.sl-date-input.cx-pick-btn{line-height:1.3}

/* ---- 弹出的「搜索框 + 列表」：贴顶，手机键盘弹起来也不挡搜索框 ---- */
.cx-pick-mask{position:fixed;inset:0;z-index:100500;background:rgba(0,0,0,.45);display:flex;
  justify-content:center;align-items:flex-start;padding:max(12px,env(safe-area-inset-top)) 12px 12px}
.cx-pick-sheet{width:100%;max-width:420px;max-height:min(calc(100% - 4vh),560px);margin-top:4vh;background:#fff;
  border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.cx-pick-head{flex:none;display:flex;gap:8px;align-items:center;padding:12px;border-bottom:1px solid #f0f0f0}
.cx-pick-q{flex:1;min-width:0;padding:10px 12px 10px 34px;border:1.5px solid var(--pri,#2d6a4f);border-radius:8px;
  font-size:16px;font-family:inherit;color:var(--text,#1f2937);outline:none;-webkit-appearance:none;appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 11px center}
.cx-pick-q::-webkit-search-decoration{-webkit-appearance:none}
.cx-pick-x{flex:none;border:none;background:none;color:var(--text2,#4b5563);font-size:15px;padding:8px 4px;cursor:pointer}
.cx-pick-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.cx-pick-opt{position:relative;padding:13px 40px 13px 16px;font-size:15px;color:var(--text,#1f2937);
  border-bottom:1px solid #f5f5f5;cursor:pointer;word-break:break-all}
.cx-pick-opt:active,.cx-pick-opt.act{background:var(--pri-bg,#eef5ef)}
.cx-pick-opt.cur{color:var(--pri,#2d6a4f);font-weight:600}
.cx-pick-opt.cur::after{content:'✓';position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.cx-pick-opt.off{color:var(--text3,#9ca3af);cursor:default}
.cx-pick-empty{padding:28px 16px;text-align:center;color:var(--text3,#9ca3af);font-size:14px}

/* ---- 按钮格子上方的搜索框 ---- */
.cx-grid-search{position:relative;margin:0 0 10px}
.cx-grid-q{display:block;width:100%;padding:9px 36px 9px 34px;border:1.5px solid var(--border,#e5e7eb);border-radius:8px;
  font-size:15px;font-family:inherit;color:var(--text,#1f2937);outline:none;-webkit-appearance:none;appearance:none;
  background:#fafbfc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 11px center}
.cx-grid-q:focus{border-color:var(--pri,#2d6a4f);background-color:#fff}
.cx-grid-q::-webkit-search-cancel-button,.cx-grid-q::-webkit-search-decoration{-webkit-appearance:none;display:none}
.cx-grid-clear{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;
  background:none;color:var(--text3,#9ca3af);font-size:14px;cursor:pointer;display:none}
.cx-grid-search.has-q .cx-grid-clear{display:block}
.cx-grid-empty{font-size:13px;color:var(--text3,#9ca3af);text-align:center;padding:8px 0 12px}
.cx-pick-miss{display:none !important}

/* 触屏上全站下拉/输入框统一 16px（4.86.1，防 iOS 聚焦放大），换上来的按钮和搜索框跟齐 */
@media (pointer: coarse){
  .cx-pick-btn,.cx-grid-q{font-size:16px !important}
}