/* ============================================================
   启元.QIEAM UI V4 原子工具层 (utilities.css)
   ------------------------------------------------------------
   定位：承接「一次性的排版 / 间距 / 宽度 / 对齐」微调，替代 2026-10
   之前散落在模板上的内联 style 属性（CSP 收紧前置条件，见 P1-4）。
   加载次序：必须排在页面域 CSS 之后（各壳层最后一个 <link>），
   以等价于历史内联样式的优先级生效——内联的层叠权重大于任何普通
   选择器，工具层靠「最后加载」取得同权覆盖能力，因此禁止前移。

   命名：qx-u-<属性缩写>-<档位>。档位一律取设计令牌刻度：
     · 间距 = --scale-sp-1..5（加 --scale-sp-hair 极细档）
     · 字号 = --scale-t-*
     · 色彩 = --scale-ink-*/steel/redline/ok/warn
     · 圆角 = --scale-r-*
   宽度/高度等几何常量保留像素基准（表格列宽、图标位），与历史内联
   值一一对应，属规格属性而非视觉裸值。
   ============================================================ */

/* ── 1. 字号 ── */
.qx-u-fs-tick { font-size: var(--scale-t-tick); }
.qx-u-fs-meta { font-size: var(--scale-t-meta); }
.qx-u-fs-body { font-size: var(--scale-t-body); }
.qx-u-fs-title { font-size: var(--scale-t-title); }
.qx-u-fs-page { font-size: var(--scale-t-page); }
.qx-u-fs-stat { font-size: var(--scale-t-stat); }
.qx-u-fs-code { font-size: var(--scale-t-code); }
.qx-u-fs-display { font-size: var(--scale-t-display); }

/* ── 2. 字重 / 字族 / 行高 ── */
.qx-u-fw-400 { font-weight: 400; }
.qx-u-fw-500 { font-weight: 500; }
.qx-u-fw-600 { font-weight: 600; }
.qx-u-mono { font-family: var(--font-mono); }
.qx-u-lh-100 { line-height: 1; }
.qx-u-lh-135 { line-height: 1.35; }
.qx-u-lh-140 { line-height: 1.4; }
.qx-u-lh-150 { line-height: var(--lh-body); }
.qx-u-lh-160 { line-height: 1.6; }
.qx-u-lh-170 { line-height: 1.7; }
.qx-u-ls-1 { letter-spacing: 1px; }
.qx-u-ls-4 { letter-spacing: 4px; }

/* ── 3. 文本装饰与断行 ── */
.qx-u-no-underline { text-decoration: none; }
.qx-u-break-all { word-break: break-all; }
.qx-u-nowrap { white-space: nowrap; }
.qx-u-select-all { user-select: all; }
.qx-u-select-none { user-select: none; }
.qx-u-va-middle { vertical-align: middle; }
.qx-u-ta-left { text-align: left; }
.qx-u-ta-center { text-align: center; }
.qx-u-ta-right { text-align: right; }

/* ── 4. 前景色（语义色阶） ── */
.qx-u-ink-1 { color: var(--scale-ink-1); }
.qx-u-ink-2 { color: var(--scale-ink-2); }
.qx-u-ink-3 { color: var(--scale-ink-3); }
.qx-u-ink-4 { color: var(--scale-ink-4); }
.qx-u-steel { color: var(--scale-steel); }
.qx-u-redline { color: var(--scale-redline); }
.qx-u-ok { color: var(--scale-ok); }
.qx-u-warn { color: var(--scale-warn); }

/* ── 5. 背景色（语义色阶） ── */
.qx-u-bg-panel { background-color: var(--scale-panel); }
.qx-u-bg-face { background-color: var(--scale-face); }
.qx-u-bg-recess { background-color: var(--scale-recess); }
.qx-u-bg-wash { background-color: var(--scale-steel-wash); }
.qx-u-bg-steel { background-color: var(--scale-steel); }
.qx-u-bg-rule { background-color: var(--scale-rule); }
.qx-u-bg-alarm { background-color: var(--scale-redline); }
.qx-u-bg-alarm-wash { background-color: var(--scale-redline-wash); }
.qx-u-bg-none { background: none; }

