/* =================================================================
   下拉选择：单一视觉来源（2026-10-21 抽出）

   项目里有好几处下拉都长成一个样：「选择语言」「渠道类型」「区域」……
   以前 .lang-filter/.lang-list/.lang-item/.lang-empty 这份基础样式躺在
   style.css 里，只有租户后台加载得到 —— 后台管理（admin）想复用就得抄一遍，
   抄一遍就一定会走样。现在抽成独立文件，两个后台都外链它。

   新增下拉 = 复用这里的类，不要再造第二套。
   ================================================================= */

/* ---------- 基础件：搜索框 / 列表容器 / 列表行 / 空态 ---------- */
.lang-filter { width:100%; padding:6px 10px; border:1px solid #e3ebf3; border-radius:7px; margin-bottom:6px; font-size:13px; }
.lang-list { max-height:200px; overflow:auto; }
.lang-item { padding:7px 10px; border-radius:7px; cursor:pointer; font-size:14px; color:#1f3347; }
.lang-item:hover { background:#eaf6ff; }
.lang-item.active { background:#e3f2fd; color:#1565c0; font-weight:600; }
.lang-empty { padding:10px; color:#9bb0c4; font-size:13px; text-align:center; }

/* =================================================================
   通用下拉选择（.sp-*，2026-10-21）
   项目里散着一堆原生 <select>（知识库分类、企业画像、目标、语言、分页条数、
   成员、角色、渠道配置字段、后台审核状态……），浏览器默认样式（灰底方块 +
   系统箭头）和旁边「选择语言」「渠道类型」那种「搜索框 + 列表行」完全不是
   一个东西，看起来像两个产品拼起来的。这里统一升级：.sp-* 只负责布局，
   搜索框/列表行/空态直接复用上面的 .lang-* —— 不新造第二套视觉。

   配套脚本：/js/select-picker.js
   ================================================================= */
.sp-wrap { position: relative; }
.sp-wrap.sp-inline { display: inline-block; vertical-align: middle; }
.sp-trigger {
    position: relative; display: flex; align-items: center; width: 100%;
    padding: 7px 28px 7px 10px; border: 1px solid #dce6f2; border-radius: 8px;
    background: #fff; cursor: pointer; font-size: 13px; color: #1f3347;
    font-family: inherit; text-align: left; line-height: 1.5;
}
.sp-trigger:hover { border-color: #4fc3f7; background: #f5faff; }
.sp-trigger:focus-visible { outline: 2px solid #1565c0; outline-offset: -2px; }
.sp-trigger::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 10px; color: #9bb0c4; pointer-events: none;
}
.sp-cur { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-cur.is-placeholder { color: #9bb0c4; }
.sp-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
    background: #fff; border: 1px solid #e3ebf3; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20, 40, 60, .12); padding: 8px;
}
/* 键盘上下键移动时的高亮（鼠标 hover 已由 .lang-item:hover 负责） */
.sp-list .lang-item.sp-active { background: #eaf6ff; }
/* 原生 select 只作取值来源：视觉隐藏但可聚焦、可读屏。
   ⚠️ 必须写成 .sp-wrap select.sp-native（specificity 0,2,1）+ !important：
      ① `.form-row select` 是 (0,1,1)，会顶掉单类名规则；
      ② 不少 select 还带行内 padding/border/background，行内样式只能被 !important 压过。 */
.sp-wrap select.sp-native {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0 0 0 0) !important; border: 0 !important; opacity: 0 !important;
}