/* ===== 关键布局 ===== */ 
:root {
    --side-width: 260px;
    --topbar-height:56px;

    /* 页面切换防闪（2026-09-11）：恒预留滚动条槽位。
       原来垂直滚动条"按需出现"会占掉约 15px 视口宽度，切到内容超一屏的页面时，
       #topbar（left/right 定位）与 #main-wrapper（margin-left + 自适应宽）会整体横向位移，
       观感即"整个页面闪/抖一下"。stable 让槽位恒存在、与页面长短无关，彻底消除这种跳变。 */
    scrollbar-gutter: stable;

    /* 侧边栏右侧投影：向右偏移 + 负 spread 收边，只留右侧一道竖影，不会糊到上下左三边。
       由 ThemeConfig 按「系统设置 → 主题外观 → 阴影大小」注入覆盖（值 8 时与此处默认一致，0 时无阴影）。 */
    --sidebar-shadow: 6px 0 16px -6px rgba(0, 0, 0, 0.10);
}

/* 暗黑模式：底色更深，投影要更重才看得出层次 */
:root.theme-dark {
    --sidebar-shadow: 6px 0 16px -6px rgba(0, 0, 0, 0.55);
}

body {
    overflow-x: hidden; /* 防止小屏横向滚动 */
    background: var(--bg-page) !important;
    /* 与 :root 处双写：body 有 overflow-x:hidden，根滚动容器的 overflow/scrollbar-gutter
       由 body 传播到 viewport，两处都写确保各浏览器路径下都生效 */
    scrollbar-gutter: stable;
}
/* 侧边栏「折叠」只在 ≥992px（桌面）才有意义（2026-09-28 平板适配）：
   <992px 走的是 offcanvas 抽屉，#sidebar 被 Bootstrap 的 d-lg-none 隐藏；
   此时若 body 仍带 sidebar-collapsed（用户曾在桌面上折叠过、localStorage 记住了），
   这条规则会把顶栏左右各缩进一个 card-gap，与窄屏「顶栏占满整宽」的规则互相打架，
   表现为顶栏左侧莫名其妙露出一条缝。整条规则用媒体查询包起来，让折叠态在窄屏彻底失效。 */
@media (min-width: 992px) {
    body.sidebar-collapsed #topbar {
        left: var(--card-gap) !important;
        right: var(--card-gap) !important;
        width: auto !important; /* 收起侧边栏：保持悬浮边距（与 tabbar/展开时观感一致），不用全宽 */
    }
}

/* ========== 主内容区 ==========  */
#main-wrapper {
    margin-left: var(--side-width);
    padding-top: var(--topbar-height);



/*    min-height: 100vh;*/
  /*  background: var(--bg-page)!important;*/
}


/* ========== 侧边导航栏 ========== */
/*---- 侧边栏骨架----- */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--side-width);
    z-index: 1030;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    border-right: none !important; /* 取消主题色边框线（原 1px solid var(--bg-second)） */
    background: var(--bg-sidebar, var(--bg-card));
    color: var(--sidenav-text, var(--text-main)); /* 侧边导航栏字体色可独立配置（主题外观→侧边导航栏字体颜色） */
    overflow-y: auto;
    box-shadow: var(--sidebar-shadow); /* 右侧投影，与内容区分层 */
    /* 2026-09-15（A 段）：#sidebar 本身也是 overflow-y:auto 的滚动容器，一并禁用滚动锚定。
       理由同下方 .sidebar-content ul.nav，避免加载期内容高度变化时的自动微调把「贴底」位置推走。 */
    overflow-anchor: none;
}
/* 侧边栏文字禁止选中：避免双击菜单出现浏览器默认选中文字效果（桌面 + 移动抽屉） */
#sidebar,
#sidebarOffcanvas {
    user-select: none;
    -webkit-user-select: none;
}
/* 菜单 ul：隐藏滚动条（滚动条在 ul 上，不在 #sidebar 上） */
.sidebar-content ul.nav {
    scrollbar-width: none;   /* Firefox */
    /* 2026-09-15（A 段）：禁用浏览器滚动锚定。
       本 ul 是 overflow-y:auto 的滚动容器，容器内高度会在加载期变化（二级菜单由收起变展开、
       fitAllText 调字号）。浏览器 scroll anchoring 会自动微调 scrollTop 去"保持视觉位置"，
       在「已拉到最底」这个 scrollTop 顶在临界 max 上的状态下，这点微调会与滚动位置恢复
       （_SidebarContent.cshtml ③ 段的 clamp）叠加，表现为「点菜单后菜单自己往上移一段、
       把最后一项藏掉」。锚定对侧边栏菜单无价值（菜单项内容不会在滚动中动态增减），直接关掉。 */
    overflow-anchor: none;
}
.sidebar-content ul.nav::-webkit-scrollbar {
    display: none;           /* Chrome/Edge/Safari */
}






