/* ==========================================================================
   Social CMS — Books library module
   ========================================================================== */

.bk-breadcrumb { font-size: .72rem; line-height: 1.2; color: var(--ink-soft); margin-bottom: .4rem; }
.bk-breadcrumb a { color: var(--indigo); text-decoration: none; }
.bk-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Category browsing (index.php) -------------------------
   Always a single horizontally-scrollable line (not a wrapping grid) —
   same swipeable-strip approach as the BBCode toolbar, just not limited
   to touch theme this time, since a long category list would otherwise
   wrap to several rows even on a wide desktop window. */
.bk-category-row {
    display: flex; flex-wrap: nowrap; gap: .5rem; margin-bottom: .85rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.bk-category-row::-webkit-scrollbar { display: none; }
.touch-theme .bk-category-row {
    flex-wrap: wrap; overflow-x: visible; justify-content: flex-start;
}
.touch-theme .bk-category-card { width: calc(33.333% - .34rem); }
.bk-category-card {
    flex-shrink: 0; width: 88px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem;
    text-decoration: none; color: inherit; padding: .65rem .4rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    transition: transform .1s ease, box-shadow .15s ease, border-color .12s ease;
}
.bk-category-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px -6px rgba(0,0,0,.15); }
.bk-category-card.is-active { border-color: var(--indigo); background: var(--indigo-soft, var(--paper)); }
.bk-category-icon { font-size: 1.25rem; }
.bk-category-name { font-weight: 700; font-size: .76rem; color: var(--ink); }
.bk-category-count { font-size: .64rem; color: var(--ink-soft); }

/* Category badge shown on the book detail page */
.bk-category-badge {
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; margin: .1rem 0 .4rem;
    border-radius: 999px; background: var(--indigo-soft, var(--paper)); color: var(--indigo);
    font-size: .76rem; font-weight: 700; text-decoration: none;
}
.bk-category-badge:hover { background: var(--indigo); color: #fff; }

/* ---------- Subnav (attached to the title card, like Blog/Forum/Downloads) --- */
.bk-subnav {
    display: flex; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius, 5px); margin-bottom: 1.25rem; overflow-x: auto; overflow-y: hidden;
    flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.bk-subnav::-webkit-scrollbar { display: none; }
.bk-subnav a {
    flex-shrink: 0; text-align: center; padding: .5rem .7rem; text-decoration: none;
    color: var(--ink-soft); font-weight: 600; font-size: .78rem; position: relative;
    border-bottom: 2px solid transparent; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: .3rem;
}
.bk-subnav a.is-active { color: var(--indigo); border-bottom-color: var(--indigo); background: var(--indigo-soft, var(--paper)); }
.bk-search { display: flex; gap: .5rem; margin-bottom: 1rem; max-width: 420px; }
.bk-search input {
    flex: 1; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); font-family: inherit; font-size: .9rem;
}

/* ---------- Panel + grid ------------------------------------------ */
.bk-panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .4rem .75rem; box-shadow: var(--shadow); margin-bottom: 1rem;
}
.bk-section-head { display: flex; align-items: center; font-weight: 800; font-size: .95rem; margin: .3rem 0 .5rem; }
.bk-back-link { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--indigo); text-decoration: none; margin-bottom: .75rem; }
.bk-back-link:hover { text-decoration: underline; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 170px)); gap: .7rem; }

/* ---------- Book row (list view — same labeled fields as the detail page) --- */
.bk-view-toggle { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: .25rem; }
.bk-view-btn {
    width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--paper); color: var(--ink-soft); font-size: .78rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.bk-view-btn:hover { color: var(--ink); }
.bk-view-btn.is-active { background: var(--indigo); border-color: var(--indigo); color: #fff; }

.bk-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem .6rem; }
.bk-results-grid[hidden] { display: none; }
.bk-results-grid .bk-card { max-width: none; }

