/* settings/admin.css — 管理員後台 sub-tab + 用量分析圖表
   2026-06-10 admin IA 重整（4 sub-tab）+ 用量分析 tab（對標 OpenRouter Activity）。
   色票走 tokens.css --chart-1..6 / --chart-other（§5 單一來源，不寫死 hex）。 */

.admin-subnav { margin: 2px 0 16px; }

/* ── KPI 卡的 delta 列（vs 前期）— 成本上升 = 紅、下降 = 綠 ── */
.ukpi-delta { font-size: 11.5px; margin-top: 5px; color: var(--text-muted); }
.ukpi-delta .is-up   { color: var(--error); }
.ukpi-delta .is-down { color: var(--success); }

/* ── 控制列：range / 分組 seg + filter chip + export ── */
.uctl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.uctl-label { font-size: 11.5px; color: var(--text-muted); }
.uchip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-family: var(--font-mono);
  background: var(--accent-subtle); border: 1px solid var(--accent);
  border-radius: 999px; padding: 4px 8px 4px 10px; cursor: pointer;
  color: var(--text-primary); min-height: 28px;
}
.uchip .ico { width: 12px; height: 12px; }

/* ── 堆疊長條圖 — 高度 % / 格線位置全在 JS 預算進 state（§30），CSS 只管外觀。
   左 44px gutter 放 Y 軸標籤；上 6 / 下 24 padding 對齊格線 calc（app-admin.js yTicks）。 ── */
.uchart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 190px; padding: 6px 0 24px 44px; position: relative;
  transition: opacity var(--trans-med);
}
.uchart.is-loading { opacity: 0.55; }
/* Y 軸格線 + 標籤 — bottom 由 JS 給（calc 對齊 padding box） */
.uchart-grid {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid var(--border-subtle); pointer-events: none;
}
.uchart-ylabel {
  position: absolute; left: 0; top: 0; transform: translateY(-50%);
  width: 36px; text-align: right;
  font-size: 10px; color: var(--text-muted); font-family: var(--font-mono);
  background: transparent;
}
/* column-reverse：DOM 第一個 seg（series 1，cost 最大）落在柱子最底，跟 legend 順序對齊 */
.uchart-col {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 1px;
  position: relative; z-index: 1; border-radius: 2px;
}
@media (hover: hover) {
  .uchart-col:hover { background: rgba(255, 255, 255, 0.04); }
}
/* height transition：切分組 / 篩選時同一張圖的 bar 滑到新值（range 換天數 = 重建、不動畫） */
.uchart-seg { width: 100%; border-radius: 1px; min-height: 1px; transition: height var(--trans-med); }
.uchart-seg--top { border-radius: var(--radius-bar-cap) var(--radius-bar-cap) 1px 1px; }
.uchart-date {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap;
}
.uchart-empty { padding: 28px 0; text-align: center; }

/* series 色 — 對應 backend series 排序（cost desc），第 7 名以後聚合進「其他」 */
.useg-1 { background: var(--chart-1); }
.useg-2 { background: var(--chart-2); }
.useg-3 { background: var(--chart-3); }
.useg-4 { background: var(--chart-4); }
.useg-5 { background: var(--chart-5); }
.useg-6 { background: var(--chart-6); }
.useg-other { background: var(--chart-other); }

/* ── legend ── */
.uchart-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 11.5px; color: var(--text-secondary); margin-bottom: 6px;
}
.uleg-item { display: inline-flex; align-items: center; gap: 5px; }
.uleg-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }

/* ── breakdown 列（重用 .usage-bar-row 結構）— 可點篩選 ── */
.usage-bar-row--click { cursor: pointer; border-radius: 6px; padding: 3px 4px; margin: -3px -4px; }
@media (hover: hover) {
  .usage-bar-row--click:hover { background: rgba(255, 255, 255, 0.03); }
}
.usage-bar-row--click.is-active { background: var(--accent-subtle); }