/*---- 侧边导航栏条目效果----- */
.nav-link {
    display: block;
    padding: var(--spacing-base) !important;
    margin-block: var(--spacing-base);
    border-radius: var(--radius-base);
    color: var(--sidenav-text, var(--text-main)) !important; /* 侧边导航栏字体色可独立配置 */
    font-size: var(--font-size-lg);
    font-weight: 500;
    transition: var(--transition-base);
    position: relative;
}

/* 悬停（背景/字体色可由「主题外观→侧边导航栏→悬停背景色/悬停字体颜色」独立配置，
   未配置时回落到 --bg-second / --text-accent，与 2026-09-23 之前写死的行为完全一致） */
.nav-link:hover {
    background: var(--sidenav-hover-bg, var(--bg-second)) !important;
    color: var(--sidenav-hover-text, var(--text-accent)) !important;
}

/* 激活（实底型：主题色实底 + 白字，最高对比、最干净；半透明底才会显脏，实底白字不发虚，2026-08-31） */
.nav-link.active {
    background: var(--bg-main) !important;
    color: var(--text-on-brand) !important;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-base);
}

/* 一级菜单项：保持间距 */
#sidebar > .nav > li > .nav-link {
    margin-block: var(--spacing-base);
}

/* 二级菜单：不用 Bootstrap collapse JS，直接 class 切换，瞬间显示/隐藏 */
#sidebar .collapse,
#sidebarOffcanvas .collapse {
    transition: none !important;
}

/* 箭头图标：单图标 rotate 旋转过渡，收起朝右，展开朝下 */
.collapse-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
    transform: rotate(-90deg); /* 默认：chevron-down 逆时针转 90° → 朝右 */
}
a[aria-expanded="true"] .collapse-arrow {
    transform: rotate(0deg);   /* 展开：回正 → 朝下 */
}

/* 侧边栏 collapse 切换期间彻底隐藏滚动条，防止闪动 */
#sidebar.scrolling-locked,
#sidebarOffcanvas .offcanvas-body.scrolling-locked {
    overflow-y: hidden !important;
    scrollbar-width: none !important; /* Firefox */
}
#sidebar.scrolling-locked::-webkit-scrollbar,
#sidebarOffcanvas .offcanvas-body.scrolling-locked::-webkit-scrollbar {
    display: none !important; /* Chrome/Edge/Safari */
}

/* 二级菜单项：移除额外 margin，只保留 padding */
.collapse .nav-link {
    margin-block: 0 !important; /* 去掉上下外边距 */
    padding: var(--spacing-sm) var(--spacing-base) !important; /* 减小垂直padding */
    padding-left: calc(var(--spacing-base) * 2) !important; /* 保持缩进 */
    font-size: var(--font-size-base); /* 可选：稍小字号 */
}




/* ========== 顶部导航栏 ==========  */


