/* Framework filter buttons */
.soa-filter-btn {
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
}

.soa-filter-btn:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.soa-filter-btn.active {
  background: var(--primary-opacity-10);
  color: var(--primary);
  border-color: var(--primary);
  border-opacity: 0.2;
}

/* Export button */
.soa-export-btn {
  background: var(--primary);
  border: none;
  color: var(--primary-foreground);
  box-shadow: 0 4px 12px rgba(var(--primary), 0.2);
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 16px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.soa-export-btn:hover {
  transform: translateY(-1px);
  opacity: 0.9;
  box-shadow: 0 6px 16px rgba(var(--primary), 0.3);
}

/* Status indicators */
.status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-enabled, .status-fully {
  background-color: hsl(142.1, 76.2%, 36.3%);
}

.status-partial, .status-partially {
  background-color: hsl(48, 96.5%, 53.9%);
}

.status-disabled {
  background-color: hsl(0, 84.2%, 60.2%);
}

.status-not-applicable {
  /* Grey */
  background-color: var(--color-gray-500);
}

.status-unknown {
  background-color: var(--muted-foreground);
}

/* Dark mode styles */
.dark .status-enabled, .dark .status-fully {
  background-color: hsl(142.1, 70.6%, 45.3%);
}

.dark .status-partial, .dark .status-partially {
  background-color: hsl(48, 96.5%, 58.8%);
}

.dark .status-disabled {
  background-color: hsl(0, 72.2%, 50.6%);
}

.dark .status-not-applicable {
  /* Grey */
  background-color: var(--color-gray-500);
}

.dark .status-unknown {
  background-color: var(--muted-foreground);
}

/* SOA Table styles */
.soa-table th {
  background-color: var(--muted);
  color: var(--muted-foreground);
  font-weight: 600;
}

.soa-table tr:nth-child(even) {
  background-color: var(--accent);
}

.soa-table tr:hover {
  background-color: var(--accent);
}

@media (max-width: 768px) {
  /* Export button for mobile */
  .soa-export-btn {
    font-size: 13px;
    padding: 6px 12px;
  }

  /* Filter buttons for mobile */
  .soa-filter-btn {
    font-size: 11px;
    padding: 5px 10px;
    margin-bottom: 5px;
  }
}