/* ==========================================================================
   app.css — 校正层 + 本页专用层
   ==========================================================================

   加载顺序：tokens.css → base.css → components.css → console.css → **本文件**
   （后面覆盖前面，所以校正必须放这里，而不是去改 vendored 的那三份）

   ─────────────────────────────────────────────────────────────────────────
   第一节 · 对 shadcn/ui **官方源码**的数值校正
   ─────────────────────────────────────────────────────────────────────────

   `ui.shadcn.com` 是重度 JS 渲染，直接抓只能拿到噪音（实测 curl 返回 000）。
   所以按官方仓库**原文**逐条核对（`github.com/shadcn-ui/ui` main 分支）：

     apps/v4/registry/new-york-v4/ui/{button,input,select,card,table,badge}.tsx

   校正放在本文件、**不直接改那三份 vendored CSS** —— 这样它们还能和上游 diff，
   一眼看出我们对官方做了哪些偏离。下面这张表就是全部偏离：

   | 项              | console 原值         | 官方源码                                     |
   |-----------------|----------------------|----------------------------------------------|
   | 按钮默认高       | 40px                 | h-9 = **36px**（sm 32 / lg 40）               |
   | 按钮·输入圆角     | var(--radius) 16px   | rounded-md = **0.8 × --radius**               |
   | 主按钮 hover     | /80                  | **/90**                                       |
   | 次级 hover       | /70                  | **/80**                                       |
   | 焦点环           | ring / 30%           | **ring / 50%**                                |
   | disabled         | opacity .4           | **opacity .5**                                |
   | 输入框           | 高 40 / bg card      | **h-9 / bg-transparent**（暗色 input/30）      |
   | 输入框阴影       | 无                   | **shadow-xs**                                 |
   | 卡片圆角         | --radius-lg          | rounded-xl = **1.4 × --radius**               |
   | 卡片阴影         | 无                   | **shadow-sm**                                 |
   | 卡片内距         | padding 24 均匀      | **py-6 + 各子块 px-6，子块间 gap-6**           |
   | 表头             | 12px + muted 灰字    | **h-10 px-2 + text-foreground**               |
   | 单元格           | 固定高 48 / 12px 内距 | **p-2 + align-middle（不锁行高）**             |
   | badge 圆角       | var(--radius)        | **rounded-full**                              |

   刻意**不改**的两处（属本页取向，不是偏离）：
     · 源码是 React + Tailwind 组件；本页是零构建静态站，用同一套令牌手写等价类。
     · 表格横向内距用 16px 而非官方 px-2（8px）—— 这是 6 列数据表，
       8px 会挤在一起；纵向节奏仍按官方 h-10 / p-2。
   ───────────────────────────────────────────────────────────────────────── */

/* ---------- 按钮 → 官方 h-9 / rounded-md / hover 90% / ring 50% ---------- */

.btn {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  gap: 8px;
  transition: background-color 150ms var(--ease), color 150ms var(--ease),
    border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.btn:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
.btn:disabled { opacity: 0.5; }

.btn-primary:hover { background: color-mix(in srgb, var(--primary) 90%, transparent); }
.btn-secondary:hover { background: color-mix(in srgb, var(--secondary) 80%, transparent); }

.btn-outline {
  border-color: var(--input);
  background: var(--background);
  box-shadow: var(--shadow-xs);
}
.btn-outline:hover { background: var(--accent); color: var(--accent-foreground); }
.dark .btn-outline { background: color-mix(in srgb, var(--input) 30%, transparent); }
.dark .btn-outline:hover { background: color-mix(in srgb, var(--input) 50%, transparent); }

.btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); }
.btn-destructive:hover { background: color-mix(in srgb, var(--destructive) 90%, transparent); }

.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--radius-md); }
.btn-lg { height: 40px; padding: 0 24px; font-size: 15px; }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }

/* ---------- 输入 / 选择 → 官方 h-9 / bg-transparent / shadow-xs / ring 50% ---------- */

.input,
.select,
.textarea {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border-color: var(--input);
  background: transparent;
  box-shadow: var(--shadow-xs);
}
.dark .input,
.dark .select,
.dark .textarea {
  background: color-mix(in srgb, var(--input) 30%, transparent);
}
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
.textarea { height: auto; padding: 10px 12px; }

/* 小号要写在基础规则之后，否则被覆盖 */
.input-sm,
.select.input-sm { height: 32px; padding: 0 10px; font-size: 13px; border-radius: var(--radius-md); }

/* ---------- 卡片 → 官方 rounded-xl + shadow-sm + py-6 / px-6 / gap-6 ---------- */

.card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.card > * { padding-left: 24px; padding-right: 24px; }

/* ---------- 表格 → 官方 h-10 + text-foreground；单元格不再锁死行高 ---------- */

.table th {
  height: 40px;
  padding: 0 16px;
  color: var(--foreground);
  font-weight: 500;
  font-size: 12.5px;
}
.table td {
  height: auto;
  padding: 10px 16px;
  vertical-align: middle;
}

/* ---------- badge → 官方 rounded-full ---------- */

.badge { border-radius: 999px; }

/* ==========================================================================
   第二节 · 本页专用（那套库里没有的东西）
   ========================================================================== */

/* ---------- 指标条：库里是 2 列，这里要 4 列 ---------- */

