html,body
{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.topbar a:link{
  color: black;
  text-decoration:none;/*用于去除下划线*/
}

.topbar a:visited{
  color: black;
}

.topbar a:active{
  color:black ;
}

.topbar a:hover{
  color: black;
}

/* 确保自定义确认对话框和输入对话框显示在最上层 */
#customConfirmModal {
    z-index: 1090 !important;
}

#customConfirmModal .modal-backdrop {
    z-index: 1080 !important;
}

#customPromptModal {
    z-index: 1090 !important;
}

#customPromptModal .modal-backdrop {
    z-index: 1080 !important;
}

.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #dc3545;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1;
}

.topbar {
    margin:0px;
    background:#ffffff;
    height:40px;
    text-align:right;
    font-size:12px;
    border-bottom:1px solid #CFCFCF;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 15px;
}

.topbar-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* .topbar .topmenu 样式已移除 */

.topbar img {
  width:18px;
  height:18px;
  vertical-align: middle;
}

/* 用户下拉菜单样式 */
.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.user-info:hover {
    background-color: transparent;
}

.user-avatar-wrapper {
    position: relative;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.user-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

.user-avatar-placeholder {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    font-size: 9px;
    color: #909399;
    text-align: center;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    background-color: #e4e7ed;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-nickname {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
}

.dropdown-arrow {
    font-size: 12px;
    color: #909399;
    transition: transform 0.2s;
}

.user-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.user-info:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    min-width: 140px;
    padding: 4px 0;
    display: none;
    z-index: 1000;
    list-style: none;
    margin: 0;
}

.user-dropdown-menu.show {
    display: block;
}

.user-dropdown:hover .user-dropdown-menu {
    display: block;
}

.user-dropdown-menu li {
    margin: 0;
    padding: 0;
}

.user-dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: #606266;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s;
}

.user-dropdown-menu li a:hover {
    background-color: #f5f7fa;
    color: #606266;
}

.user-dropdown-menu li a i {
    width: 16px;
    text-align: center;
    color: #909399;
    font-size: 14px;
}

.side_menu {
    flex: 1; /* 让菜单区域占据剩余空间 */
    overflow-y: auto; /* 如果菜单项太多，允许滚动 */
    overflow-x: hidden; /* 隐藏横向滚动条 */
    display: flex;
    flex-direction: column;
}

/* 自定义滚动条样式，让滚动条覆盖在内容上而不占用空间 */
.side_menu::-webkit-scrollbar {
    width: 8px;
}

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

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

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

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

.side_menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    font-size:14px;
    flex: 1; /* 让菜单列表占据所有可用空间 */
    display: flex;
    flex-direction: column;
}

.side_menu li {
    width: 100%;
}

.side_menu li a {
    display: block;
    color: #ffffff;
    padding: 16px 20px;
    text-decoration: none;
    background-color: #2c3e50; /* 未选中时使用与紫旗管理后台相同的背景色 */
}

/* 鼠标移动到选项上修改背景颜色 */
.side_menu li a:hover {
    background-color: #233240;
    color: #ffffff;
}

.side_menu li a.active {
    background-color: #233240; /* 选中时使用浅色背景 */
    color: #3d96f9;
}

.side_menu img {
    vertical-align: middle;
    margin-right: 12px; /* 图标和文字之间的间距 */
    /* 保持图标原色，如果图标是白色的，在深色背景上应该可见 */
}

/* 子菜单中的图标 */
.sub-menu img {
    /* 保持图标原色 */
}

/* 一级菜单链接中的图标 */
.menu-parent-link img {
    /* 保持图标原色 */
}

/* 一级菜单（有子菜单）样式 */
.menu-item-parent {
    width: 100%;
}

.menu-parent-link-container {
    width: 100%;
    position: relative;
}

.menu-parent-link {
    display: block;
    position: relative;
    width: 100%;
    color: #ffffff;
    padding: 16px 20px;
    padding-right: 40px; /* 为箭头留出空间 */
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box; /* 确保padding包含在宽度内 */
    background-color: #2c3e50; /* 未选中时使用与紫旗管理后台相同的背景色 */
}

.menu-parent-link:hover {
    background-color: #233240;
    color: #ffffff;
}

/* 一级菜单选中时不变色，保持原样 */
.menu-item-parent.active > .menu-parent-link-container > .menu-parent-link {
    background-color: #2c3e50; /* 保持原背景色 */
    color: #ffffff; /* 保持原文字颜色 */
}

.menu-parent-link img {
    vertical-align: middle;
    margin-right: 12px;
}

.menu-arrow-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 10px;
    transition: transform 0.3s ease;
    user-select: none;
    pointer-events: none; /* 箭头不响应点击，让整个链接区域响应 */
    line-height: 1;
}

.menu-item-parent.expanded > .menu-parent-link-container > .menu-parent-link > .menu-arrow-btn {
    transform: translateY(-50%) rotate(180deg);
}

/* 二级菜单样式 */
.sub-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #1a252f;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s ease;
}

.menu-item-parent.expanded > .sub-menu {
    opacity: 1;
    padding: 0;
    /* max-height 通过内联样式动态设置 */
}

