/* =====================================
   移动端优化增强样式
   适配 uscenter-business-v3.css
   ===================================== */

/* ===================================== 
   小屏幕优化 (< 992px)
   ===================================== */
@media (max-width: 992px) {
    .uscenter-container {
        padding: 12px;
        gap: 12px;
    }
    
    .modern-sidebar {
        width: 240px;
    }
    
    .category-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 8px;
    }
}

/* ===================================== 
   平板及手机优化 (< 768px)
   ===================================== */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    
    .uscenter-container {
        padding: 8px;
        display: block !important; /* 取消 flex 布局，防止挤占空间 */
    }

    /* ===================================== 
       左侧菜单 - 彻底从文档流中移出
       ===================================== */
    .modern-sidebar {
        position: fixed !important;
        left: -280px !important; /* 彻底移出左侧 */
        top: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 2000 !important;
        background: #FFFFFF !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2) !important;
        display: block !important;
        margin: 0 !important;
        border: none !important;
    }
    
    .modern-sidebar.active {
        left: 0 !important;
    }
    
    /* 汉堡菜单按钮 (固定定位，不受侧边栏移动影响) */
    .mobile-menu-toggle {
        display: flex !important;
        position: fixed !important;
        left: 15px !important;
        top: 85px !important;
        z-index: 1001 !important;
        width: 48px;
        height: 48px;
        background: #1677FF;
        color: #FFFFFF;
        border: none;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(22, 119, 255, 0.4);
        cursor: pointer;
        font-size: 20px;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-toggle.active {
        left: 230px !important; /* 跟着菜单稍微向右移一点，防止遮挡，或者保持原位 */
        background: #FF4D4F;
    }
    
    .mobile-menu-toggle.active span {
        display: none;
    }
    
    .mobile-menu-toggle.active::before {
        content: "✕";
    }

    /* 遮罩层 */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1999;
    }
    
    .sidebar-overlay.active {
        display: block;
    }

    /* 内容区域全宽 */
    .uscenter-content {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 菜单内部项调整为单列 */
    .category-items {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
    }
    
    .category-items a {
        padding: 12px 20px !important;
        font-size: 15px !important;
        text-align: left !important;
        border-radius: 4px !important;
    }

    /* 其余卡片和订单列表优化逻辑保持不变... */
    .info-card, .order-stats, .recent-orders {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    .account-balance {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }
    
    .order-item {
        display: flex !important;
        flex-direction: column !important;
        padding: 14px !important;
        border: 1px solid #E8E8E8 !important;
        height: auto !important;
    }

    /* ===================================== 
       商品管理/通用表格转卡片优化
       ===================================== */
    
    /* 1. 工具栏优化：按钮行改为横向滚动 */
    .products-toolbar .button-row {
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 10px !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .products-toolbar .button-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .products-toolbar .layui-btn {
        padding: 0 12px !important;
        height: 34px !important;
        line-height: 34px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    /* 2. 搜索栏全宽 */
    .products-toolbar .filter-form {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    
    .products-toolbar .filter-form .layui-input-inline {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 3. 表格转卡片逻辑 */
    .table-container .layui-table thead {
        display: none !important;
    }

    .table-container .layui-table tbody tr {
        display: flex !important;
        flex-direction: column !important;
        background: #FFFFFF !important;
        margin-bottom: 15px !important;
        padding: 15px !important;
        border-radius: 8px !important;
        position: relative !important;
        border: 1px solid #E8E8E8 !important;
        height: auto !important;
    }

    .table-container .layui-table tbody td {
        display: block !important;
        width: 100% !important;
        padding: 6px 0 !important;
        text-align: left !important;
        border: none !important;
    }

    /* 商品基本信息行（图片+名称） */
    .table-container td:nth-of-type(3) {
        order: 1 !important;
        border-bottom: 1px solid #F5F5F5 !important;
        padding-bottom: 12px !important;
        margin-bottom: 8px !important;
    }

    .table-container td:nth-of-type(3) img {
        width: 60px !important;
        height: 60px !important;
        margin-right: 12px !important;
    }

    /* 状态和ID行 - 使用 Flex 布局实现两端对齐 */
    .table-container td:nth-of-type(2), 
    .table-container td:nth-of-type(4),
    .table-container td:nth-of-type(5),
    .table-container td:nth-of-type(6),
    .table-container td:nth-of-type(7) {
        order: 2 !important;
        display: flex !important;
        justify-content: space-between !important;
        font-size: 13px !important;
    }

    .table-container td:nth-of-type(2)::before { content: "商品ID："; color: #8C8C8C; }
    .table-container td:nth-of-type(4)::before { content: "单价："; color: #8C8C8C; }
    .table-container td:nth-of-type(5)::before { content: "成本："; color: #8C8C8C; }
    .table-container td:nth-of-type(6)::before { content: "利润："; color: #8C8C8C; }
    .table-container td:nth-of-type(7)::before { content: "销量："; color: #8C8C8C; }

    /* 复选框右上角 */
    .table-container td:nth-of-type(1) {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        width: auto !important;
        padding: 0 !important;
    }

    /* 状态 */
    .table-container td:nth-last-of-type(2) {
        order: 3 !important;
        padding-top: 10px !important;
    }

    /* 操作按钮 */
    .table-container td:last-of-type {
        order: 4 !important;
        border-top: 1px solid #F5F5F5 !important;
        padding-top: 12px !important;
        margin-top: 8px !important;
    }

    .table-container .layui-btn-group {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .table-container .layui-btn-group .layui-btn {
        flex: 1 !important;
        height: 40px !important;
        line-height: 40px !important;
        margin: 0 !important;
        border-radius: 4px !important;
    }
}

/* 隐藏 PC 端不需要显示的按钮 */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }
    .sidebar-overlay {
        display: none !important;
    }
}