/*
* ============================================================================
* FILE: generation.css
*
* DESCRIPTION:
* Contains all styles specific to the "Create a New Design" page.
* ============================================================================
*/

/* --- Modify general styles --- */
/*
  This targets the sidebar on the generation page and tells it
  to arrange its direct children (the form groups) in a vertical
  column with consistent spacing.
*/
.page-layout--two-column > .page-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* --- Unique placeholder styles --- */
.image-card.placeholder {
  /* border: 2px dashed var(--color-border); */
  align-items: center;
  justify-content: center;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
}

.placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--color-border);
}

/* --- Pending Generation State --- */
.pending-generation,
.generation-failed {
  width: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  background-color: #f9f9f9;
  border-radius: var(--border-radius);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.generation-failed .error-title {
  color: var(--color-error-text);
}