/*---- 顶部导航栏骨架----- */
#topbar {
    top: 0;                                         /* 顶部填满，贴顶不留空隙 */
    position: fixed;
    height: var(--topbar-height);                   /* 恢复全高，底部仍在 var(--topbar-height)（联动 tabbar/main 不变） */
    display: flex;
    align-items: center;
    background: var(--bg-topbar, var(--bg-sidebar)) !important; /* 顶部导航栏背景独立（主题外观→顶部导航栏颜色），回落侧边（压过 Bootstrap .bg-light 的 !important） */
    padding: 0 var(--spacing-base); /* 左右内边距 16px */
    color: var(--topnav-text, var(--text-main)) !important; /* 顶部导航栏字体色可独立配置 */
    border: 1px solid var(--bg-border);             /* 细边框 */
    border-top: none;                               /* 顶部贴页边，去掉顶部边框线 */
    border-bottom: 1px solid var(--bg-border) !important; /* 底部灰线：与 Tab 栏之间的分隔线（!important 压过 Bootstrap .border-bottom 的 #dee2e6 白线） */
    box-shadow: none;                               /* 无阴影 */
    border-radius: 0;                               /* 无圆角（用户要求：上导航栏不要圆角） */
    z-index: 1020;
    transition: var(--transition-base); /* 可选：尺寸/主题切换平滑 */
    width: auto;                                    /* 由 left/right 决定宽度 */
    left: calc(var(--side-width) + var(--card-gap)); /* 左留间距，与卡片间距(--card-gap)对齐 */
    right: var(--card-gap);                         /* 右留间距，与卡片间距(--card-gap)对齐 */
}
/* ---------- 顶部图标按钮 ---------- */
.topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
    width: 32px;  /* 固定正方形尺寸：hover 底色块为正方形 */
    height: 32px;
    /* 2026-09-01：跟随主题圆角（系统设置→圆角大小滑块，0=直角、越大越圆）。
       原为写死 4px 不跟随主题；现统一用 --radius-base，与按钮/输入框/标签保持同一圆角来源。 */
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    transition: var(--transition-base);
}
    .topbar-icon:hover {
        color: var(--text-accent);
        background: var(--bg-second); /* 纯底色反馈（同标签栏关闭按钮风格），去掉放大+变色效果 */
    }
/* ---------- 用户登录头像区 ---------- */
.topbar-userbasge {
    display: inline-flex;
    align-items: center;
    text-decoration: none; /* 去掉下划线 */
    gap: var(--spacing-base);
    /* 2026-09-01：跟随主题圆角（与按钮/输入框同源 --radius-base），原为写死 4px */
    border-radius: var(--radius-base);
    color: var(--text-sub);
    padding: 6px var(--spacing-base); /* 常驻垂直内边距：hover 底色块不跳动 */
    transition: var(--transition-base);
}
    /* 悬停：纯底色反馈（同顶部图标按钮），去掉放大+上浮，2026-08-31 */
    .topbar-userbasge:hover {
        color: var(--text-accent);
        background: var(--bg-second);
    }
    /* 头像图片（圆形）*/
    .topbar-userbasge .user-image {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 2px solid white;
        transition: var(--transition-base);
    }

/* ---------- 移动端顶栏居中的系统简称（2026-10-14） ----------
   仅 <992px 显示（HTML 上带 d-lg-none），点回首页 /Index。
   绝对定位居中：与两侧元素宽度无关，恒居中（#topbar 是 position:fixed，作为定位参照）。
   不用 flex 居中：右侧图标组自带 ms-auto，会破坏 flex 居中效果。
   字体色用顶栏的 --topnav-text（不是侧边栏 --sidenav-brand-text），因为元素现在位于顶栏。
   max-width 限制 + 省略号：移动端顶栏左右都占位，简称过长时不至于压到两侧图标。 */
#topbarBrandCenter {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    /* 显式块级：text-overflow:ellipsis 只在块级容器上生效（<a> 默认 inline）。
       position:absolute 虽会隐式块化，但显式声明可避免个别引擎/被覆盖时的"不截断"。
       注：≥992px 由 Bootstrap 的 d-lg-none 以 display:none!important 隐藏，不受此行影响。
       绝对定位 + left:50% 且无 right/width 时宽度按内容收缩、受 max-width 封顶，
       故短名自适应、长名到 42% 即截断并显示省略号。 */
    display: block;
    max-width: 42%;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--topnav-text, var(--text-main));
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    #topbarBrandCenter:hover {
        color: var(--text-accent);
    }

