/* ===========================================================================
   ui.css — 艾迪升知识库 · 统一设计系统（唯一真值源）
   ---------------------------------------------------------------------------
   为什么要有这个文件（老板 2026-09-16）：
     「整个系统的易用性、便利性，你要充分考虑，每个按钮的布局，每个功能的使用。
       便捷，美观，耐用，安全，这些都是你的规则。」
   审计发现（tmp/audit_ux.py 实测）：
     · 5 个页面各写一套色板：硬编码色 7~30 个、圆角 2~7 种 → 观感不统一
     · admin/inbox/usage 无 @media → 手机上表格挤成一团
     · 全站无 ≥44px 触控目标 → 手机上按钮难点准
     · 各页「返回」措辞不一（返回搜索／回知识库首页／无）
   ⇒ 统一到一处，改一次全站生效。页面只写「业务样式」，公用样式一律取这里。
   ---------------------------------------------------------------------------
   🔴 2026-11-05：以下 @import 引入公司 VI 令牌层（tokens.css 的落地副本）。
   任何页面只要引 ui.css 就一定拿得到 --vi-*，不会漏引。
   =========================================================================== */
@import url("tokens.css");

/* ── 设计令牌（Design Tokens）─────────────────────────────────────────
   🔴 2026-11-05：颜色/字体/圆角唯一真值 = 公司 VI（本站同目录 tokens.css）。
   本块只做「语义别名」——原来页面写的 --brand/--ink/--line 继续可用，
   但值一律指向 var(--vi-*)；页面里不再出现任何字面色值。
   ⇒ 改品牌色只改 tokens.css 一处，六个系统一起变。 */
:root{
  /* 品牌：--brand 只做「底/图标/进度」；承载文字一律 --brand-text（深金） */
  --brand:var(--vi-gold);
  --brand-text:var(--vi-gold-deep);
  --brand-dark:var(--vi-gold-deep);
  --brand-soft:var(--vi-gold-wash);
  --ink:var(--vi-text);
  --sub:var(--vi-text-2);
  --muted:var(--vi-text-3);
  --faint:var(--vi-line-strong);
  --line:var(--vi-line);
  --bg:var(--vi-surface-2);
  --card:var(--vi-surface);

  --ok:var(--vi-ok);      --ok-bg:var(--vi-ok-wash);
  --warn:var(--vi-warn);    --warn-bg:var(--vi-warn-wash);  --warn-line:var(--vi-gold-line);
  --err:var(--vi-danger);     --err-bg:var(--vi-danger-wash);

  /* 圆角：VI 偏方正克制，卡片与按钮同档 6px */
  --r-sm:var(--vi-r-sm);
  --r-md:var(--vi-r);
  --r-lg:var(--vi-r);
  --r-pill:var(--vi-r);

  /* 间距：4 的倍数，保证节奏一致 */
  --sp-1:var(--vi-s1); --sp-2:var(--vi-s2); --sp-3:var(--vi-s3); --sp-4:var(--vi-s4);
  --sp-5:var(--vi-s6); --sp-6:var(--vi-s8);

  /* 触控最小尺寸（🔴 手机上点得准：Apple HIG 44pt / Material 48dp） */
  --tap:44px;

  --shadow:var(--vi-shadow-1);
  --shadow-lg:var(--vi-shadow-2);
  --font:var(--vi-font);
}

/* ── 基础重置 ──────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);line-height:1.7;
  -webkit-text-size-adjust:100%;
}
a{color:var(--brand-text);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1080px;margin:0 auto;padding:var(--sp-5) var(--sp-4) 64px}
.wrap-narrow{max-width:860px}

/* ── 统一顶部导航（🔴 解决"各页到不了各页 / 死胡同"）────────────────
   VI：暖白底 + 发丝线，不用阴影；选中态用浅金底 + 深金字（不是蓝）。 */
