/* css/views/discovery.css — 「影子发现看板」私有样式(R1-D)。
 * owner: R1-D(只许本视图写;全部选择器前缀 .v-disc)。
 * 颜色/间距/圆角/字体一律 var(--*)(tokens.css 的 admin :root,绝不 --bs-*),
 * 禁止散落字面量。CSP:零内联 style —— 改色/隐藏切换全走 class;风险条几何用原生
 * <progress value/max> 属性(非 style)。 */

/* ---- 白画布区块容器(§9g 三层法第一层):查询/态势/类别/排行(或详情)靠底色分离 ---- */
.v-disc-canvas {
  background: var(--color-surface);
  border-radius: 24px;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.v-disc-canvas .section { margin-bottom: 0; }
.v-disc-sub { font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-left: var(--space-2); }
.v-disc-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.v-disc-sec-head .section-title { margin-bottom: 0; }

/* 态势总览卡(2026-07-14,对拍 DLP 总览卡):主数 + 侧计数一张灰卡 */
.v-disc-overview {
  background: var(--color-card);
  border-radius: 18px;
  padding: var(--space-4);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.v-disc-ov-num {
  font-family: var(--font-mono-tabular);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
}
.v-disc-ov-lbl { margin-top: 2px; font-size: 12px; color: var(--color-text-muted); }
.v-disc-ov-side { display: flex; gap: var(--space-6); }
.v-disc-ov-item { display: flex; flex-direction: column; gap: 1px; }
.v-disc-ov-val { font-size: 18px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.v-disc-ov-l { font-size: 11px; color: var(--color-text-muted); }

/* 类别概览:流数列内嵌等比数据条(对拍 usage cellbar,橙阶浅档) */
.v-disc-catwrap { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.v-disc-catwrap .mono { min-width: 3.6em; text-align: right; font-variant-numeric: tabular-nums; }
progress.v-disc-catbar {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 5px;
  border: 0;
  border-radius: 3px;
  background: var(--color-card);
  overflow: hidden;
}
progress.v-disc-catbar::-webkit-progress-bar { background: var(--color-card); }
progress.v-disc-catbar::-webkit-progress-value { background: #FBAB6B; border-radius: 3px; }
progress.v-disc-catbar::-moz-progress-bar { background: #FBAB6B; }

/* ---- 过滤器:等宽网格(对拍 v-usage-filters) ---- */
.v-disc-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-8) var(--space-3);
  align-items: end;
}
.v-disc-filters .select,
.v-disc-filters .input { width: 100%; }
.v-disc-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}
/* 窗口控件迁至 filters.js(.flt-dt/.flt-hidden 在 app.css)→ 原 .v-disc-hidden/.v-disc-dt 已无消费者,移除。 */
.v-disc-limit { width: 100%; }
.v-disc-host { width: 100%; }

/* ---- 摘要行(窗口回显) + 排行大标题间距 ---- */
.v-disc-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 13px;
  color: var(--color-text-secondary);
}
.v-disc-rank-title { margin-top: var(--space-2); }
.v-disc-capnote {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ---- 应用标识单元(显示名 / canonical_host / 聚合域 + 目录命中) ---- */
.v-disc-app {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 220px;
}
.v-disc-app-name {
  font-weight: 500;
  color: var(--color-text);
}
.v-disc-app-host {
  font-size: 13px;
  color: var(--color-accent); /* 标识符列可读作系统数据(deep/bright teal token) */
}
.v-disc-app-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: 12px;
}
.v-disc-app-reg { color: var(--color-text-muted); }
.v-disc-app-shadow { font-size: 12px; }

/* ---- 风险值轨:原生 <progress> + 等级徽章 + 分数 ----
 * DESIGN §13/§9c:值轨默认填充 = 中性钢(--color-gauge-neutral),
 * 中/高 = amber(--color-warning),严重 = danger(--color-danger);
 * 绝不 teal、绝不 green(半填充 teal/green 会被误读为「健康」)。
 * §7:过渡只用于 hover/focus —— 填充关掉默认动画。 */
.v-disc-risk {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 120px;
}
.v-disc-risk-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.v-disc-risk-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}
.v-disc-bar {
  appearance: none;
  -webkit-appearance: none;
  width: 108px;
  height: 8px;
  border: 0;
  border-radius: 4px;
  background: #EFF2F6;
  overflow: hidden;
}
/* 2026-07-14 用户:值轨换色 —— 中性软板岩 / 警示亮琥珀(图形档可浅于文字档 §9g)/
 * 危险绯红;去边框圆角化 */
.v-disc-bar::-webkit-progress-bar { background: #EFF2F6; }
.v-disc-bar::-webkit-progress-value { background: #AEBACB; transition: none; }
.v-disc-bar::-moz-progress-bar { background: #AEBACB; }
.v-disc-bar-mid::-webkit-progress-value { background: #F0A93B; }
.v-disc-bar-mid::-moz-progress-bar { background: #F0A93B; }
.v-disc-bar-crit::-webkit-progress-value { background: var(--color-danger); }
.v-disc-bar-crit::-moz-progress-bar { background: var(--color-danger); }

/* ---- 信号色工具类(语义固定;放在 .v-disc-risk-num 之后,后定义者胜) ---- */
.v-disc-warn { color: var(--color-warning); }
.v-disc-danger { color: var(--color-danger); }

/* ---- 单应用详情(键值网格,自适应两列) ---- */
.v-disc-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-2);
}
.v-disc-kv {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}
.v-disc-kv-k {
  flex: 0 0 132px;
  color: var(--color-text-secondary);
}
.v-disc-kv-v { color: var(--color-text); }

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


/* ---- 按类别的流量分布(2026-07-14 用户点名):横向排行条,ROI 分类色同族 8 色 ---- */
.v-disc-catlist { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.v-disc-ov-cap { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.v-disc-catrow {
  display: grid;
  grid-template-columns: 130px 1fr 120px;
  align-items: center;
  gap: var(--space-3);
}
.v-disc-catlab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v-disc-catsw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.v-disc-catval { text-align: right; font-size: 13px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.v-disc-cathbar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 5px;
  background: #EFF2F6;
  overflow: hidden;
}
.v-disc-cathbar::-webkit-progress-bar { background: #EFF2F6; }
.v-disc-catc-0 { background: #E8967A; } .v-disc-cathbar-0::-webkit-progress-value { background: #E8967A; } .v-disc-cathbar-0::-moz-progress-bar { background: #E8967A; }
.v-disc-catc-1 { background: #6FC47E; } .v-disc-cathbar-1::-webkit-progress-value { background: #6FC47E; } .v-disc-cathbar-1::-moz-progress-bar { background: #6FC47E; }
.v-disc-catc-2 { background: #7FA8E0; } .v-disc-cathbar-2::-webkit-progress-value { background: #7FA8E0; } .v-disc-cathbar-2::-moz-progress-bar { background: #7FA8E0; }
.v-disc-catc-3 { background: #B48DE0; } .v-disc-cathbar-3::-webkit-progress-value { background: #B48DE0; } .v-disc-cathbar-3::-moz-progress-bar { background: #B48DE0; }
.v-disc-catc-4 { background: #E0C25A; } .v-disc-cathbar-4::-webkit-progress-value { background: #E0C25A; } .v-disc-cathbar-4::-moz-progress-bar { background: #E0C25A; }
.v-disc-catc-5 { background: #6FBCB4; } .v-disc-cathbar-5::-webkit-progress-value { background: #6FBCB4; } .v-disc-cathbar-5::-moz-progress-bar { background: #6FBCB4; }
.v-disc-catc-6 { background: #9AA8BE; } .v-disc-cathbar-6::-webkit-progress-value { background: #9AA8BE; } .v-disc-cathbar-6::-moz-progress-bar { background: #9AA8BE; }
.v-disc-catc-7 { background: #E094AC; } .v-disc-cathbar-7::-webkit-progress-value { background: #E094AC; } .v-disc-cathbar-7::-moz-progress-bar { background: #E094AC; }