/* ---------- 顶部头像下拉菜单 ---------- */
.dropdown-menu {
    right: 1px;
    left: auto;
    border: none;
    box-shadow: var(--shadow-md);
    padding: var(--spacing-base);
    border-radius: var(--radius-base);
    background: var(--bg-card);
    color: var(--text-main) !important;
}
    .dropdown:hover > .dropdown-menu {
        display: block;
    }
    .dropdown:hover > .dropdown-toggle::after {
        transform: rotate(180deg);
        transition: var(--transition-base);
    }

/* ---------- 下拉菜单条目效果（悬停同侧边导航栏：淡主题色底 + 主题色文字，2026-08-31） ---------- */
.dropdown-item {
    transition: var(--transition-base);
    transform: none !important;
    padding: var(--spacing-sm);
    border-radius: var(--radius-base);
}
    .dropdown-item:hover {
        color: var(--text-accent);   /* 主题色文字（同 .nav-link:hover） */
        background: var(--bg-second); /* 淡主题色底（同 .nav-link:hover） */
    }

/* ========== 窄屏修正：侧边栏隐藏时，主内容与顶部条都顶到最左 ==========
   断点 768 → 992（2026-09-28 平板适配）：
   992px 是 Bootstrap lg 断点，也是本次定的「手机 + 平板竖屏」与「平板横屏 + 桌面」分界。
   iPad 竖屏（768）落在窄屏侧 → 走 offcanvas 抽屉，内容独占整宽；
   iPad 横屏（1024）落在宽屏侧 → 保持固定侧边栏。
   必须与 _Layout.cshtml 的 d-lg-* 类名、layout-tabs.js 的 #tabbar 断点保持同一数值：
   若 CSS 写 1024 而类名用 d-lg-*（992），992~1023 区间会出现「侧边栏显示了、
   但主内容没有左边距」的重叠，所以两边统一取 Bootstrap 的 992。 */
@media (max-width: 991.98px) {
    #main-wrapper {
        margin-left: 0 !important;
    }

    #topbar {
        width: 100%;
        left: 0;
    }
}

/* 窄屏 offcanvas 宽度 = 大屏侧边栏宽度 */
@media (max-width: 991.98px) {
    #sidebarOffcanvas {
        width: var(--side-width); /* 实际值见 :root --side-width（当前 260px） */
        background: var(--bg-sidebar, var(--bg-card));
        box-shadow: var(--sidebar-shadow); /* 抽屉右侧投影：与主内容分层 */
        /* 2026-10-14 修复「抽屉里顶部简称与底部灰线显示不全」：
           根因是抽屉比桌面版多出一层内边距 —— Bootstrap .offcanvas 自带 padding，
           _Layout.cshtml 里的 .offcanvas-header 又有默认 padding: 1rem，两层叠加后
           内容盒左右各缩进约 32px（桌面 #sidebar 只有 padding: 1rem = 16px），
           可用宽度从 228px 掉到约 196px。而 .dlx-fit-text 的字号是 fitText() 在
           页面加载时按**另一个 DOM 树**（#sidebar 那份 partial）的宽度算好的，
           抽屉被拉出时不会重算 → 简称被 nowrap + overflow 截断；撑满容器的 <hr>
           也在更窄的盒子里显得"少一截"。
           修法：把 offcanvas 与 offcanvas-header 的内边距归零，让内边距只由
           #sidebarOffcanvas 自己给（与桌面 #sidebar 一致），两份 partial 宽度口径统一。 */
        padding: 1rem;
    }
    #sidebarOffcanvas > .offcanvas-header {
        padding: 0;
        /* 关闭按钮绝对定位到右上角：内边距归零后它若留在文档流里，
           会把下方的 LOGO/简称整体往下压，与桌面版的间距不一致 */
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 2;
    }
    #sidebarOffcanvas > .offcanvas-body {
        padding: 0;
    }
}