/* ── 6. 边框与圆角 ── */
.qx-u-b-0 { border: 0; }
.qx-u-b-rule { border: 1px solid var(--scale-rule); }
.qx-u-b-alarm { border: 1px solid var(--scale-redline); }
.qx-u-b-dashed { border: 1px dashed var(--scale-rule-strong); }
.qx-u-bt-rule { border-top: 1px solid var(--scale-rule); }
.qx-u-bt-strong { border-top: 2px solid var(--scale-rule-strong); }
.qx-u-bb-rule { border-bottom: 1px solid var(--scale-rule); }
.qx-u-bb-strong { border-bottom: 1px solid var(--scale-rule-strong); }
.qx-u-bb-0 { border-bottom: 0; }
.qx-u-bl-alarm { border-left: 3px solid var(--scale-redline); }
.qx-u-bl-steel { border-left: 3px solid var(--scale-steel); }
.qx-u-bc-alarm { border-color: var(--scale-redline); }
.qx-u-bc-ok { border-color: var(--scale-ok); }
.qx-u-bc-warn { border-color: var(--scale-warn); }
.qx-u-r-ctl { border-radius: var(--scale-r-ctl); }
.qx-u-r-round { border-radius: 50%; }

/* ── 7. 盒模型与定位 ── */
.qx-u-border-box { box-sizing: border-box; }

/* 屏幕阅读器专用文本：独立壳不加载 Bootstrap，故在工具层兜底
   （与 Bootstrap .visually-hidden 同口径，未用 !important 以免被纪律拦截） */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.qx-u-sticky { position: sticky; }
.qx-u-static { position: static; }
.qx-u-absolute { position: absolute; }
.qx-u-fixed { position: fixed; }
.qx-u-top-3 { top: var(--scale-sp-3); }
.qx-u-pointer { cursor: pointer; }
.qx-u-ovx-auto { overflow-x: auto; }
.qx-u-ovy-auto { overflow-y: auto; }
.qx-u-object-contain { object-fit: contain; }

/* ── 8. 显示方式与弹性布局 ── */
.qx-u-block { display: block; }
.qx-u-inline { display: inline; }
.qx-u-inline-block { display: inline-block; }
.qx-u-none { display: none; }
.qx-u-flex { display: flex; }
.qx-u-iflex { display: inline-flex; }
.qx-u-grid { display: grid; }
.qx-u-igrid { display: inline-grid; }
.qx-u-col { flex-direction: column; }
.qx-u-wrap { flex-wrap: wrap; }
.qx-u-flex-1 { flex: 1; }
.qx-u-shrink-0 { flex-shrink: 0; }
.qx-u-ai-start { align-items: flex-start; }
.qx-u-ai-center { align-items: center; }
.qx-u-ai-end { align-items: flex-end; }
.qx-u-ai-stretch { align-items: stretch; }
.qx-u-jc-between { justify-content: space-between; }
.qx-u-jc-end { justify-content: flex-end; }
.qx-u-self-center { align-self: center; }
.qx-u-place-center { place-items: center; }

/* ── 9. 栅格模板 ── */
.qx-u-grid-2 { grid-template-columns: repeat(2, 1fr); }
.qx-u-grid-3 { grid-template-columns: repeat(3, 1fr); }
/* 7:5 双栏（项目列表详情区，承接原内联 grid-template-columns: 7fr 5fr） */
.qx-u-grid-7-5 { grid-template-columns: 7fr 5fr; }
.qx-u-grid-2-min0 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qx-u-grid-auto-120 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.qx-u-grid-auto-160 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.qx-u-grid-auto-180 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.qx-u-grid-auto-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.qx-u-grid-auto-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.qx-u-grid-auto-fluid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.qx-u-span-all { grid-column: 1 / -1; }

