/* 侧边栏修复CSS - 强制解决收缩问题 */

/* 重置侧边栏基础样式 */
.sidebar {
    width: 240px !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    /*background: #fff !important;*/
    border-right: 1px solid #eeeeee90 !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: 70px !important;
    z-index: 1000 !important;
    transition: width 0.3s ease !important;
    background-image: linear-gradient(180deg, #ffb884, #f8f8f8 30vh);
}

/* 强制收缩状态 */
.sidebar.collapsed {
    width: 70px !important;
    max-width: 70px !important;
    min-width: 70px !important;
}

/* 主内容区基础样式 */
main {
    margin-left: 240px !important;
    transition: margin-left 0.3s ease !important;
    background-image: linear-gradient(180deg, #ffb884, #f8f8f8 30vh);
}

/* 滚动条美化  */
div.hide-scroll {
  overflow-y: scroll; /* 强制保留滚动区域 */
  scrollbar-width: none;  /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;  /* IE/Edge 隐藏滚动条 */
}

/* Chrome/Safari/Opera 等 WebKit 浏览器 */
div.hide-scroll::-webkit-scrollbar {
  display: none; /* 完全隐藏滚动条 */
}

/* 主内容区收缩状态 */
main.sidebar-collapsed {
    margin-left: 70px !important;
}

/* 收缩状态下的导航样式 */
.sidebar.collapsed .sidebar-nav ul li a span,
.sidebar.collapsed .sidebar-footer .copyright,
.sidebar.collapsed .social-links {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

.sidebar.collapsed .sidebar-nav ul li a {
    justify-content: center !important;
    padding: 0.8rem 0 !important;
}

.sidebar.collapsed .sidebar-nav ul li a i {
    margin: 0 !important;
    font-size: 1.2rem !important;
}

.sidebar.collapsed .sidebar-nav ul {
    padding: 0 0.5rem !important;
}

.sidebar.collapsed .sidebar-footer {
    padding: 1rem 0.5rem !important;
}

/* 移动端样式覆盖 */
@media (max-width: 900px) {
    .sidebar {
        left: -240px !important;
        width: 240px !important;
    }
    
    .sidebar.active {
        left: 0 !important;
    }
    
    .sidebar.collapsed {
        left: -240px !important;
        width: 240px !important;
    }
    
    main {
        margin-left: 0 !important;
    }
    
    main.sidebar-collapsed {
        margin-left: 0 !important;
    }
}