/* ==========================================================================
   站点统计面板（顶栏「统计」按钮弹出的面板）
   由 Joe/stats.php 输出，类名前缀 joe-stats
   包含：动态日历 / 分类雷达图 / 发布统计 / 分类统计 / 标签统计
   ========================================================================== */

/* ---------- 面板内的 6 个配色（分类环形图 / 图例 / 雷达共用） ---------- */
.joe-stats {
    --st-c0: #006fff;
    --st-c1: #38bdf8;
    --st-c2: #34d399;
    --st-c3: #fbbf24;
    --st-c4: #f472b6;
    --st-c5: #a78bfa;
    /* 日历色阶：0 / 1 / 2-3 / 4-5 / 6+ */
    --st-l0: rgba(0, 111, 255, .07);
    --st-l1: rgba(0, 111, 255, .22);
    --st-l2: rgba(0, 111, 255, .42);
    --st-l3: rgba(0, 111, 255, .66);
    --st-l4: rgba(0, 111, 255, .92);
    --cell: 12px;
    --gap: 3px;
}

html[data-night='night'] .joe-stats {
    --st-l0: rgba(255, 255, 255, .08);
    --st-l1: rgba(120, 180, 240, .28);
    --st-l2: rgba(110, 170, 235, .48);
    --st-l3: rgba(140, 195, 250, .7);
    --st-l4: rgba(190, 225, 255, .95);
}

/* ============================ 顶栏按钮 ============================ */
.joe-stats {
    position: relative;
    display: flex;
    align-items: center;
    /* ⚠️ 定位坑：主题的 .joe_header__above-search / __searchicon 都带 margin-left:auto，
       flex 里**多个 auto margin 会平分剩余空间** —— 按钮和搜索框各拿一半，
       按钮就被顶到了页面中间（实测 1440 视口下按钮 x=683，搜索框 x=1165）。
       正确做法：按钮这一份 auto 保留，把搜索框那份 auto 归零。 */
    margin-left: auto;
}

.joe_header__above .joe_header__above-search {
    margin-left: 0;
}

.joe-stats__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--routine);
    background: transparent;
    cursor: pointer;
    transition: color .25s, background .25s;
}

.joe-stats__btn svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.joe-stats__btn:hover {
    color: var(--theme);
    background: var(--classD);
}

.joe-stats.is-open .joe-stats__btn {
    color: var(--theme);
    background: var(--classD);
}

/* 角标：文章数 */
.joe-stats__badge {
    position: absolute;
    top: -2px;
    right: -3px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    color: #fff;
    background: var(--theme);
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    transform: scale(0);
    transition: transform .25s;
}

.joe-stats.is-open .joe-stats__badge {
    transform: scale(1);
}

/* 沉浸态（顶栏透明压在壁纸上）→ 图标与角标转白 */
body.joe-immersive:not(.joe-immersive-solid) .joe-stats__btn {
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

body.joe-immersive:not(.joe-immersive-solid) .joe-stats__btn:hover,
body.joe-immersive:not(.joe-immersive-solid) .joe-stats.is-open .joe-stats__btn {
    color: #fff;
    background: rgba(255, 255, 255, .18);
}

/* ============================ 弹出的面板 ============================ */
.joe-stats__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 1200;
    width: 860px;
    max-width: calc(100vw - 40px);
    /* 五块内容叠起来约 830px，900 视口下会顶出屏幕 → 限高并让面板自己滚 */
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 18px 18px;
    border: 1px solid var(--classB);
    border-radius: 16px;
    background: var(--background);
    box-shadow: 0 20px 50px -22px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}

html[data-night='night'] .joe-stats__panel {
    background: #262626;
    box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .8);
}

/* 玻璃质感：壁纸存在时面板跟着半透 */
body.joe-hasbg .joe-stats__panel {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
}

html[data-night='night'] body.joe-hasbg .joe-stats__panel {
    background: rgba(38, 38, 38, .86);
}

.joe-stats.is-open .joe-stats__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.joe-stats__panelhead {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--classC);
}

.joe-stats__paneltitle {
    color: var(--routine);
    font-size: 15px;
    font-weight: 700;
}

.joe-stats__kpis {
    color: var(--minor);
    font-size: 12px;
}

.joe-stats__kpis b {
    color: var(--theme);
    font-size: 13px;
}

.joe-stats__kpis em {
    margin: 0 4px;
    font-style: normal;
    opacity: .5;
}

.joe-stats__panelbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding-top: 14px;
}

.joe-stats__card {
    padding: 12px 14px 14px;
    border: 1px solid var(--classC);
    border-radius: 12px;
    background: var(--background);
}

/* 日历那一张占满整行 */
.joe-stats__card--wide {
    grid-column: 1 / -1;
    /* 日历 44 列是固定宽度，窄屏（390px）放不下会被裁掉 → 允许横向滚动 */
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

html[data-night='night'] .joe-stats__card {
    background: #2c2c2c;
}

.joe-stats__h3 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--routine);
    font-size: 13.5px;
    font-weight: 700;
}

