/* ============================================================
   ctrip.css · 控件层（携程风）· 全站统一
   ------------------------------------------------------------
   ★ v3.0（2026-09-25）。用户 2026-09-25 拍板 Q2 = 乙：
     「颜色 + 控件形态按携程重做，布局（间距 / 字号 / 列宽）不动」。
     ⇒ 本文件的边界（写死，别越线）：
        ✅ 允许改：颜色 / 描边 / 圆角 / 阴影 / 交互反馈（hover·active·focus·disabled）/ 字重
        ❌ 不许改：padding / margin / font-size / width / height / 行高 / 列宽
       （工作台主表行高绑定虚拟滚动记账口 —— 红线 8；动字号等于动性能。）
   ★ 为什么单开一个文件而不是并进 workbench.css：
     ① workbench.css 不加载在全部页面（outsrc.html 就不加载），并进去等于只改一半；
     ② 本层是「控件外观」的唯一出处，与「配色」（tokens.css）分家 —— 口径只留一份。
   ★ 特异性口径：所有规则带 `html ` 前缀。
     本文件是覆盖层，必须压过页内样式；`html button` = (0,0,2) > `button` = (0,0,1)，
     `html .pseg button.on` = (0,2,2) > `.pseg button.on` = (0,2,1)。
     ★ 为什么不用 !important：前缀抬特异性是纯 cascade 手段，可预测、可继续被更细的规则覆盖；
       !important 会把这一层焊死，日后想改只能再加一个 !important（债滚债）。
   ★ 依据（设计知识库）：CH-14（`:focus-visible` / 换肤变量化）· RX-13（页内浮层不用原生弹窗）
     · TW-08（主题 = 令牌唯一入口）· RU-22（固定色阶，禁现造）· AF-67（选择控件选型）
     · UX-45（焦点可见是键盘可达的地基）。
   ⚠ 本文件是外置件：全文件（含注释）不许出现连续两个星号（红线 2）。
   ============================================================ */

/* ── 1 输入类控件：白底 + 浅描边 + 品牌焦点环 ─────────────────── */
html input,html select,html textarea{
  background:var(--srf);border:1px solid var(--line);border-radius:var(--r-6);
  color:var(--ink);transition:border-color .12s,box-shadow .12s;
}
html input:hover:not(:disabled):not([readonly]),html select:hover:not(:disabled),html textarea:hover:not(:disabled){
  border-color:var(--bd-300);
}
/* ★ 携程最典型的一处：聚焦 = 品牌描边 + 3px 柔光外环（不是浏览器默认那圈虚线）。
   ★ 用 :focus（不是 :focus-visible）—— 输入类控件鼠标点进来也该有反馈（与 CH-14 不冲突）。 */
html input:focus,html select:focus,html textarea:focus{
  outline:0;border-color:var(--brand2);box-shadow:var(--sh-ring);
}
html input:disabled,html select:disabled,html textarea:disabled{
  background:var(--dis-bg);color:var(--dis-ink);border-color:var(--line);cursor:not-allowed;
}
html input[readonly]{background:var(--srf-2);color:var(--mut)}
html input::placeholder,html textarea::placeholder{color:var(--dis-ink)}
/* 数字输入去掉原生上下箭头（携程风：数字用步进按钮或直接手输，不留浏览器小三角） */
html input[type=number]{-moz-appearance:textfield;appearance:textfield}
html input[type=number]::-webkit-outer-spin-button,
html input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── 2 按钮：四档（主 / 次 / 幽灵 / 危险）────────────────────────
   携程口径：主按钮 = 品牌实底白字无边框（边框与底色同色 ⇒ 视觉更整）；
   次按钮 = 白底极浅描边深字；hover 时才把品牌色引进来（默认不喧哗）。 */
