/* css/views/usage.css — 视图私有样式,owner: usage 视图 agent。
 * 只许本视图 agent 写;全部选择器前缀 .v-usage;颜色/间距用 var(--*)。 */

/* 过滤器行:九字段两行,改等宽网格(压过 app.css .filters 的 flex)——
 * 每列同宽、控件填满格子,行列节奏整齐;auto-fill 窄屏自动减列。
 * help/error 仍是绝对定位(app.css),行距沿用 space-8 给它留落脚空间。 */
.v-usage-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-8) var(--space-3);
  align-items: end;
}
.v-usage-filters .select,
.v-usage-filters .input { width: 100%; }

/* 按钮组(查询 / CSV / 查看明细):独占整行、靠右 —— 不再挤在字段格子里参差换行 */
.v-usage-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* 自定义窗口的起止字段:窗口预设非「自定义」时隐藏(CSP 禁内联样式属性,只能切 class) */
.v-usage-hidden { display: none; }

/* 级联说明 / facets 降级提示:整行块级(在 .filters 之外),不受 .filters .field 的
 * 绝对定位 help/error nowrap 截断(app.css)。说明=muted;降级提示=amber 警示。 */
.v-usage-cascade-note {
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--color-text-muted);
}
.v-usage-facets-notice {
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--color-warning);
}
/* 陈旧值整合提示(H2 可读 flag):整行块级、danger 文本;具体哪个 select 被重置由其红框指示。 */
.v-usage-stale-notice {
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--color-danger);
}

/* 陈旧值 flag(H2)逐控件红框:.v-usage-stale = revalidateSelections 丢弃失效选择时加的标记;
 * .invalid = buildQuery 的 UUID 兜底校验(select 受控,几乎不触发,保留 defense-in-depth)。
 * app.css 只有 .input.invalid 有 danger 边框、.select 无 → 这里补上。作用域限本视图过滤行
 * (.v-usage-filters,守 usage.css 的 .v-usage 前缀约定,不全局泄漏)。可读文案由 staleNotice 承载
 * (在 .filters 之外,不挤绝对定位 nowrap 的 help/error 槽,多项失效也不互相遮挡)。 */
.v-usage-filters .select.invalid,
.v-usage-filters .select.v-usage-stale { border-color: var(--color-danger); }

/* ---- 白画布区块容器(§9g 三层法第一层,对拍 applications .v-app-canvas):
 * 白卡浮在冷灰工作区上,「用量汇总」「请求明细」两区靠底色分离 ---- */
