/* ==========================================================================
   FlintHub — 论坛热榜插件样式（右栏面板 + 独立页 /hot + 后台设置）

   设计口径（2026-09-27 改版，对齐「个人信息页面」`plugins/user_profile`）：
   · 容器一律用核心 `.mn-section`（= 卡片：--mn-bg-card 底 + --mn-border 边 +
     border-radius 10px + --mn-shadow-sm）—— 与 `.up-card` / `.up-section` 是同一套语言。
   · 切换控件一律用核心 `.mn-section-tab`（与 forum / message / suiyu / search 页一致），
     **不再自造胶囊 chip**。
   · 列表条目：排名徽标 + 标题 / 元信息（上下两行）+ 右侧数值块。
   · 右栏面板的外框 / 标题 / 列表 / 条目 / 数值**全部复用核心 .mn-* 类**
     （与「站点统计」面板像素级一致），此处只补核心没有的部分。

   ⚠️⚠️ `.mn-section` **自身没有 padding**，核心是让每个子行各自带 `10px 20px`
       （见 `.mn-row` / `.mn-section-header`）。子元素不自带左右内边距 → 会顶到卡片两头。
   ⚠️ 颜色一律走既有 --mn-* 主题变量（9 套主题 + 主题目录全量覆盖，已逐条核对），
      禁止硬编码色值 —— 否则暗夜主题下会出现「浅底浅字」失读（§11.7）。
      ⚠️ `--mn-danger` / `--mn-spectrum-*` **不存在**；`--mn-card-bg` / `--mn-bg-hover` 也不存在
         （存在的是 `--mn-bg-card` / `--mn-bg-row-hover`）。`--mn-bg-body` 存在。
      ⚠️ `plugins/user_profile/assets/style.css` 里的 `--text-light` **未定义**（永远走兜底值），
         本文件不使用它，一律用 `--mn-text-muted`。
   ⚠️ 需要覆盖核心同特异性声明的规则一律带插件容器前缀提权：
      插件 CSS 在 `main.php:40` 注入、早于核心 `modern.css`（`:51`）与 `editor.css`（`:65`），
      同权重时**核心后胜**。
   ⚠️ 零内联：本文件即全部样式，视图里不写 style="" / on*=
   ========================================================================== */

/* --------------------------------------------------------------------------
   排名序号（面板 + 独立页共用基座）
   -------------------------------------------------------------------------- */
.hottopics-panel .hottopics-rank,
.hottopics-page .hottopics-rank {
    flex: none;
    font-style: normal;
    font-weight: 600;
    text-align: center;
}

/* 面板内：沿用站点统计的紧凑行内序号（纯文字，不占方块） */
.hottopics-panel .hottopics-rank {
    width: 13px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mn-text-muted, #888);
}

.hottopics-panel .hottopics-rank-top {
    color: var(--mn-primary, #0066cc);
    font-weight: 700;
}

/* ==========================================================================
   一、右栏面板
   ========================================================================== */

/* 条目布局：核心 .mn-stat-item 是 space-between，需补 gap / 收缩规则（提权到 (0,2,0)） */
.hottopics-panel .mn-stat-item {
    gap: 8px;
}

.hottopics-panel .mn-stat-label {
    flex: 1;
    min-width: 0;
}

.hottopics-panel .mn-stat-value {
    flex: none;
}

/* 标题：长标题单行截断（hover 用 title 看全） */
.hottopics-panel .hottopics-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--mn-text, #333);
    text-decoration: none;
}

