.user-row {
  display: grid;
  grid-template-columns: 34px minmax(210px, 1fr) 150px 90px 138px;
  gap: var(--ui-space-3, 12px);
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--ui-row-divider-color, var(--ui-border-color, #bfd0da));
  color: var(--ui-text, #173044);
}

.user-row b {
  display: block;
  color: var(--ui-text, #173044);
  font-size: var(--type-card-title-size, 12px);
  font-weight: var(--type-card-title-weight, 800);
  line-height: 1.3;
}

.user-row small {
  display: block;
  margin-top: 3px;
  color: var(--ui-muted, #607884);
  font-size: var(--type-helper-font-size, 10px);
  line-height: 1.45;
}

.user-row select,
.user-row button {
  min-height: var(--ui-control-height, 40px);
  padding: 0 var(--ui-button-padding-x, 12px);
  border: 1px solid var(--ui-border-color, #bfd0da);
  border-radius: var(--ui-control-radius, 3px);
  background: var(--ui-input-bg, #fff);
  color: var(--ui-text, #173044);
  font-size: var(--type-button-size, var(--ui-control-font-size, 12px));
}

.user-row button {
  background: var(--ui-accent, #1676a8);
  border-color: var(--ui-accent, #1676a8);
  color: var(--ui-inverse-text, #fff);
}

.user-row .danger-button {
  background: var(--ui-danger, #b35243);
  border-color: var(--ui-danger, #b35243);
  color: var(--ui-inverse-text, #fff);
}

@media (max-width: 820px) {
  .user-row {
    grid-template-columns: 34px 1fr;
  }

  .user-row .user-main,
  .user-row select,
  .user-row .user-row-active,
  .user-row > div {
    grid-column: 2;
  }
}