/* 全局样式重置 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f0f2f5;
}

#app {
    height: 100%;
}

/* 登录页样式 */
.login-container {
    width: 400px;
    padding: 40px;
    margin: 150px auto 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-container h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #1f2f3d;
}

.login-container .el-form-item {
    margin-bottom: 25px;
}

.login-container .el-input__wrapper {
    background-color: #f5f7fa;
}

.login-container .el-button {
    width: 100%;
    height: 40px;
    font-size: 16px;
}

/* 确保登录页背景色 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #f0f2f5;
}

#app {
    height: 100%;
}

/* 主容器样式 */
.app-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

/* 侧边栏容器样式 */
.sidebar-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px !important;
    background-color: #001529;
    z-index: 1001;  /* 保持较高的z-index */
    overflow: visible !important; /* 修改为visible，允许内容显示 */
}

/* 主容器样式 */
.main-container {
    min-height: 100%;
    margin-left: 200px;
    position: relative;
    z-index: 1000; /* 确保比侧边栏低 */
}

/* 修改菜单项样式 */
.el-menu-item {
    position: relative !important;
    z-index: 1002 !important; /* 确保菜单项在最上层 */
    height: 56px !important;
    line-height: 56px !important;
    color: #bfcbd9 !important;
    background-color: #001529 !important;
    padding: 0 20px !important;
    width: 200px !important;
    box-sizing: border-box !important;
}

/* 确保菜单容器样式正确 */
.sidebar-container .el-menu {
    position: relative;
    z-index: 1002;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background-color: #001529 !important;
}

/* 修改菜单项样式 */
.el-menu {
    border-right: none !important;
    height: 100%;
    width: 100% !important;
    background-color: #001529 !important;
}

.el-menu-item {
    height: 56px !important;
    line-height: 56px !important;
    color: #bfcbd9 !important;
    background-color: #001529 !important;
    padding: 0 20px !important;
    width: 200px !important;
    box-sizing: border-box !important;
}

.el-menu-item:hover {
    color: #fff !important;
    background-color: #263445 !important;
}

.el-menu-item.is-active {
    background-color: #1890ff !important;
    color: #fff !important;
}

