/* ==========================================================
 * 商会平台 - 移动端适配补丁 (2026-08-28)
 * 解决:手机打开布局错乱、按钮太小、表格溢出、Modal 撑爆屏幕
 *
 * 与 mobile.css 互补:本文件用 !important 强制覆盖内联 style
 * 以及那些漏挂 mobile.css 的页面(共 11 个: network.html 等)
 *
 * 应用范围:所有 HTML 页面(通过 main.py 中间件统一注入)
 * ========================================================== */

/* === 防止水平滚动(基础) === */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* === 主容器撑满 === */
@media (max-width: 768px) {
    body > .container,
    body > .main-container,
    body > .wrapper,
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
    }

    /* Header 压缩 */
    .page-header,
    .header,
    .navbar {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
    .page-header .title,
    .header .header-title,
    .navbar h1 {
        font-size: 16px !important;
        max-width: 60vw !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 侧边栏抽屉化(覆盖内联 style) */
    .sidebar {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 75vw !important;
        max-width: 280px !important;
        z-index: 1000 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease !important;
        padding-top: 60px !important;
    }
    .sidebar.open, .sidebar.active, .sidebar.show {
        transform: translateX(0) !important;
    }

    /* 表格:横滚容器,避免列挤压 */
    table:not(.table) {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        max-width: 100% !important;
        font-size: 12px !important;
    }
    table:not(.table) th, table:not(.table) td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* 表单输入 */
    input, select, textarea, .form-control {
        font-size: 16px !important;
        max-width: 100% !important;
    }

    /* 按钮触摸友好(最小 40px) */
    .btn, button {
        min-height: 40px !important;
        padding: 10px 16px !important;
    }

    /* Modal/Dialog 全屏化 */
    .modal, .detail-modal, .detail-box, .dialog,
    [class*="modal"]:not([class*="overlay"]) {
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .modal-overlay, .detail-modal-overlay,
    [class*="modal-overlay"] {
        padding: 0 !important;
        align-items: flex-start !important;
    }

    /* 网格塌缩到 2 列(避免被压扁) */
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 详情行:label 换行 */
    .detail-row, .info-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .detail-label, .info-label {
        width: 100% !important;
        margin-bottom: 4px !important;
    }

    /* 主区滚动容器:禁止水平溢出 */
    .main-container, .content {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* 桌面专属元素隐藏 */
    .desktop-only, .only-pc { display: none !important; }
}

/* === 小屏手机(< 375px) === */
@media (max-width: 374px) {
    body { font-size: 13px !important; }
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr !important;
    }
    .page-header, .header, .navbar {
        padding: 8px 10px !important;
    }
}

/* =================================================================
 * 【2026-08-28 补充】业务卡 mobile 适配
 * 覆盖 network.html + business_card.html 的 inline style 业务卡
 * 解决:人脉圈推荐列表看不全、版面乱、名片页"长长的竖条"
 * 优先级:用 !important 压过 inline <style>(.card-flip / .member-card 等)
 * ================================================================= */
@media (max-width: 768px) {
    /* ----- network.html: 顶部 Header / KPI / Tab ----- */
    .header { padding: 10px 14px !important; }
    .header-title { font-size: 16px !important; }
    .kpi-bar {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
        padding: 10px 4px !important;
        margin-bottom: 10px !important;
    }
    .kpi-item { padding: 2px !important; }
    .kpi-num { font-size: 16px !important; }
    .kpi-label { font-size: 10px !important; }
    .tab-nav {
        padding: 3px !important;
        margin-bottom: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tab-btn { font-size: 12px !important; padding: 7px 4px !important; min-width: 56px !important; }

    /* ----- network.html: 推荐人脉列表 (subtabs) ----- */
    .subtabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
    }
    .subtab {
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* ----- network.html: 会员卡 (member-card) 横排 → 紧凑 ----- */
    .member-card {
        padding: 12px !important;
        gap: 10px !important;
        align-items: center !important;
        border-radius: 12px !important;
    }
    .member-avatar {
        width: 42px !important;
        height: 42px !important;
        font-size: 16px !important;
        flex-shrink: 0 !important;
    }
    .member-info { min-width: 0 !important; flex: 1 1 auto !important; }
    .member-name {
        font-size: 14px !important;
        font-weight: 700 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
    .member-meta { font-size: 11px !important; }
    .member-tags { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin-top: 4px !important; }
    .member-tags .tag { font-size: 10px !important; padding: 2px 6px !important; }
    .member-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .member-actions .btn {
        min-height: 32px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    /* ----- network.html: 名片大卡 (business-card) ----- */
    .business-card {
        padding: 14px !important;
        margin-bottom: 12px !important;
    }
    .business-card .bc-name { font-size: 16px !important; }
    .business-card .bc-meta { font-size: 11px !important; }
    .business-card .bc-info {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    .business-card .bc-info-item { font-size: 11px !important; }
    .business-card .bc-scope { font-size: 11px !important; padding-top: 8px !important; }
    .business-card .bc-stats { gap: 12px !important; }
    .business-card .bc-stat-num { font-size: 14px !important; }

    /* ----- network.html: 卡片/容器 ----- */
    .card { padding: 12px !important; border-radius: 12px !important; margin-bottom: 10px !important; }
    .card-title { font-size: 14px !important; }
    .container { padding: 10px !important; }

    /* ----- business_card.html: 翻卡 ----- */
    .page { padding: 16px 14px 0 !important; max-width: 100% !important; }
    .card-stage {
        perspective: none !important;        /* 移动端关闭 3D,避免 GPU 压力 */
        margin-bottom: 16px !important;
    }
    .card-flip {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1.586 / 1 !important;    /* 名片国际比例兜底 */
        /* 老浏览器兜底:aspect-ratio 不支持时给个最小高度 */
        min-height: 200px !important;
        transform-style: flat !important;
        cursor: default !important;           /* 移动端不触屏翻转,避免误触 */
    }
    .card-face {
        border-radius: 18px !important;
        box-shadow: 0 8px 24px rgba(15, 52, 96, 0.15) !important;
    }
    .card-front { padding: 16px 18px !important; }
    .card-back { padding: 16px 18px !important; gap: 14px !important; }
    .card-company { font-size: 16px !important; }
    .card-avatar { width: 48px !important; height: 48px !important; font-size: 18px !important; }
    .card-person { font-size: 11px !important; }
    .card-tag { font-size: 10px !important; padding: 2px 7px !important; }
    .card-contact-mini .num { font-size: 13px !important; }
    .qr-box { width: 100px !important; height: 100px !important; padding: 6px !important; }
    .back-info .share-code { font-size: 18px !important; letter-spacing: 2px !important; }

    /* ----- business_card.html: 统计条 (3 列) ----- */
    .stat-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }
    .stat-cell { padding: 10px 6px !important; }
    .stat-cell .num { font-size: 18px !important; }
    .stat-cell .label { font-size: 10px !important; }

    /* ----- business_card.html: 信息卡 section ----- */
    .section {
        padding: 14px !important;
        border-radius: 16px !important;
        margin-bottom: 12px !important;
    }
    .section-head { margin-bottom: 10px !important; }
    .section-head .title { font-size: 13px !important; }
    .section-head .icon-wrap { width: 26px !important; height: 26px !important; }
    .section-head .sub { font-size: 10px !important; }

    .info-grid { gap: 8px !important; padding-bottom: 8px !important; }
    .info-item { padding: 8px 10px !important; gap: 10px !important; }
    .info-item .ico { width: 28px !important; height: 28px !important; }
    .info-item .meta .v { font-size: 12px !important; }
    .info-item .meta .k { font-size: 9px !important; }
    .info-item .copy { font-size: 10px !important; padding: 3px 6px !important; }

    /* ----- business_card.html: 标签云 ----- */
    .tag-cloud { gap: 6px !important; padding-bottom: 10px !important; }
    .cloud-tag { font-size: 11px !important; padding: 4px 10px !important; }

    /* ----- business_card.html: 简介 ----- */
    .intro-text { font-size: 12px !important; padding-bottom: 10px !important; }

    /* ----- business_card.html: 法人照片 ----- */
    .legal-photo-row { padding: 8px 10px !important; gap: 10px !important; }
    .legal-photo-thumb { width: 56px !important; height: 56px !important; }

    /* ----- business_card.html: 操作按钮 ----- */
    .actions {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    .action-btn { padding: 12px 4px !important; font-size: 11px !important; }
    .action-btn .ico { width: 32px !important; height: 32px !important; }
    .action-btn .ico svg { width: 16px !important; height: 16px !important; }

    /* ----- business_card.html: Modal 全屏化 ----- */
    .modal { padding: 12px !important; }
    .modal-content { padding: 18px !important; max-height: 92vh !important; }
    .modal-head .title { font-size: 15px !important; }
    .form-group input, .form-group textarea { font-size: 16px !important; }
    .modal-submit { padding: 11px !important; font-size: 13px !important; }

    /* ----- network.html: 私信/发布 modal ----- */
    .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
    .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh !important;
        border-radius: 16px 16px 0 0 !important;
    }
    .chat-modal-card { border-radius: 16px 16px 0 0 !important; }

    /* ----- 隐私提示横幅 ----- */
    .privacy-banner { margin: 8px 10px 0 !important; padding: 8px 12px !important; font-size: 12px !important; }
}

/* 小屏 (<375px) 名片再压缩 */
@media (max-width: 374px) {
    .card-flip { min-height: 180px !important; }
    .card-company { font-size: 14px !important; }
    .card-avatar { width: 42px !important; height: 42px !important; font-size: 16px !important; }
    .qr-box { width: 86px !important; height: 86px !important; }
    .back-info .share-code { font-size: 16px !important; }
    .stat-row { gap: 6px !important; }
    .stat-cell .num { font-size: 16px !important; }
    .actions { grid-template-columns: 1fr 1fr !important; }
}