/* 侧边栏基础样式 */
.sidebar {
    width: 250px;          /* 展开宽度 */
    height: 100vh;         /* 全屏高度 */
    background-color: #fff;/* 修复底色为白色 */
    border-right: 1px solid #eee;
    transition: width 0.3s ease; /* 收缩动画 */
    overflow-y: auto;      /* 允许垂直滚动 */
    flex-shrink: 0;
    z-index: 999;          /* 确保导航条在侧边栏之上 */
    position: fixed;        /* 固定定位，不随页面滚动 */
    top: 0;                /* 顶到页面的头 */
    left: 0;
}

/* 收缩状态（必须匹配JS中的collapsed类名） */
.sidebar.collapsed {
    width: 60px;           /* 收缩宽度 */
}

/* 收缩按钮样式 - 移动到功能区外侧 */
.sidebar-toggle {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: #1677ff;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: -36px;
    transform: translateY(-50%);
    z-index: 1000;         /* 按钮置顶 */
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.sidebar-toggle:hover {
    background-color: #096dd9;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.15);
}

/* 侧边栏头部样式 */
.sidebar-header {
    padding: 0;
    text-align: center;
    border-bottom: 1px solid #eee;
    position: relative;
    margin: 0;
}
.sidebar-header > div {
    margin: 0;
    padding: 10px 0;
}
.sidebar-header h1 {
    font-size: 18px;
    margin: 0;
    color: #1677ff;
    font-weight: bold;
}

/* 菜单样式（适配收缩/展开） */
.menu {
    list-style: none;
    padding: 0 0 40px 0;
    margin: 0;
}
.menu-item {
    padding: 12px 15px;
    cursor: pointer;
    white-space: nowrap;   /* 收缩时文字不换行 */
    display: flex;         /* 使用flex布局 */
    align-items: center;   /* 垂直居中 */
    gap: 10px;             /* 元素间距 */
    position: relative;
    font-family: "Microsoft Yahei", "PingFang SC", "Hiragino Sans GB", "Heiti TC", sans-serif;
    font-style: normal;    /* 确保没有倾斜效果 */
    font-weight: 400;      /* 确保字体粗细正常 */
}

.menu-item .menu-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    object-fit: contain;
}
.menu-item span {
    flex: 1;
    text-align: center;
}
.menu-item .submenu-icon {
    font-size: 12px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    width: 12px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-item.click-active {
    background-color: #1677ff;
    color: white;
    font-weight: bold;
}

/* 分割线样式 */
.menu-divider {
    height: 1px;
    background-color: #e8e8e8;
    margin: 10px 0;
    width: 80%;
    margin-left: 10%;
}

/* 子菜单样式 */
.submenu {
    list-style: none;
    padding-left: 35px;
    display: none;         /* 默认隐藏 */
}
.submenu.active {
    display: block;        /* 展开显示 */
}

/* 收缩状态下隐藏文字（可选优化） */
.sidebar.collapsed .menu-item {
    text-align: center;
    padding: 12px 0;
    justify-content: center;
}
.sidebar.collapsed .menu-item span:not(.submenu-icon) {
    display: none;         /* 收缩时隐藏文字，仅留图标 */
}
.sidebar.collapsed .menu-item .submenu-icon {
    display: none;
}

/* 展开/折叠状态下的子菜单图标旋转 */
.menu-item.has-submenu .submenu-icon {
    transition: transform 0.3s ease;
}
.menu-item.has-submenu.expanded .submenu-icon {
    transform: rotate(90deg);
}