.nav{
  display:flex;align-items:center;gap:var(--sp-3);
  background:var(--vi-surface);border-bottom:1px solid var(--line);
  padding:var(--sp-2) var(--sp-4);
  position:sticky;top:0;z-index:50;
}
.nav img{height:32px;width:auto;flex:none}
.nav .brand{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.nav .links{display:flex;align-items:center;gap:var(--sp-1);margin-left:auto;flex-wrap:wrap}
.nav .links a,.nav .links button{
  font-size:13.5px;color:var(--vi-text-2);padding:9px 12px;border-radius:var(--vi-r-sm);
  border:0;background:transparent;cursor:pointer;font-family:inherit;
  min-height:var(--tap);display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.nav .links a:hover,.nav .links button:hover{
  background:var(--brand-soft);color:var(--brand-text);text-decoration:none;
}
.nav .links a.on{background:var(--brand-soft);color:var(--brand-text);font-weight:600}
.nav .who{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* ── 卡片 / 面板 ───────────────────────────────────────────────────── */
.card,.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);margin-top:var(--sp-3);
}
h1{font-size:19px;font-weight:600;margin:0 0 var(--sp-3)}
h2{font-size:15px;font-weight:600;color:var(--sub);margin:var(--sp-6) 0 var(--sp-3)}
h3{font-size:14.5px;font-weight:600;margin:var(--sp-4) 0 var(--sp-2)}
.hint{font-size:12.5px;color:var(--muted);line-height:1.8;margin:0 0 var(--sp-4)}
.muted{color:var(--muted);font-size:12px}

/* ── 通用小组件（🔴 2026-09-16 审计补齐）────────────────────────────
   为何集中到这里：审计发现 admin.html / pane_*.js 用了 .note/.toolbar/.status，
   但 ui.css（声称的“唯一真值源”）里**根本没有这几个类** ——
   各页自己写一份，就是观感不统一与“改一处漏一处”的根源。
   现统一在此定义，页面一律引用。 */
.note{margin-top:var(--sp-5);font-size:12px;color:var(--muted);
      line-height:1.9;background:var(--card);border:1px solid var(--line);
      border-radius:var(--r-md);padding:14px 16px}
.note b{color:var(--sub)}

.toolbar{display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-4);
         flex-wrap:wrap}

/* 行内状态文字（保存中… / ✅ 已保存 / ❌ 失败）*/
.status{margin-left:auto;font-size:13px;color:var(--sub)}
.status.ok{color:var(--ok)}
.status.err{color:var(--err)}

/* ── 可搜索选择器（combobox，ui.js KB.combo 的样式）─────────────────
   老板 2026-09-16 14:48：「选人的时候可以搜索，不然人太多」
   数据多时（45 人）原生 select 靠滚动找 = 难用；本组件支持
   中文/拼音/首字母/userid/部门 命中，且部门项**按层级缩进**。 */
.combo{position:relative;flex:1;min-width:150px}
.combo-input{cursor:pointer}
.combo-pop{position:absolute;z-index:120;left:0;right:0;top:calc(100% + 4px);
  max-height:300px;overflow-y:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:4px}
.combo-item{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;
  font-size:13.5px;line-height:1.45;min-height:38px}
.combo-item:hover,.combo-item.act{background:var(--brand-soft)}
.combo-item.on{background:var(--brand-soft);color:var(--brand-text);font-weight:600}
.combo-item .ci-sub{font-size:11.5px;color:var(--muted)}
.combo-empty{padding:12px;text-align:center;color:var(--muted);font-size:12.5px}

/* 移动端：弹层不被截断 */
@media (max-width:720px){
  .combo-pop{max-height:44vh}
}

