/* Layout wrapper: sidebar inside content */
.content-with-sidebar {
    display: flex; 
    align-items: stretch; 
    margin-top: -40px;
    margin-bottom: -20px;
    padding-top: 80px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    background-image: url('https://static.igem.wiki/teams/5607/engineering/bg1.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center -40px;
    background-attachment: fixed;
    position: relative;
}

.content-with-sidebar > div:first-child {
    flex: 0 0 25vw;
    max-width: 25vw;
    width: 25vw;
}

.sidebar { 
    position: sticky; 
    top: 80px; 
    height: calc(100vh - 80px);
    margin-top: 0px;
    flex: 0 0 20vw;
    max-width: 20vw;
    padding: 0 1vw 0 1vw; 
    background: #000000; 
    border-right: 2px solid #2A2A2A; 
    border-radius: 20px; 
    overflow-x: hidden; 
    overflow-y: auto; 
}

/* 自定义滚动条样式 - 隐藏横向滚动条 */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Firefox滚动条样式 */
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* 为进度条区域创建特殊的overflow处理 */
.sidebar > .sidebar-progress {
    overflow: visible;
    position: relative;
    margin-left: -60px;
    margin-right: -60px;
    padding-left: 60px;
    padding-right: 60px;
}

.content-with-sidebar > :not(.sidebar) {
    flex: 1 1 0;
    max-width: 100%;
    padding: 1.5rem; /* 确保文字左右间距相同 */
    margin: 0; /* 移除单独的外边距，使用父容器的内边距 */
}

/* 文字部分专用class */
.content-text-area {
    background-color: white; /* 文字部分背景颜色改为白色 */
    border-radius: 20px; /* 添加圆角边框 */
    padding: 1.5rem; /* 确保文字左右间距相同 */
}

.sidebar-progress { 
    position: sticky; 
    top: 0; 
    height: 10px; 
    background: #000000; 
    border-radius: 20px 20px 0 0; 
    overflow: visible;
    margin-bottom: 12px; 
    z-index: 10;
}

.sidebar-progress__bar { 
    height: 100%; 
    width: 0%; 
    background: linear-gradient(90deg, #29487C 0%, #63B36C 100%); 
    border-radius: 20px 20px 0 0; 
    transition: width 0.15s ease-out; 
}

.sidebar-progress__cat {
    position: absolute;
    top: 10px;
    transform: translate(-50%, -30%);
    height: 100px;
    width: auto;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
    z-index: 15;
    left: 0;
    transition: left 0.3s ease;
}

.sidebar-header { 
    margin-bottom: 8px; 
}


.sidebar-list { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    margin-top: 60px; /* 为进度条和猫猫留出空间 */
}

/* Ensure consistent spacing for main items */
.sidebar-item {
    margin-bottom: 0;
}

.sidebar-item.has-subs {
    margin-bottom: 0;
}

/* When submenu is closed, hide vine container */
.sidebar-item:not(.is-open) .sidebar-vine-container {
    display: none;
}

/* When submenu is open, show vine container */
.sidebar-item.is-open .sidebar-vine-container {
    display: block;
}

/* All submenu display is controlled by JavaScript */

.sidebar-link { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 8px 6px; 
    color: #EDEDED; 
    text-decoration: none; 
    border-radius: 10px; 
    transition: background 0.2s ease; 
}

.sidebar-link:hover { 
    background: rgba(255,255,255,0.06); 
    color: #ffffff; 
}

.sidebar-link.is-active { 
    background: rgba(242,197,50,0.12); 
    color: #F2C532; 
}

.sidebar-icon { 
    width: 18px; 
    height: 18px; 
    object-fit: contain; 
}

.sidebar-text { 
    font-weight: 600; 
    font-size: 0.95rem; 
}

/* Vine container for sub-items */
.sidebar-vine-container {
    position: relative;
    margin: 0.5vh 0 1vh 2vw;
    padding: 0;
}

/* Consistent scaling for all sub-item counts - only scale paw, not text */
.sidebar-vine-container.two,
.sidebar-vine-container.four,
.sidebar-vine-container.auto {
    transform: scale(1.0);
    transform-origin: left top;
}

/* Vine image styling - responsive based on sidebar width */
.sidebar-vine {
    position: absolute;
    left: 0;
    top: 0;
    width: 16%;  /* 基于sidebar宽度的16% */
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.sidebar-sub-list { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 1.5vh; 
    position: relative;
    z-index: 2;
}

.sidebar-sub-item {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 2vh;
}

/* Paw container positioning */
.sidebar-paw-container {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Paw image styling - scales with sub-item count */
/* Paw image styling - base styles only */
.sidebar-paw {
    object-fit: contain;
    filter: brightness(0.8);
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Default paw styling - will be overridden by container-specific styles */
.sidebar-sub-item .sidebar-paw {
    min-width: 12px;  /* 最小尺寸保护 */
    min-height: 12px;
}

/* Default paw positioning - will be overridden by container-specific styles */
.sidebar-sub-item .sidebar-paw-container {
    left: 0;
}

.sidebar-sub-link { 
    display: flex;
    align-items: center;
    padding: 0.3vh 0.4vw; 
    border-radius: 0.4vw; 
    color: #BFBFBF; 
    text-decoration: none; 
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; 
    margin-left: 1.5vw;
    position: relative;
    z-index: 2;
}

/* Default text spacing - will be overridden by container-specific styles */
.sidebar-sub-item .sidebar-sub-link {
    margin-left: 1.5vw;
}

.sidebar-sub-text {
    font-size: 0.85rem;
    font-weight: 500;
    transition: transform 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.sidebar-sub-link:hover { 
    background: rgba(255,255,255,0.06); 
    color: #FFFFFF; 
}

.sidebar-sub-link.is-active { 
    color: #F2C532; 
    background: rgba(242,197,50,0.12); 
}

/* Click interaction - enlarge paw and text with 7FFFA8 color */
/* .sidebar-sub-item.is-clicked .sidebar-paw {
    color: #7FFFA8;
} */

.sidebar-sub-item.is-clicked .sidebar-sub-text {
    color: #7FFFA8;
}

.sidebar-sub-item.is-clicked .sidebar-sub-link {
    color: #7FFFA8;
}

/* Container-2: 所有子项向上移动 */
.container-2 .sidebar-sub-item:nth-child(1){
    transform: translateY(-15%); /* 向上移动5% */
}

.container-2 .sidebar-sub-item:nth-child(2){
    transform: translateY(-50%); /* 向上移动5% */
}

.container-2 .sidebar-sub-item:nth-child(1) .sidebar-paw {
    width: 15%;  /* 基于sidebar宽度的15% */
    height: 15%;
    min-width: 20px;
    min-height: 20px;
}

.container-2 .sidebar-sub-item:nth-child(2) .sidebar-paw {
    width: 25%;  /* 基于sidebar宽度的25% */
    height: 25%;
    min-width: 28px;
    min-height: 28px;
}

.container-2 .sidebar-sub-item:nth-child(1) .sidebar-paw-container {
    left: 10%; /* Right side of vine */
}

.container-2 .sidebar-sub-item:nth-child(2) .sidebar-paw-container {
    left: -2%; /* Left side of vine */
}

.container-2 .sidebar-sub-item:nth-child(1) .sidebar-sub-link {
    margin-left: 18%; /* Standard spacing */
}

.container-2 .sidebar-sub-item:nth-child(2) .sidebar-sub-link {
    margin-left: 13%; /* Closer to vine */
}

/* Container-4: 所有子项向上移动 */
.container-4 .sidebar-sub-item{
    transform: translateY(25%); /* 向上移动5% */
}

/* Container 2 - 4 sub-items example */
.container-4 .sidebar-sub-item:nth-child(1) .sidebar-paw {
    width: 12%;  /* 基于sidebar宽度的12% */
    height: 12%;
    min-width: 20px;
    min-height: 20px;
}

.container-4 .sidebar-sub-item:nth-child(2) .sidebar-paw {
    width: 16%;  /* 基于sidebar宽度的18% */
    height: 16%;
    min-width: 24px;
    min-height: 24px;
}

.container-4 .sidebar-sub-item:nth-child(3) .sidebar-paw {
    width: 20%; /* 基于sidebar宽度的20% */
    height: 20%;
    min-width: 28px;
    min-height: 28px;
}

.container-4 .sidebar-sub-item:nth-child(4) .sidebar-paw {
    width: 24%; /* 基于sidebar宽度的24% */
    height: 24%;
    min-width: 32px;
    min-height: 32px;
}

.container-4 .sidebar-sub-item:nth-child(1) .sidebar-paw-container {
    left: 2%; /* Right side of vine, closer */
}

.container-4 .sidebar-sub-item:nth-child(2) .sidebar-paw-container {
    left: 8%; /* Left side of vine, further */
}

.container-4 .sidebar-sub-item:nth-child(3) .sidebar-paw-container {
    left: -2%; /* Right side of vine, further */
}

.container-4 .sidebar-sub-item:nth-child(4) .sidebar-paw-container {
    left: 10%; /* Left side of vine, closer */
}

.container-4 .sidebar-sub-item:nth-child(1) .sidebar-sub-link {
    margin-left: 13%; /* Slightly closer */
}

.container-4 .sidebar-sub-item:nth-child(2) .sidebar-sub-link {
    margin-left: 15%; /* Very close to vine */
}

.container-4 .sidebar-sub-item:nth-child(3) .sidebar-sub-link {
    margin-left: 16%; /* Further from vine */
}

.container-4 .sidebar-sub-item:nth-child(4) .sidebar-sub-link {
    margin-left: 19%; /* Medium spacing */
}





/* ------------------------------------------------------------ */
/* 新增：容纳 1 个与 3 个小标题时的样式，保持与 2/4 相同的设计语言 */

/* Container-1: 单个小标题，放大爪印，适中偏移与间距 */
.container-1 .sidebar-sub-item {
    transform: translateY(-10%);
}

.container-1 .sidebar-sub-item:nth-child(1) .sidebar-paw {
    width: 22%;
    height: 22%;
    min-width: 26px;
    min-height: 26px;
}

.container-1 .sidebar-sub-item:nth-child(1) .sidebar-paw-container {
    left: 6%;
}

.container-1 .sidebar-sub-item:nth-child(1) .sidebar-sub-link {
    margin-left: 16%;
}

.container-3 .sidebar-sub-item:nth-child(1){
    transform: translateY(-3%); /* 向上移动5% */
}

.container-3 .sidebar-sub-item:nth-child(2){
    transform: translateY(-40%); /* 向上移动5% */
}

.container-3 .sidebar-sub-item:nth-child(3){
    transform: translateY(-70%); /* 向上移动5% */
}

/* Container-3: 三个小标题，尺寸逐步增大，左右交错靠近藤蔓 */
.container-3 .sidebar-sub-item {
    transform: translateY(15%);
}

.container-3 .sidebar-sub-item:nth-child(1) .sidebar-paw {
    width: 12%;
    height: 12%;
    min-width: 20px;
    min-height: 20px;
}

.container-3 .sidebar-sub-item:nth-child(2) .sidebar-paw {
    width: 18%;
    height: 18%;
    min-width: 24px;
    min-height: 24px;
}

.container-3 .sidebar-sub-item:nth-child(3) .sidebar-paw {
    width: 22%;
    height: 22%;
    min-width: 28px;
    min-height: 28px;
}

.container-3 .sidebar-sub-item:nth-child(1) .sidebar-paw-container {
    left: 2%;
}

.container-3 .sidebar-sub-item:nth-child(2) .sidebar-paw-container {
    left: 10%;
}

.container-3 .sidebar-sub-item:nth-child(3) .sidebar-paw-container {
    left: -2%;
}

.container-3 .sidebar-sub-item:nth-child(1) .sidebar-sub-link {
    margin-left: 13%;
}

.container-3 .sidebar-sub-item:nth-child(2) .sidebar-sub-link {
    margin-left: 18%;
}

.container-3 .sidebar-sub-item:nth-child(3) .sidebar-sub-link {
    margin-left: 17%;
}