/**
 * 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,
html:not(.dark) body.no-glassmorphism .network-stats-inner .grid.grid-cols-2 > div {
  background-color: var(--inner-container-bg-light-no-glass) !important;
  box-shadow: var(--inner-container-shadow-light) !important; /* 使用增强阴影变量 */
}

/* 夜间 + 毛玻璃关闭 */
:root.dark body.no-glassmorphism .status-filter,
:root.dark body.no-glassmorphism .network-stats-inner .grid.grid-cols-2 > div {
  background-color: var(--inner-container-bg-dark-no-glass) !important;
  box-shadow: var(--inner-container-shadow-dark) !important; /* 使用增强阴影变量 */
}

/* 状态筛选器特定样式 */
.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); /* 暗色模式阴影 */
}

/* 不同状态统一背景（移除功能色区分，保持视觉协调） */
.status-filter[data-status="ALL"],
.status-filter[data-status="ONLINE"],
.status-filter[data-status="OFFLINE"] {
  /* 所有状态使用统一背景，保持协调 */
  background-color: var(--inner-container-bg-light-glass);
}

:root.dark .status-filter[data-status="ALL"],
:root.dark .status-filter[data-status="ONLINE"],
:root.dark .status-filter[data-status="OFFLINE"] {
  background-color: var(--inner-container-bg-dark-glass);
}

/* 激活状态 - 稍微加深背景（使用统一变量） */
.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) !important;
}

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

/* 激活状态下的所有状态统一背景 */
.status-filter.active[data-status="ALL"],
.status-filter.active[data-status="ONLINE"],
.status-filter.active[data-status="OFFLINE"] {
  background-color: var(--inner-container-active-bg-light-glass);
}

:root.dark .status-filter.active[data-status="ALL"],
:root.dark .status-filter.active[data-status="ONLINE"],
:root.dark .status-filter.active[data-status="OFFLINE"] {
  background-color: var(--inner-container-active-bg-dark-glass);
}

html:not(.dark) body.no-glassmorphism .status-filter.active[data-status="ALL"],
html:not(.dark) body.no-glassmorphism .status-filter.active[data-status="ONLINE"],
html:not(.dark) body.no-glassmorphism .status-filter.active[data-status="OFFLINE"] {
  background-color: var(--inner-container-active-bg-light-no-glass) !important;
}

:root.dark body.no-glassmorphism .status-filter.active[data-status="ALL"],
:root.dark body.no-glassmorphism .status-filter.active[data-status="ONLINE"],
:root.dark body.no-glassmorphism .status-filter.active[data-status="OFFLINE"] {
  background-color: var(--inner-container-active-bg-dark-no-glass) !important;
}

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

/* 平滑的状态转换 */
.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);
}

/* 焦点状态 - 可访问性 */
.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 {
  /* 保留原有样式，仅移除边框相关 */
  @apply bg-gray-100 dark:bg-gray-700;
  @apply rounded-full overflow-hidden;
  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 .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;
}