/* ========== 宽屏（≥992px）：固定侧边栏 + 折叠（清屏模式） ========== */
@media (min-width: 992px) {
    /* 默认展开状态 */
    #sidebar {
        width: var(--side-width, 260px);
        /* ✅ 只保留 transform transition（visibility 不要过渡） */
        transition: transform 0.3s ease;
        transform: translateX(0);
        /* visibility 默认 visible，无需声明 */
    }

    /* 主内容区 */
    #main-wrapper {
        margin-left: var(--side-width, 260px);
        transition: margin-left 0.3s ease;
    }

    /* 折叠状态：只用 transform 隐藏 */
    #sidebar.collapsed {
        transform: translateX(-100%);
        /* ✅ 可选：加 visibility 防止 hover 触发，但不要过渡 */
        visibility: hidden;
    }

    /* 侧边栏自身收起：与 #sidebar.collapsed 等价的另一条驱动路径（2026-09-11 新增）。
       _Layout.cshtml 顶部的同步脚本运行在 #sidebar 渲染之前，只能操作 body 的类，故补此规则，
       使首绘即为收起态，不依赖 site.js 的 DOMContentLoaded，避免"先展开再收起"的跳动。 */
    body.sidebar-collapsed #sidebar {
        transform: translateX(-100%);
        visibility: hidden;
    }

    /* 主内容区响应折叠 */
    body.sidebar-collapsed #main-wrapper {
        margin-left: 0 !important;
    }

    /* 折叠态卡片铺满：规则见文件末尾「首页功能导航卡片铺满」段落。 */




    /* 初始化期间只禁用过渡（2026-09-11 调整，原为 opacity:0 整块遮挡）。
       原做法把侧边栏藏到 site.js 的 DOMContentLoaded 才显现，本意是遮住"先展开后收起"的跳动，
       但代价是每次切页都变成"顶栏/主内容先出来、侧边栏晚一拍才出现"——正是要治的闪动。
       首绘正确状态改由 _Layout.cshtml 顶部的同步脚本保证（本地折叠状态提前应用），
       故此处只需禁掉过渡：初始化阶段若有状态修正也是硬切，不会出现滑出动画。 */
    body.initializing #sidebar {
        transition: none !important;
    }
}

/* ========== 导航切换防闪（已按要求移除：整页淡入 + View Transitions 交叉淡化） ========== */

/* ========== 菜单点击加载反馈（配合 site.js 的 dlx-nav-loading） ========== */
#sidebar .nav-link.dlx-nav-loading,
#sidebarOffcanvas .nav-link.dlx-nav-loading {
    color: var(--text-accent) !important;
    pointer-events: none;
    position: relative;
}

#sidebar .nav-link.dlx-nav-loading::after,
#sidebarOffcanvas .nav-link.dlx-nav-loading::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid rgba(128, 128, 128, .25);
    border-top-color: var(--text-accent);
    border-radius: 50%;
    animation: dlx-nav-spin .6s linear infinite;
}

@keyframes dlx-nav-spin {
    to { transform: rotate(360deg); }
}

/* ========== 主系统背景层（纯色防闪层，2026-08-21） ========== */
/* 作用：MPA 整页切换时提供稳定的全屏背景，避免"灰底→内容"突变闪现；
   同时满足"不要主题图案/颜色"：纯 --bg-page 灰，无主题渐变、无圆环、无点阵 */
.page-bg-wrapper {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg-page);
}

/* 取消原背景装饰（右上圆环 / 右下点阵 / 深色减弱） */
.page-bg-wrapper::before,
.page-bg-wrapper::after {
    display: none;
}

/* ========== 全局搜索框（gs-wrap）静态样式（防 FOUC，2026-08-21） ========== */
/* 原由 global-search.js 动态注入：页面切换瞬间样式未就绪会闪现"原始效果"。
   静态化后加载即就绪；JS 注入保留作兜底（内容相同，无冲突） */
