/* 侧边栏 */
/* Copyright (c) 2023 by 山羊の前端小窝 (https://www.bilibili.com/opus/986233497698959366?from=search&spm_id_from=333.337.0.0) */
#sidebar-shell {
    position: sticky;
    top: 100px;
    width: 90px;
    height: 500px;
    background: #FFFFFA;
    z-index: 9999;
    transition: width 0.5s;
    padding-left: 1px;
    overflow: hidden;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);  
}

#sidebar-shell.expended {
    width: 400px;
}

.sidebar-title {
    display: block;
    top: 0;
    width: 100%;
    height: 78px;
    padding-right: 60px;
    line-height: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: #333;
    background: #FFFFFA;
    /* border-bottom: 3px solid #580658; */
}

/*   ——————————————————————————————————————————————————   */

/* 展开收起按钮 */
/* Copyright (c) 2023 by Zaku (https://codepen.io/Zaku/pen/ejLNJL) */
.sidebar-toggle-input {
    display: none;
}

.sidebar-toggle-label {
    display: block;
    cursor: pointer;
    position: absolute;
    /* width: 40vw;
    height: 40vw; */
    width: 130px;
    height: 130px;
    top: 7px; /* 向下移动3px */
    left: 12px; /* 向右移动3px */
}

/* 仅作用于折叠菜单按钮的 SVG，不要影响页面其他 SVG 图标 */
.sidebar-toggle-menu svg path {
    fill: none;
    stroke: black; /* 修改按钮颜色 */
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    --length: 24;
    --offset: -38;
    stroke-dasharray: var(--length) var(--total-length);
    stroke-dashoffset: var(--offset);
    transition: all .8s cubic-bezier(.645, .045, .355, 1);
}

.sidebar-toggle-menu svg rect {
    fill: #FFFFFA;
    opacity: 0;
    rx: 15px;
    ry: 15px;
}

.sidebar-toggle-label:hover svg rect {
    fill: #c5c2c2; /* 修改鼠标悬停背景底色 */
    opacity: 0.5;
}

.sidebar-toggle-menu .sidebar-toggle-input:checked+svg {
    .line--1,
    .line--3 {
        --length: 8.602325267;
    }
}

.sidebar-toggle-menu {
    position: absolute;
    width: 60px;
    right: 55px;
    top: -34px;
    background-color: #fff;
    .line--1,
    .line--3 {
        --total-length: 126.38166809082031;
    }
    .line--2 {
        --total-length: 80;
    }
    .sidebar-toggle-input:checked+svg {
        .line--1,
        .line--3 {
        --offset: -109.1770175568;
        }
    }
}


/* ———————————————————————————————————————————————    */

/* catalog */
.sidebar-nav-container{
    width: 100%;
    height: 100%;
    overflow-y: auto;   /* 开启垂直滚动 */
    scrollbar-width: none;  /*  隐藏滚动条 */
    scroll-behavior: smooth; /* 平滑滚动效果 */
}

#sidebar-shell ul {
    position: relative;
    height: 100vh;
}

#sidebar-shell ul li {
    position: relative;
    padding: 5px;
}

/* 二级菜单 */
#sidebar-shell ul li ul {
    display: block;
    height: auto;
}

/* 二级菜单项（精确缩进、字号与间距） */
#sidebar-shell ul li ul {
    /* 贴近主项标题，减小首行与子项之间空隙 */
    margin: 6px 0 8px 0;
}

#sidebar-shell ul li ul li {
    /* 缩进与主项文字左边缘对齐 */
    padding-left: 30px;
    margin: 6px 0;                /* 控制二级标题之间的垂直间距 */
    line-height: 1.45;
}

/* 二级链接的文字样式与交互反馈 */
#sidebar-shell ul li ul li a {
    display: block;               /* 去除 flex 对齐的副作用，文本更规整 */
    font-size: 15px;              /* 缩小字号 */
    color: #444;                  /* 次级文字颜色稍淡 */
    padding: 4px 12px;            /* 点击热区更友好 */
    border-radius: 8px;
}

#sidebar-shell ul li ul li a:hover {
    color: #963f96;               /* 与整体主题一致 */
    background: rgba(150, 63, 150, 0.08);
}

/* 非展开状态下，隐藏所有二级菜单 (高度为 0 完全隐藏) */
#sidebar-shell:not(.expended) .sidebar-nav li ul {
    max-height: 0;
    overflow: hidden;
}

/* 展开状态下，默认 ul 高度为 0 */
#sidebar-shell.expended .sidebar-nav li ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* 展开状态下，仅显示当前 active 的 li 内嵌的 ul，
   设置一个足够大的 max-height（也可以根据 ul 的实际高度进行调整） */
#sidebar-shell.expended .sidebar-nav li.active ul {
    max-height: 700px;   /* 根据 ul 的实际高度调整 */
    transition-delay: 0.4s;  /* 与侧边栏展开动画时长匹配 */
}

/* 为 subtheme 链接设置橙色 */
.sidebar-nav-container .sidebar-nav li ul li a.active-sub {
    color: #963f96;
    font-weight: 600;
    background: rgba(150, 63, 150, 0.12);
}

.imageBox {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

.imageBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#sidebar-shell li.active {
    background: #CDAA7D;  /* 阴影颜色 */
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

#sidebar-shell li.active::before {
    content: "";
    position: absolute;
    top: -30px;
    right: 0;
    width: 30px;
    height: 30px;
    border-bottom-right-radius: 25px;
    box-shadow: 5px 5px 0 5px #CDAA7D; /* 阴影颜色 */
    background: transparent;
}

#sidebar-shell li.active::after {
    content: "";
    position: absolute;
    bottom: -30px;
    right: 0;
    width: 30px;
    height: 30px;
    border-top-right-radius: 25px;
    box-shadow: 5px -5px 0 5px #CDAA7D; /* 阴影颜色 */
    background: transparent;
}

#sidebar-shell ul li a {
    position: relative;
    display: flex;
    white-space: nowrap;
}

.sidebar-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 60px;
    padding-left: 10px;
    height: 70px;
    color: #333;
    transition: 0.5s;
    color: rgb(110, 90, 240);
}

.sidebar-text {
    position: relative;
    height: 70px;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #333;
    padding-left: 15px;
    letter-spacing: 1px;
    transition: 0.5s;
}

#sidebar-shell ul li:hover a .sidebar-icon,
#sidebar-shell ul li:hover a .sidebar-text, 
#sidebar-shell ul li ul li:hover a{
    color: #963f96;  /* 悬停颜色 */
}

#sidebar-shell li.active a .sidebar-icon::before {
    content: "";
    position: absolute;
    inset: 5px;
    width: 60px;
    background: #fff;
    border-radius: 50%;
    transition: 0.5s;
    border: 7px solid #580658;  /* 圈 */
    box-sizing: border-box;
    z-index: 0; /* 放在图标(svg)后面，避免遮挡 */
}

/* 确保 svg 在前景，显示在紫色圆环之上 */
.sidebar-icon svg {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
}

#sidebar-bottom-space {
    position: absolute;
    bottom: 0; /* 改为底部对齐 */
    left: 0;
    width: 100%;
    height: 10px; 
    background-color: #FFFFFA;
    z-index: 10000; /* 改为正数，确保在内容之上 */
}