/* AWAH.Manage 外壳样式（Tabler 之外的自定义部分）
   配色方案移植自 AWAH.PortalWeb（默认主题：深海蓝主色 + 暗金饰线 + 黑白极简）：
   主色 #1F4068 / 悬停 #17334f / 深色块 #16283f / 暗金 #D4AF37
   正文 #444444 / 标题 #222222 / 浅底 #F5F7FA / 分隔线 #E0E0E0 */

/* ===== 配色令牌（与原门户 --awah-* 令牌一一对应，改色只需改这里） ===== */
:root {
    --manage-primary: #1F4068;
    --manage-primary-rgb: 31, 64, 104;
    --manage-primary-dark: #17334f;
    --manage-primary-darker: #16283f;
    --manage-primary-border: #b9c7d8;
    --manage-primary-bg-subtle: #e9eef4;
    --manage-accent: #D4AF37;
    --manage-heading: #222222;
    --manage-text: #444444;
    --manage-text-secondary: #555555;
    --manage-muted: #999999;
    --manage-bg: #f5f7fa;
    --manage-bg-subtle: #fafafa;
    --manage-surface: #ffffff;
    --manage-border: #e0e0e0;
    --manage-border-soft: #ebebeb;
    --manage-header-bg: #1F4068;
    --manage-header-hover: #2a5589;
    --manage-header-text: #ffffff;
    --manage-footer-bg: #16283f;
    --manage-footer-text: #96a3b2;
    --manage-radius: 2px;
    /* 数据表格配色：表头、奇数行、偶数行、悬停行、选中行互不相同。
       全部使用不透明色，冻结列（position:sticky）横向滚动时能完全遮挡下层列内容。 */
    --manage-table-header-bg: #e4ebf4;
    --manage-table-row-bg: #ffffff;
    --manage-table-row-alt-bg: #eef2f7;
    --manage-table-row-hover-bg: #d6e3f1;
    --manage-table-row-selected-bg: #c3d5e8;
}

/* ===== 覆盖 Tabler 主题变量，让 Tabler 自带组件（按钮/表单/链接/卡片）统一到门户配色 ===== */
:root {
    --tblr-primary: var(--manage-primary);
    --tblr-primary-rgb: var(--manage-primary-rgb);
    --tblr-primary-fg: #ffffff;
    --tblr-primary-darken: var(--manage-primary-dark);
    --tblr-primary-text-emphasis: #0f2138;
    --tblr-primary-bg-subtle: var(--manage-primary-bg-subtle);
    --tblr-primary-border-subtle: var(--manage-primary-border);
    --tblr-link-color: var(--manage-primary);
    --tblr-link-color-rgb: var(--manage-primary-rgb);
    --tblr-link-hover-color: var(--manage-primary-dark);
    --tblr-body-color: var(--manage-text);
    --tblr-body-color-rgb: 68, 68, 68;
    --tblr-secondary-color: rgba(68, 68, 68, .75);
    --tblr-secondary-color-rgb: 68, 68, 68;
    --tblr-body-bg: var(--manage-bg);
    --tblr-body-bg-rgb: 245, 247, 250;
    --tblr-bg-surface: var(--manage-surface);
    --tblr-bg-surface-secondary: var(--manage-bg);
    --tblr-bg-surface-tertiary: var(--manage-bg-subtle);
    --tblr-light: var(--manage-bg);
    --tblr-light-rgb: 245, 247, 250;
    --tblr-border-color: var(--manage-border);
    --tblr-border-color-translucent: rgba(34, 34, 34, .08);
    --tblr-border-radius: var(--manage-radius);
    --tblr-border-radius-sm: var(--manage-radius);
    --tblr-border-radius-lg: 4px;
    --tblr-heading-color: var(--manage-heading);
    --tblr-font-sans-serif: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

/* ========================================================================
   配色方案主题（顶栏下拉框选择，Cookie 持久化）
   与 AWAH.PortalWeb 五套主题一一对应：
   经典深海蓝（默认）→ 白浅天蓝 skyblue → 白薄荷青 mint → 白雾紫蓝 violet → 白暖灰珊瑚 coral
   只覆盖 --manage-* 令牌，Tabler 的 --tblr-* 会经由 var() 自动跟随
   ======================================================================== */

/* S1. 白浅天蓝（通用轻科技） 主 #4A90E2 / 辅 #73B8F2 / 浅 #F7FAFD */
html.theme-skyblue {
    --manage-primary: #4A90E2;
    --manage-primary-rgb: 74, 144, 226;
    --manage-primary-dark: #2f7dd6;
    --manage-primary-darker: #263140;
    --manage-primary-border: #9cc6f0;
    --manage-primary-bg-subtle: #eef5fb;
    --manage-accent: #73B8F2;
    --manage-heading: #2D3748;
    --manage-text: #5A6474;
    --manage-text-secondary: #5A6474;
    --manage-muted: #8a94a0;
    --manage-bg: #F7FAFD;
    --manage-bg-subtle: #f2f7fc;
    --manage-border: #e0e0e0;
    --manage-border-soft: #ebebeb;
    --manage-header-bg: #4A90E2;
    --manage-header-hover: #2f7dd6;
    --manage-header-text: #ffffff;
    --manage-footer-bg: #263140;
    --manage-footer-text: #b9c0c9;
    --manage-table-header-bg: #e1edfa;
    --manage-table-row-alt-bg: #eaf2fb;
    --manage-table-row-hover-bg: #cfe4fa;
    --manage-table-row-selected-bg: #bad8f6;
}

/* S2. 白薄荷青（环保/新能源） 主 #48A9A6 / 辅 #86CFCB / 浅 #F6FBFB */
html.theme-mint {
    --manage-primary: #48A9A6;
    --manage-primary-rgb: 72, 169, 166;
    --manage-primary-dark: #3a918e;
    --manage-primary-darker: #243333;
    --manage-primary-border: #9ed4d1;
    --manage-primary-bg-subtle: #eaf7f6;
    --manage-accent: #86CFCB;
    --manage-heading: #2C3E3E;
    --manage-text: #546B6B;
    --manage-text-secondary: #546B6B;
    --manage-muted: #83908e;
    --manage-bg: #F6FBFB;
    --manage-bg-subtle: #eef8f7;
    --manage-border: #e0e0e0;
    --manage-border-soft: #ebebeb;
    --manage-header-bg: #48A9A6;
    --manage-header-hover: #3a918e;
    --manage-header-text: #ffffff;
    --manage-footer-bg: #243333;
    --manage-footer-text: #b5c2c0;
    --manage-table-header-bg: #e2f2f1;
    --manage-table-row-alt-bg: #eaf7f5;
    --manage-table-row-hover-bg: #cfeae8;
    --manage-table-row-selected-bg: #b7e0dd;
}

/* S4. 白雾紫蓝（创新智能/机器人） 主 #7278D4 / 辅 #A1A6E8 / 浅 #F7F7FF */
html.theme-violet {
    --manage-primary: #7278D4;
    --manage-primary-rgb: 114, 120, 212;
    --manage-primary-dark: #5b61c9;
    --manage-primary-darker: #262740;
    --manage-primary-border: #c3c6ee;
    --manage-primary-bg-subtle: #ececfb;
    --manage-accent: #A1A6E8;
    --manage-heading: #2F3044;
    --manage-text: #5C5D72;
    --manage-text-secondary: #5C5D72;
    --manage-muted: #848695;
    --manage-bg: #F7F7FF;
    --manage-bg-subtle: #f2f2fc;
    --manage-border: #e0e0e0;
    --manage-border-soft: #ebebeb;
    --manage-header-bg: #7278D4;
    --manage-header-hover: #5b61c9;
    --manage-header-text: #ffffff;
    --manage-footer-bg: #262740;
    --manage-footer-text: #b9bac6;
    --manage-table-header-bg: #e8e9fa;
    --manage-table-row-alt-bg: #eeeefb;
    --manage-table-row-hover-bg: #d9dbf7;
    --manage-table-row-selected-bg: #c4c7f1;
}

/* S7. 白暖灰珊瑚（简约精工轻奢） 主 #E87C70 / 辅 #F2A89F / 浅 #FDF7F6 */
html.theme-coral {
    --manage-primary: #E87C70;
    --manage-primary-rgb: 232, 124, 112;
    --manage-primary-dark: #df6558;
    --manage-primary-darker: #2a2a2a;
    --manage-primary-border: #f3c3bd;
    --manage-primary-bg-subtle: #f8eceb;
    --manage-accent: #F2A89F;
    --manage-heading: #363636;
    --manage-text: #636363;
    --manage-text-secondary: #636363;
    --manage-muted: #8a8d90;
    --manage-bg: #FDF7F6;
    --manage-bg-subtle: #faf1f0;
    --manage-border: #e0e0e0;
    --manage-border-soft: #ebebeb;
    --manage-header-bg: #E87C70;
    --manage-header-hover: #df6558;
    --manage-header-text: #ffffff;
    --manage-footer-bg: #2a2a2a;
    --manage-footer-text: #b6b9bd;
    --manage-table-header-bg: #fae7e4;
    --manage-table-row-alt-bg: #fbecea;
    --manage-table-row-hover-bg: #f7d3ce;
    --manage-table-row-selected-bg: #f2beb6;
}

/* S6. TRAE 暗色（参考 TRAE IDE 暗色主题：近黑底 + 蓝紫强调色） 主 #4D8DFF / 辅 #8B5CF6 / 底 #181A1F */
html.theme-trae-dark {
    --manage-primary: #4D8DFF;
    --manage-primary-rgb: 77, 141, 255;
    --manage-primary-dark: #3B78E7;
    --manage-primary-darker: #14213A;
    --manage-primary-border: #2F4A73;
    --manage-primary-bg-subtle: #1B2637;
    --manage-accent: #8B5CF6;
    --manage-heading: #E7EAF0;
    --manage-text: #C4CAD6;
    --manage-text-secondary: #AEB6C4;
    --manage-muted: #8E98AA;
    --manage-bg: #181A1F;
    --manage-bg-subtle: #14161A;
    --manage-surface: #21242B;
    --manage-border: #333842;
    --manage-border-soft: #2A2E36;
    --manage-header-bg: #14161A;
    --manage-header-hover: #23272F;
    --manage-header-text: #E7EAF0;
    --manage-footer-bg: #14161A;
    --manage-footer-text: #8A93A3;
    --manage-table-header-bg: #262A33;
    --manage-table-row-bg: #21242B;
    --manage-table-row-alt-bg: #1E2127;
    --manage-table-row-hover-bg: #2C313B;
    --manage-table-row-selected-bg: #33405A;

    /* Tabler 变量同步：部分组件用 rgb 变量拼 rgba()，只改 --manage-* 不会跟随 */
    --tblr-primary-fg: #ffffff;
    --tblr-primary-text-emphasis: #A9C8FF;
    --tblr-primary-bg-subtle: #1B2637;
    --tblr-primary-border-subtle: #2F4A73;
    --tblr-link-color: #4D8DFF;
    --tblr-link-hover-color: #7FB0FF;
    --tblr-body-color-rgb: 196, 202, 214;
    --tblr-secondary-color: rgba(196, 202, 214, .75);
    --tblr-secondary-color-rgb: 196, 202, 214;
    --tblr-body-bg-rgb: 24, 26, 31;
    --tblr-light: #262A33;
    --tblr-light-rgb: 38, 42, 51;
    --tblr-border-color-translucent: rgba(255, 255, 255, .08);
    --tblr-secondary-bg: #2A2E36;
    --tblr-secondary-bg-rgb: 42, 46, 54;
    --tblr-tertiary-bg: #1E2127;
    --tblr-tertiary-bg-rgb: 30, 33, 39;
    --tblr-active-bg: #2C313B;

    /* 次要（secondary）色：Tabler 暗色主题未重新定义 --tblr-secondary，仍沿用浅色主题的
       #6c7a91；该灰色落在暗底上对比度不足，表现为「按钮里的灰字看不清」。
       这里按暗色方案提亮，btn-outline-secondary / btn-ghost-secondary / .text-secondary
       及工具栏中性按钮均通过 var() 自动跟随，浅色主题不受影响。
       --tblr-secondary-fg 只在 Tabler 的 light 主题块中定义，暗色下缺失会让悬停文字颜色失效，
       故一并补上（浅灰底上的深色文字）。 */
    --tblr-secondary: #93A1B5;
    --tblr-secondary-rgb: 147, 161, 181;
    --tblr-secondary-darken: #7C8A9E;
    --tblr-secondary-fg: var(--tblr-light);
    color-scheme: dark;
}

/* 暗色下 Tabulator 页脚分页器、日期浮层等仍是写死的浅色底，这里统一改为面板色 */
html.theme-trae-dark .manage-date-popup {
    background: var(--manage-surface);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45);
}

