/* ==========================================================================
   v7-select.css —— 自研 Select（替换浏览器原生下拉菜单）
   --------------------------------------------------------------------------
   为什么自研：原生 <select> 的展开菜单由操作系统绘制，样式、动效、层级都无法
   统一（Windows 上是白底直角系统菜单、深色模式下还会闪白），与 v7 的
   Soft UI 语言冲突。

   设计：
     · 触发器沿用输入框外观（同样的 --radius-md / --shadow-inset-sm / 焦点环）
     · 弹层 = 浮起的 listbox（--shadow-xl + --radius-md），只在文字/背景/描边上区分
     · 桌面：锚定下拉，键盘 ↑↓ / Home / End / Enter / Esc / 首字母跳转，aria-activedescendant
     · 移动端：不走下拉，改由 V7.mobile.actionSheet() 底部选择（44px+ 行高、safe-area）
   颜色：全部既有令牌。
   ========================================================================== */

.v7-select {
  position: relative;
  display: block;
  min-width: 0;
}

/* ---------- 触发器 ---------- */
.v7-select__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--input-h, 40px);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  box-shadow: var(--shadow-inset-sm);
  color: var(--text-primary);
  font-size: var(--input-fs, var(--text-base));
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--m-hover) var(--ease-standard),
    background-color var(--m-hover) var(--ease-standard),
    box-shadow var(--m-hover) var(--ease-standard);
}
.v7-select__trigger:hover:not(:disabled) { border-color: var(--border-strong); }
.v7-select__trigger:focus-visible {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: var(--shadow-focus);
}
.v7-select__trigger[aria-expanded='true'] {
  border-color: var(--brand-400);
  box-shadow: var(--shadow-focus);
}
.v7-select__trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-muted);
  transition: none;
}
.v7-select.is-invalid .v7-select__trigger {
  border-color: var(--danger);
}

.v7-select__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v7-select__value.is-placeholder { color: var(--text-tertiary); font-weight: 400; }

.v7-select__chevron {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  transition: transform var(--m-hover) var(--ease-standard);
}
.v7-select__trigger[aria-expanded='true'] .v7-select__chevron { transform: rotate(180deg); }

/* ---------- 弹层（桌面） ---------- */
.v7-select__popup {
  position: fixed;
  z-index: var(--z-tooltip);
  min-width: 120px;
  max-height: 288px;
  overflow-y: auto;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-xl);
  overscroll-behavior: contain;
  animation: v7-select-in var(--m-hover) var(--ease-standard) both;
}
.v7-select__popup.is-leaving { animation: v7-select-out var(--m-panel-out) var(--ease-standard) both; }

@keyframes v7-select-in {
  from { opacity: 0; transform: scale(0.98) translateY(-2px); }
  to { opacity: 1; transform: none; }
}
@keyframes v7-select-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ---------- 选项 ---------- */
.v7-select__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min-desktop);
  padding: 0 var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--m-hover) var(--ease-standard),
    color var(--m-hover) var(--ease-standard);
}
.v7-select__option.is-active { background: var(--bg-hover); color: var(--text-primary); }
.v7-select__option[aria-selected='true'] {
  background: var(--bg-active);
  color: var(--brand-600);
  font-weight: 600;
}
.v7-select__option[aria-selected='true'].is-active { background: var(--bg-active); }
.v7-select__option[aria-disabled='true'] {
  opacity: 0.42;
  cursor: not-allowed;
}
.v7-select__option[aria-disabled='true']:hover { background: transparent; color: var(--text-tertiary); }

.v7-select__option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v7-select__option-hint {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 400;
}
.v7-select__check {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 16px;
  color: var(--brand-600);
  opacity: 0;
  transition: opacity var(--m-hover) var(--ease-standard);
}
.v7-select__option[aria-selected='true'] .v7-select__check { opacity: 1; }

.v7-select__empty {
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
}

/* ---------- 与标签/提示/错误组合（V7.select.field） ---------- */
.v7-select-field .field__label { margin-bottom: 0; }

/* ---------- reduced-motion：只留透明度，无缩放 ---------- */
@media (prefers-reduced-motion: reduce) {
  .v7-select__trigger,
  .v7-select__chevron,
  .v7-select__option,
  .v7-select__check {
    transition-duration: 1ms;
  }
  .v7-select__popup,
  .v7-select__popup.is-leaving {
    animation: none !important;
    transform: none !important;
  }
  .v7-select__trigger[aria-expanded='true'] .v7-select__chevron { transform: none; }
}
[data-reduce-motion='on'] .v7-select__popup,
[data-reduce-motion='on'] .v7-select__popup.is-leaving {
  animation-duration: 1ms !important;
}
