/* screens/categories.css — categories screen styles (Stage 9 retrofit owner: this file).
 * The list + add forms sit in components.css .card containers; only the
 * inline-edit row grid and the add-form layout live here. (.cascade-hint
 * moved to screens/sellers.css — its only user is the source-profiles list.) */

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Inline-edit row: name / slug / product count / status pill / sort. */
.category-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto auto;
  gap: var(--brand-size-md);
  align-items: center;
  padding: var(--brand-size-xs) 0;
  border-bottom: var(--brand-line-width) solid var(--brand-color-border-secondary);
}

.category-row:last-child {
  border-bottom: 0;
}

.category-row__slug {
  font-size: var(--brand-font-size-sm);
  overflow-wrap: anywhere;
}

.category-row__count {
  font-size: var(--brand-font-size-sm);
  white-space: nowrap;
}

.category-add {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-sm);
  align-items: flex-start;
}

.category-add .btn {
  margin-top: var(--brand-size-xxs);
}

/* Small screens: wrap the row onto three lines instead of scrolling. */
@media (max-width: 640px) {
  .category-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'name sort'
      'slug slug'
      'count status';
    row-gap: var(--brand-size-xs);
  }

  .category-row__name {
    grid-area: name;
  }

  .category-row__sort {
    grid-area: sort;
  }

  .category-row__slug {
    grid-area: slug;
  }

  .category-row__count {
    grid-area: count;
  }

  .category-row__status {
    grid-area: status;
    justify-self: end;
  }
}