/* ═══════════════════════════════════════════════════════════
   需声二 · 食堂商机雷达 — 移动端适配样式
   ═══════════════════════════════════════════════════════════ */

/* ─── 移动端导航 hamburger ─────────────────────────────── */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    padding: 6px;
}

/* ─── PWA 安装提示 ──────────────────────────────────────── */
.pwa-banner {
    display: none;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    color: white;
    padding: 10px 20px;
    font-size: 13px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.pwa-banner.show { display: flex; }
.pwa-banner button {
    background: white;
    color: #4f46e5;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.pwa-banner .dismiss {
    background: transparent;
    color: rgba(255,255,255,0.8);
    font-size: 18px;
    padding: 4px 8px;
}

/* ─── 触摸优化 ─────────────────────────────────────────── */
@media (pointer: coarse) {
    .btn, button { min-height: 44px; min-width: 44px; }
    .deal-card, .opp-card, .contact-card { padding: 14px; }
    .stat-card, .stat-box { padding: 14px 16px; }
    .nav a { padding: 10px 14px; }
}

/* ─── 平板 (<= 1024px) ────────────────────────────────── */
@media (max-width: 1024px) {
    .kanban { gap: 8px; padding: 14px; }
    .kanban-col { min-width: 200px; }
    .list-view, .main { padding: 14px; }
}

/* ─── 手机 (<= 768px) ────────────────────────────────── */
@media (max-width: 768px) {
    /* Header */
    .header { padding: 12px 16px; flex-wrap: wrap; }
    .header-left { width: 100%; flex-direction: column; align-items: flex-start; gap: 0; }
    .header h1 { font-size: 17px; }
    .header .subtitle { font-size: 11px; }
    .mobile-toggle { display: block; position: absolute; right: 16px; top: 14px; }

    /* Nav 折叠 */
    .nav {
        width: 100%;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease;
        flex-wrap: wrap;
        gap: 2px;
        margin-top: 0;
    }
    .nav.open { max-height: 200px; margin-top: 10px; }
    .nav a { flex: 1; text-align: center; padding: 10px 8px; font-size: 13px; }

    /* Actions */
    .header .actions { width: 100%; margin-top: 10px; justify-content: stretch; }
    .header .actions .btn { flex: 1; text-align: center; font-size: 12px; padding: 10px 8px; }

    /* Stats bar */
    .stats-bar, .stats-row { padding: 10px 12px; gap: 8px; }
    .stat-card, .stat-box { min-width: 90px; padding: 10px 12px; }
    .stat-card .number, .stat-box .number { font-size: 18px; }
    .stat-card .label, .stat-box .label { font-size: 10px; }

    /* 漏斗 */
    .funnel-section { padding: 12px 16px; }
    .funnel { height: 70px; }

    /* 看板 → 手机垂直排列 */
    .kanban {
        flex-direction: column;
        padding: 12px;
        min-height: auto;
    }
    .kanban-col {
        min-width: 100%;
        padding: 10px;
    }

    /* 列表视图 */
    .list-view { padding: 12px; }
    .deal-table { font-size: 12px; }
    .deal-table th, .deal-table td { padding: 8px 10px; }
    /* 隐藏手机上不必要的列 */
    .deal-table .hide-mobile { display: none; }

    /* 线索卡片网格 */
    .main { padding: 12px; flex-direction: column; }
    .filters { width: 100%; position: static; }
    .card-list { gap: 10px; }
    .opp-card { margin-bottom: 0; }

    /* 详情面板 → 全屏 */
    .detail-panel, .side-panel {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 9999;
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 弹窗 */
    .modal {
        width: 95% !important;
        max-width: 100% !important;
        max-height: 90vh;
        overflow-y: auto;
    }
    .modal .row { flex-direction: column; gap: 0; }

    /* 设置页 */
    .settings-grid { grid-template-columns: 1fr !important; }
    .settings-card { padding: 16px !important; }

    /* 关系人 */
    .contacts-list { gap: 10px; }
    .contact-card { padding: 14px; }
}

/* ─── 小屏手机 (<= 480px) ─────────────────────────────── */
@media (max-width: 480px) {
    .header h1 { font-size: 15px; }
    .stats-bar, .stats-row { padding: 8px 10px; gap: 6px; }
    .stat-card, .stat-box { min-width: 80px; padding: 8px 10px; }
    .stat-card .number, .stat-box .number { font-size: 16px; }
    .kanban { padding: 8px; }
    .deal-card { padding: 10px; }
    .deal-card .deal-name { font-size: 12px; }
    .btn { font-size: 12px; padding: 8px 12px; }
    .view-tabs button { padding: 8px 10px; font-size: 12px; }
}

/* ─── iOS safe area ───────────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    .header { padding-top: calc(12px + env(safe-area-inset-top)); }
}