/* ═══════════════════════════════════════════════════════════
   运维页样式（重写版）
   
   ⚠️ 重要原则：
     1. 绝不定义 :root 变量 —— 避免污染原站点主题
     2. 所有变量加 --ops- 前缀，作用域限定在 #t-ops 内
     3. 所有类名加 ops- 前缀，避免与原站点撞车
     4. 主题切换只影响运维页（原站点的 :root 不动）
   ═══════════════════════════════════════════════════════════ */

/* ─────────────── 变量（只作用于运维页容器） ─────────────── */

#t-ops {
  /* 默认：深色（与原站点 :root 一致，避免视觉突变） */
  --ops-bg:     #0d1117;
  --ops-panel:  #161b22;
  --ops-panel2: #1c232c;
  --ops-line:   rgba(255,255,255,.10);
  --ops-tx:     #e6edf3;
  --ops-dim:    #8b949e;
  --ops-dim2:   #6e7681;
  --ops-acc:    #58a6ff;
  --ops-ok:     #3fb950;
  --ops-warn:   #d29922;
  --ops-bad:    #f85149;
  --ops-pur:    #a371f7;
  --ops-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* 浅色：点主题按钮切过来 */
#t-ops.ops-light {
  --ops-bg:     #f2f5fa;
  --ops-panel:  #ffffff;
  --ops-panel2: #f4f6fa;
  --ops-line:   rgba(15,23,42,.10);
  --ops-tx:     #0f172a;
  --ops-dim:    #5b6b82;
  --ops-dim2:   #8b9bb0;
  --ops-acc:    #2563eb;
  --ops-ok:     #16a34a;
  --ops-warn:   #d97706;
  --ops-bad:    #dc2626;
  --ops-pur:    #7c3aed;
  --ops-shadow: 0 1px 3px rgba(15,23,42,.06);
}



/* 运维页容器本身：背景和文字跟随自己的主题 */
#t-ops {
  color: var(--ops-tx);
}



/* ─────────────── 工具条 ─────────────── */

.ops-bar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.ops-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ops-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 8px;
  border: 1px solid var(--ops-line); background: var(--ops-panel);
  color: var(--ops-dim); font-size: 13px; cursor: pointer;
  transition: all .12s;
}
.ops-tab:hover { border-color: var(--ops-acc); color: var(--ops-tx); }
.ops-tab.on {
  background: var(--ops-acc); border-color: var(--ops-acc);
  color: #fff; font-weight: 600;
}
.ops-tb-ico { font-size: 14px; }
.ops-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.ops-sel, .ops-inp {
  padding: 6px 10px; border-radius: 7px; font-size: 13px;
  border: 1px solid var(--ops-line); background: var(--ops-panel); color: var(--ops-tx);
}
.ops-inp { min-width: 130px; }
.ops-wins { display: flex; gap: 2px; background: var(--ops-panel2); border-radius: 7px; padding: 2px; }
.ops-win {
  padding: 5px 10px; border-radius: 5px; border: 0;
  background: transparent; color: var(--ops-dim); font-size: 12px; cursor: pointer;
}
.ops-win:hover { color: var(--ops-tx); }
.ops-win.on { background: var(--ops-panel); color: var(--ops-acc); font-weight: 600; }
.ops-btn {
  padding: 6px 12px; border-radius: 7px; font-size: 12.5px;
  border: 1px solid var(--ops-line); background: var(--ops-panel);
  color: var(--ops-tx); cursor: pointer;
}
.ops-btn:hover { border-color: var(--ops-acc); }
.ops-btn.on { background: var(--ops-acc); border-color: var(--ops-acc); color: #fff; }
.ops-btn:disabled { opacity: .5; cursor: default; }

.ops-bar2 {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; margin-bottom: 12px;
}

/* ─────────────── 加载 / 提示 ─────────────── */

.ops-loading { padding: 26px; text-align: center; color: var(--ops-dim); font-size: 13px; }
.ops-alert {
  padding: 9px 13px; border-radius: 8px; margin: 8px 0; font-size: 13px;
  color: var(--ops-tx);
}
.ops-alert.bad  { background: rgba(220,38,38,.12);  border-left: 3px solid var(--ops-bad); }
.ops-alert.warn { background: rgba(217,119,6,.12);  border-left: 3px solid var(--ops-warn); }
.ops-alert.ok   { background: rgba(22,163,74,.12);  border-left: 3px solid var(--ops-ok); }
.ops-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--ops-dim); margin: 8px 0;
}
.ops-meta.dim { color: var(--ops-dim2); }

/* ─────────────── 图表网格 ─────────────── */

.ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.ops-card {
  background: var(--ops-panel); border: 1px solid var(--ops-line);
  border-radius: 10px; padding: 12px 14px 8px; min-width: 0;
}
.ops-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.ops-card-title { font-size: 12.5px; color: var(--ops-dim); }
.ops-card-cur { font-size: 17px; font-weight: 600; color: var(--ops-tx); white-space: nowrap; }
.ops-card-cur.warn { color: var(--ops-warn); }
.ops-card-cur.bad  { color: var(--ops-bad); }
.ops-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ops-ylab, .ops-xlab { fill: var(--ops-dim2); font-size: 9px; }
.ops-gl { stroke: var(--ops-line); stroke-width: 1; }
.ops-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ops-dot { fill: var(--ops-panel); stroke-width: 1.6; }
.ops-area { stroke: none; }
.ops-thr { stroke-dasharray: 4 3; stroke-width: 1; opacity: .6; }
.ops-thr.warn { stroke: var(--ops-warn); }
.ops-thr.bad  { stroke: var(--ops-bad); }
.ops-card-stats {
  display: flex; gap: 12px; font-size: 11px;
  color: var(--ops-dim2); margin-top: 5px; padding-top: 5px;
  border-top: 1px solid var(--ops-line);
}
.ops-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--ops-dim2); font-size: 12px;
  border: 1px dashed var(--ops-line); border-radius: 6px;
}

/* ─────────────── 体检 ─────────────── */

.ops-ck-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 12px; margin-bottom: 14px;
  border: 1px solid var(--ops-line); background: var(--ops-panel);
}
.ops-ck-hero.ok   { border-color: rgba(22,163,74,.4);  background: rgba(22,163,74,.06); }
.ops-ck-hero.warn { border-color: rgba(217,119,6,.4);  background: rgba(217,119,6,.06); }
.ops-ck-hero.bad  { border-color: rgba(220,38,38,.4);  background: rgba(220,38,38,.06); }
.ops-ck-ico { font-size: 38px; line-height: 1; }
.ops-ck-txt { font-size: 20px; font-weight: 600; color: var(--ops-tx); }
.ops-ck-sub { font-size: 12px; color: var(--ops-dim); margin-top: 3px; }
.ops-ck-acts { margin-left: auto; display: flex; gap: 8px; }

.ops-ck-node {
  border: 1px solid var(--ops-line); border-radius: 10px;
  margin-bottom: 10px; overflow: hidden; background: var(--ops-panel);
}
.ops-ck-node.warn { border-color: rgba(217,119,6,.45); }
.ops-ck-node.bad  { border-color: rgba(220,38,38,.45); }
.ops-ck-nhead {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; background: var(--ops-panel2);
  border-bottom: 1px solid var(--ops-line); flex-wrap: wrap;
  color: var(--ops-tx);
}
.ops-ck-nhead .ops-dim { color: var(--ops-dim); font-size: 12px; }
.ops-ck-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; font-size: 13px; border-top: 1px solid var(--ops-line);
}
.ops-ck-item:first-of-type { border-top: 0; }
.ops-ck-item.ok   { color: var(--ops-ok); }
.ops-ck-item.warn { color: var(--ops-warn); }
.ops-ck-item.bad  { color: var(--ops-bad); }
.ops-ck-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; background: currentColor;
}

/* ─────────────── 联邦 ─────────────── */

