/* ============================================================================
   系统级界面层 (system-ui)  ·  2026-10-27
   ----------------------------------------------------------------------------
   存在理由（均为线上实测，非推测）：
     · 次要文字落在 #86909C / #8491A4，白底 3.0–3.4:1，低于 WCAG AA 的 4.5:1；
     · 字号散成 10 / 11 / 12.5 / 15 / 17 / 18 / 21 / 24 / 25 / 28 十档；
     · --erp-transition-base 把 transition: all 设成全局默认；
     · 同一行里按钮 32px、输入框 30px，顶栏三个控件 33 / 34 / 38px。

   本层不改 DOM、不改路由、不改业务行为，只做五件事：
     1) 把「次要文字」收敛到一个过 AA 的语义值；
     2) 把字号收敛到 12 / 13 / 14 / 16 / 22 五档；
     3) 收窄过渡属性、统一同类控件高度、补齐焦点环；
     4) 扩大「减少动态效果」的覆盖范围；
     5) 修正表头与数值的横向对齐、提示文字的层级（第 2b 节，逐条实测）。

   ── 为什么必须这么写选择器 ──────────────────────────────────────────────
   组件样式经 Vue scoped 编译后是 `.work-nav__eyebrow[data-v-18aa4e37]`，
   特异性 0,2,0，普通单类选择器（0,1,0）无论如何都压不过它。

     · 颜色：统一加 `body:not([arco-theme='dark'])` 前缀。
       该前缀贡献 (0,1,1)，把整条选择器抬到 0,2,x 以上，能压过 scoped 规则；
       同时深色主题下整条规则不生效，深色取值仍由 appearance.css 的
       `body[arco-theme='dark']` 负责，不会被这里覆盖。
     · 字号：使用 !important。字号与主题、与列表密度偏好都无关，
       是这一层唯一需要强制的属性；颜色、间距一概不用 !important。

   取值依据（白底实测对比度）：
     #86909C = 3.24  ✗      #667085 = 4.99  ✓      #4E5969 = 7.43  ✓
     #C9CDD4 = 1.59  仅用于真禁用态，WCAG 1.4.3 对禁用控件豁免，保持不动。
   ========================================================================== */

:root {
  /* 次要文字：低对比度的唯一根因。禁用态仍用 --erp-color-text-disabled。 */
  --erp-color-text-muted: #667085;
  /* 过渡只作用于会变化的属性，不再 transition: all。 */
  --erp-transition-base:
    color 0.18s cubic-bezier(0.34, 0.69, 0.1, 1),
    background-color 0.18s cubic-bezier(0.34, 0.69, 0.1, 1),
    border-color 0.18s cubic-bezier(0.34, 0.69, 0.1, 1),
    box-shadow 0.18s cubic-bezier(0.34, 0.69, 0.1, 1);
}

/* Arco 的次要文字令牌同口径收口；禁用态 --color-text-4 保持不动。
   Arco 把 --color-text-3 直接声明在 body 上，所以这里也必须落在 body：
   写在 :root（html）上的值会被 body 自己的声明遮住，继承不下来。
   (0,1,1) 压过 Arco 的 body (0,0,1)；深色主题下整条不生效，
   仍由 Arco 的 body[arco-theme='dark'] 与 appearance.css 决定。 */
body:not([arco-theme='dark']) {
  --color-text-3: #667085;
}

/* ---------------------------------------------------------------------------
   1. 次要文字对比度
   ------------------------------------------------------------------------ */

