Navigation and Sidebar Hovers

<style>
  /* ========================================
   SIDEBAR - Base Structure & Transparency
   Sets left/right sidebars to transparent background
   ======================================== */
.tri-layout-left-contents,
.tri-layout-right-contents {
  background: transparent !important;
}

/* ========================================
   SIDEBAR - Section Boxes (nav, .mb-xl)
   Applies consistent card-like styling to sidebar sections
   Includes padding, border, rounded corners, and subtle background
   ======================================== */
.tri-layout-left-contents nav,
.tri-layout-left-contents .mb-xl,
.tri-layout-right-contents nav,
.tri-layout-right-contents .mb-xl {
  background: rgba(255, 255, 255, .6) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin: 8px 0 !important;
  border: 1px solid rgba(166, 166, 166, .1) !important;
}

html.dark-mode .tri-layout-left-contents nav,
html.dark-mode .tri-layout-left-contents .mb-xl,
html.dark-mode .tri-layout-right-contents nav,
html.dark-mode .tri-layout-right-contents .mb-xl {
  background: rgba(0, 0, 0, .7) !important;
  border-color: rgba(90, 90, 90, .1) !important;
}

/* ========================================
   SIDEBAR - Section Headers (h5)
   Styles h5 titles inside section boxes: bold, proper spacing, high contrast
   ======================================== */
.tri-layout-left-contents nav h5,
.tri-layout-left-contents .mb-xl h5,
.tri-layout-right-contents nav h5,
.tri-layout-right-contents .mb-xl h5 {
  margin: 0 0 8px !important;
  color: rgba(0, 0, 0, .9) !important;
  font-weight: bold !important;
}

html.dark-mode .tri-layout-left-contents nav h5,
html.dark-mode .tri-layout-left-contents .mb-xl h5,
html.dark-mode .tri-layout-right-contents nav h5,
html.dark-mode .tri-layout-right-contents .mb-xl h5 {
  color: rgba(255, 255, 255, .9) !important;
}

/* ========================================
   SIDEBAR - List Containers (ul, .body)
   Removes default list margins/padding for full control
   ======================================== */
.tri-layout-left-contents nav ul,
.tri-layout-left-contents .mb-xl ul,
.tri-layout-left-contents nav .body,
.tri-layout-left-contents .mb-xl .body,
.tri-layout-right-contents nav ul,
.tri-layout-right-contents .mb-xl ul,
.tri-layout-right-contents nav .body,
.tri-layout-right-contents .mb-xl .body {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ========================================
   SIDEBAR - List Items (General Styling)
   Flex layout, consistent padding, rounded, tight spacing
   Uses ::before for hover overlay to avoid background conflicts
   ======================================== */
.tri-layout-left-contents .entity-list-item,
.tri-layout-left-contents .icon-list-item,
.tri-layout-right-contents .entity-list-item,
.tri-layout-right-contents .icon-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 1px 0 !important;
  background: transparent !important; /* Prevent direct bg conflict */
  text-decoration: none !important;
}

/* Hover overlay using ::before (avoids conflicting with direct :hover bg) */
.tri-layout-left-contents .entity-list-item::before,
.tri-layout-left-contents .icon-list-item::before,
.tri-layout-right-contents .entity-list-item::before,
.tri-layout-right-contents .icon-list-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(197, 197, 197, .8);
  border-radius: 4px;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: -1;
  left: 5px;
  right: 5px;
}

.tri-layout-left-contents .entity-list-item:hover::before,
.tri-layout-left-contents .icon-list-item:hover::before,
.tri-layout-right-contents .entity-list-item:hover::before,
.tri-layout-right-contents .icon-list-item:hover::before {
  opacity: 1;
}

html.dark-mode .tri-layout-left-contents .entity-list-item::before,
html.dark-mode .tri-layout-left-contents .icon-list-item::before,
html.dark-mode .tri-layout-right-contents .entity-list-item::before,
html.dark-mode .tri-layout-right-contents .icon-list-item::before {
  background: rgba(0, 0, 0, .9);
}

