/**
 * 子比论坛美化插件 - 前台样式 v3.4
 */

/* ============================================
   核心修复：置顶帖颜色 - 通过徽章定位
   ============================================ */

/* 置顶徽章颜色 */
.badge-topping {
    background: var(--sticky-color, #3498db) !important;
    color: #fff !important;
}

/* 置顶徽章后面的标题 - 强制颜色 */
.badge-topping + .forum-title-wrap .forum-title,
.badge-topping + * .forum-title-wrap .forum-title,
.badge-topping ~ .forum-title-wrap .forum-title {
    color: var(--sticky-color, #3498db) !important;
}

/* 在帖子容器内查找置顶徽章 */
.posts-item:has(.badge-topping) .forum-title-wrap .forum-title,
.posts-item:has(.badge-topping) .forum-title,
.ajax-item:has(.badge-topping) .forum-title-wrap .forum-title,
.ajax-item:has(.badge-topping) .forum-title {
    color: var(--sticky-color, #3498db) !important;
}

/* title-sticky 类（如果存在） */
.forum-title.title-sticky,
.post-title.title-sticky,
.forum-title-wrap .forum-title.title-sticky {
    color: var(--sticky-color, #3498db) !important;
}

/* 暗色模式 */
.dark .badge-topping + .forum-title-wrap .forum-title,
.dark .badge-topping + * .forum-title-wrap .forum-title,
.dark .posts-item:has(.badge-topping) .forum-title-wrap .forum-title,
.dark .posts-item:has(.badge-topping) .forum-title,
.night .badge-topping + .forum-title-wrap .forum-title,
.night .badge-topping + * .forum-title-wrap .forum-title,
.night .posts-item:has(.badge-topping) .forum-title-wrap .forum-title,
.night .posts-item:has(.badge-topping) .forum-title {
    color: var(--sticky-color, #3498db) !important;
}

/* ============================================
   标题包装
   ============================================ */

.forum-title-wrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.forum-title {
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.forum-title:hover {
    opacity: 0.8;
}

/* ============================================
   徽章样式
   ============================================ */

.forum-badges {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.forum-badges .badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 10px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.forum-badges .badge i {
    font-size: 10px;
}

.forum-badges .badge:hover {
    transform: scale(1.05);
}

/* 置顶徽章 */
.badge-sticky {
    background: var(--sticky-color, #3498db) !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(52, 152, 219, 0.3);
}

/* 精华徽章 */
.badge-essence {
    background: var(--essence-color, #9b59b6) !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(155, 89, 182, 0.3);
}

/* 热门徽章 */
.badge-hot {
    background: var(--hot-color, #e74c3c) !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(231, 76, 60, 0.3);
}

/* 新帖徽章 */
.badge-new {
    background: var(--new-color, #2ecc71) !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(46, 204, 113, 0.3);
}

/* 其他徽章 */
.badge-reply {
    background: #f39c12 !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(243, 156, 18, 0.3);
}

.badge-views-high {
    background: #e67e22 !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(230, 126, 34, 0.3);
}

.badge-no-reply {
    background: #95a5a6 !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(149, 165, 166, 0.3);
}

/* ============================================
   版块热门标题
   ============================================ */

.plate-title-hot {
    color: #e74c3c !important;
    font-weight: 700;
}

.plate-title-hot::after {
    content: " 🔥";
    font-size: 14px;
}

.plate-title-hot-child {
    color: #e74c3c !important;
    font-weight: 700;
}

.plate-title-hot-child .hot-icon {
    font-size: 12px;
    margin-left: 2px;
}

/* ============================================
   分类标签配色
   ============================================ */

.forum-category-tag,
.post-category-tag {
    display: inline-block;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 22px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.forum-category-tag:hover,
.post-category-tag:hover {
    transform: scale(1.05);
    opacity: 0.8;
}

/* ============================================
   统计小工具
   ============================================ */

.forum-stats-widget {
    padding: 5px 0;
}

.forum-stats-widget .stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-around;
}

.forum-stats-widget .stat-item {
    text-align: center;
    flex: 1;
    min-width: 60px;
    padding: 8px 4px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.forum-stats-widget .stat-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.dark .forum-stats-widget .stat-item:hover,
.night .forum-stats-widget .stat-item:hover,
[data-theme="dark"] .forum-stats-widget .stat-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.forum-stats-widget .stat-number {
    font-size: 20px;
    font-weight: 700;
    color: #262626;
}

.forum-stats-widget .stat-label {
    font-size: 12px;
    color: #8c8c8c;
}

.dark .forum-stats-widget .stat-number,
.night .forum-stats-widget .stat-number,
[data-theme="dark"] .forum-stats-widget .stat-number {
    color: #e8e8e8;
}

.dark .forum-stats-widget .stat-label,
.night .forum-stats-widget .stat-label,
[data-theme="dark"] .forum-stats-widget .stat-label {
    color: #a0a0a0;
}

/* ============================================
   响应式适配
   ============================================ */

@media (max-width: 768px) {
    .forum-badges .badge {
        font-size: 9px;
        padding: 0 6px;
        line-height: 16px;
    }
    .forum-badges .badge i {
        font-size: 8px;
    }
    
    .forum-stats-widget .stat-number {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .forum-badges .badge {
        font-size: 8px;
        padding: 0 4px;
        line-height: 14px;
    }
    .forum-badges .badge i {
        font-size: 7px;
    }
    .forum-title-wrap {
        gap: 4px;
    }
}