html.theme-trae-dark .manage-date-cell:hover {
    background: rgba(var(--manage-primary-rgb), .18);
}

/* 暗色下顶栏以外的次要文字：一级分类标题与菜单悬停使用 --manage-primary-dark，
   该深蓝色落在暗底上对比度偏低，暗色方案改用亮一档的主色 */
html.theme-trae-dark .manage-panel-caption,
html.theme-trae-dark .manage-panel-item:hover,
html.theme-trae-dark .manage-panel-item:hover .manage-panel-item-icon {
    color: var(--manage-primary);
}

/* 列表「查询中…」遮罩：浅色主题为半透明白底，暗色下改为半透明面板色并提高文字亮度 */
html.theme-trae-dark .manage-table-loading {
    background: rgba(24, 26, 31, .78);
    color: var(--manage-text);
}

/* SweetAlert2 与 Tabulator 加载提示在暗色下同样使用面板色 */
html.theme-trae-dark .swal2-popup {
    background: var(--manage-surface);
    color: var(--manage-text);
}

html.theme-trae-dark .swal2-title {
    color: var(--manage-heading);
}

html.theme-trae-dark .tabulator .tabulator-loader-msg {
    background: var(--manage-surface);
    color: var(--manage-heading);
}

body {
    color: var(--manage-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--manage-heading);
}

/* Alpine 初始化前隐藏（避免未编译模板闪现） */
[x-cloak] {
    display: none !important;
}

/* ===== 双栏导航：图标栏 + 菜单面板（参照设计稿 Dual-Rail Split） ===== */
.page.manage-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    min-height: 100vh;
}

.manage-layout .page-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

/* ===== 顶部导航：深海蓝底 + 暗金下划线（对应门户 .awah-topnav） ===== */
.manage-layout .page-wrapper > .navbar {
    --tblr-navbar-color: rgba(255, 255, 255, .88);
    --tblr-navbar-hover-color: #ffffff;
    --tblr-navbar-active-color: #ffffff;
    --tblr-navbar-brand-color: #ffffff;
    --tblr-navbar-brand-hover-color: #ffffff;
    background: var(--manage-header-bg);
    border-bottom: 2px solid var(--manage-accent);
    color: var(--manage-header-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.manage-layout .page-wrapper > .navbar .page-title {
    color: #ffffff;
    font-weight: 600;
}

.manage-layout .page-wrapper > .navbar .text-muted {
    color: rgba(255, 255, 255, .72) !important;
}

.manage-layout .page-wrapper > .navbar .text-body {
    color: #ffffff !important;
}

.manage-layout .page-wrapper > .navbar .btn-ghost-secondary {
    color: rgba(255, 255, 255, .85);
}

.manage-layout .page-wrapper > .navbar .btn-ghost-secondary:hover {
    background: rgba(255, 255, 255, .14);
    color: #ffffff;
}

.manage-layout .page-wrapper > .navbar .avatar {
    background: var(--manage-accent);
    color: var(--manage-primary-darker);
    font-weight: 700;
}

.manage-layout .page-wrapper > .navbar .nav-link {
    color: rgba(255, 255, 255, .92);
}

.manage-layout .page-wrapper > .navbar .nav-link:hover {
    color: #ffffff;
}

/* 用户下拉菜单回到白底深字，与深色顶栏区分 */
.manage-layout .page-wrapper > .navbar .dropdown-menu {
    color: var(--manage-text);
}

/* ===== 顶栏配色方案下拉框（对应门户左上角色块下拉） ===== */
.manage-theme-trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 30px;
    padding: 0 .5rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--manage-radius);
    color: #ffffff;
    cursor: pointer;
}

.manage-theme-trigger:hover,
.manage-theme-trigger.show {
    background: rgba(255, 255, 255, .22);
    color: #ffffff;
}

