/* ============================================================
   PC 端样式 —— / 专属（桌面布局：标题栏、交通灯、web-mode 微调）
   依赖共享层：tokens.css（令牌）+ style.css（通用组件）
   ============================================================ */

/* ===== 标题栏 ===== */
.title-bar {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--titlebar-bg);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  position: relative;
}

.traffic-lights {
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-app-region: no-drag;
  width: 68px;
  padding-left: 10px;
  padding-right: 6px;
  position: relative;
  z-index: 10;
  height: 100%;
  flex-shrink: 0;
}

.traffic-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  position: relative;
  -webkit-app-region: no-drag;
  flex-shrink: 0;
  background: transparent;
}

.traffic-light:hover {
  cursor: pointer;
}

.traffic-light.close {
  background-color: #ff5f57;
}
.traffic-light.minimize {
  background-color: #febc2e;
}
.traffic-light.zoom {
  background-color: #28c840;
}

/* 玻璃球高光与阴影 */
.traffic-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 8px 4px at 50% 15%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 10px 4px at 50% 95%, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
  z-index: 1;
}

/* 图标 - 用 SVG data URI 绘制 */
.traffic-light .tl-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  display: block;
}

/* 鼠标进入按钮组，图标立即显示 */
.traffic-lights:hover .traffic-light .tl-icon {
  opacity: 1;
}

.tl-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.title-bar-drag {
  -webkit-app-region: drag;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  min-width: 0;
}

.title-bar-drag .app-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}

.title-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  min-width: 76px;
  padding-left: 8px;
  -webkit-app-region: no-drag;
}

/* 主题快速切换按钮 */
.theme-toggle-btn {
  width: 26px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text-secondary);
  -webkit-app-region: no-drag;
  transition: background 0.15s ease, color 0.15s ease;
}

.theme-toggle-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.theme-toggle-btn svg {
  width: 13px;
  height: 13px;
}

.server-info {
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 3px 8px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ===== 网页模式微调（自 web.css 并入）=====
 * 当以网页形式运行时，body 会带有 .web-mode 类
 * 用于隐藏/调整桌面应用专属的 UI 元素
 */

/* 隐藏交通灯按钮组 */
.web-mode .traffic-lights {
  display: none;
}

/* 标题栏拖拽改为普通区域 */
.web-mode .title-bar-drag {
  -webkit-app-region: no-drag;
  cursor: default;
}

/* 调整标题栏右侧宽度（因为左侧交通灯没了） */
.web-mode .title-bar-right {
  width: auto;
  min-width: 76px;
  justify-content: flex-end;
}

/* 调整标题栏左内边距 */
.web-mode .title-bar {
  padding-left: 16px;
}

/* 网页模式下让标题更突出（因为没有交通灯遮挡） */
.web-mode .title-bar-drag .app-title {
  font-weight: 600;
  color: var(--text-primary);
}

/* 网页模式下允许文字选择（桌面应用禁止了） */
.web-mode .history-item-server,
.web-mode .server-list-item-url,
.web-mode .detail-row-value {
  user-select: text;
  -webkit-user-select: text;
}

/* ===== 宽屏桌面布局（≥960px）=====
 * 仪表与数据卡双栏、波形全宽加高、按钮横排、内容限宽居中，
 * 避免移动端单列布局直接拉伸成"自适应"观感。窄窗口自动回落单列。
 */
@media (min-width: 960px) {
  .view-dashboard {
    padding: 36px 40px 28px;
    gap: 28px;
  }

  .view-dashboard > .dashboard,
  .view-dashboard > .waveform-section,
  .view-dashboard > .optimization-section,
  .view-dashboard > .control-bar {
    width: 100%;
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 仪表居左，数据卡居右 */
  .dashboard {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 24px 56px;
    align-items: center;
  }

  .gauge-container {
    width: 300px;
    height: 300px;
    justify-self: center;
  }

  .data-rows {
    max-width: none;
    gap: 16px;
  }

  .data-row {
    gap: 16px;
  }

  .data-item {
    padding: 24px 20px;
  }

  .data-value {
    font-size: 28px;
  }

  .data-label {
    font-size: 12px;
  }

  /* 波形加高，铺满内容区 */
  .waveform-canvas {
    height: 180px;
  }

  /* 操作按钮横向排列 */
  .control-bar {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 0;
    padding-top: 0;
  }
}