#navbar-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}
.nav-menu-icon {
    width: 20px;
    height: 20px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #000;
    transition: background-color 0.3s ease;
}

/* 导航图标默认和hover状态的背景图片 */
.nav-icon-home {
    -webkit-mask-image: url('../icons/home.svg');
    mask-image: url('../icons/home.svg');
}
.nav-icon-search {
    -webkit-mask-image: url('../icons/search.svg');
    mask-image: url('../icons/search.svg');
}
.nav-icon-profile {
    -webkit-mask-image: url('../icons/user.svg');
    mask-image: url('../icons/user.svg');
}
.nav-icon-booking {
    -webkit-mask-image: url('../icons/bookings.svg');
    mask-image: url('../icons/bookings.svg');
}
.nav-icon-message {
    -webkit-mask-image: url('../icons/message-circle.svg');
    mask-image: url('../icons/message-circle.svg');
}
.nav-icon-portfolio {
    -webkit-mask-image: url('../icons/portfolio.svg');
    mask-image: url('../icons/portfolio.svg');
}
.nav-icon-dashboard {
    -webkit-mask-image: url('../icons/dashboard.svg');
    mask-image: url('../icons/dashboard.svg');
}

.nav-item:hover .nav-menu-icon,
.nav-item.active .nav-menu-icon {
    background-color: rgb(249, 115, 22);
}

.active span {
    color: rgb(249,115,22);
}

.dropdown-menu .active {
    color: rgb(240, 114, 56);
}
.dropdown-menu-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.8rem;
    background-size: cover;
    transition: all 0.3s ease;
}
.dropdown-menu-icon-setting {
    background-image: url('../img/setting.png');
}
.dropdown-menu-icon-feedback {
    background-image: url('../img/feedback.png');
}
.dropdown-menu-icon-logout {
    background-image: url('../img/logout.png');
}
.dropdown-menu li:hover .dropdown-menu-icon-setting, .dropdown-menu li.active .dropdown-menu-icon-setting {
    background-image: url('../img/setting-hover.png');
}
.dropdown-menu li:hover .dropdown-menu-icon-feedback, .dropdown-menu li.active .dropdown-menu-icon-feedback {
    background-image: url('../img/feedback-hover.png');
}
.dropdown-menu li:hover .dropdown-menu-icon-logout, .dropdown-menu li.active .dropdown-menu-icon-logout {
    background-image: url('../img/logout-hover.png');
}

/* 为移动设备页面内容添加底部间距，避免被导航栏遮挡 */
@media (max-width: 767px) {
    body {
        padding-bottom: 3.8rem !important;
    }
}