/* ─── Library detail view (sidebar + PDF preview) ───────────────────────── */

#lib-detail-view:not(.hidden) {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: 1rem;
  height: calc(100vh - var(--preview-sticky-top) - 2rem);
  align-items: start;
}

@media (max-width: 767px) {
  #lib-detail-view {
    grid-template-columns: 1fr;
    grid-template-rows: 12rem minmax(0, 1fr);
    height: auto;
    min-height: calc(100vh - var(--preview-sticky-top) - 2rem);
  }
}

/* ── Left sidebar ─────────────────────────────────────────────────────────── */

#lib-sidebar {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--preview-sticky-top) - 2rem);
  min-height: 0;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(8, 14, 30, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 767px) {
  #lib-sidebar { height: clamp(15rem, 40vh, 25rem); }
}

/* Back button */
#lib-back-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(148 163 184);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem 1rem 0 0;
  transition: color 0.15s, background 0.15s;
  width: 100%;
  text-align: left;
  cursor: pointer;
  flex-shrink: 0;
}
#lib-back-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
#lib-back-btn:focus-visible { outline: 2px solid rgba(34, 211, 238, 0.7); outline-offset: -2px; }

/* Subject header strip — sits between back btn and scroll list, stays visible */
.lib-sidebar-subject-hdr {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}
.lib-sidebar-subject-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.lib-sidebar-subject-dot--cyan    { background: rgb(34 211 238);  box-shadow: 0 0 5px rgba(34, 211, 238, 0.55);  }
.lib-sidebar-subject-dot--violet  { background: rgb(167 139 250); box-shadow: 0 0 5px rgba(167, 139, 250, 0.55); }
.lib-sidebar-subject-dot--blue    { background: rgb(96 165 250);  box-shadow: 0 0 5px rgba(96, 165, 250, 0.55);  }
.lib-sidebar-subject-dot--emerald { background: rgb(52 211 153);  box-shadow: 0 0 5px rgba(52, 211, 153, 0.55);  }
.lib-sidebar-subject-dot--slate   { background: rgb(203 213 225); box-shadow: 0 0 5px rgba(203, 213, 225, 0.55); }
.lib-sidebar-subject-name {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgb(148 163 184);
}

/* Scrollable file list */
#lib-sidebar-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0.375rem 0.375rem 0.75rem;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.22) transparent;
}

#lib-sidebar-list::-webkit-scrollbar { width: 8px; }
#lib-sidebar-list::-webkit-scrollbar-track { background: transparent; }
#lib-sidebar-list::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.22);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#lib-sidebar-list::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.38);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Year row with gradient divider line */
.lib-sidebar-year-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.5rem 0.2rem;
  margin-top: 0.375rem;
}
#lib-sidebar-list > .lib-sidebar-year-row:first-child { margin-top: 0; }

.lib-sidebar-year-label {
  padding: 0;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(100 116 139);
}
.lib-sidebar-year-divider {
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.13), transparent);
}

/* Session badge row */
.lib-sidebar-session-row {
  padding: 0.1rem 0.5rem 0.1rem;
}
.lib-sidebar-session-badge {
  display: inline-flex;
  height: 1.15rem;
  min-width: 1.15rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  padding: 0 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: rgb(100 116 139);
  letter-spacing: 0.05em;
  cursor: default;
}

/* File buttons */
.lib-sidebar-item {
  display: block;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  color: rgb(148 163 184);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  box-shadow: inset 2px 0 0 transparent;
}
.lib-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.10);
}
.lib-sidebar-item:focus-visible { outline: 2px solid rgba(34, 211, 238, 0.6); outline-offset: -2px; }

/* Active highlight per subject theme — background + color + left accent */
.lib-sidebar-item.is-active,
.lib-sidebar-item--cyan.is-active    { background: rgba(34, 211, 238, 0.12);  color: rgb(103 232 249); box-shadow: inset 2px 0 0 rgba(34, 211, 238, 0.65);  }
.lib-sidebar-item--violet.is-active  { background: rgba(167, 139, 250, 0.12); color: rgb(196 181 253); box-shadow: inset 2px 0 0 rgba(167, 139, 250, 0.65); }
.lib-sidebar-item--blue.is-active    { background: rgba(96, 165, 250, 0.12);  color: rgb(191 219 254); box-shadow: inset 2px 0 0 rgba(96, 165, 250, 0.65);  }
.lib-sidebar-item--emerald.is-active { background: rgba(52, 211, 153, 0.12);  color: rgb(110 231 183); box-shadow: inset 2px 0 0 rgba(52, 211, 153, 0.65);  }
.lib-sidebar-item--slate.is-active   { background: rgba(203, 213, 225, 0.10); color: rgb(226 232 240); box-shadow: inset 2px 0 0 rgba(203, 213, 225, 0.65); }

/* ── PDF preview pane ────────────────────────────────────────────────────── */

#lib-detail-preview {
  position: relative;          /* anchors pdf-loading-overlay & pdf-empty-state */
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--preview-sticky-top) - 2rem);
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  background: var(--pane-bg);
}

@media (max-width: 767px) {
  #lib-detail-preview {
    height: min(70vh, 600px);
  }
}

/* Centre the pages stack when JS sets an explicit px width narrower than container */
#lib-detail-preview .pdf-pages-stack {
  margin-left: auto;
  margin-right: auto;
}

/* Match the workspace preview-mode override: display:block allows the pages
   stack to centre via margin:auto (flex align-items:stretch would left-align it). */
#lib-detail-preview .pdf-viewport-scroll {
  display: block;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(8, 30, 52, 0.52) 0%, rgba(2, 8, 20, 0.5) 100%);
}

/* ─── Portrait phones: fix PDF-preview row height in auto-height grid ───── */
/* grid-template-rows: 12rem minmax(0,1fr) collapses the 1fr row to 0 when   */
/* height: auto — override with explicit size matching #lib-detail-preview.   */
@media (max-width: 767px) {
  #lib-detail-view {
    grid-template-rows: clamp(15rem, 40vh, 25rem) min(60vh, 600px);
    min-height: unset;
  }
}

/* ─── Landscape phones: side-by-side detail layout ─────────────────────── */
/* Tablets in landscape are ≥ 768 px tall, so max-height: 500px excludes them. */
@media (orientation: landscape) and (max-height: 500px) {
  #lib-detail-view {
    grid-template-columns: 11rem minmax(0, 1fr);
    grid-template-rows: 1fr;
    height: calc(100vh - var(--preview-sticky-top) - 2rem);
  }
  #lib-sidebar {
    height: calc(100vh - var(--preview-sticky-top) - 2rem);
  }
  #lib-detail-preview {
    height: calc(100vh - var(--preview-sticky-top) - 2rem);
  }
}