/* ============================================================
 * app.css —— overview / settings 两页用到的补充样式
 *
 * 这两页是手写的，用到了一批 shared.css 里没有的 class
 * （kv-grid / note / infra / job 等），集中定义在这里。
 * ============================================================ */

/* ---------------------------------------------------------------- 键值网格 */

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 18px;
}
.kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kv > span { font-size: 11.5px; color: var(--fg-3); letter-spacing: 0.2px; }
.kv > b {
  font-size: 14px; font-weight: 650; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------------------------------------------------------------- 提示条 */

.note {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; padding: 10px 13px;
  border-radius: 11px; font-size: 12.5px; line-height: 1.6;
  background: rgba(148, 163, 184, 0.07);
  border: 1px solid var(--line);
  color: var(--fg-2);
}
.note i { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; }
.note.warn-note {
  background: rgba(245, 181, 68, 0.09);
  border-color: rgba(245, 181, 68, 0.24);
  color: #f0cf94;
}
.note.warn-note i { color: var(--warn); }
.note.bad-note {
  background: rgba(246, 89, 110, 0.09);
  border-color: rgba(246, 89, 110, 0.26);
  color: #f2a3ae;
}
.note.bad-note i { color: var(--bad); }

/* ---------------------------------------------------------------- 概览：基础设施卡 */

.infra-grid {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.infra {
  padding: 15px 16px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
}
.infra-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--fg-2); font-weight: 550;
  margin-bottom: 10px;
}
.infra-h i { width: 15px; height: 15px; flex: 0 0 15px; color: var(--fg-3); }
.infra-h .badge { margin-left: auto; }
.infra-v {
  font-size: 19px; font-weight: 700; letter-spacing: -0.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.infra-s { font-size: 11.5px; color: var(--fg-3); margin-top: 4px; }

/* ---------------------------------------------------------------- 设置：双列 */

.set-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* ---------------------------------------------------------------- 设置：定时任务 */

.job-list { display: flex; flex-direction: column; gap: 8px; }
.job {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 12px;
  background: rgba(148, 163, 184, 0.045);
  border: 1px solid var(--line);
}
.job-ic {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(45, 212, 191, 0.11); color: var(--acc);
}
.job-ic i { width: 15px; height: 15px; }
.job-n { font-size: 13.5px; font-weight: 600; }
.job-s {
  font-size: 11px; color: var(--fg-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.job-t {
  margin-left: auto; font-size: 11.5px; color: var(--fg-2);
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .job { flex-wrap: wrap; }
  .job-t { margin-left: 44px; width: 100%; text-align: left; }
}