.gs-wrap{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;margin-right:6px;}
.gs-box{display:flex;align-items:center;gap:6px;height:30px;width:100%;padding:0 12px;border:none;border-radius:var(--radius-base);background:rgba(127,127,127,.07);color:var(--text-sub);transition:background .15s,box-shadow .15s;}
@media (min-width: 992px){.gs-wrap{flex:0 0 auto;margin-right:0;}.gs-box{width:210px;}}
.gs-box:focus-within{background:rgba(127,127,127,.12);color:var(--text-main);}
.gs-box-icon{font-size:13px;flex-shrink:0;}
.gs-box input{flex:1;min-width:0;height:100%;border:none !important;outline:none !important;background:transparent !important;box-shadow:none !important;-webkit-appearance:none;appearance:none;color:var(--text-main);font-size:13px;}
.gs-box input::placeholder{color:var(--text-sub);}
.gs-panel{position:absolute;top:calc(100% + 6px);left:0;width:300px;max-width:calc(100vw - 20px);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-card);box-shadow:0 8px 24px rgba(0,0,0,.16);overflow:hidden;display:none;font-size:13px;z-index:10000;}
.gs-panel .gs-results{max-height:min(420px,60vh);overflow-y:auto;padding:6px;}
.gs-panel .gs-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-base);cursor:pointer;color:var(--text-main);text-decoration:none;}
.gs-panel .gs-item.sel{background:var(--bg-second);color:var(--text-accent);}
.gs-panel .gs-item .gs-icon{color:var(--text-sub);font-size:14px;flex-shrink:0;}
.gs-panel .gs-item .gs-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gs-panel .gs-item .gs-path{color:var(--text-sub);font-size:12px;flex-shrink:0;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;}
.gs-panel .gs-empty{padding:22px 12px;text-align:center;color:var(--text-sub);}
.gs-panel .gs-tip{padding:7px 12px;border-top:1px solid var(--border-color);color:var(--text-sub);font-size:12px;display:flex;justify-content:flex-end;gap:14px;}

/* ========== 全局搜索：窄屏「放大镜图标 + 展开覆盖层」（方案 B，2026-10-14） ==========
   背景：窄屏顶栏一行要塞「汉堡+搜索框+铃铛+全屏+主题+头像」，而 Bootstrap .navbar 默认
   flex-wrap:wrap、#topbar 高度又锁死 56px → 空间不足时子项换行、溢出到栏外。
   主流做法（Material App Bar / iOS HIG）是移动端不常驻搜索框，收成图标、点击展开。
   做法：<992px 隐藏 .gs-wrap、显示 #gsToggleBtn；点图标给 .gs-wrap 加 .gs-open 变顶栏下方覆盖层。
   桌面（≥992px）完全不受影响（媒体查询外维持常驻 210px）。
   无遮罩、不压暗页面：点搜索条以外区域由 global-search.js 收起（2026-10-14 用户定稿）。
   注意：本段与 global-search.js 注入的样式内容一致（JS 为兜底 + 覆盖，改一处需同步另一处）。 */
@media (max-width: 991.98px) {
    .gs-wrap { display: none; }
    .gs-wrap.gs-open {
        display: flex;
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        right: 0;
        margin: 0;
        padding: 8px 12px;
        background: var(--bg-topbar, var(--bg-sidebar));
        border-bottom: 1px solid var(--bg-border);
        box-shadow: var(--topbar-shadow, 0 3px 10px rgba(0, 0, 0, .10));
        z-index: 1030;
    }
    .gs-wrap.gs-open .gs-box { height: 36px; }
    /* 结果面板在覆盖层里占满整宽（原固定 300px 在窄屏偏窄、且贴左） */
    .gs-wrap.gs-open .gs-panel { left: 12px; right: 12px; width: auto; max-width: none; }
}

/* ========== 表格首次渲染防闪（2026-08-21，无过渡无延迟） ========== */
/* layui table 渲染期间表格从"空"到"完整"会闪动；初始隐藏，done 回调（渲染完成）后立即显示完整表格。
   用户明确不要延迟过渡效果，故不加 opacity transition */
#demo { visibility: hidden; }
#demo.dlx-table-ready { visibility: visible; }