.ops-fed-kpis {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.ops-fed-kpi {
  background: var(--ops-panel); border: 1px solid var(--ops-line);
  border-radius: 9px; padding: 11px 13px;
}
.ops-fed-kpi .ops-fk { font-size: 11.5px; color: var(--ops-dim); }
.ops-fed-kpi .ops-fv { font-size: 19px; font-weight: 600; margin-top: 3px; color: var(--ops-tx); }
.ops-fed-kpi .ops-fv.ok   { color: var(--ops-ok); }
.ops-fed-kpi .ops-fv.warn { color: var(--ops-warn); }
.ops-fed-kpi .ops-fv.bad  { color: var(--ops-bad); }

.ops-pill {
  display: inline-block; font-size: 11px; padding: 2px 8px;
  border-radius: 10px; border: 1px solid var(--ops-line); color: var(--ops-dim);
}
.ops-pill.ok  { color: var(--ops-ok);  border-color: rgba(22,163,74,.4); }
.ops-pill.bad { color: var(--ops-bad); border-color: rgba(220,38,38,.4); }

/* 运维页里的表格 */
.ops-tw { overflow-x: auto; border: 1px solid var(--ops-line); border-radius: 8px; }
.ops-tw table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ops-tw thead th {
  background: var(--ops-panel2); color: var(--ops-dim);
  font-weight: 500; text-align: left; padding: 8px 12px;
  white-space: nowrap;
}
.ops-tw tbody td { padding: 8px 12px; border-top: 1px solid var(--ops-line); color: var(--ops-tx); }
.ops-tw tbody tr:hover { background: var(--ops-panel2); }

.ops-mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ─────────────── 实例列表 ─────────────── */

.ops-dur { font-variant-numeric: tabular-nums; }
.ops-dur.ok   { color: var(--ops-ok); }
.ops-dur.warn { color: var(--ops-warn); }

.ops-pager {
  display: flex; gap: 4px; align-items: center;
  justify-content: center; flex-wrap: wrap; margin-top: 12px;
}
.ops-pager .ops-btn { min-width: 34px; text-align: center; padding: 5px 9px; }
.ops-pager .ops-dim { color: var(--ops-dim2); padding: 0 3px; }

/* 表格里的操作按钮窄一点 */
.ops-tw .ops-btn { padding: 4px 11px; font-size: 12px; }

/* 搜索框聚焦时边框高亮 */
.ops-inp:focus, .ops-sel:focus {
  border-color: var(--ops-acc);
  outline: none;
}

/* ─────────────── 日志聚合 ─────────────── */

.ops-eg-list { display: flex; flex-direction: column; gap: 6px; }
.ops-eg-row {
  position: relative; border: 1px solid var(--ops-line);
  border-radius: 8px; overflow: hidden; background: var(--ops-panel);
}
.ops-eg-bar { position: absolute; left: 0; top: 0; bottom: 0; opacity: .12; }
.ops-eg-row.bad  .ops-eg-bar { background: var(--ops-bad); }
.ops-eg-row.warn .ops-eg-bar { background: var(--ops-warn); }
.ops-eg-row.info .ops-eg-bar { background: var(--ops-acc); }
.ops-eg-body {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer; font-size: 13px; color: var(--ops-tx);
}
.ops-eg-body:hover { background: var(--ops-panel2); }
.ops-eg-name { flex: 1; }
.ops-eg-cnt { font-weight: 600; font-variant-numeric: tabular-nums; }
.ops-eg-row.bad  .ops-eg-cnt { color: var(--ops-bad); }
.ops-eg-row.warn .ops-eg-cnt { color: var(--ops-warn); }
.ops-eg-arrow { color: var(--ops-dim2); font-size: 11px; }
.ops-eg-samples {
  display: none; padding: 8px 14px 10px;
  border-top: 1px solid var(--ops-line); background: var(--ops-panel2);
}
.ops-eg-sample {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.7; color: var(--ops-dim);
  white-space: pre-wrap; word-break: break-all;
  padding: 3px 0; border-bottom: 1px dashed var(--ops-line);
}
.ops-eg-sample:last-child { border-bottom: 0; }

.ops-logbox {
  background: var(--ops-panel2); border: 1px solid var(--ops-line);
  border-radius: 8px; padding: 11px 13px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.65;
  max-height: 520px; overflow: auto;
  white-space: pre-wrap; word-break: break-all;
  color: var(--ops-dim);
}
.ops-logbox .e { color: var(--ops-bad); }
.ops-logbox .w { color: var(--ops-warn); }

/* ─────────────── 顶栏主题按钮 ─────────────── */

.ops-theme-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 7px; font-size: 12.5px;
  cursor: pointer;
  /* 顶栏按钮跟随原站点主题，不强制颜色 */
}

/* ═══════════════ 响应式 ═══════════════ */

@media (max-width: 860px) {
  .ops-grid { grid-template-columns: 1fr; }
  .ops-fed-kpis { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 720px) {
  /* ── 顶栏紧凑化（仅窄屏，桌面不受影响；原站点未做移动端，这里补一下）── */
  header { padding: 9px 12px; gap: 8px; flex-wrap: nowrap; }
  header .brand { font-size: 15px; white-space: nowrap; }
  header .sp { min-width: 0; }
  header button.sm { padding: 4px 8px; font-size: 11.5px; white-space: nowrap; }
  header #huser { font-size: 12px; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 720px) {
  .ops-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .ops-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .ops-tabs::-webkit-scrollbar { height: 3px; }
  .ops-tab { flex-shrink: 0; padding: 6px 10px; font-size: 12.5px; }
  .ops-tools { margin-left: 0; }
  .ops-wins { flex: 1; }
  .ops-win { flex: 1; text-align: center; }
  .ops-bar2 { flex-direction: column; align-items: stretch; }
  .ops-sel, .ops-inp { width: 100%; box-sizing: border-box; }
  .ops-grid { grid-template-columns: 1fr; gap: 10px; }
  .ops-card { padding: 10px 11px 7px; }
  .ops-card-cur { font-size: 15px; }
  .ops-svg { height: 108px; }
  .ops-ck-hero { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .ops-ck-ico { font-size: 30px; }
  .ops-ck-txt { font-size: 17px; }
  .ops-ck-acts { margin-left: 0; width: 100%; }
  .ops-ck-acts .ops-btn { flex: 1; }
  .ops-ck-item { padding: 7px 12px; font-size: 12.5px; }
  .ops-fed-kpis { grid-template-columns: repeat(2, 1fr); }
  .ops-pager { gap: 3px; }
  .ops-pager .ops-btn { min-width: 30px; padding: 4px 7px; font-size: 12px; }
  .ops-tw table { min-width: 620px; }
  .ops-fed-kpi .ops-fv { font-size: 16px; }
}

@media (max-width: 420px) {
  .ops-tb-ico { display: none; }
  .ops-tab { padding: 6px 9px; font-size: 12px; }
  .ops-fed-kpis { grid-template-columns: 1fr 1fr; }
}