/* Ensure no direct background on hover (prevents conflict with ::before) */
.entity-list-item:hover,
.icon-list-item:hover {
  background: transparent !important;
}

/* ========================================
   SIDEBAR - Selected / Current Item Highlight
   Gray background for active page in navigation
   ======================================== */
.tri-layout-left-contents .selected,
.tri-layout-left-contents .current-heading,
.tri-layout-right-contents .selected,
.tri-layout-right-contents .current-heading {
  background: rgba(120, 120, 120, .3) !important;
  border-radius: 4px !important;
}

html.dark-mode .tri-layout-left-contents .selected,
html.dark-mode .tri-layout-left-contents .current-heading,
html.dark-mode .tri-layout-right-contents .selected,
html.dark-mode .tri-layout-right-contents .current-heading {
  background: rgba(100, 100, 100, .5) !important;
}

/* ========================================
   BOOK NAVIGATION (#book-tree) - Compact & Clean
   Tighter spacing, no text wrap, better icon alignment
   ======================================== */
#book-tree .entity-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 6px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#book-tree .entity-list-item .content h4 {
  font-size: .98em !important;
  font-weight: normal !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#book-tree li {
  margin: 2px 0 !important;
}

#book-tree .entity-list-item .icon {
  flex-shrink: 0 !important;
  margin-right: 4px !important;
}

/* Indent pages under chapters */
#book-tree .chapter-contents-list .list-item-page {
  margin-left: 6px !important;
  position: relative !important;
}

/* ========================================
   BREADCRUMBS - Clean, Visible, No Hover Effects
   Full opacity, card-like background, preserves BookStack colors
   ======================================== */
.breadcrumbs,
a.no-link-style {
  background: rgba(255, 255, 255, .6) !important;
  border-radius: 8px !important;
  opacity: 1 !important;
}

html.dark-mode .breadcrumbs,
html.dark-mode a.no-link-style {
  background: rgba(0, 0, 0, .7) !important;
}

/* Preserve BookStack entity colors */
.breadcrumbs a.text-bookshelf { color: var(--color-bookshelf) !important; }
.breadcrumbs a.text-book { color: var(--color-book) !important; }
.breadcrumbs a.text-page { color: var(--color-page) !important; }

/* Same in dark mode */
html.dark-mode .breadcrumbs a.text-bookshelf { color: var(--color-bookshelf) !important; }
html.dark-mode .breadcrumbs a.text-book { color: var(--color-book) !important; }
html.dark-mode .breadcrumbs a.text-page { color: var(--color-page) !important; }

/* Remove hover outlines and transitions */
.breadcrumbs .icon-list-item,
.breadcrumbs .icon-list-item *,
.breadcrumbs .icon-list-item svg,
.breadcrumbs .icon-list-item svg path,
.breadcrumbs .icon-list-item span {
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}

.breadcrumbs .icon-list-item.outline-hover,
.breadcrumbs .icon-list-item.outline-hover:hover,
.breadcrumbs .icon-list-item.outline-hover:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.breadcrumbs .svg-icon {
  fill: currentColor !important;
}

/* ========================================
   FOOTER - Match Sidebar Card Style
   ======================================== */
footer {
  background: rgba(255, 255, 255, .6) !important;
}

html.dark-mode footer {
  background: rgba(0, 0, 0, .7) !important;
}

/* ========================================
   COMMENTS - Hidden Entirely
   ======================================== */
.comments-container {
  visibility: hidden !important;
  display: none !important;
}

/* ========================================
   EDITOR PREVIEWS - Remove Background Images
   Ensures clean preview in Markdown & WYSIWYG editors
   ======================================== */
html.markdown-editor-display body.page-content,
html.wysiwyg-editor-display body.page-content {
  background-image: none !important;
  background-color: var(--color-background) !important;
}

html.markdown-editor-display::before,
html.markdown-editor-display body::before,
html.wysiwyg-editor-display::before,
html.wysiwyg-editor-display body::before {
  content: none !important;
  background-image: none !important;
}
</style>