/* ============================================================
   Badge Components
   Reusable badge styles for competencies, companies, answer flows
   ============================================================ */

/* Badge Container */
.badge-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

/* Competency Badges */
.competency-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--color-primary-bg, #EEF2FF);
  color: var(--color-primary, #4F46E5);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  min-height: 32px;
}

.competency-badge.more {
  background: var(--color-bg-muted, #F5F5F5);
  color: var(--color-text-muted, #6B7280);
  font-style: italic;
}

/* Answer Flow */
.answer-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  padding: 16px;
  background: var(--color-bg-muted, #F9FAFB);
  border-radius: 12px;
  border: 1px solid var(--color-border, #E5E7EB);
}

.flow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background: var(--color-bg, white);
  border: 1px solid var(--color-border, #E0E0E0);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #1F2937);
  min-height: 44px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.flow-arrow {
  font-size: 20px;
  color: var(--color-primary, #0F766E);
  font-weight: bold;
  flex-shrink: 0;
  margin: 0 4px;
}

/* Company Badges */
.companies-badge-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--color-success-bg, #ECFDF5);
  border-radius: 8px;
  border: 1px solid var(--color-success-border, #A7F3D0);
}

.badge-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted, #6B7280);
  margin-right: 4px;
}

.company-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--color-bg, white);
  border: 1px solid var(--color-success-border, #A7F3D0);
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-success-text, #047857);
  white-space: nowrap;
  min-height: 28px;
}

/* Attribution Tags */
.attribution-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 8px;
  vertical-align: middle;
}

.tag-personalized {
  background: var(--color-success-bg, #ECFDF5);
  color: var(--color-success-text, #047857);
  border: 1px solid var(--color-success-border, #A7F3D0);
}

.tag-generic {
  background: var(--color-bg-muted, #F5F5F5);
  color: var(--color-text-muted, #6B7280);
  border: 1px solid var(--color-border, #E5E7EB);
}

/* Follow-up Questions */
.follow-up-section {
  margin: 24px 0;
  padding: 16px;
  background: var(--color-warning-bg, #FEF3C7);
  border-radius: 8px;
  border: 1px solid var(--color-warning-border, #FCD34D);
}

.follow-up-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-warning-text, #92400E);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.follow-up-section h4::before {
  content: "💬";
}

.follow-up-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.follow-up-list li {
  position: relative;
  padding: 10px 12px 10px 28px;
  margin: 6px 0;
  background: var(--color-bg, white);
  border-radius: 6px;
  font-size: 14px;
  color: var(--color-text-secondary, #4B5563);
  line-height: 1.5;
}

.follow-up-list li::before {
  content: "→";
  position: absolute;
  left: 10px;
  color: var(--color-warning-text, #92400E);
  font-weight: bold;
}

/* Theme Badges (for Questions List) */
.theme-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--color-info-bg, #EFF6FF);
  color: var(--color-info-text, #1D4ED8);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

/* Frequency Badge */
.frequency-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.frequency-badge.high {
  background: var(--color-danger-bg, #FEE2E2);
  color: var(--color-danger-text, #DC2626);
}

.frequency-badge.medium {
  background: var(--color-warning-bg, #FEF3C7);
  color: var(--color-warning-text, #D97706);
}

.frequency-badge.low {
  background: var(--color-success-bg, #ECFDF5);
  color: var(--color-success-text, #059669);
}

/* ============================================================
   Mobile Responsive
   ============================================================ */

@media (max-width: 768px) {
  .badge-container {
    gap: 6px;
  }

  .competency-badge {
    padding: 5px 10px;
    font-size: 12px;
    min-height: 28px;
  }

  .answer-flow {
    padding: 12px;
    gap: 6px;
  }

  .flow-step {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 40px;
  }

  .flow-arrow {
    font-size: 16px;
    margin: 0 2px;
  }

  .companies-badge-container {
    padding: 10px 12px;
  }

  .company-badge {
    padding: 4px 10px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  /* Stack answer flow vertically on small screens */
  .answer-flow {
    flex-direction: column;
    align-items: stretch;
  }

  .flow-step {
    width: 100%;
    justify-content: center;
    min-height: 44px; /* Touch target */
  }

  .flow-arrow {
    transform: rotate(90deg);
    align-self: center;
    margin: 4px 0;
  }

  /* Ensure touch targets on small screens */
  .competency-badge,
  .company-badge {
    min-height: 44px;
    padding: 10px 14px;
  }

  .follow-up-list li {
    padding: 12px 12px 12px 32px;
    min-height: 44px;
  }
}

@media (max-width: 320px) {
  .flow-step {
    font-size: 12px;
    padding: 8px 12px;
  }

  .competency-badge {
    font-size: 11px;
    padding: 8px 12px;
  }
}