.bk-row-list { display: flex; flex-direction: column; }
.bk-row-list[hidden] { display: none; }
.bk-row-list .bk-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.bk-row {
    display: flex; align-items: flex-start; gap: .75rem; padding: .3rem .6rem .3rem .3rem; border-radius: var(--radius, 5px);
    text-decoration: none; color: inherit; transition: background-color .12s ease;
}
.bk-row:hover { background: var(--paper); }
.bk-row-cover {
    flex-shrink: 0; width: 80px; height: 106px; border-radius: 5px; overflow: hidden;
    background: var(--paper); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: 1.8rem;
}
.bk-row-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; padding-top: .1rem; }
.bk-row-title { font-size: .95rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bk-row-meta-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .75rem; }
.bk-row-meta { display: flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-row-meta i { width: 14px; text-align: center; flex-shrink: 0; }
.bk-row-meta strong { font-weight: 700; color: var(--ink); flex-shrink: 0; }

/* ---------- Book card (grid — homepage widget, My Books, My Collection) ---- */
.bk-card { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; color: inherit; width: 100%; max-width: 170px; }
.bk-card-cover {
    position: relative; height: 0; padding-top: 133.33%; border-radius: var(--radius, 5px); overflow: hidden;
    background: linear-gradient(135deg, var(--indigo), var(--indigo-deep));
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem;
}
.bk-card-cover .icon-ui, .bk-card-cover i { color: inherit; }
.bk-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-continue-progress {
    position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.35);
}
.bk-continue-progress span { display: block; height: 100%; background: var(--marigold, #f4a300); }
.bk-card-title { font-size: .78rem; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-card-author { font-size: .7rem; }
.bk-card-meta { font-size: .68rem; }

body.touch-theme .bk-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .4rem; }
body.touch-theme .bk-home-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 120px)); gap: .6rem; }
body.touch-theme .bk-card { max-width: 120px; }
body.touch-theme .bk-card-cover { font-size: 1.3rem; }
body.touch-theme .bk-card-title { font-size: .72rem; }
body.touch-theme .bk-card-author, body.touch-theme .bk-card-meta { font-size: .62rem; }

/* ---------- Detail page --------------------------------------------- */
.bk-detail { display: flex; gap: .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem; box-shadow: var(--shadow); margin-bottom: 1rem; flex-wrap: wrap; }
.bk-detail-cover {
    width: 200px; flex-shrink: 0; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden;
    background: var(--indigo-soft, var(--paper)); display: flex; align-items: center; justify-content: center;
}
.bk-detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-detail-cover-icon { font-size: 3rem; color: var(--indigo); opacity: .5; }
.bk-detail-body { flex: 1; min-width: 0; }
.bk-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; min-width: 0; }
.bk-detail-body h1 { margin: 0 0 .5rem; font-size: 1.05rem; min-width: 0; overflow-wrap: break-word; word-break: break-word; }

.bk-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin: 0 0 .5rem; }
.bk-meta-chip {
    display: flex; align-items: center; gap: .35rem; padding: .3rem .45rem;
    background: var(--paper); border-radius: 5px; text-decoration: none; min-width: 0;
    transition: background .12s ease;
}
a.bk-meta-chip:hover { background: var(--indigo-soft, var(--border)); }
.bk-meta-chip i { font-size: .7rem; color: var(--indigo); width: 13px; text-align: center; flex-shrink: 0; }
.bk-meta-chip > span { display: flex; flex-direction: column; min-width: 0; gap: 0; }
.bk-meta-label { font-size: .54rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); font-weight: 700; line-height: 1.3; }
.bk-meta-value { font-size: .7rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }

.bk-uploader-line {
    display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--ink-soft);
    text-decoration: none; margin-bottom: .75rem;
}
.bk-uploader-line i { color: var(--ink-soft); }
.bk-uploader-line strong { color: var(--indigo); font-weight: 700; }
.bk-uploader-line:hover strong { text-decoration: underline; }

