/* 定义左侧导航栏容器的样式 */
#sidebar-nav-container {
    /*max-width: 100%; !* 最大宽度为100% *!*/
    margin: 20px 0; /* 上下外边距为20px，左右自动居中 */
    background-color: #ffffff; /* 整体页面背景 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 盒子阴影 */
    overflow: hidden; /* 超出部分隐藏 */
}

/* 定义左侧导航栏头部的样式 */
#sidebar-nav-header {
    background-color: #0a5cad; /* 主题蓝色 */
    color: white; /* 文字颜色为白色 */
    padding: 20px; /* 内边距为20px */
    /*text-align: center; !* 文字居中 *!*/
    font-size: 18px; /* 字体大小为24px */
    font-weight: 500; /* 字体粗细 */
    /*text-transform: uppercase; !* 文字大写 *!*/
    letter-spacing: 1px; /* 字母间距为1px */
}

/* 定义左侧导航栏菜单的样式 */
#sidebar-nav-menu {
    list-style: none; /* 无序列表样式 */
    padding: 0; /* 无内边距 */
    margin: 0; /* 无外边距 */
}

/* 定义左侧导航栏菜单项的样式 */
.sidebar-item {
    border-bottom: 1px solid #e6e6e6; /* 底部边框为1px实线灰色 */
}

/* 定义最后一个左侧导航栏菜单项的样式 */
.sidebar-item:last-child {
    border-bottom: none; /* 无底部边框 */
}

/* 定义左侧导航栏标题的样式 */
.sidebar-title {
    padding: 18px 20px; /* 内边距 */
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两侧对齐 */
    align-items: center; /* 垂直居中 */
    cursor: pointer; /* 鼠标指针为手型 */
    font-size: 16px; /* 字体大小为16px */
    color: #1e1e1e; /* 主要黑色 */
    background-color: #ffffff; /* 整体页面背景 */
    transition: all 0.4s ease; /* 过渡效果 */
}

/* 定义左侧导航栏标题鼠标悬停时的样式 */
.sidebar-title:hover {
    background-color: #f6f7ff; /* 淡蓝背景色 */
    color: #0a5cad; /* 主题蓝色 */
}

/* 定义左侧导航栏子菜单的样式 */
.sidebar-submenu {
    list-style: none; /* 无序列表样式 */
    padding: 0; /* 无内边距 */
    margin: 0; /* 无外边距 */
    max-height: 0; /* 最大高度为0 */
    overflow: hidden; /* 超出部分隐藏 */
    transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* 过渡效果 */
    background-color: #f6f7ff; /* 淡蓝背景色 */
    opacity: 0; /* 透明度为0 */
    transform: translateX(-20px); /* 水平位移-20px */
}

/* 定义激活状态的左侧导航栏子菜单的样式 */
.sidebar-item.active .sidebar-submenu {
    max-height: 1000px; /* 最大高度为1000px */
    opacity: 1; /* 透明度为1 */
    transform: translateX(0); /* 水平位移为0 */
}

/* 定义左侧导航栏子菜单项的样式 */
.sidebar-submenu-item {
    padding: 12px 20px 12px 40px; /* 内边距 */
    font-size: 14px; /* 字体大小为14px */
    color: #575757; /* 次要黑灰色 */
    cursor: pointer; /* 鼠标指针为手型 */
    transition: all 0.4s ease; /* 过渡效果 */
    position: relative; /* 相对定位 */

}

/* 定义左侧导航栏子菜单项鼠标悬停时的样式 */
.sidebar-submenu-item:hover {
    background-color: #e9ecef; /* 浅灰色背景 */
    color: #0068b7; /* 主要黑色字体 hover */
}

/* 定义左侧导航栏子菜单项前缀的样式 */
.sidebar-submenu-item::before {
    content: ""; /* 内容为空 */
    position: absolute; /* 绝对定位 */
    left: 20px; /* 左侧位置为20px */
    top: 50%; /* 顶部位置为50% */
    width: 6px; /* 宽度为6px */
    height: 6px; /* 高度为6px */
    background-color: #0a5cad; /* 主题蓝色 */
    border-radius: 50%; /* 圆形边框 */
    transform: translateY(-50%); /* 垂直位移-50% */
}

/* 响应式设计，当屏幕宽度小于768px时的样式 */
@media (max-width: 768px) {
    #sidebar-nav-container {
        max-width: 100%; /* 最大宽度为100% */
        margin: 20px auto; /* 上下外边距为0，左右自动居中 */
        width: 100%; /* 宽度设置为100% */
        display: flex; /* 使用flex布局 */
        flex-direction: column; /* 垂直排列 */
        align-items: center; /* 内容居中 */
    }

    #sidebar-nav-header {
        /* 内边距调整为15px */
        font-size: 20px; /* 字体大小调整为20px */
        width: 100%; /* 宽度设置为100% */
        /*text-align: left; !* 文字居中 *!*/
        /*距离右边一定距离*/
        padding: 15px 15px 15px 50px;
    }

    #sidebar-nav-menu {
        width: 100%; /* 宽度设置为100% */
    }

    .sidebar-title {
        font-size: 14px; /* 字体大小为14px */
        padding: 10px 15px; /* 内边距调整为10px 15px */
        width: 100%; /* 宽度设置为100% */
    }

    .sidebar-submenu-item {
        font-size: 14px; /* 字体大小为12px */
        padding: 10px 15px 10px 30px; /* 内边距调整为10px 15px 10px 30px */
        width: 100%; /* 宽度设置为100% */
    }

    .sidebar-submenu-item::before {
        left: 15px; /* 左侧位置调整为15px */
    }
}

/* 响应式设计，当屏幕宽度小于480px时的样式 */
@media (max-width: 480px) {
    #sidebar-nav-container {
        max-width: 100%; /* 最大宽度为100% */
        margin: 0 auto; /* 上下外边距为0，左右自动居中 */
        width: 100%; /* 宽度设置为100% */
        display: flex; /* 使用flex布局 */
        flex-direction: column; /* 垂直排列 */
        align-items: center; /* 内容居中 */
    }

    #sidebar-nav-header {
        font-size: 20px;
        padding: 10px; /* 内边距调整为10px */
        width: 100%; /* 宽度设置为100% */
        text-align: center; /* 文字居中 */
    }

    .sidebar-title {
        font-size: 16px;
        padding: 10px 10px; /* 内边距调整为8px 10px */
        width: 100%; /* 宽度设置为100% */
    }

    .sidebar-submenu-item {
        font-size: 14px; /* 字体大小调整为10px */
        padding: 8px 10px 8px 20px; /* 内边距调整为8px 10px 8px 20px */
        width: 100%; /* 宽度设置为100% */
    }

    .sidebar-submenu-item::before {
        left: 10px; /* 左侧位置调整为10px */
    }
}