/* ── 按钮：统一尺寸，触控达标 ──────────────────────────────────────── */
.btn{
  font-size:13.5px;font-family:inherit;color:var(--sub);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 16px;min-height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;transition:background .12s,border-color .12s;
}
.btn:hover{border-color:var(--brand);color:var(--brand-text)}
.btn.primary{background:var(--brand);color:var(--vi-ink);border-color:var(--brand);font-weight:600}
.btn.primary:hover{filter:brightness(.95);border-color:var(--brand-text);color:var(--vi-ink)}
.btn.danger{color:var(--err)}
.btn.danger:hover{border-color:var(--err);background:var(--err-bg)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{padding:6px 12px;min-height:36px;font-size:12.5px}

.row-actions{display:flex;gap:var(--sp-2);justify-content:flex-end;flex-wrap:wrap}

/* ── 表单控件：触控达标 + 一致观感 ─────────────────────────────────── */
input,select,textarea{
  font-size:14px;font-family:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--vi-line-strong);border-radius:var(--r-sm);
  padding:11px 13px;min-height:var(--tap);width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(236,168,48,.14);
}
label{font-size:13px;color:var(--sub)}

/* ── 表格：移动端可横滑（🔴 不再挤成一团）─────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;background:var(--card);
      border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
th,td{padding:10px 12px;font-size:13px;text-align:left;
      border-bottom:1px solid var(--line);vertical-align:middle}
th{background:var(--vi-surface-3);color:var(--muted);font-weight:500;font-size:12px;
   white-space:nowrap}
tr:last-child td{border-bottom:none}

/* ── 状态提示 ─────────────────────────────────────────────────────── */
.empty{padding:var(--sp-6);text-align:center;color:var(--muted);font-size:13px;
       background:var(--card);border:1px solid var(--line);
       border-radius:var(--r-md)}
.status-ok{color:var(--ok)} .status-err{color:var(--err)}
.status-warn{color:var(--warn)}
.banner{font-size:12.5px;border-radius:var(--r-sm);padding:10px 13px;
        margin-top:var(--sp-3);line-height:1.75;white-space:pre-wrap}
.banner.ok{background:var(--ok-bg);color:var(--ok)}
.banner.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.banner.err{background:var(--err-bg);color:var(--err)}

/* 全局轻提示（替代 alert 的粗糙感；保留 alert 作为兜底） */
#toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);
  background:rgba(61,56,55,.96);color:var(--vi-on-ink);font-size:13.5px;
  padding:11px 20px;border-radius:var(--r-md);box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:200;max-width:88vw}
#toast.show{opacity:1}

/* ── 响应式：手机友好 ─────────────────────────────────────────────── */
@media (max-width:720px){
  .wrap{padding:var(--sp-4) var(--sp-3) 48px}
  .card,.panel{padding:var(--sp-4)}
  .nav{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)}
  .nav .brand{display:none}            /* 手机省空间，logo 足够识别 */
  .nav .links{gap:0}
  .nav .links a,.nav .links button{padding:9px 10px;font-size:13px}
  h1{font-size:17.5px}
  th,td{padding:9px 10px;font-size:12.5px}
  .row-actions{justify-content:flex-start}
}
@media (max-width:420px){
  /* 🔴 2026-09-16 21:15 修复（老板实测：手机端没有登录入口了）：
     原为 `.nav .who{display:none}` —— 把**整个 who 区**隐藏，
     而未登录时「企业微信登录」按钮就在该区内 ⇒ 手机端登录入口消失，
     员工看到「未登录」却无处可点（功能性阻断，非样式问题）。
     现在：只隐藏**已登录时的身份文字**（省空间），登录按钮始终保留。 */
  .nav .who.is-logged-in{display:none}
}

/* ── 分区标签页（管理台分区 / 子筛选共用）────────────────────────────
   老板 2026-09-16：「反馈箱放到管理员界面」「token 统计也集成到管理员界面」
   ⇒ 管理台要装多个分区，需要一套统一的切换控件（而非各分区各写一套）。 */
.tabs{display:flex;gap:var(--sp-1);flex-wrap:wrap;align-items:flex-end;
      border-bottom:1px solid var(--line);margin:0 0 var(--sp-4)}
.tab{font-size:13.5px;font-family:inherit;color:var(--sub);background:transparent;
     border:0;border-bottom:2px solid transparent;padding:10px 14px;
     min-height:var(--tap);cursor:pointer;margin-bottom:-1px;white-space:nowrap}
