/**
 * 左边栏优化样式
 * 1. 左边栏容器不要滚动条
 * 2. 余额列表的表头固定，表内容需要滚动但不要显示滚动条
 * 3. 币种汇总固定在左边栏底部
 */

/* 1. 左边栏容器去掉滚动条 */
#leftSidebar {
    overflow: hidden !important; /* 去掉滚动条 */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 左边栏卡片调整 - 占满整个左边栏 */
#leftSidebar .card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    position: relative !important; /* 为绝对定位的币种汇总提供定位上下文 */
}

/* 左边栏卡片内容调整 - 使用flex布局 */
#leftSidebar .card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
    padding-bottom: 61px !important; /* 调整底部空间，正好为币种汇总（60px最小高度+1px边框）留出空间 */
}

/* 2. 余额列表区域优化 */
/* 币种余额显示区域 - 固定高度 */
.currency-balance-row {
    flex: 0 0 auto !important;
    height: 50px !important; /* 固定高度 */
    overflow: hidden !important;
}

/* 账户表格外层容器 - 占满剩余空间，但为币种汇总预留空间 */
#leftSidebar .card-body > div:not(.currency-balance-row):not(#currencySummary) {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin-bottom: 0 !important; /* 去掉间距，让表格容器扩展到底部 */
    height: 100% !important; /* 占满可用高度 */
}

/* 账户表格容器重新设计 - 适配新的统一表格结构 */
#leftSidebar .table-responsive {
    height: 100% !important;
    overflow-y: auto !important; /* 允许垂直滚动 */
    overflow-x: hidden !important; /* 隐藏水平滚动条 */
    border: 1px solid #dee2e6 !important;
    border-radius: 0 !important; /* 改为直角 */
    max-height: calc(100vh - 102px) !important; /* 精确计算：导航栏40px + 筛选器50px + 币种汇总最小高度60px + 边框2px = 152px，但要考虑实际布局，调整为102px */
    /* 隐藏滚动条但保持滚动功能 */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
}

/* 隐藏Webkit浏览器的滚动条 */
#leftSidebar .table-responsive::-webkit-scrollbar {
    display: none !important;
}

/* 统一表格样式 - 适配新的表格结构 */
#leftSidebar .account-table {
    width: 100% !important;
    table-layout: fixed !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-color: #ffffff !important;
    /* 确保表格不会被flex布局影响 */
    flex-shrink: 0 !important;
    /* 强制移除表格圆角 */
    border-radius: 0 !important;
}

/* 固定表头样式 */
#leftSidebar .account-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important; /* 与右侧表格一致的表头底部边框 */
    /* 强制移除表头圆角 */
    border-radius: 0 !important;
}

/* 强制移除表头单元格圆角 */
#leftSidebar .account-table thead th {
    border-radius: 0 !important;
}

/* 强制移除表头第一个和最后一个单元格的圆角 */
#leftSidebar .account-table thead th:first-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

#leftSidebar .account-table thead th:last-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 3. 币种汇总固定在底部 */
#currencySummary {
    flex: 0 0 auto !important; /* 固定高度，不伸缩 */
    position: absolute !important; /* 改为绝对定位 */
    bottom: 0 !important; /* 贴到底部 */
    left: 0 !important; /* 贴到左边 */
    right: 0 !important; /* 贴到右边 */
    margin-top: 0 !important; /* 去掉上边距 */
    margin-bottom: 0 !important;
    transform: none !important; /* 去掉向上移动的变换 */
    height: auto !important;
    min-height: 60px !important; /* 最小高度 */
    max-height: 120px !important; /* 最大高度 */
    overflow: hidden !important;
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0 !important;
    padding: 8px 0 8px 8px !important; /* 左右padding不对称，右侧为0 */
    z-index: 5 !important; /* 确保在表格上方 */
}

/* 币种汇总内容样式 - 模拟表格布局 */
#currencySummary .currency-item {
    margin-bottom: 4px !important;
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
}

