/* 
 * 响应式布局优化 - Progressive Enhancement
 * 适配设备: 手机 (<=768px), 平板 (768px - 1024px)
 * 加载方式: 追加到 user/css/style.css 末尾
 */

/* =========================================
   全局触控友好性优化 (Global Touch Friendly)
   ========================================= */
/* 增加点击区域，提升触控体验 */
@media (max-width: 1024px) {
    .btn {
        min-height: 44px; /* iOS 建议最小触控高度 */
        padding: 10px 16px;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .form-control {
        height: 44px;
        font-size: 16px; /* 防止 iOS 自动缩放 */
    }
    
    .menu-item, .submenu-item {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    
    /* 表格行高增加 */
    .table td, .table th {
        padding: 12px 10px;
    }
}

/* =========================================
   平板端优化 (Tablet: 768px - 1024px)
   ========================================= */
@media (min-width: 768px) and (max-width: 1024px) {
    /* 侧边栏自动收缩为图标模式，而不是完全隐藏 */
    .sidebar {
        width: 60px;
        transform: none !important; /* 覆盖默认的隐藏行为 */
    }
    
    .sidebar .brand span,
    .sidebar .menu-item span:not(.tooltip),
    .sidebar .submenu,
    .sidebar .arrow {
        display: none;
    }
    
    .sidebar .menu-item {
        justify-content: center;
        padding: 15px 0;
    }
    
    .sidebar .menu-item i {
        margin-right: 0;
        font-size: 18px;
    }
    
    .main-content {
        margin-left: 60px;
    }
    
    /* 统计卡片保持2列 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================
   手机端优化 (Mobile: <= 768px)
   ========================================= */
@media (max-width: 768px) {
    /* 1. 导航结构优化 */
    .sidebar {
        width: 240px; /* 增加宽度，更易阅读 */
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        z-index: 9999;
    }
    
    /* 遮罩层，当侧边栏打开时显示 */
    .sidebar.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 240px;
        right: -100vw;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: -1;
    }

    /* 2. 头部优化 */
    .header {
        flex-direction: row; /* 保持横向，节省垂直空间 */
        flex-wrap: wrap;
        padding: 10px 15px;
        gap: 10px;
    }
    
    .header h4 {
        font-size: 15px;
        width: auto;
    }
    
    .header .user-info {
        width: 100%;
        justify-content: space-between;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
    }
    
    /* 3. 卡片与间距 */
    .content-area {
        padding: 10px;
    }
    
    .card {
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 8px;
    }
    
    /* 4. 表格优化 - 卡片式视图或横向滚动 */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 如果表格列数不多，保持表格；如果列数多，建议用 JS 切换为卡片视图，
       这里CSS方案采用强制横向滚动，并优化滚动条 */
    .table {
        min-width: 600px; /* 强制表格最小宽度，触发滚动 */
    }

    /* 5. 统计卡片 */
    .stats-grid {
        grid-template-columns: 1fr; /* 单列 */
        gap: 10px;
    }
    
    .stat-card {
        display: flex;
        align-items: center;
        padding: 15px;
    }
    
    .stat-card .icon {
        margin-bottom: 0;
        margin-right: 15px;
        width: 48px;
        height: 48px;
    }
    
    .stat-card .info-wrap {
        flex: 1;
    }
    
    /* 6. 模态框优化 */
    .modal-dialog {
        margin: 10px;
        width: auto;
    }
    
    .modal-content {
        border-radius: 8px;
    }

    /* 7. Iframe 容器优化 */
    /* 确保 iframe 不会撑破容器 */
    iframe {
        max-width: 100%;
        width: 1px; /* Hack: 让 flex item 收缩 */
        min-width: 100%;
    }
}

/* =========================================
   工具类与辅助
   ========================================= */
/* 隐藏滚动条但保留功能 (Optional) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
