/**
 * 排序输入框组件样式
 * 用途：服务器列表数字权重排序输入框
 * 依赖：theme.css
 * 创建：2025-01-26
 */

.sort-order-input {
  @apply w-12 px-2 py-1 text-sm text-center rounded;
  @apply focus:outline-none focus:ring-2 focus:ring-primary-500/50;
  @apply transition-all duration-200;
  /* 使用 !important 覆盖 Tailwind 生成的硬编码值 */
  background-color: var(--input-surface-bg, #fff) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;
}

.sort-order-input:focus {
  border-color: var(--accent-color, #484cdc) !important;
}

/* 输入框 hover 状态 */
.sort-order-input:hover {
  border-color: var(--border-color) !important;
  opacity: 0.8;
}

/* 输入框禁用状态 */
.sort-order-input:disabled {
  @apply opacity-50 cursor-not-allowed;
  background-color: var(--input-surface-bg, #fff) !important;
  opacity: 0.5;
}

/* 输入框错误状态 */
.sort-order-input.error {
  border-color: var(--error-color, #ef4444);
  @apply focus:ring-red-500/50;
}

/* ========================================
   毛玻璃模式兼容
   ======================================== */
/* 注意：背景色由 --input-surface-bg 变量控制，该变量会根据毛玻璃状态自动更新 */
/* 因此不需要特殊覆盖，只需确保毛玻璃效果应用 */
body:not(.no-glassmorphism) .sort-order-input {
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}