.manage-theme-chips {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.manage-theme-swatch {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 1px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.manage-theme-menu {
    min-width: 200px;
    padding: .25rem;
}

.manage-theme-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .55rem;
    border-radius: var(--manage-radius);
    color: var(--manage-text);
    font-size: .8125rem;
}

.manage-theme-item:hover,
.manage-theme-item:focus {
    background: rgba(var(--manage-primary-rgb), .08);
    color: var(--manage-primary);
}

.manage-theme-item.is-current {
    background: rgba(var(--manage-primary-rgb), .10);
    color: var(--manage-primary);
    font-weight: 600;
}

.manage-theme-item-text {
    white-space: nowrap;
}

/* 图标栏 */
.manage-rail {
    width: 68px;
    flex: 0 0 68px;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: .75rem 0 .6rem;
    background: var(--tblr-bg-surface, #ffffff);
    border-right: 1px solid var(--tblr-border-color, #e6e7e9);
}

.manage-rail-home {
    width: 42px;
    height: 42px;
    border-radius: .4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--manage-primary);
    color: #fff;
    font-size: 1.15rem;
    text-decoration: none;
}

.manage-rail-home:hover {
    color: #fff;
    background: var(--manage-primary-dark);
}

.manage-rail-home.is-active {
    box-shadow: 0 8px 18px rgba(var(--manage-primary-rgb), .28);
}

.manage-rail-item {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: .4rem;
    background: var(--tblr-bg-surface, #ffffff);
    color: var(--manage-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

.manage-rail-item:hover {
    color: var(--manage-primary);
    border-color: var(--manage-primary-border);
}

.manage-rail-item.is-active {
    background: var(--manage-primary);
    border-color: var(--manage-primary);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(var(--manage-primary-rgb), .28);
}

.manage-rail-sep {
    width: 28px;
    height: 1px;
    background: var(--manage-border-soft);
    margin: .15rem 0;
}

.manage-rail-spacer {
    flex: 1 1 auto;
}

.manage-rail-collapse {
    width: 42px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .3rem;
    background: transparent;
    color: var(--manage-muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.manage-rail-collapse:hover {
    background: rgba(var(--manage-primary-rgb), .06);
    color: var(--manage-primary);
}

/* 菜单面板 */
.manage-panel {
    /* 基础宽度 250px，实际宽度由 manage-app.js 的 fitSidebarPanelWidth 按最长导航文字计算后写入行内样式，
       实现「面板宽度随二三级导航文字自适应」，避免长菜单项被省略号截断。 */
    width: 250px;
    min-width: 220px;
    flex: 0 0 auto;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: var(--tblr-bg-surface, #ffffff);
    border-right: 1px solid var(--tblr-border-color, #e6e7e9);
}

/* 导航面板拖拽调宽：分隔条位于面板与内容区之间，可拖动 / 键盘微调 / 双击恢复自适应 */
.manage-panel-resizer {
    flex: 0 0 7px;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 2;
    cursor: col-resize;
    touch-action: none;
}

.manage-panel-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: transparent;
}

.manage-panel-resizer:hover::before,
.manage-panel-resizer.is-dragging::before,
.manage-panel-resizer:focus-visible::before {
    width: 2px;
    background: var(--manage-primary);
}

.manage-panel-resizer:focus-visible {
    outline: none;
}

/* 导航收起或窄屏时隐藏分隔条 */
.manage-layout.manage-rail-collapsed .manage-panel-resizer {
    display: none;
}

.manage-panel-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem .85rem .9rem;
    border-bottom: 2px solid var(--manage-accent);
}

/* 品牌区允许收缩，供产品名称与机构名称换行 */
.manage-panel-brand {
    flex: 1 1 auto;
    min-width: 0;
}

.manage-panel-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
    background: var(--manage-primary);
    color: #ffffff;
    font-size: 1.1rem;
}

/* 产品名称：超出面板宽度时自动换行，不再省略 */
.manage-panel-brand-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--manage-heading);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

.manage-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .35rem .6rem 1rem;
}

/* 一级分类标题：字号大于二级分类，独立配色，并以虚线分隔符与下方二级分类区分 */
.manage-panel-caption {
    padding: .75rem .55rem .5rem;
    margin-bottom: .2rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--manage-primary-dark);
    border-bottom: 1px dashed var(--manage-border);
    white-space: nowrap;
}

.manage-panel-group-caption {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .9rem .55rem .3rem;
    font-size: .875rem;
    letter-spacing: .06em;
    color: var(--manage-muted);
    white-space: nowrap;
}

.manage-panel-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .55rem;
    border-radius: .3rem;
    color: var(--tblr-body-color, #182433);
    font-size: .875rem;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
}

.manage-panel-item:hover {
    background: rgba(var(--manage-primary-rgb), .07);
    color: var(--manage-primary-dark);
}

.manage-panel-item.is-active {
    background: rgba(var(--manage-primary-rgb), .10);
    color: var(--manage-primary);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--manage-accent);
}

/* 三级功能项图标 */
.manage-panel-item-icon {
    flex: 0 0 16px;
    width: 16px;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    color: var(--manage-muted);
}

.manage-panel-item:hover .manage-panel-item-icon {
    color: var(--manage-primary-dark);
}

.manage-panel-item.is-active .manage-panel-item-icon {
    color: var(--manage-primary);
}

/* 常用功能快捷按钮：按钮按自身内容宽度排布（不再占据整列的长方形版块），纵向间距 20px */
.manage-quick-grid {
    display: flex;
    flex-wrap: wrap;
    /* 常用功能按钮整体左对齐排列（不居中） */
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 10px;
    row-gap: 20px;
}

/* 工作台常用功能快捷按钮（承接 Work 主窗体工具栏；无外框，仅图标 + 文字）
   按钮宽度固定为图标宽度（48px），文字在图标下方换行显示 */
.manage-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 48px;
    padding: 0;
    max-width: 100%;
    text-align: center;
    color: inherit;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: .5rem;
    cursor: pointer;
    transition: background-color .15s ease;
}

.manage-quick-tile:hover,
.manage-quick-tile:focus {
    color: inherit;
    background: rgba(var(--manage-primary-rgb), .06);
}

.manage-quick-tile:focus-visible {
    outline: 2px solid rgba(var(--manage-primary-rgb), .5);
    outline-offset: 2px;
}

.manage-quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: .75rem;
    background: rgba(var(--manage-primary-rgb), .10);
    color: var(--tblr-primary, #206bc4);
    font-size: 1.5rem;
    line-height: 1;
    transition: background-color .15s ease, transform .15s ease;
}

.manage-quick-tile:hover .manage-quick-icon,
.manage-quick-tile:focus .manage-quick-icon {
    background: rgba(var(--manage-primary-rgb), .18);
    transform: scale(1.04);
}

.manage-quick-title {
    font-weight: 600;
    font-size: .75rem;
    line-height: 1.25;
    white-space: normal;
    word-break: break-all;
    max-width: 100%;
}

/* 字段级帮助按钮（承接 Work 窗体的 pictureBoxHelp，位置贴近对应标签/控件） */
.manage-field-help {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0 2px;
    margin-left: 2px;
    color: var(--tblr-secondary, #667382);
    cursor: pointer;
    line-height: 1;
    vertical-align: -0.1em;
}

/* 标签后紧跟帮助按钮时：标签与问号固定在同行，标签文字过长则在标签内换行，
   问号不会被挤到下一行（避免各页面逐一调整标记结构） */
.form-label:has(+ .manage-field-help),
#manage-content .form-label:has(+ .manage-field-help) {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: calc(100% - 1.25rem);
    margin-right: 0;
    white-space: normal;
    vertical-align: top;
}

.form-label:has(+ .manage-field-help) + .manage-field-help,
#manage-content .form-label:has(+ .manage-field-help) + .manage-field-help {
    margin-left: 0;
    vertical-align: middle;
}

.manage-field-help .ti {
    font-size: .95rem;
}

