/**
 * 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: 72px;
  padding: 8px 12px;
  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,
.dashboard-node-status-card.active:hover {
  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);
}

.globe-loading .ti-alert-circle { animation: none; }

/* 焦点状态 - 可访问性 */
.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 .dashboard-network-card {
  border: none;
  /* 统一 padding 以匹配状态筛选器卡片（p-3 = 0.75rem） */
  padding: 8px 12px;
  /* 确保不影响进度条和内联元素的显示 */
  position: relative;
  /* 设置最小高度以匹配状态筛选器卡片 */
  min-height: 72px;
}

.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);
}



.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);
}

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

.dashboard-node-expiry-trigger {
  background-color: var(--color-small-element-on-card-surface);
  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 {
  color: var(--expiry-badge-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

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

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

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

.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);
}

/* 暗色模式：禁用玻璃时的背景色 */
/* TASK-391.02 链5：去 !important——(0,4,1) 天然 > 基础 .region-container (0,1,0)，glass 侧已删 */
:root.dark[data-glass="off"] body .region-container {
  background-color: var(--dark-card-bg-color);
  box-shadow: var(--card-shadow-dark);
}

/* 亮色模式：禁用玻璃时的背景色 */
:root:not(.dark) html[data-glass="off"] body .region-container {
  background-color: var(--card-bg-color);
}

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

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

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

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

/* 悬停状态 */
.region-action-btn:hover {
  background-color: var(--small-element-hover-surface-bg);
  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 {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.75rem;           /* 移动端紧凑 */
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.6875rem;      /* 11px */
  line-height: 1rem;
  background-color: var(--color-small-element-on-card-surface);
  border: 1px solid transparent;
  border-radius: 0.375rem;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
  white-space: nowrap;
}

.dashboard-card-details-link {
  background-color: var(--color-small-element-on-card-surface);
}

@media (min-width: 640px) {
  .dashboard-action-btn {
    gap: 0.375rem;
    height: 2rem;            /* sm: h-8 */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    font-size: 0.8125rem;    /* 13px */
    line-height: 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }
}

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

@media (min-width: 640px) {
  .dashboard-action-btn:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }
}



/* ===== 平铺模式标题标签 ===== */
.toolbar-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;   /* 3px 8px */
  font-size: 0.75rem;           /* 12px */
  font-weight: 600;
  flex-shrink: 0;
  border-radius: 0.375rem;
  color: var(--main-text-color);
  background-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.toolbar-label .ti {
  font-size: 0.875rem;         /* 14px */
  color: var(--accent-color);
}

@media (min-width: 640px) {
  .toolbar-label {
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;     /* 13px */
    border-radius: 0.375rem;
  }
  .toolbar-label .ti {
    font-size: 1rem;         /* 16px */
  }
}

/* ===== 视图切换按钮组 ===== */
.toolbar-btn-group {
  display: inline-flex;
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  border-radius: 0.5rem;
  overflow: hidden;
}

.toolbar-btn-group-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;               /* 28px */
  height: 1.75rem;
  font-size: 0.875rem;          /* 14px */
  color: var(--secondary-text-color);
  outline: none;
  background: transparent;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.toolbar-btn-group-item:hover {
  background-color: var(--small-element-hover-surface-bg);
  color: var(--main-text-color);
}

.toolbar-btn-group-item.active {
  background-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
  color: var(--accent-color);
}

@media (min-width: 640px) {
  .toolbar-btn-group-item {
    width: 2rem;                /* 32px */
    height: 2rem;
    font-size: 1rem;            /* 16px */
  }
}

.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-toggle-row:hover {
  background-color: var(--small-element-hover-surface-bg);
  color: var(--text-color);
}

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

/* 分组选项激活状态 */
/* TASK-391.02 链5：去 !important——无跨文件对手，:hover/.active 唯一命中 */
.group-option.active {
    background-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--accent-color);
    font-weight: 600;
}

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

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

.dark .group-option.active i {
    color: color-mix(in srgb, var(--accent-color) 70%, white);
}

/* 隐私模式样式 - Card视图：隐藏 .server-name 容器内的文本 */
/* TASK-391.02 链5：去 !important——display:none 保留（强隐藏白名单），其余无对手 */
.privacy-mode .server-name {
    display: flex;
    align-items: center;
    width: 80px;
    height: 20px;
    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;
    width: 80px;
    height: 16px;
    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;
    overflow: hidden;
}

/* 深色模式下的占位色块 */
.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%);
    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);
}

