/* ============================================================================
   仓鼠量化工作台 · 移动端适配样式（mobile.css）
   ----------------------------------------------------------------------------
   加载位置：shell.html 中 `{% block extra_css %}` 之后。
   由于各子模块的 <style> 通过 extra_css 注入，本文件位于其后，
   同权重规则即可覆盖各模板里的桌面布局，无需堆 !important。

   断点：
     ≤ 1024px  窄屏平板 / 横屏手机
     ≤ 820px   手机（顶栏换行、导航横滑）
     ≤ 768px   手机主流宽度（栅格单列、表格横滑、字号收紧）
     ≤ 420px   小屏手机（iPhone SE 等，进一步压缩）
   ============================================================================ */


/* ============================================================================
   1. 全局基线
   ============================================================================ */
@media (max-width: 820px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* 触摸设备：去掉点击高亮块，保留即时反馈 */
    * {
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.12);
    }

    /* 允许长文本在极窄容器内断行，避免撑破布局 */
    .nw-log,
    .au-hint,
    .nw-text,
    .au-reason,
    .au-concept,
    .mini-row .mr-name,
    .wl-hint {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 12px 12px 36px;
        min-height: auto;
    }

    /* iOS Safari：输入框字号 <16px 时聚焦会自动放大整页，这里强制 16px */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* 触摸目标：可点元素保证最小高度，避免误触 */
    .btn,
    .btn-sm,
    .theme-toggle,
    .btn-logout,
    .refresh-btn,
    .view-btn {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ============================================================================
   2. 门户顶栏：手机「品牌 + 状态」一行、「模块导航」一行横向滑动
   注意：左侧留白交给 brand，右侧交给 status，顶栏本身不留水平 padding，
        这样模块导航横滑时能真正贴到屏幕边缘。
   ============================================================================ */
@media (max-width: 820px) {
    /* 用 Grid 固定两行结构，避免 flex-wrap 在不同内容宽度下自行折行 */
    .portal-navbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand   status"
            "modules modules";
        align-items: center;
        gap: 6px 8px;
        height: auto;
        padding: 8px 0;
        /* 手机顶栏不吸顶：高度随内容变化，吸顶会长期占用屏幕 */
        position: static;
    }

    .navbar-brand {
        grid-area: brand;
        min-width: 0;
        padding-left: 12px;
    }

    /* 窄屏用短品牌名 */
    .navbar-brand .brand-full { display: none; }
    .navbar-brand .brand-short { display: inline !important; }

    .navbar-brand a {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    /* 状态区：靠右，只保留 主题切换 / 在线点 / 用户菜单 */
    .navbar-status {
        grid-area: status;
        margin-left: 0;
        padding-right: 12px;
        gap: 6px;
        font-size: 0.76rem;
        flex-wrap: nowrap;
        min-width: 0;
    }

    #last-update { display: none; }

    .theme-toggle { padding: 4px 9px; font-size: 0.76rem; }
    .role-badge { font-size: 0.68rem; padding: 1px 7px; }

    /* --- 用户区折叠为下拉：徽章 + ▾，点开才展开各入口 --- */
    .user-menu {
        margin-left: 2px;
        padding-left: 8px;
        gap: 4px;
        border-left: 1px solid var(--border-color);
    }
    .user-menu .user-name { display: none; }

    .user-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        padding: 0;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        font-size: 0.7rem;
        line-height: 1;
        cursor: pointer;
    }
    .user-menu.open .user-trigger {
        border-color: var(--accent-blue);
        color: var(--accent-blue);
    }

    .user-links {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 500;
        min-width: 150px;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 6px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-md);
    }
    .user-menu.open .user-links { display: flex; }

    .user-links .user-link,
    .user-links .btn-logout {
        display: block;
        width: 100%;
        padding: 10px 12px;
        font-size: 0.86rem;
        text-align: left;
        border: none;
        border-radius: 4px;
        background: transparent;
        color: var(--text-primary);
        text-decoration: none;
        cursor: pointer;
        min-height: 0;
    }
    .user-links .user-link:hover,
    .user-links .btn-logout:hover {
        background: var(--bg-card-hover);
        color: var(--accent-blue);
    }
    .user-links form { display: block; width: 100%; margin: 0; }

    /* --- 一级模块导航：独占一行 + 横向滑动 --- */
    .portal-modules {
        grid-area: modules;
        order: 0;
        flex: initial;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 2px 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        gap: 6px;
    }
    .portal-modules::-webkit-scrollbar { display: none; }

    .portal-modules .mod-item {
        flex: 0 0 auto;
        padding: 6px 12px;
        font-size: 0.83rem;
    }
}


