/* ════════════════════════════════════════
   BookBrowse.css  —  教师推荐书目浏览页
   ════════════════════════════════════════ */

/* ── 全局变量 ── */
:root {
    --primary: #1a5fb4;
    --primary-dk: #164a8a;
    --accent: #e8a020;
    --bg-page: #f4f6fa;
    --bg-card: #ffffff;
    --text-main: #1e2330;
    --text-muted: #6c757d;
    --border: #e2e8f0;
    --radius: 10px;
    --shadow: 0 2px 12px rgba(26,95,180,.08);
    --shadow-hover: 0 6px 24px rgba(26,95,180,.16);
}

body {
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
    background: var(--bg-page);
    color: var(--text-main);
    font-size: 14px;
}

/* ════════════════════════════════════════
   Header
   ════════════════════════════════════════ */
.site-header {
    /*background: var(--primary);*/
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.header-logo {
    height: 44px;
    width: auto;
    /*filter: brightness(0) invert(1);*/
}

.header-title {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .04em;
}

/* ── header 右侧导航链接 ── */
.header-nav {
    display: flex;
    align-items: center;
    gap: 0;
}

.header-nav-link {
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    padding: .25rem .85rem;
    transition: color .18s;
    white-space: nowrap;
    position: relative;
}

    .header-nav-link + .header-nav-link::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 14px;
        width: 1px;
        background: #d1d9e6;
    }

    .header-nav-link:hover {
        color: var(--primary);
        text-decoration: none;
    }

/* ════════════════════════════════════════
   Hero Banner
   ════════════════════════════════════════ */
.hero-banner {
    background: linear-gradient(135deg, #0f3a7a 0%, var(--primary) 60%, #1a5fb4 100%);
    padding: 3rem 0 3.5rem;
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
}

.hero-heading {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: .5rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.hero-sub {
    color: rgba(255,255,255,.78);
    font-size: .95rem;
    margin-bottom: 1.8rem;
}

.hero-search {
    max-width: 680px;
    display: flex;
    gap: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.2);
}

/* ── 输入框+清空按钮容器 ── */
.search-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    flex: 1;
    border: none;
    border-radius: 12px 0 0 12px;
    padding: .7rem 1.4rem;
    font-size: .95rem;
    outline: none;
    width: 100%;
}

    .search-input:focus {
        box-shadow: none;
    }

/* 输入框内 ✕ 清空按钮 */
.search-clear-btn {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aab4c8;
    font-size: .9rem;
    line-height: 1;
    padding: .2rem .3rem;
    cursor: pointer;
    transition: color .15s;
    z-index: 2;
}

    .search-clear-btn:hover {
        color: #ef4444;
    }

.btn-search {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 0;
    padding: .7rem 1.6rem;
    font-weight: 600;
    white-space: nowrap;
}

    .btn-search:hover {
        background: #c9880f;
        color: #fff;
    }

/* ════════════════════════════════════════
   主内容区
   ════════════════════════════════════════ */

/* ── 左侧卡片通用 ── */
.sidebar-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.sidebar-card-title {
    background: linear-gradient(135deg, #0f3a7a 0%, var(--primary) 100%);
    color: #fff;
    padding: .7rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .03em;
    position: relative;
    padding-left: 1.1rem;
}

    .sidebar-card-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--accent);
        border-radius: 0 2px 2px 0;
    }

/* ── 学院/专业导航 ── */
.college-item {
    padding: .6rem 1rem;
    cursor: pointer;
    font-size: .875rem;
    color: var(--text-main);
    border-bottom: 1px solid var(--border);
    transition: background .15s;
    user-select: none;
}

    .college-item:hover {
        background: #eff6ff;
    }

    .college-item.active {
        background: #dbeafe;
        color: #0f3a7a;
        font-weight: 600;
        border-left: 3px solid var(--accent);
        padding-left: calc(1rem - 3px);
    }

.toggle-icon {
    transition: transform .25s;
    font-size: .75rem;
    color: var(--text-muted);
}

.college-group .collapse.show ~ .college-item .toggle-icon,
.college-item[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* 改后：新增 */
.major-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    transition-duration: 200ms; /* Bootstrap 默认 350ms，可按需调短 */
}

.major-item {
    padding: .45rem 1rem .45rem 1.8rem;
    font-size: .83rem;
    cursor: pointer;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    transition: background .15s;
    /* 新增 ↓ */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    /* 改后 */
    .major-item:last-child,
    .major-item:nth-last-child(2):nth-child(odd) {
        border-bottom: none;
    }

    .major-item:hover {
        background: #eff6ff;
        color: var(--primary);
    }

    .major-item.active {
        background: #dbeafe;
        color: #0f3a7a;
        font-weight: 600;
        border-left: 3px solid var(--accent);
        padding-left: calc(1.8rem - 3px);
    }

.all-item {
    background: #eff6ff;
    font-weight: 600;
    color: #0f3a7a;
    border-bottom: 2px solid #bfdbfe;
}

/* ── 热度排行 ── */
.hot-list {
    list-style: none;
    padding: .4rem 0;
    margin: 0;
}

.hot-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .15s;
    font-size: .85rem;
}

    .hot-item:last-child {
        border-bottom: none;
    }

    .hot-item:hover {
        background: #eff6ff;
    }