.dashboard-tag-filter-trigger.has-active-filter {
  color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-small-element-surface) 86%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.dashboard-tag-filter-count {
  min-width: 1.2rem;
  padding: 0.05rem 0.35rem;
  color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-radius: 999px;
  text-align: center;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
}

.dashboard-tag-filter-node-count {
  color: var(--color-text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* 概览：主读数与次行对齐，单模块配置仍占满可用宽度。 */
.dashboard-overview > :only-child { grid-column: 1 / -1; }
.dashboard-overview-body { padding: 16px; }
.dashboard-overview-heading { margin-bottom: 12px; gap: 8px; }
.dashboard-overview-heading h2 { font-size: 16px; white-space: nowrap; }
.dashboard-overview-heading :is(.dashboard-node-section-icon, .dashboard-section-icon) {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 26px; height: 26px; flex: 0 0 26px; font-size: 18px; line-height: 1;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent); border-radius: 6px;
}
.dashboard-network-totals { gap: 6px; }
.dashboard-network-totals .total-badge { white-space: nowrap; }
.dashboard-overview .dashboard-network-totals .total-badge { box-shadow: none; }
.dashboard-network-totals .total-badge:has(.ti-download) {
  --total-badge-border-light: color-mix(in srgb, var(--total-badge-download-color) 32%, transparent);
  --total-badge-border-dark: var(--total-badge-border-light);
}
.dashboard-network-totals .total-badge:has(.ti-upload) {
  --total-badge-border-light: color-mix(in srgb, var(--total-badge-upload-color) 32%, transparent);
  --total-badge-border-dark: var(--total-badge-border-light);
}
.dashboard-metric-stack { display: grid; grid-template-rows: 32px 20px; align-content: center; gap: 4px; min-height: 56px; }
.dashboard-metric-stack--node { justify-items: center; }
.dashboard-speed-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.dashboard-speed-row > i { flex-shrink: 0; }
.dashboard-speed-reading { flex: 1; min-width: 0; justify-content: flex-end; }
.dashboard-speed-reading [id$="-unit"] { width: 40px; flex: 0 0 40px; }
.dashboard-speed-value { font-size: 20px; line-height: 32px; }
.dashboard-metric-stack .progress-inline-wrapper { align-self: center; width: 100%; min-width: 0; }
.dashboard-network-mobile { min-height: 72px; padding: 8px 0; }
.region-container, #dashboard-toolbar { margin-top: 12px; margin-bottom: 12px; }
.dashboard-region-body { padding: 12px 16px; }
@media (max-width: 1023px) {
  .network-stats-inner .dashboard-network-card { padding-left: 8px; padding-right: 8px; }
  .dashboard-speed-row { gap: 4px; }
  .dashboard-speed-reading [id$="-unit"] { width: 32px; flex-basis: 32px; }
  .dashboard-network-card .dashboard-speed-row > i { width: 20px; font-size: 18px; }
}
@media (max-width: 359px) {
  .dashboard-network-mobile .dashboard-speed-value { font-size: 18px; }
}
@media (min-width: 1536px) {
  .dashboard-region-body:has(#region-stats-wrapper.collapsed) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
  .dashboard-region-body:has(#region-stats-wrapper.collapsed) .dashboard-region-heading { display: contents; }
  .dashboard-region-body:has(#region-stats-wrapper.collapsed) .dashboard-region-heading > div { grid-column: 2; grid-row: 1; }
  .dashboard-region-body:has(#region-stats-wrapper.collapsed) #region-stats-wrapper { grid-column: 1; grid-row: 1; min-width: 0; }
}


/* 工具栏两种形态共用入口与状态；44px 操作区内的 30px 表面保持紧凑。 */
#dashboard-toolbar { border-radius: 12px; }
.dashboard-toolbar-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 16px; }
.dashboard-filter-entries { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
#dashboard-toolbar .dashboard-filter-entry {
  position: relative; isolation: isolate; display: flex; align-items: center; justify-content: flex-start;
  flex: 0 1 auto; min-width: 0; max-width: 280px; height: 44px; min-height: 44px;
  padding: 0 12px; gap: 7px; white-space: nowrap;
  border: 0; border-radius: 6px; background: transparent; box-shadow: none;
}
.dashboard-filter-label { display: inline-flex; align-items: center; flex-shrink: 0; gap: 5px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--color-text-primary); }
.dashboard-filter-label i { font-size: 15px; color: var(--color-accent); }
.dashboard-filter-summary { min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 20px; color: var(--color-text-secondary); }
.dashboard-entry-chevron { flex-shrink: 0; font-size: 12px; color: var(--color-text-secondary); }
#dashboard-toolbar[data-toolbar-mode="flat"] .dashboard-entry-chevron { display: none; }
#dashboard-toolbar .active-dropdown .dashboard-filter-label { color: var(--color-accent); }
#dashboard-toolbar .has-active-filter .dashboard-filter-summary { color: var(--color-accent); }
#dashboard-toolbar .has-active-filter .dashboard-filter-label::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }

#dashboard-toolbar .toolbar-btn-group { flex-shrink: 0; gap: 6px; border: 0; background: transparent; overflow: visible; }
#dashboard-toolbar .toolbar-btn-group-item,
#dashboard-toolbar .dashboard-toolbar-mode {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; box-shadow: none; color: var(--color-text-secondary); font-size: 16px;
}
#dashboard-toolbar .dashboard-toolbar-mode { width: 68px; min-width: 68px; gap: 5px; font-size: 13px; }
#dashboard-toolbar .dashboard-toolbar-mode i { font-size: 14px; }
#dashboard-toolbar .toolbar-btn-group-item.active { color: var(--color-accent); }
#dashboard-toolbar .dashboard-toolbar-row:has(.home-load-status:is([data-state="error"], [data-state="changed"])) { flex-wrap: wrap; }
#dashboard-toolbar .home-load-status:is([data-state="error"], [data-state="changed"]) { position: static; order: 4; flex-basis: 100%; white-space: normal; }
#dashboard-toolbar [data-home-load-retry] { min-height: 44px; flex-shrink: 0; }

/* 三控件的共同外观：表面由 glass-dropdown 负责，弹出时只有选项列表滚动。 */
.dashboard-dropdown-panel { overscroll-behavior: contain; }
.dashboard-filter-panel {
  position: fixed; display: flex; flex-direction: column; gap: 8px;
  width: min(304px, calc(100vw - 16px)); max-height: 400px; padding: 8px;
  border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; overscroll-behavior: contain;
}
.dashboard-filter-panel.hidden, .toolbar-chip[hidden] { display: none; }
.dashboard-menu-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0;
  min-height: 44px; padding: 0 4px 4px; border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary); font-size: 13px; line-height: 20px; font-weight: 500;
}
.dashboard-menu-options {
  display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.dashboard-menu-items, .sort-menu-column { display: flex; flex-direction: column; gap: 4px; }
.dashboard-menu-items, .dashboard-group-content .ms-all-option { flex-shrink: 0; }
.sort-menu-body, #group-multi-select-container, .dashboard-group-content {
  display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0;
}
.sort-menu-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sort-realtime-control { flex-shrink: 0; border-top: 1px solid var(--color-border); padding-top: 4px; }
.group-menu-actions { justify-content: flex-start; }
.dashboard-group-search { flex-shrink: 0; }
.dashboard-group-search.ms-embedded-header--collapsed { display: none; }
#group-dropdown-search-toggle { justify-content: center; width: 44px; padding: 0; }
#group-dropdown-search-toggle .ms-search-toggle-icon { margin: 0; line-height: 1; font-size: 16px; }
.dashboard-realtime-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; width: 100%; padding: 0 4px; background: transparent; }
.dashboard-realtime-switch > .tw-switch-track { order: 1; flex-shrink: 0; }
.dashboard-realtime-switch > .flex > span { font-size: 13px; font-weight: 400; color: var(--color-text-secondary); }

