/* Decision-UI component styles (E1). 与 static/components/ 一同演进。 */

.decision-block { display: flex; flex-direction: column; gap: 3px; }
.decision-badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: 10px; font-weight: 700; line-height: 1.4;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16); color: var(--text2, #b9c2cc);
}
.decision-badge.decision-buy { border-color: rgba(220, 140, 140, 0.45); color: #e79a9a; }
.decision-badge.decision-small { border-color: rgba(220, 190, 120, 0.45); color: var(--yellow, #d8b45c); }
.decision-badge.decision-wait { border-color: rgba(220, 190, 120, 0.35); color: var(--yellow, #d8b45c); }
.decision-badge.decision-watch { border-color: rgba(255, 255, 255, 0.16); color: var(--text3, #8b97a3); }
.decision-badge.decision-forbid { border-color: rgba(120, 200, 140, 0.35); color: #8fd0a4; }
.decision-badge.decision-sell { border-color: rgba(120, 200, 140, 0.45); color: #8fd0a4; }
.decision-badge.decision-unknown { border-style: dashed; color: var(--text3, #8b97a3); }
.decision-rationale { font-size: 11px; color: var(--text3, #8b97a3); line-height: 1.45; }
.decision-invalidation { font-size: 11px; color: var(--yellow, #d8b45c); line-height: 1.45; }
.decision-position { font-size: 11px; color: var(--text2, #b9c2cc); }

.metric-card {
  display: inline-flex; flex-direction: column; gap: 2px;
  min-width: 96px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03);
}
.metric-card .metric-label { font-size: 10px; color: var(--text3, #8b97a3); }
.metric-card .metric-value { font-size: 15px; font-weight: 700; color: var(--text1, #e8edf2); }
.metric-card .metric-unit { font-size: 10px; font-weight: 500; margin-left: 2px; color: var(--text3, #8b97a3); }
.metric-card .metric-hint { font-size: 10px; color: var(--text3, #8b97a3); }
.metric-card.metric-ok .metric-value { color: #8fd0a4; }
.metric-card.metric-warn .metric-value { color: var(--yellow, #d8b45c); }
.metric-card.metric-bad .metric-value { color: #e79a9a; }

.page-header { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.page-header-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text1, #e8edf2); }
.page-header-subtitle { margin: 0; font-size: 12px; color: var(--text3, #8b97a3); }
.page-header-freshness { margin-top: 2px; }

.candidate-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.candidate-table th {
  text-align: left; font-weight: 600; color: var(--text3, #8b97a3);
  padding: 5px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.candidate-table td { padding: 5px 8px; color: var(--text2, #b9c2cc); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.candidate-table-empty, .candidate-table-invalid {
  padding: 14px; text-align: center; font-size: 12px; color: var(--text3, #8b97a3);
}

.detail-drawer {
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px 10px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03);
}
.detail-drawer-title { margin: 0 0 3px; font-size: 12px; font-weight: 700; color: var(--text1, #e8edf2); }
.detail-drawer .drawer-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.detail-drawer .drawer-key { color: var(--text3, #8b97a3); flex: 0 0 auto; }
.detail-drawer .drawer-value { color: var(--text2, #b9c2cc); text-align: right; }
.detail-drawer .drawer-note { margin-top: 3px; font-size: 10px; color: var(--text3, #8b97a3); }