.hot-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
    background: #e2e8f0;
    color: var(--text-muted);
}

    .hot-rank.rank-1 {
        background: #ef4444;
        color: #fff;
    }

    .hot-rank.rank-2 {
        background: #f97316;
        color: #fff;
    }

    .hot-rank.rank-3 {
        background: #eab308;
        color: #fff;
    }

.hot-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
}

.hot-count {
    font-size: .78rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ════════════════════════════════════════
   右栏 - 分类筛选
   ════════════════════════════════════════ */
.filter-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .8rem 1.1rem;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .5rem;
}

.filter-label {
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    padding-top: .3rem;
    font-size: .88rem;
}

.booktype-group {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.booktype-chip {
    display: inline-block;
    padding: .28rem .85rem;
    border-radius: 50px;
    border: 1.5px solid var(--border);
    cursor: pointer;
    font-size: .83rem;
    color: var(--text-muted);
    background: #fff;
    transition: all .18s;
    user-select: none;
}

    .booktype-chip:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .booktype-chip.active {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
        font-weight: 600;
    }

/* ── 结果信息 ── */
.result-info {
    font-size: .85rem;
    color: var(--text-muted);
}

.page-size-select {
    width: auto;
    font-size: .83rem;
}

/* ── 筛选条件标签栏 ── */
.filter-tags-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .55rem;
    padding: .45rem .7rem;
    background: #f0f5ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
}

.filter-tags-label {
    font-size: .78rem;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 500;
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    flex: 1;
}

/* 各维度标签基础样式 */
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 500;
    padding: .22rem .6rem;
    border-radius: 50px;
    color: #fff;
    line-height: 1.4;
    white-space: nowrap;
}

.filter-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,.30);
    cursor: pointer;
    font-size: .65rem;
    font-style: normal;
    transition: background .15s;
    flex-shrink: 0;
}

    .filter-tag-remove:hover {
        background: rgba(255,255,255,.55);
    }

/* 学院 — 主色蓝 */
.filter-tag-college {
    background: var(--primary);
}
/* 专业 — 青紫 */
.filter-tag-major {
    background: #3b5bdb;
}
/* 分类 — 琥珀金 */
.filter-tag-booktype {
    background: var(--accent);
}
/* 关键词 — 青綣 */
.filter-tag-keyword {
    background: #0891b2;
}

.filter-tags-clear-all {
    font-size: .75rem;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: 0 .2rem;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}

    .filter-tags-clear-all:hover {
        color: #ef4444;
    }

/* ════════════════════════════════════════
   书目卡片列宽（每行5列，xl断点）
   ════════════════════════════════════════ */
@media (min-width: 1200px) {
    .col-book {
        flex: 0 0 20%;
        max-width: 20%;
        margin-bottom:40px;
    }
}

/* ════════════════════════════════════════
   书目卡片
   ════════════════════════════════════════ */
.book-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
    height: 100%;
    display: block;
    background: #000;
}

    .book-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

/* ── 封面容器（全卡片） ── */
.book-cover-wrap {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: #e8eef6;
    position: relative;
    display: block;
}

    .book-cover-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .3s;
    }

.book-card:hover .book-cover-wrap img {
    transform: scale(1.04);
}

.book-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #aab4c8;
    font-size: .8rem;
    gap: .4rem;
}

    .book-cover-placeholder i {
        font-size: 2.5rem;
    }

/* ── 左上角：书籍类型 ── */
.book-overlay-type {
    position: absolute;
    top: 7px;
    left: 7px;
    background: rgba(26, 95, 180, .88);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    padding: .18rem .55rem;
    border-radius: 4px;
    line-height: 1.4;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(2px);
    z-index: 2;
}

/* ── 右上角：推荐次数 ── */
.book-overlay-rec {
    position: absolute;
    top: 7px;
    right: 7px;
    background: rgba(232, 160, 32, .92);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .18rem .5rem;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
    backdrop-filter: blur(2px);
    z-index: 2;
}

    .book-overlay-rec .bi {
        font-size: .6rem;
    }

/* ── 封面下半部渐变遮罩 + 书名作者 ── */
.book-overlay-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.8rem .7rem .6rem;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
    z-index: 2;
}

.book-overlay-title {
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    margin-bottom: .18rem;
}