/* ============================================================================
   3. 二级导航条：改为吸顶（顶栏已不吸顶，滚动时保留模块内导航）+ 横向滑动
   ============================================================================ */
@media (max-width: 820px) {
    .subnav-bar {
        position: sticky;
        top: 0;
    }

    .subnav-inner {
        padding: 0 12px;
        gap: 8px;
        min-height: 42px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .subnav-inner::-webkit-scrollbar { display: none; }

    .subnav-links { flex-wrap: nowrap; gap: 4px; }

    .subnav-item {
        flex: 0 0 auto;
        padding: 6px 12px;
        font-size: 0.83rem;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

    /* 手机上省掉 "模块" 标签，靠上下文已足够 */
    .subnav-label { display: none; }
}


/* ============================================================================
   4. 栅格单列化 / 卡片密度
   ============================================================================ */
@media (max-width: 1024px) {
    /* 用 minmax(420px…) 起步的门户栅格在窄屏会溢出，提前收成单列 */
    .portal-grid { grid-template-columns: 1fr !important; }
    .theme-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (max-width: 768px) {
    /* 所有多列栅格 → 单列 */
    .portal-grid,
    .mod-cards,
    .theme-grid,
    .au-picks,
    .au-settings,
    .strategy-returns-grid,
    .blocks-grid,
    .charts-row,
    .charts-grid {
        grid-template-columns: 1fr !important;
    }

    /* 指标格子 → 两列（保持信息密度，同时不至于挤） */
    .kpi-row,
    .nw-stats,
    .realtime-stats,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stats-row,
    .stats-row.small {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .strategy-cards-grid .strategy-card {
        flex-basis: 100%;
        max-width: none;
    }

    /* --- 卡片 / 面板留白收紧 --- */
    .panel { padding: 13px 13px; margin-bottom: 12px; }
    .panel h2 { font-size: 0.93rem; margin-bottom: 10px; }
    .section { padding: 14px; margin-bottom: 14px; }
    .node-group { padding: 11px; }
    .theme-card { padding: 12px 13px; }
    .stat-card { padding: 13px; gap: 10px; }
    .stat-icon { font-size: 1.45rem; }
    .stat-value { font-size: 1.35rem; }
    .kpi-cell { padding: 9px 10px; }
    .kpi-cell b { font-size: 1.15rem; }
    .mod-card { padding: 15px 16px; }
    .mod-card .mc-icon { font-size: 1.4rem; }

    /* --- 页头 --- */
    .portal-hero { padding: 16px; border-radius: var(--radius-md); }
    .portal-hero h1 { font-size: 1.18rem; }
    .portal-hero p { font-size: 0.8rem; }

    .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
    .page-header h1 { font-size: 1.15rem; }
    .header-actions { flex-wrap: wrap; justify-content: flex-start; }

    /* 各模块自定义页头 */
    .rv-head, .au-head, .tdx-header, .realtime-header { flex-direction: column; align-items: stretch; gap: 10px; }
    .rv-head h1, .au-head h1, .tdx-header h2, .realtime-header h1 { font-size: 1.12rem !important; }
    .rv-head .rv-date, .au-tools { margin-left: 0; flex-wrap: wrap; }
    .page-top { flex-direction: column; align-items: stretch; gap: 10px; }
    .page-top h1 { font-size: 1.2rem !important; }
    .header-controls { flex-wrap: wrap; }

    /* --- 图表高度：手机竖屏下 320~340px 偏浪费 --- */
    .chart-box { height: 250px; }
    .chart-box.small { height: 180px; }
    #gi-chart { height: 260px; }

    /* --- iframe（报告预览 / 通达信版面）--- */
    .nw-iframe { height: 68vh; min-height: 380px; }
    .txp-frame { height: 70vh; min-height: 380px; }

    /* --- 登录 / 账户 --- */
    .login-wrap { padding: 18px 12px; }
    .login-card { padding: 24px 18px; }
    .login-card h2 { font-size: 1.15rem; }

    /* --- 页脚 --- */
    .footer { font-size: 0.74rem; padding: 12px 10px; line-height: 1.7; }

    /* --- 提示横幅 --- */
    .alert-banner, .new-feature-banner { font-size: 0.78rem; padding: 8px 12px; }

    /* --- 吐司：贴底居中，宽度自适应 --- */
    #portal-toast { bottom: 24px; font-size: 0.82rem; max-width: 92vw; }
}


/* ============================================================================
   5. 表格：内容横滑，不压缩列宽；滚动区高度按视口收敛
   ============================================================================ */
@media (max-width: 768px) {
    /* 容器已是 overflow:auto / overflow-x:auto，这里只调高度与内距 */
    .table-container,
    .au-table-wrap,
    .nw-table-wrap,
    .stock-table,
    .returns-table {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .au-table-wrap { max-height: 62vh; }
    .nw-table-wrap { max-height: 58vh; }
    .nw-reports { max-height: 46vh; }
    .nw-log { max-height: 130px; }

    /* 未设 nowrap 的通用表：给最小宽度，避免列被压到换行 */
    .data-table,
    .momentum-table {
        min-width: 660px;
    }
    .returns-table,
    .snapshot-table {
        min-width: 560px;
    }

    /* 单元格内距收紧，单屏能看更多列 */
    .data-table th,
    .data-table td {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
    .data-table th { font-size: 0.74rem; }

    .stock-table th,
    .stock-table td { padding: 8px 10px; }

    .momentum-table th,
    .momentum-table td { padding: 7px 8px; font-size: 0.78rem; }

    .returns-table th,
    .returns-table td { padding: 7px 9px; font-size: 0.78rem; }

    /* 竞价主表：13 列，压缩留白 + 截断长文本列 */
    .au-table thead th { padding: 7px 8px; font-size: 0.72rem; }
    .au-table tbody td { padding: 6px 8px; font-size: 0.79rem; }
    .au-table td.au-concept,
    .au-table td.au-reason { max-width: 150px; }

    /* 题材/资金表：强度条收窄 */
    .rv-table th,
    .rv-table td { padding: 7px 8px; font-size: 0.8rem; }
    .rv-table .bar-cell { width: 80px; }

    /* 节点卡片：第二行允许换行，避免超宽 */
    .node-card-row2 { flex-wrap: wrap; gap: 8px; }
    .node-card { flex: 1 1 100%; }

    /* 迷你榜单 / KPI 内的等宽数字略微缩小 */
    .mini-row { font-size: 0.8rem; gap: 8px; }
}


/* ============================================================================
   6. 小屏手机（iPhone SE / 小尺寸安卓）
   ============================================================================ */
@media (max-width: 420px) {
    .container { padding: 10px 10px 32px; }

    .portal-navbar { padding: 7px 0; }
    .navbar-brand { padding-left: 10px; }
    .navbar-status { padding-right: 10px; }
    .portal-modules { padding: 2px 10px; }
    .portal-modules .mod-item { padding: 6px 10px; font-size: 0.8rem; }
    .navbar-brand a { font-size: 0.94rem; }

    .subnav-inner { padding: 0 10px; }
    .subnav-item { padding: 6px 10px; font-size: 0.8rem; }

    .panel { padding: 11px 11px; }
    .portal-hero { padding: 14px 13px; }
    .portal-hero h1 { font-size: 1.06rem; }
    .portal-hero .hero-tag { font-size: 0.72rem; padding: 3px 10px; }

    .kpi-row,
    .nw-stats,
    .stats-row,
    .stats-row.small,
    .realtime-stats,
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

    .kpi-cell b { font-size: 1.02rem; }
    .kpi-cell span { font-size: 0.68rem; }
    .stat-value { font-size: 1.2rem; }
    .stat-icon { font-size: 1.25rem; }

    .pick-card .pc-score { font-size: 1.45rem; }
    .chart-box { height: 220px; }

    .data-table,
    .momentum-table { min-width: 620px; }
}