/* ── 10. 间距：单边与全域（令牌刻度） ── */
.qx-u-gap-hair { gap: var(--scale-sp-hair); }
.qx-u-gap-1 { gap: var(--scale-sp-1); }
.qx-u-gap-2 { gap: var(--scale-sp-2); }
.qx-u-gap-3 { gap: var(--scale-sp-3); }
.qx-u-gap-4 { gap: var(--scale-sp-4); }
.qx-u-gap-5 { gap: var(--scale-sp-5); }

.qx-u-m-0 { margin: 0; }
.qx-u-m-0-auto { margin: 0 auto; }
.qx-u-m-3-0 { margin: var(--scale-sp-3) 0; }
.qx-u-m-1-0 { margin: var(--scale-sp-1) 0; }
.qx-u-m-2-0-0 { margin: var(--scale-sp-2) 0 0; }
.qx-u-m-1-0-0 { margin: var(--scale-sp-1) 0 0; }
.qx-u-m-0-0-2 { margin: 0 0 var(--scale-sp-2); }
.qx-u-m-0-0-3 { margin: 0 0 var(--scale-sp-3); }
.qx-u-m-2-0-3 { margin: var(--scale-sp-2) 0 var(--scale-sp-3); }

.qx-u-mt-0 { margin-top: 0; }
.qx-u-mt-hair { margin-top: var(--scale-sp-hair); }
.qx-u-mt-1 { margin-top: var(--scale-sp-1); }
.qx-u-mt-2 { margin-top: var(--scale-sp-2); }
.qx-u-mt-3 { margin-top: var(--scale-sp-3); }
.qx-u-mt-4 { margin-top: var(--scale-sp-4); }
.qx-u-mb-0 { margin-bottom: 0; }
.qx-u-mb-hair { margin-bottom: var(--scale-sp-hair); }
.qx-u-mb-1 { margin-bottom: var(--scale-sp-1); }
.qx-u-mb-2 { margin-bottom: var(--scale-sp-2); }
.qx-u-mb-3 { margin-bottom: var(--scale-sp-3); }
.qx-u-mb-4 { margin-bottom: var(--scale-sp-4); }
.qx-u-ml-hair { margin-left: var(--scale-sp-hair); }
.qx-u-ml-1 { margin-left: var(--scale-sp-1); }
.qx-u-ml-2 { margin-left: var(--scale-sp-2); }
.qx-u-ml-auto { margin-left: auto; }
.qx-u-mr-1 { margin-right: var(--scale-sp-1); }
.qx-u-mr-3 { margin-right: var(--scale-sp-3); }

.qx-u-p-0 { padding: 0; }
.qx-u-p-hair-2 { padding: var(--scale-sp-hair) var(--scale-sp-2); }
.qx-u-p-0-1 { padding: 0 var(--scale-sp-1); }
.qx-u-p-1-3 { padding: var(--scale-sp-1) var(--scale-sp-3); }
.qx-u-p-2 { padding: var(--scale-sp-2); }
.qx-u-p-2-0 { padding: var(--scale-sp-2) 0; }
.qx-u-p-2-3 { padding: var(--scale-sp-2) var(--scale-sp-3); }
.qx-u-p-2-4 { padding: var(--scale-sp-2) var(--scale-sp-4); }
.qx-u-p-3 { padding: var(--scale-sp-3); }
.qx-u-p-3-0 { padding: var(--scale-sp-3) 0; }
.qx-u-p-3-3-0 { padding: var(--scale-sp-3) var(--scale-sp-3) 0; }
.qx-u-p-3-4 { padding: var(--scale-sp-3) var(--scale-sp-4); }
.qx-u-p-3-4-0 { padding: var(--scale-sp-3) var(--scale-sp-4) 0; }
.qx-u-p-4-0 { padding: var(--scale-sp-4) 0; }
.qx-u-p-4-3 { padding: var(--scale-sp-4) var(--scale-sp-3); }
.qx-u-pt-2 { padding-top: var(--scale-sp-2); }
.qx-u-pt-3 { padding-top: var(--scale-sp-3); }
.qx-u-pb-2 { padding-bottom: var(--scale-sp-2); }
.qx-u-pl-3 { padding-left: var(--scale-sp-3); }
.qx-u-pl-4 { padding-left: var(--scale-sp-4); }
.qx-u-pr-4 { padding-right: var(--scale-sp-4); }

