/* ============================================================================
aim-sidebar.css — 全站桌面端左侧导航栏
----------------------------------------------------------------------------
作用：把 NavBar1.ascx 渲染出的顶部导航条（.menu-wrap）在桌面端改造成左侧竖栏。
隔离：全部规则包在 @media (min-width: 1025px) 内，平板/手机完全不受影响。
关键：用 body { padding-left } 给文档流整体让位（不是挪绝对定位元素），
因此对「普通滚动页」和「沉浸式全屏页」都适用。
回滚：目标页删掉 即恢复原状。
----------------------------------------------------------------------------
为什么改这里而不是改 NavBar1.ascx：
NavBar1.ascx 被 48 个页面共用，直接改会让登录页、支付回调页、后台管理页
一并变形。用「独立 CSS + 逐页引用」的方式，覆盖面可控、可回滚。
============================================================================ */
@media (min-width: 1025px) {
/* ------------------------------------------------------------------
1) 变量：想整页调色只改这里
------------------------------------------------------------------ */
:root {
--aim-side-w: 220px; /* 侧栏宽度 */
--aim-side-bg: rgba(11, 32, 58, .88); /* 侧栏底色（深蓝） */
--aim-side-border: rgba(124, 196, 255, .16);
--aim-side-shadow: 2px 0 28px rgba(8, 24, 48, .35);
--aim-side-text: rgba(255, 255, 255, .82);
--aim-side-text-dim: rgba(255, 255, 255, .55);
--aim-side-hover: rgba(124, 196, 255, .12);
--aim-side-active-from: rgba(31, 99, 146, .90);
--aim-side-active-to: rgba(44, 124, 182, .75);
}
/* ------------------------------------------------------------------
2) 文档流让位
—— 这是整套方案的核心。顶部栏原先是 fixed 且高度不定，
内容靠各页自己的 padding-top 让位；改成侧栏后必须把这份
padding 撤掉，改用 body 的 padding-left 腾出侧栏宽度。
------------------------------------------------------------------ */
html body {
padding-left: var(--aim-side-w) !important;
padding-top: 0 !important; /* 页面级顶部让位由本文件接管 */
box-sizing: border-box !important;
}
/* 页面若把容器设了 max-width + margin:auto，视口变窄后需重算居中
—— 交给各页自己处理，这里只保证不溢出 */
html body > * {
max-width: 100%;
}
/* ★ 关键：多数页面把 NavBar1 包在一个居中用的 div 里：
这个包裹层本身不参与视觉，但它是 flex 容器，会形成新的包含块、
并让子元素脱离预期定位。侧栏改为 fixed 后必须让包裹层「透明化」，
否则侧栏可能被居中偏移或被裁切。 */
body form > div:has(> .menu-wrap),
body form > div:has(> #menu-wrap) {
display: contents !important;
}
/* 兜底：不支持 :has() 的旧内核，用属性选择器命中那个内联样式的包裹层。
注意 display:contents 会让包裹层自身盒子消失，子元素直接归入 form。 */
body form > div[style*="justify-content:center"]:has(.menu-wrap) {
display: contents !important;
}
/* 侧栏本身已 fixed，不再受文档流影响；这里再兜一道保险 */
body .menu-wrap {
position: fixed !important;
}
/* 顶部栏让位用的占位元素（常见写法是连续
）在侧栏模式下应撤掉，
否则页面顶部会多出一段无意义空白。用相邻兄弟 + 属性都没法精准命中，
因此改为「把 form 内首个子元素之后的 br 组」交给各页处理；
这里只提供一个可选 class 供页面显式标记。 */
body .nav-top-spacer {
display: none !important;
}
/* ------------------------------------------------------------------
3) 侧栏本体
------------------------------------------------------------------ */
body .menu-wrap,
body .menu-wrap-layer2,
body #menu-wrap {
width: var(--aim-side-w) !important;
min-width: var(--aim-side-w) !important;
max-width: var(--aim-side-w) !important;
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
padding: 18px 0 12px !important;
margin: 0 !important;
text-align: left !important;
position: fixed !important;
box-sizing: border-box !important;
background: var(--aim-side-bg) !important;
backdrop-filter: blur(16px) saturate(1.3) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
border-bottom: none !important;
border-right: 1px solid var(--aim-side-border) !important;
box-shadow: var(--aim-side-shadow) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
z-index: 1000 !important;
}
/* 滚动容器：原先是横向滚动条带，改成纵向伸展 */
body .menu-wrap .aim-nav-scroll,
body .menu-wrap .js-menu-list,
body .menu-wrap .menu-list {
width: 100% !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding: 0 !important;
cursor: default !important;
white-space: normal !important;
}
/* 列表：横向 flex → 纵向 flex */
body .menu-wrap .aim-nav-list {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 4px !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 10px !important;
list-style: none !important;
}
body .menu-wrap .aim-nav-item {
display: block !important;
width: 100% !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
/* 链接：胶囊按钮 → 左侧图标 + 文字的行项 */
body .menu-wrap .aim-nav-link,
body .menu-wrap .aim-nav-link-help {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 11px 14px !important;
margin: 0 !important;
border-radius: 10px !important;
border: none !important;
background: transparent !important;
color: var(--aim-side-text) !important;
font-size: .95rem !important;
font-weight: 500 !important;
letter-spacing: .2px !important;
text-align: left !important;
text-decoration: none !important;
white-space: nowrap !important;
line-height: 1.4 !important;
transition: background .18s ease, color .18s ease !important;
}
body .menu-wrap .aim-nav-link .aim-nav-icon,
body .menu-wrap .aim-nav-link-help .aim-nav-icon {
flex: 0 0 22px !important;
width: 22px !important;
min-width: 22px !important;
max-width: 22px !important;
text-align: center !important;
color: var(--aim-side-text-dim) !important;
font-size: 1.05rem !important;
transition: color .18s ease !important;
/* 有些导航项在图标里叠了第二个小角标（如「智能体协作」= fa-robot + fa-users），
必须允许容器溢出，否则叠加图标会撑破 22px 宽度、压到右侧文字上。 */
overflow: visible !important;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* 图标内的角标（第二个 ）在小尺寸下保持不挤压文字 */
body .menu-wrap .aim-nav-link .aim-nav-icon i {
flex: 0 0 auto !important;
}
body .menu-wrap .aim-nav-link .aim-nav-text,
body .menu-wrap .aim-nav-link-help .aim-nav-text {
flex: 1 1 auto !important;
min-width: 0 !important;
font-size: .92rem !important;
font-weight: 500 !important;
color: inherit !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 悬停 */
body .menu-wrap .aim-nav-link:hover,
body .menu-wrap .aim-nav-link-help:hover {
background: var(--aim-side-hover) !important;
color: #fff !important;
}
body .menu-wrap .aim-nav-link:hover .aim-nav-icon,
body .menu-wrap .aim-nav-link-help:hover .aim-nav-icon {
color: #cfe4ff !important;
}
/* 当前页高亮 */
body .menu-wrap .aim-nav-item.active .aim-nav-link,
body .menu-wrap .aim-nav-item.active .aim-nav-link-help {
background: linear-gradient(100deg,
var(--aim-side-active-from), var(--aim-side-active-to)) !important;
color: #fff !important;
font-weight: 600 !important;
box-shadow: 0 2px 12px rgba(31, 99, 146, .45) !important;
}
body .menu-wrap .aim-nav-item.active .aim-nav-icon,
body .menu-wrap .aim-nav-item.active .aim-nav-link-help .aim-nav-icon {
color: #fff !important;
}
/* 深色主题页（NavBar1 会给 .menu-wrap 加 aim-dark）
—— 底色已经是深蓝了，这里只需确保文字对比度 */
body .menu-wrap.aim-dark .aim-nav-link {
color: var(--aim-side-text) !important;
}
body .menu-wrap.aim-dark .aim-nav-icon {
color: var(--aim-side-text-dim) !important;
}
/* ------------------------------------------------------------------
4) 页面内既有「顶部固定条」类元素让位
—— 有些页面除了 NavBar1，还自带固定在顶部的操作条/工具条。
这类元素若带 left:0 会被侧栏压住，统一右移。
------------------------------------------------------------------ */
body .top-bar,
body .navbar-fixed-top,
body .fixed-top {
left: var(--aim-side-w) !important;
right: 0 !important;
}
/* 页面若自带回到顶部按钮等角落浮层，避开侧栏 */
body .back-to-top,
body #backToTop,
body .corner-nav {
left: auto !important;
right: 18px !important;
z-index: 900 !important;
}
/* ------------------------------------------------------------------
5) 滚动条美化（仅桌面端）
------------------------------------------------------------------ */
body .menu-wrap::-webkit-scrollbar {
width: 6px;
}
body .menu-wrap::-webkit-scrollbar-track {
background: transparent;
}
body .menu-wrap::-webkit-scrollbar-thumb {
background: rgba(124, 196, 255, .22);
border-radius: 3px;
}
body .menu-wrap::-webkit-scrollbar-thumb:hover {
background: rgba(124, 196, 255, .38);
}
}