/* ========== 顶部 Tab 栏静态样式（防 FOUC，2026-08-21） ========== */
/* 原由 layout-tabs.js 动态注入，此处静态化；38px 与 JS 的 TABBAR_HEIGHT 常量保持同步 */
:root{--tabbar-height:44px;}
#tabbar{position:fixed;top:var(--topbar-height);left:calc(var(--side-width) + var(--card-gap));right:var(--card-gap);height:44px;z-index:999;display:flex;align-items:center;gap:6px;padding:0 8px;background:var(--bg-topbar, var(--bg-sidebar));border:1px solid var(--bg-border);border-top:none;border-bottom:1px solid var(--bg-border);border-radius:0 0 var(--radius-card) var(--radius-card);box-shadow:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;}
#tabbar::-webkit-scrollbar{height:4px;}
#tabbar::-webkit-scrollbar-track{background:transparent;}
#tabbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:2px;}
#tabbar .dlx-tab{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;font-size:13px;line-height:1;color:var(--text-sub);text-decoration:none;border:1px solid transparent;background:rgba(127,127,127,.07);border-radius:var(--radius-base);white-space:nowrap;width:auto;max-width:320px;flex:0 0 auto;box-sizing:border-box;cursor:pointer;}
#tabbar .dlx-tab .dlx-tab-title{flex:1 1 auto;white-space:nowrap;min-width:0;text-align:left;}
#tabbar .dlx-tab:hover{color:var(--text-accent);background:var(--bg-second);}
#tabbar .dlx-tab.active{color:var(--text-on-brand);background:var(--bg-main);border-color:var(--bg-main);}
#tabbar .dlx-tab-close{font-size:14px;line-height:1;opacity:.55;border-radius:50%;cursor:pointer;flex-shrink:0;}
#tabbar .dlx-tab-close:hover{opacity:1;background:rgba(0,0,0,.08);}
#tabbar .dlx-tab-close-all{position:sticky;right:4px;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;height:26px;width:26px;flex:0 0 auto;border:none;background:transparent;color:var(--text-sub);border-radius:var(--radius-base);cursor:pointer;font-size:14px;transition:background .15s,color .15s;}
#tabbar .dlx-tab-close-all:hover{color:var(--text-accent);background:var(--bg-second);}
#main-wrapper{padding-top:calc(var(--topbar-height) + 44px) !important;}
/* 折叠态只对 ≥992px 有意义（<992px 是 offcanvas 抽屉，见本文件顶部 body.sidebar-collapsed #topbar 的说明） */
@media (min-width: 992px){body.sidebar-collapsed #tabbar{left:var(--card-gap) !important;}}
body.tabbar-collapsed #tabbar{display:none !important;}
body.tabbar-collapsed #topbar{border-radius:0 0 var(--radius-card) var(--radius-card) !important;}
body.tabbar-collapsed #main-wrapper{padding-top:var(--topbar-height) !important;}
/* 移动端 + 平板竖屏（<992px）：整体隐藏顶部标签栏（2026-10-14）
   窄屏一行放不下多个标签，且标签栏功能对触屏意义不大，改为完全不显示。
   要点：
   1) display:none 必须带 !important —— renderTabbar() 用行内 style.display='flex' 显示，
      只有媒体查询 + !important 才能盖过行内样式；
   2) #main-wrapper 的 padding-top 降回 --topbar-height（去掉给标签栏占位的 44px），
      否则顶部会留一条空白；
   3) 标签栏隐藏后"最下面那层"变成 #topbar，把阴影和底部圆角补给顶栏，观感才连续。
   必须与 layout-tabs.js 动态注入的同名规则保持一致（JS 注入的样式优先级更高）。 */
@media (max-width: 991.98px){
    #tabbar{display:none !important;}
    #main-wrapper{padding-top:var(--topbar-height) !important;}
    body:not(.tabbar-collapsed) #topbar{
        box-shadow:var(--topbar-shadow, 0 3px 10px rgba(0,0,0,.10)) !important;
        border-radius:0 0 var(--radius-card) var(--radius-card) !important;
    }
}

/* ========== 顶部悬浮阴影（2026-08-29，2026-08-31 改为跟随「阴影大小」设置） ==========
   规则：阴影始终只出现在"最下面那一层"上，避免双层叠加显脏。
     · 标签栏显示 → 阴影给 #tabbar（标签栏下沿）
     · 标签栏收起 → 阴影给 #topbar（顶栏下沿）
   --topbar-shadow 由 ThemeConfig 按「阴影大小/明暗主题」注入（8 时=0 3px 10px，0 时=无阴影），
   不再写死明暗两套；fallback 仅兜底极端情况。
   用 body 前缀提高优先级，压过 layout-tabs.js 动态注入的同名 #tabbar 规则（该规则 box-shadow:none）。 */