.manage-field-help:hover {
    color: var(--tblr-primary, #206bc4);
}

.manage-panel-bullet {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 1px;
    background: #c6ccd8;
}

.manage-panel-item.is-active .manage-panel-bullet {
    background: var(--manage-primary);
}

.manage-panel-item-text {
    /* 面板宽度由最长菜单项决定，文本不再省略，避免文字显示不全 */
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.manage-panel-item-dot {
    display: none;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--manage-accent);
}

.manage-panel-item.is-active .manage-panel-item-dot {
    display: block;
}

.manage-panel-foot {
    padding: .6rem .85rem;
    border-top: 1px solid var(--tblr-border-color, #e6e7e9);
}

/* 整体收起：图标栏与面板同时隐藏，内容区占满整宽 */
.manage-layout.manage-rail-collapsed .manage-rail,
.manage-layout.manage-rail-collapsed .manage-panel {
    display: none;
}

/* 窄屏适配 */
@media (max-width: 991.98px) {
    .manage-rail {
        width: 60px;
        flex-basis: 60px;
    }

    .manage-panel {
        width: 220px;
        min-width: 200px;
        flex: 0 0 auto;
    }

    .manage-panel-resizer {
        display: none;
    }
}

/* ===== 多标签页条 ===== */
.manage-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
    padding-bottom: 0;
}

.manage-tab {
    display: inline-flex;
    align-items: center;
    padding: .25rem .625rem;
    font-size: .8125rem;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: .25rem .25rem 0 0;
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
    color: var(--tblr-secondary-color, #5f6b7a);
    max-width: 14rem;
}

.manage-tab.manage-tab-active {
    background: var(--tblr-bg-surface, #ffffff);
    border-color: var(--tblr-border-color, #e6e7e9);
    border-bottom-color: var(--tblr-bg-surface, #ffffff);
    color: var(--manage-heading);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--manage-accent);
}

.manage-tab a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manage-tab-close {
    border: 0;
    background: transparent;
    margin-left: .375rem;
    padding: 0 .125rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--manage-muted);
    cursor: pointer;
}

.manage-tab-close:hover {
    color: var(--tblr-danger, #d63939);
}

/* ===== 登录页验证码图片 ===== */
.pic-code {
    height: 34px;
    width: auto;
    cursor: pointer;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-left: 0;
    border-radius: 0 .375rem .375rem 0;
    background: var(--manage-bg-subtle);
}

/* ===== 登录页：卡片顶部暗金饰线，呼应门户顶栏配色 ===== */
.page-center .card-md {
    border-top: 3px solid var(--manage-accent);
}

/* ===== 数据表格：占满可用宽高 ===== */
#manage-content .tabulator {
    width: 100% !important;
}

#manage-content .card,
#manage-content .card-body {
    min-width: 0;
}

/* ===== 数据表格主题：覆盖 Tabulator 默认灰色主题，与页面白底 + 深海蓝主色一致 ===== */
#manage-content .tabulator {
    background-color: var(--tblr-bg-surface, #ffffff);
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: .3rem;
    color: var(--tblr-body-color, #182433);
}

/* 表头：与数据行不同底色 + 深色文字（表头文字固定使用 --manage-heading，保证在表头底色上对比度充足） */
#manage-content .tabulator .tabulator-header {
    background-color: var(--manage-table-header-bg);
    border-bottom: 1px solid var(--manage-primary-border);
    color: var(--manage-heading);
    font-weight: 600;
}

/*
 * 表头单元格必须为不透明底色：Tabulator 冻结列（.tabulator-frozen）是 position: sticky + z-index: 11，
 * 若底色透明，横向滚动时后续列的标题会透过冻结列显示出来，造成「标题文字重叠」。
 */
#manage-content .tabulator .tabulator-header .tabulator-col {
    background-color: var(--manage-table-header-bg);
    border-right: 1px solid var(--manage-border);
}

#manage-content .tabulator .tabulator-header .tabulator-col.tabulator-frozen {
    background-color: var(--manage-table-header-bg);
    z-index: 12;
}

/* 冻结列边界线：Tabulator 内置为 2px 深灰（#aaa），与列表统一的 1px 浅灰分隔线不一致，
 * 这里按「表头/数据单元格」各自的既有分隔线样式覆盖，保持整张列表边框一致。 */
#manage-content .tabulator .tabulator-header .tabulator-col.tabulator-frozen.tabulator-frozen-left {
    border-right: 1px solid var(--manage-border);
    border-left: 0;
}

#manage-content .tabulator .tabulator-header .tabulator-col.tabulator-frozen.tabulator-frozen-right {
    border-left: 1px solid var(--manage-border);
    border-right: 0;
}

#manage-content .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
    border-right: 1px solid var(--manage-border-soft);
    border-left: 0;
}

#manage-content .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {
    border-left: 1px solid var(--manage-border-soft);
    border-right: 0;
}

#manage-content .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
    /* 悬停底色同样必须不透明，否则冻结列悬停时仍会透出下层列标题 */
    background-color: var(--manage-primary-border);
}

#manage-content .tabulator .tabulator-header .tabulator-col.tabulator-frozen.tabulator-sortable.tabulator-col-sorter-element:hover {
    background-color: var(--manage-primary-border);
}

#manage-content .tabulator .tabulator-header .tabulator-col.tabulator-moving {
    background-color: var(--manage-primary-border);
    border: 1px solid var(--tblr-border-color, #e6e7e9);
}

#manage-content .tabulator .tabulator-header .tabulator-col.tabulator-range-highlight {
    background-color: rgba(var(--manage-primary-rgb), .1);
    color: inherit;
}

/* 数据区与行：奇偶行交替变色（奇数行 --manage-table-row-alt-bg / 偶数行 --manage-table-row-bg） */
#manage-content .tabulator .tabulator-tableholder .tabulator-table {
    background-color: transparent;
    color: inherit;
}

/* Tabulator 只给偶数行追加 .tabulator-row-even，因此「没有该类的行」即奇数行 */
#manage-content .tabulator-row {
    background-color: var(--manage-table-row-alt-bg) !important;
    color: var(--manage-text);
}

#manage-content .tabulator-row.tabulator-row-even {
    background-color: var(--manage-table-row-bg) !important;
    color: var(--manage-text);
}

/* 单元格分隔线：浅灰；单元格不设底色，跟随所在行底色显示 */
#manage-content .tabulator-row .tabulator-cell {
    background-color: transparent;
    border-right: 1px solid var(--manage-border-soft);
    border-bottom: 1px solid var(--manage-border-soft);
    color: inherit;
}

/* 悬停：所有数据行（含不可选行）整行变色；文字同时加深为标题色，确保浅底/深底切换后对比度始终充足 */
#manage-content .tabulator-row:hover {
    background-color: var(--manage-table-row-hover-bg) !important;
    color: var(--manage-heading);
}

/* 选中：比悬停再深一档，便于与悬停态区分 */
#manage-content .tabulator-row.tabulator-selected,
#manage-content .tabulator-row.tabulator-selected:hover {
    background-color: var(--manage-table-row-selected-bg) !important;
    color: var(--manage-heading);
}

/* 冻结列数据单元格：必须不透明底色（奇数行/偶数行/悬停/选中各自取对应底色），
 * 否则横向滚动时后续列的内容会透过冻结列显示出来（复选框/订单编号列固定在左侧）。 */
#manage-content .tabulator-row .tabulator-cell.tabulator-frozen {
    background-color: var(--manage-table-row-alt-bg);
    z-index: 12;
}

#manage-content .tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen {
    background-color: var(--manage-table-row-bg);
}

/* 偶数行的冻结列：需用更高优先级覆盖上面的偶数行底色 */
#manage-content .tabulator-row:hover .tabulator-cell.tabulator-frozen,
#manage-content .tabulator-row.tabulator-row-even:hover .tabulator-cell.tabulator-frozen {
    background-color: var(--manage-table-row-hover-bg);
}

#manage-content .tabulator-row.tabulator-selected .tabulator-cell.tabulator-frozen,
#manage-content .tabulator-row.tabulator-selected.tabulator-row-even .tabulator-cell.tabulator-frozen,
#manage-content .tabulator-row.tabulator-selected:hover .tabulator-cell.tabulator-frozen {
    background-color: var(--manage-table-row-selected-bg);
}