/* 同语义选项与辅助操作共用密度、状态与焦点。背景只绘制在 ::before。 */
.dashboard-dropdown-option, .toolbar-chip {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  min-height: 44px; margin: 0; padding: 8px 12px; border: 0; border-radius: 8px;
  background: transparent; box-shadow: none; color: var(--color-text-secondary); text-align: left;
  font-size: 13px; line-height: 20px; font-weight: 500; cursor: pointer; transition: color .15s ease;
}
.dashboard-dropdown-option { width: 100%; }
.toolbar-chip { display: inline-flex; justify-content: center; min-width: 44px; white-space: nowrap; }
.dashboard-dropdown-option::before, .toolbar-chip::before {
  content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
  border: 1px solid transparent; background: transparent; transition: background-color .15s ease, border-color .15s ease;
}
.toolbar-chip::before { border-color: color-mix(in srgb, var(--color-border) 65%, transparent); }
.dashboard-option-label { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; font: inherit; user-select: none; }
.dashboard-option-badge { flex-shrink: 0; font-size: 10px; line-height: 16px; font-weight: 400; color: var(--color-text-secondary); white-space: nowrap; }
.dashboard-selection-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; width: 16px; height: 16px;
  border: 1px solid var(--color-border); border-radius: 4px; color: transparent; font-size: 12px; line-height: 1;
}
.dashboard-menu-empty { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; color: var(--color-text-secondary); font-size: 13px; line-height: 20px; }

