/* ============================================================================
 * static/css/ui_kit.css —— 前端统一性一期「共享组件层」（新文件，2026-09-17）
 * ----------------------------------------------------------------------------
 * 用途：只放「归一目标样式」，不覆盖页面现状；页面 <link> 引用后才生效。
 *
 * 引用方式（两行都要，style.css 是 token 唯一来源）：
 *     <link rel="stylesheet" href="/static/css/style.css">
 *     <link rel="stylesheet" href="/static/css/ui_kit.css">
 *
 * 关于 var(--x, 兜底值) 写法：颜色/尺寸的兜底值 = style.css 当前值，仅用于兜住
 *    「未引用 style.css 的页面」（全站 21 个，见 output/2026-09-17-b3-stageA-result.md）；
 *    二期各页统一引用 style.css 后，兜底值可整体删除。本文件不定义任何 :root token，
 *    避免出现第二份 token 表导致漂移。
 *
 * 引用注意（重要）：本文件与 style.css 存在同名规则（.btn-primary/.btn-sm 等），
 *    后加载者胜 —— 本文件按「档位化几何」重定义，逐页引用时必须并排截图确认
 *    （例：style.css 的 .btn-sm 只有 padding/font-size，无高度档）。
 *
 * 分期路线图：
 *    一期（本文件）：只定义类，不改任何页面；供 Stage B 按页面组逐页引用。
 *    二期：页面自造 .page-header（22 份）/ .btn 系（60+ 私有类）/ chip / empty-state /
 *          modal 逐页换成这些类；配套 static/js/ui_kit.js（escapeHtml/toast/confirm）。
 *    三期：内嵌样式外置、.data-table 表头 sticky 全量铺开、20+ 断点收敛为 767/1024/1180。
 *
 * 目录：
 *    1. .page-header           页面顶部栏（归一 22 份私有实现）
 *    2. .btn / .btn-sm / .btn-lg + 4 语义
 *    3. 自造按钮类别名区（不改 HTML 类名，只统一几何）
 *    4. .chip / .chip-pill / .badge（+ .ok/.warn/.err/.info）
 *    5. .empty-state
 *    6. .toast（showToast 归一目标）
 *    7. .data-table th（一期只定义，页面引用在二期）
 * ========================================================================== */

/* ==================== 1. .page-header 页面顶部栏 ==================== */
/* 归一目标：高 46px + padding 0 14px + 下边框 + sticky(z:20) + 白底 + 左右居间布局。
   替代现状：22 份私有 .page-header（padding 10~14px、border #eee/#e5e7eb、z 10/20/40 不一）。 */
.page-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header, 20);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2, 8px);
    box-sizing: border-box;
    height: var(--header-h, 46px);
    padding: 0 14px;
    background: var(--card-bg, #ffffff);
    border-bottom: 1px solid var(--border, #e8e8e8);
}

.page-header .title,
.page-header h1 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-lg, 16px);
    font-weight: var(--fw-semibold, 600);
    color: var(--text, #1f1f1f);
}

/* 返回位：归一 5+ 种自造类（back / back-btn / stocktake-back-btn / workbench-back-row …） */
.page-header .back,
.page-header .back-btn {
    flex: 0 0 auto;
    border: none;
    background: none;
    padding: 0 4px;
    color: var(--primary, #1677ff);
    font-size: var(--fs-base, 14px);
}

.page-header .actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
}

/* ==================== 2. 按钮（3 档高 + 4 语义） ==================== */
/* 高度档：--btn-h-sm 32 / --btn-h 36 / --btn-h-lg 44（现状 13 档 24~48px） */
.btn,
.btn-sm,
.btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1, 4px);
    box-sizing: border-box;
    height: var(--btn-h, 36px);
    padding: 0 var(--sp-3, 12px);
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    font-family: inherit;
    font-size: var(--fs-base, 14px);
    font-weight: var(--fw-medium, 500);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.btn-sm {
    height: var(--btn-h-sm, 32px);
    padding: 0 10px;
    border-radius: var(--radius-sm, 8px);
    font-size: var(--fs-md, 13px);
}