.v-usage-canvas {
  background: var(--color-surface);
  border-radius: 24px;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.v-usage-canvas .section { margin-bottom: 0; }  /* 画布自带留白,内部 section 不再叠边距 */
.v-usage-sec-sub { font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-left: var(--space-2); }

/* 区块标题行:标题居左,本区动作居右(动作长在它作用的区块上,任务侧) */
.v-usage-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.v-usage-sec-head .section-title { margin-bottom: 0; }

/* 表格量级列内嵌等比数据条(§9g 对比即图形;对拍 dashboards cellbar,几何走 <progress> 属性) */
.v-usage-cellwrap { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.v-usage-cellwrap .mono { min-width: 3.8em; text-align: right; font-variant-numeric: tabular-nums; }  /* 数字定宽右齐 → 条子两端对齐 */
.v-usage-cellwrap-cost .mono { min-width: 6.5em; }  /* 成本 6 位小数原文较长 */
progress.v-usage-cellbar { -webkit-appearance: none; appearance: none; width: 64px; height: 5px; border: 0; border-radius: 3px; background: var(--color-card); overflow: hidden; }
progress.v-usage-cellbar::-webkit-progress-bar { background: var(--color-card); }
progress.v-usage-cellbar::-webkit-progress-value { background: #FBAB6B; border-radius: 3px; }  /* 橙阶浅档(同 dashboards) */
progress.v-usage-cellbar::-moz-progress-bar { background: #FBAB6B; }

/* 报表摘要行:行数 · 服务端回显窗口(UTC) · 合计成本 */
.v-usage-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.v-usage-sep { color: var(--color-text-muted); }
.v-usage-total { color: var(--color-text); font-weight: 500; }

/* re-rateable / fail-closed 解释行 */
.v-usage-note {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--color-text-muted);
}

/* 503 rate_card_unavailable 的 named-knob 提示卡(amber=警示/降级,语义固定) */
.v-usage-knob {
  background: var(--color-warning-tint);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-surface);
  padding: var(--space-4);
}
.v-usage-knob-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-warning);
  margin-bottom: var(--space-2);
}
.v-usage-knob-text {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.v-usage-knob .trace-id { margin-bottom: var(--space-3); }

/* ============================================================
 * 请求明细 —— 页面内嵌区(在 rollup 报表下方常驻;不弹浮层)。
 * ============================================================ */

/* 内嵌明细区:已装进自己的白画布容器(.v-usage-canvas),发丝分隔线退役 ——
 * 区块分离交给画布底色差;标题走全局 .section-title(橙 marker 竖条,§9g 区块信号)。 */
.v-usage-detail-title { font-size: 16px; font-weight: 600; margin-bottom: var(--space-3); }

/* 头部 chip 条:可移除活动态过滤芯片(明细查询单一真相源,逐字段读与 buildQuery 同源) */
.v-usage-detail-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* 明细操作行:常驻 B4 降级小字(左)+ 加载更多 / 下载明细 CSV(右);成行换行留间距。 */
.v-usage-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* 明细表列多(13 列含 REQUEST ID 长哈希 + 横向 pivot 列):不挤压列、按自然宽展开、列内不折行,
 * 由 renderTable 外层 .table-wrap 的 overflow-x:auto 横向滚动 —— 否则 width:100% 会把列压窄、
 * 时间/模型名折行、右侧 pivot 列被裁切看不全。仅作用于内嵌明细区,rollup 报表表格不受影响。 */
.v-usage-detail-area .table { width: auto; min-width: 100%; }
.v-usage-detail-area .table th,
.v-usage-detail-area .table td { white-space: nowrap; }

/* 活动态/可移除过滤芯片(.chip-active / .chip-remove)的 DESIGN.md §4 配方已迁至
 * web/admin/css/app.css(共享家;FU-ADMIN-UNIFIED-FILTERS 起被 DLP/出境/发现经 filters.js
 * 共用)—— 本视图的明细 chip 条仍用同名 class,样式不变(全局 app.css 已加载)。 */

/* footer(modal-actions)常驻诚实降级小字(B4 方案 B):推到左缘,加载更多/CSV 钮仍右对齐。 */
.v-usage-detail-cap {
  margin-right: auto;
  align-self: center;
}

/* rollup 可点行:指针 + hover/focus 走 --color-accent-tint(token,非自造色)信号可下钻;
 * 限定 .v-usage-clickable-row 提高特异性,压过 app.css 的 zebra/通用 :hover(否则偶数行被斑马盖)。
 * 既有 :hover td:first-child 的 2px teal 内嵌左缘照常继承(交互信号)。 */
.v-usage-clickable-row { cursor: pointer; }
.table tbody tr.v-usage-clickable-row:hover td { background: var(--color-accent-tint); }
.table tbody tr.v-usage-clickable-row:focus-visible td { background: var(--color-accent-tint); }
.table tbody tr.v-usage-clickable-row:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--color-accent); }
.v-usage-clickable-row:focus-visible { outline: none; }

/* F9-B 明细行横向 pivot 轻量按钮(按此员工 / 按此模型):紧凑次级按钮,全 token 化(admin :root,
 * 绝不 --bs-*)。新增类,归 .v-usage 前缀私有,不动既有 .btn* 族(§0.10 类契约冻结)。 */
.v-usage-pivot { display: inline-flex; gap: var(--space-1); }
.v-usage-pivot-btn {
  appearance: none;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.2;
  padding: 2px 8px;
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.v-usage-pivot-btn:hover { background: var(--color-accent-tint); border-color: var(--color-accent-edge); }
.v-usage-pivot-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 基础排版:网格筛选里的 help 不出格,允许换行(2026-07-14) */
.v-usage-filters .field .field-help { white-space: normal; }