body:not([arco-theme='dark']) .erp-platform-nav__location,
body:not([arco-theme='dark']) .erp-page-header__description,
body:not([arco-theme='dark']) .erp-page-header__metadata,
body:not([arco-theme='dark']) .erp-platform-nav__quick-jump span,
body:not([arco-theme='dark']) .erp-platform-nav__quick-jump kbd,
body:not([arco-theme='dark']) .release-version-entry__copy small,
body:not([arco-theme='dark']) .release-notes__versions time,
body:not([arco-theme='dark']) .release-guide__category,
body:not([arco-theme='dark']) .release-guide__note,
body:not([arco-theme='dark']) .release-guide__body figcaption,
body:not([arco-theme='dark']) .settings-row__desc,
body:not([arco-theme='dark']) .settings-card__hint,
body:not([arco-theme='dark']) .shortcuts-pool__text small,
body:not([arco-theme='dark']) .shortcuts-column__empty,
body:not([arco-theme='dark']) .shortcuts-column__title span,
body:not([arco-theme='dark']) .brand-preview__label,
body:not([arco-theme='dark']) .brand-status__meta,
body:not([arco-theme='dark']) .brand-row__desc,
body:not([arco-theme='dark']) .brand-card__hint,
body:not([arco-theme='dark']) .brand-aside__note,
body:not([arco-theme='dark']) .support-qr-preview__label,
body:not([arco-theme='dark']) .support-qr-preview__hint,
body:not([arco-theme='dark']) .support-qr-aside__note,
body:not([arco-theme='dark']) .center-stat-card__desc,
body:not([arco-theme='dark']) .center-module-card__uri,
body:not([arco-theme='dark']) .task-directory-hint,
body:not([arco-theme='dark']) .registration-inbox .hint,
body:not([arco-theme='dark']) .shortcut-heading > span,
body:not([arco-theme='dark']) .shortcut-text small,
body:not([arco-theme='dark']) .work-nav__empty,
body:not([arco-theme='dark']) .empty-state p,
body:not([arco-theme='dark']) .erp-context-nav__footer {
  color: var(--erp-color-text-muted);
}

/* Arco 的空状态说明文字带透明度，实测只有 2.2:1；说明是必读内容，不压暗。 */
body:not([arco-theme='dark']) .arco-empty-description {
  color: var(--erp-color-text-muted);
  opacity: 1;
}

/* 导航分组标题是结构信息，用二级文字色，不再用弱化色。 */
body:not([arco-theme='dark']) .work-nav__eyebrow {
  color: var(--erp-color-text-secondary);
}

/* 版本列表选中项底色是浅蓝，日期用弱化色只有 4.5:1 的边缘值。 */
body:not([arco-theme='dark']) .release-notes__versions button.selected time {
  color: var(--erp-color-text-secondary);
}

/* 选中分类标签的白底对比度只有 3.6:1，改用主色 active 档。 */
body:not([arco-theme='dark']) .center-category-tab.active {
  color: var(--erp-color-primary-active);
}
body:not([arco-theme='dark']) .center-category-tab.active .center-category-count {
  color: var(--erp-color-primary-active);
}

/* ---------------------------------------------------------------------------
   1b. 语义色当文字用：设计令牌里的 success-6 / danger-6 / warning-6 是填充色，
   直接落在 12–14px 正文上只有 2.6–3.7:1（实测）。这里只把文字色移到同色相的
   下一档（Arco -7 / -8），色相与语义不变，深浅关系也不变。
   ------------------------------------------------------------------------ */

body:not([arco-theme='dark']) .center-stat-card__value--success {
  color: rgb(var(--success-7));
}
body:not([arco-theme='dark']) .center-stat-card__value--danger {
  color: rgb(var(--danger-7));
}
body:not([arco-theme='dark']) .center-stat-card__value--warning {
  color: rgb(var(--warning-8));
}

/* 浅底标签同理：绿 2.6:1、红 3.3:1。
   Arco 的规则是 `.arco-tag.arco-tag-checked.arco-tag-green`（0,3,0），
   单靠 body 前缀（贡献 0,1,1）压不过，必须写成同结构。 */
body:not([arco-theme='dark']) .arco-tag.arco-tag-checked.arco-tag-green {
  color: rgb(var(--success-8));
}
body:not([arco-theme='dark']) .arco-tag.arco-tag-checked.arco-tag-red {
  color: rgb(var(--danger-7));
}
body:not([arco-theme='dark']) .arco-tag.arco-tag-checked.arco-tag-orange {
  color: rgb(var(--warning-8));
}

/* 设置页的微信绑定徽标与巡检提示是状态文字，必须读得清。 */
body:not([arco-theme='dark']) .wx-badge[data-tone='ok'] {
  color: rgb(var(--success-8));
}
body:not([arco-theme='dark']) .wx-badge[data-tone='warn'] {
  color: rgb(var(--warning-8));
}
body:not([arco-theme='dark']) .wx-badge[data-tone='crit'] {
  color: rgb(var(--danger-7));
}
body:not([arco-theme='dark']) .health-summary-card__state--bad {
  color: rgb(var(--danger-7));
}

/* Arco 的「次级 + 状态色」按钮：文字用状态色 -6，浅底上只有 2.6–3.3:1。
   只作用于 secondary（实心/文字按钮的背景不同，不受影响）。 */
