/* Student portal Library page (/Library). Uses the portal's palette: #68A4C4 accent, #1e4356 dark, #f3f8fa tint. */
.slib { --slib-accent: #68A4C4; --slib-dark: #1e4356; --slib-tint: #f3f8fa; --slib-line: #dbe7ee;
        --slib-ok-bg: #e6f4ea; --slib-ok: #1e6b3a; --slib-warn-bg: #fff4e0; --slib-warn: #9a5b00;
        --slib-bad-bg: #fdecea; --slib-bad: #a4241c; --slib-off-bg: #eef1f3; --slib-off: #56616a;
        font-family: "Open Sans", sans-serif; color: #3b4a54; padding: 24px 0 40px; }
.slib h2, .slib h3, .slib h4 { color: var(--slib-dark); font-family: "Open Sans", sans-serif; }
.slib h3 { font-size: 1.25rem; font-weight: 600; margin: 0 0 14px; }
.slib a { color: #3f8cb5; }

.slib-card { background: #fff; border-radius: 6px; box-shadow: 0 5px 26px 0 rgba(68, 88, 144, .12); padding: 22px 24px; margin-bottom: 28px; }
.slib-card-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.slib-card-title h3 { margin: 0; }
.slib-note { background: var(--slib-tint); border-left: 4px solid var(--slib-accent); padding: 12px 16px; border-radius: 4px; margin-bottom: 24px; }
.slib-muted { color: #6b7a85; font-size: .85rem; }

/* buttons: same look as the portal's blue buttons */
.slib .slib-btn { display: inline-block; background: var(--slib-accent); border: 0; color: #fff; padding: 8px 20px; border-radius: 4px; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: none; transition: background .2s; }
.slib .slib-btn:hover, .slib .slib-btn:focus-visible { background: #4f8fb0; color: #fff; }
.slib .slib-btn-ghost { background: #fff; color: var(--slib-dark); border: 1px solid var(--slib-accent); }
.slib .slib-btn-ghost:hover, .slib .slib-btn-ghost:focus-visible { background: var(--slib-tint); color: var(--slib-dark); }
.slib .slib-btn-sm { padding: 4px 12px; font-size: .8rem; }
.slib .slib-btn-warn { background: #e59b1f; }
.slib .slib-btn-warn:hover { background: #c98510; }
.slib button:focus-visible, .slib input:focus-visible, .slib select:focus-visible, .slib a:focus-visible { outline: 3px solid #f5b942; outline-offset: 2px; }

/* my account tiles */
.slib-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.slib-tile { background: var(--slib-tint); border-radius: 6px; padding: 14px 16px; border-bottom: 3px solid var(--slib-accent); }
.slib-tile .n { font-size: 1.8rem; font-weight: 700; color: var(--slib-dark); line-height: 1.1; }
.slib-tile .t { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7a85; }
.slib-tile.bad { border-bottom-color: #d9534f; } .slib-tile.bad .n { color: var(--slib-bad); }
.slib-tile.warn { border-bottom-color: #e59b1f; }

.slib-table { width: 100%; border-collapse: collapse; }
.slib-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7a85; padding: 8px 10px; border-bottom: 2px solid var(--slib-line); white-space: nowrap; }
.slib-table td { padding: 10px; border-bottom: 1px solid var(--slib-line); vertical-align: top; font-size: .9rem; }
.slib-table tr.is-overdue td { background: var(--slib-bad-bg); }
.slib-table .sub { font-size: .78rem; color: #6b7a85; }

/* pills / badges */
.slib-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.slib-pill.ok { background: var(--slib-ok-bg); color: var(--slib-ok); }
.slib-pill.warn { background: var(--slib-warn-bg); color: var(--slib-warn); }
.slib-pill.bad { background: var(--slib-bad-bg); color: var(--slib-bad); }
.slib-pill.off { background: var(--slib-off-bg); color: var(--slib-off); }
.slib-pill.info { background: #e3f0f7; color: #1f5f80; }

/* search + filters */
.slib-search { display: flex; gap: 8px; margin-bottom: 12px; }
.slib-search input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid #b9cfdb; border-radius: 4px; font-size: 1rem; }
.slib-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 14px; align-items: end; margin-bottom: 12px; }
.slib-filters label, .slib-hist-filters label { display: block; font-size: .75rem; font-weight: 700; color: #4b5b66; margin-bottom: 3px; }
.slib select, .slib input[type=text], .slib input[type=search], .slib input[type=date] { width: 100%; padding: 7px 10px; border: 1px solid #b9cfdb; border-radius: 4px; background: #fff; font-size: .9rem; }
.slib-seg { display: inline-flex; border: 1px solid var(--slib-accent); border-radius: 4px; overflow: hidden; }
.slib-seg label { margin: 0; cursor: pointer; }
.slib-seg input { position: absolute; opacity: 0; pointer-events: none; }
.slib-seg span { display: block; padding: 7px 12px; font-size: .82rem; font-weight: 600; color: var(--slib-dark); background: #fff; border-right: 1px solid var(--slib-accent); white-space: nowrap; }
.slib-seg label:last-child span { border-right: 0; }
.slib-seg input:checked + span { background: var(--slib-accent); color: #fff; }
.slib-seg input:focus-visible + span { outline: 3px solid #f5b942; outline-offset: -3px; }

.slib-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.slib-chip { border: 1px solid var(--slib-line); background: var(--slib-tint); color: var(--slib-dark); padding: 3px 11px; border-radius: 999px; font-size: .8rem; cursor: pointer; }
.slib-chip:hover { border-color: var(--slib-accent); }
.slib-chip[aria-pressed=true] { background: var(--slib-accent); border-color: var(--slib-accent); color: #fff; }
.slib-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.slib-active .x { border: 0; background: none; color: inherit; font-weight: 700; padding: 0 0 0 4px; cursor: pointer; }

/* results */
.slib-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; margin: 4px 0 12px; color: #4b5b66; font-size: .9rem; }
.slib-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 18px; }
.slib-book { display: flex; gap: 14px; border: 1px solid var(--slib-line); border-radius: 6px; padding: 14px; background: #fff; }
.slib-book.mine { border-color: var(--slib-accent); box-shadow: 0 0 0 2px #e3f0f7; }
.slib-cover { flex: 0 0 84px; width: 84px; height: 116px; border-radius: 4px; background: linear-gradient(160deg, #a2cce3, #68A4C4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; overflow: hidden; }
.slib-cover img { width: 100%; height: 100%; object-fit: cover; }
.slib-book-main { min-width: 0; flex: 1; }
.slib-book h4 { font-size: 1.05rem; font-weight: 700; margin: 0 0 2px; }
.slib-book .by { font-size: .85rem; color: #4b5b66; }
.slib-meta { font-size: .78rem; color: #6b7a85; margin: 4px 0; }
.slib-desc { font-size: .84rem; margin: 6px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slib-desc.open { display: block; }
.slib-more { border: 0; background: none; color: #3f8cb5; padding: 0; font-size: .8rem; cursor: pointer; }
.slib-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.slib-tag { border: 0; background: #e3f0f7; color: #1f5f80; padding: 1px 9px; border-radius: 999px; font-size: .74rem; cursor: pointer; }
.slib-tag:hover { background: #cfe6f3; }

.slib-status { border-radius: 4px; padding: 7px 10px; font-size: .86rem; font-weight: 600; margin: 8px 0 6px; }
.slib-status.ok { background: var(--slib-ok-bg); color: var(--slib-ok); }
.slib-status.warn { background: var(--slib-warn-bg); color: var(--slib-warn); }
.slib-status.off { background: var(--slib-off-bg); color: var(--slib-off); }
.slib-status small { display: block; font-weight: 400; }
.slib-mine { background: #e3f0f7; color: #1f5f80; border-radius: 4px; padding: 6px 10px; font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.slib-mine.bad { background: var(--slib-bad-bg); color: var(--slib-bad); }
.slib-copies { list-style: none; margin: 4px 0 0; padding: 0; font-size: .8rem; }
.slib-copies li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 3px 0; border-top: 1px dashed var(--slib-line); }
.slib-copies li[hidden] { display: none; }
.slib-copies .no { color: #6b7a85; min-width: 52px; }
.slib-copies .where { color: #6b7a85; }
.slib-copies-toggle { border: 0; background: none; color: #3f8cb5; font-size: .78rem; padding: 2px 0; cursor: pointer; }
.slib-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.slib-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 18px; }
.slib-pager button { border: 1px solid var(--slib-accent); background: #fff; color: var(--slib-dark); padding: 5px 12px; border-radius: 4px; font-size: .85rem; cursor: pointer; min-width: 36px; }
.slib-pager button[aria-current=page] { background: var(--slib-accent); color: #fff; }
.slib-pager button:disabled { opacity: .45; cursor: default; }
.slib-empty { text-align: center; padding: 36px 12px; color: #6b7a85; }
.slib-loading { opacity: .55; transition: opacity .15s; }

/* collapsible history */
.slib-collapse-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.slib-collapse-btn h3 { margin: 0; }
.slib-collapse-btn .chev { width: 10px; height: 10px; border-right: 3px solid var(--slib-accent); border-bottom: 3px solid var(--slib-accent); transform: rotate(45deg); transition: transform .2s; margin: 0 6px 4px 0; flex: 0 0 auto; }
.slib-collapse-btn[aria-expanded=true] .chev { transform: rotate(-135deg); margin-top: 6px; }
.slib-collapse-body { margin-top: 16px; }
.slib-collapse-body[hidden] { display: none; }
.slib-hist-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; align-items: end; margin-bottom: 12px; }
.slib-hist-filters .check { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.slib-hist-filters .check label { margin: 0; }
.slib-hist-filters .check input { width: auto; }

.slib-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 991px) { .slib-books { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
    .slib { padding-top: 14px; }
    .slib-card { padding: 16px 14px; }
    .slib-book { flex-direction: column; }
    .slib-cover { width: 72px; height: 100px; flex-basis: auto; }
    .slib-search { flex-direction: column; }
    .slib-table.stack thead { display: none; }
    .slib-table.stack tr { display: block; border-bottom: 2px solid var(--slib-line); padding: 6px 0; }
    .slib-table.stack td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 4px; }
    .slib-table.stack td::before { content: attr(data-label); font-weight: 700; font-size: .72rem; text-transform: uppercase; color: #6b7a85; }
}
@media print { .slib-search, .slib-filters, .slib-actions, .slib-pager, .slib-collapse-btn .chev { display: none !important; } }

#catalogue, #history, #mine { scroll-margin-top: 100px; }