/* 防抖动专用CSS */

/* 强制硬件加速 */
.main-page,
.sidebar,
.main-content,
.content-container,
#pageContent {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 防止字体渲染导致的抖动 */
body, * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 防止图片加载导致的布局偏移 */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 防止表格内容导致的抖动 */
table {
    table-layout: fixed;
    width: 100%;
}

/* 防止内容溢出导致的抖动 */
.content-container {
    overflow-anchor: none;
}

/* 优化滚动条 */
.content-container::-webkit-scrollbar {
    width: 6px;
}

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

.content-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.content-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 防止动画期间的重排 */
#pageContent {
    contain: layout style paint;
}

/* 减少重绘区域 */
.card, .stat-card, .modal-content {
    contain: layout style;
}

/* 优化菜单点击反馈 */
.menu-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* 防止内容跳跃 */
.skeleton-card {
    min-height: 120px;
}

/* 确保容器尺寸稳定 */
.stats-grid {
    min-height: 200px;
}

.table-container {
    min-height: 300px;
}

/* 优化模态框动画 */
.modal {
    backdrop-filter: blur(2px);
}

.modal-content {
    transform: translateZ(0);
}

/* 防止Toast导致的布局偏移 */
.toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10001;
    contain: layout style paint;
}

/* 优化加载动画 */
.loading-overlay {
    backdrop-filter: blur(1px);
}

/* 减少重绘 */
.btn {
    contain: layout style;
}

/* 防止输入框导致的抖动 */
.form-control:focus {
    transform: translateZ(0);
}

/* 优化分页组件 */
.pagination {
    contain: layout style;
}

/* 防止图标导致的抖动 */
.stat-card-icon {
    flex-shrink: 0;
}

/* 确保侧边栏稳定 */
.sidebar {
    min-width: 260px;
    max-width: 260px;
}

/* 防止内容区域尺寸变化 */
.main-content {
    min-width: 0;
    flex: 1;
}

/* 优化过渡层 */
#transition-layer {
    will-change: opacity;
}