/* 底部：白底 + Tabler 风格分页按钮 */
#manage-content .tabulator .tabulator-footer {
    background-color: var(--tblr-bg-surface, #ffffff);
    border-top: 1px solid var(--tblr-border-color, #e6e7e9);
    color: var(--tblr-secondary-color, #5f6b7a);
    font-weight: 400;
}

#manage-content .tabulator .tabulator-footer .tabulator-page {
    background: transparent;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: .25rem;
    color: var(--tblr-body-color, #182433);
    padding: .125rem .5rem;
}

#manage-content .tabulator .tabulator-footer .tabulator-page.active {
    background: var(--manage-primary);
    border-color: var(--manage-primary);
    color: #ffffff;
}

#manage-content .tabulator .tabulator-footer .tabulator-page:not(:disabled):hover {
    background: rgba(var(--manage-primary-rgb), .08);
    border-color: var(--manage-primary-border);
}

#manage-content .tabulator .tabulator-footer .tabulator-page-size {
    background: var(--tblr-bg-surface, #ffffff);
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: .25rem;
    padding: .125rem .375rem;
    color: var(--tblr-body-color, #182433);
}

/* 空数据占位：次要文字色（默认 #ccc 过淡） */
#manage-content .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
    color: var(--manage-muted);
    font-size: .875rem;
    font-weight: 400;
}

/* ===== 订单查询列表：行可点击进入详情，给出可点击的视觉提示 ===== */
#order-query-table .tabulator-row {
    cursor: pointer;
}

/* ===== 分类树列表：统一「树形（存货分类）」与「平铺（存货品牌/零件分类）」的列缩进视觉 ===== */
/*
 * 树形表格的展开/收起标记统一为文件夹图标（机构树、分类树）：
 * 图标宽 16px + 右边距 4px = 20px，无子节点的行没有该占位，文字会整体左移，
 * 这里给「一级叶子行」补一个等宽占位，使两类行文字起点一致。
 * 二级及更深的叶子行由 Tabulator 自身插入分支连线占位，这里不再重复补偿，避免过度缩进。
 */
/* 叶子行由 Tabulator 的 branch-empty 占位，无需再额外补偿 */

/* 树形表格展开/收起标记：去掉默认方框，直接显示文件夹图标 */
#manage-content .tabulator .tabulator-cell .tabulator-data-tree-control {
    background: transparent;
    border: none;
    border-radius: 0;
    width: 16px;
    margin-right: 4px;
    overflow: visible;
}

#manage-content .tabulator .tabulator-cell .tabulator-data-tree-control:hover {
    background: transparent;
    border: none;
}

/* 文件夹图标（机构树 / 分类树 / 分类选择弹窗共用）：16px 宽 + 4px 右边距 = 20px 占位 */
.awah-tree-folder {
    display: inline-block;
    width: 16px;
    margin-right: 4px;
    text-align: center;
    color: #e8a33d;
    font-size: 15px;
    line-height: 1;
    vertical-align: middle;
}

/* ===== 树形表格层级连接线（机构树 / 机构管理树 / 分类树）：竖向虚线 + 每个子节点前导虚线 =====
 * 口径与「经销区域」页左侧机构树一致：子节点左侧一根竖向点线，子节点文字前一段横向点线。
 * Tabulator 每个下级行自带一个 branch 元素，默认是 9px 的实线拐角，这里改为整行高的虚线拐角。
 */
#manage-content .tabulator .tabulator-cell .tabulator-data-tree-branch {
    position: relative;
    width: 16px;
    height: 100%;
    margin-right: 0;
    margin-top: 0;
    border: 0;
    vertical-align: middle;
}

#manage-content .tabulator .tabulator-cell .tabulator-data-tree-branch::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-left: 1px dashed var(--manage-border);
}

#manage-content .tabulator .tabulator-cell .tabulator-data-tree-branch::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    border-top: 1px dashed var(--manage-border);
}

/* 叶子节点没有文件夹图标时，用同宽占位保证与有子节点的行文字对齐（16 + 4 = 20px） */
#manage-content .tabulator .tabulator-cell .tabulator-data-tree-branch-empty {
    width: 20px;
}

/* ===== 多选控件（manage-controls.js 生成） ===== */
.manage-multiselect {
    display: flex;
    gap: .375rem;
}

.manage-multiselect .form-control {
    cursor: pointer;
    background-color: var(--tblr-bg-surface, #ffffff);
}

.manage-multiselect .form-control[readonly] {
    cursor: pointer;
}

/* ===== 用户选择控件（manage-controls.js 生成） ===== */
.manage-userpicker {
    display: flex;
    gap: .375rem;
}

.manage-userpicker .form-control {
    cursor: pointer;
    background-color: var(--tblr-bg-surface, #ffffff);
}

/* 用户选择弹窗列表 */
.manage-picker-list {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: .3rem;
}

.manage-picker-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--manage-border-soft);
}

.manage-picker-row:last-child {
    border-bottom: 0;
}

.manage-picker-row:hover {
    background: rgba(var(--manage-primary-rgb), .06);
}

.manage-picker-row.is-selected {
    background: rgba(var(--manage-primary-rgb), .10);
    color: var(--manage-primary);
    font-weight: 600;
}

/* ===== 日期输入（文本 + 自带日历弹层，格式 yyyy-MM-dd） ===== */
.manage-date-wrap {
    position: relative;
}

.manage-date-wrap .form-control {
    padding-right: 2rem;
}

.manage-date-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2rem;
    border: 0;
    background: transparent;
    color: var(--manage-muted);
    cursor: pointer;
}

.manage-date-popup {
    position: absolute;
    z-index: 1080;
    top: calc(100% + 2px);
    left: 0;
    width: 250px;
    padding: .5rem;
    background: #ffffff;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: .3rem;
    box-shadow: 0 .5rem 1.5rem rgba(24, 36, 51, .16);
}

.manage-date-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .35rem;
}

.manage-date-popup-title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--manage-heading);
}

.manage-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.manage-date-cell {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .15rem;
    background: transparent;
    font-size: .8125rem;
    color: var(--manage-text);
    cursor: pointer;
}

.manage-date-cell:hover {
    background: rgba(var(--manage-primary-rgb), .1);
}

.manage-date-cell.is-muted {
    color: var(--manage-muted);
}

.manage-date-cell.is-today {
    border: 1px solid var(--manage-primary);
}

.manage-date-cell.is-selected {
    background: var(--manage-primary);
    color: #ffffff;
}

/* ===== SweetAlert2：默认确认按钮改为深海蓝，与门户主色一致 =====
   JS 里显式传入的 confirmButtonColor（如删除用红色）是行内样式，优先级更高，不受影响 */
.swal2-styled.swal2-confirm {
    background-color: var(--manage-primary);
}

.swal2-styled.swal2-confirm:hover {
    background-color: var(--manage-primary-dark);
}

/* ===== 用户管理 · 左侧机构树（懒加载，点击逐级展开） ===== */
.user-company-tree {
    max-height: 640px;
    overflow: auto;
    font-size: .875rem;
}

/* 分栏左栏内的机构树：取消 640px 高度上限，随左栏卡片高度撑满到卡片底部；
   640px 上限仅保留给弹窗 / 非分栏场景（如 _CompanyPicker） */
.as-split-left .user-company-tree {
    max-height: none;
}

.user-company-node {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--manage-radius);
    cursor: pointer;
    white-space: nowrap;
}

.user-company-node:hover {
    background: var(--manage-primary-bg-subtle);
}

.user-company-node.is-selected {
    background: var(--manage-primary);
    color: #ffffff;
}

.user-company-node-toggle {
    flex: 0 0 16px;
    width: 16px;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    color: #e8a33d;
    cursor: pointer;
}

/* 叶子节点没有文件夹图标时不再占位，机构名称紧挨虚线 */
.user-company-node-toggle.is-leaf {
    width: 0;
    flex: 0 0 0;
    cursor: default;
}

.user-company-node.is-selected .user-company-node-toggle {
    color: #ffffff;
}

.user-company-node-toggle.is-leaf {
    cursor: default;
}

.user-company-node-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 机构树（通用控件 AWAHCompanyTree）连接虚线：子级容器左侧一根竖向虚线，每个子节点前一段横向虚线 */
.user-company-tree .user-company-node-children {
    margin-left: 10px;
    padding-left: 8px;
    border-left: 1px dashed var(--manage-border);
}

.user-company-tree .user-company-node.is-child {
    position: relative;
    padding-left: 0;
}

.user-company-tree .user-company-node.is-child::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 8px;
    border-top: 1px dashed var(--manage-border);
}

/* 仅用于组织层级展示、不可选中的节点（如机构组 / 内设部门 / 工作组） */
.user-company-tree .user-company-node.is-disabled {
    cursor: default;
}

