/* 全局手机适配样式 */

/* 基础设置 */
body {
    /* 防止iOS Safari缩放 */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* 手机端通用样式 */
@media (max-width: 768px) {
    /* 容器内边距调整 */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* 卡片间距 */
    .bg-white {
        margin-bottom: 1rem;
    }
    
    /* 按钮适配 */
    .btn, button {
        min-height: 44px; /* iOS推荐的最小点击区域 */
        padding: 0.75rem 1.5rem;
    }
    
    /* 输入框适配 */
    input, textarea, select {
        min-height: 44px;
        font-size: 16px; /* 防止iOS缩放 */
        padding: 0.75rem;
    }
    
    /* 表格响应式 */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 模态框适配 */
    .modal {
        padding: 1rem;
    }
    
    .modal .bg-white {
        margin: 0;
        max-width: 100%;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* 导航栏适配 */
    nav {
        padding: 0.5rem 1rem;
    }
    
    /* 底部导航栏上方留出空间 */
    body {
        padding-bottom: 60px;
    }
    
    /* 避免内容被底部导航遮挡 */
    main {
        padding-bottom: 2rem;
    }
    
    /* 文字大小调整 */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    /* 网格布局调整 */
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    
    /* 弹性布局调整 */
    .flex-row {
        flex-direction: column;
    }
    
    /* 间距调整 */
    .gap-6 { gap: 1rem; }
    .gap-8 { gap: 1.5rem; }
    .space-x-6 > * + * { margin-left: 0; margin-top: 1rem; }
    
    /* 图片响应式 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 头像移动端优化 */
    .w-8.h-8.rounded-full {
        width: 32px !important;
        height: 32px !important;
    }
    
    .w-10.h-10.rounded-full {
        width: 40px !important;
        height: 40px !important;
    }
    
    .w-12.h-12.rounded-full {
        width: 48px !important;
        height: 48px !important;
    }
    
    .w-16.h-16.rounded-full {
        width: 64px !important;
        height: 64px !important;
    }
    
    .w-20.h-20.rounded-full {
        width: 80px !important;
        height: 80px !important;
    }
    
    /* 分页适配 */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination a {
        margin: 0.25rem;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .grid-cols-2 { grid-template-columns: 1fr; }
    .grid-cols-3 { grid-template-columns: 1fr; }
    .grid-cols-4 { grid-template-columns: 1fr; }
    
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }
}

/* 横屏适配 */
@media (max-width: 768px) and (orientation: landscape) {
    body {
        padding-bottom: 0;
    }
    
    #mobileBottomMenu {
        position: relative;
    }
}

/* 高屏设备适配 */
@media (min-height: 812px) {
    /* iPhone X 及以上 */
    .safe-area-top {
        padding-top: env(safe-area-inset-top);
    }
    
    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* 修复iPhone X系列的底部安全区域 */
@supports (padding: max(0px)) {
    #mobileBottomMenu {
        padding-bottom: max(env(safe-area-inset-bottom), 0px);
    }
}

/* 移动端导航栏固定 */
@media (max-width: 768px) {
    #mobileBottomMenu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    
    /* 确保导航栏贴底 */
    body {
        padding-bottom: 60px;
    }
    
    /* iPhone X及以上的特殊处理 */
    @supports (padding: max(0px)) {
        #mobileBottomMenu {
            padding-bottom: env(safe-area-inset-bottom);
            height: calc(60px + env(safe-area-inset-bottom));
        }
        
        body {
            padding-bottom: calc(60px + env(safe-area-inset-bottom));
        }
    }
}

/* 图标修复 */
.fa, .fas, .far, .fab {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Lucide图标初始化 */
[data-lucide] {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* 头像通用优化 */
.rounded-full {
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* 确保所有圆形图片不变形 */
img.rounded-full,
.w-8.h-8.rounded-full,
.w-10.h-10.rounded-full,
.w-12.h-12.rounded-full,
.w-16.h-16.rounded-full,
.w-20.h-20.rounded-full,
.w-24.h-24.rounded-full {
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
}

/* 头像容器优化 */
.avatar-container {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 确保FontAwesome正确加载 */
@font-face {
    font-family: 'FontAwesome';
    src: url('/assets/fonts/fontawesome-webfont.woff2') format('woff2'),
         url('/assets/fonts/fontawesome-webfont.woff') format('woff'),
         url('/assets/fonts/fontawesome-webfont.ttf') format('truetype');
}