/*
 * 小雷 Claw 管理后台 v2 — 统一设计规范
 * ======================================
 *
 * 设计原则（黎总定调 0609）：
 *   1. 单色调稳 UI  — 深色底 + 蓝主色 + 三色状态 (绿/黄/红)，禁止五颜六色
 *   2. 分工统一     — 18 模块共用此 style.css，组件复用，不重复定义
 *   3. 角色感知     — 一份代码两种角色 (central / tenant)
 *
 * 模块一览（18 个）：
 *   - 必备 14:  index / tasks / agents / evolution / knowledge / alerts /
 *               audit / chat / cloud / bridge / billing / status /
 *               notify / api-docs
 *   - 分布式 4:  tenants / releases / api-keys / federation
 *
 * 升级历史:
 *   v2.0  0609  统一规范: 抽公共组件，加分布式特有类
 *   v1.0  0608  60 行基础 (bg/panel/acc/3色)
 */

/* ── CSS 变量层 ────────────────────────────────── */

:root {
  /* 主色 */
  --bg:         #0f172a;   /* 深色背景 */
  --bg-2:       #131c2f;   /* 次背景 (浅一档) */
  --panel:      #1e293b;   /* 卡片底 */
  --panel-2:    #243246;   /* 卡片次底 (h 表头) */
  --border:     #334155;   /* 边框 */
  --border-2:   #475569;   /* 次边框 (强调) */
  --text:       #e2e8f0;   /* 主文字 */
  --text-2:     #cbd5e1;   /* 次文字 */
  --muted:      #94a3b8;   /* 弱化文字 */
  --muted-2:    #64748b;   /* 更弱 (label) */
  --accent:     #38bdf8;   /* 蓝主色 */
  --accent-dim: rgba(56,189,248,0.10);
  --accent-glow:rgba(56,189,248,0.04);

  /* 状态色 (只 3 个，禁止增加) */
  --green:      #22c55e;
  --green-dim:  rgba(34,197,94,0.15);
  --yellow:     #eab308;
  --yellow-dim: rgba(234,179,8,0.15);
  --red:        #ef4444;
  --red-dim:    rgba(239,68,68,0.15);

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
          "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* 间距 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;

  /* 圆角 */
  --r-sm: 4px;  --r: 6px;  --r-md: 8px;  --r-lg: 12px;

  /* 阴影 (克制用) */
  --shadow: 0 1px 0 rgba(0,0,0,0.3);
}

/* ── Reset ────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--mono); font-size: 12px; }

/* ── 排版 ────────────────────────────────── */

