/**
 * VulnerabilityCard styles
 * @countermeasure/web-components/security/vulnerability-card
 */

/* ============================================================================
   VULNERABILITY CARD BASE
   ============================================================================ */
.cmm-vuln-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid hsl(var(--border, 0 0% 90%));
  border-radius: var(--radius, 0.5rem);
  background-color: hsl(var(--card, 0 0% 100%));
  transition: box-shadow var(--transition-fast, 150ms);
}

.cmm-vuln-card:hover {
  box-shadow: 0 2px 8px hsl(0 0% 0% / 0.08);
}

.cmm-vuln-card--compact {
  gap: 0.5rem;
  padding: 0.75rem;
}

/* ============================================================================
   VULNERABILITY CARD HEADER
   ============================================================================ */
.cmm-vuln-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cmm-vuln-card__severity {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.cmm-vuln-card__severity--critical {
  background-color: hsl(0 84% 60% / 0.15);
  color: hsl(0 84% 40%);
  border: 1px solid hsl(0 84% 60% / 0.3);
}

.cmm-vuln-card__severity--high {
  background-color: hsl(25 95% 53% / 0.15);
  color: hsl(25 95% 43%);
  border: 1px solid hsl(25 95% 53% / 0.3);
}

.cmm-vuln-card__severity--medium {
  background-color: hsl(38 92% 50% / 0.15);
  color: hsl(38 92% 40%);
  border: 1px solid hsl(38 92% 50% / 0.3);
}

.cmm-vuln-card__severity--low {
  background-color: hsl(189 94% 43% / 0.15);
  color: hsl(189 94% 33%);
  border: 1px solid hsl(189 94% 43% / 0.3);
}

.cmm-vuln-card__severity--info {
  background-color: hsl(var(--muted, 0 0% 96%));
  color: hsl(var(--muted-foreground, 0 0% 50%));
  border: 1px solid hsl(var(--border, 0 0% 90%));
}

.cmm-vuln-card__id {
  font-family: monospace;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground, 0 0% 10%));
}

.cmm-vuln-card__title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: hsl(var(--foreground, 0 0% 10%));
  flex: 1;
  min-width: 0;
}

.cmm-vuln-card__status {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm, 0.25rem);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  margin-left: auto;
}

.cmm-vuln-card__status--open {
  background-color: hsl(0 84% 60% / 0.1);
  color: hsl(0 84% 50%);
}

.cmm-vuln-card__status--in_progress {
  background-color: hsl(38 92% 50% / 0.1);
  color: hsl(38 92% 40%);
}

.cmm-vuln-card__status--resolved {
  background-color: hsl(142 71% 45% / 0.1);
  color: hsl(142 71% 35%);
}

.cmm-vuln-card__status--accepted {
  background-color: hsl(var(--muted, 0 0% 96%));
  color: hsl(var(--muted-foreground, 0 0% 50%));
}

.cmm-vuln-card__status--false_positive {
  background-color: hsl(var(--muted, 0 0% 96%));
  color: hsl(var(--muted-foreground, 0 0% 50%));
  text-decoration: line-through;
}

/* ============================================================================
   VULNERABILITY CARD BODY
   ============================================================================ */
.cmm-vuln-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cmm-vuln-card__description {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground, 0 0% 50%));
}

.cmm-vuln-card__cvss {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
}

.cmm-vuln-card__cvss-label {
  font-weight: 500;
  color: hsl(var(--muted-foreground, 0 0% 50%));
}

.cmm-vuln-card__cvss-value {
  font-weight: 700;
  font-family: monospace;
}

.cmm-vuln-card__cvss-vector {
  font-size: 0.6875rem;
  font-family: monospace;
  color: hsl(var(--muted-foreground, 0 0% 50%));
  max-width: 20rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmm-vuln-card__cwe {
  font-size: 0.8125rem;
}

.cmm-vuln-card__cwe-link {
  color: hsl(var(--primary, 220 90% 56%));
  text-decoration: none;
  font-family: monospace;
  font-weight: 500;
}

.cmm-vuln-card__cwe-link:hover {
  text-decoration: underline;
}

/* ============================================================================
   VULNERABILITY CARD METADATA
   ============================================================================ */
.cmm-vuln-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground, 0 0% 50%));
}

.cmm-vuln-card__date {
  white-space: nowrap;
}

.cmm-vuln-card__affected {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.cmm-vuln-card__affected-label {
  font-weight: 500;
}

.cmm-vuln-card__affected-chip {
  display: inline-flex;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm, 0.25rem);
  background-color: hsl(var(--muted, 0 0% 96%));
  font-size: 0.75rem;
  font-family: monospace;
}

/* ============================================================================
   VULNERABILITY CARD TAGS
   ============================================================================ */
.cmm-vuln-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.cmm-vuln-card__tag {
  display: inline-flex;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background-color: hsl(var(--primary, 220 90% 56%) / 0.1);
  color: hsl(var(--primary, 220 90% 56%));
  font-size: 0.6875rem;
  font-weight: 500;
}

/* ============================================================================
   VULNERABILITY CARD REFERENCES
   ============================================================================ */
.cmm-vuln-card__references {
  border-top: 1px solid hsl(var(--border, 0 0% 90%));
  padding-top: 0.5rem;
}

.cmm-vuln-card__refs-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border: 1px solid hsl(var(--border, 0 0% 90%));
  border-radius: var(--radius-sm, 0.25rem);
  background: transparent;
  color: hsl(var(--primary, 220 90% 56%));
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background-color var(--transition-fast, 150ms);
}

.cmm-vuln-card__refs-toggle:hover {
  background-color: hsl(var(--muted, 0 0% 96%));
}

.cmm-vuln-card__refs-title {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.cmm-vuln-card__refs-list {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
  list-style-type: disc;
}

.cmm-vuln-card__refs-item {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.cmm-vuln-card__refs-link {
  color: hsl(var(--primary, 220 90% 56%));
  text-decoration: none;
}

.cmm-vuln-card__refs-link:hover {
  text-decoration: underline;
}