/* ── 11. 尺寸（几何基准，与历史内联值一一对应） ── */
.qx-u-w-full { width: 100%; }
.qx-u-w-auto { width: auto; }
/* 百分比列宽（审批列表表头，承接原内联 width: 40%/45%） */
.qx-u-w-40p { width: 40%; }
.qx-u-w-45p { width: 45%; }
.qx-u-w-32 { width: 32px; }
.qx-u-w-40 { width: 40px; }
.qx-u-w-50 { width: 50px; }
.qx-u-w-64 { width: 64px; }
.qx-u-w-70 { width: 70px; }
.qx-u-w-80 { width: 80px; }
.qx-u-w-90 { width: 90px; }
.qx-u-w-95 { width: 95px; }
.qx-u-w-100 { width: 100px; }
.qx-u-w-110 { width: 110px; }
.qx-u-w-120 { width: 120px; }
.qx-u-w-130 { width: 130px; }
.qx-u-w-140 { width: 140px; }
.qx-u-w-150 { width: 150px; }
.qx-u-w-160 { width: 160px; }
.qx-u-w-170 { width: 170px; }
.qx-u-w-180 { width: 180px; }
.qx-u-w-190 { width: 190px; }
.qx-u-w-200 { width: 200px; }
.qx-u-w-220 { width: 220px; }
.qx-u-w-230 { width: 230px; }
.qx-u-w-250 { width: 250px; }
.qx-u-w-270 { width: 270px; }
.qx-u-w-280 { width: 280px; }
.qx-u-maxw-150 { max-width: 150px; }
.qx-u-maxw-180 { max-width: 180px; }
.qx-u-maxw-200 { max-width: 200px; }
.qx-u-maxw-220 { max-width: 220px; }
.qx-u-maxw-240 { max-width: 240px; }
.qx-u-maxw-260 { max-width: 260px; }
.qx-u-maxw-280 { max-width: 280px; }
.qx-u-maxw-420 { max-width: 420px; }
.qx-u-maxw-440 { max-width: 440px; }
.qx-u-maxw-520 { max-width: 520px; }
.qx-u-maxw-640 { max-width: 640px; }
.qx-u-maxw-760 { max-width: 760px; }
.qx-u-maxw-1000 { max-width: 1000px; }
.qx-u-maxw-none { max-width: none; }
.qx-u-minw-0 { min-width: 0; }
.qx-u-minw-160 { min-width: 160px; }
.qx-u-minw-180 { min-width: 180px; }
.qx-u-minw-240 { min-width: 240px; }
.qx-u-minw-280 { min-width: 280px; }
.qx-u-maxh-260 { max-height: 260px; }
.qx-u-maxh-320 { max-height: 320px; }
.qx-u-minh-60vh { min-height: 60vh; }
.qx-u-h-full { height: 100%; }
.qx-u-h-auto { height: auto; }
.qx-u-h-64 { height: 64px; }

/* ── 12. 常用展示态组合 ── */
/* 指读文本：12px 元数据字号 + 三级墨色，表格/表尾/说明行通用 */
.qx-text-meta {
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-3);
}

/* 刻数文本：10px 微标签 + 三级墨色，刻度轨与角标 */
.qx-text-tick {
    font-size: var(--scale-t-tick);
    color: var(--scale-ink-3);
}

/* 注释文本：元数据字号 + 三级墨色 + 顶部微间距，标题下一行说明 */
.qx-text-note {
    margin-top: var(--scale-sp-1);
    font-size: var(--scale-t-meta);
    color: var(--scale-ink-3);
}