.bk-detail-description { font-size: .88rem; line-height: 1.55; margin-bottom: .75rem; white-space: pre-wrap; }
.bk-detail-stats { display: flex; gap: 1.1rem; font-size: .8rem; color: var(--ink-soft); margin-bottom: .75rem; }
.bk-detail-stats span { display: flex; align-items: center; gap: .3rem; }
.bk-detail-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bk-download-btn { font-weight: 700; }

/* ---------- Kebab menu (Edit / Delete) --------------------------- */
.bk-menu { position: relative; flex-shrink: 0; }
.bk-menu-btn {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); color: var(--ink-soft); font-size: 1rem; cursor: pointer;
    transition: background .12s ease;
}
.bk-menu-btn:hover, .bk-menu.is-open .bk-menu-btn { background: var(--paper); color: var(--ink); }
.bk-menu-dropdown {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
    min-width: 150px; max-width: min(220px, calc(100vw - 2rem)); padding: .35rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 10px 28px -12px rgba(0,0,0,.35);
}
.bk-menu.is-open .bk-menu-dropdown { display: block; }
.bk-menu-dropdown a, .bk-menu-dropdown button, .bk-menu-dropdown form { display: block; width: 100%; }
.bk-menu-dropdown a, .bk-menu-dropdown button {
    padding: .5rem .6rem; border-radius: 5px; border: none; background: none;
    font-family: inherit; font-size: .86rem; font-weight: 600; text-align: left;
    color: var(--ink); text-decoration: none; cursor: pointer;
}
.bk-menu-dropdown a:hover, .bk-menu-dropdown button:hover { background: var(--paper); }
.bk-menu-danger { color: var(--danger) !important; }
.bk-menu-danger:hover { background: rgba(214,69,90,.1) !important; }
.bk-status-select {
    padding: .4rem .6rem; border-radius: 999px; border: 1px solid var(--border);
    background: var(--paper); color: var(--ink); font-size: .82rem; font-weight: 700;
    font-family: inherit; cursor: pointer;
}
.bk-react-btn {
    display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem;
    border-radius: 999px; border: 1px solid var(--border); background: var(--paper);
    color: var(--ink-soft); font-size: .82rem; font-weight: 700; cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.bk-react-btn:hover { background: var(--border); }
.bk-react-btn.is-active-like { background: rgba(42,157,111,.12); border-color: var(--success); color: var(--success); }
.bk-react-btn.is-active-dislike { background: rgba(214,69,90,.1); border-color: var(--danger); color: var(--danger); }
.bk-count { font-size: .8rem; }
.bk-login-note { margin-top: .75rem; font-size: .85rem; color: var(--ink-soft); }
.bk-login-note a { color: var(--indigo); }
.bk-share-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; width: 100%; }
.bk-share-form textarea {
    font-family: inherit; font-size: .88rem; padding: .6rem .7rem; border: 1px solid var(--border);
    border-radius: var(--radius, 5px); background: var(--paper); resize: vertical;
}

/* ---------- Upload / Edit forms ------------------------------------ */
.bk-form-hint { font-size: .8rem; color: var(--ink-soft); margin-top: .25rem; }

/* ---------- Homepage "Recent Books" widget -------------------------- */
.bk-home-widget { margin-bottom: 1.5rem; }
.bk-home-widget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.bk-home-widget-head h2 { font-size: .98rem; margin: 0; display: flex; align-items: center; gap: .4rem; }
.bk-home-widget-head a { font-size: .8rem; color: var(--indigo); text-decoration: none; font-weight: 700; }
.bk-home-widget-head a:hover { text-decoration: underline; }
.bk-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 170px)); gap: .7rem; }

