/* css/nav-bottom.css —— 底部导航栏（App风格Tab Bar）专用样式
 * 2026-10-25 从 css/style.css 抽出：静态页 colleges.html 不加载 style.css，
 * 抽成独立文件后所有带底栏的页面（含静态生成页）统一引用，单一来源。
 * 标记 include/nav-bottom.php 一起维护；增删 tab 只需改这两个文件。 */

/* ==================== 基础 ==================== */
.bottom-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 66px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
    z-index: 9998;
    border-top: 1px solid #e9ecef;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* 适配iPhone底部安全区 */
}

.bottom-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: #868e96;
    font-size: 11px;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.15s ease;
    position: relative;
    padding-top: 6px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.bottom-tab-item i {
    font-size: 22px;
    margin-bottom: 2px;
    transition: transform 0.2s ease;
}

.bottom-tab-item span {
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.bottom-tab-item:hover {
    color: #495057;
}

.bottom-tab-item:hover i {
    transform: scale(1.1);
}

.bottom-tab-item.active {
    color: #0d6efd;
    font-weight: 600;
}

.bottom-tab-item.active i {
    transform: scale(1.1);
}

/* active项顶部的指示条 */
.bottom-tab-item.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0d6efd, #3b82f6);
    border-radius: 0 0 3px 3px;
}

/* Bootstrap 弹窗打开时（body 会挂上 .modal-open），把底部 Tab Bar 压到弹窗之下。
   本栏默认 z-index 9998，高于 Bootstrap Modal(1055) 与遮罩(1050)——手机上弹窗几乎占满屏，
   底部 66px 的「确认导入」按钮会被本栏盖住且点不到。1040 低于遮罩(1050)，弹窗与本栏可正常分层。 */
body.modal-open .bottom-tab-bar {
    z-index: 1040;
}

/* 给body底部留出导航栏的空间 */
body {
    padding-bottom: 66px;
}

/* ==================== 桌面端 ==================== */
@media (min-width: 769px) {
    .bottom-tab-bar {
        height: 66px;
    }

    .bottom-tab-item i {
        font-size: 20px;
    }

    .bottom-tab-item span {
        font-size: 12px;
    }

    body {
        padding-bottom: 66px;
    }
}

/* ==================== 手机端 ==================== */
@media (max-width: 768px) {
    .bottom-tab-bar {
        height: 66px;
        box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.12);
    }

    .bottom-tab-item i {
        font-size: 22px;
    }

    .bottom-tab-item span {
        font-size: 11px;
    }

    /* 手机端隐藏「模拟填报」「院校库」tab（2026-10-25：桌面 7 / 手机 5） */
    .bottom-tab-item.tab-desktop-only {
        display: none;
    }

    body {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    }
}