/**
 * Risk Lens Review — Dashboard & Report Styles
 */

/* ============================================
   DASHBOARD LAYOUT
   ============================================ */
.dashboard {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-6);
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.dashboard-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.meta-item svg { width: 16px; height: 16px; }

.dashboard-header-right {
  display: flex;
  gap: var(--space-2);
}

/* TABS */
.dashboard-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  background: var(--color-bg-secondary);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tab-btn:hover { color: var(--color-text-secondary); background: var(--color-bg-tertiary); }
.tab-btn.active { background: var(--color-accent); color: var(--color-bg-primary); }
.tab-btn svg { width: 18px; height: 18px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn var(--transition-base); }

/* VERDICT BANNER */
.verdict-banner {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-8);
  border: 1px solid;
}

.verdict-safe { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }
.verdict-caution { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); }
.verdict-elevated { background: rgba(249, 115, 22, 0.1); border-color: rgba(249, 115, 22, 0.3); }
.verdict-critical { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); }

.verdict-icon { flex-shrink: 0; }
.verdict-icon svg { width: 48px; height: 48px; }
.verdict-safe .verdict-icon { color: var(--color-safe); }
.verdict-caution .verdict-icon { color: var(--color-caution); }
.verdict-elevated .verdict-icon { color: var(--color-elevated); }
.verdict-critical .verdict-icon { color: var(--color-critical); }

.verdict-content { flex: 1; }
.verdict-label { font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--space-2); }
.verdict-safe .verdict-label { color: var(--color-safe); }
.verdict-caution .verdict-label { color: var(--color-caution); }
.verdict-elevated .verdict-label { color: var(--color-elevated); }
.verdict-critical .verdict-label { color: var(--color-critical); }

.verdict-summary { font-size: var(--text-base); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.verdict-concerns { font-size: var(--text-sm); color: var(--color-text-secondary); }
.verdict-concerns ul { margin-top: var(--space-2); margin-left: var(--space-5); }
.verdict-concerns li { margin-bottom: var(--space-1); }

/* CARDS SECTION */
.cards-section { margin-bottom: var(--space-8); }

.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--space-4);
}

.cards-grid-1 { grid-template-columns: 1fr; }
.cards-grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 768px) {
  .cards-grid, .cards-grid-2 { grid-template-columns: 1fr; }
}

/* CARD */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  transition: all var(--transition-fast);
}

.card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }

.card-animate { animation: cardSlideIn var(--transition-slow) ease-out both; }

@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.card-icon svg { width: 20px; height: 20px; }
.card-universal .card-icon { color: var(--color-accent); }
.card-ai .card-icon { color: #ec4899; }

.card-title-group { flex: 1; }
.card-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary); margin-bottom: var(--space-1); }

.card-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-info-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.card-info-btn:hover { background: var(--color-bg-secondary); color: var(--color-text-secondary); }
.card-info-btn svg { width: 16px; height: 16px; }

/* Card Summary */
.card-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.summary-stat { display: flex; flex-direction: column; }
.stat-value { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text-primary); }
.stat-label { font-size: var(--text-xs); color: var(--color-text-tertiary); }

.severity-indicator, .confidence-indicator, .risk-indicator {
  margin-left: auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.severity-minimal, .confidence-high, .risk-minimal { background: rgba(34, 197, 94, 0.15); color: var(--color-success); }
.severity-moderate, .confidence-medium, .risk-moderate { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.severity-elevated, .risk-elevated { background: rgba(249, 115, 22, 0.15); color: var(--color-elevated); }
.severity-critical, .confidence-low, .risk-critical { background: rgba(239, 68, 68, 0.15); color: var(--color-error); }

.signals-count { font-size: var(--text-sm); color: var(--color-text-tertiary); }
.card-concern { font-size: var(--text-sm); color: var(--color-text-secondary); font-style: italic; margin-bottom: var(--space-4); }

/* FINDINGS */
.card-findings, .card-signals, .card-evidence { display: flex; flex-direction: column; gap: var(--space-3); }

.no-findings, .no-signals {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3);
  background: rgba(34, 197, 94, 0.1);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: var(--text-sm);
}

.no-findings svg, .no-signals svg { width: 18px; height: 18px; }

.finding {
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border);
}

.finding-critical { border-left-color: var(--color-critical); }
.finding-elevated { border-left-color: var(--color-elevated); }
.finding-moderate { border-left-color: var(--color-warning); }
.finding-minimal { border-left-color: var(--color-success); }

.finding-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }

