/* Lists */
.list {
  margin-top: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md); /* Adds space between list items */
}

.list-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); /* Slightly larger radius for a modern look */
  padding: var(--spacing-lg); /* Generous padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s, border-color 0.2s; /* Smooth hover effect */
}

.list-item:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-hover);
}

.list-item__content {
  flex-grow: 1; /* Allow content to take available space */
}

.list-item__title {
  font-size: var(--font-size-lg); /* Using variables for consistency */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-emphasis); /* For more prominent titles */
  margin: 0 0 var(--spacing-xs) 0; /* Adjusted margin */
}

.list-item__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
  margin: 0;
}

.list-item__actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0; /* Prevent actions from shrinking */
  margin-left: var(--spacing-md); /* Add some space between content and actions */
}

/* Blank Slate */
.blank-slate {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-subtle); /* Dashed border for empty state */
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-lg);
  color: var(--color-text-subtle);
}

.blank-slate__icon { /* Optional: if you want to add an icon later */
  margin-bottom: var(--spacing-md);
  /* Style for SVG or font icon */
}

.blank-slate__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text); /* More prominent title */
  margin: 0 0 var(--spacing-sm) 0;
}

.blank-slate__text {
  font-size: var(--font-size-base);
  margin: 0 0 var(--spacing-md) 0; /* Space before the button */
  line-height: var(--line-height-relaxed);
}

/* Ensure buttons in blank slate are spaced nicely */
.blank-slate .button {
  margin-top: var(--spacing-sm);
}