html button{
  background:var(--brand2);border:1px solid var(--brand2);color:var(--on-brand);
  border-radius:var(--r-6);cursor:pointer;font-weight:500;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s;
}
html button:hover:not(:disabled){background:var(--brand);border-color:var(--brand)}
html button:active:not(:disabled){background:var(--bd-900);border-color:var(--bd-900)}
html button:focus-visible{outline:0;box-shadow:var(--sh-ring)}
/* 次按钮 / 幽灵（.gh）。★ `.gh` 是 base.html 既有类名，保留不动、只改观感。 */
html button.gh{
  background:var(--srf);color:var(--ink);border-color:var(--line);
}
html button.gh:hover:not(:disabled){
  background:var(--bd-50);color:var(--brand2);border-color:var(--bd-300);
}
html button.gh:active:not(:disabled){background:var(--bd-100)}
/* 危险（.dg） */
html button.dg{background:var(--srf);color:var(--bad);border-color:var(--rd-300)}
html button.dg:hover:not(:disabled){background:var(--rd-50);border-color:var(--bad)}
/* 禁用：弱化但仍可见（2026-09-19 用户口径「禁用态改弱化可点」的反面不成立 ——
   这里的禁用是真禁用：没有权限的动作不给点击；样式只负责让它看起来不可点） */
html button:disabled{
  background:var(--dis-bg);border-color:var(--line);color:var(--dis-ink);cursor:not-allowed;
}

/* ── 3 选择控件：勾选/单选统一用品牌色（accent-color 一行搞定原生控件） ── */
html input[type=checkbox],html input[type=radio]{accent-color:var(--brand2);cursor:pointer}
html input[type=checkbox]:disabled,html input[type=radio]:disabled{cursor:not-allowed}

/* ── 4 分段控件（.pseg / .ctnseg）──────────────────────────────
   携程口径：分段控件 = 胶囊底 + 选中项品牌实底白字。
   ★ 只改颜色与圆角，不动 padding / 行高（Q2=乙）。
   ★★ v3.65（2026-10-10）：原第 4 段里的 `.tbwrap .tb`（页面内二级页签条）覆盖已随
     那条菜单条一并删除 —— 二级 / 三级现在住在顶栏悬浮面板里，覆盖规则见本文件第 9 段。 */
html .pseg button:hover:not(:disabled),html .ctnseg button:hover:not(:disabled){
  background:var(--bd-50);color:var(--brand2);
}
html .pseg button.on,html .ctnseg button.on{
  background:var(--brand2);color:var(--on-brand);font-weight:600;
}
html .ctnseg button:disabled{background:var(--dis-bg);color:var(--dis-ink)}
html .rail.fold .pseg button:hover{background:var(--bd-50)}
html .ctnseg button.off3:hover{background:var(--bd-50);color:var(--brand2)}
html .pseg,html .ctnseg{background:var(--srf-2);border:1px solid var(--line);border-radius:var(--r-6)}
/* 三级菜单条（仓库维度专属）—— 与二级同族但更淡（[AF-87] 先定层级再选颜色） */
html .sub3 a.on{color:var(--brand2);border-bottom-color:var(--brand2)}
html .sub3 a:hover{background:var(--bd-50);color:var(--brand2)}

/* ── 5 胶囊 / 标签 / 徽章（.chip / .tchip / .fchip / .tag / .ft / .dclr / .rgs）──
   携程口径：胶囊 = 白底浅描边深字；选中/激活 = 品牌浅底 + 品牌深字 + 品牌描边。 */
html .chip,html .tchip,html .ft,html .dclr{
  background:var(--srf);border-color:var(--line);color:var(--ink);
  transition:background .12s,border-color .12s,color .12s;
}
html .chip:hover,html .tchip:hover,html .ft:hover,html .dclr:hover{
  border-color:var(--bd-300);color:var(--brand2);background:var(--bd-50);
}
html .chip.on,html .tchip.on,html .ft.on,html .dclr.on{
  background:var(--brand2);border-color:var(--brand2);color:var(--on-brand);
}
html .fchip{background:var(--srf);border-color:var(--line)}
html .tag,html .rgs{background:var(--chip);color:var(--mut)}
/* 品牌系胶囊（.chip.grp 一类带虚线语义的）—— 保留虚线但统一到色阶 */
html .chip.grp{border-color:var(--bd-300);color:var(--brand);background:var(--bd-50)}

/* ── 6 卡片 / 面板（.card / .ccard / .rbox / .plane / .tips / .pop）──
   携程口径：大圆角 + 极浅描边 + 轻阴影；不用重边框划分。 */