.dashboard-search-field { position: relative; display: flex; align-items: center; flex-shrink: 0; min-width: 0; height: 44px; }
.dashboard-filter-search {
  width: 100%; height: 36px; min-width: 0; margin: 0; padding: 7px 12px 7px 36px;
  border: 1px solid var(--color-border); border-radius: 8px; outline: none;
  background: var(--input-surface-bg); color: var(--color-text-primary); font-size: 13px; line-height: 20px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dashboard-search-field > :is(svg, i) { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 16px; height: 16px; font-size: 16px; color: var(--color-text-secondary); pointer-events: none; }
.dashboard-filter-search::placeholder { color: var(--color-text-secondary); }
.dashboard-filter-search:focus { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }

/* 平铺只改变排列和可视表面高度，所有选项继续消费上面的共同规则。 */
.dashboard-inline-panel { padding: 0 16px 6px; border-top: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent); }
.dashboard-inline-panel > .dashboard-dropdown-panel:not(.hidden) {
  position: static; flex-direction: row; align-items: center; width: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; overflow: visible; background: transparent; backdrop-filter: none;
  border: 0; box-shadow: none; border-radius: 0;
}
.dashboard-inline-panel .sort-menu-title,
.dashboard-inline-panel .dashboard-tag-filter-header > label { display: none; }
.dashboard-inline-panel .sort-menu-body { flex-direction: row; align-items: center; gap: 16px; width: 100%; }
.dashboard-inline-panel :is(.dashboard-menu-options, .dashboard-group-content) { display: flex; flex-direction: row; align-items: center; gap: 6px; min-height: 44px; max-height: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.dashboard-inline-panel :is(.dashboard-menu-options, .dashboard-group-content)::-webkit-scrollbar { display: none; }
.dashboard-inline-panel :is(.sort-menu-column, .dashboard-menu-items, .ms-all-option) { display: contents; }
.dashboard-inline-panel .sort-realtime-control { margin-left: auto; padding: 0; border: 0; }
.dashboard-inline-panel .dashboard-realtime-switch { padding: 0; }
.dashboard-inline-panel .group-menu-actions { padding: 0; border: 0; gap: 6px; }
.dashboard-inline-panel .group-menu-actions::after { content: ''; width: 1px; height: 16px; margin: 0 2px; background: var(--color-border); }
.dashboard-inline-panel #group-multi-select-container { flex: 1; }
.dashboard-inline-panel .dashboard-group-content .dashboard-menu-options { display: contents; }
.dashboard-inline-panel .dashboard-menu-empty { flex-shrink: 0; white-space: nowrap; }
.dashboard-inline-panel .dashboard-group-search { flex: 0 0 140px; }
.dashboard-inline-panel .dashboard-tag-filter-header { padding: 0; border: 0; }
.dashboard-inline-panel .dashboard-tag-filter-header:has(#tag-filter-clear[hidden]) { display: none; }
.dashboard-inline-panel .dashboard-tag-search-field { flex: 0 0 140px; }
.dashboard-inline-panel .dashboard-filter-search { height: 30px; padding-top: 4px; padding-bottom: 4px; }
.dashboard-inline-panel :is(.dashboard-dropdown-option, .toolbar-chip) { width: auto; height: 44px; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.dashboard-inline-panel :is(.dashboard-dropdown-option, .toolbar-chip)::before { inset: 7px 0; border-color: color-mix(in srgb, var(--color-border) 65%, transparent); }
.dashboard-inline-panel .dashboard-option-label { flex: 0 0 auto; white-space: nowrap; }
.dashboard-inline-panel .sort-option:not(.active) .sort-direction-icon { display: none; }

.dashboard-dropdown-option:is([aria-pressed='true'], [aria-selected='true'], [aria-checked='true']),
.toolbar-chip[aria-pressed='true'] { color: var(--color-accent); }
.dashboard-dropdown-option:is([aria-pressed='true'], [aria-selected='true'], [aria-checked='true'])::before,
.toolbar-chip[aria-pressed='true']::before { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }
.dashboard-dropdown-option:is([aria-selected='true'], [aria-checked='true']) .dashboard-selection-mark { color: var(--color-accent); border-color: currentColor; }
.dashboard-dropdown-option:focus-visible, .toolbar-chip:focus-visible { outline: none; box-shadow: none; }
.dashboard-dropdown-option:focus-visible::before, .toolbar-chip:focus-visible::before { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.dashboard-dropdown-option:is(:disabled, [aria-disabled='true']), .toolbar-chip:is(:disabled, [aria-disabled='true']) { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  :is(.dashboard-dropdown-option, .toolbar-chip):hover:not(:disabled):not([aria-disabled='true'])::before { background: var(--color-small-element-hover-surface); }
  :is(.dashboard-dropdown-option, .toolbar-chip):is([aria-pressed='true'], [aria-selected='true'], [aria-checked='true']):hover:not(:disabled):not([aria-disabled='true'])::before { background: color-mix(in srgb, var(--color-accent) 20%, transparent); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
}
:is(.dashboard-dropdown-option, .toolbar-chip):active:not(:disabled):not([aria-disabled='true'])::before { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }

/* 工具栏入口保持现有的紧凑轮廓。 */
#dashboard-toolbar :is(.dashboard-filter-entry, .toolbar-btn-group-item, .dashboard-toolbar-mode)::before {
  content: ''; position: absolute; z-index: -1; inset: 7px 0; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent); background: transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
#dashboard-toolbar :is(.dashboard-filter-entry.active-dropdown, .toolbar-btn-group-item.active)::before { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }
#dashboard-toolbar :is(.dashboard-filter-entry, .toolbar-btn-group-item, .dashboard-toolbar-mode):focus-visible { outline: none; box-shadow: none; }
#dashboard-toolbar :is(.dashboard-filter-entry, .toolbar-btn-group-item, .dashboard-toolbar-mode):focus-visible::before { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#dashboard-toolbar :is(button:disabled, [aria-disabled='true']) { opacity: .5; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  #dashboard-toolbar :is(.dashboard-filter-entry, .toolbar-btn-group-item, .dashboard-toolbar-mode):hover:not(:disabled)::before { background: var(--color-small-element-hover-surface); }
  #dashboard-toolbar :is(.dashboard-filter-entry.active-dropdown, .toolbar-btn-group-item.active):hover::before { background: color-mix(in srgb, var(--color-accent) 20%, transparent); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
}
#dashboard-toolbar :is(.dashboard-filter-entry, .toolbar-btn-group-item, .dashboard-toolbar-mode):active:not(:disabled)::before { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .dashboard-dropdown-option, .toolbar-chip, .dashboard-filter-search,
  .dashboard-dropdown-option::before, .toolbar-chip::before { transition: none; }
}

/* 窄屏保留三个入口，选项自行横向滚动；辅助开关不挤压主操作。 */
@media (max-width: 767px) {
  .dashboard-toolbar-row { padding: 4px 10px; gap: 4px; }
  .dashboard-filter-entries { gap: 4px; }
  #dashboard-toolbar .dashboard-filter-entry { flex: 1 1 0; max-width: none; flex-direction: column; justify-content: center; gap: 0; padding: 0 4px; }
  #dashboard-toolbar .dashboard-filter-entry::before { inset: 3px 0; }
  .dashboard-filter-summary { max-width: 100%; line-height: 18px; }
  .dashboard-filter-label { line-height: 20px; gap: 3px; }
  .dashboard-filter-label i { font-size: 13px; }
  .dashboard-entry-chevron { display: none; }
  #dashboard-toolbar .toolbar-btn-group-item.active { display: none; }
  #dashboard-toolbar .dashboard-toolbar-mode { width: 44px; min-width: 44px; }
  .dashboard-mode-text { display: none; }
  .dashboard-inline-panel { padding: 0 10px 6px; }
  .dashboard-inline-panel .sort-menu-body { gap: 8px; }
  .dashboard-inline-panel .dashboard-realtime-switch { flex-direction: column; justify-content: center; gap: 2px; }
  .dashboard-inline-panel .dashboard-realtime-switch > .flex > span { font-size: 12px; line-height: 18px; }
  .dashboard-inline-panel .dashboard-group-search { flex-basis: 112px; }
  .dashboard-inline-panel .dashboard-tag-search-field { flex-basis: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  #dashboard-toolbar *::before { transition: none; }
}
@media (max-width: 380px) {
  .dashboard-node-grid { gap: 8px; }
  .dashboard-node-status-card { padding-left: 6px; padding-right: 6px; }
  .dashboard-node-status-meta { white-space: nowrap; }
  .dashboard-network-totals .total-badge { padding-left: 6px; padding-right: 6px; }
}