/* ============ 全站响应式共享层 (templates/static/responsive.css) ============
   断点: 1400 / 1200 / 992 / 768 / 576 / 480
   桌面(≥1200px)视觉不变; 所有规则均在 @media 内, 仅作用于小屏。
   引入: <link rel="stylesheet" href="/static/responsive.css"> (置于页面 <style> 之后)
   ========================================================================== */

/* ── 1. 字体缩放基线 ── */
@media (max-width: 992px) {
    body { font-size: 13.5px; }
}
@media (max-width: 768px) {
    body { font-size: 13px; }
    .top-logo h1 { font-size: 16px; }
    .panel-header .title { font-size: 12px; }
}
@media (max-width: 480px) {
    body { font-size: 12.5px; }
}

/* ── 2. 表格横向滚动兜底 (列已 nowrap, 小屏滚动不丢列) ── */
@media (max-width: 992px) {
    .table-scroll, .panel-body, .panel-body-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table { font-size: 12px; }
    .data-table th, .data-table td { padding: 4px 6px; font-size: 11px; }
}
@media (max-width: 480px) {
    .data-table { font-size: 11px; }
    .data-table th, .data-table td { padding: 3px 5px; font-size: 10.5px; }
}

/* ── 3. 容器 / 面板间距压缩 ── */
@media (max-width: 768px) {
    .container { padding: 8px !important; }
    .panel { margin-bottom: 8px; }
    .panel-header { padding: 3px 8px; font-size: 11px; }
    .panel-body { padding: 4px; }
}

/* ── 4. 弹窗小屏自适应 (全屏化) ── */
@media (max-width: 768px) {
    .modal, .impact-modal, [class*="modal"] {
        max-width: 96vw !important;
        width: 96vw !important;
        max-height: 88vh;
        overflow-y: auto;
    }
}

/* ── 5. 顶部栏小屏纵向排列 ── */
@media (max-width: 768px) {
    .top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 8px;
    }
    .top-logo { justify-content: center; min-width: 0; }
    .top-right { align-items: stretch; }
    .top-nav, .top-tools { justify-content: center; flex-wrap: wrap; }
}

/* ── 6. 工具 / 筛选条换行 ── */
@media (max-width: 768px) {
    .sfb, .stock-filter-bar, .toolbar, .fc-head, .filter-bar,
    .panel-header .tools {
        flex-wrap: wrap;
        gap: 4px;
    }
    .sec-search, input.sec-search {
        max-width: 100% !important;
        flex: 1 1 100%;
    }
}

/* ── 7. 通用卡片网格: 小屏单列, 中屏双列 (页面特有类在页面级覆盖) ── */
@media (max-width: 992px) {
    .top5-grid, .hot-topics-grid, .card-grid, .dims-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 576px) and (max-width: 991px) {
    .top5-grid, .card-grid, .dims-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── 8. 打印保持 ── */
@media print {
    .no-print { display: none !important; }
}