/* ============================================================
   UI Kit · 全站统一界面增强层
   加载顺序：vendor → common.css → admin.css → ui-kit.css
   原则：零侵入。不改动业务 HTML，仅做样式统一与体验增强。
   ============================================================ */

/* ---------- 1. 基础排版 / 可读性 ---------- */
:root {
    --ui-focus: rgba(37, 99, 235, .16);
    --ui-line: #e6ebf2;
    --ui-soft: #f6f8fb;
    --ui-bar-h: 56px;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

::selection {
    background: rgba(37, 99, 235, .16);
    color: inherit;
}

/* 数字统一等宽，避免统计值跳动 */
.stat-card-value,
.pending-count,
table.table td,
.badge {
    font-variant-numeric: tabular-nums;
}

/* 统一焦点环（键盘可访问性） */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: none;
}

/* 滚动条美化（前台页面此前未统一） */
* {
    scrollbar-width: thin;
    scrollbar-color: #c8d1dc transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c8d1dc; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #aab6c5; }

/* 平滑滚动 */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ---------- 2. 按钮统一 ---------- */
.btn {
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: .01em;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(0); }
.btn:not(:disabled):not(.disabled):hover { transform: translateY(-1px); }
.btn-lg { border-radius: 10px; padding: .6rem 1.4rem; }
.btn-sm { border-radius: 7px; padding: .28rem .6rem; font-size: .82rem; }

/* 主按钮：统一渐变质感 */
.btn-primary {
    background: var(--primary-gradient);
    border: none;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .22);
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}
.btn-outline-primary:hover { box-shadow: 0 4px 12px rgba(37, 99, 235, .18); }
.btn-secondary { background: #64748b; border: none; }
.btn-secondary:hover { background: #475569; }
.btn-light { border: 1px solid var(--ui-line); }

/* 禁用态明确 */
.btn:disabled,
.btn.disabled { opacity: .6; transform: none !important; box-shadow: none !important; cursor: not-allowed; }

/* 按钮 loading 态（ui-kit.js 的 UI.loading 使用） */
.btn.is-loading {
    pointer-events: none;
    opacity: .85;
}
.btn.is-loading::before {
    content: '';
    display: inline-block;
    width: .85em;
    height: .85em;
    margin-right: .45em;
    vertical-align: -.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin .6s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* 图标按钮（表格操作列） */
.btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
}

/* ---------- 3. 表单统一 ---------- */
.form-label {
    font-weight: 500;
    font-size: .875rem;
    color: var(--text-secondary);
    margin-bottom: .35rem;
}
.form-control,
.form-select {
    border: 1px solid #dbe2ec;
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .92rem;
    transition: border-color .15s ease, box-shadow .15s ease;
    background-color: #fff;
}
.form-control::placeholder { color: #a8b3c2; }
.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) { border-color: #c3cddb; }
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--ui-focus);
}
.form-control:disabled,
.form-select:disabled { background-color: #f3f5f8; color: #94a3b8; }
textarea.form-control { min-height: 84px; resize: vertical; }
.input-group-text { border-color: #dbe2ec; background: #f6f8fb; border-radius: 8px; color: var(--text-secondary); }
.form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); }
.form-text { font-size: .78rem; color: var(--text-tertiary); }

/* 必填标记（ui-kit.js 注入 .ui-req） */
.ui-req { color: #ef4444; margin-left: 2px; font-weight: 600; }

/* 表单校验反馈 */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}
.invalid-feedback { font-size: .78rem; }

/* ---------- 4. 卡片 / 面板 ---------- */
.card {
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
.card:not(.no-hover):hover {
    box-shadow: 0 8px 22px rgba(16, 24, 40, .08);
}
/* 筛选卡保持稳定，不随悬浮上浮 */
.card.filter-card:hover,
.card.no-hover:hover { transform: none; box-shadow: 0 1px 3px rgba(16, 24, 40, .04); }

.card-header {
    background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
    border-bottom: 1px solid var(--ui-line);
    font-weight: 600;
    color: var(--text-primary);
    padding: .75rem 1rem;
}
.card-header i { color: var(--primary-color); }

/* 筛选卡标题（统一标签） */
.filter-card-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.filter-card-head i { color: var(--primary-color); font-size: 1rem; }
.card-body { padding: 1rem; }
.card-footer { background: #fbfcfe; border-top: 1px solid var(--ui-line); }

/* 统计卡 */
.stat-card {
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: '';
    position: absolute;
    inset: auto -30% -60% auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .07), transparent 70%);
    pointer-events: none;
}
.stat-card-value { font-size: 1.65rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.stat-card-label { font-size: .82rem; color: var(--text-secondary); }

/* ---------- 5. 表格统一 ---------- */
.ui-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
}

table.table {
    font-size: 13.5px;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}
table.table > thead > tr > th {
    background: #f6f8fb;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .02em;
    white-space: nowrap;
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--ui-line);
    border-top: none;
}
table.table > tbody > tr > td {
    padding: .7rem .8rem;
    border-bottom: 1px solid #f1f4f8;
    vertical-align: middle;
    color: var(--text-primary);
}
table.table > tbody > tr { transition: background-color .12s ease; }
table.table > tbody > tr:hover > td { background-color: #f8fafc; }
table.table > tbody > tr:last-child > td { border-bottom: none; }
table.table > tbody > tr.table-active > td { background: rgba(37, 99, 235, .06); }

/* 操作列按钮组 */
table.table td .btn { margin: 2px 3px 2px 0; }
table.table td .btn:last-child { margin-right: 0; }

/* 表格内长文本截断 */
table.table .cell-ellipsis {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 加载骨架 / 空态 / 错误态（与 common.js renderTable* 配套） */
.skeleton-row td { padding: 12px .8rem; }
.skeleton-row .skeleton-line { display: block; height: 12px; }
.table-empty,
.table-error {
    text-align: center;
    padding: 46px 12px !important;
    color: #8a94a6;
}
.table-empty i,
.table-error i { font-size: 32px; display: block; margin-bottom: 8px; opacity: .5; }
.table-error { color: #ef4444; }

/* sk-eleton 动画（前台页面此前无 admin.css） */
.skeleton-line {
    background: linear-gradient(90deg, #eef1f5 25%, #e2e6ec 37%, #eef1f5 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.3s ease infinite;
    border-radius: 6px;
}
@keyframes skeleton-loading {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* 移动端：表格卡片化（需 data-label，由 ui-kit.js 注入） */
@media (max-width: 576px) {
    .ui-table-card > thead { display: none; }
    .ui-table-card > tbody > tr {
        display: block;
        margin: 0 0 10px;
        border: 1px solid var(--ui-line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
        overflow: hidden;
    }
    .ui-table-card > tbody > tr:hover > td { background: #fff; }
    .ui-table-card > tbody > td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: .5rem .75rem;
        border-bottom: 1px dashed #eef1f6;
        text-align: right;
    }
    .ui-table-card > tbody > td:last-child { border-bottom: none; }
    .ui-table-card > tbody > td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--text-tertiary);
        font-size: 12px;
        font-weight: 500;
        text-align: left;
        padding-top: 1px;
    }
    .ui-table-card > tbody > td[data-label=""]::before { content: none; }
    .ui-table-card > tbody > td > * { text-align: right; }
}

/* ---------- 6. 徽章 / 状态 ---------- */
.badge {
    border-radius: 20px;
    font-weight: 500;
    padding: .32em .7em;
    font-size: .74rem;
    letter-spacing: .01em;
}
.badge.bg-primary { background-color: #2563eb !important; }
.badge.bg-success { background-color: #10b981 !important; }
.badge.bg-warning { background-color: #f59e0b !important; color: #fff !important; }
.badge.bg-danger { background-color: #ef4444 !important; }
.badge.bg-info { background-color: #06b6d4 !important; }
.badge.bg-secondary { background-color: #64748b !important; }

/* 带圆点状态徽章 */
.ui-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: 1px;
    background: currentColor;
}

/* ---------- 7. 分页 ---------- */
.pagination { gap: 4px; flex-wrap: wrap; }
.pagination .page-link {
    border: 1px solid var(--ui-line);
    border-radius: 8px !important;
    color: var(--text-secondary);
    font-size: .85rem;
    padding: .35rem .7rem;
    margin: 0;
    transition: all .14s ease;
}
.pagination .page-link:hover { background: #f1f5f9; border-color: #cfd8e4; color: var(--primary-color); }
.pagination .page-item.active .page-link {
    background: var(--primary-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .22);
}
.pagination .page-item.disabled .page-link { opacity: .5; }

/* ---------- 8. 模态框 ---------- */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(16, 24, 40, .2);
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(180deg, #fbfcfe 0%, #f2f6fb 100%);
    border-bottom: 1px solid var(--ui-line);
    padding: .9rem 1.1rem;
}
.modal-title { font-size: 1.05rem; font-weight: 600; }
.modal-title i { color: var(--primary-color); }
.modal-body { padding: 1.1rem; max-height: calc(100vh - 220px); overflow-y: auto; }
.modal-footer {
    border-top: 1px solid var(--ui-line);
    padding: .8rem 1.1rem;
    background: #fbfcfe;
    gap: .5rem;
}
.modal-footer .btn { min-width: 84px; }
.modal-backdrop.show { opacity: .45; }

/* ---------- 9. 前台导航增强 ---------- */
.navbar {
    backdrop-filter: saturate(180%) blur(8px);
    background: rgba(255, 255, 255, .92) !important;
}
.navbar.is-scrolled {
    box-shadow: 0 4px 18px rgba(16, 24, 40, .07);
}
.navbar-brand span { letter-spacing: -.01em; }
.nav-link {
    font-size: .93rem;
    position: relative;
}
.nav-link.active::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-color);
}
@media (max-width: 991px) {
    .nav-link.active::after { display: none; }
}

/* 统一页面头部 */
.ui-page-head {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #f8faff 0%, #eef4ff 100%);
    border: 1px solid #e3ebfa;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 18px;
}
.ui-page-head.ui-page-head-center { justify-content: center; text-align: center; }
.ui-page-head-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--primary-gradient);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .22);
}
.ui-page-head-body { min-width: 0; }
.ui-page-head-title { font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.ui-page-head-sub { font-size: .83rem; color: var(--text-secondary); margin: 2px 0 0; }
.ui-page-head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
@media (max-width: 576px) {
    .ui-page-head { flex-wrap: wrap; }
    .ui-page-head-actions { margin-left: 0; width: 100%; }
    .ui-page-head-actions .btn { flex: 1 1 auto; }
}

/* ---------- 10. Toast 提示（替代原 alert） ---------- */
.ui-toast-wrap {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10800;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.ui-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--ui-line);
    border-left: 4px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
    padding: 12px 14px;
    font-size: .9rem;
    color: var(--text-primary);
    animation: ui-toast-in .28s cubic-bezier(.2, .9, .3, 1.2);
    transition: opacity .2s ease, transform .2s ease;
}
.ui-toast.is-out { opacity: 0; transform: translateX(16px); }
.ui-toast i { font-size: 18px; line-height: 1.3; }
.ui-toast.success { border-left-color: #10b981; }
.ui-toast.success i { color: #10b981; }
.ui-toast.danger,
.ui-toast.error { border-left-color: #ef4444; }
.ui-toast.danger i,
.ui-toast.error i { color: #ef4444; }
.ui-toast.warning { border-left-color: #f59e0b; }
.ui-toast.warning i { color: #f59e0b; }
.ui-toast.info { border-left-color: #2563eb; }
.ui-toast.info i { color: #2563eb; }
.ui-toast-close {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 1rem;
    line-height: 1;
    padding: 0 0 0 6px;
    cursor: pointer;
}
.ui-toast-close:hover { color: var(--text-secondary); }
@keyframes ui-toast-in {
    from { opacity: 0; transform: translateX(24px) scale(.96); }
    to { opacity: 1; transform: none; }
}

/* ---------- 11. 顶部加载进度条 ---------- */
.ui-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 10900;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    border-radius: 0 3px 3px 0;
    transition: width .25s ease, opacity .3s ease;
    opacity: 0;
    pointer-events: none;
}
.ui-progress.is-active { opacity: 1; }

/* ---------- 12. 返回顶部 ---------- */
.ui-backtop {
    position: fixed;
    right: 20px;
    bottom: 84px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: var(--primary-color);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 1040;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ui-backtop.is-show { display: flex; }
.ui-backtop:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16, 24, 40, .2); }

/* ---------- 13. 前台移动端底部导航 ---------- */
.ui-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: none;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--ui-line);
    box-shadow: 0 -4px 18px rgba(16, 24, 40, .06);
    padding-bottom: env(safe-area-inset-bottom);
}
.ui-tabbar-inner {
    display: flex;
    align-items: stretch;
}
.ui-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 0 6px;
    color: #8a94a6;
    font-size: 11px;
    text-decoration: none;
    transition: color .15s ease;
}
.ui-tabbar a i { font-size: 20px; line-height: 1; }
.ui-tabbar a.active { color: var(--primary-color); }
.ui-tabbar a.active i { transform: translateY(-1px); }
@media (max-width: 991px) {
    .ui-tabbar { display: block; }
    body.has-tabbar { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
    body.has-tabbar .ui-backtop { bottom: 76px; }
}

/* ---------- 14. 后台布局微调 ---------- */
.main-content { transition: padding .2s ease; }
.top-navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: blur(8px);
}
.top-navbar-title { font-weight: 600; letter-spacing: -.01em; }
.top-navbar .user-avatar { box-shadow: 0 2px 6px rgba(16, 24, 40, .14); }

/* 后台页面主体留白统一 */
.main-content > .container-fluid,
.main-content > .container { padding-top: 2px; }

/* 后台筛选工具栏 */
.ui-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.ui-toolbar .ui-field { min-width: 150px; }
.ui-toolbar .ui-field label { font-size: .78rem; }

/* ---------- 15. 空状态 ---------- */
.empty-state {
    text-align: center;
    padding: 52px 16px;
    color: var(--text-tertiary);
}
.empty-state .empty-icon { font-size: 44px; opacity: .55; margin-bottom: 10px; }
.empty-state .empty-text { font-size: .9rem; }
.empty-hint i { font-size: 42px; display: block; margin-bottom: 10px; }

/* ---------- 16. 工具类 ---------- */
.ui-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
}
.ui-nowrap { white-space: nowrap; }
.ui-gap-2 { gap: .5rem !important; }
.ui-shadow-none { box-shadow: none !important; }
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 区块标题（详情页常用） */
.ui-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 12px;
    padding-left: 10px;
    border-left: 3px solid var(--primary-color);
    line-height: 1.2;
}

/* ---------- 17. 响应式细节 ---------- */
/* 后台宽表：窄屏保持列宽并横向滚动，避免挤压变形 */
@media (max-width: 991px) {
    .data-table,
    .data-table-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table table.table { min-width: 760px; }
}

@media (max-width: 576px) {
    .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
    .stat-card { padding: 14px !important; }
    .stat-card-value { font-size: 1.35rem; }
    .modal-footer .btn { flex: 1; }
    .ui-page-head { padding: 14px 16px; }
    .ui-page-head-icon { width: 36px; height: 36px; font-size: 17px; }
    .ui-page-head-title { font-size: 1.05rem; }
    .btn-group { flex-wrap: wrap; }
}

/* ---------- 17.1 后台移动端侧边栏遮罩 ----------
 * 兜底修复：部分后台页汉堡按钮无绑定/函数未定义，且展开后无遮罩、无法点击外部关闭。
 * 由 ui-kit.js 的 enhanceAdminSidebar() 动态创建 .sidebar-mask。
 */
.sidebar-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1030;          /* 低于侧边栏(1040)、高于内容 */
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}

.sidebar-mask.show {
    opacity: 1;
    visibility: visible;
}

@media (min-width: 769px) {
    .sidebar-mask { display: none; }   /* 桌面端侧边栏常驻，不需要遮罩 */
}

/* 侧边栏需盖在遮罩之上 */
@media (max-width: 768px) {
    .sidebar { z-index: 1040; }
    /* 展开时锁定背景滚动，避免滑动穿透 */
    body.sidebar-open { overflow: hidden; }
}

/* ---------- 18. 详情页字段（后台 6 个业务页详情弹窗统一排版） ---------- */
.detail-section {
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 14px;
}
.detail-section h6 {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: .92rem;
    margin: 0 0 10px;
}
.detail-field {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-bottom: 8px;
    line-height: 1.6;
    font-size: 13.5px;
}
.detail-field:last-child { margin-bottom: 0; }
.detail-field > label {
    flex: 0 0 auto;
    min-width: 92px;
    margin: 0;
    font-weight: 600;
    color: var(--text-secondary);
}
.detail-field > label::after { content: ''; }
.detail-field > span,
.detail-field > .val { flex: 1 1 60%; min-width: 0; word-break: break-all; }

/* ---------- 19. 后台布局补缺（非标准布局页面） ---------- */
.navbar-title { font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; }
.navbar-actions { display: flex; align-items: center; gap: 10px; }
.user-info { font-size: .88rem; color: var(--text-secondary); white-space: nowrap; }
.content-area,
.page-content { padding: 4px 2px 8px; }
.sidebar-nav { list-style: none; margin: 0; padding: 0; }
.sidebar-nav .nav-link { border-radius: 8px; padding: .45rem .7rem; }

/* ---------- 20. 微信登录按钮 ---------- */
.wechat-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(7, 193, 96, .26);
}
.wechat-login-btn svg { flex: 0 0 auto; }
.wechat-login-btn:hover { box-shadow: 0 6px 16px rgba(7, 193, 96, .32); }

/* ---------- 21. 遗留类兼容（Bootstrap 4 写法 / 早期页面） ---------- */
.font-weight-bold { font-weight: 700 !important; }
.font-weight-normal { font-weight: 400 !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.navbar-light .navbar-nav .nav-link { color: rgba(15, 23, 42, .72); }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active { color: var(--primary-color); }
.dept-select { min-width: 160px; }
.ia-check { cursor: pointer; }
.slide { overflow: hidden; }

/* ---------- 22.1 流程步骤条（ui-stepper）：直观展示业务流程顺序与当前节点 ---------- */
.ui-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 4px 2px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ui-stepper-step {
    position: relative;
    flex: 1 1 0;
    min-width: 92px;
    text-align: center;
    padding: 0 2px;
}
.ui-stepper-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: var(--ui-line);
    transition: background-color .2s ease;
}
.ui-stepper-step.is-done:not(:last-child)::after { background: var(--primary-color); }
.ui-stepper-dot {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    margin: 0 auto 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    border: 2px solid var(--ui-line);
    color: var(--text-tertiary);
    transition: all .2s ease;
}
.ui-stepper-step.is-done .ui-stepper-dot { background: var(--primary-gradient); border-color: transparent; color: #fff; }
.ui-stepper-step.is-current .ui-stepper-dot { border-color: var(--primary-color); color: var(--primary-color); box-shadow: 0 0 0 4px var(--ui-focus); }
.ui-stepper-step.is-rejected .ui-stepper-dot { background: #ef4444; border-color: transparent; color: #fff; }
.ui-stepper-label {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.3;
    padding: 0 4px;
}
.ui-stepper-step.is-done .ui-stepper-label { color: var(--text-primary); }
.ui-stepper-step.is-current .ui-stepper-label { color: var(--primary-color); font-weight: 600; }
.ui-stepper-step.is-rejected .ui-stepper-label { color: #ef4444; font-weight: 600; }
/* 详情弹窗内步骤条容器 */
.detail-flow {
    background: #f1f5fb;
    border: 1px solid #e3ebfa;
    border-radius: 12px;
    padding: 12px 14px 4px;
    margin: 4px 0 14px;
}
.detail-flow-title {
    font-size: .8rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
@media (max-width: 576px) {
    .ui-stepper-step { min-width: 76px; }
    .ui-stepper-label { font-size: 11px; }
}

/* ---------- 22. 打印 ---------- */
@media print {
    .ui-tabbar,
    .ui-backtop,
    .ui-progress,
    .ui-toast-wrap,
    .navbar,
    .sidebar,
    .top-navbar,
    .no-print { display: none !important; }
    .card { box-shadow: none !important; break-inside: avoid; }
    .main-content { margin-left: 0 !important; padding: 0 !important; }
}

/* ---------- 23. 移动端可点击目标 & 筛选区按钮 ---------- */
/* 移动端最小可点击尺寸，保证触控友好（iOS/Android 推荐 ≥32px） */
.btn { min-height: 32px; }
.btn-sm { min-width: 32px; }
.add-assignee-btn { min-height: 32px; }

/* 列表页筛选区操作按钮列：窄屏自动换行并均分，避免按钮溢出列宽 */
.filter-card .row .d-flex.gap-2 { flex-wrap: wrap; }
.filter-card .row .d-flex.gap-2 > .btn { flex: 1 1 auto; min-width: 72px; }

/* ---------- 24. 移动端 & 微信 webview 适配 ---------- */
/* 去除移动端 / 微信(X5 内核)点击时的灰色高亮块，贴近原生 App 手感 */
html { -webkit-tap-highlight-color: transparent; }
a, button, .btn, label, .ui-tabbar a, .navbar-nav .nav-link, .top-navbar { -webkit-tap-highlight-color: transparent; }

/* 禁止页面整体橡皮筋滚动穿透到微信/系统层，避免误触发下拉刷新与回弹 */
html, body { overscroll-behavior-y: contain; }

/* 导航/按钮等装饰性元素禁止长按选中文本，避免移动端误选 */
.navbar, .ui-tabbar, .btn, .ui-stepper, .top-navbar { -webkit-user-select: none; user-select: none; }

/* iOS 聚焦表单控件会自动放大页面：保证字号 ≥16px 阻止缩放（仅移动端生效） */
@media (max-width: 768px) {
    input, select, textarea, .form-control { font-size: 16px !important; }
}

/* 微信内置浏览器：顶部已自带微信导航条，站点导航收敛轻量、避免毛玻璃重影 */
.in-wechat .top-navbar,
.in-wechat .navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 0 var(--ui-line);
}
/* 微信环境下底部 tabbar 已含安全区，确保与微信底栏不叠加 */
.in-wechat .ui-tabbar { padding-bottom: env(safe-area-inset-bottom); }

/* 微信 webview 内禁止长按弹出系统菜单（放大镜/保存图片），贴近 App 体验 */
.in-wechat { -webkit-touch-callout: none; }