.hottopics-panel .hottopics-title:hover {
    color: var(--mn-primary, #0066cc);
}

/* 标题栏右侧「查看完整热榜」箭头 */
.hottopics-panel .hottopics-more {
    flex: none;
    color: var(--mn-text-muted, #888);
    text-decoration: none;
}

.hottopics-panel .hottopics-more:hover {
    color: var(--mn-primary, #0066cc);
}

/* ==========================================================================
   二、独立页 /hot
   ========================================================================== */

/* 头部：核心 .mn-section-header 是 flex + space-between（左标题 / 右 tab），
   窄屏允许换行，避免 5 个 tab 挤压标题 */
.hottopics-page .mn-section-header {
    flex-wrap: wrap;
    gap: 8px;
}

/* 时间范围 + 榜单两组 tab（用核心 .mn-section-tab，与 forum / suiyu 页同款） */
.hottopics-page .hottopics-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

/* 两组 tab 之间的竖分隔 */
.hottopics-page .hottopics-tabs-sep {
    width: 1px;
    height: 14px;
    margin: 0 7px;
    background: var(--mn-border-light, #e5e7eb);
}

/* ---- 列表 ---- */

.hottopics-page .hottopics-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ⚠️ 左右内边距必须由条目自己带（`.mn-section` 无 padding），与核心 `.mn-row` 的 10px 20px 对齐 */
.hottopics-page .hottopics-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--mn-border-light, #e5e7eb);
}

.hottopics-page .hottopics-item:last-child {
    border-bottom: 0;
}

/* 排名：方角小徽标（观感对齐核心 .mn-cat-count），前三名换主色底 */
.hottopics-page .hottopics-rank {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1;
    color: var(--mn-text-muted, #888);
    background: var(--mn-bg-body, #f4f5f7);
}

.hottopics-page .hottopics-rank-top {
    color: var(--mn-primary, #0066cc);
    background: var(--mn-primary-subtle, #f0f3ff);
    font-weight: 700;
}

.hottopics-page .hottopics-body {
    flex: 1;
    min-width: 0;
}

.hottopics-page .hottopics-item-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--mn-text, #333);
    text-decoration: none;
    transition: color .12s;
}

.hottopics-page .hottopics-item-title:hover {
    color: var(--mn-primary, #0066cc);
}

/* 元信息：版块胶囊（核心 .mn-tag.mn-tag-cat）+ 作者 + 时间 */
.hottopics-page .hottopics-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 12px;
    color: var(--mn-text-muted, #888);
}

.hottopics-page .hottopics-meta-link {
    color: var(--mn-text-secondary, #666);
    text-decoration: none;
    transition: color .12s;
}

.hottopics-page .hottopics-meta-link:hover {
    color: var(--mn-primary, #0066cc);
}

.hottopics-page .hottopics-dot {
    color: var(--mn-border, #ddd);
}

/* 右侧数值：数值 + 单位上下堆叠、右对齐成一列 —— 不再是「飘在右边缘的裸数字」 */
.hottopics-page .hottopics-value {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    min-width: 46px;
}

.hottopics-page .hottopics-value-num {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mn-primary, #0066cc);
}

.hottopics-page .hottopics-value-unit {
    font-size: 11px;
    line-height: 1.2;
    color: var(--mn-text-muted, #888);
}

/* ---- 窄屏 ---- */
@media (max-width: 640px) {
    .hottopics-page .hottopics-item {
        padding: 11px 14px;
        gap: 10px;
    }

    .hottopics-page .hottopics-rank {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .hottopics-page .hottopics-item-title {
        font-size: 14px;
    }

    .hottopics-page .hottopics-value {
        min-width: 40px;
    }

    .hottopics-page .hottopics-value-num {
        font-size: 15px;
    }
}

/* ==========================================================================
   三、后台设置页
   ========================================================================== */

.hottopics-admin-cache {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    font-size: 13px;
    border: 1px solid var(--mn-border-light, #e5e7eb);
    border-radius: 8px;
}

.hottopics-admin-cache-label {
    color: var(--mn-text-muted, #888);
}

.hottopics-admin-cache-value {
    font-weight: 600;
    color: var(--mn-text, #333);
}

.hottopics-admin-cache-detail {
    font-size: 12px;
    color: var(--mn-text-muted, #888);
}

.hottopics-settings {
    max-width: 620px;
}

.hottopics-field {
    margin-bottom: 18px;
}

.hottopics-hint {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--mn-text-muted, #888);
}

.hottopics-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}