/* ============================================================
   components.css —— 设计系统 §8 组件规格的共享实现（Single Source of Truth）

   背景（2026-08-29）
   ---------------
   此前 `.badge` / `button` / `.primary` / `.ghost` / `.warn` / `.mini` 这些组件
   **从未有过共享实现**：tokens.css 与 ui.css 里 0 定义，全部散落在各 HTML 的
   内联 <style> 中重复书写，于是同一组件在不同页面长出了不同值（漂移）。
   例：标准按钮 merchant.html 是 13px，_internal.html 是 14px；
       .badge 在 merchant.html 里甚至被定义了两次，后者把规范值覆盖成 11.5px。

   本文件的原则
   -----------
   1. **结构只写一份**：组件骨架移到这里，页面不再各自重复。
   2. **差异显式化**：页面级差异只通过下方「组件级 token」覆写，
      一眼能看出哪个页面覆写了什么，而不是在各处重写整条规则。
   3. **渲染结果与抽取前逐项一致**：抽取不改变任何页面当下的外观
      （唯一例外见文件末尾「已知有意变更」）。

   引用方式
   -------
   <link rel="stylesheet" href="tokens.css">
   <link rel="stylesheet" href="ui.css">
   <link rel="stylesheet" href="components.css">   ← 必须放在最后
   放在最后是因为它要在 ui.css 之上定义组件骨架；页面内联 <style> 若仍保留
   同名规则会反客为主（内联靠后优先），故接入本文件的页面须删掉内联重复定义。
   ============================================================ */

/* ------------------------------------------------------------
   组件级可覆写 token
   页面需要差异时只覆写这些变量，不要重写组件规则。
   ------------------------------------------------------------ */
:root {
  --btn-fs: var(--fs-body-sm);    /* 标准按钮字号（规范 14px）。
                                     merchant.html 门店侧覆写为 --fs-label(13px)，
                                     属历史差异，见文末「待统一项」。 */
  --mini-fs: var(--fs-body-sm);   /* 微型按钮字号（规范 14px）。
                                     merchant.html 覆写为 --fs-caption(12px)，同上。 */
  /* 注意：--badge-muted-bg 故意不在 :root 里预赋值。
     若在 :root 写 `--badge-muted-bg: var(--bg-alt)`，变量会在 :root 处就被求值锁定，
     而 .merchant-theme 挂在 <body> 上，其 --bg-alt 覆盖不进去 —— 门店侧会错误地
     拿到蓝主题底色。故改在使用处以 var(--badge-muted-bg, var(--bg-alt)) 兜底，
     让它在元素所在作用域（即主题作用域）内求值。 */
}

/* ------------------------------------------------------------
   §8.2 按钮
   注意：基础 button 只设 padding，不设高度 —— 高度由内容与 padding 自适应。
   需要固定高度时显式用 --btn-h(36px) / --btn-h-lg(44px)。
   ------------------------------------------------------------ */
button {
  border: none;
  border-radius: var(--r-sm, 8px);
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: var(--btn-fs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--motion-fast, 150ms) var(--motion-ease, ease);
}

/* WCAG 2.4.7 全局焦点可见性兜底：所有键盘聚焦元素显示一致的品牌焦点环。
   特异性低（:focus-visible = 0,1,0），不覆盖已有更高特异性的焦点样式：
   - 表单 input/select/textarea 用 outline:none + box-shadow ring（.panel input:focus 等特异性更高）
   - .help-btn / .ui-check / .name-cell-btn / .dd-item 等已有专属焦点处理
   - 此规则主要补齐 div[role=button]（如绩效薪资折叠头）、.pos-item 等自定义控件的缺失焦点提示
   - 鼠标点击不触发 :focus-visible（浏览器智能判定），故不影响鼠标交互视觉 */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.primary { background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); }
.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

.warn {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-border, #ffd0c0);
}

.ghost {
  background: var(--surface);
  color: var(--brand);
  border: 1px solid var(--border-strong);
}
.ghost:hover { background: var(--brand-soft); border-color: var(--brand); }

