/* assets/css/components/navigation.css */

/* --- 5. 左侧面板: Logo 与导航 --- */
.logo-container { 
    margin-bottom: 20px; 
    text-align: center; 
    flex-shrink: 0; 
}
.main-nav { 
    flex-grow: 1; 
    min-height: 0; 
    overflow-y: auto; 
    padding-right: 5px; 
}
.logo { 
    font-family: var(--font-secondary); 
    font-size: 2rem; 
    font-weight: 900; 
    color: var(--text-color); 
    position: relative; 
    text-shadow: 0 0 10px var(--primary-glow); 
    animation: text-glitch 5s infinite; 
}
@keyframes text-glitch { 
    2%, 64% { transform: translate(2px, 0) skew(0deg); } 
    4%, 60% { transform: translate(-2px, 0) skew(0deg); } 
    62% { transform: translate(0, 0) skew(5deg); } 
}
.logo::before, .logo::after { 
    content: attr(data-text); 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; 
    height: 100%; 
}
.logo::before { 
    left: 2px; 
    text-shadow: -2px 0 var(--secondary-glow); 
    clip: rect(44px, 450px, 56px, 0); 
    animation: glitch-anim-1 5s infinite linear alternate-reverse; 
}
.logo::after { 
    left: -2px; 
    text-shadow: -2px 0 var(--primary-glow), 2px 2px var(--secondary-glow); 
    clip: rect(85px, 450px, 90px, 0); 
    animation: glitch-anim-2 4s infinite linear alternate-reverse; 
}
@keyframes glitch-anim-1{0%{clip:rect(23px,9999px,82px,0)}10%{clip:rect(83px,9999px,35px,0)}20%{clip:rect(19px,9999px,9px,0)}30%{clip:rect(39px,9999px,73px,0)}40%{clip:rect(37px,9999px,29px,0)}50%{clip:rect(4px,9999px,1px,0)}60%{clip:rect(80px,9999px,10px,0)}70%{clip:rect(8px,9999px,67px,0)}80%{clip:rect(46px,9999px,89px,0)}90%{clip:rect(54px,9999px,59px,0)}100%{clip:rect(47px,9999px,69px,0)}}
@keyframes glitch-anim-2{0%{clip:rect(64px,9999px,7px,0)}10%{clip:rect(4px,9999px,72px,0)}20%{clip:rect(79px,9999px,32px,0)}30%{clip:rect(7px,9999px,52px,0)}40%{clip:rect(87px,9999px,3px,0)}50%{clip:rect(3px,9999px,42px,0)}60%{clip:rect(14px,9999px,78px,0)}70%{clip:rect(75px,9999px,48px,0)}80%{clip:rect(54px,9999px,62px,0)}90%{clip:rect(3px,9999px,4px,0)}100%{clip:rect(1px,9999px,65px,0)}}
.main-nav .nav-item { 
    display: flex; 
    align-items: center; 
    padding: 12px; 
    margin-bottom: 10px; 
    text-decoration: none; 
    color: var(--text-dim); 
    border-left: 3px solid transparent; 
    transition: all 0.3s ease; 
    cursor: pointer; 
}
.main-nav .nav-item:hover { 
    background: rgba(0, 242, 254, 0.1); 
    color: var(--text-color); 
    border-left-color: var(--primary-glow); 
    text-shadow: 0 0 5px var(--primary-glow); 
    transform: translateX(5px); 
}
.main-nav .nav-item.active { 
    background: rgba(0, 242, 254, 0.2); 
    color: var(--primary-glow); 
    border-left-color: var(--primary-glow); 
    font-weight: bold; 
}
.nav-icon { 
    width: 24px; 
    height: 24px; 
    margin-right: 15px; 
    fill: currentColor; 
}
.nav-group { 
    border-left: 3px solid transparent; 
    transition: all 0.3s ease; 
}
.nav-group.active { 
    border-left-color: var(--primary-glow); 
}
.nav-group-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 12px; 
    cursor: pointer; 
    color: var(--text-dim); 
    transition: all 0.3s ease; 
}
.nav-group-header:hover { 
    background: rgba(0, 242, 254, 0.1); 
    color: var(--text-color); 
}
.nav-group.active > .nav-group-header { 
    color: var(--primary-glow); 
    font-weight: bold; 
}
.chevron { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid currentColor; 
    transition: transform 0.3s ease; 
}
.nav-group.open > .nav-group-header .chevron { 
    transform: rotate(180deg); 
}
.sub-nav-list { 
    list-style: none; 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.4s ease-in-out; 
    padding-left: 15px; 
}
.nav-group.open .sub-nav-list { 
    max-height: 500px; 
}
.sub-nav-item { 
    font-size: 0.9em !important; 
    padding-left: 25px !important; 
    position: relative; 
}
.sub-nav-item::before { 
    content: '—'; 
    position: absolute; 
    left: 10px; 
    color: var(--text-dim); 
}
.sub-nav-item.active { 
    font-weight: normal; 
    background: rgba(0, 242, 254, 0.1); 
    color: var(--text-color); 
}