/* ============================================================
   custom-select.css —— 通用自定义下拉选择（替换浏览器原生 select）
   原生 <select> 保留在 DOM 中（作为取值源），仅做视觉隐藏；
   对外观/选项列表完全自绘，解决各主题下 option 对比度不可控的问题。
   ============================================================ */

.cs-root {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* 原生 select 视觉隐藏但保留在 DOM 中，保证旧代码的 .value / .disabled / 事件依旧可用 */
.cs-root > select.cs-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

/* 触发器复用原 select 的 class（由 JS 复制过来），这里只补交互与布局属性 */
button.cs-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  text-align: left;
  font-family: inherit;
  line-height: 1.45;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

button.cs-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 原 select 内联宽度为 auto 时，触发器也按内容自适应 */
.cs-root.cs-auto > button.cs-trigger {
  width: auto;
}

.cs-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cs-trigger-label.is-placeholder {
  opacity: 0.55;
}

.cs-caret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  opacity: 0.65;
  transition: transform 0.22s ease;
}

.cs-caret svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cs-root.cs-open .cs-caret {
  transform: rotate(180deg);
}

/* ===== 选项面板 ===== */
.cs-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 9000;
  display: none;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  max-width: min(380px, 88vw);
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border-radius: 10px;
  background: #1b1d25;
  border: 1px solid rgba(201, 168, 76, 0.28);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.58);
  animation: csMenuIn 0.14s ease;
}

@keyframes csMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cs-root.cs-open .cs-menu {
  display: block;
}

.cs-root.cs-dropup .cs-menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.cs-root.cs-flip .cs-menu {
  left: auto;
  right: 0;
}

.cs-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s ease, color 0.13s ease;
}

.cs-opt:hover,
.cs-opt.cs-active {
  background: rgba(201, 168, 76, 0.16);
  color: #f0d682;
}

.cs-opt.is-selected {
  color: #e5c463;
  font-weight: 600;
}

.cs-opt.is-disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.cs-opt-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-opt-check {
  flex: 0 0 auto;
  width: 14px;
  text-align: center;
  font-size: 0.72rem;
  opacity: 0;
}

.cs-opt-check svg {
  display: inline-block;
  vertical-align: middle;
}

.cs-opt.is-selected .cs-opt-check {
  opacity: 1;
}

/* 滚动条 */
.cs-menu::-webkit-scrollbar { width: 8px; }
.cs-menu::-webkit-scrollbar-track { background: transparent; }
.cs-menu::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.28);
  border-radius: 4px;
}
.cs-menu::-webkit-scrollbar-thumb:hover { background: rgba(201, 168, 76, 0.45); }

/* ===== 浅色主题 ===== */
[data-theme="light"] .cs-menu {
  background: #ffffff;
  border-color: rgba(179, 134, 0, 0.3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

[data-theme="light"] .cs-opt {
  color: #333333;
}

[data-theme="light"] .cs-opt:hover,
[data-theme="light"] .cs-opt.cs-active {
  background: rgba(179, 134, 0, 0.12);
  color: #8a6a00;
}

[data-theme="light"] .cs-opt.is-selected {
  color: #a97f00;
}

[data-theme="light"] .cs-menu::-webkit-scrollbar-thumb {
  background: rgba(179, 134, 0, 0.3);
}

/* ===== 蓝色主题 ===== */
[data-theme="blue"] .cs-menu {
  background: #10192b;
  border-color: rgba(120, 170, 255, 0.3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
}

[data-theme="blue"] .cs-opt:hover,
[data-theme="blue"] .cs-opt.cs-active {
  background: rgba(120, 170, 255, 0.18);
  color: #a8c8ff;
}

[data-theme="blue"] .cs-opt.is-selected {
  color: #8fb6ff;
}

/* ===== 与既有组件的外观衔接 ===== */
/* settings 页原本用 ::after 画箭头，改用自绘箭头后隐藏它 */
.settings-select-wrap:has(> .cs-root)::after,
.settings-select-wrap.cs-host::after {
  display: none;
}

/* 搜索页高级面板：原 select 无 class，补齐与同排输入框一致的观感 */
.ds-adv-ctl .cs-trigger {
  padding: 7px 10px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
}

.ds-adv-ctl .cs-trigger:hover {
  border-color: rgba(212, 175, 55, 0.55);
}

.ds-adv-ctl .cs-root.cs-open .cs-trigger {
  border-color: rgba(212, 175, 55, 0.55);
}

/* 窄容器（筛选栏）里菜单可稍宽，避免中文选项被截断 */
.filter-bar .cs-menu,
.upl-field .cs-menu {
  min-width: 100%;
}

/* 成员页排序控件：还原原来 180px 的尺寸，窄屏/触屏改为整行 */
.member-adv-sort .cs-root {
  width: 180px;
}

@media (max-width: 768px), (pointer: coarse) {
  .member-adv-sort .cs-root {
    width: 100% !important;
    display: block !important;
  }

  .member-adv-sort .cs-trigger {
    height: 44px;
    font-size: 1rem;
  }
}