body:not(.tabbar-collapsed) #tabbar{box-shadow:var(--topbar-shadow, 0 3px 10px rgba(0,0,0,.10)) !important;}
body.tabbar-collapsed #topbar{box-shadow:var(--topbar-shadow, 0 3px 10px rgba(0,0,0,.10)) !important;}

/* ===================================================================
   悬停微动效（细腻交互反馈；跟随 --primary 变量，改主题色自动同步）
   =================================================================== */

/* 卡片悬停微动效：上浮 + 主题色微光阴影（.dlx-card 已有 transition） */
.dlx-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12);
}

/* ④ 按钮悬停微动效：上浮 + 主题色微光阴影 */
.layui-btn {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.layui-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.25);
}

/* ===================================================================
   首页「功能导航」卡片铺满（2026-10-13，用户明确要求）
   -------------------------------------------------------------------
   诉求：侧边栏收起（桌面折叠 / 小屏汉堡抽屉关闭）后，首页这张「功能导航」卡片
       应像顶部导航栏一样直接贴到屏幕边：上下左右都不留缝、去掉圆角。
   结构（Pages/Index.cshtml 末尾）—— 2026-10-14 更新：
       #main
         └ <div class="dlx-p-base dlx-m-base portal-page">   ← 外层：padding 12 + margin 20
             └ <div class="portal-panel">         ← 透明布局容器（背景卡片已取消）
                 └ <div class="portal-section">   ← 内边距 1.5rem 2.25rem 2rem
                     └ <div class="portal-grid">  ← 各功能入口卡片
   间距来源：外层 margin/padding + portal-section 的 padding。
   （.portal-panel 原本还有 padding .5rem + 圆角 + 描边 + 阴影，已随背景卡片取消而全部移除，
     故下面针对它的覆盖仅作兜底，实际已无视觉效果。）
   下面逐层归零（保留 portal-section 一点左右内边距，否则卡片会直接顶到屏幕边太贴）。
   =================================================================== */

/* ⚠️ 2026-10-14：下面所有选择器都限定了 .portal-page（首页容器上的标记类）。
   原来直接用 #main .dlx-p-base.dlx-m-base，选择器过宽——把同样用这对类的
   概览页（ChartBoard）和示例页（ChartPic）一起清零了，表现为窄屏第一张卡片顶到导航栏、
   左右贴边。现在只作用于首页，其它页面按各自页面的规则走。新增使用这对类做铺满的页面时，
   记得在容器上加 .portal-page，或另写页面级规则。 */

/* 桌面：折叠侧边栏时 */
@media (min-width: 992px) {
    body.sidebar-collapsed #main .portal-page.dlx-p-base.dlx-m-base {
        margin: 0 !important;
        padding: 0 !important;
    }
    body.sidebar-collapsed #main .portal-page.dlx-p-base.dlx-m-base > .portal-panel {
        border-radius: 0 !important;
        padding: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    body.sidebar-collapsed #main .portal-page.dlx-p-base.dlx-m-base .portal-section {
        /* 模块卡片仍留 12px 左右呼吸，避免直接顶到屏幕边 */
        padding-left: var(--spacing-base) !important;
        padding-right: var(--spacing-base) !important;
    }
}

/* 小屏：汉堡抽屉关闭时（小屏没有"折叠"这一动作，常态即铺满） */
@media (max-width: 991.98px) {
    #main .portal-page.dlx-p-base.dlx-m-base {
        margin: 0 !important;
        padding: 0 !important;
    }
    #main .portal-page.dlx-p-base.dlx-m-base > .portal-panel {
        border-radius: 0 !important;
        padding: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    #main .portal-page.dlx-p-base.dlx-m-base .portal-section {
        padding-left: var(--spacing-base) !important;
        padding-right: var(--spacing-base) !important;
    }
}