@media (max-width: 640px) {
    .bk-detail { flex-wrap: nowrap; align-items: flex-start; }
    .bk-detail-cover { width: 100px; }
    .bk-detail-body { min-width: 0; }
    .bk-detail-body h1 { font-size: .95rem; }
    .bk-meta-grid { grid-template-columns: 1fr; gap: .25rem; }
    .bk-meta-chip { padding: .3rem .4rem; }
    .bk-meta-value { font-size: .68rem; }
    .bk-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

/* ---------- Online reader (read.php) -------------------------------
   A focused, full-width reading view — minimal chrome, sticky toolbar,
   touch-friendly tap targets since this is the one part of the module
   explicitly meant to work well on touch theme/mobile. */
.bk-reader { margin: -0.5rem -0.75rem; }
.bk-reader-topbar {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .5rem;
    padding: .6rem .75rem; background: var(--surface); border-bottom: 1px solid var(--border);
}
.bk-reader-back {
    display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink);
    font-weight: 700; font-size: .85rem; min-width: 0; flex-shrink: 1;
}
.bk-reader-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-reader-controls { display: flex; align-items: center; gap: .25rem; margin-left: auto; flex-shrink: 0; }
.bk-reader-controls button {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--paper); border-radius: 6px;
    color: var(--ink); cursor: pointer; font-size: .85rem;
}
.bk-reader-controls button:disabled { opacity: .35; cursor: default; }
.bk-reader-controls button:not(:disabled):hover { background: var(--border); }
.bk-reader-page-info { font-size: .78rem; font-weight: 700; color: var(--ink-soft); padding: 0 .35rem; white-space: nowrap; }
.bk-reader-download {
    width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--paper); border-radius: 6px; color: var(--ink);
}
.bk-reader-download:hover { background: var(--border); }

.bk-pdf-viewer {
    display: flex; align-items: center; justify-content: center; padding: 1rem .5rem; overflow-x: auto;
    min-height: 60vh; background: var(--bg, #e9e9ee);
}
.bk-pdf-loading { width: 100%; max-width: 220px; height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; }
.bk-pdf-loading-bar {
    display: block; height: 100%; width: 35%; background: var(--indigo); border-radius: 999px;
    animation: bkPdfLoadingSlide 1.1s ease-in-out infinite;
}
@keyframes bkPdfLoadingSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(385%); }
}
.bk-pdf-viewer canvas { max-width: 100%; height: auto; box-shadow: 0 6px 24px -10px rgba(0,0,0,.35); background: #fff; }

.bk-txt-viewer {
    max-width: 720px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; font-size: .95rem;
    line-height: 1.75; white-space: pre-wrap; word-break: break-word;
}

.bk-reader-unsupported {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem;
    padding: 4rem 1.5rem;
}
.bk-reader-unsupported i { font-size: 2.5rem; color: var(--ink-soft); }
.bk-reader-unsupported p { color: var(--ink-soft); max-width: 360px; }
.bk-reader-error { text-align: center; padding: 3rem 1rem; color: var(--ink-soft); }
.bk-reader-error a { color: var(--indigo); }

/* Touch theme: compact toolbar — smaller buttons and title than the default,
   so the toolbar takes up as little screen space as possible on a phone. */
body.touch-theme .bk-reader-controls button,
body.touch-theme .bk-reader-download { width: 28px; height: 28px; font-size: .68rem; }
body.touch-theme .bk-reader-topbar { padding: .4rem .5rem; gap: .35rem; }
body.touch-theme .bk-reader-back { gap: .3rem; font-size: .74rem; }
body.touch-theme .bk-reader-title { font-size: .7rem; }
body.touch-theme .bk-reader-controls { gap: .15rem; }
body.touch-theme .bk-reader-page-info { font-size: .66rem; padding: 0 .15rem; }
body.touch-theme .bk-pdf-viewer { padding: .6rem .3rem; -webkit-overflow-scrolling: touch; }

.bk-epub-viewer { position: relative; min-height: 75vh; display: flex; align-items: center; justify-content: center; }
.bk-epub-content { width: 100%; max-width: 720px; height: 75vh; margin: 0 auto; padding: 0 .5rem; }
body.touch-theme .bk-epub-content { height: 78vh; }

@media (max-width: 480px) {
    .bk-reader-back .bk-reader-title { display: none; }
    .bk-reader-page-info { display: none; }
}