/* ============================================
   移动端特定样式
   ============================================ */

@media (max-width: 767px) {
    /* 主内容区域调整 */
    .main-content {
        padding: var(--space-sm);
        padding-bottom: 90px;
    }
    
    /* 页面标题 */
    .page-header {
        margin-bottom: var(--space-md);
        padding-top: var(--space-sm);
    }
    
    .page-title {
        font-size: 24px;
    }
    
    /* 卡片调整 */
    .card {
        margin-bottom: var(--space-sm);
        border-radius: var(--radius-md);
    }
    
    .card-header,
    .card-content,
    .card-footer {
        padding: var(--space-md);
    }
    
    /* 列表项调整 */
    .list-item {
        padding: var(--space-md);
    }
    
    .list-item-icon {
        width: 44px;
        height: 44px;
    }
    
    .list-item-icon svg {
        width: 20px;
        height: 20px;
    }
    
    /* 按钮调整 */
    .btn {
        padding: 14px 20px;
        font-size: 15px;
    }
    
    .btn-lg {
        padding: 16px 24px;
    }
    
    /* 表单调整 */
    .form-input,
    .form-select,
    .form-textarea {
        padding: 14px;
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    /* 统计网格 */
    .stats-grid {
        gap: var(--space-sm);
    }
    
    .stat-card {
        padding: var(--space-sm);
    }
    
    .stat-value {
        font-size: 20px;
    }
    
    .stat-label {
        font-size: 10px;
    }
    
    /* 英雄区域 */
    .hero {
        padding: var(--space-lg);
        border-radius: var(--radius-lg);
    }
    
    .hero-title {
        font-size: 22px;
    }
    
    /* 浮动按钮位置调整 */
    .fab {
        bottom: 80px;
        right: var(--space-sm);
        width: 52px;
        height: 52px;
    }
    
    /* 底部导航调整 */
    .bottom-nav {
        padding: 6px 0;
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
    
    .nav-item {
        padding: var(--space-xs) var(--space-sm);
        min-width: 56px;
    }
    
    .nav-icon {
        width: 22px;
        height: 22px;
    }
    
    .nav-item span {
        font-size: 10px;
    }
    
    /* 通知调整 */
    .notifications {
        left: var(--space-sm);
        right: var(--space-sm);
        top: var(--space-sm);
    }
    
    .notification {
        padding: var(--space-sm);
    }
    
    /* 模态框全屏 */
    .modal {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 95vh;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--space-md);
    }
    
    /* 空状态调整 */
    .empty-state {
        padding: var(--space-xl) var(--space-md);
    }
    
    .empty-state-icon {
        width: 100px;
        height: 100px;
    }
    
    .empty-state-icon svg {
        width: 50px;
        height: 50px;
    }
}

/* iPhone X及以上安全区域适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    }
    
    .main-content {
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
    }
}

/* 横屏模式优化 */
@media (max-width: 767px) and (orientation: landscape) {
    .bottom-nav {
        padding: var(--space-xs) 0;
    }
    
    .nav-item span {
        display: none;
    }
    
    .nav-icon {
        margin-bottom: 0;
    }
    
    .fab {
        bottom: 70px;
    }
}

/* 触摸优化 */
@media (hover: none) {
    .btn:hover:not(:disabled) {
        transform: none;
    }
    
    .card:hover {
        transform: none;
    }
    
    .list-item:hover {
        background-color: transparent;
    }
    
    .list-item:active {
        background-color: var(--bg-secondary);
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-card: #1e293b;
        --text-primary: #f1f5f9;
        --text-secondary: #94a3b8;
        --text-muted: #64748b;
        --border-color: #334155;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    }
    
    .skeleton {
        background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
        background-size: 200% 100%;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .loader {
        display: none;
    }
}

/* 打印样式 */
@media print {
    .bottom-nav,
    .fab,
    .notifications {
        display: none !important;
    }
    
    .main-content {
        padding-bottom: var(--space-md);
    }
}