/* 布局容器样式 */
.layoutContainer {
	@apply min-h-screen flex flex-col;
}

/* 侧边栏样式 */
.sider {
	@apply h-screen  shadow-lg z-10 transition-all duration-300 ease-in-out;
}

/* Logo容器样式 */
.logoContainer {
	@apply flex items-center px-[2rem] h-[var(--n-sider-login-height)] border-b  relative;
	border-color: var(--n-border-color);
}

/* Logo容器激活样式 */
.logoContainer span {
	@apply text-nowrap overflow-hidden overflow-ellipsis w-[10rem];
}

/* Logo容器文本样式 */
.logoContainerText {
	@apply flex items-center w-[20rem];
}

/* Logo容器激活样式 */
.logoContainerActive {
	@apply flex items-center justify-center px-[0];
}

/* 折叠图标激活样式 */
.collapsedIconActive {
	@apply !relative left-0 px-[1rem];
}

/* 折叠按钮样式 */
.collapsedIcon {
	@apply w-[4.2rem] h-[3.6rem] hover:bg-gray-200 hover:text-gray-500  absolute right-[1rem] rounded-[.4rem] flex items-center justify-center cursor-pointer  transition-all duration-300;
}

/* 头部样式 */
.header {
	@apply h-[var(--n-header-height)] bg-[var(--n-header-color)] border-b  shadow-sm z-10 transition-all duration-300 ease-in-out flex items-center justify-end px-6;
	border-color: var(--n-border-color);
}

/* 系统信息样式 */
.systemInfo {
	@apply flex items-center space-x-4 text-[1.2rem] text-gray-600 ;
}

/* 内容区域样式 */
.content {
	@apply flex-1 transition-all duration-300 ease-in-out p-[var(--n-content-padding)] h-[calc(100vh-var(--n-main-diff-height))] bg-[var(--n-layout-content-background-color)] overflow-y-auto;
	transition: padding 0s;
}

/* 折叠按钮样式 */
.collapseButton {
	@apply absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2  rounded-full p-2 shadow-lg cursor-pointer hover:bg-gray-100  transition-all duration-300;
}

/* 子路由导航样式 */
.subRouteNav {
	@apply mb-4 p-4 bg-white  rounded-lg shadow-sm;
}

/* 子路由标题样式 */
.subRouteTitle {
	@apply text-lg font-medium mb-2 text-gray-700 ;
}

/* 子路由面包屑样式 */
.breadcrumb {
	@apply bg-white  p-3 rounded-lg shadow-sm mb-4;
}
