/**
 * HC招采信息 - 移动端响应式设计适配
 * 版本: 1.1
 * 目的: 彻底消除首页强制遮罩，实现真正的移动端可用性
 */

/* 1. 核心容器与布局保护 */
@media (max-width: 768px) {
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .section-title {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
    }
}

/* 2. 响应式导航栏适配 */
@media (max-width: 991px) {
    .top-navbar {
        height: auto !important;
        padding: 8px 0 !important;
    }
    
    .top-navbar .d-flex {
        flex-direction: column !important;
        text-align: center !important;
        gap: 5px;
    }

    .main-navbar .navbar-brand img {
        height: 30px !important;
    }
    
    .main-navbar .site-title h1 {
        font-size: 18px !important;
    }
}

/* 3. 统计卡片布局：移动端单列 */
@media (max-width: 768px) {
    .row.g-4.mb-5 .col-lg-4.col-md-6 {
        width: 100% !important;
        margin-bottom: 15px;
    }
    
    .stat-card {
        padding: 20px !important;
    }
    
    .stat-number {
        font-size: 1.5rem !important;
    }
    
    .stat-icon {
        font-size: 1.8rem !important;
        right: 15px !important;
        top: 15px !important;
    }
}

/* 4. 图表显示优化 */
@media (max-width: 768px) {
    #trendChart {
        max-height: 250px !important;
    }
    
    .chart-card {
        padding: 15px !important;
    }
}

/* 5. 数据分布表格与标签页优化 */
@media (max-width: 768px) {
    .dist-tabs {
        padding: 3px !important;
        overflow-x: auto;
        white-space: nowrap;
        display: flex;
        flex-wrap: nowrap;
        scrollbar-width: none; /* Firefox */
    }
    
    .dist-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    .dist-tabs .nav-item {
        flex: 0 0 auto;
    }
    
    .dist-tabs .nav-link {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
    
    .tab-content-container {
        max-height: 350px !important;
    }
    
    .table-rank td, .table-rank th {
        padding: 10px 8px !important;
        font-size: 12px !important;
    }
}

/* 6. 极致小屏幕显示优化 (如 iPhone SE) */
@media (max-width: 400px) {
    .stat-number {
        font-size: 1.3rem !important;
    }
    
    .site-title h1 {
        font-size: 16px !important;
    }
}