html .card,html .ccard,html .rbox{
  background:var(--srf);border-color:var(--line);border-radius:var(--r-8);
}
html .card{box-shadow:var(--e-2)}
html .ccard:hover{border-color:var(--bd-300)}
html .ccard.link-on{border-color:var(--brand2);background:var(--bd-50)}
html .plane{background:var(--srf);border-color:var(--line)}
html .tips{background:var(--bd-50);border-color:var(--bd-200);border-radius:var(--r-6)}
html .tips code{background:var(--bd-100);color:var(--brand2)}
html .pop{
  background:var(--srf);border-color:var(--line);border-radius:var(--r-7);
  box-shadow:var(--e-3);
}
html .pop .opt.on{background:var(--bd-50);color:var(--brand2)}
html .pop .opt:hover{background:var(--bd-50)}
html .pop .opt.off{background:var(--srf-2);color:var(--dis-ink)}

/* ── 7 表格（.grid / table）────────────────────────────────────
   ★★ 只改颜色，一个字都不许动尺寸（红线 8：主表行高绑虚拟滚动记账口；
      字号 12.5px / padding 5px 6px 都有人盯着）。 */
html .grid thead th{background:var(--srf-2);color:var(--mut);border-bottom-color:var(--g-300)}
html .grid thead th[data-k].s1,html .grid thead th[data-k].s2,html .grid thead th[data-k].s3{
  background:var(--bd-100);color:var(--brand);
}
html .grid thead th[data-k].s1:hover,html .grid thead th[data-k].s2:hover,html .grid thead th[data-k].s3:hover{
  background:var(--bd-200);
}
html .grid tbody tr.drow:hover > td{background:var(--bd-50);border-bottom-color:var(--bd-200)}
html .grid tbody tr.drow.sel > td{background:var(--bd-100);border-bottom-color:var(--bd-300)}
html .grid td.ck,html .grid th.ck{background:var(--srf)}
html table caption{color:var(--mut)}

/* ── 8 弹窗（#ask 遮罩 + .askForm）────────────────────────────
   携程口径：大圆角 + 深阴影 + 标题有层级；按钮组右对齐、主按钮在右。
   ★ 只改观感（圆角 / 阴影 / 颜色），不动宽高与内边距（Q2=乙）。 */
html .ask{background:rgba(16,24,40,.42)}
html .ask>.card{background:var(--srf);border-radius:var(--r-10);box-shadow:var(--e-5);border:0}
html .ask h3{color:var(--ink);font-weight:600}
html .ask .tip{color:var(--mut)}
html .ask .opt{background:var(--srf);border-color:var(--line);border-radius:var(--r-7)}
html .ask .opt:hover{background:var(--bd-50);border-color:var(--bd-300)}
html .ask .opt.on{border-color:var(--brand2);background:var(--bd-50);box-shadow:var(--sh-ring)}
html .askbt{background:var(--srf);color:var(--ink);border-color:var(--line)}
html .askbt:hover{background:var(--bd-50);color:var(--brand2);border-color:var(--bd-300)}
html .ask .askgo,html .ask button[type=submit]{
  background:var(--brand2);border-color:var(--brand2);color:var(--on-brand);
}
html .ask .askgo:hover,html .ask button[type=submit]:hover{background:var(--brand)}

/* ── 9 顶栏 / 导航（.hd / .nv / 悬浮面板）—— 跟着皮肤走 ────────────
   ★★ v3.65（2026-10-10）：一级项的选择器由 `html .nv a` 收窄为 `html .nv .nvl` ——
     旧写法会把面板里的二级 / 三级链接一起染成半透明白（面板是白底 ⇒ 直接看不见）。
     同时补上面板自己的皮肤覆盖（面 / 描边 / 悬停 / 选中都跟着皮肤变量的色阶走）。 */