h1 { font-size: 18px; font-weight: 600; color: var(--text); }
h2 { font-size: 15px; font-weight: 600; color: var(--text); }
h3 { font-size: 14px; font-weight: 600; color: var(--text-2); }
.sub { color: var(--muted); font-size: 12px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.muted-2 { color: var(--muted-2); font-size: 11px; }

/* ── 布局 ────────────────────────────────── */

/* 登录层 */
#login { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 9999; }
#login.hidden { display: none; }
#login .box { background: var(--panel); padding: 32px; border-radius: var(--r-lg); border: 1px solid var(--border); text-align: center; min-width: 320px; }
#login h1 { color: var(--accent); font-size: 22px; margin-bottom: 4px; font-weight: 600; }
#login p.sub { margin-bottom: 20px; }
#login input { padding: 10px 14px; border-radius: var(--r); border: 1px solid var(--border-2); background: var(--bg); color: var(--text); font-size: 14px; width: 240px; text-align: center; outline: none; }
#login input:focus { border-color: var(--accent); }
#login button { display: block; margin: 12px auto 0; padding: 8px 32px; background: var(--accent); color: var(--bg); border: none; border-radius: var(--r); font-size: 14px; font-weight: 600; cursor: pointer; }
#login button:hover { background: #0ea5e9; }
#login .err { color: var(--red); font-size: 12px; margin-top: 8px; min-height: 16px; }
#login .role-hint { color: var(--muted); font-size: 11px; margin-top: 12px; }

/* 主框架 (登录后) */
#app { display: flex; height: 100vh; overflow: hidden; }

/* 侧边导航 */
nav.sidebar { width: 220px; background: var(--bg-2); padding: 16px 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); flex-shrink: 0; }
nav.sidebar h2 { font-size: 11px; color: var(--muted-2); padding: 0 16px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
nav.sidebar a { display: flex; align-items: center; gap: 8px; padding: 9px 16px; color: var(--text-2); font-size: 13px; border-left: 3px solid transparent; transition: all 0.15s; cursor: pointer; }
nav.sidebar a:hover, nav.sidebar a.active { color: var(--accent); background: var(--accent-dim); border-left-color: var(--accent); text-decoration: none; }
nav.sidebar .group { font-size: 10px; color: var(--muted-2); padding: 12px 16px 6px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
nav.sidebar .group:first-child { padding-top: 0; }
nav.sidebar .role-tag { margin: 0 16px 12px; padding: 4px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); font-size: 11px; color: var(--muted); text-align: center; }
nav.sidebar .role-tag.central { color: var(--accent); border-color: var(--accent); }
nav.sidebar .role-tag.tenant { color: var(--green); border-color: var(--green); }
nav.sidebar .logout { color: var(--red); margin-top: auto; cursor: pointer; padding: 10px 16px; font-size: 12px; }

main { flex: 1; display: flex; flex-direction: column; overflow: auto; }
main iframe { flex: 1; border: none; width: 100%; height: 100%; }

/* iframe 内嵌页 (子页公共) */
.page { padding: 20px; }
.page > header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.page > header h1 { font-size: 16px; }
.page > header .sub { margin-left: auto; }
.page > header .meta { color: var(--muted); font-size: 12px; }

/* ── 卡片 / 容器 ────────────────────────────────── */

.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.card-h { padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.card-h .count { color: var(--muted); font-weight: 400; font-size: 11px; }
.card-h .actions { margin-left: auto; display: flex; gap: 6px; }
.card-b { padding: 14px; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; }

/* 统计卡 */
.stats { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 16px; flex: 1; min-width: 130px; }
.stat-card .num { font-size: 22px; font-weight: 700; color: var(--accent); }
.stat-card .num.critical { color: var(--red); }
.stat-card .num.warning { color: var(--yellow); }
.stat-card .num.ok { color: var(--green); }
.stat-card .label { font-size: 11px; color: var(--muted); margin-top: 2px; }
.stat-card .delta { font-size: 11px; color: var(--muted-2); margin-top: 4px; }

/* ── 表格 ────────────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; padding: 8px 12px; background: var(--panel-2); color: var(--muted); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
tr { transition: background 0.1s; }
tbody tr:hover td { background: var(--accent-glow); }
tbody tr.expand td { background: var(--accent-dim); }
tbody tr.expand .arrow { transform: rotate(90deg); }
td .truncate, .truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

/* ── Badge / 状态 ────────────────────────────────── */

.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.badge.ok { background: var(--green-dim); color: var(--green); }
.badge.warn { background: var(--yellow-dim); color: var(--yellow); }
.badge.err { background: var(--red-dim); color: var(--red); }
.badge.muted { background: rgba(148,163,184,0.15); color: var(--muted); }
.badge.accent { background: var(--accent-dim); color: var(--accent); }

/* 状态语义 (复用 .badge 也可直接用) */
.online, .status-online, .done, .verified { color: var(--green); }
.offline, .status-offline, .failed, .err { color: var(--red); }
.suspect, .status-suspect, .running, .warning { color: var(--yellow); }
.pending { color: var(--muted); }

/* 状态点 */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dot.ok { background: var(--green); }
.dot.warn { background: var(--yellow); }
.dot.err { background: var(--red); }
.dot.muted { background: var(--muted); }

/* ── 表单 / 按钮 ────────────────────────────────── */

input, select, textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 7px 10px;
  border-radius: var(--r);
  font-size: 12px;
  font-family: var(--font);
  outline: none;
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { font-family: var(--mono); font-size: 11px; resize: vertical; min-height: 50px; }
label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
form .field { margin-bottom: 10px; }
form .field-row { display: flex; gap: 8px; }
form .field-row > * { flex: 1; }

button, .btn {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--r);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
  white-space: nowrap;
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
button.primary, .btn.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 500; }
button.primary:hover, .btn.primary:hover { background: #0ea5e9; color: var(--bg); }
button.danger, .btn.danger { background: var(--red); color: white; border-color: var(--red); }
button.danger:hover, .btn.danger:hover { background: #dc2626; color: white; }
button.warn, .btn.warn { background: var(--yellow); color: var(--bg); border-color: var(--yellow); }
button.ghost, .btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
button.ghost:hover, .btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
button:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }
button.sm, .btn.sm { padding: 3px 8px; font-size: 11px; }
button.lg, .btn.lg { padding: 9px 18px; font-size: 14px; }

/* ── 反馈 / 提示 ────────────────────────────────── */

.alert-bar { padding: 10px 14px; border-radius: var(--r); font-size: 12px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; border: 1px solid; }
.alert-bar.critical { background: var(--red-dim); border-color: var(--red); color: var(--red); }
.alert-bar.warning { background: var(--yellow-dim); border-color: var(--yellow); color: var(--yellow); }
.alert-bar.info { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.alert-bar.ok { background: var(--green-dim); border-color: var(--green); color: var(--green); }

.toast { position: fixed; bottom: 16px; right: 16px; padding: 8px 14px; background: var(--panel-2); border: 1px solid var(--accent); border-radius: var(--r); font-size: 12px; opacity: 0; transition: opacity 0.3s; z-index: 99; pointer-events: none; }
.toast.show { opacity: 1; }
.toast.ok { border-color: var(--green); }
.toast.err { border-color: var(--red); }

.empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 12px; }
.loading { padding: 40px 20px; text-align: center; color: var(--muted); }
.err { color: var(--red); }

/* ── 工具类 ────────────────────────────────── */

.flex { display: flex; gap: 8px; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 800px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ── 角色识别 (分布式) ────────────────────────────────── */

.tenant-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; }
.tenant-card.self { border-color: var(--accent); }
.tenant-card .name { font-size: 14px; font-weight: 600; color: var(--text); }
.tenant-card .tier { font-size: 10px; padding: 2px 6px; border-radius: var(--r-sm); background: var(--panel-2); color: var(--muted); }
.tenant-card .tier.pro { background: var(--accent-dim); color: var(--accent); }
.tenant-card .tier.enterprise { background: var(--yellow-dim); color: var(--yellow); }
.tenant-card .stats { margin-top: 8px; display: flex; gap: 16px; font-size: 11px; color: var(--muted); }

.instance-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; }
.instance-card .id { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.instance-card .ver { font-size: 10px; color: var(--muted-2); }

/* 计费 */
.bill-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.bill-row:last-child { border-bottom: none; }
.bill-row .label { color: var(--muted); }
.bill-row .amount { font-family: var(--mono); color: var(--text); }
.bill-row.total { font-weight: 600; }
.bill-row.total .amount { color: var(--accent); font-size: 14px; }

/* 进化 */
.evolution-rule { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 8px; background: var(--bg-2); }
.evolution-rule .name { font-size: 12px; color: var(--accent); font-family: var(--mono); }
.evolution-rule .value { font-size: 11px; color: var(--text-2); margin-top: 4px; }
.evolution-rule .meta { font-size: 10px; color: var(--muted-2); margin-top: 4px; }
.evolution-rule .confidence { display: inline-block; padding: 1px 6px; background: var(--panel); border-radius: var(--r-sm); font-family: var(--mono); font-size: 10px; }
.evolution-rule .confidence.high { color: var(--green); }
.evolution-rule .confidence.low { color: var(--yellow); }

.proposal-ab { display: flex; gap: 12px; padding: 12px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r); }
.proposal-ab .arm { flex: 1; padding: 8px; background: var(--panel); border-radius: var(--r-sm); }
.proposal-ab .arm.a { border-left: 3px solid var(--accent); }
.proposal-ab .arm.b { border-left: 3px solid var(--green); }
.proposal-ab .arm .label { font-size: 10px; color: var(--muted-2); text-transform: uppercase; }
.proposal-ab .arm .metric { font-size: 18px; font-weight: 700; margin-top: 4px; }

/* 任务时间线 */
.timeline { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.timeline .step { display: inline; }
.timeline .step::after { content: " → "; color: var(--muted-2); }
.timeline .step:last-child::after { content: ""; }

/* ── 任务详情展开 (task-panel 用) ────────────────────────────────── */
.detail { padding: 10px 14px; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.6; }
.detail .desc { color: var(--text); white-space: pre-wrap; margin-bottom: 8px; padding: 8px 10px; background: var(--bg-2); border-radius: var(--r-sm); }
.detail .result { color: var(--green); white-space: pre-wrap; margin-bottom: 6px; padding: 8px 10px; background: var(--green-dim); border-radius: var(--r-sm); }
.detail .error { color: var(--red); white-space: pre-wrap; margin-bottom: 6px; padding: 8px 10px; background: var(--red-dim); border-radius: var(--r-sm); }
.detail .verify { color: var(--yellow); white-space: pre-wrap; padding: 8px 10px; background: var(--yellow-dim); border-radius: var(--r-sm); }

/* 折叠箭头 */
.arrow { display: inline-block; margin-right: 4px; transition: transform 0.2s; font-size: 10px; color: var(--muted); }