/* ==========================================================================
   文林商户后台 - 全局基础样式
   ========================================================================== */

/* 隐藏原生滚动条，让界面更像 App */
::-webkit-scrollbar {
    display: none;
}

/* 弹窗淡入缩放动画 */
.modal-animation {
    animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   核心布局：解决左右分离/居中失效的问题
   ========================================================================== */

/* 右侧主内容区：占满剩余空间，左边留出 64 的间距给固定的侧边栏 */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    background-color: #f3f4f6; /* bg-gray-100 */
}

@media (min-width: 768px) {
    .main-content {
        margin-left: 16rem; /* 256px，也就是 w-64 */
    }
}

/* 内部的滚动容器 */
.content-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 5rem; /* 防止内容被底部遮挡 */
}

/* 列表容器：利用 Padding 控制边缘距离，不再用 mx-auto 居中 */
.list-container {
    width: 100%;
    padding: 1rem;
}

@media (min-width: 768px) {
    .list-container {
        padding: 2rem; 
        padding-left: 2.5rem; /* 稍微多给左边一点呼吸感 */
    }
}

/* 手机端顶部遮挡修复 */
.mobile-top-offset {
    margin-top: 108px;
}
@media (min-width: 768px) {
    .mobile-top-offset {
        margin-top: 0;
    }
}