/* ==========================================================================
   移动端优化 - Mobile Optimization
   --------------------------------------------------------------------------
   专注于移动端体验的商业级优化
   ========================================================================== */

:root {
    --mobile-bottom-nav-height: 64px;
    --mobile-touch-target: 44px;
}

/* ==========================================================================
   移动端表单优化
   ========================================================================== */

@media (max-width: 768px) {
    /* 表单控件 - 更大的触摸目标 */
    .form-control,
    .form-select {
        min-height: var(--mobile-touch-target);
        font-size: 16px; /* 防止 iOS 自动缩放 */
    }

    .btn {
        min-height: var(--mobile-touch-target);
        padding: 12px 20px;
        font-size: 15px;
    }

    /* 表单布局 */
    .form-group {
        margin-bottom: 20px;
    }

    .form-label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    /* 输入组 */
    .input-group {
        flex-wrap: nowrap;
    }

    .input-group .btn {
        white-space: nowrap;
    }
}

/* ==========================================================================
   移动端卡片优化
   ========================================================================== */

@media (max-width: 768px) {
    .card {
        border-radius: 12px;
        margin-bottom: 16px;
    }

    .card-body {
        padding: 16px;
    }
}

/* ==========================================================================
   移动端导航优化
   ========================================================================== */

@media (max-width: 768px) {
    /* Tab 导航 */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        padding: 10px 16px;
        font-size: 14px;
    }

    .mobile-bottom-nav { height: var(--mobile-bottom-nav-height); }
}

/* ==========================================================================
   移动端模态框优化
   ========================================================================== */

@media (max-width: 768px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
    }

    .modal-content {
        border-radius: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 底部操作栏 */
    .modal-footer {
        border-top: 1px solid var(--surface-border, #e5e7eb);
        padding: 16px;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    }

    .modal-footer .btn {
        flex: 1;
    }
}

/* ==========================================================================
   移动端 Toast 优化
   ========================================================================== */

@media (max-width: 768px) {
    #toast-container {
        bottom: calc(var(--mobile-bottom-nav-height, 64px) + 16px);
        top: auto;
        left: 16px;
        right: 16px;
        max-width: none;
    }

    #toast-container .toast {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================================
   触摸优化
   ========================================================================== */

@media (max-width: 768px) {
    /* 点击反馈 */
    .btn,
    .card {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
    }

    /* 防止长按选择 */
    .btn {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ==========================================================================
   移动端性能优化
   ========================================================================== */

@media (max-width: 768px) {
    /* GPU 加速 */
    .mobile-bottom-nav,
    .modal-content {
        transform: translateZ(0);
        will-change: transform;
    }
}

/* ==========================================================================
   横屏优化
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .mobile-bottom-nav {
        height: 56px;
    }

    /* 减少垂直间距 */
    .card {
        margin-bottom: 8px;
    }
}

/* ==========================================================================
   安全区域适配（刘海屏等）
   ========================================================================== */

@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .mobile-bottom-nav {
            padding-bottom: env(safe-area-inset-bottom);
            height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
        }
    }
}