/**
 * Dashboard 组件样式
 * @description Dashboard 专用样式，包括无边框容器和交互效果
 * @created 2025-11-03 - 无边框容器系统
 */

/* ===== 无边框容器系统 ===== */

/* 基础容器 - 无边框，微妙背景 */
.dashboard-container {
  @apply rounded-xl bg-slate-50/80 dark:bg-slate-900/50;
  @apply shadow-sm transition-all duration-200;
}

/* 悬停状态 - 轻微提升 */
.dashboard-container:hover {
  @apply shadow-md -translate-y-px;
  @apply bg-slate-100/90 dark:bg-slate-800/60;
}

/* 激活状态 - 明确反馈 */
.dashboard-container.active {
  @apply shadow -translate-y-0.5;
  @apply bg-white dark:bg-slate-800;
}

/* ===== 状态筛选器增强 ===== */

/* ===== 第二层内容容器统一背景色系统 ===== */

/* 基础：毛玻璃开启时的默认背景 */
/* .status-filter 的背景色由 glassmorphism.css 控制（body:not(.no-glassmorphism)），此处仅保留 .network-stats-inner 的规则 */
/* 统一样式属性以匹配 .status-filter（rounded-xl, shadow, overflow-hidden, cursor-pointer, transition-all） */
.network-stats-inner .grid.grid-cols-2 > div {
  background-color: var(--inner-container-bg-light-glass);
  border-radius: 0.75rem; /* 统一为 rounded-xl (0.75rem) */
  overflow: hidden; /* 匹配 overflow-hidden */
  box-shadow: var(--inner-container-shadow-light); /* 使用增强阴影变量 */
  transition: all 0.2s; /* 统一为 transition-all duration-200 */
  cursor: pointer; /* 匹配 cursor-pointer */
}

:root.dark .network-stats-inner .grid.grid-cols-2 > div {
  background-color: var(--inner-container-bg-dark-glass);
  box-shadow: var(--inner-container-shadow-dark); /* 使用增强阴影变量 */
}

/* 日间 + 毛玻璃关闭 - 状态筛选器 */
html:not(.dark) body.no-glassmorphism .status-filter {
  background-color: var(--inner-container-bg-light-no-glass);
  box-shadow: var(--inner-container-shadow-light);
}

/* 日间 + 毛玻璃关闭 - 网络统计指标 */
html:not(.dark) body.no-glassmorphism .network-stats-inner .grid.grid-cols-2 > div {
  background-color: var(--inner-container-bg-light-no-glass);
  box-shadow: var(--inner-container-shadow-light);
}

/* 夜间 + 毛玻璃关闭 - 状态筛选器 */
:root.dark body.no-glassmorphism .status-filter {
  background-color: var(--inner-container-bg-dark-no-glass);
  box-shadow: var(--inner-container-shadow-dark);
}

/* 夜间 + 毛玻璃关闭 - 网络统计指标 */
:root.dark body.no-glassmorphism .network-stats-inner .grid.grid-cols-2 > div {
  background-color: var(--inner-container-bg-dark-no-glass);
  box-shadow: var(--inner-container-shadow-dark);
}

/* 状态筛选器特定样式 */
.status-filter {
  transition: background-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--inner-container-shadow-light); /* 添加基础阴影 */
}

:root.dark .status-filter {
  box-shadow: var(--inner-container-shadow-dark); /* 暗色模式阴影 */
}

/* 激活状态 - 稍微加深背景（使用统一变量） */
/* 注意：data-status 属性仅用于 JavaScript 逻辑，不影响样式 */
.status-filter.active {
  background-color: var(--inner-container-active-bg-light-glass);
  box-shadow: var(--inner-container-shadow-light);
}

:root.dark .status-filter.active {
  background-color: var(--inner-container-active-bg-dark-glass);
  box-shadow: var(--inner-container-shadow-dark);
}

/* 日间 + 毛玻璃关闭 - 激活状态 */
html:not(.dark) body.no-glassmorphism .status-filter.active {
  background-color: var(--inner-container-active-bg-light-no-glass);
}

