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

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

/* 基础容器 - 无边框，微妙背景 */
.dashboard-container {
  border-radius: 0.75rem;
  background-color: var(--card-surface-bg);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* 悬停状态 - 轻微提升 */
.dashboard-container:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  background-color: color-mix(in srgb, var(--card-surface-bg) 82%, var(--small-element-hover-surface-bg) 18%);
}

/* 激活状态 - 明确反馈 */
.dashboard-container.active {
  box-shadow: var(--shadow-sm);
  transform: translateY(-0.5px);
  background-color: color-mix(in srgb, var(--card-surface-bg) 72%, var(--small-element-active-surface-bg) 28%);
}

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

/* ===== Dashboard 节点情况样板：页面级 alias 与语义映射 ===== */

.dashboard-node-section {
  --dashboard-node-icon-fg: var(--accent-color);
  --dashboard-node-icon-bg: color-mix(in srgb, var(--accent-color) 14%, transparent);
  --dashboard-node-clear-fg: var(--error-color);
  --dashboard-node-clear-bg: color-mix(in srgb, var(--error-color) 12%, transparent);
  --dashboard-node-clear-hover-bg: color-mix(in srgb, var(--error-color) 18%, transparent);
  --dashboard-node-muted-fg: var(--secondary-text-color);
  --dashboard-node-strong-fg: var(--text-color);
  --dashboard-node-online-fg: var(--status-online-color);
  --dashboard-node-offline-fg: var(--status-offline-color);
  --dashboard-node-expiry-danger-fg: var(--error-color);
  --dashboard-node-expiry-warn-fg: var(--warning-color);
  --dashboard-node-expiry-caution-fg: color-mix(in srgb, var(--warning-color) 82%, var(--accent-color) 18%);
}

