/* Prompt Details */
.prompt-details {
  margin-top: var(--spacing-xl);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-xs);
}

.detail-value {
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
}

/* Prompt Content Display */
.prompt-content,
.code-example {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  color: var(--color-gray-800);
}

.code-example {
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
  border-color: var(--color-gray-700);
}

/* Parameters Section */
.parameters-section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-gray-200);
}

.parameters-list {
  margin-top: var(--spacing-lg);
}

.parameters-table {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.parameter-row {
  padding: var(--spacing-md);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
}

.parameter-name {
  font-family: monospace;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: var(--spacing-xs);
}

.parameter-details {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  align-items: baseline;
}

.parameter-type,
.parameter-required,
.parameter-default {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.parameter-type {
  font-family: monospace;
  color: var(--color-primary-600);
}

.parameter-required {
  color: var(--color-danger);
  font-weight: 500;
}

.parameter-description {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

/* Parameter Form Fields */
.parameters-section {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.parameter-fields {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
}

.parameters-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.parameter-item {
  background-color: white;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr 100px;
  gap: var(--spacing-md);
  align-items: start;
}

.parameter-field {
  display: flex;
  flex-direction: column;
}

.parameter-field label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-xs);
}

.parameter-field input,
.parameter-field select {
  font-size: var(--font-size-sm);
}

.parameter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: 20px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  color: var(--color-gray-500);
}

.empty-state__icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.3;
}

.empty-state__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-sm);
}

.empty-state__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-lg);
}

/* Evaluation Sets Summary */
.eval-sets-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.eval-set-summary-item {
  padding: var(--spacing-md);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

.eval-set-summary__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.eval-set-summary__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0;
}

.eval-set-summary__stats {
  display: flex;
  gap: var(--spacing-sm);
}

.eval-set-summary__description {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
  margin: 0 0 var(--spacing-sm) 0;
}

.eval-set-summary__result {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}