/* ==================== */
/* SHARED DIAGNOSTIC STYLES */
/* ==================== */

/* These styles are shared between Website Analytics and Business Insights dashboards */

/* Grade Color Schemes */
.grade-a-plus, .grade-a { background: rgba(52, 199, 89, 0.15); color: #248a3d; }
.grade-b { background: rgba(0, 122, 255, 0.15); color: #0066cc; }
.grade-c { background: rgba(255, 149, 0, 0.15); color: #c45d00; }
.grade-d, .grade-f { background: rgba(255, 59, 48, 0.15); color: #c41e3a; }

/* Health Score Card */
.health-score-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.health-score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.health-score-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.health-grade {
  font-size: var(--font-size-lg);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
}

.health-score-display {
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
}

.score-circle {
  position: relative;
  width: 140px;
  height: 140px;
}

.score-circle svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.score-circle .score-bg {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 8;
}

.score-circle .score-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.8s ease;
}

.score-fill.status-excellent { stroke: var(--color-green); }
.score-fill.status-good { stroke: var(--color-blue); }
.score-fill.status-fair { stroke: var(--color-orange); }
.score-fill.status-poor { stroke: var(--color-red); }

.score-circle .score-value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text);
}

.health-interpretation {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: var(--space-4) 0;
  line-height: 1.5;
}

/* Health Components */
.health-components {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
}

.health-component {
  display: grid;
  grid-template-columns: 90px 1fr 30px;
  align-items: center;
  gap: var(--space-3);
}

.component-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.component-bar {
  height: 6px;
  background: var(--color-surface-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.component-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}

.component-fill.status-excellent { background: var(--color-green); }
.component-fill.status-good { background: var(--color-blue); }
.component-fill.status-fair { background: var(--color-orange); }
.component-fill.status-poor { background: var(--color-red); }
.component-fill.status-critical { background: var(--color-red); }

.component-score {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-align: right;
}

/* Executive Summary */
.executive-summary {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-secondary) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.executive-summary p {
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

/* Impact Badges */
.impact-high,
.action-impact.impact-high {
  background: rgba(52, 199, 89, 0.15);
  color: #248a3d;
}

.impact-medium,
.action-impact.impact-medium {
  background: rgba(0, 122, 255, 0.15);
  color: #0066cc;
}

.impact-low,
.action-impact.impact-low {
  background: rgba(142, 142, 147, 0.15);
  color: #636366;
}

.action-impact {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* Action Items */
.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.action-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.action-item:last-child {
  margin-bottom: 0;
}

.action-number {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--color-blue);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.action-content {
  flex: 1;
}

.action-title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.action-meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
}

.action-time {
  color: var(--color-text-tertiary);
}

/* Diagnosis Hero Grid */
.diagnosis-hero {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

@media (max-width: 1024px) {
  .diagnosis-hero {
    grid-template-columns: 1fr;
  }
}

/* Primary Recommendation/Lever Card */
.primary-recommendation-card,
.primary-lever-card {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(175, 82, 222, 0.05) 100%);
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.primary-recommendation-card.empty-state {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-align: center;
}

.recommendation-badge,
.lever-badge {
  display: inline-block;
  background: var(--color-blue);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.primary-recommendation-card h2,
.primary-lever-card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
}

.recommendation-description,
.lever-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
  line-height: 1.5;
}

/* Current/Target Metrics Display */
.recommendation-metrics,
.lever-current-target {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.metric-item,
.lever-metric {
  text-align: center;
}

.metric-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}

.metric-value {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.metric-value.current {
  color: var(--color-text);
}

.metric-value.target {
  color: var(--color-green);
}

.metric-arrow,
.lever-arrow {
  color: var(--color-text-tertiary);
}

/* Quick Wins / Actions Section */
.recommendation-actions h4,
.lever-actions h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}

/* Status Colors */
.text-success { color: var(--color-green); }
.text-warning { color: var(--color-orange); }
.text-danger { color: var(--color-red); }