.user-company-tree .user-company-node.is-disabled:hover {
    background: transparent;
}

/* 树内加载 / 空数据 / 错误提示 */
.user-company-tree-status {
    padding: 2px 8px;
}

/* ========================================================================
   数据列表页密度优化（统一作用于 #manage-content 内的所有页面）
   目标：压缩筛选区与工具栏占用，尽可能多地展示数据表格行。
   说明：
     1) 仅调整「外观密度」，不改任何页面结构、字段与业务逻辑；
     2) 日期/数值/下拉按内容自适应列宽，关键字输入框自动占满剩余空间；
     3) 使用 :has() 按子控件类型收缩列宽；不支持时仅失去自适应，布局不破。
   ======================================================================== */

/* --- 1. 页面与卡片留白 --- */
.manage-layout .page-body {
    margin-top: .5rem;
    margin-bottom: .5rem;
}

#manage-content .card {
    --tblr-card-spacer-y: .6rem;
    --tblr-card-spacer-x: .75rem;
    --tblr-card-cap-padding-y: .5rem;
    --tblr-card-cap-padding-x: .75rem;
}

/* 卡片标题略缩小，降低列表页头部高度（页面顶栏已有同名标题） */
#manage-content .card > .card-header .card-title {
    font-size: 1.0625rem;
}

/* 版块标题栏（卡片头）底色：主色淡染，不再使用纯白；rgb 取自主题令牌，随全局配色切换自动变化 */
#manage-content .card > .card-header {
    background-color: rgba(var(--manage-primary-rgb), .16);
    border-bottom: 1px solid var(--manage-primary-border);
}

/* 表格上方工具栏与表格的间距收紧 */
#manage-content .card-body > .d-flex.mb-3,
#manage-content .card-body > .d-flex.flex-wrap.mb-3 {
    margin-bottom: .5rem !important;
}

/* 筛选区与表格区之间的分隔行：压缩上内边距（多数页面写作 border-top pt-3） */
#manage-content .card-body.border-top {
    padding-top: .5rem !important;
}

/* --- 2. 筛选区：标签与控件统一下调高度 --- */
#manage-content .row.align-items-end .form-label {
    margin-bottom: .125rem;
    font-size: .75rem;
    line-height: 1.25;
    color: var(--manage-text-secondary);
    white-space: nowrap;
}

/* .manage-dialog-filter 标记的弹窗筛选行走标准高度（见下方 5.1 节），不参与 30px 紧凑规则 */
#manage-content .row.align-items-end:not(.manage-dialog-filter) .form-control:not([type="file"]):not(textarea),
#manage-content .row.align-items-end:not(.manage-dialog-filter) .form-select:not([multiple]) {
    height: 30px;
    min-height: 30px;
    padding: .1875rem .5rem;
    font-size: .8125rem;
}

/* 多选列表框：字号与高度压缩，避免筛选区被拉高 */
#manage-content .row.align-items-end select[multiple] {
    height: 3.75rem;
    padding: .125rem .25rem;
    font-size: .75rem;
}

/* --- 3. 日期/时间/数值控件：宽度仅够显示内容 --- */
/* 原生日期控件；manage-controls.js 会把日期输入转成文本并包进 .manage-date-wrap，故两者都需限宽 */
#manage-content input[type="date"],
#manage-content .manage-date-wrap {
    width: 9.25rem;
    max-width: 100%;
}

#manage-content .manage-date-wrap .form-control {
    width: 100%;
}

#manage-content input[type="datetime-local"] {
    width: 11.75rem;
    max-width: 100%;
}

#manage-content input[type="month"] {
    width: 8.5rem;
    max-width: 100%;
}

#manage-content input[type="time"] {
    width: 7rem;
    max-width: 100%;
}

#manage-content .row.align-items-end input[type="number"] {
    width: 7.5rem;
    max-width: 100%;
}

/* 单选下拉：按最长选项自适应，上限 15rem，避免长字典项撑满整行 */
#manage-content .row.align-items-end select:not([multiple]) {
    width: auto;
    min-width: 8rem;
    max-width: 15rem;
}

/* --- 4. 筛选列宽自适应：窄列不再固定占用 1/4 或 1/2 宽 --- */
#manage-content .row.align-items-end > [class*="col-"]:has(> input[type="date"]),
#manage-content .row.align-items-end > [class*="col-"]:has(> .manage-date-wrap),
#manage-content .row.align-items-end > [class*="col-"]:has(> input[type="datetime-local"]),
#manage-content .row.align-items-end > [class*="col-"]:has(> input[type="month"]),
#manage-content .row.align-items-end > [class*="col-"]:has(> input[type="time"]),
#manage-content .row.align-items-end > [class*="col-"]:has(> input[type="number"]),
#manage-content .row.align-items-end > [class*="col-"]:has(> select:not([multiple])) {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

/* 关键字输入框占满本行剩余宽度，其余筛选条件并排显示 */
#manage-content .row.align-items-end > [class*="col-"]:has(> input[id*="eyword"]) {
    flex: 1 1 16rem;
    width: auto;
    max-width: 100%;
}

/* --- 5. 工具栏按钮：统一 30px 高，减少换行占用 --- */
#manage-content .row.align-items-end .btn,
#manage-content .card-body .d-flex > .btn,
#manage-content .card-body .d-flex > .dropdown > .btn {
    height: 30px;
    padding: .1875rem .55rem;
    font-size: .8125rem;
    line-height: 1.2;
}

#manage-content .row.align-items-end .btn .ti,
#manage-content .card-body .d-flex > .btn .ti,
#manage-content .card-body .d-flex > .dropdown > .btn .ti {
    font-size: .9375rem;
}

/* --- 5.1 弹窗筛选区：关键字框及同排控件统一为列表筛选关键字高度（36px） --- */
/* 弹窗位于 #manage-content 内时会命中 .row.align-items-end 的 30px 紧凑规则，
   这里用 .manage-dialog-filter 覆盖，保证所有弹窗关键字框与订单列表筛选关键字一致 */
#manage-content .row.manage-dialog-filter .form-control,
#manage-content .row.manage-dialog-filter .form-select {
    height: 2.25rem;
    min-height: 2.25rem;
    padding: .4375rem .75rem;
    font-size: .875rem;
}

#manage-content .row.manage-dialog-filter .btn {
    height: 2.25rem;
    padding: .4375rem .75rem;
    font-size: .875rem;
    line-height: 1.2;
}

/* --- 6. 数据表格：缩小字号与单元格内边距，增加可视行数 --- */
#manage-content .tabulator {
    font-size: .8125rem;
}

#manage-content .tabulator .tabulator-header .tabulator-col {
    padding-top: 4px;
    padding-bottom: 4px;
}

#manage-content .tabulator .tabulator-row .tabulator-cell {
    padding: 3px 6px;
    line-height: 1.35;
}

#manage-content .tabulator .tabulator-footer {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* HTML 表格（非 Tabulator 列表）同步压缩 */
#manage-content table.table {
    font-size: .8125rem;
}

#manage-content table.table > :not(caption) > * > * {
    padding: .3rem .45rem;
}

/* 表头行：与数据行不同底色 + 深色文字（部分页面的 thead 带 bg-white，需要一并覆盖） */
#manage-content table.table > thead > tr > th {
    background-color: var(--manage-table-header-bg);
    color: var(--manage-heading);
    border-bottom-color: var(--manage-primary-border);
}

#manage-content table.table > thead.bg-white {
    background-color: var(--manage-table-header-bg) !important;
}

/* 数据行：隔行变色（奇数行 / 偶数行与表头三者颜色互不相同）
 * Tabler 的 .table-striped / .table-hover 是通过 --tblr-table-bg-type / --tblr-table-bg-state
 * 生成 inset box-shadow 覆盖层来实现的，必须同时置为 transparent，否则会盖住这里的底色。 */
#manage-content table.table > tbody > tr:nth-child(odd) > * {
    --tblr-table-bg-type: transparent;
    --tblr-table-bg-state: transparent;
    background-color: var(--manage-table-row-bg);
    color: var(--manage-text);
}

#manage-content table.table > tbody > tr:nth-child(even) > * {
    --tblr-table-bg-type: transparent;
    --tblr-table-bg-state: transparent;
    background-color: var(--manage-table-row-alt-bg);
    color: var(--manage-text);
}

