/* Screens 10, 11 and 14: products, the product form and categories. */
/* Products */
.products-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.products-filter {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 48px;
}

.product-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.product-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  width: 100%;
  text-align: left;
}

.product-row--button {
  min-height: 48px;
}

.product-row__vat,
.product-row__barcode {
  color: var(--text-secondary);
}

.product-row--inactive {
  color: var(--text-secondary);
}

.product-row__badge {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-sm);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Screen 19: users */
.user-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.user-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
}

.user-row__role {
  color: var(--text-secondary);
}

.user-row__locked {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-left: auto;
}

.user-row__badge {
  background: color-mix(in srgb, var(--danger) 15%, var(--surface));
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-sm);
  font-size: var(--font-caption-size);
}

.user-row__lockedAt {
  color: var(--text-secondary);
  font-size: var(--font-caption-size);
}

/* Categories */
.categories-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-lg);
}

.categories-head {
  display: flex;
  gap: var(--space-lg);
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-sm);
  font-size: var(--font-caption-size);
  color: var(--text-secondary);
}

.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.category-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-lg);
  min-height: 56px;
}

.category-row__name {
  flex: 1;
  text-align: left;
  min-height: 48px;
  font-size: var(--font-body-size);
  font-weight: 600;
  background: none;
  border: none;
}

.category-row__count {
  color: var(--text-secondary);
}

.category-row__actions {
  display: flex;
  gap: var(--space-sm);
}

/* Category chip */
.category-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: 48px;
  padding: 0 var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--font-label-size);
  font-weight: 600;
  white-space: nowrap;
}

.category-chip--selected {
  background: var(--primary);
  border: 2px solid var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}

.category-chip__check {
  width: 16px;
  height: 16px;
}

.category-chip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.product-row__categories {
  flex: 1;
  color: var(--text-secondary);
}