/* jnc-ops 管理界面样式。
   没有构建步骤、没有前端框架 —— 这两个服务自己也要能被升级(台账风险 7),
   越少的构建产物,那条递归的升级路径就越短。 */

:root {
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --line:      #dfe3e8;
  --ink:       #1b1f24;
  --ink-dim:   #5c6570;
  --accent:    #1f4f8f;
  --ok:        #1a7f4b;
  --warn:      #9a6400;
  --danger:    #b4232a;
  --tag-bg:    #eef1f5;
  /* 🔴 --bg-sunken 是"陷下去的底"(日志块一类)。它必须在**两个主题里都有定义** ——
     此前它一次都没被定义过,只活在 .runlog 的 var() fallback 里,于是那个**浅色
     字面量在暗色下照样生效**:近白的 --ink 压在近白的底上,整块日志读不出来。
     (2026-09-01 实测,用户在 /app/upstream/fetch 上撞到。) */
  --bg-sunken: #eef1f5;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #14171a;
    --surface: #1c2024;
    --line:    #2c3238;
    --ink:     #e6e9ec;
    --ink-dim: #98a2ad;
    --accent:  #6ea8f0;
    --ok:      #4fbb83;
    --warn:    #d6a44a;
    --danger:  #e8747c;
    --tag-bg:  #262c33;
    --bg-sunken: #101316;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ── 顶栏 ───────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 0 20px; height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-name { font-weight: 650; letter-spacing: -0.01em; }
.brand-ver { font: 12px var(--mono); color: var(--ink-dim); }
.topbar nav { display: flex; gap: 4px; margin-right: auto; }
.topbar nav a {
  padding: 6px 12px; border-radius: 6px;
  color: var(--ink-dim); text-decoration: none; font-size: 14px;
}
.topbar nav a:hover { background: var(--tag-bg); color: var(--ink); }
.topbar nav a.on { background: var(--tag-bg); color: var(--ink); font-weight: 550; }
.who { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.who-name { font-weight: 550; }
.who form { margin: 0; }

/* ── 主体 ───────────────────────────────────────────── */
main { padding: 28px 20px 60px; }
main.wide   { max-width: 1180px; margin: 0 auto; }
main.narrow { max-width: 420px;  margin: 0 auto; padding-top: 64px; }

h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 6px; }
h2 { font-size: 15px; font-weight: 650; margin: 0 0 10px; }
.lede { color: var(--ink-dim); font-size: 14px; margin: 0 0 20px; max-width: 62ch; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  margin: 0 0 18px;
}
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ── 表单 ───────────────────────────────────────────── */
label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 550; }
label small { display: block; margin-top: 5px; font-weight: 400; color: var(--ink-dim); }
input, select {
  display: block; width: 100%; margin-top: 6px;
  padding: 8px 10px; font: inherit;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.code-input { font: 20px/1 var(--mono); letter-spacing: 0.4em; text-align: center; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row label { flex: 1 1 180px; }
.filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filters label { margin-bottom: 0; }

button {
  padding: 8px 16px; font: inherit; font-weight: 550;
  color: #fff; background: var(--accent);
  border: 0; border-radius: 6px; cursor: pointer;
}
button:hover { filter: brightness(1.1); }
.linkish {
  padding: 0; background: none; color: var(--accent);
  font-weight: 400; text-decoration: underline; text-underline-offset: 2px;
}

/* ── 提示 ───────────────────────────────────────────── */
.banner { padding: 10px 20px; font-size: 13px; font-weight: 550; text-align: center; }
.banner-danger { background: var(--danger); color: #fff; }
.banner-warn   { background: var(--warn);   color: #fff; }
.banner-info   { background: var(--accent); color: #fff; }
.flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 18px; font-size: 14px; }
.flash-ok    { background: var(--tag-bg); border-left: 3px solid var(--ok); }
.flash-warn  { background: var(--tag-bg); border-left: 3px solid var(--warn); }
.flash-error { background: var(--tag-bg); border-left: 3px solid var(--danger); }
.warn-text { color: var(--warn); font-size: 13px; }

/* ── 表格 ───────────────────────────────────────────── */
.grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid-table th {
  text-align: left; padding: 8px 10px; font-weight: 600;
  color: var(--ink-dim); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.grid-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid-table tbody tr:hover { background: var(--surface); }
.empty { color: var(--ink-dim); text-align: center; padding: 28px 10px; }
.detail { max-width: 380px; word-break: break-all; }
.row-actions form { display: inline; margin: 0; }

/* 表格在窄屏上自己横向滚动,页面本身永不横向滚动 */
main { overflow-x: hidden; }
.grid-table { display: block; overflow-x: auto; white-space: nowrap; }

.mono { font-family: var(--mono); font-size: 12px; }
.dim  { color: var(--ink-dim); }
code  { font-family: var(--mono); font-size: 12px; }

.tag {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  background: var(--tag-bg); font-size: 12px; font-weight: 550;
}
.tag-active, .tag-ok    { color: var(--ok); }
.tag-warn, .tag-disabled { color: var(--warn); }
.tag-error, .tag-denied { color: var(--danger); }
.tag-info, .tag-debug   { color: var(--ink-dim); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13px; }
.kv dt { color: var(--ink-dim); }
.kv dd { margin: 0; }

/* ── 绑定页 ─────────────────────────────────────────── */
.enroll { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.qr { width: 168px; height: 168px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 8px; }
.enroll-manual p { margin: 0 0 6px; font-size: 13px; color: var(--ink-dim); }
.secret { font-size: 14px; letter-spacing: 0.08em; word-break: break-all; }
.codes { list-style: none; padding: 0; margin: 10px 0 0;
         display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.codes code { font-size: 14px; letter-spacing: 0.04em; }
.aside { margin-top: 8px; font-size: 14px; }
.aside summary { cursor: pointer; color: var(--ink-dim); }

.pager { font-size: 13px; }
.foot { padding: 16px 20px; font: 12px var(--mono); color: var(--ink-dim); text-align: center; }

/* ── release 的四张页面 ───────────────────────────────── */
/* 这些类由 release/internal/webadmin 的模板使用。放在 authkit 的这一份里
   而不是让组件自带一份 CSS:两份样式表会各自演化,而分叉的表现是
   两个服务的界面慢慢长得不一样,没有任何观察点。 */
.tag-ok, .tag-active           { color: var(--ok); }
.tag-suspended, .tag-unknown   { color: var(--warn); }
.tag-disabled                  { color: var(--danger); }

.crumb { font-size: 13px; color: var(--ink-dim); margin: 0 0 4px; }
.crumb a { color: var(--ink-dim); }

.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; white-space: nowrap; }
.actions form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.actions input { width: 12ch; }
.actions input[type="number"] { width: 6ch; }
button.danger { color: var(--danger); border-color: var(--danger); }

.chip { display: inline-block; padding: 2px 8px; margin: 0 6px 6px 0;
        background: var(--tag-bg); border-radius: 999px; font: 12px var(--mono); }

.break { word-break: break-all; }
.pre   { white-space: pre-wrap; }

/* 只显示一次的凭据。刻意做得显眼 —— 关掉这一页就再也看不到了。 */
.reveal { border: 2px solid var(--accent); border-radius: 10px;
          padding: 14px 16px; margin: 0 0 16px; background: var(--surface); }
.reveal p { margin: 0 0 8px; }

/* ── 升级执行中那一页 ────────────────────────────────────────────
   它是**流式**响应,不走 layout(见 console/internal/webapp/run.go)。
   两个类放在这份共享 CSS 里而不是另起一份:一张自己带样式的页面,
   会在下一次改主题时悄悄长得与别处不一样。 */
/* 🔴 背景与前景**取自同一套 token**,且都不带颜色字面量 fallback。
   带 fallback 的写法坏在这里:token 少定义了一处时它不报错,只是安静地
   回落成另一个主题的颜色 —— 而"白底白字"与"这块日志是空的"看起来一样。 */
.runlog { font-family: var(--mono); font-size: 13px; line-height: 1.6;
          background: var(--bg-sunken); color: var(--ink);
          border: 1px solid var(--line); border-radius: 6px;
          padding: 12px 14px; margin: 16px 0; overflow-x: auto; }
.runlog .ln { white-space: pre-wrap; word-break: break-word; }
.runerr { white-space: pre-wrap; word-break: break-word; font-size: 13px; }