/* css/views/dlp_exposure.css — 「DLP 暴露看板」私有样式(W-DLP-2)。
 * owner: W-DLP-2 agent(只许本视图写;全部选择器前缀 .v-dlp)。
 * 颜色/间距/圆角/字体一律 var(--*)(tokens.css),禁止散落字面量。
 * CSP:零内联 style —— 进度条改色、隐藏切换全走 class;进度条几何用原生
 * <progress value/max> 属性(非 style)。 */

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

/* 总览一张卡(2026-07-14 用户:散卡看不出关系):总量主数 + 管道侧计数 +
 * 严重度 100% 堆叠条 + 图例计数 */
.v-dlp-overview {
  background: var(--color-card);
  border-radius: 18px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.v-dlp-ov-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-4);
}
.v-dlp-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-dlp-ov-lbl { margin-top: 2px; font-size: 12px; color: var(--color-text-muted); }
.v-dlp-ov-side { display: flex; gap: var(--space-6); }
.v-dlp-ov-item { display: flex; flex-direction: column; gap: 1px; }
.v-dlp-ov-val { font-size: 18px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.v-dlp-ov-l { font-size: 11px; color: var(--color-text-muted); }
.v-dlp-ov-cap { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
/* 严重度横向排行条(2026-07-14 三稿,对拍用户参考稿排式):
 * 色块 + 档名 + 圆角横条(线性占比)+ 右对齐真实计数;√ 刻度退役 */
.v-dlp-sevlist { display: flex; flex-direction: column; gap: var(--space-2); } /* 铺满卡宽(2026-07-14 用户) */
.v-dlp-sevrow {
  display: grid;
  grid-template-columns: 88px 1fr 80px;
  align-items: center;
  gap: var(--space-3);
}
.v-dlp-sevlab { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--color-text-secondary); }
.v-dlp-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.v-dlp-sevval { text-align: right; font-size: 14px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.v-dlp-hbar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 5px;
  background: var(--color-surface); /* 灰卡上轨道翻白(§9g 第三层),不再与卡底同灰 */
  overflow: hidden;
}
.v-dlp-hbar::-webkit-progress-bar { background: var(--color-surface); }
.v-dlp-hbar-none::-webkit-progress-value { background: #7FC9A4; }
.v-dlp-hbar-none::-moz-progress-bar { background: #7FC9A4; }
.v-dlp-hbar-low::-webkit-progress-value { background: #FCC393; }
.v-dlp-hbar-low::-moz-progress-bar { background: #FCC393; }
.v-dlp-hbar-medium::-webkit-progress-value { background: #FB8D3C; }
.v-dlp-hbar-medium::-moz-progress-bar { background: #FB8D3C; }
.v-dlp-hbar-high::-webkit-progress-value { background: #C0271C; }
.v-dlp-hbar-high::-moz-progress-bar { background: #C0271C; }
.v-dlp-hbar-unscanned::-webkit-progress-value { background: #C9D2DE; }
.v-dlp-hbar-unscanned::-moz-progress-bar { background: #C9D2DE; }
/* 严重度段色(升温坡道 §9g;无发现=玉绿、未扫描=冷灰;background 供左侧色块) */
.v-dlp-seg-none { fill: #7FC9A4; background: #7FC9A4; }
.v-dlp-seg-low { fill: #FCC393; background: #FCC393; }
.v-dlp-seg-med { fill: #FB8D3C; background: #FB8D3C; }
.v-dlp-seg-high { fill: #C0271C; background: #C0271C; }
.v-dlp-seg-un { fill: #D7DEE8; background: #D7DEE8; }

/* 排行分页条 */
.v-dlp-pager { margin-top: var(--space-3); }
/* TopN 卡 → 灰卡(第二层),内嵌表翻白(第三层)去边框阴影 */
.v-dlp-topn-card {
  background: var(--color-card);
  border-radius: 18px;
  padding: var(--space-4);
}
.v-dlp-topn-card .table-wrap { border: none; box-shadow: none; }

/* ---- 过滤器:等宽网格(对拍 v-usage-filters) ---- */
.v-dlp-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-8) var(--space-3);
  align-items: end;
}
.v-dlp-filters .select,
.v-dlp-filters .input { width: 100%; }
.v-dlp-filters .field .field-help { white-space: normal; } /* 基础排版:help 不出格,换行 */
.v-dlp-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}
/* 子标题(严重度分布 / TopN 标题):比 h2 区块标题小一档,以权重分层 */
.v-dlp-subtitle {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

/* ---- 摘要行(窗口回显 + 分组/方向 + 行数 + 合计) ---- */
.v-dlp-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-dlp-sep { color: var(--color-text-muted); }
.v-dlp-total { color: var(--color-text); font-weight: 500; }

/* ---- 错误解释行(dlpError:audit_unavailable / service_unavailable) ---- */
.v-dlp-note {
  margin-bottom: var(--space-2);
  font-size: 12px;
  color: var(--color-text-muted);
}
/* TopN / 排行的元数据/截断说明 */
.v-dlp-capnote {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ---- 双 TopN:并排自适应两列(窄屏自动落单列) ---- */
.v-dlp-topn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* ---- by_type 类型分解:灰芯片(前 4 类 + 「+N 类」收纳;2026-07-14 用户裁定) ---- */
.v-dlp-bytype {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  white-space: normal; /* 芯片行允许换行(表格其余单元格 nowrap) */
}
.v-dlp-tychip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--color-card);
  font-size: 12px;
  white-space: nowrap;
}
.v-dlp-tychip-l { color: inherit; opacity: 0.82; }
.v-dlp-tychip-n { color: inherit; font-weight: 700; }
.v-dlp-tychip-more { color: var(--color-text-muted); background: var(--color-card); }
/* 类型八色淡彩(piiRank 取模,同类型全站恒同色)。二稿(2026-07-14 用户:配色要
 * 和谐):对拍 ROI 部门分类色的「淡彩底 + 同 hue 深字」公式(用户亲手调过的五对
 * 原样借用,再按同调补三对),饱和度压齐,不再糖果。 */
.v-dlp-tyc-0 { background: rgba(255, 175, 151, 0.22); color: var(--color-cat-dev); } /* 陶土(对拍 mark-dev) */
.v-dlp-tyc-1 { background: rgba(147, 230, 153, 0.24); color: var(--color-cat-cs); } /* 绿(mark-cs) */
.v-dlp-tyc-2 { background: rgba(161, 201, 255, 0.24); color: var(--color-cat-risk); } /* 蓝(mark-risk) */
.v-dlp-tyc-3 { background: rgba(212, 168, 255, 0.24); color: var(--color-cat-legal); } /* 紫(mark-legal) */
.v-dlp-tyc-4 { background: rgba(255, 230, 130, 0.30); color: var(--color-cat-mkt); } /* 金(mark-mkt) */
.v-dlp-tyc-5 { background: rgba(148, 222, 214, 0.26); color: var(--color-cat-teal); } /* 青(同调补) */
.v-dlp-tyc-6 { background: rgba(178, 192, 212, 0.30); color: var(--color-cat-slate); } /* 石蓝灰(同调补) */
.v-dlp-tyc-7 { background: rgba(255, 182, 203, 0.26); color: var(--color-cat-rose); } /* 玫瑰(同调补) */

/* 排行表单行排版(2026-07-14 用户:竖排字再犯):单元格 nowrap,类型芯片列例外 */
.v-dlp-canvas .table th,
.v-dlp-canvas .table td { white-space: nowrap; }

/* ---- 占阈值:进度条 + 数字 ---- */
.v-dlp-pct {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 132px;
}
.v-dlp-pct-text {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.v-dlp-pct-num { color: var(--color-text); font-weight: 500; }
.v-dlp-pct-thresh { color: var(--color-text-muted); font-size: 12px; }

/* 原生 <progress> 进度条:几何用 value/max 属性(非内联样式);
 * 轨道=Panel Mist,填充=Navy(默认)/Amber(接近)/Crimson(越线)。
 * DESIGN §7:过渡只用于 hover/focus —— 进度填充关掉默认动画。
 * 裁定(科技青改版):默认填充保持 Navy,teal 绝不进入 DLP 值轨 ——
 * 半填充的 teal 会漂向「健康」语义,在暴露计上被误读为"好"(护 色=信号)。
 * 升级档不变:near=Amber、over=Crimson。见 DESIGN.md §13。 */
.v-dlp-bar {
  appearance: none;
  -webkit-appearance: none;
  width: 120px;
  height: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-bg);
  overflow: hidden;
}
.v-dlp-bar::-webkit-progress-bar { background: var(--color-bg); }
.v-dlp-bar::-webkit-progress-value { background: var(--color-gauge-neutral); transition: none; }
.v-dlp-bar::-moz-progress-bar { background: var(--color-gauge-neutral); }
.v-dlp-bar-near::-webkit-progress-value { background: var(--color-warning); }
.v-dlp-bar-near::-moz-progress-bar { background: var(--color-warning); }
.v-dlp-bar-over::-webkit-progress-value { background: var(--color-danger); }
.v-dlp-bar-over::-moz-progress-bar { background: var(--color-danger); }

/* ---- 信号色工具类(语义固定:ok=干净 warn=接近/警示 danger=越线/高危)。
 * 放在 .v-dlp-pct-num 之后:同特异性下后定义者胜,确保染色覆盖 pct-num 的默认色;
 * 覆盖 stat-value(app.css)同理(本视图 css 在 app.css 之后加载)。 ---- */
.v-dlp-ok { color: var(--color-success); }
.v-dlp-warn { color: var(--color-warning); }
.v-dlp-danger { color: var(--color-danger); }

/* F9-A 暴露排行可点行 → 用量报表 handoff(部门级 / 员工级=D1 经 step-up)。指针 + hover/focus 提亮。
 * 镜像 usage.css 的 .v-usage-clickable-row;限定 .v-dlp 前缀,token 化(admin :root,绝不 --bs-*)。 */
.v-dlp-clickable-row { cursor: pointer; }
.table tbody tr.v-dlp-clickable-row:hover td { background: var(--color-accent-tint); }
.table tbody tr.v-dlp-clickable-row:focus-visible td { background: var(--color-accent-tint); }
.table tbody tr.v-dlp-clickable-row:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--color-accent); }
.v-dlp-clickable-row:focus-visible { outline: none; }