/* ======================================
   全局基础样式
   ====================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Microsoft YaHei", sans-serif;
    background-color: #f3f4f6;
    color: #111827;
    overflow-x: hidden; /* 防止侧边栏伸缩时出现水平滚动条 */
}

/* ======================================
   侧边栏样式
   ====================================== */
.sidebar {
    background-color: #1A2428;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    height: 100vh; /* 改为100%视口高度 */
    transition: width 0.3s ease;
    overflow: hidden;
}

/* 侧边栏展开状态 */
.sidebar.expanded {
    width: 200px;
}

/* 侧边栏收缩状态 - 仅显示图标宽度 */
.sidebar.collapsed {
    width: 80px;
}

/* 日期时间容器样式 */
.sidebar-time {
    width: 100%;
    padding: 12px 8px;
    box-sizing: border-box;
    color: white;
    text-align: center;
}

/* 日期样式 */
.sidebar-time .date {
    font-size: 14px;
    margin-bottom: 4px;
    transition: opacity 0.3s ease;
}

/* 时间样式 */
.sidebar-time .time {
    font-size: 16px;
    font-weight: 500;
}

/* 收缩状态下的日期时间适配 */
.sidebar.collapsed .sidebar-time .date {
    display: none; /* 隐藏日期 */
}
.sidebar.collapsed .sidebar-time .time {
    font-size: 14px; /* 缩小时间字号 */
}

/* 伸缩按钮样式 */
.toggle-btn {
    width: 100%;
    padding: 0px 0px;
    background-color: #2C3E50;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center; /* 图标和文字垂直居中 */
    justify-content: flex-start; /* 展开时左对齐 */
    transition: background-color 0.2s ease;
}

/* 伸缩按钮文本样式 */
.toggle-text {
    font-size: 16px;
    transition: opacity 0.3s ease;
}

/* 伸缩按钮图标 */
.toggle-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    transition: transform 0.3s ease;
}

/* 收缩状态下按钮适配 */
.sidebar.collapsed .toggle-btn {
    justify-content: center; /* 图标居中 */
}
.sidebar.collapsed .toggle-icon {
    margin-right: 0; /* 收缩时去掉图标右边距 */
    transform: rotate(180deg); /* 图标旋转180度 */
}
.sidebar.collapsed .toggle-text {
    display: none; /* 收缩时隐藏文本 */
}

/* 按钮交互效果 */
.toggle-btn:hover {
    background-color: #2d3748;
}

/* 侧边栏导航容器 - 带滚动条 */
.sidebar-nav {
    padding: 16px;
    /* 改为使用视口高度减去其他固定元素高度 */
    height: calc(100vh - 130px); /* 保持原有计算方式但确保正确 */
    max-height: calc(100vh - 130px); /* 新增最大高度限制 */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto; /* 仅在内容超出时显示垂直滚动条 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
}

/* 自定义滚动条样式 */
.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar-nav::-webkit-scrollbar-track {
    background: #1A2428;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: #7C9AAB;
    border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #2C3E50;
}


/* 侧边栏按钮样式 */
.sidebar-btn {
    width: 100%;
    padding: 12px 12px;
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 18px;
    box-sizing: border-box;
    border-radius: 6px;
    margin-bottom: 6px;
    white-space: nowrap; /* 防止文字换行 */
    justify-content: flex-start;
}



/* 按钮交互效果 */
.sidebar-btn:hover {
    background-color: #374151;
}
.sidebar-btn.active {
    background-color: #fef2f2;
    border-left: 4px solid #fecaca;
    color: #dc2626;
    font-weight: 500;
}

/* 收缩状态下活跃按钮样式调整 */
.sidebar.collapsed .sidebar-btn.active {
    border-left: none; /* 去掉左侧边框 */
}

/* ======================================
   主内容区样式
   ====================================== */
.main-content {
    margin-left: 200px; /* 与侧边栏展开宽度一致 */
    transition: margin-left 0.3s ease;
}

/* 侧边栏收缩时调整主内容区左边距 */
.sidebar.collapsed + .main-content {
    margin-left: 80px; /* 与侧边栏收缩宽度一致 */
}

/* ======================================
   顶部导航栏样式
   ====================================== */
.navbar {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    height: 60px; /* 固定高度 */
    position: fixed;
    top: 0;
    right: 0;
    z-index: 90; /* 低于侧边栏z-index */
    transition: width 0.3s ease; /* 随侧边栏同步变化宽度 */
    padding: 0 24px;
}

/* 导航栏内容容器 */
.navbar-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 左右布局 */
}

/* 导航栏标题 */
.navbar-title {
    font-size: 20px;
    color: #1A2428;
    margin: 0;
    font-weight: 600;
}

/* 导航栏右侧操作区 */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 16px; /* 按钮之间间距 */
}

/* 导航栏按钮（刷新、帮助等） */
.navbar-btn {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.navbar-btn:hover {
    background-color: #f3f4f6;
}

/* 导航栏图标 */
.navbar-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* 用户信息样式 */
.navbar-user {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #374151;
    font-size: 14px;
}
.user-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%; /* 圆形头像 */
}

/* 侧边栏状态与导航栏宽度联动 */
.sidebar.expanded ~ .main-content .navbar {
    width: calc(100% - 200px);
}
.sidebar.collapsed ~ .main-content .navbar {
    width: calc(100% - 80px);
}

/* ======================================
   页面内容区域样式
   ====================================== */
.content {
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 80px; /* 避开顶部导航栏（60px高度 + 20px间距） */
}

/* 内容卡片通用样式 */
.content-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 24px;
    margin-bottom: 24px;
}

/* 自定义滚动条（全局统一） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}