/**
 * FitChallenge 移动端基础样式
 * 
 * 用途：提供统一的移动端布局基础规则，确保所有页面在320px-430px设备上100%兼容
 * 创建时间：2025-10-12
 * 
 * 核心原则：
 * 1. 流式布局 + 最大宽度约束
 * 2. 统一盒模型 (box-sizing: border-box)
 * 3. 防御性CSS (防止元素溢出)
 * 4. 移动优先，不考虑PC端
 */

/* ===== CSS 变量定义 ===== */
:root {
    /* 容器尺寸 */
    --app-max-width: 430px;      /* iPhone 14 Pro Max 宽度 */
    --app-min-width: 320px;      /* 最小支持宽度 */
    
    /* 间距系统 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    
    /* 标准内边距 */
    --app-padding-x: 16px;
    --app-padding-y: 20px;
    
    /* 圆角 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    
    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    
    /* 字体大小 */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-2xl: 24px;
}

/* ===== 全局重置和基础规则 ===== */

/**
 * 统一盒模型为 border-box
 * 确保 padding 和 border 包含在元素宽度内，避免溢出
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/**
 * HTML根元素设置
 * - 防止iOS自动调整字体大小
 * - 设置基准字体大小
 */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/**
 * Body基础样式
 * - 移除默认margin/padding
 * - 防止横向滚动
 * - 字体平滑
 */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**
 * App主容器
 * 关键：使用 width: 100% + max-width 确保所有设备兼容
 */
#app {
    width: 100%;
    max-width: var(--app-max-width);
    min-width: var(--app-min-width);
    margin: 0 auto;
    background: white;
    min-height: 100vh;
    position: relative;
}

/* ===== 防御性全局规则 ===== */

/**
 * 媒体元素防溢出
 * 确保图片、视频等不超出容器
 */
img,
video,
iframe,
canvas,
svg,
picture {
    max-width: 100%;
    height: auto;
    display: block;
}

/**
 * 表格响应式处理
 * 包装在 .table-wrapper 中的表格可以横向滚动
 */
.table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--spacing-lg);
}

table {
    width: 100%;
    border-collapse: collapse;
}

/**
 * 预格式化文本处理
 * 防止代码块超出容器
 */
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/**
 * 长文本处理
 * 用于地址、哈希值等长字符串
 */
.text-break,
.address-text,
.hash-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/**
 * 单行文本省略
 */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 页面容器标准化 ===== */

/**
 * 统一的页面容器类
 * 所有页面应使用此类或继承此规则
 */
.page-container {
    width: 100%;
    max-width: 100%;
    padding: var(--app-padding-y) var(--app-padding-x);
    box-sizing: border-box;
}

/**
 * 页面头部
 */
.page-header {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--spacing-xl);
}

/**
 * 页面内容区域
 */
.page-content {
    width: 100%;
    max-width: 100%;
}

/**
 * 页面底部
 */
.page-footer {
    width: 100%;
    max-width: 100%;
    margin-top: var(--spacing-xl);
}

/* ===== 表单元素标准化 ===== */

/**
 * 表单区块
 */
.form-section {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--spacing-xl);
}

.form-section:last-child {
    margin-bottom: 0;
}

/**
 * 表单标签
 */
.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-sm);
    font-weight: 500;
}

/**
 * 表单输入框
 */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-md);
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-sm);
    font-size: var(--font-md);
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
}

/**
 * 表单按钮
 */
.form-button {
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-md);
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

/* ===== 卡片布局标准化 ===== */

/**
 * 通用卡片容器
 */
.card {
    width: 100%;
    max-width: 100%;
    padding: var(--spacing-lg);
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    margin-bottom: var(--spacing-lg);
}

.card:last-child {
    margin-bottom: 0;
}

/**
 * 卡片头部
 */
.card-header {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--spacing-md);
}

/**
 * 卡片内容
 */
.card-content {
    width: 100%;
    max-width: 100%;
}

/**
 * 卡片底部
 */
.card-footer {
    width: 100%;
    max-width: 100%;
    margin-top: var(--spacing-md);
}

/* ===== Flexbox 辅助类 ===== */

/**
 * Flex容器
 */
.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-between {
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    justify-content: flex-start;
    align-items: center;
}

.flex-end {
    justify-content: flex-end;
    align-items: center;
}

/**
 * Flex子元素
 * 关键：min-width: 0 允许flex子元素收缩到小于内容宽度
 */
.flex-1 {
    flex: 1 1 0%;
    min-width: 0;
}

.flex-auto {
    flex: 1 1 auto;
    min-width: 0;
}

.flex-none {
    flex: none;
}

/* ===== 间距辅助类 ===== */

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* ===== 可访问性和触摸优化 ===== */

/**
 * 最小触摸目标尺寸
 * iOS Human Interface Guidelines: 44x44pt
 * Material Design: 48x48dp
 */
.touch-target {
    min-width: 44px;
    min-height: 44px;
}

/**
 * 移除点击高亮
 */
.no-tap-highlight {
    -webkit-tap-highlight-color: transparent;
}

/**
 * 防止文本选择
 */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ===== 滚动优化 ===== */

/**
 * 平滑滚动容器
 */
.scroll-container {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

.scroll-container-x {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
}

/* ===== 隐藏元素 ===== */

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

/* ===== 调试辅助（开发环境使用） ===== */

/**
 * 显示布局边界
 * 用法：在body上添加 .debug-layout 类
 */
.debug-layout * {
    outline: 1px solid rgba(255, 0, 0, 0.3);
}

.debug-layout *:hover {
    outline: 2px solid rgba(255, 0, 0, 0.6);
}