/* 環友科技 · AI 戰情室 —— 脈動報表（指定期間的用量整理）。
 *
 * 疊在 app.css 之上：色票、字體、卡片、提示框、長條、指標切換全部沿用，
 * 這裡只做兩件事 ——
 *   1. 版面改滿版。戰情室每日頁是 860px 窄版給手機看；這頁資料量大、
 *      給 1920×1080 的螢幕看，所以左右只留 32px 邊距。
 *   2. 新增這頁才有的元件：概況五格、可展開的排行表、展開後的明細。
 *
 * 設計原則與戰情室一致：一頁只有一個主角數字（請求次數）、資料色以藍為主、
 * 模型分類色沿用已驗證的固定順序、狀態色只用於成功／失敗、文字一律中性色。
 */

/* ── 版面：滿版 ── */
.pulse-page .topbar,
.pulse-page .wrap {
  max-width: 2200px;   /* 超寬螢幕才開始置中，1920 以下都是滿版 */
  padding-left: 32px;
  padding-right: 32px;
}
.pulse-page .topbar { padding-top: 20px; padding-bottom: 10px; gap: 14px 36px; }
.pulse-page .wrap { padding-top: 8px; padding-bottom: 56px; }
.pulse-page .stack { gap: 16px; }

/* ── 頂欄 ── */
.brand-home {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-2); text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  transition: color 0.16s ease;
}
.brand-home:hover, .brand-home:focus-visible { color: var(--ink); }
.brand-home:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.brand-sep { color: var(--baseline); font-size: 20px; margin: 0 2px; }
.pulse-page .topbar h1 { font-size: 22px; letter-spacing: 0.005em; }

.meta { display: flex; margin: 0; padding: 0; }
.meta-block { padding: 0 22px; border-left: 1px solid var(--hairline); }
.meta-block:first-child { padding-left: 0; border-left: 0; }
.meta dt { margin: 0; font-size: 12px; color: var(--muted); }
.meta dd { margin: 1px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }

