/* ========== 修复侧边栏展开菜单时布局上下抖动 ========== */

/* 1. 侧边栏固定全屏高度，不随内容撑高 */
.ant-layout-sider {
  height: 100vh !important;
  overflow: hidden !important;
  position: sticky !important;
  top: 0 !important;
}

/* 2. 侧边栏内部 flex 列布局：logo 固定 + 菜单可滚动 */
.ant-layout-sider .ant-layout-sider-children {
  height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 3. Logo 区域固定在顶部，不允许压缩 */
.sider-logo {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* 4. 菜单区域自动填充剩余空间，内部滚动 */
.ant-layout-sider .ant-menu-root.ant-menu-inline,
.ant-layout-sider .ant-menu-root.ant-menu-dark {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important; /* flex 子元素允许收缩 */
}

/* 5. 取消子菜单展开/收起的 height 过渡动画 —— 瞬间完成，无抖动 */
.ant-menu-inline .ant-menu-sub {
  transition: none !important;
  overflow: visible !important;
}

/* 6. 右侧内容区也固定高度，确保不随侧边栏变化 */
/*    同时覆盖 React 动态设置的内联 margin-left，消除右侧空白区 */
.ant-layout-has-sider > .ant-layout {
  height: 100vh !important;
  overflow: hidden !important;
  margin-left: 0 !important;
  transition: none !important;
}

/* 6b. 覆盖 ant-layout-sider 被 JS 动态设置 width 导致整个 layout 不对齐 */
.ant-layout-sider {
  flex: 0 0 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
  width: 220px !important;
}

/* 7. 内容区内部可滚动 */
.ant-layout-content {
  overflow-y: auto !important;
  height: 0 !important;  /* flex 下配合 flex:1 使用 */
}

/* ========== 右侧内容区全宽铺满，消除灰色边距 ========== */

/* 8. 主布局背景改为白色，避免右侧出现灰色边框 */
.ant-layout {
  background: #ffffff !important;
}

/* 9. 内容区去掉默认 padding/margin，让内容直接铺满右侧 */
.ant-layout-content {
  padding: 0 !important;
  margin: 0 !important;
  background: #ffffff !important;
}

/* 10. 内容区内的卡片/页面容器也顶边，不再额外留边距 */
.ant-layout-content > .ant-card,
.ant-layout-content > div > .ant-card,
.ant-layout-content .page-container,
.ant-layout-content .ant-pro-page-container {
  margin: 0 !important;
  border-radius: 0 !important;
}

/* 11. 页面顶部搜索/操作栏顶边 */
.ant-layout-content .ant-card:first-child,
.ant-layout-content > div:first-child > .ant-card:first-child {
  border-top: none !important;
  border-radius: 0 !important;
}

/* 12. 保留内容区内部元素的合理间距，但去掉外层的灰色边距 */
.ant-layout-content .ant-card-body {
  padding: 12px 16px !important;
}

/* 13. 页面滚动容器内部包装 div 的 padding/背景，避免内容区出现灰色边距 */
.page-scroll-container > div {
  padding: 0 !important;
  background: #ffffff !important;
}

/* 14. 页面滚动容器本身也顶边 */
.page-scroll-container {
  padding: 0 !important;
  margin: 0 !important;
}