/* 币种汇总金额区域 - 模拟第二列（60%宽度） */
#currencySummary .currency-value {
    margin-left: 40% !important; /* 从40%位置开始，对应第二列 */
    width: 60% !important; /* 占60%宽度，和部门余额列一致 */
    text-align: right !important;
    padding-right: 8px !important; /* 和表格单元格一致的padding */
    box-sizing: border-box !important;
    margin-right: 0 !important;
    display: block !important;
}

/* 确保左边栏内容正确分布 */
#leftSidebar .card-body {
    /* 使用flex布局分配空间：
       - 币种余额显示：固定高度
       - 账户表格：占满剩余空间
       - 币种汇总：固定在底部
    */
    gap: 0 !important;
}

/* 优化账户表格行样式 */
.account-table tbody tr {
    border-bottom: 1px solid #f0f0f0 !important;
}

.account-table tbody tr:last-child {
    border-bottom: none !important;
}

/* 确保表格单元格样式一致 */
.account-table th,
.account-table td {
    padding: 6px 8px !important;
    vertical-align: middle !important;
    border-right: none !important;
    height: 32px !important; /* 固定行高，与财务记录表格一致 */
    line-height: 1.2 !important;
    font-size: 0.875rem !important;
    box-sizing: border-box !important; /* 添加box-sizing确保高度计算一致 */
}

/* 强制设置表格行高度，确保与右侧表格对齐 */
.account-table tbody tr {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    box-sizing: border-box !important;
}

/* 强制设置表头行高度 */
.account-table thead tr {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    box-sizing: border-box !important;
}

/* 账户名称列样式 - 40%宽度 */
.account-table th:first-child,
.account-table td:first-child {
    width: 40% !important;
    text-align: left !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #000000 !important; /* 账户名称颜色 */
}

/* 部门余额列样式 - 60%宽度 */
.account-table th:nth-child(2),
.account-table td:nth-child(2) {
    width: 60% !important;
    text-align: right !important;
    color: #000000 !important; /* 和账户名称一样的黑色 */
}

/* 部门余额内容保持加粗 */
.account-table td:nth-child(2) {
    font-weight: 600 !important; /* 内容保持加粗 */
}

/* 隐藏第三列（如果存在实际余额列） */
.account-table th:nth-child(3),
.account-table td:nth-child(3) {
    display: none !important;
}

/* 响应式调整 */
@media (max-width: 991.98px) {
    #leftSidebar {
        height: auto !important;
        max-height: 400px !important;
    }
    
    #leftSidebar .table-responsive {
        max-height: 250px !important;
    }
    
    #currencySummary {
        min-height: 40px !important;
        max-height: 80px !important;
    }
}

@media (max-width: 767.98px) {
    #leftSidebar {
        height: auto !important;
        max-height: 300px !important;
    }
    
    #leftSidebar .table-responsive {
        max-height: 200px !important;
    }
    
    #currencySummary {
        min-height: 30px !important;
        max-height: 60px !important;
        padding: 4px !important;
    }
}

/* 强制覆盖可能的冲突样式 */
body #leftSidebar {
    overflow: hidden !important;
}

body #leftSidebar .table-responsive {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    overflow-y: auto !important; /* 强制启用垂直滚动 */
    overflow-x: hidden !important; /* 强制隐藏水平滚动 */
}

body #leftSidebar .table-responsive::-webkit-scrollbar {
    display: none !important;
}

/* 确保表格容器外层div也允许滚动 */
#leftSidebar .card-body > div:not(.currency-balance-row):not(#currencySummary) {
    overflow: visible !important; /* 允许内容溢出到滚动容器 */
}

/* 确保表格本身不会阻止滚动 */
#leftSidebar .account-table {
    overflow: visible !important;
}

body #currencySummary {
    margin-top: 0 !important; /* 去掉上边距 */
    transform: none !important; /* 去掉向上移动的变换 */
    position: absolute !important; /* 强制绝对定位 */
    bottom: 0 !important; /* 强制贴到底部 */
}

#currencySummary .currency-item:last-child {
    margin-bottom: 0 !important;
}