/* 夜间 + 毛玻璃关闭 - 激活状态 */
:root.dark body.no-glassmorphism .status-filter.active {
  background-color: var(--inner-container-active-bg-dark-no-glass);
}

/* ===== 微交互动画 ===== */

/* 平滑的状态转换 */
.status-filter {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-filter.active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Hover 状态统一定义（四种组合） ===== */

/* 日间 + 毛玻璃开启 - hover */
html:not(.dark) body:not(.no-glassmorphism) .status-filter.bg-theme-inner:hover {
  background-color: var(--status-filter-hover-bg-light-glass);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* 夜间 + 毛玻璃开启 - hover */
:root.dark body:not(.no-glassmorphism) .status-filter.bg-theme-inner:hover {
  background-color: var(--status-filter-hover-bg-dark-glass);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* 日间 + 毛玻璃关闭 - hover */
html:not(.dark) body.no-glassmorphism .status-filter.bg-theme-inner:hover {
  background-color: var(--status-filter-hover-bg-light-no-glass);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* 夜间 + 毛玻璃关闭 - hover */
:root.dark body.no-glassmorphism .status-filter.bg-theme-inner:hover {
  background-color: var(--status-filter-hover-bg-dark-no-glass);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

/* 焦点状态 - 可访问性 */
.dashboard-container:focus,
.status-filter:focus {
  @apply outline-none ring-2 ring-indigo-500/50 ring-offset-2 ring-offset-white dark:ring-offset-slate-900;
}

/* ===== 下拉菜单无边框设计 ===== */

/* 下拉菜单分隔线样式 - 使用主题通用配色变量 */
.dropdown-divider {
  border-color: var(--divider-border-light);
}

:root.dark .dropdown-divider {
  border-color: var(--divider-border-dark);
}

/* 下拉菜单 - 无边框，增强阴影 */
#sort-dropdown-menu,
#group-dropdown-menu,
#dashboard-settings-dropdown-menu,
#expiry-details-panel {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1),
              0 4px 6px rgba(0, 0, 0, 0.05),
              0 0 0 1px rgba(0, 0, 0, 0.05); /* 微妙的边缘提示 */
}

:root.dark #sort-dropdown-menu,
:root.dark #group-dropdown-menu,
:root.dark #dashboard-settings-dropdown-menu,
:root.dark #expiry-details-panel {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3),
              0 4px 6px rgba(0, 0, 0, 0.2),
              0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ===== 主题适配优化 ===== */

/* 暗色模式下的细微调整 */
@media (prefers-color-scheme: dark) {
  .dashboard-container {
    @apply bg-slate-900/40;
  }
  
  .dashboard-container:hover {
    @apply bg-slate-800/50;
  }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
  .dashboard-container,
  .status-filter {
    transition: none;
  }
  
  .dashboard-container:hover,
  .status-filter.active {
    transform: none;
  }
}

/* ===== 网络容器系统 ===== */

/* 网络容器基础样式 - 无边框，替代 cardClass('soft') */
.network-container {
  @apply rounded-xl bg-slate-50/80 dark:bg-slate-900/50;
  @apply shadow-sm transition-all duration-200;
  /* 确保不影响JS动态更新的子元素 */
  position: relative;
}

.network-container:hover {
  @apply shadow-md -translate-y-px;
  @apply bg-slate-100/90 dark:bg-slate-800/60;
}

/* 网络统计内部容器 - 兼容现有 .network-stats-inner 类 */
.network-stats-inner {
  /* 移除边框，保持与无边框风格一致 */
  border: none;
  /* 保留原有背景透明度，但移除边框 */
  @apply bg-transparent;
}

/* 网络指标区块特定样式 */
.network-stats-inner .grid.grid-cols-2 > div {
  /* 统一 padding 以匹配状态筛选器卡片（p-3 = 0.75rem） */
  padding: 0.75rem; /* 统一为 p-3 (0.75rem)，匹配 .status-filter */
  /* 确保不影响进度条和内联元素的显示 */
  position: relative;
  /* 设置最小高度以匹配状态筛选器卡片 */
  min-height: 5.5rem;
}

/* 指标区块悬停效果（使用统一变量，匹配 .status-filter 的 hover:shadow-md hover:-translate-y-px） */
.network-stats-inner .grid.grid-cols-2 > div:hover {
  background-color: var(--inner-container-active-bg-light-glass);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* 匹配 hover:shadow-md */
  transform: translateY(-1px); /* 匹配 hover:-translate-y-px */
}

:root.dark .network-stats-inner .grid.grid-cols-2 > div:hover {
  background-color: var(--inner-container-active-bg-dark-glass);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* 匹配 hover:shadow-md */
  transform: translateY(-1px); /* 匹配 hover:-translate-y-px */
}

/* 日间 + 毛玻璃关闭：指标区块悬停效果（轻微上浮，无颜色变化） */
html:not(.dark) body.no-glassmorphism .network-stats-inner .grid.grid-cols-2 > div:hover {
  /* 保持背景色不变，避免与进度条 gray-100 背景冲突 */
  transform: translateY(-2px); /* 轻微上浮效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); /* 悬停时稍微增强阴影 */
  /* 背景色已由基础规则定义，此处不覆盖 */
}

/* 夜间 + 毛玻璃关闭：指标区块悬停效果 */
:root.dark body.no-glassmorphism .network-stats-inner .grid.grid-cols-2 > div:hover {
  background-color: var(--inner-container-active-bg-dark-no-glass) !important;
}

/* 日间模式 + 毛玻璃关闭：指标区块阴影（背景色已由统一规则定义） */
/* 阴影已由上方统一规则定义，此处移除重复定义 */

/* 日间模式 + 毛玻璃关闭：指标区块悬停效果（轻微上浮，无颜色变化） */
html:not(.dark) body.no-glassmorphism .network-stats-inner .grid.grid-cols-2 > div:hover {
  /* 保持背景色不变，避免与进度条 gray-100 背景冲突 */
  transform: translateY(-2px); /* 轻微上浮效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05); /* 悬停时稍微增强阴影 */
}

/* ===== 到期区域统一配色系统 ===== */

/* 到期按钮基础背景（毛玻璃开启时默认） */
#expiry-summary-btn {
  background-color: var(--small-element-bg-light-glass);
  transition: background-color 0.2s, box-shadow 0.2s;
}

:root.dark #expiry-summary-btn {
  background-color: var(--small-element-bg-dark-glass);
}

/* 日间 + 毛玻璃关闭 */
html:not(.dark) body.no-glassmorphism #expiry-summary-btn {
  background-color: var(--small-element-bg-light-no-glass) !important;
}

/* 夜间 + 毛玻璃关闭 */
:root.dark body.no-glassmorphism #expiry-summary-btn {
  background-color: var(--small-element-bg-dark-no-glass) !important;
}