.dashboard-node-section-icon {
  color: var(--dashboard-node-icon-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboard-node-clear-btn {
  color: var(--dashboard-node-clear-fg);
  background-color: var(--dashboard-node-clear-bg);
}

.dashboard-node-clear-btn:hover {
  background-color: var(--dashboard-node-clear-hover-bg);
}

.dashboard-node-expiry-trigger__icon,
.dashboard-node-expiry-trigger__label,
.dashboard-node-expiry-panel__title,
.dashboard-node-expiry-item__label {
  color: var(--dashboard-node-muted-fg);
}

.dashboard-node-expiry-trigger__chevron {
  color: color-mix(in srgb, var(--dashboard-node-muted-fg) 72%, transparent);
}

.dashboard-node-expiry-item__count,
.dashboard-node-status-value {
  color: var(--dashboard-node-strong-fg);
}

.dashboard-node-status-meta {
  color: var(--dashboard-node-muted-fg);
}

.dashboard-node-expiry-item[data-expiry-tone="danger"] .dashboard-node-expiry-item__icon {
  color: var(--dashboard-node-expiry-danger-fg);
}

.dashboard-node-expiry-item[data-expiry-tone="warn"] .dashboard-node-expiry-item__icon {
  color: var(--dashboard-node-expiry-warn-fg);
}

.dashboard-node-expiry-item[data-expiry-tone="caution"] .dashboard-node-expiry-item__icon {
  color: var(--dashboard-node-expiry-caution-fg);
}

.dashboard-node-status-card[data-status-tone="all"] .dashboard-node-status-icon {
  color: var(--dashboard-node-icon-fg);
}

.dashboard-node-status-card[data-status-tone="online"] .dashboard-node-status-icon,
.dashboard-node-status-card[data-status-tone="online"] .dashboard-node-status-value {
  color: var(--dashboard-node-online-fg);
}

.dashboard-node-status-card[data-status-tone="offline"] .dashboard-node-status-icon,
.dashboard-node-status-card[data-status-tone="offline"] .dashboard-node-status-value {
  color: var(--dashboard-node-offline-fg);
}

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

/* 节点情况试点：节点状态卡片只消费 dashboard 页面 alias，不再和网络卡片共用视觉规则 */
.dashboard-node-status-card {
  min-height: 88px;
  background-color: var(--inner-surface-bg);
  border-radius: 0.75rem; /* 统一为 rounded-xl (0.75rem) */
  overflow: hidden; /* 匹配 overflow-hidden */
  box-shadow: var(--inner-container-shadow);
  cursor: pointer; /* 匹配 cursor-pointer */
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 激活状态 - 稍微加深背景（使用语义 Token） */
/* 注意：data-status 属性仅用于 JavaScript 逻辑，不影响样式 */
.dashboard-node-status-card.active {
  background-color: var(--inner-active-surface-bg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

/* 状态筛选 hover：背景/阴影由 Token 决定（主题×开关 的判断不放在组件选择器里） */
.dashboard-node-status-card:hover {
  background-color: var(--status-filter-hover-bg);
  box-shadow: var(--status-filter-hover-shadow);
  transform: translateY(-1px);
}

/* 焦点状态 - 可访问性 */
.dashboard-container:focus,
.dashboard-node-status-card:focus {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent-color) 55%, transparent),
    0 0 0 4px var(--card-surface-bg);
}

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

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

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

/* 下拉菜单 - 无边框，增强阴影 */
.dashboard-dropdown-panel,
.dashboard-node-expiry-panel {
  box-shadow: var(--shadow-lg),
              0 0 0 1px color-mix(in srgb, var(--text-color) 8%, transparent); /* 微妙的边缘提示 */
}

:root.dark .dashboard-dropdown-panel,
:root.dark .dashboard-node-expiry-panel {
  box-shadow: var(--shadow-lg),
              0 0 0 1px color-mix(in srgb, white 8%, transparent);
}

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

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

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

.dashboard-title-icon,
.dashboard-section-icon {
  color: var(--accent-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboard-network-icon--download {
  color: var(--success-color);
}

.dashboard-network-icon--upload {
  color: var(--accent-color);
}

.dashboard-control-icon {
  color: var(--secondary-text-color);
}

.dashboard-connection-status {
  background-color: var(--error-color);
  color: var(--expiry-badge-text);
}

.dashboard-quick-toggle-btn {
  background-color: transparent;
  color: var(--secondary-text-color);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dashboard-quick-toggle-btn:hover {
  background-color: var(--small-element-hover-surface-bg);
  color: var(--text-color);
}

.dashboard-modal-backdrop {
  background-color: color-mix(in srgb, var(--text-color) 32%, transparent);
}

.dashboard-modal-shell {
  background-color: var(--card-surface-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.dashboard-modal-title-icon {
  color: var(--accent-color);
}

.dashboard-modal-action {
  background-color: var(--small-element-surface-bg);
  color: var(--text-color);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dashboard-modal-action:hover {
  background-color: var(--small-element-hover-surface-bg);
}

.dashboard-modal-action--accent {
  background-color: var(--small-element-active-surface-bg);
  color: var(--accent-color);
}

.dashboard-modal-action--accent:hover {
  background-color: color-mix(in srgb, var(--small-element-active-surface-bg) 78%, var(--small-element-hover-surface-bg) 22%);
}

.dashboard-modal-action__title {
  color: var(--text-color);
}

.dashboard-modal-action__title--accent,
.dashboard-modal-action__meta--accent {
  color: var(--accent-color);
}

.dashboard-modal-action__meta {
  color: var(--secondary-text-color);
}

.tab-button__indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.125rem;
  border-top-left-radius: 0.125rem;
  border-top-right-radius: 0.125rem;
  background-color: var(--accent-color);
  box-shadow: 0 0 4px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

/* 指标区块悬停效果（使用统一变量，匹配 .status-filter 的 hover:shadow-md hover:-translate-y-px） */
:root[data-glass='on'] .network-stats-inner .grid.grid-cols-2 > div:hover {
  background-color: var(--inner-active-surface-bg);
  box-shadow: var(--shadow-md); /* 匹配 hover:shadow-md */
  transform: translateY(-1px); /* 匹配 hover:-translate-y-px */
}

/* 毛玻璃关闭：默认不改背景，避免与进度条背景冲突，只做轻微上浮 + 阴影增强 */
:root[data-glass='off'] .network-stats-inner .grid.grid-cols-2 > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* 夜间 + 毛玻璃关闭：允许背景略加深，增强 hover 反馈 */
:root.dark[data-glass='off'] .network-stats-inner .grid.grid-cols-2 > div:hover {
  background-color: var(--inner-active-surface-bg);
}

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

.dashboard-node-expiry-trigger {
  background-color: var(--small-element-surface-bg);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-node-expiry-trigger:hover {
  background-color: var(--small-element-hover-surface-bg);
}

.dashboard-node-expiry-trigger.has-active-filter {
  background-color: var(--small-element-active-surface-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-color) 25%, transparent), var(--shadow-sm);
}

.dashboard-node-expiry-badge {
  background-color: var(--expiry-badge-bg);
  color: var(--expiry-badge-text);
}

.dashboard-node-expiry-badge[data-level="empty"] {
  background-color: color-mix(in srgb, var(--secondary-text-color) 72%, transparent);
}

.dashboard-node-expiry-badge[data-level="normal"] {
  background-color: color-mix(in srgb, var(--secondary-text-color) 88%, transparent);
}

.dashboard-node-expiry-badge[data-level="warning"] {
  background-color: var(--warning-color);
}

.dashboard-node-expiry-item:hover {
  background-color: var(--small-element-hover-surface-bg);
}

.dashboard-node-expiry-item.active {
  background-color: var(--small-element-active-surface-bg);
  font-weight: 500;
}

.dashboard-node-expiry-item[data-availability="empty"] {
  opacity: 0.4;
  pointer-events: none;
}

/* 网络指标容器 - 不影响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: 1px;
  border-style: solid;
  border-color: var(--border-color);
  position: relative;
  overflow: hidden;
  background-color: var(--card-bg-color);
  box-shadow: var(--card-shadow);
  transition-property: background-color, color, box-shadow, transform, border-color;
  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);
}

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

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

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

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

/* 地区操作按钮基础样式 - 只消费语义 Token */
.region-action-btn {
  background-color: var(--small-element-surface-bg);
  color: var(--secondary-text-color);
  border: none;
  transition: all 0.2s;
}

/* 悬停状态 */
.region-action-btn:hover {
  background-color: var(--small-element-hover-surface-bg) !important;
  color: var(--text-color);
  box-shadow: var(--shadow-sm);
}

/* 焦点状态 */
.region-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 55%, transparent);
}

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

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

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

/* Dashboard 操作按钮基础样式 - 只消费语义 Token */
.dashboard-action-btn {
  background-color: var(--small-element-surface-bg);
  border: none;
}

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

.dashboard-dropdown-option,
.dashboard-dropdown-toggle-row {
  background-color: transparent;
  color: var(--secondary-text-color);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-dropdown-option:hover,
.dashboard-dropdown-toggle-row:hover {
  background-color: var(--small-element-hover-surface-bg) !important;
  color: var(--text-color);
}

.dashboard-dropdown-option .sort-direction-icon--idle {
  color: color-mix(in srgb, var(--secondary-text-color) 82%, transparent);
}

.sort-option.active .sort-direction-icon,
.sort-option.active .sort-direction-icon--active {
  color: var(--accent-color);
}

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

/* 分组选项激活状态 */
.group-option.active {
    background-color: color-mix(in srgb, var(--accent-color) 12%, transparent) !important;
    color: var(--accent-color) !important;
    font-weight: 600;
}

.dark .group-option.active {
    background-color: color-mix(in srgb, var(--accent-color) 20%, transparent) !important;
    color: color-mix(in srgb, var(--accent-color) 70%, white) !important;
}

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

.dark .group-option.active i {
    color: color-mix(in srgb, var(--accent-color) 70%, white) !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, color-mix(in srgb, var(--border-color) 80%, transparent) 0%, color-mix(in srgb, var(--border-color) 60%, transparent) 50%, color-mix(in srgb, var(--border-color) 80%, transparent) 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, color-mix(in srgb, var(--border-color) 80%, transparent) 0%, color-mix(in srgb, var(--border-color) 60%, transparent) 50%, color-mix(in srgb, var(--border-color) 80%, transparent) 100%);
    border-radius: 6px;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

/* 深色模式下的占位色块 */
.dark .privacy-mode .server-name {
    background: linear-gradient(90deg, color-mix(in srgb, var(--border-color) 80%, transparent) 0%, color-mix(in srgb, var(--border-color) 60%, transparent) 50%, color-mix(in srgb, var(--border-color) 80%, transparent) 100%);
}

.dark .privacy-mode .card-title-link {
    background: linear-gradient(90deg, color-mix(in srgb, var(--border-color) 80%, transparent) 0%, color-mix(in srgb, var(--border-color) 60%, transparent) 50%, color-mix(in srgb, var(--border-color) 80%, transparent) 100%);
}

.server-card {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

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

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

/* 分组按钮激活指示 - 从第一个style块额外迁移 */
.dashboard-group-trigger.has-active-filter {
    background-color: color-mix(in srgb, var(--accent-color) 14%, var(--small-element-surface-bg) 86%) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 25%, transparent), 0 1px 2px color-mix(in srgb, var(--accent-color) 20%, transparent) !important;
}