/* css/views/status.css — 视图私有样式,owner: status 视图 agent。
 * 只许本视图 agent 写;全部选择器前缀 .v-status;颜色/间距用 var(--*)。 */

/* 页头操作槽内的「最后刷新」时间(W18:已迁入壳的 ctx.actions) */
.v-status-updated { font-size: 12px; }

/* 状态卡片组:自适应网格 */
/* 四卡固定一行四等分、等高;仅 <1100px 换行为 2×2(2026-07-14 用户修复 #2) */
.v-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 1100px) {
  .v-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 卡片内「标签 — 值」行 */
.v-status-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 38px; /* 2026-07-14 微调 #1:固定紧凑行高,不用均分 */
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-size: 13px;
}
.v-status-kv-label {
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: nowrap; /* 规格 #1:标签列绝不竖排 */
}
.v-status-kv-value {
  color: var(--color-text);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 卡片底部说明 */
.v-status-note {
  margin-top: var(--space-2);
  font-size: 12px;
}

/* 密钥池明细 */
.v-status-hint { margin-bottom: var(--space-3); }
.v-status-provider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary); /* icon 走 currentColor,随次级色 */
  margin: var(--space-4) 0 var(--space-2);
}
.v-status-pool .table-wrap { margin-bottom: var(--space-4); }

/* ---- 白画布 + 版头(§9g,2026-07-14):最后刷新时间 + 「刷新状态」居右 ---- */
.v-status-canvas {
  background: var(--color-surface);
  border-radius: 24px;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.v-status-canvas .section { margin-bottom: 0; }
.v-status-sub { font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-left: var(--space-2); }
.v-status-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.v-status-sec-head .section-title { margin-bottom: 0; }
.v-status-actions { display: flex; align-items: center; gap: var(--space-3); }
.v-status-subtitle { font-size: 14px; font-weight: 600; margin: var(--space-6) 0 var(--space-2); }
/* 健康卡(2026-07-14 用户规格 #2/#5):等高列布局;阴影加深一级增层次 */
.v-status-canvas .v-status-card {
  background: var(--color-card);
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 微调 #1:多余空白统一留卡底 */
  gap: 0;
}
.v-status-canvas .table th,
.v-status-canvas .table td { white-space: nowrap; } /* 基础排版:不竖排 */


/* ---- 2026-07-14 用户规格 #3/#5:异常卡红化 + 说明收进 ⓘ 悬浮 ---- */
/* .v-status-card-alert 外观已停用(2026-07-14 修复 #1) */
.v-status-card-title { display: flex; align-items: center; gap: var(--space-2); }
.v-status-info {
  display: inline-flex;
  color: var(--color-text-muted);
  cursor: help;
}
.v-status-info:hover { color: var(--color-text-secondary); }
.v-status-info:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.v-status-subtitle { display: flex; align-items: center; gap: var(--space-2); }


/* 规格 #4:卡标题左侧主题橙线性小图标 */
.v-status-card-icon { display: inline-flex; color: var(--color-icon-neutral); flex: none; } /* 微调 #2:中性灰 16px */
/* 规格 #6:警告级 = 3px 琥珀左边框(异常级沿用浅红底+红左边框;正常无边框) */
/* 2026-07-14 用户修复 #1:彩色左边框/浅红底逻辑删除 —— 警告与异常只靠
 * 状态胶囊颜色区分,卡片本身统一无边框浅灰底(.v-status-card-warn/-alert
 * 类仍由 JS 输出,但不再改变卡片外观)。 */


/* 密钥池明细 Provider 厂商柔和色(与模型映射同规,2026-07-14) */
.v-status-prov {
  display: inline-flex;
  padding: 1px var(--space-2);
  border-radius: 999px;
  background: var(--color-card);
  font-size: 12px;
  color: var(--color-text-secondary);
}
.v-status-prov-openai { background: rgba(16, 163, 127, 0.12); color: var(--color-prov-openai); }
.v-status-prov-anthropic { background: rgba(249, 115, 22, 0.14); color: var(--color-prov-anthropic); }
.v-status-prov-deepseek { background: rgba(77, 107, 254, 0.12); color: var(--color-prov-deepseek); }
.v-status-prov-gemini { background: rgba(79, 143, 208, 0.14); color: var(--color-prov-gemini); }