/* ==========================================================================
   collink · css/pages/admin.css —— 各模块专属样式
   仅针对 app.js 实际生成的 HTML class，不改动任何 JS。
   加载顺序：…→ layout.css → responsive.css → pages/admin.css（最后）
   ========================================================================== */

/* ══════════════════════════════════════════════════════════
   1. 仪表盘 (dashboard)
   ══════════════════════════════════════════════════════════ */

/* 统计卡片 — 增强版 */
.stat {
  border-radius: var(--r-md); border: 1px solid var(--glass-line);
  padding: var(--sp-4); position: relative; overflow: hidden;
}
/* 卡片左侧装饰条 */
.stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--grad); border-radius: var(--r-xs) 0 0 var(--r-xs);
}
.stat .k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
           text-transform: uppercase; color: var(--fg-3); }
.stat .v { font-size: var(--fs-2xl); font-weight: 700; margin: var(--sp-1) 0 var(--sp-1);
           line-height: 1.1; }
.stat .s { font-size: var(--fs-xs); color: var(--fg-2); }
/* 状态图标（平台行右上角用） */
.stat .ico { position: absolute; right: var(--sp-4); top: var(--sp-3);
             font-size: 28px; opacity: .15; }

/* 平台状态行 — 水平 flex 行 */
.plat-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.plat-tile {
  flex: 1 1 160px; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--glass-line);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.plat-tile:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.plat-tile .ico { font-size: 22px; }
.plat-tile .n  { font-size: var(--fs-md); font-weight: 600; }
.plat-tile .s  { font-size: var(--fs-xs); color: var(--fg-2); margin-top: 1px; }
.plat-tile.on  { border-color: hsl(var(--c-h) 50% 70% / .4);
                 background: var(--grad-soft); }
.plat-tile.off { opacity: .55; }
/* PLACEHOLDER_DASH2 */

/* ══════════════════════════════════════════════════════════
   2. 日志中心 (logs)
   ══════════════════════════════════════════════════════════ */

/* 工具栏 — 在移动端固定在内容区顶部 */
.toolbar { position: sticky; top: var(--topbar-h); z-index: var(--z-base);
           background: var(--glass-bg); backdrop-filter: blur(12px);
           -webkit-backdrop-filter: blur(12px);
           padding: var(--sp-3) 0; margin-bottom: var(--sp-3);
           border-bottom: 1px solid var(--glass-line); }

/* 日志容器 — 终端风格 */
.log-box {
  background: hsl(0 0% 0% / .04);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-md);
  height: calc(100vh - var(--topbar-h) - 200px);
  min-height: 300px;
}
[data-mode="dark"] .log-box { background: hsl(0 0% 0% / .30); }

/* 日志行 */
.log-line { padding: 2.5px var(--sp-3); border-radius: var(--r-xs); }
.log-line:hover { background: var(--bg-3); }
.log-t  { color: var(--fg-3); font-size: 11px; flex: none; }
.log-l  { flex: none; width: 50px; font-weight: 700; font-size: 11px; }
.log-c  { flex: none; color: var(--accent-ink); min-width: 90px; font-size: 11px; }
.log-m  { white-space: pre-wrap; flex: 1; min-width: 0; font-size: 12px; word-break: break-all; }

/* 级别着色 */
.lv-DEBUG   { color: var(--fg-3); }
.lv-INFO    { color: var(--ok); }
.lv-WARN, .lv-WARNING { color: var(--warn); }
.lv-ERROR, .lv-CRITICAL { color: var(--err); font-weight: 600; }
/* 整行高亮 */
.log-line:has(.lv-ERROR), .log-line:has(.lv-CRITICAL) { background: var(--err-bg); }
.log-line:has(.lv-WARN) { background: var(--warn-bg); }

/* ══════════════════════════════════════════════════════════
   3. 人物分类 / 平台管理
   ══════════════════════════════════════════════════════════ */