.book-overlay-author {
    color: rgba(255,255,255,.78);
    font-size: .72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* ════════════════════════════════════════
   分页
   ════════════════════════════════════════ */
.pagination .page-link {
    color: var(--primary);
    border-radius: 6px !important;
    margin: 0 2px;
    font-size: .85rem;
    min-width: 34px;
    text-align: center;
}

.pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ════════════════════════════════════════
   书籍详情弹窗
   ════════════════════════════════════════ */
.modal-detail-header {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0 1.2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.2rem;
}

.detail-cover {
    width: 130px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    aspect-ratio: 3/4;
}

    .detail-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.detail-cover-placeholder {
    width: 100%;
    height: 100%;
    background: #f0f4fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #aab4c8;
    font-size: 1.0rem;
    gap: .4rem;
}
    .detail-cover-placeholder i {
        font-size: 2.5rem;
    }

    .detail-meta {
        flex: 1;
        min-width: 0;
    }

.detail-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: .5rem;
    line-height: 1.4;
}

.detail-meta-row {
    font-size: .87rem;
    color: var(--text-muted);
    margin-bottom: .3rem;
}

    .detail-meta-row strong {
        color: var(--text-main);
    }

.detail-intro {
    font-size: .88rem;
    color: #4a5568;
    line-height: 1.7;
    margin-top: .8rem;
}

/* 推荐关系列表 */
.relation-section-title {
    font-weight: 700;
    font-size: .92rem;
    color: #0f3a7a;
    margin-bottom: .7rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--accent);
}

.relation-card {
    background: #f4f8ff;
    border: 1px solid #dbeafe;
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    padding: .8rem 1rem;
    margin-bottom: .7rem;
}

    .relation-card:last-child {
        margin-bottom: 0;
    }

.relation-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    font-size: .85rem;
    margin-bottom: .4rem;
}

.relation-tag {
    background: var(--primary);
    color: #fff;
    font-size: .75rem;
    padding: .2rem .6rem;
    border-radius: 4px;
    white-space: nowrap;
}

.relation-reason {
    font-size: .85rem;
    color: #4a5568;
    line-height: 1.6;
    padding-top: .3rem;
    border-top: 1px dashed var(--border);
    margin-top: .4rem;
}

.btn-library {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: .45rem 1.1rem;
    font-size: .87rem;
    text-decoration: none;
    display: inline-block;
    margin-top: .6rem;
    transition: background .15s;
}

    .btn-library:hover {
        background: var(--primary-dark, color-mix(in srgb, var(--primary) 80%, #000));
        color: #fff;
        text-decoration: none;
    }

.btn-library-digital {
    background: var(--secondary, #6c757d);
}

    .btn-library-digital:hover {
        background: color-mix(in srgb, var(--secondary, #6c757d) 80%, #000);
    }


/* 暂无馆藏提示 */
.text-muted {
    display: inline-block;
    margin-top: .6rem; /* 与按钮对齐，同一行高 */
    padding: .45rem 1.1rem; /* 与按钮等高，视觉对齐 */
    font-size: .87rem; /* 与按钮字号一致 */
    color: #adb5bd;
    background: #f8f9fa;
    border: 1px dashed #dee2e6;
    border-radius: 6px; /* 与按钮圆角一致 */
    line-height: 1.5;
}

/* ════════════════════════════════════════
   Footer
   ════════════════════════════════════════ */
.site-footer {
    background: linear-gradient(135deg, #0f3a7a 0%, var(--primary) 60%, #1a5fb4 100%);
    color: rgba(255,255,255,.82);
    margin-top: 3rem;
    padding-top: 3rem;
    font-size: .88rem;
}

.footer-main {
    padding-bottom: 0.5rem;
}

/* 学校品牌区 */
.footer-brand {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
}

.footer-logo {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .9;
}

.footer-school-name {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
}

.footer-desc {
    color: rgba(255,255,255,.62);
    font-size: .84rem;
    line-height: 1.7;
    margin: 0;
}

/* 导航标题 */
.footer-col-title {
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: 1rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: .5rem;
}

    .footer-col-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 24px;
        height: 2px;
        background: var(--accent);
        border-radius: 2px;
    }

/* 导航链接 */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-links li {
        margin-bottom: .5rem;
    }

    .footer-links a {
        color: rgba(255,255,255,.68);
        text-decoration: none;
        transition: color .18s;
        font-size: .85rem;
    }

        .footer-links a:hover {
            color: var(--accent);
        }

/* 联系信息 */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-contact li {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        margin-bottom: .7rem;
        color: rgba(255,255,255,.68);
        font-size: .85rem;
        line-height: 1.5;
    }

    .footer-contact i {
        color: var(--accent);
        flex-shrink: 0;
        margin-top: .15rem;
        font-size: .95rem;
    }

/* 版权栏 */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    padding: 1rem 0;
    font-size: .8rem;
    color: rgba(255,255,255,.45);
}

.wechat-logo {
    height: 90px;
    width: auto;
}

/* ── 响应式 ── */
@media (max-width: 576px) {
    .hero-heading {
        font-size: 1.3rem;
    }

    .hero-search {
        flex-direction: column;
        border-radius: 12px;
    }

    .search-input-wrap,
    .search-input,
    .btn-search {
        border-radius: 12px !important;
    }

    .modal-detail-header {
        flex-direction: column;
        align-items: center;
    }

    .detail-cover {
        width: 100px;
    }
}