/* 破坏性次级操作降级为弱文字按钮（无边框，hover 变红） */
.ghost.weak { background: transparent; border-color: transparent; color: var(--text-muted); }
.ghost.weak:hover { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

.mini { padding: 6px 10px; font-size: var(--mini-fs); }

/* ------------------------------------------------------------
   §8.4 标签 / 徽标（Badge）
   常规 badge：12px / padding 3px 10px / 99px 胶囊 / 500
   ------------------------------------------------------------ */
.badge {
  font-size: var(--fs-caption, 12px);
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
  font-weight: 500;
}

.badge.ok      { background: var(--success-soft); color: var(--success-text); }
.badge.warn    { background: var(--warning-soft); color: var(--warning); }
.badge.danger  { background: var(--danger-soft);  color: var(--danger); }
.badge.info    { background: var(--brand-soft);   color: var(--brand); }
/* muted 与 neutral 取值相同，两个类名都保留以兼容既有页面 */
.badge.muted,
.badge.neutral { background: var(--badge-muted-bg, var(--bg-alt)); color: var(--text-muted); }

/* _internal.html（内部后台）业务变体 */
.badge.active  { background: var(--success-soft); color: var(--success-text); }
.badge.trial   { background: var(--brand-soft);   color: var(--brand); }
/* free/pro 商业化原型对齐别名：与 .badge.trial 同色，额外一圈品牌色描边
   （原型 designs/free-pro-commercialization 的 .badge.pri，用于「推荐 / 当前版本 / 不限」） */
.badge.pri     { background: var(--brand-soft);   color: var(--brand); border: 1px solid var(--brand-border); }
.badge.chain   { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.badge.expired,
.badge.disabled { background: var(--danger-soft); color: var(--danger); }

/* ------------------------------------------------------------
   §8.9 问号说明气泡（Help tip · B 方案，2026-08-30）
   用法：
     <span class="help-wrap">
       <button type="button" class="help-btn" data-helptip="tip-x" aria-label="说明" aria-describedby="tip-x"></button>
       <span id="tip-x" class="help-pop" role="tooltip">说明文案</span>
     </span>
   行为由 common.js 全局事件委托驱动（悬停 / 键盘聚焦展开，移开或失焦收起）。
   边界：文案超长时气泡内自动换行并限高滚动；气泡为浮层，不推挤页面布局。
   ------------------------------------------------------------ */
.help-wrap { position: relative; display: inline-flex; align-items: center; flex: none; z-index: 86; }

/* 尺寸依据（2026-08-30 调研）：
   - IBM Carbon：tooltip trigger svg 16px；Mesa：trigger icon 14px；
     ServiceNow Horizon：sm12 / md16(默认) / lg24；Ant Design：行内图标尺寸跟随相邻字号。
   - 本项目标题字号 14px，故取 **容器 16px / 图标 14px** 的无边框纯图标形态
     （原 18px 描边圆圈在 14px 标题旁偏重）。
   - 线宽：viewBox 24 下 stroke-width 2，渲染 14px 时实际线宽 ≈1.17px，
     与项目其余内联图标（16px 渲染 / stroke 1.8 ≈1.2px）视觉一致。
   - 热区：视觉 16px，::after 扩展到 24×24，满足 WCAG 2.2 (2.5.8) 目标尺寸下限。 */
.help-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0;
  border: none; border-radius: 50%;
  background: transparent; color: var(--text-muted); cursor: help;
  transition: color var(--motion-fast, 150ms) var(--motion-ease, ease),
              background-color var(--motion-fast, 150ms) var(--motion-ease, ease);
}
.help-btn > svg { width: 14px; height: 14px; display: block; }
/* 点击/悬停热区扩展到 24×24，视觉尺寸不变（WCAG 2.5.8 Target Size Minimum） */
.help-btn::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.help-btn:hover,
.help-btn:focus-visible,
.help-btn.is-active {
  background: var(--brand-soft, rgba(194, 65, 12, .12));
  color: var(--brand);
  outline: none;
}

.help-pop {
  position: absolute; top: 20px; left: 0; right: auto; z-index: 85;
  display: none;
  width: max-content; max-width: 300px;
  max-height: 180px; overflow-y: auto;          /* 超长文案：限高滚动，不撑破视口 */
  padding: 8px 10px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #d1d5db);
  border-radius: var(--r-sm, 6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
  color: var(--text-muted);
  font-size: var(--fs-caption, 12px);
  line-height: 1.6;
  text-align: left; font-weight: 400; white-space: normal;
}
.help-pop.is-open { display: block; }

/* 标题文字右上角的上标问号修饰（inline 于标题文本后） */
.help-wrap.head-sup {
  display: inline-flex;
  vertical-align: super;
  transform: translateY(-2px);
  margin-left: 2px;
}

/* ============================================================
   已知有意变更（与抽取前不同，均为修正违规，已报备）
   1. .badge.muted 底色：#f0f0f0（硬编码）→ var(--badge-muted-bg) = --bg-alt。
      门店橙主题下 #f0f0f0 → #eef1f5，差异极小（均为浅灰），
      换来消除一处违反 §1.3「禁止硬编码颜色 hex」的问题。
      若需精确保持旧值，在页面内覆写 --badge-muted-bg: #f0f0f0 即可。

   待统一项（未擅自改动，请 PM 拍板）
   2. 标准按钮字号：merchant.html 门店侧为 13px，_internal.html 与文档为 14px。
      现由 --btn-fs 承载差异，两侧渲染保持不变。要统一只需删掉 merchant 的覆写。
   3. 微型按钮 .mini：merchant 12px vs _internal 14px，同上由 --mini-fs 承载。
   ============================================================ */