.btn-lg {
    height: var(--btn-h-lg, 44px);
    padding: 0 var(--sp-4, 16px);
    font-size: var(--fs-lg, 16px);
}

.btn-block {
    display: flex;
    width: 100%;
}

/* 语义（与 style.css 既有 .btn-primary/.btn-secondary/.btn-outline 观感一致，只补几何与 hover） */
.btn-primary {
    background: var(--primary, #1677ff);
    border-color: transparent;
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:active {
    background: var(--primary-hover, #0958d9);
}

.btn-secondary {
    background: var(--primary-light, #e6f4ff);
    border-color: transparent;
    color: var(--primary, #1677ff);
}

.btn-secondary:hover,
.btn-secondary:active {
    background: #cce7ff;
}

.btn-outline {
    background: transparent;
    border-color: var(--border, #e8e8e8);
    color: var(--text-secondary, #666666);
}

.btn-outline:hover,
.btn-outline:active {
    background: var(--bg, #f5f5f5);
}

.btn-danger {
    background: var(--danger, #ff4d4f);
    border-color: transparent;
    color: #ffffff;
}

.btn-danger:hover,
.btn-danger:active {
    background: #d9363e;
}

.btn:disabled,
.btn-sm:disabled,
.btn-lg:disabled,
.btn-primary:disabled,
.btn-danger:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* 全站 :focus-visible 缺失（style.css 仅 7 处 :focus），这里只对 ui_kit 按钮补 */
.btn:focus-visible,
.btn-sm:focus-visible,
.btn-lg:focus-visible {
    outline: 2px solid var(--primary, #1677ff);
    outline-offset: 2px;
}

/* ==================== 3. 自造按钮类别名区（不改 HTML 类名） ==================== */
/* 现状：60+ 个页面私有按钮类、13 档高度、6 种圆角（见审查 D 维度 2）。
   一期只统一「几何」（高度/圆角/字号/hover 过渡），语义配色由 Stage B 按页确认后再归组。 */
.primary-btn,
.guided-action-btn,
.stmt-mini-btn,
.ghost-btn,
.selector-btn,
.detail-footer-btn,
.mc-btn,
.wb-chan-btn,
.auto-outstock-primary-btn,
.cli-btn-primary,
.order-detail-light-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1, 4px);
    box-sizing: border-box;
    height: var(--btn-h, 36px);
    padding: 0 var(--sp-3, 12px);
    border-radius: var(--radius-md, 8px);
    font-size: var(--fs-base, 14px);
    font-weight: var(--fw-medium, 500);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

/* 小尺寸候选（D 报告证据：stmt-mini-btn / order-detail-light-btn 为列表内小按钮）——
   待 Stage B 逐页确认后启用；一期不做改动，避免误伤行内按钮布局。 */
/*
.stmt-mini-btn,
.order-detail-light-btn,
.mc-btn { height: var(--btn-h-sm, 32px); padding: 0 10px; font-size: var(--fs-md, 13px); }
*/

/* 语义归组候选（仅备查，一期不启用；D 报告维度 2 的观察结论）：
   偏主色：primary-btn(16) / guided-action-btn(6) / auto-outstock-primary-btn(7) / cli-btn-primary(6)
   偏中性：ghost-btn(35) / selector-btn(36) / detail-footer-btn(23) / mc-btn(12) / wb-chan-btn(12) /
          stmt-mini-btn(6) / order-detail-light-btn(10)
   注意：.btn-primary 被 3 个页面重定义（bank_quick_confirm.html:42 绿色渐变 52px、
   customer_action_workbench.html:92、purchase_order_create.html:138），引用本文件前需先处理。 */

/* ==================== 4. chip / chip-pill / badge ==================== */
/* 三形态：.chip 小圆角 6px / .chip-pill 胶囊 999px / .badge 角标。
   语义修饰符 .ok/.warn/.err/.info 三者通用（现状 17+ 个同义类名：tag/status-text/cand-chip…） */
.chip,
.chip-pill,
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    height: 22px;
    padding: 0 var(--sp-2, 8px);
    border: none;
    border-radius: 6px;
    /* 6px 固定：--radius-sm 既有值为 8px（一期禁止改既有值），故此处不引 token，
       待二期补 --radius-xs:6px 后再切换 */
    background: var(--primary-light, #e6f4ff);
    color: var(--primary, #1677ff);
    font-size: var(--fs-sm, 12px);
    font-weight: var(--fw-medium, 500);
    line-height: 1;
    white-space: nowrap;
}

.chip-pill {
    border-radius: var(--radius-pill, 999px);
    padding: 0 10px;
}

.badge {
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill, 999px);
    font-size: var(--fs-xs, 11px);
    background: var(--danger, #ff4d4f);
    color: #ffffff;
}

.chip.ok,
.chip-pill.ok {
    background: var(--success-soft, #f6ffed);
    color: #389e0d;
}

.chip.warn,
.chip-pill.warn {
    background: var(--warning-soft, #fff7e6);
    color: #d46b08;
}

.chip.err,
.chip-pill.err {
    background: var(--danger-soft, #fff1f0);
    color: #cf1322;
}

.chip.info,
.chip-pill.info {
    background: var(--primary-light, #e6f4ff);
    color: var(--primary, #1677ff);
}

.badge.ok {
    background: var(--success, #52c41a);
}

.badge.warn {
    background: var(--warning, #faad14);
}

.badge.err {
    background: var(--danger, #ff4d4f);
}

/* ==================== 5. .empty-state 空态 ==================== */
/* 结构：图标位 .empty-icon + 文案 .empty-text（可带 .empty-hint）+ 操作位 .empty-action
   现状：empty-state(102)/empty(90)/empty-hint(25)/trade-empty(23)… 15+ 个私有空态类 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2, 8px);
    padding: 32px var(--sp-4, 16px);
    color: var(--text-muted, #999999);
    text-align: center;
}

.empty-state .empty-icon {
    font-size: 32px;
    line-height: 1;
    opacity: .6;
}

.empty-state .empty-text {
    font-size: var(--fs-base, 14px);
    color: var(--text-secondary, #666666);
}

.empty-state .empty-hint {
    font-size: var(--fs-md, 13px);
    color: var(--text-muted, #999999);
}

.empty-state .empty-action {
    margin-top: var(--sp-2, 8px);
}

/* ==================== 6. .toast（showToast 归一目标） ==================== */
/* 现状：9 个文件各自定义 showToast（4 种实现）+ 3 种类名（toast/spt-toast/cust-toast）。
   目标形态：顶部居中、黑底白字、胶囊圆角。用法：元素加 .toast，显示时加 .show。 */
.toast {
    position: fixed;
    left: 50%;
    top: var(--sp-3, 12px);
    z-index: var(--z-toast, 900);
    max-width: min(92vw, 420px);
    padding: 8px 14px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .82);
    color: #ffffff;
    border-radius: var(--radius-pill, 999px);
    font-size: var(--fs-base, 14px);
    line-height: 1.4;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;
}

.toast.show {
    opacity: 1;
}

/* ==================== 7. .data-table 表头 sticky ==================== */
/* 现状：31 个含表页面只有 6 个做了表头 sticky，表头底色 3 套（#f5f5f5 / #f8fafc / 各页自定义）。
   一期只定义类，页面 <table class="data-table"> 的引用动作在二期。 */
.data-table th {
    position: sticky;
    top: var(--header-h, 46px);
    z-index: 1;
    background: #f8fafc;
    color: var(--text-secondary, #666666);
    font-weight: var(--fw-semibold, 600);
}