body:not([arco-theme='dark']) .arco-btn-secondary.arco-btn-status-success {
  color: rgb(var(--success-8));
}
body:not([arco-theme='dark']) .arco-btn-secondary.arco-btn-status-danger {
  color: rgb(var(--danger-7));
}
body:not([arco-theme='dark']) .arco-btn-secondary.arco-btn-status-warning {
  color: rgb(var(--warning-8));
}

/* 看板列头的计数是结构信息，弱化色在浅蓝底上只有 4.5:1 的边缘值。
   组件规则是 `.board-column__count[data-zero='true'][data-v-*]`（0,3,0），
   所以这里要带上同名属性才压得住。 */
body:not([arco-theme='dark']) .board-column__count[data-zero] {
  color: var(--erp-color-text-secondary);
}

/* 造价项目的流程节点标签：文字色与浅底色都由行数据注入（--node-bar / --node-soft），
   实测 3.7:1。只把文字色按同色相压暗 28%，色相不变；不支持 color-mix 的浏览器
   会忽略这一行，回落到原值，不会更糟。 */
body:not([arco-theme='dark']) .node-tag {
  color: color-mix(in srgb, var(--node-bar, #165dff) 72%, #000);
}

/* ---------------------------------------------------------------------------
   2. 字号：收敛到 12 / 13 / 14 / 16 / 22
   ------------------------------------------------------------------------ */

/* 报销申请 / 修改（本版重建页）。这张表单的样式写在组件内，行内元信息
   曾用 11px，区块标题 15px，合计金额 33px。这里只收敛字号与对比度，
   不动栅格与间距，避免影响行高与录入密度。 */
body:not([arco-theme='dark']) .expense-page h1 {
  font-size: 22px !important;
}
body:not([arco-theme='dark']) .expense-page .section-head h2 {
  font-size: 16px !important;
}
body:not([arco-theme='dark']) .expense-page .amount-large {
  font-size: 22px !important;
}
body:not([arco-theme='dark']) .expense-page .action-money strong,
body:not([arco-theme='dark']) .expense-confirm-dialog .confirm-total strong {
  font-size: 22px !important;
}
body:not([arco-theme='dark']) .expense-page .line-head,
body:not([arco-theme='dark']) .expense-page .line-index,
body:not([arco-theme='dark']) .expense-page .upload-copy p,
body:not([arco-theme='dark']) .expense-page .attachment-feedback,
body:not([arco-theme='dark']) .expense-page .summary-stats,
body:not([arco-theme='dark']) .expense-page .reviewer-hint,
body:not([arco-theme='dark']) .expense-page .approval-path li,
body:not([arco-theme='dark']) .expense-page .checklist button,
body:not([arco-theme='dark']) .expense-page .summary-note {
  font-size: 12px !important;
}
/* 合计金额里的货币符号跟着正文档走，不再单独 17px */
body:not([arco-theme='dark']) .expense-page .amount-large > span {
  font-size: 14px !important;
  vertical-align: 2px;
}

/* 表单里几处弱化到读不清的灰：区块序号 4.4:1、日期分隔符 2.3:1、
   货币符号 2.9:1、删除按钮图标 2.5:1（图标需 3:1）。 */
body:not([arco-theme='dark']) .expense-page .section-number,
body:not([arco-theme='dark']) .expense-page .remove-line {
  color: var(--erp-color-text-secondary);
}
body:not([arco-theme='dark']) .expense-page .amount-large > span,
body:not([arco-theme='dark']) .expense-page .date-pair > span {
  color: var(--erp-color-text-muted);
}
/* 未完成的检查项用 ○，已完成用 ✓，形状已区分；这里只把橙黄色压到可读档 */
body:not([arco-theme='dark']) .expense-page .todo .check-icon {
  color: rgb(var(--warning-8));
}

/* 元信息：10 / 11px 不再使用 */
body:not([arco-theme='dark']) .erp-shell small,
body:not([arco-theme='dark']) .erp-shell kbd,
body:not([arco-theme='dark']) .erp-shell time,
body:not([arco-theme='dark']) .erp-shell figcaption,
body:not([arco-theme='dark']) .erp-platform-nav__brand-copy small,
body:not([arco-theme='dark']) .erp-platform-nav__quick-jump kbd,
body:not([arco-theme='dark']) .release-version-entry__copy strong,
body:not([arco-theme='dark']) .release-version-entry__copy small,
body:not([arco-theme='dark']) .erp-page-header__eyebrow,
body:not([arco-theme='dark']) .release-guide__category,
body:not([arco-theme='dark']) .release-guide__note,
body:not([arco-theme='dark']) .release-guide__body figcaption,
body:not([arco-theme='dark']) .release-notes__version-label small,
body:not([arco-theme='dark']) .release-notes__detail-header small,
body:not([arco-theme='dark']) .results-footer span,
body:not([arco-theme='dark']) .swatch__label,
body:not([arco-theme='dark']) .brand-preview__label,
body:not([arco-theme='dark']) .support-qr-preview__label,
body:not([arco-theme='dark']) .support-qr-preview__hint,
body:not([arco-theme='dark']) .support-qr-aside__note,
body:not([arco-theme='dark']) .brand-aside__note {
  font-size: 12px !important;
}

/* 12.5px 与 13px 观感无差别，统一归到 13px */
body:not([arco-theme='dark']) .erp-page-header__description,
body:not([arco-theme='dark']) .arco-radio-button-content,
body:not([arco-theme='dark']) .filter-collapse__summary,
body:not([arco-theme='dark']) .filter-collapse__toggle,
body:not([arco-theme='dark']) .shortcuts-column__empty,
body:not([arco-theme='dark']) .settings-row__desc,
body:not([arco-theme='dark']) .settings-card__hint {
  font-size: 13px !important;
}

/* 品牌名 15 -> 14，与顶栏其余文字同档 */
body:not([arco-theme='dark']) .erp-platform-nav__brand-copy strong,
body:not([arco-theme='dark']) .empty-state strong {
  font-size: 14px !important;
}

/* 15 / 17 / 18px 的区块标题统一为 16px */
body:not([arco-theme='dark']) .board-heading__text h2,
body:not([arco-theme='dark']) .task-directory-page > h2,
body:not([arco-theme='dark']) .release-guide__heading h3 {
  font-size: 16px !important;
}

/* 页面级标题：线上分散在 18 / 21 / 24 / 25 / 28，统一到 22 */
body:not([arco-theme='dark']) .erp-page-header__heading h1,
body:not([arco-theme='dark']) .page-heading h1,
body:not([arco-theme='dark']) .release-notes__header h1,
body:not([arco-theme='dark']) .release-notes__detail-header h2 {
  font-size: 22px !important;
}

/* 其余 17px 区块标题 */
body:not([arco-theme='dark']) .registration-inbox h2,
body:not([arco-theme='dark']) .documents-panel .heading h2 {
  font-size: 16px !important;
}

/* 中心页统计卡：数值 22，状态词（如「已加固」）按区块标题 16 */
body:not([arco-theme='dark']) .center-stat-card__value {
  font-size: 22px !important;
}
body:not([arco-theme='dark']) .center-stat-card__value--secure {
  font-size: 16px !important;
}

/* 模块卡里的接口路径是等宽元信息 */
body:not([arco-theme='dark']) .center-module-card__uri {
  font-size: 12px !important;
}

/* 工作台：标题 15 -> 16；链接类 12.5 -> 13；角标 11 -> 12；KPI 数值 28 -> 22 */
body:not([arco-theme='dark']) .shortcut-heading h2 {
  font-size: 16px !important;
}
body:not([arco-theme='dark']) .shortcut-heading__config,
body:not([arco-theme='dark']) .shortcut-more,
body:not([arco-theme='dark']) .summary-link,
body:not([arco-theme='dark']) .board-column__label {
  font-size: 13px !important;
}
body:not([arco-theme='dark']) .board-column__count,
body:not([arco-theme='dark']) .board-column__placeholder,
body:not([arco-theme='dark']) .board-card__code,
body:not([arco-theme='dark']) .view-count,
body:not([arco-theme='dark']) .center-category-count,
body:not([arco-theme='dark']) .results-head h2 span {
  font-size: 12px !important;
}
body:not([arco-theme='dark']) .arco-statistic-value,
body:not([arco-theme='dark']) .arco-statistic-value-integer {
  font-size: 22px !important;
}

/* 其余页面级标题：用印工作台 26、能力受限 20，统一到 22 */
body:not([arco-theme='dark']) .workbench-hero h1,
body:not([arco-theme='dark']) .closed-title {
  font-size: 22px !important;
}

/* 用印页「需要我处理」是区块标题，17 -> 16 */
body:not([arco-theme='dark']) .view-description strong {
  font-size: 16px !important;
}

/* ---------------------------------------------------------------------------
   2b. 造价项目列表（/cost/projects，线上实测 2026-10-27）
   ------------------------------------------------------------------------ */

/* 「拟收服务费（元）」是第 4 列。该列数值走 arco-table-cell-align-right，
   表头却继承了左对齐，表头文字与数字右边缘差 140px。
   把表头改为右对齐只解决大半：表头内层单元格的右内边距（10px）与表头
   自身的右内边距（12px）叠加，实测右内边距取 22px 时表头文字与数字右缘
   都落在 956px，完全对齐。四个列宽是按表头文字定的，这里不改列宽。 */
body:not([arco-theme='dark']) .project-table thead th:nth-child(4) {
  text-align: right;
  padding-right: 22px;
}

/* 「可横向滚动查看完整字段…」是常驻次要提示，不应与表头同深（原为 7.4:1） */
body:not([arco-theme='dark']) .table-hint {
  color: var(--erp-color-text-muted);
}

/* ---------------------------------------------------------------------------
   3. 过渡：把 transition: all 收窄到实际变化的属性
   ------------------------------------------------------------------------ */

.arco-btn,
.arco-input,
.arco-input-wrapper,
.arco-select-view,
.arco-textarea,
.arco-checkbox,
.arco-checkbox-mask,
.arco-radio,
.arco-radio-mask,
.arco-switch,
.arco-switch-handle,
.arco-tag,
.arco-card,
.arco-radio-button,
.arco-table-td,
.arco-table-tr,
.arco-message,
.arco-overlay,
.t-button,
.center-stat-card,
.center-category-tab,
.center-module-grid > .arco-card,
.shortcuts-pool__item,
.board-column {
  transition-property: color, background-color, border-color, box-shadow, opacity;
}

/* 应用自有类名在线上是 scoped 规则（.center-stat-card[data-v-*]，0,2,0），
   所以这里同样需要 body:not(...) 前缀才压得住。transform 保留，
   避免卡片悬浮位移失去过渡。 */
body:not([arco-theme='dark']) .center-stat-card,
body:not([arco-theme='dark']) .center-category-tab,
body:not([arco-theme='dark']) .center-module-grid > .arco-card,
body:not([arco-theme='dark']) .shortcuts-pool__item,
body:not([arco-theme='dark']) .board-column,
body:not([arco-theme='dark']) .arco-input-number-step-button {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
}

/* ---------------------------------------------------------------------------
   4. 控件高度：同一行里的输入框、按钮、顶栏控件必须等高
   ------------------------------------------------------------------------ */

/* Arco 中号按钮 32px，中号输入框实测 30px，差 2px 会让表格行参差。 */
body:not([arco-theme='dark']) .arco-input-size-medium,
body:not([arco-theme='dark']) .arco-input-wrapper.arco-input-size-medium {
  height: 32px;
}

/* 数字输入框上下步进键实测只有 9–11px 高，低于 24px 可点区域下限。
   受限于 32px 输入框总高，两个步进键各取 15px 已是不溢出布局的上限。 */
body:not([arco-theme='dark']) .arco-input-number-step-button {
  min-height: 15px;
}

/* 顶栏三个控件实测高度分别 33 / 34 / 38，统一为 36 */
body:not([arco-theme='dark']) .erp-platform-nav__brand,
body:not([arco-theme='dark']) .erp-platform-nav__quick-jump,
body:not([arco-theme='dark']) .erp-platform-nav__account-trigger {
  height: 36px;
  min-height: 36px;
}

/* ---------------------------------------------------------------------------
   5. 焦点可见性：原 focus-visible 规则只覆盖原生控件，
   Arco 自绘控件（复选、单选、开关、分段器）需要显式补上。
   ------------------------------------------------------------------------ */

.erp-shell :is([tabindex], [role='button'], .arco-checkbox, .arco-radio, .arco-switch, .arco-radio-button):focus-visible {
  outline: 2px solid var(--erp-color-primary);
  outline-offset: 2px;
  border-radius: var(--erp-radius-sm, 6px);
}

/* ---------------------------------------------------------------------------
   6. 降低动态效果：原规则只覆盖 .erp-shell，浮层与消息组件需一并纳入
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .arco-modal,
  .arco-message,
  .arco-notification,
  .arco-overlay,
  .arco-tooltip,
  .arco-dropdown {
    transition: none !important;
    animation: none !important;
  }
}