/* 悬停：整行变色，文字同时加深为标题色，避免底色变深后文字对比度不足 */
#manage-content table.table > tbody > tr:hover > * {
    --tblr-table-bg-type: transparent;
    --tblr-table-bg-state: transparent;
    background-color: var(--manage-table-row-hover-bg);
    color: var(--manage-heading);
}

/* 悬停行内的次要文字（灰字）统一加深，防止灰字落在有色底上对比度不足 */
#manage-content .tabulator-row:hover .text-muted,
#manage-content .tabulator-row:hover .text-secondary,
#manage-content table.table > tbody > tr:hover .text-muted,
#manage-content table.table > tbody > tr:hover .text-secondary {
    color: var(--manage-heading) !important;
}

/* --- 7. 工具栏分区（Ribbon 风格）---
 * 仿 Office 功能区：按操作类别把按钮分组，组内并列、组名下置、组间竖线分隔；
 * 用于「筛选工具栏」之外的「操作工具栏」，避免工具栏过长且按钮语义混杂。
 */
.manage-ribbon {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    /* 换行后组与组、行与行之间留出间距，窄屏时仍保持功能区可读 */
    gap: 6px 4px;
    padding: 4px 6px;
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
    border: 1px solid var(--manage-border-soft);
    border-radius: var(--manage-radius);
}

.manage-ribbon-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3px;
    padding: 2px 8px;
    border-right: 1px solid var(--manage-border-soft);
}

.manage-ribbon-group:last-child {
    border-right: 0;
}

.manage-ribbon-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* 组内按钮统一紧凑尺寸（含嵌套在状态组内的按钮） */
.manage-ribbon .btn {
    height: 30px;
    padding: .1875rem .55rem;
    font-size: .8125rem;
    line-height: 1.2;
}

.manage-ribbon .btn .ti {
    font-size: .9375rem;
}

/* 工具栏内的纯图标按钮（如「帮助」）：与相邻按钮等高，并保持正方形。
 * 注意：Tabler 的 .btn-icon 用 --tblr-btn-padding-y 计算 min-height（约 34.6px），
 * 这里必须同时覆盖 min-height，否则它会比 ribbon 内 30px 高的按钮更“高”。 */
.manage-ribbon .btn-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
}

/* 组名：置于按钮下方，居中、浅灰、小字号（与 Word 功能区的分组标签一致） */
.manage-ribbon-label {
    text-align: center;
    font-size: .6875rem;
    line-height: 1;
    color: var(--manage-muted);
    letter-spacing: .04em;
    padding-top: 1px;
}

/* 筛选工具栏内的竖向分隔线 */
.manage-ribbon-separator {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--manage-border-soft);
}

/* --- 7.1 列表工具栏 / 筛选栏按钮：一律使用默认（中性）色 ---
 * 列表的工具栏（manage-ribbon）与筛选栏（order-filter-row、row.align-items-end）中的按钮
 * 不再按业务语义着色：btn-primary / btn-success / btn-danger / btn-warning / btn-info 及其
 * outline 变体，在此范围内统一呈现为默认的中性按钮外观。
 * 通过覆盖 Tabler 的按钮 CSS 变量实现，按钮结构、事件、权限与禁用状态均不受影响；
 * 同时覆盖 hover / active / focus 阴影，避免残留蓝、绿、红等语义色。 */
.manage-ribbon .btn,
.manage-ribbon .dropdown > .btn,
.card-actions .btn,
.card-actions .dropdown > .btn,
.order-filter-row .btn,
#manage-content .row.align-items-end .btn,
#manage-content .row.manage-dialog-filter .btn,
.modal .row.align-items-end .btn,
.modal .row.manage-dialog-filter .btn,
#manage-content .card-body > .d-flex.flex-wrap > .btn,
#manage-content .card-body > .d-flex.flex-wrap > .dropdown > .btn,
.manage-list-toolbar .btn,
.manage-list-toolbar .dropdown > .btn {
    --tblr-btn-color: var(--tblr-secondary);
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: var(--tblr-secondary);
    --tblr-btn-hover-color: var(--tblr-secondary-fg);
    --tblr-btn-hover-bg: var(--tblr-secondary);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-color: var(--tblr-secondary-fg);
    --tblr-btn-active-bg: var(--tblr-secondary);
    --tblr-btn-active-border-color: transparent;
    --tblr-btn-disabled-color: var(--tblr-secondary);
    --tblr-btn-disabled-bg: transparent;
    --tblr-btn-disabled-border-color: var(--tblr-secondary);
    --tblr-btn-focus-shadow-rgb: var(--tblr-secondary-rgb);
}

/* 销售订单筛选工具栏：条件与动作随容器宽度自动换行（窄屏不再横向滚动） */
.order-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
    padding-bottom: 2px;
}

/* 日期控件保持紧凑宽度，空间不足时整体换到下一行 */
.order-filter-row .order-filter-date {
    flex: 1 1 140px;
    min-width: 130px;
    max-width: 170px;
}

/* 关键字占满剩余宽度：把「查询 / 重置」挤到最右侧 */
.order-filter-row .order-filter-keywords {
    flex: 1 1 auto;
    min-width: 160px;
}

/* 无标签的按钮与输入框底部对齐；按钮文字不换行，按钮本身可换行 */
.order-filter-row .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 状态提示：占用同行剩余空间，窄屏时允许折行显示（内容为空时不额外占行） */
.order-filter-row .order-filter-hint {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
}

/* 销售订单页查询提示：位于筛选行下方，不参与筛选行宽度分配 */
#order-query-hint {
    display: block;
    margin-top: .25rem;
    white-space: normal;
}

/* 单行筛选内的标签紧凑显示（仅日期 / 关键字有标签） */
.order-filter-row .form-label {
    margin-bottom: .25rem;
    font-size: .8125rem;
    white-space: nowrap;
}

/* ===== 状态徽标：全站共用 ===== */
/* 颜色配对规则：前景色（文字） + 背景色 + 边框色一一对应，取值映射见 manage-controls.js 的 STATUS_BADGE_MAP */
.manage-status-badge {
    display: inline-block;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: .7rem;
    line-height: 1.5;
    white-space: nowrap;
}

/* 未登记枚举值的兜底灰（各套枚举共用） */
.manage-status-payment-neutral,
.manage-status-delivery-neutral,
.manage-status-transport-neutral,
.manage-status-invoice-neutral {
    color: #495057;
    background: #f1f3f5;
    border-color: #ced4da;
}