.tab:hover{color:var(--brand-text)}
.tab.on{color:var(--brand-text);font-weight:600;border-bottom-color:var(--brand)}
/* 次级筛选（如「今日/本月/全部」「待处理/全部」）：更轻，不抢主分区视线 */
.tabs.sub{border-bottom:0;margin-bottom:var(--sp-3)}
.tabs.sub .tab{border:1px solid var(--line);border-radius:var(--r-pill);
     padding:7px 15px;min-height:36px;font-size:12.5px;background:var(--card)}
.tabs.sub .tab.on{background:var(--brand);color:var(--vi-ink);border-color:var(--brand);font-weight:500}

/* ── 指标卡（用量统计等）─────────────────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
         gap:var(--sp-3);margin-bottom:var(--sp-4)}
.metric{background:var(--card);border:1px solid var(--line);
        border-radius:var(--r-md);padding:15px 16px}
.metric .k{font-size:12px;color:var(--muted);margin-bottom:7px}
.metric .v{font-size:23px;font-weight:600;color:var(--brand-text)}
.metric .v.small{font-size:17px}

/* ── 摘要行 / 徽标（反馈箱等列表页共用）─────────────────────────── */
.stat{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:var(--sp-3);
      font-size:13px;color:var(--sub)}
.stat b{color:var(--ink)}
.badge{font-size:11px;padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.b-down{background:var(--err-bg);color:var(--err)}
.b-up{background:var(--ok-bg);color:var(--ok)}
.b-tag{background:var(--brand-soft);color:var(--brand-text)}
.b-high{background:var(--vi-danger-wash);color:var(--err);border:1px solid var(--vi-danger)}
.b-fixed{background:var(--ok-bg);color:var(--ok)}
.b-open{background:var(--warn-bg);color:var(--warn)}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── 门槛进度条（管理台·使用情况分区）───────────────────────────
   老板 2026-09-16：把「什么时候该加艾销售」的三条判据做成可看的进度，
   一眼能判「到了没有」，不用自己拿数字去比。 */
.goal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
      padding:13px 15px;margin-bottom:var(--sp-2)}
.goal.done{border-color:var(--vi-line-strong);background:var(--ok-bg)}
.goal .g-head{display:flex;justify-content:space-between;align-items:baseline;
      gap:10px;flex-wrap:wrap}
.goal .g-label{font-size:13.5px;font-weight:600}
.goal .g-val{font-size:13px;color:var(--sub);font-variant-numeric:tabular-nums}
.goal.done .g-val{color:var(--ok);font-weight:600}
.goal .g-bar{height:6px;background:var(--vi-surface-3);border-radius:var(--r-pill);
      margin:9px 0 7px;overflow:hidden}
.goal .g-bar i{display:block;height:100%;background:var(--brand);
      border-radius:var(--r-pill);transition:width .3s}
.goal.done .g-bar i{background:var(--ok)}
.goal .g-why{font-size:12px;color:var(--muted);line-height:1.7}

/* ── 反馈卡（管理台·反馈箱分区用）──────────────────────────────────
   原 inbox.html 的页面私有样式，提到这里共用（管理台内嵌后不再需要独立页）。 */
.card.high{border-left:4px solid var(--err)}
.card.fixed{opacity:.62}
.fb-row1{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.fb-q{font-size:14.5px;font-weight:600;flex:1;min-width:200px}
.fb-meta{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.7}
.fb-blk{margin-top:10px;font-size:13px;color:var(--sub)}
.fb-blk .k{color:var(--muted);font-size:12px}
.fb-exp{background:var(--ok-bg);border:1px solid var(--vi-line-strong);border-radius:var(--r-sm);
        padding:10px 12px;margin-top:8px;font-size:13px;color:var(--vi-ok)}
.fb-fixbox{margin-top:10px;display:flex;gap:var(--sp-2);flex-wrap:wrap}
.fb-fixbox input{flex:1;min-width:200px;min-height:38px;font-size:13px}
.fb-acts{display:flex;gap:var(--sp-2);margin-top:11px;flex-wrap:wrap}