html .hd{background:var(--hd-bg,var(--brand))}
html .nv{background:var(--hd-bg,var(--brand2))}
html .nv .nvl{color:var(--hd-ink)}
html .nv .nvl:hover{background:rgba(255,255,255,.10);color:var(--hd-ink)}
html .nv .nvi.on .nvl{background:var(--srf);color:var(--brand)}
html .nv .nvi.on .nvl:hover{background:var(--srf);color:var(--brand)}
html .nvp-in{background:var(--srf);border-color:var(--line)}
html .nvc-t{color:var(--ink);border-bottom-color:var(--bd-50)}
/* ★ v3.66：hover 反馈只给 a.nvc-t（有三级的那一列，二级是不可点的 div 分类标题）。
   与 base.html 里那条同一口径 —— 给分类标题加变色 = 假能供性（[AF-38]）。
   ⚠ 外置件也照扫裸星号（BF41 名单外的 css 一律扫）⇒ 这里同样不许出现连续两个星号。 */
html a.nvc-t:hover{color:var(--brand2)}
html .nvc-t.on{color:var(--brand)}
html .nvc-s a{color:var(--mut)}
html .nvc-s a:hover{background:var(--bd-50);color:var(--brand2)}
html .nvc-s a.on{background:var(--bd-100);color:var(--brand)}
html .nvc-h{color:var(--mut)}

/* ── 10 全站焦点环（UX-45：键盘可达的地基）────────────────────── */
html a:focus-visible,html summary:focus-visible,html [tabindex]:focus-visible{
  outline:2px solid var(--focus);outline-offset:1px;border-radius:var(--r-3);
}
html button:focus-visible,html .chip:focus-visible,html .tchip:focus-visible,html .fbtn:focus-visible{
  outline:0;box-shadow:var(--sh-ring);
}

/* ── 11 滚动条（携程风：细、浅、悬停才显）────────────────────── */
html *::-webkit-scrollbar{width:10px;height:10px}
html *::-webkit-scrollbar-thumb{background:var(--g-300);border-radius:999px;border:2px solid transparent;background-clip:content-box}
html *::-webkit-scrollbar-thumb:hover{background:var(--bd-300);background-clip:content-box}
html *::-webkit-scrollbar-track{background:transparent}

/* ── 12 表格行状态底（异常 / 暂存 / 优先）统一到色阶，语义不变 ──
   ★ 只把「现造的浅底」换成色阶里的对应档，色相不动 ⇒ 语义零漂移。 */
html tr.grouphd.bad td{background:var(--rd-50);color:var(--bad)}
html .bg-bad{background:var(--rd-50);color:var(--rd-600);border-color:var(--rd-200)}
html .bg-ok{background:var(--gn-50);color:var(--gn-700);border-color:var(--gn-200)}
html .bg-neu{background:var(--nt-100);color:var(--nt-700);border-color:var(--nt-300)}
html .bg-na{background:var(--nt-50);color:var(--nt-500);border-color:var(--nt-200)}
html .fl.ok{background:var(--gn-50);color:var(--gn-700);border-color:var(--gn-200)}
html .fl.err{background:var(--rd-50);color:var(--rd-700);border-color:var(--rd-200)}
html .tag.hold{background:var(--am-50);color:var(--am-700);box-shadow:inset 0 0 0 1px var(--am-300)}
html .tag.abn{background:var(--rd-50);color:var(--bad);box-shadow:inset 0 0 0 1px var(--rd-200)}
html .tag.pa{background:var(--srf);color:var(--bad);box-shadow:inset 0 0 0 1px var(--rd-200)}
/* ★ v4.95（RC-376）孪生同改：已核准排柜（中性）/ 件数不符（白底红字红边，比 .tag.abn 轻一档） */
html .tag.abnok{background:var(--srf);color:var(--nt-700);box-shadow:inset 0 0 0 1px var(--nt-300)}
html .tag.pcm{background:var(--srf);color:var(--bad);box-shadow:inset 0 0 0 1px var(--rd-200);font-weight:600}
/* ★★ v6.15（ch527）`.tag.gblk`「同组缺票」—— 与 workbench.css 那条「成对」（红线 19 + 孪生同改）。
   语义：同组别的票装不了，把这一票也拖住了 ⇒ amber 系、白底，与实底的「暂存」分得开。 */
html .tag.gblk{background:var(--srf);color:var(--am-700);box-shadow:inset 0 0 0 1px var(--am-300);font-weight:500}