.verdict-metrics.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .verdict-metrics.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .verdict-metrics.cols-4 { grid-template-columns: minmax(0, 1fr); }
}
.verdict-metrics.cols-4 .verdict-metric { padding: 14px 16px; gap: 4px; }
.verdict-metrics.cols-4 .verdict-metric-value { font-size: 20px; }
.verdict-metric-note {
  font-size: 11.5px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.verdict-metric[data-warn="true"] .verdict-metric-value { color: var(--destructive); }

/* ---------- 顶栏右上角：时间戳 + 主题段控 + 刷新 ---------- */

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;      /* 左边无论有没有面包屑，这一组都贴右上角 */
  flex: none;
}

/* 时间戳是"参考信息"、不是控件：窗口一窄就让它先走，别把右边那组挤变形 */
@media (max-width: 1180px) {
  .topbar .topbar-when { display: none; }
}

/* 段控是**图标式**的：选中态只能靠 aria-pressed 表达（没有文字可读）。
   `.seg button[aria-pressed="true"]` 的白底 + 阴影在库 CSS 里已经给好了。 */
.seg { flex: none; }
.seg button { white-space: nowrap; }
.seg button svg { display: block; }

/* 库里 .seg 的圆角与焦点环是旧值，按官方口径校正
   （同一套 --radius 派生 + ring/50，见本文件第一节） */
.seg button { border-radius: var(--radius-sm); }
.seg button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}

/* 文字版段控（「按密钥」的时间维度那一组）。
   ⚠ 库里的 `.seg button` 是**为图标定的 30px 固定宽** —— 直接塞中文会挤成一团
   （实测：三个按钮互相压着，很难看）。
   这里只把宽度交还给内容、补足左右内边距；**容器胶囊、选中白底 + 阴影、悬停、焦点环
   全部沿用库里的**，所以它和右上角那组明暗切换是同一套外观，只是内容从图标换成了文字。
   高度也刻意与图标版一致（26px），两处放在同一行不会一高一矮。 */
.seg--text button {
  width: auto;
  /* 等宽：右上角那组图标天然等宽，文字版靠 min-width 拉到一致，
     三个段看起来才是一组（而不是"两字窄、三字宽"参差不齐）。 */
  min-width: 58px;
  height: 26px;
  padding: 0 10px;
  font-size: 12.5px;
}

/* 按钮里的图标与文字垂直对齐、不被压扁 */
.btn svg { flex: none; }

/* 「时间范围」这类短标签不要折行竖排 */
.content .block-head .hint,
.topbar .row > .hint { white-space: nowrap; }

/* ---------- 并排卡片：不要互相撑高 ---------- */

/* base.css 的 .grid-2 默认 stretch，矮卡片会被高的一列拉出一大片空白 */
.grid-2 { align-items: start; }

/* ---------- 表格宿主 + 长表滚动 ---------- */

.table-host { display: block; }

.table-wrap.scroll { max-height: 520px; overflow: auto; }
.table-wrap.scroll thead th { position: sticky; top: 0; z-index: 1; }
.table-wrap.scroll-sm { max-height: 380px; overflow: auto; }
.table-wrap.scroll-sm thead th { position: sticky; top: 0; z-index: 1; }

.table-wrap .table td.ep {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-wrap .table th.sortable { cursor: pointer; user-select: none; }
.table-wrap .table th.sortable:hover { background: var(--muted); }
.table-wrap .table th .arrow { color: var(--muted-foreground); margin-left: 4px; font-size: 10px; }
.table-wrap .table td.zero { color: var(--muted-foreground); }

/* ---------- 区块切分：服务器状态 / 用量统计 两个独立区 ---------- */

/* 第二个标题加一条上分隔线 + 更大上距，读起来是"新的一块"而不是同一块的续行 */
.block-head--divide {
  border-top: 1px solid var(--border);
  padding-top: 40px;
  margin-top: 24px;
  align-items: flex-end;
}

/* ---------- 图表 ---------- */

.chart--trend { height: 260px; }
.chart--matrix { height: 220px; }

/* 图表容器的定位参照 + 悬停提示 */
.chart-host { position: relative; }
.chart-tip {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -100%);
  margin-top: -6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--ease);
}
.chart-tip.is-on { opacity: 1; }
/* 命中圈：fill:none 默认不参与命中测试，必须显式 pointer-events:all */
.pt-hit { fill: none; pointer-events: all; cursor: pointer; }
.chart-grid-line { stroke: var(--border); stroke-width: 1; }
.chart-axis-text { fill: var(--muted-foreground); font-size: 10px; font-family: inherit; }

/* ---------- 横条（状态码 / 方法分布） ---------- */

.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}
.bar-row > .k {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted-foreground);
}
.bar-row > .v { text-align: right; font-variant-numeric: tabular-nums; }
.bar-row[data-bad="true"] > .v { color: var(--destructive); }
.bar-row[data-bad="true"] > .k { color: var(--destructive); }

/* ---------- 口径说明：长文本键值行（覆盖库里的右对齐短值版） ---------- */

.kv-row--wrap {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px 0;
}
.kv-row--wrap .kv-key {
  font-size: 12.5px;
  color: var(--foreground);
  font-weight: 500;
  padding-top: 1px;
}
.kv-row--wrap .kv-val {
  text-align: left;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted-foreground);
}
@media (max-width: 720px) {
  .kv-row--wrap { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- 页脚说明 ---------- */

.footer-note {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.7;
}

/* ---------- 骨架屏 ---------- */

.sk-line { height: 12px; width: 60%; margin-bottom: 8px; }
.sk-value { height: 22px; width: 45%; }

/* ---------- 尊重「减少动态效果」 ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}