.sub-menu li {
    width: 100%;
}

.sub-menu li a {
    display: flex;
    align-items: center;
    padding: 12px 20px 12px 35px; /* 二级菜单左边距，与图标对齐 */
    font-size: 13px;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.2s ease;
    background-color: #1a252f; /* 子菜单默认深色背景 */
}

.sub-menu li a:hover {
    background-color: #233240;
    color: #ffffff;
}

.sub-menu li a.active {
    background-color: #1a252f; /* 选中时保持深色背景 */
    color: #3d96f9; /* 选中时只改变字体颜色 */
    font-weight: 500;
}

.side_logo {
    height:80px;
    min-height: 80px; /* 确保最小高度 */
    color:#ffffff;
    font-size:14px;
    white-space:nowrap;
    flex-shrink: 0; /* 防止logo区域被压缩 */
}

.side_logo img {
vertical-align: middle;
width:18px;
margin-right:10px;
margin-left:15px;
}

.big-container {
    display:flex;
    flex-direction:row;
    width:100%;
    min-height: 100vh; /* 确保容器至少占满视口高度 */
    height: auto; /* 允许根据内容增长 */
    align-items: stretch; /* 让子元素拉伸到相同高度 */
}

.big-container-left {
    width: 180px;
    min-height: 100vh; /* 最小高度为视口高度 */
    height: 100vh; /* 固定高度为视口高度 */
    background: #2c3e50;
    flex-shrink: 0; /* 防止左侧被压缩 */
    transition: transform 0.3s ease-in-out;
    position: fixed; /* 固定定位，不随页面滚动 */
    top: 0; /* 固定在顶部 */
    left: 0; /* 固定在左侧 */
    z-index: 1000;
    display: flex;
    flex-direction: column; /* 让侧边栏内容垂直排列 */
    overflow-y: auto; /* 如果内容超出，允许滚动 */
    overflow-x: hidden; /* 隐藏横向滚动条 */
}

/* 自定义滚动条样式，让滚动条覆盖在内容上而不占用空间 */
.big-container-left::-webkit-scrollbar {
    width: 8px;
}

.big-container-left::-webkit-scrollbar-track {
    background: transparent;
}

.big-container-left::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

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

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

/* 使用伪元素填充侧边栏底部空白 */
.big-container-left::after {
    content: '';
    flex: 1;
    min-height: 0;
    background: #2c3e50; /* 与侧边栏背景色一致 */
}

/* 移动端菜单遮罩层 */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    transition: opacity 0.3s ease-in-out;
}

.sidebar-overlay.active {
    display: block;
}

/* 汉堡菜单按钮 */
.menu-toggle-btn {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1001;
    background: #2c3e50;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.menu-toggle-btn:hover {
    background: #233240;
}

/* 响应式设计 - 小屏幕 */
@media (max-width: 768px) {
    .menu-toggle-btn {
        display: block;
    }
    
    .big-container-left {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh; /* 移动端使用视口高度 */
        min-height: 100vh;
        transform: translateX(-100%);
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0,0,0,0.2);
        overflow-y: auto; /* 如果内容超出，允许滚动 */
    }
    
    .big-container-left.menu-open {
        transform: translateX(0);
    }
    
    .big-container-right {
        width: 100%;
        margin-left: 0;
    }
}

/* 响应式设计 - 中等屏幕 */
@media (max-width: 1024px) and (min-width: 769px) {
    .big-container-left {
        width: 160px;
    }
    
    .side_menu li a {
        padding: 14px 15px;
        font-size: 13px;
    }
    
    .side_logo {
        font-size: 12px;
    }
}

.big-container-right {
    height:100%;
    background:#f6f6f6;
    flex-grow: 1;/*铺满剩余空间*/
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    margin-left: 180px; /* 为固定的左侧菜单栏留出空间 */
}

.big-container-right-content {
    margin:15px;
    flex-grow: 1;/*铺满剩余空间*/
    display:flex;
    flex-direction:column;
    justify-content:flex-start;


}

.big-container-right-content .page-manual {
    width:100%;
    background-color:white;
    border-radius: 5px;
    padding:10px;
    margin-bottom:10px;
    font-size:12px;
    text-align:left;
    line-height:20px;
    box-shadow: 5px 2px 2px #cfcfcf;
}

.btn-link-normal {
    border-radius: 3px;
    border:1px solid #d0f5e0;
    background:#e7faf0;
    padding:3px 10px;
    font-size:12px;
    color:#13ce66;
    text-decoration:none;
}

.btn-link-active {
    border-radius: 3px;
    border:1px solid #d1e9ff;
    background:#e8f4ff;
    padding:3px 10px;
    font-size:12px;
    color:#1890ff;
    text-decoration:none;
}

.btn-link-empty {
    border-radius: 3px;
    border:1px solid #cfcfcf;
    background:#efefef;
    padding:3px 10px;
    font-size:12px;
    color:#666666;
    text-decoration:none;
}

.btn-link-alarm {
    border-radius: 3px;
    border:1px solid #d1e9ff;
    background:#e8f4ff;
    padding:3px 10px;
    font-size:12px;
    color:#D04848;
    text-decoration:none;
}