/* 人物卡片 */
.person-card {
  border-radius: var(--r-md); border: 1px solid var(--glass-line);
  overflow: hidden; transition: box-shadow var(--dur-mid) var(--ease);
}
.person-card:hover { box-shadow: var(--sh-2); }
.person-card .head {
  padding: var(--sp-3) var(--sp-4); display: flex; align-items: center;
  gap: var(--sp-3); background: var(--grad-soft);
  border-bottom: 1px solid var(--glass-line);
}
.person-card .name { font-size: var(--fs-lg); font-weight: 700; }
.person-card .acct-list { padding: var(--sp-3) var(--sp-4); }
.person-card .acct { display: flex; align-items: center; gap: var(--sp-2);
                     padding: var(--sp-1) 0; font-size: var(--fs-sm); color: var(--fg-2); }
/* PLACEHOLDER_PLATFORM */

/* ══════════════════════════════════════════════════════════
   4. 进程控制 (worker) / 运行状态
   ══════════════════════════════════════════════════════════ */

/* 状态徽章 — 带发光效果 */
.badge.ok   { color: var(--ok); background: var(--ok-bg); border-color: var(--ok); font-weight: 700; box-shadow: 0 0 8px var(--ok-bg); }
.badge.err  { color: var(--err); border-color: var(--err); box-shadow: 0 0 8px var(--err-bg); }
.badge.warn { color: var(--warn);border-color: var(--warn);box-shadow: 0 0 8px var(--warn-bg); }
.badge.info { color: var(--info);border-color: var(--info);box-shadow: 0 0 8px var(--info-bg); }

/* 工人状态行按钮组 */
.worker-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.worker-actions .btn { min-height: var(--tap); }

/* ══════════════════════════════════════════════════════════
   5. 归档 (archive)
   ══════════════════════════════════════════════════════════ */

/* 归档列表筛选行 */
#arch-filter { display: flex; gap: var(--sp-2); flex-wrap: wrap;
               align-items: center; margin-bottom: var(--sp-4); }

/* 帖子卡片 */
.arch-post {
  background: var(--glass-bg); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-line); border-radius: var(--r-md);
  padding: var(--sp-4); margin-bottom: var(--sp-3);
  transition: box-shadow var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.arch-post:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.arch-post .ap-head { display: flex; align-items: center; gap: var(--sp-2);
                      margin-bottom: var(--sp-3); }
.arch-post .ap-author { font-weight: 700; }
.arch-post .ap-plat  { font-size: var(--fs-xs); color: var(--fg-2); }
.arch-post .ap-time  { font-size: var(--fs-xs); color: var(--fg-3); margin-left: auto; }
.arch-post .ap-text  { font-size: var(--fs-md); line-height: 1.7; }
.arch-post .ap-media { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.arch-post .ap-media img, .arch-post .ap-media video {
  width: 100%; border-radius: var(--r-sm); object-fit: cover;
  aspect-ratio: 16/9; cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}
.arch-post .ap-media img:hover { filter: brightness(1.05); }
/* 多图网格 */
.arch-post .ap-media[data-count="2"]  { grid-template-columns: 1fr 1fr; }
.arch-post .ap-media[data-count="3"]  { grid-template-columns: 1fr 1fr 1fr; }
.arch-post .ap-media[data-count="4"]  { grid-template-columns: 1fr 1fr; }
/* PLACEHOLDER_SEC */

/* ══════════════════════════════════════════════════════════
   6. 权限矩阵 (roles) / 安全中心 (security)
   ══════════════════════════════════════════════════════════ */

.perm-mod {
  border: 1px solid var(--glass-line); border-radius: var(--r-md);
  padding: var(--sp-4); margin: var(--sp-3) 0;
  background: var(--glass-bg);
}
.perm-mod-head { display: flex; align-items: center; gap: var(--sp-2);
                 margin-bottom: var(--sp-3); flex-wrap: wrap; }
.perm-mod-head b { font-size: var(--fs-md); font-weight: 700; }
.perm-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--glass-line); border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
  transition: background var(--dur-fast) var(--ease);
}
.perm-item:hover { background: var(--bg-3); }
.perm-item .route { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-2); }
.perm-item .lv-sel { min-width: 90px; }

/* 审计日志行 */
.audit-row { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--glass-line);
             font-size: var(--fs-sm); display: flex; gap: var(--sp-3); align-items: baseline; }
.audit-row .at  { color: var(--fg-3); flex: none; font-size: 11px; }
.audit-row .sev-warn  { color: var(--warn); }
.audit-row .sev-error { color: var(--err); }