/* 确保图标和文字在一行内正确显示 */
.el-menu-item .el-icon {
    margin-right: 16px !important;
    width: 24px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.el-menu-item span {
    display: inline-block !important;
    vertical-align: middle !important;
    max-width: calc(100% - 40px) !important; /* 留出图标的空间 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.el-menu-item:hover {
    color: #fff !important;
    background-color: #263445 !important;
}

.el-menu-item.is-active {
    background-color: #1890ff !important;
    color: #fff !important;
}

/* 确保图标和文字颜色一致 */
.el-menu-item .el-icon {
    color: #bfcbd9 !important;
    margin-right: 16px;
    width: 24px;
    text-align: center;
}

.el-menu-item:hover .el-icon,
.el-menu-item.is-active .el-icon {
    color: #fff !important;
}

/* 确保文字可见 */
.el-menu-item span {
    color: #bfcbd9 !important;
}

.el-menu-item:hover span,
.el-menu-item.is-active span {
    color: #fff !important;
}

/* 主容器样式 */
.main-container {
    min-height: 100%;
    margin-left: 200px;
    position: relative;
}

/* 菜单样式 */
.el-menu {
    border-right: none !important;
    height: 100%;
    width: 100% !important;
}

.el-menu-item {
    height: 56px !important;
    line-height: 56px !important;
    color: #bfcbd9 !important;
}

.el-menu-item:hover {
    color: #fff !important;
    background-color: #263445 !important;
}

.el-menu-item.is-active {
    background-color: #1890ff !important;
    color: #fff !important;
}

/* 确保图标颜色与文字一致 */
.el-menu-item .el-icon {
    color: inherit !important;
    margin-right: 16px;
    width: 24px;
    text-align: center;
}

/* 主内容区域样式 */
.main-container {
    margin-left: 200px;
    min-height: 100%;
    position: relative;
    background-color: #f0f2f5;
}

/* 头部样式 */
.el-header {
    height: 60px !important;
    padding: 0 20px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.breadcrumb {
    font-size: 16px;
    font-weight: 500;
    color: #1f2f3d;
}

.user-info {
    display: flex;
    align-items: center;
}

.el-dropdown-link {
    cursor: pointer;
    color: #606266;
    display: flex;
    align-items: center;
}

/* 主内容区域 */
.el-main {
    padding: 20px;
    background-color: #f0f2f5;
    min-height: calc(100vh - 60px);
}

/* 菜单样式优化 */
.el-menu {
    border-right: none !important;
}

.el-menu-item {
    height: 50px !important;
    line-height: 50px !important;
}

.el-menu-item.is-active {
    background-color: #1890ff !important;
    color: #fff !important;
}

/* 内容区域容器样式 */
.document-container,
.admin-container,
.statistics-container {
    background-color: #fff;
    padding: 24px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
}

/* Admin 页面样式 */
.admin-container {
    min-height: calc(100vh - 140px);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.header-left {
    display: flex;
    flex-direction: column;
}

.page-title {
    font-size: 20px;
    font-weight: 500;
    color: #1f2f3d;
    margin: 0;
    margin-bottom: 8px;
}

.header-desc {
    font-size: 14px;
    color: #909399;
}

.admin-content {
    background-color: #fff;
    border-radius: 4px;
}

.admin-content .el-card__body {
    padding: 0;
}

/* 表格样式优化 */
.el-table {
    --el-table-border-color: #ebeef5;
    --el-table-header-background-color: #f5f7fa;
}

.el-table th {
    background-color: var(--el-table-header-background-color);
    font-weight: 500;
}

.el-table td, .el-table th {
    padding: 12px 0;
}

/* 按钮组样式 */
.el-button-group {
    display: flex;
    gap: 8px;
}

/* 弹窗样式 */
.el-dialog {
    --el-dialog-padding-primary: 24px;
}

.dialog-footer {
    padding-top: 16px;
    text-align: right;
}

/* 表单样式 */
.el-form-item__label {
    font-weight: normal;
}

.el-input__wrapper,
.el-select__wrapper {
    width: 100%;
}

/* 标签样式 */
.el-tag {
    border-radius: 2px;
}

/* 按钮样式优化 */
.el-button [class^="el-icon-"] {
    margin-right: 5px;
}

/* 登录页样式 */
.login-container {
    width: 400px;
    padding: 40px;
    margin: 100px auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 确保文档容器样式与管理员容器一致 */
.document-container {
    padding: 24px;
    min-height: calc(100vh - 140px);
}

/* 统一文档头部样式 */
.document-container .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

/* 确保按钮组样式在文档页面也生效 */
.document-container .el-button-group {
    display: flex;
    gap: 8px;
}

/* 确保表格内容在文档页面正确显示 */
.document-container .el-table {
    margin-top: 0;
}

/* 确保图标颜色与文字一致 */
.el-menu-item .el-icon {
    color: inherit !important;
    margin-right: 16px;
    width: 24px;
    text-align: center;
}

/* 确保激活状态的图标颜色也正确 */
.el-menu-item.is-active .el-icon {
    color: #fff !important;
}

/* 添加以下代码到样式文件末尾 */

/* 强制固定菜单顺序 */
.sidebar-container .el-menu {
  display: flex !important;
  flex-direction: column !important;
}

.sidebar-container .el-menu-item[index="/document"] {
  order: 1 !important;
  pointer-events: auto !important; /* 确保可点击 */
}

.sidebar-container .el-menu-item[index="/statistics"] {
  order: 2 !important;
  pointer-events: auto !important; /* 确保可点击 */
}

.sidebar-container .el-menu-item[index="/admin"] {
  order: 3 !important;
  pointer-events: auto !important; /* 确保可点击 */
}

/* 移除可能影响点击的样式 */
.sidebar-container .el-menu-item {
  position: relative !important; /* 改回相对定位 */
  z-index: 1 !important; /* 确保有正确的层叠顺序 */
}

/* 菜单基础样式 */
.el-menu {
    border-right: none !important;
    height: 100%;
    width: 100% !important;
    background-color: #001529 !important;
}

.el-menu-item {
    height: 56px !important;
    line-height: 56px !important;
    color: #bfcbd9 !important;
    background-color: #001529 !important;
    padding: 0 20px !important;
    width: 200px !important;
    box-sizing: border-box !important;
}

.el-menu-item:hover {
    color: #fff !important;
    background-color: #263445 !important;
}

.el-menu-item.is-active {
    background-color: #1890ff !important;
    color: #fff !important;
}

/* 图标和文字样式 */
.el-menu-item .el-icon {
    color: #bfcbd9 !important;
    margin-right: 16px !important;
    width: 24px !important;
    text-align: center !important;
}

.el-menu-item:hover .el-icon,
.el-menu-item.is-active .el-icon {
    color: #fff !important;
}

.el-menu-item span {
    color: #bfcbd9 !important;
}

.el-menu-item:hover span,
.el-menu-item.is-active span {
    color: #fff !important;
}

/* 统计页面整体布局 */
.statistics-container {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
    padding: 24px;
}

.statistics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.statistics-header .title {
    font-size: 18px;
    font-weight: 500;
    color: #1f2f3d;
}

.statistics-content {
    padding: 0;
}

/* 统计卡片样式 */
.statistic-card {
    background-color: #f5f7fa;
    border-radius: 4px;
    padding: 20px;
    height: 100%;
    transition: all 0.3s;
}

.statistic-card:hover {
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.statistic-item {
    text-align: center;
}

.statistic-item .label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
}

.statistic-item .value {
    font-size: 24px;
    color: #303133;
    font-weight: bold;
}

/* 表格区域样式 */
.statistics-container .table-operations {
    margin: 24px 0;
    padding: 16px 0;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #f0f0f0;
}

.statistics-container .table-operations .el-button {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.statistics-container .table-operations .el-button .el-icon {
    margin-right: 4px;
    font-size: 16px;
}

/* 优化表格样式 */
.statistics-container .signature-table {
    margin-top: 0;  /* 移除表格顶部边距，因为已经有操作区域的边距 */
}

/* 确保按钮在禁用状态下的样式正确 */
.statistics-container .table-operations .el-button.is-disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* 统计页面表格样式 */
.statistics-container .signature-table {
    width: 100%;
    margin-top: 20px;
}

/* 移除可能影响表头显示的样式 */
.statistics-container .el-table .cell {
    display: inline-block !important;
    width: 100% !important;
    white-space: nowrap !important;
}

/* 表格边框样式 */
.statistics-container .el-table--border {
    border: 1px solid #EBEEF5;
}

/* 表格行hover效果 */
.statistics-container .el-table tbody tr:hover > td {
    background-color: #f5f7fa;
}

/* 表格内标签样式 */
.statistics-container .el-tag {
    margin: 0 auto;
    display: inline-block;
}

/* 表格按钮样式 */
.statistics-container .el-button--link {
    padding: 0;
    height: auto;
    display: inline-block;
}

/* 移除之前可能影响表头显示的样式 */
.statistics-container .el-table .cell {
    display: inline-block;
    width: 100%;
}

/* 确保表格边框显示正确 */
.statistics-container .el-table--border {
    border: 1px solid #EBEEF5;
}

/* 优化表格hover效果 */
.statistics-container .el-table tbody tr:hover > td {
    background-color: #f5f7fa;
}

/* 表格内标签样式 */
.statistics-container .el-tag {
    min-width: 60px;
    text-align: center;
}

/* 表格操作按钮样式 */
.statistics-container .el-button--link {
    padding: 0;
    height: auto;
}

/* 确保表格内容垂直居中 */
.statistics-container .el-table .cell {
    display: flex;
    align-items: center;
    justify-content: center;
}