/* Agent2API · 系统状态页（运维仪表盘）：四张卡片的排布 / 使用率条 / journal 视图 */

/* ─── 卡片网格 ───
   宿主卡与维护卡横跨整行：宿主卡的左信息右三条使用率并排放才不挤，
   维护卡里的 journal 视图要足够的宽度与高度。中间「服务状态」「Mihomo
   内核」两张小卡各占一列。.panel 自带 margin-bottom，网格里用 gap 统一
   间距（与签到页 .ck-main 同一套处理），不抵掉会叠出双倍行距。 */
.sys-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.sys-grid .panel { margin-bottom: 0; }
.sys-grid .sys-host,
.sys-grid .sys-maint { grid-column: 1 / -1; }

/* 窄屏收成单列：卡片里左右两栏的信息在半屏宽度下会互相挤压 */
@media (max-width: 900px) {
  .sys-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ─── 宿主卡：左列文本信息，右列三条使用率 ─── */
.sys-host-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .sys-host-cols { grid-template-columns: minmax(0, 1fr); }
}

/* 指标行：左标签右读数。 hairline 分隔线只用来分组，最后一行不画 */
.sys-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 12.5px;
}
.sys-row:last-child { border-bottom: none; }
.sys-row .k { color: var(--text-3); flex: 0 0 auto; }
.sys-row .v {
  color: var(--text);
  font-weight: 600;
  text-align: right;
  min-width: 0;
  word-break: break-all;
}

/* ─── 使用率条 ───
   轨道 6px 高、圆角胶囊：与徽标的视觉重量相称，读数（右侧灰色小字）才是主信息。
   语义色 >85% 红 / >60% 黄与顶栏胶囊同一套阈值（阈值收敛在 system-panel.js 的
   usageKind，这里只管画）。 */
.sys-bar-row { display: flex; flex-direction: column; gap: 5px; padding: 6px 0; }
.sys-bar-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.sys-bar-meta .k { color: var(--text-2); font-weight: 600; min-width: 0; }
.sys-bar-meta .v {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: right;
  white-space: nowrap;
}
.sys-bar-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-inset);
  overflow: hidden;
}
.sys-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  /* 4 秒一拍的读数跳变用过渡抹平：进度条是页面上唯一持续变化的图形，
     不加过渡会每 4 秒「跳」一次，看着像卡顿 */
  transition: width 0.4s ease;
}
.sys-bar-fill.warn { background: var(--warn); }
.sys-bar-fill.bad { background: var(--danger); }

/* ─── Mihomo 内核卡的大号健康行 ─── */
.sys-health {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0 2px;
  font-size: 13.5px;
  font-weight: 600;
}
.sys-health .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sys-health.ok { color: var(--ok); }
.sys-health.ok .dot { background: var(--ok); }
.sys-health.bad { color: var(--danger); }
.sys-health.bad .dot { background: var(--danger); }

/* ─── 数据库与维护卡 ─── */
.sys-vacuum-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* VACUUM 的失败原因：不占独立一行会与结果注记挤在一起，给个语义色就够
   （按钮就在旁边，重试路径是现成的） */
.sys-vacuum-err { color: var(--danger); font-size: 12px; }

/* journal 视图的来源行：来源与备注是元信息，弱化成灰字 */
.sys-journal-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-3);
}
.sys-journal-head b { color: var(--text-2); font-size: 12px; font-weight: 600; }

/* journal 本体：等宽、限高、内部滚动（贴底逻辑在 system-panel.js 的 render 里）。
   pre-wrap 而不是 pre：日志行可能很长，横向滚动会让人来回拖，折行更可读 */
.sys-journal {
  margin: 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ─── 页面顶部内联错误条 ───
   轮询失败不打断旧数据的展示（仪表盘的价值就在「上一轮读数也还有用」），
   只在顶部给一条语义色的说明，重试交给轮询 */
.sys-error {
  margin-bottom: 14px;
  padding: 8px 14px;
  border: 1px solid var(--danger-bd);
  border-radius: var(--r-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
}