.joe-stats__h3 small {
    color: var(--minor);
    font-size: 11.5px;
    font-weight: 400;
}

.joe-stats__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 200px;
    margin: 0;
    padding: 0 20px;
    border: 1px dashed var(--classB);
    border-radius: 10px;
    color: var(--minor);
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

.joe-stats__empty::before {
    font-size: 26px;
    content: '◔';
    opacity: .35;
}

.joe-stats__sum {
    margin: 10px 0 0;
    color: var(--minor);
    font-size: 11.5px;
}

.joe-stats__sum b {
    color: var(--theme);
}

/* ============================ ① 动态日历 ============================ */
.joe-stats__callegend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-bottom: 4px;
    color: var(--minor);
    font-size: 10.5px;
}

.joe-stats__callegend i,
.joe-stats__cell {
    width: var(--cell);
    height: var(--cell);
    border-radius: 3px;
}

.joe-stats__callegend i {
    width: 10px;
    height: 10px;
}

.joe-stats__callegend .l0,
.joe-stats__cell.l0 {
    background: var(--st-l0);
    /* 0 档是 7% 的主题色，浅到几乎看不见 —— 补一圈极淡描边，网格结构才立得住 */
    box-shadow: inset 0 0 0 1px rgba(0, 111, 255, .1);
}

html[data-night='night'] .joe-stats__cell.l0 {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.joe-stats__callegend .l1,
.joe-stats__cell.l1 {
    background: var(--st-l1);
}

.joe-stats__callegend .l2,
.joe-stats__cell.l2 {
    background: var(--st-l2);
}

.joe-stats__callegend .l3,
.joe-stats__cell.l3 {
    background: var(--st-l3);
}

.joe-stats__callegend .l4,
.joe-stats__cell.l4 {
    background: var(--st-l4);
}

/* 月份行和格子用完全相同的列宽/间距，靠 grid-column 对齐，永远不会错位 */
.joe-stats__calmonths {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--cell);
    gap: var(--gap);
    height: 15px;
    margin-left: 22px;
}

.joe-stats__calmonths span {
    grid-row: 1;
    color: var(--minor);
    font-size: 10.5px;
    line-height: 14px;
    white-space: nowrap;
}

.joe-stats__calrow {
    display: flex;
    align-items: flex-start;
}

.joe-stats__calwd {
    display: grid;
    grid-template-rows: repeat(7, var(--cell));
    gap: var(--gap);
    width: 22px;
    margin-right: 0;
}

.joe-stats__calwd span {
    grid-row: 1;
    color: var(--minor);
    font-size: 10px;
    line-height: var(--cell);
    text-align: left;
}

/* 4 行只显示 4 个星期标签，用 grid-row 定位到对应的行 */
.joe-stats__calwd span:nth-child(1) {
    grid-row: 1;
}

.joe-stats__calwd span:nth-child(2) {
    grid-row: 3;
}

.joe-stats__calwd span:nth-child(3) {
    grid-row: 5;
}

.joe-stats__calwd span:nth-child(4) {
    grid-row: 7;
}

.joe-stats__calgrid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, var(--cell));
    grid-auto-columns: var(--cell);
    gap: var(--gap);
    /* 宽卡片里日历按内容宽，不撑满 */
    justify-content: start;
}

.joe-stats__cell {
    position: relative;
    cursor: default;
    transition: transform .15s;
}

.joe-stats__cell:hover {
    transform: scale(1.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
    z-index: 2;
}

.joe-stats__cell::after {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 1300;
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
    background: rgba(40, 44, 52, .95);
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
    content: attr(data-tip);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(3px);
    transition: opacity .15s, transform .15s;
}

.joe-stats__cell:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================ ② 分类雷达图 ============================ */
.joe-stats__radar {
    display: block;
    width: 100%;
    height: 232px;
    overflow: visible;
}

.joe-stats__radar-grid {
    fill: none;
    stroke: var(--classC);
    stroke-width: 1;
}

.joe-stats__radar-grid[data-outer] {
    stroke: var(--classB);
}

html[data-night='night'] .joe-stats__radar-grid {
    stroke: rgba(255, 255, 255, .14);
}

.joe-stats__radar-axis {
    stroke: var(--classC);
    stroke-width: 1;
}

html[data-night='night'] .joe-stats__radar-axis {
    stroke: rgba(255, 255, 255, .1);
}

.joe-stats__radar-area {
    fill: rgba(0, 111, 255, .22);
    stroke: var(--theme);
    stroke-width: 2;
    stroke-linejoin: round;
}

html[data-night='night'] .joe-stats__radar-area {
    fill: rgba(120, 180, 240, .22);
    stroke: #7ab4ea;
}

.joe-stats__radar-dot {
    fill: var(--theme);
    stroke: #fff;
    stroke-width: 1.4;
}

.joe-stats__radar-label {
    fill: var(--minor);
    font-size: 11px;
}

.joe-stats__radar-val {
    fill: var(--routine);
    font-size: 10.5px;
}

/* ============================ ③ 发布统计 ============================ */
.joe-stats__bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 176px;
    padding-top: 6px;
}

