/* Shared Sidebar Styles - Safe to use with any page */
/* All classes prefixed with .sidebar- to avoid conflicts */

.sidebar { 
    width: 220px; 
    background: transparent; 
    padding: 32px 0 32px 24px; 
    position: sticky; 
    top: 64px; 
    height: calc(100vh - 64px); 
    overflow-y: auto; 
}

.sidebar-section { 
    margin-bottom: 24px; 
}

.sidebar-title { 
    font-size: 13px; 
    font-weight: 700; 
    color: #71717a; 
    margin-bottom: 8px; 
    padding-left: 12px; 
    display: block; 
}

.sidebar-links { 
    list-style: none; 
}

.sidebar-link { 
    display: block; 
    padding: 8px 12px; 
    color: #a1a1aa; 
    text-decoration: none; 
    font-size: 14px; 
    font-weight: 500; 
    border-radius: 6px; 
    transition: all 0.2s; 
    margin-bottom: 2px; 
    position: relative; 
}

.sidebar-link::before { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 3px; 
    height: 0; 
    background: #c0fe04; 
    border-radius: 0 2px 2px 0; 
    transition: height 0.2s; 
}

.sidebar-link:hover { 
    color: #e4e4e7; 
    background: rgba(192, 254, 4, 0.08); 
}

.sidebar-link:hover::before { 
    height: 20px; 
}

.sidebar-link.active { 
    color: #c0fe04; 
    background: rgba(192, 254, 4, 0.1); 
}

.sidebar-link.active::before { 
    height: 20px; 
}

.sidebar-link.coming-soon { 
    opacity: 0.4; 
    cursor: not-allowed; 
}

/* Dropdown Navigation */
.sidebar-dropdown-toggle { 
    width: 100%; 
    background: none; 
    border: none; 
    padding: 0; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 8px 12px; 
    border-radius: 6px; 
    transition: background 0.2s; 
}

.sidebar-dropdown-toggle:hover { 
    background: rgba(192, 254, 4, 0.05); 
}

.sidebar-dropdown-toggle .sidebar-title { 
    margin-bottom: 0; 
    padding-left: 0; 
    font-size: 14px; 
    font-weight: 800; 
    color: #c0fe04; 
    letter-spacing: 0.8px; 
}

.dropdown-icon { 
    color: #c0fe04; 
    transition: transform 0.2s; 
}

.sidebar-dropdown-toggle[aria-expanded="true"] .dropdown-icon { 
    transform: rotate(180deg); 
}

.sidebar-dropdown { 
    list-style: none; 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.3s ease-out; 
}

.sidebar-dropdown.open { 
    max-height: 500px; 
}

.sidebar-dropdown li { 
    margin-left: 8px; 
}

/* Mobile */
.mobile-menu-toggle { 
    display: none; 
    background: none; 
    border: none; 
    color: #e4e4e7; 
    font-size: 24px; 
    cursor: pointer; 
    padding: 8px; 
}

@media (max-width: 1024px) {
    .sidebar { 
        position: fixed; 
        left: -220px; 
        top: 64px; 
        background: #14141a; 
        border-right: 1px solid #27272a; 
        transition: left 0.3s; 
        z-index: 999; 
        padding-left: 16px; 
    }
    
    .sidebar.open { 
        left: 0; 
    }
    
    .mobile-menu-toggle { 
        display: block; 
    }
}