/* Forum statistics — KPI tiles, glossy section bars, kv tables, rank lists.
   Lifted from docs/forum-theme/samples/stats.html (Direction C). */
.pad{padding:10px}
/* uPlot chart containers — min-height so the canvas (sized in JS) is never clipped */
.uchart{width:100%;min-height:230px;margin-top:4px}
.uchart-tall{min-height:300px}
.uchart .u-title{font-size:12px}
.uchart .u-legend{font-size:11px}

/* posting heatmap (weekday × hour) */
.heatmap{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.hm-hours,.hm-row{display:grid;grid-template-columns:36px repeat(24,1fr);gap:2px;align-items:center}
.hm-h{font-size:9px;color:var(--muted);text-align:center;line-height:1}
.hm-day{font-size:11px;color:#33506f;white-space:nowrap}
.hm-cell{height:15px;border-radius:2px;background:#fff}
.hm-legend{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:6px;font-size:11px;color:var(--muted)}
.hm-grad{width:80px;height:10px;border-radius:2px;background:linear-gradient(to right,rgba(76,118,182,0.06),rgba(76,118,182,1))}
@media (max-width:600px){.heatmap{overflow-x:auto}.hm-hours,.hm-row{min-width:480px}}

/* tab bar — glossy pills under the section bar; switched by stats.js */
.stab-bar{display:flex; flex-wrap:wrap; gap:4px; padding:7px 10px 0;
  border-bottom:1px solid var(--frame); background:#f6f9fd}
.stab{display:inline-flex; align-items:center; gap:5px; padding:6px 13px;
  font-size:12px; color:#33506f; text-decoration:none;
  border:1px solid var(--frame); border-bottom:0;
  border-radius:7px 7px 0 0; background:linear-gradient(#fbfdff,#eaf1fa);
  position:relative; top:1px}
.stab:hover{background:linear-gradient(#fff,#eef4fc)}
.stab.active{color:var(--cat-text); font-weight:bold; background:#fff;
  box-shadow:inset 0 2px 0 var(--bar-top)}
.stab i{font-size:11px}

.stab-panel{display:none}
.stab-panel.active{display:block}

.kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-bottom:9px}
.kpi{border:1px solid var(--frame); border-radius:8px; padding:12px; text-align:center;
  background:linear-gradient(#fff,#f6f9fd)}
.kpi .n{font-size:22px; font-weight:bold; color:var(--cat-text); line-height:1.1}
.kpi .l{font-size:11px; color:var(--muted); margin-top:3px}

.cols{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.sect{border:1px solid var(--frame); border-radius:8px; overflow:hidden; background:#fff}
.sect h3{margin:0; padding:6px 12px; font-size:12px; color:#fff; font-weight:bold;
  border-bottom:1px solid var(--bar-edge);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.4) 0%, rgba(255,255,255,.06) 48%,
                    rgba(255,255,255,0) 49%, rgba(0,0,0,.04) 100%),
    linear-gradient(to bottom, var(--bar-top), var(--bar-bot));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

.kv{display:grid; grid-template-columns:1fr 1fr}
.kv > div{padding:6px 12px; border-bottom:1px solid var(--rule); font-size:12px}
.kv .k{color:#33506f}
.kv .v{text-align:right; font-weight:bold; color:var(--cat-text)}

.meter{padding:8px 12px}
.meter .bar{height:10px; background:#e6edf7; border-radius:5px; overflow:hidden; border:0; box-shadow:none}
.meter .bar > div{height:100%; background:linear-gradient(var(--bar-top),var(--bar-bot))}
.meter .lab{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:4px}

.rank{display:grid; grid-template-columns:46px 1fr 80px}
.rank > div{padding:6px 12px; border-bottom:1px solid var(--rule); font-size:12px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rank .i{color:var(--muted); text-align:center; font-weight:bold; padding-left:4px; padding-right:4px; overflow:visible; text-overflow:clip}
.rank .v{text-align:right; font-weight:bold; color:var(--cat-text)}
.rank .muted{color:var(--muted)}

/* traffic bars — 星期/时段/浏览器/操作系统/月份 (label | track | count) */
.sbars{display:grid; grid-template-columns:140px 1fr 150px; align-items:center}
.sbars > div{padding:6px 12px; border-bottom:1px solid var(--rule); font-size:12px; min-width:0}
.sbars .lab{color:#33506f; word-break:break-word; line-height:1.35}
.sbars .lab.peak{font-weight:bold; font-style:italic}
/* right-aligned, so the 12px left padding is wasted — trim it for value room */
.sbars .num{text-align:right; font-weight:bold; color:var(--cat-text); white-space:nowrap; padding-left:4px}
/* track carries the bar bg: zero its own padding so the fill spans the full
   rounded cell (neighbouring lab/num cells supply the gutter via their padding) */
.sbars .track{height:10px; background:#e6edf7; border-radius:5px; overflow:hidden; padding:0; box-sizing:border-box}
.sbars .track .fill{height:100%; min-width:4px; border-radius:5px; background:linear-gradient(var(--bar-top),var(--bar-bot))}
.yhead{padding:7px 12px 3px; font-size:12px; font-weight:bold; color:var(--cat-text);
  border-bottom:1px solid var(--rule)}

@media (max-width:760px){
  .kpis{grid-template-columns:1fr 1fr 1fr}
  .cols{grid-template-columns:1fr}
  .sbars{grid-template-columns:96px 1fr 126px}
}