.joe-stats__bar {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.joe-stats__bar i {
    /* flex column 里子项默认可收缩，不写 flex-shrink:0 柱子会被压成一条线 */
    flex: 0 0 auto;
    width: 100%;
    max-width: 22px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--theme), rgba(0, 111, 255, .55));
    transition: filter .2s;
}

.joe-stats__bar:hover i {
    filter: brightness(1.18);
}

.joe-stats__bar span {
    margin-top: 5px;
    color: var(--minor);
    font-size: 10px;
}

.joe-stats__bar:hover span {
    color: var(--theme);
}

/* ============================ ④ 分类统计 ============================ */
.joe-stats__donut {
    position: relative;
    width: 132px;
    height: 132px;
    margin: 4px auto 12px;
    border-radius: 50%;
}

.joe-stats__donut::after {
    position: absolute;
    top: 26px;
    right: 26px;
    bottom: 26px;
    left: 26px;
    border-radius: 50%;
    background: var(--background);
    content: '';
}

html[data-night='night'] .joe-stats__donut::after {
    background: #2c2c2c;
}

.joe-stats__donut span {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    color: var(--routine);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    transform: translate(-50%, -50%);
}

.joe-stats__donut span small {
    display: block;
    color: var(--minor);
    font-size: 10.5px;
    font-weight: 400;
}

.joe-stats__legend {
    max-height: 118px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.joe-stats__legend li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 0;
    font-size: 11.5px;
}

.joe-stats__legend i {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.joe-stats__legend i.c0 {
    background: var(--st-c0);
}

.joe-stats__legend i.c1 {
    background: var(--st-c1);
}

.joe-stats__legend i.c2 {
    background: var(--st-c2);
}

.joe-stats__legend i.c3 {
    background: var(--st-c3);
}

.joe-stats__legend i.c4 {
    background: var(--st-c4);
}

.joe-stats__legend i.c5 {
    background: var(--st-c5);
}

.joe-stats__legend .n {
    flex: 1;
    overflow: hidden;
    color: var(--routine);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.joe-stats__legend .c {
    color: var(--minor);
    white-space: nowrap;
}

/* 雷达图的降级形态：分类不足 3 个时改用条形排名 */
.joe-stats__rank {
    margin: 0;
    padding: 6px 0 0;
    list-style: none;
}

.joe-stats__rank li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--classC);
    font-size: 12px;
}

.joe-stats__rank li:last-child {
    border-bottom: 0;
}

.joe-stats__rank i {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    border-radius: 5px;
    background: rgba(0, 111, 255, .13);
}

html[data-night='night'] .joe-stats__rank i {
    background: rgba(120, 180, 240, .17);
}

.joe-stats__rank .n,
.joe-stats__rank .c {
    position: relative;
    z-index: 1;
}

.joe-stats__rank .n {
    flex: 1;
    overflow: hidden;
    color: var(--routine);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.joe-stats__rank .c {
    color: var(--theme);
    font-weight: 700;
}

/* ============================ ⑤ 标签统计 ============================ */
.joe-stats__tags {
    max-height: 232px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.joe-stats__tags li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 11.5px;
}

/* 条形铺在li 底层（低透明度），文字压在上面 */
.joe-stats__tags i {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    border-radius: 4px;
    background: rgba(0, 111, 255, .12);
    z-index: 0;
}

html[data-night='night'] .joe-stats__tags i {
    background: rgba(120, 180, 240, .16);
}

.joe-stats__tags .n,
.joe-stats__tags .c {
    position: relative;
    z-index: 1;
}

.joe-stats__tags .n {
    flex: 1;
    overflow: hidden;
    color: var(--routine);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.joe-stats__tags .c {
    color: var(--theme);
    font-weight: 700;
}

/* ============================ 手机端 ============================ */
@media (max-width: 992px) {
    .joe-stats__panel {
        position: fixed;
        top: 58px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 78px);
        overflow-y: auto;
        padding: 14px 14px 16px;
    }

    .joe-stats__panelbody {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 手机上44 列按 11px 也放不下，让日历整体横向滑动 */
    .joe-stats__card--wide {
        padding: 12px 0 14px 14px;
    }

    .joe-stats__card--wide .joe-stats__h3,
    .joe-stats__card--wide .joe-stats__callegend,
    .joe-stats__card--wide .joe-stats__sum {
        padding-right: 14px;
    }

    .joe-stats__calmonths,
    .joe-stats__calrow {
        padding-right: 14px;
    }

    .joe-stats__cell,
    .joe-stats__calgrid {
        --cell: 11px;
        --gap: 3px;
    }

    /* 手机端图表卡片内部左右留白恢复 */
    .joe-stats__card:not(.joe-stats__card--wide) {
        padding-right: 14px;
    }

    .joe-stats__bars {
        height: 132px;
    }

    body.joe-immersive:not(.joe-immersive-solid) .joe-stats__btn {
        filter: none;
    }
}