/* ============================================================
   admin.css —— 后台专属样式（不动共享的 tokens/ui/console/tech）

   前台（shop）的商务风是 shop.css 里的 .biz-*；这里给后台工作台一套同款语言：
   立体统计块 + 白卡 + 细描边。分区配色照参考站工作台：
   金额金 / 分站红 / 会员青 / 利润橙 / 商品紫 / 订单蓝。
   ============================================================ */

/* ================= 时间档工具条 ================= */
.wb-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 10px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(22, 34, 74, .06);
}
.wb-bar__ranges { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-range {
  height: 30px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #fff; color: var(--text-2); font-size: 13px; cursor: pointer;
  transition: background .16s, color .16s, border-color .16s, box-shadow .16s;
}
.wb-range:hover { border-color: var(--brand); color: var(--brand); }
.wb-range.is-active {
  background: linear-gradient(180deg, #3a5cf0, #2440cc); border-color: #2440cc; color: #fff;
  font-weight: 500; box-shadow: 0 2px 8px rgba(36, 64, 204, .28);
}
.wb-bar__note {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums;
}

/* ================= 统计卡栅格 ================= */
.wb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wb-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(22, 34, 74, .06); overflow: hidden;
}
/* 横铺：跨满整行（订单统计的 9 格、商品销售排行这类宽表） */
.wb-card--wide { grid-column: 1 / -1; }
.wb-card__hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
}
.wb-card__hd h3 { font-size: 15px; font-weight: 600; }
.wb-card__bd { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; padding: 8px 12px; }
/* 统计块把卡片剩余高度铺满（同行卡等高时不会在卡头下面留一条空白） */
.wb-tiles {
  width: 100%; flex: 1 1 auto; display: grid; align-content: stretch;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  grid-auto-rows: minmax(58px, 1fr); gap: 10px;
}

/* ================= 立体统计块 ================= */
.wb-tile {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 11px 12px; border-radius: 10px; color: #fff;
  box-shadow: 0 4px 12px rgba(22, 34, 74, .16),
              inset 0 1px 0 rgba(255, 255, 255, .38),
              inset 0 -1px 0 rgba(0, 0, 0, .14);
}
.wb-tile__ic {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center; background: rgba(255, 255, 255, .18);
}
.wb-tile__tx { min-width: 0; }
.wb-tile__lb { display: block; font-size: 12.5px; opacity: .94; }
.wb-tile__v {
  display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, .16);
}
.wb-tile--gold { background: linear-gradient(160deg, #f6c94f, #dfa005); }
.wb-tile--red { background: linear-gradient(160deg, #ff7373, #d92d2d); }
.wb-tile--teal { background: linear-gradient(160deg, #35d3c8, #0d9b92); }
.wb-tile--orange { background: linear-gradient(160deg, #ffa951, #ee6c11); }
.wb-tile--purple { background: linear-gradient(160deg, #9184f7, #5b45d6); }
.wb-tile--blue { background: linear-gradient(160deg, #5591fd, #2358d0); }

/* ================= 排行榜 ================= */
.wb-rank__i {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.wb-rank__i:last-child { border-bottom: 0; }
.wb-rank__n {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--bg-2); color: var(--text-3); font-variant-numeric: tabular-nums;
}
.wb-rank__n--1 { background: linear-gradient(180deg, #f6c94f, #dfa005); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .16); }
.wb-rank__n--2 { background: linear-gradient(180deg, #c9d2e3, #98a4bd); color: #fff; }
.wb-rank__n--3 { background: linear-gradient(180deg, #e8b083, #c07a3f); color: #fff; }
.wb-rank__lb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-rank__v { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.wb-rank__i.is-ph { opacity: .4; }
/* 空榜单：把 5 行占位均匀铺满整张卡，避免卡片被行高拉高后下方留白 */
.wb-rank.is-empty { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; }

/* ================= 商品销售排行：竖向柱状图 ================= */
.wb-cols { flex: 1 1 auto; display: flex; align-items: stretch; gap: 10px; width: 100%; }
.wb-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.wb-col__v { font-size: 12px; font-variant-numeric: tabular-nums; }
.wb-col__track {
  flex: 1 1 auto; width: 100%; max-width: 56px; min-height: 130px;
  display: flex; align-items: flex-end; overflow: hidden;
  background: linear-gradient(180deg, #f8fafd, #eef1f8); border-radius: 8px;
}
.wb-col__bar {
  width: 100%; border-radius: 8px 8px 0 0; transition: height .3s var(--ease);
  background: linear-gradient(180deg, #6c9bff, #2358d0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .12);
}
.wb-col--1 .wb-col__bar { background: linear-gradient(180deg, #ffd873, #dfa005); }
.wb-col--2 .wb-col__bar { background: linear-gradient(180deg, #dee5f0, #98a4bd); }
.wb-col--3 .wb-col__bar { background: linear-gradient(180deg, #f0c39a, #c07a3f); }
/* 商品名竖排（中文一列排下来最省地方，超长自动截断，悬停看全名） */
.wb-col__lb {
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: .02em;
  max-height: 100px; overflow: hidden; font-size: 12px; color: var(--text-2);
}
.wb-cols.is-empty .wb-col__v, .wb-cols.is-empty .wb-col__lb { color: var(--text-4); }
@media (max-width: 940px) {
  .wb-cols { gap: 6px; }
  .wb-col__lb { max-height: 72px; font-size: 11px; }
}

/* 单列断点压到 940：1000~1080 这类窗口（含 125% 缩放的 1280 屏）仍保持两列，
   否则统计块会被拉成一整条、右侧全是空白 */
@media (max-width: 940px) {
  .wb-grid { grid-template-columns: minmax(0, 1fr); }
}