.back-link {
  margin-left: auto;
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13.5px;
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.back-link:hover, .back-link:focus-visible { border-color: var(--baseline); color: var(--ink); }
.back-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── 區段卡片：標題列 + 內容 ── */
.section { padding: 0; overflow: hidden; }
.section-head {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 22px 13px;
  border-bottom: 1px solid var(--hairline);
}
.section-marker { flex: none; width: 4px; height: 20px; border-radius: 2px; background: var(--blue); }
.section-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.section-note { margin-left: auto; font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }
/* 標題列裡的指標切換不需要上方留白（app.css 預設 margin-top 14px 是給對話框用的） */
.section-head .metric-toggle { margin-top: 0; margin-left: 10px; }

/* ── 概況五格 ── */
.pulse-grid {
  display: grid;
  grid-template-columns:
    minmax(300px, 0.95fr) minmax(330px, 1.05fr) minmax(460px, 1.7fr)
    minmax(220px, 0.7fr) minmax(250px, 0.85fr);
  min-height: 236px;
  padding: 22px 22px 24px;
}
.pulse-cell {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
  padding: 6px 28px;
  border-left: 1px solid var(--hairline);
}
.pulse-cell:first-child { padding-left: 8px; border-left: 0; }

/* 主角：請求次數。比例字距，位數多就縮字級（由 JS 標 data-size） */
.hero-number {
  display: block;
  font-size: 104px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 0.95;
  color: var(--ink);
  white-space: nowrap;
}
.hero-number[data-size="6"] { font-size: 92px; }
.hero-number[data-size="7"] { font-size: 78px; }
.hero-number[data-size="8"] { font-size: 66px; }
.hero-unit { margin-top: 12px; font-size: 17px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.04em; }
.hero-note { margin-top: 4px; font-size: 12.5px; color: var(--muted); }

/* 成功率環：成功／失敗是狀態，所以用狀態色 */
.ring-wrap { display: grid; grid-template-columns: 168px 1fr; align-items: center; gap: 24px; }
.ring-graphic { position: relative; width: 168px; aspect-ratio: 1; }
.ring-graphic svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.ring-track, .ring-ok, .ring-ng { fill: none; stroke-width: 9; }
.ring-track { stroke: var(--hairline); }
.ring-ok { stroke: var(--good); stroke-linecap: round; transition: stroke-dasharray 0.95s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ring-ng {
  stroke: var(--crit); stroke-linecap: round;
  transition: stroke-dasharray 0.95s cubic-bezier(0.2, 0.7, 0.2, 1), stroke-dashoffset 0.95s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-center strong { display: block; font-size: 31px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.ring-center span { font-size: 12px; color: var(--muted); }
.ring-legend { display: flex; flex-direction: column; gap: 16px; }
.ring-line { display: flex; align-items: center; gap: 11px; }
.ring-key { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--baseline); }
.ring-line.is-ok .ring-key { background: var(--good); }
.ring-line.is-ng .ring-key { background: var(--crit); }
.ring-line strong { display: block; font-size: 21px; font-weight: 600; line-height: 1.15; }
.ring-line small { font-size: 12.5px; color: var(--muted); }

/* Token 組成：輸入藍、輸出橘 —— 與分流圖同一對雙色 */
.token-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
.token-title strong { font-size: 31px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.1; }
.token-bar {
  display: flex; gap: 2px;
  height: 48px;
  border-radius: 7px;
  background: var(--blue-track);
  overflow: hidden;
}
.token-seg {
  display: flex; align-items: center;
  min-width: 4px;
  padding: 0 14px;
  transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.token-seg.is-in { background: var(--blue); color: #fff; }
.token-seg.is-out { background: var(--orange); color: var(--ink); }
.token-seg > span { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.token-seg b { font-size: 15px; font-weight: 600; }
.token-seg small { font-size: 11.5px; opacity: 0.85; }
/* 放不下的段內標籤整個不顯示，不裁字 —— 數字由下方圖例承載 */
.token-seg[data-narrow] { padding: 0; }
.token-seg[data-narrow] > span { display: none; }
.token-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.token-legend .legend-item { gap: 8px; }
.token-legend b { font-weight: 600; color: var(--ink); }

/* 人數與費用 */
.cell-vitals { gap: 14px; }
.vital strong { display: block; font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.vital span { font-size: 13px; color: var(--ink-2); }
.cost-value { display: block; margin: 2px 0 4px; font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }

/* ── 排行表（人員／模型共用）── */
.table-scroll { overflow-x: auto; }
.table { min-width: 1120px; }

.thead, .row { display: grid; align-items: center; }
.table[data-type="people"] .thead,
.table[data-type="people"] .row {
  grid-template-columns: 56px minmax(210px, 1.1fr) minmax(320px, 2fr) 170px 140px 160px minmax(170px, 0.9fr);
}
.table[data-type="models"] .thead,
.table[data-type="models"] .row {
  grid-template-columns: 56px minmax(250px, 1.3fr) minmax(320px, 2fr) 170px 120px 160px minmax(170px, 0.9fr);
}

.thead {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--baseline);
  font-size: 12px; font-weight: 500; color: var(--muted);
}
.thead > span { padding: 9px 14px; white-space: nowrap; }
.thead > span.cell-num { text-align: right; }

.row {
  position: relative;
  width: 100%; min-height: 58px;
  padding: 0; border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font: inherit; text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
}
.row:hover { background: rgba(42, 120, 214, 0.045); }
.row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; z-index: 1; }
.row[aria-expanded="true"] { background: rgba(42, 120, 214, 0.065); }
/* 展開的那一列左側亮一道藍，讀者往下看明細時知道它屬於誰 */
.row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background 0.16s ease;
}
.row[aria-expanded="true"]::before { background: var(--blue); }
.row > span { display: flex; align-items: center; min-width: 0; padding: 9px 14px; }

.cell-rank { justify-content: center; color: var(--muted); font-size: 13px; }
.cell-entity { gap: 10px; }
.row-arrow {
  flex: none; width: 18px; height: 18px;
  display: grid; place-content: center;
  color: var(--muted); font-size: 17px; line-height: 1;
  transition: transform 0.22s ease, color 0.16s ease;
}
.row[aria-expanded="true"] .row-arrow { transform: rotate(90deg); color: var(--blue); }
.entity-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.entity-copy strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-copy small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-copy small .tag-unknown { color: var(--crit); }
.entity-copy .dot { flex: none; }

/* 指標欄：數值 + 依模型分段的長條（長條元件沿用 app.css 的 bar-track／bar-fill／bar-seg） */
.cell-metric { display: grid !important; grid-template-columns: 124px 1fr; gap: 14px; }
.cell-metric b { font-size: 15px; font-weight: 600; text-align: right; white-space: nowrap; }
.cell-metric .bar-track { height: 12px; }
.cell-metric .bar-fill { transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }

.cell-num { justify-content: flex-end; text-align: right; white-space: nowrap; }
.status-pair { white-space: nowrap; }
.status-pair .sep { margin: 0 5px; color: var(--baseline); }
.status-pair .ng { color: var(--crit); font-weight: 600; }
.status-pair .ng.is-zero { color: var(--muted); font-weight: 400; }

/* 平均 Token 偏高的提醒：這是「值得看一眼」的訊號，用警示色的淺底，不用資料色 */
.pill-warn {
  padding: 1px 9px;
  border: 1px solid rgba(250, 178, 25, 0.7);
  border-radius: 999px;
  background: #fdf5e3;
  color: #6e4700;
  font-weight: 600;
}

.cell-share { display: grid !important; grid-template-columns: 60px 1fr; gap: 12px; }
.cell-share b { font-weight: 600; text-align: right; white-space: nowrap; }
.share-track { display: block; height: 6px; border-radius: 3px; background: var(--blue-track); overflow: hidden; }
.share-fill { display: block; height: 100%; border-radius: 3px; background: var(--blue); transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* 列進場：由上而下逐列浮現，只在第一次畫與切換指標時 */
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.row.is-enter { animation: row-in 0.32s ease both; animation-delay: calc(var(--i, 0) * 22ms); }

/* ── 展開的明細：grid-template-rows 0fr → 1fr，高度自適應又能過場 ── */
.row-detail {
  display: grid;
  grid-template-rows: 0fr;
  background: #f4f7fb;
  transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.row-detail.is-open { grid-template-rows: 1fr; border-bottom: 1px solid var(--hairline); }
.row-detail-inner { min-height: 0; overflow: hidden; }
.row-detail-pad { padding: 16px 22px 20px 70px; }

.detail-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.detail-toolbar .metric-toggle { margin-top: 0; }
.detail-head {
  display: flex; justify-content: space-between; gap: 20px;
  margin: 2px 0 6px;
  font-size: 12.5px; color: var(--muted);
}

.trace-row, .usage-row {
  display: grid; align-items: center;
  min-height: 38px;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
}
.trace-row { grid-template-columns: 170px 84px minmax(200px, 1.2fr) minmax(170px, 1fr) 140px 130px 100px; }
.usage-row { grid-template-columns: minmax(240px, 1.4fr) 140px 170px 120px 160px minmax(200px, 1fr); }
.trace-row.is-head, .usage-row.is-head { min-height: 30px; border-top: 0; font-size: 12px; color: var(--muted); }
.trace-row > span, .usage-row > span {
  min-width: 0; padding: 5px 12px 5px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trace-row > span.cell-num, .usage-row > span.cell-num { display: block; text-align: right; }
.trace-model, .usage-model { display: flex !important; align-items: center; gap: 9px; }
.trace-model .dot, .usage-model .dot { flex: none; }
.trace-model span, .usage-model span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.usage-model { font-weight: 600; }
.trace-tool { color: var(--ink-2); }
.trace-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.trace-status .status-icon { width: 8px; height: 8px; }
.trace-status.is-ok { color: var(--good-text); }
.trace-status.is-ok .status-icon { background: var(--good); }
.trace-status.is-ng { color: var(--crit); font-weight: 500; }
.trace-status.is-ng .status-icon { background: var(--crit); }
.usage-share { display: grid !important; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.usage-share b { text-align: right; }

/* 顯示全部／收合 */
.show-all { display: flex; justify-content: center; padding: 14px 0 16px; }
.show-all[hidden] { display: none; }
.show-all-btn {
  padding: 6px 18px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit; font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.show-all-btn:hover { border-color: var(--baseline); color: var(--ink); }
.show-all-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.section .empty { padding: 18px 22px 22px; }

/* ── 動態減量 ── */
@media (prefers-reduced-motion: reduce) {
  .row.is-enter { animation: none; }
  .row-detail, .ring-ok, .ring-ng, .token-seg, .cell-metric .bar-fill, .share-fill, .row-arrow { transition: none; }
}

/* ── 較窄的螢幕：概況折成兩排，表格改為橫向捲動 ── */
@media (max-width: 1560px) {
  .pulse-grid { grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.1fr) minmax(200px, 0.7fr) minmax(230px, 0.8fr); }
  .cell-tokens {
    grid-column: 1 / -1; order: 5;
    margin-top: 18px; padding: 22px 8px 0;
    border-left: 0; border-top: 1px solid var(--hairline);
  }
  .hero-number { font-size: 92px; }
  .hero-number[data-size="6"] { font-size: 80px; }
  .hero-number[data-size="7"] { font-size: 68px; }
  .hero-number[data-size="8"] { font-size: 58px; }
}
@media (max-width: 1180px) {
  .pulse-grid { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .pulse-cell:nth-child(3), .pulse-cell:nth-child(5) { border-left: 0; padding-left: 8px; }
  .cell-tokens { order: 5; }
  .meta { flex-wrap: wrap; gap: 8px 0; }
}
@media (max-width: 680px) {
  .pulse-page .topbar, .pulse-page .wrap { padding-left: 14px; padding-right: 14px; }
  .pulse-grid { grid-template-columns: 1fr; padding: 16px 14px 18px; }
  .pulse-cell { padding: 12px 4px; border-left: 0; border-top: 1px solid var(--hairline); }
  .pulse-cell:first-child { border-top: 0; }
  .cell-tokens { margin-top: 0; padding-top: 12px; }
  .ring-wrap { grid-template-columns: 140px 1fr; gap: 16px; }
  .ring-graphic { width: 140px; }
  .section-head { flex-wrap: wrap; padding: 13px 14px 11px; }
  .section-note { width: 100%; margin-left: 0; text-align: left; }
  .row-detail-pad { padding: 14px 14px 16px; }
}