/* 到期按钮悬停效果 */
#expiry-summary-btn:hover {
  background-color: var(--small-element-hover-bg-light-glass);
}

:root.dark #expiry-summary-btn:hover {
  background-color: var(--small-element-hover-bg-dark-glass);
}

html:not(.dark) body.no-glassmorphism #expiry-summary-btn:hover {
  background-color: var(--small-element-hover-bg-light-no-glass) !important;
}

:root.dark body.no-glassmorphism #expiry-summary-btn:hover {
  background-color: var(--small-element-hover-bg-dark-no-glass) !important;
}

/* 到期徽章 */
#expiry-total-badge {
  background-color: var(--expiry-badge-bg) !important;
  color: var(--expiry-badge-text) !important;
}

/* 到期详情面板基础背景（毛玻璃开启时默认） */
#expiry-details-panel {
  background-color: var(--expiry-panel-bg-light-glass);
}

:root.dark #expiry-details-panel {
  background-color: var(--expiry-panel-bg-dark-glass);
}

/* 日间 + 毛玻璃关闭 */
html:not(.dark) body.no-glassmorphism #expiry-details-panel {
  background-color: var(--expiry-panel-bg-light-no-glass) !important;
}

/* 夜间 + 毛玻璃关闭 */
:root.dark body.no-glassmorphism #expiry-details-panel {
  background-color: var(--expiry-panel-bg-dark-no-glass) !important;
}

