/* 顶栏设计优化（§10.21 后续）
 *
 * 设计规则：顶栏右侧**只放此刻需要知道的三件事**——
 *   ① 服务状态（最重要，用语义色）② 数据时间（新不新）③ 显示时区（当前渲染口径）。
 * 身份、环境、版本在用户菜单与「用户信息」抽屉里各已有一份，不再在顶栏重复占位：
 * 同一信息在一屏里出现三遍，只会让真正要看的那一项被淹掉。
 *
 * 结构上两点修正：
 *   · 固定高度 60 + nowrap：旧版是 flex-wrap: wrap，项目一多就把顶栏撑成两行；
 *   · 品牌块可截断：窄屏站点名很长时截断显示，而不是把整条顶栏挤变形。
 *
 * 本文件在 layout.css / components.css 之后加载（见 index.html），用于覆盖旧规则。
 */

.topbar {
  height: 60px;
  gap: var(--space-3);
  flex-wrap: nowrap;
}

.topbar__brand {
  min-width: 0;
  overflow: hidden;
}

.topbar__site,
.topbar__console {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__meta {
  flex-wrap: nowrap;
  gap: var(--space-2);
}

/* 顶栏信息统一样式：只用行内弹性 + 字号，不覆盖 badge 的语义底色。 */
.topbar__chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  line-height: 1;
  white-space: nowrap;
}

/* "安静"类信息（数据时间、显示时区）：中性描边胶囊，不与状态色抢注意力。 */
.topbar__chip--quiet {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--muted);
}

.topbar__divider {
  width: 1px;
  height: 22px;
  margin: 0 var(--space-1);
  background: var(--border);
}

/* 版本徽章挪到品牌旁边：小、低对比，属于"产品身份"而非运行状态。 */
.topbar__version {
  align-self: center;
  margin-left: var(--space-2);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: var(--fs-2xs);
}

/* 顶栏上的显示控件（语言 / 主题）与"站名 + 版本"两行结构。 */

.topbar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.topbar__select {
  height: 28px;
  max-width: 132px;
  padding: 0 6px;
  border: 1px solid var(--border-control);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
}

/* 站名一行、版本号紧跟其下（两者同属"产品身份"）。 */
.topbar__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.topbar__sub .topbar__version {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.topbar__sub .topbar__console {
  font-size: var(--fs-xs);
}

/* 窄屏：顶栏只保留"我在哪 + 我是谁"；状态与时间已在用户菜单的抽屉里可查。 */
@media (max-width: 1024px) {
  .topbar__meta .topbar__chip--quiet {
    display: none;
  }
}

@media (max-width: 768px) {
  .topbar {
    padding: 0 var(--space-4);
  }
}

@media (max-width: 430px) {
  .topbar__chip,
  .topbar__divider,
  .topbar__version {
    display: none;
  }

  /* 430px 下语言/主题仍要能用（它们是常用开关），但必须收窄：
     两个下拉 + 用户菜单 + 品牌块要能一起塞进 430 视口，否则整条顶栏会把页面撑出横向滚动。 */
  .topbar__select {
    max-width: 62px;
    padding: 0 2px;
  }

  .topbar__controls {
    gap: 4px;
  }
}