/* 支付状态 —— AWAH.Config.EnumAccount.PaymentStatus */
.manage-status-payment-unpaid { color: #495057; background: #f1f3f5; border-color: #ced4da; }
.manage-status-payment-paying { color: #0b5ed7; background: #e7f0ff; border-color: #b6d4fe; }
.manage-status-payment-paid { color: #146c43; background: #e6f6ee; border-color: #a3cfbb; }
.manage-status-payment-paid-less { color: #a15c00; background: #fff4e5; border-color: #ffd8a8; }
.manage-status-payment-paid-more { color: #0f6674; background: #e6f7f5; border-color: #99ded6; }
.manage-status-payment-need-refund { color: #b02a37; background: #feecec; border-color: #f1aeb5; }
.manage-status-payment-refunding { color: #59359a; background: #f0ecff; border-color: #cbb6f0; }
.manage-status-payment-refunded { color: #146c43; background: #dff2e7; border-color: #a3cfbb; }
.manage-status-payment-refunded-less { color: #8a5a00; background: #fff6e0; border-color: #f0d199; }
.manage-status-payment-refunded-more { color: #7c3f2a; background: #fbeee8; border-color: #e3b8a5; }

/* 交货状态 —— AWAH.Config.EnumDelivery.DeliveryStatus */
.manage-status-delivery-received { color: #3a4a6b; background: #eef2f9; border-color: #c3cee3; }
.manage-status-delivery-preparing { color: #a15c00; background: #fff4e5; border-color: #ffd8a8; }
.manage-status-delivery-express-processing { color: #0b5ed7; background: #e7f0ff; border-color: #b6d4fe; }
.manage-status-delivery-packing-printed { color: #3538a8; background: #ecebff; border-color: #c2c0fb; }
.manage-status-delivery-to-express { color: #0f6674; background: #e3f8fa; border-color: #99ded6; }
.manage-status-delivery-transporting { color: #106a63; background: #e6f7f5; border-color: #99ded6; }
.manage-status-delivery-done { color: #146c43; background: #e6f6ee; border-color: #a3cfbb; }
.manage-status-delivery-returning { color: #8a5a00; background: #fff6e0; border-color: #f0d199; }
.manage-status-delivery-canceled { color: #495057; background: #f1f3f5; border-color: #ced4da; }
.manage-status-delivery-error { color: #b02a37; background: #feecec; border-color: #f1aeb5; }

/* 运输状态 —— AWAH.Config.EnumTransport.TransportStatus */
.manage-status-transport-not-specified { color: #495057; background: #f1f3f5; border-color: #ced4da; }
.manage-status-transport-ordered { color: #0b5ed7; background: #e7f0ff; border-color: #b6d4fe; }
.manage-status-transport-picked-up { color: #0e7490; background: #e0f7fa; border-color: #a5e4ee; }
.manage-status-transport-in-transit { color: #106a63; background: #e6f7f5; border-color: #99ded6; }
.manage-status-transport-delivering { color: #3538a8; background: #ecebff; border-color: #c2c0fb; }
.manage-status-transport-forwarded { color: #59359a; background: #f0ecff; border-color: #cbb6f0; }
.manage-status-transport-ready-pickup { color: #a15c00; background: #fff4e5; border-color: #ffd8a8; }
.manage-status-transport-signed { color: #146c43; background: #e6f6ee; border-color: #a3cfbb; }
.manage-status-transport-error { color: #b02a37; background: #feecec; border-color: #f1aeb5; }
.manage-status-transport-not-collected { color: #8a5a00; background: #fff6e0; border-color: #f0d199; }
.manage-status-transport-canceled { color: #495057; background: #f1f3f5; border-color: #ced4da; }
.manage-status-transport-returned { color: #7c3f2a; background: #fbeee8; border-color: #e3b8a5; }

/* 发票开具状态 —— AWAH.Config.EnumInvoiceStatus.InvoiceStatus */
.manage-status-invoice-not-invoiced { color: #495057; background: #f1f3f5; border-color: #ced4da; }
.manage-status-invoice-part-invoiced { color: #a15c00; background: #fff4e5; border-color: #ffd8a8; }
.manage-status-invoice-invoiced { color: #146c43; background: #e6f6ee; border-color: #a3cfbb; }
.manage-status-invoice-invoicing { color: #0b5ed7; background: #e7f0ff; border-color: #b6d4fe; }

/* 弹窗标题中的记录主键（修改 / 查看数据条目时统一显示） */
.manage-record-id {
    margin-left: .5rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 500;
    font-size: .75rem;
    vertical-align: middle;
}
.manage-record-id[hidden] { display: none; }
/* 记录主键可被选中复制：Tabler / Bootstrap 对标题、徽标默认 user-select:none，
   查看 / 修改界面显示的 Id 需支持鼠标选中 + Ctrl+C，故显式放开 */
.card-title,
.modal-title,
.manage-record-id,
.badge,
.manage-id-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

/* ===== 列表「查询中…」遮罩 =====
   查询期间在表格区域显示加载提示，不再占用筛选工具栏的提示文字。 */
.manage-table-loading {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .72);
    color: #64748b;
    font-size: .875rem;
    letter-spacing: .02em;
}
.manage-table-loading.is-visible {
    display: flex;
}

/* ===== 弹窗右上角「×」关闭按钮：去掉点击/聚焦时的灰色焦点框 =====
   Tabler 的 .btn-close:focus 会追加 0.25rem 主色半透明焦点环，SweetAlert2 的
   .swal2-close:focus-visible 会追加 3px 灰蓝内框，点下去看起来是一个大灰框。
   此处统一去掉焦点环，改为「按下 / 键盘聚焦时叉叉本身变成主题主色」的轻量反馈。 */
.btn-close:focus,
.btn-close:focus-visible,
.btn-close:active,
.swal2-close:focus,
.swal2-close:focus-visible,
.swal2-close:active {
    outline: 0;
    box-shadow: none;
    /* 触屏设备点击时的系统灰色高亮块（包围整个按钮）一并关掉 */
    -webkit-tap-highlight-color: transparent;
}

/* Tabler 的叉叉是写死颜色的背景图，仅改 color 不生效；
   按下时改为「纯色 + 遮罩裁出同样的叉叉形状」，颜色跟随当前配色方案的主题主色 */
.btn-close:active,
.btn-close:focus-visible {
    --tblr-btn-close-opacity: 1;
    opacity: 1;
    color: var(--manage-primary);
    background-image: none;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    -webkit-mask-position: center;
    -webkit-mask-size: 1em auto;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    mask-position: center;
    mask-size: 1em auto;
    mask-repeat: no-repeat;
    transform: none;
}

/* SweetAlert2 弹出框（任务进度、登录日志明细等）的「×」：按下时变红，与 hover 保持一致的关闭语义 */
.swal2-close:active,
.swal2-close:focus-visible {
    color: #f27474;
}

/* 仅键盘聚焦（:focus-visible）时补一圈细描边，颜色取当前文字色（即主题主色 / SweetAlert2 的红色），
   鼠标点击不会出现；offset 让描边离开按钮本体，在白色弹窗头部也清晰可辨 */
.btn-close:focus-visible,
.swal2-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ===== 售后查询：左右分栏（拖动调宽 + 收起左栏） ===== */
.as-split {
    display: flex;
    align-items: stretch;
}

/* 左栏宽度由 flex-basis 控制（JS 写入 px），右栏自适应剩余宽度 */
.as-split-pane {
    min-width: 0;
}

.as-split-left {
    flex: 0 0 33.3333%;
    padding-right: .75rem;
}

.as-split-right {
    flex: 1 1 auto;
    padding-left: .75rem;
}

/* 分隔条：透明热区 14px，中间 1px 细线；hover / 拖动 / 键盘聚焦时高亮为主题色 */
.as-split-handle {
    position: relative;
    flex: 0 0 14px;
    cursor: col-resize;
    touch-action: none;
}

.as-split-handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: var(--manage-border-soft);
}

.as-split-handle:hover::before,
.as-split-handle.is-dragging::before,
.as-split-handle:focus-visible::before {
    width: 2px;
    background: var(--manage-primary);
}

.as-split-handle:focus-visible {
    outline: none;
}

/* 拖动期间禁止选中文本，避免误选表格内容 */
.as-split.is-dragging {
    cursor: col-resize;
    user-select: none;
}

/* 收起按钮：位于分隔条中部，圆角描边按钮，收起后箭头翻转为向右 */
.as-split-toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 40px;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 1px solid var(--manage-border-soft);
    border-radius: 10px;
    background: var(--manage-surface);
    color: var(--manage-text-secondary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    cursor: pointer;
}

.as-split-toggle:hover {
    color: var(--manage-primary);
    border-color: var(--manage-primary);
}

/* 卡片型左栏：分栏左右两侧直接放卡片时，卡片随分栏高度撑满并允许内部滚动 */
.as-split-pane.is-card-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.as-split-pane.is-card-pane > .card {
    flex: 1 1 auto;
    min-height: 0;
}

/* 用户管理 · 用户列表：左侧机构树卡片与同一分栏内右侧列表卡片等高（底部对齐），
   高度由右侧列表内容决定，不按视口高度固定；树区在剩余空间内自身滚动 */
#uq-split > #uq-split-left {
    align-self: stretch;
}

/* 收起状态：左栏隐藏，右栏铺满（分隔条仍保留以便再次展开） */
.as-split.is-collapsed .as-split-left {
    display: none;
}

.as-split.is-collapsed .as-split-right {
    padding-left: 0;
}

/* 窄屏（<lg）：改为上下堆叠，隐藏分隔条，与原有响应式行为一致 */
@media (max-width: 991.98px) {
    .as-split {
        display: block;
    }

    .as-split-left {
        padding-right: 0;
        margin-bottom: 1rem;
    }

    .as-split-right {
        padding-left: 0;
    }

    .as-split-handle {
        display: none;
    }

    /* 窄屏没有分隔条可点击，若此前在宽屏收起了左栏，这里强制恢复显示，避免左栏无法展开 */
    .as-split.is-collapsed .as-split-left {
        display: block;
    }
}