/* 到期详情项悬停效果 */
.expiry-detail-item:hover {
  background-color: var(--expiry-item-hover-bg-light-glass) !important;
}

:root.dark .expiry-detail-item:hover {
  background-color: var(--expiry-item-hover-bg-dark-glass) !important;
}

html:not(.dark) body.no-glassmorphism .expiry-detail-item:hover {
  background-color: var(--expiry-item-hover-bg-light-no-glass) !important;
}

:root.dark body.no-glassmorphism .expiry-detail-item:hover {
  background-color: var(--expiry-item-hover-bg-dark-no-glass) !important;
}

/* 网络指标容器 - 不影响JS更新的数值和单位元素 */
.network-metric {
  @apply flex items-center justify-between;
  /* 不设置固定padding，避免影响动态内容 */
}

/* 确保进度条容器正常工作 */
.progress-track-no-glass {
  /* 使用 progress-bar-bg 语义类驱动背景色 */
  position: relative;
  box-shadow: var(--progress-shadow-light); /* 添加进度条阴影 */
}

:root.dark .progress-track-no-glass {
  box-shadow: var(--progress-shadow-dark); /* 暗色模式进度条阴影 */
}

/* 进度条动画 - 必须保留 transform: scaleX 机制 */
#download-speed-progress,
#upload-speed-progress,
#mobile-download-speed-progress,
#mobile-upload-speed-progress {
  /* 不覆盖JS设置的 transform 和 transition */
  transform-origin: left;
  will-change: transform;
}

/* 速度显示容器 - 确保 ensureSpeedChildren 正常工作 */
#current-download-speed,
#current-upload-speed,
#mobile-download-speed,
#mobile-upload-speed {
  /* 保持 flex 布局，确保动态子元素正确排列 */
  display: inline-flex;
  align-items: baseline;
}

/* ===== 地区容器系统 ===== */

