/* 
 * GAMX-UI - 响应式布局样式
 * 版本: 1.0.0
 * 描述: 提供所有与响应式布局相关的样式定义
 */

/* ---------- 基础响应式变量 ---------- */
:root {
    /* 默认侧边栏宽度 */
    --sidebar-width: 240px;
}

/* ---------- 响应式布局样式 ---------- */
/* 大屏幕 */
@media (min-width: 1600px) {
    :root {
        --sidebar-width: 220px;
    }
}

/* 普通桌面屏幕 */
@media (min-width: 1200px) and (max-width: 1599px) {
    :root {
        --sidebar-width: 240px;
    }
}

/* iPad Air 横屏模式 (1180px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    :root {
        --sidebar-width: 180px; /* 降低宽度以适应iPad Air */
    }
    
    /* 适应iPad的字体大小 */
    .sidebar .main-nav li {
        font-size: 14px;
    }
    
    .sidebar .logo img {
        width: 100px; /* 缩小logo */
    }
    
    /* iPad Air上的Chrome修复 */
    .sidebar {
        overflow-y: auto; /* 允许整个侧边栏滚动 */
        display: flex;
        flex-direction: column;
    }
    
    .user-section {
        position: relative; /* 确保定位属性 */
        bottom: 0;
        padding: 8px; /* 减少内边距 */
    }
    
    .user-profile {
        padding: 6px; /* 减少内边距 */
    }
}

/* 小型桌面和大型平板 */
@media (min-width: 992px) and (max-width: 1023px) {
    :root {
        --sidebar-width: 220px;
    }
}

/* 普通平板尺寸 */
@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --sidebar-width: 200px;
    }
}

/* iPad竖屏模式 */
@media (min-width: 700px) and (max-width: 767px) {
    :root {
        --sidebar-width: 180px;
    }
    
    /* 覆盖移动设备的样式，使iPad竖屏时侧边栏仍然可见 */
    .sidebar {
        position: relative;
        transform: none;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    
    .main-content {
        width: calc(100% - 180px);
    }
    
    /* iPad竖屏Chrome修复 */
    .user-section {
        position: relative;
        bottom: 0;
        padding: 8px;
    }
}

/* 移动设备尺寸 */
@media (max-width: 699px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 1000;
        transform: translateX(-100%);
        display: flex;
        flex-direction: column;
    }
    
    .sidebar.mobile-visible,
    .sidebar.mobile-open {
        transform: translateX(0);
        display: block;
    }
    
    .main-content {
        width: 100%;
        margin-left: 0;
    }
}

/* 中小屏幕优化 */
@media (max-width: 480px) {
    /* 缩放 iframe 内容 */
    #content-frame {
        transform: scale(1.0);
        transform-origin: top left;
        width: 105.3%;
    }
}

@media (max-width: 375px) {
    /* 更小屏幕进一步缩放 */
    #content-frame {
        transform: scale(1.0);
        transform-origin: top left;
        width: 111.1%;
    }
}

/* ---------- 用户面板响应式样式 ---------- */
@media (max-width: 768px) {
    body {
        padding-top: var(--mobile-header-height);
        -webkit-tap-highlight-color: transparent; /* 移除触摸高亮 */
    }
    
    .app-container {
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }
    
    .mobile-header {
        display: flex;
    }
    
    /* 侧边栏移动端样式 */
    .sidebar {
        transform: translateX(-100%) translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        position: fixed;
        top: var(--mobile-header-height);
        left: 0;
        width: 260px;
        height: calc(100vh - var(--mobile-header-height));
        z-index: 990;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: transform 0.3s ease;
    }
    
    .logo {
        display: none;
    }
    
    .main-content {
        margin-left: 0;
        width: 100%;
        height: calc(100vh - var(--mobile-header-height));
        overflow: hidden;
        -webkit-overflow-scrolling: touch; /* 平滑滚动 */
    }
    
    .content-wrapper {
        height: 100%;
        overflow: hidden;
    }
    
    #content-frame {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        border: none !important;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* 用户区域调整 */
    .user-section {
        display: none;
    }
    
    /* 确保侧边栏 z-index 正确 */
    .sidebar.mobile-open {
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
        z-index: 999;
    }
    
    /* 隐藏侧边栏内的移动菜单切换 */
    .sidebar .mobile-menu-toggle {
        display: none;
    }
    
    /* 用户详情面板响应式调整 */
    .user-detail-panel {
        width: 95%;
        max-height: 95vh;
    }
    
    .user-detail-panel .profile-header {
        padding: 20px;
    }
    
    .user-detail-panel .profile-header-top {
        gap: 15px;
    }
    
    .user-detail-panel .profile-picture {
        width: 80px;
        height: 80px;
    }
    
    .user-detail-panel .profile-info h2 {
        font-size: 20px;
    }
    
    .user-detail-panel .profile-stats {
        padding-right: 10px; /* 添加右侧内边距方便滚动 */
    }
    
    .user-detail-panel .stat {
        min-width: 100px; /* 在小屏幕上进一步减小最小宽度 */
        padding: 8px 12px; /* 减小内边距 */
    }
    
    .user-detail-panel .stat .value {
        font-size: 14px; /* 减小字体 */
    }
    
    .settings-content {
        padding: 15px 20px 25px;
    }
}

/* 用户详情信息响应式调整 */
@media (max-width: 768px) {
    .user-detail-panel .info-grid {
        grid-template-columns: repeat(2, 1fr); /* 在小屏幕上调整为两栏 */
    }
}

@media (max-width: 480px) {
    .user-detail-panel .info-grid {
        grid-template-columns: 1fr; /* 在极小屏幕上调整为单栏 */
    }
    
    .settings-tabs {
        justify-content: center;
    }
    
    .settings-tab {
        padding: 10px 15px;
        font-size: 13px;
    }
}

/* iOS设备特殊处理 */
@supports (-webkit-touch-callout: none) {
    /* 仅针对iOS设备 */
    .sidebar {
        height: -webkit-fill-available; /* 使用iOS特有的高度属性 */
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .user-section {
        position: relative;
        margin-top: auto;
        flex-shrink: 0;
    }
    
    /* 确保main-nav不会挤压user-section */
    .main-nav {
        flex: 1 1 auto;
        max-height: calc(100% - 150px); /* 保留足够空间给logo和user-section */
        overflow-y: auto;
    }
}