/* ================== BAOZ UI (full) ================== */
:root{
  --ru-hover-bg: #FFF7CC;
  --ru-hover-bd: #FDE68A;
}
/* Card & list look */
.card,
.entity-list-item,
.shelf-grid .shelf {
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.card:hover,
.entity-list-item:hover {
  
  border-color:var(--ru-hover-bd) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

/* Book/Shelf cover rounded */
.book-cover,
.shelf-cover {
  border-radius: 12px;
  overflow: hidden;
}

/* ===== Hover vàng nhạt cho item trong danh sách ===== */
/* Bọc đầy đủ các trường hợp anchor của BookStack */
.entity-list a.entity-list-item,
a.book.entity-list-item,
a.page.entity-list-item,
a.chapter.entity-list-item,
a.shelf.entity-list-item{
  border-radius: var(--ru-radius-card);
  border: 1px solid transparent; /* để màu viền hover lên đẹp hơn */
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

/* Hiệu ứng khi hover */
.entity-list a.entity-list-item:hover,
a.book.entity-list-item:hover,
a.page.entity-list-item:hover,
a.chapter.entity-list-item:hover,
a.shelf.entity-list-item:hover{
  background-color: var(--ru-hover-bg) !important;
  border-color: var(--ru-hover-bd) !important;
  box-shadow: var(--ru-shadow-hover);
  transform: translateY(-1px);
}

/* Compact list vẫn áp dụng hover */
.entity-list.compact a.entity-list-item:hover{
  background-color: var(--ru-hover-bg) !important;
  border-color: var(--ru-hover-bd) !important;
  box-shadow: var(--ru-shadow-hover);
}

/* Tôn trọng người dùng bật giảm chuyển động (tuỳ chọn) */
@media (prefers-reduced-motion: reduce){
  .card,
  .entity-list-item,
  .shelf-grid .shelf,
  .entity-list a.entity-list-item{
    transition: none !important;
  }
}
/* ======================== */

/* Shelf grid on wide screens */
@media (min-width: 1200px) {
  .shelf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px;
  }
}

/* Header color */
.header { background: #0d6efd; }
.header a,
.header .text-link { color: #fff !important; }
.header .logo { filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }

/* Sidebar page list tweaks */
.sidebar-page-list .page-name { font-weight: 600; }
.sidebar-page-list .fine-print,
.entity-meta { color: #6b7280; }

/* -----------------------------------------------------
   TOOLBAR ACTIONS (buttons ? header/nội dung)
   KHÔNG áp cho sidebar .actions
   ----------------------------------------------------- */
.page-actions a,
.book-actions a,
.entity-actions a,
.chapter-actions a,
.shelf-actions a {
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Icon chu?n cho các toolbar trên */
.page-actions a .svg-icon,
.book-actions a .svg-icon,
.entity-actions a .svg-icon,
.chapter-actions a .svg-icon,
.shelf-actions a .svg-icon {
  width: 18px;
  height: 18px;
  display: block; /* tránh l?ch baseline */
}

/* Logo */
.logo-image { height: 80px; }

/* =====================================================
   SIDEBAR ACTIONS – FIX L?CH “Xem Th?”
   (d?t PHÍA CU?I file d? ghi dè s?ch)
   ===================================================== */

/* Tr? layout v? block (BookStack m?c d?nh) d? các hàng cân d?u */
.actions .icon-list > li > a {
  display: block !important;       /* KHÔNG dùng flex ? sidebar */
  padding: 8px 10px !important;
  line-height: 1.4;
}

/* Khung icon tròn bên trái: c? d?nh size & can gi?a */
.actions .icon-list > li > a > .icon {
  width: 28px !important;
  height: 28px !important;
  margin-right: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Kích thu?c SVG bên trong icon */
.actions .icon-list > li > a > .icon > .svg-icon,
.actions .icon-list > li > a > .icon > svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* Phòng tru?ng h?p có SVG d?t tr?c ti?p trong <a> (không b?c .icon) */
.actions .icon-list > li > a > .svg-icon,
.actions .icon-list > li > a > svg {
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

/* Gi? chi?u cao hàng d?ng nh?t & ch?ng style khác chen vào */
.actions .icon-list > li {
  list-style: none;
}
.actions .icon-list > li > a * {
  line-height: 1.4 !important;
}