/* --- Sidebar Styles --- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0; /* 默认起始位置，将被 transform 覆盖 */
    width: 280px; /* 侧边栏宽度 */
    height: 100%;
    background-color: #2c3e50; /* 深色背景 */
    color: #ecf0f1; /* 浅色文字 */
    padding: 20px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    transform: translateX(-100%); /* 初始状态：隐藏在左侧屏幕外 */
    transition: transform 0.3s ease-out; /* 平滑过渡效果 */
    z-index: 1000; /* 确保在其他内容之上 */
    display: flex; /* 使用 Flexbox 布局内部内容 */
    flex-direction: column; /* 垂直排列 */
    overflow-y: auto; /* 允许内容超出时滚动 */
}

/* 当侧边栏有 'open' 类时，显示侧边栏 */
.sidebar.open {
    transform: translateX(0); /* 滑入视图 */
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 底部细线分隔 */
}

.sidebar-header h3 {
    font-size: 1.8em;
    font-weight: bold;
    color: #ffcc00; /* 亮黄色标题 */
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    color: #ecf0f1;
    font-size: 1.8em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s; /* 颜色过渡 */
    line-height: 1; /* 确保 'x' 垂直居中 */
}

.close-btn:hover {
    color: #ff6347; /* 悬停时变为橙红色 */
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li {
    margin-bottom: 15px; /* 列表项底部间距 */
}

.sidebar-nav a {
    display: flex; /* Flexbox 排列图标和文字 */
    align-items: center;
    gap: 15px; /* 图标和文字之间的间距 */
    color: #ecf0f1;
    text-decoration: none;
    font-size: 1.3em;
    padding: 12px 15px;
    border-radius: 8px; /* 圆角边框 */
    transition: background-color 0.2s, color 0.2s, transform 0.2s; /* 平滑过渡 */
}

/* 激活状态 */
.sidebar-nav a.active {
    background-color: #34495e; /* 激活时深色背景 */
    color: #ffcc00; /* 激活时亮黄色文字 */
    font-weight: bold;
}

.sidebar-nav a:hover {
    background-color: #34495e;
    color: #ffcc00;
    transform: translateX(5px); /* 悬停时向右平移 */
}

.sidebar-nav a i {
    font-size: 1.5em;
    width: 30px; /* 固定图标宽度，保证对齐 */
    text-align: center;
}

.logout-item {
    margin-top: auto; /* 将 Logout 项推到底部 */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 顶部细线分隔 */
    padding-top: 15px;
}
.logout-item a {
    color: #e74c3c; /* 登出链接为红色 */
}
.logout-item a:hover {
    background-color: #e74c3c;
    color: #fff;
}

/* --- Hamburger Button Styles --- */
.menu-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: #ff6347; /* 橙红色背景 */
    color: #fff;
    border-radius: 50%; /* 圆形按钮 */
    width: 50px;
    height: 50px;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 5px 10px rgba(255, 99, 71, 0.4); /* 阴影 */
    z-index: 1001; /* 确保在侧边栏之上 */
    transition: transform 0.3s ease-out, background-color 0.2s, opacity 0.3s;
}

.menu-toggle:hover {
    background-color: #e5533c; /* 悬停时颜色变深 */
    transform: scale(1.05); /* 悬停时轻微放大 */
}

/* --- Main Content Wrapper Styles --- */
.main-content-wrapper {
    flex-grow: 1; /* 让主内容区域填充剩余空间 */
    transition: margin-left 0.3s ease-out; /* 平滑过渡 */
    width: 100%; /* 默认宽度 */
    display: flex; /* 可选：如果主内容内部也用flex布局 */
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh; /* 最小高度充满视口 */
    padding: 20px; /* 页面内边距 */
    padding-left: 20px; /* 确保左侧也有内边距 */
}

/* 当侧边栏打开时，向右推动主内容 */
body.sidebar-open .main-content-wrapper {
    margin-left: 280px; /* 等于侧边栏宽度 */
}

/* 当侧边栏打开时，隐藏汉堡菜单按钮 */
body.sidebar-open .menu-toggle {
    opacity: 0; /* 完全透明 */
    pointer-events: none; /* 禁用点击事件 */
    transform: translateX(-100%); /* 移出视图 */
}

/* --- 遮罩层样式 (可选，用于点击外部关闭) --- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
    z-index: 999; /* 在侧边栏之下，但高于页面内容 */
    display: none; /* 默认隐藏 */
    cursor: pointer;
}

.overlay.visible {
    display: block; /* 显示遮罩层 */
}

/* --- 菜单分隔线样式 --- */
.sidebar-nav .menu-separator {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 浅色线条 */
    margin: 10px 0; /* 上下边距 */
    padding: 0;
    height: 0; /* 确保没有额外高度 */
}

/* --- 移动端底部导航 (假设你有这个结构，这里是隐藏的默认样式) --- */
.mobile-footer-nav {
    display: none; /* 桌面端默认隐藏 */
    /* 你可以在媒体查询中显示它 */
}

/* --- Media Queries for Responsiveness (示例) --- */
@media (max-width: 768px) {
    /* 侧边栏在小屏幕上覆盖整个宽度，或调整宽度 */
    .sidebar {
        width: 100%; /* 移动端侧边栏宽度可以是 100% */
        left: -100%; /* 初始隐藏 */
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }

    /* 移动端不推动主内容 */
    body.sidebar-open .main-content-wrapper {
        margin-left: 0;
    }

    /* 移动端底部导航显示 */
    .mobile-footer-nav {
        display: flex; /* 启用flex布局 */
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #2c3e50; /* 与侧边栏一致的背景色 */
        justify-content: space-around;
        padding: 10px 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
        z-index: 990;
    }
    .mobile-footer-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #ecf0f1;
        text-decoration: none;
        font-size: 0.9em;
        padding: 5px;
        flex: 1; /* 平均分配空间 */
    }
    .mobile-footer-nav a i {
        font-size: 1.2em;
        margin-bottom: 5px;
    }
    .mobile-footer-nav a.active {
        color: #ffcc00;
    }
    .mobile-footer-nav a:hover {
        color: #ffcc00;
    }

    /* 隐藏桌面端的菜单切换按钮 */
    .menu-toggle {
        display: none; /* 在移动端不显示汉堡菜单按钮，改用底部导航 */
    }
}