/* ══════════════════════════════════════════════════════════
   7. 文件浏览器 (files)
   ══════════════════════════════════════════════════════════ */

.file-item {
  border-radius: var(--r-sm); gap: var(--sp-3);
  transition: background var(--dur-fast) var(--ease);
}
.file-item:hover { background: var(--bg-3); }
.file-item .fi { font-size: 18px; }
.preview img   { max-width: 100%; border-radius: var(--r-md); box-shadow: var(--sh-2); }
.preview video { max-width: 100%; border-radius: var(--r-md); box-shadow: var(--sh-2); }

/* 面包屑路径 */
.crumb a { color: var(--accent-ink); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb span { color: var(--fg-3); }

/* ══════════════════════════════════════════════════════════
   8. QQ Bot 规则 / 多机器人矩阵
   ══════════════════════════════════════════════════════════ */

.bot-card {
  border-radius: var(--r-md); border: 1px solid var(--glass-line);
  background: var(--glass-bg); overflow: hidden;
}
.bot-card .bh { padding: var(--sp-3) var(--sp-4); display: flex; align-items: center;
                gap: var(--sp-3); background: var(--grad-soft);
                border-bottom: 1px solid var(--glass-line); }
.bot-card .bh .name { font-weight: 700; font-size: var(--fs-md); }
.bot-card .body { padding: var(--sp-3) var(--sp-4); }
/* PLACEHOLDER_GIT */

/* ══════════════════════════════════════════════════════════
   9. Git 版本管理
   ══════════════════════════════════════════════════════════ */

.git-commit { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--glass-line);
              display: flex; gap: var(--sp-3); align-items: baseline; }
.git-commit .hash { font-family: var(--font-mono); font-size: 11px; color: var(--accent-ink); flex: none; }
.git-commit .msg  { flex: 1; font-size: var(--fs-sm); }
.git-commit .meta { font-size: 11px; color: var(--fg-3); flex: none; }

/* diff 视图 */
.diff-view { font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap;
             overflow-x: auto; line-height: 1.55; }
.diff-view .add { color: var(--ok);   background: var(--ok-bg);   display: block; }
.diff-view .del { color: var(--err);  background: var(--err-bg);  display: block; }
.diff-view .hunk{ color: var(--info); background: var(--info-bg); display: block; font-weight: 600; }

/* 文件状态 */
.git-file-m { color: var(--warn); }
.git-file-a { color: var(--ok); }
.git-file-d { color: var(--err); }

/* ══════════════════════════════════════════════════════════
   10. 配置表单通用增强
   ══════════════════════════════════════════════════════════ */

/* 表单 section 卡片化 */
.form-card { background: var(--glass-bg); backdrop-filter: blur(8px);
             -webkit-backdrop-filter: blur(8px);
             border: 1px solid var(--glass-line); border-radius: var(--r-md);
             padding: 0; margin-bottom: var(--sp-4); overflow: hidden; }
.form-card > .form-card-head { padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--glass-line);
  background: var(--grad-soft); font-weight: 600; font-size: var(--fs-md); }
.form-card > .form-row:last-child { border-bottom: none; }
.form-card > .form-row { padding: var(--sp-3) var(--sp-4); }

/* 密钥/密码字段 — 遮罩 */
.masked { font-family: var(--font-mono); letter-spacing: .06em; color: var(--fg-2); }

/* JSON 编辑器框（Monaco 未加载时的 fallback） */
.json-editor { font-family: var(--font-mono); font-size: 12px;
               background: hsl(220 16% 8%); color: hsl(220 14% 86%);
               border: 1px solid var(--glass-line); border-radius: var(--r-md);
               padding: var(--sp-4); min-height: 300px; resize: vertical; }

/* ══════════════════════════════════════════════════════════
   11. 移动端补充修复
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .plat-row { gap: var(--sp-2); }
  .plat-tile { flex: 1 1 140px; padding: var(--sp-2) var(--sp-3); }
  .arch-post .ap-media[data-count="3"] { grid-template-columns: 1fr 1fr; }
  .arch-post .ap-media[data-count="4"] { grid-template-columns: 1fr 1fr; }
  .perm-item { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
}