/* Shelves Theme Styles */
/* 优先级最高的shelves主题样式 */

/* 特定于书架详情页的样式 */

/* 将content-wrap mt-m card容器改为透明 */
.content-wrap.mt-m.card {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.tri-layout-middle {
    padding-left: 24px; 
}

/* 深浅色模式适配 */
body:not(.dark-mode) .tri-layout-middle {
    border-left: 1px solid #30303014 !important;
}

body.dark-mode .tri-layout-middle {
    border-left: 1px solid var(--color-border-light) !important;
}

/* 隐藏h5下方的内容，准备实现点击展开功能 */
#recents > *:not(h5),
#popular > *:not(h5),
#new > *:not(h5) {
    display: none !important;
}

/* 确保所有书架列表始终显示 */
#shelves-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

#shelves-list > * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 确保书架列表容器可见 */
.shelves-list-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 为h5添加点击样式 */
#recents h5,
#popular h5,
#new h5 {
    cursor: pointer !important;
    position: relative !important;
    padding-right: 20px !important;
    font-size: 16px !important;
}

/* 添加展开/折叠指示器 */
#recents h5::after,
#popular h5::after,
#new h5::after {
    content: '▼' !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    transition: transform 0.3s ease !important;
}

/* 设置.content-wrap.card的背景为透明且无边框 */
.content-wrap.card {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding:16px 20px !important;
}

/* 展开状态的指示器 */
#recents.expanded h5::after,
#popular.expanded h5::after,
#new.expanded h5::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* 展开状态显示内容 */
#recents.expanded > *:not(h5),
#popular.expanded > *:not(h5),
#new.expanded > *:not(h5) {
    display: block !important;
}

/* 减小三个部分之间的距离 */
#recents,
#popular,
#new {
    margin-bottom: 10px !important;
}

/* 书架列表样式 */

/* 强制去除所有可能的下划线效果 */
.entity-list a {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.entity-list a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 1. 将网格改为行内 flex 布局 */
.entity-shelf-books.entity-list-item-children {
    display: flex !important;
    flex-wrap: wrap !important;          /* 允许换行 */
    gap: 8px 16px !important;            /* 行间距 8px，列间距 16px */
    align-items: center !important;
    padding-left: 16px !important;
}

/* 2. 去除每个书籍项的块状包裹 */
.entity-shelf-books.entity-list-item-children > div {
    display: inline !important;          /* 去除块级 */
    background: none !important;         /* 去除背景 */
    border: none !important;             /* 去除边框 */
    padding: 0 !important;               /* 去除内边距 */
    margin: 0 !important;                /* 去除外边距 */
}
.entity-shelf-books .entity-chip:after {
    background-color: #cccccc00 !important;
}

/* 3. 修改链接样式 - 行内显示 */
.entity-shelf-books .entity-chip {
    display: inline-flex !important;     /* 行内 flex，保持图标对齐 */
    align-items: center;
    gap: 4px;                            /* 图标和文字间距 */
    
    /* 去除背景和块状效果 */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    color: #666 !important;
    font-size: 14px;
    text-decoration: none;
}

/* 4. 图标大小调整 */
.entity-shelf-books .entity-chip .svg-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 5. 悬停效果（可选） */
.entity-shelf-books .entity-chip:hover {
    text-decoration: underline;
    color: var(--color-primary, #e98629) !important;
}

#shelves-list {
    margin-bottom: 15px !important;
    margin-top: 0px !important;
}

.entity-list-item-children {
    grid-template-columns: none !important;

}
.entity-list-item-children {
    padding:0 !important;
}

.shelves-list-container {
    margin-top: 10px !important;
}

/* 设置book-content的背景为透明 */
.book-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.shelf-name {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* 图书卡片展示区域样式 */
#shelf-books-container {
    margin-top: 0px !important;
}

#shelf-books-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 solid #e5e7eb !important;
}

body.dark-mode #shelf-books-header {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

#selected-shelf-name {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* 加载状态样式 */
.loading-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 40px 0 !important;
}

.loading-container > div {
    width: 12px !important;
    height: 12px !important;
    margin: 0 4px !important;
    background-color: #07c160 !important;
    border-radius: 50% !important;
    animation: loading 1.4s infinite ease-in-out both !important;
}

.loading-container > div:nth-child(1) {
    animation-delay: -0.32s !important;
}

.loading-container > div:nth-child(2) {
    animation-delay: -0.16s !important;
}

@keyframes loading {
    0%, 80%, 100% {
        transform: scale(0) !important;
    }
    40% {
        transform: scale(1) !important;
    }
}

/* 隐藏类 */
.hidden {
    display: none !important;
}