/* 地区容器基础样式 - 使用第一层容器样式（与 .dashboard-card 一致） */
.region-container {
  border-radius: 0.5rem; /* 与 .dashboard-card 一致 */
  border-width: 0;
  border-style: none;
  border-color: transparent;
  position: relative;
  overflow: hidden;
  background-color: var(--card-bg-color, #ffffff);
  box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
  transition-property: background-color, color, box-shadow, transform;
  transition-duration: 0.15s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 暗色模式：禁用玻璃时的背景色 */
:root.dark body.no-glassmorphism .region-container {
  background-color: var(--dark-card-bg-color) !important;
  box-shadow: var(--card-shadow-dark, 0 2px 4px 0 rgb(0 0 0 / 0.2), 0 1px 3px -1px rgb(0 0 0 / 0.15));
}

/* 亮色模式：禁用玻璃时的背景色 */
:root:not(.dark) body.no-glassmorphism .region-container {
  background-color: var(--card-bg-color, #ffffff) !important;
}

/* 悬停效果已移除 - 第一层容器不需要悬停效果 */

.region-header {
  @apply flex items-center justify-between mb-2;
}

/* ===== 地区操作按钮样式 ===== */

/* 地区操作按钮基础样式 - 使用通用 small-element 变量 */
.region-action-btn {
  background-color: var(--small-element-bg-light-no-glass); /* 默认：日间 + 毛玻璃关闭 */
  color: var(--secondary-text-color);
  border-width: 0;
  border-style: none;
  border-color: transparent;
}

/* 暗色模式基础样式 */
:root.dark .region-action-btn {
  background-color: var(--small-element-bg-dark-no-glass) !important;
  color: var(--secondary-text-color);
}

/* 日间 + 毛玻璃关闭 */
html:not(.dark) body.no-glassmorphism .region-action-btn {
  background-color: var(--small-element-bg-light-no-glass) !important;
}

/* 夜间 + 毛玻璃关闭 */
:root.dark body.no-glassmorphism .region-action-btn {
  background-color: var(--small-element-bg-dark-no-glass) !important;
}

/* 悬停状态 */
.region-action-btn:hover {
  background-color: var(--small-element-hover-bg-light-no-glass) !important;
  color: var(--text-color);
}

:root.dark body.no-glassmorphism .region-action-btn:hover {
  background-color: var(--small-element-hover-bg-dark-no-glass) !important;
}

/* 刷新按钮强调样式 */
.region-action-btn-primary {
  color: var(--accent-color);
}

.region-action-btn-primary:hover {
  color: var(--accent-hover-color);
}

/* ===== Dashboard 操作按钮样式（排序、分组、列表、设置） ===== */

/* Dashboard 操作按钮基础样式 - 使用通用 small-element 变量，仅控制背景色和边框 */
.dashboard-action-btn {
  background-color: var(--small-element-bg-light-no-glass); /* 默认：日间 + 毛玻璃关闭 */
  border-width: 0;
  border-style: none;
  border-color: transparent;
}

/* 暗色模式基础样式 */
:root.dark .dashboard-action-btn {
  background-color: var(--small-element-bg-dark-no-glass) !important;
}

/* 日间 + 毛玻璃关闭 */
html:not(.dark) body.no-glassmorphism .dashboard-action-btn {
  background-color: var(--small-element-bg-light-no-glass) !important;
}

/* 夜间 + 毛玻璃关闭 */
:root.dark body.no-glassmorphism .dashboard-action-btn {
  background-color: var(--small-element-bg-dark-no-glass) !important;
}

/* 悬停状态 */
.dashboard-action-btn:hover {
  background-color: var(--small-element-hover-bg-light-no-glass) !important;
}

:root.dark body.no-glassmorphism .dashboard-action-btn:hover {
  background-color: var(--small-element-hover-bg-dark-no-glass) !important;
}

/* ===== 以下样式从 dashboard.html 内联样式迁移 (2025-11-15) ===== */
/* 注意：状态筛选按钮的激活状态样式已迁移至新变量系统 (lines 32-147)，此处不再重复定义 */

/* 到期筛选按钮激活状态 - 克制配色 */
.expiry-detail-item.active {
    background-color: rgba(var(--light-border-color-rgb), 0.12) !important;
    font-weight: 500;
}

/* 暗色模式下的到期筛选激活状态 */
.dark .expiry-detail-item.active {
    background-color: rgba(var(--light-border-color-rgb), 0.15) !important;
}

/* 到期按钮激活状态指示 - 低调提示 */
#expiry-summary-btn.has-active-filter {
    border-color: rgba(var(--light-border-color-rgb), 0.4) !important;
    background-color: rgba(var(--light-border-color-rgb), 0.05) !important;
}

.dark #expiry-summary-btn.has-active-filter {
    border-color: rgba(var(--light-border-color-rgb), 0.4) !important;
    background-color: rgba(var(--light-border-color-rgb), 0.08) !important;
}

/* 分组选项激活状态 */
.group-option.active {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: rgb(99, 102, 241) !important;
    font-weight: 600;
}

.dark .group-option.active {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: rgb(129, 140, 248) !important;
}

/* 分组选项激活状态 - 图标颜色 */
.group-option.active i {
    color: rgb(99, 102, 241) !important;
}

.dark .group-option.active i {
    color: rgb(129, 140, 248) !important;
}

/* 隐私模式样式 - Card视图：隐藏 .server-name 容器内的文本 */
.privacy-mode .server-name {
    display: flex !important;
    align-items: center !important;
    width: 80px !important;
    height: 20px !important;
    background: linear-gradient(90deg, rgba(var(--light-border-color-rgb), 0.8) 0%, rgba(var(--light-border-color-rgb), 0.6) 50%, rgba(var(--light-border-color-rgb), 0.8) 100%);
    border-radius: 6px;
}

.privacy-mode .server-name * {
    display: none !important;
}

/* 隐私模式样式 - List视图：隐藏 .card-title-link 链接 */
.privacy-mode .card-title-link {
    display: inline-block !important;
    width: 80px !important;
    height: 16px !important;
    background: linear-gradient(90deg, rgba(var(--light-border-color-rgb), 0.8) 0%, rgba(var(--light-border-color-rgb), 0.6) 50%, rgba(var(--light-border-color-rgb), 0.8) 100%);
    border-radius: 6px;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

/* 深色模式下的占位色块 */
.dark .privacy-mode .server-name {
    background: linear-gradient(90deg, rgba(var(--dark-border-color-rgb), 0.8) 0%, rgba(var(--dark-border-color-rgb), 0.6) 50%, rgba(var(--dark-border-color-rgb), 0.8) 100%);
}

.dark .privacy-mode .card-title-link {
    background: linear-gradient(90deg, rgba(var(--dark-border-color-rgb), 0.8) 0%, rgba(var(--dark-border-color-rgb), 0.6) 50%, rgba(var(--dark-border-color-rgb), 0.8) 100%);
}

/* 拖拽手柄样式 */
.server-card:hover .drag-handle {
    opacity: 0.5;
}

.server-card.sortable-chosen .drag-handle,
.server-card.sortable-drag .drag-handle {
    opacity: 1 !important;
    cursor: grabbing !important;
}

/* 拖拽动画增强 */
.sortable-ghost {
    opacity: 0.4;
    background: rgba(99, 102, 241, 0.1);
    border: 2px dashed rgba(99, 102, 241, 0.5);
}

.sortable-drag {
    opacity: 0.9 !important;
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.sortable-chosen {
    opacity: 0.8;
}

/* 拖拽时的过渡动画 - 调整为不影响拖拽的属性 */
.server-card {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* 拖拽时禁用过渡效果，避免抖动 */
.dragging-active .server-card {
    transition: none;
}

/* 撤销/重做按钮样式 */
#undo-sort-btn:not(:disabled):hover,
#redo-sort-btn:not(:disabled):hover {
    opacity: 1;
    background-color: rgba(99, 102, 241, 0.1);
}

/* 拖拽交互反馈样式 */
.server-card.drop-target {
    background-color: rgba(99, 102, 241, 0.1) !important;
    border: 2px solid rgba(99, 102, 241, 0.5) !important;
    /* 移除transform避免抖动 */
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    /* 添加过渡效果使变化更平滑 */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.server-card.dragging-item {
    opacity: 0.9;
    transform: scale(1.02);
    z-index: 1000;
    /* 防止拖拽时的过渡效果 */
    transition: none !important;
}

/* 交换动画 */
.server-card.swap-animation {
    animation: swapPulse 0.3s ease-in-out;
}

@keyframes swapPulse {
    0% {
        background-color: transparent;
        opacity: 1;
    }
    50% {
        background-color: rgba(99, 102, 241, 0.15);
        opacity: 0.9;
    }
    100% {
        background-color: transparent;
        opacity: 1;
    }
}

/* 拖拽时的指针 */
.dragging-active .server-card {
    cursor: grab;
}

.dragging-active .server-card.sortable-drag {
    cursor: grabbing !important;
}

/* 拖拽预览位置指示器 */
.sortable-swap-highlight {
    background-color: rgba(99, 102, 241, 0.2) !important;
    border: 2px dashed rgba(99, 102, 241, 0.6) !important;
}

/* 保存状态旋转动画 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* 保存状态指示器样式 */
#sort-save-indicator {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark #sort-save-indicator {
    background-color: rgba(30, 41, 59, 0.9);
}

/* 分组按钮激活指示 - 从第一个style块额外迁移 */
#group-dropdown-btn.has-active-filter {
    border-color: rgba(99, 102, 241, 0.5) !important;
    background-color: rgba(99, 102, 241, 0.05) !important;
}

.dark #group-dropdown-btn.has-active-filter {
    border-color: rgba(99, 102, 241, 0.6) !important;
    background-color: rgba(99, 102, 241, 0.1) !important;
}