/* 动态背景渐变动画 */


/* 用户徽章样式 */
/* 基础徽章样式 */
.user-bd-badge {
    position: relative; /* 为伪元素定位做准备 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* 增大尺寸以容纳更多装饰 */
    height: 40px;
    color: white;
    font-weight: bold;
    border-radius: 15%; /* 调整形状为稍微圆角的方形 */
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 10px;
    background: linear-gradient(135deg, #ff7e5f, #feb47b); /* 默认渐变背景 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* 更柔和的阴影效果 */
    overflow: hidden; /* 确保装饰元素不溢出 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.user-bd-badge:hover {
    transform: scale(1.05); /* 鼠标悬停时略微放大 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* 不同角色的背景渐变色 */
.user-bd-badge.user-bd-admin {
    background: linear-gradient(135deg, #e74c3c, #c0392b); /* 深红渐变 */
}

.user-bd-badge.user-bd-normal-admin {
    background: linear-gradient(135deg, #3498db, #2980b9); /* 深蓝渐变 */
}

.user-bd-badge.user-bd-leader {
    background: linear-gradient(135deg, #2ecc71, #27ae60); /* 深绿渐变 */
}

.user-bd-badge.user-bd-golden {
    background: linear-gradient(135deg, #f1c40f, #f39c12); /* 金色渐变 */
}

/* 徽章内的SVG勾图标样式 */
.user-bd-badge svg {
    width: 80%;
    height: 80%;
    stroke: white;
    stroke-width: 5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: user-bd-draw 0.5s ease forwards;
}

/* 添加SVG装饰性花边 */
.user-bd-badge::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDEyMCAxMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8cGF0aCBkPSJNMTAsNDBIMTIsMzAgMjAsMjAgMzAsMjBIMzEsMjMgNDAsMjUgNDAsMjggNDAgMzAgMzEsMzAgMjAsMzAgMTIsMzAgMTAsNDAiIHN0eWxlPSJmaWxsOm5vbmU7IHN0cm9rZTojZmZmZmZmOyBzdHJva2Utd2lkdGg6M3B4OyIvPgo8L3N2Zz4=') repeat;
    background-size: 30px 30px;
    opacity: 0.2;
    transform: rotate(45deg);
    pointer-events: none; /* 确保装饰不影响交互 */
    z-index: 1;
}

/* 添加光晕效果 */
.user-bd-badge::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

/* 添加徽章边框 */
.user-bd-badge .user-bd-border-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* 动画效果 */
@keyframes user-bd-draw {
    from {
        stroke-dasharray: 0 100;
    }
    to {
        stroke-dasharray: 100 0;
    }
}

/* 响应式调整 */
@media (max-width: 600px) {
    .user-bd-badge {
        width: 90px;
        height: 90px;
        margin: 8px;
    }

    .user-bd-badge::before {
        background-size: 20px 20px;
    }

    .user-bd-badge svg {
        width: 40%;
        height: 40%;
    }
}
/* end 用户徽章样式*/











@keyframes gradientBackground {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.navbar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(-45deg, #e0f7fa, #ffffff, #f0f0f0, #e0f7fa);
    background-size: 400% 400%;
    animation: gradientBackground 15s ease infinite;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0 20px; /* 添加左右内边距 */
}

.navbar-logo-head {
    display: flex;
    align-items: center;
}

.navbar-logo-head img {
    margin-right: 10px;
    width: 50px;
    height: 50px;
}

.navbar-brand {
    font-size: 30px;
    color: black;
    text-decoration: none;
}

/* 移除所有链接的下划线 */
.nav-links-head a,
.user-login-head a,
.dropdown-content-head a {
    text-decoration: none;
}

/* 汉堡菜单按钮 */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    width: 30px;
    height: 25px;
    justify-content: space-between;
}

.hamburger div {
    width: 100%;
    height: 3px;
    background-color: black;
    transition: all 0.3s ease;
}

/* 旋转动画 */
.hamburger.active div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active div:nth-child(2) {
    opacity: 0;
}

.hamburger.active div:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.nav-links-head {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease-in-out;
}

.nav-links-head a {
    color: black;
    /* text-decoration: none; 已在上方统一设置 */
    padding: 8px 12px;
    display: block;
    font-size: 20px;
    position: relative;
    transition: color 0.3s, background-color 0.3s, transform 0.3s;
}

/* 高亮当前链接 */
.nav-links-head a.active {
    background-color: rgba(0, 128, 255, 0.2); /* 半透明蓝色背景 */
    color: #0070e0; /* 深蓝色文字 */
    border-radius: 4px;
}

/* 鼠标悬停特效 */
.nav-links-head a:hover {
    color: #0070e0; /* 改变文字颜色 */
    transform: scale(1.05); /* 轻微放大 */
}

/* 添加下划线动画（已移除，取消显示） */
.nav-links-head a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #0070e0;
    transition: width 0.3s ease;
}

.nav-links-head a:hover::after {
    width: 100%;
    left: 0;
    background: #0070e0;
}

.nav-links-head li {
    position: relative;
}

/* 保留下拉箭头与文字对齐 */
.dropdown-head > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown-head > a::after {
    content: '▼';
    font-size: 12px;
    margin-left: 5px; /* 增加箭头与文字的间距 */
    transition: transform 0.3s ease;
}

/* 下拉菜单展开时箭头旋转 */
.dropdown-head.open > a::after {
    transform: rotate(180deg);
}

.dropdown-content-head {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    transition: max-height 0.3s ease;
}

/* 保留原有的hover效果用于桌面端 */
.dropdown-head:hover .dropdown-content-head {
    display: block;
}

/* 下拉菜单链接默认样式 */
.dropdown-content-head a {
    padding: 12px 16px;
    color: black;
    display: block;
    font-size: 16px;
    position: relative;
    transition: color 0.3s, background-color 0.3s, transform 0.3s;
}

/* 下拉菜单链接悬停特效 */
.dropdown-content-head a:hover {
    color: #0070e0;
    transform: scale(1.05);
}

.dropdown-content-head a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #0070e0;
    transition: width 0.3s ease;
}

.dropdown-content-head a:hover::after {
    width: 100%;
    left: 0;
    background: #0070e0;
}

.nav-actions-head {
    display: flex;
    align-items: center;
    position: relative;
}

/* Message button */
.message-button-head {
    position: fixed; /* 固定在窗口右上角 */
    cursor: pointer;
    z-index: 1001; /* 高于导航栏 */
    background-color: orange; /* 将消息按钮颜色换成橙色 */
    padding: 3px;
    border-radius: 50%;
    right:10%;
}

.message-button-head img {
    width: 33px;
    height: 33px;
}

.message-count-head {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 14px; /* 增大未读消息数量字体 */
    display: inline-block;
}

/* Message popup */
.message-popup-head {
    display: none; /* 默认隐藏 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px; /* 增大宽度 */
    max-height: 600px; /* 增大最大高度 */
    background-color: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 4px 16px rgba(0,0,0,0.3);
    overflow-y: auto;
    z-index: 1002; /* 高于消息按钮 */
    padding: 30px; /* 增大内边距 */
    font-size: 18px; /* 增大弹窗内整体字体大小 */
}

.message-popup-head::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #ccc transparent;
}

.message-popup-head::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 9px 9px 9px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.message-popup-head .message-item-head {
    padding: 15px; /* 增大单条消息的内边距 */
    border-bottom: 1px solid #eee;
    font-size: 18px; /* 增大消息内容字体 */
}

.message-popup-head .message-item-head:last-child {
    border-bottom: none;
}

.message-popup-head .message-item-head.unviewed-head {
    background-color: #f0f8ff;
    font-weight: bold;
}

.message-popup-head .message-item-head p {
    margin: 0 0 10px 0; /* 增大消息内容与时间的间距 */
    font-size: 18px; /* 增大消息内容字体 */
}

.message-popup-head .message-item-head small {
    color: #666;
    font-size: 16px; /* 增大时间字体 */
}

/* Scrollbar */
.message-popup-head::-webkit-scrollbar {
    width: 10px; /* 增大滚动条宽度 */
}

.message-popup-head::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
}

.user-login-head {
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 40px;
}

.user-login-head a {
    color: black;
    /* text-decoration: none; 已在上方统一设置 */
    padding: 8px 12px;
    font-size: 16px;
}

.user-dropdown-head {
    display: none;
    position: absolute;
    right: 0;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.user-login-head:hover .user-dropdown-head {
    display: block;
}

.user-dropdown-head a {
    padding: 12px 16px;
    color: black;
    display: block;
    font-size: 16px;
    position: relative;
    transition: color 0.3s, background-color 0.3s, transform 0.3s;
}

.user-dropdown-head a:hover {
    color: #0070e0;
    transform: scale(1.05);
}

.user-dropdown-head a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #0070e0;
    transition: width 0.3s ease;
}

.user-dropdown-head a:hover::after {
    width: 100%;
    left: 0;
    background: #0070e0;
}

.message-action-button {
    background: linear-gradient(45deg, #0056b3, #0088ff);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.3s, box-shadow 0.3s;
}

.message-action-button:hover {
    background: linear-gradient(45deg, #004090, #0070e0);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.message-action-button:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 未读消息提示样式 */
.unread-message-notification {
    position: fixed;
    top: 80px; /* 导航栏高度 */
    left: 0;
    width: 100%;
    background-color: #FFD700; /* 金黄色 */
    color: #000;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    z-index: 999; /* 低于导航栏 */
    opacity: 1;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    visibility: visible;
}

.unread-message-notification.hidden {
    opacity: 0;
    visibility: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nav-links-head {
        position: fixed;
        top: 60px; /* 根据导航栏高度调整 */
        left: 0;
        width: 100%;
        height: calc(100% - 60px);
        background-color: white;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding-top: 20px;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    .nav-links-head.open {
        transform: translateX(0);
    }

    .nav-links-head li {
        width: 100%;
        text-align: center;
    }

    .dropdown-head > a::after {
        content: '▼';
        margin-left: 5px;
    }

    /* 隐藏下拉内容，转为在收纳栏中显示为独立链接 */
    .dropdown-content-head {
        position: static;
        box-shadow: none;
        background-color: white;
        min-width: 100%;
        display: none;
    }

    /* 在移动端，菜单打开时所有下拉菜单内容默认显示 */
    .nav-links-head.open .dropdown-content-head {
        display: block;
    }

    /* 显示下拉菜单项为独立链接 */
    .dropdown-content-head a {
        padding: 10px 0;
        border-top: 1px solid #eee;
    }

    /* 汉堡菜单按钮显示 */
    .hamburger {
        display: flex;
    }

    /* 隐藏导航链接默认显示 */
    .nav-links-head {
        display: flex;
    }
}
.status-banner {
    background-color: red;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 16px;
}