.finding-severity {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.finding-label { font-weight: var(--font-medium); color: var(--color-text-primary); }
.finding-description { font-size: var(--text-sm); color: var(--color-text-secondary); }

.finding-detail { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.finding-detail.collapsed { display: none; }

.detail-section { margin-bottom: var(--space-3); }
.detail-section strong { display: block; font-size: var(--text-sm); color: var(--color-text-primary); margin-bottom: var(--space-1); }
.detail-section p, .detail-section ul { font-size: var(--text-sm); color: var(--color-text-secondary); }
.detail-section ul { margin-left: var(--space-5); }

.finding-expand-btn {
  display: flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-3); padding: var(--space-2);
  background: transparent; border: none;
  color: var(--color-accent); font-size: var(--text-sm);
  cursor: pointer; transition: all var(--transition-fast);
}

.finding-expand-btn:hover { color: var(--color-accent-hover); }
.finding-expand-btn svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.finding-expand-btn.expanded svg { transform: rotate(180deg); }

/* SIGNALS */
.signal {
  padding: var(--space-3);
  background: var(--color-bg-primary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border);
}

.signal-critical { border-left-color: var(--color-critical); }
.signal-elevated { border-left-color: var(--color-elevated); }
.signal-moderate { border-left-color: var(--color-warning); }
.signal-minimal { border-left-color: var(--color-success); }

.signal-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.signal-severity { width: 8px; height: 8px; border-radius: 50%; }

.signal-critical .signal-severity { background: var(--color-critical); }
.signal-elevated .signal-severity { background: var(--color-elevated); }
.signal-moderate .signal-severity { background: var(--color-warning); }
.signal-minimal .signal-severity { background: var(--color-success); }

.signal-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-primary); }
.signal-description { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-left: var(--space-4); }

/* EVIDENCE */
.evidence-section { padding: var(--space-3); background: var(--color-bg-secondary); border-radius: var(--radius-md); }

.evidence-title {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--color-text-primary); margin-bottom: var(--space-2);
}

.evidence-title svg { width: 16px; height: 16px; color: var(--color-text-tertiary); }
.evidence-list { list-style: none; }

.evidence-item {
  padding: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.evidence-item:last-child { border-bottom: none; }
.evidence-unverified { border-left: 2px solid var(--color-warning); padding-left: var(--space-3); }
.evidence-missing { border-left: 2px solid var(--color-error); padding-left: var(--space-3); }

.impact-badge {
  display: inline-block; margin-left: var(--space-2);
  padding: 0 var(--space-2);
  background: rgba(239, 68, 68, 0.15); color: var(--color-error);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
}
/**
 * Risk Lens Review — Dashboard Styles Part 2
 * Alternatives, Footer, Comparison View
 */

/* ALTERNATIVES */
.alternatives-section {
  background: rgba(20, 184, 166, 0.05);
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.badge-options { background: rgba(20, 184, 166, 0.15); color: #14b8a6; }
.alternatives-intro { font-size: var(--text-base); color: var(--color-text-secondary); margin-bottom: var(--space-5); }

.alternatives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.alternative-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.alternative-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }

.alternative-number {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 184, 166, 0.15); color: #14b8a6;
  font-weight: var(--font-bold); border-radius: 50%;
}

.alternative-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.alternative-description { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); }

.alternative-tradeoffs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); font-size: var(--text-sm); }
.tradeoff-pros strong { color: var(--color-success); }
.tradeoff-cons strong { color: var(--color-error); }
.alternative-tradeoffs ul { margin-left: var(--space-4); margin-top: var(--space-1); color: var(--color-text-tertiary); }

.questions-section h4 { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text-primary); margin-bottom: var(--space-3); }
.questions-list { margin-left: var(--space-5); color: var(--color-text-secondary); }
.questions-list li { margin-bottom: var(--space-2); }

/* FOOTER */
.dashboard-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-4);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.footer-actions { display: flex; justify-content: center; gap: var(--space-3); }

/* RAW OUTPUT / COMPARISON VIEW */
.raw-output { max-width: var(--max-width); margin: 0 auto; }
.comparison-view { padding: var(--space-6); }

.comparison-header { text-align: center; margin-bottom: var(--space-8); }
.comparison-header h2 { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text-primary); margin-bottom: var(--space-2); }
.comparison-subtitle { font-size: var(--text-base); color: var(--color-text-secondary); }

.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-8); }

@media (max-width: 900px) { .comparison-grid { grid-template-columns: 1fr; } }

.comparison-panel {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.panel-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }

.panel-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  text-transform: uppercase; margin-bottom: var(--space-2);
}

.badge-standard { background: rgba(100, 116, 139, 0.15); color: #64748b; }
.badge-lens { background: var(--color-accent-muted); color: var(--color-accent); }
.panel-badge svg { width: 14px; height: 14px; }
.panel-header h3 { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.panel-content { padding: var(--space-5); }

.confidence-bar {
  position: relative; height: 24px;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden; margin-bottom: var(--space-4);
}

.confidence-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--color-success), var(--color-warning));
  transition: width var(--transition-slow);
}

.confidence-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.response-text { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--line-relaxed); }
.response-text p { margin-bottom: var(--space-4); }
.response-text ul, .response-text ol { margin-left: var(--space-5); margin-bottom: var(--space-4); }
.response-text li { margin-bottom: var(--space-2); }
.illuminated-intro { font-weight: var(--font-medium); color: var(--color-text-primary); margin-bottom: var(--space-4); }
.response-text.illuminated { color: var(--color-text-primary); }

.critical-findings {
  margin-top: var(--space-4); padding: var(--space-4);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.critical-findings h4 { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); margin-bottom: var(--space-2); }
.critical-findings ul { margin-left: var(--space-5); font-size: var(--text-sm); color: var(--color-text-secondary); }

.panel-footer { padding: var(--space-3) var(--space-5); background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); }

.panel-note {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-muted);
}

.panel-note svg { width: 14px; height: 14px; }
.panel-note-success { color: var(--color-success); }

/* Verdict Mini */
.verdict-mini {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
}

.verdict-mini.verdict-safe { background: rgba(34, 197, 94, 0.15); color: var(--color-safe); }
.verdict-mini.verdict-caution { background: rgba(245, 158, 11, 0.15); color: var(--color-caution); }
.verdict-mini.verdict-elevated { background: rgba(249, 115, 22, 0.15); color: var(--color-elevated); }
.verdict-mini.verdict-critical { background: rgba(239, 68, 68, 0.15); color: var(--color-critical); }
.verdict-mini svg { width: 18px; height: 18px; }

/* Comparison Legend */
.comparison-legend {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.comparison-legend h4 { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-primary); margin-bottom: var(--space-4); text-align: center; }
.legend-items { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }

@media (max-width: 600px) { .legend-items { grid-template-columns: 1fr; } }

.legend-item { display: flex; gap: var(--space-4); }

.legend-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); flex-shrink: 0;
}

.legend-icon svg { width: 24px; height: 24px; }
.legend-standard { background: rgba(100, 116, 139, 0.15); color: #64748b; }
.legend-lens { background: var(--color-accent-muted); color: var(--color-accent); }
.legend-content strong { display: block; font-size: var(--text-base); color: var(--color-text-primary); margin-bottom: var(--space-1); }
.legend-content p { font-size: var(--text-sm); color: var(--color-text-secondary); }

/* Single View */
.single-view { padding: var(--space-6); max-width: 800px; margin: 0 auto; }
.single-header { margin-bottom: var(--space-6); }
.single-header h2 { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text-primary); margin-top: var(--space-2); }

.illuminated-content {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.analysis-summary {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.analysis-summary h3 { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-primary); margin-bottom: var(--space-4); }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

@media (max-width: 600px) { .summary-grid { grid-template-columns: repeat(2, 1fr); } }

.summary-item { text-align: center; }
.summary-label { display: block; font-size: var(--text-xs); color: var(--color-text-tertiary); margin-bottom: var(--space-1); }
.summary-value { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text-primary); }

.disclaimer-box {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.disclaimer-box svg { width: 20px; height: 20px; color: var(--color-text-muted); flex-shrink: 0; }
.disclaimer-box p { font-size: var(--text-sm); color: var(--color-text-tertiary); font-style: italic; }

/* Card Info Modal */
.modal-card-info .modal-header { display: flex; justify-content: space-between; align-items: center; }
.modal-card-info .modal-close { background: none; border: none; color: var(--color-text-tertiary); cursor: pointer; padding: var(--space-2); }
.modal-card-info .modal-close:hover { color: var(--color-text-primary); }

.info-section { margin-bottom: var(--space-4); }
.info-section:last-child { margin-bottom: 0; }
.info-section h4 { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-accent); margin-bottom: var(--space-2); }
.info-section p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--line-relaxed); }

/* Color utilities */
.color-success { color: var(--color-success); }
.color-warning { color: var(--color-warning); }
.color-error { color: var(--color-error); }
.color-info { color: var(--color-info); }